/* Swift & Hale Annual Report 2026, web version.
   Direction: the dark room (taste-skill, seed 1389098409), brand palette and type kept.
   Idea: the holloway, the sunken Dorset lane the brand colour is named after, is the room:
   one deep green field in which the year's photographs and figures are lit.
   The four reading pages are the lit rooms off it: Chalk ground, Soot ink. */

@font-face { font-family: "Chivo"; src: url("fonts/Chivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #133621;          /* Holloway: the room */
  --surface: #1A4429;     /* Heath */
  --ink: #EEEFEA;         /* Chalk on Holloway, 11.5:1 */
  --muted: #C9CDB0;       /* soft ink on Holloway, 8:1 */
  --accent: #F4D96C;      /* Gorse: the primary action only */
  --paper: #EEEFEA; --soot: #1B1E1A; --holloway: #133621; --turf: #4F7A4A; --lichen: #B3A55E;
  --m: clamp(20px, 3.2vw, 48px);           /* one pair of page margins */
  --s1: clamp(44px, 8.4vw, 150px);         /* display */
  --s2: clamp(28px, 3.4vw, 48px);          /* heading */
  --s3: clamp(24px, 2.25vw, 32px);         /* statement */
  --s0: clamp(88px, 15vw, 216px);          /* giant figures */
  --s4: 18px;                              /* text */
  --s5: 16px;                              /* small */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: "Chivo", "Helvetica Neue", Arial, sans-serif; font-size: var(--s4); line-height: 1.6; font-weight: 400; font-variant-numeric: lining-nums; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.room { background: var(--bg); color: var(--ink); }
figure { margin: 0; }

/* bar: wordmark, a few links, one action */
.bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 20px var(--m); }
.bar-mark img { width: 172px; height: auto; }
.bar-links { display: flex; gap: 24px; margin-left: auto; font-size: var(--s5); }
.bar-links a { text-decoration: none; padding: 6px 0; transition: color .2s var(--ease); }
.bar-links a:hover { color: var(--accent); }
.btn { display: inline-block; background: var(--accent); color: var(--holloway); font-weight: 700; font-size: var(--s5); line-height: 1; text-decoration: none; padding: 15px 20px; border-radius: 0; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.btn:hover { transform: translateY(-2px); background: #F8E38E; }
.btn:active { transform: translateY(0); }

/* hero: one dim photograph above, the title along its lower edge, then the text band */
.hero { position: relative; }
.hero-photo { height: 78svh; min-height: 520px; overflow: hidden; }
.hero-photo video, .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: brightness(.74) contrast(1.05); }
.hero-photo img { animation: drift 26s var(--ease) infinite alternate; transform-origin: 60% 70%; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
.hero-title { margin: -0.86em 0 0; position: relative; padding: 0 var(--m); font-size: var(--s1); font-weight: 800; line-height: .88; letter-spacing: -0.04em; text-transform: uppercase; color: var(--ink); }
.hero-band { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; padding: 56px var(--m) 120px; font-size: var(--s5); line-height: 1.5; }
.hero-band p, .hero-band ul { margin: 0; }
.hero-band ul { list-style: none; padding: 0; }
.hb-name { grid-column: 1 / span 2; }
.hb-line { grid-column: 3 / span 2; color: var(--muted); max-width: 40ch; }
.hb-list:nth-of-type(1) { grid-column: 5 / span 1; }
.hb-list:nth-of-type(2) { grid-column: 6 / span 1; }
.hb-list a { text-decoration: none; transition: color .2s; }
.hb-list a:hover { color: var(--accent); }
.hb-actions { grid-column: 7 / span 1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hb-size { font-size: var(--s5); color: var(--muted); }

/* pinned sentence, photographs pass beside it (two screens) */
.pin { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; padding: 120px var(--m) 60px; }
.pin-text-col { grid-column: 1 / span 5; }
.pin-text { position: sticky; top: 30svh; margin: 0; max-width: 24ch; font-size: var(--s3); line-height: 1.2; font-weight: 500; color: var(--ink); }
.pin-photos { grid-column: 7 / span 6; display: grid; gap: 14px; }
.pin-photo { overflow: hidden; }
.pin-photo img { width: 100%; object-fit: cover; filter: brightness(.86) contrast(1.04); }
.pin-photo.p1 { width: 70%; }
.pin-photo.p1 img { aspect-ratio: 4 / 5; }
.pin-photo.p2 { width: 82%; justify-self: end; }
.pin-photo.p2 img { aspect-ratio: 16 / 10; }
.pin-photo.p3 { width: 64%; }
.pin-photo.p3 img { aspect-ratio: 1; }
.pin-photo figcaption { margin-top: 10px; font-size: var(--s5); color: var(--muted); }

/* figure on the photograph's edge */
.figure { position: relative; height: 88svh; min-height: 560px; overflow: hidden; }
.figure-photo, .figure-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.figure-photo img { filter: brightness(.8); }
.figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: rgba(8, 20, 12, .55); }
.figure-h { position: absolute; top: 28px; left: var(--m); margin: 0; font-size: var(--s3); font-weight: 700; z-index: 2; }
.figure-num { position: absolute; left: var(--m); bottom: 8px; margin: 0; z-index: 2; font-size: var(--s0); line-height: .8; font-weight: 800; letter-spacing: -0.05em; color: var(--paper); }
.figure-say { position: absolute; right: var(--m); bottom: 28px; margin: 0; z-index: 2; max-width: 26ch; text-align: right; font-size: var(--s4); }
.figure-more { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; padding: 40px var(--m) 0; }
.figure-more p { margin: 0; grid-column: span 5; font-size: var(--s4); color: var(--muted); }
.figure-more p:nth-child(2) { grid-column: 7 / span 5; }
.figure-more b { display: block; font-size: var(--s2); line-height: 1.1; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }

/* the live thing: five years on one path */
.explorer { padding: 140px var(--m) 60px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.ex-head { grid-column: 1 / span 4; }
.ex-head h2 { margin: 0 0 12px; font-size: var(--s2); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.ex-head p { margin: 0; color: var(--muted); }
.ex-body { grid-column: 5 / span 8; display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 28px; }
.ex-picks { display: flex; flex-direction: column; gap: 2px; }
.ex-picks button { all: unset; cursor: pointer; padding: 9px 12px; font-size: var(--s5); color: var(--muted); transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.ex-picks button:hover { color: var(--ink); transform: translateX(4px); }
.ex-picks button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 700; }
.ex-picks button:focus-visible { outline: 2px solid var(--accent); }
.ex-value { margin: 0 0 8px; }
.ex-value span:first-child { display: block; font-size: var(--s1); line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.ex-unit { font-size: var(--s5); color: var(--muted); }
.ex-bars { width: 100%; height: auto; }
.ex-bars rect { transition: y .5s var(--ease), height .5s var(--ease), fill .3s; }
.ex-bars text { font-family: "Chivo"; fill: var(--muted); font-size: 15px; } /* svg units, not page type */
.ex-bars text.cur { fill: var(--ink); font-weight: 700; }
.ex-def { color: var(--muted); margin: 12px 0 0; }

/* band of unequal panels */
.band { padding: 140px 0 0; }
.band h2 { margin: 0 0 64px; padding-left: calc(var(--m) + 16.6vw); font-size: var(--s2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.band-row { display: flex; height: 68svh; min-height: 420px; }
.bp { position: relative; flex: var(--g) 1 0; overflow: hidden; transition: flex-grow .5s var(--ease); }
.bp:hover { flex-grow: 6; }
.bp img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); transition: transform .8s var(--ease); }
.bp:hover img { transform: scale(1.04); }
.bp-title { position: absolute; top: 0; left: 0; padding: 24px; font-size: var(--s3); line-height: 1.1; font-weight: 800; color: var(--paper); background: rgba(8, 20, 12, .5); }
.band-cap { margin: 18px var(--m) 0; max-width: 60ch; color: var(--muted); font-size: var(--s5); }

/* index with preview: read the report */
.index { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; padding: 160px var(--m) 60px; }
.index-pic { grid-column: 1 / span 5; position: sticky; top: 12vh; align-self: start; aspect-ratio: 4 / 5; overflow: hidden; }
.index-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.86); transition: opacity .24s linear; }
.index-pic img.on { opacity: 1; }
.index-list { grid-column: 7 / span 6; }
.index-list h2 { margin: 0 0 48px; font-size: var(--s2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.index-list ol { list-style: none; margin: 0; padding: 0; }
.index-list li a { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 16px 0; text-decoration: none; color: var(--muted); transition: color .24s; }
.index-list li a .n { font-size: var(--s3); font-weight: 600; line-height: 1.2; }
.index-list li a .pg { font-size: var(--s5); align-self: center; }
.index-list li a .d { grid-column: 1 / -1; max-width: 46ch; font-size: var(--s5); line-height: 1.5; display: none; }
.index-list li.on a { color: var(--ink); }
.index-list li.on a .n { font-weight: 800; }
.index-list li.on a .d { display: block; color: var(--muted); }
.index-list li .thumb { display: none; }

/* names as one sentence: where we trade */
.towns { padding: 140px var(--m); }
.towns-text { margin: 0; max-width: 34em; font-size: var(--s3); line-height: 1.35; color: var(--muted); }
.towns-lead { color: var(--ink); font-weight: 700; }
.towns-text .t { transition: color .4s; }
.towns-text .t.lit { color: var(--accent); }

/* the motif returns */
.close { position: relative; height: 90svh; min-height: 560px; overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; padding: 0 var(--m); background: var(--surface); }
.close-swift { position: absolute; left: -12vw; bottom: -10svh; width: 86vw; height: auto; }
.close-text { grid-column: 9 / span 4; align-self: center; position: relative; z-index: 2; }
.close-text h2 { margin: 0 0 14px; font-size: var(--s2); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.close-text p { margin: 0 0 14px; font-size: var(--s4); max-width: 34ch; }
.close-fact { font-size: var(--s4) !important; font-weight: 800; }

/* footer: the last photograph */
.foot { position: relative; height: 100svh; min-height: 620px; overflow: hidden; color: var(--paper); display: flex; flex-direction: column; }
.foot-photo, .foot-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foot-photo img { filter: brightness(.62); }
.foot-top { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 24px; padding: 32px var(--m); font-size: var(--s5); }
.foot-top ul { list-style: none; margin: 0; padding: 0; }
.foot-top a { text-decoration: none; }
.foot-top a:hover { color: var(--accent); }
.foot-top p { margin: 0; text-align: right; }
.foot-mark { position: relative; z-index: 2; left: auto; right: auto; bottom: auto; margin: auto 0 0; padding: 0 var(--m); font-size: var(--s0); line-height: .8; font-weight: 800; letter-spacing: -0.045em; text-transform: uppercase; white-space: nowrap; }
.foot-legal { position: relative; z-index: 2; margin: 18px var(--m) 24px; font-size: var(--s5); color: #E2E4DC; max-width: 60ch; }

/* entrances */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- reading rooms */
.reading { background: var(--paper); color: var(--soot); }
.reading .bar { position: sticky; background: var(--holloway); color: var(--ink); }
.r-head { background: var(--holloway); color: var(--ink); padding: 120px var(--m) 72px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.r-head h1 { grid-column: 1 / span 7; margin: 0; font-size: clamp(40px, 6.6vw, 112px); line-height: .9; font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; }
.r-index { grid-column: 9 / span 4; list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 1.45; }
.r-index a { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; text-decoration: none; color: var(--muted); transition: color .2s; }
.r-index a:hover { color: var(--accent); }
.r-index .pg { font-variant-numeric: tabular-nums; }
.r-body { padding: 0 var(--m) 120px; }
.r-body > section, .r-body > .wsec { max-width: 1180px; margin: 0 auto; padding-top: 96px; }
.r-body h1 { margin: 0 0 18px; font-size: var(--s2); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: var(--holloway); max-width: 22ch; }
.r-body .rh { margin: 0 0 10px; font-size: var(--s5); font-weight: 700; color: var(--turf); }
.r-body .standfirst { margin: 0 0 40px; max-width: 46ch; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.4; font-weight: 500; }
.r-body p, .r-body li, .r-body dd { max-width: 70ch; }
.r-body h2 { margin: 40px 0 10px; font-size: 24px; line-height: 1.2; color: var(--holloway); }
.r-body h3 { margin: 28px 0 6px; font-size: 19px; color: var(--holloway); }
.r-body .cols-2, .r-body .cols-3 { columns: 1; }
.r-body .lead { font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--holloway); }
.r-body figure.photo, .r-body .opener-photo, .r-body .sia-photo { margin: 32px 0; }
.r-body figure.photo img, .r-body .opener-photo img, .r-body .sia-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.r-body figcaption { font-size: var(--s5); color: #4B5048; margin-top: 8px; }
.r-body .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin: 32px 0 40px; }
.r-body .stat b { display: block; font-size: clamp(32px, 3.4vw, 48px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--holloway); }
.r-body .stat span { display: block; margin-top: 8px; font-weight: 700; font-size: 16px; }
.r-body .stat em { display: block; font-style: normal; font-size: var(--s5); color: #4B5048; }
.r-body blockquote.pull p { font-size: var(--s3); line-height: 1.25; font-weight: 800; color: var(--holloway); max-width: 30ch; margin: 32px 0 8px; }
.r-body cite { font-style: normal; font-size: var(--s5); color: #4B5048; }
.r-body figure.voice { display: grid; grid-template-columns: 96px 1fr; gap: 20px; margin: 32px 0; max-width: 70ch; }
.r-body figure.voice img { width: 96px; height: 96px; object-fit: cover; }
.r-body figure.voice blockquote { margin: 0; }
.r-body figure.voice blockquote p { font-weight: 700; color: var(--holloway); margin: 0 0 6px; }
.r-body .panel { background: #E1E4DA; padding: 24px 28px; margin: 28px 0; max-width: 76ch; }
.r-body .panel.dark { background: var(--holloway); color: var(--ink); }
.r-body .panel h2, .r-body .panel h3 { margin-top: 0; }
.r-body .signoff { margin: 32px 0; }
.r-body .signoff p { margin: 0; }
.r-body .signoff .name { font-weight: 800; color: var(--holloway); font-size: 20px; }
.r-body ul { padding-left: 1.2em; }
.r-body .table-wrap { overflow-x: auto; margin: 24px 0 36px; }
.r-body table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; }
.r-body caption { caption-side: top; text-align: left; font-weight: 700; color: var(--holloway); padding-bottom: 8px; }
.r-body th { text-align: left; font-size: 14px; border-bottom: 2px solid var(--holloway); padding: 6px 12px 6px 0; vertical-align: bottom; }
.r-body td { border-bottom: 1px solid #CFD3C8; padding: 7px 12px 7px 0; vertical-align: top; } /* taste-skill-ignore: real financial tables */
.r-body .n, .r-body td.v, .r-body th.v { text-align: right; white-space: nowrap; }
.r-body td.cy, .r-body th.cy { background: #E1E4DA; font-weight: 700; padding-left: 8px; padding-right: 8px; }
.r-body tr.total td, .r-body tr.sub td { font-weight: 700; border-top: 1px solid var(--soot); }
.r-body tr.head td { font-weight: 700; color: var(--holloway); padding-top: 16px; }
.r-body tr.unit th { font-weight: 400; color: #4B5048; border: 0; }
.r-body .fin-notes { font-size: var(--s5); color: #4B5048; }
.r-body .nn { color: var(--turf); margin-right: 10px; }
.r-body svg { max-width: 100%; height: auto; }
.r-body figure.chart, .r-body figure.heatmap { margin: 28px 0; }
.r-body figure.heatmap { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 32px; align-items: center; }
.r-body article.risk { background: #E1E4DA; padding: 24px 28px; margin: 0 0 20px; max-width: 76ch; }
.r-body article.risk h3 { margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.r-body article.risk .rid { background: var(--holloway); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 14px; }
.r-body article.risk .move { margin-left: auto; font-size: var(--s5); color: #4B5048; display: inline-flex; gap: 6px; align-items: center; }
.r-body .move i, .r-body .move-key .move { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); padding: 3px; }
.r-body article.risk dt { font-weight: 700; color: var(--turf); margin-top: 10px; }
.r-body article.risk dd { margin: 0; }
.r-body .board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 40px; }
.r-body article.director { display: grid; grid-template-columns: 120px 1fr; gap: 0 20px; }
.r-body article.director > img { width: 120px; height: 150px; object-fit: cover; grid-row: span 4; }
.r-body article.director dl { grid-column: 1 / -1; font-size: 16px; }
.r-body article.director dt { font-weight: 700; color: var(--turf); margin-top: 8px; }
.r-body article.director dd { margin: 0; }
.r-body .role { color: var(--turf); font-weight: 700; margin: 2px 0 8px; font-size: 16px; }
.r-body .chip { display: inline-block; min-width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; background: #E1E4DA; font-weight: 800; font-size: 13px; margin-right: 4px; }
.r-body .chip.chair { background: var(--holloway); color: var(--accent); }
.r-body .chip.pay { background: var(--accent); }
.r-body .exec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.r-body dl.qa dt { font-weight: 800; color: var(--holloway); margin-top: 24px; font-size: 20px; }
.r-body dl.qa dd { margin: 6px 0 0; }
.r-body dl.glossary dt { font-weight: 800; margin-top: 16px; color: var(--holloway); }
.r-body dl.glossary dd { margin: 0; }
/* designed print pages read as plain blocks on screen */
.r-body .page { padding-top: 96px; }
.r-body .page .inner { position: static; }
.r-body .hl-hero, .r-body .hl-cols, .r-body .aag-top, .r-body .gag-row, .r-body .strat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.r-body .hl-big { font-size: clamp(56px, 8vw, 120px); line-height: .9; font-weight: 800; letter-spacing: -0.04em; color: var(--holloway); margin: 0; }
.r-body .hl-foot, .r-body .kpi-key, .r-body .strat-foot, .r-body .aag-note, .r-body .aag-key, .r-body .gag-code, .r-body .ic-band, .r-body .bm-diff { position: static; }
.r-body .dark-bg { background: var(--holloway); color: var(--ink); padding: 48px; margin-top: 96px; }
.r-body .dark-bg h1, .r-body .dark-bg h2 { color: var(--ink); }
.r-body .aag-map { max-width: 520px; }
.r-body .aag-counts, .r-body .aag-nums, .r-body .gag-donuts, .r-body .gag-code-grid, .r-body .bm-cols, .r-body .aag-donuts, .r-body .aag-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.r-body .aag-counts b, .r-body .aag-nums b { display: block; font-size: 40px; font-weight: 800; line-height: 1; }
.r-body .aag-brands > div { padding: 28px; }
.r-body .brand-hale { background: var(--holloway); color: var(--ink); }
.r-body .brand-swift { background: var(--accent); color: var(--holloway); }
.r-body .b-name { font-size: 36px; font-weight: 800; text-transform: uppercase; margin: 0 0 8px; }
.r-body .aag-donuts svg, .r-body .gag-donuts svg { width: 160px; height: 160px; }
.r-body .prio { background: #E1E4DA; padding: 28px; }
.r-body .prio .pn { color: var(--lichen); margin-right: 10px; }
.r-body .kpi-row { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(140px, .8fr) 1.6fr; gap: 24px; align-items: center; padding: 18px 20px; }
.r-body .kpi-row:nth-child(odd) { background: #E1E4DA; }
.r-body .kpi-row .k-val { font-size: 32px; font-weight: 800; color: var(--holloway); margin: 0; }
.r-body .kpi-row .k-val span { display: block; font-size: 14px; font-weight: 400; color: #4B5048; }
.r-body .kpi-row .k-def { font-size: 15px; color: #4B5048; margin: 4px 0; }
.r-body .ic-item { display: grid; grid-template-columns: 200px 1fr; gap: 24px; margin: 0 0 28px; }
.r-body .ic-proof { font-size: 40px; font-weight: 800; color: var(--holloway); margin: 0; line-height: 1; }
.r-body .ic-proof span { display: block; font-size: 14px; font-weight: 500; color: #4B5048; margin-top: 6px; }
.r-body .ic-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; background: var(--holloway); color: var(--ink); padding: 32px; }
.r-body .ic-band b { display: block; font-size: 40px; color: var(--accent); }
.r-body .bm-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.r-body .bm-h { color: var(--accent); font-weight: 700; }
.r-body .bm-list dt, .r-body .bm-steps b { font-weight: 800; }
.r-body .bm-list dd { margin: 0 0 10px; }
.r-body .bm-steps { list-style: none; padding: 0; }
.r-body .sia-next { font-size: 16px; }
.r-body .divider, .r-body .notes-page, .r-body .filler { display: none; }
.r-foot { background: var(--holloway); color: var(--ink); padding: 56px var(--m); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; font-size: 16px; }
.r-foot a { text-decoration: none; }
.r-foot a:hover { color: var(--accent); }
.r-foot small { display: block; width: 100%; color: var(--muted); font-size: 13px; }
.r-pager { display: flex; justify-content: space-between; gap: 24px; max-width: 1180px; margin: 96px auto 0; font-size: 20px; font-weight: 700; }
.r-pager a { text-decoration: none; color: var(--holloway); }
.r-pager a:hover { text-decoration: underline; text-decoration-color: var(--turf); }

/* ------------------------------------------------------------------- phone */
@media (max-width: 760px) {
  .bar { gap: 12px; padding: 14px 20px; }
  .bar-links { display: none; }
  .bar-mark img { width: 140px; }
  .bar .btn { margin-left: auto; padding: 12px 14px; font-size: 15px; }
  .hero-photo { height: 64svh; min-height: 420px; }
  .hero-band { grid-template-columns: 1fr 1fr; gap: 20px 12px; padding: 36px 20px 80px; font-size: 15px; }
  .hb-name, .hb-line { grid-column: 1 / -1; }
  .hb-list:nth-of-type(1) { grid-column: 1; }
  .hb-list:nth-of-type(2) { grid-column: 2; }
  .hb-actions { grid-column: 1 / -1; }
  .pin { grid-template-columns: 1fr; padding: 80px 20px 40px; }
  .pin-text-col, .pin-photos { grid-column: 1; }
  .pin-text { position: static; margin-bottom: 28px; }
  .figure { height: 80svh; }
  .figure-num { font-size: 20vw; }
  .figure-say { left: 20px; right: 20px; bottom: auto; top: 46%; text-align: left; font-size: 16px; }
  .figure-more { grid-template-columns: 1fr; padding: 32px 20px 0; gap: 20px; }
  .figure-more p, .figure-more p:nth-child(2) { grid-column: 1; }
  .explorer { grid-template-columns: 1fr; padding: 96px 20px 40px; }
  .ex-head, .ex-body { grid-column: 1; }
  .ex-body { grid-template-columns: 1fr; gap: 16px; }
  .ex-picks { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .ex-picks button { padding: 10px 12px; min-height: 24px; background: rgba(255,255,255,.04); }
  .band { padding-top: 96px; }
  .band h2 { padding-left: 20px; margin-bottom: 28px; font-size: 28px; }
  .band-row { flex-wrap: wrap; height: 84svh; }
  .bp { height: 50%; }
  .bp:nth-child(1) { flex: 0 0 64%; } .bp:nth-child(2) { flex: 0 0 36%; } .bp:nth-child(3) { flex: 0 0 36%; } .bp:nth-child(4) { flex: 0 0 64%; }
  .bp:hover { flex-grow: 0; }
  .bp-title { padding: 16px; }
  .band-cap { margin: 16px 20px 0; }
  .index { grid-template-columns: 1fr; padding: 96px 20px 40px; }
  .index-pic { display: none; }
  .index-list { grid-column: 1; }
  .index-list li a .d { display: block; }
  .index-list li a { color: var(--ink); }
  .index-list li .thumb { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; margin-bottom: 4px; }
  .towns { padding: 96px 20px; }

  .close { grid-template-columns: 1fr; height: auto; min-height: 0; padding: 72px 20px 60svh; }
  .close-text { grid-column: 1; }
  .close-swift { left: -20vw; bottom: 0; width: 150vw; }
  .foot { height: 88svh; }
  .foot-top { flex-direction: column; padding: 24px 20px; }
  .foot-top p { text-align: left; }
  .foot-mark { padding: 0 20px; font-size: 12.6vw; }
  .foot-legal { margin: 14px 20px 20px; }
  .r-head { grid-template-columns: 1fr; padding: 96px 20px 48px; }
  .r-head h1, .r-index { grid-column: 1; }
  .r-body { padding: 0 20px 80px; }
  .r-body article.director { grid-template-columns: 96px 1fr; }
  .r-body article.director > img { width: 96px; height: 120px; }
  .r-body .ic-item { grid-template-columns: 1fr; }
  .r-body .kpi-row { grid-template-columns: 1fr; }
  .r-body figure.heatmap { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}