/* ══════════════════════════════════════════════════════════════════════════════
   amireallyfree.no · assets/machine.css · AIRF DECODER · the S3 skin, LIVE build (9 Sep 2026)
   One sheet: base (v2) + build 3 + build 4 + LIVE polish, in cascade order — later rules win by position.
   Link AFTER site.css; replaces the BEAT FOUR · THE MACHINE block there (delete that block). arrival.css follows this file.
   Colour law: base #09090F · gold #E7B73F (#F4D976 · #D4AF37 · #9A7A1F) · ink #EEF2EE · cyan #22D3EE (the ? bow · FREEDOM/FREE · "Free" in the lure · the FREEDOM home plate · <i> in a working line)
   · green #19FF6B only inside THE SUM (sweep · pin · current · numeral · tiles · caret), the EXCALIBUR door on hover and the ⚔ mark
   · purple #A855F7 only inside THE ELEMENT (glow · atoms · drift · category hairline), the MATTER door on hover and the ⚗ mark.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
   amireallyfree.no · BEAT FOUR · THE MACHINE · the S3 skin V2 (Design → CODE · 8 Sep 2026)
   Replaces the "BEAT FOUR · THE MACHINE" block of assets/site.css (or ships as assets/machine.css, linked after site.css).
   Namespace unchanged: .m-*  · every id machine.js paints into is unchanged (see airf-machine-v2.partial.html).
   Companion: arrival.css (the once-only choreography) · MACHINE_SKIN_HANDOFF_V2.md §3 (the paint contract).

   Colour law (R1 · trace): the plate is AIRF — base #09090F · gold #E7B73F (metallic #F4D976 → #E8C547 → #D4AF37 → #9a7a1f)
   · ink #EEF2EE · dim ink rgba(238,242,238,.46) · line rgba(231,183,63,.28) · cyan #22D3EE (FREEDOM/FREE word · <i> in a working line · the ? bow).
   Blade accents appear INSIDE their own dial only, ≤45% mixed over gold:
     EXCALIBUR  color-mix(in srgb,#19ff6b 40%,#e7b73f)   — the arc's sweep + pin, the ⚔ mark
     MATTER     color-mix(in srgb,#a855f7 25%,#09090f)   — the tile's radial glow; ⚗ mark = color-mix(in srgb,#a855f7 40%,#e7b73f)
     OVAL       gold                                      — the wheel is gold by nature
   Doors take the full blade accent on hover only (R17). No green/purple text anywhere else.
   The skin states no value: every number/word is painted by machine.js. New strings: TRY · HEAR THE LIVE KEY · the lure template (R11) · by letter-sum · B ring · major · A ring · minor.
   Motion budget: transform/opacity only; loops at rest = LED · caret · orbit dot · ring spin · twinkles (opacity) · ticker; reduced-motion → none.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── the two faces the skin adds · self-hosted latin cuts (Google Fonts, OFL), swap · Major Mono: the ⚗ tile's symbol + the working's micro-tiles only · Cinzel 700: the seat plate only (R3) ── */
@font-face{font-family:'Major Mono Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/major-mono-display-400.woff2) format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cinzel-700.woff2) format('woff2');}

.machine{
  --m-base:#09090f;--m-ink:#eef2ee;--m-gold:#e7b73f;--m-gold-hi:#f4d976;--m-gold-lo:#d4af37;--m-cyan:#22d3ee;
  --m-dim:rgba(238,242,238,.46);--m-hair:rgba(238,242,238,.22);--m-line:rgba(231,183,63,.28);--m-wash:rgba(231,183,63,.10);
  --m-ex:color-mix(in srgb,#19ff6b 40%,#e7b73f);--m-ma:color-mix(in srgb,#a855f7 40%,#e7b73f);--m-ma-glow:color-mix(in srgb,#a855f7 25%,#09090f);
  --m-metal:linear-gradient(180deg,#F4D976 0%,#E8C547 22%,#D4AF37 60%,#9a7a1f 100%);
  --m-fd:'Orbitron',system-ui,sans-serif;--m-fs:'Cormorant Garamond',Georgia,serif;--m-fm:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --m-fmono:'Major Mono Display',ui-monospace,monospace;--m-fplate:'Cinzel',Georgia,serif;   /* Major Mono: the tile only · Cinzel 700: the seat plate only (R3) */
  --m-ease:cubic-bezier(.2,.8,.2,1);--cut:8px;--ds:1;
  --d1:160px;--d2:160px;--d3:180px;--drow:180px;   /* Frame A (Design's pick, R2): the wheel wins the room */
  position:relative;width:min(960px,92vw);margin:6vh auto 10vh;font:400 13px/1.5 var(--m-fm);color:var(--m-ink);scroll-margin-top:4vh;
}
@media (min-width:1280px){.machine{width:min(1080px,94vw);}}            /* R10 · the centrepiece */
@media (max-width:1199px){.machine{--d1:136px;--d2:136px;--d3:152px;--drow:152px;}}
@media (max-width:1023px){.machine{--d1:96px;--d2:96px;--d3:96px;--drow:96px;}}
@media (max-width:719px){.machine{--d1:76px;--d2:76px;--d3:76px;--drow:76px;}}

/* ── the plate · two hairlines with the base chip's cut on all four corners, the milled face, grain, scanlines ── */
.m-cut{clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));}
.m-ring2{position:absolute;inset:-6px;--cut:11.5px;background:rgba(231,183,63,.09);pointer-events:none;}
.m-ring2-hole{position:absolute;inset:-5px;--cut:10.9px;background:var(--m-base);pointer-events:none;}
.m-ring{position:absolute;inset:0;background:rgba(231,183,63,.3);pointer-events:none;
  -webkit-mask:conic-gradient(from -55deg at 50% 50%,#000 var(--draw,100%),transparent 0);mask:conic-gradient(from -55deg at 50% 50%,#000 var(--draw,100%),transparent 0);}
.m-face{position:absolute;inset:1px;--cut:7.4px;background:linear-gradient(180deg,rgba(231,183,63,.04),rgba(9,9,15,0) 55%),var(--m-base);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);pointer-events:none;}
.m-grain{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);--cut:7.4px;opacity:.035;mix-blend-mode:soft-light;pointer-events:none;}
.m-scan{position:absolute;inset:1px;--cut:7.4px;overflow:hidden;pointer-events:none;}
.m-scan > i{position:absolute;left:0;right:0;top:-300px;bottom:0;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(231,183,63,.012) 2px 3px);animation:lm-scan 60s linear infinite;}
.m-inner{position:relative;}

/* ── RAIL · BASE ── */
.m-rail,.m-base{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:11px 20px;font-size:10.5px;letter-spacing:.16em;color:var(--m-dim);text-transform:uppercase;}
.m-rail{border-bottom:1px solid var(--m-line);}
.m-rail > div:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.m-base{border-top:1px solid var(--m-line);line-height:2;}
.m-rail b,.m-base b{color:var(--m-gold);font-weight:500;}
.m-led{width:5px;height:5px;border-radius:50%;background:var(--m-gold);box-shadow:0 0 6px rgba(231,183,63,.7);animation:lm-led 2.2s ease-in-out infinite;}
.m-loz{width:5px;height:5px;transform:rotate(45deg);background:var(--m-gold);flex:none;}
.m-base a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.m-base a:hover,.m-base a:focus-visible{color:var(--m-gold);border-bottom-color:var(--m-gold);}
.m-base i{font-style:italic;color:var(--m-dim);text-transform:none;letter-spacing:.04em;font-family:var(--m-fs);font-size:15px;}
/* the milled plate (the footer chip's cut) · the rail's seat plate and the bridge checksum share it */
.m-plate{display:inline-flex;align-items:center;gap:7px;min-height:22px;padding:3px 10px;vertical-align:middle;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.44));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 5px rgba(0,0,0,.5);
  font-weight:500;font-size:9.5px;letter-spacing:1.7px;line-height:1;color:var(--m-ink);white-space:nowrap;}
.m-plate s{width:4px;height:4px;flex:none;text-decoration:none;transform:rotate(45deg);background:rgba(231,183,63,.85);box-shadow:0 0 5px rgba(231,183,63,.5);}

/* ── BODY · spine left, reading right (G3: the spine is a full-height rail, its seven stations spread evenly) ── */
.m-body{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);align-items:stretch;}
.m-spine{position:relative;display:flex;flex-direction:column;justify-content:space-evenly;min-height:100%;padding:22px 8px 22px 20px;border-right:1px solid var(--m-line);overflow:hidden;}
.m-spine::before{content:'';position:absolute;left:60px;top:22px;bottom:22px;width:1px;background:rgba(231,183,63,.22);pointer-events:none;}
.m-chip{all:unset;position:relative;display:flex;align-items:baseline;cursor:pointer;padding:9px 12px 9px 8px;border-radius:2px;min-height:44px;box-sizing:border-box;
  font-family:var(--m-fd);font-weight:800;letter-spacing:.04em;line-height:1;color:var(--m-ink);transition:background .25s ease;}
