/* THE NOCTUARY — UV-lamp violet · moth-wing taupe · pin silver */

:root{
  --night:#0b0a12;
  --night-2:#12101d;
  --night-3:#181527;
  --uv:#9b8cff;
  --uv-bright:#c4baff;
  --uv-dim:#5c50a8;
  --taupe:#a89a8a;
  --taupe-light:#cfc4b4;
  --silver:#c9ccd4;
  --ink:#e8e5f2;
  --ink-dim:#9a94ae;
  --hair:rgba(201,204,212,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --label:"Spectral SC", serif;
  --grot:"Archivo", system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--night);
  color:var(--ink);
  font-family:var(--grot);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--uv);color:var(--night)}
a{color:inherit}
:focus-visible{outline:2px solid var(--uv);outline-offset:3px;border-radius:2px}

.kicker{
  font-family:var(--label);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:lowercase;
  color:var(--uv);
}

h1,h2,h3{font-weight:200;letter-spacing:-.015em}
h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08;margin:.9rem 0 1.4rem}
h3{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:300;margin-bottom:.55rem}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  background:linear-gradient(to bottom,rgba(11,10,18,.82),rgba(11,10,18,0));
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--label);font-size:.9rem;letter-spacing:.28em;
  text-decoration:none;color:var(--ink);
}
.brand-mark{width:20px;height:20px;color:var(--uv)}
.site-nav{display:flex;gap:clamp(1rem,3vw,2.2rem)}
.site-nav a{
  font-family:var(--label);font-size:.72rem;letter-spacing:.24em;
  text-decoration:none;color:var(--ink-dim);
  padding:.3rem 0;border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.site-nav a:hover{color:var(--uv-bright);border-color:var(--uv-dim)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
#night{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(11,10,18,.88) 0%,rgba(11,10,18,.62) 34%,rgba(11,10,18,.05) 62%,rgba(11,10,18,0) 75%),
    linear-gradient(to top,rgba(11,10,18,.9) 0%,rgba(11,10,18,0) 30%);
}
.hero-inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(1.2rem,5vw,4.5rem);
  max-width:min(46rem,70%);
}
.hero h1{
  font-size:clamp(2.6rem,6.4vw,5.4rem);
  line-height:1.02;letter-spacing:-.025em;
  margin:1.1rem 0 1.5rem;
  text-wrap:balance;
}
.lede{max-width:34rem;color:var(--taupe-light);font-size:clamp(.95rem,1.25vw,1.08rem)}
.count-line{color:var(--uv-bright)}
.lure-hint{
  margin-top:2.2rem;max-width:30rem;
  font-family:var(--label);font-size:.7rem;letter-spacing:.18em;
  color:var(--ink-dim);
  padding-left:1rem;border-left:1px solid var(--uv-dim);
}
.hero-foot{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:flex;gap:2.5rem;flex-wrap:wrap;
  padding:1.1rem clamp(1.2rem,5vw,4.5rem);
  font-family:var(--label);font-size:.66rem;letter-spacing:.26em;color:var(--ink-dim);
}
.hf-item{white-space:nowrap}

/* ---------- charter ---------- */
.charter{padding:clamp(5rem,12vw,10rem) clamp(1.2rem,5vw,4.5rem);border-top:1px solid var(--hair)}
.charter-grid{
  max-width:72rem;margin:0 auto;
  display:grid;grid-template-columns:1fr 3fr;gap:clamp(1.5rem,5vw,5rem);
}
.charter-num{
  font-family:var(--label);font-size:clamp(2.4rem,5vw,4rem);
  color:var(--uv-dim);line-height:1;
}
.charter p{max-width:38rem;color:var(--taupe-light);margin-bottom:1.2rem}

/* ---------- specimens ---------- */
.specimens{
  padding:clamp(5rem,12vw,9rem) clamp(1.2rem,5vw,4.5rem);
  background:var(--night-2);
  border-top:1px solid var(--hair);
}
.sec-head{max-width:72rem;margin:0 auto clamp(2.5rem,6vw,4.5rem)}
.sec-lede{max-width:36rem;color:var(--taupe-light)}

