/* ============================================================
   NUNCHI CLIMATE — "The Part Box"

   The site is the livery the part ships in. Flat spot-colour
   fields, die-cut corners, dielines, crop marks, part-number
   blocks, mono spec strips, language panels.

   Rules this file holds to, everywhere:
     · No gradients. Ink is flat. A field is one colour.
     · Radius is 0, or 2px where a die-cut would round.
     · Midnight (--ink-4) appears once per page. Never twice.
     · Mono is for data only: references, values, codes, panels.
       Never as decoration for "technical".
     · Depth comes from ink density, dielines and the
       corrugation. There are no drop shadows at all: the only
       box-shadow in the build is a 2px inset printed underline.
   ============================================================ */

/* ------------------------------------------------------------
   1. INK AND STOCK
   ------------------------------------------------------------ */

:root {
  /* Inks, in press order */
  --ink-1:      #0A7A9F;   /* Nunchi Blue, the field */
  --ink-1-deep: #085C78;   /* second hit of ink 1 */
  --ink-2:      #0D3D52;   /* Deep Navy, dense data panels */
  --ink-3:      #7EC8DC;   /* Arctic Mist, highlight ink */
  --ink-4:      #1A1A2E;   /* Midnight. RESERVED, once per page */
  --alert:      #C0392B;
  --ok:         #14795E;

  /* Stock */
  --stock:      #FFFFFF;   /* unprinted board */
  --stock-warm: #F4F6F7;   /* the board's own tone */
  --tint:       #E6F4F8;   /* ink 1 at 10%, a tint block */

  /* Text on stock */
  --text:       #10222B;
  --text-mid:   #3F5C6B;
  --text-quiet: #556E7A;   /* 4.97:1 on --stock-warm */

  /* Text on a blue field */
  --on-field:        #FFFFFF;
  --on-field-quiet:  #F0F9FC;   /* 4.58:1 on --ink-1, the field is light so this runs close to white */
  --on-field-rule:   rgba(255,255,255,0.22);

  /* Dielines */
  --die:        #C4D6DE;   /* cut line on stock */
  --die-strong: #9FBCC8;
  --die-field:  rgba(255,255,255,0.28);

  --font: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Exponential ease-out. One curve for the whole surface. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 68px;
}

/* ------------------------------------------------------------
   2. RESET AND STOCK SURFACE
   ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

body.nc-page {
  margin: 0;
  background: var(--stock-warm);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.nc-page h1, .nc-page h2, .nc-page h3, .nc-page h4,
.nc-page p, .nc-page figure, .nc-page blockquote,
.nc-page dl, .nc-page dd, .nc-page ul, .nc-page ol { margin: 0; }
.nc-page ul, .nc-page ol { padding: 0; list-style: none; }
:where(.nc-page a) { color: inherit; text-decoration: none; }
.nc-page img { display: block; max-width: 100%; height: auto; }
/* Zero specificity, exactly like the anchor reset above it. At (0,1,1) this
   rule outranked every single-class button component in the theme — the mobile
   menu close, the language toggle, the consent buttons — silently replacing
   their font and colour with the body's. A reset must never outrank the thing
   it is resetting for. */
:where(.nc-page button) { font: inherit; color: inherit; }
.nc-page table { border-collapse: collapse; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); }

/* ---- Browser surfaces. These ship with defaults belonging to
        no design system, so the livery claims them too. ---- */

::selection { background: var(--ink-3); color: var(--ink-2); }

/* The `hidden` attribute is only a UA rule, so any author `display` beats it
   and the element stays on screen. Every component here that hides something
   from script also gives it a display, so this has to win outright. Without
   it the language panel hangs open and the audio player prints twice, once
   drawn and once native, whenever the script has not run. */
[hidden] { display: none !important; }

.nc-page { caret-color: var(--ink-1); accent-color: var(--ink-1); }

:where(.nc-page) :focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
  border-radius: 0;
}
.nc-field :focus-visible,
.nc-footer :focus-visible { outline-color: var(--ink-3); }

/* Numerals in any data context align in columns, as printed data does. */
.nc-mono, .nc-spec, .nc-refs-list code, .nc-partno,
.nc-spec-table, .nc-langs, .nc-crumbs {
  font-variant-numeric: tabular-nums;
}

@supports (scrollbar-color: auto) {
  .nc-page { scrollbar-color: var(--die-strong) var(--stock-warm); }
}
.nc-page ::-webkit-scrollbar { width: 12px; height: 12px; }
.nc-page ::-webkit-scrollbar-track { background: var(--stock-warm); }
.nc-page ::-webkit-scrollbar-thumb { background: var(--die-strong); border: 3px solid var(--stock-warm); }
.nc-page ::-webkit-scrollbar-thumb:hover { background: var(--ink-1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nc-page *, .nc-page *::before, .nc-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.nc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1100;
  background: var(--ink-4); color: #fff;
  padding: 0.75rem 1.25rem; font-weight: 700;
}
.nc-skip:focus { left: 0; }

/* ------------------------------------------------------------
   3. TYPE
   ------------------------------------------------------------ */

.nc-display {
  font-size: clamp(2.75rem, 7.5vw, 6rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.nc-h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.nc-h2 em { font-style: normal; color: var(--ink-1); }
.nc-field .nc-h2 em,
.nc-panel-dark .nc-h2 em,
.nc-panel-deep .nc-h2 em { color: var(--on-field-quiet); }

.nc-h3 {
  font-size: 1.0625rem; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.02em;
}

.nc-lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.7; color: var(--text-mid);
  max-width: 62ch;
}
.nc-field .nc-lede { color: var(--on-field-quiet); }

.nc-body { color: var(--text-mid); max-width: 68ch; }

/* Mono is data. Labels name a value; they never float above a heading. */
.nc-mono {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   4. THE DIELINE SYSTEM
   ------------------------------------------------------------ */

.nc-wrap {
  width: 100%; max-width: 1320px;
  margin: 0 auto; padding: 0 var(--gutter);
}
.nc-wrap-narrow { max-width: 820px; }

/* A panel is one face of the flat. Crop marks sit at its corners. */
.nc-panel { position: relative; }

.nc-panel > .nc-marks { position: absolute; inset: 0; pointer-events: none; }
.nc-marks i {
  position: absolute; width: 18px; height: 18px;
  border-color: var(--die-strong); border-style: solid; border-width: 0;
  /* clip-path rather than width/height: the mark keeps its exact 1px stroke
     and the reveal stays off the layout path. */
  clip-path: inset(0);
  transition: clip-path 0.55s var(--ease);
}
/* Inset off the trim, the way registration marks sit inside the cut edge. */
.nc-marks i:nth-child(1) { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.nc-marks i:nth-child(2) { top: 14px; right: 14px; border-width: 1px 1px 0 0; }
.nc-marks i:nth-child(3) { bottom: 14px; left: 14px; border-width: 0 0 1px 1px; }
.nc-marks i:nth-child(4) { bottom: 14px; right: 14px; border-width: 0 1px 1px 0; }

.nc-field .nc-marks i,
.nc-panel-dark .nc-marks i,
.nc-panel-deep .nc-marks i { border-color: rgba(255,255,255,0.55); }

/* The authored moment: each mark draws outward from its own corner as the
   panel arrives, the way a printer lays registration marks down last. */
@media (prefers-reduced-motion: no-preference) {
  .nc-panel:not(.is-marked) .nc-marks i:nth-child(1) { clip-path: inset(0 100% 100% 0); }
  .nc-panel:not(.is-marked) .nc-marks i:nth-child(2) { clip-path: inset(0 0 100% 100%); }
  .nc-panel:not(.is-marked) .nc-marks i:nth-child(3) { clip-path: inset(100% 100% 0 0); }
  .nc-panel:not(.is-marked) .nc-marks i:nth-child(4) { clip-path: inset(100% 0 0 100%); }
}

/* Fold line between panels. */
.nc-fold { border-top: 1px dashed var(--die); }
.nc-field .nc-fold, .nc-panel-dark .nc-fold { border-top-color: var(--die-field); }

/* Panel margin marking: printed in the trim, never above a heading. */
.nc-mark {
  font-family: var(--mono);
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-quiet);
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 1.25rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--die);
}
.nc-mark::after { content: ''; flex: 1; }
.nc-field .nc-mark, .nc-panel-dark .nc-mark {
  color: var(--ink-3); border-bottom-color: var(--die-field);
}

/* ------------------------------------------------------------
   5. FIELDS AND SECTIONS
   ------------------------------------------------------------ */

.nc-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.nc-section-tight { padding: clamp(2rem, 4vw, 3rem) 0; }

.nc-stock { background: var(--stock); }
.nc-stock-warm { background: var(--stock-warm); }
.nc-tint { background: var(--tint); }

/* The drenched field: ink 1 owns the whole region, flat. */
.nc-field {
  background: var(--ink-1);
  color: var(--on-field);
}
.nc-field .nc-body, .nc-field p { color: var(--on-field-quiet); }

/* The one reserved moment. Used once per page, never twice. */
.nc-panel-dark {
  background: var(--ink-4);
  color: #fff;
}
.nc-panel-dark p { color: rgba(255,255,255,0.72); }

/* Deep navy: dense data regions and the base panel. */
.nc-panel-deep { background: var(--ink-2); color: #fff; }
.nc-panel-deep p { color: var(--on-field-quiet); }

/* ------------------------------------------------------------
   6. PRINTED FURNITURE
   ------------------------------------------------------------ */

/* Part-number block: reversed out, as it prints on the face. */
.nc-partno {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.06em;
  background: var(--stock); color: var(--ink-2);
  padding: 0.4rem 0.75rem;
  border-radius: 2px;
}
.nc-partno-label {
  font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-quiet);
}
.nc-field .nc-partno { background: var(--stock); color: var(--ink-2); }
.nc-stock .nc-partno, .nc-stock-warm .nc-partno, .nc-tint .nc-partno {
  background: var(--ink-2); color: #fff;
}
.nc-stock .nc-partno-label, .nc-stock-warm .nc-partno-label, .nc-tint .nc-partno-label {
  color: var(--on-field-quiet);
}

/* Spec strip: mono key/value cells divided by dielines. */
.nc-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  /* The crease the face folds on. */
  border-top: 1px dashed var(--die);
}
.nc-field .nc-spec, .nc-panel-deep .nc-spec, .nc-panel-dark .nc-spec {
  border-top-color: rgba(255,255,255,0.45);
}
.nc-spec > div {
  /* Centred in the cell, with equal padding on both sides. The label and value
     used to run hard against the divider on their left because the left padding
     was zeroed to align the first cell with the headline above it; that made
     every cell after the first look jammed against its rule. */
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--die);
}
.nc-field .nc-spec > div,
.nc-panel-deep .nc-spec > div,
.nc-panel-dark .nc-spec > div { border-right-color: var(--die-field); }
.nc-spec > div:last-child { border-right: 0; }
.nc-spec dt {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-quiet); margin-bottom: 0.5rem;
}
.nc-field .nc-spec dt,
.nc-panel-deep .nc-spec dt,
.nc-panel-dark .nc-spec dt { color: var(--on-field-quiet); }
.nc-spec dd {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.05; color: var(--text);
  text-wrap: balance;
  margin-inline: auto; max-width: 22ch;
}
/* The strip carries figures and facts side by side. A figure sets at display
   weight; an answer like a city or a description sets down a step so it wraps
   to two readable lines instead of three cramped ones. The template picks the
   modifier from the value's own length, so a client typing anything into the
   field still lands in the right register. */
