/* =========================================================================
   SHANMUKH SRIRAM — an illuminated codex
   Not a website: a painted manuscript. The page is the panel.
   Pigment cabinet of Europe — Italian oltremare, French bleu & rose,
   Spanish carmín & ochre, Russian cinnabar, malachite, imperial gold.
   Colours are orchestrated, not scattered: each plate takes its own pigment.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=EB+Garamond:ital,wght@0,400..700;1,400..700&family=Fragment+Mono:ital@0;1&family=Marcellus&display=swap');

:root{
  /* ---- Ground — eau-de-nil daylight (rare celadon; no beige/grey/white) */
  --paper:      #CFE6DD;   /* eau-de-nil — antique Sèvres celadon ground   */
  --paper-deep: #BEDBD0;   /* a deeper wash of the same celadon            */
  --plaster:    #C6E1D7;   /* celadon panel (former beige fresco, retired) */
  --night:      #10264A;   /* rich lapis-blue illuminated plate (accent)   */
  --night-soft: #17356A;
  --bistre:     #0F1E3E;

  --ink:        #16231E;   /* deep viridian-black — the writing            */
  --ink-soft:   #3A4B44;
  --ink-faint:  #4F5D56;   /* deep enough to hold 4.5:1 on the celadon ground */
  --cream:      #F3EEDF;
  --cream-soft: #BAC6BE;

  /* ---- The pigment cabinet — saturated, for glass on celadon --------- */
  --lapis:      #1F3A93;   /* IT · oltremare, ground lapis lazuli          */
  --lapis-ink:  #1A2F74;
  --klein:      #0E2FA0;   /* FR · Klein / Sèvres blue                     */
  --vermilion:  #C6362B;   /* RU/IT · cinnabar                             */
  --carmine:    #97243F;   /* ES · cochineal carmín                        */
  --malachite:  #1E6B57;   /* RU · malachite green                         */
  --verdigris:  #4E6B5D;   /* weathered bronze                             */
  --ochre:      #B27A28;   /* ES · Spanish ochre                           */
  --naples:     #E0BE6B;   /* IT · Naples yellow                           */
  --rose:       #BE6E86;   /* FR · Pompadour rose                          */
  --tyrian:     #5C2A50;   /* imperial purple                              */
  --gold:       #9C7C2E;   /* or bruni — burnished gold leaf on light      */
  --gold-bright:#D6B45E;   /* gold catching lamplight, on the plates       */

  --accent:     var(--lapis);
  --accent-ink: var(--lapis-ink);

  --line:       rgba(20,34,29,.18);
  --line-soft:  rgba(20,34,29,.10);
  --line-gold:  rgba(156,124,46,.5);
  --line-cream: rgba(243,238,223,.20);
  --veil-rgb:   207,230,221;   /* the breath of ground colour behind text */

  /* ---- Type ------------------------------------------------------------ */
  --f-display:'Bodoni Moda', 'Didot', 'Georgia', serif;
  --f-serif:  'EB Garamond', 'Garamond', 'Georgia', serif;
  --f-caps:   'Marcellus', 'Trajan Pro', serif;
  --f-mono:   'Fragment Mono', 'Courier New', monospace;

  /* ---- Rhythm ---------------------------------------------------------- */
  --wrap: 1200px;
  --gutter: clamp(22px, 5vw, 64px);
  --sect: clamp(90px, 12vw, 160px);
  --ease: cubic-bezier(.22,.61,.24,1);
}

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  color:var(--ink);
  font-family:var(--f-serif);
  font-weight:400;
  font-size:19px;
  line-height:1.62;
  font-variant-numeric:oldstyle-nums;
  font-variant-ligatures:common-ligatures contextual;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  animation:page-in .8s var(--ease) both;
  /* The painted vellum ground: faint pigment washes bled into the paper,
     the way watercolour blooms and settles at the tide-lines. */
  background:
    /* foxing — the small age-spots of true vellum, placed, not scattered */
    radial-gradient(42px 34px at 23% 81%, rgba(140,105,55,.055), transparent 100%),
    radial-gradient(30px 26px at 87% 14%, rgba(140,105,55,.05), transparent 100%),
    radial-gradient(24px 20px at 64% 94%, rgba(120,90,48,.045), transparent 100%),
    radial-gradient(90% 90% at 50% -8%, rgba(224,190,107,.10), transparent 55%),
    radial-gradient(135% 115% at 6% -12%, rgba(31,58,147,.13), transparent 48%),
    radial-gradient(120% 120% at 104% 4%, rgba(198,54,43,.11), transparent 46%),
    radial-gradient(130% 130% at 96% 112%, rgba(30,107,87,.15), transparent 52%),
    radial-gradient(120% 120% at -8% 108%, rgba(190,110,134,.13), transparent 48%),
    var(--paper);
  background-attachment:fixed;
}
body.is-leaving{ animation:page-out .35s ease both; }
@keyframes page-in { from{ opacity:0; } to{ opacity:1; } }
@keyframes page-out{ from{ opacity:1; } to{ opacity:0; } }

/* Two layers of tooth: fine paper grain + a broader marbled swirl. */
body::before{
  content:''; position:fixed; inset:0; z-index:500; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  opacity:.05; mix-blend-mode:multiply;
}
/* Tranche dorée — the gilded edge of the closed volume, along the top. */
body::after{
  content:''; position:fixed; top:0; left:0; right:0; height:3px; z-index:600;
  pointer-events:none;
  background:linear-gradient(90deg,
    #7E5F27 0%, #D9BA6C 14%, #A6853B 32%, #EBD089 50%,
    #916E2A 68%, #CDA85B 86%, #7E5F27 100%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--lapis); color:#F3EEDF; }

/* ---- Keyboard focus — a gold-tooled frame, as stamped on a binding ------ */
:where(a, button, [tabindex]):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(31,58,147,.14);
  border-radius:1px;
}
.plate :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible,
.mobile-menu :where(a, button):focus-visible{
  outline-color:var(--gold-bright);
  box-shadow:0 0 0 6px rgba(214,180,94,.18);
}

/* ---- Skip link — a bookplate that surfaces for keyboard readers -------- */
.skip-link{
  position:fixed; top:12px; left:12px; z-index:900;
  font-family:var(--f-caps); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); background:var(--cream);
  border:1px solid var(--gold); box-shadow:0 2px 14px rgba(11,22,34,.18);
  padding:12px 20px;
  transform:translateY(-260%);
  transition:transform .3s var(--ease);
}
.skip-link:focus-visible{ transform:none; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); position:relative; }

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
h1,h2,h3{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.06;
  letter-spacing:.002em;
  font-variant-numeric:lining-nums;
  text-wrap:balance;
  text-shadow:0 0 .8px rgba(23,23,18,.22);
}
h1{ font-size:clamp(2.9rem, 7.2vw, 6rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.4rem); line-height:1.1; }
h3{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.2; font-weight:500; }
h1 em, h2 em, h3 em{ font-style:italic; font-weight:400; color:var(--lapis); }

p{ text-wrap:pretty; }
@supports (hanging-punctuation: first){
  body{ hanging-punctuation:first allow-end; }
}

.hero h1, .page-header h1{ animation:typeset 1.4s var(--ease) .15s both; }
@keyframes typeset{
  from{ font-variation-settings:'opsz' 6; opacity:0; }
  to{ font-variation-settings:'opsz' 96; opacity:1; }
}

.lede{
  font-size:clamp(1.12rem, 1.7vw, 1.32rem);
  line-height:1.72;
  color:var(--ink-soft);
  max-width:62ch;
}

/* Lapidary label — carved capitals, a gilt rule, a pigment tick. */
.label{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-caps);
  font-size:.74rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:26px;
}
.label::before{
  content:''; width:34px; height:2px; flex:none;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold));
  background-size:220% 100%;
  background-position:calc(var(--lx, .5) * 100%) 0;  /* the rule answers the lamp */
}
.label .num{ color:var(--lapis); }

.section{ padding:var(--sect) 0; position:relative; }
.section--line{ border-top:1px solid var(--line); }

/* A painted fresco plate — warm plaster, pigment blooms sunk into the wall. */
.section--deep{
  --page-tone:var(--plaster);
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(90% 80% at 12% -8%, rgba(30,107,87,.16), transparent 55%),
    radial-gradient(80% 90% at 100% 40%, rgba(190,110,134,.16), transparent 58%),
    radial-gradient(120% 90% at 60% 120%, rgba(31,58,147,.12), transparent 60%),
    linear-gradient(160deg, #C6E1D7, #B7D5CA);
}
.section--deep::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='4' seed='11' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.16 0 0 0 0.5 -0.18'/></filter><rect width='600' height='600' filter='url(%23f)'/></svg>");
  background-size:600px 600px; opacity:.10; mix-blend-mode:multiply;
}
.section--deep > .wrap{ position:relative; z-index:1; }

