/* Next Token campaign pages (After Hours, Off Air, Second Skin, Soft Matter): the revised Creative look.
   Ivan, 26 Oct 2026: bring the four campaign pages into the local copy and restyle them. Loaded after each page's own
   styles, which keep the layout. Colours as on brightwork-creative.html and site-pages.css: paper #f4f2ec, surface
   #fbfaf6, dark green #14261d for the menu, footer, dark bands and film frames, blue #1c46d0 for the one primary action,
   focus and the compare slider. Text: #14261d and #4c4f55 on light; #fbfaf6 and #bbbdb4 on dark. Type: Erode with the
   "Erode Dot" middle-dot fix, weights and tracking measured on Creative (headings 500, -0.03em; wordmark 800). */
:root{
  color-scheme:light;
  --bw-green:#14261d;--bw-on-dark:#fbfaf6;--bw-on-dark-2:color-mix(in oklch,#fbfaf6 74%,#14261d);
  --paper:#f4f2ec;--ink:var(--bw-green);--muted:#4c4f55;--line:#e2ded3;--blue:#1c46d0;--light:#fbfaf6;
  --display:"Erode Dot",Erode,Georgia,"Times New Roman",serif;--body:"Erode Dot",Erode,Georgia,"Times New Roman",serif;
}
html,body{background:var(--paper);color:var(--bw-green)}
body{font-size:18px;line-height:1.55}
::selection{background:var(--blue);color:var(--light)}
h1,h2,h3{font-weight:500;letter-spacing:-.03em}
h1{line-height:1.02}
h2,h3{line-height:1.1}
.eyebrow{font:400 13px/1.55 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.section-head p,figcaption,.note{color:var(--muted)}
/* The fictional-demonstration strip, the menu and the footer: dark green bands across the full width. */
.stage{font:400 12px/1.6 var(--body);letter-spacing:.02em;background:var(--bw-green);color:var(--bw-on-dark-2)}
nav,.bottom{color:var(--light);border:0;border-image:linear-gradient(var(--bw-green) 0 0) fill 0/0/0 100vmax}
nav a,.bottom a{color:var(--light);font-size:16px}
.brand{font:800 34px/1 var(--display);letter-spacing:-.03em}
nav a:focus-visible,.bottom a:focus-visible{outline-color:var(--light)}
nav a:last-child{background:var(--blue);color:var(--light);text-decoration:none;padding:12px 20px;min-height:48px;display:inline-flex;align-items:center;font-weight:500}
.section{border-top-color:var(--line)}
/* The stills were drawn at their 768 px height attribute, so the two-up and last shots sat in tall letterbox boxes
   (also on live). Let the 7:4 aspect ratio set the height. */
.gallery img{height:auto}
.gallery figure:last-child{width:78%}
/* Buttons: outlined in dark green on light, pressed = dark green with light type (as Creative's selectors). */
.tabs button,.compare-buttons button{font-family:var(--body);font-size:15px;font-weight:500;color:var(--bw-green);border-color:var(--bw-green)}
.tabs button[aria-pressed=true],.compare-buttons button[aria-pressed=true]{background:var(--bw-green);color:var(--light);border-color:var(--bw-green)}
/* Dark frames and bands: main text #fbfaf6, secondary #bbbdb4 at full opacity. */
.reel-shell .tabs,.reel-shell .tabs button{color:var(--light);border-color:var(--light)}
.reel-shell .tabs button[aria-pressed=true]{background:var(--light);color:var(--bw-green)}
.reel-shell .note,.evidence .note{color:var(--bw-on-dark-2);opacity:1}
.evidence{background:var(--bw-green);color:var(--light)}
.evidence p{color:var(--bw-on-dark-2)}
.evidence h2,.evidence a{color:var(--light)}
.evidence a:focus-visible{outline-color:var(--light)}
.error{background:var(--bw-green);color:var(--light)}
.error a{color:var(--light)}
.download{background:var(--blue);color:var(--light);font-weight:500}
.skip{background:var(--bw-green);color:var(--light)}
@media(max-width:700px){.gallery figure:last-child{width:100%}nav a:last-child{font-size:13px;padding:10px 14px}.brand{font-size:28px}}