.nc-spec dd.is-fact {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.35;
}
.nc-field .nc-spec dd,
.nc-panel-deep .nc-spec dd,
.nc-panel-dark .nc-spec dd { color: #fff; }

/* Language panel: the same name, six markets, as it prints down the side. */
.nc-langs {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 400;
  line-height: 2.1; letter-spacing: 0.04em;
  color: var(--on-field-quiet);
}
.nc-langs li { display: flex; gap: 0.75rem; white-space: nowrap; }
.nc-langs b {
  font-weight: 500; color: var(--on-field-quiet);
  min-width: 1.75rem; letter-spacing: 0.12em;
}
.nc-stock .nc-langs, .nc-stock-warm .nc-langs, .nc-tint .nc-langs { color: var(--text-quiet); }
.nc-stock .nc-langs b, .nc-stock-warm .nc-langs b, .nc-tint .nc-langs b { color: var(--ink-1); }

/* Barcode: drawn from bars, not an image. Never claimed as scannable. */
.nc-barcode {
  display: block; height: 34px; width: 100%; max-width: 190px;
  background-image: repeating-linear-gradient(
    to right,
    currentColor 0 1px, transparent 1px 3px,
    currentColor 3px 5px, transparent 5px 6px,
    currentColor 6px 7px, transparent 7px 10px,
    currentColor 10px 13px, transparent 13px 14px
  );
  opacity: 0.9;
}
.nc-barcode-num {
  font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.32em; margin-top: 0.375rem;
}

/* Corrugated edge: the board's flute, seen at a cut. */
.nc-corrugate {
  height: 10px;
  background-image: repeating-linear-gradient(
    115deg,
    var(--die) 0 1px, transparent 1px 7px
  );
  border-top: 1px solid var(--die);
  border-bottom: 1px solid var(--die);
}
.nc-panel-deep .nc-corrugate, .nc-field .nc-corrugate {
  background-image: repeating-linear-gradient(115deg, var(--die-field) 0 1px, transparent 1px 7px);
  border-color: var(--die-field);
}

/* Overprint: where highlight ink crosses the field, it multiplies. */
.nc-overprint { mix-blend-mode: multiply; }

/* ------------------------------------------------------------
   7. CONTROLS — die-cut stamps, not buttons
   ------------------------------------------------------------ */

.nc-stamp,
.nc-stamp-ghost,
.nc-stamp-quiet {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--font); font-size: 0.875rem; font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent; border-radius: 2px;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.nc-stamp svg, .nc-stamp-ghost svg, .nc-stamp-quiet svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* On stock */
.nc-stamp { background: var(--ink-1); color: #fff; border-color: var(--ink-1); }
.nc-stamp:hover { background: var(--ink-2); border-color: var(--ink-2); }

.nc-stamp-ghost { background: transparent; color: var(--ink-2); border-color: var(--die-strong); }
.nc-stamp-ghost:hover { border-color: var(--ink-1); color: var(--ink-1-deep); background: var(--tint); }

/* On a field */
.nc-field .nc-stamp { background: var(--stock); color: var(--ink-2); border-color: var(--stock); }
.nc-field .nc-stamp:hover { background: var(--ink-3); border-color: var(--ink-3); color: var(--ink-2); }
.nc-field .nc-stamp-ghost,
.nc-panel-dark .nc-stamp-ghost,
.nc-panel-deep .nc-stamp-ghost { color: #fff; border-color: var(--die-field); background: transparent; }
.nc-field .nc-stamp-ghost:hover,
.nc-panel-dark .nc-stamp-ghost:hover,
.nc-panel-deep .nc-stamp-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

.nc-stamp-quiet {
  padding: 0; border: 0; background: none; color: var(--ink-1);
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--die-strong);
  border-radius: 0; padding-bottom: 2px;
}
.nc-stamp-quiet:hover { border-bottom-color: var(--ink-1); }
.nc-field .nc-stamp-quiet, .nc-panel-deep .nc-stamp-quiet { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.nc-field .nc-stamp-quiet:hover { border-bottom-color: #fff; }

/* ------------------------------------------------------------
   8. HEADER — the box's top edge
   ------------------------------------------------------------ */

.nc-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--ink-1);
  border-bottom: 1px solid var(--die-field);
}
.nc-header-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: var(--header-h);
}
.nc-logo { display: flex; align-items: center; color: #fff; flex: 0 0 auto; }
.nc-logo svg { height: 26px; width: auto; }

.nc-nav { display: flex; align-items: center; gap: 0.25rem; }
.nc-nav a {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-field-quiet);
  padding: 0.5rem 0.875rem;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nc-nav a:hover { color: #fff; background: rgba(255,255,255,0.12); }
.nc-nav a.is-here { color: #fff; box-shadow: inset 0 -2px 0 #fff; }

.nc-nav-stamp {
  font-family: var(--font) !important;
  font-size: 0.8125rem !important; font-weight: 700 !important;
  letter-spacing: -0.01em !important; text-transform: none !important;
  background: var(--stock); color: var(--ink-2) !important;
  padding: 0.5rem 1rem !important; border-radius: 2px;
  margin-left: 0.5rem;
}
.nc-nav-stamp:hover { background: var(--ink-3) !important; color: var(--ink-2) !important; }

/* ---------- language switcher ---------- */

/* The control lives inside .nc-nav, so every rule below is scoped to .nc-lang.
   Without that the panel inherits the header links wholesale — mono, uppercase,
   and `a.is-here { color:#fff }`, which paints the current language white on a
   pale blue row. Component styles win over the container they sit in. */

/* Header control: the code is data, so it is set in mono like every other
   figure on the site. The panel is a flat white label on the blue field —
   a dieline border rather than a shadow, which this world does not have. */
.nc-lang { position: relative; flex: 0 0 auto; margin-left: 0.25rem; }
.nc-lang .nc-lang-toggle {
  display: flex; align-items: center; gap: 0.375rem;
  background: none; border: 1px solid var(--die-field); border-radius: 2px;
  color: var(--on-field-quiet); cursor: pointer;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4375rem 0.5rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nc-lang .nc-lang-toggle:hover,
.nc-lang .nc-lang-toggle[aria-expanded="true"] { color: #fff; border-color: rgba(255,255,255,0.55); }
.nc-lang .nc-lang-toggle svg { width: 14px; height: 14px; flex: 0 0 auto; }
.nc-lang .nc-lang-toggle svg:last-child { width: 12px; height: 12px; transition: transform 0.2s var(--ease); }
.nc-lang .nc-lang-toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

.nc-lang .nc-lang-list {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 1040;
  min-width: 13rem; margin: 0; padding: 0.25rem; list-style: none;
  background: var(--stock); border: 1px solid var(--die-strong); border-radius: 2px;
}
.nc-lang .nc-lang-list li { margin: 0; }

/* The full reset matters: these are anchors inside the header nav, which sets
   mono, uppercase, letter-spacing and an underline shadow on the current item. */
.nc-lang .nc-lang-list a {
  display: flex; align-items: baseline; gap: 0.625rem;
  padding: 0.5rem 0.625rem; border-radius: 2px;
  font-family: var(--font); text-transform: none; letter-spacing: normal;
  background: none; box-shadow: none;
  color: var(--text);
  transition: background 0.2s var(--ease);
}
.nc-lang .nc-lang-list a:hover { background: var(--tint); color: var(--text); }
.nc-lang .nc-lang-list a.is-here { background: var(--tint); color: var(--text); box-shadow: none; }

.nc-lang .nc-lang-code {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-1-deep);
  flex: 0 0 2.5rem;
}
.nc-lang .nc-lang-name { font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; }
.nc-lang .nc-lang-list a.is-here .nc-lang-name { font-weight: 700; }

/* Overlay form: a plain row of codes. There is width for it, and a dropdown
   inside an open menu would be one layer too many. Nine wrap to two rows. */
.nc-lang-inline { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.nc-lang-inline a {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-field-quiet);
  padding: 0.4375rem 0.625rem;
  border: 1px solid var(--die-field); border-radius: 2px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nc-lang-inline a:hover { color: #fff; border-color: rgba(255,255,255,0.55); }
.nc-lang-inline a.is-here { background: var(--stock); border-color: var(--stock); color: var(--ink-2); }

.nc-burger {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.nc-burger span { display: block; width: 20px; height: 1.5px; background: #fff; }

/* The overlay is the field at full bleed: close row, menu, foot.
   `1fr` on the middle row centres the links in whatever space the other two
   leave, and lets the whole panel scroll on a short handset. */
.nc-menu {
  display: none; position: fixed; inset: 0; z-index: 1050;
  background: var(--ink-1); color: #fff;
  grid-template-rows: auto 1fr auto;
  padding: 1rem var(--gutter) 1.75rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.nc-menu.is-open { display: grid; }

.nc-menu-head { display: flex; justify-content: flex-end; }
.nc-menu-close {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 0 0.5rem 0.5rem;
}

/* Every row carries the same padding and the same fold line below it, so the
   gaps between items are identical by construction. Nothing here adds a margin
   of its own — that is what put the old CTA out of rhythm. */
.nc-menu-list {
  display: flex; flex-direction: column; justify-content: center;
}
/* The opening rule goes on the first item, not on the container: the container
   fills the whole centre row, so a border there would float far above the
   links rather than closing the block. */
.nc-menu-list a:first-child { border-top: 1px dashed var(--die-field); }
.nc-menu-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: clamp(1.5rem, 6.5vw, 2rem); font-weight: 700; letter-spacing: -0.03em;
  color: var(--on-field-quiet);
  padding: 1.125rem 0;
  border-bottom: 1px dashed var(--die-field);
  transition: color 0.2s var(--ease);
}
.nc-menu-list a:hover, .nc-menu-list a.is-here { color: #fff; }

/* The action reads as the action through ink and an arrow, not through a gap.
   Qualified with the list class rather than given !important: the old CTA lost
   its stamp styling to exactly this kind of specificity mismatch. */
.nc-menu-list a.nc-menu-cta { color: #fff; }
.nc-menu-cta svg { width: 22px; height: 22px; flex: 0 0 auto; }

.nc-menu-foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--die-field);
}
.nc-menu-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.nc-menu-contact a, .nc-menu-contact p {
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.4;
  color: var(--on-field-quiet); margin: 0;
}
.nc-menu-contact a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--die-field); }
.nc-menu-contact a:hover { color: #fff; text-decoration-color: #fff; }

.nc-menu-base { display: flex; align-items: center; gap: 0.75rem; color: #fff; }
.nc-menu-base span:last-child {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-field-quiet);
}
.nc-menu-base:hover span:last-child { color: #fff; }
.nc-menu-mark { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.nc-menu-mark svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------
   9. THE BOX FACE — first viewport
   ------------------------------------------------------------ */

.nc-face {
  position: relative; overflow: hidden;
  background: var(--ink-1); color: #fff;
  padding: clamp(3.5rem, 7vw, 6rem) 0 0;
}
.nc-face-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.nc-face h1 { color: #fff; margin-bottom: 1.5rem; }
.nc-face h1 em { font-style: normal; color: inherit; }
.nc-face-lede { margin-bottom: 2rem; }
.nc-face-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.nc-face-side {
  display: flex; flex-direction: column; gap: 1.5rem;
  align-items: flex-start; padding-top: 0.5rem;
}

/* Section head: heading, optional corner link, closed by a dieline.
   No label sits above the heading; the heading carries itself. */
.nc-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap;
  padding-bottom: 1.5rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--die);
}
.nc-sec-head > div:first-child { flex: 1 1 32ch; }
.nc-sec-head .nc-lede { margin-top: 0.875rem; }
.nc-field .nc-sec-head,
.nc-panel-deep .nc-sec-head,
.nc-panel-dark .nc-sec-head { border-bottom-color: var(--die-field); }

/* The reserved moment: one quote, set at reading scale, nothing else on it. */
.nc-quote blockquote {
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 500; line-height: 1.35; letter-spacing: -0.03em;
  color: #fff; text-wrap: pretty;
}
.nc-quote blockquote::before { content: '\201C'; }
.nc-quote blockquote::after { content: '\201D'; }
.nc-quote-by {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.nc-quote-face {
  width: 48px; height: 48px; flex: 0 0 auto; overflow: hidden;
  border-radius: 2px; background: rgba(255,255,255,0.08);
}
.nc-quote-face img { width: 100%; height: 100%; object-fit: cover; }
.nc-quote-by b { display: block; font-size: 0.9375rem; font-weight: 700; color: #fff; }
.nc-quote-by span span {
  display: block; margin-top: 0.125rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
}

/* Closing band */
.nc-close {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem 3rem; flex-wrap: wrap;
}
.nc-close > div:first-child { flex: 1 1 34ch; }
.nc-close .nc-lede { margin-top: 0.75rem; }
.nc-close-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ------------------------------------------------------------
   10. FACES — categories and products
   ------------------------------------------------------------ */

.nc-faces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0; border-top: 1px solid var(--die); border-left: 1px solid var(--die);
}
.nc-faces-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* Each face is a printed panel in the sheet, not a floating card.

   It paints its own ground, so it has to declare its own ink with it. Dropped
   into `.nc-field` the cell kept the field's white type, and the face name,
   which sets no colour of its own, went white on white: present, selectable,
   invisible. The note below it survived only because it happens to name a
   colour. A component that brings its own background is responsible for the
   text on it. */
.nc-face-cell {
  position: relative; display: flex; flex-direction: column;
  background: var(--stock); color: var(--text);
  border-right: 1px solid var(--die); border-bottom: 1px solid var(--die);
  padding: 1.75rem 1.5rem 1.5rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
/* Attention changes the field, not the element. */
.nc-face-cell:hover { background: var(--tint); }
.nc-face-cell:hover .nc-face-cell-go { color: var(--ink-1-deep); gap: 0.75rem; }

.nc-face-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.75rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--die);
}
/* Two lines of name reserved, so a wrapping title does not drop this face's
   note and reference count off the row's shared baseline. */
.nc-face-name { min-height: 2.3em; }
.nc-face-icon { color: var(--ink-1); flex: 0 0 auto; margin-top: 0.15em; }
.nc-face-icon svg { width: 22px; height: 22px; stroke-width: 1.3; }
.nc-face-name {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.15;
}
.nc-face-note { font-size: 0.875rem; color: var(--text-mid); line-height: 1.6; }
.nc-face-cell-go {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: auto; padding-top: 1.5rem;
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-quiet);
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.nc-face-cell-go svg { width: 13px; height: 13px; }

/* Product face: photograph or drawn part, then its printed data. Same rule as
   the face cell above: its own ground, so its own ink. */
.nc-prod {
  position: relative; display: flex; flex-direction: column;
  background: var(--stock); color: var(--text);
  border-right: 1px solid var(--die); border-bottom: 1px solid var(--die);
  transition: background 0.3s var(--ease);
}
.nc-prod:hover { background: var(--tint); }
.nc-prod-img {
  position: relative; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--stock-warm);
  border-bottom: 1px solid var(--die);
  overflow: hidden; color: var(--ink-1);
}
.nc-prod:hover .nc-prod-img { background: var(--stock); }
.nc-prod-img img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; }
.nc-prod-img svg { width: 84px; height: 84px; stroke-width: 0.9; opacity: 0.3; }
.nc-prod-cat {
  /* Overprint: the flash multiplies into whatever it crosses, the way a
     second ink hit behaves on press. */
  mix-blend-mode: multiply;
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: 0.5625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink-1); color: #fff;
  padding: 0.35rem 0.6rem;
}
.nc-prod-body { padding: 1.125rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.nc-prod-name { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.nc-prod-meta {
  font-family: var(--mono); font-size: 0.6875rem; color: var(--text-quiet);
  letter-spacing: 0.02em;
}
.nc-prod-ref {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  color: var(--ink-2); letter-spacing: 0.06em;
  padding-top: 0.625rem; margin-top: auto;
  border-top: 1px dashed var(--die);
}

/* An unprinted face: honest, not broken. */
.nc-blank {
  grid-column: 1 / -1;
  border-right: 1px solid var(--die); border-bottom: 1px solid var(--die);
  background:
    repeating-linear-gradient(135deg, var(--stock) 0 10px, var(--stock-warm) 10px 20px);
  padding: clamp(2.5rem, 5vw, 4rem) 2rem; text-align: center;
}
.nc-blank p { max-width: 46ch; margin: 0 auto 1.5rem; color: var(--text-mid); }
.nc-blank-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------
   11. CLAIM PANELS — replaces the icon-card grid
   ------------------------------------------------------------ */

.nc-claims { border-top: 1px solid var(--die-field); }
.nc-claim {
  display: grid;
  /* Two columns since the index was dropped: claim, then substantiation. */
  grid-template-columns: minmax(0, 24ch) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem); align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--die-field);
  transition: background 0.3s var(--ease);
}
.nc-claim:hover { background: rgba(255,255,255,0.06); }
.nc-claim-n {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; color: var(--on-field-quiet);
}
.nc-claim h3 { font-size: clamp(1.125rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.nc-claim p { font-size: 0.9375rem; line-height: 1.7; }

/* ------------------------------------------------------------
   12. PROSE
   ------------------------------------------------------------ */

.nc-prose { color: var(--text-mid); line-height: 1.75; max-width: 68ch; }
.nc-prose > * + * { margin-top: 1.125rem; }
.nc-prose strong { color: var(--text); font-weight: 700; }
.nc-prose h2 { font-size: 1.375rem; font-weight: 700; color: var(--text); letter-spacing: -0.025em; margin-top: 2.5rem; }
.nc-prose h3 { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-top: 1.75rem; }
.nc-prose a { color: var(--ink-1); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nc-prose ul li, .nc-prose ol li { margin-bottom: 0.5rem; padding-left: 1.25rem; position: relative; }
.nc-prose ul li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 6px; height: 1px; background: var(--ink-1); }
.nc-prose ol { counter-reset: nc; }
.nc-prose ol li { counter-increment: nc; }
.nc-prose ol li::before {
  content: counter(nc); position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-1);
}
.nc-prose blockquote { border-left: 1px solid var(--ink-1); padding-left: 1.25rem; color: var(--text); }
.nc-prose table { width: 100%; font-size: 0.9375rem; }
.nc-prose th, .nc-prose td { border: 1px solid var(--die); padding: 0.625rem 0.875rem; text-align: left; }

/* ------------------------------------------------------------
   13. PRODUCT DETAIL
   ------------------------------------------------------------ */

.nc-pdp-in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.nc-pdp-img {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5; background: var(--stock);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--die-field); color: var(--ink-1);
  overflow: hidden;
}
.nc-pdp-img img { width: 100%; height: 100%; object-fit: contain; padding: 2rem 2rem 4rem; }
.nc-pdp-img svg { width: 96px; height: 96px; stroke-width: 0.9; opacity: 0.28; }

/* With no photograph the well is still a printed window: a keyline inside the
   trim and the reference set on the stock, so the state reads as designed
   rather than as a missing asset. */
.nc-pdp-img.is-blank::before {
  content: ''; position: absolute; inset: 14px;
  border: 1px dashed var(--die);
}
.nc-pdp-window {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--die);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-quiet); background: var(--stock);
}
.nc-pdp h1 { color: #fff; margin: 0.75rem 0 1.25rem; }
.nc-pdp-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; }

.nc-spec-table { width: 100%; font-size: 0.9375rem; }
.nc-spec-table tr { border-bottom: 1px solid var(--die); }
.nc-spec-table tr:first-child { border-top: 1px solid var(--die); }
.nc-spec-table th {
  text-align: left; font-weight: 400; color: var(--text-mid);
  padding: 0.75rem 1rem 0.75rem 0; width: 45%; vertical-align: top;
}
.nc-spec-table td {
  padding: 0.75rem 0; font-family: var(--mono); font-size: 0.875rem;
  font-weight: 500; color: var(--text);
}

.nc-refs-list { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--die); border-left: 1px solid var(--die); }
.nc-refs-list li { border-right: 1px solid var(--die); border-bottom: 1px solid var(--die); }
.nc-refs-list code {
  display: block; padding: 0.625rem 0.875rem;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  color: var(--ink-2); letter-spacing: 0.04em;
}

/* The specification block sits on the reserved Midnight panel, so its table
   and reference chips take the reversed inks. Without this the values render
   near-black on near-black; it only became visible once real product data was
   imported, because an empty table shows nothing to be wrong. */
.nc-panel-dark .nc-spec-table tr { border-bottom-color: rgba(255,255,255,0.16); }
.nc-panel-dark .nc-spec-table tr:first-child { border-top-color: rgba(255,255,255,0.16); }
.nc-panel-dark .nc-spec-table th { color: rgba(255,255,255,0.62); }
.nc-panel-dark .nc-spec-table td { color: #fff; }
.nc-panel-dark .nc-block-title { color: #fff; }
.nc-panel-dark .nc-refs-list,
.nc-panel-dark .nc-refs-list li { border-color: rgba(255,255,255,0.16); }
.nc-panel-dark .nc-refs-list code { color: var(--ink-3); }
.nc-panel-dark .nc-refs-note { color: rgba(255,255,255,0.55); }

.nc-pdp-detail {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem); align-items: start;
}
.nc-block-title {
  font-size: 1rem; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------
   14. FORMS — a label printed on the panel
   ------------------------------------------------------------ */

/* A white panel must establish its own ink, not inherit the section's.
   Without the colour reset this box takes `color:#fff` from .nc-panel-dark on
   the product page and any text inside it that does not set its own colour —
   the "Prefer email?" line, the intro paragraph — renders white on white and
   disappears. The labels survived only because they set a colour themselves. */
.nc-form-panel {
  background: var(--stock); color: var(--text);
  border: 1px solid var(--die); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.nc-form-panel p { color: var(--text-mid); }
.nc-form-panel a { color: var(--ink-1-deep); text-decoration: underline; text-underline-offset: 3px; }
.nc-form-panel a:hover { color: var(--ink-2); }
.nc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.nc-form-field.is-full { grid-column: 1 / -1; }
.nc-form-field label {
  display: block; font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-quiet); margin-bottom: 0.5rem;
}
.nc-form-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23556E7A' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 11px;
  padding-right: 2.25rem;
}
.nc-form-field textarea { resize: vertical; }

.nc-form-field input,
.nc-form-field select,
.nc-form-field textarea {
  width: 100%; font: inherit; font-size: 0.9375rem;
  padding: 0.75rem 0.875rem;
  background-color: var(--stock-warm); color: var(--text);
  border: 1px solid var(--die); border-radius: 0;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nc-form-field textarea { resize: vertical; min-height: 3.5rem; }
.nc-form-field input::placeholder, .nc-form-field textarea::placeholder { color: var(--text-quiet); }
.nc-form-field input:focus,
.nc-form-field select:focus,
.nc-form-field textarea:focus {
  outline: none; border-color: var(--ink-1); background-color: var(--stock);
  box-shadow: inset 0 -2px 0 var(--ink-1);
}
.nc-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nc-form-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; }
.nc-form-note { font-size: 0.8125rem; color: var(--text-quiet); }
.nc-form-note a { color: var(--ink-1); font-weight: 500; }

.nc-status { padding: 0.875rem 1.125rem; font-size: 0.875rem; margin-bottom: 1.25rem; border-left: 1px solid; }
.nc-status.is-ok { background: rgba(20,121,94,0.07); border-color: var(--ok); color: var(--ok); }
.nc-status.is-bad { background: rgba(192,57,43,0.06); border-color: var(--alert); color: var(--alert); }

/* Catalogue finder */
.nc-finder { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--die); background: var(--stock); }
.nc-finder-field { flex: 1 1 300px; padding: 1rem 1.25rem; }
.nc-finder label {
  display: block; font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-quiet); margin-bottom: 0.375rem;
}
.nc-finder input {
  width: 100%; font: inherit; font-size: 1.0625rem; font-family: var(--mono);
  border: 0; background: none; padding: 0; color: var(--text);
}
.nc-finder input:focus { outline: none; }
.nc-finder-field:focus-within { background: var(--tint); }
.nc-finder button { border-radius: 0; padding-inline: 2rem; align-self: stretch; }

.nc-tabs { display: flex; flex-wrap: wrap; gap: 0; border-left: 1px solid var(--die); margin-top: -1px; }
.nc-tab {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.75rem 1.125rem; color: var(--text-mid);
  background: var(--stock);
  border: 1px solid var(--die); border-left: 0;
  display: flex; align-items: center; gap: 0.5rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nc-tab:hover { background: var(--tint); color: var(--ink-1-deep); }
.nc-tab.is-on { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.nc-tab span { font-size: 0.625rem; color: var(--text-quiet); }
.nc-tab.is-on span { color: var(--ink-3); }

/* ------------------------------------------------------------
   15. FAQ, STAGES, LISTS
   ------------------------------------------------------------ */

.nc-faq { border-top: 1px solid var(--die); }
.nc-faq details { border-bottom: 1px solid var(--die); }
.nc-faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em;
}
.nc-faq summary::-webkit-details-marker { display: none; }
.nc-faq-sign {
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-1); flex: 0 0 auto;
}
.nc-faq details[open] .nc-faq-sign { color: var(--text-quiet); }
.nc-faq-a { padding: 0 0 1.5rem; color: var(--text-mid); max-width: 68ch; }
.nc-faq-a p + p { margin-top: 0.75rem; }

.nc-stages { border-top: 1px solid var(--die); }
.nc-stage {
  display: grid; grid-template-columns: 3.5rem minmax(0, 20ch) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline;
  padding: 1.75rem 0; border-bottom: 1px solid var(--die);
}
.nc-stage-n { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--ink-1); letter-spacing: 0.08em; }
.nc-stage h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; }
.nc-stage p { font-size: 0.9375rem; color: var(--text-mid); line-height: 1.7; }

