:root{
  --ink:#121210;
  --ink-2:#1b1a16;
  --line-on-ink:#38352c;
  --paper-on-ink:#f1ece0;
  --paper-on-ink-soft:#b9b3a1;

  --paper:#ffffff;
  --paper-2:#f4f2ec;
  --paper-3:#eae6da;
  --line:#ddd7c8;
  --ink-soft:#57534a;
  --ink-faint:#8a8474;

  --signal:#db3b0a;
  --signal-ink:#8f2708;
  --moss:#38442e;
  --moss-2:#4c5a3d;
  --moss-tint:#dbe1c9;
  --moss-ink:#eef1e5;

  --font-display:'EB Garamond','Iowan Old Style',Georgia,serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',Consolas,monospace;

  color-scheme: light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;}
.wrap{padding-inline:clamp(1.25rem,4vw,3.5rem);}
.gutter{max-width:1400px;margin-inline:auto;}

/* ---------- reveal-on-scroll: visible by default, JS only enhances ---------- */
.reveal.pre{opacity:0;transform:translateY(14px);}
.reveal{transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal, .reveal.pre{transition:none;opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* ================= HERO ================= */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper-on-ink);
  overflow:hidden;
  padding-block:clamp(2.5rem,6vh,4.5rem) clamp(3rem,8vh,5.5rem);
}
.hero-topo{
  position:absolute;inset:0;
  opacity:.55;
  pointer-events:none;
}
.hero-topo path{
  fill:none;
  stroke:var(--line-on-ink);
  stroke-width:1;
}
.hero-topo path.hl{stroke:var(--signal);stroke-width:1.1;opacity:.8;}
@media (prefers-reduced-motion:no-preference){
  .hero-topo{animation:drift 46s linear infinite;}
}
@keyframes drift{
  0%{transform:translate(0,0);}
  50%{transform:translate(-1.2%, .8%);}
  100%{transform:translate(0,0);}
}

.hero-nav{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;
  font-size:.72rem;
  color:var(--paper-on-ink-soft);
  padding-bottom:clamp(2.5rem,8vh,6rem);
  position:relative;z-index:1;
}
.hero-nav .dot{color:var(--signal);}

.hero-body{position:relative;z-index:1;}
.hero-eyebrow{
  font-size:.72rem;color:var(--signal);margin-bottom:.9rem;
  display:flex;gap:.6em;align-items:center;
}
.hero-eyebrow::before{content:"";width:1.4em;height:1px;background:var(--signal);display:inline-block;}
.hero-title{
  font-size:clamp(2.8rem,7vw,6rem);
  line-height:.98;
  max-width:16ch;
}
.hero-subtitle{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.55rem);
  color:var(--paper-on-ink-soft);
  max-width:34ch;
  margin-top:1.4rem;
}
.hero-deck{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.55rem);
  color:var(--paper-on-ink-soft);
  max-width:34ch;
  margin-top:1.4rem;
}
.hero-meta{
  margin-top:clamp(2.5rem,6vh,4rem);
  display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;
  font-size:.7rem;color:var(--paper-on-ink-soft);
  border-top:1px solid var(--line-on-ink);
  padding-top:1.4rem;
}
.hero-meta strong{display:block;color:var(--paper-on-ink);font-family:var(--font-body);font-weight:600;font-size:.72rem;margin-bottom:.3rem;letter-spacing:.02em;text-transform:none;}
.hero-coords{
  position:relative;z-index:1;
  margin-top:clamp(2.5rem,6vh,4rem);
  display:flex;justify-content:space-between;align-items:flex-end;
  font-size:.68rem;color:var(--paper-on-ink-soft);
  flex-wrap:wrap;gap:1rem;
}
.scalebar{display:flex;align-items:center;gap:.5rem;}
.scalebar svg{display:block;}

/* ================= LAYOUT SHELL ================= */
.shell{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
}
.rail{
  display:none;
}
@media (min-width:900px){
  .rail{
    display:flex;flex-direction:column;
    gap:0;
    position:sticky;top:3.5rem;
    padding:2.5rem 1.5rem;
    width:min(15rem,18vw);
    align-self:start;
  }
  .rail a{
    display:flex;gap:.9rem;align-items:baseline;
    text-decoration:none;color:var(--ink-faint);
    font-size:.74rem;
    padding-block:.85rem;
    border-top:1px solid var(--line);
    transition:color .25s ease;
  }
  .rail a:first-child{border-top:none;}
  .rail a .n{font-family:var(--font-mono);color:var(--ink-faint);}
  .rail a .t{font-family:var(--font-display);font-size:1rem;font-style:italic;}
  .rail a.active{color:var(--ink);}
  .rail a.active .n{color:var(--signal);}
}
.main{min-width:0;}

