/* ============================================================
   THE MOTH LEDGER — shared stylesheet
   Night survey archive · no remote resources
   ============================================================ */

:root{
  --night:#0d0f14;
  --night-2:#13161f;
  --night-3:#171b26;
  --paper:#ece2cc;
  --paper-2:#e2d5b4;
  --ink:#241f16;
  --txt:#d6cfbd;
  --txt-dim:#9a947f;
  --lamp:#f0a63e;
  --lamp-hot:#ffd98a;
  --verm:#c8442c;
  --sage:#8f9e85;
  --line:rgba(214,206,182,.16);
  --line-soft:rgba(214,206,182,.09);
  --display:"Didot","Bodoni MT","Bodoni 72","Playfair Display",Georgia,serif;
  --body:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{background:var(--night);scroll-behavior:smooth}

body{
  background:var(--night);
  color:var(--txt);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain over everything */
body::before{
  content:"";
  position:fixed;inset:0;
  z-index:120;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.6'/></svg>");
}

::selection{background:var(--lamp);color:var(--night)}

img,svg{display:block;max-width:100%}
a{color:var(--lamp)}
a:hover{color:var(--lamp-hot)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}

.wrap{max-width:1100px;margin:0 auto;padding:0 1.5rem}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-999px;top:0;background:var(--lamp);color:var(--night);padding:.5rem 1rem;font-family:var(--mono);z-index:200}
.skip:focus{left:1rem;top:1rem}

/* ------------------------------------------------------------
   Masthead
   ------------------------------------------------------------ */
.masthead{
  position:sticky;top:0;z-index:100;
  background:var(--night);
  border-bottom:1px solid var(--line);
}
.mast-in{display:flex;align-items:center;gap:2rem;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--paper)}
.brand:hover{color:var(--lamp-hot)}
.brand-mark{width:34px;height:34px}
.bm-w{fill:var(--lamp)}
.bm-w2{fill:#b57e24}
.bm-b{fill:var(--paper)}
.bm-a{stroke:var(--paper);fill:none;stroke-width:1.6;stroke-linecap:round}
.brand-txt{
  font-family:var(--display);
  font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;
}
.nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.nav a{
  color:var(--txt-dim);text-decoration:none;position:relative;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.2rem 0;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:var(--lamp);transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--lamp)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.mast-no{
  margin-left:auto;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--txt-dim);
}
.mast-no sup{color:var(--lamp)}

/* ------------------------------------------------------------
   Hero — the trap-lamp scene
   ------------------------------------------------------------ */
.trap{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:radial-gradient(1400px 800px at 68% 30%,var(--night-3) 0%,var(--night) 62%);
}
.trap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 520px at 70% 32%,rgba(240,166,62,.16),transparent 60%);
  transition:opacity .9s ease;
}
.trap::after{ /* star field */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
  background-image:
    radial-gradient(1px 1px at 22px 34px,rgba(232,226,208,.7),transparent 55%),
    radial-gradient(1px 1px at 128px 84px,rgba(232,226,208,.45),transparent 55%),
    radial-gradient(1.6px 1.6px at 204px 44px,rgba(232,226,208,.6),transparent 55%),
    radial-gradient(1px 1px at 76px 128px,rgba(232,226,208,.35),transparent 55%);
  background-size:240px 170px;
  animation:twinkle 9s ease-in-out infinite;
}
.lamp-out .trap::before{opacity:.1}
.lamp-out .trap::after{opacity:.35}

.trap-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;
  padding-top:4.5rem;padding-bottom:2rem;
}
.kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--lamp);margin-bottom:1.2rem;
}
.trap-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.5rem,6vw,4.5rem);
  line-height:1.06;
  color:var(--paper);
  letter-spacing:.01em;
  margin-bottom:1.2rem;
}
.trap-sub{max-width:34rem;color:var(--txt-dim);font-size:1.05rem}

