/* ==========================================================================
   NIABEAT  ·  First Edition
   One press, one grid, two inks.
   Every class, id and custom property is prefixed nb. Everything is scoped
   under .nb-page so the page can drop into a WordPress static template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "NB Bebas";
  src: url("/assets/fonts/bebas-neue-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  ascent-override: 75%; descent-override: 25%; line-gap-override: 0%;
}
/* Width matched fallback so fitted lines stay inside their measure while Bebas loads */
@font-face {
  font-family: "NB Bebas Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 700;
  size-adjust: 56%; ascent-override: 133.93%; descent-override: 44.64%; line-gap-override: 0%;
}
@font-face {
  font-family: "NB Franklin";
  src: url("/assets/fonts/libre-franklin-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NB Franklin Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 104%; ascent-override: 92.88%; descent-override: 23.65%; line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. Standalone page shell (remove when embedded in a WordPress theme)
   -------------------------------------------------------------------------- */
html { background: #000000; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #000000; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px); }
@media (min-width: 1024px) { html { scroll-padding-top: 80px; scroll-padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
.nb-page {
  /* raw inks, from colors.pdf. These four values appear here and nowhere else. */
  --nb-black: #000000;
  --nb-white: #FFFFFF;
  --nb-gold: #CF992A;
  --nb-gold-deep: #98661C;
  --nb-foil: linear-gradient(180deg, var(--nb-gold) 0%, var(--nb-gold-deep) 100%);

  --nb-display: "NB Bebas", "NB Bebas Fallback", "Arial Narrow", sans-serif;
  --nb-text-face: "NB Franklin", "NB Franklin Fallback", Arial, sans-serif;

  /* spacing, 4px base */
  --nb-s1: 4px; --nb-s2: 8px; --nb-s3: 12px; --nb-s4: 16px; --nb-s5: 24px; --nb-s6: 32px;
  --nb-s7: 40px; --nb-s8: 48px; --nb-s9: 64px; --nb-s10: 96px; --nb-s11: 128px; --nb-s12: 160px;

  /* grid: S */
  --nb-cols: 4; --nb-margin: 16px; --nb-gutter: 16px; --nb-max: 1600px;
  --nb-content: min(100vw - var(--nb-sbw, 0px) - 2 * var(--nb-margin), var(--nb-max));
  --nb-col: calc((var(--nb-content) - (var(--nb-cols) - 1) * var(--nb-gutter)) / var(--nb-cols));
  --nb-bleed: max(var(--nb-margin), (100vw - var(--nb-sbw, 0px) - var(--nb-max)) / 2);

  /* rhythm: S */
  --nb-mast-h: 56px;
  --nb-sheet-top: 24px; --nb-sheet-bottom: 64px; --nb-folio-gap: 32px;
  --nb-head-body: 24px; --nb-body-object: 32px; --nb-eyebrow-h1: 24px; --nb-peek: 56px;
  --nb-folio-beat: 24px;
  --nb-pad: 20px; /* padding inside printed objects */

  /* rules */
  --nb-rule-w: 2px; --nb-hair-w: 1px;

  /* motion */
  --nb-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nb-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --nb-d1: 150ms; --nb-d2: 200ms; --nb-d3: 300ms;
  --nb-d-draw: 700ms; --nb-d-cut: 900ms; --nb-d-foil: 1600ms;

  /* layers */
  --nb-z-object: 1; --nb-z-rule: 2; --nb-z-dock: 50; --nb-z-skip: 100; --nb-z-grid: 200;

  font-family: var(--nb-text-face);
  font-size: 1rem;
  line-height: 1.5;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--nb-black);
  color: var(--nb-white);
}
/* large phones: a wider margin so every hanging stop fits without shrinking the type */
@media (min-width: 480px) {
  .nb-page { --nb-margin: 24px; }
}
@media (min-width: 640px) {
  .nb-page {
    --nb-cols: 8; --nb-margin: 40px; --nb-gutter: 16px;
    --nb-sheet-bottom: 96px; --nb-folio-gap: 40px; --nb-body-object: 48px; --nb-eyebrow-h1: 32px;
    --nb-folio-beat: 32px; --nb-pad: 24px;
  }
}
@media (min-width: 1024px) {
  .nb-page {
    --nb-cols: 12; --nb-margin: 48px; --nb-gutter: 24px;
    --nb-mast-h: 72px;
    --nb-sheet-top: 32px; --nb-folio-gap: 48px; --nb-head-body: 32px; --nb-body-object: 64px;
    --nb-eyebrow-h1: 48px; --nb-peek: 64px; --nb-pad: 24px;
  }
}
@media (min-width: 1440px) {
  .nb-page {
    --nb-margin: 64px; --nb-gutter: 32px;
    --nb-mast-h: 80px;
    --nb-sheet-bottom: 128px; --nb-body-object: 96px; --nb-eyebrow-h1: 64px; --nb-pad: 32px;
  }
}

/* Surfaces: components only ever read these semantic tokens */
.nb-on-black {
  --nb-surface: var(--nb-black); --nb-text: var(--nb-white); --nb-accent: var(--nb-gold);
  --nb-rule: var(--nb-gold); --nb-hair: rgb(255 255 255 / 0.24); --nb-mark: rgb(255 255 255 / 0.40);
  --nb-focus: var(--nb-gold); --nb-link-line: var(--nb-gold);
  --nb-btn-bg: var(--nb-gold); --nb-btn-text: var(--nb-black);
  --nb-btn-bg-hover: var(--nb-white); --nb-btn-text-hover: var(--nb-black);
  --nb-error-bg: var(--nb-gold); --nb-error-text: var(--nb-black); --nb-error-bar: var(--nb-gold-deep);
  background-color: var(--nb-surface); color: var(--nb-text);
}
.nb-on-white {
  --nb-surface: var(--nb-white); --nb-text: var(--nb-black); --nb-accent: var(--nb-gold-deep);
  --nb-rule: var(--nb-black); --nb-hair: rgb(0 0 0 / 0.16); --nb-mark: var(--nb-black);
  --nb-focus: var(--nb-black); --nb-link-line: var(--nb-gold-deep);
  --nb-btn-bg: var(--nb-black); --nb-btn-text: var(--nb-white);
  --nb-btn-bg-hover: var(--nb-gold-deep); --nb-btn-text-hover: var(--nb-white);
  --nb-error-bg: var(--nb-gold); --nb-error-text: var(--nb-black); --nb-error-bar: var(--nb-gold-deep);
  background-color: var(--nb-surface); color: var(--nb-text);
}
.nb-on-gold {
  --nb-surface: var(--nb-gold); --nb-text: var(--nb-black); --nb-accent: var(--nb-black);
  --nb-rule: var(--nb-black); --nb-hair: rgb(0 0 0 / 0.24); --nb-mark: var(--nb-black);
  --nb-focus: var(--nb-black); --nb-link-line: var(--nb-black);
  --nb-btn-bg: var(--nb-black); --nb-btn-text: var(--nb-white);
  --nb-btn-bg-hover: var(--nb-white); --nb-btn-text-hover: var(--nb-black);
  background-color: var(--nb-surface); color: var(--nb-text);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
.nb-page *, .nb-page *::before, .nb-page *::after { box-sizing: border-box; }
.nb-page :where(h1, h2, h3, p, ul, ol, figure, fieldset, legend) { margin: 0; padding: 0; }
.nb-page :where(ul, ol) { list-style: none; }
.nb-page :where(h1, h2, h3) { font-weight: inherit; font-size: inherit; line-height: inherit; }
.nb-page :where(img, svg) { display: block; max-width: 100%; }
.nb-page :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
.nb-page :where(a) { color: inherit; }
.nb-page :where(fieldset) { border: 0; min-width: 0; }
.nb-page ::selection { background: var(--nb-gold); color: var(--nb-black); }
.nb-page [hidden] { display: none !important; }

.nb-page :focus-visible { outline: 3px solid var(--nb-focus, var(--nb-gold)); outline-offset: 3px; }
.nb-page [tabindex="-1"]:focus { outline: none; }

.nb-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.nb-icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; }

/* --------------------------------------------------------------------------
   4. Grid
   -------------------------------------------------------------------------- */
.nb-grid {
  --nb-colmax: calc((var(--nb-max) - (var(--nb-cols) - 1) * var(--nb-gutter)) / var(--nb-cols));
  display: grid;
  column-gap: var(--nb-gutter);
  grid-template-columns:
    [full-start] minmax(calc(var(--nb-margin) - var(--nb-gutter)), 1fr)
    [content-start] repeat(var(--nb-cols), minmax(0, var(--nb-colmax)))
    [content-end] minmax(calc(var(--nb-margin) - var(--nb-gutter)), 1fr) [full-end];
}
.nb-grid > * { grid-column: content; min-width: 0; }

/* inner grids that span the content and repeat the page columns */
.nb-subcols {
  display: grid;
  grid-template-columns: repeat(var(--nb-cols), minmax(0, 1fr));
  column-gap: var(--nb-gutter);
}

.nb-sheet { position: relative; overflow-x: clip; padding-block: var(--nb-sheet-top) var(--nb-sheet-bottom); }

/* --------------------------------------------------------------------------
   5. Type
   -------------------------------------------------------------------------- */
.nb-eyebrow {
  font-family: var(--nb-text-face); font-weight: 700; font-size: 1rem; line-height: 1.25rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-accent);
}
.nb-micro {
  font-family: var(--nb-text-face); font-weight: 700; font-size: 0.875rem; line-height: 1rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.nb-lead {
  font-size: clamp(1.125rem, 1.03rem + 0.3vw, 1.25rem);
  line-height: 1.5; line-height: round(nearest, 1.5em, 4px);
  font-weight: 400; max-width: 42em;
}
.nb-body, .nb-page p { font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem); }
.nb-page p { line-height: 1.55; line-height: round(nearest, 1.55em, 4px); }
.nb-page .nb-lead { font-size: clamp(1.125rem, 1.03rem + 0.3vw, 1.25rem); line-height: 1.5; line-height: round(nearest, 1.5em, 4px); }
.nb-page .nb-eyebrow { font-size: 1rem; line-height: 1.25rem; }
.nb-page .nb-micro { font-size: 0.875rem; line-height: 1rem; }


/* Fitted display lines: each line fills its measure exactly */
.nb-fit-host {
  container-type: inline-size;
  font-family: var(--nb-display); font-weight: 700; text-transform: uppercase;
  font-kerning: normal; letter-spacing: 0; color: var(--nb-text);
}
.nb-fit {
  display: block; white-space: normal;
  width: calc(100% + var(--lsb) * 1em + 0.3em);
  font-size: calc(100cqi / var(--ink));
  line-height: var(--nb-lh, 0.86);
  margin-inline-start: calc(var(--lsb) * -1em);
}
.nb-fit-host--086 { --nb-lh: 0.86; --nb-trim-top: 0.02em; --nb-trim-bottom: -0.18em; --nb-base: 0.68em; }
.nb-fit-host--088 { --nb-lh: 0.88; --nb-trim-top: 0.01em; --nb-trim-bottom: -0.19em; --nb-base: 0.69em; }
.nb-fit-host--090 { --nb-lh: 0.90; --nb-trim-top: 0em;    --nb-trim-bottom: -0.20em; --nb-base: 0.70em; }
.nb-fit:first-child { margin-block-start: var(--nb-trim-top); }
.nb-fit:last-child { margin-block-end: var(--nb-trim-bottom); }

/* --ink: ink width in em, --lsb: first glyph side bearing, --hang: closing punctuation past the ink */
.nb-fit--h1a  { --ink: 5.344; --lsb: 0.011; --hang: 0.186; }
.nb-fit--h1b  { --ink: 5.935; --lsb: 0.008; --hang: 0.174; }
.nb-fit--p1   { --ink: 5.484; --lsb: 0.039; --hang: 0.082; }
.nb-fit--p2   { --ink: 6.115; --lsb: 0.008; --hang: 0.174; }
.nb-fit--p3   { --ink: 4.886; --lsb: 0.031; --hang: 0.185; }
.nb-fit--r1   { --ink: 4.541; --lsb: 0.008; --hang: 0; }
.nb-fit--r2   { --ink: 4.566; --lsb: 0.008; --hang: 0.094; }
.nb-fit--nia  { --ink: 0.974; --lsb: 0.039; --hang: 0; }
.nb-fit--name { --ink: 6.086; --lsb: 0.039; --hang: 0.174; }

/* Phones: the hanging stop must stay inside the 16px margin */
@media (max-width: 639px) {
  .nb-fit { font-size: min(100cqi / var(--ink), (100cqi + var(--nb-margin) - 2px) / (var(--ink) + var(--hang))); }
  .nb-pr--cut { width: calc(100cqi + 2 * var(--nb-bleed)); }
}

@supports not (width: 1cqi) {
  .nb-fit { font-size: calc(var(--nb-span, var(--nb-content)) / var(--ink)); }
}

/* --------------------------------------------------------------------------
   6. The pulse rule (one geometry, traced from the supplied mark)
   A flat rule with one beat. Beat height is 1.1498 W; the rule crosses the
   beat 0.7068 W from its top.
   -------------------------------------------------------------------------- */
.nb-pr {
  --pr-w: var(--nb-rule-w);
  --pr-halo: 0px;
  --pr-beat: 32px;
  --pr-color: var(--nb-rule);
  --pr-halo-color: var(--nb-surface);
  display: flex; align-items: flex-start;
  height: calc(var(--pr-beat) * 1.1498);
  pointer-events: none;
}
.nb-pr__seg {
  position: relative; display: block; flex: 1 1 auto; min-width: 0;
  height: calc(var(--pr-w) + 2 * var(--pr-halo));
  margin-top: calc(var(--pr-beat) * 0.7068 - var(--pr-w) / 2 - var(--pr-halo));
  background: var(--pr-halo-color);
}
.nb-pr__seg::after {
  content: ""; position: absolute; left: 0; right: 0; top: var(--pr-halo); height: var(--pr-w);
  background: var(--pr-color);
}
.nb-pr__beat {
  flex: 0 0 auto; display: block; overflow: visible;
  width: var(--pr-beat); height: calc(var(--pr-beat) * 1.1498);
}
.nb-pr__halo { stroke: var(--pr-halo-color); stroke-width: calc(var(--pr-w) + 2 * var(--pr-halo)); }
.nb-pr__core { stroke: var(--pr-color); stroke-width: var(--pr-w); }

/* tapered ends, as the logo's baseline narrows past the continent */
.nb-pr__seg--lead.is-taper, .nb-pr--cut .nb-pr__seg--lead, .nb-pr--name .nb-pr__seg--lead {
  clip-path: polygon(0 50%, var(--nb-bleed) 0, 100% 0, 100% 100%, var(--nb-bleed) 100%);
}
.nb-pr--cut .nb-pr__seg--tail, .nb-pr--name .nb-pr__seg--tail {
  clip-path: polygon(0 0, calc(100% - var(--nb-bleed)) 0, 100% 50%, calc(100% - var(--nb-bleed)) 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   7. Buttons and links
   -------------------------------------------------------------------------- */
.nb-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding-inline: 20px;
  font-family: var(--nb-display); font-weight: 700; font-size: 1.5rem; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  background-color: var(--nb-btn-bg); color: var(--nb-btn-text);
  /* the ink roller: the hover colour is laid down from the left */
  background-image: linear-gradient(var(--nb-btn-bg-hover), var(--nb-btn-bg-hover));
  background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%;
  -webkit-tap-highlight-color: transparent;
  transition: background-size 340ms var(--nb-ease-out), color 220ms var(--nb-ease-out) 60ms, box-shadow var(--nb-d1) var(--nb-ease-out);
}
.nb-btn__label { padding-block-start: 0.1em; white-space: nowrap; }
.nb-btn .nb-icon { transition: transform var(--nb-d1) var(--nb-ease-out); }
.nb-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgb(0 0 0 / 0.35); }
.nb-btn[aria-disabled="true"] { cursor: progress; }
.nb-submit { justify-content: center; }
@media (min-width: 1024px) { .nb-btn { padding-inline: 24px; } }

.nb-btn--gold { --nb-btn-bg: var(--nb-gold); --nb-btn-text: var(--nb-black); --nb-btn-bg-hover: var(--nb-white); --nb-btn-text-hover: var(--nb-black); }
.nb-btn--ink  { --nb-btn-bg: var(--nb-black); --nb-btn-text: var(--nb-white); --nb-btn-bg-hover: var(--nb-gold-deep); --nb-btn-text-hover: var(--nb-white); }
.nb-btn--keyline-light { background-color: transparent; color: var(--nb-white); box-shadow: inset 0 0 0 2px var(--nb-white); --nb-btn-bg-hover: var(--nb-white); --nb-btn-text-hover: var(--nb-black); }
.nb-btn--keyline-gold  { background-color: transparent; color: var(--nb-gold);  box-shadow: inset 0 0 0 2px var(--nb-gold);  --nb-btn-bg-hover: var(--nb-gold);  --nb-btn-text-hover: var(--nb-black); }
.nb-btn--keyline-light:active { box-shadow: inset 0 0 0 2px var(--nb-white), inset 0 2px 0 rgb(0 0 0 / 0.35); }
.nb-btn--keyline-gold:active { box-shadow: inset 0 0 0 2px var(--nb-gold), inset 0 2px 0 rgb(0 0 0 / 0.35); }

@media (hover: hover) and (pointer: fine) {
  .nb-btn:hover { background-size: 100% 100%; color: var(--nb-btn-text-hover); }
  .nb-btn:hover .nb-icon use[href="#nb-arrow-down"] { transform: translateY(4px); }
  .nb-btn:hover .nb-icon use[href="#nb-arrow-right"] { transform: translateX(4px); }
  .nb-btn .nb-icon use { transition: transform var(--nb-d1) var(--nb-ease-out); }
}

/* The hero primary is a ticket stub: fill drawn on ::before with notches cut on the perforation */
.nb-btn--stub { background-color: transparent; background-image: none; padding-inline-end: 0; --stub: 56px; }
.nb-btn--stub::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: var(--nb-btn-bg);
  background-image: linear-gradient(var(--nb-btn-bg-hover), var(--nb-btn-bg-hover));
  background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size 340ms var(--nb-ease-out);
  -webkit-mask:
    radial-gradient(circle 6px at calc(100% - var(--stub)) 0, #0000 97%, #000 100%),
    radial-gradient(circle 6px at calc(100% - var(--stub)) 100%, #0000 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 6px at calc(100% - var(--stub)) 0, #0000 97%, #000 100%),
    radial-gradient(circle 6px at calc(100% - var(--stub)) 100%, #0000 97%, #000 100%);
  mask-composite: intersect;
}
.nb-btn--stub::after {
  content: ""; position: absolute; top: 8px; bottom: 8px; right: calc(var(--stub) - 1px); width: 2px;
  background: radial-gradient(circle 1px at 1px 1px, var(--nb-black) 98%, #0000) 0 0 / 2px 6px repeat-y;
}
.nb-btn__stub { display: grid; place-items: center; width: var(--stub); align-self: stretch; }
@media (hover: hover) and (pointer: fine) {
  .nb-btn--stub:hover { background-size: 0% 100%; }
  .nb-btn--stub:hover::before { background-size: 100% 100%; }
}
@media (min-width: 1440px) { .nb-btn--stub { --stub: 64px; } }

/* Text links */
.nb-link {
  font-weight: 600; color: inherit;
  text-decoration: none;
  transition: color var(--nb-d1) var(--nb-ease-out);
}
.nb-page a { text-decoration: none; }
/* links inside running text carry the accent colour so they still read as links */
.nb-legal__body .nb-link, .nb-success__more .nb-link, .nb-check__more, .nb-slip a { color: var(--nb-link-line); }
@media (hover: hover) and (pointer: fine) {
  .nb-link:hover { color: var(--nb-accent); }
  .nb-legal__body .nb-link:hover, .nb-success__more .nb-link:hover, .nb-check__more:hover { color: var(--nb-text); }
}
.nb-link--row { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Skip link */
.nb-skip {
  position: absolute; left: 8px; top: 8px; z-index: var(--nb-z-skip);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--nb-gold); color: var(--nb-black); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.nb-skip:focus-visible, .nb-skip:focus { transform: none; outline: 3px solid var(--nb-white); outline-offset: 0; }

/* --------------------------------------------------------------------------
   9. Masthead
   -------------------------------------------------------------------------- */
.nb-masthead { position: relative; height: var(--nb-mast-h); }
.nb-masthead__row { height: 100%; align-content: center; align-items: baseline; }
.nb-masthead__row > * { grid-row: 1; }
.nb-masthead__mark { justify-self: start; display: inline-flex; padding-block: 12px; }
.nb-masthead__mark img { height: 20px; width: auto; }
.nb-masthead__ed { justify-self: end; color: var(--nb-accent); }
@media (min-width: 640px) { .nb-masthead__mark img { height: 22px; } }
@media (min-width: 1024px) { .nb-masthead__mark img { height: 24px; } .nb-masthead__mark { padding-block: 10px; } }

/* --------------------------------------------------------------------------
   10. Sheet 01: the bill
   -------------------------------------------------------------------------- */
.nb-hero {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--nb-mast-h) - var(--nb-peek));
  min-height: calc(100svh - var(--nb-mast-h) - var(--nb-peek));
  padding-block: 24px 24px;
}
.nb-hero__body { margin-top: auto; }
.nb-hero__eyebrow { display: flex; align-items: center; gap: 16px; color: var(--nb-accent); }
.nb-hero__eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--nb-accent); }
.nb-hero__title { margin-top: var(--nb-eyebrow-h1); position: relative; z-index: var(--nb-z-rule); }
.nb-fit--h1a { position: relative; }
.nb-hero__sub { margin-top: 24px; color: var(--nb-text); }
.nb-hero__ctas { margin-top: 24px; display: grid; gap: 8px; }
.nb-hero__ctas .nb-btn--stub { width: 100%; }

/* At S the secondary is a quiet text link */
.nb-hero__second {
  justify-self: start; justify-content: flex-start; gap: 8px;
  min-height: 44px; padding: 0; background: transparent; box-shadow: none; color: var(--nb-white);
  font-family: var(--nb-text-face); font-weight: 600; font-size: 1rem; line-height: 1.5rem;
  letter-spacing: 0; text-transform: none;
  text-decoration: none;
}
.nb-hero__second .nb-btn__label { padding: 0; }
.nb-hero__second:active { transform: none; box-shadow: none; }
@media (max-width: 639px) and (hover: hover) and (pointer: fine) { .nb-hero__second:hover { background: transparent; color: var(--nb-gold); } }

.nb-slug {
  margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--nb-hair);
  display: flex; justify-content: space-between; gap: 16px; color: var(--nb-white);
}

/* Background film: printed in the two inks, washed dark so type keeps its contrast */
.nb-masthead--over { z-index: 3; background: transparent; }
.nb-hero { isolation: isolate; }
.nb-hero__media {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--nb-mast-h)); z-index: -1;
  overflow: hidden; background: var(--nb-gold); pointer-events: none;
}
.nb-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(1.05); mix-blend-mode: multiply;
}
.nb-hero__media::after {
  content: ""; position: absolute; inset: 0;
  /* gold labels near the top need the deeper wash; white type below stays above 8:1 at 50% */
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.66) 22%, rgb(0 0 0 / 0.5) 36%, rgb(0 0 0 / 0.55) 70%, rgb(0 0 0 / 0.82) 100%);
}
.nb-hero__body { position: relative; }
.nb-slug { align-items: center; }
.nb-slug .nb-micro, .nb-hero__toggle { white-space: nowrap; }
.nb-slug__say { margin-inline-start: auto; }
.nb-hero__toggle {
  display: inline-flex; align-items: center; gap: 8px; margin: -14px 24px -14px -4px; min-height: 44px; padding: 0 4px;
  background: none; border: 0; color: var(--nb-white); cursor: pointer;
}
.nb-hero__toggle[hidden] { display: none; }
.nb-hero__toggle .nb-icon { width: 14px; height: 14px; }
.nb-hero__toggle-play { display: none; }
.nb-hero__toggle[data-paused="true"] .nb-hero__toggle-pause { display: none; }
.nb-hero__toggle[data-paused="true"] .nb-hero__toggle-play { display: block; }
@media (hover: hover) and (pointer: fine) { .nb-hero__toggle:hover { color: var(--nb-gold); } }
@media (forced-colors: active) { .nb-hero__video { mix-blend-mode: normal; filter: none; } .nb-hero__media::after { background: Canvas; opacity: 0.7; } }