.m-chip::after{content:'';position:absolute;left:37px;top:50%;width:6px;height:1px;background:rgba(231,183,63,.4);}                 /* the station tick */
.m-chip::before{content:'';position:absolute;left:37.5px;top:50%;width:5px;height:5px;margin-top:-2.5px;transform:rotate(45deg);background:var(--m-gold);box-shadow:0 0 6px rgba(231,183,63,.55);opacity:0;transition:opacity .25s ease;}   /* the lozenge */
.m-chip[aria-pressed="true"]::before,.m-q.pinned::before{opacity:1;}
.m-chip[aria-pressed="true"],.m-q.pinned{background:var(--m-wash);}
.m-chip .L{color:var(--m-gold);font-size:1.55rem;width:1.5em;flex:0 0 auto;text-align:left;}
.m-chip .R{font-size:.98rem;letter-spacing:.12em;color:var(--m-dim);transition:color .35s;}
.m-chip:hover .R,.m-chip:focus-visible .R,.m-chip[aria-pressed="true"] .R{color:var(--m-ink);}
.m-chip:focus-visible{outline:0;}                          /* one travelling indicator: the lozenge + ink text (§8.3) */
.m-q:focus-visible{outline:1px solid var(--m-gold);outline-offset:2px;}
/* the sonar on select · from the lozenge across the spine (§6.3) */
.m-sonar{position:absolute;left:40px;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;border:1px solid rgba(231,183,63,.7);opacity:0;pointer-events:none;}
.m-chip.calib .m-sonar{animation:lm-sonar .9s ease-out forwards;}
/* the ? chip · rest: the title's mark reversed (cyan bow, gold dot) + DECODE ME · hot: gold K + EY */
.m-q{text-decoration:none;}
.m-q .qm2{height:.72em;width:auto;display:inline-block;vertical-align:baseline;overflow:visible;}
.m-q .k{display:none;} .m-q.hot .qm2{display:none;} .m-q.hot .k{display:inline;}
.qm2-bow{fill:none;stroke:var(--m-cyan);stroke-width:142.5;stroke-linecap:butt;} .qm2-dot{fill:var(--m-gold);}
.m-q .R{color:var(--m-dim);font-size:.7rem;} .m-q:hover .R,.m-q:focus-visible .R{color:var(--m-ink);}
.m-q.hot .R{color:var(--m-ink);font-size:.98rem;letter-spacing:.12em;}

/* ── THE READING ── */
.m-reading{padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px;min-height:300px;min-width:0;}
.m-total{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--m-dim);min-height:calc(1.7em * 3);line-height:1.7;transition:color .3s;}
.m-total b{color:var(--m-gold);font-weight:500;} .m-total.hot{color:rgba(238,242,238,.85);}
/* the word · gold-metallic + glow (a drop-shadow on the wrapper, not text-shadow — text-shadow bleeds through clipped gradient text); FREEDOM / FREE cyan */
.m-wordbox{position:relative;min-height:1.2em;line-height:1.2;font-size:clamp(1.5rem,4vw,2.6rem);}
.m-wordwrap{position:relative;display:inline-block;filter:drop-shadow(0 0 24px rgba(231,183,63,.18));}
.m-word{position:relative;font-family:var(--m-fd);font-weight:800;letter-spacing:.06em;line-height:1.2;white-space:nowrap;
  background:linear-gradient(178deg,#F4D976 0%,#E7B73F 50%,#D4AF37 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.m-wordwrap.cyan{filter:none;} .m-wordwrap.cyan .m-word{background:none;-webkit-text-fill-color:var(--m-cyan);color:var(--m-cyan);text-shadow:0 0 24px rgba(34,211,238,.18);}
.m-bloom{position:absolute;left:-12%;top:-50%;width:124%;height:200%;border-radius:50%;background:radial-gradient(closest-side,rgba(34,211,238,.4),rgba(34,211,238,0));opacity:0;pointer-events:none;}
.m-def{font-family:var(--m-fs);font-style:italic;font-size:1.05rem;letter-spacing:.02em;color:var(--m-dim);margin-top:-6px;min-height:1.4em;line-height:1.4;}

/* ── THE INSTRUMENTS · three blades, three dialects · no boxes, light separates them ── */
.m-gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px;}
.m-gauge{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.m-dialbox{height:calc(var(--drow) * var(--ds));display:flex;align-items:flex-end;}          /* dials bottom-align so the readouts share a baseline */
.m-dial{position:relative;aspect-ratio:1;flex:none;}
.m-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block;}
.m-dial-arc{width:calc(var(--d1) * var(--ds));} .m-dial-tile{width:calc(var(--d2) * var(--ds));} .m-dial-wheel{--dw:calc(var(--d3) * var(--ds));width:var(--dw);}
/* readouts · label 9.5px with the blade mark (trace) · value 14px 600 · sub-line 10px dim — left-aligned to the dial's left edge (§9) */
.m-gtext{margin-top:14px;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:98px;font-size:14px;letter-spacing:.06em;color:var(--m-ink);}
.m-gtext small{display:flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.2em;color:var(--m-dim);text-transform:uppercase;}
.m-gtext small .mk{font-size:11px;} .m-gauge-arc .mk{color:var(--m-ex);} .m-gauge-tile .mk{color:var(--m-ma);} .m-gauge-wheel .mk{color:var(--m-gold-hi);}
.m-gtext small .m-led{width:3px;height:3px;background:var(--m-ex);opacity:.8;box-shadow:none;}
.m-gtext b{font-weight:600;color:var(--m-ink);} .m-gtext > div{white-space:nowrap;}
.m-gtext em{display:block;font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--m-dim);min-height:1.5em;line-height:1.5;white-space:nowrap;}
.m-gtext .key{font-family:var(--m-fs);font-size:17px;letter-spacing:.01em;}
/* ⚔ THE ARC · 270° (−135° → +135°), r 62 in a 160 box · sweep = Σ/118 · the arc length is 292.17 */
.m-dial-arc .track{fill:none;stroke:rgba(231,183,63,.16);stroke-width:1;vector-effect:non-scaling-stroke;}
.m-dial-arc .ticks{fill:none;stroke:rgba(231,183,63,.3);stroke-width:4;stroke-dasharray:0.8 15.43;}
.m-dial-arc .sweep{fill:none;stroke:var(--m-ex);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:292.17;stroke-dashoffset:calc(292.17px * (1 - var(--sweep,0)));transition:stroke-dashoffset .52s var(--m-ease),opacity .2s ease;}
.m-dial-arc .pin{transform:rotate(calc(-135deg + var(--sweep,0) * 270deg));transform-origin:80px 80px;transition:transform .52s var(--m-ease),opacity .2s ease;}
.m-dial-arc .pin .glow{fill:url(#airf-pin-glow);} .m-dial-arc .pin .dot{fill:var(--m-ex);}
.m-dial-arc .ghost .sweep{stroke-dashoffset:calc(292.17px * (1 - var(--sweep-peek,0)));} .m-dial-arc .ghost .pin{transform:rotate(calc(-135deg + var(--sweep-peek,0) * 270deg));}
.m-dialtext{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1;}
.m-num{font-family:var(--m-fd);font-weight:800;color:var(--m-gold-hi);letter-spacing:.02em;font-size:calc(var(--d1) * var(--ds) * .225);}
.m-den{font-size:9px;letter-spacing:.18em;color:var(--m-dim);}
/* letter tiles (R14) · pop left → right, 40ms stagger · caret after the last */
.m-tiles{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-height:26px;margin-top:3px;}
.m-tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:20px;height:24px;border:1px solid rgba(238,242,238,.16);border-radius:2px;line-height:1;animation:pop .28s ease-out both;animation-delay:calc(var(--i,0) * 40ms);}
.m-tile b{font-size:10.5px;font-weight:500;color:var(--m-ink);} .m-tile small{font-size:7.5px;color:var(--m-dim);margin-top:1px;}
.m-caret{width:2px;height:16px;background:var(--m-ex);margin-left:3px;opacity:.9;animation:lm-caret 1.1s steps(1) infinite;}
/* ⚗ THE TILE (R4) · Matter's element tile · Major Mono symbol · Z top-left · name beneath · category chip (R12) · --z as a 1px inner halo (perimeter 588.57) */
.m-dial-tile{perspective:700px;}
.m-tileface{position:absolute;inset:0;border-radius:2px;border:1px solid rgba(238,242,238,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;
  background:radial-gradient(circle at 50% 42%,var(--m-ma-glow) 0%,var(--m-base) 74%);transform-style:preserve-3d;}
.m-tileface.flip{animation:tile-flip .52s var(--m-ease) both;}
.m-dial-tile .halo-track{fill:none;stroke:rgba(238,242,238,.07);stroke-width:1;vector-effect:non-scaling-stroke;}
.m-dial-tile .halo{fill:none;stroke:rgba(238,242,238,.38);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:588.57;stroke-dashoffset:calc(588.57px * (1 - var(--z,0) / 118));transition:stroke-dashoffset .52s var(--m-ease);}
.m-dial-tile .orbit{fill:var(--m-ink);opacity:.35;}
.m-tileface .face{position:absolute;inset:0;transition:opacity .2s ease;}
.m-tileface .face.ghost{opacity:0;pointer-events:none;}
.m-tz{position:absolute;top:9px;left:10px;font-size:10px;letter-spacing:.12em;color:var(--m-dim);}
.m-sym{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);text-align:center;font-family:var(--m-fmono);color:var(--m-ink);line-height:1;font-size:calc(var(--d2) * var(--ds) * .325);}
.m-tname{position:absolute;left:0;right:0;top:69%;text-align:center;font-family:var(--m-fs);color:rgba(238,242,238,.86);letter-spacing:.02em;font-size:max(11px,calc(var(--d2) * var(--ds) * .094));}
.m-tcat{position:absolute;right:8px;bottom:8px;font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,242,238,.6);border:1px solid rgba(238,242,238,.18);border-radius:2px;padding:2px 5px;line-height:1;}
/* ○ THE WHEEL · A ring r 46 · B ring r 66 · 12 ticks · numerals r 76 · dashed spin ring r 71 · exactly three twinkles (R9) · hour window static (R13) */
.m-dial-wheel .face{fill:url(#airf-wheel-face);}
.m-dial-wheel .ring-a{fill:none;stroke:rgba(231,183,63,.14);stroke-width:1;vector-effect:non-scaling-stroke;}
.m-dial-wheel .ring-b{fill:none;stroke:rgba(231,183,63,.22);stroke-width:1;vector-effect:non-scaling-stroke;}
.m-dial-wheel .ticks{fill:none;stroke:rgba(231,183,63,.45);stroke-width:4;stroke-dasharray:0.8 33.77;stroke-dashoffset:0.4;}
.m-dial-wheel .spin{fill:none;stroke:rgba(231,183,63,.13);stroke-width:1;stroke-dasharray:1 7;stroke-linecap:round;transform-origin:80px 80px;animation:de-spin 60s linear infinite;}
.m-dial-wheel .hn{fill:rgba(231,183,63,.35);font:500 7px var(--m-fm);text-anchor:middle;}
.m-dial-wheel .tw{fill:var(--m-gold-hi);} .m-dial-wheel .tw1{animation:star-twinkle 4s ease-in-out infinite;} .m-dial-wheel .tw2{animation:star-twinkle 5.5s ease-in-out -1.7s infinite;} .m-dial-wheel .tw3{animation:star-twinkle 7s ease-in-out -3.1s infinite;}
.m-dial-wheel .hand{transform:rotate(calc(var(--hour,0) * 30deg)) scaleY(var(--hl,1));transform-origin:80px 80px;transition:transform .52s var(--m-ease),opacity .2s ease;}
.m-dial-wheel .hand line{stroke:var(--m-gold);stroke-width:1.2;stroke-linecap:round;}
.m-dial-wheel .hand.ghost{transform:rotate(calc(var(--hour-peek,0) * 30deg)) scaleY(var(--hl-peek,1));}
.m-dial-wheel .hub{fill:var(--m-gold);}
/* the seat plate (R3) · a 34×20 lozenge at 180px, gold-metallic, Cinzel 700, base-colour ink, glare once on arrival and on select */
.m-seatplate{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  width:max(24px,calc(var(--dw) * .19));height:max(14px,calc(var(--dw) * .111));font-size:max(7.5px,calc(var(--dw) * .061));
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%);background:var(--m-metal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);filter:drop-shadow(0 0 6px rgba(231,183,63,.45));
  font-family:var(--m-fplate);font-weight:700;color:var(--m-base);line-height:1;letter-spacing:.02em;
  transform:translate(-50%,-50%) rotate(calc(var(--hour,0) * 30deg)) translateY(calc(var(--dw) * -1 * var(--rr,.4125))) rotate(calc(var(--hour,0) * -30deg));
  transition:transform .52s var(--m-ease),opacity .2s ease;}
.m-seatplate.ghost{filter:none;box-shadow:none;opacity:0;pointer-events:none;transform:translate(-50%,-50%) rotate(calc(var(--hour-peek,0) * 30deg)) translateY(calc(var(--dw) * -1 * var(--rr-peek,.4125))) rotate(calc(var(--hour-peek,0) * -30deg));}
.m-seatplate > span{position:relative;}
.m-glare{position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);transform:translateX(-130%);}
.m-seatplate.shine .m-glare{animation:dc-shimmer .9s ease-in-out forwards;}
/* peek (R6) · .m-gauges[data-peek] · the ghost layers at 55%, the locked geometry at 30% (the tile face at 12% — the two faces overlap) */
.m-gauges[data-peek] .ghost{opacity:.55;} .m-gauges[data-peek] .lock{opacity:.3;} .m-gauges[data-peek] .m-tileface .face.lock{opacity:.12;}