.nc-ticks { display: grid; gap: 0; border-top: 1px solid var(--die); }
.nc-ticks li {
  display: flex; align-items: baseline; gap: 0.875rem;
  padding: 0.875rem 0; border-bottom: 1px solid var(--die);
  font-size: 0.9375rem; color: var(--text-mid);
}
.nc-ticks li::before {
  content: ''; flex: 0 0 auto; width: 10px; height: 1px;
  background: var(--ink-1); transform: translateY(-0.35em);
}
.nc-field .nc-ticks, .nc-panel-deep .nc-ticks { border-top-color: var(--die-field); }
.nc-field .nc-ticks li, .nc-panel-deep .nc-ticks li { border-bottom-color: var(--die-field); color: var(--on-field-quiet); }
.nc-field .nc-ticks li::before, .nc-panel-deep .nc-ticks li::before { background: var(--ink-3); }

.nc-markets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  border-top: 1px solid var(--die); border-left: 1px solid var(--die);
}
.nc-markets li {
  padding: 0.875rem 1.125rem;
  border-right: 1px solid var(--die); border-bottom: 1px solid var(--die);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--text-mid); background: var(--stock);
}

/* ------------------------------------------------------------
   16. CONTACT LINES, CRUMBS, PAGINATION
   ------------------------------------------------------------ */