/* The Cut: the logo's pulse runs edge to edge through line 1 */
.nb-pr--cut {
  --pr-beat: 0.566em;
  --pr-w: 2px; --pr-halo: 0px;
  --pr-color: var(--nb-gold); --pr-halo-color: var(--nb-black);
  position: absolute;
  top: calc(var(--nb-base) - 0.42em - 0.7068 * var(--pr-beat));
  left: calc(var(--lsb) * 1em - var(--nb-bleed));
  width: calc(var(--ink) * 1em + 2 * var(--nb-bleed));
}
.nb-pr--cut .nb-pr__seg--lead { flex: 0 0 calc(var(--nb-bleed) + 3.8265em); }

@media (min-width: 640px) {
  .nb-pr--cut { --pr-w: max(1.5px, 0.012em); --pr-halo: 0.01em; }
  .nb-hero__sub { margin-top: 32px; }
  .nb-hero__ctas { margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nb-gutter); }
  .nb-hero__second {
    justify-self: stretch; justify-content: space-between; min-height: 56px; padding-inline: 20px;
    font-family: var(--nb-display); font-weight: 700; font-size: 1.5rem; line-height: 1;
    letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
    box-shadow: inset 0 0 0 2px var(--nb-white);
    background-image: linear-gradient(var(--nb-white), var(--nb-white)); background-repeat: no-repeat; background-size: 0% 100%;
  }
  .nb-hero__second .nb-btn__label { padding-block-start: 0.1em; }
  .nb-hero__second:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--nb-white), inset 0 2px 0 rgb(0 0 0 / 0.35); }
  .nb-slug { margin-top: 40px; }
  .nb-hero { padding-block: 24px 32px; }
}
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  .nb-hero__second:hover { background-color: transparent; background-image: linear-gradient(var(--nb-white), var(--nb-white)); background-size: 100% 100%; color: var(--nb-black); }
}
@media (min-width: 1024px) {
  .nb-hero__body > .nb-hero__sub { grid-column: 2 / 7; grid-row: 3; margin-top: 40px; }
  .nb-hero__body > .nb-hero__ctas { grid-column: 8 / 14; grid-row: 3; margin-top: 40px; align-self: start; }
  .nb-hero__body > .nb-slug { grid-row: 4; margin-top: 48px; }
  .nb-hero__ctas .nb-btn { padding-inline-start: 24px; }
  .nb-hero__second { padding-inline: 24px; }
}
@media (min-width: 1024px) and (max-width: 1119.98px) {
  .nb-hero__body > .nb-hero__ctas { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
}
@media (min-width: 1440px) {
  .nb-hero__ctas .nb-btn { min-height: 64px; }
}

/* --------------------------------------------------------------------------
   11. The folio line (sections 02 to 06): label, sheet number, printer's rule
   -------------------------------------------------------------------------- */
.nb-folio {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(1.25rem, auto) auto;
  align-items: end;
}
.nb-folio__label { grid-column: 1; grid-row: 1; }
.nb-folio__num { grid-column: 2; grid-row: 1; padding-inline-start: 16px; text-align: right; color: var(--nb-text); }
.nb-folio--empty { grid-template-rows: auto; }
.nb-folio--empty .nb-folio__label { display: none; }
.nb-folio--empty .nb-folio__line { grid-row: 1; margin-top: 0; }
@supports (align-self: last baseline) {
  .nb-folio__label, .nb-folio__num { align-self: last baseline; }
  .nb-folio--empty .nb-folio__label { align-self: end; }
}
.nb-folio__line {
  grid-column: 1 / -1; grid-row: 2; display: block;
  height: var(--nb-rule-w); margin-top: 8px; background: var(--nb-rule);
}

/* --------------------------------------------------------------------------
   Photographs, printed in the page's two inks: black and gold
   -------------------------------------------------------------------------- */
.nb-photo { position: relative; margin: 0; overflow: hidden; background: var(--nb-gold); isolation: isolate; }
.nb-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(1.08); mix-blend-mode: multiply;
}
@media (forced-colors: active) { .nb-photo img { mix-blend-mode: normal; filter: none; } }