/* The dark illuminated plate — lapis night, imperial gold halo, silk moiré. */
.plate{
  position:relative;
  color:var(--cream);
  background:
    radial-gradient(90% 70% at 86% -14%, rgba(214,180,94,.20), transparent 52%),
    radial-gradient(60% 80% at 14% -12%, rgba(30,107,87,.30), transparent 55%),
    radial-gradient(85% 120% at -6% 108%, rgba(46,74,180,.5), transparent 60%),
    radial-gradient(70% 90% at 108% 118%, rgba(151,36,63,.32), transparent 58%),
    radial-gradient(50% 70% at 55% 115%, rgba(190,110,134,.20), transparent 60%),
    linear-gradient(160deg, #12264A 0%, #1E4488 50%, #0F1E3E 100%);
}
.plate::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='m'><feTurbulence type='turbulence' baseFrequency='0.004 0.010' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.84 0 0 0 0 0.70 0 0 0 0 0.37 0 0 0 0.8 -0.3'/></filter><rect width='700' height='700' filter='url(%23m)'/></svg>");
  background-size:700px 700px; opacity:.09; mix-blend-mode:screen;
}
/* gilt fillet framing the plate, as tooled on a binding */
.plate::after{
  content:''; position:absolute; inset:clamp(14px,2.4vw,30px); pointer-events:none;
  border:1px solid var(--line-cream);
  box-shadow:inset 0 0 0 1px rgba(214,180,94,.10);
}
.plate > .wrap{ position:relative; z-index:1; }
.plate .label{ color:var(--cream-soft); }
.plate .label::before{ background:linear-gradient(90deg, var(--gold-bright), #F0D791); }
.plate .label .num{ color:var(--gold-bright); }
.plate .lede{ color:var(--cream-soft); }
.plate h1 em,.plate h2 em{ color:var(--gold-bright); }

.section-head{ max-width:840px; margin-bottom:clamp(48px, 7vw, 84px); }
.section-head h2{ margin-bottom:22px; }
/* an illuminated fleuron closing the section title */
.section-head h2::after{
  content:'❧'; display:inline-block; margin-left:.35em;
  font-family:var(--f-serif); font-style:italic;
  font-size:.62em; color:var(--gold); transform:translateY(-.05em);
  opacity:.85;
}
.plate .section-head h2::after{ color:var(--gold-bright); }

/* =========================================================================
   NAVIGATION
   ========================================================================= */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:22px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-nav .wrap{
  max-width:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:30px;
}
.site-nav.is-scrolled{
  padding:14px 0;
  background:rgba(207,230,221,.90);
  backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 var(--line-gold);
}
.plate-page .site-nav:not(.is-scrolled){ color:var(--cream); }

.logo{
  font-family:var(--f-display);
  font-size:1.24rem;
  letter-spacing:.005em;
  white-space:nowrap;
}
.logo .dot{
  display:inline-block; width:8px; height:8px; margin-right:11px;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  transform:rotate(45deg) translateY(-2px);
  box-shadow:0 0 0 1px rgba(166,133,59,.35);
}
.nav-links{ display:flex; gap:clamp(18px, 3vw, 40px); }
.nav-links a{
  font-family:var(--f-caps);
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:inherit; opacity:.74;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:opacity .3s, border-color .3s;
}
.nav-links a:hover{ opacity:1; }
.nav-links a.is-active{ opacity:1; border-color:var(--gold); }

.nav-links{ counter-reset:chapter; }
.nav-links li{ counter-increment:chapter; }
.nav-links a::before{
  content:counter(chapter, lower-roman) ".\00a0";
  color:var(--lapis); opacity:.85;
}
.nav-links li:last-child a::before{ content:'\2020\00a0'; color:var(--carmine); }

.nav-burger{
  display:none;
  background:none; border:0; cursor:pointer;
  width:34px; height:22px; position:relative; color:inherit;
}
.nav-burger span, .nav-burger::before, .nav-burger::after{
  content:''; position:absolute; left:0; right:0; height:1px; background:currentColor;
  transition:transform .3s var(--ease);
}
.nav-burger::before{ top:3px; } .nav-burger span{ top:11px; } .nav-burger::after{ top:19px; }

.mobile-menu{
  position:fixed; inset:0; z-index:200;
  color:var(--cream);
  background:
    radial-gradient(80% 60% at 85% -10%, rgba(214,180,94,.16), transparent 55%),
    radial-gradient(90% 120% at -5% 110%, rgba(31,58,147,.5), transparent 60%),
    linear-gradient(160deg, var(--night), var(--bistre));
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gutter);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; }
.mobile-menu{ counter-reset:chapter; }
.mobile-menu a{
  font-family:var(--f-display);
  font-size:clamp(2rem, 8vw, 3.2rem);
  padding:12px 0;
  border-bottom:1px solid var(--line-cream);
  display:flex; justify-content:flex-start; align-items:baseline;
  counter-increment:chapter;
  transition:padding-left .35s var(--ease), color .35s;
}
.mobile-menu a::before{
  content:counter(chapter, lower-roman);
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.1em;
  color:var(--gold-bright); margin-right:22px; min-width:1.6em;
}
.mobile-menu a:last-of-type::before{ content:'\2020'; }
.mobile-menu a::after{
  content:'→'; font-size:1.2rem; opacity:0; margin-left:auto; transition:opacity .3s;
}
.mobile-menu a:hover{ padding-left:14px; color:var(--gold-bright); }
.mobile-menu a:hover::after{ opacity:1; }
.mobile-menu-close{
  position:absolute; top:26px; right:var(--gutter);
  background:none; border:1px solid var(--line-cream); color:var(--cream);
  width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:1rem;
  transition:background .3s, color .3s;
}
.mobile-menu-close:hover{ background:var(--cream); color:var(--night); }

/* =========================================================================
   BUTTONS / LINKS — gold-tooled labels on a binding
   ========================================================================= */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-caps);
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  padding:16px 30px;
  border:1px solid var(--ink);
  border-radius:0;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s;
  cursor:pointer;
}
.btn::after{
  content:''; position:absolute; inset:3px;
  border:1px solid currentColor; opacity:.32; pointer-events:none;
  transition:opacity .35s;
}
.btn:hover{ background:var(--ink); color:var(--cream); }
.btn-solid{
  color:var(--cream); border-color:var(--lapis-ink);
  background:linear-gradient(160deg, var(--lapis), var(--lapis-ink));
}
.btn-solid::after{ border-color:var(--gold-bright); opacity:.5; }
.btn-solid:hover{ background:linear-gradient(160deg, var(--klein), var(--lapis)); }
.plate .btn{ border-color:var(--cream-soft); color:var(--cream); }
.plate .btn:hover{ background:var(--cream); color:var(--night); }
.plate .btn-solid{
  color:var(--night); border-color:var(--gold-bright);
  background:linear-gradient(160deg, #F0D791, var(--gold-bright));
}
.plate .btn-solid::after{ border-color:rgba(11,22,34,.4); }
.plate .btn-solid:hover{ background:var(--cream); }

.tlink{
  font-family:var(--f-caps);
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lapis-ink);
  padding-bottom:3px;
  background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--gold), var(--gold));
  background-repeat:no-repeat;
  background-size:100% 1px, 0% 2px;
  background-position:100% 100%, 0 100%;
  transition:color .3s, background-size .55s var(--ease);
}
.tlink:hover{ background-size:0% 1px, 100% 2px; color:var(--vermilion); }
.plate .tlink{ color:var(--gold-bright); }
.plate .tlink:hover{ color:var(--cream); }

.cta-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

/* =========================================================================
   HERO — the frontispiece, with a painted illumination
   ========================================================================= */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:150px 0 60px;
  position:relative;
  overflow:hidden;
}
.hero-kicker{
  font-family:var(--f-caps);
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint);
  display:flex; align-items:center; gap:12px;
  margin-bottom:34px;
}
.hero-kicker .pulse{
  width:8px; height:8px; flex:none;
  background:linear-gradient(135deg, var(--vermilion), var(--carmine));
  transform:rotate(45deg);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(198,54,43,.4);} 50%{ box-shadow:0 0 0 8px rgba(198,54,43,0);} }

.hero h1{ max-width:14ch; margin-bottom:40px; }
.hero .lede{ margin-bottom:16px; }
.hero .lede + .lede{ margin-bottom:0; }
.hero-cols{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(30px, 6vw, 90px);
  align-items:end;
}
.hero-aside{
  border-left:2px solid var(--line-gold);
  padding-left:clamp(20px, 3vw, 40px);
  font-size:1rem;
  color:var(--ink-soft);
}
.hero-aside .now-label{
  font-family:var(--f-caps); font-size:.7rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--malachite);
  display:block; margin-bottom:12px;
}
.hero .cta-row{ margin-top:52px; }

.hero-foot{
  margin-top:70px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}

/* The illumination — a spilled palette / rose-window, blurred into the paper. */
.hero-orn{
  position:absolute; z-index:-1;
  top:4%; right:-160px;
  width:clamp(360px, 46vw, 720px); aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 25deg,
    rgba(31,58,147,.55), rgba(151,36,63,.42), rgba(30,107,87,.48),
    rgba(178,122,40,.5), rgba(92,42,80,.4), rgba(198,54,43,.44),
    rgba(14,47,160,.5), rgba(31,58,147,.55));
  filter:blur(64px) saturate(1.12);
  opacity:.52;
}
/* a crisp gilt ring and a pigment bead laid over the bloom */
.hero-orn::before{
  content:''; position:absolute; inset:8%;
  border:1px solid var(--line-gold); border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(166,133,59,.14);
}
.hero-orn::after{
  content:''; position:absolute; top:50%; left:2%;
  width:10px; height:10px; background:var(--gold);
  transform:rotate(45deg);
  box-shadow:0 0 0 1px rgba(166,133,59,.4);
}

/* Interior page header — fresco wash behind the title, Scotch rule beneath. */
.page-header{
  padding:190px 0 clamp(60px, 8vw, 100px);
  border-bottom:2px solid var(--ink);
  position:relative; overflow:hidden;
}
.page-header::before{
  content:''; position:absolute; z-index:-1;
  top:-20%; right:-6%; width:52vw; max-width:640px; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 40deg,
    rgba(31,58,147,.5), rgba(178,122,40,.45), rgba(151,36,63,.4),
    rgba(30,107,87,.45), rgba(31,58,147,.5));
  filter:blur(70px); opacity:.4;
}
.page-header::after{
  content:''; position:absolute; left:0; right:0; bottom:5px; height:1px;
  background:var(--line-gold);
}
.page-header h1{ max-width:16ch; }
.page-header .lede{ margin-top:30px; }
.crumb{
  font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:30px;
}
.crumb span{ color:var(--vermilion); margin:0 8px; }

/* =========================================================================
   CONTENTS — table of contents, gilt Scotch rule, pigment folios
   ========================================================================= */
.contents{
  position:relative;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);
  padding:28px 0 32px;
  background:linear-gradient(180deg, rgba(224,190,107,.10), transparent 60%);
}
.contents::before{
  content:''; position:absolute; top:3px; left:0; right:0; height:1px;
  background:var(--line-gold);
}
.contents-label{
  display:block;
  font-family:var(--f-caps); font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:18px;
}
.contents ol{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px clamp(24px, 3.5vw, 54px);
}
.contents a{ display:flex; align-items:baseline; gap:10px; transition:color .3s; }
.contents a:hover{ color:var(--lapis-ink); }
.contents .t{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:1.06rem; white-space:nowrap;
}
.contents .dots{ flex:1; border-bottom:1px dotted rgba(20,34,29,.32); transform:translateY(-4px); }
.contents .n{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; }
/* each entry numbered in its own pigment */
.contents li:nth-child(7n+1) .n{ color:var(--lapis); }
.contents li:nth-child(7n+2) .n{ color:var(--vermilion); }
.contents li:nth-child(7n+3) .n{ color:var(--malachite); }
.contents li:nth-child(7n+4) .n{ color:var(--ochre); }
.contents li:nth-child(7n+5) .n{ color:var(--carmine); }
.contents li:nth-child(7n+6) .n{ color:var(--tyrian); }
.contents li:nth-child(7n+7) .n{ color:var(--klein); }
[id]{ scroll-margin-top:80px; }

/* =========================================================================
   INDEX STRIP — catalogue index, each leaf a different pigment
   ========================================================================= */
.index-strip{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-left:1px solid var(--line);
}
.index-item{
  border-right:1px solid var(--line);
  padding:8px clamp(18px, 2.4vw, 34px) 30px;
  position:relative;
}
.index-item::before{
  content:''; position:absolute; top:0; left:-1px; width:34px; height:2px;
}
.index-item:nth-child(1)::before{ background:var(--lapis); }
.index-item:nth-child(2)::before{ background:var(--vermilion); }
.index-item:nth-child(3)::before{ background:var(--malachite); }
.index-item:nth-child(4)::before{ background:var(--ochre); }
.index-item .roman{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:1.7rem; display:block; margin-bottom:18px;
}
.index-item:nth-child(1) .roman{ color:var(--lapis); }
.index-item:nth-child(2) .roman{ color:var(--vermilion); }
.index-item:nth-child(3) .roman{ color:var(--malachite); }
.index-item:nth-child(4) .roman{ color:var(--ochre); }
.index-item h4{
  font-family:var(--f-serif); font-weight:600; font-size:1.08rem;
  line-height:1.45; margin-bottom:8px;
}
.index-item p{ font-size:.92rem; color:var(--ink-soft); line-height:1.6; }

/* =========================================================================
   PHILOSOPHY — pull-quote on the illuminated plate
   ========================================================================= */
.philosophy blockquote{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.7rem, 3.6vw, 2.9rem);
  line-height:1.28; letter-spacing:.002em;
  max-width:24ch; text-wrap:balance;
}
.philosophy blockquote em{ font-style:italic; color:var(--gold-bright); }
.philosophy .phil-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(40px, 6vw, 90px); align-items:start;
}
.philosophy .phil-notes p{
  color:var(--cream-soft); font-size:1.02rem; line-height:1.8;
  padding-left:22px; margin-bottom:26px;
  border-left:2px solid;
}
.philosophy .phil-notes p:nth-child(1){ border-color:var(--gold-bright); }
.philosophy .phil-notes p:nth-child(2){ border-color:var(--vermilion); }
.philosophy .phil-notes p:nth-child(3){ border-color:var(--malachite); }
.philosophy .phil-notes p:last-child{ margin-bottom:0; }