.nc-lines { border-top: 1px solid var(--die); }
.nc-line {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 1rem 0; border-bottom: 1px solid var(--die);
  transition: background 0.25s var(--ease);
}
a.nc-line:hover { background: var(--tint); }
.nc-line-k {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-quiet); flex: 0 0 7.5rem;
}
.nc-line-v { font-size: 1rem; font-weight: 500; color: var(--text); }
a.nc-line:hover .nc-line-v { color: var(--ink-1-deep); }

.nc-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-field-quiet); margin-bottom: 1.75rem;
}
.nc-crumbs a:hover { color: #fff; }
.nc-crumbs i { font-style: normal; opacity: 0.45; }
.nc-crumbs b { font-weight: 500; color: #fff; }

.nc-page ul.page-numbers { display: flex; flex-wrap: wrap; gap: 0; margin: 2.5rem 0 0; border-left: 1px solid var(--die); }
.nc-page ul.page-numbers li { list-style: none; }
.nc-page a.page-numbers, .nc-page span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 0.875rem;
  border: 1px solid var(--die); border-left: 0;
  background: var(--stock); color: var(--text-mid);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nc-page a.page-numbers:hover { background: var(--tint); color: var(--ink-1-deep); }
.nc-page .page-numbers.current { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.nc-page .navigation .nav-links { display: flex; flex-wrap: wrap; gap: 0; border-left: 1px solid var(--die); }
.nc-page .navigation.pagination { margin-top: 2.5rem; }
.nc-page .navigation .screen-reader-text { display: none; }

/* ------------------------------------------------------------
   17. FOOTER — the base panel
   ------------------------------------------------------------ */

.nc-footer { background: var(--ink-2); color: #fff; }
.nc-footer-in {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.nc-footer-logo { display: inline-block; color: #fff; margin-bottom: 1.25rem; }
.nc-footer-logo svg { height: 24px; width: auto; }
.nc-footer-blurb { font-size: 0.875rem; color: var(--on-field-quiet); line-height: 1.7; max-width: 34ch; }
.nc-footer h2 {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 1rem;
}
.nc-footer-links { display: flex; flex-direction: column; gap: 0.625rem; }
.nc-footer-links a { font-size: 0.875rem; color: var(--on-field-quiet); }
.nc-footer-links a:hover { color: #fff; }
.nc-footer-contact { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; font-size: 0.875rem; }
.nc-footer-contact a { color: var(--ink-3); }
.nc-footer-contact a:hover { color: #fff; }
.nc-footer-social { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.nc-footer-social a {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--die-field); color: var(--on-field-quiet);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nc-footer-social a:hover { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
.nc-footer-social svg { width: 15px; height: 15px; }

.nc-footer-base {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding: 1.5rem 0 2rem; border-top: 1px solid var(--die-field);
}
.nc-footer-legalese {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45); line-height: 1.9;
}
.nc-footer-legal { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; }
/* The cookie control is a <button>, because it opens a dialog rather than
   navigating. It is named here alongside the anchors so the two can never
   drift apart typographically — it sits in the same row and must read as the
   same kind of thing. */
.nc-footer-legal a,
.nc-footer-legal .js-cookie-settings {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.nc-footer-legal a:hover,
.nc-footer-legal .js-cookie-settings:hover { color: var(--ink-3); }
/* A policy that is still a draft is reachable only by an editor, and says so. */
.nc-footer-legal .is-draft::after {
  content: " · " attr(data-state);
  color: var(--ink-3); opacity: 0.75;
}
.nc-footer-code { color: rgba(255,255,255,0.5); text-align: right; }

/* ------------------------------------------------------------
   18. 404 AND MISC
   ------------------------------------------------------------ */

.nc-404-find { display: flex; gap: 0; flex-wrap: wrap; max-width: 540px; margin: 2rem 0 1.5rem; }
.nc-404-find input {
  flex: 1 1 240px; font: inherit; font-family: var(--mono); font-size: 0.9375rem;
  padding: 0.875rem 1rem; border: 1px solid var(--die-field);
  background: rgba(255,255,255,0.1); color: #fff; border-radius: 0;
}
.nc-404-find input::placeholder { color: var(--on-field-quiet); }
.nc-404-find input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,0.16); }
.nc-404-find button { border-radius: 0; }

.nc-count { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-quiet); }

.nc-post-meta { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-field-quiet); margin-top: 1rem; }

/* ------------------------------------------------------------
   18b. STORY, FIGURE, CONTACT
   ------------------------------------------------------------ */

.nc-story {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.nc-story-plate { border: 1px solid var(--die); background: var(--stock-warm); }
.nc-story-plate img { width: 100%; }

/* A single figure quoted beside a heading, on the trim. */
.nc-figure { text-align: right; flex: 0 0 auto; }
.nc-figure dd {
  font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700;
  letter-spacing: -0.05em; line-height: 0.9; color: var(--ink-1);
}
.nc-figure dt {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-quiet); margin-top: 0.5rem;
}

.nc-contact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.nc-contact .nc-lede { margin: 0.875rem 0 2rem; }
.nc-contact .nc-lines { margin-bottom: 2rem; }

/* A spec cell holding prose rather than a figure. */
.nc-spec-text { font-size: 0.9375rem !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0 !important; }

.nc-refs-note { margin-top: 0.875rem; }
.nc-legal-nav { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--die); }

/* On the dark panel the form is still printed on white stock. */
.nc-panel-dark .nc-lines { border-top-color: rgba(255,255,255,0.18); }
.nc-panel-dark .nc-line { border-bottom-color: rgba(255,255,255,0.18); }
.nc-panel-dark .nc-line-k { color: rgba(255,255,255,0.5); }
.nc-panel-dark .nc-line-v { color: #fff; }
.nc-panel-dark a.nc-line:hover { background: rgba(255,255,255,0.06); }
.nc-panel-dark a.nc-line:hover .nc-line-v { color: var(--ink-3); }

/* The product page asks less: a compact enquiry that does not outweigh the
   reference data a buyer came for. */
.nc-form-panel.is-compact { max-width: 480px; }
.nc-form-panel.is-compact .nc-form-row { grid-template-columns: 1fr; }

/* Standards: the client's real certifications, given a printed home. Renders
   nothing at all until they supply marks they actually hold. */
.nc-standards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--die); border-left: 1px solid var(--die);
  margin-top: 2.5rem;
}
/* Sits inside the blue field section on the About page, so like the enquiry
   panel it has to establish its own ink rather than inherit white. */
.nc-standard {
  padding: 1.25rem 1.375rem;
  border-right: 1px solid var(--die); border-bottom: 1px solid var(--die);
  background: var(--stock); color: var(--text);
}
.nc-standard b {
  display: block; font-family: var(--mono); font-size: 0.9375rem;
  font-weight: 500; letter-spacing: 0.06em; color: var(--ink-2);
}
.nc-standard span {
  display: block; margin-top: 0.375rem;
  font-size: 0.8125rem; line-height: 1.55; color: var(--text-mid);
}
.nc-field .nc-standards, .nc-panel-deep .nc-standards { border-color: var(--die-field); }
.nc-field .nc-standard, .nc-panel-deep .nc-standard { background: transparent; border-color: var(--die-field); }
.nc-field .nc-standard b, .nc-panel-deep .nc-standard b { color: #fff; }
/* The sub-label needs the on-field ink too. It only shows once certifications
   are entered, which is why this never surfaced — dark grey on Nunchi Blue. */
.nc-field .nc-standard span, .nc-panel-deep .nc-standard span { color: var(--on-field-quiet); }
.nc-field .nc-standard span, .nc-panel-deep .nc-standard span { color: var(--on-field-quiet); }

/* ------------------------------------------------------------
   19. RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .nc-story, .nc-contact { grid-template-columns: minmax(0, 1fr); }
  .nc-face-in { grid-template-columns: minmax(0, 1fr); }
  .nc-face-side { flex-direction: row; flex-wrap: wrap; gap: 2rem; align-items: flex-end; }
  .nc-pdp-in { grid-template-columns: minmax(0, 1fr); }
  .nc-footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The header carries a five-item nav, an eleven-language switcher and a button,
   all set in wide-tracked uppercase mono. That needs more room than the rest of
   the page does, so it hands over to the menu earlier than the other layouts
   reflow. Kept in its own query for that reason: moving it does not disturb the
   grid changes below. */
@media (max-width: 1100px) {
  .nc-nav { display: none; }
  .nc-burger { display: flex; }
}

@media (max-width: 860px) {
  .nc-claim { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .nc-stage { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .nc-stage p { grid-column: 2; margin-top: 0.5rem; }
  .nc-form-row { grid-template-columns: 1fr; }
  .nc-pdp-detail { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .nc-faces, .nc-faces-3 { grid-template-columns: 1fr; }
  .nc-footer-in { grid-template-columns: 1fr; }
  .nc-line { flex-direction: column; gap: 0.25rem; }
  .nc-line-k { flex: none; }
  .nc-spec > div { border-right: 0; border-bottom: 1px solid var(--die); padding-inline: 1rem; }
  .nc-field .nc-spec > div, .nc-panel-deep .nc-spec > div { border-bottom-color: var(--die-field); }
  .nc-footer-base { flex-direction: column; align-items: flex-start; }
  .nc-footer-code { text-align: left; }
}


/* ------------------------------------------------------------
   19b. BEYOND SERVICING, FLUSHING, COMPATIBILITY
   ------------------------------------------------------------ */

/* Three pillars as a spec panel, not icon cards. The index is mono because it
   is a reference number, and the dieline between columns is the same rule that
   divides the spec strip on the face. */
.nc-pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--die);
}
.nc-pillar { padding: 1.75rem 1.5rem 1.5rem; border-right: 1px solid var(--die); }
.nc-pillar:last-child { border-right: 0; }
.nc-pillar-n {
  display: block; margin-bottom: 0.875rem;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink-1);
}
.nc-pillar h3 {
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
}
.nc-pillar p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-mid); }

/* The page's one Midnight moment. One column, generous measure, nothing else
   on the panel competing for it. */
.nc-flush { max-width: 46rem; }
.nc-flush .nc-h2 { color: #fff; }
.nc-flush-body { margin-top: 1.25rem; }
.nc-flush-body p {
  font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,0.82);
  margin: 0 0 1rem;
}
.nc-flush-body p:last-child { margin-bottom: 0; }

/* ---------- the track ----------

   The band directly under the Midnight panel, on the board's own tone so it
   reads as a continuation of that argument rather than a new claim. This
   component brings its own background, so it is responsible for the text on
   it: every colour below is declared, none inherited.

   The player is drawn rather than native because the native control is a
   different piece of software in every browser and would be the only such
   object on the site. `[hidden]` holds the drawn controls back until the
   script has taken the native ones away, so the two are never both on screen. */
.nc-audio-band { background: var(--stock-warm); color: var(--text); }

.nc-audio {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.75rem); align-items: start;
}
.nc-audio-bare { grid-template-columns: minmax(0, 1fr); }

.nc-audio-art {
  width: 88px; height: 88px; overflow: hidden;
  border: 1px solid var(--die); border-radius: 2px; background: var(--stock);
}
.nc-audio-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nc-audio-h {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 700;
  letter-spacing: -0.025em; color: var(--text); margin: 0;
}
.nc-audio-h em { font-style: normal; color: var(--ink-1); }
.nc-audio-text {
  margin: 0.5rem 0 0; max-width: 46rem;
  font-size: 0.9375rem; line-height: 1.65; color: var(--text-mid);
}

.nc-audio-player {
  display: flex; align-items: center; gap: 0.875rem;
  margin-top: 1.25rem; max-width: 46rem;
}

/* Native player: the whole control when the script has not run, and nothing
   at all once it has. */
.nc-audio-el { width: 100%; max-width: 30rem; }
.nc-audio.is-live .nc-audio-el { display: none; }

.nc-audio-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--ink-1); border-radius: 50%;
  background: var(--ink-1); color: #fff; cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nc-audio-btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
/* Optical centring: the play triangle's mass sits left of its bounding box. */
.nc-audio-i-play { margin-left: 2px; }
.nc-audio-i-pause { display: none; }
.nc-audio.is-playing .nc-audio-i-play { display: none; }
.nc-audio.is-playing .nc-audio-i-pause { display: block; margin-left: 0; }

.nc-audio-rail {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 0.875rem; align-items: center;
}
.nc-audio-title {
  grid-column: 1 / -1;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
}
.nc-audio-time {
  font-family: var(--mono); font-size: 0.75rem; color: var(--text-quiet);
  white-space: nowrap;
}
.nc-audio-time b { font-weight: 400; color: var(--text); }

/* The scrubber. Track and thumb have to be drawn per engine; there is still no
   one property that styles both. */
.nc-audio-seek:disabled { cursor: default; opacity: 0.45; }
.nc-audio-seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.nc-audio-seek::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: var(--die-strong);
}
.nc-audio-seek::-moz-range-track {
  height: 3px; border-radius: 2px; background: var(--die-strong);
}
.nc-audio-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -5px;
  border: 0; border-radius: 50%; background: var(--ink-1);
}
.nc-audio-seek::-moz-range-thumb {
  width: 13px; height: 13px;
  border: 0; border-radius: 50%; background: var(--ink-1);
}

