/* FROZEN COPY for the Gloriously Irrational case study (preserved 24 September 2026)
   from assets/css/meaning-home.css, production homepage 6.12.0, Deployment 535d9ff.
   Do not edit: the live homepage may change; this copy keeps the original opening intact. */
/* ============================================================================
   ck66.css — CHECKPOINT 6.6 · composed manifesto, plastisol dot, restored
   explosion grammar. Surgical correction over Checkpoint 6.2 (which stands
   untouched beside this sheet). 6.9 · the type is flat and lit by the
   stationary upper-right light (see the html.jw-lit rules at the end).
   ----------------------------------------------------------------------------
   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}
/* --jw-head-h is declared ONCE, in site-nav.css, derived from the row height
   and the safe-area inset, and overwritten with the bar's measured height by
   walker-nav.js. It is deliberately NOT redeclared here: this file used to
   carry its own 64px copy, which load order made authoritative and which no
   longer matched the bar once the mobile row changed. */

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}
/* §2/M6 · the hamburger obeys the SAME readiness state as the links: no
   visible pixels and no hit target until the identity has docked and the
   navigation is established. Scoped to the homepage's own state machine —
   every other route shows its toggle immediately, exactly as before. */
body.ck67:not([data-nav="established"]) .nav-toggle{
  visibility:hidden;pointer-events:none}

/* ---- 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}
/* 6.9 · THE FLAT LIT SURFACE. TYPE_ELEVATION_V1 (the glyph-bound key
   shadow and penumbra that stood the type above the Silver) is retired on
   every statement. The letters are flat and crisp: no bevel, extrusion,
   cast shadow, outline, rim, glow or sheen. Their material is the site's
   ONE stationary upper-right light (jw-light.js): a restrained move of the
   Acid toward a paler Acid (#E4FF2A, #E9FF52) wherever a letter currently
   sits under the source, written per line as the inverse of that line's
   transform so the field stays fixed in the viewport while the type moves
   through it. See the html.jw-lit rules at the end of this sheet. */
.ck66-elev{text-shadow:none}
.ck66-elev-plate{text-shadow:none}
.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:none}                    /* 6.9 · flat; the light is the material */
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:none}
.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; 6.9 · flat, lit */
.ck66-act{text-shadow:none}
.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}
/* a plate whose film is not 16:9 is letterboxed rather than cropped, so its
   lettering stays whole at every width */
.ck66-tile-media.ck66-fit-contain img,.ck66-tile-media.ck66-fit-contain video{object-fit:contain;background:#0d0d0d}
.ck66-tile:hover .ck66-tile-media.ck66-fit-contain img{transform:none}
/* 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 ------------------------------------------------------------ */
/* The homepage closing speaks the SITEWIDE CONTACT SYSTEM: Carbon ground,
   Acid headline, white supporting roles, Acid-outlined primary action —
   the same grammar contact-block.css now gives every .site-contact. */
.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);color:#DFFF00}
.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;
  padding:12px 22px;border:1px solid #DFFF00;
  font-weight:500;color:#DFFF00;text-decoration:none;letter-spacing:.04em;
  transition:background .2s ease,color .2s ease}
.ck66-close-cta:hover,.ck66-close-cta:focus-visible{background:#DFFF00;color:#171717}
.ck66-close-cta:active{background:#c9e600;color:#171717}
.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}
/* .55, not .42: at 9-10px these micro-labels measured 3.72:1 on the card's
   #171717 ground, under AA. .55 reads 5.47:1 and is still clearly secondary. */
.jwc-pair{color:rgba(242,239,233,.55);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,.55);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}

/* ------------------------------------------------------------------ 6.7.6
   ONE BAR HEIGHT FOR THE WHOLE LIFE OF THE PAGE (phone layout only).

   The opening bar shows no divider; the established bar shows a 1px one.
   Those are two different bar heights, and on a phone the plate solver runs
   during the opening while the painter runs after establishment — so the
   seat was computed against a foot one pixel above the one the type was
   later measured against. The line is now transparent rather than absent:
   the opening looks exactly as approved, and the navigation's box is a
   single constant that the solver, the painter, the drawer and the hero
   stage all read the same way. Desktop keeps its baseline behaviour. */
@media (max-width:820px), (max-height:520px) and (pointer:coarse){
  body.ck67 .nav{border-bottom:1px solid transparent}
  body.ck67[data-nav="established"] .nav{
    border-bottom-color:rgba(242,239,233,.08)}
}

