/* Capture & Keep — Storytelling V2, 20 September 2026.
   Two art directions over one narrative architecture, so colour and treatment can be
   compared fairly. Mock-up only: nothing here is on captureandkeep.co.uk.

   Every accent that carries text was picked to clear 4.5:1 on the ground it sits on.
   Accents used only for graphics (the route, rules, illustration strokes) are allowed
   to sit at 3:1, which is the graphics threshold. */

/* ---------------------------------------------------------------- tokens */
:root {
  --display: "Bodoni Moda", Didot, Georgia, serif;
  --mono:    "Courier Prime", "Courier New", ui-monospace, monospace;
  --body:    "Fraunces", "Source Serif 4", Georgia, serif;
  --w: 1180px;
  --w-wide: 1400px;
  --pad: clamp(20px, 4vw, 40px);
  --ch: clamp(4rem, 2.5rem + 7vw, 9rem);
}

/* A — warm / vintage / earthy. Paper-forward: the page behaves like something printed. */
[data-theme="a"] {
  --paper:      #F6EDE0;
  --paper-alt:  #EADBC4;
  --panel:      #F5D9C0;
  --deep:       #33241B;
  --ink:        #33241B;
  --ink-2:      #6B5344;
  --accent:     #9E4718;   /* text-safe terracotta */
  --graphic:    #B4531F;   /* route and rules */
  --on-deep:    #F5D9C0;
  --accent-deep:#D9855A;
  --land:       #E0C9A6;
  --land-line:  #6B4A2E;
  --line:       rgba(51,36,27,0.20);
  --doc:        #FBF5EC;
  --doc-edge:   rgba(51,36,27,0.16);
  --radius: 0px;
}

/* B — faded rose / green / burgundy. Editorial-forward: colour blocks and column rules
   instead of paper texture. */
[data-theme="b"] {
  --paper:      #F4EEE6;
  --paper-alt:  #E6CFCA;
  --panel:      #E6CFCA;
  --deep:       #2A1C21;
  --ink:        #2A1C21;
  --ink-2:      #5C4A50;
  --accent:     #6E2430;   /* burgundy, text-safe everywhere it is used */
  --graphic:    #B06346;
  --olive:      #5F6B42;
  --on-deep:    #E6CFCA;
  --accent-deep:#D08A6B;
  --land:       #C6CDAB;
  --land-line:  #4C563A;
  --line:       rgba(42,28,33,0.20);
  --doc:        #FBF7F2;
  --doc-edge:   rgba(42,28,33,0.16);
  --radius: 0px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
/* A gets a printed-paper ground. B deliberately does not: its texture is colour. */
[data-theme="a"] body {
  background-image:
    radial-gradient(rgba(51,36,27,0.040) 0.6px, transparent 0.6px),
    radial-gradient(rgba(255,255,255,0.22) 0.6px, transparent 0.6px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 2px 3px;
  background-attachment: fixed;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1.05em; }

.in { max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }
.in-wide { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--pad); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------------------------------------------------------------- type */
.display {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.02em; line-height: 0.98; margin: 0; text-wrap: balance;
}
h1.display { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.8rem); line-height: 0.94; padding-bottom: 0.08em; }
h2.display { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); }
h3.display { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.12; }

.label {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 1rem; display: block;
}
.lede { font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 48ch; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.95rem 1.6rem; border: 1.5px solid var(--accent);
  background: var(--accent); color: var(--paper); border-radius: var(--radius);
}
.btn:hover { background: transparent; color: var(--accent); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent); color: var(--paper); }
.quiet {
  font-family: var(--mono); font-size: 0.79rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--accent);
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}

