/* ═══ Caden Campbell — personal site ═══ */

:root{
  --age:        0;   /* 1 on the papyrus, 0 on the white */
  --ink:        #241d16;
  --ink-soft:   #5c5044;
  --ink-faint:  #6f6252;
  --forest:     #33503c;
  --rust:       #9c5a2b;
  --rule:       rgba(36,29,22,.15);
  --paper-top:  #cbb493;
  --paper-mid:  #e4d8c2;
  --paper-bot:  #faf8f3;
  --serif:      "Newsreader", Iowan Old Style, Georgia, serif;
  --display:    "Fraunces", Iowan Old Style, Georgia, serif;
  --mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --page:       min(1180px, 92vw);
  --ease:       cubic-bezier(.22,.61,.36,1);
  --mono-sm:10px;   /* meta, captions, colophon */
  --mono-md:11px;   /* default label: eyebrows, dates, tabs */
  --mono-lg:12px;   /* the few labels that carry weight */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:hidden; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink); background:var(--paper-bot);
  font-family:var(--serif); font-size:clamp(17px,1.12vw,19px); line-height:1.65;
  font-optical-sizing:auto; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }
img{ max-width:100%; display:block; }
a{ color:var(--forest); text-underline-offset:.22em; text-decoration-thickness:1px; }
a:hover{ color:var(--rust); }

/* ── paper background ─────────────────────────────────────── */
#paper{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
#paper-tone{
  position:absolute; inset:0;
  background:var(--paper-bot);
  transition:background-color .1s linear;
}
/* paper: fine fibre, plus a large soft mottle so it is not a flat wash */
#paper-grain{
  position:absolute; inset:0; opacity:.3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='620' height='620' filter='url(%23m)' opacity='.28'/%3E%3C/svg%3E");
  background-size:300px 300px, 620px 620px;
  mix-blend-mode:multiply;
}

/* ── password gate ────────────────────────────────────────── */
#gate{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:#100c08; color:#e8dcc6;
}
#gate[hidden]{ display:none; }
#gate-form{ width:min(340px,84vw); text-align:center; }
.gate-mark{
  font-family:var(--display); font-size:44px; font-weight:300;
  letter-spacing:.22em; margin:0 0 34px; color:#c9a061;
}
#gate-form label{ display:block; font-size:15px; color:#a3937c; margin-bottom:14px; }
#gate-input{
  width:100%; padding:11px 13px; font:inherit; font-size:16px; color:#f0e7d6;
  background:transparent; border:0; border-bottom:1px solid #4a3d2c; text-align:center;
  letter-spacing:.14em; outline:none;
}
#gate-input:focus{ border-bottom-color:#c9a061; }
#gate-form button{
  margin-top:26px; padding:9px 30px; font:inherit; font-size:14px; letter-spacing:.12em;
  text-transform:uppercase; color:#100c08; background:#c9a061; border:0; border-radius:2px;
  cursor:pointer; transition:background .2s;
}
#gate-form button:hover{ background:#e0b877; }
.gate-error{ margin-top:18px; font-size:14px; color:#c07a5a; }

/* ── intro ────────────────────────────────────────────────── */
#scene{
  position:fixed; inset:0; width:100%; height:100%; display:block;
  z-index:90; pointer-events:none;
}
body.scene-page #scene{ z-index:-1; }
body.scene-page .hero-scrim{ opacity:1; }
body.scene-page.past-hero #scene{ opacity:.62; }
body.no-scene #scene{ display:none; }

#intro{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  transition:opacity 1.1s var(--ease);
}
#intro-skip{ pointer-events:auto; }
#intro.done{ opacity:0; pointer-events:none; }
#intro.gone{ display:none; }
#intro.done #intro-caption{ display:none; }
#intro-caption{
  position:absolute; left:50%; bottom:11%; transform:translateX(-50%);
  font-family:var(--mono); font-size:var(--mono-lg); letter-spacing:.26em; text-transform:uppercase;
  color:rgba(220,196,150,.72); white-space:nowrap; pointer-events:none;
  transition:opacity .55s;
}
#intro-skip{
  position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
  padding:9px 20px;
  font-family:var(--mono); font-size:var(--mono-md); letter-spacing:.2em; text-transform:uppercase;
  color:#2a2118; background:rgba(250,248,243,.86);
  border:0; border-radius:999px; cursor:pointer;
  box-shadow:0 2px 10px rgba(20,14,8,.22);
  transition:background .2s, transform .2s;
}
#intro-skip:hover{ background:#fff; transform:translateX(-50%) translateY(-1px); }
#intro-skip:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