/* 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}

/* ------------------------------------------------------------------- 6.7.8
   THE BOUNDARY INVARIANT. Once the navigation is established it is the ONLY
   element allowed to paint opaque Carbon above the photograph. The opening
   plane's rest position is entirely behind the established bar, so from the
   establishment frame onward the plane — and everything it carries: the
   Carbon atmosphere canvas, the tooth, the long-faded SCROLL cue — is
   removed from rendering rather than parked. This is a state rule on the
   same attribute that gives the bar its opaque surface, exact in both scroll
   directions: scrolling back before the threshold returns the opening plane
   with the opening bar. A hero layer that does not paint cannot form a band
   below the divider, whatever any height arithmetic says. */
body.ck67[data-nav="established"] #ck66Plane{visibility:hidden}

/* 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; 6.9 · flat, lit */
.ck66-sprop{letter-spacing:.02em;text-shadow:none}
.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}
}


/* ======================================================================= 6.9
   THE LIT TYPE. Under html.jw-lit (set by jw-light.js only where
   background-clip:text is available) every hero statement surface clips its
   fill to its glyphs. The fill is the one viewport-fixed light, written by
   the painters per element as the inverse of that element's transform; until
   a painter writes it, and wherever none does, the surface's own ink is the
   fill (currentColor), so no letter can ever be blank. The manifesto's last
   line is painted per glyph (its glyph spans are their own surfaces), every
   other line as one surface. Selection keeps its Carbon ink; print keeps the
   Acid ink; the diagnostic glyph colours keep theirs.
   ==================================================================== */
html.jw-lit .ck66-qline,html.jw-lit .ck66-g,html.jw-lit .ck66-w,
html.jw-lit .ck66-sline,html.jw-lit .ck66-act,html.jw-lit .ck66-sprop{
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  background-color:currentColor;background-repeat:no-repeat}
html.jw-lit #ck66Quote ::selection,html.jw-lit .ck66-words ::selection{
  -webkit-text-fill-color:#171717;color:#171717;background:#DFFF00}
