/* ══════════════════════════════════════════════════════════════════════════════
   THE ARCHITECT'S SEAL v2 · universal decoder band · LUCID ESTATE
   SSOT: ~/LUCID/design/components/lucid-seal.css → mirrored to every repo's assets/
   by design/tools/lucid-stamp.mjs. NEVER hand-edit a mirrored copy — edit this file
   and re-run the stamper (same discipline as lucid-track.js).

   A struck seal, not a strip: machined bed + corner rivets + reticle brackets +
   raked sheen, three engraved zones (mark & bridge · THE READING, debossed & hero ·
   the film & CTA), a coat-of-arms trinity sigil, and an estate baseline.

   PARAMETERISED — per host, set ONE class on .as:
     .as--exca   excalibur.no · green   (also the neutral default on hub surfaces)
     .as--oval   ovaltable.no · gold
     .as--matter atoms.no     · purple
   Optional modifier: .as--lite  → hub decoder surfaces (drops the rail + the film
   block; zones collapse to two automatically — no markup surgery required).

   NEVER-HIDE: the whole seal renders with zero JS (the countdown ships a static,
   correct-at-stamp value that lucid-release.js overwrites); reduced-motion stills
   every clock. The checksum is READ from window.BRIDGE_CHECKSUM, never typed.
   ══════════════════════════════════════════════════════════════════════════════ */