@media (max-width: 560px) {
  .nc-audio { grid-template-columns: minmax(0, 1fr); }
  .nc-audio-art { width: 64px; height: 64px; }
}

/* ------------------------------------------------------------
   19c. POSTERS
   ------------------------------------------------------------ */

/* The set is mixed portrait and landscape, so every sheet sits in the same
   4:3 box and is contained inside it. Cropping to fill would look tidier in
   the grid and would cut the content out of a reference sheet, which is the
   only thing on it anyone wants. The box carries the board's own tone so the
   white sheets read as sheets rather than as holes in the page. */
.nc-posters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem; list-style: none; margin: 0; padding: 0;
}
.nc-poster {
  display: flex; flex-direction: column;
  background: var(--stock); color: var(--text);
  border: 1px solid var(--die);
}

.nc-poster-view {
  position: relative; display: block; text-decoration: none;
  border-bottom: 1px solid var(--die);
}
.nc-poster-sheet {
  display: block; aspect-ratio: 4 / 3; padding: 1rem;
  background: var(--stock-warm);
}
.nc-poster-sheet img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* The affordance. Hidden until hover or keyboard focus, because seven of these
   shouting at once turns a reference page into a shop window. */
.nc-poster-open {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em;
  color: #fff; background: rgba(13, 61, 82, 0.86);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.nc-poster-open svg { width: 16px; height: 16px; flex: 0 0 auto; }
.nc-poster-view:hover .nc-poster-open,
.nc-poster-view:focus-visible .nc-poster-open { opacity: 1; }

.nc-poster-body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 1.125rem 1.25rem 1.25rem;
}
.nc-poster-h {
  margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text);
}
.nc-poster-text {
  margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.55;
  color: var(--text-mid);
}