/* =========================================================================
   SKILLS — index table
   ========================================================================= */
.skill-table{ border-top:1px solid var(--line); }
.skill-row{
  display:grid;
  grid-template-columns:minmax(180px, 300px) 1fr;
  gap:clamp(18px, 4vw, 60px);
  padding:26px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.skill-row dt{
  font-family:var(--f-caps); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
}
.skill-row dd{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(1.1rem, 1.8vw, 1.4rem); line-height:1.6;
  color:var(--ink);
}
.skill-row:nth-child(6n+1) dt{ color:var(--lapis-ink); }
.skill-row:nth-child(6n+2) dt{ color:var(--carmine); }
.skill-row:nth-child(6n+3) dt{ color:var(--malachite); }
.skill-row:nth-child(6n+4) dt{ color:var(--ochre); }
.skill-row:nth-child(6n+5) dt{ color:var(--tyrian); }
.skill-row:nth-child(6n+6) dt{ color:var(--klein); }
.skill-row dd i{ color:var(--gold); font-style:normal; margin:0 10px; }

/* =========================================================================
   EXPERIENCE / EDUCATION — dossier entries
   ========================================================================= */
.dossier{
  display:grid;
  grid-template-columns:minmax(180px, 280px) 1fr;
  gap:clamp(24px, 4vw, 70px);
  padding:clamp(36px, 5vw, 56px) 0;
  border-top:1px solid var(--line);
}
.dossier-meta{
  font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); line-height:2.1;
}
.dossier-meta .where{ color:var(--malachite); }
.dossier-body h3{ margin-bottom:6px; }
.dossier-body .org{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:1.15rem; color:var(--ink-soft);
  display:block; margin-bottom:24px;
}
.notes{ max-width:66ch; }
.notes li{
  position:relative;
  padding:12px 0 12px 30px;
  color:var(--ink-soft);
  font-size:1.02rem; line-height:1.7;
  border-bottom:1px solid var(--line-soft);
}
.notes li:last-child{ border-bottom:0; }
.notes li::before{ content:'—'; position:absolute; left:0; color:var(--vermilion); }

/* =========================================================================
   PROJECTS — catalogue folios, each plate its own pigment
   ========================================================================= */
.folio{
  padding:clamp(56px, 8vw, 100px) 0;
  border-top:1px solid var(--line);
  position:relative;
}
.folio::after{
  content:attr(data-roman);
  position:absolute; top:clamp(30px, 6vw, 64px); right:0;
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(150px, 20vw, 300px); line-height:.75;
  color:var(--page-tone, var(--paper));
  text-shadow:-1px -1px 1px rgba(20,34,29,.18), 1px 1px 1px rgba(255,255,255,.75);
  pointer-events:none; user-select:none; z-index:-1;
}
@media (max-width:960px){ .folio::after{ display:none; } }
.folio-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:18px 34px;
  margin-bottom:14px;
}
.folio-no{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(2rem, 4vw, 3rem);
}
/* the plate's pigment — folio number, its rule, its stack marker */
.folio:nth-of-type(6n+1) .folio-no{ color:var(--lapis); }
.folio:nth-of-type(6n+2) .folio-no{ color:var(--vermilion); }
.folio:nth-of-type(6n+3) .folio-no{ color:var(--malachite); }
.folio:nth-of-type(6n+4) .folio-no{ color:var(--ochre); }
.folio:nth-of-type(6n+5) .folio-no{ color:var(--carmine); }
.folio:nth-of-type(6n+6) .folio-no{ color:var(--tyrian); }
.folio h3{ font-size:clamp(1.8rem, 3.4vw, 2.7rem); }
.folio .folio-sub{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem, 1.8vw, 1.4rem);
  color:var(--ink-soft);
  margin-bottom:26px; display:block;
}
.folio-stack{
  font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  line-height:2.2;
  margin-bottom:34px;
  padding-bottom:30px;
  border-bottom:1px solid var(--line-soft);
  max-width:74ch;
}
.folio-stack b{ color:var(--lapis-ink); font-weight:500; }
.folio:nth-of-type(6n+2) .folio-stack b{ color:var(--carmine); }
.folio:nth-of-type(6n+3) .folio-stack b{ color:var(--malachite); }
.folio:nth-of-type(6n+4) .folio-stack b{ color:var(--ochre); }
.folio:nth-of-type(6n+5) .folio-stack b{ color:var(--carmine); }
.folio:nth-of-type(6n+6) .folio-stack b{ color:var(--tyrian); }
.folio-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(220px, 1fr);
  gap:clamp(30px, 5vw, 80px);
  align-items:start;
}
.folio-side{
  border-left:2px solid var(--line-gold);
  padding-left:clamp(20px, 2.5vw, 36px);
  position:sticky; top:120px;
}
.folio-side h5{
  font-family:var(--f-caps); font-size:.7rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:16px;
}
.folio-side .side-note{
  font-size:.94rem; color:var(--ink-soft); line-height:1.7; margin-bottom:26px;
  font-style:italic;
}
.folio-links{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }

/* ---- How to use it — a short recipe card, numbered in the plate's own
   pigment, commands set in type as they'd be typed ---------------------- */
.howto{
  margin-top:44px; padding-top:36px; max-width:76ch;
  border-top:1px solid var(--line);
}
.howto h5{
  font-family:var(--f-caps); font-size:.7rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:26px;
}
.howto-list{ counter-reset:howto; list-style:none; display:grid; gap:20px; }
.howto-list li{
  counter-increment:howto; position:relative;
  padding-left:38px; min-height:26px;
}
.howto-list li::before{
  content:counter(howto);
  position:absolute; left:0; top:0;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:.72rem;
  color:var(--pig, var(--lapis));
  border:1px solid currentColor; border-radius:50%;
}
.howto-list p{ margin-bottom:9px; color:var(--ink-soft); font-size:1rem; line-height:1.6; }
.howto-list code{
  display:inline-block;
  font-family:var(--f-mono); font-size:.86rem;
  color:var(--ink);
  background:var(--line-soft);
  border:1px solid var(--line);
  border-radius:3px;
  padding:6px 11px;
  margin:3px 8px 0 0;
}
.howto-note{
  display:inline-block; margin-top:6px;
  font-size:.86rem; font-style:italic; color:var(--ink-faint);
}

/* =========================================================================
   BLOG — fields of inquiry, each essay its own pigment
   ========================================================================= */
.essay{
  display:grid;
  grid-template-columns:minmax(140px, 220px) 1fr;
  gap:clamp(24px, 4vw, 70px);
  padding:clamp(44px, 6vw, 70px) 0;
  border-top:1px solid var(--line);
}
.essay:first-of-type{ border-top:0; }
.essay-no{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.8rem, 3vw, 2.6rem); line-height:1;
}
.essay:nth-of-type(6n+1) .essay-no{ color:var(--lapis); }
.essay:nth-of-type(6n+2) .essay-no{ color:var(--vermilion); }
.essay:nth-of-type(6n+3) .essay-no{ color:var(--malachite); }
.essay:nth-of-type(6n+4) .essay-no{ color:var(--tyrian); }
.essay:nth-of-type(6n+5) .essay-no{ color:var(--ochre); }
.essay:nth-of-type(6n+6) .essay-no{ color:var(--carmine); }
.essay-no small{
  display:block; margin-top:14px;
  font-family:var(--f-mono); font-style:normal;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
}
.essay-body h3{ margin-bottom:20px; max-width:22ch; }
.essay-body p{ max-width:64ch; color:var(--ink-soft); line-height:1.8; }
.essay-body p + p{ margin-top:16px; }

/* =========================================================================
   PROSE — long-form, with an illuminated versal
   ========================================================================= */
.prose{
  display:grid;
  grid-template-columns:minmax(180px, 300px) 1fr;
  gap:clamp(26px, 5vw, 80px);
  padding:clamp(50px, 7vw, 90px) 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.prose:first-of-type{ border-top:0; }
.prose-side{ position:sticky; top:120px; }
.prose-side .label{ margin-bottom:14px; }
.prose-side h2{ font-size:clamp(1.6rem, 2.8vw, 2.3rem); max-width:12ch; }
.prose-body{ max-width:68ch; }
.prose-body p{
  color:var(--ink-soft); font-size:1.08rem; line-height:1.82;
  margin-bottom:22px;
}
.prose-body p:last-child{ margin-bottom:0; }
.prose-body p b{ color:var(--ink); font-weight:600; }
/* The versal — an illuminated initial, lapis letter on a gold shadow */
.prose-body .drop::first-letter{
  font-family:var(--f-display); font-style:italic;
  font-size:3.8em; line-height:.76;
  float:left; padding:10px 14px 0 0;
  color:var(--lapis);
  text-shadow:2px 2px 0 rgba(214,180,94,.5), 3px 3px 0 rgba(166,133,59,.28);
}
.prose-body .drop::first-line{ font-variant-caps:small-caps; letter-spacing:.05em; }
@media (min-width:640px){
  .prose-body p, .essay-body p{ text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
}
.prose-body .pull{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.35rem, 2.2vw, 1.75rem); line-height:1.45;
  color:var(--ink);
  border-left:3px solid var(--gold);
  padding:6px 0 6px 26px;
  margin:34px 0;
}

/* =========================================================================
   CONTACT — ledger rows
   ========================================================================= */
.ledger{ border-top:1px solid var(--line); }
.ledger-row{
  display:grid;
  grid-template-columns:minmax(120px, 220px) 1fr auto;
  gap:clamp(16px, 3vw, 50px);
  align-items:center;
  padding:clamp(26px, 4vw, 40px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease), background .4s var(--ease);
}
.ledger-row:hover{ padding-left:18px; background:linear-gradient(90deg, rgba(224,190,107,.14), transparent 70%); }
.ledger-row .ch{
  font-family:var(--f-caps); font-size:.72rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint);
}
.ledger-row .cv{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(1.15rem, 2.4vw, 1.75rem);
  overflow-wrap:anywhere;
}
.ledger-row .arrow{
  font-family:var(--f-serif); font-size:1.4rem;
  transition:transform .4s var(--ease);
}
.ledger-row:nth-child(4n+1) .arrow{ color:var(--lapis); }
.ledger-row:nth-child(4n+2) .arrow{ color:var(--vermilion); }
.ledger-row:nth-child(4n+3) .arrow{ color:var(--malachite); }
.ledger-row:nth-child(4n+4) .arrow{ color:var(--ochre); }
.ledger-row:hover .arrow{ transform:translate(6px, -4px); }

/* =========================================================================
   CLOSING PLATE
   ========================================================================= */
.closing{ text-align:left; }
.closing h2{ font-size:clamp(2.2rem, 5.4vw, 4.2rem); max-width:18ch; margin-bottom:30px; }
.closing .lede{ margin-bottom:44px; }

/* =========================================================================
   FOOTER — the marbled endpaper of the volume
   ========================================================================= */