/* ── the cascade · a gold rule above, gold words lit ── */
.m-cascade{border-top:1px solid var(--m-line);padding-top:12px;font-family:var(--m-fs);font-size:19px;line-height:1.45;color:var(--m-ink);font-style:italic;max-width:56ch;min-height:calc(1.45em * 4);text-wrap:pretty;}
.m-cascade span{color:var(--m-gold);font-style:normal;text-shadow:0 0 12px rgba(231,183,63,.16);}
/* ── TRY (R16) · the cascade's gold words as chips · 30px visual, 44px hit ── */
.m-try{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:30px;margin-top:-4px;}
.m-try small{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--m-dim);margin-right:2px;}
.m-try:not(:has(button)) small{opacity:0;}
.m-try button{all:unset;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;background:transparent;border:1px solid var(--m-line);color:var(--m-dim);font:500 10.5px/1 var(--m-fm);letter-spacing:.14em;padding:0 10px;min-height:30px;cursor:pointer;border-radius:2px;transition:background .2s ease,color .2s ease;}
.m-try button::before{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px;}
.m-try button:hover,.m-try button:focus-visible,.m-try button[aria-pressed="true"]{background:var(--m-wash);color:var(--m-ink);}
.m-try button:focus-visible{outline:1px solid var(--m-gold);outline-offset:2px;}
/* ── the lure (R11) + show the working ── */
.m-lure-row{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;min-height:44px;}
.m-lure{display:flex;align-items:center;gap:10px;font-family:var(--m-fs);font-style:italic;font-size:14px;color:rgba(238,242,238,.62);line-height:1.3;}
.m-lure .mks{display:inline-flex;gap:6px;font-style:normal;font-size:11px;font-family:var(--m-fm);} .m-lure .mks .ex{color:var(--m-ex);} .m-lure .mks .ov{color:var(--m-gold-hi);} .m-lure .mks .ma{color:var(--m-ma);}
.m-lure b{font-style:normal;font-weight:600;color:var(--m-gold);}
.m-more{all:unset;display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;padding:0 4px;font:500 10.5px/1 var(--m-fm);letter-spacing:.18em;text-transform:uppercase;color:var(--m-dim);transition:color .2s ease;}
.m-more s{width:5px;height:5px;transform:rotate(45deg);background:rgba(231,183,63,.85);text-decoration:none;flex:none;transition:transform .2s ease;}
.m-more:hover,.m-more:focus-visible{color:var(--m-gold);} .m-more:focus-visible{outline:1px solid var(--m-gold);outline-offset:4px;}
.m-more[aria-expanded="true"] s{transform:rotate(45deg) scale(1.3);}
.m-more[hidden]{display:none;}
/* ── THE WORKING · on open the rows slide down 240ms, the marks light in sequence (§8.1) ── */
.m-work{border-top:1px solid var(--m-line);padding-top:12px;display:grid;gap:11px;max-width:62ch;}
.m-work[hidden]{display:none;}
.wk{animation:work-in .24s var(--m-ease) both;} .wk:nth-child(2){animation-delay:.08s;} .wk:nth-child(3){animation-delay:.16s;}
.wk small{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.2em;color:var(--m-dim);text-transform:uppercase;margin-bottom:4px;}
.wk small .mk{font-size:11px;animation:fade-in .3s .1s both;} .wk:nth-child(2) small .mk{animation-delay:.2s;} .wk:nth-child(3) small .mk{animation-delay:.3s;}
.wk.ex small .mk{color:var(--m-ex);} .wk.ov small .mk{color:var(--m-gold-hi);} .wk.ma small .mk{color:var(--m-ma);} .wk.row small .mk,.wk.row small b{color:var(--m-gold);}
.wk small b{font-weight:500;color:var(--m-dim);}
.wk p{margin:0;font-family:var(--m-fs);font-size:16.5px;line-height:1.42;color:var(--m-ink);text-wrap:pretty;}
.wk p span{color:var(--m-gold);} .wk p i{font-style:normal;color:var(--m-cyan);} .wk p q{quotes:"\201C" "\201D";font-style:italic;}
.wk p code{font-family:var(--m-fm);font-size:11.5px;letter-spacing:.06em;color:var(--m-gold);border:1px solid var(--m-line);padding:1px 5px;border-radius:2px;white-space:nowrap;}
.wk.row p+p{margin-top:7px;}
/* ── the four doors · blade accent on hover only (R17) · HEAR THE LIVE KEY (R18) ── */
.m-out{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:auto;}
.m-out a,.m-out button{all:unset;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--m-dim);border-bottom:1px solid var(--m-hair);padding:12px 0 2px;transition:color .2s ease,border-color .2s ease;}
.m-out a:focus-visible,.m-out button:focus-visible{outline:1px solid var(--m-gold);outline-offset:2px;}
.m-out a[data-blade="excalibur"]:hover,.m-out a[data-blade="excalibur"]:focus-visible{color:#19ff6b;border-bottom-color:#19ff6b;}
.m-out a[data-blade="ovaltable"]:hover,.m-out a[data-blade="ovaltable"]:focus-visible{color:var(--m-gold-hi);border-bottom-color:var(--m-gold-hi);}
.m-out a[data-blade="matter"]:hover,.m-out a[data-blade="matter"]:focus-visible{color:#a855f7;border-bottom-color:#a855f7;}
.m-out button:hover,.m-out button:focus-visible{color:var(--m-gold);border-bottom-color:var(--m-gold);}
.m-out button svg{display:block;} .m-out button .wave{opacity:0;} .m-out button .mute{opacity:1;}
.m-out button[aria-pressed="true"] .wave{opacity:1;} .m-out button[aria-pressed="true"] .wave2{opacity:.7;} .m-out button[aria-pressed="true"] .mute{opacity:0;}
/* ── TICKER (R8) · under the base · pauses on hover ── */
.m-ticker{border-top:1px solid rgba(231,183,63,.16);overflow:hidden;padding:7px 0;}
.m-ticker > div{display:inline-block;white-space:pre;font-size:10px;letter-spacing:.16em;color:var(--m-dim);animation:ticker 38s linear 1.5s infinite;}
.m-ticker:hover > div{animation-play-state:paused;}

/* ── the calibration on select (~520ms, six glyph steps · R15) ── */
.m-chip.calib .L,.m-word.calib{animation:mcyc .5s steps(6) 1;}

/* ── keyframes · loops ── */
@keyframes lm-led{0%,100%{opacity:1;}50%{opacity:.22;}}
@keyframes lm-caret{0%,100%{opacity:1;}50%{opacity:0;}}
@keyframes lm-scan{from{transform:translateY(0);}to{transform:translateY(300px);}}
@keyframes de-spin{to{transform:rotate(360deg);}}
@keyframes star-twinkle{0%,100%{opacity:.3;}50%{opacity:.8;}}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* ── keyframes · response ── */
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.85);}to{opacity:1;transform:none;}}
@keyframes mcyc{from{opacity:.2;}to{opacity:1;}}
@keyframes lm-sonar{from{transform:scale(0);opacity:.5;}to{transform:scale(1);opacity:0;}}
@keyframes dc-shimmer{from{transform:translateX(-130%);}to{transform:translateX(130%);}}
@keyframes tile-flip{0%{transform:rotateY(0);}50%{transform:rotateY(90deg);}100%{transform:rotateY(0);}}
@keyframes work-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}