/* --------------------------------------------------------------------------
   12. Sheet 02: the programme foldout
   -------------------------------------------------------------------------- */
.nb-promise__intro { margin-top: var(--nb-folio-gap); display: grid; grid-template-columns: repeat(var(--nb-cols), minmax(0, 1fr)); column-gap: var(--nb-gutter); }
.nb-promise__title { grid-column: 1 / -1; }
.nb-promise__body { grid-column: 1 / -1; margin-top: 24px; }
.nb-panel__the { display: block; font-family: var(--nb-text-face); font-weight: 700; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-accent); }
.nb-panel__noun {
  display: block; margin-top: 8px;
  font-family: var(--nb-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0;
  font-size: var(--noun); line-height: 0.9;
  margin-block-end: -0.2em; /* trim to baseline */
  margin-inline-start: -0.04em;
}
.nb-panel__noun::before { content: ""; display: block; height: 0; margin-top: 0; }
.nb-panel p { margin-top: 12px; max-width: 32em; }

.nb-foldout {
  grid-column: full; margin-top: 48px;
  border-block: 1px solid var(--nb-black);
  display: grid;
}
.nb-panel {
  --pad-y: 24px; --pad-x: var(--nb-margin);
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--pad-y) var(--pad-x);
  --noun: 5.625rem;
}
.nb-panel--music { --noun: 8rem; }
.nb-panel__photo {
  margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) var(--pad-y);
  aspect-ratio: 3 / 2;
}
.nb-panel--music .nb-panel__photo { aspect-ratio: 4 / 5; }
.nb-panel--food .nb-panel__photo { box-shadow: inset 0 12px 12px -12px rgb(0 0 0 / 0.08); }
.nb-panel__text { position: relative; z-index: 1; }



