/* Penwood ASI Mission 2000 & Beyond · 2 Years of Service */

@font-face { font-family: "Cormorant Garamond"; src: url(../fonts/cormorant.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(../fonts/cormorant-italic.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url(../fonts/lato-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url(../fonts/lato-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url(../fonts/lato-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --navy-950: #060d20;
  --navy-900: #0a1633;
  --navy-800: #0f2150;
  --navy-700: #183070;
  --gold: #c5a059;
  --gold-hi: #e6cf94;
  --gold-ink: #8d6a22;
  --paper: #f8f5ee;
  --paper-2: #efe9dd;
  --ink: #161b2c;
  --ink-2: #454856;
  --ink-3: #7a7a82;
  --maroon: #6b1c2c;
  --rule: rgba(22, 27, 44, .14);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .7, .18, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bar-h: 52px;
  --nav-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--navy-950); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(24, 48, 112, .45), transparent 70%), radial-gradient(ellipse 120% 90% at 50% 50%, var(--navy-900), var(--navy-950)); }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
img, video { display: block; }

/* ─── Chrome ─────────────────────────────────────────── */
.topbar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; height: calc(var(--bar-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); display: flex; align-items: center; justify-content: center; }
.wordmark { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 17px; letter-spacing: .04em; }
.wordmark img { width: 28px; height: 28px; border-radius: 50%; }
.wordmark span { font-weight: 600; }
.wordmark em { font-style: italic; color: rgba(248, 245, 238, .6); }

.stage { position: fixed; z-index: 2; top: calc(var(--bar-h) + env(safe-area-inset-top)); bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); }
.book-host { position: absolute; inset: 0; }
.book-host .book { width: 100%; height: 100%; }
.book-host .stf__parent { width: 100% !important; height: 100% !important; min-width: 0 !important; transition: transform .8s var(--ease-io); }
.book-host .stf__wrapper { height: 100%; padding: 0 !important; }
.book-shadow { position: absolute; pointer-events: none; left: var(--bx, 0); top: var(--by, 0); width: var(--bw, 0); height: var(--bh, 0); box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .75), 0 14px 28px -14px rgba(0, 0, 0, .6); transition: left .8s var(--ease-io), width .8s var(--ease-io); }

.nav { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; justify-content: center; align-content: center; column-gap: 14px; row-gap: 3px; }
.nav__arrow { grid-row: 1 / span 2; grid-column: 1; align-self: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(197, 160, 89, .35); background: rgba(10, 22, 51, .6); display: grid; place-items: center; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), opacity .3s; }
#nextBtn { grid-column: 3; }
.nav__arrow svg { width: 18px; height: 18px; color: var(--gold-hi); }
.nav__arrow--prev svg { transform: scaleX(-1); }
.nav__arrow:hover { background: rgba(24, 48, 112, .6); border-color: var(--gold); }
.nav__arrow:disabled { opacity: .3; cursor: default; }
.nav__arrow:focus-visible, .nav__dot:focus-visible, .page button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.nav__dots { grid-row: 1; grid-column: 2; display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; justify-content: center; }
.nav__dot { width: 24px; height: 22px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.nav__dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(248, 245, 238, .28); transition: width .4s var(--ease), background .4s var(--ease), border-radius .4s var(--ease); }
.nav__dot:hover::before { background: rgba(248, 245, 238, .6); }
.nav__dot[aria-current="true"]::before { width: 20px; border-radius: 4px; background: var(--gold); }
.nav__label { grid-row: 2; grid-column: 2; margin: 0; text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(248, 245, 238, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
.nav__label b { color: var(--gold-hi); }
.nav__label.is-hint { letter-spacing: .1em; text-transform: none; font-size: 12px; }

.intro { position: fixed; z-index: 20; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: radial-gradient(ellipse at 50% 42%, var(--navy-800), var(--navy-950) 72%); cursor: pointer; transition: opacity .9s var(--ease), visibility .9s; }
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__logo { width: clamp(150px, 26vmin, 220px); height: auto; border-radius: 50%; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); opacity: 0; animation: logoIn 1.2s var(--ease) .2s forwards; }
@keyframes logoIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.intro__years { margin: 26px 0 0; opacity: 0; animation: rise .9s var(--ease) forwards; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-hi); animation-delay: 1.15s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ═══ Pages ═══════════════════════════════════════════
   Each page is a size container: 1cqw = 1% of the page width. */
.page { container: page / size; overflow: hidden; background: var(--paper); color: var(--ink); line-height: 1.55; user-select: none; -webkit-user-select: none; }
.page > * { font-size: max(11px, 2.25cqw); }
.page img, .page video { -webkit-user-drag: none; }
.page--paper { background-color: var(--paper); background-image: var(--grain); background-size: 220px 220px; }
.page--dark { background: var(--navy-900); color: var(--paper); }
.page::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.stf__item.--left::after { background: linear-gradient(to left, rgba(20, 16, 8, .22), rgba(20, 16, 8, .05) 2.2%, transparent 7%); }
.stf__item.--right::after { background: linear-gradient(to right, rgba(20, 16, 8, .2), rgba(20, 16, 8, .05) 2.2%, transparent 7%); }
.is-portrait .stf__item.--right::after { background: linear-gradient(to right, rgba(20, 16, 8, .12), transparent 3%); }
.page--cover::after { background: linear-gradient(to right, rgba(255, 255, 255, .07), rgba(0, 0, 0, .28) 1.2%, transparent 3.5%) !important; }
.page--back::after { background: linear-gradient(to left, rgba(255, 255, 255, .07), rgba(0, 0, 0, .28) 1.2%, transparent 3.5%) !important; }

.rh { position: absolute; z-index: 3; top: 3.6cqw; left: 6cqw; right: 6cqw; margin: 0; display: flex; justify-content: space-between; gap: 2em; font-size: max(8px, 1.2cqw) !important; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.rh span:last-child { color: var(--gold-ink); overflow: hidden; text-overflow: ellipsis; }
.folio { position: absolute; z-index: 3; bottom: 3.4cqw; left: 0; right: 0; margin: 0; text-align: center; font-family: var(--serif); font-size: max(10px, 1.9cqw) !important; letter-spacing: .1em; color: var(--ink-3); }

.pg { position: absolute; inset: 0; z-index: 2; padding: 9cqw 6cqw 8.5cqw; display: flex; flex-direction: column; gap: 3cqw; }

/* reveal choreography */
.rv { opacity: 0; transform: translateY(1.6cqw); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 100ms + 200ms); }
.page.is-on .rv { opacity: 1; transform: none; }

/* type */
.eyebrow { margin: 0 0 1.4cqw; font-size: max(8.5px, 1.35cqw); letter-spacing: .34em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.big-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 7cqw; line-height: 1.02; letter-spacing: -.01em; color: var(--navy-900); }
.hd__title { display: flex; align-items: center; gap: .45em; margin: 0; font-family: var(--serif); font-weight: 600; font-size: 5.6cqw; line-height: 1.05; color: var(--navy-900); }
.hd .body { margin: 1.6cqw 0 0; max-width: 66ch; color: var(--ink-2); text-wrap: pretty; }
.hd--center { text-align: center; }
.icon { width: .78em; height: .78em; flex: none; color: var(--gold-ink); }
.lead { margin: 0 auto; max-width: 40ch; font-family: var(--serif); font-size: 3.6cqw; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.lead--xl { font-size: 4.8cqw; max-width: 24ch; }
.lead strong { font-weight: 600; color: var(--gold-ink); }
.numeral { margin: 0 0 2cqw; font-family: var(--serif); font-weight: 500; font-size: 17cqw; line-height: .9; color: var(--navy-900); }
.cap { margin: 0; display: flex; align-items: center; gap: 1.2em; font-size: max(8.5px, 1.3cqw); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.cap::before { content: ""; width: 5cqw; height: 1px; background: var(--gold); flex: none; }

/* galleries: rows keep each photo's true shape; the block shrinks to fit the space it's given */
.fit { flex: 1 1 0; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.rows { width: min(100cqw, calc((100cqh + 1.4cqw * var(--k)) / var(--h))); display: flex; flex-direction: column; gap: 1.4cqw; }
.row { display: flex; gap: 1.4cqw; }
.row > figure { flex: var(--g) 1 0%; aspect-ratio: var(--a); min-width: 0; margin: 0; position: relative; overflow: hidden; background: var(--paper-2); }
.row img, .row video { width: 100%; height: 100%; object-fit: cover; }
.page--dark .row > figure { background: var(--navy-800); }
.row > .stack { flex: var(--g) 1 0%; aspect-ratio: var(--a); min-width: 0; display: flex; flex-direction: column; gap: 1.4cqw; }
.stack > figure { flex: var(--w) 1 0%; min-height: 0; margin: 0; position: relative; overflow: hidden; background: var(--paper-2); }
.page--dark .stack > figure { background: var(--navy-800); }
.rows--tall { display: none !important; }
@container page (aspect-ratio < 0.7) {
  .rows--wide { display: none !important; }
  .rows--tall { display: flex !important; }
}
.collage { position: absolute; inset: 0; z-index: 1; display: grid; gap: .5cqw; background: var(--navy-950);
  grid-template-columns: calc(100cqh * .527) 1fr; grid-template-rows: repeat(3, 1fr);
  grid-template-areas: "ns a" "ns b" "ns c"; }
.collage figure { margin: 0; overflow: hidden; min-width: 0; min-height: 0; background: var(--navy-800); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage__ns { grid-area: ns; } .collage__a { grid-area: a; } .collage__b { grid-area: b; } .collage__c { grid-area: c; }
@container page (aspect-ratio < 0.7) {
  .collage { grid-template-columns: calc((100cqh - 100cqw / 1.6) * .527) 1fr; grid-template-rows: calc(100cqw / 1.6) 1fr 1fr;
    grid-template-areas: "a a" "ns b" "ns c"; }
}
.collage--closing { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "b" "a"; }
.pg--letter-3 { justify-content: center; }
.letter-end { display: flex; align-items: center; gap: 5cqw; }
.letter-end__text { flex: 1; min-width: 0; }
.portrait { margin: 0; flex: none; width: min(42cqw, 62cqh * .675); aspect-ratio: .675; overflow: hidden; background: var(--paper-2); box-shadow: 0 1cqw 3cqw rgba(20, 16, 8, .18); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
@container page (aspect-ratio < 0.7) {
  .letter-end { flex-direction: column; align-items: stretch; gap: 4cqw; }
  .portrait { width: min(52cqw, 37cqh * .675); align-self: center; }
}
.bleed { position: absolute; inset: 0; z-index: 1; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }
.tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 6% 3.5% 3%; font-size: max(9px, 3.6cqw); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(6, 13, 32, .78), rgba(6, 13, 32, 0)); }
.pg--middle { justify-content: center; }
.pg--full { padding: 7.5cqw 4.5cqw 7.5cqw; gap: 2.2cqw; }

/* ─── Openers ─────────────────────────── */
.op { position: absolute; inset: 0; z-index: 2; }
.op__num { margin: 0 0 1.4cqw; display: flex; align-items: center; gap: 1em; font-family: var(--serif); font-size: 4cqw; font-weight: 500; color: var(--gold-hi); letter-spacing: .08em; }
.op__num:not(:empty)::after { content: ""; width: 10cqw; height: 1px; background: rgba(230, 207, 148, .6); }
.op__num:empty { display: none; }
.op__title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 8cqw; line-height: 1.02; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.op__lede { margin: 2.6cqw 0 0; max-width: 40ch; font-family: var(--serif); font-style: italic; font-size: 3.5cqw; line-height: 1.4; color: rgba(248, 245, 238, .86); text-wrap: pretty; }
.op--full .op__media { position: absolute; inset: 0; overflow: hidden; }
.op--full .op__media img { width: 100%; height: 100%; object-fit: cover; }
.op__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 13, 32, .92) 0%, rgba(6, 13, 32, .6) 30%, rgba(6, 13, 32, 0) 58%); }
.op--full .op__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 7cqw 8cqw; }
.op--top { display: flex; flex-direction: column; background: radial-gradient(ellipse 120% 70% at 50% 100%, var(--navy-800), var(--navy-900)); }
.op__frame { width: 100%; aspect-ratio: var(--a); overflow: hidden; background: var(--navy-800); flex: none; }
.op__frame img, .op__frame video { width: 100%; height: 100%; object-fit: cover; }
.op--top .op__text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 5cqw 7cqw 6cqw; }
.credit-tag { position: absolute; z-index: 3; top: 3.4cqw; right: 3.6cqw; margin: 0; font-size: max(8px, 1.15cqw) !important; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.kb img { transform: scale(1.02); }
.page.is-on .kb img { animation: kb 28s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1%, -.8%); } }