/* Pushed to the bottom so the buttons line up across a row of cards whose
   descriptions run to different lengths. */
.nc-poster-dl {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: auto; padding-top: 1rem;
  font-size: 0.8125rem; font-weight: 700; color: var(--ink-1);
  text-decoration: none;
}
.nc-poster-dl svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nc-poster-dl:hover { color: var(--ink-1-deep); }
.nc-poster-dl:hover span:first-of-type { text-decoration: underline; }
.nc-poster-meta {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 400;
  color: var(--text-quiet);
}

@media (max-width: 900px) {
  .nc-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .nc-posters { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the full-size viewer ----------

   A native <dialog>, so the backdrop, Escape, focus containment and inertness
   of the page behind all come from the browser rather than from this file. */
.nc-viewer {
  width: min(96vw, 1400px); max-width: none;
  max-height: 94vh; padding: 0;
  border: 0; border-radius: 2px;
  background: var(--stock); color: var(--text);
  overflow: hidden;
}
.nc-viewer::backdrop { background: rgba(16, 34, 43, 0.82); }
.nc-viewer[open] { display: flex; flex-direction: column; }

.nc-viewer-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex: 0 0 auto;
  padding: 0.875rem 1rem 0.875rem 1.25rem;
  border-bottom: 1px solid var(--die);
  background: var(--stock);
}
.nc-viewer-title {
  margin: 0; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-viewer-acts { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }

.nc-viewer-dl {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem; border-radius: 2px;
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  background: var(--ink-1); color: #fff;
  transition: background 0.25s var(--ease);
}
.nc-viewer-dl:hover { background: var(--ink-2); }
.nc-viewer-dl svg { width: 15px; height: 15px; }

.nc-viewer-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--die-strong); border-radius: 2px;
  background: transparent; color: var(--text-mid); cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nc-viewer-x:hover { border-color: var(--ink-1); color: var(--ink-1); }

/* Scrolls in both directions: these sheets are dense, and on a phone the only
   way to read one is to be allowed to move around it. */
.nc-viewer-stage {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 1rem; background: var(--stock-warm);
  -webkit-overflow-scrolling: touch;
}
.nc-viewer-img { display: block; margin: 0 auto; max-width: 100%; height: auto; }

@media (max-width: 560px) {
  .nc-viewer { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .nc-viewer-bar { padding: 0.75rem; }
  .nc-viewer-dl span { display: none; }
  .nc-viewer-dl { padding: 0.5rem; }
  .nc-viewer-stage { padding: 0.5rem; }
}

/* Designations are data: mono, boxed, on the die-cut radius, like the part
   reference on the face. */
.nc-badges {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 0 0 2rem; padding: 0;
}
.nc-badges li {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.5rem 0.875rem; border-radius: 2px;
  border: 1px solid var(--die-strong); background: var(--stock);
}
.nc-badges b {
  font-family: var(--mono); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--ink-1-deep);
}
.nc-badges span { font-size: 0.75rem; color: var(--text-quiet); }
/* The two groups need separating: refrigerants and oils are different answers
   to different questions, and run together they read as one long list. */
#compatibility .nc-block-title { margin: 0 0 0.75rem; }
#compatibility .nc-badges { margin-bottom: 2.25rem; }
#compatibility .nc-badges:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .nc-pillars { grid-template-columns: minmax(0, 1fr); }
  .nc-pillar { border-right: 0; border-bottom: 1px solid var(--die); }
  .nc-pillar:last-child { border-bottom: 0; }
}