/* ---------------------------------------------------------------- chapters */
.chapter { padding: var(--ch) 0; position: relative; }
.chapter-alt { background: var(--paper-alt); }
.chapter-deep { background: var(--deep); color: var(--on-deep); }
.chapter-deep .label { color: rgba(255,255,255,0.62); }
.chapter-deep .lede { color: rgba(255,255,255,0.78); }
.chapter-deep .btn { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--deep); }
.chapter-deep .btn:hover { background: transparent; color: var(--accent-deep); }
.chapter-deep .quiet { color: var(--accent-deep); }
[data-theme="b"] .chapter-olive { background: var(--olive); color: #F4EEE6; }
[data-theme="b"] .chapter-olive .label { color: rgba(255,255,255,0.7); }
[data-theme="b"] .chapter-olive .lede { color: rgba(255,255,255,0.82); }

.ch-head { display: flex; align-items: baseline; gap: 1.1rem; margin-bottom: 1.4rem; }
.ch-n {
  font-family: var(--display); font-weight: 700; font-variation-settings: "opsz" 96;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--graphic);
}
/* B numbers the chapters in outline: the editorial tell that separates it from A. */
[data-theme="b"] .ch-n {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--accent);
}
.ch-rule { flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------------- hero */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 8vh 0 6vh; overflow: hidden;
}
.lockup { display: flex; align-items: baseline; justify-content: center; gap: clamp(0.5rem,1.6vw,1.5rem); padding: 0 3vw; }
.lockup .mark {
  font-family: var(--display); font-weight: 700; font-variation-settings: "opsz" 96;
  font-size: clamp(1.3rem, min(7vw, 11vh), 5.6rem); letter-spacing: -0.02em; line-height: 0.72; white-space: nowrap;
}
.lockup .yr {
  font-family: var(--display); font-weight: 900; font-variation-settings: "opsz" 96;
  font-size: clamp(3rem, min(17vw, 28vh), 14rem); line-height: 0.72;
  letter-spacing: -0.065em; font-variant-numeric: tabular-nums;
}
[data-theme="b"] .lockup .yr { color: var(--accent); }
.hero-copy {
  font-family: var(--mono); font-size: clamp(1rem, 2.1vw, 2rem); line-height: 1.35;
  letter-spacing: -0.025em; text-align: center; margin: 6vh auto 0; max-width: 1100px;
  padding: 0 var(--pad); min-height: 3.4em; transition: opacity 0.45s ease;
}
.hero-copy[data-fading="1"] { opacity: 0; }
.hero-copy strong { font-weight: 700; color: var(--accent); }
.after-land { opacity: 0; transform: translateY(14px); transition: opacity .7s ease .15s, transform .7s ease .15s; text-align: center; margin-top: 5vh; }
.landed .after-land { opacity: 1; transform: none; }
.replay { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.replay:hover { color: var(--ink); }

/* ---------------------------------------------------------------- reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.rv.on { opacity: 1; transform: none; }
.rv-2 { transition-delay: .12s; }
.rv-3 { transition-delay: .24s; }

/* ---------------------------------------------------------------- photographs */
figure { margin: 0; }
.photo img { display: block; width: 100%; }
[data-theme="a"] .photo {
  background: var(--doc); padding: 14px 14px 44px;
  box-shadow: 0 1px 0 var(--doc-edge), 0 20px 36px -24px rgba(51,36,27,0.5);
}
[data-theme="a"] .photo figcaption { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-2); margin-top: 12px; text-align: center; }
[data-theme="b"] .photo { border: 1px solid var(--line); padding: 0; }
[data-theme="b"] .photo figcaption { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-2); padding: 0.7rem 0.9rem; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- grids */
.g2 { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 4rem); }
.g2--even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.g2--wide-r { grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); }
.g2--wide-l { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); }
.g2 > * { min-width: 0; }
.g2.mid { align-items: center; }
.g2.top { align-items: start; }
@media (max-width: 880px) { .g2 { grid-template-columns: 1fr; } .g2.mid { align-items: start; } }

/* ---------------------------------------------------------------- the life map */
/* Britain is 1:1.8 and a viewport is landscape, so the country is given the height and
   the labels are laid out either side of it in CSS rather than inside the drawing. */
.mapwrap {
  position: relative; margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
}
.lifemap { grid-column: 2; }
.lifemap { display: block; width: 100%; height: auto; overflow: visible; }

.lifemap-land { fill: var(--land); stroke: var(--land-line); stroke-width: 6; stroke-linejoin: round; }
.lifemap-route {
  fill: none; stroke: var(--graphic); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
}
[data-theme="b"] .lifemap-route { stroke: var(--accent); stroke-width: 10; }
.stop-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 7; opacity: 0; transition: opacity .45s ease, r .45s ease; }
.stop-dot.on { opacity: 1; }
.stop-dot.is-current { fill: var(--accent); stroke: var(--paper); }
.stop-leader { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; transition: opacity .5s ease; }
.stop-leader.on { opacity: 0.6; }

/* One place at a time. Seven labels beside a map of Britain collide, because half a
   British life happens between Manchester and Essex. So the place currently being
   reached announces itself in the column and the rest stay as lit dots; the full list
   sits underneath in text. */
