@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&family=JetBrains+Mono:wght@400;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap");

:root {
  --navy: #051427;
  --plate: #f3e600;
  --signal: #ff3b30;
  --electric: #3d5afe;
  --paper: #f7f6f0;
  --white: #ffffff;
  --black: #030405;
  --fog: #a9b0ba;
  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --editorial: "Newsreader", Georgia, serif;
  --product: "Inter Tight", Arial, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html { background: #101010; color: var(--navy); font-family: var(--product); scroll-behavior: smooth; }
body { margin: 0; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-synthesis: none; font-variation-settings: "opsz" 96, "wdth" 76, "wght" 800; }
h1, h2 { letter-spacing: -0.075em; line-height: 0.77; text-transform: uppercase; }
h1 em, h2 em, h3 em { font-family: var(--editorial); font-weight: 500; letter-spacing: -0.05em; text-transform: none; }

.skip-link { background: var(--plate); color: var(--navy); left: 16px; padding: 12px 16px; position: fixed; top: -80px; z-index: 100; }
.skip-link:focus { top: 12px; }

.book-nav {
  align-items: center;
  background: rgba(3, 4, 5, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  display: grid;
  gap: 20px;
  grid-template-columns: auto 1fr auto;
  height: 68px;
  left: 0;
  padding: 0 22px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}
.brand-lockup { align-items: center; color: currentColor; display: inline-flex; gap: .48em; line-height: 1; }
.brand-lockup img { flex: 0 0 auto; height: 1.8em; width: 1.8em; }
.brand-lockup strong { font: 800 1.1em/.85 var(--display); font-variation-settings: "opsz" 24, "wdth" 88, "wght" 800; letter-spacing: -.085em; }
.nav-brand { align-items: center; display: flex; gap: 11px; text-decoration: none; }
.nav-brand .brand-lockup { font-size: 1rem; }
.nav-brand span, .page-count { font: 600 0.65rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.chapter-nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chapter-nav::-webkit-scrollbar { display: none; }
.chapter-nav a { color: #9ca2aa; font: 700 0.66rem/1 var(--product); letter-spacing: 0.04em; padding: 12px 8px; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.chapter-nav a:hover, .chapter-nav a.active { color: var(--plate); }
.nav-actions { align-items: center; display: flex; gap: 8px; }
.pdf-link, .print-button { background: transparent; border: 1px solid #666; color: var(--white); cursor: pointer; font: 800 0.65rem/1 var(--product); letter-spacing: 0.05em; padding: 9px 11px; text-decoration: none; text-transform: uppercase; }
.print-button { background: var(--plate); border-color: var(--plate); color: var(--navy); }
.pdf-link:hover, .print-button:hover { border-color: var(--signal); }
.progress { background: var(--plate); bottom: -1px; height: 3px; left: 0; position: absolute; right: 0; transform: scaleX(0.0833); transform-origin: left; transition: transform 220ms ease; }

.book { padding: 92px 0 64px; }
.spread { aspect-ratio: 16 / 10; background: var(--paper); margin: 0 auto 28px; max-height: 900px; max-width: 1440px; min-height: 660px; overflow: hidden; padding: clamp(34px, 4.4vw, 70px); position: relative; scroll-margin-top: 82px; width: min(1440px, calc(100% - 48px)); }
.spread::after { bottom: 22px; content: attr(data-page); font: 600 0.62rem/1 var(--mono); letter-spacing: 0.05em; position: absolute; right: 26px; z-index: 8; }
.chapter-mark { align-items: center; display: flex; font: 700 0.66rem/1 var(--mono); gap: 9px; letter-spacing: 0.06em; position: relative; text-transform: uppercase; z-index: 8; }
.chapter-mark span { align-items: center; border: 1px solid currentColor; display: inline-flex; height: 25px; justify-content: center; width: 25px; }
.chapter-mark.light { color: var(--white); }
.eyebrow { font: 700 clamp(0.64rem, 0.74vw, 0.76rem)/1.35 var(--mono); letter-spacing: 0.065em; margin: 0 0 16px; text-transform: uppercase; }
.eyebrow.light { color: var(--plate); }

/* 01 / COVER */
.cover { background: var(--black); color: var(--white); padding: 34px 42px 28px; }
.cover::after { color: var(--plate); }
.cover-image { height: 100%; inset: 0 0 0 31%; max-width: none; object-fit: cover; object-position: 56% center; position: absolute; width: 69%; }
.cover-wash { background: linear-gradient(90deg, var(--black) 0 28%, rgba(3,4,5,.93) 39%, rgba(3,4,5,.32) 68%, rgba(3,4,5,.05)); inset: 0; position: absolute; }
.cover-wash::after { background: var(--plate); clip-path: polygon(0 0, 70% 0, 100% 100%, 28% 100%); content: ""; height: 100%; left: 13%; mix-blend-mode: multiply; opacity: .12; position: absolute; width: 20%; }
.cover-top { align-items: flex-start; display: flex; justify-content: space-between; position: relative; z-index: 5; }
.cover-logo { color: var(--white); font-size: clamp(1.15rem, 1.8vw, 1.75rem); }
.cover-top p { font: 600 .62rem/1.55 var(--mono); letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.cover-kicker { font: 700 .68rem/1.3 var(--mono); left: 43px; letter-spacing: .06em; position: absolute; text-transform: uppercase; top: 18%; z-index: 5; }
.cover h1 { font-size: clamp(5rem, 10.4vw, 10.8rem); left: 3%; margin: 0; position: absolute; top: 27%; z-index: 5; }
.cover h1 span, .cover h1 em { display: table; white-space: nowrap; }
.cover h1 span:nth-child(2) { background: var(--plate); color: var(--navy); line-height: .72; padding: 0 .04em .03em; }
.cover h1 em { color: var(--white); font-size: .7em; line-height: .8; margin-left: 18%; }
.cover h1 span:nth-child(4) { color: var(--plate); margin-left: 12%; }
.cover-key { align-items: center; background: var(--navy); display: flex; gap: 10px; padding: 7px 18px 7px 7px; position: absolute; right: 0; top: 20%; z-index: 5; }
.cover-key img { height: 42px; width: 42px; }.cover-key b { font: 700 .58rem/1 var(--mono); letter-spacing: .06em; }
.cover-plate { align-items: center; background: var(--plate); bottom: 28px; color: var(--navy); display: flex; height: 52px; justify-content: space-between; padding: 0 18px; position: absolute; right: 8%; width: 30%; z-index: 5; }
.cover-plate span { font: 900 1.5rem/1 var(--display); letter-spacing: .05em; }.cover-plate b { font: 700 .57rem/1 var(--mono); }
.proofframe { clip-path: polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); }
.proofframe::before { background: currentColor; content: ""; height: 3px; left: 0; opacity: .92; position: absolute; top: 0; width: 28%; }
.poster-reg.proofframe,.report-reg.proofframe { position: relative; }
.cover-foot { bottom: 33px; font: 600 .62rem/1.4 var(--mono); left: 42px; margin: 0; position: absolute; text-transform: uppercase; width: 25%; z-index: 5; }

/* 02 / IDEA */
.idea { background: var(--plate); padding: 38px 4.5% 34px; }
.idea-yellow { background: var(--signal); bottom: 0; clip-path: polygon(18% 0,100% 0,100% 100%,0 100%); position: absolute; right: 0; top: 72%; width: 46%; }
.idea-main { left: 4.5%; position: absolute; top: 18%; z-index: 3; }
.idea h2 { font-size: clamp(5.7rem, 11vw, 11rem); margin: 0; }
.idea h2 em { color: var(--electric); display: inline-block; font-size: .74em; margin-left: .55em; transform: rotate(-3deg); }
.idea-manifesto { background: var(--white); border-left: 10px solid var(--navy); bottom: 9%; padding: 2.6% 3%; position: absolute; right: 4.5%; top: 16%; width: 42%; z-index: 4; }
.idea-manifesto::before { background: var(--navy); color: var(--white); content: "POSITION / 01"; font: 700 .58rem/1 var(--mono); left: -10px; padding: 9px 12px; position: absolute; top: -29px; }
.manifesto-lead { font: 500 clamp(1.35rem, 2.15vw, 2.2rem)/1.05 var(--editorial); letter-spacing: -.025em; }
.idea-manifesto > p:nth-child(2) { font-size: clamp(.78rem, 1vw, 1rem); line-height: 1.55; }
.idea-manifesto dl { bottom: 4%; left: 7%; margin: 0; position: absolute; right: 7%; }
.idea-manifesto dl div { border-top: 1px solid var(--navy); display: grid; font-size: clamp(.66rem, .8vw, .82rem); gap: 12px; grid-template-columns: 85px 1fr; padding: 10px 0; }
.idea-manifesto dt { font: 700 .62rem/1.4 var(--mono); }.idea-manifesto dd { margin: 0; }
.idea-margin { bottom: 4%; color: var(--white); font: 600 .68rem/1 var(--mono); left: 4.5%; margin: 0; position: absolute; transform: rotate(-90deg); transform-origin: left bottom; z-index: 5; }.idea-margin b { color: var(--plate); }

/* 03 / JOURNEY */
.journey { background: var(--navy); color: var(--white); padding: 38px 4.5% 34px; }
.journey::after { color: var(--plate); }
.journey-head { left: 4.5%; position: absolute; top: 15%; z-index: 2; }
.journey h2 { font-size: clamp(4.7rem, 9vw, 9rem); margin: 0; }
.journey h2 em { color: var(--plate); display: inline-block; margin-left: .35em; }
.journey-sequence { bottom: 10%; display: grid; grid-template-columns: 1.05fr .85fr 1.18fr; left: 38%; list-style: none; margin: 0; padding: 0; position: absolute; right: 0; top: 19%; z-index: 3; }
.moment { color: var(--navy); overflow: hidden; padding: 5% 7%; position: relative; }
.moment.desire { background: var(--plate); margin-top: 18%; }.moment.doubt { background: var(--paper); margin-bottom: 15%; }.moment.decision { background: var(--electric); color: var(--white); margin-top: 8%; }
.stage-num { color: currentColor; font: 900 clamp(7rem, 12vw, 12rem)/.7 var(--display); opacity: .14; position: absolute; right: -5%; top: 2%; }
.stage-label { font: 700 .62rem/1 var(--mono); letter-spacing: .05em; position: relative; }
.moment h3 { font: 500 clamp(1.7rem, 3vw, 3rem)/.95 var(--editorial); letter-spacing: -.04em; margin: 38% 0 8%; position: relative; }
.moment > p:last-child { font-size: clamp(.68rem, .82vw, .84rem); line-height: 1.45; position: relative; }
.journey-track { align-items: center; bottom: 5%; display: flex; left: 38%; position: absolute; right: 4%; }.journey-track span { background: var(--plate); height: 2px; position: absolute; width: 100%; }.journey-track b { background: var(--navy); border: 6px solid var(--plate); border-radius: 50%; height: 20px; margin-right: 30%; position: relative; width: 20px; }.journey-track b:last-child { margin-right: 0; }
.journey-rule { bottom: 4.5%; font: 600 .6rem/1.3 var(--mono); left: 4.5%; margin: 0; position: absolute; width: 28%; }.journey-rule b { color: var(--plate); }

/* 04 / LOGO */
.logo-page { background: var(--paper); padding: 38px 4.5% 34px; }
.logo-copy { left: 4.5%; position: absolute; top: 17%; z-index: 4; }.logo-copy h2 { font-size: clamp(4.6rem, 8vw, 8.2rem); margin: 0; }.logo-copy em { color: var(--signal); }
.logo-stage { background: var(--navy); bottom: 15%; color: var(--white); left: 36%; position: absolute; right: 0; top: 20%; }
.logo-stage::before { background: repeating-linear-gradient(90deg,rgba(243,230,0,.16) 0 1px,transparent 1px 32px); content: ""; inset: 0; position: absolute; }
.proofkey-stage { left: -10%; position: absolute; top: 8%; width: 28%; z-index: 3; }.proofkey-stage img { width: 100%; }.proofkey-stage span { background: var(--signal); display: table; font: 700 .55rem/1 var(--mono); margin-left: 16%; padding: 8px 10px; }
.logo-giant { background: var(--paper); color: var(--navy); font-size: clamp(2.6rem,5.3vw,5.5rem); left: 15%; padding: 2.8% 4%; position: absolute; right: 6%; top: 16%; z-index: 2; }.logo-giant img { height: 1.35em; width: 1.35em; }
.mark-story { bottom: 18%; font: 500 clamp(.95rem,1.38vw,1.4rem)/1.25 var(--editorial); left: 18%; letter-spacing: -.02em; position: absolute; width: 57%; z-index: 2; }
.checksum { align-items: center; bottom: 7%; display: flex; gap: 5px; left: 18%; position: absolute; z-index: 2; }.checksum i { background: var(--plate); height: 11px; width: 18px; }.checksum i:nth-child(2) { background: transparent; border: 2px solid var(--plate); }.checksum i:nth-child(3) { background: var(--signal); clip-path: polygon(0 0,100% 0,100% 55%,65% 100%,0 100%); }.checksum b { font: 600 .5rem/1 var(--mono); margin-left: 8px; }
.logo-rules { bottom: 4%; display: grid; grid-template-columns: repeat(4,1fr); left: 4.5%; position: absolute; right: 4.5%; }.logo-rules div { border-left: 1px solid var(--navy); display: grid; gap: 8px; grid-template-columns: 28px 1fr; min-height: 70px; padding: 8px 14px; }.logo-rules b { color: var(--signal); font: 700 .66rem/1 var(--mono); }.logo-rules span { font-size: clamp(.62rem,.72vw,.74rem); line-height: 1.4; }

/* 05 / COLOUR */
.colour-page { background: var(--plate); padding: 38px 4.5% 34px; }
.colour-head { left: 4.5%; position: absolute; top: 16%; width: 38%; }.colour-head h2 { font-size: clamp(5rem, 9.4vw, 9.7rem); margin: 0; }.colour-head em { color: var(--signal); display: inline-block; transform: rotate(-4deg); }
.swatch-field { bottom: 0; display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1.05fr .82fr .82fr; position: absolute; right: 0; top: 0; width: 58%; }
.swatch { border: 0; cursor: pointer; display: flex; flex-direction: column; padding: 7%; position: relative; text-align: left; }
.swatch span { font: 700 .62rem/1 var(--mono); letter-spacing: .05em; }.swatch b { font: 900 clamp(2rem, 3.8vw, 4rem)/.8 var(--display); margin-top: auto; }.swatch small { font: 600 .58rem/1.35 var(--mono); margin-top: 8px; text-transform: uppercase; }
.swatch.plate { background: transparent; border: 1px solid var(--navy); grid-row: 1 / 3; }.swatch.midnight { background: var(--navy); color: var(--white); }.swatch.signal { background: var(--signal); color: var(--white); }.swatch.electric { background: var(--electric); color: var(--white); }.swatch.white { background: var(--paper); }
.swatch:hover { outline: 4px solid var(--white); outline-offset: -4px; z-index: 2; }
.colour-rule { bottom: 4%; font-size: clamp(.68rem,.78vw,.8rem); left: 4.5%; line-height: 1.45; margin: 0; position: absolute; width: 34%; }.colour-rule b { display: block; font: 900 1.8rem/1 var(--display); margin-bottom: 8px; }

/* 06 / TYPE */
.type-page { background: var(--navy); color: var(--white); padding: 38px 4.5% 34px; }
.type-page::after { color: var(--plate); }.type-hero { color: var(--plate); font-size: clamp(6rem, 11.8vw, 12rem); left: -1%; margin: 0; position: absolute; top: 5%; white-space: nowrap; }.type-hero span { display: block; }.type-hero span:last-child { color: transparent; -webkit-text-stroke: 2px var(--white); margin-left: 9%; }
.specimen { overflow: hidden; padding: 1.8%; position: absolute; }.specimen p { font: 700 .55rem/1 var(--mono); letter-spacing: .04em; margin-bottom: 12px; }.specimen small { bottom: 7%; font: 600 .54rem/1.35 var(--mono); left: 7%; position: absolute; right: 7%; text-transform: uppercase; }
.type-display { background: var(--plate); color: var(--navy); height: 47%; left: 4.5%; top: 45%; width: 28%; }.type-display strong { font: 800 clamp(3rem, 5.4vw, 5.5rem)/.74 var(--display); font-variation-settings: "opsz" 96,"wdth" 75,"wght" 800; letter-spacing: -.075em; }
.type-editorial { background: var(--paper); color: var(--navy); height: 35%; left: 31%; top: 31%; transform: rotate(-2deg); width: 25%; z-index: 3; }.type-editorial strong { display: block; font: 500 clamp(1.6rem, 2.6vw, 2.7rem)/.95 var(--editorial); letter-spacing: -.04em; }
.type-product { background: var(--electric); color: var(--white); height: 30%; right: 4.5%; top: 37%; width: 31%; }.type-product strong { display: block; font: 700 clamp(1.2rem, 2vw, 2rem)/1 var(--product); margin: 12% 0 8px; }.type-product span { font: 500 clamp(.7rem,.8vw,.82rem)/1.4 var(--product); }
.type-mono { background: var(--signal); bottom: 8%; color: var(--white); height: 29%; right: 10%; transform: rotate(2deg); width: 34%; z-index: 4; }.type-mono strong { font: 700 clamp(.75rem,1.2vw,1.22rem)/1.6 var(--mono); }

/* 07 / GRAPHICS */
.graphics-page { background: var(--black); color: var(--white); padding: 38px 4.5% 34px; }
.graphics-page::after { color: var(--plate); }.graphics-image { filter: contrast(1.12) saturate(.75); height: 100%; inset: 0; max-width: none; object-fit: cover; object-position: center; position: absolute; width: 100%; }.graphics-page::before { background: linear-gradient(90deg, rgba(3,4,5,.92), rgba(3,4,5,.25) 62%, rgba(3,4,5,.62)); content: ""; inset: 0; position: absolute; z-index: 1; }
.graphics-page .chapter-mark, .graphics-head, .evidence-plate, .evidence-note, .proofline, .data-texture, .graphic-key { z-index: 3; }
.graphics-head { left: 4.5%; position: absolute; top: 17%; }.graphics-head h2 { font-size: clamp(5.4rem, 10vw, 10.2rem); margin: 0; }
.data-texture { color: rgba(255,255,255,.28); font: 600 .54rem/1 var(--mono); left: 34%; letter-spacing: .04em; overflow: hidden; position: absolute; right: 0; top: 7%; white-space: nowrap; }
.evidence-plate { align-items: end; background: var(--plate); color: var(--navy); display: grid; gap: 8px; grid-template-columns: .72fr 1.45fr .8fr; height: 74px; padding: 14px 25px 12px 18px; position: absolute; right: 4%; top: 10%; width: 34%; }.evidence-plate small { font: 700 .48rem/1 var(--mono); }.evidence-plate span { font: 800 1.9rem/.8 var(--display); font-variation-settings: "opsz" 48,"wdth" 80,"wght" 800; letter-spacing: -.02em; }.evidence-plate b { font: 700 .55rem/1 var(--mono); text-align: right; }
.evidence-note { align-items: stretch; color: var(--white); display: flex; position: absolute; }.evidence-note::before { background: currentColor; content: ""; height: 1px; position: absolute; right: 100%; top: 18px; width: 96px; }.evidence-note::after { background: currentColor; content: ""; height: 7px; position: absolute; right: calc(100% + 92px); top: 15px; width: 7px; }.evidence-note i { align-items: center; background: var(--signal); display: flex; font: 700 .58rem/1 var(--mono); font-style: normal; justify-content: center; width: 34px; }.evidence-note span { background: rgba(5,20,39,.94); border: 1px solid currentColor; font: 600 .55rem/1.35 var(--mono); padding: 8px 12px; white-space: nowrap; }.evidence-note span b { color: var(--plate); }.note-one { left: 58%; top: 50%; }.note-two { color: var(--plate); right: 6%; top: 34%; }.note-two i { background: var(--plate); color: var(--navy); }.note-two span b { color: var(--white); }
.proofline { align-items: stretch; bottom: 15%; display: grid; grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr; left: 34%; position: absolute; right: 4%; }.proofline span { background: rgba(5,20,39,.92); border-top: 3px solid var(--white); font: 700 .6rem/1 var(--mono); padding: 10px; }.proofline span em { display: block; font-size: .46rem; font-style: normal; margin-top: 6px; opacity: .72; }.proofline span.flagged { background: var(--signal); border-color: var(--signal); clip-path: polygon(0 0,100% 0,100% 72%,85% 100%,0 100%); }.proofline b { align-self: center; background: var(--white); height: 1px; }
.graphic-key { background: var(--paper); bottom: 0; color: var(--navy); display: grid; grid-template-columns: repeat(4,1fr); left: 0; margin: 0; position: absolute; right: 0; }.graphic-key div { border-right: 1px solid var(--navy); padding: 15px 18px; }.graphic-key dt { color: var(--signal); font: 700 .58rem/1 var(--mono); }.graphic-key dd { font-size: clamp(.6rem,.7vw,.72rem); margin: 7px 0 0; }

/* 08 / IMAGE */
.image-page { background: var(--paper); padding: 38px 4.5% 34px; }.image-page h2 { font-size: clamp(5rem, 9.4vw, 9.8rem); left: 3.8%; margin: 0; position: absolute; top: 14%; z-index: 5; }.image-page h2 span,.image-page h2 em { display: table; }.image-page h2 span:nth-child(2) { margin-left: 13%; }.image-page h2 em { color: var(--signal); margin-left: 5%; }
.image-frame { margin: 0; overflow: hidden; position: absolute; }.image-frame img { height: 100%; max-width: none; object-fit: cover; width: 100%; }.image-frame figcaption { background: var(--plate); bottom: 0; color: var(--navy); font: 700 .57rem/1 var(--mono); left: 0; padding: 9px 11px; position: absolute; }
.image-one { bottom: 0; height: 64%; right: 0; width: 53%; }.image-one img { object-position: 58% center; }.image-two { bottom: 7%; height: 34%; left: 28%; transform: rotate(-2deg); width: 30%; z-index: 4; }.image-three { height: 30%; right: 28%; top: 9%; transform: rotate(2deg); width: 25%; z-index: 4; }
.image-rules { bottom: 5%; font-size: clamp(.65rem,.76vw,.78rem); left: 4.5%; line-height: 1.4; position: absolute; width: 20%; }.image-rules p { border-top: 2px solid var(--navy); padding-top: 9px; }.image-rules b { color: var(--signal); font: 700 .6rem/1 var(--mono); }

/* 09 / VOICE */
.voice-page { background: var(--signal); color: var(--white); padding: 38px 4.5% 34px; }.voice-page::after { color: var(--plate); }.voice-head { left: 4.5%; position: absolute; top: 16%; }.voice-head h2 { font-size: clamp(5.2rem, 10vw, 10.2rem); margin: 0; }.voice-head em { color: var(--plate); display: inline-block; margin-left: .45em; transform: rotate(-4deg); }
.voice-spectrum { display: grid; grid-template-columns: 1fr 1fr; position: absolute; right: 4%; top: 13%; width: 38%; }.voice-spectrum div { border: 1px solid var(--white); min-height: 82px; padding: 14px; }.voice-spectrum span { display: block; font: 900 clamp(1.2rem,2vw,2rem)/.9 var(--display); }.voice-spectrum b { font: 500 .62rem/1.3 var(--editorial); }
.voice-examples { bottom: 9%; display: grid; grid-template-columns: 1.1fr .9fr; left: 35%; position: absolute; right: 4%; }.voice-examples article { min-height: 200px; padding: 3%; }.voice-examples article > p:first-child { font: 700 .58rem/1 var(--mono); }.voice-examples h3 { font: 500 clamp(1.7rem,2.8vw,2.9rem)/.95 var(--editorial); letter-spacing: -.045em; }.voice-examples article > p:last-child { font-size: clamp(.68rem,.8vw,.82rem); line-height: 1.45; }.voice-do { background: var(--plate); color: var(--navy); }.voice-dont { background: var(--navy); color: var(--white); }.voice-dont h3 { text-decoration: line-through; text-decoration-color: var(--signal); text-decoration-thickness: 4px; }
.voice-rule { bottom: 4%; font: 600 .62rem/1 var(--mono); left: 4.5%; margin: 0; position: absolute; }.voice-rule b { color: var(--plate); }

/* 10 / CAMPAIGN */
.campaign-page { background: var(--plate); padding: 38px 4.5% 34px; }.campaign-head { left: 4.5%; position: absolute; top: 16%; }.campaign-head h2 { font-size: clamp(4.8rem,8vw,8.4rem); margin: 0; }.campaign-head em { color: var(--signal); margin-left: .35em; }
.campaign-grid { bottom: 10%; display: grid; grid-template-columns: .92fr 1fr .88fr; left: 37%; position: absolute; right: 2.5%; top: 11%; }.poster { box-shadow: 10px 12px 0 rgba(5,20,39,.18); overflow: hidden; padding: 7%; position: relative; }.poster img { height: 100%; inset: 0; max-width: none; object-fit: cover; position: absolute; width: 100%; }.poster::after { content:"";inset:0;position:absolute }.poster > *:not(img) { position: relative; z-index: 2; }.poster-tag { font: 700 .55rem/1 var(--mono); letter-spacing: .04em; }.poster h3 { font-size: clamp(2.7rem,4.6vw,4.8rem); letter-spacing: -.055em; line-height: .72; margin: 38% 0 0; text-transform: uppercase; }.poster h3 b { color: var(--plate); font-weight: 900; }.poster p { font: 600 .58rem/1.35 var(--mono); }
.poster-a { color: var(--white); margin: 14% -4% 2% 0; transform: rotate(-3deg); z-index: 3; }.poster-a::after { background: linear-gradient(0deg,rgba(3,4,5,.8),rgba(3,4,5,.05) 75%); }.poster-a p { bottom: 6%; position: absolute !important; }.poster-b { background: var(--paper); color: var(--navy); margin-bottom: 8%; padding-top: 7%; }.poster-key { align-items: center; display: flex; gap: 8px; margin-top: 7%; }.poster-key img { height: 29px; position: static; width: 29px; }.poster-key b { font: 700 .48rem/1 var(--mono); }.poster-b .poster-reg { background: var(--plate); color: var(--navy); font: 800 1.9rem/1 var(--display); letter-spacing: .01em; margin: 8% -10% 0; padding: 10px 10%; }.poster-b h3 { font-size: clamp(2.2rem,3.4vw,3.5rem); margin-top: 15%; }.poster-b h3 b { color: var(--signal); }.poster-b ul { border-top: 1px solid var(--navy); bottom: 7%; font: 600 .55rem/1.8 var(--mono); left: 7%; list-style: none; padding: 8px 0 0; position: absolute; right: 7%; }.poster-b li { align-items: center; display: flex; gap: 7px; }.poster-b li i { background: var(--navy); display: inline-block; height: 5px; width: 10px; }.poster-b li:first-child i { background: var(--signal); }.poster-c { color: var(--white); margin: 7% 0 0 -4%; transform: rotate(3deg); z-index: 4; }.poster-c::after { background: linear-gradient(0deg,rgba(61,90,254,.78),rgba(5,20,39,.05)); mix-blend-mode: multiply; }.poster-c h3 { margin-top: 48%; }.poster-c button { background: var(--plate); border: 0; bottom: 6%; color: var(--navy); font: 800 .62rem/1 var(--product); left: 7%; padding: 11px 14px; position: absolute !important; }
.campaign-anatomy { bottom: 4%; display: flex; font: 600 .58rem/1 var(--mono); gap: 24px; left: 4.5%; position: absolute; }.campaign-anatomy b { color: var(--signal); }

/* 11 / DIGITAL */
.digital-page { background: var(--paper); color: var(--navy); padding: 38px 4.5% 34px; }.digital-page::after { color: var(--signal); }.digital-head { left: 4.5%; position: absolute; top: 16%; z-index: 3; }.digital-head h2 { color: var(--navy); font-size: clamp(4.2rem,7.8vw,8rem); margin: 0; }.digital-head em { color: var(--signal); display: inline-block; font-size: .72em; line-height: .88; }
.digital-shell { bottom: 8%; border: 1px solid var(--navy); display: grid; grid-template-columns: 1.1fr .9fr; height: 72%; position: absolute; right: 3%; top: 10%; width: 60%; z-index: 4; }.check-entry { background: var(--white); color: var(--navy); padding: 5%; }.demo-nav { align-items: center; border-bottom: 1px solid var(--navy); display: flex; justify-content: space-between; padding-bottom: 10px; }.demo-nav .brand-lockup { font-size: .75rem; }.demo-nav > span:last-child,.demo-label,.demo-fine { font: 600 .54rem/1.35 var(--mono); }.demo-label { color: var(--electric); margin-top: 16%; }.check-entry h3 { font-size: clamp(2.8rem,4.6vw,4.8rem); letter-spacing: -.075em; line-height: .76; margin-bottom: 12%; }.check-entry label { display: block; font: 700 .56rem/1 var(--mono); margin-bottom: 7px; text-transform: uppercase; }.check-entry form div { display: grid; grid-template-columns: 1fr auto; }.check-entry input { background: var(--paper); border: 1px solid var(--navy); font: 700 1rem/1 var(--mono); min-width: 0; padding: 13px; }.check-entry button,.report-demo button { background: var(--plate); border: 1px solid var(--navy); cursor: pointer; font: 800 .66rem/1 var(--product); padding: 13px 17px; }.demo-fine { bottom: 5%; position: absolute; }
.report-demo { background: var(--navy); color: var(--white); margin-top: 10%; padding: 8%; position: relative; }.report-top { align-items: center; display: flex; font: 600 .49rem/1 var(--mono); justify-content: space-between; }.report-top b { background: var(--signal); padding: 6px; }.report-reg { background: var(--plate); color: var(--navy); font: 800 1.7rem/1 var(--display); letter-spacing: .01em; margin: 15% -10% 8%; padding: 10px 10%; }.report-demo h3 { font: 500 clamp(1.4rem,2.1vw,2.2rem)/.98 var(--editorial); letter-spacing: -.04em; }.report-demo dl div { border-top: 1px solid rgba(255,255,255,.55); display: flex; font-size: .66rem; justify-content: space-between; padding: 9px 0; }.report-demo dd { color: var(--plate); margin: 0; }.report-demo dd.review { color: var(--white); }.report-demo button { bottom: 6%; left: 8%; position: absolute; right: 8%; width: 84%; }
.digital-rule { bottom: 4%; color: var(--navy); font-size: clamp(.64rem,.73vw,.75rem); left: 4.5%; line-height: 1.4; margin: 0; position: absolute; width: 28%; }

/* 12 / RULES */
.rules-page { background: var(--paper); display: grid; grid-template-columns: 1.22fr .78fr; padding: 0; }.rules-page::after { display: none; }.rules-main { padding: 7%; }.rules-main header { margin-top: 7%; }.rules-main h2 { color: var(--navy); font-size: clamp(4.8rem,8vw,8.2rem); margin: 0; }
.volume-ladder { border-bottom: 1px solid var(--navy); border-top: 1px solid var(--navy); display: grid; grid-template-columns: repeat(3,1fr); margin-top: 4%; }.volume-ladder span { border-right: 1px solid var(--navy); font: 600 .52rem/1 var(--mono); padding: 9px 9px 10px; }.volume-ladder span:last-child { border: 0; }.volume-ladder b { color: var(--signal); margin-right: 7px; }.volume-ladder strong { display: block; font: 800 clamp(1rem,1.65vw,1.7rem)/.9 var(--display); margin-top: 9px; }
.do-dont { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4%; }.do-dont section { border-right: 1px solid var(--navy); padding: 10px 18px 0 0; }.do-dont section:last-child { border-right: 0; padding-left: 18px; }.do-dont h3 { font: 500 clamp(1.6rem,2.4vw,2.5rem)/1 var(--editorial); margin-bottom: 5px; }.do-dont section:first-child h3 { color: var(--electric); }.do-dont section:last-child h3 { color: var(--signal); }.do-dont ul { font-size: clamp(.62rem,.7vw,.72rem); line-height: 1.5; list-style: "→  "; padding-left: 17px; }
.closing-panel { background: var(--plate); color: var(--navy); display: flex; flex-direction: column; overflow: hidden; padding: 7%; position: relative; }.closing-panel::before { color: rgba(5,20,39,.09); content: "03"; font: 800 31rem/.7 var(--display); left: -7%; position: absolute; top: 13%; }.closing-panel > .brand-lockup { font-size: clamp(1.6rem,2.6vw,2.7rem); position: relative; }.closing-panel > p { font: 700 .6rem/1.35 var(--mono); margin: auto 0 12px; position: relative; }.closing-panel h3 { font-size: clamp(2.8rem,4.6vw,4.9rem); line-height: .77; margin: 0; position: relative; text-transform: uppercase; }.closing-panel h3 em { color: var(--signal); display: inline-block; transform: rotate(-3deg); }.closing-panel > div { border-top: 1px solid var(--navy); display: flex; font: 600 .56rem/1 var(--mono); justify-content: space-between; margin-top: 13%; padding-top: 12px; position: relative; }

.copy-toast { background: var(--plate); bottom: 24px; color: var(--navy); font: 700 .7rem/1 var(--mono); left: 50%; opacity: 0; padding: 12px 16px; pointer-events: none; position: fixed; transform: translate(-50%,16px); transition: 180ms ease; z-index: 90; }.copy-toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 900px) {
  .book-nav { gap: 12px; grid-template-columns: auto 1fr auto; height: 64px; padding: 0 14px; }.nav-brand > span:last-child,.page-count { display: none; }.nav-brand .brand-lockup { font-size: .86rem; }.chapter-nav { grid-column: 2; grid-row: 1; }.pdf-link { background: var(--plate); border-color: var(--plate); color: var(--navy); display: inline-block; }.print-button { display: none; }.book { padding-top: 82px; }
  .spread { aspect-ratio: auto; margin-bottom: 16px; min-height: 920px; padding: 28px; width: calc(100% - 24px); }
  .cover { padding: 24px; }.cover-image { inset: 33% 0 0 0; height: 67%; width: 100%; }.cover-wash { background: linear-gradient(180deg,var(--black) 0 28%,rgba(3,4,5,.75) 60%,rgba(3,4,5,.15)); }.cover-top p { font-size: .5rem; }.cover-kicker { left: 24px; top: 15%; }.cover h1 { font-size: clamp(4.5rem,15vw,7rem); left: 20px; top: 23%; }.cover h1 em { margin-left: 8%; }.cover h1 span:nth-child(4) { margin-left: 2%; }.cover-key { top: 14%; }.cover-key b { display: none; }.cover-plate { bottom: 24px; right: 24px; width: 62%; }.cover-foot { bottom: 28px; left: 24px; width: 30%; }
  .idea-main { left: 28px; top: 12%; }.idea h2 { font-size: 6.3rem; }.idea-manifesto { bottom: 7%; left: 19%; right: 0; top: 45%; width: auto; }.idea-margin { display: none; }
  .journey-head { left: 28px; top: 11%; }.journey h2 { font-size: 5.6rem; }.journey-sequence { bottom: 8%; grid-template-columns: 1fr; left: 32%; right: 0; top: 39%; }.moment { padding: 12px 18px; }.moment.desire,.moment.doubt,.moment.decision { margin: 0; }.moment h3 { font-size: 1.9rem; margin: 6px 0; }.stage-num { font-size: 5rem; }.journey-track { display: none; }.journey-rule { bottom: 3%; left: 28px; width: 24%; }
  .logo-copy { left: 28px; top: 10%; }.logo-copy h2 { font-size: 4.6rem; }.logo-stage { bottom: 24%; left: 18%; top: 34%; }.proofkey-stage { left: -13%; width: 30%; }.logo-giant { font-size: 3.7rem; left: 15%; }.mark-story { bottom: 20%; font-size: 1rem; left: 18%; width: 68%; }.logo-rules { bottom: 3%; grid-template-columns: 1fr 1fr; left: 28px; right: 28px; }.logo-rules div { min-height: 62px; }
  .colour-head { left: 28px; top: 10%; }.colour-head h2 { font-size: 5.6rem; }.swatch-field { bottom: 0; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3,1fr); top: 38%; width: 100%; }.swatch.plate { grid-row: auto; }.colour-rule { bottom: auto; left: auto; right: 20px; top: 16%; width: 38%; }
  .type-hero { font-size: 8.2rem; top: 7%; }.type-display { height: 39%; left: 28px; top: 33%; width: 46%; }.type-editorial { height: 28%; left: 44%; top: 28%; width: 48%; }.type-product { height: 23%; bottom: 7%; left: 28px; right: auto; top: auto; width: 46%; }.type-mono { bottom: 5%; height: 28%; right: 28px; width: 48%; }
  .graphics-head { left: 28px; top: 12%; }.graphics-head h2 { font-size: 5.8rem; }.evidence-plate { right: 0; top: 7%; width: 50%; }.note-one { left: 48%; top: 54%; }.note-two { right: 6%; top: 38%; }.proofline { bottom: 20%; left: 14%; }.graphic-key { grid-template-columns: 1fr 1fr; }.graphic-key div { padding: 12px; }
  .image-page h2 { font-size: 5.7rem; left: 28px; top: 11%; }.image-one { height: 52%; width: 70%; }.image-two { bottom: 8%; left: 14%; width: 42%; }.image-three { right: 7%; top: 36%; width: 42%; }.image-rules { left: 28px; top: 42%; width: 25%; }
  .voice-head { left: 28px; top: 10%; }.voice-head h2 { font-size: 5.4rem; }.voice-spectrum { right: 0; top: 8%; width: 44%; }.voice-examples { bottom: 9%; grid-template-columns: 1fr; left: 28%; right: 0; }.voice-examples article { min-height: 180px; }.voice-rule { left: 28px; width: 20%; }
  .campaign-head { left: 28px; top: 9%; }.campaign-head h2 { font-size: 5.3rem; }.campaign-grid { bottom: 9%; grid-template-columns: 1fr 1fr; left: 29%; top: 30%; }.poster-c { display: none; }.campaign-anatomy { bottom: 3%; flex-direction: column; gap: 5px; left: 28px; width: 22%; }
  .digital-head { left: 28px; top: 9%; }.digital-head h2 { font-size: 4.8rem; }.digital-shell { bottom: 6%; height: 59%; right: 0; top: auto; width: 72%; }.report-demo { margin-top: 18%; }.digital-rule { bottom: 4%; left: 28px; width: 23%; }
  .rules-page { grid-template-columns: 1fr; min-height: 1120px; }.rules-main { padding: 28px; }.rules-main h2 { font-size: 5rem; }.closing-panel { min-height: 420px; padding: 28px; }.closing-panel > .brand-lockup { font-size: 2rem; }.closing-panel::before { font-size: 22rem; }
}

@media (max-width: 560px) {
  .book-nav { grid-template-columns: auto 1fr auto; }.chapter-nav { display: none; }.spread { min-height: 880px; }
  .cover h1 { font-size: 4.6rem; top: 25%; }.cover-key img { height: 34px; width: 34px; }.cover-plate { width: 72%; }.cover-foot { font-size: .5rem; }
  .idea h2 { font-size: 5.4rem; }.idea-manifesto { left: 12%; padding: 28px 22px; }.manifesto-lead { font-size: 1.35rem; }.idea-manifesto dl { left: 22px; right: 22px; }
  .journey h2 { font-size: 4.8rem; }.journey-sequence { left: 24%; top: 38%; }.moment > p:last-child { font-size: .68rem; }.journey-rule { font-size: .5rem; width: 20%; }
  .logo-copy h2 { font-size: 4rem; }.logo-stage { left: 12%; top: 36%; }.proofkey-stage { left: -8%; top: 6%; width: 28%; }.logo-giant { font-size: 2.6rem; left: 13%; top: 20%; }.mark-story { bottom: 22%; font-size: .86rem; left: 14%; width: 74%; }.checksum { bottom: 8%; left: 14%; }.checksum b { display: none; }.logo-rules { grid-template-columns: 1fr 1fr; }.logo-rules span { font-size: .58rem; }
  .colour-head h2 { font-size: 4.8rem; }.colour-rule { font-size: .6rem; right: 12px; width: 40%; }.swatch { padding: 14px; }.swatch b { font-size: 2.1rem; }
  .type-hero { font-size: 6.6rem; }.type-display strong { font-size: 3.2rem; }.type-editorial strong { font-size: 1.5rem; }.specimen small { display: none; }.type-product { width: 45%; }.type-mono strong { font-size: .68rem; }
  .graphics-head h2 { font-size: 5rem; }.evidence-plate { grid-template-columns: .6fr 1.2fr .8fr; padding-left: 12px; width: 68%; }.evidence-plate span { font-size: 1.35rem; }.note-one { left: 38%; }.note-two { right: 2%; }.proofline { left: 5%; right: 2%; }.proofline span { padding: 8px 5px; }.graphic-key dd { font-size: .58rem; }
  .image-page h2 { font-size: 4.7rem; }.image-one { width: 78%; }.image-two { left: 10%; width: 46%; }.image-three { right: 4%; width: 45%; }.image-rules { font-size: .56rem; width: 22%; }
  .voice-head h2 { font-size: 4.7rem; }.voice-spectrum { width: 48%; }.voice-spectrum div { min-height: 70px; padding: 9px; }.voice-spectrum span { font-size: 1rem; }.voice-examples { left: 22%; }.voice-examples article { min-height: 176px; }.voice-examples h3 { font-size: 1.6rem; }
  .campaign-head h2 { font-size: 4.5rem; }.campaign-grid { left: 22%; top: 31%; }.poster h3 { font-size: 2.7rem; }.campaign-anatomy { font-size: .5rem; width: 18%; }
  .digital-head h2 { font-size: 4rem; }.digital-shell { grid-template-columns: 1fr; width: 78%; }.report-demo { display: none; }.check-entry h3 { font-size: 3.8rem; }.digital-rule { bottom: 34px; font-size: .5rem; left: 34px; transform: rotate(-90deg); transform-origin: left bottom; width: 190px; }
  .volume-ladder span { padding: 8px 5px; }.volume-ladder strong { font-size: .88rem; }.do-dont { grid-template-columns: 1fr; }.do-dont section,.do-dont section:last-child { border-bottom: 1px solid var(--navy); border-right: 0; padding: 8px 0; }.rules-main h2 { font-size: 4.4rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; } }

@media print {
  @page { size: 16in 10in; margin: 0; }
  html,body { background: var(--white); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .book-nav,.copy-toast,.skip-link { display: none !important; }.book { padding: 0; }
  .spread { break-after: page; break-inside: avoid; height: 10in; margin: 0; max-height: none; min-height: 0; overflow: hidden; padding: .5in; width: 16in; }
  .cover,.idea,.journey,.logo-page,.colour-page,.type-page,.graphics-page,.image-page,.voice-page,.campaign-page,.digital-page { padding: .38in .5in .3in; }
  .rules-page { padding: 0; }
}