/* ===== SADIQ // FDE — shared shell ===== */
:root {
    /* fluid type scale — major third-ish, rem+vw for zoom accessibility */
    --step--1: clamp(0.58rem, 0.55rem + 0.12vw, 0.66rem);
    --step-0:  clamp(0.66rem, 0.62rem + 0.2vw, 0.78rem);
    --step-1:  clamp(0.9rem, 0.82rem + 0.4vw, 1.15rem);
    --step-4:  clamp(1.7rem, 1.1rem + 3vw, 3.1rem);
    --step-6:  clamp(2.4rem, 1.4rem + 6vw, 5.2rem);
    --void: #060608;
    --panel: rgba(20, 20, 25, 0.55);
    --line: rgba(232, 232, 236, 0.11);
    --ink: #e8e8ec;
    --dim: #6f6f79;
    --serif: 'Syne', sans-serif;
    --mono: 'Space Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--void); color: var(--ink); font-family: var(--mono); overflow-x: hidden; cursor: none; }
::selection { background: var(--ink); color: var(--void); }
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cursor */
.cur { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .2s; }
body.cur-on .cur { opacity: 1; }
.cur-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; background: #fff; border-radius: 50%; transform: translate(-50%,-50%); }
.cur-ring { position: fixed; top: 0; left: 0; width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%; transform: translate(-50%,-50%); transition: width .25s, height .25s, border-radius .25s; }
body.hover .cur-ring { border-radius: 20%; }
body.hover .cur-ring { width: 54px; height: 54px; }
@media (pointer: coarse) { .cur { display: none; } body { cursor: auto; } }

/* nav */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 80;
    display: flex; justify-content: space-between; align-items: center; padding: 20px 32px;
    backdrop-filter: blur(14px); background: rgba(6,6,8,0.4); border-bottom: 1px solid var(--line);
}
.sig { font-family: var(--serif); font-weight: 700; font-size: 0.95rem; letter-spacing: 2px; text-decoration: none; color: var(--ink); }
.sig span { color: var(--dim); }
.chapters { display: flex; gap: 22px; list-style: none; font-size: 0.62rem; letter-spacing: 2px; }
.chapters a { color: var(--dim); text-decoration: none; transition: color .25s; }
.chapters a:hover, .chapters a.on { color: var(--ink); }
.chapters a i { font-style: normal; opacity: 0.5; margin-right: 4px; }
@media (max-width: 940px) { .chapters { gap: 14px; } .chapters a i { display: none; } }
@media (max-width: 560px) { .chapters { display: none; } }

section { position: relative; padding: 120px 32px 90px; }
.tag { font-size: 0.62rem; letter-spacing: 4px; color: var(--dim); display: block; margin-bottom: 18px; }
.lead { font-family: var(--serif); font-weight: 800; font-size: var(--step-4); letter-spacing: -0.015em; margin-bottom: 30px; text-wrap: balance; position: relative; z-index: 1; }
.lead .g { color: transparent; -webkit-text-stroke: 1px var(--dim); }

/* ===== portal transition system ===== */
/* entry iris: an opaque disc collapses to the centre — you just stepped through */
#iris {
    position: fixed; inset: 0; z-index: 200; pointer-events: none; background: var(--void);
    clip-path: circle(150% at 50% 50%);
    animation: iris-in .7s cubic-bezier(.6,0,.3,1) forwards;
}
@keyframes iris-in { to { clip-path: circle(0% at 50% 50%); } }
/* exit warp: a ringed disc grows from the click point */
.warp {
    position: fixed; z-index: 210; pointer-events: none;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--void);
    box-shadow: 0 0 0 2px rgba(232,232,236,.7), 0 0 40px rgba(232,232,236,.25), inset 0 0 60px rgba(232,232,236,.12);
    transform: translate(-50%,-50%) scale(0);
    transition: transform .55s cubic-bezier(.6,0,.3,1);
}
.warp.go { transform: translate(-50%,-50%) scale(80); }

