/* ============================================================================
   carbon-field.css — the Carbon world, on the pages that were gray.
   ----------------------------------------------------------------------------
   §6. Carbon is a MATERIAL, not a flat fill: the base is #171717, the shared
   atmospheric field drifts over it at low amplitude, and a single very broad
   radial keeps the page from reading as an even rectangle. Nothing glows,
   nothing is chromed, and the field never rises above 0.09 alpha, so every
   line of copy, every label, input and focus ring keeps the contrast it had.
   ========================================================================== */
/* the pages that were light set their own body background inline and in
   system.css (body{background:#fff}, body.cv2{background:#fff}), so the
   Carbon page state has to win on specificity rather than order. This is the
   ONE place that raises it, and only for the page ground. */
body.jw-carbon,
body.site-shell.jw-carbon,
body.site-shell.cv2.jw-carbon{
  background:#171717 !important;
  color:#F2EFE9;
  position:relative;
  isolation:isolate;
}
/* large light panels inside those pages become Carbon surfaces */
body.jw-carbon section,
body.jw-carbon .cv2-sheet,
body.jw-carbon .cv2-band,
body.jw-carbon .wrap > .panel{background-color:transparent}
body.jw-carbon::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 22% 8%,  rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(120% 100% at 84% 96%, rgba(255,255,255,.030) 0%, rgba(255,255,255,0) 62%),
    #171717;
}
.jw-carbon-field{
  position:fixed;inset:0;z-index:-1;width:100%;height:100%;
  pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
}
/* a SECTION host carries the field inside itself rather than behind the page,
   so the homepage's closing block gets the same material without a second
   full-viewport layer */
[data-carbon="section"]{position:relative;isolation:isolate}
[data-carbon="section"] > .jw-carbon-field{
  position:absolute;inset:0;z-index:0;opacity:.85}
[data-carbon="section"] > *:not(.jw-carbon-field){position:relative;z-index:1}

/* the surfaces that were light rectangles become Carbon panels ------------ */
body.jw-carbon .bs-sec,
body.jw-carbon .bs-hero,
body.jw-carbon .closing,
body.jw-carbon .site-contact{background:transparent}

body.jw-carbon .cv-card,body.jw-carbon .cv-panel,body.jw-carbon .card,
body.jw-carbon .panel,body.jw-carbon .bs-next{
  background:rgba(255,255,255,.036);
  border:1px solid rgba(242,239,233,.10);
  border-radius:2px;
  /* 6.7.1 §1 · no backdrop-filter: it buys nothing here and it is one
     of the Safari compositing boundaries the flicker pass removes. */
}