.site-footer{
  position:relative;
  color:var(--cream);
  background:
    radial-gradient(90% 70% at 50% -24%, rgba(31,58,147,.34), transparent 62%),
    radial-gradient(70% 90% at 88% 120%, rgba(151,36,63,.28), transparent 60%),
    radial-gradient(60% 80% at 8% 110%, rgba(30,107,87,.24), transparent 58%),
    linear-gradient(160deg, var(--night), var(--bistre));
  padding:clamp(70px, 9vw, 110px) 0 36px;
}
.site-footer::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='e'><feTurbulence type='turbulence' baseFrequency='0.006 0.012' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.84 0 0 0 0 0.70 0 0 0 0 0.37 0 0 0 0.8 -0.32'/></filter><rect width='700' height='700' filter='url(%23e)'/></svg>");
  background-size:700px 700px; opacity:.08; mix-blend-mode:screen;
}
.site-footer .wrap{ position:relative; z-index:1; }
.footer-top{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) repeat(3, minmax(120px, 1fr));
  gap:clamp(34px, 5vw, 70px);
  padding-bottom:clamp(50px, 7vw, 80px);
  border-bottom:1px solid var(--line-cream);
}
.footer-top h3{ font-size:clamp(1.7rem, 3vw, 2.5rem); font-weight:400; max-width:16ch; line-height:1.2; }
.footer-top h3 em{ font-style:italic; color:var(--gold-bright); }
.footer-col h5{
  font-family:var(--f-caps); font-size:.68rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream-soft); margin-bottom:20px;
}
.footer-col a{
  display:block; padding:5px 0;
  font-size:.98rem; color:var(--cream-soft);
  transition:color .3s, padding-left .3s var(--ease);
}
.footer-col a:hover{ color:var(--gold-bright); padding-left:8px; }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding-top:30px;
  font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-soft);
}

/* =========================================================================
   MARGINALIA
   ========================================================================= */
.section-head, .prose, .phil-grid, .folio-grid{ position:relative; }
.margin-note{
  display:none;
  position:absolute; right:calc(100% + clamp(20px, 2vw, 32px)); top:8px;
  width:130px; text-align:right;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.9;
  color:var(--ink-faint);
}
.margin-note::after{
  content:''; display:block; width:26px; height:1px;
  background:var(--gold); opacity:.75;
  margin:10px 0 0 auto;
}
.plate .margin-note{ color:var(--cream-soft); }
@media (min-width:1560px){ .margin-note{ display:block; } }

/* =========================================================================
   THE PHYSICAL VOLUME — leaf, ribbon, placard, seal
   ========================================================================= */
.page-leaf{
  position:fixed; inset:0; z-index:400;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(224,190,107,.16), transparent 60%),
    var(--paper-deep);
  border-top:1px solid var(--line-gold);
  box-shadow:0 -24px 60px rgba(11,22,34,.28);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(103%);
  transition:transform .46s cubic-bezier(.7, 0, .28, 1);
  pointer-events:none;
}
.page-leaf.is-covering{ transform:translateY(0); }
.page-leaf .leaf-label{
  font-family:var(--f-caps); font-size:.7rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ink-soft);
  opacity:0; transform:translateY(8px);
  transition:opacity .28s .14s, transform .28s .14s;
}
.page-leaf.is-covering .leaf-label{ opacity:1; transform:none; }

/* Bookmark ribbon — imperial silk, gold-fringed. */
.bookmark-ribbon{
  position:fixed; top:0; right:clamp(18px, 4.5vw, 60px);
  width:8px; height:34px; z-index:130;
  background:linear-gradient(180deg, var(--carmine), var(--vermilion) 55%, #D6543F);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  box-shadow:1px 0 1px rgba(11,22,34,.24), inset 1px 0 0 rgba(214,180,94,.5);
  pointer-events:none;
}

.page-placard{
  position:fixed; left:clamp(16px, 3vw, 42px); bottom:24px; z-index:130;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line-gold);
  padding:9px 14px 8px;
  box-shadow:0 2px 10px rgba(11,22,34,.12);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events:none;
}
.page-placard.is-shown{ opacity:1; transform:none; }
/* the placard needs a desk; the ribbon travels with every copy — keeping
   the reader's place is exactly what a phone screen wants */
@media (max-width:900px){ .page-placard{ display:none; } }

.press-stamp{ width:98px; height:98px; margin-top:38px; color:var(--gold-bright); opacity:.92; }
.press-stamp text{ font-family:var(--f-mono); fill:currentColor; }
.press-stamp .stamp-s{ font-family:var(--f-display); font-style:italic; }
.press-stamp .stamp-ring{ transform-origin:60px 60px; animation:stamp-turn 70s linear infinite; }
@keyframes stamp-turn{ to{ transform:rotate(360deg); } }

/* =========================================================================
   REVEAL MOTION
   ========================================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal="left"]{ transform:translateX(-30px); }
[data-reveal="right"]{ transform:translateX(30px); }
[data-reveal].is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px){
  .index-strip{ grid-template-columns:repeat(2, 1fr); border-top:1px solid var(--line); }
  .index-item{ padding-top:26px; }
  .index-item:nth-child(odd){ border-left:0; }
  .hero-cols{ grid-template-columns:1fr; align-items:start; }
  .hero-aside{ border-left:0; border-top:2px solid var(--line-gold); padding:26px 0 0; max-width:60ch; }
  .folio-grid{ grid-template-columns:1fr; }
  .folio-side{ position:static; border-left:0; border-top:2px solid var(--line-gold); padding:26px 0 0; }
  .philosophy .phil-grid{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  /* the instrument scales to the hand: smaller, clustered with the burger */
  .theme-orb{ width:46px; height:46px; margin-left:auto; }
  .theme-orb::after{ display:none; }
  .prose, .essay, .dossier{ grid-template-columns:1fr; }
  .prose-side{ position:static; }
  .prose-side h2{ max-width:none; }
  .skill-row{ grid-template-columns:1fr; gap:8px; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-top > div:first-child{ grid-column:1 / -1; }
  .ledger-row{ grid-template-columns:1fr auto; }
  .ledger-row .ch{ grid-column:1 / -1; }
}
@media (max-width: 560px){
  .index-strip{ grid-template-columns:1fr; border-left:0; }
  .index-item{ border-right:0; border-bottom:1px solid var(--line); padding-left:0; }
  .index-item::before{ left:0; }
  .footer-top{ grid-template-columns:1fr; }
  .hero{ padding-top:130px; }
}

/* (the hand-held edition rules live at the very end of this sheet, after
   every base declaration, so the cascade cannot undo them) */

/* =========================================================================
   THE LIVING VOLUME — motion, presence, awe
   Everything below is additive and never touches scroll mechanics.
   ========================================================================= */

/* ---- Tranche dorée catches the light, slowly ------------------------- */
body::after{
  background:linear-gradient(90deg,
    #7E5F27, #D9BA6C, #A6853B, #F0D68C, #916E2A,
    #CDA85B, #7E5F27, #D9BA6C, #A6853B, #F0D68C, #916E2A);
  background-size:220% 100%;
  animation:tranche 9s linear infinite;
}
@keyframes tranche{ to{ background-position:220% 0; } }

/* ---- Choreographed reveals — ink settling onto the page -------------- */
/* blur kept modest: large-area blur transitions are the classic scroll-jank
   source, and 6px reads identically to 9px in motion */
[data-reveal]{
  filter:blur(6px);
  transition:opacity 1.05s var(--ease), transform 1.15s var(--ease), filter 1s var(--ease);
  will-change:opacity, transform, filter;
}
[data-reveal].is-visible{ filter:blur(0); }

/* A heading can wipe in like ink drawn across the sheet */
[data-reveal="ink"]{
  clip-path:inset(0 100% 0 0);
  transform:none;
  transition:clip-path 1.1s var(--ease), opacity .8s var(--ease), filter 1s var(--ease);
}
[data-reveal="ink"].is-visible{ clip-path:inset(0 0 0 0); }

/* Section titles draw a gilt hairline as they arrive */
.section-head h2, .prose-side h2{ position:relative; }
.section-head h2::before{
  content:''; position:absolute; left:0; bottom:-14px; height:2px; width:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright), transparent);
  transition:width 1.1s .25s var(--ease);
}
[data-reveal].is-visible .section-head h2::before,
.section-head[data-reveal].is-visible h2::before{ width:min(120px, 40%); }

/* ---- The opening of the volume — a cinematic first load -------------- */
html.is-opening{ overflow:hidden; }
#opening{
  position:fixed; inset:0; z-index:850;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; color:var(--cream); text-align:center;
  background:
    radial-gradient(80% 60% at 50% -6%, rgba(214,180,94,.18), transparent 55%),
    radial-gradient(90% 120% at 0% 108%, rgba(31,58,147,.55), transparent 60%),
    radial-gradient(70% 90% at 108% 116%, rgba(151,36,63,.34), transparent 58%),
    linear-gradient(160deg, var(--night), #10233B 46%, var(--bistre));
  will-change:transform;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
#opening.is-lifting{ transform:translateY(-101%); }
#opening .op-seal{
  width:112px; height:112px; color:var(--gold-bright);
  opacity:0; transform:scale(.9) rotate(-6deg);
  transition:opacity .8s var(--ease), transform 1s var(--ease);
}
#opening.is-ready .op-seal{ opacity:.95; transform:none; }
#opening .op-seal text{ font-family:var(--f-mono); fill:currentColor; }
#opening .op-seal .op-s{ font-family:var(--f-display); font-style:italic; }
#opening .op-seal .op-ring{ transform-origin:60px 60px; animation:stamp-turn 44s linear infinite; }
#opening .op-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.6rem, 4vw, 2.6rem); letter-spacing:.01em;
  opacity:0; transform:translateY(12px);
  transition:opacity .8s .15s var(--ease), transform .8s .15s var(--ease);
}
#opening.is-ready .op-title{ opacity:1; transform:none; }
#opening .op-sub{
  font-family:var(--f-caps); font-size:.7rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--cream-soft);
  opacity:0; transition:opacity .8s .3s var(--ease);
}
#opening.is-ready .op-sub{ opacity:1; }
#opening .op-rule{
  width:0; height:1px; margin-top:4px;
  background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transition:width 1s .2s var(--ease);
}
#opening.is-ready .op-rule{ width:min(240px, 52vw); }

/* ---- The living volume — a site-wide marbled pigment field ------------ */
/* A slow wet-pigment current drifts behind every page of the codex. The     */
/* field is the ground; a central celadon veil calms it behind the reading   */
/* block, leaving the margins illuminated — a manuscript page that breathes. */
#pigment-field{
  position:fixed; inset:0; z-index:-2;
  pointer-events:none;
}
/* No separate width/height. inset:0 on a fixed element already sizes it to
   the viewport minus the scrollbar's own reserved gutter — which is the box
   window.innerWidth/innerHeight report too, and the box the JS canvas.width
   is set to. width:100vw does NOT exclude that gutter, so it and inset:0
   could disagree by the scrollbar's width. That standing few-pixel seam
   only became visible as a shift or gap once the browser's own zoom
   changed how the scrollbar rendered relative to it — this is what was
   read as the desktop zoom bug. One sizing authority now, not two. */
/* The still edition of the field, for the hand: the same broad transparent
   glazes the painter lays into the wet ground, as one static wash. The
   element is fixed and viewport-sized, so these percentages resolve against
   the screen — rasterised once, composited for free, never against the
   document. The central veil above it calms the middle exactly as it calms
   the living painting. */
