/* specimen 04 · Calderhithe LOOM · panel-system.css
   NOT the A4 page system. This specimen is a presentation: every page is a full-bleed
   colour field that fills the viewport and bleeds into the next one. The geometry law
   changes accordingly, and so does the gate (see gate_panels.mjs):

     A4 specimen           this specimen
     fixed 210x297 box     min-height:100svh, width:100%
     overflow is clipped   the panel GROWS, and a panel taller than the viewport fails
     dead tail is a defect a field of colour with one line in it is the POINT
     ---                   the bleed must be continuous: --out(n) == --bg(n+1)
     ---                   every text colour must clear 4.5:1 on its own field

   The palette is the content: twelve corridor colours, walked in order.            */

:root{
  /* ── the twelve threads · this IS the brand system, not decoration ── */
  --t01:#3B1DFF;  /* indigo    */
  --t02:#0047FF;  /* blue      */
  --t03:#0090FF;  /* azure     */
  --t04:#00A9C0;  /* cyan      */
  --t05:#00A264;  /* emerald   */
  --t06:#8CE000;  /* lime      */
  --t07:#E3DB00;  /* citron    */
  --t08:#FFC400;  /* amber     */
  --t09:#FF8A00;  /* orange    */
  --t10:#FF4A1C;  /* vermilion */
  --t11:#FF2D7E;  /* magenta   */
  --t12:#A62BFF;  /* violet    */
  --ink:#0B0B14;
  --chalk:#FFFFFF;

  --display:'Syne',-apple-system,'Segoe UI Variable','Segoe UI',Helvetica,sans-serif;
  --lyric:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;font-family:var(--display);color:var(--chalk);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── the rail · the nav IS a line map ───────────────────────────────── */
.rail{position:fixed;z-index:60;left:0;right:0;top:0;height:4px;display:flex;
  mix-blend-mode:normal;pointer-events:none}
.rail i{flex:1 1 0;height:100%;opacity:.28;transition:opacity .35s ease,transform .35s ease;
  transform-origin:top;display:block}
.rail i.on{opacity:1;transform:scaleY(2.5)}
.mark{position:fixed;z-index:60;right:clamp(12px,2.4vw,26px);bottom:clamp(12px,2.4vw,26px);
  font-family:var(--mono);font-size:clamp(9px,1.05vw,11px);letter-spacing:.04em;
  opacity:.62;pointer-events:none;font-weight:400}

/* ── the panel ──────────────────────────────────────────────────────── */
.doc{scroll-snap-type:y proximity}
.pg{position:relative;width:100%;min-height:100svh;overflow:hidden;scroll-snap-align:start;
  background:var(--bg);color:var(--fg);display:flex;flex-direction:column;
  justify-content:center;isolation:isolate;
  padding:clamp(26px,6vh,74px) 0 clamp(74px,13vh,150px)}
.in{width:min(1240px,86vw);margin-inline:auto;position:relative;z-index:2}
.pg.tall{justify-content:flex-start;padding-top:clamp(60px,12vh,120px)}

/* ── the bleed · the next colour arrives BEFORE the next panel does ──
   Five shapes so the descent never repeats twice running. Each is filled with
   --out, which the gate asserts equals the next panel's --bg.                  */
.pg::after{content:"";position:absolute;left:0;right:0;bottom:0;background:var(--out);
  z-index:1;pointer-events:none}
.pg.b-arc::after   {height:clamp(58px,11vh,132px);border-radius:52% 52% 0 0/100% 100% 0 0}
.pg.b-diag::after  {height:clamp(72px,14vh,168px);clip-path:polygon(0 100%,100% 0,100% 100%)}
.pg.b-diagL::after {height:clamp(72px,14vh,168px);clip-path:polygon(0 0,100% 100%,0 100%)}
.pg.b-flat::after  {height:clamp(40px,7.5vh,86px)}
.pg.b-none::after  {display:none}
/* b-cols keeps the base ::after background so the gate can read the PAINTED colour;
   a background-image here would leave backgroundColor transparent and the bleed check blind. */
.pg.b-cols::after{height:clamp(70px,13vh,150px);
  clip-path:polygon(0 100%,0 62%,8.33% 62%,8.33% 30%,16.66% 30%,16.66% 74%,25% 74%,25% 12%,
    33.3% 12%,33.3% 55%,41.6% 55%,41.6% 84%,50% 84%,50% 22%,58.3% 22%,58.3% 66%,
    66.6% 66%,66.6% 40%,75% 40%,75% 90%,83.3% 90%,83.3% 48%,91.6% 48%,91.6% 8%,100% 8%,100% 100%)}

/* ── type · the scale is fluid, which is the whole mobile story ─────── */
.mega{font-size:clamp(3.4rem,15.5vw,13.5rem);line-height:.84;letter-spacing:-.045em;
  font-weight:800;margin:0;text-wrap:balance}
.big{font-size:clamp(2.1rem,7.6vw,5.6rem);line-height:.94;letter-spacing:-.032em;
  font-weight:800;margin:0;text-wrap:balance}
.mid{font-size:clamp(1.45rem,4.2vw,2.9rem);line-height:1.08;letter-spacing:-.022em;
  font-weight:700;margin:0;text-wrap:balance}
.say{font-size:clamp(1rem,2.15vw,1.5rem);line-height:1.42;font-weight:400;margin:0;
  max-width:44ch;letter-spacing:-.006em}
.say.wide{max-width:62ch}
.lyric{font-family:var(--lyric);font-style:italic;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.9rem,6.4vw,4.6rem);line-height:1.02;margin:0;text-wrap:balance}
.lab{font-family:var(--mono);font-size:clamp(.6rem,1.02vw,.76rem);font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;margin:0;opacity:1}
.num{font-family:var(--mono);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(3rem,12.5vw,10.5rem);line-height:.86;margin:0}
.stack{display:flex;flex-direction:column;gap:clamp(14px,3vh,30px)}
.stack.s{gap:clamp(8px,1.6vh,16px)}
.dim{opacity:.88}
.hair{height:1px;background:currentColor;opacity:.3;border:0;margin:0;width:100%}