/* copy and controls keep their contrast --------------------------------- */
body.jw-carbon h1,body.jw-carbon h2,body.jw-carbon h3,
body.jw-carbon .bs-title,body.jw-carbon .bs-concept{color:#F2EFE9}
body.jw-carbon p,body.jw-carbon li,body.jw-carbon dd,
body.jw-carbon .bs-say,body.jw-carbon .bs-lede{color:rgba(242,239,233,.86)}
body.jw-carbon .bs-kicker,body.jw-carbon .idx,
body.jw-carbon .bs-crumb{color:rgba(242,239,233,.56)}
body.jw-carbon a{color:#DFFF00}
body.jw-carbon a:hover{color:#EAFF4D}

body.jw-carbon input,body.jw-carbon textarea,body.jw-carbon select{
  background:rgba(0,0,0,.30);
  border:1px solid rgba(242,239,233,.22);
  color:#F2EFE9;border-radius:2px}
body.jw-carbon input::placeholder,body.jw-carbon textarea::placeholder{
  color:rgba(242,239,233,.42)}
body.jw-carbon label{color:rgba(242,239,233,.78)}
body.jw-carbon button,body.jw-carbon .btn{
  background:#DFFF00;color:#171717;border:0;border-radius:2px}

body.jw-carbon :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid #DFFF00;outline-offset:3px}

/* the breadcrumb and the continue rail ---------------------------------- */
.bs-crumb{display:flex;flex-wrap:wrap;gap:.55em;align-items:center;
  max-width:1180px;margin:0 auto;padding:calc(var(--jw-head-h,64px) + 18px) 24px 0;
  font-size:12px;letter-spacing:.06em}
.bs-crumb span[aria-hidden]{opacity:.38}
.bs-crumb [aria-current]{color:rgba(242,239,233,.86)}
.bs-hero{max-width:1180px;margin:0 auto;padding:clamp(26px,5vh,64px) 24px}
.bs-title{font-size:clamp(28px,4.6vw,58px);line-height:1.04;margin:.32em 0 .5em;
  letter-spacing:-.012em;text-wrap:balance}
.bs-lede{font-size:clamp(15px,1.6vw,20px);line-height:1.5;max-width:34em;
  color:rgba(242,239,233,.80)}
.bs-next{display:flex;flex-wrap:wrap;gap:14px;max-width:1180px;
  margin:clamp(30px,6vh,72px) auto;padding:22px 24px}
.bs-next__link{display:inline-block;padding:12px 18px;text-decoration:none;
  font-size:14px;letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){
  .jw-carbon-field{opacity:.9}     /* one static frame; the script never loops */
}


/* ======================================================================= 6.7
   THE COPIED CASE-STUDY ARTWORK, ON CARBON.

   The typeface anatomy panels, derivation panels and icon relays were drawn
   for a Bone page: their art sits on white and their ink is Carbon. Copied
   into a Carbon case study they would be white rectangles. Nothing about the
   artwork is redrawn — the SVGs paint with currentColor, so the surface and
   the ink are simply exchanged, and the measurement guides keep their own
   colours because they are the annotation, not the form.
   ==================================================================== */
body.jw-carbon .tfx{border-top-color:rgba(242,239,233,.22)}
body.jw-carbon .tfx__band{color:#F2EFE9}
body.jw-carbon .tfx__name,body.jw-carbon .tfx__metric b{color:#F2EFE9}
body.jw-carbon .tfx__k,body.jw-carbon .tfx__wt,
body.jw-carbon .tfx__hist,body.jw-carbon .tfx__metric span,
body.jw-carbon .tfx__step,body.jw-carbon .tfx__cl,
body.jw-carbon .tfx__notes li{color:rgba(242,239,233,.74)}
body.jw-carbon .tfx__art{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(242,239,233,.12);
  border-radius:2px;
  color:#DFFF00}                      /* the forms themselves become Acid */
body.jw-carbon .tfx__art--type{color:#F2EFE9}   /* the specimen stays Bone */
body.jw-carbon .tfx__art svg{color:inherit}
body.jw-carbon .tfx__art text{fill:rgba(242,239,233,.55)}

body.jw-carbon .bsx-family{color:#DFFF00}
body.jw-carbon .bsx-ico{color:#DFFF00}
body.jw-carbon .bsx-cell{color:rgba(242,239,233,.72)}
body.jw-carbon .bsx-tf,body.jw-carbon .bsx-fn{color:rgba(242,239,233,.48)}
body.jw-carbon .bsx-nm{color:rgba(242,239,233,.86)}
body.jw-carbon .rcard{background:rgba(255,255,255,.05);
  border:1px solid rgba(242,239,233,.12);color:#DFFF00}
body.jw-carbon .rcard__btn{background:rgba(242,239,233,.10);color:#F2EFE9;
  border:1px solid rgba(242,239,233,.20)}

/* the voice comparison: the "before" email was a white sheet ------------- */
body.jw-carbon .vc-email{background:rgba(255,255,255,.055);
  border:1px solid rgba(242,239,233,.12);color:#F2EFE9}
body.jw-carbon .vc-email__body{color:rgba(242,239,233,.86)}
body.jw-carbon .vc-email--after{background:rgba(255,105,46,.075);
  border-top:3px solid #FF692E}
body.jw-carbon .vc-email--after .vc-email__body{color:#F2EFE9}
body.jw-carbon .vc-email--after .vc-strong{color:#fff}
body.jw-carbon .vc-pair__num{color:#FF692E}
body.jw-carbon .vc-pair__shift,body.jw-carbon .vc-email__tag{color:rgba(242,239,233,.62)}
body.jw-carbon .vc-cue{color:#FF692E}