/* ── hero / canopy ────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:end;
  justify-items:start; padding:0 0 12vh; overflow:hidden;
}
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity 1.6s var(--ease) .35s;
  background:linear-gradient(to top,
    rgba(250,248,243,.97) 0%, rgba(250,248,243,.92) 30%,
    rgba(250,248,243,.62) 52%, rgba(250,248,243,.18) 74%,
    rgba(250,248,243,0) 92%);
}
body.night .hero-scrim{
  background:linear-gradient(to top,
    rgba(9,12,22,.95) 0%, rgba(9,12,22,.90) 30%,
    rgba(9,12,22,.62) 52%, rgba(9,12,22,.18) 74%,
    rgba(9,12,22,0) 92%);
}
.hero-inner{
  position:relative; max-width:min(660px,84vw); text-align:left;
  margin-left:max(var(--gutter),calc(50% - 560px));
}
.eyebrow{
  font-family:var(--mono); font-size:var(--mono-md); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink); opacity:.72; margin:0 0 26px;
}
.hero .eyebrow{
  color:#2c2419;
  text-shadow:0 1px 0 rgba(250,248,243,.55), 0 0 12px rgba(250,248,243,.75);
}
body.night .hero .eyebrow{
  color:#efe7d6;
  text-shadow:0 1px 2px rgba(8,10,18,.9), 0 0 14px rgba(8,10,18,.8);
}
.hero h1{
  font-family:var(--display); font-weight:300;
  font-size:clamp(52px,9.2vw,116px); line-height:.96; letter-spacing:-.025em;
  margin:0 0 30px; font-variation-settings:"SOFT" 22,"WONK" 1;
}
.hero-line{
  font-size:clamp(19px,1.9vw,24px); line-height:1.5; margin:0 0 16px;
  max-width:26em; color:var(--ink);
}
.hero-sub{ font-size:16.5px; color:var(--ink-soft); margin:0; max-width:30em; }
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:11px;
}
.scroll-cue span{
  width:1px; height:44px; background:linear-gradient(var(--ink-faint),transparent);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{transform:scaleY(.35);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

/* ── bridge ───────────────────────────────────────────────── */
/* the epigraph sits in a column like everything else: the lane belongs to the
   tree, and centred text would run straight through it */
.bridge{
  width:min(560px, calc(50% - var(--lane)/2 - var(--gutter)));
  margin:0 auto 0 var(--gutter); padding:22vh 0 14vh; text-align:left;
}
.bridge blockquote{ margin:0; }
.bridge blockquote p{
  font-family:var(--display); font-weight:300; font-size:clamp(21px,2.4vw,29px);
  line-height:1.46; letter-spacing:-.012em; margin:0; text-wrap:pretty;
}
.bridge cite{
  display:block; margin-top:24px; font-style:normal;
  font-family:var(--mono); font-size:var(--mono-md); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint);
}
.bridge-small{
  font-family:var(--mono) !important; font-size:var(--mono-md) !important; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:40px !important;
}

