@page { size: 230mm 300mm; margin: 0; }

:root {
  --cream: #f8f5ef;
  --paper: #f3efe7;
  --ink: #0b0b0b;
  --mute: #6d6a64;
  --red: #e63946;
  --night: #0f0f10;
  --night-ink: #ece6da;
  --serif: "Bodoni Moda", "Didot", serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #888; }
body { font-family: var(--sans); color: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.page {
  width: 230mm; height: 300mm; position: relative; overflow: hidden;
  background: var(--cream); break-after: page;
}
.page.dark { background: var(--night); color: var(--night-ink); }

/* paper grain */
.page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50;
  background-image: url("grain.png"); background-size: 40mm 40mm;
  opacity: .05; mix-blend-mode: multiply;
}
.page.dark::after { mix-blend-mode: screen; opacity: .05; }

/* binding shadow on the inner edge of a spread */
.page.verso::before, .page.recto::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 14mm; z-index: 49; pointer-events: none;
}
.page.verso::before { right: 0; background: linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0)); }
.page.recto::before { left: 0;  background: linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,0)); }

.bleed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* folio */
.folio {
  position: absolute; bottom: 9mm; z-index: 40;
  font: 500 6.5pt/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.verso .folio { left: 14mm; }
.recto .folio { right: 14mm; text-align: right; }
.folio b { font-weight: 700; }
.on-photo .folio { color: #fff; mix-blend-mode: difference; }

.kicker { font: 600 7pt/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; }
.kicker .dot { color: var(--red); }

/* ---------- COVER ---------- */
.cover .bleed { object-position: 50% 20%; }
.masthead {
  position: absolute; top: 13mm; left: 0; right: 0; text-align: center; z-index: 10;
  font: 400 186pt/0.82 var(--serif); letter-spacing: -.02em; color: var(--ink);
}
.cover .sub {
  position: absolute; top: 7mm; left: 12mm; right: 12mm; z-index: 11;
  display: flex; justify-content: space-between;
  font: 600 6.5pt/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
}
.coverline { position: absolute; z-index: 10; }
.coverline .big { font: italic 400 30pt/0.95 var(--serif); }
.coverline .small { font: 600 6.8pt/1.45 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-top: 2.2mm; }
.coverline.red .small { color: var(--red); }
.cover .barcode {
  position: absolute; right: 12mm; bottom: 12mm; z-index: 10; background: #fff; padding: 2mm 2.4mm 1.4mm;
  font: 500 5pt/1 var(--sans); letter-spacing: .1em; text-align: center;
}
.cover .barcode i { display: block; height: 11mm; width: 26mm; margin-bottom: 1mm;
  background: repeating-linear-gradient(90deg,#000 0 .35mm,#fff .35mm .7mm,#000 .7mm 1.4mm,#fff 1.4mm 1.7mm,#000 1.7mm 1.9mm,#fff 1.9mm 2.6mm); }

/* ---------- LETTER ---------- */
.letter { padding: 20mm 18mm 24mm 22mm; display: grid; grid-template-columns: 1fr 52mm; gap: 12mm; height: 100%; }
.letter > div:first-child { display: flex; flex-direction: column; }
.letter .body { font-size: 10.2pt; line-height: 1.66; }
.letter .sign { margin-top: auto; }
.letter h1 { font: italic 400 58pt/.96 var(--serif); margin: 8mm 0 12mm; letter-spacing: -.01em; }
.body { font: 400 8.6pt/1.62 var(--sans); color: #1d1c1a; }
.body p + p { text-indent: 5mm; }
.dropcap::first-letter {
  font: 400 52pt/0.78 var(--serif); float: left; margin: 1.6mm 2.4mm 0 0; color: var(--ink);
}
.sign { margin-top: 7mm; font: italic 400 13pt/1.2 var(--serif); }
.sign small { display: block; font: 600 6.5pt/1.6 var(--sans); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-top: 1.5mm; }
.mast { border-left: .25mm solid var(--ink); padding-left: 5mm; font: 400 6.6pt/1.55 var(--sans); }
.mast .logo { width: 30mm; margin-bottom: 7mm; display: block; }
.mast dt { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 5.8pt; margin-top: 4mm; }
.mast dd { color: #2b2a27; }
.letter .inset { margin-top: 9mm; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.cap { font: 400 6pt/1.4 var(--sans); color: var(--mute); margin-top: 1.6mm; }

/* ---------- CONTENTS ---------- */
.contents { padding: 18mm 16mm 22mm 20mm; }
.contents .head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: .3mm solid var(--ink); padding-bottom: 3mm; }
.contents h1 { font: 400 64pt/.85 var(--serif); letter-spacing: -.02em; }
.contents .head .kicker { text-align: right; line-height: 1.7; }
.grp { margin-top: 6.5mm; }
.grp h2 { display: flex; justify-content: space-between; font: italic 400 15pt/1 var(--serif); margin-bottom: 3mm; }
.grp h2 span { font: 600 6pt/1 var(--sans); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); align-self: center; }
.thumbs { display: grid; gap: 2.6mm; }
.thumbs.c8 { grid-template-columns: repeat(8, 1fr); }
.thumbs.c7 { grid-template-columns: repeat(7, 1fr); }
.thumbs.c9 { grid-template-columns: repeat(9, 1fr); gap: 2.2mm; }
.thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 15%; display: block; }
.thumb .n { display: flex; gap: 1.4mm; align-items: baseline; margin-top: 1.3mm; font: 500 5.6pt/1.2 var(--sans); letter-spacing: .04em; }
.thumb .n b { font: 400 9pt/1 var(--serif); color: var(--red); }
.grp.features .thumb .n { font-size: 6pt; }

/* ---------- FEATURE OPENER (verso) ---------- */
.opener-name {
  position: absolute; left: 0; right: 0; bottom: 15mm; z-index: 10; text-align: center;
  font: 400 104pt/.8 var(--serif); letter-spacing: -.035em;
}
.opener-name em { display: block; font-size: 38pt; letter-spacing: 0; margin-bottom: 3mm; }
.opener-tag { position: absolute; top: 14mm; left: 14mm; z-index: 10; }

/* ---------- FEATURE TEXT (recto) ---------- */
.feature { padding: 17mm 16mm 20mm 20mm; display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; }
.feature h1 { font: italic 400 46pt/.95 var(--serif); letter-spacing: -.015em; margin: 5mm 0 5mm; }
.standfirst { font: 400 12.5pt/1.36 var(--serif); max-width: 150mm; padding-bottom: 6mm; border-bottom: .25mm solid currentColor; }
.feature .cols { display: grid; grid-template-columns: 1fr 1fr 50mm; gap: 7mm; margin-top: 6mm; }
.feature .body { font-size: 9pt; }
.feature .cols .body { column-span: none; }
.pull { font: italic 400 17pt/1.12 var(--serif); padding: 4mm 0; border-top: .25mm solid; border-bottom: .25mm solid; margin: 4mm 0; }
.pull::before { content: "\201C"; color: var(--red); }
.pull::after { content: "\201D"; color: var(--red); }

.card { font: 400 6.6pt/1.4 var(--sans); }
.card .title { font: 600 6pt/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; padding-bottom: 2.2mm; border-bottom: .5mm solid var(--red); margin-bottom: 1mm; }
.card dl { display: grid; grid-template-columns: 19mm 1fr; }
.card dt, .card dd { padding: 1.5mm 0; border-bottom: .2mm solid rgba(0,0,0,.18); }
.dark .card dt, .dark .card dd { border-color: rgba(255,255,255,.18); }
.card dt { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 5.4pt; padding-top: 1.9mm; }
.card .cert { margin-top: 3mm; font: 500 5.6pt/1.5 var(--sans); letter-spacing: .06em; }
.card .cert b { display: block; font: 400 8.5pt/1.2 var(--serif); letter-spacing: 0; color: var(--red); }

.plates { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4mm; margin-top: 7mm; align-items: end; }
.plates figure img { width: 100%; display: block; object-fit: cover; }
.plates figure:nth-child(1) img { height: 118mm; }
.plates figure:nth-child(2) img { height: 92mm; }
.plates.three { grid-template-columns: 1.1fr 1fr 1fr; }
.plates.three figure:nth-child(1) img { height: 108mm; }
.plates.three figure:nth-child(2) img, .plates.three figure:nth-child(3) img { height: 92mm; }
.plates figcaption { font: 400 5.8pt/1.4 var(--sans); color: var(--mute); margin-top: 1.5mm; }
.dark .plates figcaption, .dark .cap { color: #9b958a; }
.dark .standfirst, .dark .pull { border-color: rgba(236,230,218,.5); }
.dark .body { color: #d9d3c7; }
.dark .dropcap::first-letter { color: var(--night-ink); }

/* ---------- BACK COVER ---------- */
.back { padding: 20mm 20mm 14mm; display: flex; flex-direction: column; height: 100%; }
.back h1 { font: 400 112pt/.85 var(--serif); letter-spacing: -.03em; margin-top: 10mm; }
.back h1 em { color: var(--red); }
.back .lede { font: 400 13pt/1.4 var(--serif); max-width: 120mm; margin-top: 8mm; }
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2mm; margin-top: auto; }
.strip img:first-child { grid-column: span 2; grid-row: span 2; }
.strip img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 15%; display: block; }
.back .foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8mm; padding-top: 4mm; border-top: .3mm solid var(--ink); }
.back .foot img { width: 34mm; }
.disclaimer { font: 400 5.6pt/1.5 var(--sans); color: var(--mute); max-width: 120mm; }

.oncover { margin-top: auto; display: grid; grid-template-columns: 34mm 1fr; gap: 5mm; align-items: end; border-top: .3mm solid var(--ink); padding-top: 5mm; }
.oncover img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 20%; display: block; }
.oncover .t { font: italic 400 20pt/1.05 var(--serif); }
.oncover .s { font: 400 7.6pt/1.55 var(--sans); color: #2b2a27; margin-top: 2.5mm; max-width: 120mm; }
.contents { height: 100%; display: flex; flex-direction: column; }

/* ---------- DOUBLE-PAGE SPREAD ---------- */
.span { position: absolute; top: 0; height: 300mm; width: 460mm; object-fit: cover; }
.span.L { left: 0; }
.span.R { left: -230mm; }
.photo-cap {
  position: absolute; z-index: 40; right: 14mm; bottom: 15mm; max-width: 90mm; text-align: right;
  font: 400 6.4pt/1.45 var(--sans); letter-spacing: .04em; color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,.45);
}

/* ---------- METHOD ---------- */
.method { padding: 20mm 18mm 24mm 22mm; height: 100%; display: flex; flex-direction: column; }
.method h1 { font: italic 400 50pt/.96 var(--serif); margin: 7mm 0 7mm; letter-spacing: -.01em; }
.method .standfirst { max-width: 170mm; }
.steps { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9mm 10mm; }
.step b { display: block; font: 400 40pt/1 var(--serif); color: var(--red); }
.step h3 { font: 600 7pt/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; margin: 2mm 0 2.5mm; padding-bottom: 2mm; border-bottom: .25mm solid var(--ink); }
.step p { font: 400 8.6pt/1.6 var(--sans); color: #1d1c1a; }

/* ---------- TURNAROUND ---------- */
.turn { padding: 17mm 16mm 22mm 20mm; height: 100%; display: flex; flex-direction: column; }
.turn .frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; margin-top: 7mm; height: 170mm; }
.turn .frames img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.turn.grid .frames { grid-template-columns: repeat(2, 77mm); grid-template-rows: repeat(2, 102.5mm); height: auto; justify-content: start; gap: 2.5mm; }
.turn .frames img { min-height: 0; }
.turn.range .frames { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 86mm); height: auto; gap: 5mm 2.5mm; }
.turn.range.two .frames { grid-template-columns: repeat(2, 72mm); grid-template-rows: auto auto; justify-content: start; gap: 5mm 4mm; }
.turn.range.two figure img { flex: none; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.turn.range figure { margin: 0; min-height: 0; display: flex; flex-direction: column; }
.turn.range figure img { flex: 1; min-height: 0; object-position: 50% 30%; }
.turn.range figcaption { font: 600 5.6pt/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-top: 1.6mm; }
.turn .labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; margin-top: 1.6mm;
  font: 600 5.6pt/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.turn h2 { font: italic 400 34pt/1 var(--serif); margin-top: auto; }
.turn .stats { font: 400 15pt/1.2 var(--serif); margin-top: 2mm; letter-spacing: .01em; }
.turn .cap { margin-top: 3mm; }
.dark .turn .labels { color: #9b958a; }

/* ---------- BOARD ---------- */
.boardp { padding: 17mm 16mm 20mm 20mm; height: 100%; display: grid; gap: 6mm;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  grid-template-areas: "txt txt" "ed st"; }
.boardp .txt { grid-area: txt; display: grid; grid-template-columns: 1fr 52mm; column-gap: 9mm; align-items: start; }
.boardp .txt .kicker, .boardp .txt h1, .boardp .txt .body { grid-column: 1; }
.boardp .txt .card { grid-column: 2; grid-row: 1 / span 3; margin-top: 8mm; }
.boardp h1 { font: italic 400 38pt/.98 var(--serif); margin: 5mm 0 5mm; letter-spacing: -.01em; }
.body.big { font-size: 10pt; line-height: 1.62; }
.boardp figure { display: flex; flex-direction: column; min-height: 0; }
.boardp figure img { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: 50% 30%; display: block; }
.boardp .ed { grid-area: ed; }
.boardp .st { grid-area: st; }
.boardp.flip { grid-template-areas: "txt txt" "st ed"; grid-template-columns: .8fr 1.2fr; }
.boardp:not(.flip) { grid-template-columns: 1.2fr .8fr; }
.boardp .x { grid-area: x; }
.boardp.three { grid-template-columns: 1.1fr 1fr .8fr; grid-template-areas: "txt txt txt" "ed x st"; }
.boardp.three.flip { grid-template-columns: .8fr 1fr 1.1fr; grid-template-areas: "txt txt txt" "st x ed"; }
.boardp figcaption { font: 400 5.8pt/1.4 var(--sans); color: var(--mute); margin-top: 1.5mm; }

/* ---------- BEYOND HUMAN ---------- */
.beyond { padding: 20mm 18mm 24mm 22mm; height: 100%; display: flex; flex-direction: column; }
.beyond h1 { font: 400 120pt/.82 var(--serif); letter-spacing: -.03em; margin: 12mm 0 10mm; }
.beyond .standfirst { border-color: rgba(236,230,218,.5); font-size: 15pt; }
.beyond .body { margin-top: auto; font-size: 10pt; columns: 2; column-gap: 8mm; }

/* ---------- REGISTER ---------- */
.register { padding: 18mm 16mm 22mm 20mm; }
.register h1 { font: 400 52pt/.9 var(--serif); margin: 5mm 0 4mm; letter-spacing: -.02em; }
.register .standfirst { font-size: 10.5pt; }
.register table { width: 100%; border-collapse: collapse; margin-top: 5mm; font: 400 6.6pt/1.2 var(--sans); }
.register th { text-align: left; font: 600 5.4pt/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 0 2mm 2mm 0; border-bottom: .4mm solid var(--ink); }
.register td { padding: 1.55mm 2mm 1.55mm 0; border-bottom: .2mm solid rgba(0,0,0,.15); }
.register td.pg { font: 400 9pt/1 var(--serif); color: var(--red); width: 9mm; }

/* ---------- COLOPHON ---------- */
.colophon { padding: 22mm 22mm 24mm 20mm; height: 100%; display: flex; flex-direction: column; }
.colophon .logo { width: 44mm; }
.colophon h1 { font: italic 400 46pt/1 var(--serif); margin: 14mm 0 8mm; }
.colophon .body p + p { text-indent: 0; margin-top: 4mm; }
.colophon .disclaimer { margin-top: auto; max-width: none; font-size: 6.4pt; border-top: .3mm solid var(--ink); padding-top: 4mm; }

.scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 5; pointer-events: none; }
.scrim.to-dark  { background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,0)); }
.scrim.to-light { background: linear-gradient(to top, rgba(248,245,239,.6), rgba(248,245,239,.25) 45%, rgba(248,245,239,0)); }