/* ══════════════════════════════════════════════════════════════════════════════
   amireallyfree.no/youknow · THE SENTENCE · youknow.css  (Design → CODE · S6 · V2 · 9 Sep 2026)
   THE ROOM IS THE DECODER LAID FLAT. Every material is machine.css's, read and re-set: the plate (two hairlines with the base
   chip's cut, the milled face, scanlines), the metal hairline (#F4D976 → #E8C547 → #D4AF37 → #9A7A1F) with the travelling glint
   (#FFF7D6), the LED, the green-rimmed letter tiles, the ⚗ element tile (Major Mono), the gold seat lozenge (Cinzel 700), the
   spine wave, the split ? (cyan bow · gold dot), the loosen → the K in place at 320ms. No new hex: every colour below is
   machine.css's, site.css's or atoms.no's legend (vendored in machine.js). DS tokens first, AIRF's site tokens second, hex last.
   Host A (amireallyfree.no): link after site.css + machine.css + arrival.css — the faces are already self-hosted there.
   Host B (the hub): load Orbitron 800 · Cormorant Garamond 400/400i · IBM Plex Mono 400/500 · Major Mono Display · Cinzel 700.
   Layout law: the room is its own container (@container yk). ≤719px is the phone. ≤900 the doors go 2×2. ≥1024 THE ROW is two columns.
   Motion law (brief §4): once — the arrival (CSS delays from load; #key or reduced motion = none), the dust (JS), the hand's sweep
   (.is-arrived, JS). At rest — the LED 2.2s · one breath (the row's ? dot) · one glint at a time (five plates share a 7s phase)
   · the spine wave 9s · the now hand (JS, 60s). On event — the key turn 320ms · a door's hover 180ms · the working's open.
   No JavaScript is required for any content: the seven cards are <details>, both totals are in the DOM, the ? turns on
   :hover / :focus-visible / #key via :has(). JS (CODE, from youknow-motion.spec.md) adds: .is-key (touch), .is-arrived (sections),
   the dust, --now on the wheel, .is-away (hidden tab).
   Review hooks (harmless in production, strip if you like): --yk-at (a negative offset that freezes the arrival at a time when the
   room carries [data-freeze]) · [data-turn="mid"] (the key turn held at 160ms).
   ══════════════════════════════════════════════════════════════════════════════ */
@property --yk-ga{syntax:'<angle>';inherits:false;initial-value:0deg;}
@property --yk-draw{syntax:'<percentage>';inherits:false;initial-value:100%;}

