/* ═══════════════════════════════════════════════════════════════
   FREDERICKSBURG: THE LIVING ARCHIVE
   Archival paper floating above black. Microfilm grain. Accession
   stamps. Every texture generated in code — no photograph appears
   that isn't ours, and none is ours yet.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --void:#0d0b09;
  --void-soft:#161310;
  --paper:#f2ece2;
  --paper-deep:#e7dfd2;
  --paper-dim:#d9cfbd;
  --ink:#1a1613;
  --ink-soft:#4a423a;
  --ink-faint:#8c8074;
  --rule:#cdc2b1;
  --rule-dark:#33291f;
  --bone:#c9bfae;          /* text on black */
  --bone-faint:#8a7f6e;
  --clay:#a8552f;
  --clay-bright:#c4703f;

  --fact:#3f6b4f;
  --memory:#a87b2f;
  --legend:#6f5a80;
  --open:#8c8074;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--sans);
  line-height:1.6;
}
/* microfilm grain over everything */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}
/* faint handwriting — our own hand, drawn in code — creeping behind sections */
.ghostline{position:absolute;pointer-events:none;font-family:var(--serif);font-style:italic;
  color:rgba(201,191,174,.05);font-size:clamp(4rem,12vw,9rem);white-space:nowrap;
  transform:rotate(-4deg);user-select:none;z-index:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);position:relative;z-index:2}
a{color:inherit}