/* A person per row: identity in the left column, what they have done in the
   right, divided by the same dieline as the claims list. */
.nc-experts { border-top: 1px solid var(--die); }
.nc-expert {
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--die);
}
.nc-expert-who h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.nc-expert-role {
  margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 500; color: var(--ink-1-deep);
}
.nc-expert-region {
  margin: 0.5rem 0 0;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-quiet); line-height: 1.6;
}
.nc-expert-bio p {
  margin: 0 0 0.875rem; font-size: 0.9375rem; line-height: 1.7; color: var(--text-mid);
}
.nc-expert-bio p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .nc-expert { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* Resource list: a document icon and a name. No link yet — the files do not
   exist, and a link that goes nowhere is worse than a list that does not
   pretend to be one. Wrap each in an <a> once the PDFs are uploaded. */
.nc-docs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--die);
}
.nc-docs li {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem 1rem 0;
  border-bottom: 1px solid var(--die);
  font-size: 0.9375rem; color: var(--text-mid);
}
.nc-docs svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-1); }

/* ------------------------------------------------------------
   20. COOKIE CONSENT
   ------------------------------------------------------------ */

/* A label applied to the bottom-left corner of the sheet, not a bar across the
   whole page: it is a small notice about a small thing, and covering the page
   would overstate it. Board white on the field, one dieline, die-cut radius. */
