/* Cape Hollow · specimen.css
   The lodge's day book, lit by the island's sun. One face (Piazzolla), one column with a margin,
   and a palette that specimen.js grades with the sun; the values below are the day page, which is
   also the page without JavaScript. */

@font-face { font-family: Piazzolla; src: url(/assets/fonts/specimen/piazzolla-var.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Piazzolla; src: url(/assets/fonts/specimen/piazzolla-var-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Piazzolla Fallback"; src: local("Georgia"); size-adjust: 86%; ascent-override: 111%; descent-override: 31%; line-gap-override: 0%; }

@property --ch-bg { syntax: "<color>"; inherits: true; initial-value: #EDEFE9; }
@property --ch-ink { syntax: "<color>"; inherits: true; initial-value: #1D2723; }
@property --ch-accent { syntax: "<color>"; inherits: true; initial-value: #4F6E5E; }
@property --ch-sand { syntax: "<color>"; inherits: true; initial-value: #D8C8AE; }
@property --ch-sky-top { syntax: "<color>"; inherits: true; initial-value: #BCC8D1; }
@property --ch-sky-mid { syntax: "<color>"; inherits: true; initial-value: #D3DAE0; }
@property --ch-sky-hz { syntax: "<color>"; inherits: true; initial-value: #E6E5E1; }
@property --ch-dark { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ch-lamp { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ch-w-h1 { syntax: "<number>"; inherits: true; initial-value: 200; }
@property --ch-w-h2 { syntax: "<number>"; inherits: true; initial-value: 260; }
@property --ch-w-body { syntax: "<number>"; inherits: true; initial-value: 380; }
@property --ch-shx { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ch-shy { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --ch-shb { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --ch-sha { syntax: "<number>"; inherits: true; initial-value: .14; }
@property --ch-lb { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --ch-ls { syntax: "<number>"; inherits: true; initial-value: 1; }

body.spec-cape-hollow { background: var(--ch-bg); }

/* ── tokens ─────────────────────────────────────────────────────────────────────────────────── */
.ch-page {
  --ch-ease: cubic-bezier(.2, .7, .1, 1);
  --ch-f: Piazzolla, "Piazzolla Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ch-rule: color-mix(in oklab, var(--ch-ink) 18%, var(--ch-bg));
  --ch-line: color-mix(in oklab, var(--ch-ink) 36%, var(--ch-bg));
  --ch-muted: color-mix(in oklab, var(--ch-ink) 72%, var(--ch-bg));
  --ch-link: color-mix(in oklab, var(--ch-accent) calc(100% - var(--ch-lamp) * 100%), var(--ch-ink));
  --ch-muted-t: color-mix(in oklab, var(--ch-muted) calc(100% - var(--ch-lamp) * 100%), var(--ch-ink));
  --ch-shc: color-mix(in oklab, var(--ch-ink) 72%, var(--ch-sky-hz));
  --ch-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --ch-gut: clamp(1.25rem, 1.157rem + .381vw, 1.5rem);
  --ch-gap: clamp(6rem, 3.771rem + 9.143vw, 12rem);
  --ch-headh: 48px;
  --ch-tp-pad: 72px;
  --ch-sun-on: 0;
  --ch-cols: [full-start] var(--ch-gut) [col-start gloss-start] minmax(0, 1fr) [col-end gloss-end] var(--ch-gut) [full-end];
  --ch-t-h1: clamp(4.75rem, 2.986rem + 7.238vw, 9.5rem);
  --ch-t-h2: clamp(2.25rem, 1.507rem + 3.048vw, 4.25rem);
  --ch-t-int: clamp(1.875rem, 1.271rem + 2.476vw, 3.5rem);
  --ch-t-first: clamp(1.313rem, 1.196rem + .476vw, 1.625rem);
  --ch-t-sun: clamp(1.25rem, 1.111rem + .571vw, 1.625rem);
  --ch-t-lede: clamp(1.125rem, 1.032rem + .381vw, 1.375rem);
  --ch-t-toc: clamp(1.188rem, 1.025rem + .667vw, 1.625rem);
  --ch-t-h3: clamp(1.375rem, 1.236rem + .571vw, 1.75rem);
  --ch-t-body: clamp(1.063rem, 1.016rem + .19vw, 1.188rem);
  --ch-t-small: clamp(.75rem, .704rem + .19vw, .875rem);
  --ch-t-cap: clamp(.688rem, .641rem + .19vw, .813rem);
  --ch-t-month: clamp(2rem, 1.629rem + 1.524vw, 3rem);
  --ch-t-date: clamp(1.188rem, 1.071rem + .476vw, 1.5rem);
  --ch-t-tiny: clamp(.625rem, .603rem + .09vw, .6875rem);
  --ch-wt: calc(340 + 30 * var(--ch-dark));
  --ch-ws: calc(400 + 30 * var(--ch-dark));
  --ch-wk: calc(520 + 20 * var(--ch-dark));
  position: relative;
  background: var(--ch-bg);
  color: var(--ch-ink);
  color-scheme: light;
  font-family: var(--ch-f);
  font-size: var(--ch-t-body);
  line-height: 1.62;
  font-weight: var(--ch-w-body);
  font-synthesis: none;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ch-page.ch-dark { color-scheme: dark; }
@media (min-width: 700px) {
  .ch-page { --ch-cols: [full-start] minmax(2.5rem, 1fr) [col-start gloss-start] minmax(0, 40rem) [col-end gloss-end] minmax(2.5rem, 1fr) [full-end]; }
}
@media (min-width: 1100px) {
  .ch-page { --ch-headh: 52px; --ch-cols: [full-start] minmax(1.25rem, 1fr) [col-start] minmax(0, 40rem) [col-end] minmax(2rem, 3.5rem) [gloss-start] minmax(0, 15rem) [gloss-end] minmax(1.25rem, 6.5rem) [full-end]; }
}
.ch-page.ch-ease {
  transition: --ch-bg 2s var(--ch-ease), --ch-ink 2s var(--ch-ease), --ch-accent 2s var(--ch-ease), --ch-sand 2s var(--ch-ease),
    --ch-sky-top 2s, --ch-sky-mid 2s, --ch-sky-hz 2s, --ch-dark 2s, --ch-lamp .4s, --ch-w-h1 2s, --ch-w-h2 2s, --ch-w-body 2s,
    --ch-shx 2s, --ch-shy 2s, --ch-shb 2s, --ch-sha 2s, --ch-lb 4s var(--ch-ease), --ch-ls 4s var(--ch-ease);
}
.ch-page.ch-lamping { transition: --ch-lamp 0s, --ch-lb 4s var(--ch-ease), --ch-ls 4s var(--ch-ease), --ch-sky-top 4s, --ch-sky-mid 4s, --ch-sky-hz 4s; }

.ch-page :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; }
.ch-page :where(ol, ul) { padding: 0; list-style: none; }
.ch-page :where(img, canvas, svg) { display: block; max-width: 100%; }
.ch-page ::selection { background: var(--ch-sand); color: var(--ch-ink); }
.ch-page a { color: var(--ch-link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: text-decoration-thickness .2s var(--ch-ease); }
.ch-page a:hover, .ch-page a:focus-visible { text-decoration-thickness: 2px; }
.ch-page :focus-visible { outline: 2px solid var(--ch-link); outline-offset: 3px; }
.ch-page [tabindex="-1"]:focus { outline: none; }
.ch-page time, .ch-num, .ch-folio, .ch-fig { font-variant-numeric: tabular-nums; }
.ch-page .ch-first time, .ch-page .ch-sun time, .ch-page .ch-tomorrow time, .ch-page .ch-cal-sum time { font-variant-numeric: normal; }
.ch-js-only { display: none; }
.ch-js .ch-js-only { display: revert; }
.ch-js .ch-nojs-only { display: none; }

/* shared voices: capitals, small type */
.ch-kicker, .ch-head-name, .ch-notes dt, .ch-ways thead th, .ch-toc-e, .ch-each-h, .ch-lbl, .ch-cal-grid th, .ch-year-months button {
  font-size: var(--ch-t-cap);
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: var(--ch-wk);
  font-variation-settings: "opsz" 8;
  font-variant-numeric: tabular-nums;
}
.ch-edition, .ch-cap, .ch-gloss, .ch-notes, .ch-chip, .ch-key, .ch-note, .ch-help, .ch-cal-key, .ch-cal-dst, .ch-year-key, .ch-year-day, .ch-each, .ch-hzr-note, .ch-sun-sm {
  font-size: var(--ch-t-small);
  line-height: 1.45;
  font-weight: var(--ch-ws);
  font-variation-settings: "opsz" 9;
}
.ch-g { text-decoration: underline dotted var(--ch-line); text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* ── the running head ─────────────────────────────────────────────────────────────────────────── */
.ch-head {
  position: sticky; top: var(--bar-h, 42px); z-index: 60;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  height: var(--ch-headh); padding-inline: var(--ch-gut);
  background: var(--ch-bg);
  border-bottom: 1px solid var(--ch-rule);
}
.ch-head-name { color: var(--ch-ink); text-decoration: none; justify-self: start; padding-block: 12px; }
.ch-page .ch-head-name { text-decoration-line: none; }
.ch-head-ch { display: none; }
.ch-head-t { display: inline-block; font-size: var(--ch-t-small); font-variation-settings: "opsz" 9; transition: opacity .3s var(--ch-ease); }
.ch-head-t.ch-fade { opacity: 0; }
.ch-head-t[data-tense="next"] { font-style: italic; }
.ch-head-r { display: flex; align-items: baseline; gap: 18px; justify-self: end; font-size: var(--ch-t-small); }
.ch-folio { color: var(--ch-muted-t); }
.ch-head-go { padding-block: 12px; }
.ch-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ch-link); transform-origin: 0 50%; transform: scaleX(var(--ch-prog, 0)); }
@supports (animation-timeline: scroll()) {
  .ch-progress { animation: ch-prog linear both; animation-timeline: scroll(root); }
}
@media (min-width: 700px) { .ch-progress { display: none; } }
@media (min-width: 1100px) {
  .ch-head { grid-template-columns: var(--ch-cols); padding: 0; }
  .ch-head-name { grid-column: col; grid-row: 1; }
  .ch-head-ch { display: block; grid-column: col; grid-row: 1; justify-self: center; margin: 0; }
  .ch-head-r { grid-column: gloss; grid-row: 1; }
}

/* ── the frontispiece and the title page ─────────────────────────────────────────────────────── */
.ch-now { position: relative; }
.ch-sky {
  position: relative; z-index: 0; overflow: hidden; container-type: size;
  height: 48svh; min-height: 300px;
  --ch-hz: calc(max(48svh, 300px) * .56);
  background: linear-gradient(to bottom, var(--ch-sky-top), var(--ch-sky-mid) 45%, var(--ch-sky-hz) var(--ch-hz));
}
.ch-sky-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ch-ease); }
.ch-gl .ch-sky-gl { opacity: 1; }
.ch-sun-css {
  position: absolute; left: var(--ch-sun-x, 50%); top: var(--ch-sun-y, 30%); width: 72px; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; opacity: var(--ch-sun-on);
  background: radial-gradient(closest-side, #FFFBF1 0 22%, rgb(255 243 220 / .6) 32%, rgb(255 236 206 / .18) 60%, transparent);
}
.ch-dust {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 22%, #F4F1E8 50%, transparent), radial-gradient(1px 1px at 38% 8%, #F4F1E8 50%, transparent),
    radial-gradient(1.4px 1.4px at 61% 31%, #FFF6E6 50%, transparent), radial-gradient(1px 1px at 83% 14%, #E8EEF8 50%, transparent),
    radial-gradient(1px 1px at 27% 47%, #F4F1E8 50%, transparent), radial-gradient(1px 1px at 72% 52%, #E8EEF8 50%, transparent),
    radial-gradient(1.2px 1.2px at 91% 38%, #F4F1E8 50%, transparent), radial-gradient(1px 1px at 49% 63%, #F4F1E8 50%, transparent);
  background-size: 190px 150px, 233px 171px, 277px 197px, 311px 223px, 167px 131px, 353px 241px, 211px 163px, 389px 269px;
  mask-image: linear-gradient(to bottom, #000 30%, transparent var(--ch-hz));
}
.ch-sky.ch-starry .ch-dust { opacity: .85; }
.ch-gl .ch-sun-css, .ch-gl .ch-dust { visibility: hidden; }
.ch-land {
  position: absolute; left: 50%; display: block;
  --w: max(100cqw, calc((100cqh - var(--ch-hz)) / .58 * 1.5));
  width: var(--w); height: calc(var(--w) / 1.5); top: calc(var(--ch-hz) - .42 * var(--w) / 1.5); translate: -50% 0;
  mask-image: linear-gradient(to bottom, transparent, #000 14%);
  filter: brightness(var(--ch-lb)) saturate(var(--ch-ls));
}
.ch-land img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ch-land::after { content: ""; position: absolute; inset: 0; background: var(--ch-sky-hz); mix-blend-mode: multiply; opacity: .34; }
.ch-lit .ch-land { mask-image: linear-gradient(to bottom, transparent 0 39%, #000 43%); }
.ch-hz-at { position: absolute; left: 0; top: var(--ch-hz); width: 1px; height: 0; }
.ch-chip {
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); margin: 0;
  padding: 7px 10px 8px; background: color-mix(in oklab, var(--ch-bg) 92%, transparent); color: var(--ch-ink);
}
.ch-chip-n { font-style: normal; }
.ch-js .ch-chip-l { display: none; }
.ch-fig { color: var(--ch-ink); }
.ch-js .ch-fig::before { content: " · "; }
@media (min-width: 700px) {
  .ch-chip { left: 24px; bottom: 24px; max-width: calc(100% - 48px); padding: 10px 14px 11px; }
  .ch-js .ch-chip-l { display: inline; }
  .ch-fig { display: block; color: var(--ch-muted-t); }
  .ch-js .ch-fig::before { content: none; }
}
@media (max-width: 700px) {
  .ch-land { --w: max(100cqw, calc((100cqh - var(--ch-hz)) / .58 * .75)); height: calc(var(--w) * 4 / 3); top: calc(var(--ch-hz) - .56 * var(--w)); }
}
@media (min-width: 701px) {
  .ch-sky { height: 54svh; --ch-hz: calc(max(54svh, 300px) * .56); }
}

.ch-tp { position: relative; z-index: 1; padding: 24px var(--ch-gut) 0; }
.ch-edition { font-style: italic; color: var(--ch-muted-t); }
.ch-kick-hero { margin-top: 14px; max-width: 34em; }
.ch-dot { padding-inline: .2em; }
#ch-title {
  margin-top: 14px;
  font-size: var(--ch-t-h1); line-height: .88; letter-spacing: -.02em;
  font-weight: var(--ch-w-h1); font-variation-settings: "opsz" 30;
  transform: translateY(var(--ch-h1-nudge, 0px));
}
.ch-h1-a, .ch-h1-b { display: block; }
.ch-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.ch-hzr-hero { grid-column: auto; }
.ch-first { margin-top: 24px; max-width: 30em; font-size: var(--ch-t-first); line-height: 1.36; font-weight: var(--ch-wt); font-variation-settings: "opsz" 24; text-wrap: pretty; }
/* the first sentence opens on a run-in ("It is"), not an initial: tracked capitals in the accent */
.ch-ri { font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: var(--ch-link); font-weight: calc(480 + 30 * var(--ch-dark)); font-variation-settings: "opsz" 12; }
.ch-lede { margin-top: 20px; max-width: 28em; font-style: italic; font-size: var(--ch-t-lede); line-height: 1.4; font-weight: calc(330 + 30 * var(--ch-dark)); font-variation-settings: "opsz" 22; }
.ch-from { margin-top: 20px; }
.ch-disc { display: inline-block; width: 6px; height: 6px; margin-right: .6em; border-radius: 50%; background: var(--ch-accent); vertical-align: .2em; }
@media (min-width: 700px) and (max-width: 1099px) {
  .ch-tp { padding: 40px max(2.5rem, calc((100% - 40rem) / 2)) 0; }
}
@media (min-width: 1100px) {
  .ch-now {
    --ch-hero-h: max(40rem, calc(100svh - var(--bar-h, 42px) - 52px), calc((9.5rem + 1.76 * var(--ch-t-h1)) / .54));
    --ch-hzy: calc(var(--ch-hero-h) * .54);
    display: grid; grid-template-columns: 55% 45%; min-height: var(--ch-hero-h);
  }
  .ch-sky { height: auto; min-height: 0; --ch-hz: var(--ch-hzy); }
  .ch-chip { left: 24px; bottom: max(24px, calc(100% - 100svh + var(--bar-h, 42px) + 76px)); }
  .ch-tp { display: grid; grid-template-rows: var(--ch-hzy) auto; align-content: start; padding: 0 var(--ch-tp-pad) 40px; }
  .ch-tp-top { align-self: end; }
  .ch-h1-b { margin-left: calc(-1 * var(--ch-tp-pad) - 48px); }
  .ch-h1-in .ch-h1-b { margin-left: 0; }
  .ch-hzr-hero { margin-left: calc(-1 * var(--ch-tp-pad)); }
  .ch-first { margin-top: 28px; }
}

/* drop caps */
.ch-dc::first-letter { float: left; margin: .06em .1em 0 0; font-size: 3.4em; line-height: .78; color: var(--ch-link); font-weight: calc(200 + 40 * var(--ch-dark)); font-variation-settings: "opsz" 30; }
@supports (initial-letter: 3) {
  .ch-dc::first-letter { float: none; margin: 0 .12em 0 0; font-size: inherit; line-height: inherit; initial-letter: var(--ch-dcl, 3); }
}

/* ── horizon rules and the sun marks on them ──────────────────────────────────────────────────── */
.ch-hzr { position: relative; height: 1px; background: var(--ch-line); scroll-margin-top: calc(var(--bar-h, 42px) + var(--ch-headh) + 40px); }
.ch-mark { display: none; position: absolute; top: 0; width: 7px; height: 7px; margin: -3px 0 0 -3.5px; border-radius: 50%; background: var(--ch-accent); translate: 0 var(--ch-lift, 0px); }
.ch-lit .ch-mark:not([hidden]) { display: block; }
.ch-mark.ch-sunk { background: var(--ch-bg); box-shadow: inset 0 0 0 1px var(--ch-accent); }
.ch-hzr-note { position: absolute; right: 0; top: 8px; color: var(--ch-muted-t); white-space: nowrap; }
@media (min-width: 1100px) {
  .ch-disc-on #ch-hzr-hero .ch-mark { display: none; }
}

/* ── sections: a column, and at 1100px a margin beside it ────────────────────────────────────── */
.ch-sec { display: grid; grid-template-columns: var(--ch-cols); padding-block-start: var(--ch-gap); scroll-margin-top: calc(var(--bar-h, 42px) + var(--ch-headh)); }
.ch-sec > *, .ch-spread > * { grid-column: col; min-width: 0; }
.ch-sec > .ch-hzr { grid-column: col-start / gloss-end; }
.ch-sec > .ch-kicker { margin-top: 16px; }
.ch-sec h2 { margin-top: 14px; font-size: var(--ch-t-h2); line-height: 1; letter-spacing: -.012em; font-weight: var(--ch-w-h2); font-variation-settings: "opsz" 30; text-wrap: balance; }
.ch-sun { margin-top: 20px; max-width: 30em; font-size: var(--ch-t-sun); line-height: 1.36; font-weight: var(--ch-wt); font-variation-settings: "opsz" 22; text-wrap: pretty; }
.ch-sun[data-tense="next"] { font-style: italic; }
.ch-sun[data-tense="now"]::before, .ch-skied[data-tense="now"] .ch-cap::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .55em; border-radius: 50%; background: var(--ch-accent); vertical-align: .22em; }
.ch-v { text-decoration: underline 1px transparent; text-underline-offset: .2em; transition: text-decoration-color 1.2s var(--ch-ease); }
.ch-sun { transition: opacity .6s var(--ch-ease); }
.ch-sun.ch-going { opacity: 0; transition-duration: .4s; }
.ch-sun.ch-turned .ch-v { text-decoration-color: var(--ch-accent); transition-duration: .2s; }
.ch-p { margin-top: .9em; max-width: 34em; text-wrap: pretty; }
.ch-sun + .ch-p, .ch-lastlight + .ch-p { margin-top: 32px; }
.ch-lastlight { margin-top: 12px; color: var(--ch-muted-t); }
.ch-h3 { font-size: var(--ch-t-h3); line-height: 1.2; font-weight: calc(330 + 30 * var(--ch-dark)); font-variation-settings: "opsz" 22; }

/* notes and glosses */
.ch-notes { margin-top: 48px; border-top: 1px solid var(--ch-rule); }
.ch-notes > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 10px 0 11px; border-bottom: 1px solid var(--ch-rule); }
.ch-notes dt { padding-top: .1em; }
.ch-notes dd { color: var(--ch-muted-t); }
.ch-gloss { margin-top: 1.1rem; padding-left: 14px; border-left: 1px solid var(--ch-rule); color: var(--ch-muted-t); max-width: 34em; }
.ch-gw { margin-right: .4em; font-style: italic; color: var(--ch-ink); }
.ch-glosses { display: grid; gap: 1.1rem; }
.ch-glosses .ch-gloss { margin-top: 0; }
.ch-sec > .ch-glosses { margin-top: 1.1rem; }
@media (min-width: 1100px) {
  .ch-ch > .ch-notes { grid-column: gloss; grid-row: 3 / span 2; align-self: start; margin-top: 24px; border: 0; }
  .ch-ch > .ch-notes > div { display: block; padding: 0 0 14px; border: 0; }
  .ch-ch > .ch-notes dt { margin-bottom: 1px; }
  .ch-sec > .ch-gloss, .ch-sec .ch-glosses { grid-column: gloss; align-self: start; }
  .ch-gloss { margin-top: 1.35rem; padding: 9px 0 0; border-left: 0; border-top: 1px solid var(--ch-rule); }
  .ch-sec > .ch-glosses { margin-top: 1.35rem; }
}

/* ── the prints, and the key light on them ───────────────────────────────────────────────────── */
.ch-print { margin-top: 56px; }
.ch-print + .ch-p { margin-top: 48px; }
.ch-pic { position: relative; isolation: isolate; --ch-depth: .5rem; }
.ch-print-big .ch-pic { --ch-depth: .9rem; }
.ch-pic::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ch-shc); opacity: var(--ch-sha);
  filter: blur(calc(4px + .35 * var(--ch-shb) * var(--ch-depth)));
  transform: translate(calc(var(--ch-shx) * var(--ch-depth)), min(12px, calc(var(--ch-shy) * var(--ch-depth))));
}
.ch-pin { position: relative; overflow: hidden; height: 100%; }
.ch-pin::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px var(--ch-accent); opacity: calc(.18 * var(--ch-dark)); }
.ch-pland { display: block; height: 100%; }
.ch-pland img { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(1 - .1 * var(--ch-dark))); }
.ch-skied .ch-pland { filter: brightness(var(--ch-plb, 1)) saturate(var(--ch-pls, 1)); }
.ch-psky {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 calc(var(--ch-phz, 40%) - 1.2%), transparent calc(var(--ch-phz, 40%) + .4%));
  transition: opacity 1.2s var(--ch-ease) .4s;
}
.ch-skied .ch-psky { opacity: 1; }
.ch-cap { margin-top: 20px; max-width: 34em; color: var(--ch-muted-t); }
.ch-skied[data-tense="next"] .ch-cap { font-style: italic; }
.ch-print-walk { grid-column: full; --ch-h: 32%; }
.ch-print-walk .ch-pic { aspect-ratio: 2 / 3; }
.ch-print-table { grid-column: full; --ch-h: 50%; }
.ch-print-table .ch-pic { aspect-ratio: 1; }
.ch-print-suite { grid-column: full; --ch-h: 44%; }
.ch-print-suite .ch-pic { aspect-ratio: 4 / 5; }
.ch-print-dusk { grid-column: full; --ch-h: 41%; }
.ch-print-dusk .ch-pic { aspect-ratio: 3 / 2; }
.ch-print-night { grid-column: full; --ch-h: 70%; margin-top: 64px; }
.ch-print-night .ch-pic { aspect-ratio: 3 / 4; }
.ch-print-night .ch-pland img { object-position: 50% 80%; }
.ch-spread { display: contents; }
@media (max-width: 699px) {
  .ch-print .ch-cap { padding-inline: var(--ch-gut); }
}
@media (min-width: 700px) {
  .ch-print-walk { grid-column: full-start / col-end; }
  .ch-print-walk .ch-pic { width: min(100%, 36rem); }
  .ch-print-walk .ch-cap { padding-inline: 24px; max-width: 32rem; }
  .ch-print-table { justify-self: center; width: min(45rem, 100%); margin-top: 72px; }
  .ch-print-suite { grid-column: col-start / full-end; }
  .ch-print-suite .ch-pic { aspect-ratio: 3 / 2; }
  .ch-print-dusk { grid-column: col-start / full-end; }
  .ch-print-dusk .ch-cap { max-width: 30rem; }
  .ch-print-night { display: grid; grid-template-columns: subgrid; }
  .ch-print-night > .ch-pic { grid-column: full; aspect-ratio: 2 / 1; }
  .ch-print-night > .ch-cap { grid-column: gloss; }
}
@media (min-width: 1100px) {
  .ch-print-dusk { margin-left: 10rem; }
  .ch-sec > .ch-each { grid-column: gloss; }
}
/* the suite print's caption row is shared: the caption in the column, "In each suite" in the margin */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1100px) {
    #ch-suites > .ch-print-suite { grid-row: 7 / span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
    .ch-print-suite > .ch-pic { grid-column: 1 / -1; grid-row: 1; }
    .ch-print-suite > .ch-cap { grid-column: col; grid-row: 2; align-self: start; }
    #ch-suites > .ch-each { grid-row: 8; align-self: start; margin-top: 20px; }
  }
}
@media (min-width: 1240px) {
  .ch-spread {
    display: grid; grid-column: full-start / gloss-end; margin-top: 56px;
    grid-template-columns: [pr-start] minmax(0, 1fr) [pr-end] 4.5rem [tx-start] 25.5rem [tx-end] 3.5rem [gl-start] 15rem [gl-end];
    grid-template-rows: 120px auto 1fr;
  }
  .ch-spread > .ch-print { grid-column: pr; grid-row: 1 / -1; margin-top: 0; }
  .ch-spread > .ch-print .ch-pic { width: 100%; }
  .ch-spread > .ch-p { grid-column: tx; grid-row: 2; margin-top: 0; }
  .ch-spread > .ch-glosses { grid-column: gl; grid-row: 2; margin-top: .3rem; }
}

/* ── contents: today's thread and the list ───────────────────────────────────────────────────── */
.ch-band-wrap { display: none; grid-column: full; margin-bottom: 48px; }
.ch-js .ch-band-wrap { display: block; }
.ch-band-box { position: relative; height: 32px; }
.ch-band { width: 100%; height: 100%; image-rendering: pixelated; }
.ch-band-box::after, .ch-year-box::after { content: ""; position: absolute; inset: 0; background-image: var(--ch-grain); opacity: .06; pointer-events: none; }
.ch-band-marks { position: absolute; inset: 0; }
.ch-band-tick { position: absolute; top: 100%; width: 1px; height: 7px; background: var(--ch-line); }
.ch-band-now { position: absolute; top: -5px; bottom: -5px; width: 1px; margin-left: -.5px; background: var(--ch-ink); box-shadow: 0 0 0 1px var(--ch-bg); }
.ch-band-lbl { display: flex; justify-content: space-between; margin-top: 12px; padding-inline: var(--ch-gut); font-size: var(--ch-t-tiny); letter-spacing: .02em; color: var(--ch-muted-t); }
@media (min-width: 700px) {
  .ch-band-wrap { grid-column: col-start / gloss-end; }
  .ch-band-box { height: 40px; }
  .ch-band-lbl { padding-inline: 0; }
}
.ch-toc { margin-top: 32px; }
.ch-toc li { position: relative; }
.ch-toc a {
  display: grid; grid-template-columns: auto minmax(1.5rem, 1fr) auto; align-items: baseline; column-gap: .6em;
  padding: .3em 0; color: var(--ch-ink); text-decoration-line: none;
  font-size: var(--ch-t-toc); line-height: 1.45; font-weight: calc(320 + 30 * var(--ch-dark)); font-variation-settings: "opsz" 22;
}
.ch-toc-t { grid-column: 1; }
.ch-toc-l { grid-column: 2; height: 3px; align-self: baseline; background: radial-gradient(circle, var(--ch-line) .9px, transparent 1.2px) 0 0 / 7px 3px repeat-x; }
.ch-toc-e { grid-column: 3; color: var(--ch-muted-t); }
.ch-toc-n { grid-column: 4; min-width: 4.3em; text-align: right; }
.ch-js .ch-toc a { grid-template-columns: auto minmax(1.5rem, 1fr) auto auto; }
.ch-toc-x a { grid-template-columns: auto minmax(1.5rem, 1fr) auto; }
.ch-js .ch-toc-x a { grid-template-columns: auto minmax(1.5rem, 1fr) auto 4.3em; }
.ch-toc a:hover .ch-toc-t, .ch-toc a:focus-visible .ch-toc-t { text-decoration: underline 1px var(--ch-link); text-underline-offset: .18em; }
.ch-toc li[data-tense="next"] :is(.ch-toc-t, .ch-toc-n) { font-style: italic; }
.ch-toc li[data-tense="now"]::before { content: ""; position: absolute; left: -15px; top: calc(.3em + .78lh); width: 6px; height: 6px; border-radius: 50%; background: var(--ch-accent); }
.ch-toc li[data-tense="now"] .ch-toc-e::after { content: " · now"; }
.ch-key { margin-top: 24px; max-width: 30em; color: var(--ch-muted-t); }
.ch-key i { color: var(--ch-ink); }
@media (max-width: 699px) {
  .ch-toc a, .ch-js .ch-toc a, .ch-toc-x a, .ch-js .ch-toc-x a { grid-template-columns: minmax(0, auto) minmax(1rem, 1fr) auto; row-gap: 0; }
  .ch-toc-e { grid-column: 1 / -1; grid-row: 1; font-size: var(--ch-t-tiny); margin-bottom: -.1em; }
  .ch-toc-n { grid-column: 3; min-width: 0; }
  .ch-toc-x .ch-toc-l { grid-column: 2 / -1; }
  .ch-toc li[data-tense="now"]::before { left: -13px; top: auto; bottom: calc(.3em + .5lh); }
}
@media (min-width: 1100px) {
  .ch-contents > .ch-key { grid-column: gloss; align-self: end; margin: 0 0 .5em; }
}

/* ── four ways to the sea ─────────────────────────────────────────────────────────────────────── */
.ch-ways-h { margin-top: 72px; }
.ch-ways-wrap { margin-top: 16px; }
.ch-ways { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; font-weight: var(--ch-ws); font-variation-settings: "opsz" 12; }
.ch-ways caption { caption-side: top; text-align: left; padding-bottom: 14px; font-size: var(--ch-t-small); color: var(--ch-muted-t); font-variation-settings: "opsz" 9; }
.ch-ways thead th { text-align: left; padding: 0 18px 10px 0; border-bottom: 1px solid var(--ch-sand); }
.ch-ways tbody th { font-style: italic; font-weight: var(--ch-ws); text-align: left; }
.ch-ways tbody :is(th, td) { padding: 14px 18px 15px 0; border-bottom: 1px solid var(--ch-sand); vertical-align: top; }
.ch-lbl { display: none; }
.ch-leave time { font-style: italic; white-space: nowrap; }
.ch-leave:not(:empty)::before { content: ", "; }
@media (min-width: 1100px) {
  .ch-ways-h, .ch-ways-wrap { grid-column: col-start / gloss-end; }
}
@media (max-width: 699px) {
  .ch-ways, .ch-ways tbody, .ch-ways tr, .ch-ways tbody th { display: block; }
  .ch-ways thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ch-ways caption { display: block; }
  .ch-ways tr { padding-bottom: 12px; }
  .ch-ways tbody th { padding: 22px 0 8px; border: 0; font-size: var(--ch-t-h3); line-height: 1.2; }
  .ch-ways tbody td { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 12px; padding: 9px 0 10px; border-bottom: 1px solid var(--ch-rule); }
  .ch-ways tbody tr > :last-child { border-bottom-color: var(--ch-sand); }
  .ch-lbl { display: block; grid-row: 1 / span 2; padding-top: .2em; color: var(--ch-muted-t); }
  .ch-leave { grid-column: 2; }
  .ch-leave:not(:empty)::before { content: none; }
}

/* ── noon, the afternoon, the interlude, dusk, night ─────────────────────────────────────────── */
.ch-each { margin-top: 32px; max-width: 30em; }
.ch-each-h { margin-bottom: 6px; }
.ch-each-l li { padding: 8px 0 9px; border-top: 1px solid var(--ch-rule); color: var(--ch-muted-t); }
.ch-golden .ch-interlude {
  grid-column: col-start / gloss-end; margin-block: clamp(4rem, 1.5rem + 10vw, 12rem);
  font-size: var(--ch-t-int); line-height: 1.12; letter-spacing: -.005em; font-style: italic; font-weight: 320;
  font-variation-settings: "opsz" 28; hanging-punctuation: first; text-wrap: balance; max-width: 22em;
}
.ch-rule-a { display: block; width: 160px; height: 1px; background: var(--ch-accent); }
.ch-sun-sm { margin-top: 20px; font-size: var(--ch-t-small); }
.ch-tomorrow { margin-top: 48px; max-width: 30em; font-style: italic; font-size: var(--ch-t-lede); line-height: 1.4; font-weight: calc(330 + 30 * var(--ch-dark)); font-variation-settings: "opsz" 22; }

/* ── the almanac: the year of threads, the month grid ────────────────────────────────────────── */
.ch-year-h { margin-top: 72px; }
.ch-note { margin-top: 10px; color: var(--ch-muted-t); }
.ch-year { margin-top: 40px; }
.ch-year-field { position: relative; }
.ch-year-lbl { display: none; }
.ch-year-mat { padding: 10px; background: var(--ch-sand); outline: 1px solid var(--ch-rule); }
.ch-year-box { position: relative; height: 148px; }
.ch-year-cv { width: 100%; height: 100%; cursor: pointer; image-rendering: auto; }
.ch-year-marks { position: absolute; inset: 0; pointer-events: none; }
.ch-yr-now { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ch-ink), 0 0 0 2px var(--ch-bg); opacity: 0; transition: opacity .6s var(--ch-ease) 1.4s; }
.ch-woven .ch-yr-now { opacity: 1; }
.ch-yr-step { position: absolute; bottom: calc(100% + 16px); height: 13px; padding-left: 5px; border-left: 1px solid var(--ch-line); font-size: var(--ch-t-tiny); line-height: 13px; font-style: italic; color: var(--ch-muted-t); white-space: nowrap; }
.ch-yr-veil { position: absolute; top: 0; bottom: 0; min-width: 2px; background: color-mix(in oklab, var(--ch-sand) 60%, transparent); box-shadow: inset 1px 0 var(--ch-accent), inset -1px 0 var(--ch-accent); }
.ch-year-months { display: grid; margin-top: 6px; }
.ch-year-months button {
  min-height: 44px; min-width: 0; padding: 0; border: 0; border-left: 1px solid var(--ch-rule); background: none; color: var(--ch-muted-t);
  font-family: var(--ch-f); letter-spacing: .04em; cursor: pointer; text-align: center;
}
.ch-year-months button:first-child { border-left: 0; }
.ch-year-months button:hover { color: var(--ch-ink); }
.ch-year-months button[aria-current="true"] { color: var(--ch-ink); box-shadow: inset 0 2px var(--ch-link); }
.ch-year-day { margin-top: 18px; color: var(--ch-ink); font-variant-numeric: tabular-nums; }
.ch-year-key { margin-top: 4px; color: var(--ch-muted-t); }
.ch-sw { display: inline-block; width: 10px; height: 10px; margin: 0 .35em 0 .5em; vertical-align: -1px; outline: 1px solid var(--ch-rule); }
.ch-sw:first-child { margin-left: 0; }
.ch-sw-n { background: #0F1724; } .ch-sw-t { background: #2A2F45; } .ch-sw-g { background: #F2E3CF; } .ch-sw-d { background: #EDEFE9; }
@media (min-width: 700px) {
  .ch-year { margin-top: 44px; }
  .ch-year-mat { padding: 12px; }
  .ch-year-box { height: 216px; }
}
@media (min-width: 1100px) {
  .ch-year, .ch-cal { grid-column: col-start / gloss-end; }
  /* the labels stand on the canvas (216px inside the 12px mat), each centred on its hour */
  .ch-year-lbl {
    display: block; position: absolute; right: calc(100% + 14px); top: 12px; height: 216px;
    margin: 0; font-size: var(--ch-t-tiny); line-height: 1; text-align: right; color: var(--ch-muted-t); white-space: nowrap;
  }
  .ch-year-lbl span { position: absolute; right: 0; translate: 0 -50%; }
  .ch-year-lbl span:nth-child(1) { top: 0; }
  .ch-year-lbl span:nth-child(2) { top: 25%; }
  .ch-year-lbl span:nth-child(3) { top: 50%; }
  .ch-year-lbl span:nth-child(4) { top: 75%; }
  .ch-year-lbl span:nth-child(5) { top: 100%; }
}

.ch-cal { margin-top: 72px; }
.ch-cal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ch-cal-month { font-size: var(--ch-t-month); line-height: 1; font-style: italic; font-weight: calc(260 + 40 * var(--ch-dark)); font-variation-settings: "opsz" 28; view-transition-name: ch-month-name; }
.ch-cal-nav { display: flex; gap: 6px; }
.ch-cal-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ch-rule); border-radius: 0; background: none; color: var(--ch-ink); cursor: pointer; }
.ch-cal-btn:hover:not(:disabled) { border-color: var(--ch-ink); }
.ch-cal-btn:disabled { opacity: .35; cursor: default; }
.ch-cal-key { margin-top: 10px; color: var(--ch-muted-t); }
.ch-cal-grid { width: 100%; margin-top: 20px; border-collapse: collapse; table-layout: fixed; view-transition-name: ch-month; }
.ch-cal-grid:focus-visible { outline: none; }
.ch-cal-grid th { padding: 0 0 8px 8px; text-align: left; color: var(--ch-muted-t); font-weight: var(--ch-wk); }
.ch-cal-grid abbr { text-decoration: none; }
.ch-cal-grid td {
  position: relative; height: 66px; padding: 6px 0 12px 6px; vertical-align: top; cursor: pointer; user-select: none; -webkit-user-select: none;
  border-top: 1px solid var(--ch-rule); border-left: 1px solid var(--ch-rule);
  transition: background-color .24s var(--ch-ease) calc(var(--ch-d, 0) * 1ms);
}
.ch-cal-grid td:first-child { border-left: 0; }
.ch-cal-grid td.ch-cd-x { cursor: default; }
.ch-cal-grid td:focus-visible { outline: 2px solid var(--ch-link); outline-offset: -2px; }
.ch-cd-n { display: block; font-size: var(--ch-t-date); line-height: 1; font-weight: calc(300 + 40 * var(--ch-dark)); font-variation-settings: "opsz" 18; font-variant-numeric: tabular-nums; }
.ch-cd-t { display: block; margin-top: 7px; font-size: var(--ch-t-tiny); line-height: 1.25; letter-spacing: .01em; font-weight: calc(460 + 30 * var(--ch-dark)); font-variation-settings: "opsz" 8; font-variant-numeric: tabular-nums; color: var(--ch-muted-t); }
.ch-cd-r, .ch-cd-s { display: block; width: max-content; }
.ch-cd-s { margin-top: 1px; padding-top: 1px; border-top: 1px solid var(--ch-rule); }
.ch-cd-f { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; outline: 1px solid var(--ch-sand); outline-offset: -1px; }
.ch-cal-grid td[aria-disabled="true"] { color: var(--ch-muted-t); cursor: default; }
.ch-cal-grid td[aria-disabled="true"] .ch-cd-f { opacity: .45; }
.ch-cal-grid td.ch-today { box-shadow: inset 0 0 0 1px var(--ch-line); }
.ch-cal-grid td.ch-sel { background: var(--ch-sand); }
.ch-cal-grid td.ch-sel .ch-cd-t { color: var(--ch-ink); }
.ch-cal-grid td:is(.ch-a, .ch-b) { box-shadow: inset 0 0 0 2px var(--ch-accent); }
.ch-cal-grid td:is(.ch-a, .ch-b) .ch-cd-n { font-weight: 500; }
.ch-cal-dst { margin-top: 14px; color: var(--ch-muted-t); }
.ch-cal-sum { margin-top: 18px; min-height: 1.6em; max-width: 36em; }
@media (min-width: 700px) {
  .ch-cal-grid th { padding-left: 10px; }
  .ch-cal-grid td { height: 96px; padding: 10px 10px 14px; }
  .ch-cd-t { position: absolute; right: 10px; bottom: 15px; margin: 0; text-align: right; }
  .ch-cd-r, .ch-cd-s { margin-left: auto; }
  .ch-cd-f { height: 6px; }
}
/* at night the fringe's day key would glare: it steps back and thins */
.ch-dark .ch-cd-f { opacity: .5; height: 4px; }
.ch-dark .ch-cal-grid td[aria-disabled="true"] .ch-cd-f { opacity: .28; }
/* at 1100px sunrise and sunset are the point of the cell: larger, sunrise in ink, sunset muted */
@media (min-width: 1100px) {
  .ch-cd-t { font-size: .8125rem; line-height: 1.3; letter-spacing: 0; font-weight: calc(460 + 30 * var(--ch-dark)); font-variation-settings: "opsz" 11; }
  .ch-cal-grid td:not([aria-disabled="true"]) .ch-cd-r { color: var(--ch-ink); }
  .ch-cd-s { margin-top: 2px; padding-top: 2px; }
}
::view-transition-group(ch-month), ::view-transition-group(ch-month-name) { animation: none; }
::view-transition-old(ch-month), ::view-transition-new(ch-month), ::view-transition-old(ch-month-name), ::view-transition-new(ch-month-name) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* ── the form ─────────────────────────────────────────────────────────────────────────────────── */
.ch-enquire { margin-top: 96px; scroll-margin-top: calc(var(--bar-h, 42px) + var(--ch-headh) + 32px); }
.ch-form-lead { margin-top: 12px; }
.ch-form { display: grid; gap: 28px; margin-top: 36px; max-width: 40rem; }
.ch-pair { display: grid; gap: 28px; }
.ch-field { display: grid; gap: 4px; align-content: start; }
.ch-field > label, .ch-f-set legend { font-size: var(--ch-t-small); line-height: 1.4; font-weight: calc(460 + 30 * var(--ch-dark)); font-variation-settings: "opsz" 9; }
.ch-form :is(input:not([type="checkbox"]), textarea) {
  width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ch-line); border-radius: 0; background: transparent;
  color: var(--ch-ink); font: inherit; font-size: 1.0625rem; font-weight: var(--ch-w-body);
}
.ch-form textarea { resize: vertical; line-height: 1.5; }
.ch-form :is(input, textarea):focus-visible { outline: 2px solid var(--ch-link); outline-offset: 3px; border-bottom-color: transparent; }
.ch-form input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.ch-form input[type="number"]::-webkit-inner-spin-button, .ch-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ch-step { display: flex; align-items: stretch; width: max-content; border-bottom: 1px solid var(--ch-line); }
.ch-form .ch-step input { width: 3.5rem; border: 0; text-align: center; font-variant-numeric: tabular-nums; }
.ch-step-b { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ch-ink); cursor: pointer; }
.ch-step-b:hover { color: var(--ch-link); }
.ch-f-set { margin: 0; padding: 0; border: 0; gap: 2px; }
.ch-f-set legend { padding: 0; margin-bottom: 8px; }
.ch-check { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; }
.ch-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ch-accent); flex: none; }
.ch-help { color: var(--ch-muted-t); }
.ch-send-row { margin-top: 4px; }
.ch-send {
  min-height: 50px; padding: 13px 30px; border: 1px solid var(--ch-ink); border-radius: 0; background: var(--ch-ink); color: var(--ch-bg);
  font: inherit; font-size: var(--ch-t-body); font-weight: var(--ch-w-body); cursor: pointer; transition: background-color .2s var(--ch-ease), color .2s var(--ch-ease);
}
.ch-send:hover { background: transparent; color: var(--ch-ink); }
.ch-status { min-height: 1.6em; }
@media (max-width: 699px) { .ch-send { width: 100%; } }
@media (min-width: 700px) { .ch-pair { grid-template-columns: 1fr 1fr; } }

/* ── colophon ─────────────────────────────────────────────────────────────────────────────────── */
.ch-colophon { padding-bottom: clamp(5rem, 3rem + 6vw, 8rem); }
.ch-colo { margin-top: 32px; font-size: clamp(.9375rem, .9rem + .12vw, 1.0625rem); line-height: 1.55; }
.ch-colo p + p { margin-top: .8em; }
.ch-colo-n { font-variant-numeric: tabular-nums; }
.ch-last { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-top: 72px; padding-top: 22px; border-top: 1px solid var(--ch-line); }
.ch-last-a { font-size: var(--ch-t-h3); line-height: 1.2; font-weight: var(--ch-w-h2); font-variation-settings: "opsz" 28; }
.ch-last-b { font-size: var(--ch-t-small); color: var(--ch-muted-t); }
@media (min-width: 1100px) {
  .ch-colo { grid-column: col-start / gloss-end; columns: 2; column-gap: 56px; }
  .ch-colo p { break-inside: avoid; }
  .ch-last { grid-column: col-start / gloss-end; }
}

/* ── motion: on load, on scroll, and nothing at all when asked ───────────────────────────────── */
@keyframes ch-up { from { opacity: 0; translate: 0 8px; } }
@keyframes ch-fade { from { opacity: 0; } }
@keyframes ch-lift { from { mask-position: 0 0; } to { mask-position: 0 100%; } }
@keyframes ch-draw { from { scale: 0 1; } }
@keyframes ch-clip { from { clip-path: inset(var(--ch-h) 0 calc(100% - var(--ch-h)) 0); } to { clip-path: inset(0); } }
@keyframes ch-settle { from { scale: 1.03; } }
@keyframes ch-weave { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes ch-wt { from { font-weight: 220; } to { font-weight: 320; } }
@keyframes ch-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .ch-h1-a, .ch-h1-b, .ch-rv-lift { mask-image: linear-gradient(to top, #000 40%, transparent 60%); mask-size: 100% 250%; mask-repeat: no-repeat; mask-position: 0 100%; }
  .ch-h1-a { animation: ch-lift 1.1s var(--ch-ease) both; }
  .ch-h1-b { animation: ch-lift 1.1s var(--ch-ease) .18s both; }
  .ch-hzr-hero { transform-origin: 0 50%; animation: ch-draw 1.2s var(--ch-ease) .3s both; }
  .ch-first { animation: ch-up .7s var(--ch-ease) .9s both; }
  .ch-lede { animation: ch-up .7s var(--ch-ease) 1s both; }
  .ch-from { animation: ch-up .7s var(--ch-ease) 1.1s both; }
  .ch-woven .ch-year-cv { animation: ch-weave 1.4s var(--ch-ease) both; }

  @supports (animation-timeline: view()) {
    /* text finishes arriving early, so nothing low in the viewport is left ghosted; only the prints'
       horizon clip stays scrubbed through the scroll */
    .ch-rv { animation: ch-up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .ch-rv-lift { animation-name: ch-lift; }
    .ch-rv-print { animation: none; }
    .ch-rv-print .ch-pin { animation: ch-clip linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
    .ch-rv-print .ch-pland { animation: ch-settle linear both; animation-timeline: view(); animation-range: entry 5% cover 50%; }
    .ch-golden .ch-interlude { animation: ch-wt linear both; animation-timeline: view(); animation-range: cover 15% cover 60%; }
  }
  .ch-io .ch-rv { opacity: 0; translate: 0 8px; transition: opacity .7s var(--ch-ease), translate .7s var(--ch-ease); }
  .ch-io .ch-rv-lift { opacity: 1; translate: none; mask-position: 0 0; transition: mask-position 1.1s var(--ch-ease); }
  .ch-io .ch-rv-print { opacity: 1; translate: none; }
  .ch-io .ch-rv-print .ch-pin { clip-path: inset(var(--ch-h) 0 calc(100% - var(--ch-h)) 0); transition: clip-path 1.4s var(--ch-ease); }
  .ch-io .ch-rv-print .ch-pland { scale: 1.03; transition: scale 2.2s var(--ch-ease); }
  .ch-io .ch-rv.ch-in { opacity: 1; translate: none; mask-position: 0 100%; }
  .ch-io .ch-rv-print.ch-in .ch-pin { clip-path: inset(0); }
  .ch-io .ch-rv-print.ch-in .ch-pland { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-page, .ch-page *, .ch-page *::before, .ch-page *::after { transition: none !important; animation: none !important; }
  .ch-progress { display: none; }
}

/* the page runs to the window's edges: no browser margin around the specimen */
body.spec-cape-hollow { margin: 0; }