/* farzi v3 — one screen, no scrolling, on every device (the user, 2026-11-04: "I don't want to be scrolling. Bang-on,
   it should be in one frame, for all different devices"). Three layouts, each exactly one screen tall:
   A · the Figma frame (1920 × 1645) scaled to FIT the window, u = min(vw/1920, svh/1645), centred on black —
       wherever that keeps the paragraph readable (≥ 710 px wide and ≥ 600 px tall: desktops, laptops, tablets);
   B · portrait phones: painting → black melt → text, stacked to fit the height;
   C · landscape phones and short windows: painting left, text right. */

/* ── F.1 Tokens */
@property --fade{syntax:'<length-percentage>';inherits:true;initial-value:28%}   /* animatable: The Future's shorter melt eases in */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Poppins Fallback";src:local("Arial"),local("ArialMT");size-adjust:113.73%;ascent-override:92.33%;descent-override:30.78%;line-gap-override:8.79%}
:root{
  --gold:#E6C47A; --gold-hi:#FFF4D6; --ink:#fff; --today:#DADADA; --icon:#CBCBCB; --tab:rgb(255 255 255/.72);
  --io:cubic-bezier(.65,0,.35,1); --out:cubic-bezier(.16,1,.3,1); --in:cubic-bezier(.5,0,.75,0);
}
html,body{margin:0;height:100%;background:#000;color:var(--ink);-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{font:400 16px/1.6 Poppins,"Poppins Fallback",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  overflow:hidden;-webkit-tap-highlight-color:transparent}
/* exactly one screen: svh = the height with the browser's toolbars showing, so nothing ever hides behind them */
.page{position:relative;height:100vh;height:100svh;overflow:hidden}
.frame{position:absolute;overflow:clip;touch-action:pinch-zoom;font-size:var(--p)}
.copywrap{display:grid;z-index:3;min-width:0}
.panel{grid-area:1/1;min-width:0;scroll-margin-top:300vh}   /* a #us / #future fragment jump scrolls nowhere */
.js .panel{visibility:hidden}
.js .panel.is-shown{visibility:visible}
.sr-only{position:absolute;top:0;left:0;margin:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* margin 0: #announce (a <p>) must not push the page 17 px past one screen */

/* ── F.2 Art panel: Figma's centred cover, 90 % opacity, the black melt */
.art{position:relative;z-index:2;overflow:clip;container-type:size;--fade:max(28%,calc(var(--t)*5.35));
  --melt:linear-gradient(#000 calc(100% - var(--fade)),rgb(0 0 0/.78) calc(100% - var(--fade)*.8),
    rgb(0 0 0/.52) calc(100% - var(--fade)*.6),rgb(0 0 0/.28) calc(100% - var(--fade)*.4),
    rgb(0 0 0/.10) calc(100% - var(--fade)*.2),transparent);
  -webkit-mask-image:var(--melt);mask-image:var(--melt)}
.art picture{position:absolute;inset:0;display:block}
.art img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
  object-position:calc(var(--fx)*100%) calc(var(--fy)*100%)}
@supports (width:1cqw){.art img{--iw:max(100cqw,100cqh*var(--ar));--ih:max(100cqh,100cqw/var(--ar));
  object-position:clamp(100cqw - var(--iw),var(--ax)*100cqw - var(--fx)*var(--iw),0px)
                  clamp(100cqh - var(--ih),var(--ay)*100cqh - var(--fy)*var(--ih),0px)}}
.ink{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3}
.ink[hidden]{display:none}
/* Figma's 90 % layer opacity, as a 10 % black veil above the pictures AND the GL canvas (z 3) and below the tagline,
   so css, gl and rest frames stay pixel-identical */
.art::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:rgb(0 0 0/.1)}
/* rest state */
.js:not(.app) .art picture{opacity:0}
.js:not(.app)[data-tab=me] picture[data-tab=me],.js:not(.app)[data-tab=us] picture[data-tab=us],
.js:not(.app)[data-tab=future] picture[data-tab=future],.js:not(.app)[data-tab=writings] picture[data-tab=writings]{opacity:1}
.app .art picture{opacity:0;z-index:1}
.app .art picture.is-active{opacity:1}
/* §6.6 css mode (D-a, D-c): one feathered linear-gradient wipe, driven by --pm (0 → 1) from app.js. The feather is
   20 % of the sweep with smoothstep-like stops; stops run from −20 % to 120 %, so p 0 is exactly transparent and p 1
   exactly opaque. Forward enters from the right and sweeps left, the top leading by 8° (262deg); backward is 98deg. */
.app .art picture.in{z-index:2;opacity:1;--wf:calc(var(--pm,0)*120%);
  --wipe:linear-gradient(var(--wang,262deg),#000 calc(var(--wf) - 20%),rgb(0 0 0/.84) calc(var(--wf) - 15%),
    rgb(0 0 0/.5) calc(var(--wf) - 10%),rgb(0 0 0/.16) calc(var(--wf) - 5%),transparent var(--wf));
  -webkit-mask-image:var(--wipe);mask-image:var(--wipe)}
.app .art.back picture.in{--wang:98deg}
.app .art picture.in img{transform:scale(var(--zi,1));transform-origin:calc(var(--ax)*100%) calc(var(--ay)*100%)}
.is-switching .art picture.is-active:not(.in) img{transform:scale(var(--zo,1));transform-origin:calc(var(--ax)*100%) calc(var(--ay)*100%)}
.app .art picture.fadein{z-index:2;opacity:var(--pm,0)}   /* fade mode (reduced motion) */