/* ── timeline ─────────────────────────────────────────────── */
.timeline{ position:relative; padding-bottom:4vh; }
.chapter{ position:relative; padding:11vh 0; }
.ch-inner{
  position:relative;
  opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.chapter.in .ch-inner{ opacity:1; transform:none; }
.chapter[data-side="left"]  .ch-inner{ margin-left:auto;  margin-right:calc(50% + 76px); }
.chapter[data-side="right"] .ch-inner{ margin-right:auto; margin-left:calc(50% + 76px); }

/* ring medallion */
/* the medallion sits at the branch tip, out toward its chapter — the branch
   terminates in it, so it is the chapter marker and the growth ring at once */
.ring-node{
  position:absolute; top:7.5vh; left:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; pointer-events:none; z-index:2;
  filter:drop-shadow(0 3px 10px rgba(36,29,22,.16));
}
/* the label clears the whole lane, not just the medallion: anchored to the
   node's edge it landed on the bark, where faint ink is unreadable. It sits
   in the empty margin opposite the writing — 50% of the node is lane centre. */
.chapter[data-side="left"]  .ring-year{ left:calc(50% + var(--lane)/2 + 14px); right:auto; text-align:left; }
.chapter[data-side="right"] .ring-year{ right:calc(50% + var(--lane)/2 + 14px); left:auto; text-align:right; }
.ring-yr{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:var(--mono-md); letter-spacing:.12em;
  color:var(--ink); opacity:.82;
}
.ring-node canvas{ width:100%; height:100%; display:block; }
.ring-node .ring-year{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; line-height:1.7;
}
.ring-node .ring-year em{
  display:block; font-style:normal; letter-spacing:.14em;
  color:var(--rust); opacity:.8;
}


.ch-date{
  font-family:var(--mono); font-size:var(--mono-md); letter-spacing:.26em; text-transform:uppercase;
  color:var(--rust); margin:0 0 18px;
}
.chapter h2{
  font-family:var(--display); font-weight:300; font-size:clamp(31px,4.1vw,50px);
  line-height:1.1; letter-spacing:-.022em; margin:0 0 24px;
  font-variation-settings:"SOFT" 18,"WONK" 1;
}
.chapter h3.sub{
  font-family:var(--mono); font-size:var(--mono-md); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); font-weight:400; margin:42px 0 14px;
  padding-bottom:9px; border-bottom:1px solid var(--rule);
}
.chapter p{ margin:0 0 20px; }
.lede{ font-size:1.16em; color:var(--ink); }
.chapter .note{
  font-size:14.5px; color:var(--ink-soft); font-style:italic;
  border-left:2px solid var(--rule); padding-left:16px;
}
/* notes to myself: only visible with ?draft in the URL */
.draft{ display:none; }
body.show-draft .draft{ display:block; }
.draft{
  font-family:var(--mono); font-size:13px; line-height:1.6; color:#7a4a12;
  background:rgba(200,150,60,.12); border:1px dashed rgba(156,90,43,.45);
  border-radius:3px; padding:13px 15px;
}

/* stat row */
.stat-row{ display:flex; align-items:center; gap:26px; margin:36px 0 10px; }
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat-num{
  font-family:var(--display); font-weight:300; font-size:54px; line-height:1;
  letter-spacing:-.03em;
}
.stat-cap{
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
}
.stat-arrow{ font-size:26px; color:var(--ink-faint); }

/* photographs — plain. The opening is where the effort shows; down here the
   page should be quiet and clear. */
.frames{
  margin:38px 0 12px;
  column-count:2; column-gap:20px;
}
.frame{ break-inside:avoid; margin:0 0 20px; }
.frame.is-wide{ column-span:all; }
.frame-slot{
  position:relative; overflow:hidden; background:rgba(36,29,22,.05);
  box-shadow:0 0 0 1px rgba(36,29,22,.1), 0 6px 18px -8px rgba(36,29,22,.22);
}
.frame-slot img,
.frame-slot video{ width:100%; height:100%; display:block; object-fit:cover; }
.frame figcaption{
  font-size:13.5px; line-height:1.5; color:var(--ink-soft);
  margin-top:9px; max-width:34em;
}

