/* ==========================================================================
   SNX — The Snick System, engine v0.1
   Dual coprime grid (base × overlay) implemented as its union microgrid.
   Ratified spec: LXD-mondrian/concepts/snick-system-plan.html (2026-08-17)
   This file is the system. Skins (lxd.css, axi.css) override tokens only.
   ========================================================================== */

/* ---------- faces ---------- */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/schibsted-grotesk-400-900.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2) format('woff2')}

/* ---------- tokens ---------- */
:root{
  /* tier: paper */
  --snx-paper:#F2EFDE; --snx-paper-dim:#E5E1CB; --snx-chalk:#FBFAF1;
  --snx-white:#FFFFFF; --snx-butter:#F2EDC6;
  /* tier: structure */
  --snx-navy:#1B2A9B; --snx-navy-deep:#141F73; --snx-dusk:#46538F;
  --snx-mint:#D8ECCF; --snx-sky:#C9EBF5; --snx-ink:#131628;
  --snx-ink-60:rgba(19,22,40,.6); --snx-ink-40:rgba(19,22,40,.4); --snx-ink-18:rgba(19,22,40,.18);
  /* tier: signal — exactly one signal moment per viewport. Skins may re-point. */
  --snx-signal:#00C0EC;
  /* tier: workshop — tool chrome & AI candidates */
  --snx-work:#E97C12; --snx-ai:#A44BE0; --snx-ai-deep:#7A2FB8;
  /* type */
  --snx-grotesk:'Schibsted Grotesk',system-ui,sans-serif;
  --snx-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* scale — √φ (1.272): alternate steps are φ apart */
  --snx-s0:12px; --snx-s1:13.5px; --snx-s2:17px; --snx-s3:21.6px;
  --snx-s4:27.5px; --snx-s5:35px; --snx-s6:44.5px; --snx-s7:56.6px; --snx-s8:72px;
  /* edition: XL (default) — pair 7×5 on union 35 */
  --snx-base:7; --snx-over:5; --snx-union:35;
  --snx-sliver-a:14; --snx-sliver-b:20;
  --snx-row:64px;
  --snx-ed:'XL';
  /* motion — the snick curve */
  --snx-ease:cubic-bezier(.22,.9,.3,1.14);
  --snx-t-fast:150ms; --snx-t-move:400ms;
}
@media (max-width:1439px){:root{--snx-row:56px;--snx-ed:'L'}}
@media (max-width:1023px){:root{
  --snx-base:5; --snx-over:3; --snx-union:15;
  --snx-sliver-a:5; --snx-sliver-b:9;
  --snx-row:56px; --snx-ed:'M';
}}
@media (max-width:639px){:root{
  --snx-base:3; --snx-over:2; --snx-union:6;
  --snx-sliver-a:2; --snx-sliver-b:3;
  --snx-row:48px; --snx-ed:'S';
}}

/* ---------- base chrome ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--snx-paper); color:var(--snx-ink);
  font-family:var(--snx-grotesk); font-size:var(--snx-s2); line-height:1.55;
}
::selection{background:var(--snx-signal);color:var(--snx-ink)}
:focus-visible{outline:2px solid var(--snx-signal);outline-offset:2px}
a{color:var(--snx-navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--snx-signal)}
strong,b{font-weight:700} em{font-style:italic}
.snx-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.snx-eyebrow{font-family:var(--snx-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:12px;align-items:center}
.snx-eyebrow .dot{width:9px;height:9px;background:var(--snx-signal);flex:none}
.snx-mono{font-family:var(--snx-mono)}
.snx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   THE STAGE — a set piece on the union microgrid
   ========================================================================== */
