/* ============================================================================
   ck66.css — CHECKPOINT 6.6 · composed manifesto, plastisol dot, restored
   explosion grammar. Surgical correction over Checkpoint 6.2 (which stands
   untouched beside this sheet).
   ----------------------------------------------------------------------------
   Layer discipline for the atmosphere: on BOTH materials the broad value
   field moves BENEATH a spatially fixed paper tooth —
     base value + approved gradients  →  atmosphere canvas  →  tooth overlay.
   The approved system only: Carbon #171717, Bone #F2EFE9, Acid #DFFF00,
   Matte Silver #9FA4A5, Radikal.
   ========================================================================== */

@font-face{font-family:'RadikalRec';src:url('../../assets/fonts/radikal/radikal-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'RadikalRec';src:url('../../assets/fonts/radikal/radikal-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'RadikalRec';src:url('../../assets/fonts/radikal/radikal-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'RadikalRec';src:url('../../assets/fonts/radikal/radikal-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body.ck67{font-family:'RadikalRec',system-ui,sans-serif;background:#171717;
  color:#F2EFE9;overflow-x:clip}
.ck66-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
:root{--jw-head-h:64px}

body.ck67[data-fonts="wait"] #ck66World,
body.ck67[data-fonts="wait"] .ck66-identity{visibility:hidden}

body.ck67 .nav{background:transparent;border-bottom:0}
body.ck67 .rwordmark{opacity:0 !important;visibility:hidden !important}
/* §2 · zero visible pixels and no interaction before the identity settles;
   the Contact border belongs to the link, so it is withheld with it */
body.ck67 .nav-links a{will-change:clip-path,opacity;opacity:0;
  pointer-events:none;clip-path:inset(0 100% 0 0)}
body.ck67 .nav-links a.nav-cta{border-color:transparent}
body.ck67 .nav-links a.ck66-navin{opacity:1;pointer-events:auto}
body.ck67 .nav-links a.nav-cta.ck66-navin{border-color:#DFFF00}

/* ---- THE WORLD ---------------------------------------------------------- */
#ck66World{position:fixed;inset:0;z-index:10;overflow:clip;
  pointer-events:none;contain:strict}
#ck66World[data-gone="1"]{visibility:hidden}

/* layer 1 · Matte Silver: base + approved gradients (NO tooth here) */
.ck66-silver{position:absolute;inset:0;
  background-color:#9FA4A5;
  background-image:
    radial-gradient(120% 110% at 12% -10%,
      rgba(159,164,165,.17) 0%, rgba(159,164,165,.07) 38%, rgba(159,164,165,0) 72%),
    radial-gradient(126% 108% at 12% -10%,
      rgba(240,238,228,.62) 0%, rgba(240,238,228,.44) 20%,
      rgba(240,238,228,.26) 40%, rgba(240,238,228,.12) 60%,
      rgba(240,238,228,.03) 76%, rgba(240,238,228,0) 88%),
    radial-gradient(120% 100% at 42% 34%,
      rgba(255,255,255,.16) 0%, rgba(255,255,255,.09) 38%,
      rgba(255,255,255,.03) 64%, rgba(255,255,255,0) 84%),
    radial-gradient(130% 116% at 98% 82%,
      rgba(88,100,109,.44) 0%, rgba(88,100,109,.29) 26%,
      rgba(88,100,109,.15) 48%, rgba(88,100,109,.05) 68%,
      rgba(88,100,109,0) 86%),
    radial-gradient(164% 66% at 44% 118%,
      rgba(88,100,109,.36) 0%, rgba(88,100,109,.22) 30%,
      rgba(88,100,109,.10) 56%, rgba(88,100,109,.02) 74%,
      rgba(88,100,109,0) 90%);
  will-change:opacity,transform}
/* the atmosphere: ONE continuous scalar field, value modulation only */
#ck66EnvSilver{position:absolute;inset:0;width:100%;height:100%}
/* the tooth: spatially fixed, ABOVE the moving atmosphere */
.ck66-tooth{position:absolute;inset:0;pointer-events:none;
  background-image:url('../../assets/images/textures/silver-tooth.png');
  background-repeat:repeat;background-size:128px 128px}

/* layer 2 · the photographs */
.ck66-photo{position:absolute;inset:0;overflow:clip}
.ck66-photo img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;will-change:opacity,transform}

/* the photographic response of ATMOSPHERIC_FIELD_V1: same field, far
   lower amplitude, soft-light so blacks stay black; consumed at rupture */
#ck66EnvPhoto{position:absolute;inset:0;width:100%;height:100%;
  mix-blend-mode:soft-light;opacity:0}

/* layer 3 · the particle field / plastisol disc */
#ck66Field{position:absolute;inset:0;width:100%;height:100%}

/* layer 4 · typography ---------------------------------------------------- */
.ck66-words{position:absolute;inset:0}
/* THE MANIFESTO — one composed structure, one parent transform. Radikal
   Light 300; fixed layout; glyph advances frozen after first layout. */
#ck66Quote{position:absolute;left:0;top:0;width:100%;
  will-change:transform;color:#DFFF00;font-weight:300}
/* TYPE_ELEVATION_V1 — the monumental type stands ~6-8in above the Silver:
   a directional key shadow that keeps the letter silhouette + a soft
   ambient penumbra. One light, upper-left, everywhere. Shadows travel,
   scale and vanish WITH their glyphs (text-shadow is glyph-bound). */
.ck66-elev{text-shadow:
  0.055em 0.075em 0.075em rgba(17,19,18,.26),
  0.10em 0.135em 0.24em rgba(17,19,18,.16)}
/* the plate-scale version: shallow space above the photograph */
.ck66-elev-plate{text-shadow:
  0.035em 0.05em 0.05em rgba(17,19,18,.30),
  0.06em 0.085em 0.15em rgba(17,19,18,.18)}
.ck66-qline{position:absolute;white-space:nowrap;line-height:1}
.ck66-g{display:inline-block;will-change:transform,opacity}
/* diagnostic: color each converging glyph mass */
body.ck67[data-diag="1"] .ck66-g[data-gi="0"]{color:#FF6B4A}
body.ck67[data-diag="1"] .ck66-g[data-gi="1"]{color:#4AC9FF}
body.ck67[data-diag="1"] .ck66-g[data-gi="2"]{color:#B98CFF}
body.ck67[data-diag="1"] .ck66-g[data-gi="3"]{color:#63E6A8}
body.ck67[data-diag="1"] .ck66-g[data-gi="4"]{color:#FFC53D}
body.ck67[data-diag="1"] .ck66-g[data-gi="5"]{color:#FF8FD1}
body.ck67[data-diag="1"] .ck66-g[data-gi="6"]{color:#7DF0FF}
body.ck67[data-diag="1"] .ck66-g[data-gi="7"]{color:#D1FF5A}
body.ck67[data-diag="1"] .ck66-g[data-gi="8"]{color:#FFA26B}
body.ck67[data-diag="1"] .ck66-g[data-gi="9"]{color:#8FB4FF}

/* plate statements: word objects that SETTLE (no monumental entrances) */
/* 6.7.1 §4 · THE APPROVED PLASTISOL DEPTH, ON EVERY PLATE STATEMENT.
   This is TYPE_ELEVATION_V1 — the treatment already approved on the GREAT
   BRANDING manifesto over the Silver field — not an approximation of it. It
   is a glyph-bound two-part text-shadow: a directional key that keeps the
   letter silhouette, and a soft ambient penumbra beneath it. One light,
   upper-left, everywhere.

   It is deliberately NOT a CSS filter. A drop-shadow filter would put the
   type inside a filter pipeline whose bounds Safari can flash white for a
   frame during a transform — the defect §1 is repairing — whereas a
   text-shadow travels, scales and vanishes with its own glyphs and creates
   no additional compositing surface. The ink stays opaque Acid: no glow, no
   halo, no luminous edge, no bevel, no transparency through the letterform. */
.ck66-w{position:absolute;display:block;font-weight:300;color:#DFFF00;
  white-space:nowrap;line-height:1;will-change:transform,opacity;
  transform-origin:0 0;
  text-shadow:0.055em 0.075em 0.075em rgba(17,19,18,.26),
              0.10em 0.135em 0.24em rgba(17,19,18,.16)}
body.ck67[data-diag="1"] .ck66-w{outline:1px dashed rgba(223,255,0,.55)}

.ck66-sline{position:absolute;display:block;font-weight:500;color:#DFFF00;
  white-space:nowrap;will-change:transform,opacity;letter-spacing:.04em;
  text-shadow:0.055em 0.075em 0.075em rgba(17,19,18,.26),
              0.10em 0.135em 0.24em rgba(17,19,18,.16)}
.ck66-acts{position:absolute;display:flex;flex-direction:column;gap:6px;
  pointer-events:auto}
.ck66-act{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:8px 2px;font-weight:500;color:#DFFF00;text-decoration:none;
  letter-spacing:.06em;opacity:0;will-change:opacity,transform}
/* 6.7.1 §4 · the destinations are plate typography too. They were the one
   run of Acid on these plates carrying no depth at all, which is why they
   dissolved into the lamp on desktop and into the bright sky on portrait.
   The SAME two-part treatment, at the utility scale. */
.ck66-act{text-shadow:0.055em 0.075em 0.075em rgba(17,19,18,.26),
                     0.10em 0.135em 0.24em rgba(17,19,18,.16)}
.ck66-act:hover{text-decoration:underline;text-underline-offset:5px}
.ck66-act:focus-visible{outline:2px solid #DFFF00;outline-offset:4px}

/* layer 5 · THE CARBON PLANE — one plane, opacity 1.0, geometry only */
#ck66Plane{position:absolute;left:0;top:0;width:100%;height:100%;
  background-color:#171717;opacity:1;
  background-image:
    radial-gradient(120% 110% at 12% -10%,
      rgba(52,57,62,.30) 0%, rgba(52,57,62,.12) 38%, rgba(52,57,62,0) 72%),
    radial-gradient(126% 108% at 12% -10%,
      rgba(60,66,72,.44) 0%, rgba(60,66,72,.30) 20%,
      rgba(60,66,72,.17) 40%, rgba(60,66,72,.08) 60%,
      rgba(60,66,72,.02) 76%, rgba(60,66,72,0) 88%),
    radial-gradient(130% 116% at 98% 82%,
      rgba(0,0,0,.55) 0%, rgba(0,0,0,.38) 26%,
      rgba(0,0,0,.20) 48%, rgba(0,0,0,.07) 68%, rgba(0,0,0,0) 86%);
  border-bottom:1px solid rgba(242,239,233,.08);
  will-change:transform;overflow:clip}
#ck66EnvCarbon{position:absolute;inset:0;width:100%;height:100%}
#ck66Plane .ck66-tooth{opacity:.9}

.ck66-cue{position:absolute;bottom:clamp(22px,4.5vh,44px);left:50%;
  transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:10px;will-change:opacity}
/* §16 · the line is gone. Five Acid dots, pulsing top to bottom: each one
   brightens, descends a little and fades, so the column reads as a downward
   invitation in the same particle language the rest of the site speaks.
   No arrow, no chevron, no halo, no bounce. */
.ck67-dots{display:flex;flex-direction:column;align-items:center;
  gap:clamp(5px,0.9vh,9px)}
.ck67-dot{display:block;width:5px;height:5px;border-radius:50%;
  background:#DFFF00;opacity:.18;will-change:transform,opacity}
.ck66-cue[data-live="1"][data-phase="affordance"] .ck67-dot{
  animation:ck67dot 2.3s cubic-bezier(.4,0,.3,1) infinite;
  animation-delay:calc(var(--i) * 0.13s)}
/* and once contact is made nothing but the handoff writes these two */
.ck66-cue:not([data-phase="affordance"]) .ck67-dot{animation:none}
@keyframes ck67dot{
  0%,70%,100%{opacity:.18;transform:translateY(0)}
  22%{opacity:1;transform:translateY(2px)}
  46%{opacity:.30;transform:translateY(4px)}}
.ck66-cue-word{font-weight:500;font-size:10px;letter-spacing:.34em;
  color:rgba(242,239,233,.55)}
@keyframes ck66cue{0%{transform:scaleY(.25)}55%{transform:scaleY(1)}100%{transform:scaleY(.25)}}
@media (prefers-reduced-motion:reduce){
  .ck67-dot{animation:none !important;transform:none;opacity:.55}}

/* ---- the identity ------------------------------------------------------- */
.ck66-identity{position:fixed;left:0;top:0;z-index:61;display:block;
  line-height:0;will-change:transform}
.ck66-identity:focus-visible{outline:2px solid #DFFF00;outline-offset:6px}
.ck66-identity canvas{display:block}

#ck66Spacer{display:block;width:1px}

/* ---- the work index ----------------------------------------------------- */
/* any anchor jump (browser fragment, case-study return) lands with the
   heading clear of the fixed navigation */
.ck66-index{scroll-margin-top:var(--jw-head-h);
  position:relative;background:#171717;color:#F2EFE9;
  padding:clamp(28px,4vh,52px) clamp(20px,4.6vw,72px) clamp(72px,10vh,130px)}
.ck66-index-head{max-width:1460px;margin:0 auto clamp(28px,4vh,48px);
  display:flex;align-items:baseline;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap}
.ck66-index-eyebrow{font-weight:500;font-size:11px;letter-spacing:.34em;
  color:rgba(242,239,233,.5)}
.ck66-index-title{font-weight:300;font-size:clamp(40px,6.2vw,96px);
  letter-spacing:.01em;line-height:1;color:#DFFF00}
.ck66-index-count{margin-left:auto;font-weight:500;font-size:11px;
  letter-spacing:.28em;color:rgba(242,239,233,.5)}
.ck66-grid{max-width:1460px;margin:0 auto;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
@media (max-width:1020px){.ck66-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ck66-grid{grid-template-columns:1fr}}
.ck66-tile{position:relative;display:block;text-decoration:none;color:#F2EFE9;
  background:#101010;outline:1px solid rgba(242,239,233,.10);overflow:clip}
.ck66-tile:hover{text-decoration:none;outline-color:rgba(223,255,0,.55)}
.ck66-tile:focus-visible{outline:2px solid #DFFF00;outline-offset:3px}
.ck66-tile-media{position:relative;aspect-ratio:16/9;overflow:clip;background:#0d0d0d}
.ck66-tile-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.001);transition:transform .5s ease}
.ck66-tile:hover .ck66-tile-media img{transform:scale(1.035)}
.ck66-tile--bs .ck66-tile-media{background:#14161c}
.ck66-tile--bs .bs-plate-svg{position:absolute;inset:0;width:100%;height:100%;
  display:block}
.ck66-tile-media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;transition:opacity .6s ease}
.ck66-tile-media video.ck66-on{opacity:1}
.ck66-tile-media .ck66-cycle{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;transition:opacity .5s ease}
.ck66-tile-media .ck66-cycle.ck66-on{opacity:1}
/* the two placeholder plates: intentional, non-link, Carbon/Silver/Acid */
.ck66-tile--soon{cursor:default;outline:1px solid rgba(242,239,233,.10)}
.ck66-tile--soon:hover{outline-color:rgba(242,239,233,.10)}
.ck66-tile--soon .ck66-tile-media svg{position:absolute;inset:0;width:100%;
  height:100%;display:block}
.ck66-tile-row{display:flex;align-items:baseline;gap:12px;padding:12px 14px 13px;
  min-height:45px;box-sizing:border-box}
/* the two long-titled projects: the name takes the row and the category sits
   with it on the same baseline. Nothing is clipped and nothing is ellipsed —
   the typography, padding and baseline are the other thirteen cards'. */
.ck66-tile-name{overflow-wrap:break-word;text-wrap:balance}
.ck66-tile-num{font-weight:500;font-size:10px;letter-spacing:.22em;
  color:rgba(242,239,233,.45)}
.ck66-tile-name{font-weight:500;font-size:14px;letter-spacing:.02em}
.ck66-tile-cat{margin-left:auto;font-weight:400;font-size:10.5px;
  letter-spacing:.14em;color:rgba(242,239,233,.5);text-transform:uppercase}

/* ---- closing ------------------------------------------------------------ */
.ck66-close{background:#171717;color:#F2EFE9;
  padding:clamp(72px,11vh,140px) clamp(20px,4.6vw,72px) clamp(64px,9vh,110px);
  text-align:center}
.ck66-close-line{font-weight:300;font-size:clamp(22px,2.6vw,40px);
  letter-spacing:.01em;margin-bottom:clamp(22px,3.4vh,38px)}
.ck66-close-acts{display:flex;justify-content:center;align-items:center;
  gap:clamp(18px,3vw,44px);flex-wrap:wrap;margin-bottom:clamp(40px,6vh,72px)}
.ck66-close-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-weight:500;color:#DFFF00;text-decoration:none;letter-spacing:.04em}
.ck66-close-cta:hover{text-decoration:underline;text-underline-offset:5px}
.ck66-close-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:400;color:rgba(242,239,233,.72);text-decoration:none}
.ck66-close-link:hover{color:#F2EFE9;text-decoration:underline;
  text-underline-offset:5px}
.ck66-foot{font-weight:400;font-size:11px;letter-spacing:.18em;
  color:rgba(242,239,233,.38)}

/* ---- the persistent work entry ------------------------------------------ */
.ck66-skip{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2.4vh,26px);
  z-index:70;display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:10px 18px;background:#171717;color:#F2EFE9;
  font:500 11.5px/1 'RadikalRec',system-ui,sans-serif;letter-spacing:.22em;
  text-decoration:none;border:1px solid rgba(242,239,233,.22);
  /* 6.7.1 §1 · the backdrop-filter is REMOVED. A translucent chip with a
     backdrop blur sits on a compositing boundary, and on Safari that
     boundary is one of the documented sources of a one-frame flash — which
     is exactly where the reported flicker appears, at the bottom of THE
     WORK. The chip is now an opaque Carbon surface: same size, same
     position, same type, no filter pipeline behind it. */
  transition:opacity .35s ease,transform .35s ease}
.ck66-skip:hover{border-color:#DFFF00}
.ck66-skip:focus-visible{outline:2px solid #DFFF00;outline-offset:3px}
.ck66-skip[data-off="1"]{opacity:0;transform:translateY(8px);pointer-events:none}

/* ---- diagnostics -------------------------------------------------------- */
.ck66-diag{position:fixed;left:12px;bottom:12px;z-index:90;display:none;
  background:rgba(16,16,16,.88);color:#DFFF00;border:1px solid rgba(223,255,0,.4);
  font:400 10.5px/1.65 ui-monospace,Menlo,monospace;padding:10px 12px;
  white-space:pre;pointer-events:none;max-width:46vw}
body.ck67[data-diag="1"] .ck66-diag{display:block}

/* ---- the in-artifact timing panel (§10) --------------------------------- */
.ck66-timing{position:fixed;right:12px;top:76px;z-index:92;display:none;
  width:302px;background:rgba(16,16,16,.94);color:#F2EFE9;
  border:1px solid rgba(223,255,0,.34);padding:12px 12px 10px;
  font:400 11px/1.5 ui-monospace,Menlo,monospace}
body.ck67[data-timing="1"] .ck66-timing{display:block}
.ck66-timing h4{font:500 11px/1.4 ui-monospace,Menlo,monospace;
  letter-spacing:.14em;color:#DFFF00;margin-bottom:8px}
.ck66-timing button{display:block;width:100%;margin:0 0 4px;padding:6px 8px;
  background:rgba(242,239,233,.06);color:#F2EFE9;text-align:left;
  border:1px solid rgba(242,239,233,.18);cursor:pointer;
  font:400 10.5px/1.3 ui-monospace,Menlo,monospace}
.ck66-timing button:hover{border-color:#DFFF00;color:#DFFF00}
.ck66-timing .ck66-row{display:flex;gap:4px}
.ck66-timing .ck66-row button{width:auto;flex:1}
.ck66-timing canvas{display:block;width:278px;height:76px;margin:8px 0 6px;
  background:#0d0d0d;border:1px solid rgba(242,239,233,.14)}
.ck66-timing pre{white-space:pre;color:#DFFF00;font:400 10px/1.5 ui-monospace,Menlo,monospace}
.ck66-timing .ck66-mode{color:#9FA4A5}

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ck66-w,.ck66-sline,.ck66-act,#ck66Quote{transition:opacity .3s ease}
  .ck66-tile-media img{transition:none}
  .ck66-tile:hover .ck66-tile-media img{transform:scale(1.001)}
}


/* ======================================================================= 6.7
   §7 · THE BLUE LINE ON THE WORK SECTION.

   #work carries tabindex="-1" so SKIP TO WORK can move focus there for
   assistive technology. Safari draws its focus ring on that programmatic
   destination, which puts a blue line across the top of THE WORK. The ring
   is removed FROM THAT ELEMENT ONLY, and only while it is the programmatic
   destination — there is no global outline reset here, and every link,
   button and project card keeps its visible keyboard focus.
   ==================================================================== */
.ck66-index[data-progfocus]:focus,
.ck66-index[data-progfocus]:focus-visible{outline:none;box-shadow:none}
.ck66-tile:focus-visible,.ck66-act:focus-visible,.ck66-close-cta:focus-visible,
.ck66-close-link:focus-visible,.ck66-skip:focus-visible,
.nav-links a:focus-visible,.nav-toggle:focus-visible{
  outline:2px solid #DFFF00;outline-offset:3px;border-radius:2px}

/* §5 · the plate statement travels on the compositor and nothing else */
.ck66-w{will-change:transform,opacity;backface-visibility:hidden}


/* ======================================================================= 6.7
   §13 · THE BOOT STATE. Nothing paints until the runtime says so — no
   manifesto, no contact metadata, no services list, no work grid, no
   unstyled heading, no fallback plate, no flash of Silver or gray. The
   document opens on Carbon and the countdown, and on nothing else.
   ==================================================================== */
body.ck67{background:#171717}
body.ck67:not([data-open]) #ck66World,
body.ck67:not([data-open]) .ck66-identity,
body.ck67:not([data-open]) .ck66-index,
body.ck67:not([data-open]) .ck66-close,
body.ck67:not([data-open]) .ck66-skip,
body.ck67[data-open="count"] #ck66World,
body.ck67[data-open="count"] .ck66-identity,
body.ck67[data-open="count"] .ck66-index,
body.ck67[data-open="count"] .ck66-close,
body.ck67[data-open="count"] .ck66-skip{visibility:hidden}
/* the Carbon field itself is welcome from the first frame */
body.ck67[data-open="count"] #ck66Plane,
body.ck67[data-open="count"] #ck66EnvCarbon{visibility:visible}

/* §14 · the countdown layer sits above the world and below the bar */
#ck67Count{position:fixed;left:0;top:0;z-index:60;pointer-events:none;
  transition:opacity .18s linear}
body.ck67[data-open="ready"] #ck67Count,
body.ck67[data-open="handoff"] #ck67Count{opacity:1}

/* §15 · while the countdown runs the document does not move */
body.ck67[data-open="count"]{overflow:hidden;touch-action:none}


/* ======================================================================= 6.7
   THE TWO AUTHORED CARDS.
   ==================================================================== */
@font-face{font-family:'SourceSerif4';src:url('../fonts/victory/source-serif-4-variable.woff2')
  format('woff2-variations');font-weight:200 900;font-display:swap}

/* 6.7.2 · the card is a MEDIA BOX in normal flow, not an overlay.
   It is mounted onto .ck66-tile-media, which already supplies the positioning
   context, the 16/9 ratio and the clip. Absolutely positioning it here lifted
   it out of flow and painted it over the metadata rail. */
.jwc{position:relative;background:#171717;color:#DFFF00;overflow:hidden}
/* mounted anywhere else — a capture rig, a standalone host — it still fills
   a positioned parent */
.jwc:not(.ck66-tile-media){position:absolute;inset:0}

/* --- the icon specimen --------------------------------------------------- */
.jwc--icon{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(10px,4%,26px)}
.jwc-stage{flex:1;display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;
  gap:clamp(8px,3%,22px);perspective:620px;min-height:0}
.jwc-half{display:flex;align-items:center;justify-content:center;height:100%;
  transform-style:preserve-3d;transition:transform .19s cubic-bezier(.5,0,.6,1);
  will-change:transform}
.jwc-half.is-flip{transform:rotateX(90deg)}
.jwc-half svg{width:100%;height:100%;max-height:100%;display:block}
.jwc-rule{align-self:stretch;background:rgba(223,255,0,.22);margin:14% 0}
.jwc-meta{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding-top:clamp(6px,2%,12px)}
.jwc-fam,.jwc-pair{font-family:var(--font-brand,RadikalRec),system-ui,sans-serif;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(7px,1.5vw,10px);color:rgba(223,255,0,.72);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.jwc-pair{color:rgba(242,239,233,.42);letter-spacing:.10em}

/* --- the voice specimen -------------------------------------------------- */
.jwc--voice{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(12px,5%,30px);color:#F2EFE9}
.jwc-tag{font-family:var(--font-brand,RadikalRec),system-ui,sans-serif;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  font-size:clamp(7px,1.4vw,9px);color:rgba(242,239,233,.42);margin-bottom:.9em;
  transition:color .5s ease}
.jwc--voice[data-branded="1"] .jwc-tag{color:#FF692E}
.jwc-copy{margin:0;font-family:Arial,Helvetica,system-ui,sans-serif;
  font-size:clamp(9px,1.62vw,14px);line-height:1.62;color:#fff;
  max-width:34em;transition:none}
.jwc--voice[data-branded="1"] .jwc-copy{font-family:'SourceSerif4',Georgia,serif;
  font-size:clamp(9.5px,1.72vw,15px);line-height:1.66;color:#F2EFE9}
.jwc-cur{display:inline-block;width:.5em;height:1.02em;vertical-align:-.16em;
  margin-left:.06em;background:#fff;animation:jwcblink 1.06s steps(1) infinite}
.jwc--voice[data-branded="1"] .jwc-cur{background:#FF692E}
@keyframes jwcblink{0%,52%{opacity:1}53%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .jwc-half{transition:none}
  .jwc-cur{animation:none;opacity:1}
}


/* ======================================================================= 6.7.1
   §1 · OPAQUE CARBON BACKPLANES.

   The repair principle this section states: every Carbon section keeps an
   opaque Carbon backplane, so that if any layer above it drops a frame the
   reader sees Carbon and never the browser's default surface. These are
   explicit rather than inherited.
   ==================================================================== */
.ck66-index{background:#171717}
.ck66-grid{background:#171717}
.ck66-tile{background:#171717}
.ck66-tile-row{background:#171717}
.jwc{background:#171717}

/* ======================================================================= 6.7.1
   ADDENDUM 1 · THE PERSISTENT CARBON NAVIGATION.

   `body.ck67 .nav{background:transparent}` was correct for the opening and
   wrong for everything after it: measured in THE WORK, the bar's own
   background was rgba(0,0,0,0) and roughly 40 % of its pixels were page
   content showing through.

   The bar now has two states. Before establishment it is transparent, as
   approved, so the docking lockup passes through it. From the establishment
   frame onward it owns an opaque Carbon surface with its own atmosphere,
   sits in one explicit layer above every plate, particle, canvas and grid
   surface, and stays there. No opacity, no translucency, no backdrop-filter
   standing in for the material.
   ==================================================================== */
body.ck67 .nav{background:transparent;border-bottom:0}

body.ck67[data-nav="established"] .nav{
  background:#171717;
  border-bottom:1px solid rgba(242,239,233,.08);
  z-index:64;                       /* above the world (10) and the count (60) */
  isolation:isolate;
}
/* the atmosphere lives INSIDE the bar's own surface, mounted by the shared
   module — the same field the rest of the site uses, at a lower amplitude */
body.ck67[data-nav="established"] .nav > .jw-carbon-field{
  position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none}
body.ck67[data-nav="established"] .nav > .nav-inner{position:relative;z-index:1}

/* the identity is the ONE logo and stays above the bar's surface, which is
   what lets the docked lockup read as the navigation mark rather than a
   second drawing of it */
body.ck67[data-nav="established"] .ck66-identity{z-index:65}

/* nothing composited may escape above the bar */
body.ck67 #ck66World{z-index:10}
body.ck67 #ck66Plane,body.ck67 #ck66Field,body.ck67 .ck66-photo,
body.ck67 #ck66EnvPhoto,body.ck67 #ck66EnvCarbon,body.ck67 #ck66EnvSilver{
  z-index:auto}

/* ======================================================================= 6.7.1
   ADDENDUM 2 · THE TWO NEW CARDS GET THE ESTABLISHED METADATA RAIL.

   The animation is clipped entirely inside the media window; the rail below
   it is the same rail the other thirteen cards use — same height, type,
   spacing and baseline — and the whole card, media and rail together, is the
   link. Nothing about the animations is cropped or compressed to make room:
   the media window keeps its 16/9 box and the rail sits beneath it exactly
   as it does everywhere else.
   ==================================================================== */
.ck66-tile-media{overflow:clip}          /* no animation pixel reaches the rail */
.ck66-tile-name{overflow-wrap:anywhere;text-wrap:pretty}
@media (max-width:700px){
  .ck66-tile-row{flex-wrap:wrap;row-gap:2px}
  .ck66-tile-cat{flex-basis:100%}
}


/* 6.7.1 §10 · the personal proposition is a primary Acid statement and takes
   the approved plastisol depth. The services and the destination links stay
   crisp and functional — no heavy shadow on utility typography. */
.ck66-sprop{letter-spacing:.02em;
  text-shadow:0.055em 0.075em 0.075em rgba(17,19,18,.26),
              0.10em 0.135em 0.24em rgba(17,19,18,.16)}
.ck66-acts{display:flex;flex-direction:column;gap:.55em}


/* ======================================================================= 6.7.1
   §2 · SCROLL, CENTRED ON THE DOT AXIS, ITS O BECOMING THE DOT.

   The word is centred on the same vertical axis the dots descend along, and
   the O is a ring that FILLS rather than a circle that is swapped for one:
   `--fill` drives an inset radial from ring to solid, so the centre, the
   diameter, the Acid and the plastisol contact shadow are continuous from
   letterform to dot. There is no second element to cross-fade with, which is
   why there can never be two dots or a registration jump.
   ==================================================================== */
.ck66-cue{flex-direction:column;align-items:center}
.ck67-word{display:flex;align-items:baseline;justify-content:center;
  font:500 10px/1 'RadikalRec',system-ui,sans-serif;letter-spacing:.34em;
  color:rgba(242,239,233,.55);margin-top:9px;
  /* the whole word's optical centre is put on the viewport centre by
     seatCue(); this is only its resting value for the frame before the first
     measurement. No letter is singled out. */
  transform:translateX(0)}
.ck67-wg{display:inline-block;will-change:transform,opacity}

/* the O is an ordinary letter of SCROLL. There is no reserved position, no
   substitution rule and no special case: .ck67-wg covers all six. */

@media (prefers-reduced-motion:reduce){
  .ck67-wg{transition:none;transform:none}
}