.plate-grid{
  max-width:72rem;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,1.6vw,1.4rem);
}
.plate{
  position:relative;
  background:linear-gradient(160deg,var(--night-3),#141122 70%);
  border:1px solid var(--hair);
  border-radius:3px;
  padding:1.3rem 1.1rem 1.15rem;
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.plate:hover{transform:translateY(-4px);border-color:rgba(155,140,255,.35)}
.plate:hover .moth-svg{filter:drop-shadow(0 0 14px rgba(155,140,255,.35))}
.plate-fig{display:grid;place-items:center;height:130px;margin-bottom:1rem}
.moth-svg{width:86%;height:auto;transition:filter .5s var(--ease)}
.pin{position:absolute;top:.6rem;left:50%;transform:translateX(-50%);width:2px;height:16px;
  background:linear-gradient(var(--silver),rgba(201,204,212,.15));border-radius:1px}
.pin::before{content:"";position:absolute;top:-4px;left:-2px;width:6px;height:6px;border-radius:50%;
  background:var(--silver)}
.plate-label{border-top:1px solid var(--hair);padding-top:.75rem}
.sp-binomial{font-family:var(--label);font-size:.82rem;letter-spacing:.06em;color:var(--ink);font-style:italic}
.sp-common{font-size:.78rem;color:var(--taupe);margin:.15rem 0 .5rem}
.sp-meta{display:flex;justify-content:space-between;gap:.5rem;
  font-family:var(--label);font-size:.6rem;letter-spacing:.14em;color:var(--ink-dim)}

.board{max-width:72rem;margin:clamp(2.5rem,6vw,4.5rem) auto 0}
.board-media,.board img{width:100%;height:auto;display:block;border-radius:3px;border:1px solid var(--hair);
  filter:saturate(.9)}
.board figcaption{
  margin-top:.8rem;font-family:var(--label);font-size:.68rem;letter-spacing:.16em;
  color:var(--ink-dim);max-width:44rem;line-height:1.9;
}
.fig-no{color:var(--uv)}

/* ---------- notes ---------- */
.notes{padding:clamp(5rem,12vw,9rem) clamp(1.2rem,5vw,4.5rem);border-top:1px solid var(--hair)}
.note-list{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,3rem)}
.note{border-top:1px solid var(--hair);padding-top:1.3rem}
.note-date{font-family:var(--label);font-size:.64rem;letter-spacing:.2em;color:var(--uv);margin-bottom:.9rem}
.note p{color:var(--taupe-light);font-size:.92rem}
.note em{color:var(--ink);font-style:italic}

/* ---------- visiting ---------- */
.visiting{
  padding:clamp(5rem,12vw,9rem) clamp(1.2rem,5vw,4.5rem);
  background:var(--night-2);border-top:1px solid var(--hair);
}
.visit-grid{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:2fr 3fr;gap:clamp(2rem,5vw,5rem)}
.visit-info p{color:var(--taupe-light);max-width:30rem}
.visit-facts{margin-top:2rem;display:grid;gap:.9rem}
.visit-facts div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;
  border-top:1px solid var(--hair);padding-top:.9rem}
.visit-facts dt{font-family:var(--label);font-size:.66rem;letter-spacing:.22em;color:var(--uv);padding-top:.2rem}
.visit-facts dd{font-size:.92rem;color:var(--taupe-light)}

.tiers{list-style:none;display:grid;gap:1rem}
.tier{
  border:1px solid var(--hair);border-radius:3px;
  padding:1.4rem 1.6rem;
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.55rem 1.5rem;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.tier:hover{border-color:rgba(155,140,255,.4);background:rgba(155,140,255,.04);transform:translateX(4px)}
.tier-featured{border-color:rgba(155,140,255,.35);background:rgba(155,140,255,.05)}
.tier-name{font-family:var(--label);font-size:.85rem;letter-spacing:.2em;color:var(--ink)}
.tier-price{grid-column:2;grid-row:1;font-weight:200;font-size:1.5rem;color:var(--uv-bright);text-align:right;white-space:nowrap}
.tier-price span{font-size:.72rem;color:var(--ink-dim);letter-spacing:.08em}
.tier-desc{grid-column:1 / -1;color:var(--taupe-light);font-size:.9rem;max-width:34rem}

/* ---------- footer ---------- */
.site-foot{
  padding:3rem clamp(1.2rem,5vw,4.5rem) 3.5rem;
  border-top:1px solid var(--hair);
  font-family:var(--label);font-size:.68rem;letter-spacing:.2em;
  color:var(--ink-dim);line-height:2.2;
}
.site-foot .credit a{color:var(--taupe);text-decoration:none;border-bottom:1px solid var(--hair);
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.site-foot .credit a:hover{color:var(--uv-bright);border-color:var(--uv-dim)}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .plate:hover{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .plate-grid{grid-template-columns:repeat(2,1fr)}
  .note-list{grid-template-columns:1fr}
  .visit-grid{grid-template-columns:1fr}
  .charter-grid{grid-template-columns:1fr}
  .hero-inner{max-width:min(46rem,88%)}
}
@media (max-width:560px){
  .plate-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .plate{padding:1rem .8rem .9rem}
  .plate-fig{height:96px}
  .sp-meta{flex-direction:column;gap:.15rem}
  .hero-inner{max-width:100%}
  .hero-foot{gap:1.1rem}
  .site-nav{display:none}
  .hero-scrim{background:
    linear-gradient(to top,rgba(11,10,18,.94) 0%,rgba(11,10,18,.35) 55%,rgba(11,10,18,.15) 100%)}
}