/* ── artifact cards ───────────────────────────────────────── */
.artifacts{ display:grid; gap:13px; margin:34px 0 6px; }
.artifact{
  display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; gap:18px;
  width:100%; min-width:0; text-align:left; padding:14px 16px; cursor:pointer;
  font:inherit; color:inherit;
  background:rgba(255,255,255,.86); border:1px solid var(--rule); border-radius:3px;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.artifact:hover{
  border-color:rgba(51,80,60,.5); background:rgba(255,255,255,.8);
  transform:translateX(3px);
}
.artifact-thumb{
  width:62px; height:80px; object-fit:cover; object-position:top center;
  border:1px solid var(--rule); background:#fff;
  box-shadow:0 3px 10px rgba(36,29,22,.1);
}
.artifact-thumb.is-glyph{
  display:grid; place-items:center; font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; color:var(--ink-faint); text-align:center; padding:4px;
}
.artifact > span{ min-width:0; }
.artifact-name{
  overflow-wrap:anywhere;
  font-family:var(--display); font-weight:400; font-size:20px;
  line-height:1.24; letter-spacing:-.012em; display:block;
}
.artifact-meta{
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:7px; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.artifact-open{
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.18em; text-transform:uppercase;
  color:var(--forest);
}

/* ── lightbox ─────────────────────────────────────────────── */
#lightbox{
  position:fixed; inset:0; z-index:150; background:rgba(18,14,10,.93);
  display:grid; place-items:center; padding:3vh 3vw;
  opacity:0; transition:opacity .3s;
}
#lightbox[hidden]{ display:none; }
#lightbox.open{ opacity:1; }
#lb-frame{
  width:min(1000px,94vw); max-height:94svh; display:flex; flex-direction:column;
  background:var(--paper-bot); border-radius:3px; overflow:hidden;
}
#lb-head{
  padding:20px 26px 16px; border-bottom:1px solid var(--rule); flex:0 0 auto;
}
#lb-head h3{
  font-family:var(--display); font-weight:300; font-size:23px; letter-spacing:-.015em;
  margin:0 0 6px;
}
#lb-head p{
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin:0;
}
#lb-body{ overflow-y:auto; padding:24px 26px 34px; background:#efece4; }
#lb-body img{
  width:100%; margin:0 auto 20px; background:#fff;
  box-shadow:0 4px 22px rgba(20,14,8,.22);
}
#lb-close{
  position:absolute; top:18px; right:24px; z-index:2;
  width:38px; height:38px; font-size:26px; line-height:1; color:#e8dcc6;
  background:transparent; border:0; cursor:pointer; opacity:.7;
}
#lb-close:hover{ opacity:1; }

/* model map (excel architecture view) */
.model-map{ display:grid; gap:22px; }
.map-group{ }
.map-group h4{
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--rust); margin:0 0 11px; padding-bottom:7px; border-bottom:1px solid var(--rule);
}
.map-tabs{ display:flex; flex-wrap:wrap; gap:7px; }
.map-tab{
  font-family:var(--mono); font-size:var(--mono-md); padding:6px 11px;
  background:#fff; border:1px solid var(--rule); border-radius:2px; color:var(--ink);
}
.map-note{ font-size:15px; color:var(--ink-soft); margin:0; }

/* ── closing ──────────────────────────────────────────────── */
.closing{
  max-width:min(600px,88vw); margin:0 auto; padding:8vh 0 16vh; text-align:center;
}
.closing-h{
  font-family:var(--display); font-weight:300; font-size:clamp(30px,4vw,44px);
  letter-spacing:-.022em; margin:0 0 26px;
}
.contact{ display:flex; justify-content:center; flex-wrap:wrap; gap:28px; margin:44px 0 0; }
.contact a{
  font-family:var(--mono); font-size:var(--mono-md); letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; padding-bottom:5px; border-bottom:1px solid var(--rule);
}
.contact a:hover{ border-bottom-color:var(--rust); }
.colophon{
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.14em; color:var(--ink-faint);
  margin-top:60px; line-height:1.9;
}

/* ── responsive ───────────────────────────────────────────── */



@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .ch-inner{ opacity:1 !important; transform:none !important; }
}

/* ── hour of the New York sky ──────────────────────────────── */
.hero-hour::before{
  /* just enough tone to carry the label; a full-width veil read as a white
     hue across the top of the canopy */
  content:""; position:absolute; inset:-10px -30px;
  background:radial-gradient(60% 120% at 50% 50%, rgba(250,248,243,.72), rgba(250,248,243,0) 70%);
  z-index:-1;
}
body.night .hero-hour::before{
  background:radial-gradient(60% 120% at 50% 50%, rgba(9,12,22,.8), rgba(9,12,22,0) 70%);
}
.hero-hour{
  position:absolute; left:50%; top:28px; transform:translateX(-50%);
  isolation:isolate;
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink); margin:0; opacity:1;
  text-shadow:0 1px 6px rgba(250,248,243,.9);
}