/* creases between stacked panels */
.nb-crease { position: absolute; pointer-events: none; }
.nb-panel--food::before, .nb-panel--market::before, .nb-panel--rest::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.08), rgb(0 0 0 / 0));
  pointer-events: none;
}
.nb-crease--fold { left: 0; right: 0; top: 0; height: 1px; background: rgb(0 0 0 / 0.16); }

@media (min-width: 640px) {
  .nb-promise__title { grid-column: 1 / 7; }
  .nb-promise__body { grid-column: 1 / 7; }
  .nb-panel__photo { aspect-ratio: 16 / 9; }
  .nb-panel--music .nb-panel__photo { aspect-ratio: 3 / 2; }
}

@media (min-width: 1024px) {
  .nb-promise__title { grid-column: 1 / 7; grid-row: 1; align-self: end; }
  .nb-promise__body { grid-column: 8 / 13; grid-row: 1; margin-top: 0; align-self: end; margin-bottom: -10px; }
  @supports (align-self: last baseline) {
    .nb-promise__title, .nb-promise__body { align-self: last baseline; }
    .nb-promise__body { margin-bottom: 0; }
  }

  .nb-foldout {
    grid-column: content; margin-top: var(--nb-body-object);
    margin-inline: calc(var(--nb-gutter) / -2);
    border: 0; outline: 1px solid var(--nb-black);
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1.41421 / 1;
    position: relative;
  }
  .nb-panel { --pad-y: 32px; --pad-x: calc(var(--nb-gutter) / 2); min-height: 0; }
  /* photos fill whatever the folded panel leaves above the text */
  .nb-panel__photo, .nb-panel--music .nb-panel__photo { aspect-ratio: auto; flex: 1 1 0; min-height: 96px; }
  /* food: text on the left half, photo bleeding off the right half, split on the page columns */
  .nb-panel--food { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nb-gutter); align-items: end; }
  .nb-panel--food .nb-panel__photo { grid-column: 2; grid-row: 1; align-self: stretch; margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y)) 0; }
  .nb-panel--food .nb-panel__text { grid-column: 1; grid-row: 1; }
  .nb-panel--music { grid-column: 1; grid-row: 1 / 3; --noun: 9rem; }
  .nb-panel--food { grid-column: 2 / 4; grid-row: 1; --noun: 6.375rem; }
  .nb-panel--market { grid-column: 2; grid-row: 2; --noun: 4.5rem; }
  .nb-panel--rest { grid-column: 3; grid-row: 2; --noun: 4.5rem; }

  .nb-panel--food::before { display: block; top: 0; bottom: 0; left: 0; right: auto; width: 12px; height: auto; background: linear-gradient(to right, rgb(0 0 0 / 0.08), rgb(0 0 0 / 0)); }
  .nb-panel--rest::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 12px; background: linear-gradient(to right, rgb(0 0 0 / 0.08), rgb(0 0 0 / 0)); pointer-events: none; }
  .nb-crease--fold { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .nb-panel--market::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 12px; background: linear-gradient(to right, rgb(0 0 0 / 0.08), rgb(0 0 0 / 0)); pointer-events: none; }

  .nb-panel--music p, .nb-panel--food p { max-width: none; }
  .nb-panel--music .nb-panel__text { max-width: calc(4 * var(--nb-col) + 3 * var(--nb-gutter)); }
}
@media (min-width: 1440px) {
  .nb-panel { --pad-y: 48px; }
  .nb-panel p { margin-top: 16px; }
  .nb-panel--music { --noun: 11rem; }
  .nb-panel--food { --noun: 7.75rem; }
  .nb-panel--market, .nb-panel--rest { --noun: 5.5rem; }
}
@media (min-width: 1024px) {
  .nb-panel--music { --noun: clamp(9rem, 4.077rem + 7.692vw, 11rem); }
  .nb-panel--food { --noun: clamp(6.375rem, 2.991rem + 5.288vw, 7.75rem); }
  .nb-panel--market, .nb-panel--rest { --noun: clamp(4.5rem, 2.039rem + 3.846vw, 5.5rem); }
}

/* --------------------------------------------------------------------------
   13. Sheet 03: the ticket
   -------------------------------------------------------------------------- */
.nb-register__copy { margin-top: var(--nb-folio-gap); }
.nb-register__body { margin-top: 24px; }

/* the two texts bar: a rule with exactly two marks, one per text */
.nb-twotexts {
  --tt-mark: 14px; --tt-gap: 12px; --tt-span: 4; --tt-at: 2;
  margin-top: 24px; container-type: inline-size;
  display: grid; grid-template-columns: repeat(var(--tt-span), minmax(0, 1fr)); column-gap: var(--nb-gutter);
}
.nb-twotexts__line { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; height: var(--tt-mark); }
.nb-twotexts__line .nb-pr__seg { position: static; height: var(--nb-rule-w); margin: 0; background: var(--nb-black); flex: 1 1 auto; }
.nb-twotexts__line .nb-pr__seg::after { display: none; }
.nb-twotexts__seg--a { flex: 0 0 calc(var(--tt-at) * ((100cqi - (var(--tt-span) - 1) * var(--nb-gutter)) / var(--tt-span) + var(--nb-gutter)) - var(--tt-mark)) !important; }
.nb-twotexts__mark {
  flex: 0 0 auto; width: var(--tt-mark); height: var(--tt-mark);
  border: 2px solid var(--nb-black); background: transparent;
  transition: background-color var(--nb-d3) var(--nb-ease-out);
}
.nb-twotexts.is-live .nb-twotexts__mark { background: var(--nb-black); }
.nb-twotexts.is-live .nb-twotexts__mark--2 { transition-delay: var(--nb-d3); }
.nb-twotexts__label { grid-row: 2; margin-top: var(--tt-gap); color: var(--nb-black); }
.nb-twotexts__label--1 { grid-column: 1 / span 2; }
.nb-twotexts__label--2 { grid-column: calc(var(--tt-at) + 1) / span 2; }

/* The ticket */
.nb-ticket { margin-top: 32px; position: relative; color: var(--nb-white); background: transparent; }
.nb-ticket__head,
.nb-form--ticket .nb-form__fields,
.nb-form--ticket .nb-success,
.nb-ticket__stub { background: var(--nb-black); padding-inline: var(--nb-pad); }
.nb-ticket__head {
  position: relative; height: 56px; display: flex; align-items: center; justify-content: space-between;
  color: var(--nb-gold);
}
.nb-ticket__head::after { content: ""; position: absolute; left: var(--nb-pad); right: var(--nb-pad); bottom: 0; height: 1px; background: var(--nb-gold); }
.nb-ticket__head img { height: 16px; width: auto; }
.nb-form--ticket .nb-form__fields { padding-block: 24px; display: grid; gap: 24px; }
.nb-form--ticket .nb-success { padding-block: 24px; }

.nb-ticket__perf {
  --notch: 12px;
  height: 32px; background: var(--nb-black);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000 100%),
    radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000 100%),
    radial-gradient(circle 3px at 50% 50%, #0000 86%, #000 100%) 50% 50% / 14px 100% repeat-x;
  -webkit-mask-composite: source-in, source-in;
  mask:
    radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000 100%),
    radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000 100%),
    radial-gradient(circle 3px at 50% 50%, #0000 86%, #000 100%) 50% 50% / 14px 100% repeat-x;
  mask-composite: intersect;
}
.nb-ticket__stub { padding-block: 24px 20px; transition: transform 220ms var(--nb-ease-out); }
.nb-ticket__stubrow { display: grid; gap: 16px; }
.nb-ticket__stub .nb-submit { width: 100%; }
.nb-ticket__stub .nb-small { color: var(--nb-white); }
.nb-ticket.is-done .nb-ticket__stub { transform: translateY(12px); }
@media (min-width: 1440px) { .nb-ticket__stub .nb-submit { min-height: 64px; } }

