/* ==========================================================================
   MUNIN v2 «NIGHT QUARRY» — the shared system for every huginai.com landing page.
   Direction: DESIGN.md §v2. Usage notes for page authors: docs/ux-2026-11-06/LANDING-V2.md
   Law: no raw hex below the token block; radius 0; no box-shadow; slate = the
   only light (MEASURED), oxide = CLOSED/dead pigment; no red/green anywhere.
   ========================================================================== */

:root{
  /* ground → plate → well (elevation runs upward) */
  --basalt:#161511;   /* page */
  --granite:#211F1B;  /* raised plate */
  --incise:#0F0E0C;   /* well, input, chart bed */
  --pressed:#2A2823;  /* hover plate */
  --seam:#2C2A25;     /* row hairline */
  --face:#34322C;     /* plate edge */
  --face-lit:#4A4740; /* raised control edge, hover rule */
  /* inks */
  --birch:#EFEDE3;    /* primary 15.6:1 */
  --chalk:#C9C4B4;    /* secondary / provisional 10.5:1 */
  --text-3:#A9A496;
  --text-4:#959083;
  /* semantics — never "good/bad" */
  --slate:#6F9DBF;  --slate-lit:#9CC6E4;   /* MEASURED / live  — fill / ink */
  --oxide:#A63C22;  --oxide-lit:#E58A6C;   /* CLOSED / dead    — fill / ink */
  --slate-glow:rgba(111,157,191,.16);
  --oxide-glow:rgba(166,60,34,.18);
  --lit-edge:rgba(239,237,227,.06);

  /* motion */
  --t-cut:640ms; --t-stylus:1400ms; --t-micro:160ms; --t-band:400ms;
  --ease-chisel:cubic-bezier(.16,1,.3,1);
  --ease-cut:cubic-bezier(.45,.05,.25,1);   /* the chisel cut: slow in, slow out, so the wipe reads as a cut (06.11 integration) */
  --ease-band:cubic-bezier(.4,0,.2,1);

  /* type */
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --mono:'Overpass Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fs-display:clamp(2.6rem,1.4rem + 4vw,6rem);        /* 42 → 96 */
  --fs-title:clamp(1.75rem,1.3rem + 1.6vw,2.6rem);      /* 28 → 42 */
  --fs-figure:clamp(2.6rem,1.9rem + 2.6vw,4.5rem);      /* 42 → 72 */
  --fs-figure-s:clamp(1.9rem,1.5rem + 1.4vw,2.75rem);   /* 30 → 44 */
  --fs-body:1.0625rem;                                  /* 17 */
  --fs-small:.9375rem;                                  /* 15 */
  --fs-data:.8125rem;                                   /* 13 */
  --fs-plate:.75rem;                                    /* 12 */

  /* space (8pt) */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem; --s8:8rem;
  --gutter:clamp(16px,4vw,56px);
  --measure:66ch;
  --wrap:1360px;

  /* granite grain on the ground only (inline SVG feTurbulence, ~3.5%) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .93 0 0 0 0 .89 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.065'/%3E%3C/svg%3E");
}
@media (min-width:2000px){ :root{ --wrap:1680px; --fs-body:1.125rem; --fs-display:7rem; --fs-title:3rem; --fs-figure:5rem; } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--basalt)}
body{
  background-color:var(--basalt);
  background-image:var(--grain);
  color:var(--birch);
  font-family:var(--serif);
  font-size:var(--fs-body);
  line-height:1.6;
  font-variation-settings:'opsz' 16;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--slate);color:var(--incise)}
:focus-visible{outline:2px solid var(--slate-lit);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:100;background:var(--birch);color:var(--incise);
  padding:.5rem 1rem;font-family:var(--mono);font-size:var(--fs-data)}
.skip:focus{top:8px}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:var(--s4)}
.c-4{grid-column:span 4}.c-5{grid-column:span 5}.c-6{grid-column:span 6}.c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-12{grid-column:1/-1}
.c-off-1{grid-column-start:2}
@media (max-width:960px){ .grid>[class*="c-"]{grid-column:1/-1} }
.section{padding:clamp(4rem,3rem + 5vw,9rem) 0;position:relative}
.section+.section{border-top:1px solid var(--seam)}
.stack>*+*{margin-top:var(--s2)}

/* ---------- type ---------- */
.display{
  font-family:var(--serif);font-weight:300;letter-spacing:0;
  font-size:var(--fs-display);line-height:1.02;
  font-variation-settings:'opsz' 72;text-wrap:balance;max-width:18ch;
}
.display em{font-style:normal;color:var(--chalk)}
.title,h2.title{
  font-weight:400;letter-spacing:0;font-size:var(--fs-title);line-height:1.12;
  font-variation-settings:'opsz' 60;text-wrap:balance;max-width:22ch;
}
h3.sub-title,.sub-title{font-weight:500;font-size:1.125rem;line-height:1.3;font-variation-settings:'opsz' 20}
.lede{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.62;color:var(--chalk);max-width:var(--measure);text-wrap:pretty}
.body{color:var(--chalk);max-width:var(--measure);text-wrap:pretty}
.body+.body{margin-top:var(--s2)}
/* section plate — the inscribed label above a section */
.plate-label{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;
  font-family:var(--serif);font-variant:small-caps;font-weight:500;font-size:.9375rem;
  letter-spacing:.06em;text-transform:lowercase;color:var(--text-3);margin-bottom:var(--s3);
  font-variation-settings:'opsz' 12;
}
.plate-label::before{content:'';width:28px;height:1px;background:var(--face-lit)}
.plate-label .n{font-family:var(--mono);font-variant:normal;text-transform:none;letter-spacing:.04em;color:var(--text-4)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums slashed-zero}
.eyebrow{font-family:var(--mono);font-size:var(--fs-plate);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
/* provenance — every figure carries one */
.prov{font-family:var(--mono);font-size:var(--fs-data);line-height:1.8;color:var(--text-3);max-width:80ch}
.prov a,.body a,.lede a,.link{color:var(--birch);border-bottom:1px solid var(--face-lit);transition:border-color var(--t-micro) var(--ease-band)}
.prov a:hover,.body a:hover,.lede a:hover,.link:hover{border-bottom-color:var(--slate-lit)}
.prov-cols{columns:2 34ch;column-gap:var(--s5)}

/* ---------- figures (Overpass Mono 300, unit demoted) ---------- */
.fig{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.fig-v{font-family:var(--mono);font-weight:300;font-size:var(--fs-figure);line-height:1;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums slashed-zero;color:var(--birch);white-space:nowrap}
.fig-s .fig-v{font-size:var(--fs-figure-s)}
.fig-u{font-size:.42em;color:var(--chalk);opacity:.7;letter-spacing:0;margin-left:.3em;font-weight:400}
.fig-k{font-family:var(--mono);font-size:var(--fs-plate);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.fig-note{font-family:var(--mono);font-size:var(--fs-data);color:var(--text-3);line-height:1.6}
.fig.live .fig-v{color:var(--slate-lit)}
.fig.closed .fig-v{color:var(--oxide-lit)}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));border-top:1px solid var(--face)}
.figs>.fig{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--seam)}
.figs>.fig+.fig{padding-left:var(--s3);border-left:1px solid var(--seam)}