/* ── north star ────────────────────────────────────────────── */
.northstar{
  position:relative; margin:40px 0 26px; padding:30px 30px 24px;
  border:1px solid var(--rule); border-radius:3px;
  background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
}
.northstar-mark{
  position:absolute; top:-9px; left:26px; width:18px; height:18px;
  background:var(--paper-bot);
}
.northstar-mark::before,
.northstar-mark::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--rust);
}
.northstar-mark::before{ width:15px; height:1px; transform:translate(-50%,-50%); }
.northstar-mark::after{ width:1px; height:15px; transform:translate(-50%,-50%); }
.northstar-h{
  font-family:var(--display); font-weight:300; font-size:28px; letter-spacing:-.02em;
  margin:0 0 16px;
}

/* ── the hero carries the live sky; at night it inverts ────── */
body.night .hero h1,
body.night .hero-line{ color:#f3ecdc; }
body.night .eyebrow,
body.night .hero-sub,
body.night .hero-hour,
body.night .scroll-cue{ color:rgba(236,228,208,.86); }
body.night .hero-hour{ text-shadow:0 1px 5px rgba(9,12,22,.9); }
body.night .scroll-cue span{ background:linear-gradient(rgba(232,222,200,.66),transparent); }


/* ── native spreadsheet ────────────────────────────────────── */
.xl{ display:flex; flex-direction:column; gap:0; }
.xl-note{
  font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 16px;
  border-left:2px solid var(--rule); padding-left:14px;
}
.xl-bar{
  display:flex; align-items:stretch; gap:0; border:1px solid #c9c4b8;
  background:#fff; border-radius:2px 2px 0 0;
}
.xl-addr{
  flex:0 0 84px; display:grid; place-items:center; font-family:var(--mono);
  font-size:var(--mono-md); color:var(--ink); border-right:1px solid #e0dbd0;
}
.xl-fx{
  flex:0 0 34px; display:grid; place-items:center; font-style:italic;
  font-size:13px; color:var(--ink-faint); border-right:1px solid #e0dbd0;
}
.xl-val{
  flex:1 1 auto; min-width:0; padding:9px 12px; font-family:var(--mono);
  font-size:var(--mono-lg); color:var(--ink-faint); overflow-x:auto; white-space:nowrap;
}
.xl-val.is-formula{ color:#1c5c3a; }
.xl-tabs{
  display:flex; gap:2px; overflow-x:auto; padding:6px 4px 0;
  background:#e8e4da; border:1px solid #c9c4b8; border-top:0;
  scrollbar-width:thin;
}
.xl-tab{
  flex:0 0 auto; padding:7px 12px 8px; font:inherit; font-family:var(--mono);
  font-size:var(--mono-md); letter-spacing:.02em; color:var(--ink-soft); cursor:pointer;
  background:#dcd7cb; border:1px solid #c9c4b8; border-bottom:0;
  border-radius:3px 3px 0 0; white-space:nowrap;
}
.xl-tab:hover{ background:#eae6dc; }
.xl-tab.on{ background:#fff; color:var(--ink); font-weight:600; }
.xl-tab.is-div{ opacity:.5; font-style:italic; }
.xl-pane{
  border:1px solid #c9c4b8; border-top:0; background:#fff;
  max-height:min(62svh,560px); overflow:auto; border-radius:0 0 2px 2px;
}
.xl-empty{ padding:34px 20px; font-size:14px; color:var(--ink-faint); font-style:italic; }
.xl-grid{
  border-collapse:separate; border-spacing:0; font-size:11.5px;
  font-family:"Aptos Narrow",Calibri,-apple-system,system-ui,sans-serif;
  color:#1a1a1a; table-layout:fixed;
}
.xl-grid col.xl-gutter{ width:38px; }
.xl-grid th{
  position:sticky; top:0; z-index:2; background:#f1efe9; color:#5c5044;
  font-weight:500; font-size:var(--mono-sm); font-family:var(--mono);
  border-right:1px solid #ddd8cc; border-bottom:1px solid #c9c4b8;
  padding:3px 0; text-align:center;
}
.xl-grid th.xl-corner{ left:0; z-index:3; }
.xl-grid th.xl-rownum{
  position:sticky; left:0; top:auto; z-index:1; background:#f1efe9;
}
.xl-grid td{
  border-right:1px solid #eeeae0; border-bottom:1px solid #eeeae0;
  padding:2px 6px; height:19px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; cursor:cell; vertical-align:middle;
}
.xl-grid td.has-f{ box-shadow:inset 2px 0 0 rgba(28,92,58,.3); }
.xl-grid td.sel{ outline:2px solid #1c5c3a; outline-offset:-2px; }


/* ── unadorned list, for the two signals ───────────────────── */
.plain{ list-style:none; margin:0 0 20px; padding:0; }
.plain li{
  position:relative; padding-left:22px; margin-bottom:16px;
}
.plain li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--rust);
}

/* ── the north star block ──────────────────────────────────── */
.northstar p{ margin:0 0 16px; }
.northstar p:last-child{ margin-bottom:0; }

/* ── closing copy ──────────────────────────────────────────── */
.closing p{ text-align:left; margin:0 0 18px; }
.closing .colophon{ text-align:center; }

/* ── the lightbox goes wide for a spreadsheet ──────────────── */
#lightbox.is-wide #lb-frame{ width:min(1320px,96vw); }
#lightbox.is-wide #lb-body{ background:var(--paper-bot); padding:22px 22px 26px; }



/* ══ paper ═══════════════════════════════════════════════════
   Full bleed, and it ages: papyrus at the earliest chapter, fresh white by
   the present, then the ground takes over at the bottom of the page. */
:root{
  --lane:clamp(250px,22vw,330px);      /* the column the tree lives in */
  --gutter:clamp(28px,6vw,96px);       /* air at the left and right walls */
  --age:1;
}
body{ background:var(--paper-bot); }

#paper{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
#paper-tone{ position:absolute; inset:0; background:var(--paper-bot); }
#paper-grain{
  position:absolute; inset:0; opacity:.3; mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)' opacity='.5'/%3E%3C/svg%3E");
  background-size:300px 300px, 900px 900px;
}

/* ══ the tree's lane — nothing else may enter it ══════════════ */
body.scene-page.past-hero #scene{
  /* Full width, not lane width. The trunk still sits in the lane because the
     camera centres it there, but a branch can now reach out over the writing
     the way a rule would. Clipped to the lane it had to stop inside six world
     units, which is why every branch read as a stub. */
  left:0; transform:none;
  width:100%; right:auto; opacity:1; z-index:-1;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 88%,transparent 100%);
}
.chapter[data-side="left"]  .ch-inner{ margin-right:calc(50% + var(--lane)/2 + 26px); margin-left:var(--gutter); }
.chapter[data-side="right"] .ch-inner{ margin-left:calc(50% + var(--lane)/2 + 26px); margin-right:var(--gutter); }
.ch-inner{ width:min(560px, calc(50% - var(--lane)/2 - var(--gutter))); }