@media (min-width: 640px) {
  .nb-register__title { max-width: calc(6 * var(--nb-col) + 5 * var(--nb-gutter)); }
  .nb-register__body { max-width: calc(6 * var(--nb-col) + 5 * var(--nb-gutter)); }
  .nb-twotexts { --tt-mark: 16px; --tt-gap: 16px; --tt-span: 6; --tt-at: 3; max-width: calc(6 * var(--nb-col) + 5 * var(--nb-gutter)); }
  .nb-ticket { margin-top: 48px; margin-inline: -24px; }
  .nb-ticket__head { height: 64px; }
  .nb-ticket__head img { height: 20px; }
  .nb-ticket__perf { --notch: 16px; }
  .nb-form--ticket .nb-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nb-gutter); row-gap: 24px; align-items: end;
  }
  .nb-form--ticket .nb-summary, .nb-form--ticket .nb-field--check { grid-column: 1 / -1; }
  .nb-form--ticket .nb-field[data-field="phone"] {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nb-gutter);
    align-items: baseline;
  }
  .nb-form--ticket .nb-field[data-field="phone"] > * { grid-column: 1; }
  .nb-form--ticket .nb-field[data-field="phone"] > .nb-hint { grid-column: 2; grid-row: 1; margin: 0; }
  .nb-ticket__stubrow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nb-gutter); align-items: start; }
  .nb-ticket__stubrow > .nb-small { grid-column: 2; grid-row: 1; margin: 0; }
  .nb-ticket__stubrow > .nb-submit, .nb-ticket__stubrow > .nb-stamp { grid-column: 1; grid-row: 1; }
}
@media (min-width: 1024px) {
  .nb-register__copy { grid-column: 2 / 7; grid-row: 4; }
  .nb-register__title, .nb-register__body, .nb-twotexts { max-width: none; }
  .nb-register__body { margin-top: 32px; }
  .nb-twotexts { margin-top: 48px; --tt-span: 5; --tt-at: 3; }
  .nb-ticket { grid-column: 8 / 14; grid-row: 4; margin-top: var(--nb-folio-gap); margin-inline: calc(-1 * var(--nb-gutter)); align-self: start; }
  .nb-form--ticket .nb-form__fields { padding-block: 32px; }
  .nb-ticket__stub { padding-block: 32px; }
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.nb-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nb-field > label, .nb-chips legend { font-weight: 600; font-size: 1rem; line-height: 1.5rem; color: var(--nb-accent); }
.nb-ticket .nb-field > label { color: var(--nb-gold); }
.nb-page .nb-hint { font-size: 1rem; line-height: 1.5rem; margin-top: -4px; }
.nb-page .nb-small { font-size: 1rem; line-height: 1.5rem; }

.nb-page input[type="text"], .nb-page input[type="email"], .nb-page input[type="tel"] {
  display: block; width: 100%; height: 56px; padding: 0 16px;
  font-family: var(--nb-text-face); font-size: 1.125rem; line-height: 1.5rem; font-weight: 400;
  background: var(--nb-white); color: var(--nb-black);
  border: 0; border-radius: 0; appearance: none; -webkit-appearance: none;
  box-shadow: none;
}
.nb-page input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--nb-white) inset; -webkit-text-fill-color: var(--nb-black); }
.nb-page input[aria-invalid="true"] { box-shadow: inset 4px 0 0 var(--nb-error-bar, var(--nb-gold-deep)); }
.nb-page input:-webkit-autofill[aria-invalid="true"] { -webkit-box-shadow: inset 4px 0 0 var(--nb-gold-deep), 0 0 0 100px var(--nb-white) inset; }

/* error slips */
.nb-error, .nb-slip {
  position: relative; display: flex; gap: 8px; align-items: flex-start;
  padding: 12px; background: var(--nb-gold); color: var(--nb-black);
  font-weight: 600; font-size: 1rem; line-height: 1.5rem;
  animation: nb-fade-in var(--nb-d1) var(--nb-ease-out);
}
.nb-page .nb-error, .nb-page .nb-slip { font-size: 1rem; line-height: 1.5rem; }
.nb-error::before, .nb-slip::before {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 22 20H2Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 9v5' stroke='%23000' stroke-width='2'/%3E%3Crect x='11' y='16' width='2' height='2'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 22 20H2Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 9v5' stroke='%23000' stroke-width='2'/%3E%3Crect x='11' y='16' width='2' height='2'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.nb-slip a { color: inherit; font-weight: 700; }
@keyframes nb-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* email suggestion */
.nb-suggest { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.nb-page .nb-suggest__text { font-size: 1rem; line-height: 1.5rem; }
.nb-suggest__use {
  min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font-weight: 600; text-decoration: none; color: var(--nb-link-line);
}

/* error summary */
.nb-summary { padding: 16px; background: var(--nb-gold); color: var(--nb-black); }
.nb-summary__title { font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; }
.nb-summary__list { margin-top: 8px; display: grid; gap: 4px; }
.nb-summary__list a { font-weight: 600; color: var(--nb-black); text-decoration: none; display: inline-block; padding-block: 10px; }
.nb-summary, .nb-slip, .nb-error { --nb-focus: var(--nb-black); }

/* the consent checkbox */
.nb-field--check { gap: 8px; }
.nb-check { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; align-items: start; min-height: 44px; }
.nb-check input[type="checkbox"] {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.nb-check__box {
  grid-column: 1; grid-row: 1; width: 28px; height: 28px; margin: 8px;
  display: grid; place-items: center;
  border: 2px solid currentColor; background: transparent; color: inherit;
}
.nb-check__box .nb-icon { width: 20px; height: 20px; opacity: 0; color: var(--nb-black); }
.nb-check input:checked + .nb-check__box { background: var(--nb-gold); border-color: var(--nb-gold); }
.nb-on-white .nb-check input:checked + .nb-check__box { background: var(--nb-black); border-color: var(--nb-black); }
.nb-on-white .nb-check input:checked + .nb-check__box .nb-icon { color: var(--nb-white); }
.nb-check input:checked + .nb-check__box .nb-icon { opacity: 1; }
.nb-check input:focus-visible + .nb-check__box { outline: 3px solid var(--nb-focus); outline-offset: 3px; }
.nb-check input[aria-invalid="true"] + .nb-check__box { box-shadow: inset 4px 0 0 var(--nb-gold-deep); }
.nb-check label { grid-column: 2; grid-row: 1; padding-block: 10px; font-size: 1rem; line-height: 1.5rem; cursor: pointer; }
.nb-check__more { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; margin-left: 52px; }

.nb-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* submit loading pulse */
.nb-btn__pulse { width: 20px; height: 23px; overflow: visible; stroke: currentColor; stroke-width: 2px; display: none; }
.nb-btn__pulse use { stroke: currentColor; stroke-width: 2px; }
.nb-submit[aria-disabled="true"] .nb-btn__pulse { display: block; }
.nb-js:not(.nb-rm) .nb-submit[aria-disabled="true"] .nb-btn__pulse { animation: nb-scan 900ms linear infinite; }
@keyframes nb-scan {
  0%   { clip-path: inset(0 100% 0 0); }
  30%  { clip-path: inset(0 40% 0 0); }
  70%  { clip-path: inset(0 0 0 40%); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* success */
.nb-success { animation: nb-fade-in var(--nb-d2) var(--nb-ease-out); }
.nb-success__title {
  font-family: var(--nb-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.5rem); line-height: 0.95; letter-spacing: 0.01em;
  color: var(--nb-white); margin-block: -0.025em -0.225em;
}
.nb-success__body { margin-top: 24px; }
.nb-share { margin-top: 24px; width: 100%; justify-content: flex-start; }
@media (max-width: 639px) {
  .nb-share { padding-block: 12px; }
  .nb-share .nb-btn__label { white-space: normal; line-height: 1.05; text-align: left; }
}
.nb-share__fallback input { margin-top: 12px; }
.nb-success__more { margin-top: 16px; }
.nb-success__more .nb-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 640px) {
  .nb-share { width: auto; }
}

/* the stamp */
.nb-stamp {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
  justify-self: start; padding: 12px 16px;
  border: 2px solid var(--nb-gold); outline: 1px solid var(--nb-gold); outline-offset: -7px;
  color: var(--nb-gold);
}
.nb-stamp__title { font-family: var(--nb-display); font-weight: 700; font-size: 2rem; line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; padding-top: 4px; }
.nb-stamp__date { font-weight: 700; font-size: 0.875rem; line-height: 1rem; letter-spacing: 0.14em; text-transform: uppercase; }
.nb-stamp--deep { border-color: var(--nb-gold-deep); outline-color: var(--nb-gold-deep); color: var(--nb-gold-deep); }
.nb-js:not(.nb-rm) .nb-stamp.is-in { animation: nb-stamp 220ms var(--nb-ease-out); }
@keyframes nb-stamp { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* notices used only without JavaScript */
.nb-notice { display: none; margin-top: 24px; padding: 16px; background: var(--nb-black); color: var(--nb-white); font-weight: 600; }
.nb-notice--dark { background: var(--nb-gold); color: var(--nb-black); }
.nb-notice:target { display: block; }

/* --------------------------------------------------------------------------
   15. Sheet 04: the hoarding
   -------------------------------------------------------------------------- */
.nb-sheets { margin-top: var(--nb-folio-gap); display: grid; row-gap: 48px; container-type: inline-size; }
.nb-flysheet {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--nb-pad);
}
.nb-tab {
  display: inline-flex; align-items: center; height: 32px; padding: 6px 10px 5px;
  background: var(--nb-black); color: var(--nb-white);
  font-weight: 700; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.nb-flysheet__photo { width: 100%; aspect-ratio: 16 / 10; margin-top: 20px; }
.nb-flysheet__title {
  margin-top: 20px;
  font-family: var(--nb-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; letter-spacing: 0.01em; white-space: nowrap;
  margin-bottom: -0.225em; padding-top: 0;
  /* both headings sit on one line at one size: the longer one, "Put your
     brand centre stage" (9.7em plus a hair), sets the size once a sheet is narrow */
  --fly-ink: 9.85;
  --fly-w: calc(100cqi - 2 * var(--nb-pad));
  font-size: min(clamp(2.5rem, 1.6rem + 2.2vw, 3.5rem), calc(var(--fly-w) / var(--fly-ink)));
}
.nb-flysheet__body { margin-top: 16px; }
.nb-flysheet__cta { margin-top: 24px; width: 100%; }

@media (min-width: 640px) {
  .nb-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nb-gutter); grid-template-rows: repeat(5, auto); row-gap: 0; }
  .nb-flysheet { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; row-gap: 0; justify-items: start; }
  .nb-flysheet__photo { margin-top: 24px; }
  @supports not (grid-template-rows: subgrid) { .nb-flysheet { grid-template-rows: auto auto auto 1fr auto; } }
  .nb-flysheet__title { align-self: end; margin-top: 24px; --fly-w: calc((100cqi - var(--nb-gutter)) / 2 - 2 * var(--nb-pad)); }
  .nb-flysheet__cta { align-self: end; margin-top: 32px; width: 100%; }
}
@media (min-width: 1024px) {
  .nb-flysheet__cta { width: auto; min-width: 240px; }
}
@media (min-width: 1440px) {
  .nb-flysheet__cta { min-width: 280px; min-height: 64px; }
}

/* --------------------------------------------------------------------------
   16. Sheet 05: the name
   The block is a size container, so 100cqi is the content width.
   -------------------------------------------------------------------------- */
.nb-name__block {
  margin-top: var(--nb-folio-gap);
  position: relative;
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(var(--nb-cols), minmax(0, 1fr)); column-gap: var(--nb-gutter);
}
.nb-name__block > * {
  --n-col: calc((100cqi - (var(--nb-cols) - 1) * var(--nb-gutter)) / var(--nb-cols));
  --nia-span: 100cqi;
  --name-span: 100cqi;
  --nia-fs: calc(var(--nia-span) / 0.974);
  --name-fs: calc(var(--name-span) / 6.086);
}
.nb-name__word { grid-column: 1 / -1; grid-row: 1; color: var(--nb-white); }
.nb-name__title { grid-column: 1 / -1; grid-row: 2; margin-top: 32px; }
.nb-name__text { grid-column: 1 / -1; grid-row: 3; margin-top: 24px; }

/* The name rule cuts NIA at 60% of its cap height and beats through the I */
.nb-pr--name {
  --pr-beat: calc(0.32 * var(--nia-fs));
  --pr-w: 2px; --pr-halo: 2px;
  --pr-color: var(--nb-gold); --pr-halo-color: var(--nb-black);
  position: absolute; z-index: var(--nb-z-rule);
  top: calc(0.28 * var(--nia-fs) - 0.7068 * var(--pr-beat));
  left: calc(-1 * var(--nb-bleed));
  right: calc(-1 * var(--nb-bleed));
}
.nb-pr--name .nb-pr__seg--lead { flex: 0 0 calc(var(--nb-bleed) + 0.323 * var(--nia-fs)); }

.nb-founders { margin-top: 48px; }
.nb-founders__label { color: var(--nb-gold); margin-bottom: 12px; }
.nb-founders__list { border-top: 1px solid var(--nb-hair); }
.nb-founders__item { padding-block: 20px; border-bottom: 1px solid var(--nb-hair); display: grid; row-gap: 4px; }
.nb-page .nb-founders__name {
  font-family: var(--nb-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: 2rem; line-height: 0.95; color: var(--nb-white);
}
.nb-page .nb-founders__role { font-weight: 700; font-size: 0.875rem; line-height: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nb-gold); margin-top: 4px; }
.nb-page .nb-founders__line { font-size: 1rem; line-height: 1.5rem; margin-top: 4px; }
@media (min-width: 1440px) { .nb-page .nb-founders__line { font-size: 1.125rem; line-height: 1.75rem; } }

@media (min-width: 640px) {
  .nb-name__block { grid-template-rows: auto 1fr; }
  .nb-name__block > * {
    --nia-span: calc(4 * var(--n-col) + 3 * var(--nb-gutter));
    --name-span: calc(4 * var(--n-col) + 3 * var(--nb-gutter));
  }
  .nb-name__word { grid-column: 1 / 5; grid-row: 1 / 3; }
  .nb-pr--name { --pr-w: 3px; --pr-halo: 3px; }
  /* the H2 stands on the rule: its baseline 24px above it */
  .nb-name__title {
    grid-column: 5 / 9; grid-row: 1; align-self: start;
    margin-top: calc(0.28 * var(--nia-fs) - 24px - 0.7 * var(--name-fs));
  }
  /* body starts 32px under the rule */
  .nb-name__text { grid-column: 5 / 9; grid-row: 2; margin-top: calc(24px + 32px + var(--pr-w, 3px)); }
}
@media (min-width: 1024px) {
  .nb-name__block > * {
    --nia-span: calc(6 * var(--n-col) + 5 * var(--nb-gutter));
    --name-span: calc(5 * var(--n-col) + 4 * var(--nb-gutter));
  }
  .nb-name__word { grid-column: 1 / 7; }
  .nb-name__title, .nb-name__text { grid-column: 8 / 13; }
}

/* --------------------------------------------------------------------------
   17. Sheet 06: the colophon
   -------------------------------------------------------------------------- */
.nb-colophon { padding-block: 24px calc(32px + env(safe-area-inset-bottom, 0px)); }
.nb-colophon__signup { margin-top: var(--nb-folio-gap); }
.nb-colophon__title { margin-bottom: 12px; }
.nb-form--footer .nb-form__fields { display: grid; gap: 16px; }
.nb-inline { display: grid; gap: 12px; }
.nb-inline .nb-submit { width: 100%; }
.nb-form--footer .nb-slip { margin-top: 0; }
.nb-success--footer { display: grid; gap: 8px; }
.nb-success__line { font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; }
.nb-page .nb-success__line { font-size: 1.125rem; line-height: 1.75rem; }

.nb-colophon__lockup { margin-top: 64px; }
.nb-colophon__lockup img { width: 200px; height: auto; }

.nb-imprint { margin-top: 64px; display: grid; gap: 32px; }
.nb-imprint__label { color: var(--nb-gold); margin-bottom: 8px; }
.nb-imprint__block p, .nb-imprint__row { font-size: 1rem; line-height: 1.5rem; }
.nb-imprint__row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; min-height: 44px; }
.nb-imprint__row .nb-icon { color: var(--nb-white); }
.nb-imprint__list { display: grid; }
.nb-imprint__social {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--nb-white); text-decoration: none;
}
.nb-imprint__social .nb-icon { color: var(--nb-white); }
.nb-imprint__platform { font-size: 1rem; line-height: 1.5rem; }
.nb-imprint__handle { font-weight: 600; font-size: 1rem; line-height: 1.5rem; transition: color var(--nb-d1) var(--nb-ease-out); }
@media (hover: hover) and (pointer: fine) { .nb-imprint__social:hover .nb-imprint__handle { color: var(--nb-gold); } }
.nb-imprint__contact { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; min-height: 44px; font-size: 1rem; line-height: 1.5rem; }
.nb-imprint__key { min-width: 4.5em; color: rgb(255 255 255 / 0.72); }
.nb-imprint__contact .nb-link { display: inline-flex; align-items: center; min-height: 44px; }
.nb-page .nb-imprint__company { font-size: 1rem; line-height: 1.5rem; max-width: 22em; }
.nb-plate {
  display: inline-block; padding: 4px 8px; border: 1px dashed rgb(255 255 255 / 0.40);
  font-size: 1rem; line-height: 1.5rem; color: var(--nb-white);
}
.nb-colophon__foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--nb-hair); display: grid; gap: 16px; }
.nb-colophon__top { justify-self: start; }