/* ---------- surfaces ---------- */
.plate{background:var(--granite);border:1px solid var(--face);border-top-color:var(--face-lit);position:relative}
.well{background:var(--incise);border:1px solid var(--seam);border-top-color:transparent}
.lit{position:relative;overflow:hidden}
.lit::before{content:'';position:absolute;inset:-10% -5%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 30% 40%,var(--slate-glow),transparent 62%)}
.lit>*{position:relative;z-index:1}

/* ---------- ruled rows ---------- */
.ruled{border-top:1px solid var(--face)}
.ruled>.row{border-bottom:1px solid var(--seam);transition:background var(--t-micro) var(--ease-band),border-color var(--t-micro) var(--ease-band)}
.ruled>.row:hover{background:var(--lit-edge);border-bottom-color:var(--face-lit)}
table.ruled{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums slashed-zero}
table.ruled th{font-family:var(--mono);font-size:var(--fs-plate);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);text-align:left;padding:.7rem .75rem;border-bottom:1px solid var(--face)}
table.ruled thead th{position:sticky;top:56px;background:var(--basalt)}
table.ruled td{padding:.7rem .75rem;border-bottom:1px solid var(--seam);vertical-align:top}
table.ruled td.num,table.ruled th.num{text-align:right;font-family:var(--mono)}
table.ruled tr:hover td{background:var(--lit-edge)}

/* ---------- stamps (pigment is a FILL, like a finished runestone) ---------- */
.stamp{display:inline-block;font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:.2rem .5rem;white-space:nowrap;line-height:1.5}
.stamp.closed{background:var(--oxide);color:var(--birch)}
.stamp.live{background:var(--slate);color:var(--incise)}
.stamp.paper{border:1px solid var(--face-lit);color:var(--chalk)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:44px;
  padding:.7rem 1.2rem;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--face-lit);color:var(--birch);background:transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--t-micro) var(--ease-band),color var(--t-micro) var(--ease-band),border-color var(--t-micro) var(--ease-band)}
