@font-face { font-family: "Geist"; font-weight: 300 600; font-display: swap; src: url("../fonts/geist-latin.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400 500; font-display: swap; src: url("../fonts/geist-mono-latin.woff2") format("woff2"); }

/* Monochrome throughout. The only colour on the page is the clients' own photographs. */
:root {
  --ink: #0b0b0b;
  --ivory: #f2f0ec;
  --muted: #bdbab4;
  --dim: #8a8782;
  --hair: rgb(242 240 236 / 0.18);
  --paper: #f2f0ec;
  --paper-ink: #111;
  --paper-muted: #55524d;
  --paper-hair: rgb(17 17 17 / 0.14);
  --m: clamp(22px, 5vw, 96px);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); color: var(--ivory); overflow-anchor: none; } /* the page keeps the reader's place itself */
body { font-family: "Geist", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; }
ol { list-style: none; }
.skip { position: absolute; left: -200vw; }
.skip:focus { left: var(--m); top: 12px; z-index: 60; background: var(--ivory); color: var(--ink); padding: 8px 12px; }

/* Chrome: ivory on its own dark band over the paintings, ink on a paper band over Results. */
.top { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: 26px var(--m) 34px; font-size: 15px; color: var(--ivory); background: linear-gradient(to bottom, rgb(11 11 11 / 0.92), rgb(11 11 11 / 0.78) 62%, rgb(11 11 11 / 0)); transition: transform 0.35s var(--ease), color 0.3s; }
.top.paper { color: var(--paper-ink); background: linear-gradient(to bottom, rgb(242 240 236 / 0.95), rgb(242 240 236 / 0.85) 62%, rgb(242 240 236 / 0)); }
.top.away { transform: translateY(-110%); }
.nav { display: flex; gap: 28px; }
.nav a { opacity: 0.85; }
.nav .cta { opacity: 1; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.index { position: fixed; left: clamp(12px, calc(var(--m) - 56px), 30px); top: 50%; transform: translateY(-50%); z-index: 40; color: var(--ivory); text-shadow: 0 0 8px rgb(11 11 11 / 0.9); }
/* a soft ink band keeps the numerals readable over a light passage of a painting */
/* (solid under the numerals, then fading out 8px before the copy's margin, so it never paints over the copy) */
.index::before { content: ""; position: absolute; z-index: -1; left: -30px; width: calc(var(--m) + 22px - clamp(12px, calc(var(--m) - 56px), 30px)); top: -24px; bottom: -24px; background: linear-gradient(to right, rgb(11 11 11 / 0.8) 64px, rgb(11 11 11 / 0)); -webkit-mask: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); mask: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); pointer-events: none; }
.index.paper { color: var(--paper-ink); text-shadow: none; }
.index.paper::before { background: none; }
.index ol { display: grid; gap: 14px; }
.index a { display: flex; gap: 12px; font: 500 11px/1 "Geist Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.78; padding: 3px 0; }
.index a:focus-visible { opacity: 1; }
.index i { font-style: normal; width: 2.6em; }
.index span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.index li.on a { opacity: 1; }
.index a:hover { opacity: 1; }
.index.off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--ease), visibility 0s 0.3s; }