@media (min-width: 640px) {
  .nb-inline { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--nb-gutter); }
  .nb-inline input { grid-column: 1; }
  .nb-inline .nb-submit { grid-column: 2; width: auto; min-width: calc(2 * var(--nb-col) + var(--nb-gutter)); }
  .nb-colophon__signup { grid-column: 2 / 8; }
  .nb-colophon__lockup img { width: 240px; }
  .nb-imprint { margin-top: 64px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nb-gutter); row-gap: 32px; }
  .nb-colophon__foot { grid-template-columns: 1fr auto; align-items: center; }
  .nb-colophon__top { justify-self: end; }
}
@media (min-width: 1024px) {
  .nb-colophon { padding-block: 32px 48px; }
  .nb-colophon__lockup { grid-column: 2 / 5; grid-row: 2; margin-top: var(--nb-folio-gap); align-self: start; }
  .nb-colophon__lockup img { width: 100%; max-width: 280px; }
  .nb-colophon__signup { grid-column: 8 / 14; grid-row: 2; }
  .nb-inline .nb-submit { min-height: 64px; }
  .nb-page .nb-inline input[type="email"] { height: 64px; }
  .nb-imprint { grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 96px; padding-top: 32px; border-top: 1px solid var(--nb-hair); }
  .nb-colophon__foot { grid-row: 4; margin-top: 64px; }
}

/* --------------------------------------------------------------------------
   18. The dock
   -------------------------------------------------------------------------- */
.nb-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--nb-z-dock);
  height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--nb-gold); color: var(--nb-black);
  --nb-focus: var(--nb-black);
  transition: transform 240ms var(--nb-ease-out), visibility 0s linear 0s;
}
.nb-dock::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background: radial-gradient(circle 1px at 1px 1px, var(--nb-black) 98%, #0000) 0 0 / 8px 2px repeat-x;
  pointer-events: none;
}
.nb-dock.is-out { transform: translateY(105%); visibility: hidden; transition: transform 200ms var(--nb-ease-in), visibility 0s linear 200ms; }
.nb-dock__row { height: 56px; align-items: center; }
.nb-dock__mark { display: none; }
.nb-dock__link {
  display: flex; align-items: center; justify-content: space-between; height: 56px;
  font-family: var(--nb-display); font-weight: 700; font-size: 1.375rem; line-height: 1; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; color: var(--nb-black);
}
.nb-dock__link::after { content: ""; position: absolute; inset: 0; }
.nb-dock__link:focus-visible { outline: none; }
.nb-dock__link:focus-visible::after { outline: 3px solid var(--nb-black); outline-offset: -8px; }
.nb-dock__link .nb-btn__label { padding-top: 0.1em; }