.btn:hover{border-color:var(--birch)}
.btn .arr{transition:transform var(--t-micro) var(--ease-band)}
.btn:hover .arr{transform:translateX(3px)}
.btn-solid{background:var(--birch);color:var(--incise);border-color:var(--birch)}
.btn-solid:hover{background:var(--chalk);border-color:var(--chalk)}
.btn-s{min-height:36px;padding:.45rem .85rem;font-size:.72rem}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--basalt);border-bottom:1px solid var(--seam)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:56px;display:flex;align-items:center;gap:var(--s4)}
/* wordmark: the product name as it is written everywhere else, Huginai. Pages that still carry the
   older HUGIN<span class="m">AI</span> markup (blog posts) get the same word from ::after. */
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--serif);font-weight:500;font-size:1.25rem;line-height:1;
  letter-spacing:.005em;font-variation-settings:'opsz' 24;color:var(--birch);flex-shrink:0}
.brand img,.brand svg{width:26px;height:26px}
.brand:has(.m){font-size:0;gap:0}
.brand:has(.m)::after{content:'Huginai';font-size:1.25rem;margin-left:.55rem}
.nav-links{display:flex;gap:clamp(1rem,2vw,1.75rem);list-style:none;margin-left:auto;font-size:var(--fs-small)}
.nav-links a{color:var(--chalk);padding:.4rem 0;border-bottom:1px solid transparent;transition:color var(--t-micro) var(--ease-band),border-color var(--t-micro) var(--ease-band)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--birch);border-bottom-color:var(--face-lit)}
.nav .btn{margin-left:0}
@media (max-width:960px){ .nav-links{display:none} .nav .btn{margin-left:auto} }
@media (max-width:420px){ .nav .btn{padding:.45rem .7rem;font-size:.68rem;min-height:38px} .brand{font-size:.9rem} }

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--face);padding:var(--s6) 0 var(--s5);margin-top:0}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s4);align-items:start}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr} }
.foot-links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.foot-links a{color:var(--chalk);transition:color var(--t-micro) var(--ease-band)}
.foot-links a:hover{color:var(--birch)}
.foot-note{margin-top:var(--s2);font-family:var(--mono);font-size:.74rem;color:var(--text-3)}
.credit{margin-top:var(--s3)}
.credit a{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--text-3);font-family:var(--mono);transition:color var(--t-micro) var(--ease-band)}
.credit a:hover{color:var(--chalk)}
.credit img{height:34px;width:auto;display:block;background:var(--birch);padding:4px 7px;opacity:.92}

/* ---------- weathering (information, never decoration) ---------- */
[data-age]{transition:color var(--t-band) var(--ease-band),filter var(--t-band) var(--ease-band),opacity var(--t-band) var(--ease-band)}
.weathered .fig-v,.weathered.fig-v{color:var(--chalk);filter:contrast(.82) blur(.3px)}
.worn .fig-v,.worn.fig-v{color:var(--chalk);opacity:.4;filter:blur(.3px)}
.last-seen{display:inline-block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chalk);border:1px solid var(--face-lit);padding:.15rem .45rem}

/* ---------- motion: chisel + stylus ---------- */
/* .chisel lines are cut in left→right once on first view; gated on html.m-anim
   (set by seismo.js) so the content is plain-visible without the script.
   Traces are drawn by seismo.js with one linear sweep (--t-stylus) across all lanes. */
html.m-anim .chisel{clip-path:inset(0 100% 0 0)}
html.m-anim .chisel.in{clip-path:inset(0 0 0 0);transition:clip-path var(--t-cut) var(--ease-cut);transition-delay:calc(var(--i,0) * 70ms)}
.stylus{stroke-dasharray:var(--len,0);stroke-dashoffset:0}
.stylus.drawing{animation:stylus var(--t-stylus) linear both}
@keyframes stylus{from{stroke-dashoffset:var(--len,0)}to{stroke-dashoffset:0}}
.recut{animation:recut 220ms var(--ease-band)}
@keyframes recut{0%{opacity:1}40%{opacity:.15}100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  html.m-anim .chisel{clip-path:none}
}

