/* jackghazi.com — "The Meridian" design system, v1.1 → CSS.
   Every value here traces to design-system.md. No framework. */

/* ------------------------------------------------------------------ */
/* 0. Fonts (self-hosted, variable, latin subset)                       */
/* ------------------------------------------------------------------ */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces-italic.woff2) format("woff2");font-weight:300 600;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/Newsreader.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/Newsreader-italic.woff2) format("woff2");font-weight:300 600;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/Newsreader-ext.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/Newsreader-italic-ext.woff2) format("woff2");font-weight:300 600;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";src:url(/assets/fonts/MartianMono.woff2) format("woff2");font-weight:300 600;font-stretch:75% 112.5%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* size-adjust fallbacks: first paint on system faces without a jump */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:104%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:93%;ascent-override:99%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"Martian Mono Fallback";src:local("Consolas"),local("Menlo"),local("Courier New");size-adjust:113%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                            */
/* ------------------------------------------------------------------ */
:root{
  --nightwatch:#1B2029; --tablet:#252C37; --bone:#E8E1CF; --ash:#8B93A0; --verdigris:#79AD9C; --bronze:#C9A66B;
  --ff-display:"Fraunces","Fraunces Fallback",Georgia,serif;
  --ff-body:"Newsreader","Newsreader Fallback",Georgia,serif;
  --ff-mono:"Martian Mono","Martian Mono Fallback",ui-monospace,Consolas,monospace;
  --t-hero:clamp(56px,8vw,128px);
  --t-display:clamp(2.75rem,5.2vw,4.5rem);
  --t-h2:2.3125rem; --t-h3:1.875rem; --t-lede:1.5rem; --t-quote:1.875rem;
  --t-body:1.1875rem; --t-body-s:1rem; --t-meta:.78rem; --t-micro:.6875rem;
  --measure:34.5em; --measure-lede:36em;
  --gutter:24px; --margin:clamp(20px,4vw,64px); --wrap:1320px;
  --section:96px; --masthead:64px; --sticky-h:44px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --grain:url(/assets/img/grain-256.png);
  color-scheme:dark;
}
@media (max-width:719px){:root{--section:64px;--margin:20px;--t-body:1.125rem}}

/* ------------------------------------------------------------------ */
/* 2. Base                                                              */
/* ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;background:var(--nightwatch);color:var(--bone);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--masthead) + 16px)}
body{margin:0;font-family:var(--ff-body);font-size:var(--t-body);line-height:1.58;font-variant-numeric:oldstyle-nums;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column;overflow-x:clip}
/* page grain — image tile, fixed, once */
html::after{content:"";position:fixed;inset:0;background:var(--grain) repeat;background-size:256px;opacity:.055;mix-blend-mode:soft-light;pointer-events:none;z-index:9999}
main{flex:1 0 auto}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{font-family:var(--ff-display);font-weight:400;margin:0;text-wrap:balance;color:var(--bone)}
h1{font-size:var(--t-display);font-weight:300;line-height:1.02;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;letter-spacing:-.005em}
h2{font-size:var(--t-h2);line-height:1.15;font-variation-settings:"opsz" 72}
h3{font-size:var(--t-h3);line-height:1.2;font-style:italic}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--verdigris);color:var(--nightwatch)}
.mono,.meta,.micro,kbd,.tag{font-family:var(--ff-mono);font-stretch:90%;font-variation-settings:"wdth" 90;letter-spacing:.06em;font-variant-numeric:tabular-nums;text-transform:uppercase}
.meta{font-size:var(--t-meta);line-height:1.4;color:var(--ash)}
.micro{font-size:var(--t-micro);line-height:1.3;font-stretch:85%;font-variation-settings:"wdth" 85;color:var(--ash)}
.wrap{max-width:calc(var(--wrap) + 2 * var(--margin));margin-inline:auto;padding-inline:var(--margin);width:100%}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.column{grid-column:1 / -1}
@media (min-width:720px){.column{grid-column:2 / 12}}
@media (min-width:1100px){.column{grid-column:3 / 11}}
.rail-left{grid-column:1 / 3;display:none}
@media (min-width:1100px){.rail-left{display:block}}
.section{padding-block:var(--section)}
.hairline{border:0;border-top:1px solid var(--bronze);width:24px;margin:0}
.rule{border:0;border-top:1px solid var(--ash);margin:0;opacity:.6}