@media (min-width: 1024px) {
  .nb-dock {
    top: 0; bottom: auto; height: 56px; padding: 0;
    background: var(--nb-black); color: var(--nb-white); border-bottom: 1px solid rgb(255 255 255 / 0.24);
    --nb-focus: var(--nb-gold);
  }
  .nb-dock::before { display: none; }
  .nb-dock.is-out { transform: translateY(-105%); }
  .nb-dock__row > * { grid-row: 1; }
  .nb-dock__mark { display: block; height: 20px; width: auto; justify-self: start; }
  .nb-dock__link {
    justify-self: end; height: 44px; padding: 0 20px; gap: 12px;
    background-color: var(--nb-gold); color: var(--nb-black);
    background-image: linear-gradient(var(--nb-white), var(--nb-white)); background-repeat: no-repeat; background-size: 0% 100%;
    transition: background-size 340ms var(--nb-ease-out);
  }
  .nb-dock__link::after { display: none; }
  .nb-dock__link:focus-visible { outline: 3px solid var(--nb-gold); outline-offset: 3px; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .nb-dock__link:hover { background-size: 100% 100%; }
}

/* --------------------------------------------------------------------------
   19. Dialogs
   -------------------------------------------------------------------------- */
.nb-dialog {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0 20px 20px;
  border: 0; border-radius: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--nb-white); color: var(--nb-black);
  font-family: var(--nb-text-face);
}
.nb-dialog { scroll-padding-top: 88px; scroll-padding-bottom: 16px; }
.nb-dialog::backdrop { background: rgb(0 0 0 / 0.72); }
.nb-dialog[open] { animation: nb-fade-in var(--nb-d2) var(--nb-ease-out); }
.nb-dialog__head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding-block: 16px 12px; background: var(--nb-white); border-bottom: 1px solid var(--nb-black);
}
.nb-dialog__close {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer; color: var(--nb-black);
  font-family: var(--nb-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.nb-dialog__close span { padding-top: 0.1em; }
.nb-dialog__close .nb-icon { width: 16px; height: 16px; }
.nb-dialog__title {
  margin-top: 24px;
  font-family: var(--nb-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.5rem); line-height: 0.95; letter-spacing: 0.01em;
}
.nb-form--dialog { margin-top: 24px; }
.nb-form--dialog .nb-form__fields { display: grid; gap: 24px; }
.nb-form--dialog input[type="text"], .nb-form--dialog input[type="email"] { box-shadow: inset 0 0 0 2px var(--nb-black); }
.nb-form--dialog input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--nb-black), inset 6px 0 0 var(--nb-gold-deep); }
.nb-form--dialog .nb-field > label, .nb-chips legend { color: var(--nb-black); }
.nb-form--dialog .nb-submit { justify-self: start; width: 100%; }
.nb-success--dialog { display: grid; gap: 24px; justify-items: start; }
@media (min-width: 640px) {
  .nb-dialog { width: 560px; height: auto; max-height: calc(100svh - 64px); margin: auto; padding: 0 32px 32px; }
  .nb-form--dialog .nb-submit { width: auto; }
}

/* chips */
.nb-chips legend { margin-bottom: 8px; float: left; width: 100%; }
.nb-chips__row { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.nb-chip { position: relative; cursor: pointer; }
.nb-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.nb-chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 2px solid var(--nb-black); font-weight: 600; font-size: 1rem; line-height: 1.5rem;
}
.nb-chip .nb-icon { display: none; width: 16px; height: 16px; }
.nb-chip input:checked + span { background: var(--nb-black); color: var(--nb-white); }
.nb-chip input:checked + span .nb-icon { display: block; }
.nb-chip input:focus-visible + span { outline: 3px solid var(--nb-black); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   20. Drawing (lines draw, type never moves)
   -------------------------------------------------------------------------- */
.nb-js:not(.nb-rm) .nb-will-draw:not(.is-drawn) {
  clip-path: inset(-60% 100% -60% 0);
  animation: nb-failsafe 0s linear 4s forwards;
}
.nb-js.nb-live .nb-will-draw { animation: none; }
.nb-js:not(.nb-rm) .nb-will-draw { transition: clip-path var(--nb-d3) var(--nb-ease-out); }
.nb-js:not(.nb-rm) .nb-will-draw.is-drawn { clip-path: inset(-60% 0 -60% 0); }
.nb-js:not(.nb-rm) .nb-pr--cut.nb-will-draw { transition-duration: var(--nb-d-cut); transition-timing-function: var(--nb-ease-in-out); }
.nb-js:not(.nb-rm) .nb-pr--name.nb-will-draw { transition-duration: var(--nb-d-draw); transition-timing-function: var(--nb-ease-in-out); }
.nb-js:not(.nb-rm) .nb-folio__line.nb-will-draw { transition-duration: 500ms; }
.nb-js:not(.nb-rm) .nb-crease.nb-will-draw:not(.is-drawn) { clip-path: inset(0 0 100% 0); }
.nb-js:not(.nb-rm) .nb-crease.nb-will-draw.is-drawn { clip-path: inset(0 0 0 0); transition-duration: 260ms; }
@keyframes nb-failsafe { to { clip-path: inset(-60% 0 -60% 0); } }

/* --------------------------------------------------------------------------
   21. Reduced motion and forced colours
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nb-page *, .nb-page *::before, .nb-page *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .nb-pr__seg::after { background: CanvasText; }
  .nb-pr__seg { background: transparent; }
  .nb-pr__core, .nb-pr__halo { stroke: CanvasText; }
  .nb-pr__halo { display: none; }
  .nb-crease, .nb-btn--stub::after { display: none; }
  .nb-btn { border: 2px solid ButtonText; }
  .nb-page :focus-visible { outline-color: Highlight; }
  .nb-page input[type="text"], .nb-page input[type="email"], .nb-page input[type="tel"] { border: 2px solid FieldText; }
  .nb-page input[aria-invalid="true"] { border-inline-start-width: 6px; }
  .nb-error::before, .nb-slip::before { forced-color-adjust: none; background: CanvasText; }
  .nb-dock { border-block: 2px solid CanvasText; }
  .nb-dialog { border: 2px solid CanvasText; }
  .nb-masthead__mark img, .nb-ticket__head img, .nb-dock__mark, .nb-colophon__lockup img { forced-color-adjust: none; background: #000000; }
}

/* --------------------------------------------------------------------------
   22. ?grid=1 overlay for sign off
   -------------------------------------------------------------------------- */
.nb-gridlay {
  position: fixed; inset: 0; z-index: var(--nb-z-grid); pointer-events: none;
}
.nb-gridlay > div { height: 100%; }
.nb-gridlay span { display: block; height: 100%; background: rgb(207 153 42 / 0.12); }
.nb-gridlay::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgb(207 153 42 / 0.10) 0 1px, transparent 1px 4px);
}

/* --------------------------------------------------------------------------
   23. Small print pages (privacy, terms): black ink on white stock
   -------------------------------------------------------------------------- */
.nb-masthead__back { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .nb-masthead__back:hover { color: var(--nb-white); } }
.nb-legal { padding-block: 24px 96px; }
.nb-legal__head { margin-top: var(--nb-folio-gap); }
.nb-legal__title {
  font-family: var(--nb-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(3.5rem, 1.9rem + 6.4vw, 8.5rem); line-height: 0.9;
  margin-block: 0 -0.2em; margin-inline-start: -0.04em;
}
.nb-legal__intro { margin-top: 32px; max-width: 38em; }
.nb-legal__toc { display: none; }
.nb-legal__sections { margin-top: 48px; border-top: var(--nb-rule-w) solid var(--nb-black); }
.nb-legal__section {
  display: grid; grid-template-columns: repeat(var(--nb-cols), minmax(0, 1fr)); column-gap: var(--nb-gutter);
  padding-block: 28px 32px; border-bottom: 1px solid var(--nb-hair); scroll-margin-top: 24px;
}
.nb-legal__num {
  grid-column: 1 / -1; font-family: var(--nb-display); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--nb-gold-deep); margin-bottom: 8px;
}
.nb-legal__body { grid-column: 1 / -1; max-width: 40em; }
.nb-legal__body h2 {
  font-family: var(--nb-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 0.95; margin-bottom: 16px;
}
.nb-legal__body p + p, .nb-legal__body p + ul, .nb-legal__body ul + p { margin-top: 16px; }
.nb-legal__body ul { display: grid; gap: 10px; }
.nb-legal__body li { position: relative; padding-left: 24px; font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem); line-height: 1.55; }
.nb-legal__body li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--nb-black); }
.nb-legal__foot { padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); }
.nb-legal__footrow { display: grid; gap: 16px; }
.nb-legal__footrow p { font-size: 1rem; line-height: 1.5rem; max-width: 36em; }
.nb-legal__links { display: flex; flex-wrap: wrap; column-gap: 24px; }
@media (min-width: 1024px) {
  .nb-legal__head { grid-column: 2 / 10; grid-row: 2; }
  .nb-legal__sections { grid-column: 2 / 10; grid-row: 3; margin-top: 64px; }
  .nb-legal__section { grid-template-columns: repeat(8, minmax(0, 1fr)); padding-block: 40px; }
  .nb-legal__num { grid-column: 1 / 3; margin: 0; padding-top: 2px; }
  .nb-legal__body { grid-column: 3 / 9; }
  .nb-legal__toc {
    display: block; grid-column: 11 / 14; grid-row: 2 / 4; align-self: start;
    position: sticky; top: 32px; margin-top: var(--nb-folio-gap);
    border-top: var(--nb-rule-w) solid var(--nb-black); padding-top: 12px;
  }
  .nb-legal__toc p { color: var(--nb-gold-deep); margin-bottom: 8px; }
  .nb-legal__toc ol { display: grid; }
  .nb-legal__toc a {
    display: flex; align-items: center; min-height: 44px; font-size: 1rem; line-height: 1.25rem;
    color: var(--nb-black); text-decoration: none; border-bottom: 1px solid var(--nb-hair);
  }
  .nb-legal__toc li:last-child a { border-bottom: 0; }
  .nb-legal__footrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .nb-legal__toc a:hover { color: var(--nb-gold-deep); }
}