.snx-stage{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--snx-union),1fr);
  /* rows keep the beat but may grow: type never loses to rhythm */
  grid-auto-rows:minmax(var(--snx-row),auto);
  background:var(--snx-chalk);
  border:2px solid var(--snx-ink);
  /* clip, not hidden: overflow:hidden makes the stage a scroll container,
     which hijacks children's view() timelines (found the hard way, AXI-001) */
  overflow:clip;
  container-type:inline-size;      /* 100cqw = stage width → 100cqw/union = 1 microcolumn */
}
/* open stage — no box: blocks sit directly on the paper, shadows roam free */
.snx-stage--open{border:0;background:transparent;overflow:visible}

/* Base-grid block: place with --c (start col, 1-based), --s (col span),
   --r (start row), --rs (row span). Units are BASE-grid columns.
   Per-edition placement = redefine these vars in a media query.        */
.snx-b{
  grid-column:calc((var(--c,1) - 1)*var(--snx-over) + 1)/span calc(var(--s,1)*var(--snx-over));
  grid-row:var(--r,auto)/span var(--rs,2);
  position:relative;
  background:var(--bg,var(--snx-chalk));
  min-width:0;
}
/* Overlay-grid block: same vars, units are OVERLAY-grid columns.
   Overlays overlap the tiling; give them a plane.                      */
.snx-o{
  grid-column:calc((var(--c,1) - 1)*var(--snx-base) + 1)/span calc(var(--s,1)*var(--snx-base));
  grid-row:var(--r,auto)/span var(--rs,2);
  position:relative;
  background:var(--bg,var(--snx-navy));
  min-width:0;
  z-index:6;
}
.snx-hide{display:none}

/* content padding inside a block that carries text */
.snx-pad{padding:clamp(14px,4cqw,28px)}
/* a block that carries text paints above empty color fields (plane 0 law:
   overlap is a privilege of empty blocks — type never loses) */
.snx-text{z-index:2}

/* ---------- planes ---------- */
/* plane +1 — hovers; its shadow is a block too: solid, hard, offset exactly
   one microcolumn right and ⅜ row down. */
.snx-plane1{z-index:6}
.snx-plane1::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(19,22,40,.22);
  transform:translate(calc(100cqw/var(--snx-union)),calc(var(--snx-row)*.375));
}
/* plane −1 — a window cut in the sheet; recessed content inside */
.snx-window{background:var(--snx-paper-dim);overflow:hidden;z-index:1}
.snx-window::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 12px 20px rgba(19,22,40,.38),inset 0 -5px 10px rgba(19,22,40,.16),inset 4px 0 10px rgba(19,22,40,.18);
}
.snx-recess{position:absolute;left:14%;top:16%;right:22%;bottom:20%;background:var(--snx-dusk)}
/* glass — translucent overlay; the palette is closed under multiply.
   z1 like slivers: translucent structure threads behind the text world (z2). */
.snx-glass{mix-blend-mode:multiply;opacity:.8}
.snx-o.snx-glass{z-index:1}

/* ---------- slivers (opt-in per stage) ---------- */
.snx-slivers::before,.snx-slivers::after{
  content:'';position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;
  /* z1: slivers thread OVER empty fields but BEHIND text blocks (z2) — the
     near-miss is structure, and structure never crosses out the words */
  width:calc(100%/var(--snx-union));
  background:var(--snx-signal);mix-blend-mode:multiply;opacity:.85;
}
.snx-slivers::before{left:calc(var(--snx-sliver-a)*100%/var(--snx-union))}
.snx-slivers::after{left:calc(var(--snx-sliver-b)*100%/var(--snx-union))}
/* small unions make fat "slivers" — 1/15 or 1/6 of the page is a column, not a
   sliver. Below the 7×5 editions, draw a thin bar centered on the near-miss. */
@media (max-width:1023px){
  .snx-slivers::before,.snx-slivers::after{width:9px}
  .snx-slivers::before{left:calc((var(--snx-sliver-a) + .5)*100%/var(--snx-union) - 4.5px)}
  .snx-slivers::after{left:calc((var(--snx-sliver-b) + .5)*100%/var(--snx-union) - 4.5px)}
}