#pigment-still{
  position:fixed; inset:0; z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 12% 8%,  rgba(31,58,147,.10),  transparent 55%),
    radial-gradient(110% 90% at 92% 16%, rgba(198,54,43,.08),  transparent 52%),
    radial-gradient(120% 100% at 85% 90%, rgba(30,107,87,.11), transparent 55%),
    radial-gradient(100% 90% at 8% 92%,  rgba(190,110,134,.09), transparent 50%),
    radial-gradient(90% 70% at 55% 45%,  rgba(224,190,107,.07), transparent 60%),
    var(--paper);
}
/* by lamplight the same glazes turn luminous, on the night paper */
html[data-theme='dark'] #pigment-still{
  background:
    radial-gradient(120% 90% at 12% 8%,  rgba(94,127,214,.12),  transparent 55%),
    radial-gradient(110% 90% at 92% 16%, rgba(224,106,85,.08),  transparent 52%),
    radial-gradient(120% 100% at 85% 90%, rgba(79,168,140,.12), transparent 55%),
    radial-gradient(100% 90% at 8% 92%,  rgba(214,147,168,.09), transparent 50%),
    var(--paper);
}
.field-veil{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(78% 62% at 50% 46%,
    rgba(var(--veil-rgb),.66), rgba(var(--veil-rgb),.32) 56%, rgba(var(--veil-rgb),.06) 82%);
  /* the room's atmosphere: light falls off toward the edges of the sheet */
  box-shadow:inset 0 0 16vmin rgba(22,34,30,.10);
}
html[data-theme='dark'] .field-veil{
  box-shadow:inset 0 0 22vmin rgba(0,0,0,.5);
  /* a shaft of moonlight falls diagonally through the observatory */
  background:
    linear-gradient(115deg, transparent 40%, rgba(190,205,235,.05) 50%, transparent 60%),
    radial-gradient(78% 62% at 50% 46%,
      rgba(var(--veil-rgb),.66), rgba(var(--veil-rgb),.32) 56%, rgba(var(--veil-rgb),.06) 82%);
}
/* obsidian polish on the night plates: a hairline of caught light above,
   deep shadow pooling below */
html[data-theme='dark'] .plate{
  box-shadow:inset 0 1px 0 rgba(214,226,245,.06), inset 0 -50px 90px rgba(0,0,0,.28);
}
/* keep the interior fresco/plate/footer plates opaque over the field */
.section--deep, .plate, .site-footer, .contents{ position:relative; z-index:0; }

.hero > .wrap{ position:relative; z-index:2; }
/* a deeper breath of celadon behind the hero copy so paint never fights words */
.hero > .wrap::before{
  content:''; position:absolute; z-index:-1;
  left:-12%; right:16%; top:-6%; bottom:-6%;
  background:radial-gradient(62% 80% at 22% 54%, rgba(var(--veil-rgb),.80), rgba(var(--veil-rgb),.34) 55%, transparent 76%);
  pointer-events:none;
}
@media (max-width: 700px){
  .hero > .wrap::before{ left:-20%; right:-20%; background:radial-gradient(90% 70% at 50% 46%, rgba(var(--veil-rgb),.84), transparent 78%); }
}

/* ---- Cinematic plates — the pigment blooms as you approach the work --- */
.folio{ --pig:var(--lapis); transition:transform .55s var(--ease), box-shadow .55s var(--ease); }
.folio:nth-of-type(6n+2){ --pig:var(--vermilion); }
.folio:nth-of-type(6n+3){ --pig:var(--malachite); }
.folio:nth-of-type(6n+4){ --pig:var(--ochre); }
.folio:nth-of-type(6n+5){ --pig:var(--carmine); }
.folio:nth-of-type(6n+6){ --pig:var(--tyrian); }
.folio::before{
  content:''; position:absolute; inset:-1% -4%; z-index:-1; opacity:0;
  background:radial-gradient(44% 60% at var(--mx,30%) var(--my,42%),
            color-mix(in srgb, var(--pig) 22%, transparent), transparent 72%);
  transition:opacity .6s var(--ease);
  pointer-events:none;
}
.folio:hover{ transform:translateY(-5px); }
.folio:hover::before{ opacity:1; }
.folio-no{ display:inline-block; transform-origin:left center; transition:transform .55s var(--ease); }
.folio:hover .folio-no{ transform:scale(1.07); }
@media (hover:none){
  .folio:hover{ transform:none; }
  .folio::before{ display:none; }
}

/* =========================================================================
   THE GILDED APPARATUS — the codex's working instruments
   Canon (scribe's ruling) · rinceaux (illuminator's vines) ·
   volvelle (astronomer's wheel) · catchword (binder's cue).
   Additive layer only: nothing beneath it is altered.
   ========================================================================= */

/* ---- Vellum depth — grain, parchment mottle, and the linen weave ------- */
/* Three teeth: fine grain, broad mottle, and the woven canvas threads a    */
/* painting sits on — warp and weft, visible only where the paint is thin.  */
body::before{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='0.0045 0.006' numOctaves='4' seed='23' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.24 0 0 0 0 0.32 0 0 0 0 0.27 0 0 0 0.34 -0.12'/></filter><rect width='900' height='900' filter='url(%23v)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='wa'><feTurbulence type='fractalNoise' baseFrequency='0.85 0.055' numOctaves='1' seed='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0.5 0.5 0 -0.5'/></filter><rect width='140' height='140' filter='url(%23wa)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='we'><feTurbulence type='fractalNoise' baseFrequency='0.055 0.85' numOctaves='1' seed='5' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0.5 0.5 0 -0.5'/></filter><rect width='140' height='140' filter='url(%23we)'/></svg>");
  background-size:300px 300px, 900px 900px, 140px 140px, 140px 140px;
}
/* chain lines and the papermaker's watermark — the sheet, held to light  */
.field-veil::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(20,34,29,.028) 0 1px, transparent 1px 118px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><g fill='none' stroke='rgba(22,35,30,0.05)'><circle cx='150' cy='150' r='118' stroke-width='1.5'/><circle cx='150' cy='150' r='96' stroke-width='1'/><text x='150' y='158' text-anchor='middle' dominant-baseline='central' font-family='Georgia, serif' font-style='italic' font-size='150' stroke-width='1.2'>S</text></g></svg>");
  background-position:0 0, right 6% bottom 10%;
  background-size:auto, 320px 320px;
  background-repeat:repeat, no-repeat;
}
html[data-theme='dark'] .field-veil::before{
  background-image:
    repeating-linear-gradient(90deg, rgba(234,230,214,.02) 0 1px, transparent 1px 118px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><g fill='none' stroke='rgba(220,228,240,0.04)'><circle cx='150' cy='150' r='118' stroke-width='1.5'/><circle cx='150' cy='150' r='96' stroke-width='1'/><text x='150' y='158' text-anchor='middle' dominant-baseline='central' font-family='Georgia, serif' font-style='italic' font-size='150' stroke-width='1.2'>S</text></g></svg>");
}
/* gold-tooled corner-pieces — the binding's filigree, silver by night */
.field-veil::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='rgba(156,124,46,0.5)'><path d='M6,114 V30 Q6,6 30,6 H114' stroke-width='1'/><path d='M12,114 V32 Q12,12 32,12 H114' stroke-width='.5'/><path d='M30,22 Q18,22 20,34 Q28,32 30,22 Z' stroke-width='.7'/><rect x='3.6' y='111.6' width='5' height='5' transform='rotate(45 6 114)'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='rgba(156,124,46,0.5)'><path d='M114,114 V30 Q114,6 90,6 H6' stroke-width='1'/><path d='M108,114 V32 Q108,12 88,12 H6' stroke-width='.5'/><path d='M90,22 Q102,22 100,34 Q92,32 90,22 Z' stroke-width='.7'/><rect x='111.6' y='111.6' width='5' height='5' transform='rotate(45 114 114)'/></g></svg>");
  background-position:left 16px bottom 16px, right 16px bottom 16px;
  background-size:104px 104px, 104px 104px;
  background-repeat:no-repeat, no-repeat;
  opacity:.6;
}
@media (max-width:1100px){
  .field-veil::after{
    background-size:62px 62px, 62px 62px;
    background-position:left 10px bottom 10px, right 10px bottom 10px;
    opacity:.5;
  }
}
html[data-theme='dark'] .field-veil::after{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='rgba(174,185,201,0.4)'><path d='M6,114 V30 Q6,6 30,6 H114' stroke-width='1'/><path d='M12,114 V32 Q12,12 32,12 H114' stroke-width='.5'/><path d='M30,22 Q18,22 20,34 Q28,32 30,22 Z' stroke-width='.7'/><rect x='3.6' y='111.6' width='5' height='5' transform='rotate(45 6 114)'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='rgba(174,185,201,0.4)'><path d='M114,114 V30 Q114,6 90,6 H6' stroke-width='1'/><path d='M108,114 V32 Q108,12 88,12 H6' stroke-width='.5'/><path d='M90,22 Q102,22 100,34 Q92,32 90,22 Z' stroke-width='.7'/><rect x='111.6' y='111.6' width='5' height='5' transform='rotate(45 114 114)'/></g></svg>");
}
/* the printer's flower closes each ruled division of the volume */
.section--line::before{
  content:'❦'; position:absolute; top:0; left:50%;
  transform:translate(-50%,-52%);
  font-family:var(--f-serif); font-size:1.05rem;
  color:var(--gold);
  background:var(--paper); padding:0 16px;
  opacity:.85; line-height:1;
}

/* ---- Craquelure — the fine crack web of an aged painting --------------- */
/* Old varnish gives way along a hairline network. Laid over the painted    */
/* panels only, at the threshold of sight.                                  */
.hero::after, .section--deep::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='4' seed='19' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.06 9 9 9 0 -6.2'/></filter><rect width='500' height='500' filter='url(%23c)'/></svg>");
  background-size:500px 500px;
  opacity:.05; mix-blend-mode:multiply;
}
.hero::after{ z-index:1; }
.section--deep::after{ z-index:0; }

/* ---- The canon — sinopia ruling, drawn then absorbed ------------------- */
.canon{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.34;
  transition:opacity 2.6s var(--ease);
}
.canon path{
  fill:none;
  stroke:#A0503C;                     /* red chalk — the sinopia */
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 2s var(--ease);
}
.canon.is-drawn path{ stroke-dashoffset:0; }
.canon.is-resting{ opacity:.07; }     /* the ruling sinks into the sheet */