/* ── type helpers ────────────────────────────────── */
.acc{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--bone-faint);text-transform:uppercase}
.section-label{
  font-size:.66rem;letter-spacing:.36em;text-transform:uppercase;color:var(--bone-faint);
  padding-top:1.1rem;border-top:1px solid var(--rule-dark);margin-bottom:clamp(1.5rem,3vw,2.5rem);
  font-family:var(--sans);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.section-label .dept{color:var(--clay-bright);letter-spacing:.18em}
.section-sub{max-width:58ch;color:var(--bone);font-family:var(--serif);
  font-size:clamp(1.02rem,1.7vw,1.25rem);line-height:1.6;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.section-sub em{color:var(--clay-bright);font-style:italic}
section{position:relative;padding:clamp(3.5rem,8vw,6.5rem) 0}

/* ── classification stamps ──────────────────────────── */
.stamp{
  display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;
  padding:.28rem .55rem .22rem;border:1.5px solid currentColor;border-radius:2px;
  text-transform:uppercase;transform:rotate(-2deg);opacity:.92;
}
.stamp.fact{color:var(--fact)}
.stamp.memory{color:var(--memory)}
.stamp.legend{color:var(--legend);transform:rotate(2deg)}
.stamp.open{color:var(--open);border-style:dashed}
.on-paper .stamp.fact{color:#2f5d3f}
.on-paper .stamp.memory{color:#8a6320}
.on-paper .stamp.legend{color:#5c4870}

/* ── masthead ──────────────────────────────────────── */
.masthead{padding:clamp(1.5rem,3.5vw,2.5rem) 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.wordmark{font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;color:var(--bone-faint)}
.masthead .acc{text-align:right}

/* ── entrance ──────────────────────────────────────── */
.entrance{min-height:92vh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:clamp(3rem,6vw,5rem) 0}
.entrance-map{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none}
.entrance-map svg{width:100%;height:100%}
.entrance h1{
  font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(2.7rem,8.5vw,6.8rem);line-height:.95;letter-spacing:-.015em;
  max-width:14ch;position:relative;z-index:2;
  text-shadow:0 2px 30px rgba(13,11,9,.9);
}
.entrance h1 .q{color:var(--clay-bright)}
.entrance .doors{
  position:relative;z-index:2;margin-top:clamp(1.5rem,3vw,2.25rem);
  font-family:var(--sans);font-size:clamp(.72rem,1.3vw,.86rem);letter-spacing:.3em;
  text-transform:uppercase;color:var(--bone);line-height:2.1;max-width:44rem;
}
.entrance .doors b{color:var(--clay-bright);font-weight:400}
.entrance .span-line{position:relative;z-index:2;margin-top:1rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.28em;color:var(--bone-faint);text-transform:uppercase}
/* floating evidence fragments */
.frag{
  position:absolute;z-index:1;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;line-height:1.5;
  padding:.65rem .8rem;max-width:12.5rem;border-radius:1px;cursor:pointer;border:0;text-align:left;
  box-shadow:0 12px 30px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  transform:rotate(var(--tilt,-2deg));
  animation:drift 9s ease-in-out infinite alternate;
  animation-delay:var(--dd,0s);
}
.frag .k{display:block;color:var(--clay);letter-spacing:.2em;text-transform:uppercase;font-size:.52rem;margin-bottom:.2rem}
.frag:hover{box-shadow:0 18px 40px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4)}
.frag:focus-visible{outline:2px solid var(--clay-bright);outline-offset:2px}
.frag.woods{background:#11150f;color:#9db38b;border:1px solid #2c3a26}
.frag.woods .k{color:#9db38b}
@keyframes drift{from{transform:rotate(var(--tilt,-2deg)) translateY(0)}to{transform:rotate(var(--tilt,-2deg)) translateY(-10px)}}
.scroll-cue{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.3em;color:var(--bone-faint);text-transform:uppercase}
@media(max-width:760px){.frag{display:none}.frag.keep{display:block}}

/* ── sticky nav ────────────────────────────────────── */
.desknav{
  position:sticky;top:0;z-index:30;background:rgba(13,11,9,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule-dark);
}
.desknav ul{list-style:none;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;
  padding:.55rem clamp(1.25rem,4vw,3rem);max-width:1240px;margin:0 auto}
.desknav ul::-webkit-scrollbar{display:none}
.desknav a{
  display:block;white-space:nowrap;text-decoration:none;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-faint);
  padding:.45rem .7rem;border:1px solid transparent;border-radius:2px;
}
.desknav a:hover,.desknav a:focus-visible{color:var(--paper);border-color:var(--rule-dark)}

/* ── constitution ──────────────────────────────────── */
.constitution{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.law{
  background:var(--paper);color:var(--ink);padding:1.4rem 1.4rem 1.2rem;border-radius:1px;position:relative;
  box-shadow:0 14px 34px rgba(0,0,0,.5);transform:rotate(var(--tilt,0deg));
}
.law h3{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;margin-bottom:.6rem}
.law.fact h3{color:#2f5d3f}.law.memory h3{color:#8a6320}.law.legend h3{color:#5c4870}
.law p{font-family:var(--serif);font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.law .acc{position:absolute;top:.6rem;right:.7rem;color:var(--ink-faint)}
.oath{
  margin-top:clamp(1.75rem,3vw,2.5rem);font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--paper);max-width:34ch;line-height:1.45;
}
.oath small{display:block;margin-top:.6rem;font-family:var(--mono);font-style:normal;font-size:.58rem;
  letter-spacing:.26em;color:var(--bone-faint);text-transform:uppercase}

/* ── timeline ──────────────────────────────────────── */
.timeline-shell{position:relative}
.timeline{
  display:flex;gap:clamp(1rem,2vw,1.75rem);overflow-x:auto;padding:1rem .25rem 1.5rem;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--rule-dark) transparent;
}
.timeline::before{content:"";position:absolute;left:0;right:0;top:3.4rem;height:1px;background:var(--rule-dark)}
.era{flex:0 0 auto;width:clamp(240px,26vw,320px);scroll-snap-align:start;position:relative;padding-top:1.5rem}
.era::before{content:"";position:absolute;top:calc(2.4rem + 1px);left:2px;width:9px;height:9px;border-radius:50%;
  background:var(--clay);box-shadow:0 0 0 4px rgba(168,85,47,.18)}
.era h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--paper);line-height:1.05}
.era .span{font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;color:var(--bone-faint);text-transform:uppercase;margin:.35rem 0 .6rem}
.era .blurb{font-family:var(--serif);font-size:.92rem;color:var(--bone);line-height:1.5;min-height:3.2em;margin-bottom:.9rem}
.era .events{display:flex;flex-direction:column;gap:.5rem}
.chip{
  text-align:left;background:var(--paper);color:var(--ink);border:0;border-radius:1px;cursor:pointer;
  font-family:var(--sans);padding:.6rem .75rem;line-height:1.35;
  box-shadow:0 8px 20px rgba(0,0,0,.45);transform:rotate(var(--tilt,0deg));
  transition:transform .25s ease,box-shadow .25s ease;
}
.chip:hover,.chip:focus-visible{transform:rotate(0) translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.6)}
.chip .cy{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--clay);display:block;margin-bottom:.15rem;text-transform:uppercase}
.chip .cn{font-size:.86rem;font-weight:600}
.timeline-hint{font-family:var(--mono);font-size:.56rem;letter-spacing:.26em;color:var(--bone-faint);text-transform:uppercase;margin-top:.4rem}

/* ── memory map ────────────────────────────────────── */
.map-frame{
  position:relative;border:1px solid var(--rule-dark);border-radius:2px;background:var(--void-soft);
  box-shadow:inset 0 0 80px rgba(0,0,0,.55);overflow:hidden;
}
.map-frame svg{display:block;width:100%;height:auto}
.map-street{stroke:#3a3128;stroke-width:2.4;fill:none}
.map-street.minor{stroke-width:1.4;opacity:.75}
.map-rail{stroke:#4a3f33;stroke-width:2;fill:none;stroke-dasharray:7 4}
.map-river{fill:none;stroke:#2c4a52;stroke-width:26;opacity:.85;stroke-linecap:round}
.map-river-flow{fill:none;stroke:#59848d;stroke-width:2;opacity:.5;stroke-dasharray:3 14;animation:flow 14s linear infinite}
@keyframes flow{to{stroke-dashoffset:-340}}
.map-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;fill:#7d7264;text-transform:uppercase}
.map-label.water{fill:#59848d;font-style:italic;letter-spacing:.3em}
.map-woods{fill:#151a12}
.map-dot{cursor:pointer}
.map-dot circle.core{fill:var(--clay-bright)}
.map-dot circle.halo{fill:none;stroke:var(--clay-bright);opacity:.5;animation:halo 3.2s ease-out infinite}
.map-dot text{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;fill:var(--bone);text-transform:uppercase;paint-order:stroke;stroke:rgba(13,11,9,.85);stroke-width:3}
.map-dot.cryptid circle.core{fill:#7d9b6a}
.map-dot.cryptid circle.halo{stroke:#7d9b6a;animation-duration:2.1s}
.map-dot.cryptid text{fill:#9db38b}
.map-dot:hover circle.core,.map-dot:focus-visible circle.core{fill:var(--paper)}
.map-dot:focus-visible{outline:none}
.map-dot:focus-visible circle.halo{opacity:.9}
@keyframes halo{0%{r:6;opacity:.55}100%{r:20;opacity:0}}
@media (prefers-reduced-motion:reduce){.map-river-flow,.map-dot circle.halo,.frag{animation:none}}
.map-legend{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.9rem;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.map-legend .swatch-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.45rem;background:var(--clay-bright)}
.map-legend .swatch-dot.woods-dot{background:#7d9b6a}

/* ── card grids (people / places / creatures / legends) ────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:clamp(1rem,2vw,1.6rem)}
.mcard{
  background:var(--paper);color:var(--ink);border-radius:1px;padding:1.25rem 1.25rem 1.1rem;
  text-align:left;border:0;cursor:pointer;position:relative;
  box-shadow:0 14px 34px rgba(0,0,0,.5);transform:rotate(var(--tilt,0deg));
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
  display:flex;flex-direction:column;gap:.45rem;font-family:var(--sans);
}
.mcard:hover,.mcard:focus-visible{transform:rotate(0) translateY(-4px);box-shadow:0 22px 48px rgba(0,0,0,.65)}
.mcard .acc{position:absolute;top:.65rem;right:.8rem;color:var(--ink-faint)}
.mcard h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.1;padding-right:3.2rem}
.mcard .role{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.mcard .dates{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--clay)}
.mcard .made{font-family:var(--serif);font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.mcard .made b{font-family:var(--mono);font-weight:400;font-size:.56rem;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;display:block;margin-bottom:.1rem}
.mcard .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem;padding-top:.5rem}
.mcard .see{font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;color:var(--clay);text-transform:uppercase}
.mcard.creature{background:var(--paper-deep)}
.mcard.legendcard{background:#181420;color:#cfc4de;box-shadow:0 14px 34px rgba(0,0,0,.6)}
.mcard.legendcard h3{color:#e5dcf2}
.mcard.legendcard .role,.mcard.legendcard .acc{color:#8a7d9e}
.mcard.legendcard .made{color:#b3a7c6}.mcard.legendcard .made b{color:#8a7d9e}
.mcard.legendcard .dates,.mcard.legendcard .see{color:#9db38b}

/* ── dossier modal ──────────────────────────────────── */
.dossier-veil{
  position:fixed;inset:0;z-index:50;background:rgba(8,6,5,.78);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:clamp(1rem,4vw,3.5rem) 1rem;
}
.dossier-veil.open{display:flex}
.dossier{
  background:var(--paper);color:var(--ink);width:min(680px,100%);border-radius:1px;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.75);padding:clamp(1.5rem,3.5vw,2.5rem);
  transform:rotate(-.4deg);
}
.dossier .acc{color:var(--ink-faint)}
.dossier h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.05;margin:.5rem 0 .3rem}
.dossier .role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.dossier .meta-row{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:.7rem 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--ink-soft)}
.dossier .meta-row .k{color:var(--clay)}
.dossier .facts{margin:1.1rem 0 0;border-top:1px solid var(--rule);padding-top:1rem;display:grid;gap:.55rem}
.dossier .facts div b{font-family:var(--mono);font-weight:400;font-size:.56rem;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase;display:block}
.dossier .facts div span{font-family:var(--serif);font-size:.98rem;color:var(--ink-soft)}
.dossier .body{margin-top:1.1rem;border-top:1px solid var(--rule);padding-top:1.1rem;max-width:62ch}
.dossier .body p{font-family:var(--serif);font-size:1rem;line-height:1.62;color:var(--ink-soft)}
.dossier .body p + p{margin-top:.8rem}
.dossier .layers{margin-top:1.1rem;border-top:1px solid var(--rule);padding-top:1.1rem}
.dossier .layers h4,.dossier .conn h4,.dossier .src h4{
  font-family:var(--mono);font-weight:400;font-size:.58rem;letter-spacing:.26em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:.7rem}
.layer{display:grid;grid-template-columns:5.2rem 1fr;gap:.9rem;padding:.55rem 0;border-top:1px dashed var(--rule)}
.layer:first-of-type{border-top:0}
.layer .yr{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--clay);padding-top:.1rem}
.layer .tx{font-family:var(--serif);font-size:.93rem;color:var(--ink-soft);line-height:1.5}
.layer.openlayer .tx{color:var(--ink-faint);font-style:italic}
.layer .stamp{margin-left:.5rem;font-size:.48rem;vertical-align:middle}
.dossier .conn{margin-top:1.1rem;border-top:1px solid var(--rule);padding-top:1.1rem}
.connlink{
  display:inline-block;background:none;border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--ink-soft);
  padding:.4rem .6rem;margin:0 .4rem .4rem 0;text-transform:uppercase;
}
.connlink:hover,.connlink:focus-visible{border-color:var(--clay);color:var(--clay)}
.dossier .src{margin-top:1.1rem;border-top:1px solid var(--rule);padding-top:1.1rem}
.dossier .src li{font-family:var(--serif);font-size:.85rem;color:var(--ink-faint);margin-left:1.1rem;line-height:1.6}
.dossier .close{
  position:absolute;top:.9rem;right:.9rem;background:none;border:1px solid var(--rule);border-radius:50%;
  width:2.1rem;height:2.1rem;cursor:pointer;color:var(--ink-soft);font-size:1rem;line-height:1;
}
.dossier .close:hover{border-color:var(--clay);color:var(--clay)}

/* ── made here (materials, kept) ──────────────────────── */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:clamp(1rem,2vw,1.75rem)}
.swatch .face{aspect-ratio:4/5;border-radius:1px;position:relative;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.swatch .face::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E")}
.f-clay{background:radial-gradient(120% 90% at 30% 15%,#c4703f 0%,transparent 60%),linear-gradient(160deg,#a8552f,#7d3a1d)}
.f-silver{background:linear-gradient(105deg,#b9bec4 0%,#7b828a 28%,#d3d8dc 46%,#666d75 68%,#a8aeb5 100%)}
.f-iron{background:radial-gradient(90% 70% at 70% 80%,#55504c 0%,transparent 65%),linear-gradient(200deg,#3d3a38,#22201f)}
.f-glass{background:linear-gradient(150deg,rgba(255,255,255,.55) 0%,transparent 30%),linear-gradient(30deg,#4a7c7e,#8fc0bd 55%,#356163)}
.f-wood{background:repeating-linear-gradient(92deg,#8a6034 0 3px,#7a5229 3px 5px,#96693a 5px 9px),linear-gradient(#8a6034,#6d4b28)}
.f-fibre{background:repeating-linear-gradient(45deg,#7d5a72 0 2px,#6a4a60 2px 4px),repeating-linear-gradient(-45deg,rgba(255,255,255,.13) 0 2px,transparent 2px 4px)}
.swatch .name{margin-top:.8rem;font-family:var(--serif);font-size:1rem;color:var(--paper)}
.swatch .who{font-size:.72rem;color:var(--bone-faint);letter-spacing:.02em}

/* ── the river band ─────────────────────────────────── */
.river-band{border-top:1px solid #2c4a52;border-bottom:1px solid #2c4a52;background:linear-gradient(180deg,rgba(44,74,82,.12),rgba(44,74,82,.03))}
.floodline{position:relative;border-top:2px solid #59848d;margin:2.2rem 0 .4rem}
.floodline span{position:absolute;right:0;top:-1.5rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;color:#59848d;text-transform:uppercase}

/* ── then / now ────────────────────────────────────── */
.thennow{position:relative;border:1px solid var(--rule-dark);border-radius:2px;overflow:hidden;background:var(--void-soft)}
.tn-pane{display:block;width:100%;height:auto}
.tn-top{position:absolute;inset:0;overflow:hidden}
.tn-top svg{width:100%;height:100%}
.tn-divider{position:absolute;top:0;bottom:0;width:2px;background:var(--paper);box-shadow:0 0 14px rgba(0,0,0,.8);pointer-events:none}
.tn-divider::after{
  content:"◂ ▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--paper);color:var(--ink);font-size:.72rem;letter-spacing:.1em;
  padding:.35rem .5rem;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.6);
}
.tn-tag{position:absolute;top:.8rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;background:rgba(13,11,9,.72);color:var(--bone);padding:.35rem .6rem;border-radius:2px;pointer-events:none}
.tn-tag.then{left:.8rem}.tn-tag.now{right:.8rem}
.tn-range{width:100%;margin-top:.8rem;accent-color:var(--clay-bright)}
.tn-note{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--bone-faint);text-transform:uppercase;margin-top:.5rem;line-height:1.8}

/* ── add your person ────────────────────────────────── */
.invite{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.invite .voices{font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.7;color:var(--paper);font-style:italic}
.invite .voices span{display:block;opacity:.85}
.invite .voices span + span{margin-top:.35rem}
.deskcard{background:var(--paper);color:var(--ink);padding:1.5rem;border-radius:1px;box-shadow:0 14px 34px rgba(0,0,0,.5);transform:rotate(.6deg)}
.deskcard h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:.8rem}
.deskcard ul{list-style:none;font-family:var(--serif);font-size:.95rem;color:var(--ink-soft)}
.deskcard li{padding:.35rem 0;border-top:1px dashed var(--rule)}
.deskcard li:first-child{border-top:0}
.deskcard .soon{
  display:inline-block;margin-top:1rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;border:1.5px dashed var(--ink-faint);color:var(--ink-faint);padding:.55rem .8rem;border-radius:2px;transform:rotate(-1.5deg)}
.deskcard p.partner{margin-top:1rem;font-size:.82rem;color:var(--ink-faint);line-height:1.6}
@media(max-width:820px){.invite{grid-template-columns:1fr}}

/* ── reading room ──────────────────────────────────── */
.readingroom a.shelf{
  display:block;background:var(--paper);color:var(--ink);text-decoration:none;border-radius:1px;
  padding:clamp(1.5rem,3.5vw,2.25rem);box-shadow:0 14px 34px rgba(0,0,0,.5);transform:rotate(-.5deg);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;max-width:640px;
}
.readingroom a.shelf:hover{transform:rotate(0) translateY(-4px);box-shadow:0 22px 48px rgba(0,0,0,.65)}
.readingroom .shelf h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem)}
.readingroom .shelf p{font-family:var(--serif);color:var(--ink-soft);margin-top:.5rem;max-width:52ch}
.readingroom .shelf .see{display:inline-block;margin-top:.9rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;color:var(--clay);text-transform:uppercase}

/* ── roll of living makers ───────────────────────────── */
.names{list-style:none;columns:2;column-gap:clamp(1.5rem,4vw,3.5rem);font-family:var(--serif);font-size:clamp(.95rem,1.5vw,1.1rem);line-height:1.9;color:var(--bone)}
.names li{break-inside:avoid;border-bottom:1px solid rgba(51,41,31,.8);padding:.15rem 0}
.names li span{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay-bright);margin-left:.6rem;white-space:nowrap}
.roll-note{margin-top:clamp(1.75rem,3.5vw,2.5rem);max-width:58ch;color:var(--bone);font-family:var(--serif);font-size:1rem;line-height:1.65}
@media(min-width:900px){.names{columns:3}}
@media(min-width:1200px){.names{columns:4}}

/* ── source drawer ─────────────────────────────────── */
.drawer-tab{
  position:fixed;right:0;bottom:2.2rem;z-index:45;writing-mode:vertical-rl;
  background:var(--paper);color:var(--ink);border:0;border-radius:2px 0 0 2px;cursor:pointer;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  padding:.9rem .5rem;box-shadow:-6px 8px 24px rgba(0,0,0,.5);
}
.drawer-tab:hover{color:var(--clay)}
.drawer{
  position:fixed;right:0;bottom:0;z-index:46;width:min(420px,100%);max-height:76vh;overflow-y:auto;
  background:var(--paper);color:var(--ink);border-radius:2px 0 0 0;padding:1.5rem;
  box-shadow:-10px 0 40px rgba(0,0,0,.6);transform:translateY(102%);transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.drawer.open{transform:none}
.drawer h3{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:1rem}
.drawer h4{font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin:1.1rem 0 .4rem}
.drawer p,.drawer li{font-family:var(--serif);font-size:.88rem;color:var(--ink-soft);line-height:1.6}
.drawer ul{margin-left:1.1rem}
.drawer .close{position:absolute;top:.8rem;right:.8rem;background:none;border:1px solid var(--rule);border-radius:50%;width:1.9rem;height:1.9rem;cursor:pointer;color:var(--ink-soft)}

/* ── colophon ──────────────────────────────────────── */
.colophon{padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,6vw,4rem);border-top:1px solid var(--rule-dark);margin-top:clamp(3rem,6vw,5rem)}
.colophon p{max-width:54ch;color:var(--bone);font-size:.93rem}
.colophon p + p{margin-top:1rem}
.seal{
  width:6.5rem;height:6.5rem;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;transform:rotate(-6deg);margin-bottom:2rem;background:var(--paper-deep);
  border:1px solid rgba(168,85,47,.32);
  box-shadow:inset 0 3px 5px rgba(26,22,19,.17),inset 0 -1px 0 rgba(255,255,255,.6),0 10px 26px rgba(0,0,0,.5);
}
.seal .initials{font-family:var(--serif);font-size:1.5rem;color:var(--clay);letter-spacing:.06em;line-height:1}
.seal .legend-text{font-family:var(--sans);font-size:.44rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);text-align:center;line-height:1.35;max-width:5rem}
.byline{margin-top:clamp(2.5rem,5vw,3.5rem);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-faint)}
.byline a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--rule-dark)}
.byline a:hover{color:var(--clay-bright);border-color:var(--clay-bright)}
.zip{margin-top:2.2rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.34em;color:var(--bone-faint);text-transform:uppercase}

/* ── reveal motion (JS-applied; page fully visible without JS) ── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.rv.in{opacity:1;transform:none}
.mcard.rv{transform:translateY(20px) rotate(var(--tilt,0deg))}
.mcard.rv.in{transform:rotate(var(--tilt,0deg))}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}}