/* opening.css — the sheet that fills the viewport, the ink on it, the quiet chrome. */
:root {
  --paper: #f1ece2;
  --paper-deep: #e6dfd0;
  --ink: #15141a;
  --chrome: rgba(40, 34, 28, 0.62);
  --tooth-opacity: 0.2;
  --mottle-opacity: 0.05;
  --grain-opacity: 0.045;
}
html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); overflow: hidden; font-family: "IBM Plex Mono", ui-monospace, monospace; -webkit-font-smoothing: antialiased; }
.paper { position: fixed; inset: 0; background:
    radial-gradient(120% 90% at 50% 38%, rgba(255, 253, 247, 0.6) 0%, rgba(255, 253, 247, 0) 60%),
    linear-gradient(160deg, rgba(255, 255, 252, 0.3), rgba(120, 100, 80, 0.05)),
    var(--paper); }
.paper::before { content: ""; position: absolute; inset: 0; background-image: var(--tooth); background-size: 512px 512px; mix-blend-mode: multiply; opacity: var(--tooth-opacity); }
.paper::after { content: ""; position: absolute; inset: 0; background-image: var(--mottle); background-size: 1024px 1024px; mix-blend-mode: multiply; opacity: var(--mottle-opacity); }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(140% 110% at 50% 45%, rgba(0, 0, 0, 0) 60%, rgba(60, 45, 30, 0.09) 100%); mix-blend-mode: multiply; }
.stage { position: fixed; inset: 0; }
.ink { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); mix-blend-mode: multiply; filter: url(#soak); will-change: transform; }
.ink canvas { display: block; width: 100%; height: auto; }
.ink.second { top: auto; }
.grain { position: fixed; inset: -64px; pointer-events: none; background-image: var(--grain); background-size: 256px 256px; opacity: var(--grain-opacity); mix-blend-mode: multiply; }
html[data-grain="off"] .grain { display: none; }
html[data-grain="live"] .grain { animation: grain 0.42s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-22px, 14px); } 40% { transform: translate(18px, -26px); } 60% { transform: translate(-30px, -10px); } 80% { transform: translate(26px, 22px); } 100% { transform: translate(0, 0); } }
.chrome { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; padding: 0 22px 18px; font-size: 11px; letter-spacing: 0.04em; color: var(--chrome); white-space: nowrap; }
.chrome .about { overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-right: 16px; }
.chrome a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(40, 34, 28, 0.25); padding-bottom: 1px; margin-left: 18px; }
.chrome a:hover { color: var(--ink); border-color: currentColor; }
.chrome .label { position: fixed; top: 18px; left: 22px; }
.chrome .label b { font-weight: 500; color: var(--ink); }
@media (max-width: 600px) { .chrome { padding: 0 16px 14px; font-size: 10px; } .chrome .label { top: 14px; left: 16px; } .chrome a { margin-left: 12px; } .chrome .about { display: none; } }
@media (prefers-reduced-motion: reduce) { html[data-grain="live"] .grain { animation: none; } }

.column { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: flex-start; gap: 2.4vw; }
.column .ink { position: static; transform: none; }
@media (max-width: 600px) { .column { top: 44%; gap: 5vw; } }