/* Crops. Desktop = Figma's centred cover of the FULL source (fx = ax, fy = ay = the fraction of the free space):
   me   1024×1011 source, img = rows 115–1011 → Figma shows rows 147–864: fy = (147.04 − 115)/(896 − 716.92) = .1789
   us   1647×926 source, img = cols 0–1646 → Figma shows cols 162–1485: fx = 162.2/(1646 − 1322.6) = .5016
   future 1024×1024 source, img = rows 73–1002 → Figma shows rows 153.5–870.5: fy = 80.54/(929 − 716.92) = .3798 */
picture[data-tab=me]    {--ar:2.041514;--fx:.5;--fy:.5;--ax:.5;--ay:.5}   /* 1400×686: the glider photo, 13 % of flat sky trimmed */
picture[data-tab=us]    {--ar:1.777538;--fx:.5016;--fy:.5;--ax:.5016;--ay:.5}   /* 1646×926 → 1600×900 */
picture[data-tab=future]{--ar:1.102362;--fx:.5;--fy:.3798;--ax:.5;--ay:.3798}  /* 1400×1270 */

/* ── F.3 Type, tagline, bullet, bird */
.tag{z-index:5;margin:0;font-size:var(--t);line-height:1.08;letter-spacing:0;text-shadow:0 0 .9em rgb(0 0 0/.35);pointer-events:none}
.tl{display:block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}  /* masks for rises; keeps descenders */
.tli{display:inline-block}
.b,.m{font-weight:700}.d{font-weight:300;color:var(--today)}   /* Figma: Bold / Bold gold / Light */
.ing{display:inline-block}
.magic{color:var(--gold);text-shadow:none;pointer-events:auto;cursor:default}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .magic{background:linear-gradient(105deg,var(--gold) 42%,var(--gold-hi) 50%,var(--gold) 58%) 100% 0/300% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent}}
.js:not(.app)[data-tab=future] .ing,.app.ing-off .ing{opacity:0}
.para{margin:0;font-size:var(--p);font-weight:500}   /* Figma sets the paragraph in Poppins Medium */
.line{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
.line-in{display:block}
.para.split .seg{display:block}
.para.split br{display:none}
/* §6.7: incoming lines wait in their masks */
.panel.pre .line-in{transform:translateY(100%);opacity:.2}
.panel.pre .para:not(.split),.panel.pre .x,.rm .panel.pre .line-in{opacity:0}
.rm .panel.pre .line-in{transform:none}
.bullet{z-index:5;fill:var(--gold);rotate:-12deg;pointer-events:none}
::selection{background:var(--gold);color:#000}

/* ── F.4 Sparkles, orbits */
.spark{position:absolute;rotate:-12deg;pointer-events:none}
.spark .turn,.spark svg{position:absolute;inset:0;width:100%;height:100%}
.spark .star{fill:var(--gold)} .spark .glint{fill:var(--gold-hi);opacity:0}
.spark.tl{z-index:1}   /* behind the painting: only its left arm peeks out */
.spark.tr{z-index:5}
.orbits{position:absolute;--op:.7;transform-origin:117% 55.6%;opacity:var(--op);z-index:1;pointer-events:none}
.ring{transform-box:view-box;transform-origin:309px 401px;transform:rotate(calc(var(--base) + var(--d,0deg)));transition:transform 1.6s var(--io)}
.ring:nth-of-type(2){transition-delay:.06s}.ring:nth-of-type(3){transition-delay:.12s}.ring:nth-of-type(4){transition-delay:.18s}
.colony{opacity:0}
.rm .ring{transition:none} .rm .tab{transition-duration:.15s}

/* ── F.5 Tabs (§F3): fixed, real text, gold sparkle to the LEFT of the active label; a dark capsule only once scrolled */
.nav{position:fixed;inset:0 0 auto;z-index:10;container-type:inline-size;pointer-events:none}
.tabs{position:absolute;display:flex;gap:1.5em;pointer-events:auto;font:400 16px/1 Poppins,"Poppins Fallback",sans-serif;
  letter-spacing:.02em;--tp:max(.6em,calc(22px - .5em))}   /* tab height = 1em + 2 tp ≥ 44 px */
.tabs::before{content:"";position:absolute;z-index:-1;inset:calc(var(--tp) - .62em) -.85em calc(var(--tp) - .62em) -1.55em;
  border-radius:999px;background:rgb(0 0 0/.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 1.2em .4em rgb(0 0 0/.35);opacity:0;transition:opacity .3s;pointer-events:none}
.scrolled .tabs::before{opacity:1}
.tab{position:relative;padding:var(--tp) .25em;color:var(--tab);text-decoration:none;white-space:nowrap;transition:color .3s}
.tab::after{content:"";position:absolute;inset:0 -.75em}   /* the gap between labels belongs to the tabs either side: no dead taps */
@media (hover:hover){.tab:hover{color:rgb(255 255 255/.92)}} .tab[aria-selected=true]{color:#fff}   /* hover only where it can't stick after a tap */
.tab:active{scale:.96}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.tab-mark{position:absolute;left:0;top:50%;width:.62em;height:.62em;margin-top:-.31em;fill:var(--gold);pointer-events:none}
html:not(.js) .tab-mark{display:none}
.panel:focus-visible{outline:none} .panel:focus-visible .para{outline:2px solid var(--gold);outline-offset:12px;border-radius:8px}
@media (forced-colors:active){.tab[aria-selected=true]{text-decoration:underline}}

/* ── Full-width, one screen, every device. The user, 2026-11-04: "I want it horizontally and vertically to be fully
   covered" and "at the bottom it should be black bgd, and then it should slowly fade to show the painting. Like how it
   was in the original figma design". So: Figma's vertical order, edge to edge. The painting spans the whole width and
   stops above the text; its lower part melts slowly into the black; the tagline sits in that melt; the paragraph sits
   on solid black at the bottom. Text keeps Figma's left axis (x 100 / 135 of 1920). */
:root{--gl:max(20px,calc(100vw*100/1920));--gr:max(20px,calc(100vw*156/1920));
  --navy:calc(env(safe-area-inset-top) + max(26px,3.2vh))}
@supports (height:1svh){:root{--navy:calc(env(safe-area-inset-top) + max(26px,3.2svh))}}
.frame{inset:0;display:grid;
  --p:clamp(13px,min(1.95vw,2.6svh),36px);--t:calc(var(--p)*1.2174);   /* Figma's paragraph : tagline ratio (39.43 : 48) */
  --sp:clamp(22px,min(3.1vw,5.5svh),60px);
  --gb:calc(max(12px,2.6svh) + env(safe-area-inset-bottom));   /* a slim black foot, no dead space */
  grid-template-columns:var(--gl) minmax(0,1fr) var(--gr);
  grid-template-rows:minmax(0,1fr) auto var(--gb);
  grid-template-areas:"art art art" ". copy ." ". . ."}
.frame::before{content:"";grid-area:1/1/-1/-1;align-self:start;height:min(24svh,200px);z-index:3;pointer-events:none;
  background:linear-gradient(rgb(0 0 0/.5),transparent)}   /* keeps the tabs legible on any painting */
.art{grid-area:art;--fade:26%;transition:--fade 1s var(--io)}   /* edge to edge; a short, soft melt into the black: the painting dominates */
html[data-tab=me] .art{--fade:24%}
html[data-tab=future] .art{--fade:22%}   /* the skyline stays above the melt */
/* a soft darkening rising from the bottom-left corner under the tagline: legible on any painting (US!'s white keyboard);
   above the pictures and the GL canvas (z 3), so transitions stay pixel-identical */
.art::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(75% 60% at 0% 100%,rgb(0 0 0/.62),rgb(0 0 0/.3) 45%,transparent 75%)}
.tag{grid-area:art;align-self:end;justify-self:start;margin:0 0 calc(var(--p)*.8) var(--gl);
  text-shadow:0 0 .35em rgb(0 0 0/.6),0 0 1em rgb(0 0 0/.45)}   /* in the painting's melt, as in Figma */
.tli.m{filter:drop-shadow(0 0 .2em rgb(0 0 0/.75))}   /* "magic" is clipped-text gold: a shadow must be a filter */
.copywrap{grid-area:copy;margin-top:calc(var(--p)*.45)}   /* on solid black */
.para{padding:.2em 0 .14em .9em;margin-bottom:-.14em;line-height:1.5;max-width:min(100%,60em)}   /* long flowing lines (the user: "let the line flow") */
.bullet{grid-area:copy;align-self:start;justify-self:start;font-size:var(--p);width:1.446em;height:1.446em;
  margin:calc(.45em + .227em) 0 0 -.723em}   /* centred on the text axis and on line 1 */
.spark.tl{z-index:5;left:calc(var(--gl) - var(--sp)/2);top:calc(var(--navy) - var(--sp)/2);width:var(--sp);height:var(--sp)}
.spark.tr{z-index:5;right:calc(var(--gr)*.45 - var(--sp)*.45);top:calc(var(--navy) - var(--sp)*.45);width:calc(var(--sp)*.9);height:calc(var(--sp)*.9)}
.orbits{z-index:4;right:0;bottom:0;height:clamp(150px,46svh,720px);width:auto;aspect-ratio:264/721}   /* gold hairlines on the black */
.tabs{top:var(--navy);right:calc(var(--gr) - .25em);translate:0 -50%;font-size:clamp(14px,min(1.15vw,2.1svh),22px)}
.tab{text-shadow:0 1px 10px rgb(0 0 0/.6)}
/* crops, landscape (chosen from rendered candidates by two independent art-director reviews, 2026-11-04):
   Me?! = the glowing shoreline along the top edge, the moonlight path, the couple's heads at 67 % of the painting;
   US! = kid, laptop, heroes; The Future :) = the full Empire State, spire tip 4.5 % below the top, skyline rising
   out of a shorter melt */
picture[data-tab=me]{--fx:.53;--fy:.37;--ax:.5;--ay:.37}   /* the glider at 37 %, the truck clear above the melt */
picture[data-tab=us]{--fx:.52;--fy:.55;--ax:.5;--ay:.48}
picture[data-tab=future]{--fx:.5;--fy:.239;--ax:.5;--ay:.045}


/* portrait screens (phones, iPads): bigger type, tabs centred, crops for a tall painting */
@media (orientation:portrait){
  html[data-tab] .art{--fade:30%}
  .frame{--p:clamp(14px,min(4vw,2.4svh),24px);--sp:clamp(22px,4vw,40px)}   /* 4vw: "You can find me building supersonic" stays one line on a 375–390 px phone */
  .para{padding-right:max(0px,calc(5svh - 12px));text-wrap:pretty}   /* clears the rings; no one-word last lines */
  .orbits{height:30svh;--op:.45}
  .tabs{left:50%;right:auto;translate:-50% -50%;font-size:clamp(min(15px,4.6vw),2.2vw,20px);gap:0}
  .tab{padding-inline:.9em;text-shadow:0 0 .2em rgb(0 0 0/.6),0 1px 10px rgb(0 0 0/.6)} .tab::after{inset:0}   /* padded, not gapped: every tap lands on a tab */
  .frame::before{background:linear-gradient(rgb(0 0 0/.62),rgb(0 0 0/.3) 45%,transparent)}   /* the tabs stay legible over US!'s and The Future's pale skies */
  .spark.tl{top:calc(var(--navy) + 44px - var(--sp)/2)}
  .spark.tr{width:16px;height:16px;right:12px;top:calc(var(--navy) - 8px)}
  picture[data-tab=me]{--fx:.535;--fy:.5;--ax:.5;--ay:.5}       /* a slice holding the glider and the truck */
  picture[data-tab=us]{--fx:.55;--fy:.45;--ax:.5;--ay:.55}        /* kid + laptop + heroes */
  picture[data-tab=future]{--fx:.14;--fy:.24;--ax:.30;--ay:.06}   /* Empire State spire, sky above it */
}
@media (orientation:portrait) and (max-width:339.98px){.spark.tr{display:none}.tab{padding-inline:.8em}}
/* short landscape screens (phones on their side): smaller type so the painting keeps most of the height */
@media (orientation:landscape) and (max-height:499.98px){
  .frame{--p:clamp(12px,min(1.9vw,3.6svh),16px)}
  .para{text-wrap:pretty}
  .orbits{display:none}
}

/* ── 5 Without JS (pure-CSS :target tabs) and the pre-app state */
html:not(.js) .panel{visibility:hidden}
html:not(.js) .panel:target,html:not(.js) .frame:not(:has(.panel:target,.w-essay:target)) #me,
html:not(.js) .frame:has(.w-essay:target) #writings{visibility:visible}
html:not(.js) .art picture{display:none}
html:not(.js) .frame:not(:has(.panel:target,.w-essay:target)) picture[data-tab=me],
html:not(.js) .frame:has(#me:target) picture[data-tab=me],
html:not(.js) .frame:has(#us:target) picture[data-tab=us],
html:not(.js) .frame:has(#future:target) picture[data-tab=future],
html:not(.js) .frame:has(#writings:target,.w-essay:target) picture[data-tab=writings]{display:block}
html:not(.js) .frame:has(#writings:target,.w-essay:target) :is(.tag,.bullet){opacity:0}
html:not(.js) .frame:has(#future:target) .ing{display:none}
html:not(.js) body:not(:has(.panel:target,.w-essay:target)) #tab-me,html:not(.js) body:has(#me:target) #tab-me,
html:not(.js) body:has(#us:target) #tab-us,html:not(.js) body:has(#future:target) #tab-future,
html:not(.js) body:has(#writings:target,.w-essay:target) #tab-writings{color:#fff}
.js:not(.app)[data-tab=me] #me,.js:not(.app)[data-tab=us] #us,.js:not(.app)[data-tab=future] #future,
.js:not(.app)[data-tab=writings] #writings{visibility:visible}

/* ── 7.3 Gold dust ("ing" → Future) */
.fx{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.fx svg{position:absolute;fill:var(--gold);opacity:0;filter:drop-shadow(0 0 3px rgb(230 196 122/.7))}

/* ── 7.1 Intro failsafe: visible by 2.5 s */
.js.intro .reveal,.js.intro .copywrap{opacity:0;animation:farzi-failsafe 0s 2.5s forwards}
@keyframes farzi-failsafe{to{opacity:var(--op,1)}}

/* ?test&hidetag (AC 33) */
.hide-tag .tag{visibility:hidden}

/* ── F.6 Writings (the 4th tab): faraaz.blog's essays, 2021–2024, on indigo ink paper flecked with gold leaf. The index
   is a ledger (newest first, years in gold) beside a pull-quote pane; an essay opens into a paginated reader: CSS
   columns in a fixed-height box, one spread = one scroll step of that box (overflow:hidden, so only app.js moves it).
   The page itself still never scrolls. */
picture[data-tab=writings]{--ar:1.6;--fx:.5;--fy:.5;--ax:.5;--ay:.5}
html[data-tab=writings] .art{--fade:48%}   /* the paper melts into black behind the ledger, like the paintings behind the paragraphs */
.tag,.bullet{transition:opacity .45s var(--io)}
html[data-tab=writings] .tag,html[data-tab=writings] .bullet{opacity:0}   /* the ledger takes the tagline's corner */
html[data-tab=writings] .magic{pointer-events:none}   /* the hidden word must not catch clicks or swipes meant for the ledger */
.orbits{transition:opacity .6s var(--io)}
html[data-tab=writings] .orbits{--op:.5}
.spark.tl{transition:opacity .4s var(--io)}
.w-reading .spark.tl,.w-reading .orbits{opacity:0}   /* the back link takes the sparkle's place */
.art::after{transition:background-color .7s var(--io)}
.w-reading .art::after{background:rgb(0 0 0/.66)}   /* lights down for reading: the gold flecks become texture */
.w{position:absolute;inset:0;font-size:calc(var(--wf)*var(--wk,1));
  --wf:calc(var(--p)*1.1);   /* the ledger speaks at the paragraphs' size */
  --rx:max(20px,5.5vw);
  --rt:calc(var(--navy) + max(30px,4.2svh));
  --rb:calc(var(--gb) + max(46px,6svh))}
.js .w:not(.reading):not(.w-swap) .w-reader,.js .w.reading:not(.w-swap) .w-index{visibility:hidden}
.js .w.w-swap:not(.reading) .w-reader{pointer-events:none}   /* closing: the fading reader never swallows a click meant for the ledger */
.panel.pre .w-reader{opacity:0}

/* the index: the ledger sits where the other tabs' paragraph sits (bottom left, no dead band under it); the pull-quote
   hangs top right, on the paper, and the orbits fill the corner below it */
.w-index{position:absolute;top:calc(var(--navy) + max(28px,4svh));bottom:var(--gb);left:var(--gl);right:var(--gr);
  text-shadow:0 0 .5em rgb(5 7 14/.9),0 0 .16em rgb(5 7 14/.8);   /* a fleck never shows through a letter */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);column-gap:max(32px,5.5vw);
  grid-template-rows:1fr auto auto auto;grid-template-areas:". peek" "kick peek" "list peek" "lost peek"}
.w-index::before{content:"";grid-area:kick/kick/lost/kick;z-index:-1;margin:-3.5em -4em -1.5em -5em;pointer-events:none;
  background:radial-gradient(farthest-corner,rgb(4 6 12/.78),rgb(4 6 12/.74) 52%,rgb(4 6 12/.3) 82%,transparent);transition:opacity .9s var(--io)}   /* a pool of ink under the ledger: like a manuscript, the gold stays in the margins */
.w.pre .w-index::before{opacity:0}
.w-kick,.w-lost,.w-qc{text-shadow:0 0 1px #05070e,0 0 3px #05070e,0 0 5px #05070e,0 0 9px rgb(5 7 14/.9)}   /* small type: specks stay out of the letters */
.w-min,.w-year:not(:empty){justify-self:start;background:rgb(5 7 14/.66);box-shadow:0 0 .55em .32em rgb(5 7 14/.66);border-radius:.5em}   /* digits must never misread: a soft ink backing */
.w-min{justify-self:end}
.w-kick{grid-area:kick;margin:0 0 .95em;font-size:.72em;font-weight:500;letter-spacing:.05em;color:var(--gold)}
.w-list{grid-area:list;list-style:none;margin:0;padding:0}
.w-row{border-top:1px solid rgb(255 255 255/.1)}
.w-row:last-child{border-bottom:1px solid rgb(255 255 255/.1)}
.w-row{transition:border-color .7s var(--io) .1s}
.w.pre .w-row,.w.pre .w-row.y:not(:first-child){border-color:transparent;transition:none}   /* the rules are drawn with the rows, not before them */
.w-row.y:not(:first-child){border-top-color:rgb(230 196 122/.3)}   /* a new year: a gold rule */
.js.intro .w-row,.js.intro .w-row.y:not(:first-child){border-color:transparent}   /* a first visit straight to #writings: no empty rules before the rows rise */
.w-link{display:block;padding:.5em 0;color:rgb(255 255 255/.8);text-decoration:none;transition:color .25s;-webkit-tap-highlight-color:transparent}
.w-link .line-in{display:grid;grid-template-columns:3.3em minmax(0,1fr) auto;column-gap:.7em;align-items:baseline}
.w-year{font-size:.78em;font-weight:500;letter-spacing:.05em;color:var(--gold);font-variant-numeric:tabular-nums}
.w-t{font-weight:500;line-height:1.3;text-wrap:balance;text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:.3em;transition:text-decoration-color .3s}
.w-min{font-size:.72em;color:rgb(255 255 255/.6);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .25s}
.w-link:focus-visible{color:#fff} .w-link:focus-visible .w-t{text-decoration-color:var(--gold)} .w-link:focus-visible .w-min{color:rgb(255 255 255/.75)}
@media (hover:hover){.w-link:hover{color:#fff} .w-link:hover .w-t{text-decoration-color:var(--gold)} .w-link:hover .w-min{color:rgb(255 255 255/.75)}}
.w-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.w-lost{grid-area:lost;margin:1.25em 0 0;font-size:.66em;line-height:1.6;color:rgb(255 255 255/.55);text-wrap:pretty}   /* .55: ≥ 4.5:1 on the ink */
.w-ll{color:rgb(255 255 255/.62);margin-right:.3em}
.w-lt{white-space:nowrap}
.w-peek{grid-area:peek;align-self:start;justify-self:start;margin:max(8px,5svh) 0 0;max-width:22em}
.w-qm{display:block;width:1.9em;height:auto;fill:var(--gold);margin:0 0 .9em}
.w-q{margin:0;font-size:1.6em;font-weight:300;line-height:1.34;color:#fff;white-space:pre-line;text-wrap:balance}
.w-qc{display:flex;flex-wrap:wrap;gap:.25em .9em;margin-top:1.25em;font-size:.7em;letter-spacing:.04em;color:rgb(255 255 255/.6)}
.w-qt{color:var(--gold)}

/* the reader */
.w-reader{position:absolute;inset:0;--rf:clamp(15px,calc(.55vw + .9svh + 3px),21px)}
.w-top{position:absolute;left:var(--gl);right:calc(var(--gr) + var(--tabsw,40vw) + 2em);top:var(--navy);translate:0 -50%;z-index:2;display:flex;align-items:center;gap:.9em;min-width:0;
  font:400 clamp(14px,min(1.15vw,2.1svh),22px)/1 Poppins,"Poppins Fallback",sans-serif;letter-spacing:.02em}
.w-back{display:flex;align-items:center;gap:.5em;padding:.75em .3em;margin-left:-.3em;color:rgb(255 255 255/.75);text-decoration:none;white-space:nowrap;
  text-shadow:0 1px 10px rgb(0 0 0/.6);transition:color .25s}
.w-back svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:translate .3s var(--out)}
@media (hover:hover){.w-back:hover{color:#fff} .w-back:hover svg{translate:-3px 0}}
.w-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.w-run{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgb(255 255 255/.55);padding-left:.9em;border-left:1px solid rgb(255 255 255/.18);transition:opacity .3s}
.w-reader.p1 .w-run{opacity:0}
.w-pages{position:absolute;top:var(--rt);bottom:var(--rb);left:var(--rx);right:var(--rx);container-type:size;font-size:var(--rf)}
.w-em1{position:absolute;top:0;left:0;width:1em;height:1em;visibility:hidden;pointer-events:none}   /* app.js re-paginates when this 1em probe resizes (text-only zoom) */
.w-essay{position:relative;height:100%;max-width:36em;margin:0 auto;overflow:hidden;columns:1px 1;column-gap:3.4em;column-fill:auto;   /* 1px: WebKit only paginates a multicol box whose width or count is set */
  line-height:1.66;color:#e7e2d9;overflow-wrap:break-word;scroll-margin:300vh}   /* scroll-margin: a #slug jump scrolls nothing */
.w-eh{margin:0 0 1.5em}
.w-em{margin:0 0 .8em;font-size:.7em;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.w-et{margin:0;font-size:1.75em;font-weight:600;line-height:1.16;color:#fff;text-wrap:balance}
.w-et:focus{outline:none}
.w-eq{display:none;margin:1.5em 0 0;padding-top:1.2em;border-top:1px solid rgb(230 196 122/.35);max-width:24em;
  font-size:1.12em;font-weight:300;line-height:1.5;color:rgb(255 255 255/.7)}
@container (min-width:44em){   /* a spread: the title page on the left, the essay from the right-hand page on */
  .w-essay{columns:auto 2;max-width:71.4em;column-rule:1px solid rgb(255 255 255/.08)}
  .w-eh{height:100%;margin:0;padding-bottom:8%;box-sizing:border-box;break-after:column;display:flex;flex-direction:column;justify-content:safe center}
  .w-eh::before,.w-eh::after{content:"";flex:1 1 0}   /* centring that older iOS (no `safe center`) also gets; both spacers shrink to 0 if the page overflows */
  .w-et{font-size:2.5em}
  .w-eq{display:block}
}
@container (min-width:44em) and (max-height:24em){.w-eq{display:none}.w-et{font-size:1.9em}}   /* a short spread: the title page must fit (after the rule above, which it overrides) */
.w-eb p{margin:0 0 .9em;widows:3;orphans:3}   /* no page starts or ends on a lone line */
.w-eb p>strong:only-child{display:block;margin-top:1.2em;color:#fff;font-weight:600}   /* the essays' bold lines are their subheads */
.w-eb ul{margin:0 0 .9em;padding-left:1.25em}
.w-eb li{margin-bottom:.25em}
.w-eb li::marker{color:var(--gold)}
.w-eb>p:first-of-type::first-line{color:#fff;font-weight:500}   /* the essay steps out of its title page */
.w-note{margin:0 0 1.5em;padding:.15em 0 .2em 1em;border-left:2px solid var(--gold);break-inside:avoid;
  font-size:.92em;line-height:1.55;color:rgb(255 255 255/.8)}   /* an author's note above an essay (Hope's disclaimer) */
.w-notel{display:block;margin-bottom:.35em;font-size:.72em;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.w-fig{margin:1.2em 0 1.4em;break-inside:avoid}
.w-fig img{display:block;width:auto;max-width:100%;height:auto;max-height:46cqh;margin:0 auto;border-radius:3px}
.w-fig.narrow img{max-width:74%}
.w-fig figcaption{margin-top:.7em;font-size:.76em;color:rgb(255 255 255/.5);text-align:center}
.w-pyramid svg{display:block;width:100%;max-width:26em;max-height:40cqh;margin:0 auto;overflow:visible}
.pyr-steps rect{fill:rgb(230 196 122/.06);stroke:var(--gold);stroke-width:1.2}
.pyr-steps rect:last-child{fill:rgb(230 196 122/.22)}
.pyr-text{fill:#f1ece3;font:400 15px Poppins,"Poppins Fallback",sans-serif}
.w-pad{display:none;height:100%;break-before:column}
.w-pad.on{display:block}
.w-end{display:inline-block;width:.85em;height:.85em;margin-left:.5em;vertical-align:-.06em;fill:var(--gold);rotate:-12deg}   /* the end, inline: it can never spill onto a page of its own */
.w-pager{position:absolute;left:var(--rx);right:var(--rx);bottom:var(--gb);height:max(46px,3em);display:grid;align-items:center;column-gap:.6em;container-type:inline-size;
  grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);   /* ‹ n / N › centred; "Next essay" can only use the free right column */
  font:400 clamp(13px,min(1vw,1.9svh),16px)/1 Poppins,"Poppins Fallback",sans-serif}
.w-pager button,.w-zone{padding:0;border:0;background:none;color:var(--gold);cursor:pointer;-webkit-tap-highlight-color:transparent}
.w-pager button{display:grid;place-items:center;width:max(44px,2.8em);height:max(44px,2.8em);border-radius:50%;transition:color .2s,background-color .2s}
@media (hover:hover){.w-pager button:hover:not([aria-disabled=true]){background:rgb(230 196 122/.1)}}
.w-pager button[aria-disabled=true]{color:rgb(255 255 255/.2);cursor:default}   /* aria-disabled, not disabled: focus never drops out of the pager */
.w-nx{grid-column:5;justify-self:end;display:flex;align-items:center;gap:.55em;max-width:100%;min-width:0;min-height:44px;
  padding:0 .2em 0 .4em;color:#fff;text-decoration:none;white-space:nowrap}
.w-nx[hidden]{display:none}
.w-nxl{flex:none;font-size:.82em;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.w-nxt{min-width:0;overflow:hidden;text-overflow:ellipsis;text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:rgb(255 255 255/.25);text-underline-offset:.25em;transition:text-decoration-color .3s}
.w-nx svg{flex:none;width:1.15em;height:1.15em;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:translate .3s var(--out)}
@media (hover:hover){.w-nx:hover .w-nxt{text-decoration-color:var(--gold)} .w-nx:hover svg{translate:3px 0}}
.w-nx:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
@container (max-width:48em){.w-nxt{display:none}}   /* narrow: "Next →" only (the centred page buttons leave too little room for a title) */
@container (max-width:24em){.w-nx{gap:.3em;padding:0}.w-pno{min-width:3.4em}}   /* the narrowest phones */
.w-pager button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.w-pager svg,.w-zone svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.w-prev{grid-column:2} .w-pno{grid-column:3} .w-nextp{grid-column:4}
.w-pno{min-width:4.2em;text-align:center;color:rgb(255 255 255/.6);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.w-prog{position:absolute;left:0;right:0;top:0;height:1px;background:rgb(255 255 255/.1);overflow:hidden}
.w-prog i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--prog,0));transition:transform .5s var(--out)}
.w-zone{position:absolute;top:var(--rt);bottom:var(--rb);width:var(--rx);display:none;place-items:center;opacity:0;transition:opacity .25s;font-size:clamp(16px,1.3vw,24px)}
.w-zone.prev{left:0} .w-zone.next{right:0}
@media (hover:hover) and (pointer:fine){.w-zone{display:grid}.w-zone:hover{opacity:1}}
.w-reader.p1 .w-zone.prev,.w-reader.pn .w-zone.next{visibility:hidden}

@media (orientation:landscape) and (max-width:899.98px){   /* too narrow for the pane */
  .w-index{grid-template-columns:minmax(0,1fr) 0;column-gap:0}
  .w-peek{display:none}
}
@media (orientation:portrait){
  .w{--wf:calc(var(--p)*1.05);--rt:calc(var(--navy) + 46px + max(24px,2.8svh))}
  .w-index{top:calc(var(--navy) + 48px);grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto auto;
    grid-template-areas:"." "kick" "list" "lost"}
  .w-peek{display:none}
  .w-link .line-in{grid-template-columns:2.9em minmax(0,1fr) auto;column-gap:.55em}
  .w-reader{--rf:clamp(15px,calc(3.4vw + 3px),19px)}
  html[data-tab=writings] .orbits{--op:0}   /* the ledger runs the full width: the rings would cross its minutes */
  html[data-tab=writings] .art{--fade:56%}
  .w-top{top:calc(var(--navy) + 46px);right:var(--gr)}   /* under the centred tabs, clear of their tap areas */
  .w-essay{line-height:1.6}
  .w-back{padding-block:max(.75em,calc(22px - .5em))}   /* 44 px tall, still centred on the same line */
  .w-link{padding-block:max(.5em,calc(22px - .65em))}   /* one-line rows are 44 px tall too */
  .w-em{font-size:max(11px,.7em)} .w-notel{font-size:max(11px,.72em)} .w-min{font-size:max(11px,.72em)}
}
@media (orientation:portrait) and (max-width:499.98px){.pyr-text{font-size:18px}}   /* the pyramid's labels stay ≥ 11 px on small phones */
@media (orientation:landscape) and (max-height:499.98px){   /* phones on their side */
  .w{--wf:max(13px,var(--p));--rb:calc(var(--gb) + 40px);--rt:calc(var(--navy) + 26px)}
  .w-link{padding:.28em 0}
  .w-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .w-min{font-size:.8em}
  .w-lost{white-space:nowrap;margin-top:.7em;font-size:.78em}
  .w-lost .line-in{overflow:hidden;text-overflow:ellipsis}   /* the block that owns the line box */
  .w-kick{margin-bottom:.6em}
  .w-reader{--rf:clamp(13px,3.6svh,15px)}
  .w-essay{line-height:1.55}
  .w-pager{height:40px}
  .w-pager button{width:40px;height:40px}
}

@media (orientation:landscape) and (max-height:499.98px) and (min-width:460px){
  .w-link{padding:clamp(.28em,(100svh - 200px)/12,.85em) 0}   /* rows as tall as the height allows: easier to hit */
}
@media (orientation:landscape) and (max-height:499.98px) and (min-width:700px){.frame{--p:clamp(13px,min(1.9vw,3.6svh),16px)}}   /* long lines: a 13 px floor */
@media (orientation:landscape) and (max-height:499.98px){.w-em{font-size:max(.7em,11px)}.w-year{font-size:max(.78em,11px)}.w-min{font-size:max(.8em,11px)}.w-kick{font-size:max(.72em,11px)}}
@media (orientation:landscape) and (max-height:499.98px) and (hover:none){   /* touch: the quote pane only changes on mouse hover, so it gives its room to the titles */
  .w-index{grid-template-columns:minmax(0,1fr) 0;column-gap:0}
  .w-peek{display:none}
}
@media (orientation:landscape) and (max-height:340px){.w-kick,.w-lost{display:none}}   /* phones with toolbars: the ledger keeps 13 px type */
@media (orientation:portrait) and (max-width:359.98px){.w-ts{display:none}}   /* the smallest phones: a long title's second part waits for the essay itself */

/* without JS: #slug targets an essay, which then scrolls in its box (no paging) */
html:not(.js) .w-reader{visibility:hidden}
html:not(.js) .w-essay:not(:target),html:not(.js) .w-pager,html:not(.js) .w-zone,html:not(.js) .w-run{display:none}
html:not(.js) .w:has(.w-essay:target) .w-index{visibility:hidden}
html:not(.js) .w:has(.w-essay:target) .w-reader{visibility:visible}
html:not(.js) .w-essay:target{columns:auto;overflow-x:hidden;overflow-y:auto;max-width:38em}   /* not a multicol box: it scrolls down */
html:not(.js) .w-eh{height:auto;margin:0 0 1.5em;padding-bottom:0;break-after:auto;display:block}
html:not(.js) .frame:has(.w-essay:target) .spark.tl,html:not(.js) .frame:has(#writings:target,.w-essay:target) .orbits{opacity:0}
.js:not(.app).w-deep .w-index{visibility:hidden}   /* a #slug load: no flash of the index before app.js opens the essay */

/* ── F.7 Elsewhere: Instagram and X (the Figma's grey bird), top left beside the sparkle, mirroring the tabs. They step
   aside while an essay is open: the back link takes that corner. */
.social{position:absolute;z-index:6;top:var(--navy);left:calc(var(--gl) + var(--sp)*.6);translate:0 -50%;display:flex;
  font-size:clamp(14px,min(1.15vw,2.1svh),22px);transition:opacity .4s var(--io) .6s,visibility 0s .6s}   /* back from an essay: they return once the reader has gone */
.social a{display:grid;place-items:center;width:max(44px,2.3em);height:max(44px,2.3em);border-radius:50%;color:rgb(255 255 255/.72);
  filter:drop-shadow(0 1px 6px rgb(0 0 0/.6));transition:color .18s,transform .25s var(--out);-webkit-tap-highlight-color:transparent}
.social svg{width:1.05em;height:1.05em;fill:currentColor}
.social a:focus-visible{color:#fff;transform:translateY(-2px) rotate(-8deg)}
@media (hover:hover){.social a:hover{color:#fff;transform:translateY(-2px) rotate(-8deg)}}
.social a:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.w-reading .social{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--io),visibility 0s .4s}   /* opening an essay: no taps at once, still a fade */
html:not(.js) .frame:has(.w-essay:target) .social{display:none}
@media (orientation:portrait){.social{top:calc(var(--navy) + 44px);font-size:clamp(15px,2.2vw,20px)}   /* under the centred tabs, clear of their 44 px row, level with the sparkle */
  .social a{filter:drop-shadow(0 0 1.5px rgb(0 0 0/.75)) drop-shadow(0 1px 6px rgb(0 0 0/.6))}}   /* legible over pale skies */

/* a long title's second part, quieter (the essay "Why is Oppression Bad?" carries two more questions) */
.w-ts{font-size:.78em;font-weight:400;color:rgb(255 255 255/.66)}
.w-es{display:block;margin-top:.5em;font-size:.48em;font-weight:500;line-height:1.35;color:rgb(255 255 255/.82)}

/* landscape windows narrower than 460 px (split-screen halves, pop-ups): the portrait top bar, or the tabs run over the icons */
@media (orientation:landscape) and (max-width:459.98px){
  .tabs{left:50%;right:auto;translate:-50% -50%}
  .social{top:calc(var(--navy) + 44px)}
  .spark.tl{top:calc(var(--navy) + 44px - var(--sp)/2)}
  .w-index{top:calc(var(--navy) + 66px)}
  .w-top{top:calc(var(--navy) + 46px);right:var(--gr)}
  .w{--rt:calc(var(--navy) + 72px)}
}