/* ══ the last section is underground ═════════════════════════ */
.closing{
  position:relative; color:#efe6d4;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(24,16,8,0) 0%, rgba(24,16,8,.9) 46%, #1a1008 78%),
    #160e06;
  margin:0 calc(50% - 50vw); padding:16vh 0 18vh;
  max-width:none; width:100vw;
}
.closing::before{
  /* the ground line: soil pushing up into the paper */
  content:""; position:absolute; left:-2px; right:-2px; top:-88px; height:130px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='130' preserveAspectRatio='none'%3E%3Cpath d='M0 74c200 -12 300 8 440 6 150 -2 240 -16 400 -14 160 2 250 16 400 14 140 -2 240 -12 360 -8V130H0z' fill='%23160e06'/%3E%3C/svg%3E")
    bottom/100% 100% no-repeat;
}
.closing::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.closing > *{ position:relative; z-index:1; }
.closing-h,
.closing p,
.closing .contact,
.closing .colophon{
  max-width:min(600px,88vw); margin-left:auto; margin-right:auto;
}
.closing p{ margin-bottom:18px; }
.closing-h{ color:#f4ecda; }
.closing p{ color:#dfd3ba; }
.closing .contact a{ color:#e6d9bb; border-bottom-color:rgba(230,217,187,.3); }
.closing .contact a:hover{ color:#fff; border-bottom-color:var(--rust); }
.closing .colophon{ color:rgba(231,220,196,.82); }
.closing .draft{ color:#e8c98a; background:rgba(120,90,40,.3); border-color:rgba(200,150,70,.5); }

/* ══ redaction bars in a rendered memo ═══════════════════════ */
.memo{ max-width:46em; margin:0 auto; }
.memo-note{
  font-size:14.5px; line-height:1.6; color:var(--ink-soft);
  border-left:2px solid var(--rule); padding-left:14px; margin:0 0 26px;
}
.memo h2{ font-family:var(--display); font-weight:300; font-size:26px; margin:0 0 18px; }
.memo h3{
  font-family:var(--mono); font-size:var(--mono-md); letter-spacing:.2em; text-transform:uppercase;
  color:var(--rust); margin:34px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--rule);
}
.memo h4{
  font-family:var(--mono); font-size:var(--mono-sm); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); margin:24px 0 8px; font-weight:400;
}
.memo p, .memo li{ font-size:15.5px; line-height:1.72; margin:0 0 14px; }
.memo ul{ margin:0 0 18px; padding-left:20px; }
.rd{
  display:inline-block; vertical-align:baseline;
  width:3.1em; height:.92em; margin:0 .1em -.06em;
  background:#211a12; border-radius:1px;
}
.doc-table{ width:100%; border-collapse:collapse; margin:18px 0 24px; font-size:13.5px; }
.doc-table td{ border:1px solid var(--rule); padding:6px 9px; }



/* ── focus ───────────────────────────────────────────────────
   One rule, everywhere, so a keyboard reader is never lost. */
:where(a, button, input, [tabindex]):focus-visible{
  outline:2px solid var(--rust); outline-offset:3px; border-radius:2px;
}
#gate-input:focus-visible{ outline-color:#c9a061; }
.closing :where(a, button):focus-visible{ outline-color:#e0b877; }

/* small labels sat just under AA */
.eyebrow, .hero-hour{ color:#5f5445; }
body.night .eyebrow, body.night .hero-hour{ color:rgba(240,232,214,.82); }

/* a cell you can tab into reads its own formula */
.xl-grid td:focus-visible{ outline:2px solid #1c5c3a; outline-offset:-2px; }

/* ══ narrow screens — one block, so nothing later undoes it ══ */
@media (max-width:860px){
  /* the tree steps aside entirely: a hairline lane at the margin, and the
     writing gets the rest of the screen */
  :root{ --lane:64px; --gutter:20px; }
  body.scene-page.past-hero #scene{ left:0; transform:none; width:100%; }
  .ch-inner,
  .chapter[data-side="left"] .ch-inner,
  .chapter[data-side="right"] .ch-inner{
    width:auto; max-width:none;
    margin:0 var(--gutter) 0 calc(var(--lane) + 12px);
  }
  .bridge{ width:auto; margin:0 var(--gutter) 0 calc(var(--lane) + 12px);
           padding:14vh 0 10vh; }
  .hero-inner{ margin:0 var(--gutter); max-width:none; padding-right:0; }
  .chapter{ padding:9vh 0; }
  .chapter[data-side="left"] .ring-node,
  .chapter[data-side="right"] .ring-node{ left:32px; width:62px; height:62px; }
  .ring-yr{ font-size:9px; }
  .ring-year{ display:none; }
  .frames{ column-count:1; column-gap:0; }
  .frame{ margin-bottom:22px; }
  .artifact{ grid-template-columns:44px minmax(0,1fr); gap:12px; padding:12px 13px; }
  .artifact-thumb{ width:44px; height:58px; }
  .artifact-open{ display:none; }
  .xl-pane{ max-height:52svh; }
  .xl-addr{ flex-basis:62px; }
  .closing{ padding:12vh 0 14vh; }
}

/* an embedded interactive figure gets its own document, so it needs an
   explicit box — it cannot size itself from inside the iframe */
.lb-embed{
  display:block; width:100%; height:min(84svh,900px);
  border:1px solid var(--rule); border-radius:3px; background:#fff;
}
@media (max-width:860px){
  .lb-embed{ height:min(70svh,620px); }
}