/* links */
.prose a,.link{color:var(--bone);text-decoration:underline;text-decoration-color:var(--verdigris);text-decoration-thickness:1px;text-underline-offset:3px;transition:color 220ms var(--ease),text-decoration-thickness 220ms var(--ease)}
.prose a:hover,.link:hover{color:var(--verdigris);text-decoration-thickness:2px}
.mlink{color:var(--ash);text-decoration:none;background-image:linear-gradient(var(--verdigris),var(--verdigris));background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size 220ms var(--ease),color 220ms var(--ease);padding-bottom:2px}
.mlink:hover,.mlink:focus-visible{background-size:100% 1px;color:var(--bone)}
:focus-visible{outline:2px solid var(--verdigris);outline-offset:3px;border-radius:2px}
.skip{position:absolute;top:8px;left:8px;z-index:10000;font-family:var(--ff-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;background:var(--verdigris);color:var(--nightwatch);padding:8px 12px;transform:translateY(-200%);transition:transform 120ms}
.skip:focus{transform:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ */
/* 3. Masthead + nav                                                    */
/* ------------------------------------------------------------------ */
.masthead{position:sticky;top:0;z-index:50;height:var(--masthead);background:rgb(27 32 41 / .92);border-bottom:1px solid var(--tablet);backdrop-filter:blur(2px)}
.masthead .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.wordmark{font-family:var(--ff-mono);font-size:var(--t-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--bone);font-variation-settings:"wdth" 90;font-stretch:90%}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.nav a{font-family:var(--ff-body);font-size:1rem;color:var(--bone);display:inline-flex;align-items:center;gap:8px;position:relative;padding:4px 0}
.nav a[aria-current="page"]{color:var(--verdigris)}
.nav a[aria-current="page"]::after{content:"";width:4px;height:4px;border-radius:50%;border:1px solid var(--verdigris);display:inline-block;margin-left:2px}
.nav a:hover{color:var(--verdigris)}
.nav kbd{font-size:var(--t-micro);width:18px;height:18px;border:1px solid var(--ash);color:var(--ash);display:none;align-items:center;justify-content:center;line-height:1;border-radius:2px;letter-spacing:0}
@media (min-width:1100px){.nav kbd{display:inline-flex}}

/* ------------------------------------------------------------------ */
/* 4. THE MERIDIAN (fold / band / sticky)                               */
/* ------------------------------------------------------------------ */
/* the instrument lives INSIDE the page's outer margin: rule, ticks, ring and
   labels are all measured off the padded content box, so nothing can reach the
   viewport edge and nothing is ever clipped. */
.meridian{position:relative;width:100%;padding-inline:var(--margin);--ticks:12;--progress:0;--at:0;--tick-h:8px;--ring-r:5px}
/* width must be explicit: the rule is a replaced <svg> with an intrinsic
   1000×1 box, so left/right alone would leave it 1000px wide. */
.meridian .m-rule{position:absolute;left:var(--margin);right:var(--margin);width:calc(100% - 2 * var(--margin));height:1px;overflow:visible}
.meridian .m-rule line{stroke:var(--bone);stroke-width:1;vector-effect:non-scaling-stroke}
/* the Bronze progress fill must NOT use non-scaling-stroke: with it, Chrome
   measures the dash in screen px and ignores pathLength="1", which painted a
   phantom bronze segment over the last (width − 1000)px of every rule even at
   progress 0. Without it the dash is normalised by pathLength as intended. */
.meridian .m-rule .m-fill{stroke:var(--bronze);vector-effect:none;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--progress))}
.meridian .m-ticks{position:relative;width:100%;height:var(--tick-h);overflow:visible;display:block}
.meridian .tick{fill:var(--ash);width:1px;height:var(--tick-h);y:0;x:calc((var(--i) + .5) / var(--ticks) * 100%);transform-box:fill-box;transform-origin:bottom}
.meridian .tick.tick--section{height:calc(var(--tick-h) + 4px);y:-4px}
.meridian .m-ring{transform-box:fill-box;transform-origin:center}
.meridian .m-ring circle{fill:none;stroke:var(--verdigris);stroke-width:2;r:var(--ring-r);cx:calc((var(--at) + .5) / var(--ticks) * 100%);cy:var(--tick-h);transition:cx 120ms linear}
.meridian .m-labels{list-style:none;margin:0;padding:0;position:relative;height:1.4em;font-family:var(--ff-mono);font-size:var(--t-micro);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);font-stretch:85%;font-variation-settings:"wdth" 85;font-variant-numeric:tabular-nums}
.meridian .m-labels li{position:absolute;top:0;left:calc((var(--i) + .5) / var(--ticks) * 100%);transform:translateX(-50%);white-space:nowrap;margin-top:6px}
/* first label hangs off its tick; on the sticky and band rows (whose last label
   is a lone readout) the final label right-aligns to the last tick, so the row
   can never break out of the padding at either end */