/* footer */
footer { padding: 80px 32px; text-align: center; border-top: 1px solid var(--line); }
footer .sig { font-size: 1.3rem; margin-bottom: 14px; display: inline-block; }
footer p { font-size: 0.62rem; letter-spacing: 2px; color: var(--dim); line-height: 2.2; }

/* back gate — small return portal, bottom of inner pages */
.gate-back { display: flex; justify-content: center; padding: 10px 0 60px; }
.gate-back a {
    width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
    color: var(--dim); text-decoration: none; font-size: 0.55rem; letter-spacing: 2px; position: relative;
    transition: color .3s;
}
.gate-back a::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 20%, rgba(232,232,236,.5) 30%, transparent 40%, transparent 60%, rgba(232,232,236,.5) 72%, transparent 82%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    animation: spin 9s linear infinite;
}
.gate-back a:hover { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    #iris { display: none; }
}


/* ===== oversized outlined ghost word behind section heads ===== */
section { position: relative; }
.lead[data-ghost]::before {
    content: attr(data-ghost);
    position: absolute; left: -0.06em; top: -0.55em; z-index: -1;
    font-family: var(--serif); font-weight: 800;
    font-size: clamp(3.4rem, 2rem + 10vw, 9rem);
    letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: clamp(1px, 0.14vw, 1.6px) rgba(232,232,236,0.075);
    pointer-events: none; user-select: none;
}

/* ===== scroll progress rail (native scroll-driven, JS fallback) ===== */
.rail { position: fixed; top: 0; right: 0; width: 3px; height: 100vh; z-index: 75; background: rgba(232,232,236,0.06); pointer-events: none; }
.rail i { display: block; width: 100%; height: 100%; background: rgba(232,232,236,0.5); transform: scaleY(0); transform-origin: top; }
@supports (animation-timeline: scroll()) {
    .rail i { animation: railfill linear both; animation-timeline: scroll(root block); }
    @keyframes railfill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
.rail-pct { position: fixed; right: 12px; bottom: 14px; z-index: 75; font: 400 var(--step--1)/1 var(--mono); letter-spacing: 2px; color: var(--dim); pointer-events: none; }

/* manual stillness — mirrors prefers-reduced-motion, driven by the toggle */
body.still *, body.still *::before, body.still *::after { animation-play-state: paused !important; }
body.still #iris { display: none; }
body.still::before { display: none; }

/* ===== quiet ↔ honest slider ===== */
.spectrum { max-width: 640px; margin: 6px 0 42px; }
.spectrum .track { display: flex; align-items: center; gap: 16px; }
.spectrum label { font-size: var(--step--1); letter-spacing: 3px; color: var(--dim); }
.spectrum input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 2px; background: rgba(232,232,236,0.18); outline: none; cursor: pointer; }
.spectrum input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--void); border: 1.5px solid var(--ink); }
.spectrum input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--void); border: 1.5px solid var(--ink); }
.spectrum .out { margin-top: 22px; font-size: var(--step-0); color: var(--dim); line-height: 2.15; min-height: 92px; }
.spectrum .out b { color: var(--ink); font-weight: 400; }
.spectrum .out a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }




/* ===== the den v2 — a geometric hare, watching ===== */
footer.den { padding: 54px 32px 46px; border-top: 0; text-align: center; }
.hare { width: 64px; height: auto; cursor: pointer; display: inline-block;
    filter: drop-shadow(0 0 0 rgba(232,232,236,0)); transition: filter .4s; }
