/* Second Dove, the pages after the home page. Version 2 (2026-11-04, evening): Jonah found version 1 "not close enough to
   the reference", so every value here is now measured on his two reference images (research/refs/reference-analysis.md;
   version 1 is in archive/subpages-v1-2026-11-04/). Sizes are written in the reference's own pixels: --u is one pixel of
   the 1024-wide mockup, so at Jonah's 1904 window every size is 1.8x the number in the code, and the page keeps the
   mockup's proportions at any desktop width.
   site.css still owns the fonts, the nav skeleton and the contents panel; this file is the shared skin; each page's own
   file adds its one idea. */
.page {
  --u: clamp(1px, 100vw / 1024, 2.3px);   /* one pixel of the 1024-wide mockup; checked at equal width against it (qa/2026-11-04/v2/compare) */
  /* measured on the references */
  --hd: #1E343A;             /* headings, wordmark, nav: deep wine ink (49 7 9 to 74 13 20) */
  --ink: #2B1B15;            /* reading copy: dark warm brown (51 37 26), never grey */
  --ink-2: #3D2C24;
  --muted: #6B5B51;
  --ink-red: #56808C;        /* stamps, label rules (161 70 70) */
  --note-red: #63919F;       /* handwriting (186 70 77) */
  --mark-red: #7598A3;       /* registration marks (185 105 101) */
  --wine: #23383F;           /* the dark band (72 20 27) */
  --wine-btn: #2A434A;       /* buttons (88 24 34) */
  --hilite: rgb(175 201 209 / .55);
  --ground: #F6F1EA;         /* the page (238 227 210) */
  --read: "Instrument Sans", system-ui, sans-serif;   /* the reference sets short copy in a sans */
  --hand: "Caveat", "Segoe Print", cursive;
  --rule: rgb(45 63 69 / .2);
  --pad: max(20px, calc(44 * var(--u)));
  --nav-h: clamp(60px, calc(58 * var(--u)), 118px);
  --wrap: min(100% - 2 * var(--pad), 1840px);
  background: linear-gradient(rgb(252 247 240 / .62), rgb(252 247 240 / .62)), var(--paper-tex);
  background-color: var(--ground); background-size: auto, 512px; color: var(--ink);
}
/* a component's own display never un-hides what the page has hidden */
.page [hidden] { display: none !important; }
.page main { display: block; }
.wrap { width: var(--wrap); margin-inline: auto; }
.page .display { font-weight: 700; color: var(--hd); }
.page .display em { color: var(--hd); }
.page .ink .display, .page .ink .display em { color: var(--ivory); }
.page .kicker { font: 500 calc(13 * var(--u)) / 1.3 var(--read); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-red); }
.page .ink .kicker { color: #BDD2D9; }

/* ---------- the nav, as in the references: the wordmark and the links set in the heading serif, the current one
   underlined; a hairline under the bar (the 11-04 build dropped the button; it came back 2026-11-06, below) ---------- */
.page .nav { height: var(--nav-h); color: var(--hd); transition: transform .55s var(--ease), background-color .3s steps(3, end), box-shadow .3s steps(3, end); }
.page .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.page .nav.is-solid { background: linear-gradient(rgb(252 247 240 / .7), rgb(252 247 240 / .7)), var(--paper-tex); background-size: auto, 512px; box-shadow: 0 6px 14px -12px rgb(18 27 30 / .35); }
.page .nav .wordmark { font: 700 calc(37 * var(--u)) / 1 var(--display); letter-spacing: -.025em; color: var(--hd); --leaf: var(--ink-red); }
.page .nav__links { gap: calc(40 * var(--u)); font: 500 calc(17 * var(--u)) var(--display); }
.page .nav__links a { color: #182124; padding: calc(8 * var(--u)) 0; }
.page .nav__links a::after { bottom: 0; height: 3px; background: var(--hd); }
.page .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
/* 2026-11-06 (Fable's comparison with the live site; Jonah: "Build all five"): the approved nav carries its pill on every
   page, and the inner heads dropped their own button on the promise that the nav's was never far, so hiding it left most
   inner pages with no way in above the fold. Was: .page .nav__cta { display: none !important; }
   The Menu shows at every width too: above 1100px the bar had no way to About, Pricing, the case study or Contact except
   the footer (the approved site hides its menu on desktop; this is the one place the concept adds to it). */
.page .nav__cta { min-height: max(40px, calc(34 * var(--u))); padding: 0 calc(18 * var(--u)); border-radius: calc(14 * var(--u));
  border-color: var(--hd); color: var(--hd); font: 600 max(.95rem, calc(15 * var(--u))) var(--sans); }
.page .nav__cta:hover { background: var(--hd); color: #FCF7F0; border-color: var(--hd); }
.page .nav [data-tone] { color: inherit; }
.page .nav__contents { display: inline-flex; align-items: center; color: var(--hd); font: 600 max(1rem, calc(17 * var(--u))) var(--display); }
@media (min-width: 761px) { .page .nav__contents { margin-left: 0; } }
.page .contents__cta { align-self: flex-start; margin-top: 28px; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  border-radius: 14px; background: var(--hd); color: #FCF7F0; font: 600 1.05rem var(--sans); }
.page .contents__cta + .contents__close { margin-top: 14px; }
/* on a desktop the ten destinations sit in two columns so the button and Close are on the first screen, not under the fold */
@media (min-width: 1101px) { .page .contents ol { columns: 2; column-gap: calc(80 * var(--u)); } .page .contents ol li { break-inside: avoid; } }

/* ---------- registration marks: a thin red cross at the corners of things ---------- */
.reg { position: absolute; width: calc(16 * var(--u)); height: calc(16 * var(--u)); pointer-events: none; color: var(--mark-red);
  background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.reg::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 1px currentColor; transform: scale(.6); }
.reg--o::after { content: ""; position: absolute; inset: 22%; border: 1px solid currentColor; border-radius: 50%; }
.reg--sm { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.ink .reg::before { background: var(--wine); }

/* ---------- stamps: red ink in a ruled box, a little off square, its edge broken where the pad was dry ---------- */
.stamp { display: inline-flex; align-items: center; gap: .6em; padding: .62em 1em .56em; border: 1.5px solid currentColor; border-radius: 1px;
  font: 600 calc(11.5 * var(--u)) / 1.2 var(--read); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-red); white-space: nowrap;
  transform: rotate(var(--tilt, -5deg)); -webkit-mask: var(--dry) center / 180px; mask: var(--dry) center / 180px;
  --dry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.15'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stamp--word { font: italic 600 calc(21 * var(--u)) / 1 var(--display); letter-spacing: .01em; text-transform: none; padding: .32em .6em .3em; border-width: 1.6px; }
.ink .stamp { color: #BDD2D9; }

/* a label: spaced capitals in dark ink over a short red rule */
.label { display: inline-block; font: 600 calc(11 * var(--u)) / 1.2 var(--read); letter-spacing: .28em; text-transform: uppercase; color: #182124; padding-bottom: calc(7 * var(--u)); border-bottom: 1.5px solid var(--ink-red); }
/* the same words typed in red on a strip of pink tape */
.label--tape { border: 0; padding: .6em .9em .55em; font-family: Consolas, "Courier New", ui-monospace, monospace; font-weight: 700; letter-spacing: .14em; color: var(--ink-red); background: rgb(193 213 219 / .55); transform: rotate(-1deg); }
.ink .label { color: var(--ivory); border-bottom-color: #BDD2D9; }

/* ---------- handwritten notes: red marker with a drawn arrow; they write themselves in once, in held frames ---------- */
.note { position: absolute; z-index: 6; font: 500 calc(22 * var(--u)) / 1.02 var(--hand); color: var(--note-red); transform: rotate(var(--tilt, -4deg)); pointer-events: none; white-space: nowrap; }
.note__arrow { position: absolute; width: var(--aw, 64px); height: var(--ah, 48px); overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ink .note { color: #A3CBD7; }
/* a note written on a light sheet lying on the dark band takes the light page's red */
.ink .tissue .note, .ink .pcard .note { color: var(--note-red); }
/* until it writes itself in, a note and its arrow are not there at all */
.js .note:not(.is-in) { visibility: hidden; }
.js .note { clip-path: inset(-140px 100% -160px -220px); }
.js .note.is-in { clip-path: inset(-140px -200px -160px -220px); transition: clip-path .75s steps(7, end) .2s; }

/* ---------- the head band: the title on cream under a hairline; big sheets of tissue laid over its right side ---------- */
.phead { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 26 * var(--u)) 0 calc(44 * var(--u)); border-bottom: 1px solid var(--rule);
  background: linear-gradient(rgb(236 232 226 / .32), rgb(236 232 226 / .32)); }
.phead::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--nav-h); background: var(--ground); opacity: .55; pointer-events: none; }
.phead__words { position: relative; z-index: 3; max-width: calc(640 * var(--u)); }
.phead__title { font-size: calc(76 * var(--u)); line-height: .95; letter-spacing: -.025em; margin: calc(14 * var(--u)) 0 calc(12 * var(--u)); color: var(--hd); }
.phead__lede { font: 400 calc(18 * var(--u)) / 1.3 var(--read); color: var(--ink); max-width: calc(640 * var(--u)); }
.phead .reg { z-index: 4; }
.sheets { position: absolute; z-index: 1; top: var(--nav-h); bottom: 0; right: 0; width: 58%; pointer-events: none; overflow: hidden; }
.psec > .sheets, .band > .sheets { top: 0; }
/* tissue: thin, see-through, its fibres catching the light; it darkens what lies under it a little, as tissue does */
/* each sheet's edge is torn a little (a polygon a hair off the straight line), so the sheets cast their shadow as a group */
.sheets { filter: drop-shadow(-10px 14px 16px rgb(42 62 68 / .2)) drop-shadow(-1px 2px 2px rgb(42 62 68 / .14)); }
.sheet { clip-path: polygon(0 1.2%, 18% .3%, 37% 1%, 55% .2%, 74% .9%, 100% 0, 99.4% 22%, 100% 47%, 99.2% 71%, 100% 100%, 76% 99.3%, 51% 100%, 27% 99.1%, 0 100%, .6% 74%, 0 49%, .8% 23%); }
.sheet { position: absolute; width: var(--w, 34vw); aspect-ratio: 4 / 3; opacity: var(--o, 1); transform: rotate(var(--r, 0deg));
  background: url(../media/paper/tissue-fibres.webp) 0 0 / 720px, linear-gradient(165deg, rgb(257 254 249 / .5), rgb(257 254 249 / .08) 50%, rgb(170 150 135 / .1));
  background-color: rgb(245 241 234 / .5);
  box-shadow: inset 0 0 0 1px rgb(257 254 249 / .55), inset 0 1.5px 0 rgb(258 255 252 / .75); }
.sheet--b { background-color: rgb(243 238 231 / .46); }
/* a corner that has curled up off the page */
/* a corner folded back over the sheet: the corner itself is cut from the sheet, and the fold lies on the sheet, its
   underside lighter, darker toward the crease, with the shadow it throws on the sheet beside it */
.sheet--ear, .sheet--curl { clip-path: polygon(0 1.2%, 18% .3%, 37% 1%, 55% .2%, 74% .9%, 100% 0, 99.4% 22%, 100% 47%, 99.2% 68%, 100% 79%, 84% 100%, 76% 99.3%, 51% 100%, 27% 99.1%, 0 100%, .6% 74%, 0 49%, .8% 23%); }
.sheet--ear::after, .sheet--curl::after { content: ""; position: absolute; right: 0; bottom: 0; width: 16%; height: 21%; border-top-left-radius: 100% 100%;
  clip-path: polygon(100% 0, 0 100%, 0 0); background: url(../media/paper/tissue-fibres.webp) 0 0 / 720px, radial-gradient(120% 120% at 100% 100%, rgb(178 164 152 / .5) 0%, rgb(245 241 234 / .8) 48%, rgb(253 250 244 / .9) 100%); }
.sheet--ear::before, .sheet--curl::before { content: ""; position: absolute; right: 0; bottom: 0; width: 26%; height: 34%; pointer-events: none;
  background: radial-gradient(farthest-side at 100% 100%, rgb(42 62 68 / .22), rgb(42 62 68 / 0) 75%); }
.sheets .stamp { position: absolute; z-index: 2; }

/* the breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px calc(12 * var(--u)); font: 500 calc(14 * var(--u)) var(--read); color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: calc(12 * var(--u)); color: var(--ink-red); opacity: .8; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--ink-red); font-family: var(--serif); font-style: italic; }

/* ---------- sections ---------- */
.psec { position: relative; padding: calc(40 * var(--u)) 0; }
.psec + .psec::before { content: ""; position: absolute; top: 0; left: 50%; width: var(--wrap); transform: translateX(-50%); height: 1px; background: var(--rule); }
.psec__title { font-size: calc(36 * var(--u)); line-height: 1.02; letter-spacing: -.02em; color: var(--hd); }
.psec__lede { margin-top: calc(10 * var(--u)); font: 400 calc(14.5 * var(--u)) / 1.38 var(--serif); color: var(--ink); max-width: calc(600 * var(--u)); }
.ink .psec__title { color: var(--ivory); font-size: calc(54 * var(--u)); }
.ink .psec__lede { font: 400 calc(18 * var(--u)) / 1.3 var(--read); color: #F8F3ED; }
/* Jonah 2026-11-05 22:34 ("Yes, all pages"): at his 1903 window the dark band headings grew with the width to 100px and
   pushed what they introduce off the screen. From 1101px up they stop at 64px (the Results page cap, evidence.css), and
   break into even lines; narrower screens keep their own sizes below. */
@media (min-width: 1101px) {
  .ink .psec__title { font-size: min(calc(54 * var(--u)), 4rem); text-wrap: balance; }
  .ink .psec__lede { font-size: min(calc(18 * var(--u)), 1.3rem); }
}

/* the dark band: wine stock with a faint fibre, straight cut, one per page */
.page .ink { background: linear-gradient(rgb(29 49 55 / .94), rgb(29 49 55 / .94)), var(--paper-tex); background-size: auto, 512px; color: var(--ivory); }
.band { position: relative; overflow: hidden; padding: calc(56 * var(--u)) 0; }
.band .reg { color: #9CBCC5; }

/* checks: a red ring with a tick */
.checks { display: grid; gap: calc(16 * var(--u)); }
.checks li { position: relative; padding-left: calc(30 * var(--u)); }
.checks li::before { content: ""; position: absolute; left: 0; top: .05em; width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; border: 1.5px solid var(--ink-red);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356808C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.6'/%3E%3C/svg%3E") center / 100% no-repeat; }
.checks b, .checks .checks__t { display: block; font: 700 calc(15.5 * var(--u)) / 1.25 var(--display); color: var(--hd); letter-spacing: -.005em; }
.checks span, .checks p { display: block; font: 400 calc(13.5 * var(--u)) / 1.38 var(--read); color: var(--ink); margin-top: 2px; }

/* ---------- the button: flat wine stock. .ticket is cut on a slant (Methodology's close); .ticket--rect is square
   cut (Services' close). Pointing steps the arrow forward in held frames ---------- */
.ticket { position: relative; display: inline-flex; isolation: isolate; color: var(--ivory); font: 500 calc(19 * var(--u)) / 1 var(--display); letter-spacing: -.005em;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / .18)) drop-shadow(2px 5px 6px rgb(18 27 30 / .22)); transition: filter .3s var(--ease); }
.ticket__face { position: relative; display: inline-flex; align-items: center; gap: calc(16 * var(--u)); min-height: max(48px, calc(50 * var(--u))); padding: 0 calc(34 * var(--u)) 0 calc(30 * var(--u)); white-space: nowrap;
  background: var(--wine-btn); clip-path: polygon(calc(18 * var(--u)) 0, 100% 0, calc(100% - 18 * var(--u)) 100%, 0 100%); transition: transform .24s steps(3, end); }
.ticket--rect .ticket__face { clip-path: none; padding: 0 calc(28 * var(--u)); }
.ticket__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(258 255 252 / .06), rgb(0 0 0 / .1)); }
.ticket__arrow { width: calc(26 * var(--u)); height: calc(14 * var(--u)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s steps(3, end); }
.ticket:hover .ticket__face { transform: translateY(-2px); }
.ticket:hover .ticket__arrow, .ticket:focus-visible .ticket__arrow { transform: translateX(6px); }
.ticket:active .ticket__face { transform: translateY(1px); transition-duration: .08s; }
.ticket:focus-visible { outline: none; }
.ticket::after { content: ""; position: absolute; inset: -6px -8px; border: 2px solid var(--ink); border-radius: 4px; opacity: 0; pointer-events: none; }
.ticket:focus-visible::after { opacity: 1; }
.ink .ticket::after { border-color: var(--ivory); }
.ticket--light { color: var(--hd); }
.ticket--light .ticket__face { background: var(--ivory) var(--sheet-a); background-size: 520px; }

/* the AI marks in their own colours (Jonah 2026-11-04) */
.mark { flex: none; }
.mark--chatgpt { fill: #0D0D0D; }
.mark--claude { fill: #D97757; }
.mark--gemini { fill: url(#gem-grad); }
.mark--perplexity { fill: #20808D; }

/* a name picked out in an answer: a pink band behind the words */
.page mark { color: inherit; padding: 0 .14em; background: linear-gradient(transparent 8%, var(--hilite) 8% 92%, transparent 92%); }

/* a plain text link with a drawn underline */
.tlink { display: inline-flex; align-items: center; min-height: 44px; font: 500 calc(14.5 * var(--u)) var(--read); color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: rgb(86 128 140 / .6); }
.tlink:hover { text-decoration-color: currentColor; }
.ink .tlink { color: var(--ivory); text-decoration-color: rgb(248 245 239 / .5); }

/* ---------- the reveal: a tissue lies over the proof; drag its handle (or the tissue), or use the arrow keys, to slide
   it aside. Direct manipulation follows the hand exactly; a key press moves in held frames ---------- */
.reveal { --x: 0px; position: relative; display: grid; align-items: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.reveal > .reveal__back, .reveal > .reveal__front { grid-area: 1 / 1; }
.reveal__back { justify-self: end; width: var(--bw, 56%); position: relative; z-index: 1; }
.reveal__front { justify-self: start; width: var(--fw, 47%); position: relative; z-index: 3; transform: translateX(var(--x)) rotate(var(--ft, -1.2deg)); cursor: grab; }
.reveal.is-dragging .reveal__front { cursor: grabbing; }
.reveal.is-stepping .reveal__front, .reveal.is-stepping .reveal__handle { transition: transform .32s steps(4, end), left .32s steps(4, end); }
/* the tissue card: its paper is a separate layer cut to a sheet's uneven shape (top edge rising, right edge slanted), and
   the shadow is cast by that layer, so the words on it stay crisp */
.tissue { position: relative; isolation: isolate; color: var(--ink); background: transparent; }
.tissue__paper { position: absolute; z-index: -1; inset: 0; pointer-events: none; filter: drop-shadow(0 1px 1px rgb(60 30 20 / .18)) drop-shadow(6px 14px 16px rgb(13 22 25 / .32)); }
.tissue__paper::before { content: ""; position: absolute; inset: 0; clip-path: var(--cut, polygon(0 3.5%, 100% 0, 95.5% 100%, 0 98.5%));
  background: url(../media/paper/tissue-fibres.webp) 0 0 / 720px, linear-gradient(160deg, rgb(257 254 249 / .45), rgb(257 254 249 / 0) 40%, rgb(119 95 87 / .08));
  background-color: rgb(241 236 229 / .9); }
/* a tissue without the separate layer (older markup) keeps a plain translucent sheet */
.tissue:not(:has(.tissue__paper)) { background: rgb(248 244 239 / .86) url(../media/paper/tissue-fibres.webp) 0 0 / 720px; box-shadow: 6px 14px 26px -12px rgb(21 31 34 / .4); }
.ink .tissue, .ink .pcard { --ink-red: #56808C; color: var(--ink); }
.ink .tissue .stamp, .ink .pcard .stamp { color: var(--ink-red); }
.ink .pcard .label, .ink .tissue .label { color: #182124; border-bottom-color: var(--ink-red); }
.ink .tissue .label--tape { color: var(--ink-red); }
.ink .pcard .tlink, .ink .tissue .tlink { color: var(--ink); text-decoration-color: rgb(86 128 140 / .6); }
.pcard { position: relative; color: var(--ink); border-radius: 1px;
  background: linear-gradient(rgb(250 244 236 / .5), rgb(250 244 236 / .5)), var(--sheet-a); background-size: auto, 760px; background-color: #F8F2EA;
  box-shadow: 0 1px 1px rgb(21 31 34 / .14), 8px 18px 34px -16px rgb(13 22 25 / .5); }
.reveal__handle { position: absolute; z-index: 5; top: 50%; left: var(--hx, 50%); width: max(48px, calc(46 * var(--u))); height: max(48px, calc(46 * var(--u))); margin: calc(-0.5 * max(48px, calc(46 * var(--u)))) 0 0 calc(-0.5 * max(48px, calc(46 * var(--u)))); border-radius: 50%; border: 0; padding: 0;
  background: #FBF7F1; color: var(--hd); cursor: ew-resize; touch-action: none;
  box-shadow: 0 0 0 1px rgb(42 62 68 / .12), 0 3px 6px rgb(13 22 25 / .22), 0 10px 18px -6px rgb(13 22 25 / .3); display: grid; place-items: center; }
.reveal__handle svg { width: 46%; height: 30%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reveal__handle:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; box-shadow: 0 0 0 7px var(--ink), 0 10px 18px -6px rgb(13 22 25 / .4); }
.page .reveal__handle:hover { transform: scale(1.06); }
.js .reveal.is-in .reveal__handle { animation: nudge 1.4s steps(10, end) .9s 1 both; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 30% { translate: -14px 0; } 60% { translate: 10px 0; } }

/* ---------- the footer: light; the serif wordmark, a rule, the serif links, a mark at the right ---------- */
.pfoot { position: relative; color: var(--ink); border-top: 1px solid var(--rule); padding: calc(18 * var(--u)) var(--pad) calc(14 * var(--u)); --leaf: var(--ink-red);
  background: linear-gradient(rgb(247 242 235 / .55), rgb(247 242 235 / .55)), var(--paper-tex); background-size: auto, 512px; }
.pfoot__row { display: flex; align-items: center; gap: 18px calc(40 * var(--u)); flex-wrap: wrap; }
.pfoot .wordmark { font: 700 calc(28 * var(--u)) / 1 var(--display); letter-spacing: -.025em; color: var(--hd); padding-right: calc(40 * var(--u)); border-right: 1px solid var(--rule); min-height: calc(40 * var(--u)); }
.pfoot nav ul { display: flex; flex-wrap: wrap; gap: 4px calc(46 * var(--u)); }
.pfoot nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 calc(15 * var(--u)) var(--display); color: #182124; }
.pfoot nav a:hover, .pfoot address a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pfoot address { margin-left: auto; margin-right: calc(40 * var(--u)); font-style: normal; font: 400 calc(11.5 * var(--u)) / 1.5 var(--read); color: var(--ink-2); text-align: right; }
.pfoot address br { display: none; }
/* the address's line break becomes a dot on the one-row footer (the phone and email already have one between them) */
.pfoot address a:first-of-type::before { content: "\00b7"; margin: 0 .5em; color: var(--muted); }
.pfoot address a { color: var(--ink); }
.pfoot__fine { margin-top: calc(2 * var(--u)); font: 400 calc(10 * var(--u)) var(--read); color: var(--muted); }
.pfoot .reg { right: var(--pad); top: 50%; margin-top: -11px; }

/* sheets laid in a section (not the head) are a faint layer at the page's edge */
.psec > .sheets { opacity: .7; right: -4%; }

/* ---------- tablets and narrow laptops ---------- */
@media (max-width: 1100px) {
  .page { --u: 1px; }
  .phead__words { max-width: none; }
  .sheets { width: 64%; opacity: .8; }
}
/* ---------- phones ---------- */
@media (max-width: 760px) {
  .page { --u: 1px; --pad: 20px; }
  .page .nav .wordmark { font-size: 1.7rem; }
  .phead { padding-bottom: 36px; }
  .phead__title { font-size: clamp(2.9rem, 14vw, 4.2rem); }
  .phead__lede { font-size: 1.08rem; }
  .sheets { width: 78%; top: 0; bottom: auto; height: 46%; right: -10%; opacity: .75; }
  .sheet { width: max(var(--w), 46vw); }
  .phead > .reg[style*="left"] { display: none; }
  .phead > .reg[style*="right"] { right: 4px !important; }
  .sheets .stamp { display: none; }
  .psec__title { font-size: 2.1rem; }
  .ink .psec__title { font-size: 2.4rem; }
  .psec__lede { font-size: 1.05rem; }
  .ink .psec__lede { font-size: 1.08rem; }
  .note { font-size: 1.35rem; }
  .ticket { font-size: 1.12rem; }
  .pfoot .wordmark { border-right: 0; padding-right: 0; width: 100%; }
  .pfoot address { margin: 0; text-align: left; width: 100%; font-size: .9rem; }
  .pfoot nav a { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .note { clip-path: none; }
  .js .note:not(.is-in) { visibility: visible; }
  .js .reveal.is-in .reveal__handle { animation: none; }
  .reveal.is-stepping .reveal__front, .reveal.is-stepping .reveal__handle { transition: none; }
  .ticket__face, .ticket__arrow { transition: none; }
}

@media (max-width: 760px) {
  .reveal { display: grid; gap: 18px; }
  .reveal > .reveal__back, .reveal > .reveal__front { grid-area: auto; width: 100% !important; justify-self: stretch; transform: none !important; }
  .reveal > .reveal__front { order: 1; }
  .reveal > .reveal__back { order: 2; padding-left: 22px !important; }
  .reveal__handle, .reveal > .note { display: none; }
}

/* the approved footer's site map (2026-11-05, tools/gen_footer.mjs): seven short columns under the footer row */
.pfoot__map { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(20 * var(--u)); margin: calc(18 * var(--u)) 0 calc(6 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid var(--rule); }
.pfoot__h { margin-bottom: calc(8 * var(--u)); font: 600 calc(9.5 * var(--u)) / 1 var(--read); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-red); }
.pfoot__group ul { display: grid; gap: 2px; }
.pfoot__group a { display: inline-flex; align-items: center; min-height: 28px; font: 400 calc(11.5 * var(--u)) / 1.25 var(--read); color: var(--ink); text-decoration: none; }
.pfoot__group a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pfoot__legal { margin-left: 1em; }
.pfoot__legal a { color: inherit; }
@media (max-width: 1100px) { .pfoot__map { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pfoot__map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .pfoot__group a { font-size: .95rem; min-height: 36px; }
  .pfoot__legal { display: block; margin: 6px 0 0; }
}