/* ── ≤1023px · the instruments lie down: dial left, readout right, one per row ── */
@media (max-width:1023px){
  .m-total{min-height:calc(1.7em * 4);} .m-cascade{min-height:calc(1.45em * 5);} .m-try{min-height:68px;}
  .m-gauges{grid-template-columns:1fr;gap:14px;}
  .m-gauge{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;align-items:center;}
  .m-dialbox{height:auto;} .m-gtext{margin-top:0;min-height:0;}
  .m-tname,.m-tcat,.m-dial-wheel .hn,.m-tz,.m-den{display:none;}
  .m-num{font-size:24px;} .m-sym{font-size:34px;}
}
/* ── ≤719px · the spine above the reading; the row wraps 4 + 3, the ? always fourth ── */
@media (max-width:719px){
  .m-body{grid-template-columns:1fr;}
  .m-spine{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:16px 14px 14px;border-right:0;border-bottom:1px solid var(--m-line);}
  .m-spine::before,.m-chip::before,.m-chip::after,.m-sonar{display:none;}
  .m-chip{flex-direction:column;align-items:flex-start;gap:7px;padding:10px 6px 10px 8px;}
  .m-chip .L{width:auto;} .m-chip .R,.m-q .R,.m-q.hot .R{font-size:8px;letter-spacing:.14em;}
  .m-total{min-height:calc(1.7em * 5);}
  .m-num{font-size:19px;} .m-sym{font-size:27px;}
}
/* ── reduced motion · no loops, no cuts, the reading simply appears (sound stays on demand) ── */
@media (prefers-reduced-motion:reduce){
  .machine *,.machine *::before,.machine *::after{animation:none !important;transition:none !important;}
}


/* ══════════════════════════════════════════════════════════════════════════════
   amireallyfree.no · BEAT FOUR · THE MACHINE · build 3 (Design → CODE · 9 Sep 2026)
   A DELTA over airf-machine-v2.css — load after it (or merge; every rule here wins by order). arrival.css unchanged except the two additions at the end.
   Build 3 = fewer words, more material, one solid box, the acronym as the hero, the ? as the door. Colour census §3.10 honoured:
   green only in the arc's sweep/pin, the letter tiles + caret, the EXCALIBUR door on hover and the ⚔ mark · purple only in the tile's glow,
   the category hairline, the MATTER door on hover and the ⚗ mark · cyan only in the ? bow, FREEDOM/FREE and <i> in a working line.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── §3.1 one solid box · the reading is reserved to its tallest state (measured at 1440: every state 976px) ── */