/* ─── Cover / endpapers / back ─────────── */
.page--cover, .page--back, .page--end { background: radial-gradient(ellipse 110% 80% at 50% 35%, var(--navy-800), var(--navy-950)); }
.page--cover::before, .page--back::before, .page--end::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .6; mix-blend-mode: overlay; }
/* The spine: one column of tiles that wraps from the front cover round to the back.
   Shading makes it read as a rounded spine, with the hinge groove where it meets the board. */
.cover__band { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 9.5cqw; overflow: hidden; }
.cover__band::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .12) 22%, rgba(255, 255, 255, .1) 48%, rgba(255, 255, 255, 0) 64%, rgba(0, 0, 0, .28) 92%, rgba(0, 0, 0, .45) 100%); }
.cover__band::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(230, 207, 148, .75); box-shadow: 1.2cqw 0 1.6cqw rgba(0, 0, 0, .35); }
.cover__band--right { left: auto; right: 0; }
.cover__band--right::before { transform: scaleX(-1); }
.cover__band--right::after { right: auto; left: 0; box-shadow: -1.2cqw 0 1.6cqw rgba(0, 0, 0, .35); }
.band { display: block; width: 100%; height: 100%; }
.band .tile { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .7s var(--ease); transition-delay: calc(var(--i) * 28ms + 150ms); }
.page.is-on .band .tile { opacity: 1; }
.page--cover .cover { left: 9.5cqw; }
.page--back .back { right: 9.5cqw; }
.cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8cqw 8cqw; }
.cover::before { content: ""; position: absolute; inset: 3.6cqw; border: 1px solid rgba(230, 207, 148, .35); pointer-events: none; }
.logo { display: block; border-radius: 50%; height: auto; }
.page--dark .logo { box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, .4); }
.cover__logo { width: 15cqw; margin-bottom: 4.5cqw; }
.finale__logo { width: 17cqw; margin-bottom: 7cqw; }
.colophon__logo { width: 22cqw; margin: 0 auto 5cqw; box-shadow: 0 .6cqw 2cqw rgba(20, 16, 8, .12); }
.endpaper__logo { width: 34cqw; }
.back__logo { width: 32cqw; margin-bottom: 5cqw; }
.cover__org { margin: 0 0 5cqw; font-size: max(8.5px, 1.6cqw); letter-spacing: .42em; text-transform: uppercase; font-weight: 700; color: var(--gold-hi); }
.cover__frame { width: 84%; aspect-ratio: var(--a); overflow: hidden; outline: 1px solid rgba(230, 207, 148, .55); outline-offset: 1.2cqw; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .45); background: var(--navy-800); }
.cover__frame img { width: 100%; height: 100%; object-fit: cover; }
.cover__title { margin: 6cqw 0 0; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 10.5cqw; line-height: 1; color: #fff; }
.cover__sub { margin: 2cqw 0 0; font-family: var(--serif); font-size: 4.6cqw; color: var(--gold-hi); letter-spacing: .02em; }
.cover__founded { margin: 4.5cqw 0 0; font-size: max(8.5px, 1.4cqw); letter-spacing: .36em; text-transform: uppercase; font-weight: 700; color: rgba(248, 245, 238, .66); }
.cover__founded::before { content: ""; display: block; width: 8cqw; height: 1px; background: rgba(230, 207, 148, .55); margin: 0 auto 3cqw; }
.endpaper { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background-image: radial-gradient(rgba(230, 207, 148, .09) 1px, transparent 1.5px); background-size: 3.2cqw 3.2cqw; }
.endpaper__mark { width: 26cqw; height: 26cqw; color: rgba(230, 207, 148, .22); }
.back { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.back__mark { width: 15cqw; height: 15cqw; color: var(--gold); margin-bottom: 5cqw; }
.back__org { margin: 0; font-family: var(--serif); font-size: 6.4cqw; line-height: 1.1; font-weight: 600; color: #fff; }
.back__org span { display: block; font-style: italic; font-weight: 500; font-size: .62em; color: rgba(248, 245, 238, .75); margin-top: 1cqw; }
.back__years { margin: 4.5cqw 0 0; font-size: max(8.5px, 1.4cqw); letter-spacing: .4em; text-transform: uppercase; font-weight: 700; color: var(--gold-hi); }
.back__again { margin-top: 8cqw; padding: .9em 2.2em; font-size: max(10px, 1.4cqw); letter-spacing: .28em; text-transform: uppercase; border-radius: 99px; border: 1px solid rgba(230, 207, 148, .5); background: transparent; color: var(--gold-hi); cursor: pointer; transition: background .4s var(--ease); }
.back__again:hover { background: rgba(230, 207, 148, .12); }

/* ─── Contents ─────────────────────────── */
.pg--contents { justify-content: center; gap: 5cqw; padding-left: 9cqw; padding-right: 9cqw; }
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.toc button { width: 100%; display: grid; grid-template-columns: 6cqw 1fr auto; align-items: baseline; gap: 2cqw; padding: 2.1cqw 0; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; transition: color .3s var(--ease), padding .4s var(--ease); }
.toc button:hover { padding-left: 1cqw; }
.toc button:hover .toc__t { color: var(--gold-ink); }
.toc__n { font-size: max(9px, 1.4cqw); letter-spacing: .2em; color: var(--gold-ink); font-weight: 700; }
.toc__t { font-family: var(--serif); font-size: 3.6cqw; font-weight: 500; color: var(--navy-900); line-height: 1.15; transition: color .3s var(--ease); }
.toc__p { font-family: var(--serif); font-size: 3cqw; color: var(--ink-3); }

/* ─── Letter ───────────────────────────── */
.pg--letter { padding-left: 9cqw; padding-right: 9cqw; gap: 4cqw; }
.hd--letter { padding-top: 3cqw; }
.letter p { margin: 0 0 1.05em; font-family: var(--serif); font-size: 3.1cqw; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.dropcap::first-letter { float: left; font-size: 3.4em; line-height: .8; padding: .06em .08em 0 0; color: var(--gold-ink); font-weight: 600; }
.pg--letter-2 { justify-content: center; }
.letter .letter__close { font-style: italic; color: var(--navy-800); }
.sig { margin-top: 2cqw; padding-top: 3cqw; border-top: 1px solid var(--rule); }
.sig__name { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 5.4cqw; color: var(--navy-900); }
.sig__role { margin: .6cqw 0 0; font-size: max(8.5px, 1.35cqw); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }

/* ─── At a glance ──────────────────────── */
.pg--glance { justify-content: center; gap: 5cqw; padding-left: 8cqw; padding-right: 8cqw; }
.stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6cqw; }
.stat { padding: 2.6cqw 0 2.8cqw; border-top: 1px solid var(--rule); }
.stat__v { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 8.4cqw; line-height: 1; color: var(--navy-900); }
.stat__v--date { font-size: 4.6cqw; line-height: 1.2; padding: 1.4cqw 0 .9cqw; }
.stat__l { margin: 1cqw 0 0; font-size: max(9px, 1.55cqw); line-height: 1.45; color: var(--ink-2); }

/* ─── Pull quote ───────────────────────── */
.pull { margin: 0; padding: 0 4cqw; text-align: center; }
.pull p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 3.4cqw; line-height: 1.4; color: var(--navy-800); text-wrap: balance; }
.pull cite { display: block; margin-top: 1.6cqw; font-style: normal; font-size: max(8.5px, 1.3cqw); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }

/* ─── Giving figures ───────────────────── */
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 2.4cqw 0; }
.figures__v { margin: 0; font-family: var(--serif); font-size: 9cqw; line-height: 1; color: var(--navy-900); }
.figures__l { margin: .8cqw 0 0; font-size: max(8.5px, 1.35cqw); letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.pg > .body { margin: 0; color: var(--ink-2); }
.pg--relief { justify-content: center; gap: 5cqw; padding-left: 8cqw; padding-right: 8cqw; }
.pg--relief .figures { padding: 5cqw 0; }
.pg--relief .figures__v { font-size: 13cqw; }
.pg--relief > .body { font-family: var(--serif); font-size: 3.6cqw; line-height: 1.45; color: var(--ink); }

/* ─── Ministries ───────────────────────── */
.pg--ministries { justify-content: center; gap: 6cqw; padding-left: 8cqw; padding-right: 8cqw; }
.ministries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 6cqw; }
.ministries li { display: flex; align-items: center; gap: 3cqw; padding: 3.2cqw 0; border-top: 1px solid var(--rule); }
.ministries svg { width: 8cqw; height: 8cqw; padding: 1.8cqw; border-radius: 50%; background: var(--navy-900); color: var(--gold-hi); flex: none; }
.ministries span { font-family: var(--serif); font-size: 4cqw; font-weight: 500; color: var(--navy-900); line-height: 1.1; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
.tiles li { display: flex; align-items: center; gap: 2.4cqw; padding: 3cqw 3.4cqw; background: var(--navy-900); color: #fff; }
.tiles svg { width: 6cqw; height: 6cqw; color: var(--gold-hi); flex: none; }
.tiles span { font-family: var(--serif); font-size: 3.8cqw; font-weight: 500; }

/* ─── Route ────────────────────────────── */
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; position: relative; }
.route::before { content: ""; position: absolute; left: 4cqw; right: 4cqw; top: 3.3cqw; border-top: 1.5px dashed rgba(141, 106, 34, .45); }
.route li { position: relative; }
.route__pin { width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: var(--navy-900); display: grid; place-items: center; box-shadow: 0 0 0 1cqw var(--paper); margin-bottom: 2cqw; position: relative; }
.route__pin svg { width: 55%; height: 55%; color: var(--gold-hi); }
.route__when { margin: 0; font-size: max(8px, 1.25cqw); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.route__what { margin: .6cqw 0 0; font-family: var(--serif); font-size: 4cqw; font-weight: 600; line-height: 1.05; color: var(--navy-900); }

/* ─── Finale & colophon ────────────────── */
.page--finale { background: radial-gradient(ellipse 110% 80% at 50% 30%, var(--navy-700), var(--navy-900) 60%, var(--navy-950)); }
.finale { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10cqw 9cqw; }
.finale__mark { width: 12cqw; height: 12cqw; color: var(--gold-hi); margin-bottom: 7cqw; }
.refrain { margin: 0 0 8cqw; display: flex; flex-direction: column; gap: 1.4cqw; font-family: var(--serif); font-size: 4.2cqw; line-height: 1.3; color: rgba(248, 245, 238, .9); }
.continues { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 9.5cqw; line-height: 1.05; color: var(--gold-hi); }
.page.is-on .continues { transition-duration: 1.4s, 1.6s; }
.pg--colophon { justify-content: center; align-items: center; text-align: center; }
.colophon { max-width: 70cqw; }
.colophon__mark { width: 11cqw; height: 11cqw; color: var(--gold); margin-bottom: 5cqw; }
.colophon h3 { margin: 0 0 2cqw; font-size: max(9px, 1.5cqw); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.colophon p { margin: 0; font-family: var(--serif); font-size: 3.2cqw; line-height: 1.5; color: var(--ink); }
.colophon .colophon__org { margin-top: 9cqw; font-size: 3.6cqw; font-weight: 600; color: var(--navy-900); }
.colophon__org span { display: block; margin-top: 1cqw; font-family: var(--sans); font-size: max(8.5px, 1.3cqw); letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }

/* ═══ Tall single page (phones) ══════════════════════ */
@container (aspect-ratio < 0.7) {
  .page > * { font-size: max(12.5px, 3.5cqw); }
  .pg { padding: 12cqw 6cqw 11cqw; gap: 4cqw; }
  .pg--full { padding: 10cqw 4cqw 10cqw; gap: 3cqw; }
  /* on a tall page, photos run the full width of the page */
  .pg--gallery .fit { margin-left: -6cqw; margin-right: -6cqw; }
  .pg--gallery.pg--full .fit { margin-left: -4cqw; margin-right: -4cqw; }
  .rh { top: 5cqw; justify-content: center; font-size: max(7.5px, 2cqw) !important; }
  .rh span:first-child { display: none; }
  .folio { bottom: 4.5cqw; font-size: max(10px, 3cqw) !important; }
  .eyebrow { font-size: max(8.5px, 2.3cqw); }
  .big-title { font-size: 10cqw; }
  .hd__title { font-size: 8cqw; }
  .lead { font-size: 5.4cqw; }
  .lead--xl { font-size: 6.8cqw; }
  .numeral { font-size: 26cqw; }
  .cap { font-size: max(8px, 2.2cqw); }
  .op--full { display: flex; flex-direction: column; background: radial-gradient(ellipse 120% 70% at 50% 100%, var(--navy-800), var(--navy-900)); }
  .op--full .op__media { position: relative; inset: auto; aspect-ratio: var(--a); flex: none; }
  .op--full .op__veil { display: none; }
  .op--full .op__text, .op--top .op__text { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 6cqw 7cqw 8cqw; }
  .op__num { font-size: 6cqw; }
  .op__title { font-size: 11.5cqw; }
  .op__lede { font-size: 5.2cqw; }
  .credit-tag { font-size: max(7.5px, 2cqw) !important; }
  .cover__org { font-size: max(8.5px, 2.4cqw); }
  .cover__logo { width: 24cqw; }
  .cover__band { width: 8cqw; }
  .page--cover .cover { left: 8cqw; padding: 10cqw 6cqw; }
  .page--back .back { right: 8cqw; }
  .cover__frame { width: 100%; }
  .finale__logo { width: 26cqw; }
  .back__logo { width: 46cqw; }
  .endpaper__logo { width: 50cqw; }
  .colophon__logo { width: 32cqw; }
  .cover__title { font-size: 15cqw; }
  .cover__sub { font-size: 6.6cqw; }
  .cover__founded { font-size: max(8.5px, 2.2cqw); }
  .toc__t { font-size: 5.6cqw; }
  .toc__n, .toc__p { font-size: max(9px, 2.4cqw); }
  .toc button { grid-template-columns: 9cqw 1fr auto; padding: 3.4cqw 0; }
  .pg--letter { padding-left: 8cqw; padding-right: 8cqw; }
  .letter p { font-size: 4.25cqw; line-height: 1.55; }
  .hd--letter { padding-top: 0; }
  .pg--letter { gap: 3cqw; }
  .sig__name { font-size: 8cqw; }
  .sig__role { font-size: max(8px, 2.2cqw); }
  .stat__v { font-size: 12cqw; }
  .stat__v--date { font-size: 6.4cqw; }
  .stat__l { font-size: max(10px, 2.7cqw); }
  .pull p { font-size: 5cqw; }
  .pull cite { font-size: max(8px, 2.2cqw); }
  .figures__v { font-size: 12cqw; }
  .figures__l { font-size: max(8px, 2.2cqw); }
  .ministries { grid-template-columns: 1fr; }
  .ministries svg { width: 10.5cqw; height: 10.5cqw; padding: 2.4cqw; }
  .ministries span { font-size: 6cqw; }
  .ministries li { padding: 2.5cqw 0; }
  .pg--ministries { gap: 5cqw; }
  .tiles span { font-size: 5.2cqw; }
  .tiles svg { width: 8cqw; height: 8cqw; }
  .route { grid-template-columns: 1fr; gap: 4cqw; }
  .route::before { left: 5cqw; right: auto; top: 5cqw; bottom: 5cqw; border-top: 0; border-left: 1.5px dashed rgba(141, 106, 34, .45); }
  .route li { display: grid; grid-template-columns: 10cqw 1fr; column-gap: 4cqw; align-items: center; }
  .route__pin { width: 10cqw; height: 10cqw; margin: 0; grid-row: 1 / span 2; }
  .route__when { font-size: max(8px, 2.3cqw); }
  .route__what { font-size: 6.4cqw; }
  .refrain { font-size: 5.6cqw; }
  .continues { font-size: 13cqw; }
  .colophon p { font-size: 4.8cqw; }
  .colophon h3 { font-size: max(9px, 2.4cqw); }
  .colophon .colophon__org { font-size: 5.4cqw; }
  .back__org { font-size: 9cqw; }
}

/* Phones with the browser toolbar showing: tall, but a little short. Tighten the densest pages. */
@container page (aspect-ratio < 0.7) and (aspect-ratio > 0.62) {
  .toc button { padding: 2.4cqw 0; }
  .toc__t { font-size: 5.2cqw; }
  .pg--contents { gap: 3.5cqw; }
  .letter p { font-size: 4cqw; line-height: 1.5; }
  .portrait { width: min(46cqw, 32cqh * .675); }
  .ministries li { padding: 1.8cqw 0; }
  .ministries svg { width: 9cqw; height: 9cqw; padding: 2cqw; }
  .pg--ministries { gap: 4cqw; }
  .stat { padding: 1.3cqw 0 1.5cqw; }
  .stat__v { font-size: 10.5cqw; }
  .stat__v--date { font-size: 5.4cqw; padding: .8cqw 0 .4cqw; }
  .pg--glance { gap: 3.5cqw; }
}

/* Very small pages (a phone held sideways): relax the minimum type sizes so pages still fit. */
@container (max-height: 440px) {
  .page > * { font-size: 9.5px; }
  .eyebrow, .cap, .stat__l, .figures__l, .route__when, .toc__n, .sig__role { font-size: 7.5px; }
  .rh, .folio { font-size: 7.5px !important; }
  .stat { padding: 1.4cqw 0 1.6cqw; }
}

/* ─── Chrome at small sizes ─── */
@media (max-width: 560px) {
  :root { --bar-h: 44px; --nav-h: 58px; }
  .wordmark { font-size: 14px; gap: 7px; letter-spacing: .02em; white-space: nowrap; }
  .wordmark img { width: 24px; height: 24px; }
  .stage { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); }
  .nav { column-gap: 6px; }
  .nav__dot { width: 20px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --bar-h: 0px; --nav-h: 46px; }
  .topbar, .nav__label { display: none; }
  .nav__arrow { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .band .tile { opacity: 1 !important; transition: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .page.is-on .kb img { animation: none !important; }
  .intro__logo, .intro__years { animation: none; opacity: 1; }
  .book-host .stf__parent, .book-shadow { transition: none; }
}