/* ================= CHAPTER SCAFFOLD ================= */
.chapter{
  padding-block:clamp(3.5rem,9vh,6.5rem);
  border-bottom:1px solid var(--line);
}
.chapter.on-ink{background:var(--ink);color:var(--paper-on-ink);border-bottom-color:var(--line-on-ink);}
.chapter.on-moss{background:var(--moss);color:var(--moss-ink);border-bottom-color:var(--moss-2);}
.chapter-head{
  display:grid;grid-template-columns:1fr;gap:1rem;
  margin-bottom:clamp(2.5rem,6vh,4rem);
}
@media (min-width:760px){
  .chapter-head{grid-template-columns:6rem 1fr;align-items:end;}
}
.chapter-num{font-family:var(--font-mono);font-size:.78rem;color:var(--signal);}
.on-moss .chapter-num{color:var(--paper-on-ink);}
.chapter-title{font-size:clamp(1.9rem,3.6vw,2.9rem);}

.prose{
  max-width:62ch;
  font-size:1.03rem;
  line-height:1.75;
  color:var(--ink-soft);
}
.on-ink .prose, .on-moss .prose{color:var(--paper-on-ink-soft);}
.on-moss .prose{color:#d7ddc7;}
.prose + .prose{margin-top:1.1rem;}
.prose mark{
  background:none;color:var(--signal);font-style:italic;font-family:var(--font-display);
  text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:.15em;
}

/* stat strip */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);
  margin-block:2.5rem;
  border:1px solid var(--line);
}
@media (min-width:640px){.stats{grid-template-columns:repeat(4,1fr);}}
.stat{background:var(--paper);padding:1.1rem 1.2rem;}
.stat .v{font-family:var(--font-mono);font-size:1.15rem;font-variant-numeric:tabular-nums;}
.stat .k{font-size:.68rem;color:var(--ink-faint);margin-top:.3rem;letter-spacing:.03em;}

/* ---------- plates ---------- */
.plate-grid{
  display:grid;gap:1.5rem;
  margin-top:2.5rem;
  align-items:start;
}
@media (min-width:760px){
  .plate-grid.two{grid-template-columns:1.3fr 1fr;}
  .plate-grid.two.even{grid-template-columns:1fr 1fr;}
  .plate-grid.three{grid-template-columns:repeat(3,1fr);}
  .plate-grid.concept{grid-template-columns:repeat(2,1fr);}
  .plate-grid.concept .plate:nth-child(3){grid-column:1 / -1;}
  .plate-grid.concept .plate:nth-child(3) .plate-art{aspect-ratio:16/9;}
}
.plate{
  border:1px solid var(--line);
  background:var(--paper-2);
  position:relative;
}
.on-ink .plate, .on-moss .plate{border-color:var(--line-on-ink);background:var(--ink-2);}
.plate-art{
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(115deg, transparent 0 18px, rgba(18,18,16,.06) 18px 19px),
    linear-gradient(155deg,var(--art-a,#cabf9f),var(--art-b,#a89a76));
}
.plate-art::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(0,0,0,.18), transparent 50%);
}
.plate-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.plate-art .north{
  position:absolute;top:.7rem;right:.7rem;
  width:1.6rem;height:1.6rem;
  transition:transform .4s ease;
}
.plate:hover .plate-art .north{transform:rotate(8deg);}
.plate-art .tag{
  position:absolute;bottom:.6rem;left:.6rem;
  font-size:.58rem;letter-spacing:.06em;
  background:var(--ink);color:var(--paper-on-ink-soft);
  padding:.25rem .5rem;font-family:var(--font-mono);
}
.plate-cap{
  padding:.85rem 1rem;
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.68rem;letter-spacing:.03em;
}
.plate-cap .fig{color:var(--signal);}
.plate-cap .desc{color:var(--ink-faint);flex:1;}
.on-ink .plate-cap .desc,.on-moss .plate-cap .desc{color:var(--paper-on-ink-soft);}
.on-moss .plate-cap .fig{color:var(--paper-on-ink);}

/* text + companion image, side by side */
.split{display:grid;gap:1.75rem;align-items:start;}
@media (min-width:760px){
  .split{grid-template-columns:1fr 1fr;}
}
.split-figs{display:flex;flex-direction:column;gap:1.5rem;}

/* pull quote */
.pullquote{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1.35;max-width:22ch;
  margin-block:2.5rem;
  padding-left:1.4rem;border-left:2px solid var(--signal);
}
.on-moss .pullquote{color:var(--moss-ink);}