.meridian--fold .m-labels li:first-child,
.meridian--sticky .m-labels li:first-child{transform:none}
.meridian--sticky .m-labels li:last-child,
.meridian--band .m-labels li:last-child{transform:translateX(-100%)}
.meridian .m-labels li.is-here,.meridian .m-labels li[aria-current]{color:var(--verdigris)}
.meridian .m-labels li.is-active{color:var(--verdigris)}
.meridian .m-labels button{all:unset;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.meridian .m-labels button:focus-visible{outline:2px solid var(--verdigris);outline-offset:3px}

/* sticky variant — under masthead on every page. It is a *band*: it reserves its
   own height (rule + ticks + labels) so page content starts below it, and it
   carries the masthead's Nightwatch backdrop so nothing scrolls through it. */
.meridian--sticky{position:sticky;top:var(--masthead);z-index:40;height:var(--sticky-h);padding-top:8px;background:rgb(27 32 41 / .92);backdrop-filter:blur(2px);pointer-events:none}
.meridian--sticky .m-rule line:not(.m-fill){stroke-opacity:.55}
.meridian--sticky .m-labels{height:22px}
.meridian--sticky .m-labels li{font-size:var(--t-micro)}
.meridian--sticky .m-labels button{pointer-events:auto}
@media (max-width:719px){.meridian--sticky .m-labels li:not(.is-here):not(.is-active){display:none}.meridian--sticky .tick:nth-child(2n){display:none}}

/* band variant — essay hero band bottom edge, 24px ticks. The band is already
   inside the 1320px wrap, so it keeps its own edges (design-system §5). */
.meridian--band{--tick-h:24px;padding-inline:0}
.meridian--band .m-rule{left:0;right:0}
/* section titles are truncated to 14 chars but mono is wide: hold each label to
   its own tick slot so neighbouring section names never run into each other */
.meridian--band .m-labels li{max-width:7.4%;overflow:hidden;text-overflow:ellipsis}
.meridian--band .m-labels li:last-child{max-width:12%}
/* under 1100 the slots are too narrow for section titles: keep region + length,
   and with only those two left they no longer need the per-slot clamp */
@media (max-width:1099px){
  .meridian--band .m-labels li:not(:first-child):not(:last-child){display:none}
  .meridian--band .m-labels li,
  .meridian--band .m-labels li:last-child{max-width:none}
  /* with the middle labels gone the region label can hang off its tick again,
     instead of being centred on it and reaching past the band's left edge */
  .meridian--band .m-labels li:first-child{transform:none}
}
.meridian--band .tick{fill:var(--bone);fill-opacity:.7}
.meridian--band .m-labels{margin-top:2px}
@media (max-width:719px){.meridian--band .m-labels li:not(:first-child):not(:last-child){display:none}.meridian--band .tick:nth-child(2n){display:none}}

/* fold variant — Home hero, 62% vh */
.meridian--fold{--tick-h:32px;--ring-r:7px}
.meridian--fold .tick{fill:var(--bone);fill-opacity:.7}
.meridian--fold .tick.tick--major{height:40px;y:-8px;fill:var(--bronze);fill-opacity:1}
.meridian--fold .m-labels{margin-top:2px}
/* The twelve ticks always stay. The readouts shed from the longest inward as the
   row narrows, so labels are always evenly spaced and never overlap.
   Measured against Martian Mono 11px/wdth 85 (~7.7px per character). */
@media (max-width:1759px){ /* the two word counts, vonavoice.com, the coordinates */
  .meridian--fold .m-labels li[data-i="7"],
  .meridian--fold .m-labels li[data-i="8"],
  .meridian--fold .m-labels li[data-i="9"],
  .meridian--fold .m-labels li[data-i="11"]{display:none}
}
@media (max-width:1099px){ /* 11 ESSAYS / PALM BEACH FL — regions + nav only */
  .meridian--fold .m-labels li[data-i="6"],
  .meridian--fold .m-labels li[data-i="10"]{display:none}
  /* narrow slots: centre HOME on its tick too, so it clears WRITING */
  .meridian--fold .m-labels li:first-child{transform:translateX(-50%)}
}
@media (max-width:719px){
  .meridian--fold{--tick-h:24px}
  .meridian--fold .tick.tick--major{height:28px;y:-4px}
  .meridian--fold .tick:nth-child(2n){display:none}
  /* §4 mobile: ticks reduce, labels hidden except the active one — a rotated
     label row collides with the H1, whose baseline sits ON the rule. */
  .meridian--fold .m-labels li{display:none}
  .meridian--fold .m-labels li.is-active,
  .meridian--fold .m-labels li:first-child{display:block;writing-mode:horizontal-tb;transform:none;left:0;top:6px;margin-top:0}
  .meridian--fold .m-labels{height:1.6em}
}

/* ------------------------------------------------------------------ */
/* 5. Right rail (≥1100)                                                */
/* ------------------------------------------------------------------ */
.rail-right{display:none}
@media (min-width:1100px){
  .rail-right{display:flex;position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:30;flex-direction:column;align-items:center;gap:32px;writing-mode:vertical-rl;font-family:var(--ff-mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-stretch:85%;font-variation-settings:"wdth" 85}
  .rail-right ul{list-style:none;margin:0;padding:0;display:flex;gap:24px}
  .rail-right a{color:var(--ash)}
  .rail-right a[aria-current="page"]{color:var(--verdigris)}
  .rail-right a:hover{color:var(--bone)}
  .rail-right .readout{color:var(--ash);border-top:1px solid var(--ash);padding-top:12px;font-variant-numeric:tabular-nums}
  .rail-right .readout b{color:var(--verdigris);font-weight:400}
}

/* ------------------------------------------------------------------ */
/* 6. Hero images (treated) + scrim + grain                             */
/* ------------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;background:var(--tablet)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgb(27 32 41 / .35),#1B2029 92%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:var(--grain) repeat;background-size:256px;opacity:.09;mix-blend-mode:overlay;pointer-events:none}
.hero.is-missing{background:var(--tablet)}
@keyframes heroScale{from{transform:scale(1)}to{transform:scale(1.03)}}
.motion .hero img{animation:heroScale 12s var(--ease) infinite alternate;animation-play-state:var(--play,running)}
.motion .hero.is-offscreen img{animation-play-state:paused}

/* ------------------------------------------------------------------ */
/* 7. HOME — the fold is the instrument                                */
/* ------------------------------------------------------------------ */
/* pull the fold under the whole chrome stack (masthead + sticky Meridian band)
   so the fold's own 62% line lands at 62% of the *viewport*, on the horizon. */
.fold{position:relative;height:100svh;min-height:680px;max-height:1000px;margin-top:calc(-1 * (var(--masthead) + var(--sticky-h)));overflow:hidden;isolation:isolate}
.fold .hero{position:absolute;inset:0;z-index:0}
/* Home scrim: light enough that the water, horizon and mist read through it,
   heavy only where type sits and at the foot where the readout returns to
   Nightwatch. Still monochrome-to-transparent (§2). Measured: brightest pixel
   behind the H1 is well under the 7:1 ceiling for Bone. */
.fold .hero .scrim{background:linear-gradient(to bottom,
  rgb(27 32 41 / .12) 0%,
  rgb(27 32 41 / .16) 30%,
  rgb(27 32 41 / .84) 47%,
  rgb(27 32 41 / .84) 66%,
  rgb(27 32 41 / .42) 78%,
  #1B2029 100%)}
.obs-grid{position:absolute;left:0;right:0;top:18%;height:44%;width:100%;z-index:1;pointer-events:none}
.fold-title{position:absolute;left:0;right:0;top:0;height:62%;z-index:2}
.fold-title .wrap{height:100%}
.fold-title .grid{height:100%;align-items:end}
.fold-h1{grid-column:1 / -1;font-size:var(--t-hero);letter-spacing:-.015em;line-height:.96;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;transform:translateY(.18em);margin:0;white-space:nowrap}
.fold-lede{display:none;grid-column:9 / -1;font-family:var(--ff-display);font-style:italic;font-weight:300;font-size:var(--t-lede);line-height:1.35;color:var(--bone);max-width:20em;padding-bottom:1.5rem;font-variation-settings:"opsz" 24;align-self:end}
@media (min-width:720px){.fold-h1{grid-column:3 / -1}}
@media (min-width:1100px){.fold-h1{grid-column:3 / 9}.fold-lede{display:block}}
@media (max-width:719px){.fold-h1{white-space:normal;grid-column:1 / -1}}
.fold .meridian--fold{position:absolute;left:0;right:0;top:62%;z-index:3;margin-top:calc(-1 * var(--tick-h))}
.fold .meridian--fold .m-rule{top:var(--tick-h)}
.fold-lede-mobile{display:block;position:absolute;left:0;right:0;top:calc(62% + 7em);z-index:3;font-family:var(--ff-display);font-style:italic;font-weight:300;font-size:1.25rem;line-height:1.35}
@media (min-width:1100px){.fold-lede-mobile{display:none}}
.fold-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:28px}
.fold-foot .wrap{display:flex;align-items:flex-end;justify-content:space-between}
.fold-foot .readout{color:var(--ash)}
.scroll-ring{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:44px;height:44px;border:2px solid var(--verdigris);border-radius:50%;display:grid;place-items:center;color:var(--verdigris)}
.scroll-ring svg{width:12px;height:18px}
.scroll-ring .visually-hidden{position:absolute}
@media (max-width:719px){.fold{min-height:600px}.fold-foot .wrap{justify-content:flex-start}}

/* line-mask reveal (H1) */
.reveal .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.reveal .ln > span{display:inline-block;will-change:transform}
.fold-h1.reveal .ln{display:inline-block}
.motion .reveal .ln > span{transform:translateY(110%)}
.motion .fold-fade{opacity:0}
.motion .obs-grid{opacity:0}
.motion .meridian .tick{transform:scaleY(0)}
.motion .meridian .m-labels li{opacity:0}
.motion .meridian .m-ring{opacity:0}
.motion .meridian .m-rule line:not(.m-fill){stroke-dasharray:1;stroke-dashoffset:1}
.motion .hero img{opacity:0}
.motion.is-loaded .reveal .ln > span,.motion.is-loaded .fold-fade,.motion.is-loaded .obs-grid,.motion.is-loaded .meridian .tick,.motion.is-loaded .meridian .m-labels li,.motion.is-loaded .meridian .m-ring,.motion.is-loaded .hero img{opacity:1;transform:none}
.motion.is-loaded .meridian .m-rule line:not(.m-fill){stroke-dasharray:none;stroke-dashoffset:0}

/* ------------------------------------------------------------------ */
/* 8. Ledger (Home three, Writing index, Related)                       */
/* ------------------------------------------------------------------ */
.ledger{list-style:none;margin:0;padding:0;border-bottom:1px solid rgb(139 147 160 / .6)}
.ledger-head{display:flex;align-items:baseline;gap:16px;margin-bottom:24px}
.ledger-head .tag{font-size:var(--t-meta);color:var(--ash)}
.ledger-head::after{content:"";flex:0 0 24px;border-top:1px solid var(--bronze);align-self:center}
.group-head{font-family:var(--ff-display);font-style:italic;font-weight:300;font-size:var(--t-h3);color:var(--bronze);margin:48px 0 16px;display:flex;align-items:center;gap:16px}
.group-head::after{content:"";flex:0 0 24px;border-top:1px solid var(--bronze)}
.group-head:first-child{margin-top:0}
.row{position:relative;display:grid;grid-template-columns:7rem 1fr 2fr 4rem;column-gap:var(--gutter);align-items:baseline;padding:20px 12px;border-top:1px solid rgb(139 147 160 / .6);transition:background 160ms var(--ease)}
.row .r-region{font-family:var(--ff-mono);font-size:var(--t-meta);color:var(--ash);letter-spacing:.06em;text-transform:uppercase;font-stretch:90%}
.row .r-title{font-family:var(--ff-display);font-weight:400;font-size:1.5rem;line-height:1.15;color:var(--bone);font-variation-settings:"opsz" 24;transition:color 160ms var(--ease);margin:0;text-wrap:balance}
.row .r-title a{color:inherit;text-decoration:none}
.row .r-title a::after{content:"";position:absolute;inset:0}
.row .r-dek{font-family:var(--ff-body);font-size:var(--t-body-s);line-height:1.55;color:var(--ash)}
.row .r-arrow{font-family:var(--ff-mono);color:var(--ash);text-align:right;transition:transform 160ms var(--ease);font-size:var(--t-meta)}
.row .r-len{font-family:var(--ff-mono);font-size:var(--t-meta);color:var(--ash);text-align:right;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.row:hover,.row:focus-within{background:var(--tablet)}
.row:hover .r-title,.row:focus-within .r-title{color:var(--verdigris)}
.row:hover .r-arrow,.row:focus-within .r-arrow{transform:translateX(6px)}
.row:focus-within{outline:2px solid var(--verdigris);outline-offset:-2px;border-radius:2px}
.row .r-title a:focus-visible{outline:none}
.ledger--index .row{grid-template-columns:7rem 1.2fr 2fr 6rem}
.is-hidden{display:none!important}
@media (max-width:719px){
  .row,.ledger--index .row{grid-template-columns:1fr auto;grid-template-areas:"title arrow" "meta meta";row-gap:6px;padding:16px 8px}
  .row .r-title{grid-area:title;font-size:1.25rem}
  .row .r-arrow{grid-area:arrow}
  .row .r-region{display:none}
  .row .r-dek{grid-area:meta}
  .row .r-dek::before{content:attr(data-region) " · ";font-family:var(--ff-mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase}
  .row .r-len{display:none}
}

/* ------------------------------------------------------------------ */
/* 9. Home sections                                                     */
/* ------------------------------------------------------------------ */
.home-section h2{font-size:var(--t-h3);font-style:italic;font-weight:300;color:var(--bronze);margin-bottom:24px;display:flex;align-items:center;gap:16px}
.home-section h2::after{content:"";flex:0 0 24px;border-top:1px solid var(--bronze)}
.about-brief{position:relative}
.about-brief p{max-width:var(--measure)}
.about-brief .more{display:inline-block;margin-top:24px}
.marg,.aside-rail{font-family:var(--ff-body);font-style:italic;font-size:var(--t-body-s);line-height:1.5;color:var(--ash)}
.rail-left .aside-rail{padding-right:24px}
.aside-inline{display:block;margin-top:16px}
@media (min-width:1100px){.aside-inline{display:none}}

/* ------------------------------------------------------------------ */
/* 10. Page heads (Writing / About / 404)                               */
/* ------------------------------------------------------------------ */
.page-head{padding-top:64px;padding-bottom:48px}
.page-head .lede{margin-top:24px}
.lede{font-family:var(--ff-display);font-style:italic;font-weight:300;font-size:var(--t-lede);line-height:1.35;color:var(--bone);max-width:var(--measure-lede);font-variation-settings:"opsz" 24;text-wrap:pretty}
.breadcrumb{font-family:var(--ff-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--ash);padding-top:20px;padding-bottom:20px}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.breadcrumb li + li::before{content:"/";margin-right:10px;color:var(--ash)}
.breadcrumb a{color:var(--ash)}
.breadcrumb a:hover{color:var(--verdigris)}
/* facts list (About left rail) */
.facts{list-style:none;margin:0;padding:0;font-family:var(--ff-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--ash);line-height:1.6}
.facts li{padding:10px 0;border-top:1px solid rgb(139 147 160 / .4)}
.facts li:last-child{border-bottom:1px solid rgb(139 147 160 / .4)}
.facts b{display:block;font-weight:400;color:var(--bone)}
.facts a{color:var(--bone)}
.facts a:hover{color:var(--verdigris)}
.facts--inline{margin-bottom:32px}
@media (min-width:1100px){.facts--inline{display:none}}
/* writing strip — three region heroes, dithered by CSS */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--tablet);height:160px;overflow:hidden;border:1px solid var(--tablet);margin-bottom:48px}
.strip figure{margin:0;position:relative;overflow:hidden;background:var(--tablet)}
.strip img{position:absolute;left:0;top:0;width:25%;height:25%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(4);transform-origin:0 0;image-rendering:pixelated;mix-blend-mode:luminosity;filter:contrast(1.35) brightness(.9)}
.strip figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--ff-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--bone);background:rgb(27 32 41 / .7);padding:2px 6px}
@media (max-width:719px){.strip{height:96px}}
.filter-note{font-family:var(--ff-mono);font-size:var(--t-micro);color:var(--ash);letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px}
.filter-note button{all:unset;cursor:pointer;color:var(--ash);margin-right:16px;padding-bottom:2px;border-bottom:1px solid transparent}
.filter-note button[aria-pressed="true"]{color:var(--verdigris);border-bottom-color:var(--verdigris)}
.filter-note button:focus-visible{outline:2px solid var(--verdigris);outline-offset:3px}

/* ------------------------------------------------------------------ */
/* 11. Essay                                                            */
/* ------------------------------------------------------------------ */
.band{position:relative;height:560px;max-width:var(--wrap);margin-inline:auto;isolation:isolate}
.band .hero{position:absolute;inset:0;bottom:0;z-index:0}
.band .band-h1{position:absolute;left:0;right:0;bottom:64px;z-index:2}
.band .meridian--band{position:absolute;left:0;right:0;bottom:0;z-index:3;margin-bottom:calc(-1.9em - 2px)}
.band .meridian--band .m-rule{top:var(--tick-h)}
.essay-h1{max-width:14em;grid-column:1 / -1}
@media (min-width:720px){.essay-h1{grid-column:2 / -1}}
@media (min-width:1100px){.essay-h1{grid-column:3 / -1}}
@media (max-width:719px){
  .band{height:auto;aspect-ratio:4/5;max-height:70svh}
  .band .band-h1{position:static;padding-top:24px}
  .band .hero{position:absolute}
  .band{display:flex;flex-direction:column;justify-content:flex-end}
  .band .band-h1{position:absolute;bottom:56px}
}
.essay-head{padding-top:calc(1.9em + 40px)}
/* The reading column is centred on the page, not flush-left in its grid track:
   the 34.5em measure is centred inside the cols 3–10 track, which is itself
   centred in the wrap, so the text block reads optically centred. The left rail
   keeps ~200px of clear gutter for marginalia and pull-quote protrusion (§4). */
@media (min-width:1100px){.essay-head .column{max-width:var(--measure);margin-inline:auto}}
.byline{position:relative;max-width:var(--measure);border-top:1px solid var(--bronze);border-bottom:1px solid var(--bronze);border-image:linear-gradient(to right,var(--bronze) 24px,transparent 24px) 1;padding:14px 0;margin-top:40px;font-family:var(--ff-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--ash);line-height:1.6}
.byline .by a{font-family:var(--ff-body);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--bone);margin-left:8px;background-image:linear-gradient(var(--verdigris),var(--verdigris));background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size 220ms var(--ease);padding-bottom:1px}
.byline .by a:hover{background-size:100% 1px}
.byline .stamp{display:none;position:absolute;right:-72px;top:50%;transform:translateY(-50%);width:48px;height:48px}
@media (min-width:1100px){.byline .stamp{display:block}}
.byline .stamp circle{fill:none;stroke:var(--bronze);stroke-width:1}
.byline .stamp text{font-family:var(--ff-mono);font-size:7px;letter-spacing:.08em;fill:var(--bronze)}
.essay-lede{margin-top:32px}
.essay-body{position:relative;max-width:var(--measure);margin-top:48px;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.essay-body p{margin:0}
.essay-body p + p{text-indent:1.5em}
.essay-body h2{margin-top:64px;margin-bottom:24px;position:relative;padding-top:20px}
.essay-body h2::before{content:"";position:absolute;left:0;top:-12px;width:1px;height:24px;background:var(--bronze)}
.essay-body h3{margin-top:40px;margin-bottom:16px}
.essay-body h2 + p,.essay-body h3 + p{text-indent:0}
.essay-body > p:first-of-type::first-letter{font-family:var(--ff-display);font-weight:300;font-size:4.9em;line-height:.8;float:left;color:var(--bronze);margin:.08em .08em 0 0;font-variation-settings:"opsz" 144}
.essay-body sup{font-family:var(--ff-mono);font-size:var(--t-micro);line-height:0;vertical-align:super;letter-spacing:0}
.essay-body sup a{color:var(--verdigris);text-decoration:none}
.essay-body sup a:hover{text-decoration:underline}
.essay-body ul,.essay-body ol{margin:16px 0 16px 1.5em;padding:0}
.essay-body li + li{margin-top:6px}
.essay-body em{font-style:italic}
@media (max-width:719px){.essay-body p + p{text-indent:0;margin-top:.9em}.essay-body{line-height:1.6}}
/* pull-quote */
.essay-body blockquote{margin:48px 0;padding:8px 0 8px 24px;border-left:2px solid var(--bronze);font-family:var(--ff-display);font-weight:300;font-size:var(--t-quote);line-height:1.25;color:var(--bone);font-variation-settings:"opsz" 30;text-wrap:balance}
.essay-body blockquote p{text-indent:0!important}
.essay-body blockquote cite,.essay-body blockquote footer{display:block;font-family:var(--ff-mono);font-style:normal;font-size:var(--t-meta);color:var(--ash);letter-spacing:.06em;text-transform:uppercase;margin-top:12px}
@media (min-width:1100px){.essay-body blockquote.pull{margin-left:-6rem;width:calc(100% + 6rem)}}
/* marginalia */
.essay-body .marg{display:block;margin:16px 0 0;font-family:var(--ff-body);font-style:italic;font-size:var(--t-body-s);line-height:1.5;color:var(--ash);text-indent:0}
.essay-body .marg + p{text-indent:0}
@media (min-width:1100px){
  .essay-body .marg{position:absolute;right:100%;margin:0 24px 0 0;width:10rem;transform:translateY(-100%);margin-top:-6px}
}
@media (min-width:1320px){.essay-body .marg{width:12rem}}
/* figures */
figure.fig{margin:48px 0;position:relative}
figure.fig.wide{margin-left:-6rem;margin-right:-6rem}
@media (max-width:1099px){figure.fig.wide{margin-left:0;margin-right:0}}
figure.fig .mat{background:var(--tablet);padding:12px;border:1px solid rgb(139 147 160 / .5);position:relative;overflow:hidden}
figure.fig .mat img{width:100%;aspect-ratio:14/9;object-fit:cover;display:block}
figure.fig .mat::after{content:"";position:absolute;inset:12px;background:rgb(27 32 41 / .12);pointer-events:none}
figure.fig .mat.is-missing{aspect-ratio:14/9;display:grid;place-items:center;font-family:var(--ff-mono);font-size:var(--t-micro);color:var(--ash);letter-spacing:.06em;text-transform:uppercase}
figure.fig figcaption{margin-top:12px;font-family:var(--ff-body);font-style:italic;font-size:var(--t-body-s);line-height:1.5;color:var(--ash);text-indent:0}
figure.fig figcaption .fig-n{font-family:var(--ff-mono);font-style:normal;font-size:var(--t-micro);letter-spacing:.06em;color:var(--bronze);text-transform:uppercase;margin-right:10px}
/* IO reveals */
.motion .io{opacity:0;transform:translateY(12px);transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.motion .io.in{opacity:1;transform:none}
/* dither dissolve on hover (grain tile as mask, 3 steps) */
@keyframes dither{0%{mask-image:var(--grain);mask-size:256px;mask-mode:luminance}33%{mask-image:var(--grain);mask-size:96px;mask-mode:luminance}66%{mask-image:var(--grain);mask-size:32px;mask-mode:luminance}100%{mask-image:none}}
.dither:hover img{animation:dither 240ms steps(3,end) 1}
/* endmark */
.endmark{display:inline-block;width:10px;height:10px;border:2px solid var(--verdigris);border-radius:50%;vertical-align:baseline;margin-left:8px;box-sizing:border-box}
/* sources */
.sources{max-width:var(--measure);margin-top:64px}
.sources .ledger-head{margin-bottom:16px}
.sources ol{list-style:none;margin:0;padding:0;counter-reset:src}
.sources li{position:relative;padding:10px 0 10px 3rem;font-family:var(--ff-body);font-size:var(--t-body-s);line-height:1.5;color:var(--bone);border-top:1px solid rgb(139 147 160 / .3)}
.sources li:target{background:var(--tablet)}
.sources li .n{position:absolute;left:0;top:11px;font-family:var(--ff-mono);font-size:var(--t-meta);color:var(--ash);letter-spacing:.06em}
.sources li .back{font-family:var(--ff-mono);font-size:var(--t-meta);color:var(--verdigris);margin-left:8px;text-decoration:none}
.related{margin-top:var(--section)}
.more-writing{display:inline-block;margin-top:40px;font-family:var(--ff-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--verdigris)}
.more-writing:hover{color:var(--bone)}

/* ------------------------------------------------------------------ */
/* 12. Footer                                                           */
/* ------------------------------------------------------------------ */
.footer{position:relative;background:var(--tablet);margin-top:var(--section);overflow:hidden;color:var(--ash)}
.footer .wrap{position:relative;z-index:1;padding-top:64px;padding-bottom:120px}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gutter)}
.footer h2{font-family:var(--ff-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--ash);font-weight:400;margin-bottom:16px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{border-bottom:1px solid rgb(139 147 160 / .45);padding:6px 0}
.footer a{font-family:var(--ff-mono);font-size:var(--t-meta);letter-spacing:.04em;color:var(--ash);text-transform:none;font-stretch:90%}
.footer a:hover{color:var(--verdigris)}
.footer .colophon{font-family:var(--ff-mono);font-size:var(--t-meta);letter-spacing:.04em;line-height:1.7}
.footer .colophon p + p{margin-top:8px}
.footer .ghost{position:absolute;left:var(--margin);bottom:-.36em;font-family:var(--ff-display);font-weight:300;font-size:220px;line-height:.8;color:var(--bone);opacity:.06;pointer-events:none;user-select:none;white-space:nowrap;letter-spacing:-.02em;z-index:0}
@media (max-width:719px){.footer-cols{grid-template-columns:1fr}.footer .ghost{font-size:120px}}

/* ------------------------------------------------------------------ */
/* 13. 404                                                              */
/* ------------------------------------------------------------------ */
.page-404 .meridian--sticky .m-ring circle{cx:calc(100% + 24px)}

/* ------------------------------------------------------------------ */
/* 14. Reduced motion                                                   */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero img{animation:none!important;transition:opacity 300ms linear!important}
  .meridian .m-ring{transform-box:fill-box;transform-origin:center}
.meridian .m-ring circle{transition:none}
}

/* ------------------------------------------------------------------ */
/* 15. Print                                                            */
/* ------------------------------------------------------------------ */
@media print{
  html::after,.hero::after,.masthead,.meridian,.rail-right,.footer,.skip,.scroll-ring,.related,.more-writing,.obs-grid{display:none!important}
  html,body{background:#fff;color:#000;font-size:11pt}
  h1,h2,h3,.row .r-title{color:#000}
  .essay-body{max-width:none}
  a{color:#000;text-decoration:underline}
  .fold{height:auto;min-height:0}
  .fold-h1{transform:none}
}

/* sources provenance note (copyright rule 2) */
.sources .srcnote{max-width:var(--measure);margin:0 0 20px;font-family:var(--ff-body);font-style:italic;font-size:var(--t-body-s);line-height:1.5;color:var(--ash)}