/* Type scale */
.label { font: 500 11px/1 "Geist Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 28px; }
.display { font-size: clamp(46px, 5.4vw, 104px); font-weight: 500; line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.headline { font-size: var(--hs, clamp(34px, 3.75vw, 72px)); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.headline--doctrine { font-size: var(--hs, clamp(30px, 3.1vw, 60px)); }
.lead { font-size: clamp(17px, 1.15vw, 22px); color: var(--muted); margin-top: 1.5em; max-width: 26em; }
.actions { display: flex; gap: 28px; align-items: center; margin-top: 2.2rem; flex-wrap: wrap; }
.btn { background: var(--ivory); color: var(--ink); font-weight: 500; font-size: 15px; padding: 15px 24px; }
.text { font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
.lines { margin-top: 2.6rem; }
.lines li { display: flex; gap: 24px; padding: 15px 0; font-size: clamp(15px, 1.05vw, 20px); color: var(--muted); }
.lines i, .fronts dt, th { font: 500 11px/2 "Geist Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-style: normal; }
.lines i { width: 2.4em; flex: none; }
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 2.8rem; padding-top: 22px; }
.method h3 { font-size: clamp(20px, 1.5vw, 28px); font-weight: 500; letter-spacing: -0.02em; }
.method p { font-size: 15px; color: var(--muted); margin-top: 8px; }
.fronts { margin-top: 2.2rem; }
.fronts div { display: flex; gap: 24px; padding: 12px 0; }
.fronts dt { width: 8em; flex: none; }
.fronts dd { font-size: clamp(15px, 0.95vw, 18px); color: var(--muted); }
table { margin-top: 2.6rem; border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 20px 0; vertical-align: top; }
th { width: 10em; font-weight: 500; }
td { font-size: clamp(16px, 1.05vw, 20px); color: var(--muted); }

/* Chapters: each holds while its painting settles and its lines arrive. */
.ch { position: relative; height: 280vh; }
.ch--hero { height: 300vh; }
.ch--results { height: 240vh; }
.ch--ink { height: 200vh; }
/* each chapter begins as the last one ends, so one fades straight into the next */
.ch + .ch { margin-top: -100vh; }
/* The pinned frame fills the screen even when a phone's toolbar has slid away (100lvh); the text sits in
   .stage, the part of the screen that stays visible with the toolbar showing (100svh). Desktop: both are 100vh. */
.pin { background: var(--ink); position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: clip; isolation: isolate; } /* each frame keeps its layers to itself */
.cam { position: absolute; inset: 0; }
.cam img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; max-width: none; }
.shade { position: absolute; inset: 0; pointer-events: none; }
.stage { position: absolute; inset: 0 0 auto 0; height: 100vh; height: 100svh; z-index: 3; }
.side-left .shade { background: linear-gradient(to bottom, rgb(11 11 11 / 0.6), rgb(11 11 11 / 0) 18%), linear-gradient(to right, rgb(11 11 11 / 0.88), rgb(11 11 11 / 0.55) 30%, rgb(11 11 11 / 0) 58%), linear-gradient(to top, rgb(11 11 11 / 0.6), rgb(11 11 11 / 0) 35%); }
.side-right .shade { background: linear-gradient(to bottom, rgb(11 11 11 / 0.6), rgb(11 11 11 / 0) 18%), linear-gradient(to left, rgb(11 11 11 / 0.88), rgb(11 11 11 / 0.55) 30%, rgb(11 11 11 / 0) 58%), linear-gradient(to top, rgb(11 11 11 / 0.6), rgb(11 11 11 / 0) 35%); }
.side-right-bottom .shade, .side-bottom-left .shade { background: linear-gradient(to bottom, rgb(11 11 11 / 0.6), rgb(11 11 11 / 0) 18%), linear-gradient(to top, rgb(11 11 11 / 0.92), rgb(11 11 11 / 0.6) 34%, rgb(11 11 11 / 0) 62%); }
.copy { position: absolute; z-index: 3; width: var(--cw, 44vw); }
.side-left .copy { left: var(--m); top: 50%; transform: translateY(-50%); }
.side-right .copy { right: var(--m); top: 50%; transform: translateY(-50%); }
.side-right-bottom .copy { right: var(--m); bottom: 120px; width: var(--cw, 46vw); }
.side-bottom-left .copy { left: var(--m); bottom: 120px; }
.copy[style*="bottom"] { top: auto; transform: none; }
.credit { position: absolute; right: var(--m); bottom: 26px; z-index: 3; font: 400 10px/1.4 "Geist Mono", monospace; letter-spacing: 0.06em; color: var(--muted); background: rgb(11 11 11 / 0.6); padding: 3px 7px; }
.ch--art .label { color: var(--ivory); }
.ch--art .fronts dt, .ch--art .lines i, .ch--art th { color: var(--muted); }
.cam img { object-fit: cover; }
.cam .ns { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* chapter numbers count only the chapters a screen shows */
main { counter-reset: chapter; }
.ch.numbered { counter-increment: chapter; }
.no::before { content: counter(chapter, upper-roman); }

/* Results: the site's usual light page, the men in colour. Photos at their own size. */
.ch--results .pin { background: var(--paper); color: var(--paper-ink); }
.ch--results .copy { left: var(--m); top: 15vh; width: auto; }
.ch--results .label { color: var(--paper-muted); }
.men-wrap { position: absolute; left: var(--m); right: var(--m); bottom: 8vh; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.men { display: flex; gap: clamp(16px, 2.2vw, 40px); justify-content: flex-start; }
.man .pair { display: flex; gap: 6px; }
.man figure { position: relative; }
.man img { width: min(270px, 13vw); height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.man figcaption { margin-top: 6px; font: 500 10px/1 "Geist Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-muted); }
.man p { margin-top: 14px; max-width: calc(2 * min(270px, 13vw) + 6px); font-size: 15px; line-height: 1.45; color: var(--paper-muted); }
.man p i { font: 500 11px/1 "Geist Mono", monospace; letter-spacing: 0.14em; color: var(--paper-muted); font-style: normal; margin-right: 10px; }
.man p b { font-weight: 500; color: var(--paper-ink); }
.man .note { margin-top: 6px; font-size: 13px; }

/* Terms: plain ink with a hairline grid. */
.ch--ink .copy { left: var(--m); top: 50%; transform: translateY(-50%); width: min(900px, 60vw); }
.grid { position: absolute; inset: 0; background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size: calc((100vw - 2 * var(--m)) / 12) 25vh; background-position: var(--m) 0; opacity: 0.3; }

/* Reveal: items start hidden only when the script runs; the script sets them each frame. */
.js .rv { opacity: 0; }
/* if the script fails, everything is simply shown */
.ol-failed .rv { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.ol-failed .open { display: none; }
.ol-failed .ch { pointer-events: auto !important; }
.ol-failed .pin { opacity: 1 !important; }
.ol-failed .cam img, html:not(.ol-run) .cam img { width: 100% !important; height: 100% !important; transform: none !important; opacity: 1 !important; }

/* A chapter whose text cannot fit the screen (short or zoomed screens, Results on phones) stops pinning
   and simply flows, so no text is ever cut off. The script decides chapter by chapter; without the
   script (or after it fails) every chapter flows. */
.ch.flow, html:not(.ol-run) .ch { height: auto !important; margin-top: 0 !important; }
.ch.after-flow { margin-top: 0 !important; } /* the chapter after a flowing one slides up like a page section */
.ch.flow .pin, html:not(.ol-run) .ch .pin { position: relative; height: auto; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 110px 0 56px; }
.ch--results.flow .pin, .ch--ink.flow .pin, html:not(.ol-run) .ch--results .pin, html:not(.ol-run) .ch--ink .pin { justify-content: flex-start; padding-top: 104px; }
/* a flowing frame's painting fills one screen and fades into ink below, so a tall chapter has no hard edge */
.ch.flow .cam, html:not(.ol-run) .ch .cam { bottom: auto; height: 100vh; height: 100lvh; -webkit-mask: linear-gradient(#000 55%, transparent) no-repeat; mask: linear-gradient(#000 55%, transparent) no-repeat; }
.ch.flow .stage, html:not(.ol-run) .ch .stage { position: relative; inset: auto; height: auto; display: flex; flex-direction: column; }
.ch.flow .copy, .ch.flow .copy[style], .ch.flow .men-wrap, html:not(.ol-run) .ch .copy, html:not(.ol-run) .ch .copy[style], html:not(.ol-run) .ch .men-wrap { position: relative; inset: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: auto !important; margin: 0 var(--m); }
.ch.flow .men-wrap, html:not(.ol-run) .ch .men-wrap { margin-top: 20px; }
.ch.flow .credit, html:not(.ol-run) .ch .credit { position: relative; inset: auto; margin: 18px var(--m) 0; align-self: flex-end; }

/* Opening frame */
.open { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: var(--ink); }
.open__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.open__line { fill: none; stroke: var(--ivory); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.open__label { position: absolute; font: 500 11px/1 "Geist Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory); opacity: 0; }
.open__label--tl { left: calc(var(--m) + 14px); top: calc(var(--m) + 12px); }
.open__label--tr { right: calc(var(--m) + 14px); top: calc(var(--m) + 12px); }
.open__label--bl { left: calc(var(--m) + 14px); bottom: calc(var(--m) + 12px); }
.open__label--br { right: calc(var(--m) + 14px); bottom: calc(var(--m) + 12px); }
.open.done { display: none; }
.js .open { animation: open-fallback 0.4s linear 4.5s forwards; }
@keyframes open-fallback { to { opacity: 0; visibility: hidden; } }
html:not(.js) .open { display: none; }

/* Phone */
@media (max-aspect-ratio: 1/1) {
  .index { display: none; }
  .copy, .side-right .copy, .side-left .copy, .side-right-bottom .copy, .side-bottom-left .copy, .copy[style] { left: var(--m); right: var(--m); width: auto; top: auto; bottom: 64px; transform: none; }
  /* the lower shade starts just above the copy (--ct, set by the script), so the text never sits on a lit passage */
  .ch--art .shade { background: linear-gradient(to bottom, rgb(11 11 11 / 0.6), rgb(11 11 11 / 0) 16%), linear-gradient(to bottom, rgb(11 11 11 / 0) calc(var(--ct, 40svh) - 72px), rgb(11 11 11 / 0.72) var(--ct, 40svh), rgb(11 11 11 / 0.94) calc(var(--ct, 40svh) + 160px)); }
  .headline, .copy[style] .headline { font-size: 34px; }
  .headline--doctrine { font-size: 30px; }
  .lines { margin-top: 1.4rem; }
  .lines li { font-size: 15px; padding: 10px 0; gap: 14px; }
  .method { grid-template-columns: 1fr; gap: 10px; margin-top: 1.4rem; padding-top: 12px; }
  .method h3 { font-size: 20px; }
  .method p { font-size: 14px; margin-top: 2px; }
  .fronts { margin-top: 1.2rem; }
  .fronts div { padding: 8px 0; }
  .credit { left: var(--m); right: var(--m); bottom: 16px; }
  .ch--results .copy { top: 112px; bottom: auto; }
  .men-wrap { top: 200px; bottom: auto; }
  .men { flex-direction: column; gap: 18px; }
  .man { display: flex; gap: 12px; align-items: flex-start; }
  .man img { width: 22vw; }
  .man p { margin-top: 0; font-size: 13px; max-width: none; }
  .man .note { font-size: 12px; }
  .ch--ink .copy { top: 120px; bottom: auto; transform: none; width: auto; right: var(--m); }
}

@media (prefers-reduced-motion: reduce) {
  .open { display: none; }
  .cam img { will-change: auto; }
}

/* Production: links, phone-only parts and the footer. */
a.btn, a.text { text-decoration: none; }
a.btn:focus-visible, a.text:focus-visible, .nav a:focus-visible, .foot a:focus-visible, .index a:focus-visible, .mark:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.skip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ch--results a:focus-visible { outline-color: var(--paper-ink); }
a.text:hover { color: var(--ivory); border-bottom-color: var(--ivory); }
a.btn:hover { background: #fff; }
.text { position: relative; }
.text::after { content: ""; position: absolute; inset: -12px -0.25rem; } /* a finger-sized target, as on the live site */
.only-phone { display: none; }
.men__link { color: var(--paper-muted); border-bottom: 1px solid var(--paper-hair); }
.ch--results a.text:hover { color: var(--paper-ink); border-bottom-color: var(--paper-ink); }

.foot { position: relative; z-index: 5; background: var(--ink); color: var(--muted); padding: clamp(48px, 7vw, 96px) var(--m) 40px; font-size: 14px; line-height: 1.6; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 900px; margin-bottom: 48px; }
.foot .label { margin-bottom: 16px; }
.foot ul { list-style: none; display: grid; gap: 0; }
.foot a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.foot__col a { display: inline-block; padding-block: 11px; } /* finger-sized, as on the live site */
.foot a:hover { color: var(--ivory); }
.foot > p { max-width: 62ch; margin-top: 12px; }
.foot__scope, .foot__credit { color: var(--dim); }
.foot__legal { color: var(--dim); margin-top: 24px !important; }

/* Phones: the live site's 34rem breakpoint. Same sections hidden, same five-link header, wrapped. */
@media (max-width: 34rem) {
  .not-phone { display: none !important; }
  .only-phone { display: inline-block; }
  .top { flex-wrap: wrap; row-gap: 8px; padding: 16px var(--m); }
  /* over a flowing Results the photos pass under the two-row header: the paper stays opaque to the nav row's foot */
  .top.paper { background: linear-gradient(to bottom, rgb(242 240 236 / 0.95), rgb(242 240 236 / 0.93) 84%, rgb(242 240 236 / 0)); }
  .nav { width: 100%; justify-content: space-between; gap: 0; font-size: 14px; }
  .nav a { padding-block: 6px; position: relative; }
  .nav a::after { content: ""; position: absolute; inset: -6px -4px -8px; }
  .nav .cta { padding-bottom: 6px; }
  .foot__cols { grid-template-columns: 1fr; gap: 28px; }
}
/* Phones on their side: desktop paintings, compact type that fits a short screen. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .index { display: none; }
  .top { padding: 14px var(--m); }
  .nav a { position: relative; }
  .nav a::after { content: ""; position: absolute; inset: -13px -6px; }
  .display { font-size: 34px; }
  .headline, .copy[style] .headline { font-size: 24px; }
  .headline--doctrine { font-size: 22px; }
  .label { margin-bottom: 10px; }
  .lead { font-size: 15px; margin-top: 10px; }
  .actions { margin-top: 14px; }
  .lines { margin-top: 10px; }
  .lines li { font-size: 13px; padding: 6px 0; }
  .method { margin-top: 10px; padding-top: 8px; gap: 14px; }
  .method h3 { font-size: 16px; }
  .method p { font-size: 12px; margin-top: 2px; }
  .fronts { margin-top: 8px; }
  .fronts div { padding: 4px 0; }
  .fronts dd { font-size: 13px; }
  table { margin-top: 10px; }
  th, td { padding: 8px 0; }
  td { font-size: 14px; }
  .ch .copy, .copy[style] { top: 56%; bottom: auto; transform: translateY(-50%); }
  .side-right-bottom .copy, .side-bottom-left .copy, .copy[style*="bottom"] { top: auto !important; bottom: 36px !important; transform: none; }
  #s-change .copy { left: var(--m); right: auto; width: 46vw; }
  #s-deficit .copy { width: 28vw !important; }
  #s-deficit.flow .copy { width: auto !important; }
  .credit { bottom: 6px; }
  .ch--results .copy { top: 62px; transform: none; }
  .men-wrap { bottom: 14px; gap: 10px; }
  .man img { width: 11vw; }
  .man p { font-size: 12px; margin-top: 6px; }
  .man .note { font-size: 11px; }
  .ch--ink .copy { top: 54%; }
}
/* Short, wide screens (a laptop with the browser's bars): What changes sits to the left, clear of the saint's face,
   and the Results photos come down a size so Results still holds. */
@media (min-aspect-ratio: 1/1) and (min-height: 521px) and (max-height: 680px) {
  #s-change .copy { left: var(--m); right: auto; }
  .man .note { margin-top: 2px; font-size: 12px; line-height: 1.35; }
  .man img { width: 12vw; }
}

/* The chapter index needs a wide screen to sit clear of the copy. */
@media (max-width: 74rem) { .index { display: none; } }
/* The index as a thin position mark: a tick per chapter. */
.index a { gap: 0; padding: 6px 0; } .index i { display: block; width: 16px; height: 1px; background: currentColor; opacity: 0.42; transition: width 0.3s var(--ease), opacity 0.3s; } .index li.on i, .index a:hover i { width: 28px; opacity: 1; } .index ol { gap: 8px; }
/* No numerals on the chapter lists either. */
.lines i { display: none; }
.lines li { gap: 0; }