.scene{position:relative;min-height:400px}
.lamp-svg{position:absolute;inset:0;margin:auto;height:100%;max-height:440px;width:auto}
.cord{stroke:#3a3f4d;stroke-width:2}
.shade{fill:#11141b;stroke:#3a3f4d;stroke-width:2}
.tube{fill:var(--lamp)}
.tube-core{fill:var(--lamp-hot)}
.frame{stroke:#4a4234;stroke-width:2;fill:none}
.mote{fill:var(--lamp-hot);animation:mote 3.4s ease-in-out infinite}
.m2{animation-delay:1.1s}.m3{animation-delay:2.2s}
.lamp-glow{animation:flicker 5s ease-in-out infinite;transition:opacity .9s ease}
.lamp-out .lamp-glow{opacity:.07}
.lamp-out .mote,.lamp-out .orbit{opacity:0}
.orbit{transition:opacity 1.2s ease}

@keyframes flicker{
  0%,100%{opacity:1}12%{opacity:.84}28%{opacity:.96}
  47%{opacity:.8}62%{opacity:.98}81%{opacity:.88}
}
@keyframes mote{
  0%,100%{opacity:.2;transform:translate(0,0)}
  40%{opacity:.95;transform:translate(4px,-6px)}
  70%{opacity:.5;transform:translate(-3px,4px)}
}
@keyframes twinkle{0%,100%{opacity:.85}50%{opacity:.45}}

/* orbiting moth silhouettes */
.orbit{position:absolute;left:50%;top:46%;width:0;height:0}
.orbit-a{animation:orbit 13s linear infinite}
.orbit-b{animation:orbit 21s linear infinite reverse;top:42%}
@keyframes orbit{
  from{transform:rotate(0deg) translateX(118px) rotate(0deg)}
  to{transform:rotate(360deg) translateX(118px) rotate(-360deg)}
}
.flyer{width:54px;height:auto;transform:translate(-50%,-50%)}
.flyer path,.flyer ellipse{fill:#08090c}
.flyer .fant{fill:none;stroke:#08090c;stroke-width:2.5;stroke-linecap:round}
.fw{transform-box:fill-box}
.fw-l{transform-origin:96% 30%;animation:flapL .9s ease-in-out infinite}
.fw-r{transform-origin:4% 30%;animation:flapR .9s ease-in-out infinite}
@keyframes flapL{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-16deg)}}
@keyframes flapR{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(16deg)}}

/* readout strip */
.readout-row{
  position:relative;z-index:2;
  border-top:1px solid var(--line);
  padding-top:1.2rem;padding-bottom:2.4rem;
  display:flex;gap:2rem;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
}
.readout{display:flex;gap:2.6rem;flex-wrap:wrap}
.ro dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--txt-dim);margin-bottom:.3rem;
}
.ro dd{font-family:var(--mono);font-size:.95rem;color:var(--paper)}
.gauge{display:flex;gap:5px;align-items:center;padding-top:.35rem}
.gauge i{width:9px;height:9px;background:var(--line);display:block}
.gauge i.on{background:var(--lamp);box-shadow:0 0 8px rgba(240,166,62,.6)}
.ro-act{display:flex;flex-direction:column;gap:.7rem;align-items:flex-end}
.ro-note{font-size:.85rem;color:var(--txt-dim)}

.btn{
  display:inline-block;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lamp);background:transparent;
  border:1px solid var(--lamp);padding:.65rem 1.1rem;text-decoration:none;
  transition:background .25s ease,color .25s ease,transform .15s ease;
}
.btn:hover{background:var(--lamp);color:var(--night)}
.btn:active{transform:translateY(1px)}
.btn-ghost{border-color:var(--line);color:var(--txt-dim)}
.btn-ghost:hover{border-color:var(--paper);background:transparent;color:var(--paper)}

/* ------------------------------------------------------------
   Ticker
   ------------------------------------------------------------ */