.nc-consent {
  position: fixed; z-index: 1060;
  left: var(--gutter); bottom: var(--gutter);
  width: min(30rem, calc(100vw - var(--gutter) * 2));
  background: var(--stock);
  border: 1px solid var(--die-strong); border-radius: 2px;
  opacity: 0; visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nc-consent.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.nc-consent-in { padding: 1.25rem 1.375rem; }
.nc-consent-text {
  margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.55; color: var(--text-mid);
}
.nc-consent-text a { color: var(--ink-1-deep); text-decoration: underline; text-underline-offset: 3px; }
.nc-consent-text a:hover { color: var(--ink-2); }

.nc-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.nc-consent-yes, .nc-consent-no, .nc-consent-link {
  font-family: var(--font); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: -0.01em; cursor: pointer;
  padding: 0.5rem 0.9375rem; border-radius: 2px;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nc-consent-yes { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
.nc-consent-yes:hover { background: var(--ink-2); border-color: var(--ink-2); }

/* Refusing has to be exactly as easy as accepting, so it is the same size and
   the same shape — only the fill differs. */
.nc-consent-no { background: transparent; border-color: var(--die-strong); color: var(--text); }
.nc-consent-no:hover { border-color: var(--ink-1); color: var(--ink-1-deep); background: var(--tint); }

.nc-consent-link {
  background: none; border: 0; padding-inline: 0.5rem;
  font-weight: 500; color: var(--text-quiet); text-decoration: underline; text-underline-offset: 3px;
}
.nc-consent-link:hover { color: var(--ink-1-deep); }

/* The preferences panel only exists when there is a category to switch. */
.nc-consent-prefs { display: none; padding: 0 1.375rem 1.25rem; border-top: 1px dashed var(--die); }
.nc-consent.is-prefs .nc-consent-prefs { display: block; }
.nc-consent.is-prefs .nc-consent-actions:first-of-type { display: none; }
.nc-consent-title {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-quiet);
  margin: 1.25rem 0 0.75rem;
}
.nc-consent-cat {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px dashed var(--die);
}
.nc-consent-cat b { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; }
.nc-consent-cat span { display: block; font-size: 0.8125rem; color: var(--text-quiet); margin-top: 0.125rem; }
.nc-consent-locked {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-quiet); padding-top: 0.25rem;
}
.nc-consent-switch { flex: 0 0 auto; position: relative; width: 40px; height: 22px; cursor: pointer; }
.nc-consent-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nc-consent-track {
  display: block; width: 40px; height: 22px; border-radius: 2px;
  background: var(--die-strong); transition: background 0.2s var(--ease);
}
.nc-consent-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 2px; background: #fff;
  transition: transform 0.2s var(--ease);
}
.nc-consent-switch input:checked + .nc-consent-track { background: var(--ink-1); }
.nc-consent-switch input:checked + .nc-consent-track::after { transform: translateX(18px); }
.nc-consent-switch input:focus-visible + .nc-consent-track { outline: 2px solid var(--ink-1); outline-offset: 2px; }
.nc-consent-prefs .nc-consent-actions { margin-top: 1rem; }

/* The footer control that reopens the notice. */
.js-cookie-settings {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}

@media (max-width: 640px) {
  .nc-consent { left: 0; right: 0; bottom: 0; width: auto; border-width: 1px 0 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nc-consent { transition: opacity 0.01ms, visibility 0.01ms; transform: none; }
}

/* ------------------------------------------------------------
   21. CYRILLIC
   ------------------------------------------------------------ */

/* DM Sans and DM Mono have no Cyrillic, so Bulgarian would render every
   heading and every part number in a system fallback. IBM Plex carries both
   roles with Cyrillic drawn for the family, and reads close enough to DM at
   text sizes that the page keeps its character. Only the font changes — every
   colour, rule and measure in the system above is untouched. */
.nc-lang-bg {
  --font: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Plex sets a little wider than DM at the same size; the display line is the
   only place that difference is large enough to show. */
.nc-lang-bg .nc-display { letter-spacing: -0.035em; }

/* ---------- Chinese ---------- */

/* DM Sans is kept at the front of the stack, not replaced. Latin on a Chinese
   page — part numbers, R134a, the wordmark — still sets in the brand typeface,
   and only the Han characters fall through to the system CJK font. That is what
   a font stack is for, and it is why this needs no @font-face at all.

   No CJK webfont is served. Google's Noto Sans SC alone is roughly 200 subset
   files and several megabytes; every device that reads Chinese already ships a
   good Han face, and downloading one to a Chinese reader is a cost with no
   benefit. This is the standard approach for CJK on the web. */
.nc-lang-zh {
  --font: 'DM Sans', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, 'PingFang SC', 'Microsoft YaHei', monospace;
}

/* Han characters carry no ascender/descender rhythm, so the tight negative
   tracking the Latin display line needs works against them. */
.nc-lang-zh .nc-display,
.nc-lang-zh .nc-h2 { letter-spacing: 0; }

/* A headshot on an expert row. Square, so a portrait and a landscape crop both
   land the same on the page; object-fit does the cropping rather than asking
   the client to prepare files. The row keeps working with no photograph, which
   is the state it will be in for some people for a while. */
.nc-expert-shot {
  width: 5.5rem; aspect-ratio: 1; margin: 0 0 0.875rem;
  border: 1px solid var(--die); background: var(--stock); overflow: hidden;
}
.nc-expert-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Best-practice articles sit above the document list on the Support page.
   They are the same face cells the catalogue and the Academy use, so the two
   kinds of resource read as one set rather than two competing treatments. */
.nc-docs-guides { margin-bottom: 2rem; }