.stop-label {
  position: absolute; width: min(320px, 27%);
  opacity: 0; transform: translateY(-50%) translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.stop-label.side-l { left: 0; text-align: right; }
.stop-label.side-r { right: 0; text-align: left; }
.stop-label.on { opacity: 1; transform: translateY(-50%); }
.stop-label .illo { width: 132px; }
.stop-label .y {
  font-family: var(--display); font-weight: 900; font-variation-settings: "opsz" 96;
  font-size: clamp(1.3rem, 0.9rem + 1.2vw, 2.1rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--accent); display: block;
}
.stop-label .p { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-top: 0.35rem; }
.stop-label .n { font-size: 0.9rem; color: var(--ink-2); display: block; margin-top: 0.25rem; line-height: 1.4; }
.stop-label .illo { width: 96px; height: auto; color: var(--land-line); margin-top: 0.6rem; opacity: 0.85; }
.stop-label.side-l .illo { margin-left: auto; }

/* The same information as text, for anybody the drawing does not reach. */
.map-list { list-style: none; margin: clamp(2rem,1.5rem + 2vw,3rem) 0 0; padding: 0; }
.map-list li { display: grid; grid-template-columns: 5.5rem 10rem 1fr; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.map-list li:last-child { border-bottom: 1px solid var(--line); }
.map-list .y { font-family: var(--display); font-weight: 900; font-variation-settings:"opsz" 96; font-size: 1.35rem; line-height: 1; color: var(--accent); }
.map-list .p { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; }
.map-list .n { color: var(--ink-2); font-size: 0.96rem; }

.demo-flag {
  display: inline-block; font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1.5px solid var(--graphic); color: var(--accent);
  padding: 0.35rem 0.7rem; margin-bottom: 1.2rem;
}
.chapter-deep .demo-flag { border-color: var(--accent-deep); color: var(--accent-deep); }

/* ---------------------------------------------------------------- fragments */
.frag-stage { position: relative; min-height: clamp(380px, 46vw, 560px); margin-top: 2rem; }
.frag {
  position: absolute; max-width: 300px;
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.5;
  background: var(--doc); border: 1px solid var(--doc-edge);
  padding: 0.9rem 1.05rem; border-radius: var(--radius);
  transition: transform .9s cubic-bezier(.22,.8,.3,1), opacity .7s ease;
}
[data-theme="a"] .frag { box-shadow: 0 14px 26px -20px rgba(51,36,27,0.55); }
[data-theme="b"] .frag { box-shadow: none; border-left: 3px solid var(--accent); }
.frag .k { display: block; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.4rem; }
.frag-year { font-family: var(--display); font-weight: 900; font-variation-settings:"opsz" 96; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }

/* ---------------------------------------------------------------- documents */
.docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(1.1rem, 2vw, 1.8rem); margin-top: clamp(1.8rem,1.4rem + 2vw,2.8rem); }
.doc {
  background: var(--doc); border: 1px solid var(--doc-edge); padding: 1.1rem 1.2rem 1.3rem;
  border-radius: var(--radius);
}
[data-theme="a"] .doc { box-shadow: 0 16px 28px -24px rgba(51,36,27,0.5); }
[data-theme="b"] .doc { border-top: 3px solid var(--accent); }
.doc .k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); display: block; margin-bottom: 0.7rem; }
.doc p { margin: 0; font-size: 0.95rem; }
/* Abstracted rules instead of invented handwriting: a shape that reads as a document
   without pretending to be one. */
.doc-rules { display: block; margin-top: 0.9rem; }
.doc-rules span { display: block; height: 1px; background: var(--line); margin-bottom: 0.55rem; }
.doc-rules span:nth-child(2) { width: 88%; }
.doc-rules span:nth-child(3) { width: 94%; }
.doc-rules span:nth-child(4) { width: 62%; }

/* ---------------------------------------------------------------- illustrated places */
.places-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(1.8rem,1.4rem + 2vw,2.8rem); }
.place-card { text-align: center; padding: 1.4rem 1rem 1.2rem; }
[data-theme="a"] .place-card { background: var(--panel); }
[data-theme="b"] .place-card { border: 1px solid var(--line); }
.place-card .illo { width: 100%; max-width: 180px; margin: 0 auto 0.9rem; color: var(--ink); }
[data-theme="b"] .place-card .illo { color: var(--accent); }
.place-card .t { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; }
.place-card .q { font-size: 0.92rem; color: var(--ink-2); margin: 0.5rem 0 0; }