/* ---------- grid reveal (opt-in) ---------- */
.snx-gridlines{
  position:absolute;inset:0;z-index:7;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--snx-ink-18) 0 1px,transparent 1px),
    linear-gradient(to right,rgba(27,42,155,.28) 0 1px,transparent 1px);
  background-size:
    calc(100%/var(--snx-base)) 100%,
    calc(100%/var(--snx-over)) 100%;
}

/* ---------- annotation voice ---------- */
.snx-note{
  position:absolute;left:5px;top:4px;z-index:8;
  font-family:var(--snx-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;pointer-events:none;color:var(--snx-ink-60);
}
.snx-note.lt{color:rgba(251,250,241,.85)}
.snx-caption{
  font-family:var(--snx-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--snx-ink-40);margin:10px 2px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.snx-caption b{color:var(--snx-ink);font-weight:600}
/* stat readout that reports the live edition */
.snx-edition-readout::after{content:var(--snx-ed)}

/* ==========================================================================
   ASSEMBLY — blocks snick into place when the stage enters the viewport.
   JS adds .snx-in to the stage; each child may set --d (delay, seconds).
   ========================================================================== */
.snx-assemble .snx-b,.snx-assemble .snx-o{
  opacity:0;transform:translate(var(--tx,0px),var(--ty,28px));
}
.snx-assemble .snx-plane1::after{opacity:0}
.snx-assemble.snx-in .snx-b,.snx-assemble.snx-in .snx-o{
  opacity:1;transform:translate(0,0);
  transition:transform var(--snx-t-move) var(--snx-ease),opacity 300ms ease;
  transition-delay:var(--d,0s);
}
.snx-assemble.snx-in .snx-plane1::after{opacity:1;transition:opacity 300ms ease;transition-delay:calc(var(--d,0s) + .25s)}
@media (prefers-reduced-motion:reduce){
  .snx-assemble .snx-b,.snx-assemble .snx-o{opacity:1;transform:none;transition:none}
  .snx-assemble .snx-plane1::after{opacity:1;transition:none}
}

/* ==========================================================================
   PROSE PASSAGE — the interstitial register
   ========================================================================== */
.snx-prose{max-width:64ch;margin:64px auto;padding:0 4px}
.snx-prose .p-eyebrow{font-family:var(--snx-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--snx-navy);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.snx-prose .p-eyebrow::after{content:'';height:1px;background:var(--snx-ink-18);flex:1}
.snx-prose h2{font-size:var(--snx-s4);font-weight:700;letter-spacing:-.01em;margin-bottom:14px;text-wrap:balance}
.snx-prose h3{font-size:var(--snx-s3);font-weight:700;margin:26px 0 10px}
.snx-prose p{margin-bottom:14px}
.snx-prose p:last-child{margin-bottom:0}
.snx-prose ul,.snx-prose ol{margin:0 0 14px 22px}
.snx-prose li{margin-bottom:8px}
.snx-keyterm{background:var(--snx-sky);padding:0 4px;font-weight:600}

/* ---------- shared page furniture ---------- */
.snx-header{padding:40px 0 24px;border-bottom:2px solid var(--snx-ink)}
.snx-h1{font-size:clamp(38px,6vw,64px);font-weight:800;letter-spacing:-.02em;line-height:1.02;margin:14px 0 12px;text-wrap:balance}
.snx-dek{font-size:clamp(17px,2vw,21px);max-width:58ch}
.snx-footer{margin-top:72px;border-top:2px solid var(--snx-ink);padding:14px 0 40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--snx-mono);font-size:10.5px;letter-spacing:.06em;color:var(--snx-ink-40)}
.snx-footer b{color:var(--snx-ink);font-weight:600}
.snx-footer a{color:inherit}
.snx-nav{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--snx-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.snx-nav a{text-decoration:none;color:var(--snx-ink)}
.snx-nav a:hover,.snx-nav a[aria-current]{color:var(--snx-ai-deep);text-decoration:underline;text-underline-offset:4px}