.hare:hover { filter: drop-shadow(0 0 14px rgba(232,232,236,0.18)); }
.hare .ink { fill: var(--ink); }
.hare .cut { fill: var(--void); }
.hare .seam { stroke: var(--void); stroke-width: 1.6; fill: none; stroke-linecap: round; }
/* idle: the whole face considers you, slowly */
.hare .face { transform-box: fill-box; transform-origin: 50% 62%; animation: consider 9s ease-in-out infinite; }
@keyframes consider { 0%,100% { transform: rotate(0deg); } 30% { transform: rotate(-1.6deg); } 70% { transform: rotate(1.3deg); } }
/* blink: the eye-cuts collapse — void closes, ink remains */
.hare .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 6.5s infinite; }
.hare .eye.r { animation-delay: 0.05s; }
@keyframes blink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.06); } 97% { transform: scaleY(1); } }
/* one ear twitches on its own schedule */
.hare .earR { transform-box: fill-box; transform-origin: 50% 92%; animation: hktwitch 8s ease-in-out infinite; }
@keyframes hktwitch { 0%, 82%, 100% { transform: rotate(0deg); } 86% { transform: rotate(-5deg); } 90% { transform: rotate(2deg); } }
/* hover: alert — eyes widen, ears splay a degree */
.hare:hover .eye { animation: none; transform: scaleY(1.3); }
.hare:hover .earL { transform-box: fill-box; transform-origin: 50% 92%; transform: rotate(-2.5deg); }
.hare:hover .earR { animation: none; transform: rotate(2.5deg); }
/* startled (clicked with nowhere to lead) */
.hare.startle { animation: startle .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes startle { 10%,90% { transform: translateX(-1.5px); } 25%,75% { transform: translateX(2.5px); } 40%,60% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
.den .sig { margin-top: 18px; display: block; }
body.still .hare .face, body.still .hare .eye, body.still .hare .earR { animation: none; }
@media (prefers-reduced-motion: reduce) { .hare .face, .hare .eye, .hare .earR, .hare.startle { animation: none; } }

/* ===== exotic layer ===== */

/* [1] cross-document view transitions — progressive, complements the iris */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .28s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* [2] @property-registered shimmer sweeping the display gradient */
@property --shine { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.den .sig {
    background: linear-gradient(100deg, var(--ink) 0%, var(--ink) calc(var(--shine) - 12%),
        #ffffff calc(var(--shine)), var(--ink) calc(var(--shine) + 12%), rgba(232,232,236,0.35) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 7s ease-in-out infinite;
}
@keyframes shine { 0%, 55%, 100% { --shine: -20%; } 80% { --shine: 120%; } }

/* [3] variable-weight breathing — Syne widens as it swells */
.sig, .lead .g { transition: font-variation-settings .5s cubic-bezier(.22,1,.36,1); font-variation-settings: 'wght' 700; }
.sig:hover { font-variation-settings: 'wght' 800; }
.lead:hover .g { font-variation-settings: 'wght' 800; }

/* [4] ghost words drift on their own scroll timeline */
@supports (animation-timeline: view()) {
    .lead[data-ghost]::before { animation: ghost-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes ghost-drift { from { transform: translateX(0.12em); } to { transform: translateX(-0.12em); } }
}

/* [5] cap-height leading trim on display type */
@supports (text-box: trim-both cap alphabetic) {
    .lead { text-box: trim-both cap alphabetic; }
}

/* [6] paragraph-level typesetting: no orphans, hung quotes */
.say, .myst p, .pillar p, .stop p, .cell p { text-wrap: pretty; }
blockquote { hanging-punctuation: first; }

/* [7] real numerals: tabular, slashed zeros, on every readout */
.rail-pct, .pin-d, .stop .where, .tr .yr, .day, .reel-stats b, .tally div b {
    font-variant-numeric: tabular-nums slashed-zero; }

/* [8] link underlines that move — thickness + offset are animatable now */
p a, .say a, .spectrum .out a {
    text-decoration-line: underline; text-decoration-color: rgba(232,232,236,0.25);
    text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: text-decoration-color .3s, text-decoration-thickness .3s, text-underline-offset .3s, color .3s;
}
p a:hover, .say a:hover, .spectrum .out a:hover {
    color: var(--ink); text-decoration-color: var(--ink);
    text-decoration-thickness: 2px; text-underline-offset: 5px;
}

/* [9] pointer-tracked spotlight on cards (JS feeds --mx/--my) */
.spot { position: relative; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .4s;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(232,232,236,0.07), transparent 65%); }
.spot:hover::after { opacity: 1; }

/* [10] nav tracking expands under the pointer — kinetic type, quietly */
.chapters a { transition: color .25s, letter-spacing .35s cubic-bezier(.22,1,.36,1); }
.chapters a:hover { letter-spacing: 3.5px; }

/* [11] masked marquee — edges dissolve into the void */
.mq { overflow: hidden; margin: 34px 0 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: inline-flex; gap: 44px; white-space: nowrap; padding-right: 44px;
    font-size: var(--step--1); letter-spacing: 4px; color: var(--dim);
    animation: mq 36s linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq-track i { font-style: normal; opacity: .4; }
@keyframes mq { to { transform: translateX(-50%); } }
body.still .mq-track { animation-play-state: paused; }

/* [12] monochrome browser chrome: scrollbar, focus, form accents */
html { scrollbar-width: thin; scrollbar-color: rgba(232,232,236,0.25) transparent; scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(232,232,236,0.22); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 1.5px solid rgba(232,232,236,0.6); outline-offset: 3px; border-radius: 2px; }
:root { accent-color: var(--ink); }

/* ------------------------------------------------------------------
   she borrowed this book and wrote in the edge of it before giving it back.
   he never opened it far enough to notice.

       ZW50YW5nbGVk

   ------------------------------------------------------------------ */


/* ===== marginalia — words for things this site is made of.
   set at 4% ink: present if you look, invisible if you don't. ===== */
.gloss { position: absolute; right: 22px; bottom: 16px; z-index: 3; pointer-events: auto;
    font-family: var(--mono); font-size: .42rem; letter-spacing: 4px; text-transform: uppercase;
    color: rgba(232,232,236,0.04); transition: color .8s ease; user-select: none; }
.gloss:hover { color: rgba(232,232,236,0.42); }
.gloss::after { content: attr(data-def); display: block; margin-top: 5px; letter-spacing: 2px;
    text-transform: none; opacity: 0; transition: opacity .8s ease; }
.gloss:hover::after { opacity: .55; }
@media (max-width: 760px) { .gloss { display: none; } }

/* ===================================================================
   phones. the site was drawn on a wide screen and needs telling.
   =================================================================== */
@media (max-width: 760px) {
    /* nothing may push the page sideways */
    html, body { overflow-x: hidden; max-width: 100%; }
    section { padding-left: 20px; padding-right: 20px; }

    /* the giant ghost word behind headings causes horizontal scroll */
    .lead[data-ghost]::before { display: none; }

    /* display type sized for a thumb, not a monitor */
    .lead { font-size: clamp(1.45rem, 7.4vw, 2.2rem); line-height: 1.16; }
    .say, .pbody { font-size: .78rem; line-height: 1.95; }
    .sub-tag, .shelf-tag { font-size: .52rem; letter-spacing: 2.5px; margin-top: 44px; }

    /* every grid collapses rather than squeezing */
    .bento, .works, .deckrow, .atlas, .stations, .pillars,
    .myst-grid, .cells, .frontier, .films, .games { grid-template-columns: 1fr !important; }
    .cell, .myst, .stop, .station, .pillar, .game, .tr { min-width: 0; }

    /* tap targets, but never on the terminal, which draws its own */
    nav a, .chapters a, .kbtn, .bbtn, .cy-go { min-height: 44px; }

    /* anything wide scrolls inside itself instead of breaking the page */
    .chart, .mq, .shelf { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* the terminal is self-contained: keep global rules out of it */
    .tm, .tm * { max-width: none; }
    .tm { max-width: 100%; }
    .chart svg, .trek-art svg { min-width: 460px; }

    /* footer hare should not dominate a small screen */
    .hare { width: 48px; }
    footer.den { padding: 34px 0 26px; }
}

@media (max-width: 420px) {
    section { padding-left: 16px; padding-right: 16px; }
    .lead { font-size: clamp(1.3rem, 8vw, 1.8rem); }
    .say, .pbody { font-size: .74rem; }
}

/* pointer-based effects are meaningless on touch and cost frames */
@media (hover: none) {
    .spot::after { display: none; }
    .cur, .cur-dot, .cur-ring { display: none !important; }
    body { cursor: auto; }
}