.as{
  --sa:var(--lc-exca,#19ff6b);--sa-rgb:25,255,107;              /* host blade accent */
  --exca:var(--lc-exca,#19ff6b);--exca-rgb:25,255,107;
  --gold:var(--lc-oval,#e7b73f);--gold-rgb:231,183,63;
  --matt:var(--lc-trinity-matter,#a855f7);--matt-rgb:168,85,247;
  --hub:var(--lc-free,#22d3ee);--hub-rgb:34,211,238;
  --txt:var(--lc-txt,#eef2ee);--hedge:var(--lc-hedge,#8fb09c);
  --ink-dim:var(--lc-inst-ink-dim,#8fb09c);   /* instrument-surface ink tier (synced canon) */
  --fd:var(--lc-font-display,'Orbitron',sans-serif);
  --fm:var(--lc-font-data,'IBM Plex Mono',monospace);
  --fb:var(--lc-font-body,'Inter',sans-serif);
  position:relative;color-scheme:dark;box-sizing:border-box;
  font-family:var(--fb);color:var(--txt);width:100%;
  /* THE SEAL SIZES ITSELF OFF ITS CONTAINER, NOT THE VIEWPORT.
     It ships into hosts of wildly different widths — the flagship gives it ~1180px, an
     atoms element room ~694px, an excalibur lens page ~700px (.wrap is max-width:720px).
     A viewport media query would keep the 3-zone row at 1280px viewport even when the
     seal only has 694px to live in, squeezing zone 3 until the nowrap CTA overflows.
     The @container rules below fire off the seal's OWN width, so it stacks correctly in
     a narrow host. The @media rules are kept as a belt-and-braces fallback: both resolve
     to the same stacked layout, so they can never disagree. */
  container-type:inline-size;
  container-name:seal;
  /* THE SEAL BREATHES ON BOTH SIDES.
     It shipped with a top margin only, so the .ig capture → Seal seam had a 56px gap
     while the Seal → Footer seam sat flush at 0 — the three bands read as two, and the
     seal looked welded onto the floor. Same clamp above and below: the Seal is an
     object resting on the floor, not part of it. (JJ, 25 Jul 2026.) */
  margin:clamp(28px,5vw,56px) auto;
  max-width:1180px;
  padding-left:clamp(12px,3vw,24px);padding-right:clamp(12px,3vw,24px);
  text-align:left;
}
.as.as--oval{--sa:var(--lc-oval,#e7b73f);--sa-rgb:231,183,63;}
.as.as--matter{--sa:var(--lc-trinity-matter,#a855f7);--sa-rgb:168,85,247;}
.as *{box-sizing:border-box;}
.as p{margin:0;}

/* ── THE PLATE · struck into the page ── */
.as-plate{position:relative;overflow:hidden;border-radius:var(--r-lg,9px);
  border:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(130% 96% at 50% -24%,rgba(var(--sa-rgb),.09),transparent 62%),
    linear-gradient(180deg,#0f1218 0%,#0b0d12 52%,#08090d 100%);
  box-shadow:
    0 26px 64px rgba(0,0,0,.62),
    0 2px 0 rgba(255,255,255,.025),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.7),
    inset 0 0 90px rgba(var(--sa-rgb),.035);}
/* trinity through-line — the estate's spine, always green→gold→purple */
.as-ribbon{position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;z-index:4;
  background:linear-gradient(90deg,var(--exca),var(--gold) 50%,var(--matt));opacity:.8;
  box-shadow:0 0 14px rgba(var(--sa-rgb),.35);}
/* hairline lattice + guilloché — density without noise */
.as-lattice{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 9px);
  mask-image:radial-gradient(105% 78% at 50% 0%,#000,transparent 82%);
  -webkit-mask-image:radial-gradient(105% 78% at 50% 0%,#000,transparent 82%);}
/* raked sheen — light falling across machined metal */
.as-sheen{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(104deg,transparent 18%,rgba(255,255,255,.045) 42%,rgba(255,255,255,.012) 52%,transparent 68%);}
/* corner rivets + reticle brackets */
.as-rivet{position:absolute;z-index:3;width:9px;height:9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,#79818e,#252932 60%,#0b0d11);
  box-shadow:0 1px 1px rgba(255,255,255,.1),inset 0 -1px 1.5px rgba(0,0,0,.75);}
.as-rivet.r1{top:13px;left:13px;} .as-rivet.r2{top:13px;right:13px;}
.as-rivet.r3{bottom:13px;left:13px;} .as-rivet.r4{bottom:13px;right:13px;}
.as-bracket{position:absolute;z-index:3;width:16px;height:16px;border:0 solid rgba(var(--sa-rgb),.5);pointer-events:none;}
.as-bracket.b1{top:7px;left:7px;border-top-width:1px;border-left-width:1px;}
.as-bracket.b2{top:7px;right:7px;border-top-width:1px;border-right-width:1px;}
.as-bracket.b3{bottom:7px;left:7px;border-bottom-width:1px;border-left-width:1px;}
.as-bracket.b4{bottom:7px;right:7px;border-bottom-width:1px;border-right-width:1px;}

/* ── optional THIS PAGE ribbon — engraved channel (reading + sibling-blade cross-link) ── */
.as-rail{position:relative;z-index:2;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 30px;min-height:44px;
  border-bottom:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.035),inset 0 8px 14px -10px rgba(0,0,0,.8);
  background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(255,255,255,.012));
  font-family:var(--fm);font-size:10.5px;font-weight:500;letter-spacing:1.6px;
  transition:background .25s ease;}
.as-rail:hover{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(var(--hub-rgb),.055));}
.as-rail:focus-visible{outline:2px solid var(--sa);outline-offset:-3px;}
.as-rail .k{color:rgba(238,242,238,.42);text-transform:uppercase;}
.as-rail .v-e{color:var(--matt);font-weight:700;}
.as-rail .v-s{color:var(--gold);font-weight:700;}
.as-rail .v-k{color:#ecd9a4;}
.as-rail .dot{color:rgba(238,242,238,.22);}
/* the sibling-blade link — exactly ONE renders, chosen by the host class */
.as-rail .go{display:none;margin-left:auto;color:var(--hub);font-weight:700;white-space:nowrap;
  text-decoration:none;align-items:center;gap:6px;min-height:44px;transition:color .2s ease;}
.as--exca .go-oval,.as--oval .go-matter,.as--matter .go-exca{display:inline-flex;}
.as-rail .go b{color:var(--gold);font-weight:700;letter-spacing:1.6px;}
.as--oval .go-matter b{color:var(--matt);}
.as--matter .go-exca b{color:var(--exca);}
.as-rail .go i{font-style:normal;transition:transform .28s ease;}
.as-rail .go:hover i{transform:translateX(4px);}
.as-rail .go:focus-visible{outline:2px solid var(--hub);outline-offset:3px;border-radius:var(--r-sm,4px);}

/* ── BODY · three engraved zones (also the bracket frame) ── */
.as-body{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(320px,1fr) auto;
  align-items:stretch;padding:20px 30px 18px;gap:24px;}
.as-z{display:flex;flex-direction:column;min-width:0;}
/* engraved divider — a cut, not a border */
.as-z2,.as-z3{padding-left:26px;border-left:1px solid rgba(0,0,0,.62);box-shadow:inset 1px 0 0 rgba(255,255,255,.045);}

/* ── ZONE 1 · the mark + the bridge ── */
.as-z1{align-items:center;justify-content:center;gap:13px;}
.as-sigil{width:clamp(126px,13vw,164px);aspect-ratio:1;display:block;
  filter:drop-shadow(0 0 18px rgba(var(--sa-rgb),.14));
  animation:as-crown 5.6s ease-in-out infinite;}
@keyframes as-crown{0%,100%{filter:drop-shadow(0 0 14px rgba(var(--sa-rgb),.1));}50%{filter:drop-shadow(0 0 30px rgba(var(--sa-rgb),.3));}}
.as-sigil svg{width:100%;height:100%;display:block;overflow:visible;}
.as-sg-bezel{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.4;stroke-dasharray:2 12.66;stroke-linecap:round;}
.as-sg-rim{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1;}
.as-sg-orbit{fill:none;stroke:rgba(var(--sa-rgb),.3);stroke-width:1;stroke-dasharray:1 5;
  transform-box:fill-box;transform-origin:center;animation:as-orbit 72s linear infinite;}
@keyframes as-orbit{to{transform:rotate(360deg);}}
.as-sg-edge{fill:none;stroke-width:1.15;stroke-linecap:round;opacity:.72;}
.as-sg-spoke{stroke:rgba(255,255,255,.13);stroke-width:.85;stroke-dasharray:1 4;}
.as-sg-glow{transform-box:fill-box;transform-origin:center;animation:as-breathe 6s ease-in-out infinite;}
.as-sg-glow.g2{animation-delay:2s;} .as-sg-glow.g3{animation-delay:4s;}
@keyframes as-breathe{0%,100%{opacity:.42;}50%{opacity:.92;}}
.as-sg-core{transform-box:fill-box;transform-origin:center;animation:as-conv 3.4s ease-in-out infinite;}
@keyframes as-conv{0%,100%{opacity:.55;transform:scale(.9);}50%{opacity:1;transform:scale(1.08);}}

/* the bridge seal — a milled chip, subordinate to the crown sigil */
.as-bridge{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:var(--r-pill,999px);
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(255,255,255,.02));
  border:1px solid rgba(var(--sa-rgb),.32);
  box-shadow:0 0 12px rgba(var(--sa-rgb),.09),inset 0 1px 0 rgba(255,255,255,.05),inset 0 -2px 5px rgba(0,0,0,.6);
  white-space:nowrap;}
.as-bridge .lk{font-size:11px;line-height:1;filter:saturate(.4) brightness(1.2);}
.as-bridge .lbl{font-family:var(--fm);font-size:7.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:rgba(238,242,238,.5);}
.as-bridge .sum{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:1.4px;color:var(--sa);
  text-shadow:0 0 10px rgba(var(--sa-rgb),.35);}

/* ── ZONE 2 · THE READING (hero, debossed) ── */
.as-z2{justify-content:center;gap:10px;}
.as-by{font-family:var(--fm);font-size:8.5px;font-weight:700;letter-spacing:3.4px;text-transform:uppercase;color:var(--ink-dim);opacity:.72;}
.as-studio{font-family:var(--fd);font-weight:900;font-size:clamp(17px,2.3vw,22px);letter-spacing:2.6px;color:#fff;
  text-shadow:0 0 26px rgba(var(--sa-rgb),.3),0 2px 8px rgba(0,0,0,.6);margin-top:5px;}
/* the hand behind the studio — sits tight under the signature */
.as-maker{font-family:var(--fm);font-size:9px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-dim);opacity:.62;margin-top:-8px;}
/* the debossed plate — pressed into the bed */
.as-read{margin-top:4px;padding:13px 16px 14px;border-radius:var(--r-md,6px);
  background:linear-gradient(180deg,#06070a,#0a0c11 72%);
  border:1px solid rgba(0,0,0,.66);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.04);}
.as-read-lbl{display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:7.5px;font-weight:700;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--ink-dim);opacity:.66;margin-bottom:9px;}
.as-read-lbl b{color:var(--sa);font-weight:700;text-shadow:0 0 10px rgba(var(--sa-rgb),.6);}
.as-read-lbl s{flex:1;height:1px;border:0;background:linear-gradient(90deg,rgba(255,255,255,.09),transparent);text-decoration:none;}
/* the verb — each blade names what it did to the subject (CSS-switched, exactly one shows) */
.as-verb{display:none;}
.as--exca .v-cal{display:inline;}
.as--oval .v-dec,.as--matter .v-dec{display:inline;}
/* the live-lens tag — names the blade this page reads through (host class shows exactly one) */
.as-lens-tag{display:none;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pill,999px);
  font-family:var(--fm);font-size:7px;font-weight:700;letter-spacing:1.8px;color:var(--sa);
  border:1px solid rgba(var(--sa-rgb),.42);background:rgba(0,0,0,.4);opacity:1;}
.as--exca .lt-word,.as--oval .lt-seat,.as--matter .lt-el{display:inline-flex;}

/* ── THE LENS SYSTEM · one subject, three readings ──
   Every lens ALWAYS renders (never-hide); the host blade lights its own and the other two
   sit back as context. Same seal, same subject, a different reading on every site — which is
   the estate's thesis made literal: who gets to read you? */
.as-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-family:var(--fm);font-size:clamp(12px,1.5vw,13.5px);font-weight:500;letter-spacing:.6px;}
.as-line .lens{opacity:.28;transition:none;white-space:nowrap;}
.as--exca .lens-word,.as--oval .lens-seat,.as--matter .lens-el{opacity:1;}
.as-name{font-family:var(--fd);font-weight:800;font-size:clamp(13px,1.7vw,15.5px);letter-spacing:1.4px;color:var(--sa);
  text-shadow:0 0 16px rgba(var(--sa-rgb),.38);}
.as-arrow{color:rgba(238,242,238,.3);}
.as-line .m-sum{color:var(--exca);font-weight:700;}
.as-line .m-el{color:var(--matt);font-weight:700;}
.as-line .m-seat{color:var(--gold);font-weight:700;display:inline-flex;align-items:center;gap:6px;}
.as-line .m-seat svg{width:15px;height:11px;flex:none;}
/* The separator is rendered as a trailing ::after on the PRECEDING lens, not as its own
   flex item — otherwise a wrap orphans the dot onto the next line ("· seat 7A · D Minor").
   Attached this way the dot always travels with the value it follows. The markup keeps its
   <span class="sep"> for no-CSS legibility; CSS just takes over the job. */
.as-line .sep{display:none;}
.as-line .lens:not(:last-of-type)::after{content:" \00B7";color:rgba(238,242,238,.22);font-weight:400;}
/* the payoff line — stated once in full, centred beneath the reading */
.as-becomes{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px;
  font-family:var(--fm);font-size:8px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--ink-dim);opacity:.62;}
.as-becomes b{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:1.8px;color:var(--matt);opacity:1;
  text-shadow:0 0 14px rgba(var(--matt-rgb),.42);}
.as-becomes s{flex:1;max-width:38px;height:1px;border:0;text-decoration:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12));}
.as-becomes s:last-child{background:linear-gradient(90deg,rgba(255,255,255,.12),transparent);}
.as-hedge{margin:0;font-family:var(--fb);font-size:var(--fs-3,.72rem);font-style:italic;line-height:1.55;color:var(--hedge);}
/* baseline hedge — struck red, matching the hero stamp (JJDREAMSS is the only white ink) */
.as-hedge-base{color:var(--lc-clash,#f87171);opacity:.9;}
/* the load-bearing estate hedge, struck across the plate like a stamp — ONE line, centred, mono, clash red */
.as-hedge-hero{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:5px;
  font-family:var(--fm);font-style:normal;font-size:clamp(8.5px,1.05vw,10.5px);font-weight:700;
  letter-spacing:1.9px;text-transform:uppercase;color:var(--lc-clash,#f87171);opacity:.92;text-align:center;
  white-space:nowrap;}
.as-hedge-hero s{flex:1;max-width:54px;height:1px;border:0;text-decoration:none;
  background:linear-gradient(90deg,transparent,rgba(248,113,113,.45));}
.as-hedge-hero s:last-child{background:linear-gradient(90deg,rgba(248,113,113,.45),transparent);}

/* ── ZONE 3 · the film + the CTA ── */
.as-z3{align-items:flex-end;justify-content:center;gap:11px;text-align:right;min-width:0;}
.as-film{text-decoration:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.as-film-t{font-family:var(--fd);font-weight:800;font-size:clamp(12px,1.6vw,14.5px);letter-spacing:1.4px;color:var(--gold);
  text-shadow:0 0 16px rgba(var(--gold-rgb),.35);white-space:nowrap;}
.as-film-t em{font-style:normal;color:var(--hub);text-shadow:0 0 16px rgba(var(--hub-rgb),.5);}
.as-film-t i{font-style:normal;color:var(--sa);display:inline-block;transition:transform .28s ease;}
.as-film:hover .as-film-t i{transform:translateX(4px);}
/* the release chip — THREE states stacked in ONE grid cell (provably zero layout shift):
   before "1 OCT 2026 · N DAYS" · release day "PREMIERES TODAY →" · after "OUT NOW →".
   CSS shows .rc-before by default, so a no-JS render is correct until release day;
   lucid-release.js flips the chip by adding .rel-today / .rel-after. */
.as-rstack{display:grid;}
.as-rstack .rc{grid-area:1/1;white-space:nowrap;visibility:hidden;text-align:left;}
.as-rstack .rc-before{visibility:visible;}
.as-clock.rel-today .rc-before,.as-clock.rel-after .rc-before{visibility:hidden;}
.as-clock.rel-today .rc-today,.as-clock.rel-after .rc-after{visibility:visible;}
/* OUT NOW / PREMIERES TODAY read as a struck badge — same 1px border, so no size change */
.as-clock.rel-today,.as-clock.rel-after{border-color:rgba(var(--gold-rgb),.6);
  background:rgba(var(--gold-rgb),.08);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 16px rgba(var(--gold-rgb),.2);}
.as-clock.rel-today .rc-today,.as-clock.rel-after .rc-after{color:var(--gold);font-weight:700;}
.as-clock{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:var(--r-sm,4px);
  background:rgba(0,0,0,.42);border:1px solid rgba(var(--gold-rgb),.28);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
  font-family:var(--fm);font-size:9.5px;font-weight:700;letter-spacing:1.5px;color:rgba(238,242,238,.62);white-space:nowrap;}
.as-clock b{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(var(--gold-rgb),.45);
  display:inline-block;min-width:18px;text-align:right;}
.as-clock i{width:5px;height:5px;border-radius:50%;background:var(--gold);font-style:normal;flex:none;
  box-shadow:0 0 8px rgba(var(--gold-rgb),.8);animation:as-lamp 2.2s ease-in-out infinite;}
@keyframes as-lamp{0%,100%{opacity:1;}50%{opacity:.3;}}
/* the CTA — a struck key: ONE line, the hub's own action (the film promo sits above it) */
.as-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;max-width:100%;white-space:nowrap;
  text-decoration:none;border-radius:var(--r-md,6px);
  font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:2.4px;color:var(--gold);
  background:linear-gradient(180deg,rgba(var(--sa-rgb),.14),rgba(var(--sa-rgb),.04) 55%,rgba(0,0,0,.35));
  border:1px solid rgba(var(--sa-rgb),.5);
  box-shadow:0 0 20px rgba(var(--sa-rgb),.14),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 6px rgba(0,0,0,.5);
  transition:box-shadow .3s ease,transform .14s ease,color .25s ease;}
/* "DECODE ANYTHING" rides gold — the estate's invitation ink; the chrome stays host-accent */
.as-cta i{font-style:normal;color:var(--hub);transition:transform .28s ease;}
.as-cta:hover{color:#fff;box-shadow:0 0 34px rgba(var(--sa-rgb),.34),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 6px rgba(0,0,0,.5);}
.as-cta:hover i{transform:translateX(4px);}
.as-cta:active{transform:translateY(1px);box-shadow:0 0 14px rgba(var(--sa-rgb),.2),inset 0 2px 7px rgba(0,0,0,.65);}
.as-cta:focus-visible{outline:2px solid var(--sa);outline-offset:3px;}

/* ── BASELINE · estate line + the hedge ── */
.as-base{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;
  padding:10px 30px;border-top:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.12));}
/* the estate line never breaks up — it wraps as ONE unit so atoms.no stays with its siblings */
.as-estate{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-family:var(--fm);font-size:8.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:rgba(238,242,238,.44);}
.as-estate b{color:rgba(238,242,238,.7);font-weight:700;letter-spacing:2.2px;}
.as-estate a{color:rgba(var(--hub-rgb),.8);text-decoration:none;transition:color .2s ease;}
.as-estate a:hover{color:var(--hub);}
.as-estate .dot{color:rgba(238,242,238,.2);}
/* NOTE: the Seal deliberately carries NO version serial. The FOOTER's chip
   (assets/lucid-version.js → .ff-ver) is the estate's single version marker on every
   surface, index included. Do not reintroduce a seal serial here. */
.as-base .as-hedge{margin-left:auto;}

/* ── .as--lite · HUB DECODER SURFACES ──
   Zone 3 is dropped: on /frequency the DECODE ANYTHING key would be a self-link, and
   the surface carries its own film references. The body grid collapses to two zones
   automatically — no markup surgery, no new CSS.
   DEVIATION FROM THE v2 SPEC (§3c), deliberate: the spec also dropped the rail here.
   The rail duplicates nothing on a hub surface and it is pure internal-linking value
   — which is the entire point of X1 — so it stays. */
.as--lite .as-z3{display:none;}
.as--lite .as-body{grid-template-columns:auto minmax(0,1fr);}

/* ── .as--nofilm · /film ──
   The film page already IS the film, with its own four-unit release clock. Drop only
   the film promo; the DECODE ANYTHING key stays, because /film is exactly where a
   viewer should be handed the instrument. */
.as--nofilm .as-film{display:none;}
.as--nofilm .as-z3{justify-content:center;}

/* ── MOBILE ≤849 · the 3-zone row needs ~820px; below that it stacks, still struck ── */
@media (max-width:849px){
  .as-body{grid-template-columns:1fr;padding:22px 18px;gap:20px;}
  .as--lite .as-body{grid-template-columns:1fr;}
  .as-z2,.as-z3{padding-left:0;border-left:0;box-shadow:none;
    padding-top:20px;border-top:1px solid rgba(0,0,0,.62);}
  /* zone 1 runs slimmer on phones so the signature rises */
  .as-z1{flex-direction:row;justify-content:flex-start;gap:14px;}
  .as-z2{align-items:flex-start;}
  .as-z3{align-items:stretch;text-align:left;}
  .as-film{align-items:flex-start;}
  .as-cta{width:100%;min-height:52px;padding:0 14px;letter-spacing:2px;font-size:10.5px;}
  .as-hedge-hero{white-space:normal;letter-spacing:1.4px;}
  .as-hedge-hero s{display:none;}
  /* the reading + the sibling link each hold ONE line, clear of the phone's home indicator */
  .as-rail{padding:11px 18px;flex-wrap:wrap;row-gap:7px;
    font-size:8.8px;letter-spacing:.9px;gap:6px;padding-right:58px;}
  .as-rail .k,.as-rail .v-e,.as-rail .v-s,.as-rail .v-k,.as-rail .dot{white-space:nowrap;}
  .as-rail .go{margin-left:0;flex:1 1 100%;white-space:nowrap;font-size:8.6px;letter-spacing:.8px;}
  .as--exca .go-oval,.as--oval .go-matter,.as--matter .go-exca{display:flex;}
  .as-base{padding:12px 18px;}
  .as-base .as-hedge{margin-left:0;}
  /* keep the red hedge clear of the phone's home indicator */
  .as-hedge-base{align-self:flex-start;margin-right:auto;padding-right:64px;}
  /* the estate line fits ONE line at 375 — domains keep their .no, tracking + gaps compress */
  .as-estate{flex:1 1 100%;flex-wrap:nowrap;gap:5px;font-size:7.4px;letter-spacing:.7px;}
  .as-estate b{letter-spacing:1px;}
  .as-estate a{white-space:nowrap;}
  .as-bracket{display:none;}
}
@media (max-width:400px){
  .as-z1{flex-direction:row;align-items:center;gap:11px;}
  .as-sigil{width:96px;}
  .as-bridge{padding:5px 8px;gap:6px;}
  .as-bridge .sum{font-size:10px;}
  .as-line{gap:7px;}
  .as-estate{font-size:6.9px;letter-spacing:.4px;gap:4px;}
  .as-hedge-base{padding-right:56px;}
  .as-rail{font-size:8.2px;letter-spacing:.5px;gap:5px;padding-right:52px;}
  .as-rail .go{font-size:8px;letter-spacing:.5px;}
}
/* ── CONTAINER QUERIES · generated — DO NOT HAND-EDIT ──────────────────────────────
   Rule bodies byte-identical to the @media blocks above, keyed off the SEAL's own
   width rather than the viewport. The seal lives in hosts from ~694px (an atoms
   element room, an excalibur lens page) to 1180px (the flagship), so a viewport
   query would hold the 3-zone row at a 1280px viewport even when the seal only has
   694px — squeezing zone 3 until the nowrap CTA overflows onto the reading plate.
   Regenerate with: node design/tools/gen-container-queries.mjs */
@container seal (max-width:849px){
  .as-body{grid-template-columns:1fr;padding:22px 18px;gap:20px;}
  .as--lite .as-body{grid-template-columns:1fr;}
  .as-z2,.as-z3{padding-left:0;border-left:0;box-shadow:none;
    padding-top:20px;border-top:1px solid rgba(0,0,0,.62);}
  /* zone 1 runs slimmer on phones so the signature rises */
  .as-z1{flex-direction:row;justify-content:flex-start;gap:14px;}
  .as-z2{align-items:flex-start;}
  .as-z3{align-items:stretch;text-align:left;}
  .as-film{align-items:flex-start;}
  .as-cta{width:100%;min-height:52px;padding:0 14px;letter-spacing:2px;font-size:10.5px;}
  .as-hedge-hero{white-space:normal;letter-spacing:1.4px;}
  .as-hedge-hero s{display:none;}
  /* the reading + the sibling link each hold ONE line, clear of the phone's home indicator */
  .as-rail{padding:11px 18px;flex-wrap:wrap;row-gap:7px;
    font-size:8.8px;letter-spacing:.9px;gap:6px;padding-right:58px;}
  .as-rail .k,.as-rail .v-e,.as-rail .v-s,.as-rail .v-k,.as-rail .dot{white-space:nowrap;}
  .as-rail .go{margin-left:0;flex:1 1 100%;white-space:nowrap;font-size:8.6px;letter-spacing:.8px;}
  .as--exca .go-oval,.as--oval .go-matter,.as--matter .go-exca{display:flex;}
  .as-base{padding:12px 18px;}
  .as-base .as-hedge{margin-left:0;}
  /* keep the red hedge clear of the phone's home indicator */
  .as-hedge-base{align-self:flex-start;margin-right:auto;padding-right:64px;}
  /* the estate line fits ONE line at 375 — domains keep their .no, tracking + gaps compress */
  .as-estate{flex:1 1 100%;flex-wrap:nowrap;gap:5px;font-size:7.4px;letter-spacing:.7px;}
  .as-estate b{letter-spacing:1px;}
  .as-estate a{white-space:nowrap;}
  .as-bracket{display:none;}
}
@container seal (max-width:400px){
  .as-z1{flex-direction:row;align-items:center;gap:11px;}
  .as-sigil{width:96px;}
  .as-bridge{padding:5px 8px;gap:6px;}
  .as-bridge .sum{font-size:10px;}
  .as-line{gap:7px;}
  .as-estate{font-size:6.9px;letter-spacing:.4px;gap:4px;}
  .as-hedge-base{padding-right:56px;}
  .as-rail{font-size:8.2px;letter-spacing:.5px;gap:5px;padding-right:52px;}
  .as-rail .go{font-size:8px;letter-spacing:.5px;}
}
/* ── END GENERATED CONTAINER QUERIES ── */



@media (prefers-reduced-motion:reduce){
  .as-sg-orbit,.as-sg-glow,.as-sg-core,.as-clock i,.as-sigil{animation:none !important;}
  .as-sg-glow{opacity:.7;} .as-sg-core{opacity:.9;}
  .as-cta,.as-cta i,.as-film-t i,.as-rail{transition:none !important;}
  .as-cta:active{transform:none;}
}
/* ══ THE MIDDLE TIER · 600–849px container ═══════════════════════════════════
   The seal has three real habitats, not two:
     ≥850px  the flagship (~1180px)          → 3 zones in a row
     600–849 the blades (685–750px)          → ← THIS TIER
     <600px  phones                          → full stack
   Without this, a 700px blade page fell straight through to the phone layout,
   which left zone 1 (sigil + bridge chip, ~280px of content) sitting in a ~660px
   row — 57–61% dead space. That reads as a bug because it IS one: the stacked
   layout was drawn for 375px, where the same row is only 19% empty.
   Here the seal goes 2-up — the mark beside the reading, with the film and the
   CTA on their own full-width rule beneath. Fills the band, keeps the CTA out of
   the reading plate, and needs no markup change.
   Declared AFTER the generated block so it wins on source order. ══════════════ */
@container seal (min-width:600px) and (max-width:849px){
  .as-body{grid-template-columns:auto minmax(0,1fr);padding:22px 26px 20px;gap:22px;}
  /* zone 1 goes back to a column — sigil over bridge, as at full width */
  .as-z1{flex-direction:column;justify-content:center;gap:13px;}
  /* zone 2 recovers its engraved cut instead of a top border */
  .as-z2{padding-left:24px;padding-top:0;border-top:0;
    border-left:1px solid rgba(0,0,0,.62);box-shadow:inset 1px 0 0 rgba(255,255,255,.045);}
  .as-hedge-hero{white-space:nowrap;letter-spacing:1.7px;}
  .as-hedge-hero s{display:block;}
  /* zone 3 spans the full width beneath: film left, the struck key right */
  .as-z3{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;
    gap:18px;text-align:left;padding-left:0;border-left:0;box-shadow:none;
    padding-top:18px;border-top:1px solid rgba(0,0,0,.62);}
  .as-film{align-items:flex-start;}
  .as-cta{width:auto;min-height:48px;padding:0 24px;font-size:11px;letter-spacing:2.4px;}
  /* .as--lite has no zone 3, so it is simply the 2-up row */
  .as--lite .as-body{grid-template-columns:auto minmax(0,1fr);}
}
/* below 600 the row is genuinely narrow — push the bridge to the far edge so the
   space between the mark and the seal reads as deliberate, not as a gap */
@container seal (max-width:599px){
  .as-z1{justify-content:space-between;}
}

/* the seal is screen chrome — it must not print as a dark slab */
@media print{
  .as{display:none !important;}
}