html.jw-lit body.ck67[data-diag="1"] .ck66-g{-webkit-text-fill-color:currentColor;background:none}
@media print{
  html.jw-lit .ck66-qline,html.jw-lit .ck66-g,html.jw-lit .ck66-w,
  html.jw-lit .ck66-sline,html.jw-lit .ck66-act,html.jw-lit .ck66-sprop{
    -webkit-text-fill-color:#DFFF00;background:none}
}

/* ==========================================================================
   The Brand Voice homepage plate — a real edit, not a retype
   --------------------------------------------------------------------------
   One sentence from the Victory corpus, edited into the approved voice in
   four steps over about nine seconds.  Everything here is a class change on
   text that is already laid out, so the card costs one repaint per step and
   nothing is re-measured per character.
   ========================================================================== */
.jwc--voice.jwv{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(8px,2.4%,16px);
}
.jwv-line{
  margin:0;
  font-family:Arial,Helvetica,system-ui,sans-serif;
  font-size:clamp(11px,2.05vw,19px);
  line-height:1.5;
  color:#F2EFE9;
  transition:font-family .001s,opacity .4s ease;
  text-wrap:balance;
}
.jwc--voice[data-branded="1"] .jwv-line{
  font-family:'SourceSerif4',Georgia,serif;
  font-size:clamp(11.5px,2.15vw,20px);
}
/* the three kinds of span */
.jwv-same{color:inherit}
.jwv-del,.jwv-ins{
  transition:opacity .38s ease,background-color .38s ease,max-width .38s ease,color .38s ease;
  display:inline;
}
/* step 0 — the draft as written: only what is there now */
.jwv[data-vstep="0"] .jwv-ins{display:none}
.jwv[data-vstep="0"] .jwv-del{background:transparent}
/* step 1 — what is going */
.jwv[data-vstep="1"] .jwv-ins{display:none}
.jwv[data-vstep="1"] .jwv-del{
  background:rgba(242,239,233,.10);
  color:rgba(242,239,233,.55);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
/* step 2 — what replaces it */
.jwv[data-vstep="2"] .jwv-del{opacity:0;font-size:0;letter-spacing:-1em}
.jwv[data-vstep="2"] .jwv-ins{background:rgba(255,105,46,.22);color:#F2EFE9}
/* step 3 and after — the line, settled */
.jwv[data-vstep="3"] .jwv-del,
.jwv[data-vstep="4"] .jwv-del,
.jwv[data-vstep="5"] .jwv-del{display:none}
.jwv[data-vstep="3"] .jwv-ins,
.jwv[data-vstep="4"] .jwv-ins,
.jwv[data-vstep="5"] .jwv-ins{background:transparent}
/* the principle cue */
.jwv-cue{
  margin:0;
  font-family:var(--font-brand,RadikalRec),system-ui,sans-serif;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(7px,1.02vw,10px);
  color:#FF692E;
  opacity:0;transform:translateY(4px);
  transition:opacity .45s ease,transform .45s ease;
}
.jwv[data-vstep="4"] .jwv-cue,
.jwv[data-vstep="5"] .jwv-cue{opacity:1;transform:none}
.jwv[data-vstep="5"] .jwv-line{opacity:.22}
@media (prefers-reduced-motion:reduce){
  .jwv-line,.jwv-del,.jwv-ins,.jwv-cue{transition:none}
  .jwv .jwv-del{display:none}
  .jwv .jwv-ins{background:transparent}
  .jwv .jwv-cue{opacity:1;transform:none}
}

/* SECTION 10 — the Brand Systems card shows the work, not the application.
   The Illustrator layers panel is legible at hero size and about five pixels
   wide on a homepage card, so the card retires it and the constructed post
   takes that width back. The case-study hero keeps the whole chrome. */
[data-bs-plate] .bs-chrome{display:none}

/* ============================================================================
   6.12 · THE WORK INDEX HIERARCHY (21 September 2026)
   Featured Work, then All Work in four groups with a visible group index.
   The tiles are the established cards, unchanged; what is added is the
   grouping around them and one quiet status label in the row. Everything
   here is static markup in index.html and reads without JavaScript.
   ========================================================================== */
.ck66-work{max-width:1460px;margin:0 auto}
.ck66-group{margin:0 0 clamp(56px,8vh,104px)}
.ck66-group:last-child{margin-bottom:0}
.ck66-group-head{display:grid;grid-template-columns:1fr auto;column-gap:clamp(16px,2.4vw,34px);
  align-items:baseline;margin:0 0 clamp(18px,2.6vh,30px);
  padding-top:clamp(18px,2.6vh,30px);border-top:1px solid rgba(242,239,233,.14)}
.ck66-group-title{grid-column:1;margin:0;font-weight:300;font-size:clamp(26px,3.2vw,44px);
  letter-spacing:.005em;line-height:1.05;color:#F2EFE9}
.ck66-cat-title{grid-column:1;margin:0;font-weight:400;font-size:clamp(20px,2.2vw,28px);
  letter-spacing:.005em;line-height:1.1;color:#F2EFE9}
.ck66-group-count{grid-column:2;margin:0;font-weight:500;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(242,239,233,.5);white-space:nowrap}
.ck66-group-desc{grid-column:1 / -1;margin:10px 0 0;max-width:64ch;
  font-weight:400;font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:rgba(242,239,233,.68)}
.ck66-group-head--cat{border-top-color:rgba(242,239,233,.10)}
.ck66-cat{margin:0 0 clamp(44px,6vh,76px)}
.ck66-cat:last-child{margin-bottom:0}
/* the group index: four anchors, one row, no controls */
.ck66-catindex{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 clamp(28px,4vh,48px)}
.ck66-catindex a{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:9px 16px;border:1px solid rgba(242,239,233,.22);color:#F2EFE9;text-decoration:none;
  font-weight:500;font-size:13px;letter-spacing:.03em;transition:border-color .2s ease,color .2s ease}
.ck66-catindex a:hover{border-color:rgba(223,255,0,.7);color:#DFFF00;text-decoration:none}
.ck66-catindex a:focus-visible{outline:2px solid #DFFF00;outline-offset:3px}
.ck66-catindex-n{font-weight:500;font-size:10.5px;letter-spacing:.18em;color:rgba(242,239,233,.5)}
.ck66-catindex a:hover .ck66-catindex-n{color:rgba(223,255,0,.8)}
.ck66-cat{scroll-margin-top:calc(var(--jw-head-h,64px) + 12px)}
/* the status label: provenance on its own line under the row, as quiet as
   the discipline, so the number, name and discipline keep their composition */
.ck66-tile-row{flex-wrap:wrap;row-gap:2px}
.ck66-tile-status{flex-basis:100%;margin-top:1px;text-align:right;
  font-weight:400;font-size:10.5px;letter-spacing:.14em;
  color:rgba(242,239,233,.5);text-transform:uppercase}
.ck66-group{scroll-margin-top:calc(var(--jw-head-h,64px) + 12px)}
@media (max-width:700px){
  .ck66-tile-status{text-align:left}
  .ck66-group-head{grid-template-columns:1fr}
  .ck66-group-count{grid-column:1;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){.ck66-catindex a{transition:none}}