.m-cascade{min-height:calc(1.45em * 5);}
.m-try{min-height:30px;}
@media (max-width:1023px){.m-try{min-height:68px;}}
/* ── §3.2 the ? · hinge and door ── */
.m-q{min-height:64px;align-items:center;transition:background .32s ease,box-shadow .32s ease;}
.m-q .L{font-size:2.945rem;}                                   /* 1.9 × the initials (24.8 → 47.1px) */
@media (max-width:719px){.m-q{min-height:44px;}.m-q .L{font-size:2.325rem;}}   /* 1.5 × on the 4 + 3 grid */
.m-q::after{display:none;}                                      /* no tick — the door's mark is the lozenge */
.m-q::before{left:36px;width:8px;height:8px;margin-top:-4px;opacity:.55;box-shadow:0 0 8px rgba(231,183,63,.6);}
.m-q.hot::before,.m-q.pinned::before{opacity:1;}
.m-q.loose,.m-q.pinned{background:var(--m-wash);box-shadow:inset 0 0 0 1px var(--m-line);}
.m-q .k{background:var(--m-metal-text,linear-gradient(178deg,#F4D976 0%,#E7B73F 50%,#D4AF37 100%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.qm2-bow{transform-origin:307px 298px;transition:transform .32s var(--m-ease);animation:bow-breath 3.6s ease-in-out infinite;}
.qm2-dot{transition:transform .32s var(--m-ease),fill .32s ease;}
.m-q.loose .qm2-bow{transform:translateY(-42px) rotate(-12deg);}   /* the loosen (0–320ms): bow up 2px and −12°, dot down 2px and brighter — user units, 21 per px */
.m-q.loose .qm2-dot{transform:translateY(42px);fill:var(--m-gold-hi);}
.m-q.nudge .qm2-bow{animation:q-nudge-bow .9s var(--m-ease) 1 both !important;}   /* the invitation, once, 4.0s after settle */
.m-q.nudge .qm2-dot{animation:q-nudge-dot .9s var(--m-ease) 1 both !important;}
/* ── §3.7 the acronym is the hero · gold-metallic initials · the breath-wave every 9s ── */
.m-chip .L{background:linear-gradient(178deg,#F4D976 0%,#E7B73F 50%,#D4AF37 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;}
.m-chip .L .hi{position:absolute;left:0;top:0;color:var(--m-gold-hi);-webkit-text-fill-color:var(--m-gold-hi);opacity:0;pointer-events:none;animation:spine-wave 9s linear infinite;}
.m-chip[data-word="YES"] .hi{animation-delay:3s;}.m-chip[data-word="OVERCOME"] .hi{animation-delay:3.12s;}.m-chip[data-word="UNCOVER"] .hi{animation-delay:3.24s;}
.m-chip[data-word="NEXT"] .hi{animation-delay:3.48s;}.m-chip[data-word="OBSERVER"] .hi{animation-delay:3.6s;}.m-chip[data-word="WITNESS"] .hi{animation-delay:3.72s;}
.m-q:not(.loose):not(:hover) .qm2-bow{animation:bow-breath 3.6s ease-in-out infinite,q-wave-bow 9s linear 3.36s infinite;}
.m-q:not(.loose):not(:hover) .qm2-dot{animation:q-wave-dot 9s linear 3.36s infinite;}
.m-spine{padding-bottom:18px;}
.m-spine .chips{position:relative;display:flex;flex-direction:column;justify-content:space-evenly;flex:1 1 auto;}
.m-spine::before{display:none;} .m-spine .chips::before{content:'';position:absolute;left:40px;top:0;bottom:0;width:1px;background:rgba(231,183,63,.22);pointer-events:none;}   /* the rail ends with the chips; the sentence sits below it */
.m-sent{padding:14px 8px 0 20px;font-family:var(--m-fs);font-style:italic;font-size:14px;line-height:1.5;color:rgba(238,242,238,.55);opacity:0;transition:opacity .6s ease;text-wrap:pretty;}
.m-sent b{font-style:normal;font-weight:500;color:var(--m-gold);}
.machine.is-settled .m-sent{opacity:1;}
.m-rail2{position:absolute;left:39.5px;top:0;bottom:0;width:2px;background:rgba(231,183,63,.6);pointer-events:none;}
@media (max-width:719px){.m-spine .chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;}.m-sent{padding:14px 6px 0;}.m-rail2{display:none;}}
/* ── §3.3 the wheel wins the room ── */
.m-dial-wheel .ring-a{stroke:rgba(231,183,63,.18);}
.m-dial-wheel .ring-b{stroke:rgba(231,183,63,.3);stroke-width:1.5;}
.m-dial-wheel .hn{font-size:9px;fill:rgba(231,183,63,.45);}
.m-dial-wheel .hand line{stroke-width:1.6;} .m-dial-wheel .hand .core{stroke:#fff7d6;stroke-width:.6;opacity:.9;}
.m-dial-wheel .hub{r:3;} .m-dial-wheel .hub-glow{fill:rgba(231,183,63,.35);}
.m-seatplate .m-glare{animation:glare-loop 9s ease-in-out infinite;}           /* one sweep every 9s: 900ms across, 8.1s still */
.m-dial-wheel .mark{fill:rgba(9,9,15,.6);stroke:rgba(231,183,63,.22);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .25s ease;}
.m-dial-wheel .mark.lit{fill:var(--m-gold);stroke:var(--m-gold-hi);}
.machine[data-seat-marks="off"] .mark{display:none;}                           /* kill-switch (R6) */
.m-gauge-wheel .m-dialbox{flex-direction:column;align-items:center;justify-content:center;}
.machine{--drow:212px;}
@media (max-width:1199px){.machine{--drow:184px;}}
@media (max-width:1023px){.machine{--drow:auto;}}
.m-bars{display:flex;align-items:flex-end;gap:4px;height:24px;margin-top:8px;--bd:.8s;}   /* --bd = 0.8s + ((seatNumber × 37) mod 700)ms, painted by CODE */
.m-bars i{display:block;width:5px;background:var(--m-gold);border-radius:3px;transform-origin:bottom;animation:cg-sound var(--bd) ease-in-out infinite;}
.m-bars i:nth-child(1){height:12px;} .m-bars i:nth-child(2){height:18px;animation-delay:.09s;} .m-bars i:nth-child(3){height:22px;animation-delay:.18s;} .m-bars i:nth-child(4){height:15px;animation-delay:.27s;} .m-bars i:nth-child(5){height:20px;animation-delay:.36s;} .m-bars i:nth-child(6){height:11px;animation-delay:.45s;} .m-bars i:nth-child(7){height:8px;animation-delay:.54s;}
.m-bars.flare i{animation:none;transform:scaleY(1);opacity:1;}
/* ── §3.4 the arc and the tile ── */
.m-dial-arc .sweep{stroke-width:4;} .m-dial-arc .pin .glow{r:12;} .m-num{font-size:calc(var(--d1) * var(--ds) * .2375);}
.m-tile{border-color:rgba(25,255,107,.45);background:rgba(25,255,107,.06);width:21px;height:25px;}
.m-tile b,.m-tile small{color:rgba(25,255,107,.9);text-shadow:0 0 8px rgba(25,255,107,.35);}
.m-caret{background:#19ff6b;}
.m-gauge-arc.nudge .sweep,.m-gauge-arc.nudge .pin{transition-duration:.3s;}   /* the 42 nudge: --sweep 41/118 → 42/118 → 41/118, the numeral never changes */
.m-sym{font-size:calc(var(--d2) * var(--ds) * .35);}
.m-tcat{border-color:var(--cat,rgba(238,242,238,.18));color:rgba(238,242,238,.7);}   /* --cat = atoms.no legend colour for d.cat */
.m-dial-tile .orbit{display:none;}
.m-dialbox{align-items:center;justify-content:center;}
/* ── §3.5 TRY plates ── */
.m-try small{display:inline-flex;align-items:center;gap:7px;font-size:9px;} .m-try small::before{content:'';width:5px;height:5px;transform:rotate(45deg);background:var(--m-gold);}
.m-try button{position:relative;overflow:hidden;border:0;box-shadow:inset 0 0 0 1px var(--m-line);padding:0 12px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);color:rgba(238,242,238,.7);}
.m-try button:hover,.m-try button:focus-visible,.m-try button[aria-pressed="true"]{background:var(--m-metal);color:var(--m-base);}
.m-try button .g{position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);transform:translateX(-130%);pointer-events:none;}
.m-try button:hover .g{animation:dc-shimmer .9s ease-in-out 1;}
/* ── §3.6 doors as buttons · HEAR on the seat line ── */
.m-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;font-size:10.5px;}
@media (max-width:1023px){.m-out{grid-template-columns:1fr;}}
.m-out a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 10px;border:0;text-align:center;line-height:1.3;color:rgba(238,242,238,.7);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:color .2s ease,background .2s ease,box-shadow .2s ease;}
.m-out a[data-blade="excalibur"]{box-shadow:inset 0 0 0 1px rgba(25,255,107,.35);} .m-out a[data-blade="excalibur"]:hover,.m-out a[data-blade="excalibur"]:focus-visible{box-shadow:inset 0 0 0 1px rgba(25,255,107,.9);background:rgba(25,255,107,.12);color:#19ff6b;}
.m-out a[data-blade="ovaltable"]{box-shadow:inset 0 0 0 1px rgba(244,217,118,.35);} .m-out a[data-blade="ovaltable"]:hover,.m-out a[data-blade="ovaltable"]:focus-visible{box-shadow:inset 0 0 0 1px rgba(244,217,118,.9);background:rgba(244,217,118,.12);color:var(--m-gold-hi);}
.m-out a[data-blade="matter"]{box-shadow:inset 0 0 0 1px rgba(168,85,247,.35);} .m-out a[data-blade="matter"]:hover,.m-out a[data-blade="matter"]:focus-visible{box-shadow:inset 0 0 0 1px rgba(168,85,247,.9);background:rgba(168,85,247,.12);color:#a855f7;}
.m-hear{all:unset;position:relative;width:24px;height:24px;margin-left:2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(238,242,238,.5);transition:color .2s ease;}
.m-hear::before{content:'';position:absolute;inset:-10px;} .m-hear:hover,.m-hear:focus-visible{color:var(--m-gold-hi);} .m-hear[aria-pressed="true"]{color:var(--m-gold);}
.m-hear .wave{opacity:0;} .m-hear .mute{opacity:1;} .m-hear[aria-pressed="true"] .wave{opacity:1;} .m-hear[aria-pressed="true"] .wave2{opacity:.7;} .m-hear[aria-pressed="true"] .mute{opacity:0;}
/* ── §3.11 type ── */
.m-wordbox{font-size:clamp(1.5rem,4vw,2.75rem);} .m-wordwrap{filter:drop-shadow(0 0 28px rgba(231,183,63,.18));} .m-wordwrap.cyan .m-word{text-shadow:0 0 28px rgba(34,211,238,.18);}
.m-def{font-size:17px;color:rgba(238,242,238,.62);}
.m-gtext{font-size:15px;min-height:104px;} .m-gtext small{font-size:10.5px;color:rgba(238,242,238,.55);} .m-gtext small .mk{font-size:12px;} .m-gtext em{color:rgba(238,242,238,.55);} .m-gtext .key{font-size:18px;}
.m-face{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 6px rgba(0,0,0,.5);}
/* ── §5.1 the preview ghost · a clone of the reading, absolutely over it, crossfading at .62 ── */
.m-reading-stack{position:relative;}
.m-reading-lock{transition:opacity .22s ease;} .m-reading-ghost{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .22s ease;}
.machine[data-preview] .m-reading-lock{opacity:0;} .machine[data-preview] .m-reading-ghost{opacity:.62;}
/* ── §3.9 the acronym ticker · initials lit ── */
.m-ticker > div{font-size:10.5px;letter-spacing:.14em;} .m-ticker b{color:var(--m-gold-hi);font-weight:600;}
/* ── §7.3 micro-tiles in the working ── */
.wk .micro{display:flex;flex-direction:column;gap:6px;flex:none;padding-top:2px;}
.wk .micro span{width:28px;height:28px;border:1px solid rgba(238,242,238,.16);border-radius:2px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,#a855f7 18%,#09090f),#09090f 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;opacity:.8;}
.wk .micro b{font-family:var(--m-fmono);font-size:10px;font-weight:400;color:var(--m-ink);} .wk .micro small{font-size:6.5px;letter-spacing:.08em;color:rgba(238,242,238,.55);margin-top:2px;}
.wk .row2{display:flex;gap:12px;align-items:flex-start;}

/* ── keyframes added in build 3 ── */
@keyframes cg-sound{0%,100%{transform:scaleY(.35);opacity:.5;}50%{transform:scaleY(1);opacity:1;}}
@keyframes bow-breath{0%,100%{stroke-opacity:.55;}50%{stroke-opacity:1;}}
@keyframes glare-loop{0%{transform:translateX(-130%);}10%{transform:translateX(130%);}100%{transform:translateX(130%);}}
@keyframes spine-wave{0%,4.7%,100%{opacity:0;}2.3%{opacity:1;}}
@keyframes q-wave-bow{0%,4.7%,100%{transform:none;}2.3%{transform:translateY(-42px) rotate(-12deg);}}
@keyframes q-wave-dot{0%,4.7%,100%{transform:none;}2.3%{transform:translateY(42px);}}
@keyframes q-nudge-bow{0%,100%{transform:none;}50%{transform:translateY(-42px) rotate(-12deg);}}
@keyframes q-nudge-dot{0%,100%{transform:none;}50%{transform:translateY(42px);}}
@keyframes draw-down{from{transform:scaleY(0);}to{transform:scaleY(1);}}
/* arrival.css additions: the 2px rule draws down the rail after the initials (t = 480–900), then fades to the 1px rail */
.ar-raildraw{transform-origin:top;animation:draw-down .42s .48s cubic-bezier(.2,.8,.2,1) both,fade-out .5s 1s forwards;}
/* reduced motion: the bars hold at .5, the wave, breath, glare and nudge are off */
@media (prefers-reduced-motion:reduce){.m-bars i{transform:scaleY(.6);opacity:.5;}}


/* ══════════════════════════════════════════════════════════════════════════════
   amireallyfree.no · BEAT FOUR · THE MACHINE · build 4 — FINAL (Design → CODE · 9 Sep 2026)
   A DELTA over airf-machine-v2.css + airf-machine-v3.delta.css — load after both (or merge; order wins).
   Build 4 = one anatomy per column (dial · live strip · readout) · motion that keeps running · a sequential reveal · the metallic
   glinting frame · the ? split into a mark (holds KEY) and a door (leaves) · dials that open their blade. Colour census unchanged.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── §2 F1 · the spine wave (no extra spans: data-l on each .L, ::after draws the highlight) · J2 hairline .08 ── */
.m-chip .L{position:relative;}
.m-chip .L::after{content:attr(data-l);position:absolute;left:0;top:0;color:var(--m-gold-hi);-webkit-text-fill-color:var(--m-gold-hi);opacity:0;pointer-events:none;animation:spine-wave 9s linear infinite;animation-delay:var(--wd,3s);}
.m-chip[data-word="YES"] .L{--wd:3s;} .m-chip[data-word="OVERCOME"] .L{--wd:3.12s;} .m-chip[data-word="UNCOVER"] .L{--wd:3.24s;} .m-chip[data-word="NEXT"] .L{--wd:3.48s;} .m-chip[data-word="OBSERVER"] .L{--wd:3.6s;} .m-chip[data-word="WITNESS"] .L{--wd:3.72s;}
.machine:not(.is-arrived) .m-chip .L::after{animation-play-state:paused;}
.m-chip .L .hi{display:none;}
.m-spine .chips::before{background:rgba(231,183,63,.08);}
.ar-raildraw{animation:draw-down .42s .48s cubic-bezier(.2,.8,.2,1) both,fade-out .5s 1s forwards;}

/* ── §3 one anatomy per column · dial (a link) · live strip 28px · readout ── */
.machine{--drow:240px;}
@media (max-width:1199px){.machine{--drow:212px;}}
@media (max-width:1023px){.machine{--drow:auto;}}
.m-dialbox{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;height:calc(var(--drow) * var(--ds));}
.m-gauge-wheel .m-dialbox{align-items:center;position:relative;width:calc(var(--d3) * var(--ds));}
.m-dial-link{display:block;text-decoration:none;color:inherit;transition:transform .25s cubic-bezier(.2,.8,.2,1);}
.m-dial-link:hover,.m-dial-link:focus-visible{transform:translateY(-2px);}
.m-dial-link:focus-visible{outline:1px solid var(--m-gold);outline-offset:4px;}
.m-strip{height:28px;margin-top:8px;width:100%;}
.m-gtext{margin-top:12px;min-height:80px;}
/* the arc's strip: the tiles + caret, chain beneath (moved up from the readout) */
.m-strip.m-tiles{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;height:26px;overflow:hidden;width:auto;}
.m-strip .chain{font-size:10px;letter-spacing:.08em;color:rgba(238,242,238,.55);line-height:1;margin-top:4px;white-space:nowrap;}
.m-gauge-arc.long .m-tile{width:18px;} .m-gauge-arc.long .m-strip.m-tiles{gap:2px;}     /* .long when the word has > 8 letters */
.m-gtext .m-tiles,.m-gtext > em{display:none;}                                           /* the readout no longer carries them */
.m-gtext .dash{display:block;font-size:10px;color:rgba(238,242,238,.55);min-height:1.5em;line-height:1.5;}
/* the tile's strip: five particles drifting left → right, masked at both ends */
.m-drift{position:relative;height:26px;overflow:hidden;width:calc(var(--d2) * var(--ds));--dw2:calc(var(--d2) * var(--ds));-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);}
.m-drift i{position:absolute;left:0;width:2px;height:2px;border-radius:50%;background:#a855f7;opacity:.55;animation:drift 6s linear infinite;}
.m-drift i:nth-child(1){top:6px;} .m-drift i:nth-child(2){top:13px;animation-duration:7.5s;animation-delay:-2s;} .m-drift i:nth-child(3){top:19px;animation-duration:9s;animation-delay:-5s;} .m-drift i:nth-child(4){top:9px;animation-duration:10.5s;animation-delay:-3.5s;} .m-drift i:nth-child(5){top:16px;animation-duration:12s;animation-delay:-8s;}
/* the wheel's strip: the bars (as build 3), centred under the wheel */
.m-bars{justify-content:center;height:26px;margin-top:8px;}
/* seat marks live in their own SVG layer over the wheel, outside the link */
.m-markslayer{position:absolute;left:0;top:0;width:var(--dw);height:var(--dw);overflow:visible;pointer-events:none;}
.m-markslayer .mark{pointer-events:auto;r:3;}
/* lie-down (≤1023): dial left with its strip under it, readout right; tiles shrink to letters only */
@media (max-width:1023px){
  .m-strip{width:calc(var(--d1) * var(--ds));margin-top:6px;} .m-strip.m-tiles{width:auto;gap:1px;}
  .m-tile{width:12px;height:20px;} .m-tile b{font-size:7.5px;} .m-tile small{display:none;}
  .m-try{min-height:68px;}
}
@media (max-width:719px){.m-cascade{min-height:calc(1.45em * 7);} .m-lure-row{min-height:74px;}}

/* ── §4 motion at rest ── */
@keyframes fqs-run{to{stroke-dashoffset:-90;}}
@keyframes fqs-breathe{0%,100%{opacity:.45;}50%{opacity:.95;}}
@keyframes num-swell{0%,100%{text-shadow:0 0 14px rgba(244,217,118,.12);}50%{text-shadow:0 0 18px rgba(244,217,118,.28);}}
@keyframes glow-breath{0%,100%{opacity:1;}50%{opacity:.82;}}
@keyframes drift{from{transform:translateX(-8px);}to{transform:translateX(calc(var(--dw2,160px) + 8px));}}
.m-dial-arc .current{fill:none;stroke:var(--m-ex);stroke-width:4;stroke-dasharray:2 7;opacity:.6;animation:fqs-run 2.4s linear infinite;clip-path:url(#airf-sweep-clip);}   /* the current runs only along the lit sweep: the clipPath holds a copy of .sweep with the same --sweep dash */
.m-dial-arc .pin .glow{animation:fqs-breathe 2.8s ease-in-out infinite;}
.m-num{animation:num-swell 6s ease-in-out infinite;}
.m-tileface::after{content:'';position:absolute;inset:0;border-radius:2px;background:radial-gradient(circle at 50% 42%,rgba(168,85,247,.10),transparent 74%);animation:glow-breath 5s ease-in-out infinite;pointer-events:none;}
.m-dial-tile .atom{fill:#a855f7;opacity:.55;}   /* three <circle class="atom" r="1.8"> with animateMotion 24 · 32 · 40s on the halo path */
.m-dial-tile .orbit{display:none;}

/* ── §5 the sequential reveal · .staged on #m-gauges for 1s after every paint ── */
.m-gauges.staged .m-gauge-tile .halo,.m-gauges.staged .m-gauge-tile .m-tileface{animation-delay:.2s !important;transition-delay:.2s;}
.m-gauges.staged .m-gauge-wheel .hand,.m-gauges.staged .m-gauge-wheel .m-seatplate{transition-delay:.4s;}
.m-gauges.staged .m-gauge-tile .m-gtext{transition:opacity .2s ease .2s;} .m-gauges.staged .m-gauge-wheel .m-gtext{transition:opacity .2s ease .4s;}

/* ── §6 the frame · a live bulletin board ── */
.m-ring{background:none;}
.m-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.m-framepath{fill:none;stroke:url(#airf-metal);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.9;}
.m-framepath.glint{stroke:#FFF7D6;stroke-dasharray:90 3000;stroke-dashoffset:90;opacity:.85;animation:glint 7s linear infinite;}
@keyframes glint{0%{stroke-dashoffset:90;}31%{stroke-dashoffset:-3000;}100%{stroke-dashoffset:-3000;}}
@keyframes glance{0%,100%{opacity:.35;}50%{opacity:1;}}
.m-corner{fill:#FFF7D6;opacity:.35;animation:glance 7s ease-in-out infinite;} .m-corner.c1{animation-delay:-.2s;} .m-corner.c2{animation-delay:.6s;} .m-corner.c3{animation-delay:1.3s;} .m-corner.c4{animation-delay:1.9s;}
@keyframes plate-tick{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 5px rgba(0,0,0,.5);}4%{box-shadow:inset 0 0 0 1px rgba(255,247,214,.55),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 5px rgba(0,0,0,.5);}}
#m-rail-seat{animation:plate-tick 7s ease-in-out 2s infinite;} .m-base .m-plate{animation:plate-tick 7s ease-in-out 4s infinite;}

/* ── §7 the ? · a hold (button) and a door (link) on either side of the rail ── */
.m-q{display:flex;align-items:center;min-height:64px;}
.m-qmark{all:unset;display:flex;align-items:center;cursor:pointer;position:relative;min-height:46px;font-family:var(--m-fd);font-weight:800;letter-spacing:.04em;line-height:1;color:var(--m-ink);}
.m-qmark .R{min-width:2.4em;text-align:left;}
.m-qdoor{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font:500 10px/1 var(--m-fm);letter-spacing:.16em;text-transform:uppercase;color:rgba(238,242,238,.7);text-decoration:none;white-space:nowrap;transition:color .2s ease;}
.m-qdoor:hover,.m-qdoor:focus-visible{color:var(--m-gold-hi);} .m-qdoor:hover .arrow{transform:translateX(3px);} .m-qdoor .arrow{display:inline-block;transition:transform .2s ease;}
.m-q.loose .qm2-bow{transform:translateY(-63px) rotate(-18deg);}   /* F7: −18°, 3px lift */
.m-q.loose .qm2-dot{transform:translateY(63px);fill:var(--m-gold-hi);}
@keyframes q-nudge-bow{0%,100%{transform:none;}50%{transform:translateY(-63px) rotate(-18deg);}}
@keyframes q-nudge-dot{0%,100%{transform:none;}50%{transform:translateY(63px);}}
@keyframes q-wave-bow{0%,4.7%,100%{transform:none;}2.3%{transform:translateY(-63px) rotate(-18deg);}}
@keyframes q-wave-dot{0%,4.7%,100%{transform:none;}2.3%{transform:translateY(63px);}}
@media (max-width:719px){.m-qdoor{display:none;} .m-q{min-height:44px;}}

/* ── §8 dial-link hover captions · blade accent, hover only ── */
.m-gtext small .cap{font-size:9px;letter-spacing:.12em;opacity:0;transition:opacity .2s ease;}
.m-gauge-arc .cap{color:#19ff6b;} .m-gauge-tile .cap{color:#a855f7;} .m-gauge-wheel .cap{color:var(--m-gold-hi);}
.m-gauge:has(.m-dial-link:hover) .cap,.m-gauge:has(.m-dial-link:focus-visible) .cap{opacity:1;}

/* ── §10 type ── */
.m-def{font-size:19px;color:rgba(238,242,238,.92);letter-spacing:.01em;margin-top:-8px;}
.m-dial-wheel .hn{fill:rgba(231,183,63,.3);}   /* F8 with seat marks on */
.machine[data-seat-marks="off"] .m-dial-wheel .hn{fill:rgba(231,183,63,.45);}

/* ── reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .m-framepath.glint{opacity:0;} .m-drift i{animation:none;opacity:.5;transform:translateX(calc(var(--dw2,160px) * .5));}
  .m-dial-tile .atom{animation:none;}   /* CODE parks the three atoms at 0° / 120° / 240° (static cx/cy) when the media query matches */
}


/* ══════════════════════════════════════════════════════════════════════════════
   build 5 · LIVE polish (9 Sep 2026) — the last delta, applied over v2 + v3 + v4
   ══════════════════════════════════════════════════════════════════════════════ */
/* the three live strips share one 28px row; the chain moves to the readout's third line (level with Z and the hour window) */
.m-strip{height:28px;margin-top:10px;display:flex;flex-direction:column;justify-content:center;width:100%;overflow:visible;}
.m-strip.m-tiles{flex-direction:row;align-items:center;justify-content:center;gap:4px;height:28px;overflow:visible;}
.m-tile{height:27px;}
.m-strip .chain{display:none;}
.m-gtext .chain{display:block;font-size:10px;letter-spacing:.08em;color:rgba(238,242,238,.55);min-height:1.5em;line-height:1.5;white-space:nowrap;}
.m-gtext .dash{display:none;}
.m-gtext > div{min-height:20px;line-height:20px;} .m-gtext > small{min-height:16px;line-height:16px;}
.machine{--drow:246px;} @media (max-width:1199px){.machine{--drow:218px;}} @media (max-width:1023px){.machine{--drow:auto;}}
.m-bars{height:28px;margin-top:10px;}
.m-drift{height:28px;}
/* THE SUM's numeral in Excalibur green */
.m-num{color:#19ff6b;text-shadow:0 0 14px rgba(25,255,107,.25);}
/* the seat marks are gone (they read as noise); numerals back to .45 */
.m-markslayer,.mark{display:none !important;}
.m-dial-wheel .hn{fill:rgba(231,183,63,.45);}
/* DECODE ME is a TRY-style plate, no arrow */
.m-qdoor{margin-left:auto;position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:30px;padding:0 12px;box-shadow:inset 0 0 0 1px var(--m-line);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);font:500 10.5px/1 var(--m-fm);letter-spacing:.14em;text-transform:uppercase;color:rgba(238,242,238,.7);text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease;}
.m-qdoor::before{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px;}
.m-qdoor:hover,.m-qdoor:focus-visible{background:var(--m-metal);color:var(--m-base);}
.m-qdoor .arrow{display:none;}
.m-qdoor .g{position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);transform:translateX(-130%);pointer-events:none;}
.m-qdoor:hover .g{animation:dc-shimmer .9s ease-in-out 1;}
/* "Am I Really Free?" — FREE in cyan (the estate rule) */
.m-lure .free{color:var(--m-cyan);}
/* the doors: the middle plate a little wider, tighter type, one line each */
.m-out{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr);font-size:10px;letter-spacing:.12em;}
.m-out a{padding:0 8px;white-space:nowrap;}
@media (max-width:1023px){.m-out{grid-template-columns:1fr;} .m-out a{white-space:normal;}}
/* the header FREEDOM button — back to the page's word (cyan plate, centred in the rail) */
.m-rail{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:9px 20px;}
.m-rail > div:last-child{text-align:right;}
.m-home{all:unset;position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:30px;padding:0 14px;box-shadow:inset 0 0 0 1px rgba(34,211,238,.45);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);font-family:var(--m-fd);font-weight:800;font-size:11px;letter-spacing:.14em;line-height:1;color:rgba(34,211,238,.75);cursor:pointer;transition:background .2s ease,color .2s ease;}
.m-home::before{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px;}
.m-home:hover,.m-home:focus-visible,.m-home.on{background:rgba(34,211,238,.12);color:var(--m-cyan);}
.m-home:focus-visible{outline:1px solid var(--m-cyan);outline-offset:2px;}
/* mobile (≤1023 lie-down · ≤719 grid) */
@media (max-width:1023px){
  .m-gauge{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"dial rd" "strip strip";gap:0 16px;row-gap:8px;align-items:center;}
  .m-dialbox{display:contents;} .m-dial-link{grid-area:dial;} .m-gtext{grid-area:rd;margin-top:0;min-height:0;}
  .m-strip{grid-area:strip;width:100%;margin-top:0;justify-content:flex-start;align-items:flex-start;}
  .m-strip.m-tiles{justify-content:flex-start;flex-wrap:wrap;height:auto;gap:3px;} .m-tile{width:21px;height:27px;} .m-tile small{display:block;}
  .m-bars{justify-content:flex-start;} .m-drift{width:min(60vw,320px);--dw2:min(60vw,320px);}
  .m-gauges{gap:18px;}
}
@media (max-width:719px){
  .m-rail{grid-template-columns:1fr auto;padding:9px 14px;} .m-rail > div:last-child{grid-column:1 / -1;text-align:left;font-size:9px;}
  .m-home{min-height:28px;padding:0 10px;font-size:10px;}
  .m-q{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 6px 10px 8px;min-height:44px;}
  .m-qdoor{display:inline-flex;margin-left:0;min-height:26px;padding:0 8px;font-size:8px;letter-spacing:.1em;}
  .m-qmark{min-height:0;}
  .m-reading{gap:12px;}
}

/* ══════════════════════════════════════════════════════════════════════════════
   CODE · V2.1 · three cascade fixes found on the first headless render (9 Sep 2026)
   The LIVE polish's `.m-strip{display:flex;flex-direction:column;width:100%;overflow:visible}` sits after build 3's `.m-bars` and
   build 4's `.m-drift` rules at equal specificity, so on the page the sound bars stood in a column at the wheel's edge and the drift
   lost its width and its clip (Design's DC set both inline, so the canvas never showed it). `.m-lure{display:flex;gap:10px}` (build 3,
   for the three blade marks that LIVE removed) split "Free?" into flex items. Restated here, last, so position wins.
   ══════════════════════════════════════════════════════════════════════════════ */
.m-strip.m-bars{flex-direction:row;align-items:flex-end;justify-content:center;}
.m-strip.m-drift{display:block;width:calc(var(--d2) * var(--ds));overflow:hidden;}
.m-lure{display:block;}
@media (max-width:1023px){.m-strip.m-bars{justify-content:flex-start;} .m-strip.m-drift{width:min(60vw,320px);}}
/* one box, every word (CODE · 9 Sep): the rail's first cell wrapped by word length (a 17px step at 1024–1199, 25px at ≤719), the only
   thing that moved the section between words. Two line-breaks make the wrap deterministic: ≤1199 the seat plate takes its own line,
   ≤719 "LIVE · word" does too — the same rows for YES and for UNFINISHED. */
.m-brk{display:none;flex-basis:100%;height:0;margin:0;padding:0;}
@media (max-width:1279px){.m-brk-seat{display:block;}}   /* the section is 960px wide below 1280: the plate needs its own line up to there */
@media (max-width:719px){.m-brk-word{display:block;}}
/* ≤719 the spine is a column (the chips grid + the sentence beneath); the v2 base rule that made the spine itself a 4-column grid
   predates the .chips wrapper and squeezed both into one cell. */
@media (max-width:719px){.m-spine{display:flex;flex-direction:column;} .m-spine .chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;}}
/* the last three bands (measured 9 Sep): KEY's cascade runs to 6 lines at 720–800 (the reading is ~350px wide beside the 300px spine),
   the lure row wraps below 800, the rail's first line wraps below 768, and at ≤359 KEY's hot totals take 6 lines and its cascade 7½.
   Reserved so every word is one height at every width; the working still opens below the box (allowed). */
@media (min-width:720px) and (max-width:1023px){.m-cascade{min-height:calc(1.45em * 6.5);}}
@media (max-width:799px){.m-lure-row{min-height:74px;}}
@media (max-width:767px){.m-brk-word{display:block;}}
@media (max-width:359px){.m-total{min-height:calc(1.7em * 6);} .m-cascade{min-height:calc(1.45em * 7.5);}}
/* the lure (JJ, 9 Sep): AM I REALLY and the ? gold · Free / FREEDOM cyan · everything else ink */
.m-lure{color:rgba(238,242,238,.85);} .m-lure .t{color:var(--m-gold);font-style:normal;} .m-lure .free{color:var(--m-cyan);}
.m-lure b{color:var(--m-ink);font-weight:600;} .m-lure b.cyan{color:var(--m-cyan);}

/* ══ V2.2 (CODE, 9 Sep) ══ */
/* off-screen or in a hidden tab the live tier sleeps (the loops pause in place; machine.js pauses the SMIL atoms) */
.machine.is-away *{animation-play-state:paused !important;}
/* the now hand · a thin gold hand at this minute's hour · when the hour is the word's own, the hub pulses and the window lights */
.m-dial-wheel .now{stroke:rgba(231,183,63,.38);stroke-width:1;stroke-linecap:round;transform-origin:80px 80px;transition:transform .6s var(--m-ease);}
.machine.its-now .m-reading-lock .m-dial-wheel .hub{animation:lm-led 2.2s ease-in-out infinite;}
.machine.its-now .m-reading-lock .m-hourwin{color:var(--m-gold-hi);}
@media (prefers-reduced-motion:reduce){.machine.its-now .m-reading-lock .m-dial-wheel .hub{animation:none;}}

/* ══ V2.3 · S4 (Design → CODE, 9 Sep) ══ */
/* P1 · all widths · THE ELEMENT's "Z 66" and THE SEAT's hour window — build 4's .m-gtext > em{display:none} hid the readouts' third line */
.m-gtext > em{display:block;font-size:10px;letter-spacing:.08em;color:rgba(238,242,238,.55);min-height:1.5em;line-height:1.5;white-space:nowrap;font-style:normal;}
/* P4 · ≤1023 · the tile letters shrank to 7.5px in the lie-down (a build-4 rule the LIVE polish did not revert) · DC 10.5 / 7.5 */
@media (max-width:1023px){.m-tile b{font-size:10.5px;} .m-tile small{font-size:7.5px;}}
/* P2 (no change: the visible rail is .chips::before, already .08) · P3 (fixed in V2.1) · P5 (machine.js paints EY; the .98rem hot rule exists) */
/* THE FILM ROW · under the three doors: WATCH THE DECODE → (Design's fourth plate, dormant until the clip exists) · SHARE THE READING (the fifth door) */
.m-film{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
@media (max-width:719px){.m-film{grid-template-columns:1fr;}}
.m-watch,.m-share{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 12px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  box-shadow:inset 0 0 0 1px rgba(231,183,63,.45);color:rgba(238,242,238,.7);text-decoration:none;font:400 10px/1.3 var(--m-fm);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease;}
.m-watch svg,.m-share svg{display:block;flex:none;}
.m-watch:hover,.m-watch:focus-visible,.m-share:hover,.m-share:focus-visible{box-shadow:inset 0 0 0 1px rgba(231,183,63,.9);background:var(--m-wash);color:var(--m-gold-hi);}
.m-watch:focus-visible,.m-share:focus-visible{outline:1px solid var(--m-gold);outline-offset:2px;}
.m-watch.waiting{box-shadow:inset 0 0 0 1px rgba(231,183,63,.18);color:rgba(238,242,238,.46);cursor:default;pointer-events:none;}
.m-share.done{color:var(--m-cyan);box-shadow:inset 0 0 0 1px rgba(34,211,238,.6);}
/* THE MAGNET (JJ, 9 Sep) · on a desktop the decoder snaps into view when the scroll comes near it; the top of the page and the foot are the other two rests */
@media (hover:hover) and (min-width:1024px){
  html{scroll-snap-type:y proximity;}
  /* JJ, 9 Sep: no rest at the top — it reads as annoying on the way down; the decoder and the foot
     are the two rests. The decoder lands with air above it, not welded to the viewport's edge. */
  .machine{scroll-snap-align:start;scroll-margin-top:44px;}
  .foot{scroll-snap-align:end;}
}
/* the height budget · a whole decoder in a 900px-tall desktop viewport: the dials scale down, the reading tightens */
@media (min-width:1024px) and (max-height:1040px){.machine{--ds:.9;} .m-reading{padding:20px 24px 18px;gap:12px;} .m-gtext{margin-top:8px;} .m-cascade{min-height:calc(1.45em * 4.5);padding-top:10px;}}
@media (min-width:1024px) and (max-height:950px){.machine{--ds:.82;} .m-reading{gap:10px;} .m-total{min-height:calc(1.7em * 2.5);} .m-gtext{min-height:70px;} .m-cascade{font-size:17px;min-height:calc(1.45em * 4.5);}}

/* the short laptop (a 13" Air is ~790px of content): dials to .74, the ticker steps aside, the reading tightens once more — measured to fit 790 */
@media (min-width:1024px) and (max-height:890px){.machine{--ds:.74;margin:3vh auto 8vh;} .m-reading{padding:16px 22px 14px;gap:8px;} .m-total{min-height:calc(1.7em * 2.2);line-height:1.6;} .m-gtext{min-height:62px;margin-top:6px;} .m-cascade{font-size:16px;min-height:calc(1.45em * 4.5);padding-top:8px;} .m-ticker{display:none;} .m-rail,.m-base{padding:7px 18px;} .m-wordbox{font-size:clamp(1.4rem,3vw,2.2rem);} .m-def{font-size:17px;margin-top:-6px;}}

/* ── CODE · S6 (JJ, 9 Sep) · in the base each blade's address answers in its own colour ──
   The loop's livery, read from the estate: EXCALIBUR green · THE OVAL TABLE gold (the host's own,
   so it keeps the default) · MATTER purple. Nothing else in the base changes colour. */
.m-base a[href*="excalibur.no"]:hover,.m-base a[href*="excalibur.no"]:focus-visible{color:var(--m-ex-pure,#19ff6b);border-bottom-color:var(--m-ex-pure,#19ff6b);}
.m-base a[href*="atoms.no"]:hover,.m-base a[href*="atoms.no"]:focus-visible{color:var(--m-ma-pure,#a855f7);border-bottom-color:var(--m-ma-pure,#a855f7);}

/* ── CODE · S6 · ◇ THE ROW links out to the sentence, written (amireallyfree.no/youknow) ── */
.m-work .wk-more{margin-top:12px;padding-top:10px;border-top:1px solid rgba(231,183,63,.14);}
.m-work .wk-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 10.5px/1 var(--m-fm);
  letter-spacing:.16em;text-transform:uppercase;color:var(--m-gold);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.m-work .wk-more a i{font-style:normal;transition:transform .2s ease;}
.m-work .wk-more a:hover,.m-work .wk-more a:focus-visible{color:var(--m-gold-hi);border-bottom-color:var(--m-gold);}
.m-work .wk-more a:hover i{transform:translateX(3px);}

/* ══════════════════════════════════════════════════════════════════════════════
   CODE · V2.5 (JJ, 10 Sep) · FOUR DOORS TO THE SENTENCE
   The room at /youknow is the decoder's written twin and it was reachable from one place, inside
   a collapsed panel. Four ways in now, all of them quiet — the rail's plate, the sentence under the
   spine, and the two hedges, which are the reading's own words and belong to the page that reads
   them in full. Nothing grows, nothing takes a verb, nothing becomes a third door.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE RAIL'S PLATE · YOU ? NOW → the sentence (was a second printing of the seat, which the
   wheel and the working already carry — and the rail should not privilege one blade) ── */
.m-younow{display:inline-flex;align-items:center;gap:.42em;text-decoration:none;color:var(--m-ink);
  font-family:var(--m-fd);font-weight:800;font-size:10px;letter-spacing:.16em;line-height:1;white-space:nowrap;
  transition:box-shadow .2s ease,color .2s ease;}
.m-younow .yn{color:var(--m-gold);}
.m-younow .yq{position:relative;display:inline-grid;place-items:center;width:.72em;height:1em;}
.m-younow .ynq{width:.62em;height:.86em;overflow:visible;grid-area:1/1;transition:opacity .22s ease;}
.m-younow .ynq-bow{fill:none;stroke:var(--m-cyan);stroke-width:142.5;stroke-linecap:butt;transition:transform .32s cubic-bezier(.2,.8,.2,1);}
.m-younow .ynq-dot{fill:var(--m-gold);transform-box:fill-box;transform-origin:center;}
.m-younow .ynk{grid-area:1/1;font:800 1em/1 var(--m-fd);color:var(--m-gold-hi);opacity:0;transform:translateY(.06em);
  transition:opacity .26s cubic-bezier(.2,.8,.2,1) .14s,transform .3s cubic-bezier(.2,.8,.2,1) .14s;}
.machine.is-hot .m-younow .ynq-bow{transform:translateY(-63px) rotate(-18deg);}
.machine.is-hot .m-younow .ynq-dot{transform:translateY(63px);}
.machine.is-hot .m-younow .ynq{opacity:0;}
.machine.is-hot .m-younow .ynk{opacity:1;transform:none;}
.m-younow:hover,.m-younow:focus-visible{box-shadow:inset 0 0 0 1px rgba(231,183,63,.55),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 5px rgba(0,0,0,.5);}
.m-younow:hover .yn,.m-younow:focus-visible .yn{color:var(--m-gold-hi);}

/* ── 2 · THE SENTENCE under the spine opens the room that reads it ── */
.m-sent a{color:inherit;text-decoration:none;display:inline;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.m-sent a:hover,.m-sent a:focus-visible{color:var(--m-ink);border-bottom-color:rgba(231,183,63,.4);}
.m-sent .m-go{font-style:normal;margin-left:.5em;color:var(--m-gold);opacity:0;display:inline-block;
  transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease;}
.m-sent a:hover .m-go,.m-sent a:focus-visible .m-go{opacity:1;transform:none;}

/* ── 3 · 4 · THE TWO HEDGES · gold under the cursor, and they open the reading in full.
   They stay hedges: no underline at rest, no arrow, no verb — only the colour answers. ── */
.m-hedgelink{color:inherit;text-decoration:none;transition:color .2s ease;}
.m-hedgelink:hover,.m-hedgelink:focus-visible{color:var(--m-gold);}
.m-rail .m-hedgelink:focus-visible,.m-base .m-hedgelink:focus-visible{outline:1px solid var(--m-gold);outline-offset:3px;}

/* ══════════════════════════════════════════════════════════════════════════════
   CODE · V2.6 · THE MOBILE PASS (measured on a real iPhone emulation at 390 · 375)
   Inline links inside running prose keep their line box — WCAG 2.5.8 exempts them and padding
   them would collide with the lines above. These are the standalone controls that were under the
   44px floor, and the labels that were genuinely too small to read on a phone.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:719px){
  /* the estate's three addresses in the base were 15px-tall targets. Vertical padding on an inline
     box expands the hit area without moving a single line of layout. */
  .m-base a{padding:13px 3px;margin:-13px 0;}
  /* the rail's hedge is now a door to the sentence — it was 9px */
  .m-rail .m-hedgelink{display:inline-block;padding:12px 2px;margin:-12px 0;font-size:10px;}
  .m-base .m-hedgelink{display:inline-block;padding:10px 2px;margin:-10px 0;}
  /* the sentence under the spine is a door too */
  .m-sent a{display:inline-block;padding:6px 0;}
  /* the five doors under the reading carried a 10px label */
  .m-out a span,.m-watch span,.m-share span{font-size:11px;letter-spacing:.1em;}
  .m-out a,.m-watch,.m-share{min-height:48px;}
  /* the readouts' smallest lines */
  .m-gtext small,.m-hourwin,.m-gtext .dash{font-size:10.5px;}
  .m-cat{font-size:9px;}
  /* the rail's own plate: YOU ? NOW is a door, and it was 22px tall */
  .m-younow{min-height:38px;padding:6px 11px;font-size:10.5px;}
  /* TRY on the phone */
  .m-try button{min-height:40px;font-size:10.5px;}
}
@media (max-width:719px){
  /* the last of the 38–42px near-misses: every one of these is a control, not prose */
  .m-younow{min-height:44px;}
  .m-home{min-height:44px;padding:0 14px;}
  .m-rail .m-hedgelink{padding:15px 2px;margin:-15px 0;}
  .m-qmark{min-height:44px;}
  .m-qdoor{min-height:44px;}
  .m-base a{padding:15px 3px;margin:-15px 0;}
}

/* ══ V2.8 · THE NOW MARK (AIRF-I02 v1 · JJ, 28 Sep) ══
   On FREEDOM's reading, while Oslo's clock reads 19:00–19:59, THE SEAT's hour line reads "19:00 – 20:00 · NOW". A three-letter
   mono chip inside THE SEAT's caption: the Oval's gold as a hairline, no fill — never a colour wash. One 200 ms fade in, still
   under reduced motion. machine.js decides when (Europe/Oslo via Intl); this sheet only says how it looks. */
.m-now b{display:inline-block;font-weight:600;font-size:.9em;letter-spacing:.16em;line-height:1.35;padding:0 .24em 0 .4em;margin-left:.1em;border:1px solid rgba(244,217,118,.55);border-radius:2px;color:var(--m-gold-hi);}
.m-now:not([hidden]){animation:m-now-in .2s ease-out both;}
@keyframes m-now-in{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.m-now:not([hidden]){animation:none;}}
@media (max-width:719px){.m-now{font-size:10.5px;}}