/* ---------------------------------------------------------------- passage resolve */
.resolve { position: relative; min-height: clamp(460px, 52vw, 640px); }
.resolve-frags { position: absolute; inset: 0; }
.resolve-frags .frag { transition: transform 1s cubic-bezier(.22,.8,.3,1), opacity .8s ease; }
.resolve-prose {
  position: relative; max-width: 36ch; margin: 0 auto; padding-top: clamp(2rem,6vw,5rem);
  font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.5rem); line-height: 1.55;
  opacity: 0; transition: opacity 1s ease;
}
.resolve-prose.on { opacity: 1; }
.resolve-prose::first-letter {
  font-family: var(--display); font-weight: 900; font-variation-settings:"opsz" 96;
  float: left; font-size: 3.3em; line-height: 0.76; padding: 0.06em 0.1em 0 0; color: var(--accent);
}

/* ---------------------------------------------------------------- spec + tiers + faq */
.spec { list-style: none; margin: 0; padding: 0; }
.spec li { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--line); }
.spec li:last-child { border-bottom: 1px solid var(--line); }
.spec .k { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.spec .v { font-size: 0.97rem; }
@media (max-width: 620px) { .spec li { grid-template-columns: 1fr; gap: 0.3rem; } .map-list li { grid-template-columns: 4.4rem 1fr; } .map-list .n { grid-column: 1 / -1; } }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: clamp(1.4rem,3vw,2.4rem); margin-top: clamp(2rem,1.4rem + 2vw,3rem); }
.tier { border-top: 2px solid var(--accent); padding-top: 1.1rem; display: flex; flex-direction: column; }
.tier .price { font-family: var(--display); font-weight: 900; font-variation-settings:"opsz" 96; font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em; margin: 0.6rem 0 0.3rem; }
.tier p { color: var(--ink-2); font-size: 0.95rem; }
.tier .cta { margin-top: auto; padding-top: 1.1rem; }

.faq { list-style: none; margin: clamp(1.8rem,1.4rem + 2vw,2.6rem) 0 0; padding: 0; }
.faq li { border-top: 1px solid var(--line); padding: 1.2rem 0; }
.faq li:last-child { border-bottom: 1px solid var(--line); }
.faq h3 { margin: 0 0 0.45rem; font-family: var(--mono); font-size: 0.93rem; font-weight: 700; letter-spacing: -0.01em; }
.faq p { margin: 0; color: var(--ink-2); font-size: 0.96rem; max-width: 70ch; }

/* ---------------------------------------------------------------- nav */
.floatnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-105%); transition: transform .35s ease;
}
.floatnav.on { transform: none; }
.floatnav .in { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding-top: .85rem; padding-bottom: .85rem; }
.floatnav .wm { font-family: var(--display); font-weight: 700; font-size: 1rem; text-decoration: none; }
.floatnav nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.floatnav nav a { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.05em; text-decoration: none; color: var(--ink-2); }
.floatnav nav a:hover { color: var(--accent); }
@media (max-width: 760px) { .floatnav nav { display: none; } }

/* ---------------------------------------------------------------- notes */
.note {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.55; color: var(--ink-2);
  border-left: 2px solid var(--line); padding-left: 0.9rem; max-width: 56ch;
}
.chapter-deep .note { color: rgba(255,255,255,0.68); border-left-color: rgba(255,255,255,0.3); }