.yk-room{
  --yk-gold:var(--lc-oval,var(--gold,#e7b73f));--yk-gold-hi:#f4d976;--yk-gold-lo:#d4af37;--yk-cyan:var(--lc-free,var(--cyan,#22d3ee));
  --yk-exca:var(--lc-exca,#19ff6b);--yk-matter:var(--lc-trinity-matter,var(--lc-pro,#a855f7));
  --yk-ink:var(--lc-txt,var(--ink,#eef2ee));--yk-base:var(--lc-bg,var(--base,#09090f));
  --yk-dim:rgba(238,242,238,.46);--yk-mute:rgba(238,242,238,.62);--yk-rest:rgba(238,242,238,.76);--yk-hair:rgba(238,242,238,.22);
  --yk-line:rgba(231,183,63,.28);--yk-line-2:rgba(231,183,63,.14);--yk-wash:rgba(231,183,63,.10);
  --yk-metal:linear-gradient(180deg,#F4D976 0%,#E8C547 22%,#D4AF37 60%,#9a7a1f 100%);
  --yk-metal-text:linear-gradient(178deg,#F4D976 0%,#E7B73F 50%,#D4AF37 100%);
  --yk-glint:#FFF7D6;
  --yk-ex:color-mix(in srgb,#19ff6b 40%,#e7b73f);--yk-ma:color-mix(in srgb,#a855f7 40%,#e7b73f);--yk-ma-glow:color-mix(in srgb,#a855f7 25%,#09090f);
  --yk-tile-rim:rgba(25,255,107,.45);--yk-tile-bg:rgba(25,255,107,.06);--yk-tile-ink:rgba(25,255,107,.9);
  --yk-fd:var(--lc-font-display,'Orbitron',system-ui,sans-serif);--yk-fs:'Cormorant Garamond',Georgia,serif;--yk-fm:var(--lc-font-data,'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace);
  --yk-fmono:'Major Mono Display',ui-monospace,monospace;--yk-fplate:'Cinzel',Georgia,serif;
  --yk-ease:cubic-bezier(.2,.8,.2,1);
  --yk-plate-w:min(1320px,94cqw);--yk-pad:44px;--yk-at:0s;
  container:yk / inline-size;position:relative;color:var(--yk-ink);font:400 16px/1.5 var(--yk-fs);-webkit-font-smoothing:antialiased;padding:clamp(18px,2.4cqw,36px) 0 0;}
.yk-room *,.yk-room *::before,.yk-room *::after{box-sizing:border-box;}
.yk-room :where(a){color:inherit;text-decoration:none;}
.yk-room :focus-visible{outline:1px solid var(--yk-gold);outline-offset:3px;border-radius:2px;}
.yk-room :where(h1,h2,h3,p,ul,ol,blockquote,figure){margin:0;padding:0;}
.yk-room :where(ul,ol){list-style:none;}
.yk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* ── the plate · the decoder's anatomy, as layers: outer hairline · hole · the ring (metal or plain) · the glint · the face · grain · scanlines ── */
.yk-plate{position:relative;width:var(--yk-plate-w);margin:0 auto;}
.yk-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));}
.yk-ring2{position:absolute;inset:-6px;--cut:11.5px;background:rgba(231,183,63,.09);pointer-events:none;}
.yk-ring2-hole{position:absolute;inset:-5px;--cut:10.9px;background:var(--yk-base);pointer-events:none;}
.yk-ring{position:absolute;inset:0;--cut:8px;background:var(--yk-line);pointer-events:none;transition:background .2s ease,opacity .2s ease;}
.yk-ring.metal{background:var(--yk-metal);opacity:.9;}
.yk-glint{position:absolute;inset:0;--cut:8px;background:var(--yk-glint);opacity:0;pointer-events:none;
  -webkit-mask:conic-gradient(from var(--yk-ga) at 50% 50%,#000 0deg 14deg,transparent 15deg);mask:conic-gradient(from var(--yk-ga) at 50% 50%,#000 0deg 14deg,transparent 15deg);
  animation:yk-glint 7s linear calc(var(--gs,0) * 1.4s) infinite;}
.yk-face{position:absolute;inset:1.5px;--cut:7.2px;background:linear-gradient(180deg,rgba(231,183,63,.04),rgba(9,9,15,0) 55%),var(--yk-base);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 6px rgba(0,0,0,.5);pointer-events:none;}
.yk-grain{position:absolute;inset:1.5px;width:calc(100% - 3px);height:calc(100% - 3px);--cut:7.2px;opacity:.035;mix-blend-mode:soft-light;pointer-events:none;}
.yk-scan{position:absolute;inset:1.5px;--cut:7.2px;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(231,183,63,.012) 2px 3px);pointer-events:none;}
.yk-inner{position:relative;}
/* the glint · one at a time: five plates share one 7s phase (hero 0 · KEY card 1 · YOU NOW 2 · YOU K NOW 3 · the clock 4), 1.4s each, top-left first, clockwise */
@keyframes yk-glint{0%{--yk-ga:-30deg;opacity:0;}.6%{opacity:.85;}19.4%{opacity:.85;}20%{--yk-ga:330deg;opacity:0;}100%{--yk-ga:330deg;opacity:0;}}

/* ── inline vocabulary · gold words · the cyan law · seat marks · element micro-tiles ── */
.yk-g{color:var(--yk-gold);font-style:normal;font-weight:400;text-shadow:0 0 12px rgba(231,183,63,.16);}
a.yk-g{border-bottom:1px solid transparent;transition:border-color .18s ease;}
a.yk-g:hover,a.yk-g:focus-visible{border-bottom-color:var(--yk-gold);}
.yk-free{color:var(--yk-cyan);font-style:normal;}
.yk-m{font-family:var(--yk-fm);font-size:.78em;letter-spacing:.06em;font-style:normal;}
.yk-el{display:inline-flex;align-items:baseline;gap:4px;padding:0 5px;margin:0 1px;font:400 .68em/1.7 var(--yk-fm);letter-spacing:.06em;color:var(--yk-gold);box-shadow:inset 0 0 0 1px var(--yk-line);border-radius:2px;vertical-align:2px;white-space:nowrap;font-style:normal;}
.yk-el b{font-weight:500;color:var(--yk-gold);}
.yk-el small{font-size:1em;color:var(--yk-gold);}
.yk-hedge{font:italic 400 15px/1.3 var(--yk-fs);color:var(--yk-mute);letter-spacing:.04em;text-transform:none;white-space:nowrap;}
.yk-chip{display:inline-flex;align-items:center;gap:7px;min-height:22px;padding:3px 10px;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:500 9.5px/1 var(--yk-fm);letter-spacing:1.7px;text-transform:uppercase;color:var(--yk-dim);white-space:nowrap;}
.yk-chip 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);}
.yk-chip b{font-weight:500;color:var(--yk-ink);}
.yk-gi{background:var(--yk-metal-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}

/* ── the split ? · the decoder's chip: Orbitron 800's own outline as geometry — cyan bow (a stroke along the centreline), gold dot ── */
.yk-qm{display:inline-grid;grid-template-areas:'s';justify-items:center;align-items:baseline;width:.82em;vertical-align:baseline;}
.yk-qsvg{grid-area:s;display:block;height:.72em;width:auto;overflow:visible;transition:opacity .16s ease .2s;}
.yk-qbow{fill:none;stroke:var(--yk-cyan);stroke-width:142.5;stroke-linecap:butt;transform-origin:307px 298px;transition:transform .32s var(--yk-ease);}
.yk-qdot{fill:var(--yk-gold);transition:transform .32s var(--yk-ease),fill .32s ease;}
.yk-k{grid-area:s;font:inherit;line-height:1;opacity:0;transform:translateY(.05em);transition:opacity .28s var(--yk-ease) .16s,transform .32s var(--yk-ease) .16s;}
/* the breath · one per viewport: the row's dot only (3s · 1 → .78 → 1 · floor .82) */
.yk-row .yk-qdot{transform-box:fill-box;transform-origin:center;animation:yk-breathe 3s ease-in-out infinite;}
@keyframes yk-breathe{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.78);opacity:.82;}}
/* THE KEY TURN · hover / focus the ? (row or plate) · #key · .is-key (touch, JS): the loosen (bow up 3px and −18°, dot down and brighter) then the gold K in place */
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-qbow{transform:translateY(-63px) rotate(-18deg);}
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-qdot{transform:translateY(63px) scale(1);fill:var(--yk-gold-hi);animation:none;}
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-qsvg{opacity:0;}
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-k{opacity:1;transform:none;}
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-tot-rest{opacity:0;}
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-tot-held{opacity:1;}
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-totals{box-shadow:inset 0 0 0 1px rgba(231,183,63,.45),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 5px rgba(0,0,0,.5);}
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-row .yk-caret{opacity:0;}
/* review hook · the turn held at 160ms */
.yk-room[data-turn="mid"] .yk-qbow{transform:translateY(-32px) rotate(-9deg);}
.yk-room[data-turn="mid"] .yk-qdot{transform:translateY(32px);fill:var(--yk-gold-hi);animation:none;}
.yk-room[data-turn="mid"] .yk-qsvg{opacity:.55;}
.yk-room[data-turn="mid"] .yk-k{opacity:.5;transform:translateY(.025em);}
.yk-room[data-turn="mid"] .yk-tot-rest{opacity:.5;} .yk-room[data-turn="mid"] .yk-tot-held{opacity:.5;}

/* ═══ THE HERO · the poster on the decoder's plate ═══ */
.yk-hero{--cut:8px;}
.yk-rail{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:11px 20px;border-bottom:1px solid var(--yk-line);font:500 10.5px/1 var(--yk-fm);letter-spacing:.16em;text-transform:uppercase;color:var(--yk-dim);}
.yk-rail-l{display:flex;align-items:center;gap:10px;}
.yk-rail-l b{color:var(--yk-gold);font-weight:500;}
.yk-led{width:5px;height:5px;border-radius:50%;background:var(--yk-gold);box-shadow:0 0 6px rgba(231,183,63,.7);animation:yk-led 2.2s ease-in-out infinite;flex:none;}
.yk-loz{width:5px;height:5px;transform:rotate(45deg);background:var(--yk-gold);flex:none;}
.yk-rail-r{display:flex;align-items:center;gap:16px;}
.yk-poster{padding:clamp(28px,4cqw,54px) var(--yk-pad) clamp(26px,3.2cqw,42px);}
/* the row · the largest type on the page · two lines with the plate's break · the second line measured so WITNESS never wraps */
.yk-row{--fs:min(clamp(30px,4.6cqw,68px),calc((var(--yk-plate-w) - 2 * var(--yk-pad)) / 22.6));position:relative;display:flex;flex-direction:column;gap:.16em;font:800 var(--fs)/1.1 var(--yk-fd);letter-spacing:.06em;color:var(--yk-rest);filter:drop-shadow(0 0 28px rgba(231,183,63,.16));}
.yk-line{display:flex;align-items:baseline;white-space:nowrap;}
.yk-w{position:relative;display:inline-flex;align-items:baseline;}
.yk-w + .yk-w::before{content:'·';color:var(--yk-dim);font-weight:400;margin:0 .5em;letter-spacing:0;}
.yk-L{position:relative;display:inline-block;background:var(--yk-metal-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.yk-L::after{content:attr(data-l);position:absolute;left:0;top:0;color:var(--yk-gold-hi);-webkit-text-fill-color:var(--yk-gold-hi);opacity:0;pointer-events:none;animation:yk-wave 9s linear calc(1.2s + var(--i,0) * .12s - var(--yk-at)) infinite;}
@keyframes yk-wave{0%,4.7%,100%{opacity:0;}2.3%{opacity:1;}}
.yk-q{justify-content:center;}
.yk-qa{position:relative;display:inline-flex;align-items:baseline;justify-content:center;min-height:44px;color:inherit;}
.yk-qa::before{content:'';position:absolute;inset:-8px -6px;}                       /* 44px to hit */
.yk-q .yk-k{background:var(--yk-metal-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.yk-row .yk-qsvg{filter:drop-shadow(0 0 10px rgba(34,211,238,.18));}
/* the ?'s own wave · the bow lifts and the dot drops as the highlight passes (9s, 4th in the row) */
.yk-room:not(.is-key):not(:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-row .yk-qbow{animation:yk-wave-bow 9s linear calc(1.56s - var(--yk-at)) infinite;}
.yk-room:not(.is-key):not(:has(.yk-qa:hover,.yk-qa:focus-visible,#key:target)) .yk-row .yk-qdot{animation:yk-breathe 3s ease-in-out infinite,yk-wave-dot 9s linear calc(1.56s - var(--yk-at)) infinite;}
@keyframes yk-wave-bow{0%,4.7%,100%{transform:none;}2.3%{transform:translateY(-63px) rotate(-18deg);}}
@keyframes yk-wave-dot{0%,4.7%,100%{translate:0 0;}2.3%{translate:0 63px;}}
.yk-caret{position:absolute;right:-.22em;top:.16em;width:2px;height:.72em;background:var(--yk-gold);opacity:0;pointer-events:none;}
/* the totals plate · one plate at rest, YOU ? NOW and the two lines · held: YOU K NOW, the lines flip · both in the DOM */
.yk-totals{position:relative;margin-top:clamp(22px,3cqw,40px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 44px;align-items:center;padding:22px 30px;overflow:hidden;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  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);transition:box-shadow .32s ease;}
.yk-acro{display:flex;align-items:baseline;gap:.2em;white-space:nowrap;font:800 clamp(30px,3.7cqw,54px)/1 var(--yk-fd);letter-spacing:.08em;filter:drop-shadow(0 0 22px rgba(231,183,63,.16));}
.yk-acro > span{background:var(--yk-metal-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.yk-acro .yk-qa{min-height:0;}
.yk-acro .yk-k{background:var(--yk-metal-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.yk-tots{display:grid;grid-template-areas:'t';min-width:0;}
.yk-tot{grid-area:t;display:grid;gap:9px;font:400 12.5px/1.6 var(--yk-fm);letter-spacing:.07em;color:var(--yk-mute);transition:opacity .32s var(--yk-ease);text-wrap:pretty;}
.yk-tot li + li{padding-top:8px;border-top:1px solid var(--yk-line-2);}
.yk-tot b{font-weight:500;color:var(--yk-gold);}
.yk-tot em{font-style:normal;color:var(--yk-ink);}
.yk-tot-held{opacity:0;}
.yk-glare{position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.12) 50%,transparent 68%);transform:translateX(-130%);pointer-events:none;}
.yk-sentence{margin-top:clamp(18px,2cqw,26px);font:italic 400 clamp(18px,1.6cqw,22px)/1.4 var(--yk-fs);color:var(--yk-mute);text-wrap:pretty;}
.yk-sentence b{font-style:normal;font-weight:500;color:var(--yk-gold);}

/* ═══ THE ARRIVAL · once, on load, ≤1.9s · every delay minus --yk-at (a review offset, 0 in production) · #key and reduced motion: none ═══ */
.ar{animation-fill-mode:both;}
.ar-ring{-webkit-mask:conic-gradient(from -55deg at 50% 50%,#000 var(--yk-draw),transparent 0);mask:conic-gradient(from -55deg at 50% 50%,#000 var(--yk-draw),transparent 0);animation:yk-draw .7s var(--yk-ease) calc(0s - var(--yk-at)) both;}
.ar-ring2{animation:yk-fade-in .3s ease calc(.7s - var(--yk-at)) both;}
.ar-rail{animation:yk-fade-in .5s ease calc(.25s - var(--yk-at)) both;}
.ar-L{animation:yk-type-in .22s var(--yk-ease) calc(.12s + var(--i,0) * .06s - var(--yk-at)) both;}
.ar-caret{animation:yk-fade-in .1s ease calc(.48s - var(--yk-at)) both,yk-caret .55s steps(1) calc(.58s - var(--yk-at)) 3,yk-fade-out .15s ease calc(2.25s - var(--yk-at)) forwards;}
.ar-led{animation:yk-led 2.2s ease-in-out infinite,yk-fade-in .2s ease calc(.48s - var(--yk-at)) both;}
.ar-scan{animation:yk-fade-in .4s ease calc(.48s - var(--yk-at)) both;}
.ar-tot{animation:yk-fade-in .3s ease calc(.56s - var(--yk-at)) both;}
.ar-sent{animation:yk-rise .5s var(--yk-ease) calc(.9s - var(--yk-at)) both;}
.ar-glare{animation:yk-shimmer .9s ease-in-out calc(1.15s - var(--yk-at)) both;}
.yk-room:has(#key:target) .ar,.yk-room.is-settled .ar{animation-duration:0s !important;animation-delay:0s !important;}
.yk-room:has(#key:target) .ar-led,.yk-room.is-settled .ar-led{animation:yk-led 2.2s ease-in-out infinite;}
.yk-room[data-freeze] .ar,.yk-room[data-freeze] .yk-L::after,.yk-room[data-freeze] .yk-qbow,.yk-room[data-freeze] .yk-qdot,.yk-room[data-freeze] .yk-glint{animation-play-state:paused !important;}
@keyframes yk-draw{from{--yk-draw:0%;}to{--yk-draw:100%;}}
@keyframes yk-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes yk-fade-out{from{opacity:1;}to{opacity:0;}}
@keyframes yk-rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes yk-type-in{from{opacity:0;transform:translateX(-5px);}to{opacity:1;transform:none;}}
@keyframes yk-led{0%,100%{opacity:1;}50%{opacity:.22;}}
@keyframes yk-caret{0%,100%{opacity:1;}50%{opacity:0;}}
@keyframes yk-shimmer{from{transform:translateX(-130%);}to{transform:translateX(130%);}}
@keyframes yk-work-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@keyframes yk-hand-in{from{transform:rotate(0deg);}to{transform:rotate(210deg);}}

/* ═══ SECTIONS ═══ */
.yk-sec{padding:clamp(44px,5.4cqw,80px) 0 0;}
.yk-h{width:var(--yk-plate-w);margin:0 auto 16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font:500 10.5px/1.4 var(--yk-fm);letter-spacing:.2em;text-transform:uppercase;color:var(--yk-dim);}
.yk-h b{color:var(--yk-gold);font-weight:500;}
.yk-h i{font-style:normal;color:var(--yk-gold);}

/* ═══ THE SEVEN · readings, not rows · each card a plate of the decoder's instruments in miniature ═══ */
.yk-cards{width:var(--yk-plate-w);margin:0 auto;display:grid;gap:12px;}
.yk-card{position:relative;--cut:6px;}
.yk-card .yk-ring{--cut:6px;}
.yk-card:hover .yk-ring{background:rgba(231,183,63,.45);}
.yk-card:has(details[open]) .yk-ring{background:var(--yk-metal);opacity:.9;}
.yk-card .yk-face{inset:1px;--cut:5.4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -2px 6px rgba(0,0,0,.45);}
.yk-card .yk-glint{--cut:6px;animation:none;}
.yk-card.is-key:has(details[open]) .yk-glint{animation:yk-glint 7s linear 1.4s infinite;}
.yk-card.is-key:has(details[open]) .yk-face{background:linear-gradient(180deg,rgba(231,183,63,.06),rgba(9,9,15,0) 55%),var(--yk-base);}
.yk-card details{scroll-margin-top:24px;}
.yk-sum{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(0,1.4fr) minmax(0,1.05fr) minmax(0,1fr);gap:14px 28px;align-items:center;padding:18px 26px 14px;}
.yk-sum::-webkit-details-marker{display:none;}
.yk-sum::marker{content:'';}
.yk-sum:focus-visible{outline-offset:-3px;}
.yk-sum-w{display:flex;flex-direction:column;gap:6px;min-width:0;}
.yk-word{font:800 26px/1.15 var(--yk-fd);letter-spacing:.06em;color:var(--yk-ink);white-space:nowrap;}
.yk-word b{font-weight:800;background:var(--yk-metal-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.yk-def{font:italic 400 17px/1.3 var(--yk-fs);color:rgba(238,242,238,.72);}
.yk-tog{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-4px 0 -12px -4px;padding:0 4px;font:500 10.5px/1 var(--yk-fm);letter-spacing:.18em;text-transform:uppercase;color:var(--yk-dim);white-space:nowrap;transition:color .2s ease;}
.yk-tog s{width:5px;height:5px;flex:none;text-decoration:none;transform:rotate(45deg);background:rgba(231,183,63,.85);transition:transform .2s ease;}
.yk-sum:hover .yk-tog,.yk-sum:focus-visible .yk-tog{color:var(--yk-gold);}
details[open] .yk-tog s{transform:rotate(45deg) scale(1.3);}
details[open] .yk-tog .show{display:none;}
details:not([open]) .yk-tog .hide{display:none;}
.yk-marks{display:contents;}
.yk-mark{display:flex;flex-direction:column;gap:8px;min-width:0;}
.yk-mark-el,.yk-mark-seat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:center;}
/* ⚔ THE SUM as the letter tiles · green-rimmed as the decoder's arc strip · the chain beneath */
.yk-tiles{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-height:27px;}
.yk-tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:21px;height:27px;border:1px solid var(--yk-tile-rim);background:var(--yk-tile-bg);border-radius:2px;line-height:1;}
.yk-tile b{font:500 10.5px/1 var(--yk-fm);color:var(--yk-tile-ink);text-shadow:0 0 8px rgba(25,255,107,.35);letter-spacing:0;}
.yk-tile small{font:400 7.5px/1 var(--yk-fm);color:var(--yk-tile-ink);text-shadow:0 0 8px rgba(25,255,107,.35);margin-top:1px;letter-spacing:0;}
.yk-tile.k{border-color:rgba(244,217,118,.9);background:rgba(231,183,63,.12);box-shadow:0 0 14px rgba(231,183,63,.28);}
.yk-tile.k b,.yk-tile.k small{color:var(--yk-gold-hi);text-shadow:0 0 8px rgba(231,183,63,.45);}
.yk-tiles .eq{font:500 12px/1 var(--yk-fm);letter-spacing:.06em;color:var(--yk-ink);margin-left:6px;}
.yk-tile.ghost{border-style:dashed;border-color:rgba(231,183,63,.35);background:none;}
.yk-tiles-lg{gap:5px;} .yk-tiles-lg .yk-tile{width:26px;height:32px;} .yk-tiles-lg .yk-tile b{font-size:12.5px;} .yk-tiles-lg .yk-tile small{font-size:8.5px;} .yk-tiles-lg .eq{font-size:14px;margin-left:8px;}
.yk-rd{display:flex;flex-direction:column;gap:3px;min-width:0;font:400 14px/1.3 var(--yk-fm);letter-spacing:.04em;color:var(--yk-ink);}
.yk-rd b{font-weight:500;}
.yk-rd em{font-style:normal;font-size:10px;line-height:1.5;letter-spacing:.08em;color:var(--yk-mute);}
.yk-rd .yk-key{font:400 18px/1.1 var(--yk-fs);letter-spacing:.01em;color:var(--yk-ink);}
/* ⚗ THE ELEMENT as the tile · Major Mono symbol · Z top-left · the category hairline in atoms.no's hue */
.yk-eltile{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none;border:1px solid rgba(238,242,238,.16);border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);background:radial-gradient(circle at 50% 42%,var(--yk-ma-glow) 0%,var(--yk-base) 74%);}
.yk-eltile::after{content:'';position:absolute;inset:3px;border-radius:1px;border:1px solid var(--cat,rgba(238,242,238,.12));opacity:.45;pointer-events:none;}
.yk-eltile b{font:400 19px/1 var(--yk-fmono);color:var(--yk-ink);letter-spacing:0;padding-top:4px;}
.yk-eltile small{position:absolute;top:5px;left:6px;font:400 7.5px/1 var(--yk-fm);letter-spacing:.1em;color:var(--yk-dim);}
.yk-cat{display:inline-flex;align-self:flex-start;padding:2px 5px;border:1px solid var(--cat,rgba(238,242,238,.18));border-radius:2px;font:400 7.5px/1 var(--yk-fm);letter-spacing:.14em;text-transform:uppercase;color:rgba(238,242,238,.7);white-space:nowrap;}
/* ○ THE SEAT as the lozenge · Cinzel 700 on the gold-metallic plate */
.yk-seat{display:inline-flex;align-items:center;justify-content:center;width:48px;height:26px;flex:none;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%,0 50%);background:var(--yk-metal);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);font:700 12.5px/1 var(--yk-fplate);color:var(--yk-base);letter-spacing:.02em;filter:drop-shadow(0 0 6px rgba(231,183,63,.35));}
.yk-line1{display:none;grid-column:1 / -1;font:400 10.5px/1.5 var(--yk-fm);letter-spacing:.06em;color:var(--yk-mute);}
.yk-line1 b{font-weight:500;color:var(--yk-ink);}
/* the working · open ═ the cascade (gold words as hash doors) · TRY as doors · the three lines · the four doors */
.yk-body{margin:0 26px;padding:18px 0 26px;border-top:1px solid var(--yk-line-2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:'cas work' 'try work' 'doors doors';grid-template-rows:auto 1fr auto;gap:16px 40px;align-content:start;}
.yk-cascade{grid-area:cas;} .yk-try{grid-area:try;align-self:start;margin-top:0;} .yk-work{grid-area:work;margin-top:0;padding:0 0 0 32px;border-top:0;border-left:1px solid var(--yk-line-2);max-width:none;} .yk-doors{grid-area:doors;margin-top:8px;}
details[open] .yk-body > *{animation:yk-work-in .24s var(--yk-ease) both;}
details[open] .yk-body > :nth-child(2){animation-delay:.08s;} details[open] .yk-body > :nth-child(3){animation-delay:.16s;} details[open] .yk-body > :nth-child(4){animation-delay:.24s;}
.yk-cascade{font:italic 400 20px/1.45 var(--yk-fs);color:var(--yk-ink);max-width:64ch;text-wrap:pretty;}
.yk-try{margin-top:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:30px;}
.yk-try small{display:inline-flex;align-items:center;gap:7px;font:500 9px/1 var(--yk-fm);letter-spacing:.2em;text-transform:uppercase;color:var(--yk-dim);margin-right:2px;}
.yk-try small::before{content:'';width:5px;height:5px;transform:rotate(45deg);background:var(--yk-gold);}
.yk-tryw{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:30px;padding:0 12px;box-shadow:inset 0 0 0 1px var(--yk-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(--yk-fm);letter-spacing:.14em;text-transform:uppercase;color:rgba(238,242,238,.7);white-space:nowrap;transition:background .2s ease,color .2s ease;}
.yk-tryw::before{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px;}
.yk-tryw:hover,.yk-tryw:focus-visible{background:var(--yk-metal);color:var(--yk-base);}
.yk-tryw i{position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);transform:translateX(-130%);pointer-events:none;}
.yk-tryw:hover i{animation:yk-shimmer .9s ease-in-out 1;}
.yk-work{margin-top:20px;padding-top:16px;border-top:1px solid var(--yk-line-2);display:grid;gap:12px;max-width:66ch;}
.yk-wl small{display:flex;align-items:center;gap:7px;font:400 9.5px/1 var(--yk-fm);letter-spacing:.2em;text-transform:uppercase;color:var(--yk-dim);margin-bottom:5px;}
.yk-wl small .mk{font-size:11px;font-style:normal;}
.yk-wl[data-blade=exca] .mk{color:var(--yk-ex);} .yk-wl[data-blade=oval] .mk{color:var(--yk-gold-hi);} .yk-wl[data-blade=matter] .mk{color:var(--yk-ma);}
.yk-wl small b{font-weight:500;color:var(--yk-dim);}
.yk-wl p{font:400 16.5px/1.42 var(--yk-fs);color:var(--yk-ink);text-wrap:pretty;}
.yk-wl p q{quotes:"\201C" "\201D";font-style:italic;}
.yk-doors{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.yk-door{--door:var(--yk-gold-hi);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 10px;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 color-mix(in srgb,var(--door) 35%,transparent);font:400 10px/1.3 var(--yk-fm);letter-spacing:.12em;text-transform:uppercase;color:rgba(238,242,238,.7);white-space:nowrap;text-align:center;transition:color .18s ease,background .18s ease,box-shadow .18s ease;}
.yk-door:hover,.yk-door:focus-visible{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--door) 90%,transparent);background:color-mix(in srgb,var(--door) 12%,transparent);color:var(--door);}
.yk-door i{font-style:normal;font-size:11px;color:var(--door);}
.yk-door[data-blade=exca]{--door:var(--yk-exca);}
.yk-door[data-blade=matter]{--door:var(--yk-matter);}
.yk-door[data-blade=live]{--door:var(--yk-gold);box-shadow:inset 0 0 0 1px rgba(231,183,63,.6);background:var(--yk-wash);color:var(--yk-ink);}

/* ═══ THE ROW · five insights, five plates, each with its diagram · two columns ≥1024 ═══ */
.yk-paras{width:var(--yk-plate-w);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.yk-para{position:relative;--cut:6px;}
.yk-para .yk-ring{--cut:6px;} .yk-para .yk-face{inset:1px;--cut:5.4px;}
.yk-para:nth-child(5){grid-column:1 / -1;}
.yk-para .yk-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 30px;align-items:center;padding:22px 26px;min-height:150px;}
.yk-para p{font:400 18px/1.5 var(--yk-fs);color:var(--yk-ink);text-wrap:pretty;max-width:52ch;}
.yk-dia{display:flex;align-items:center;justify-content:center;flex:none;}
.yk-dia svg{display:block;overflow:visible;}
.yk-dia .ring-a{fill:none;stroke:rgba(231,183,63,.18);stroke-width:1;}
.yk-dia .ring-b{fill:none;stroke:rgba(231,183,63,.3);stroke-width:1.5;}
.yk-dia .tick{stroke:rgba(231,183,63,.45);stroke-width:1;}
.yk-dia .seat{fill:rgba(9,9,15,.6);stroke:rgba(231,183,63,.22);stroke-width:1;}
.yk-dia .seat.lit{fill:var(--yk-gold);stroke:var(--yk-gold-hi);filter:drop-shadow(0 0 5px rgba(231,183,63,.6));}
.yk-dia .arc{fill:none;stroke:url(#yk-arc-grad);stroke-width:2.5;stroke-linecap:round;}
.yk-dia .link{stroke:var(--yk-gold);stroke-width:1.2;stroke-opacity:.7;}
.yk-dia .hn{font:500 8px var(--yk-fm);fill:rgba(231,183,63,.45);text-anchor:middle;letter-spacing:.05em;}
.yk-dia .lb{font:500 9.5px var(--yk-fm);fill:var(--yk-ink);letter-spacing:.12em;text-transform:uppercase;}
.yk-dia .lb.g{fill:var(--yk-gold);}
.yk-dia .lb.d{fill:var(--yk-mute);}
.yk-dia .keyname{font:400 13px var(--yk-fs);fill:var(--yk-ink);}
.yk-dia .hub{fill:var(--yk-gold);}
/* (2) the seven by the hour · a 24-hour strip in HTML so the words stay at type size */
.yk-strip24{position:relative;width:100%;height:72px;grid-column:1 / -1;}
.yk-strip24 .axis{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(231,183,63,.3);}
.yk-strip24 .tk{position:absolute;top:50%;width:1px;height:6px;margin-top:-3px;background:rgba(231,183,63,.35);}
.yk-strip24 .pt{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--yk-gold);box-shadow:0 0 6px rgba(231,183,63,.6);}
.yk-strip24 .pt.free{background:var(--yk-cyan);box-shadow:0 0 6px rgba(34,211,238,.6);}
.yk-strip24 .lb{position:absolute;transform:translateX(-50%);font:500 9.5px/1 var(--yk-fm);letter-spacing:.14em;text-transform:uppercase;color:var(--yk-ink);white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:3px;}
.yk-strip24 .lb small{font-size:8.5px;letter-spacing:.1em;color:var(--yk-dim);}
.yk-strip24 .lb.up{bottom:calc(50% + 10px);} .yk-strip24 .lb.dn{top:calc(50% + 10px);flex-direction:column-reverse;}
.yk-strip24 .lb.free{color:var(--yk-cyan);}
.yk-strip24 .lb.start{transform:none;align-items:flex-start;}
.yk-para.wide .yk-inner{grid-template-columns:minmax(0,1fr);}
/* (3) · (4) tiles and the ? */
.yk-eltiles{display:flex;align-items:flex-start;gap:22px;}
.yk-eltiles > div{display:flex;flex-direction:column;align-items:center;gap:7px;}
.yk-eltiles .yk-eltile{width:50px;height:50px;} .yk-eltiles .yk-eltile b{font-size:17px;}
.yk-eltiles small{font:400 8.5px/1.4 var(--yk-fm);letter-spacing:.1em;text-transform:uppercase;color:var(--yk-gold);text-align:center;max-width:110px;}
.yk-chain98{display:grid;grid-template-columns:auto auto auto;gap:8px 12px;align-items:center;justify-items:center;}
.yk-chain98 .arrow{font:400 14px/1 var(--yk-fm);color:var(--yk-dim);}
.yk-chain98 .wordchip{display:inline-flex;flex-direction:column;align-items:center;gap:4px;font:800 12px/1 var(--yk-fd);letter-spacing:.08em;color:var(--yk-ink);}
.yk-chain98 .wordchip small{font:400 9px/1 var(--yk-fm);letter-spacing:.1em;color:var(--yk-mute);}
.yk-chain98 .qmini{font:800 30px/1 var(--yk-fd);}
.yk-chain98 .qmini .yk-qm{width:.7em;}
.yk-chain98 .yk-eltile{width:44px;height:44px;} .yk-chain98 .yk-eltile b{font-size:15px;}

/* ═══ THE CLOCK · the centrepiece · the Oval's wheel · min(92cqw, 640px) · the seven lit gold · 7B cyan · the hand at 19:00 · the now hand ═══ */
.yk-clock{--cut:8px;--gs:4;}
.yk-clock .yk-inner{display:flex;flex-direction:column;align-items:center;padding:clamp(24px,3cqw,44px) var(--yk-pad) clamp(24px,3cqw,40px);}
.yk-wheel{display:block;width:min(92cqw,640px);height:auto;overflow:visible;}
.yk-wheel .face{fill:url(#yk-wheel-face);}
.yk-wheel .ring-a{fill:none;stroke:rgba(231,183,63,.18);stroke-width:1;}
.yk-wheel .ring-b{fill:none;stroke:rgba(231,183,63,.3);stroke-width:1.5;}
.yk-wheel .tick{stroke:rgba(231,183,63,.45);stroke-width:1.5;}
.yk-wheel .tick.min{stroke:rgba(231,183,63,.2);stroke-width:1;}
.yk-wheel .hn{font:500 11px var(--yk-fm);fill:rgba(231,183,63,.45);text-anchor:middle;dominant-baseline:middle;letter-spacing:.05em;}
.yk-wheel .seat{fill:rgba(9,9,15,.6);stroke:rgba(231,183,63,.22);stroke-width:1;}
.yk-wheel .seat.lit{fill:var(--yk-gold);stroke:var(--yk-gold-hi);filter:drop-shadow(0 0 6px rgba(231,183,63,.65));}
.yk-wheel .seat.free{fill:var(--yk-cyan);stroke:var(--yk-cyan);filter:drop-shadow(0 0 7px rgba(34,211,238,.7));}
.yk-wheel .lbl{font:800 15px var(--yk-fd);fill:var(--yk-ink);letter-spacing:.04em;}
.yk-wheel .lbl .h{font:500 11px var(--yk-fm);fill:var(--yk-dim);letter-spacing:.1em;}
.yk-wheel .lbl.free{fill:var(--yk-cyan);}
.yk-wheel .lbl.free .h{fill:rgba(34,211,238,.7);}
.yk-wheel .lbl.mid{text-anchor:middle;} .yk-wheel .lbl.end{text-anchor:end;}
.yk-wheel .hand{transform:rotate(210deg);transform-origin:320px 320px;}
.yk-wheel .hand line{stroke:var(--yk-gold);stroke-width:1.6;stroke-linecap:round;}
.yk-wheel .hand .core{stroke:#fff7d6;stroke-width:.6;opacity:.9;}
.yk-clock.is-arrived .yk-wheel .hand{animation:yk-hand-in .9s var(--yk-ease) both;}
.yk-wheel .now{stroke:rgba(231,183,63,.38);stroke-width:1;stroke-linecap:round;transform:rotate(calc(var(--now,0) * 30deg));transform-origin:320px 320px;transition:transform .6s var(--yk-ease);opacity:0;}
.yk-clock.has-now .yk-wheel .now{opacity:1;}
.yk-wheel .hub-glow{fill:rgba(231,183,63,.35);} .yk-wheel .hub{fill:var(--yk-gold);}
.yk-clock.its-now .yk-wheel .hub{animation:yk-led 2.2s ease-in-out infinite;}
.yk-clock.its-now .yk-wheel .lbl.free{filter:drop-shadow(0 0 8px rgba(34,211,238,.6));}
.yk-wheel .plate{filter:drop-shadow(0 0 6px rgba(231,183,63,.45));}
.yk-wheel .plate polygon{fill:url(#yk-plate-metal);}
.yk-wheel .plate text{font:700 11px var(--yk-fplate);fill:var(--yk-base);text-anchor:middle;dominant-baseline:middle;letter-spacing:.02em;}
.yk-strip{margin-top:clamp(16px,2cqw,24px);max-width:72ch;text-align:center;font:400 12.5px/1.8 var(--yk-fm);letter-spacing:.08em;color:var(--yk-mute);text-wrap:pretty;}
.yk-strip b{color:var(--yk-gold);font-weight:500;}
.yk-strip .yk-free{font-weight:500;}

/* ═══ THE KEY · the acronyms as tiles · two plates, one grid row, blocks aligned to the top ═══ */
.yk-acrs{width:var(--yk-plate-w);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.yk-acr{--cut:8px;width:auto;margin:0;}
.yk-acr:nth-child(1){--gs:2;} .yk-acr:nth-child(2){--gs:3;}
.yk-acr .yk-inner{display:grid;gap:18px;align-content:start;padding:26px 28px 30px;height:100%;}
.yk-acr-h{display:flex;align-items:baseline;gap:.22em;font:800 clamp(24px,2.6cqw,34px)/1.1 var(--yk-fd);letter-spacing:.08em;filter:drop-shadow(0 0 22px rgba(231,183,63,.14));}
.yk-acr-h span{background:var(--yk-metal-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.yk-acr-h .yk-kbox{display:inline-grid;place-items:center;padding:0 .12em;border-radius:3px;box-shadow:inset 0 0 0 1.5px rgba(231,183,63,.55),0 0 18px rgba(231,183,63,.14);background:rgba(231,183,63,.1);-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--yk-gold);color:var(--yk-gold);}
.yk-acr-marks{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;}
.yk-acr-marks .yk-mark{flex:0 1 auto;}
.yk-acr-line{font:400 12px/1.7 var(--yk-fm);letter-spacing:.07em;color:var(--yk-mute);padding-top:14px;border-top:1px solid var(--yk-line-2);}
.yk-acr-line b{color:var(--yk-gold);font-weight:500;}
.yk-acr-line em{font-style:normal;color:var(--yk-ink);}
.yk-blade{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--yk-line-2);}
.yk-blade-k{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;font:400 9.5px/1.5 var(--yk-fm);letter-spacing:.2em;text-transform:uppercase;color:var(--yk-dim);}
.yk-blade-k > span{white-space:nowrap;}
.yk-blade-k .mk{font-size:11px;font-style:normal;margin-right:6px;}
.yk-blade-k b{font-weight:500;color:var(--yk-dim);}
.yk-blade[data-blade=exca] .mk{color:var(--yk-ex);} .yk-blade[data-blade=oval] .mk{color:var(--yk-gold-hi);} .yk-blade[data-blade=matter] .mk{color:var(--yk-ma);}
.yk-blade-k a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;color:var(--yk-dim);letter-spacing:.1em;text-transform:none;transition:color .18s ease;}
.yk-blade[data-blade=exca] .yk-blade-k a:hover,.yk-blade[data-blade=exca] .yk-blade-k a:focus-visible{color:var(--yk-exca);}
.yk-blade[data-blade=oval] .yk-blade-k a:hover,.yk-blade[data-blade=oval] .yk-blade-k a:focus-visible{color:var(--yk-gold-hi);}
.yk-blade[data-blade=matter] .yk-blade-k a:hover,.yk-blade[data-blade=matter] .yk-blade-k a:focus-visible{color:var(--yk-matter);}
.yk-lenses{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.yk-lens{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);box-shadow:inset 0 0 0 1px rgba(25,255,107,.45);background:rgba(25,255,107,.06);font:500 9.5px/1 var(--yk-fm);letter-spacing:.14em;text-transform:uppercase;color:rgba(238,242,238,.8);white-space:nowrap;}
.yk-quote{font:italic 400 17px/1.45 var(--yk-fs);color:var(--yk-ink);text-wrap:pretty;}
.yk-quote small{display:block;margin-top:7px;font:400 10.5px/1.6 var(--yk-fm);letter-spacing:.08em;color:var(--yk-mute);font-style:normal;}

/* ═══ THE END · host A: the front page's two doors and ↑ the question · (host B: the BAND, see CODE_INTEGRATION §3) ═══ */
.yk-end{width:var(--yk-plate-w);margin:clamp(48px,6cqw,88px) auto 0;padding-top:clamp(28px,3cqw,44px);border-top:1px solid var(--yk-line);}
.yk-end-doors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.yk-end-panel{display:grid;place-items:center;padding:clamp(28px,5cqw,64px) 3cqw;min-width:0;}
.yk-end-panel + .yk-end-panel{border-left:1px solid rgba(231,183,63,.25);}
.yk-bigdoor{display:inline-block;padding:.35em .9em;min-height:44px;font:800 clamp(1.9rem,5cqw,4rem)/1 var(--yk-fd);letter-spacing:1px;background:var(--yk-metal-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;transition:-webkit-text-fill-color 120ms ease,color 120ms ease;}
.yk-bigdoor:hover,.yk-bigdoor:focus-visible{-webkit-text-fill-color:var(--yk-ink);color:var(--yk-ink);}
.yk-up{display:flex;justify-content:center;margin-top:clamp(18px,2.4cqw,32px);}
.yk-up a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;font:500 10.5px/1 var(--yk-fm);letter-spacing:.18em;text-transform:uppercase;color:var(--yk-dim);transition:color .18s ease;}
.yk-up a:hover,.yk-up a:focus-visible{color:var(--yk-gold);}

/* ═══ THE BASE · the bridge · the hedge · the credit (the phone adds the rail's hedge) ═══ */
.yk-base{width:var(--yk-plate-w);margin:clamp(28px,3cqw,44px) auto 0;padding:22px 0 clamp(40px,5cqw,64px);border-top:1px solid var(--yk-line-2);display:flex;align-items:center;justify-content:space-between;gap:14px 32px;flex-wrap:wrap;}
.yk-base .yk-hedge.rail-hedge{display:none;}
.yk-credit{font:400 10.5px/1.5 var(--yk-fm);letter-spacing:.18em;text-transform:uppercase;color:var(--yk-dim);}

/* ═══ ≤1199 · the plate's padding tightens ═══ */
@container yk (max-width:1199px){
  .yk-room{--yk-pad:32px;}
  .yk-sum{grid-template-columns:minmax(190px,1fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:12px 20px;padding:16px 22px 12px;}
  .yk-word{font-size:24px;}
}
/* ═══ ≤1023 · THE ROW one column · the cards two rows (the word + definition / the three marks) · the acronyms one column ═══ */
@container yk (max-width:1023px){
  .yk-room{--yk-pad:26px;}
  .yk-paras{grid-template-columns:minmax(0,1fr);}
  .yk-para:nth-child(5){grid-column:auto;}
  .yk-sum{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;}
  .yk-sum-w{grid-column:1 / -1;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 16px;}
  .yk-sum-w .yk-tog{margin:-10px 0 -10px auto;}
  .yk-acrs{grid-template-columns:minmax(0,1fr);}
  .yk-acr .yk-inner{height:auto;}
  .yk-body{grid-template-columns:minmax(0,1fr);grid-template-areas:'cas' 'try' 'work' 'doors';gap:14px;}
  .yk-work{padding:16px 0 0;border-left:0;border-top:1px solid var(--yk-line-2);max-width:66ch;}
}
/* ═══ ≤900 · the doors 2×2 ═══ */
@container yk (max-width:900px){
  .yk-doors{grid-template-columns:repeat(2,minmax(0,1fr));}
  .yk-door{white-space:normal;}
}
/* ═══ ≤719 · THE PHONE · the row is the spine · one-line rail · cards ≤150px · the wheel full width · everything ≥44px ═══ */
@container yk (max-width:719px){
  .yk-room{--yk-plate-w:calc(100cqw - 24px);--yk-pad:18px;padding-top:14px;}
  .yk-rail{padding:10px 14px;flex-wrap:nowrap;}
  .yk-rail .yk-rail-r{display:none;}
  .yk-poster{padding:24px var(--yk-pad) 24px;}
  .yk-row{--fs:clamp(30px,8.6cqw,40px);gap:0;filter:drop-shadow(0 0 18px rgba(231,183,63,.14));}
  .yk-row::before{content:'';position:absolute;left:1.22em;top:.2em;bottom:.2em;width:1px;background:rgba(231,183,63,.18);pointer-events:none;}
  .yk-line{display:contents;}
  .yk-w{display:grid;grid-template-columns:1.5em minmax(0,1fr);align-items:baseline;min-height:1.7em;}
  .yk-w + .yk-w::before{display:none;}
  .yk-w::after{content:'';position:absolute;left:1.1em;top:50%;width:7px;height:1px;background:rgba(231,183,63,.4);}
  .yk-q{justify-content:start;}
  .yk-qm{width:.82em;justify-items:start;}
  .yk-caret{right:auto;left:.78em;}
  .yk-totals{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px 16px 18px;margin-top:20px;}
  .yk-acro{font-size:clamp(28px,8.2cqw,40px);}
  .yk-tot{font-size:11.5px;}
  .yk-sentence{font-size:17px;}
  .yk-sec{padding-top:40px;}
  .yk-h{margin-bottom:12px;}
  .yk-cards{gap:10px;}
  .yk-sum{grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 14px 10px;}
  .yk-sum-w{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'w t' 'd d';gap:0 10px;}
  .yk-word{grid-area:w;font-size:26px;}
  .yk-def{grid-area:d;font-size:15px;line-height:1.2;}
  .yk-sum-w .yk-tog{grid-area:t;margin:-8px -4px -8px 0;min-height:44px;font-size:9.5px;letter-spacing:.14em;}
  .yk-marks{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
  .yk-mark .yk-rd{display:none;}
  .yk-mark-el,.yk-mark-seat{display:flex;}
  .yk-tiles{gap:3px;flex-wrap:nowrap;} .yk-tile{width:19px;height:25px;}
  .yk-eltile{width:44px;height:44px;} .yk-eltile b{font-size:15px;padding-top:3px;} .yk-eltile small{font-size:6.5px;top:4px;left:5px;}
  .yk-seat{width:42px;height:22px;font-size:11px;}
  .yk-line1{display:block;}
  .yk-body{margin:0 14px;padding:14px 0 18px;}
  .yk-cascade{font-size:18px;}
  .yk-work{max-width:none;}
  .yk-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .yk-door{padding:0 8px;font-size:9.5px;}
  .yk-para .yk-inner{grid-template-columns:minmax(0,1fr);padding:18px 16px;min-height:0;}
  .yk-para p{font-size:17px;}
  .yk-dia{justify-content:flex-start;}
  .yk-strip24{height:64px;}
  .yk-strip24 .lb{font-size:8.5px;letter-spacing:.08em;}
  .yk-strip24 .lb small{display:none;}
  .yk-clock .yk-inner{padding:18px 10px 20px;}
  .yk-wheel .lbl{display:none;}
  .yk-wheel .hn{font-size:17px;}
  .yk-wheel .seat{r:5;} .yk-wheel .seat.lit,.yk-wheel .seat.free{r:8;}
  .yk-strip{font-size:11.5px;padding:0 8px;}
  .yk-acrs{gap:12px;}
  .yk-acr .yk-inner{padding:20px 16px 22px;gap:14px;}
  .yk-acr-marks{gap:12px 18px;}
  .yk-quote{font-size:16px;}
  .yk-end{margin-top:44px;}
  .yk-bigdoor{padding:.35em .5em;font-size:clamp(1.4rem,6.8cqw,2.6rem);}
  .yk-base{flex-direction:column;align-items:flex-start;gap:12px;}
  .yk-base .yk-hedge{white-space:normal;}
  .yk-base .yk-hedge.rail-hedge{display:block;}
}
@container yk (max-width:519px){
  .yk-wheel .hn{font-size:19px;}
}
/* between the phone and the desktop the wheel's labels grow so they render ≥13px */
@container yk (min-width:520px) and (max-width:719px){
  .yk-wheel .lbl{display:block;font-size:19px;} .yk-wheel .lbl .h{font-size:13px;}
}

/* ═══ OFF-SCREEN · HIDDEN TAB (JS adds .is-away) ═══ */
.yk-room.is-away *,.yk-room.is-away *::before,.yk-room.is-away *::after{animation-play-state:paused !important;}

/* ═══ REDUCED MOTION · none of it moves · the K state stays reachable · the glint is a still highlight at the top-left corner ═══ */
@media (prefers-reduced-motion:reduce){
  .yk-room *,.yk-room *::before,.yk-room *::after{animation:none !important;transition:none !important;}
  .yk-room{animation:yk-fade-in .3s ease both !important;}
  .yk-glint{opacity:.5;--yk-ga:300deg;}
  .ar-ring{-webkit-mask:none;mask:none;}
  .yk-caret{display:none;}
  .yk-wheel .hand{transform:rotate(210deg);}
}

/* ══════════════════════════════════════════════════════════════════════════════
   CODE · S6 · amendments over Design's V2 sheet (9 Sep 2026)
   Each one is a JJ ruling or a defect found on a real render. Nothing above this line was edited.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── C1 · THE ROW SPELLS KEY (JJ) ──────────────────────────────────────────────
   The decoder's own behaviour (machine.js setHot → markR = 'EY'): hold the ? and the chip reads
   K EY — the gold initial and the rest of the word in ink, exactly as YES · OVERCOME · UNCOVER do.
   EY is ALWAYS in flow and always reserves its width; only its opacity turns. So the row's box is
   identical at rest and held — V1's defect 1.1 (the hover reflow) stays fixed, at any width. */
.yk-ey{display:inline-block;color:var(--yk-rest);opacity:0;transform:translateX(-.06em);
  transition:opacity .28s var(--yk-ease) .16s,transform .32s var(--yk-ease) .16s;pointer-events:none;}
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible)) .yk-ey{opacity:1;transform:none;}
html:not(.ykjs) .yk-room:has(#key:target) .yk-ey{opacity:1;transform:none;}
.yk-room[data-turn="mid"] .yk-ey{opacity:.45;transform:translateX(-.03em);}
/* the row's font-size is bounded by the LONGEST line's em-width; line 2 now reserves K EY.
   --l2 is that width, measured on the rendered page (Orbitron 800 · letter-spacing .06em). */
@container yk (min-width:720px){
  .yk-row{--l2:24.35;--fs:min(clamp(28px,4.6cqw,68px),calc((var(--yk-plate-w) - 2 * var(--yk-pad)) / var(--l2)));}
}
.yk-q .yk-caret{left:auto;}

/* ── C2 · THE KEY TURN IS A TOGGLE (JJ: "you cannot unpress it") ───────────────
   With JS the room owns the state (youknow.js: press holds, press again lets go, ? and Space too).
   #key:target — which cannot be un-pressed — is the no-JS fallback only. Design's V2 rules keep
   :hover / :focus-visible / .is-key; these two re-scope the :target half. */
html.ykjs .yk-room:has(#key:target):not(.is-key):not(:has(.yk-qa:hover,.yk-qa:focus-visible)) .yk-qbow{transform:none;}
html.ykjs .yk-room:has(#key:target):not(.is-key):not(:has(.yk-qa:hover,.yk-qa:focus-visible)) .yk-qdot{transform:none;fill:var(--yk-cyan);}
html.ykjs .yk-room:has(#key:target):not(.is-key):not(:has(.yk-qa:hover,.yk-qa:focus-visible)) .yk-qsvg{opacity:1;}
html.ykjs .yk-room:has(#key:target):not(.is-key):not(:has(.yk-qa:hover,.yk-qa:focus-visible)) .yk-k{opacity:0;}
html.ykjs .yk-room:has(#key:target):not(.is-key):not(:has(.yk-qa:hover,.yk-qa:focus-visible)) .yk-tot-rest{opacity:1;}
html.ykjs .yk-room:has(#key:target):not(.is-key):not(:has(.yk-qa:hover,.yk-qa:focus-visible)) .yk-tot-held{opacity:0;}
.yk-qa{cursor:pointer;-webkit-tap-highlight-color:transparent;}

/* ── C3 · THE WAYS BACK · the rail names the instrument · the mark is the door ──
   Three, only one of which is furniture: the rail's AIRF DECODER → /#machine · ↑ the question at
   the end · and the Backspace key (youknow.js). */
.yk-backrail{border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.yk-backrail:hover,.yk-backrail:focus-visible{border-bottom-color:var(--yk-gold);}
.yk-backrail:hover b,.yk-backrail:focus-visible b{color:var(--yk-gold-hi);}
.yk-back{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;}
.yk-backq{width:.72em;height:.94em;overflow:visible;flex:none;}
.yk-backq .yk-qbow{fill:none;stroke:var(--yk-gold);stroke-width:142.5;stroke-linecap:butt;transition:transform .32s var(--yk-ease);}
.yk-backq .yk-qdot{fill:var(--yk-cyan);transform-box:fill-box;transform-origin:center;animation:yk-breathe 3s ease-in-out infinite;}
.yk-back:hover .yk-backq .yk-qbow,.yk-back:focus-visible .yk-backq .yk-qbow{transform:translateY(-46px) rotate(-13deg);}
.yk-back kbd{font:500 9px/1 var(--yk-fm);letter-spacing:.18em;text-transform:uppercase;color:var(--yk-dim);
  padding:5px 7px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--yk-line-2);opacity:0;transition:opacity .2s ease;}
.yk-back:hover kbd,.yk-back:focus-visible kbd{opacity:1;}
@media (hover:none){.yk-back kbd{display:none;}}

/* ── C4 · THE DUST · the mote's own rule (youknow.js emits only its variables) ── */
.yk-dust{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;}
.yk-dust i{position:absolute;left:0;top:0;width:var(--s,1px);height:var(--s,1px);border-radius:50%;
  background:var(--m,#f4d976);box-shadow:0 0 4px var(--mg,rgba(244,217,118,.6));opacity:0;
  animation-name:yk-mote;animation-timing-function:var(--yk-ease);animation-fill-mode:both;}
@keyframes yk-mote{
  0%{opacity:0;transform:translate(var(--x0),var(--y0));}
  12%{opacity:.55;}
  72%{opacity:.55;transform:translate(var(--x1),var(--y1));}
  100%{opacity:0;transform:translate(var(--x1),var(--y1));}
}
.yk-room.is-away .yk-dust i{animation-play-state:paused;}

/* ── C5 · the page · the room needs air above it (there is no first beat here) ── */
.yk-page{min-height:100svh;}
.yk-room{padding-top:clamp(26px,4vh,64px);}
/* the front page's footer follows the room's base: one hairline between them, not two */
.yk-page .foot{padding-top:0;}

/* ── C6 · PRINT · THE ROOM, IN COLOUR (JJ, 10 Sep) ─────────────────────────────
   "command P actually works and includes all variables" · "is there any way to have colour
   embedded so it renders beautifully when ppl save as PDF … if they wanna print black and white
   they can toggle the option themselves." So the sheet is the room as it is: the dark plate, the
   gold, the cyan, edge to edge. `print-color-adjust:exact` is what makes Chrome honour it even
   when the reader leaves "Background graphics" unticked — without it the browser's economy mode
   drops every plate and the page prints as floating type.
   `@page{margin:0}` gives a full-bleed sheet AND suppresses the browser's own header and footer,
   which is also how the printed page keeps the no-date law (Chrome stamps today's date there).
   What print removes is only what cannot be printed: the motion. What it adds is everything a
   screen hides — all seven cards, both readings, and every door's address spelled out. */
@page{margin:0;}
@media print{
  html,body{background:var(--base,#09090f) !important;}
  html,body,.yk-room,.yk-room *,.foot,.foot *{
    -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
  /* the motion, and only the motion */
  /* the grain is an feTurbulence filter: the print pipeline rasterises it per plate and a nine-page
     PDF came out at 39 MB, which is not a file anyone can send. It is invisible at print density
     anyway. Out — and the sheet drops to well under a megabyte. */
  #ripples,.exit,.yk-dust,.yk-glint,.yk-scan,.yk-grain,.yk-caret,.yk-glare,.yk-back kbd,.yk-wheel .nowhand{display:none !important;}
  .yk-room *{animation:none !important;transition:none !important;}
  .yk-room{padding:15mm 12mm 12mm;}
  .foot{display:block !important;padding:0 12mm 14mm;}
  .foot .chip{display:none !important;}
  /* the plate keeps its own width on paper */
  .yk-room{--yk-plate-w:100%;--yk-pad:26px;}
  .yk-plate,.yk-card,.yk-acr,.yk-acrs,.yk-cards,.yk-end,.yk-base,.yk-sec > .yk-h{width:100%;}
  .yk-plate,.yk-acr,.yk-rowplate,.yk-clockplate,.yk-tots,.yk-blade{break-inside:avoid;page-break-inside:avoid;}
  /* an open card is taller than a sheet, so it may span pages — its PARTS stay whole, which is
     what a reader needs, and it stops a page ending two thirds empty. */
  .yk-card{break-inside:auto;} .yk-sum,.yk-wl,.yk-doors,.yk-try,.yk-cascade{break-inside:avoid;page-break-inside:avoid;}
  .yk-sec{break-before:auto;}
  .yk-hero{break-after:page;page-break-after:always;}
  /* ALL THE VARIABLES · every card open, both readings, nothing stacked out of sight */
  .yk-room details{display:block !important;}
  .yk-room details > .yk-body{display:grid !important;}
  .yk-tog,.yk-line1{display:none !important;}
  .yk-tots{display:block !important;}
  .yk-tot{position:static !important;opacity:1 !important;grid-area:auto !important;}
  .yk-tot::before{display:block;font:500 8.5px/2 var(--yk-fm);letter-spacing:.2em;text-transform:uppercase;color:var(--yk-dim);}
  .yk-tot-rest::before{content:'at rest · YOU ? NOW';}
  .yk-tot-held::before{content:'KEY held · YOU K NOW';}
  .yk-tot-held{margin-top:10px;padding-top:10px;border-top:1px solid var(--yk-line-2);}
  /* on paper the key is turned: the row spells KEY, and the plate under it carries both states */
  .yk-row .yk-qsvg{opacity:0 !important;} .yk-row .yk-k{opacity:1 !important;transform:none !important;}
  .yk-ey{opacity:1 !important;transform:none !important;}
  .yk-q .yk-qm{transform:none !important;}
  .yk-acro .yk-qsvg{opacity:1 !important;}
  /* every door prints its address · a printed page you can act on */
  .yk-door::after,.yk-blade-k a::after{content:' — ' attr(href);font:400 8px var(--yk-fm);color:var(--yk-dim);letter-spacing:0;text-transform:none;}
  .yk-doors{grid-template-columns:1fr 1fr !important;}
  .yk-sticker::after{content:'amireallyfree.no';margin-left:10px;font:500 8.5px/1 var(--yk-fm);letter-spacing:.14em;color:var(--yk-dim);}
}

/* ── C7 · THE CONTAINER CANNOT QUERY ITSELF (defect found on a real render) ────
   Design's sheet sets --yk-pad and --yk-plate-w on .yk-room inside `@container yk (…)`.
   .yk-room IS the container, and a container query resolves against the nearest ancestor
   container — never the element that declares it — so those three declarations never applied
   at any width: the plate kept --yk-pad:44px from 1440 all the way down to 320, and at ≤719
   the plate stayed 94cqw instead of 100cqw − 24px (which is what pushed 34 elements past the
   viewport at 320). The room is full-bleed on this page, so the viewport is the honest proxy;
   the same numbers, in media queries, where they bind. */
@media (max-width:1199px){ .yk-room{--yk-pad:32px;} }
@media (max-width:1023px){ .yk-room{--yk-pad:26px;} }
@media (max-width:719px){ .yk-room{--yk-plate-w:calc(100cqw - 20px);--yk-pad:16px;padding-top:14px;} }
@media (max-width:389px){ .yk-room{--yk-plate-w:calc(100cqw - 14px);--yk-pad:13px;} }

/* ── C8 · the ? sits in the middle of the space KEY will fill ──────────────────
   EY reserves 1.692em beside the .82em mark, so at rest the mark would hang at the left of a
   word-shaped hole. Half that reserve, as a transform (no layout, so still no reflow): the
   question mark sits centred in the gap its own answer will fill. */
.yk-q .yk-qm{transition:transform .32s var(--yk-ease);transform:translateX(.846em);}
.yk-room:is(.is-key,:has(.yk-qa:hover,.yk-qa:focus-visible)) .yk-q .yk-qm{transform:none;}
html:not(.ykjs) .yk-room:has(#key:target) .yk-q .yk-qm{transform:none;}
.yk-room[data-turn="mid"] .yk-q .yk-qm{transform:translateX(.42em);}
@container yk (max-width:719px){ .yk-q .yk-qm{transform:none;} }   /* the spine reads left-aligned */

/* ── C9 · the spine aligns the mark with the other initials (defect, both states) ───
   On the phone the row is a column of `initial | rest` pairs (Y|ES · O|VERCOME …). The ?'s anchor
   is a single child of that grid, so the mark sat 17px left of every other initial — measured at
   390px, at rest and held alike. Subgrid puts the mark in column one and EY in column two, exactly
   as Y sits beside ES. Where subgrid is missing the mark keeps its old place: a nudge, not a break. */
@container yk (max-width:719px){
  .yk-q .yk-qa{justify-content:start;}
  @supports (grid-template-columns:subgrid){
    .yk-q .yk-qa{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:baseline;}
    .yk-q .yk-ey{grid-column:2;}
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CODE · V2.5 (JJ, 10 Sep) · THE WAYS HOME, WHERE THEY ARE SEEN
   The Backspace key stays (it costs nothing and it is still the fastest), but it was the only
   obvious one and JJ is right that nobody thinks of it. The film's own lockup now sits in the
   rail's centre — the slot the decoder gives its FREEDOM plate — and the film's sticker fills the
   hole in the base row. Both lead home. The JJ mark closes the room, as it closes the front page.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── the title's colourway (NOT the decoder's chip): gold bow, cyan dot ── */
.yk-lq{overflow:visible;flex:none;}
.yk-lq .lq-bow{fill:none;stroke:var(--yk-gold);stroke-width:142.5;stroke-linecap:butt;transition:transform .32s var(--yk-ease);}
.yk-lq .lq-dot{fill:var(--yk-cyan);transform-box:fill-box;transform-origin:center;animation:yk-breathe 3s ease-in-out infinite;}

/* ── the rail's centre · the film, and the way home ── */
.yk-lockup{display:inline-flex;align-items:center;gap:0;min-height:34px;padding:0 4px;white-space:nowrap;
  font:800 10.5px/1 var(--yk-fd);letter-spacing:.14em;color:var(--yk-gold);text-decoration:none;
  transition:filter .25s ease;filter:drop-shadow(0 0 0 rgba(231,183,63,0));}
.yk-lockup em{font-style:normal;color:var(--yk-cyan);margin-left:.44em;}
.yk-lockup .yk-lq{width:.56em;height:.78em;margin-left:.05em;}
.yk-lockup:hover,.yk-lockup:focus-visible{filter:drop-shadow(0 0 14px rgba(231,183,63,.34));}
.yk-lockup:hover .lq-bow,.yk-lockup:focus-visible .lq-bow{transform:translateY(-46px) rotate(-13deg);}

/* ── the base's centre · the sticker · the film's plate, and the way home ── */
.yk-sticker{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:6px 14px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  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:800 10px/1 var(--yk-fd);letter-spacing:.16em;color:var(--yk-gold);text-decoration:none;white-space:nowrap;
  transition:box-shadow .22s ease,filter .25s ease;}
.yk-sticker .yk-lq{width:.86em;height:1.18em;}
.yk-sticker b{font-weight:800;color:var(--yk-gold);}
.yk-sticker em{font-style:normal;color:var(--yk-cyan);}
.yk-sticker:hover,.yk-sticker: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);
  filter:drop-shadow(0 0 16px rgba(231,183,63,.2));}
.yk-sticker:hover .lq-bow,.yk-sticker:focus-visible .lq-bow{transform:translateY(-46px) rotate(-13deg);}

/* ── the JJ mark closes the room, as it closes the front page. site.css owns .jj, but Design's
   `.yk-up a` is one point more specific, so the mark needs its own line to keep the front page's
   face and scale (Orbitron 800, ink → gold, the 2px lift). ── */
.yk-up{display:flex;justify-content:center;margin-top:clamp(20px,3cqw,34px);}
.yk-up a.jj{font:800 clamp(1.4rem,2.6vw,1.9rem)/1 var(--yk-fd);letter-spacing:.18em;text-transform:none;
  color:var(--yk-ink);padding:12px 16px;min-height:44px;
  transition:color 160ms ease,transform 420ms var(--yk-ease);}
.yk-up a.jj:hover,.yk-up a.jj:focus-visible{color:var(--yk-gold);transform:translateY(-2px);}

/* the base is now chip · sticker · hedge — three cells, the sticker centred */
.yk-base{justify-content:space-between;}
@container yk (max-width:719px){
  .yk-lockup{display:none;}                       /* the phone rail is one line; the sticker carries the film */
  .yk-base{justify-content:center;text-align:center;}
  .yk-sticker{order:-1;}
}

/* ══════════════════════════════════════════════════════════════════════════════
   CODE · V2.6 · THE MOBILE PASS · measured, not guessed
   Audited on a real iPhone emulation at 390 and 375: every anchor, button and summary measured
   against the 44px floor, and every text node against a 10.4px readability floor. Inline gold
   words inside running prose are deliberately left alone — WCAG 2.5.8 exempts links in a
   sentence, and padding them would overlap the lines above and below. What follows is what was
   actually a control, or actually too small to read.
   ══════════════════════════════════════════════════════════════════════════════ */
@container yk (max-width:719px){
  /* the rail's way home was a 12px-tall target */
  .yk-backrail{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;}
  .yk-rail{padding-top:4px;padding-bottom:4px;}
  /* the mark in the spine: the hit box, not just the glyph */
  .yk-q .yk-qa{min-height:44px;align-items:center;}
  /* TRY was a 30px chip · the four doors carried a 9.5px label on a 44px plate */
  .yk-tryw{min-height:44px;padding:0 15px;font-size:11px;}
  .yk-try{gap:10px;}
  .yk-door{min-height:48px;font-size:11px;letter-spacing:.1em;}
  .yk-doors{gap:12px;}
  /* the card's own control · it opens the whole reading and it was 9.5px */
  .yk-tog{min-height:44px;font-size:11px;letter-spacing:.16em;}
  /* the smallest type that still has to be read */
  .yk-cat{font-size:9px;letter-spacing:.04em;}
  .yk-chip{font-size:10px;min-height:34px;}
  .yk-rd em,.yk-rd span{font-size:11.5px;}
  .yk-line1{font-size:11.5px;}
  .yk-blade-k{font-size:10px;}
  .yk-acr-line,.yk-tot{font-size:12px;}
  /* the two ways home and the mark that closes the room */
  .yk-sticker{min-height:44px;font-size:10.5px;}
  .yk-up a.jj{padding:14px 20px;}
}
@container yk (max-width:719px){
  /* the mark's hit area is its pseudo, not its glyph box — widen it to a thumb */
  .yk-q .yk-qa::before{inset:-10px -14px;}
  /* the toggle's words carry their own size */
  .yk-tog .show,.yk-tog .hide{font-size:11px;}
  /* the row plates' diagram captions were 8.5px, and the key plates' blade labels 9.5px */
  .yk-rowplate small,.yk-diagram small,.yk-strip small{font-size:10.5px;}
  .yk-blade-k b,.yk-blade-k span,.yk-blade-k a{font-size:10.5px;}
  .yk-lens{font-size:10.5px;}
  .yk-h span{font-size:10.5px;}
}
@container yk (max-width:719px){
  .yk-q .yk-qa::before{inset:-10px -18px;}     /* 44px of thumb across, not 38 */
  /* the micro-labels that carry meaning; the tiles keep their own smaller scale */
  .yk-room small{font-size:10.5px;}
  .yk-tile small{font-size:7.5px;} .yk-eltile small{font-size:8px;} .yk-d small{font-size:9px;}
}