/* ---- Rinceaux — the vine in the margin --------------------------------- */
.margin-vine{
  --vine:var(--verdigris);
  position:absolute; left:-6px; top:140px;
  width:54px; height:auto;
  display:none; pointer-events:none; overflow:visible;
}
@media (min-width:1080px){ .margin-vine{ display:block; } }
.margin-vine .mv-stem{
  fill:none; stroke:var(--vine); stroke-width:1.3; stroke-linecap:round;
  opacity:.55;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 2.6s var(--ease);
}
.margin-vine use{
  fill:var(--vine); fill-opacity:.14;
  stroke:var(--vine); stroke-width:.9;
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
.margin-vine .mv-berry{
  fill:var(--gold); stroke:rgba(23,23,18,.25); stroke-width:.6;
  opacity:0; transition:opacity .9s var(--ease);
}
.margin-vine.is-drawn .mv-stem{ stroke-dashoffset:0; }
.margin-vine.is-drawn use{ opacity:.5; }
.margin-vine.is-drawn .mv-berry{ opacity:.9; }
.margin-vine.is-drawn use:nth-of-type(1){ transition-delay:.5s; }
.margin-vine.is-drawn use:nth-of-type(2){ transition-delay:.8s; }
.margin-vine.is-drawn use:nth-of-type(3){ transition-delay:1.15s; }
.margin-vine.is-drawn use:nth-of-type(4){ transition-delay:1.5s; }
.margin-vine.is-drawn use:nth-of-type(5){ transition-delay:1.85s; }
.margin-vine.is-drawn use:nth-of-type(6){ transition-delay:2.1s; }
.margin-vine.is-drawn .mv-berry:nth-of-type(1){ transition-delay:1.2s; }
.margin-vine.is-drawn .mv-berry:nth-of-type(2){ transition-delay:1.9s; }
.margin-vine.is-drawn .mv-berry:nth-of-type(3){ transition-delay:2.5s; }
.plate .margin-vine{ --vine:var(--gold-bright); }
.plate .margin-vine .mv-berry{ fill:var(--cream); }

/* ---- The volvelle — engraved in the chapter header --------------------- */
.page-header > .wrap{ position:relative; z-index:1; }
.volvelle{
  position:absolute; z-index:0;
  right:clamp(16px, 6vw, 96px); top:54%;
  transform:translateY(-50%);
  width:clamp(190px, 24vw, 330px); height:auto;
  display:none; pointer-events:none;
  color:var(--ink-soft);
}
@media (min-width:1100px){ .volvelle{ display:block; } }
.volvelle .vol-line{ fill:none; stroke:currentColor; stroke-width:1; opacity:.5; }
.volvelle .vol-ticks{
  fill:none; stroke:currentColor; stroke-width:5;
  stroke-dasharray:1 9.8; opacity:.4;
}
.volvelle .vol-ticks-fine{ stroke-width:3; stroke-dasharray:.8 4.4; opacity:.3; }
.volvelle .vol-text{ fill:currentColor; opacity:.6; font-family:var(--f-caps); }
.volvelle .vol-stud{ fill:var(--gold); opacity:.85; }
.volvelle .vol-tip{ fill:var(--gold); opacity:.9; }
.volvelle .vol-axis{ fill:var(--gold); stroke:rgba(23,23,18,.3); stroke-width:.7; }
.volvelle g{ transform-box:view-box; transform-origin:50% 50%; }
.volvelle.is-live .vol-outer{ animation:vol-turn 150s linear infinite; }
.volvelle.is-live .vol-mid{ animation:vol-turn 105s linear infinite reverse; }
@keyframes vol-turn{ to{ transform:rotate(360deg); } }

/* ---- Catchword — the binder's cue at the foot of the leaf -------------- */
.catchword-row{ padding:10px 0 44px; }
.catchword-row .wrap{ display:flex; justify-content:flex-end; }
.catchword{
  display:inline-flex; flex-direction:column; align-items:flex-end; gap:3px;
  text-align:right;
  opacity:0; transform:translateY(12px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.catchword-row.is-shown .catchword{ opacity:1; transform:none; }
.catchword small{
  font-family:var(--f-mono); font-size:.56rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
}
.catchword em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem, 2.4vw, 1.7rem); line-height:1.2;
  color:var(--ink);
  transition:color .35s;
}
.catchword svg{ width:120px; height:26px; overflow:visible; }
.catchword svg path{
  fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s .35s var(--ease), stroke .35s;
}
.catchword-row.is-shown .catchword svg path{ stroke-dashoffset:0; }
.catchword:hover em{ color:var(--lapis-ink); }
.catchword:hover svg path{ stroke:var(--gold-bright); }

/* ---- Finishing touches — the press of a real object -------------------- */
.btn{ transition:background .35s var(--ease), color .35s var(--ease), border-color .35s, transform .16s var(--ease); }
.btn:active{ transform:translateY(1px); }
.nav-links a:hover{ text-shadow:0 0 .5px currentColor; }   /* ink bleeds slightly */

@media (prefers-reduced-motion: reduce){
  .canon path, .margin-vine .mv-stem, .catchword svg path{ stroke-dasharray:none; stroke-dashoffset:0; }
  .margin-vine use{ opacity:.5; } .margin-vine .mv-berry{ opacity:.9; }
  .catchword{ opacity:1; transform:none; }
}

/* =========================================================================
   THE MATERIAL STRATUM — metal, marble, ruling, wax
   The codex as physical matter: gold that answers light, true combed
   marbling on the endpapers, the scribe's ruled vellum, sealing wax.
   Additive layer only: nothing beneath it is altered.
   ========================================================================= */

/* ---- Chrysography — gilt letters catch the reader's lamp --------------- */
/* One document-wide light (--lx, eased by JS) rakes across every gold     */
/* letter on the dark plates. Without a fine pointer, gold stays gold.     */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.gold-lit .plate h1 em,
  html.gold-lit .plate h2 em,
  html.gold-lit .plate h3 em,
  html.gold-lit .philosophy blockquote em,
  html.gold-lit .footer-top h3 em{
    background-image:linear-gradient(100deg,
      #8A6B24 0%, #C9A84C 38%, #F7E3A0 50%, #C9A84C 62%, #8A6B24 100%);
    background-size:280% 100%;
    background-position:calc(var(--lx, .5) * 100%) 0;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}

/* ---- Ebru — true combed marbling on the endpaper ----------------------- */
/* Pigment floated on size and drawn with a comb: stripes of the cabinet    */
/* displaced by turbulence — the classic nonpareil pattern, not a gradient. */
.site-footer::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><defs><pattern id='s' width='24' height='84' patternUnits='userSpaceOnUse'><rect width='24' height='14' y='0' fill='%231F3A93'/><rect width='24' height='14' y='14' fill='%23D6B45E'/><rect width='24' height='14' y='28' fill='%2397243F'/><rect width='24' height='14' y='42' fill='%231E6B57'/><rect width='24' height='14' y='56' fill='%235C2A50'/><rect width='24' height='14' y='70' fill='%23F3EEDF'/></pattern><filter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'><feTurbulence type='turbulence' baseFrequency='0.055 0.012' numOctaves='2' seed='7' stitchTiles='stitch'/><feDisplacementMap in='SourceGraphic' scale='46' xChannelSelector='R' yChannelSelector='G'/></filter></defs><rect x='-40' y='-40' width='880' height='880' fill='url(%23s)' filter='url(%23f)'/></svg>");
  background-size:800px 800px;
  opacity:.08; mix-blend-mode:screen;
}

/* ---- The scribe's ruling — text sits on its ruled vellum --------------- */
/* Scribes ruled every sheet before writing; the lines remain beneath the   */
/* finished hand. Faint rules surface under the long-form text blocks.      */
.prose-body p, .essay-body p{
  background-image:repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(1lh - 1px),
    rgba(20,34,29,.055) calc(1lh - 1px), rgba(20,34,29,.055) 1lh);
  background-origin:content-box; background-clip:content-box;
  background-position:0 .32em;
}

/* ---- The wax seal — pressed cochineal on the closing plate ------------- */
.wax-seal{
  position:absolute; z-index:2;
  right:clamp(28px, 8vw, 120px); top:50%;
  width:clamp(96px, 10vw, 140px);
  transform:translateY(-50%) rotate(-6deg);
  display:none;
  filter:drop-shadow(0 6px 14px rgba(11,8,20,.45));
  transition:transform .28s cubic-bezier(.34,1.45,.64,1), filter .28s var(--ease);
}
@media (min-width:1000px){ .wax-seal{ display:block; } }
.wax-seal svg{ width:100%; height:auto; display:block; }
.wax-seal text{ font-family:var(--f-display); }
.wax-seal:hover{
  transform:translateY(-50%) rotate(-6deg) scale(.965);
  filter:drop-shadow(0 3px 8px rgba(11,8,20,.55));
}
.wax-seal:active{
  transform:translateY(-50%) rotate(-6deg) scale(.92);
  filter:drop-shadow(0 1px 4px rgba(11,8,20,.6));
}

/* ---- The deckle — the leaf's untrimmed edge ---------------------------- */
.page-leaf::before{
  content:''; position:absolute; left:0; right:0; top:-11px; height:12px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='12'><path fill='%23BEDBD0' d='M0,12 L0,8 C6,10 11,5 18,7 C24,9 29,4 36,6 C43,8 49,3 56,6 C62,9 68,5 75,7 C81,9 87,4 94,6 C100,8 106,3 113,6 C119,9 125,5 132,7 C138,9 144,4 151,6 C157,8 163,3 170,6 C176,9 182,5 189,7 C195,9 201,4 208,6 C214,8 218,6 220,8 L220,12 Z'/></svg>");
  background-size:220px 12px; background-repeat:repeat-x;
}

/* ---- The gilt fillet breathes — tooled gold under lamplight ------------ */
.plate::after{ animation:fillet-breath 16s ease-in-out infinite; }
@keyframes fillet-breath{
  0%, 100%{ box-shadow:inset 0 0 0 1px rgba(214,180,94,.10); }
  50%     { box-shadow:inset 0 0 0 1px rgba(214,180,94,.24); }
}

/* =========================================================================
   THE HOURS — the volvelle keeps true time on every page
   ========================================================================= */
.volvelle .vol-time{
  fill:currentColor; opacity:.62;
  font-family:var(--f-mono); letter-spacing:.2em;
}
.volvelle--hero{
  top:clamp(110px, 15vh, 190px); right:clamp(24px, 6vw, 110px);
  transform:none;
  width:clamp(160px, 17vw, 250px);
  z-index:1;
}
@media (min-width:1100px){ .volvelle--hero{ display:block; } }

/* light-mode finishing: the contents' dotted leaders take the gold */
.contents a:hover .dots{ border-color:var(--gold); }

/* =========================================================================
   THE HELIOTROPE — engraved sun and moon; the light of the archive
   ========================================================================= */
.theme-orb{
  position:relative; flex:none; align-self:center;
  width:64px; height:64px;
  background:none; border:0; cursor:pointer;
}
/* the weight of a real object: movement heavily damped, never springy */
.theme-orb svg{
  position:absolute; inset:0;
  transition:opacity .6s var(--ease), transform 1.2s cubic-bezier(.16,1,.3,1),
             filter 1.2s cubic-bezier(.16,1,.3,1);
}
/* the solar instrument at rest: crown turning, corona turning against it,
   calibration motes in orbit */