.ticker{
  overflow:hidden;border-block:1px solid var(--line);
  background:var(--night-2);
}
.tick-track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .tick-track{animation-play-state:paused}
.tick-set{
  display:flex;gap:1.4rem;white-space:nowrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-dim);padding:.7rem 0;
}
.tick-sep{color:var(--lamp)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ------------------------------------------------------------
   Sections & headings
   ------------------------------------------------------------ */
.section{padding:4.5rem 0}
.page-head{padding:4.5rem 0 1rem;border-bottom:1px solid var(--line)}
.page-head h1{
  font-family:var(--display);font-weight:400;color:var(--paper);
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;margin:.4rem 0 1rem;
}
.page-sub{max-width:44rem;color:var(--txt-dim)}
.sec-head{
  display:flex;align-items:baseline;gap:1rem;
  border-bottom:3px double var(--line);
  padding-bottom:.8rem;margin-bottom:2.2rem;
}
.sec-no{font-family:var(--display);font-size:1.9rem;color:var(--lamp);line-height:1}
.sec-head h2{
  font-family:var(--display);font-weight:400;color:var(--paper);
  font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.04em;
}
.sec-rule{flex:1;height:1px;background:var(--line);align-self:center}
.sec-link{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
}
.h-sec{
  font-family:var(--display);font-weight:400;color:var(--paper);
  font-size:1.4rem;margin:2.2rem 0 1rem;letter-spacing:.04em;
}

/* ------------------------------------------------------------
   Specimen cards
   ------------------------------------------------------------ */
.spec-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.8rem;
}
.spec-card{
  --tilt:0deg;
  position:relative;display:block;text-decoration:none;
  background:linear-gradient(180deg,#efe6d0,#e4d7b7);
  color:var(--ink);
  padding:2rem 1.1rem 1.1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.4);
  transform:rotate(var(--tilt));
  transition:transform .35s ease,box-shadow .35s ease;
}
.spec-card:nth-child(odd){--tilt:-.7deg}
.spec-card:nth-child(even){--tilt:.6deg}
.spec-card:hover,.spec-card:focus-visible{
  transform:rotate(0deg) translateY(-7px);
  box-shadow:0 22px 40px rgba(0,0,0,.55),0 3px 6px rgba(0,0,0,.4);
}
.spec-card::before{ /* pin */
  content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6efe0,#8b8577 60%,#39352b);
  box-shadow:0 3px 4px rgba(0,0,0,.55);
}
.is-hidden{display:none}
.fam{
  position:absolute;top:10px;left:10px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(36,31,22,.45);color:rgba(36,31,22,.75);
  padding:2px 6px;
}
.stamp{
  position:absolute;top:10px;right:10px;transform:rotate(7deg);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verm);border:2px solid var(--verm);padding:3px 6px;opacity:.85;
}
.stamp.st-rel{color:#3f6b52;border-color:#3f6b52}
.spec-art{
  display:flex;align-items:center;justify-content:center;
  height:150px;margin:.6rem 0 .4rem;
}
.spec-art svg{width:88%;height:auto;filter:drop-shadow(0 7px 5px rgba(30,25,15,.28))}
.spec-label{border-top:1px solid rgba(36,31,22,.35);padding-top:.6rem}
.lat{font-family:var(--display);font-style:italic;font-size:1.18rem;color:#1d1811}
.com{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#4c4433;margin-top:.15rem}
.loc{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:#6d6least} /* placeholder replaced below */
.loc{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:#6d6350;margin-top:.35rem}

/* moth palettes per species */
.moth .wf{fill:var(--wing);stroke:rgba(20,17,12,.35);stroke-width:.75}
.moth .wh{fill:var(--wing2);stroke:rgba(20,17,12,.3);stroke-width:.75}
.moth .wb,.moth .hd{fill:var(--bodyc)}
.moth .ant{fill:none;stroke:var(--bodyc);stroke-width:1.6;stroke-linecap:round}
.moth .we{fill:var(--spot)}
.moth .wi{fill:#171410}
.moth .wr{fill:none;stroke:#efe6d3;stroke-width:1.6}
.moth .dot{fill:#efe6d2}
.moth .dot.dim{fill:rgba(239,230,210,.5)}
.moth .band{fill:none;stroke:var(--verm);stroke-width:4.5}
.moth .slash{fill:none;stroke:var(--spot);stroke-width:4;stroke-linecap:round}
.moth .fasc{fill:none;stroke:var(--fasc,#2c2a24);stroke-width:1.8}

.sp-pavonia{--wing:#7d6b4a;--wing2:#6a5a40;--bodyc:#4a3c2a;--spot:#c46a2b}
.sp-aglia{--wing:#a3762f;--wing2:#8a6327;--bodyc:#51401f;--spot:#d3722c}
.sp-populi{--wing:#8a8272;--wing2:#a99f8b;--bodyc:#5f5747;--spot:#8a8272}
.sp-elpenor{--wing:#5d6b46;--wing2:#b25d8a;--bodyc:#3e4630;--spot:#e08fb0}
.sp-tyria{--wing:#3d3f47;--wing2:#4a4c55;--bodyc:#2f2f36;--spot:#c8442c}
.sp-miniata{--wing:#c25e6a;--wing2:#b5545f;--bodyc:#4c3b3b;--spot:#efe6d2}
.sp-siterata{--wing:#b9ab8e;--wing2:#a89a7d;--bodyc:#7a6c52;--fasc:#39342a}
.sp-quercus{--wing:#9a713f;--wing2:#8a6234;--bodyc:#5e4426;--spot:#efe6d2}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.filter-btn{
  cursor:pointer;background:transparent;color:var(--txt-dim);
  border:1px solid var(--line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.55rem .95rem;transition:all .25s ease;
}
.filter-btn:hover{color:var(--paper);border-color:var(--paper)}
.filter-btn[aria-pressed="true"]{background:var(--lamp);border-color:var(--lamp);color:var(--night)}
.filter-note{color:var(--txt-dim);font-size:.7rem;letter-spacing:.14em;margin-bottom:2rem}

/* ------------------------------------------------------------
   Plate & figures
   ------------------------------------------------------------ */
.plate{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#12141b,#0e1016);
  padding:2rem;margin-top:.5rem;
}
.plate-svg,.plan-svg{width:100%;height:auto}
.plate figcaption,.plate-sec figcaption{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-dim);margin-top:1.2rem;
}
.plate .moth .wf,.plate .wf{fill:#7d6b4a;stroke:rgba(239,230,210,.25)}
.plate .wh{fill:#6a5a40;stroke:rgba(239,230,210,.2)}
.plate .wb,.plate .hd{fill:#4a3c2a}
.plate .ant{fill:none;stroke:#4a3c2a;stroke-width:1.6}
.plate .we{fill:#c46a2b}.plate .wi{fill:#171410}
.plate .wr{fill:none;stroke:#efe6d3;stroke-width:1.4}
.plate-notes line{stroke:#7a7466;stroke-width:1;stroke-dasharray:2 4}
.plate-notes text,.plan-t text{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;fill:#cfc8b6;
}
.plan-sheet{fill:rgba(236,226,204,.1);stroke:#8f8a77;stroke-width:1.5}
.plan-lamp{fill:var(--lamp)}
.plan-lamp-ring{fill:none;stroke:rgba(240,166,62,.4);stroke-dasharray:3 4}
.plan-box{fill:#2a2417;stroke:#8f8a77}
.plan-post{fill:#8f8a77}
.plan-fly{fill:none;stroke:rgba(214,206,182,.35);stroke-dasharray:3 6;stroke-width:1.2}

/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */
.table-wrap{overflow-x:auto}
.ledger-table{width:100%;border-collapse:collapse;font-size:.92rem}
.ledger-table th{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-dim);text-align:left;font-weight:400;
  border-bottom:1px solid var(--paper ? rgba(214,206,182,.35) : var(--line));
  border-bottom:1px solid rgba(214,206,182,.35);
  padding:.7rem .8rem;
}
.ledger-table td{
  border-bottom:1px solid var(--line-soft);padding:.7rem .8rem;color:var(--txt);
}
.ledger-table em{color:var(--paper)}
.ledger-table .num{font-family:var(--mono);color:var(--lamp)}
.app-table td:last-child{color:var(--sage)}
.drawer-sec,.plate-sec,.table-sec{border-top:1px solid var(--line-soft)}

/* ------------------------------------------------------------
   Field notes — sticky two-column
   ------------------------------------------------------------ */
.notes-grid{display:grid;grid-template-columns:300px 1fr;gap:2.6rem;align-items:start}
.notes-aside{position:sticky;top:5.2rem;display:flex;flex-direction:column;gap:1.2rem}
.aside-card{border:1px solid var(--line);background:var(--night-2);padding:1.2rem 1.2rem 1rem}
.aside-h{
  font-family:var(--display);font-weight:400;color:var(--paper);
  font-size:1.15rem;margin-bottom:.8rem;letter-spacing:.05em;
}
.totals div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.4rem 0;border-bottom:1px dashed var(--line);
}
.totals div:last-child{border-bottom:none}
.totals dt{color:var(--txt-dim);font-size:.9rem}
.totals dd{color:var(--lamp)}
.moon{width:64px;margin:.2rem auto .6rem}
.moon-lit{fill:#e8dfc8}
.moon-shade{fill:var(--night-2)}
.moon-note{text-align:center;font-size:.64rem;letter-spacing:.12em;color:var(--txt-dim);text-transform:uppercase}
.aside-note{font-size:.8rem;color:var(--txt-dim);font-style:italic}

.chart-wrap{border:1px solid var(--line);background:var(--night-2);padding:1.2rem}
.chart-cap{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-dim);margin-bottom:.9rem;
}
.chart{display:flex;align-items:flex-end;gap:6px;height:150px}
.bar{
  flex:1;position:relative;cursor:default;
  background:linear-gradient(180deg,var(--lamp),#8a5a1c);
  transition:filter .2s ease;
}
.bar:hover,.bar:focus{filter:brightness(1.3)}
.bar:hover::after,.bar:focus::after{
  content:attr(data-v);
  position:absolute;bottom:100%;left:50%;transform:translate(-50%,-4px);
  font-family:var(--mono);font-size:.66rem;color:var(--lamp-hot);
}
.bar:nth-child(1){height:28px}.bar:nth-child(2){height:39px}
.bar:nth-child(3){height:21px}.bar:nth-child(4){height:51px}
.bar:nth-child(5){height:74px}.bar:nth-child(6){height:47px}
.bar:nth-child(7){height:81px}.bar:nth-child(8){height:142px}
.bar:nth-child(9){height:96px}.bar:nth-child(10){height:64px}
.bar:nth-child(11){height:33px}.bar:nth-child(12){height:25px}

.entries{display:flex;flex-direction:column}
.entry{
  position:relative;padding:0 0 2.6rem 2rem;
  border-left:1px solid var(--line);
}
.entry::before{
  content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;
  background:var(--night);border:2px solid var(--lamp);transform:rotate(45deg);
}
.entry-h{margin-bottom:.8rem}
.e-date{font-family:var(--display);font-size:1.3rem;color:var(--paper)}
.e-meta{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-dim);margin:.2rem 0 .6rem}
.entry h3{
  font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--lamp);
  letter-spacing:.02em;
}
.entry p+p{margin-top:.7rem}
.e-tally{
  margin-top:1rem;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage);border-top:1px dashed var(--line);padding-top:.6rem;
}

/* index teasers */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.teaser{
  border:1px solid var(--line);background:var(--night-2);
  padding:1.4rem 1.4rem 1.2rem;position:relative;
  transition:transform .3s ease,border-color .3s ease;
}
.teaser:hover{transform:translateY(-5px);border-color:rgba(240,166,62,.5)}
.teaser h3{font-family:var(--display);font-weight:400;color:var(--paper);font-size:1.25rem;margin:.4rem 0 .6rem}
.teaser p{font-size:.94rem;color:var(--txt)}

.practice{padding-top:1rem}
.practice blockquote{
  border-block:3px double var(--line);
  padding:2.6rem 1rem;text-align:center;
}
.practice blockquote p{
  font-family:var(--display);font-style:italic;color:var(--paper);
  font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.4;max-width:40rem;margin:0 auto;
}
.practice footer{
  margin-top:1.2rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--txt-dim);
}

/* ------------------------------------------------------------
   About page
   ------------------------------------------------------------ */
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
.prose h2{
  font-family:var(--display);font-weight:400;color:var(--paper);
  font-size:1.7rem;margin-bottom:1rem;letter-spacing:.03em;
}
.prose p+p{margin-top:1rem}
.prose>p:first-of-type::first-letter{
  font-family:var(--display);float:left;
  font-size:3.6rem;line-height:.85;padding:.35rem .6rem 0 0;color:var(--lamp);
}
.method{list-style:none;counter-reset:mv;display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.method li{border:1px solid var(--line);background:var(--night-2);padding:1.4rem;counter-increment:mv;position:relative}
.method li::before{
  content:counter(mv,upper-roman) ".";
  font-family:var(--display);font-size:1.6rem;color:var(--lamp);display:block;margin-bottom:.4rem;
}
.method h3{font-family:var(--display);font-weight:400;color:var(--paper);font-size:1.15rem;margin-bottom:.4rem}
.method p{font-size:.92rem;color:var(--txt-dim)}

.rules{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-bottom:3rem}
.rules li{display:flex;gap:1.2rem;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:1rem}
.rule-no{color:var(--verm);font-size:.8rem;letter-spacing:.2em}
.rules p{color:var(--txt)}

.timeline{list-style:none;border-left:1px solid var(--line);padding-left:1.6rem}
.timeline li{position:relative;padding:.6rem 0 1.2rem}
.timeline li::before{
  content:"";position:absolute;left:calc(-1.6rem - 5px);top:1.15rem;
  width:9px;height:9px;border:2px solid var(--lamp);background:var(--night);transform:rotate(45deg);
}
.timeline .mono{color:var(--lamp);font-size:.78rem;letter-spacing:.2em;margin-right:.8rem}
.timeline p{display:inline}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.foot{border-top:3px double var(--line);margin-top:2rem}
.foot-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;
  padding-top:2.2rem;padding-bottom:2.2rem;
}
.foot-brand{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.foot-note{font-size:.85rem;color:var(--txt-dim)}
.foot-nav{justify-content:center}
.foot-col{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-dim);line-height:2;text-align:right;
}

/* ------------------------------------------------------------
   404 — the lost specimen
   ------------------------------------------------------------ */
.lost{position:relative;overflow:hidden;padding:6rem 0 7rem;text-align:center}
.lost-path{position:absolute;inset:0;width:100%;height:100%;opacity:.8;pointer-events:none}
.fp{fill:none;stroke:rgba(214,206,182,.28);stroke-width:1.4;stroke-dasharray:4 8;animation:dash 26s linear infinite}
@keyframes dash{to{stroke-dashoffset:-720}}
.lost-moth{fill:#0a0b0e;stroke:#0a0b0e;transform:translate(310px,110px);animation:drift 14s ease-in-out infinite}
.lm-a{fill:none;stroke-width:1.6}
@keyframes drift{
  0%,100%{transform:translate(310px,110px) rotate(-8deg)}
  50%{transform:translate(340px,86px) rotate(10deg)}
}
.lost-inner{position:relative;z-index:2}
.lost-card{
  display:inline-block;max-width:560px;text-align:left;
  background:linear-gradient(180deg,#efe6d0,#e4d7b7);color:var(--ink);
  padding:3rem 2.6rem 2.4rem;transform:rotate(-1deg);
  box-shadow:0 24px 50px rgba(0,0,0,.6);
  position:relative;
}
.lost-card::before{
  content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6efe0,#8b8577 60%,#39352b);
  box-shadow:0 3px 4px rgba(0,0,0,.55);
}
.lost-no{
  font-family:var(--display);font-size:5.4rem;line-height:1;color:var(--verm);
  letter-spacing:.04em;
}
.lost-card h1{
  font-family:var(--display);font-weight:400;font-size:1.9rem;margin:.4rem 0 1rem;
  letter-spacing:.03em;text-transform:uppercase;
}
.lost-body{font-size:.98rem;color:#3a3327}
.lost-log{
  margin:1.4rem 0 1.6rem;font-size:.62rem;letter-spacing:.2em;color:#6d6350;
  border-top:1px solid rgba(36,31,22,.3);padding-top:1rem;
}
.lost-act{display:flex;gap:.8rem;flex-wrap:wrap}
.lost .btn{color:var(--verm);border-color:var(--verm)}
.lost .btn:hover{background:var(--verm);color:#efe6d0}
.lost .btn-ghost{color:#4c4433;border-color:rgba(36,31,22,.4)}
.lost .btn-ghost:hover{background:transparent;color:#1d1811;border-color:#1d1811}

/* ------------------------------------------------------------
   Reveal-on-scroll (JS-gated) & stagger
   ------------------------------------------------------------ */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="2"]{transition-delay:.12s}
.js .reveal[data-d="3"]{transition-delay:.24s}
.js .reveal[data-d="4"]{transition-delay:.36s}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width:920px){
  .trap-grid{grid-template-columns:1fr}
  .scene{min-height:320px;order:-1}
  .notes-grid{grid-template-columns:1fr}
  .notes-aside{position:static}
  .teaser-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .method{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;text-align:center;gap:1.2rem}
  .foot-nav{justify-content:center}
  .foot-col{text-align:center}
  .mast-no{display:none}
  .ro-act{align-items:flex-start}
}
@media (max-width:520px){
  .readout{gap:1.4rem}
  .sec-head{flex-wrap:wrap}
  .sec-rule{display:none}
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .tick-track{animation:none;transform:none}
  .orbit-a,.orbit-b{animation:none;transform:none}
  .fw-l,.fw-r{animation:none}
  .js .reveal{opacity:1;transform:none}
}