/* ── grids ──────────────────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4.4vw,64px);align-items:start}
.two.lean{grid-template-columns:1.15fr .85fr}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,42px)}
@media(max-width:820px){
  .two,.two.lean,.three{grid-template-columns:1fr;gap:clamp(18px,4vh,34px)}
}

/* ── the swatch wall · twelve threads, the one panel that is pure system ── */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,1.1vw,12px)}
.wall div{aspect-ratio:1/.66;border-radius:3px;padding:clamp(7px,1.1vw,14px);
  display:flex;flex-direction:column;justify-content:space-between;
  font-family:var(--mono);font-size:clamp(.56rem,1vw,.74rem);line-height:1.2}
.wall b{font-family:var(--display);font-size:clamp(1.1rem,2.9vw,2rem);font-weight:800;
  letter-spacing:-.03em;line-height:1}
@media(max-width:560px){.wall{grid-template-columns:repeat(3,1fr)}}

/* ── the thread · colour + numeral + name, never colour alone ───────── */
.thread{display:flex;align-items:stretch;gap:0;border-radius:4px;overflow:hidden;
  font-family:var(--mono);min-height:clamp(50px,8.4vh,84px)}
.thread .no{display:flex;align-items:center;justify-content:center;padding:0 clamp(12px,2vw,24px);
  font-weight:700;font-size:clamp(1.2rem,3.4vw,2.3rem);letter-spacing:-.04em}
.thread .to{display:flex;align-items:center;padding:0 clamp(12px,2vw,22px);flex:1;
  font-family:var(--display);font-weight:700;letter-spacing:-.018em;
  font-size:clamp(.86rem,2.2vw,1.35rem)}

/* ── the blind · a destination display, set as one ──────────────────── */
.blind{background:var(--ink);border-radius:5px;padding:clamp(14px,2.6vw,30px) clamp(16px,3vw,36px);
  display:flex;align-items:center;gap:clamp(14px,2.6vw,32px)}
.blind .rt{font-family:var(--mono);font-weight:700;color:#FFC400;
  font-size:clamp(1.8rem,6.4vw,4.6rem);letter-spacing:-.05em;line-height:1}
.blind .dst{font-weight:800;color:#FFF7DE;letter-spacing:-.028em;line-height:.98;
  font-size:clamp(1.3rem,4.4vw,3.2rem)}

/* ── the ledger · the one place numbers are allowed to be a table ───── */
table{width:100%;border-collapse:collapse;font-family:var(--mono);
  font-size:clamp(.76rem,1.18vw,1.18rem)}
th{text-align:left;font-weight:400;padding:0 0 10px;opacity:1;
  border-bottom:1.5px solid currentColor;font-size:clamp(.6rem,1.02vw,.82rem);
  letter-spacing:.08em;text-transform:uppercase}
td{padding:clamp(12px,2.4vh,26px) 0;border-bottom:1px solid currentColor;vertical-align:top;
  line-height:1.3}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Two prose columns collide too, and it only shows once the table compresses: at 390px
   the phasing table read "2027Identity, four corridors". Gutter every adjacent pair; the
   numeric rule below still wins on the money column by its own specificity. */
td+td,th+th{padding-left:clamp(10px,2vw,28px)}
td:not(.n)+td.n,th:not(.n)+th.n{padding-left:clamp(14px,3vw,40px)}
tr.tot td{border-bottom:0;border-top:2.5px solid currentColor;font-weight:700;
  padding-top:clamp(11px,1.8vh,18px)}