/* --------------------------------------------------------------------------
   24. Fallback for browsers without container query units
   -------------------------------------------------------------------------- */
@supports not (width: 1cqi) {
  .nb-fit { --nb-span: var(--nb-content); }
  .nb-name__block > * { --n-col: var(--nb-col); --nia-span: var(--nb-content); --name-span: var(--nb-content); }
  .nb-name__word .nb-fit { --nb-span: var(--nia-span); }
  .nb-name__title .nb-fit { --nb-span: var(--name-span); }
  .nb-twotexts__seg--a { flex: 0 0 calc(var(--tt-at) * (var(--nb-col) + var(--nb-gutter)) - var(--tt-mark)) !important; }
  .nb-pr--cut { width: calc(var(--nb-content) + 2 * var(--nb-bleed)); }
  .nb-flysheet__title { --fly-w: calc(var(--nb-content) - 2 * var(--nb-pad)); }
  @media (min-width: 640px) {
    .nb-flysheet__title { --fly-w: calc((var(--nb-content) - var(--nb-gutter)) / 2 - 2 * var(--nb-pad)); }
    .nb-promise__title .nb-fit, .nb-register__title .nb-fit { --nb-span: calc(6 * var(--nb-col) + 5 * var(--nb-gutter)); }
    .nb-name__block > * { --nia-span: calc(4 * var(--nb-col) + 3 * var(--nb-gutter)); --name-span: calc(4 * var(--nb-col) + 3 * var(--nb-gutter)); }
  }
  @media (min-width: 1024px) {
    .nb-register__title .nb-fit { --nb-span: calc(5 * var(--nb-col) + 4 * var(--nb-gutter)); }
    .nb-name__block > * { --nia-span: calc(6 * var(--nb-col) + 5 * var(--nb-gutter)); --name-span: calc(5 * var(--nb-col) + 4 * var(--nb-gutter)); }
  }
}

/* ==========================================================================
   25. Motion: the press and the ink
   One language for every effect: things are printed, registered, folded and
   pressed. Everything here switches off under reduced motion, and nothing
   stays hidden if the script does not run.
   ========================================================================== */

/* The bill prints: the two headline lines are rolled on, then the hero settles */
.nb-js:not(.nb-rm) .nb-hero__title .nb-fit {
  clip-path: inset(-40% 100% -40% -100vw);
  transition: clip-path 780ms var(--nb-ease-out);
  animation: nb-failsafe-show 0s linear 3s forwards;
}
.nb-js:not(.nb-rm) .nb-hero__title .nb-fit--h1b { transition-delay: 170ms; }
.nb-js:not(.nb-rm).nb-hero-in .nb-hero__title .nb-fit { clip-path: inset(-40% calc(-1 * var(--nb-bleed)) -40% -100vw); }
.nb-js:not(.nb-rm).nb-hero-done .nb-hero__title .nb-fit { clip-path: none; transition: none; }

.nb-js:not(.nb-rm) :is(.nb-hero__eyebrow, .nb-hero__sub, .nb-hero__ctas, .nb-slug) {
  opacity: 0; transform: translateY(14px);
  transition: opacity 560ms var(--nb-ease-out), transform 760ms var(--nb-ease-out);
  animation: nb-failsafe-show 0s linear 3s forwards;
}
.nb-js:not(.nb-rm) .nb-hero__eyebrow::after {
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1100ms var(--nb-ease-out) 240ms;
  animation: nb-failsafe-show 0s linear 3s forwards;
}
.nb-js:not(.nb-rm).nb-hero-in :is(.nb-hero__eyebrow, .nb-hero__sub, .nb-hero__ctas, .nb-slug) { opacity: 1; transform: none; }
.nb-js:not(.nb-rm).nb-hero-in .nb-hero__eyebrow::after { transform: none; }
.nb-js:not(.nb-rm).nb-hero-in .nb-hero__sub { transition-delay: 560ms; }
.nb-js:not(.nb-rm).nb-hero-in .nb-hero__ctas { transition-delay: 680ms; }
.nb-js:not(.nb-rm).nb-hero-in .nb-slug { transition-delay: 800ms; }
.nb-js.nb-live :is(.nb-hero__title .nb-fit, .nb-hero__eyebrow, .nb-hero__sub, .nb-hero__ctas, .nb-slug),
.nb-js.nb-live .nb-hero__eyebrow::after { animation: none; }
/* a control that has keyboard focus is never left invisible */
.nb-js:not(.nb-rm) :is(.nb-hero__ctas, .nb-slug):focus-within { opacity: 1; transform: none; transition: none; }
@keyframes nb-failsafe-show { to { clip-path: none; opacity: 1; transform: none; } }

/* The film under the paper: the hero stays put and sheet 02 is laid over it */
.nb-pin:not(.nb-rm) .nb-hero { position: sticky; top: var(--nb-hero-top, 0px); z-index: 0; }
.nb-pin:not(.nb-rm) .nb-hero ~ .nb-sheet { z-index: 1; }
.nb-pin:not(.nb-rm) .nb-promise { box-shadow: 0 -28px 64px rgb(0 0 0 / 0.55); }

/* A live signal: a bright pulse runs along the Cut every few seconds */
.nb-pr--trace {
  --pr-color: var(--nb-white); --pr-halo: 0px; --pr-halo-color: transparent;
  z-index: 1;
  /* the mask clips to the box, so give the peak's sharp tip room to show */
  padding-block: 16px; margin-top: -16px; height: calc(var(--pr-beat) * 1.1498 + 32px);
  -webkit-mask: linear-gradient(90deg, #0000 0 46%, #000 50%, #0000 54% 100%) 100% 0 / 400% 100% no-repeat;
  mask: linear-gradient(90deg, #0000 0 46%, #000 50%, #0000 54% 100%) 100% 0 / 400% 100% no-repeat;
  animation: nb-trace 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes nb-trace {
  0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  36%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
.nb-hero.is-still .nb-pr--trace, .nb-hero.is-covered .nb-pr--trace { animation-play-state: paused; visibility: hidden; }

/* Ink registration: display type arrives with its second ink out of register, then settles */
.nb-reg { --reg-ink: var(--nb-gold); }
.nb-on-gold .nb-reg { --reg-ink: var(--nb-white); }
.nb-motion .nb-reg { transition: text-shadow 1100ms var(--nb-ease-out) 120ms; }
.nb-motion .nb-reg:not(.is-reg) { text-shadow: 0.075em -0.05em 0 var(--reg-ink); }
.nb-motion .nb-reg.is-reg { text-shadow: 0 0 0 transparent; }

/* The programme unfolds from its creases, in fold order */
.nb-motion .nb-foldout { perspective: 2200px; }
.nb-motion .nb-panel {
  transform-origin: 50% 0; backface-visibility: hidden; will-change: transform, opacity;
  transition: transform 950ms cubic-bezier(0.16, 0.84, 0.3, 1), opacity 450ms var(--nb-ease-out);
}
.nb-motion .nb-panel:not(.is-open) { transform: rotateX(-84deg); opacity: 0; }
@media (min-width: 1024px) {
  .nb-motion .nb-panel--music:not(.is-open) { transform: none; }
  .nb-motion .nb-panel--food { transform-origin: 0 50%; transition-delay: 220ms; }
  .nb-motion .nb-panel--food:not(.is-open) { transform: rotateY(-100deg); }
  .nb-motion .nb-panel--market { transform-origin: 50% 0; transition-delay: 460ms; }
  .nb-motion .nb-panel--market:not(.is-open) { transform: rotateX(-100deg); }
  .nb-motion .nb-panel--rest { transform-origin: 0 50%; transition-delay: 700ms; }
  .nb-motion .nb-panel--rest:not(.is-open) { transform: rotateY(-100deg); }
}

/* Photographs develop: the black ink prints onto the gold, then lifts on hover */
.nb-motion .nb-photo img { transition: opacity 900ms var(--nb-ease-out), transform 1600ms var(--nb-ease-out), filter 600ms var(--nb-ease-out); }
.nb-motion .nb-photo:not(.is-dev) img { opacity: 0; transform: scale(1.1); }
.nb-motion .nb-panel.is-open:not(.is-set) .nb-photo img { transition-delay: 380ms, 380ms, 0ms; }
@media (hover: hover) and (pointer: fine) {
  .nb-panel:hover .nb-photo img, .nb-flysheet:hover .nb-photo img { filter: grayscale(0) contrast(1.05) brightness(1.12); transform: scale(1.04); }
}

/* NIA rises from its baseline in one smooth press, then the pulse sweeps through it.
   Only transform moves, so the glide stays on the compositor even at this size. */
.nb-motion .nb-name__word { overflow: clip; }
.nb-motion .nb-name__word .nb-fit {
  transform: translateY(104%);
  transition: transform 1150ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.nb-motion .nb-name__word.is-press .nb-fit { transform: none; }
.nb-motion .nb-pr--name.nb-will-draw {
  transition-duration: 1200ms; transition-timing-function: cubic-bezier(0.45, 0, 0.2, 1); transition-delay: 420ms;
}

@media (forced-colors: active) { .nb-pr--trace { display: none; } }

/* Printing or saving as PDF shows the finished page, whatever has been scrolled */
@media print {
  .nb-js .nb-hero__title .nb-fit, .nb-js .nb-will-draw { clip-path: none !important; animation: none !important; }
  .nb-js :is(.nb-hero__eyebrow, .nb-hero__sub, .nb-hero__ctas, .nb-slug), .nb-js .nb-hero__eyebrow::after,
  .nb-motion .nb-panel, .nb-motion .nb-photo img, .nb-motion .nb-name__word .nb-fit {
    opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
  }
  .nb-motion .nb-reg { text-shadow: none !important; }
  .nb-pr--trace, .nb-dock { display: none !important; }
  .nb-hero { position: relative !important; }
}