/* ---------------------------------------------------------------- mobile map */
@media (max-width: 880px) {
  .mapwrap { display: block; }
  .lifemap { max-height: none; width: 100%; }
  .stop-label { display: none; }          /* labels collapse into the list below */
  .stop-leader { display: none; }
  .mapwrap { margin-left: -6%; margin-right: -6%; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .frag, .resolve-prose, .stop-label, .stop-dot, .stop-leader, .after-land, .hero-copy {
    transition: none !important;
  }
  .rv { opacity: 1; transform: none; }
  .resolve-prose { opacity: 1; }
  .stop-label, .stop-dot { opacity: 1; }
  .stop-leader { opacity: 0.45; }
  .lifemap-route { stroke-dashoffset: 0 !important; }
  .after-land { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- sticky stages */
.map-track { height: 320vh; position: relative; padding: 0 !important; }
.map-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.map-stage .in-wide { width: 100%; }
.map-stage .lifemap { height: 86vh; width: auto; }
.map-stage .mapwrap { margin-top: 0; }

.resolve-track { height: 260vh; position: relative; padding: 0 !important; }
.resolve-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.resolve-stage .in { width: 100%; }

@media (max-width: 880px) {
  /* Sticky stages come off on a phone: the map and the passage become ordinary blocks
     that reveal once, and the list under the map carries the information. */
  .map-track, .resolve-track { height: auto; }
  .map-stage, .resolve-stage { position: static; height: auto; padding: 2rem 0; }
  .map-stage .lifemap { max-height: none; }
  .resolve { min-height: 0; }
  .resolve-frags { position: static; display: grid; gap: 0.8rem; margin-bottom: 2rem; }
  .resolve-frags .frag { position: static; max-width: none; transform: none !important; opacity: 1 !important; }
  .frag-stage { min-height: 0; display: grid; gap: 0.9rem; }
  .frag-stage .frag { position: static; max-width: none; transform: none !important; }
  .resolve-prose { opacity: 1; padding-top: 0; }
}

/* ---------------------------------------------------------------- dark bands, corrected
   A light card sitting inside a dark chapter inherits the chapter's light text and
   becomes unreadable, and an accent picked to work on paper does not automatically
   survive on chocolate or olive. Both were caught by the contrast gate, and both are
   fixed here rather than by nudging a swatch. */
.chapter-deep .doc, .chapter-olive .doc,
.chapter-deep .frag, .chapter-olive .frag { color: var(--ink); }
.chapter-deep .doc .k, .chapter-olive .doc .k,
.chapter-deep .doc p, .chapter-olive .doc p { color: var(--ink-2); }

.chapter-deep .ch-n { color: var(--accent-deep); }
.chapter-deep .tier { border-top-color: var(--accent-deep); }
.chapter-deep .tier p { color: rgba(255,255,255,0.80); }
.chapter-deep .tier .price, .chapter-deep .quiet { color: var(--accent-deep); }
/* A frames a photograph as a print on a light card, so its caption stays dark. B frames
   it with a hairline straight onto the band, so its caption has to go light. */
[data-theme="b"] .chapter-deep .photo figcaption { color: rgba(255,255,255,0.75); }
[data-theme="b"] .chapter-deep .photo { border-color: rgba(255,255,255,0.4); }
[data-theme="b"] .chapter-deep .photo figcaption { border-top-color: rgba(255,255,255,0.4); }
.chapter-deep .spec .k { color: rgba(255,255,255,0.68); }
.chapter-deep .spec li { border-top-color: rgba(255,255,255,0.22); }
.chapter-deep .spec li:last-child { border-bottom-color: rgba(255,255,255,0.22); }

[data-theme="b"] .chapter-olive .ch-n { color: #F4EEE6; -webkit-text-stroke: 1.2px #F4EEE6; }
[data-theme="b"] .chapter-olive .lede { color: #F4EEE6; }
[data-theme="b"] .chapter-olive .note { color: #F4EEE6; border-left-color: rgba(255,255,255,0.4); }
[data-theme="b"] .chapter-olive .photo figcaption { color: #F4EEE6; }
[data-theme="b"] .chapter-olive .photo { border-color: rgba(255,255,255,0.45); }
[data-theme="b"] .chapter-olive .photo figcaption { border-top-color: rgba(255,255,255,0.45); }
[data-theme="b"] .chapter-olive .quiet { color: #F4EEE6; }
[data-theme="b"] .chapter-olive .btn { background: #F4EEE6; border-color: #F4EEE6; color: var(--olive); }
[data-theme="b"] .chapter-olive .btn:hover { background: transparent; color: #F4EEE6; }
[data-theme="b"] .chapter-olive .doc { border-top-color: var(--accent); }

/* ---------------------------------------------------------------- board chrome only */
.mockbar { position: sticky; top: 0; z-index: 50; background: var(--deep); color: var(--on-deep); font-family: var(--mono); font-size: 0.78rem; padding: 0.7rem 0; }
.mockbar .in { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.pills { display: inline-flex; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; overflow: hidden; }
.pills button { font: inherit; background: transparent; color: var(--on-deep); border: 0; padding: 0.35rem 0.95rem; cursor: pointer; letter-spacing: 0.06em; }
.pills button[aria-pressed="true"] { background: var(--on-deep); color: var(--deep); }
.frame-wrap { display: flex; justify-content: center; padding: 0 var(--pad) 3rem; }
.frame-wrap iframe { border: 1px solid var(--line); background: var(--paper); width: 100%; display: block; }
.frame-wrap.is-mobile iframe { width: 390px; height: 780px !important; }