/* legend list */
.legend{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-on-ink);}
.legend li{
  display:grid;grid-template-columns:2.2rem 10rem 1fr;gap:1.2rem;
  padding-block:1.1rem;border-bottom:1px solid var(--line-on-ink);
  align-items:baseline;
}
@media (max-width:640px){.legend li{grid-template-columns:2rem 1fr;}
  .legend li .ldesc{grid-column:2;}
}
.legend .lsym{color:var(--signal);font-size:1.1rem;}
.legend .lname{font-family:var(--font-display);font-size:1.15rem;font-style:italic;}
.legend .ldesc{font-size:.88rem;color:#c9d0b8;}

/* horizontal gallery */
.gallery-scroll{
  display:flex;gap:1.25rem;overflow-x:auto;
  align-items:flex-start;
  margin-top:2.5rem;padding-bottom:1rem;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.gallery-scroll .plate{flex:0 0 min(78vw,22rem);scroll-snap-align:start;}
.gallery-scroll::-webkit-scrollbar{height:6px;}
.gallery-scroll::-webkit-scrollbar-thumb{background:var(--line);}

/* compare slider */
.compare{
  position:relative;margin-top:2.5rem;
  border:1px solid var(--line);
  aspect-ratio:16/9;overflow:hidden;
  user-select:none;
  max-width:100%;
}
.compare .layer{position:absolute;inset:0;}
.compare .existing{background:linear-gradient(150deg,#cabf9f,#8f8564);}
.compare .proposed{
  background:linear-gradient(150deg,#a9c19a,#4c5a3d);
  clip-path:inset(0 0 0 50%);
}
.compare .tag{
  position:absolute;top:.8rem;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.05em;background:var(--ink);color:var(--paper-on-ink-soft);padding:.3rem .55rem;
}
.compare .tag.tl{left:.8rem;}
.compare .tag.tr{right:.8rem;}
.compare input[type="range"]{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;appearance:none;background:transparent;cursor:ew-resize;
}
.compare input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--paper);border:2px solid var(--signal);
  margin-top:0;
}
.handle-line{
  position:absolute;top:0;bottom:0;width:2px;background:var(--paper);
  left:50%;pointer-events:none;transform:translateX(-1px);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}

/* colophon */
.colophon{
  margin-top:3rem;border-top:1px solid var(--line-on-ink);padding-top:2rem;
  display:grid;gap:1.3rem 2rem;grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){.colophon{grid-template-columns:repeat(3,1fr);}}
.colophon dt{font-size:.62rem;color:var(--paper-on-ink-soft);letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono);}
.colophon dd{margin:.35rem 0 0;font-family:var(--font-display);font-size:1.05rem;font-style:italic;}

/* author card */
.author-card{
  display:grid;gap:2rem;
  grid-template-columns:1fr;
  margin-top:1rem;
  border:1px solid var(--line);
  background:var(--paper-2);
}
@media (min-width:700px){
  .author-card{grid-template-columns:14rem 1fr;}
}
.author-photo{margin:0;border:none;background:none;}
.author-photo .plate-art{aspect-ratio:3/4;}
.author-fields{
  margin:0;padding:1.5rem clamp(1.25rem,3vw,2rem);
  display:grid;gap:0;align-content:center;
}
.author-fields div{
  display:grid;grid-template-columns:8rem 1fr;gap:1rem;
  padding-block:.7rem;border-bottom:1px solid var(--line);
}
@media (max-width:520px){
  .author-fields div{grid-template-columns:1fr;gap:.2rem;}
}
.author-fields div:last-child{border-bottom:none;}
.author-fields dt{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);align-self:center;}
.author-fields dd{margin:0;font-family:var(--font-display);font-size:1.05rem;font-style:italic;align-self:center;}
.author-fields dd a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.15em;}
.author-fields dd a:hover{text-decoration-color:currentColor;}

footer{
  padding:2.2rem clamp(1.25rem,4vw,3.5rem);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:.68rem;color:var(--ink-faint);
  background:var(--paper);
}
footer .back{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid var(--line);}

/* Click-to-enlarge figures and full-size image viewing. */
.image-enlarge{position:absolute;inset:0;border:0;background:transparent;cursor:zoom-in;color:var(--paper);}
.image-enlarge span{position:absolute;right:.65rem;bottom:.65rem;background:var(--ink);padding:.4rem .6rem;font: .65rem var(--font-mono);}
.image-enlarge:focus-visible{outline:3px solid var(--signal);outline-offset:-4px;}
.compare-enlarge{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem;}
.compare-enlarge button{font: .75rem var(--font-mono);padding:.65rem .9rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);cursor:zoom-in;}
.image-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:1rem;box-sizing:border-box;border:0;background:rgba(15,17,22,.97);color:#fff;}
.image-viewer[open]{display:flex;flex-direction:column;gap:.8rem;}
.image-viewer::backdrop{background:rgba(0,0,0,.85);}
.viewer-toolbar{display:flex;justify-content:flex-end;gap:.75rem;flex-shrink:0;}
.viewer-toolbar button{font: .8rem var(--font-mono);padding:.7rem 1rem;border:1px solid #777;background:#202329;color:#fff;cursor:pointer;}
.image-viewer button:focus-visible,.viewer-image:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.viewer-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;}
.viewer-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;}
.viewer-stage.is-zoomed{display:block;}
.viewer-stage.is-zoomed .viewer-image{max-width:none;max-height:none;margin:0 auto;cursor:zoom-out;}
.viewer-caption{flex-shrink:0;text-align:center;font: .75rem/1.5 var(--font-mono);margin:0;max-height:20vh;overflow:auto;}
@media(max-width:520px){.image-viewer{padding:.65rem;}.viewer-toolbar button{font-size:.7rem;padding:.65rem;}}