/* ---------- the SEISMOGRAPH (seismo.js draws into [data-seismo]) ---------- */
.seismo{position:relative}
.seismo-bed{position:relative;background:var(--incise);border-top:1px solid var(--face);border-bottom:1px solid var(--face)}
.seismo-bed::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 70% 50%,var(--slate-glow),transparent 70%)}
.seismo svg{width:100%;height:auto;position:relative;overflow:visible;touch-action:pan-y}
.seismo .ch-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;fill:var(--chalk)}
.seismo .ch-sub{font-family:var(--mono);font-size:11px;fill:var(--text-3)}
.seismo .axis{font-family:var(--mono);font-size:11px;fill:var(--text-4)}
.seismo .zero{stroke:var(--face);stroke-width:1}
.seismo .floor{stroke:var(--oxide-lit);stroke-width:1;stroke-dasharray:5 4;opacity:.9}
.seismo .grid-v{stroke:var(--seam);stroke-width:1}
.seismo .trace{fill:none;stroke:var(--slate-lit);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.seismo .clip-mark{fill:var(--slate-lit)}
.seismo .xhair{stroke:var(--birch);stroke-width:1;opacity:.55}
.seismo .xdot{fill:var(--birch)}
.seismo .pen{stroke:var(--birch);stroke-width:1;opacity:.7}
.seismo-read{position:absolute;top:8px;pointer-events:none;background:var(--granite);border:1px solid var(--face-lit);
  font-family:var(--mono);font-size:12px;line-height:1.55;padding:.45rem .65rem;color:var(--birch);white-space:nowrap;
  font-variant-numeric:tabular-nums slashed-zero;opacity:0;transition:opacity var(--t-micro) var(--ease-band);z-index:3}
.seismo-read.on{opacity:1}
.seismo-read .t{color:var(--text-3);display:block;margin-bottom:.15rem}
.seismo-read .u{color:var(--text-3)}
.seismo-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-family:var(--mono);font-size:var(--fs-data);color:var(--text-3);padding:var(--s2) 0}
.seismo-legend i{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:.5rem;border-top:1.5px solid var(--slate-lit)}
.seismo-legend i.fl{border-top:1px dashed var(--oxide-lit)}
.seismo-legend i.z{border-top:1px solid var(--face-lit)}
.seismo-empty{padding:var(--s6) 0;font-family:var(--mono);font-size:var(--fs-data);color:var(--chalk);line-height:1.8;position:relative}
.seismo-empty p{max-width:60ch}
.seismo-empty b{display:block;color:var(--birch);font-weight:500;margin-bottom:.4rem}
.seismo.is-weathered svg .trace{stroke:var(--chalk);opacity:.7}
.seismo.is-worn svg .trace{stroke:var(--chalk);opacity:.4}
.seismo.is-worn .seismo-bed::before,.seismo.is-weathered .seismo-bed::before{opacity:.3}
.seismo-loading{height:100%;min-height:inherit;display:flex;align-items:center;padding:0 var(--gutter);font-family:var(--mono);font-size:var(--fs-data);color:var(--text-4)}

/* ---------- hero photo slot ---------- */
.hero-photo{position:relative;margin:0}
.hero-photo svg,.hero-photo img{width:100%;height:auto}
.hero-photo figcaption{margin-top:.6rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}
/* A photograph dropped in as the figure's first child takes over from the SVG engraving (which stays in the
   markup as the fallback: the img removes itself on error). Duotone = grayscale + a faint warm sepia toward
   --birch; the left, top and bottom edges dissolve into --basalt through a mask, so no rectangle shows.
   Exact markup: docs/ux-2026-11-06/LANDING-V2.md, "Hero photograph". */
.hero-photo:has(> img){isolation:isolate;overflow:hidden}
.hero-photo:has(> img) > svg{display:none}
.hero-photo > img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 45%;
  filter:grayscale(1) sepia(.18) contrast(1.06) brightness(.92);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0/.1) 30%,#000 58%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0/.1) 30%,#000 58%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 76%,transparent 100%);
  mask-composite:intersect}
.hero-photo:has(> img) figcaption{position:absolute;right:0;bottom:0;margin:0;z-index:1}
.seismo.is-empty .seismo-bed::before{opacity:0}

/* integration 06.11: a solid button keeps its ink inside prose containers */
.body a.btn-solid,.prov a.btn-solid,a.btn.btn-solid{color:var(--incise)}

/* a live unit has nothing to qualify until its figure arrives: no "— days" while pending or offline */
[data-live-state="pending"] .fig-u[data-live],[data-live-state="offline"] .fig-u[data-live],.fig-u.live-missing{display:none}