.theme-orb .sun-rays{   transform-origin:50% 50%; animation:orb-turn 70s linear infinite; }
.theme-orb .sun-corona{ transform-origin:50% 50%; animation:orb-turn 46s linear infinite reverse; }
.theme-orb .sun-orbit{  transform-origin:50% 50%; animation:orb-turn 14s linear infinite; }
@keyframes orb-turn{ to{ transform:rotate(360deg); } }
/* soft illumination, not a glow effect: a close, warm falloff */
.orb-sun{ filter:drop-shadow(0 1px 4px rgba(120,90,30,.35)); }
.orb-moon{
  opacity:0; transform:rotate(-40deg) scale(.55);
  filter:drop-shadow(0 1px 5px rgba(120,140,175,.35));
}
.orb-moon .moon-halo{ transform-origin:50% 50%; animation:orb-turn 80s linear infinite; }
.orb-moon .moon-stars circle{ animation:star-breathe 4.2s ease-in-out infinite; }
.orb-moon .moon-stars circle:nth-of-type(2){ animation-delay:1.3s; }
.orb-moon .moon-stars circle:nth-of-type(3){ animation-delay:2.7s; }
@keyframes star-breathe{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
html[data-theme='dark'] .orb-sun{ opacity:0; transform:rotate(60deg) scale(.55); }
html[data-theme='dark'] .orb-moon{ opacity:1; transform:none; }
html:not([data-theme='dark']) .theme-orb:hover .orb-sun{
  transform:scale(1.05) rotate(-2deg);
  filter:drop-shadow(0 2px 7px rgba(120,90,30,.45));
}
html[data-theme='dark'] .theme-orb:hover .orb-moon{
  transform:scale(1.05) rotate(-2deg);
  filter:drop-shadow(0 2px 8px rgba(120,140,175,.45));
}
.theme-orb:active svg{ transform:scale(.97); }

/* the reader's lamp glides across the metal of both instruments */
.theme-orb .orb-spec{
  transform:translateX(calc((var(--lx, .5) - .5) * 7px));
}
/* the engraved destination, inscribed beneath the instrument */
.theme-orb::after{
  content:'nox'; position:absolute; left:50%; bottom:-13px;
  transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.52rem;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); opacity:0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
html[data-theme='dark'] .theme-orb::after{ content:'dies'; color:#AEB9C9; }
.theme-orb:hover::after, .theme-orb:focus-visible::after{ opacity:.9; }

/* ---- The celestial event — a day actually ending ----------------------- */
.celestial{ position:fixed; inset:0; z-index:940; pointer-events:none; }
/* twilight: the world's light turns before the sky changes */
.celestial .cel-dusk{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.2s var(--ease);
}
.celestial.to-night .cel-dusk{
  background:linear-gradient(180deg,
    rgba(44,40,88,.5) 0%, rgba(30,28,62,.38) 55%, rgba(168,88,48,.34) 100%);
}
.celestial.to-day .cel-dusk{
  background:linear-gradient(180deg,
    rgba(24,44,84,.45) 0%, rgba(96,64,92,.3) 55%, rgba(214,160,80,.4) 100%);
}
.celestial.is-risen .cel-dusk{ opacity:1; }
/* the new sky breathes in — no hard edge, an atmosphere arriving */
.celestial .cel-sky{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.1s var(--ease);
}
.celestial.is-engulfing .cel-sky{ opacity:1; }
.celestial.to-night .cel-sky{
  background:
    radial-gradient(90% 120% at 20% 110%, rgba(31,58,147,.4), transparent 60%),
    radial-gradient(70% 90% at 100% 115%, rgba(151,36,63,.22), transparent 60%),
    linear-gradient(160deg, #0E1C30, #0A1420);
}
.celestial.to-day .cel-sky{
  background:
    radial-gradient(90% 90% at 50% -8%, rgba(224,190,107,.32), transparent 55%),
    radial-gradient(90% 120% at 8% 110%, rgba(30,107,87,.2), transparent 60%),
    linear-gradient(160deg, #DAEDE4, #BEDBD0);
}
.celestial .cel-disc{
  position:absolute; left:50%; top:44%;
  width:min(36vmin, 320px); height:auto;
  transform:translate(-50%,-50%) scale(.6);
  opacity:0;
  transition:opacity .5s var(--ease), transform .7s var(--ease);
}
.celestial.is-risen .cel-disc{ opacity:1; transform:translate(-50%,-50%) scale(1); }
/* the sun about to be taken */
.celestial .cel-sun{ fill:#E3C36B; stroke:#8A6B24; stroke-width:1; }
.celestial .cel-corona{
  fill:none; stroke:#F7E3A0; stroke-width:10;
  filter:blur(7px); opacity:0;
  transition:opacity .9s var(--ease);
}
/* the moon's shadow crosses to totality */
.celestial .cel-shadow{
  fill:#0B141F; stroke:rgba(231,203,126,.25); stroke-width:1;
  transform:translateX(-130px);
  transition:transform .9s cubic-bezier(.5,.05,.35,1);
}
.celestial.is-total .cel-shadow{ transform:translateX(0); }
.celestial.is-total .cel-corona{ opacity:.85; }
/* dawn building behind the moon's rim */
.celestial .cel-moonb{ fill:#B9C2CF; stroke:#677182; stroke-width:1; }
.celestial .cel-dawn{
  fill:none; stroke:#F7E3A0; stroke-width:12;
  filter:blur(9px); opacity:0;
  transition:opacity 1s var(--ease);
}
.celestial.is-total .cel-dawn{ opacity:.9; }
.celestial.is-clearing{ opacity:0; transition:opacity .75s var(--ease); }
.celestial.is-clearing .cel-disc{ transform:translate(-50%,-50%) scale(1.06); }

/* ---- The astrolabe — the clock's night layer --------------------------- */
.volvelle .vol-night{ display:none; }
html[data-theme='dark'] .volvelle .vol-night{ display:block; }
.volvelle .vol-decl{
  fill:none; stroke:currentColor; stroke-width:.5;
  stroke-dasharray:1 5; opacity:.45;
}
.volvelle .vol-link{
  fill:none; stroke:#D9DEE7; stroke-width:.5; opacity:.4;
}
.volvelle .vol-star circle{ fill:#E4E9F1; opacity:.85; }
.volvelle .ph-dark{ fill:rgba(9,15,25,.85); stroke:none; }
.volvelle .ph-lit{ fill:#D7DCE5; }
.volvelle .ph-ring{ fill:none; stroke:rgba(217,222,231,.5); stroke-width:.6; }

/* =========================================================================
   THE NIGHT EDITION — the same codex, read by lamplight
   Not an inversion: deep archive night, cream ink, pigments turned
   luminous, gold answering the lamp. Same volume, other dimension.
   ========================================================================= */
html{ color-scheme:light; }
html[data-theme='dark']{ color-scheme:dark; }

html[data-theme='dark']{
  --paper:      #0D1826;
  --paper-deep: #0A1420;
  --plaster:    #101E24;
  --ink:        #EAE6D6;
  --ink-soft:   #C2C0AE;
  --ink-faint:  #8F9484;
  --line:       rgba(234,230,214,.16);
  --line-soft:  rgba(234,230,214,.09);
  --line-gold:  rgba(201,164,78,.45);
  --veil-rgb:   13,24,38;
  /* the cabinet under lamplight — every pigment turned luminous */
  --lapis:      #5E7FD6;
  --lapis-ink:  #8FA6E4;
  --klein:      #4E6FDC;
  --vermilion:  #E06A55;
  --carmine:    #D26480;
  --malachite:  #4FA88C;
  --verdigris:  #7FA391;
  --ochre:      #D9A54E;
  --naples:     #E8CC85;
  --rose:       #D693A8;
  --tyrian:     #B073A3;
  --gold:       #C9A44E;
  --gold-bright:#E7CB7E;
}
html[data-theme='dark'] body{
  background:
    /* moonlight entering the observatory from the upper right */
    radial-gradient(60% 50% at 85% -12%, rgba(190,205,230,.08), transparent 60%),
    radial-gradient(90% 90% at 50% -8%, rgba(201,164,78,.07), transparent 55%),
    radial-gradient(135% 115% at 6% -12%, rgba(94,127,214,.09), transparent 48%),
    radial-gradient(120% 120% at 104% 4%, rgba(224,106,85,.06), transparent 46%),
    radial-gradient(130% 130% at 96% 112%, rgba(79,168,140,.09), transparent 52%),
    radial-gradient(120% 120% at -8% 108%, rgba(176,115,163,.08), transparent 48%),
    var(--paper);
  background-attachment:fixed;
}
/* the instruments turn silver under moonlight */
html[data-theme='dark'] .volvelle{ color:#AEB9C9; }
/* grain becomes starlight dust; the weave catches the lamp faintly */
html[data-theme='dark'] body::before{ mix-blend-mode:screen; opacity:.045; }
html[data-theme='dark'] .site-nav.is-scrolled{
  background:rgba(13,24,38,.88);
  backdrop-filter:blur(14px) saturate(1.1);
}
/* at night, the accents burn gold — candlelight on the letters */
html[data-theme='dark'] h1 em,
html[data-theme='dark'] h2 em,
html[data-theme='dark'] h3 em{ color:var(--gold-bright); }
html[data-theme='dark'] ::selection{ background:var(--gold-bright); color:#10264A; }
html[data-theme='dark'] .btn:hover{ color:var(--paper); }
html[data-theme='dark'] .skip-link{ color:#16231E; }
/* the fresco plate at night — deep malachite dusk */
html[data-theme='dark'] .section--deep{
  --page-tone:#101E24;
  background:
    radial-gradient(90% 80% at 12% -8%, rgba(79,168,140,.10), transparent 55%),
    radial-gradient(80% 90% at 100% 40%, rgba(214,147,168,.08), transparent 58%),
    radial-gradient(120% 90% at 60% 120%, rgba(94,127,214,.10), transparent 60%),
    linear-gradient(160deg, #101E24, #0C161C);
}
html[data-theme='dark'] .contents{
  background:linear-gradient(180deg, rgba(201,164,78,.06), transparent 60%);
}
html[data-theme='dark'] .contents .dots{ border-color:rgba(234,230,214,.28); }
html[data-theme='dark'] .ledger-row:hover{
  background:linear-gradient(90deg, rgba(201,164,78,.09), transparent 70%);
}
/* the great roman numeral, embossed into night paper */
html[data-theme='dark'] .folio::after{
  text-shadow:-1px -1px 1px rgba(0,0,0,.45), 1px 1px 1px rgba(234,230,214,.09);
}
/* the scribe's ruling by lamplight */
html[data-theme='dark'] .prose-body p, html[data-theme='dark'] .essay-body p{
  background-image:repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(1lh - 1px),
    rgba(234,230,214,.05) calc(1lh - 1px), rgba(234,230,214,.05) 1lh);
}
/* the sinopia ruling, in pale chalk on the night sheet */
html[data-theme='dark'] .canon path{ stroke:#C97F63; }
/* craquelure catches the lamp instead of shadow */
html[data-theme='dark'] .hero::after,
html[data-theme='dark'] .section--deep::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='4' seed='19' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.82 0 0 0 0 0.78 0 0 0 0 0.6 9 9 9 0 -6.2'/></filter><rect width='500' height='500' filter='url(%23c)'/></svg>");
  mix-blend-mode:screen; opacity:.04;
}
/* the turning leaf and its deckle, in night paper */
html[data-theme='dark'] .page-leaf::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='12'><path fill='%230A1420' d='M0,12 L0,8 C6,10 11,5 18,7 C24,9 29,4 36,6 C43,8 49,3 56,6 C62,9 68,5 75,7 C81,9 87,4 94,6 C100,8 106,3 113,6 C119,9 125,5 132,7 C138,9 144,4 151,6 C157,8 163,3 170,6 C176,9 182,5 189,7 C195,9 201,4 208,6 C214,8 218,6 220,8 L220,12 Z'/></svg>");
}
/* chrysography extends to every gold letter at night */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.gold-lit[data-theme='dark'] h1 em,
  html.gold-lit[data-theme='dark'] h2 em,
  html.gold-lit[data-theme='dark'] h3 em{
    background-image:linear-gradient(100deg,
      #8A6B24 0%, #C9A84C 38%, #F7E3A0 50%, #C9A84C 62%, #8A6B24 100%);
    background-size:280% 100%;
    background-position:calc(var(--lx, .5) * 100%) 0;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}

/* =========================================================================
   THE HAND-HELD EDITION — final word of the cascade
   Everything the desk edition carries, scaled to the hand; and the two
   costly paints lifted so the phone's scroll is perfectly fluid.
   ========================================================================= */
@media (max-width: 700px){
  [data-reveal]{ filter:none !important; }
  .hero::after, .section--deep::after{ display:none; }
  .hero-orn{ display:none; }
  /* blend-modes on fixed full-screen layers force per-frame compositing
     on phone GPUs — the grain keeps its look through plain opacity */
  body::before{
    mix-blend-mode:normal; opacity:.04;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
    background-size:300px 300px;
  }
  /* the vignette's huge blurred inset shadow is repainted on scroll —
     phones read the same atmosphere from the veil gradient alone */
  .field-veil, html[data-theme='dark'] .field-veil{ box-shadow:none; }
  /* infinite repaint animations rest on the hand-held edition */
  body::after{ animation:none; }
  .plate::after{ animation:none; box-shadow:inset 0 0 0 1px rgba(214,180,94,.16); }
  .hero-kicker .pulse{ animation:none; }
  .press-stamp .stamp-ring{ animation:none; }
  .orb-moon .moon-halo{ animation:none; }
  .volvelle .vol-outer, .volvelle .vol-mid{ animation:none !important; }
}
/* the scrolled nav trades backdrop sampling for a settled solid tone */
@media (max-width: 700px){
  .site-nav.is-scrolled{ backdrop-filter:none; background:rgba(207,230,221,.95); }
  html[data-theme='dark'] .site-nav.is-scrolled{ backdrop-filter:none; background:rgba(13,24,38,.95); }
  /* The turning leaf is a full-screen sheet with a gradient and a 60px
     blurred shadow. Parked off the bottom by a transform, it is still a
     live composited layer — rasterised and held in GPU memory the whole
     visit, on every page, to serve a half-second animation. Phones are
     fill-rate bound first; the leaf now exists only while it is turning. */
  .page-leaf{ visibility:hidden; }
  .page-leaf.is-covering{ visibility:visible; }

  /* THE GROUND NOBODY SEES. The body's vellum wash is eight radial
     gradients, and with the fixed attachment traded away for phones they
     resolve against the whole document — two of them, sized at 130% of it,
     are anchored below the page's foot (96% 112% and -8% 108%), so the
     bottom screens of every page rasterise several giant gradients at
     their most intense point. And none of it is ever visible: the painted
     field covers the viewport with opaque paint, verified pixel-by-pixel.
     Where the field exists, the wash goes; the paper colour beneath it
     stays, so even a failed canvas shows celadon, never black. */
  html.has-field body,
  html.has-field[data-theme='dark'] body{ background-image:none; }

  /* optimizeLegibility asks for full kerning and ligature shaping on every
     glyph painted, and this volume is thirteen screens of little but serif
     text. `auto` still kerns and still sets common ligatures in every
     browser this site meets — verified layout-identical earlier: same
     document height, same line count, same line widths. A raster hint,
     nothing more; the desk keeps the full treatment. */
  body{ text-rendering:auto; }
}

/* ---- One layer per pixel ------------------------------------------------
   Phone GPUs are fill-rate bound: stacked full-screen fixed layers mean
   every pixel is drawn many times per scrolled frame. On phones the
   decorative fixed sheets retire entirely — the painting and the central
   veil alone carry the atmosphere — and nothing stays promoted to its
   own GPU layer between animations.                                       */
@media (max-width: 700px){
  body::before, .field-veil::before, .field-veil::after{ display:none; }
  /* the header bloom trades its live 70px blur for a settled wash */
  .page-header::before{
    filter:none;
    background:radial-gradient(60% 60% at 55% 40%,
      rgba(31,58,147,.14), rgba(178,122,40,.07) 52%, transparent 78%);
  }
  /* reveals become pure fades: no transform, no permanent layer promotion */
  [data-reveal]{
    transform:none !important;
    will-change:auto !important;
    transition:opacity .45s var(--ease) !important;
  }
  [data-reveal="ink"]{ clip-path:none !important; }
  /* long chapters render only what approaches the eye. The reserved height
     is the blocks' real measured height at phone width (folio 832-833,
     essay 809-824, prose 820-821, dossier 793): a placeholder short by a
     hundred pixels grows the document under the reader each time a block
     renders, and near the foot of the page — where the reader is pressed
     against the scroll limit — that moving limit reads as the page
     sticking. `auto` keeps each true size once known. */
  .folio, .essay, .prose, .dossier{
    content-visibility:auto;
    contain-intrinsic-size:auto 820px;
  }
  .bookmark-ribbon{ box-shadow:none; }
}
@media (max-width: 900px){
  /* fixed-attachment gradients are a known phone scroll-jank source */
  body, html[data-theme='dark'] body{ background-attachment:scroll; }
}
/* The lighter 8px backdrop blur is for the small tablet only. This rule
   sits later in the sheet than the 700px block above that gives phones a
   settled solid tone instead — so with both written at max-width it was
   this one the cascade obeyed, and phones re-sampled and re-blurred the
   strip behind the fixed nav on every scrolled frame. The single biggest
   continuous scroll cost on a phone GPU, reinstated by accident of order. */
@media (min-width: 701px) and (max-width: 900px){
  .site-nav.is-scrolled,
  html[data-theme='dark'] .site-nav.is-scrolled{ backdrop-filter:blur(8px); }
}
/* the instrument scales to the hand and clusters with the burger */
@media (max-width: 860px){
  .theme-orb{ width:48px; height:48px; margin-left:auto; }
  .theme-orb::after{ display:none; }
}
/* the clock keeps its post at the head of every page; the crumb yields
   it the corner; the wax seal steps into the text flow */
@media (max-width: 1099px){
  .volvelle, .volvelle--hero{
    display:block;
    width:clamp(92px, 25vw, 136px);
    right:14px; top:104px;
    transform:none;
    opacity:.85;
  }
  /* at hand size the dial shrinks; the hour must not shrink with it */
  .volvelle .vol-time{ font-size:24px; }
  .crumb{ max-width:calc(100% - clamp(104px, 28vw, 150px)); }
}
@media (max-width: 999px){
  .wax-seal{
    display:inline-block; position:static;
    width:88px; margin-top:30px;
    transform:rotate(-6deg);
  }
  .wax-seal:hover, .wax-seal:active{ transform:rotate(-6deg) scale(.96); }
}
/* ---- Touch control — every tap answers like a pressed object ----------- */
@media (hover: none){
  a, button{ -webkit-tap-highlight-color:rgba(156,124,46,.18); }
  .ledger-row:active{ background:linear-gradient(90deg, rgba(224,190,107,.2), transparent 70%); padding-left:12px; }
  .tlink:active, .folio-links a:active{ color:var(--vermilion); }
  .contents a:active{ color:var(--lapis-ink); }
  .mobile-menu a:active{ color:var(--gold-bright); padding-left:10px; }
  .catchword:active em{ color:var(--lapis-ink); }
  .btn:active{ transform:translateY(1px) scale(.99); }
}

/* =========================================================================
   THE FLAT-TONED PANELS — hand-held edition
   The reader's lag report mapped exactly onto the painted panels: one plate
   and the footer at the foot of every chapter — "the bottom of every page"
   — and the home page carrying plate, deep section and closing plate
   through its whole length. Each panel stacks four to six large radial
   gradients over its ground, and lays a turbulence-filter texture over
   that through a blend mode, which makes the GPU compose the panel
   offscreen and read it back for every strip of pixels a scroll exposes.
   On the phone each panel keeps its ground — at this size the linear base
   is the look — and sheds the edge blooms, the grain, and the blended
   pass. The desk edition keeps the full painted treatment untouched.
   ========================================================================= */
@media (max-width: 700px){
  .plate{ background:linear-gradient(160deg, #12264A 0%, #1E4488 50%, #0F1E3E 100%); }
  .plate::before{ display:none; }            /* marbling + its screen blend */
  .section--deep{ background:linear-gradient(160deg, #C6E1D7, #B7D5CA); }
  .section--deep::before{ display:none; }    /* fresco turbulence */
  .site-footer{ background:linear-gradient(160deg, var(--night), var(--bistre)); }
  html[data-theme='dark'] .section--deep{ background:linear-gradient(160deg, #101E24, #0C161C); }
  /* obsidian polish: keep the hairline of caught light, shed the 90px pooled blur */
  html[data-theme='dark'] .plate{ box-shadow:inset 0 1px 0 rgba(214,226,245,.06); }
}

/* =========================================================================
   THE PAGE IS SIMPLY PRESENT — hand-held edition
   The last stutter lived at the foot of every page: the catchword, the
   closing plate and the footer are the final cluster of entrance fades,
   and every block that fades is promoted to its own GPU texture,
   rasterised, uploaded, faded and dropped — a burst of one-time GPU work
   exactly where the reader arrives pressed against the scroll limit. A
   real book's page does not fade in. On the phone the volume is simply
   there, and — written with !important, in CSS alone — nothing on the
   page can ever be left hidden by any script under any failure. The desk
   edition keeps its choreographed reveals untouched.
   ========================================================================= */
@media (max-width: 700px){
  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .catchword{ opacity:1 !important; transform:none !important; transition:none !important; }
  .catchword svg path{ stroke-dashoffset:0 !important; transition:none !important; }
}

/* =========================================================================
   THE FOOT OF THE PAGE, FINALLY QUIET — hand-held edition
   Reaching the bottom brings the URL bar back, and the URL bar changes the
   viewport. The still wash and the veil were pinned with inset:0 — sized by
   the viewport — so at that exact moment both full-screen layers threw away
   their raster and redrew their gradients at the new size. Sized to the
   large viewport instead, the bar's coming and going never resizes them:
   drawn once, composited forever. (The vh line is the fallback; on modern
   phone browsers vh and lvh are the same large viewport.)
   ========================================================================= */
@media (max-width: 700px){
  #pigment-still, .field-veil{
    inset:auto; top:0; left:0;
    width:100vw;
    height:100vh;
    height:100lvh;
  }
  /* And the last expensive drawing at the foot: the seal's motto, set in
     SVG text curved along two rings — the priciest raster in the footer,
     paid on first arrival. The reader asked for everything that hurts to
     go: the seal keeps its two circles and its S, and sheds the ring text.
     The desk keeps the full engraving. */
  .press-stamp .stamp-ring{ display:none; }
}

/* =========================================================================
   THE FOOTER'S OWN TEXTURES — hand-held edition
   The plate and the deep section had their ::before textures retired
   earlier this session, alongside their gradient backgrounds — but the
   footer's two full-area overlays were missed, on every page, because
   "flatten the painted panels" only touched .site-footer's own background.

   ::before is a turbulence texture through mix-blend-mode:screen, exactly
   the compositing cost already removed from the plate and the deep
   section. ::after is heavier still: not noise but a feDisplacementMap
   marbling pattern, also blended. Two full-area filtered, blended layers,
   stacked on one element, on every single page — sitting at precisely the
   spot reported again and again as the place that still sticks.

   Both retire on phones. The desk edition keeps both textures.
   ========================================================================= */
@media (max-width: 700px){
  .site-footer::before,
  .site-footer::after{ display:none; }
}

/* =========================================================================
   THE GRAIN RE-BLENDED BY NIGHT — hand-held edition
   The 700px block gives phones a plain-opacity grain layer instead of a
   blended one (mix-blend-mode is a per-frame compositing cost on a
   full-screen fixed layer). But `html[data-theme='dark'] body::before`
   sits later in the sheet, at equal specificity, and reinstates
   mix-blend-mode:screen on that same layer for night reading — undoing the
   phone fix precisely for readers in dark mode, on every scrolled frame,
   on every page. Same bug shape as the nav backdrop-filter found earlier
   this session: a later rule of equal weight silently winning back a cost
   the phone block had already paid down.
   ========================================================================= */
@media (max-width: 700px){
  html[data-theme='dark'] body::before{ mix-blend-mode:normal; opacity:.045; }
}