td b{font-family:var(--display);font-weight:800;letter-spacing:-.02em}

/* ── before / after · the voice panel ───────────────────────────────── */
.card{border:1.5px solid currentColor;border-radius:5px;padding:clamp(18px,2.9vw,40px)}
.two.eq{align-items:stretch}
.two.eq .card{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,20px)}
.card.solid{border:0}
.quote{font-size:clamp(1.02rem,1.72vw,1.6rem);line-height:1.4;margin:0;letter-spacing:-.01em}
.strike{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.86}

.legacy{display:flex;flex-wrap:wrap;gap:clamp(8px,1.3vw,16px)}
.legacy span{font-family:var(--mono);border-radius:3px;color:#FFF;line-height:1;
  display:inline-flex;align-items:center}

/* ── the colophon ───────────────────────────────────────────────────── */
.colo{font-family:var(--mono);font-size:clamp(.62rem,1.08vw,.8rem);line-height:1.65;
  opacity:.88;max-width:58ch;font-weight:400}

/* ==== ENZWA SPECIMEN · PHONE TYPE FLOOR · start ============================
   Every size these documents carry below 11px, raised. 11px is where a phone stops
   being readable at arm's length. Sizes stay in pt because the documents are
   authored in pt (1pt = 1.333px at 96dpi, so 8.8pt = 11.7px).

   The list is not invented: it is the union of every rule under 8.25pt found by
   parsing all five stylesheets, plus every selector the phone gate measured under
   11px in the rendered page. Some are inline declarations on the element, which no
   class selector reaches and no ordinary rule outranks: that is what the attribute
   selectors and the !important are for.

   ⛔ Subscripts are deliberately excluded. A subscript is meant to be smaller, and
   inflating CO₂ to 11px would be worse typography, not better.

   Regenerate with _admin/apply_mobile_view.py, never by hand. */
@media screen and (max-width:760px){
  .pg [style*="font-size:6"],.pg [style*="font-size: 6"],
  .pg [style*="font-size:7"],.pg [style*="font-size: 7"],
  .pg [style*="font-size:8.0"],.pg [style*="font-size:8.1"],
  .pg [style*="font-size:8.2"],.pg [style*="font-size:8pt"]{font-size:8.8pt!important}

  .pg h4,.pg .note,.pg .tag,.pg .crit,.pg .eyebrow,.pg .fig,.pg .kv,.pg .kv b,
  .pg .stat .k,.pg .led .cd,.pg .led .pp,.pg .led .tn,.pg ol.steps li::before,
  .pg .c,.pg .l,.pg .v,.pg .k,.pg .mono,.pg .r,.pg .m,.pg .lab,.pg .sep,.pg .rl,
  .pg .pp,.pg .cd,.pg .tn,.pg .s,.pg .lbl,.pg .cap,
  .pg .legend,.pg .wall div,.pg .wall b,.pg .colo,.pg .colo b{font-size:8.8pt!important}

  .pg th,.pg td,.pg th.n,.pg td.n,.pg dt,.pg dd{font-size:9.2pt!important}
  .pg b,.pg strong,.pg em,.pg i,.pg s,.pg u{font-size:inherit}
  /* ⚠ NOT a blanket `p` rule. `.pg p` outranks `.sm`, so a blanket rule promoted
     every small-print paragraph to body size, and on Ravensmoor page 34 three
     figures in one box grew until they overlapped each other. Small print stays
     small print; it just stops being under the floor. */
  .pg li{font-size:11.4pt}
  .pg p.sm,.pg .sm{font-size:9.4pt}

  /* The two presentations size their labels with an inline clamp() whose middle
     term is in vw: at 390px the vw term collapses and the clamp settles on its
     minimum, which is why a .55rem label renders at 8.8px on a phone and nowhere
     else. Only clamps that START below .7rem are raised, so display sizes that
     also use clamp() are untouched. */
  .pg [style*="clamp(.5"],.pg [style*="clamp(0.5"],
  .pg [style*="clamp(.6"],.pg [style*="clamp(0.6"]{font-size:.72rem!important}
}
/* ==== ENZWA SPECIMEN · PHONE TYPE FLOOR · end ============================== */
/* ==== ENZWA SPECIMEN · PHONE GRID COLLAPSE · start ========================
   Generated from this stylesheet by _admin/apply_mobile_view.py. Every selector
   below lays out more than one column on paper; none of them fits two columns
   in a 348px phone page. ⛔ Do not hand-edit: re-run the applier. */
@media screen and (max-width:760px){
  .pg .three,
  .pg .two,
  .pg .two.lean,
  .pg .wall{grid-template-columns:1fr!important}
}
/* ==== ENZWA SPECIMEN · PHONE GRID COLLAPSE · end ========================== */