/* Ives, Barber. Sterile: warm white, ink and steel, a pale surgical-drape blue, deep alum blue as the one coloured word.
   Geist for everything, Geist Mono only for working numbers (times, prices, lengths). Hollis's own hand stays on paper.
   Each section's ground only reassigns the colour variables below; the components read them. */
:root {
  --paper: #F5F4F0; --panel: #ECEDE9; --drape: #D3E6EE; --dark: #0F1214; --dark-2: #171B1E;
  --fg: #0F1214; --text: #3A4248; --steel: #69737B; --on-fg: #F5F4F0;
  --rule: #D9DCDB; --rule-2: #B6BCBF;
  --acc: #1D6A86; --alum: #9CCBDB;
  --card: #FBF9F4; --pen: #1F3557; --card-ink: #6E6A62; --rule-blue: rgba(64, 112, 160, .3);
  --g: 24px; --hdr: 68px;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --hand: 'Nothing You Could Do', 'Bradley Hand', cursive;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --sec: clamp(64px, 7vw, 120px);
  --h2: clamp(44px, 5.8vw, 92px);
  --track: -.052em;
}
@media (min-width: 768px) { :root { --g: 40px; --hdr: 80px; } }
@media (min-width: 1024px) { :root { --g: clamp(40px, 4.4vw, 72px); --hdr: 88px; } }

/* grounds */
.g-panel { background: var(--panel); }
.g-drape { background: var(--drape); --rule: rgba(15, 18, 20, .14); --rule-2: rgba(15, 18, 20, .3); --text: #2F3A40; --steel: #4F6470; }
.g-ink { background: var(--dark); --fg: #F2F3F1; --text: #C3C9CD; --steel: #8E979E; --on-fg: #0F1214; --rule: rgba(242, 243, 241, .14); --rule-2: rgba(242, 243, 241, .3); --acc: var(--alum); color: var(--text); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--fg); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); }
html.lenis, html.lenis body { height: auto; }
html.menu-open, .lenis.lenis-stopped { overflow: clip; }
main:focus { outline: none; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 18px/1.55 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01'; }
@media (min-width: 1024px) { body { font-size: clamp(18px, 1.25vw, 20px); } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 600; color: var(--fg); letter-spacing: var(--track); line-height: .94; }
h2 { font-size: var(--h2); text-wrap: balance; }
em { font-style: normal; color: var(--acc); }
/* working numbers: the clock times through the story */
.tm { font: 500 .8em/1 var(--mono); letter-spacing: 0; color: var(--acc); margin-right: .3em; }
/* the lead: the step between the headlines and the copy */
.lead { font: 500 clamp(21px, 1.8vw, 28px)/1.3 var(--sans); letter-spacing: -.022em; color: var(--fg); text-wrap: pretty; }
.ch p.lead { max-width: 22em; }
::selection { background: var(--drape); color: var(--dark); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--dark); color: var(--paper); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.nw { white-space: nowrap; }

/* ---------- buttons: ink on light grounds, paper on dark ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; font: 500 16px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; border: 0; border-radius: 2px; cursor: pointer; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
@media (min-width: 1024px) { .btn { min-height: 60px; } }
.btn-lg, .btn-xl { min-height: 68px; padding: 0 40px; font-size: 18px; }
.btn-towel, .btn-night { background: var(--fg); color: var(--on-fg); }
.btn-towel:hover, .btn-night:hover { background: var(--acc); color: var(--on-fg); }
.btn-line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.btn-block { width: 100%; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); display: flex; align-items: center; gap: 28px; padding: 0 var(--g); transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.hdr.is-solid { background: rgba(245, 244, 240, .9); box-shadow: 0 1px 0 var(--rule); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wm { font: 600 24px/1 var(--sans); letter-spacing: -.035em; color: var(--fg); text-decoration: none; white-space: nowrap; }
.wm span { color: var(--steel); }
.nav { display: none; margin-left: auto; gap: 30px; }
.nav a, .hdr-tel { font: 500 15px/1 var(--sans); color: var(--fg); text-decoration: none; transition: color .25s; }
.nav a { padding: 14px 0; color: var(--steel); text-underline-offset: 9px; text-decoration-thickness: 1px; }
.nav a[aria-current=page] { color: var(--fg); text-decoration-line: underline; text-decoration-color: var(--rule-2); }
.nav a:hover, .hdr-tel:hover { color: var(--acc); }
.hdr-tel { display: none; font-family: var(--mono); font-size: 14px; }
.hdr-cta { display: none; min-height: 52px; padding: 0 24px; font-size: 15px; }
.menu-btn { margin-left: auto; min-height: 48px; min-width: 64px; padding: 0 4px; background: none; border: 0; color: var(--fg); font: 500 15px/1 var(--sans); cursor: pointer; }
@media (min-width: 768px) { .hdr-cta { display: inline-flex; } .menu-btn { margin-left: 0; order: 3; } .hdr-cta { margin-left: auto; } }
@media (min-width: 1024px) { .nav { display: flex; } .hdr-cta { margin-left: 0; } .menu-btn { display: none; } }
@media (min-width: 1280px) { .hdr-tel { display: inline; } }
.menu { position: fixed; inset: 0; z-index: 49; background: var(--paper); padding: calc(var(--hdr) + 32px) var(--g) 120px; display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font: 600 clamp(40px, 11vw, 64px)/1.1 var(--sans); letter-spacing: var(--track); color: var(--fg); text-decoration: none; }
.menu nav a:last-child { color: var(--acc); }
.menu nav a[aria-current=page] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; text-decoration-color: var(--rule-2); }
.menu p { font-size: 15px; }

.concept { position: fixed; left: 0; bottom: 28px; z-index: 45; writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 4px; font: 500 11px/1 var(--sans); letter-spacing: .04em; color: #8A8F93; text-decoration: none; mix-blend-mode: difference; }
.concept:hover { color: #BFC4C7; }
@media (max-width: 767px) { .concept { bottom: 104px; padding: 10px 3px; font-size: 10px; } }

/* ---------- 3D: the razor's canvas sits inside its stage and scrolls with it ---------- */
.gl-wrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#gl { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease); }
#gl.is-on { opacity: 1; }
.stage { position: relative; display: block; }
.stage .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
html.no-gl .stage .still, html:not(.js) .stage .still { opacity: 1; }
html.gl-live .stage .still { visibility: hidden; }

/* ---------- hero: the headline, and the razor laid on the page with its label ---------- */
.hero { --hfs: clamp(64px, 11.2vw, 176px); position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + clamp(24px, 5vh, 48px)) var(--g) clamp(28px, 5vh, 48px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(24px, 2.4vw, 40px); }
.h-hero { grid-column: 1 / -1; margin: 0; font: 600 var(--hfs)/.88 var(--sans); letter-spacing: -.062em; color: var(--fg); }
.ln { display: block; overflow: clip; padding: .06em .05em .16em; margin: -.06em -.05em -.16em; }
.ln-i { display: inline-block; }
.hero-copy { grid-column: 1 / 5; grid-row: 2; align-self: end; max-width: 30em; }
.lede { color: var(--text); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.tel-lg { font: 500 clamp(16px, 1.2vw, 18px)/1 var(--mono); color: var(--fg); text-decoration: none; padding: 10px 0; }
.tel-lg:hover { color: var(--acc); }
.instrument { grid-column: 6 / 13; grid-row: 2; align-self: end; position: relative; height: clamp(280px, 40vh, 420px); margin-top: 28px; }
.stage-hero { position: absolute; inset: 0 0 64px; }
/* a soft contact shadow under the razor, so it rests on the paper rather than floating in a box */
.stage-hero::after, .stage-book::after { content: ''; position: absolute; left: 19%; right: 19%; bottom: 25%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 18, 20, .17), rgba(15, 18, 20, .06) 60%, rgba(15, 18, 20, 0)); pointer-events: none; }
/* the label: an instrument tag, a hairline and a line of mono */
.instrument .spec { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 12px; border-top: 1px solid var(--rule); font: 500 13px/1.3 var(--mono); color: var(--steel); }
@media (max-width: 1023px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding-bottom: 40px; }
  .hero { --hfs: min(16.4vw, 112px); }
  .instrument { grid-column: 1; grid-row: 2; height: clamp(250px, 38svh, 380px); margin-top: 24px; }
  .hero-copy { grid-column: 1; grid-row: 3; margin-top: 28px; max-width: none; }
}
@media (max-width: 767px) { .hero-cta .btn { flex: 1 1 100%; } }

/* ---------- story chapters ---------- */
.ch { position: relative; padding: var(--sec) var(--g); }
.ch p { max-width: 34em; }
.ch h2 + p, .ch h2 + .rv { margin-top: calc(var(--h2) * .3); }
.ch p + p { margin-top: 1em; }
@media (min-width: 1024px) { .ch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 40px); } }
figcaption { margin-top: 12px; font: 400 14px/1.4 var(--sans); color: var(--steel); }

/* the door: copy left, the stairwell full height off the right edge */
.door-text { grid-column: 1 / 6; align-self: center; }
.door-photo { grid-column: 7 / 13; }
.door-photo img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
  .ch.door { padding-top: 0; padding-bottom: 0; }
  .door-text { padding: var(--sec) 0; }
  .door-photo { margin: 0 calc(-1 * var(--g)) 0 0; position: relative; }
  .door-photo img { aspect-ratio: auto; height: 100vh; height: 100svh; min-height: 640px; max-height: 1080px; }
  .door-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 64px 24px 18px; color: #F2F3F1; background: linear-gradient(to top, rgba(15, 18, 20, .62), rgba(15, 18, 20, 0)); }
}
@media (max-width: 1023px) { .door-photo { margin: 48px calc(-1 * var(--g)) 0; } .door-photo img { aspect-ratio: 4 / 4.4; } .door-photo figcaption { padding: 0 var(--g); } }

/* paper in his hand: index cards, the note on the mirror, the card on the door, the price slips */
.paper { background: var(--card); color: var(--pen); border-radius: 2px; box-shadow: 0 30px 60px -28px rgba(15, 18, 20, .38), 0 1px 0 rgba(15, 18, 20, .08); }
.hand { font-family: var(--hand); font-weight: 400; letter-spacing: 0; color: var(--pen); }

/* the card: an index card on a grey panel, copy on the right */
.icard { --rule-h: 32px; grid-column: 1 / 6; align-self: center; max-width: 560px; padding: 18px clamp(20px, 2vw, 30px) 22px; border-radius: 2px; color: var(--pen); background-color: var(--card); box-shadow: 0 30px 60px -28px rgba(15, 18, 20, .38), 0 1px 0 rgba(15, 18, 20, .08); transform: rotate(-1.2deg); }
.icard-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid #C4555D; font: 500 13px/1.3 var(--sans); color: var(--card-ink); }
.icard dl { margin-top: 6px; background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule-h) - 1px), var(--rule-blue) calc(var(--rule-h) - 1px) var(--rule-h)); }
.icard dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.icard dt { font: 500 13px/var(--rule-h) var(--sans); color: var(--card-ink); }
.icard dd { font: 400 clamp(21px, 1.6vw, 24px)/var(--rule-h) var(--hand); color: var(--pen); letter-spacing: 0; --p: 1; -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) * (100% + 28px) - 28px), transparent calc(var(--p) * (100% + 28px))); mask-image: linear-gradient(90deg, #000 calc(var(--p) * (100% + 28px) - 28px), transparent calc(var(--p) * (100% + 28px))); }
.card-text { grid-column: 7 / 12; align-self: center; }
@media (max-width: 1023px) { .card .icard { margin-bottom: 64px; } }

/* towels: on the drape, three lines arrive in turn */
.towels { text-align: center; }
.towels h2 { grid-column: 2 / 12; max-width: 13em; margin-inline: auto; }
.towel-lines { grid-column: 2 / 12; margin: clamp(40px, 5vw, 72px) auto 0; display: grid; gap: clamp(10px, 1.2vw, 18px); }
.towel-lines li { font: 600 clamp(28px, 3.8vw, 62px)/1.1 var(--sans); color: var(--fg); letter-spacing: -.045em; text-wrap: balance; }
.towel-lines .tm { font-size: .5em; vertical-align: .22em; margin-right: .45em; }
.towels > p { grid-column: 4 / 10; margin: clamp(40px, 5vw, 64px) auto 0; }

/* leather: the biggest line on the page; under it the copy, and a strop you can work yourself */
.leather { --h2: clamp(56px, 8.4vw, 132px); }
.h-xl { grid-column: 1 / -1; font-size: var(--h2); line-height: .9; letter-spacing: -.058em; }
.lt-copy { grid-column: 1 / 6; grid-row: 2; align-self: start; margin-top: calc(var(--h2) * .34); }
.lt-copy p + p { margin-top: 1em; }
.strop-wrap { --sw: clamp(76px, 8.2vw, 128px); grid-column: 7 / 13; grid-row: 2; position: relative; height: clamp(440px, 66vh, 660px); margin-top: calc(var(--h2) * .4); cursor: ns-resize; -webkit-user-select: none; user-select: none; }
@media (max-width: 1023px) { .strop-wrap { --sw: 72px; height: clamp(380px, 58vh, 560px); margin-top: 44px; } }
/* black horsehide: a dull sheen down the middle where the razor runs, pale stitching along both sides, a hole at the hanging end */
.strop { position: absolute; top: 40px; bottom: 0; left: 26%; width: var(--sw); border-radius: 3px 3px 14px 14px; touch-action: none; background:
  radial-gradient(ellipse calc(var(--sw) * .17) 8px at 50% calc(100% - 26px), #F5F4F0 56%, rgba(245, 244, 240, .4) 68%, transparent 74%),
  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 .35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .52 0 0 0 0 .55 0 0 0 .5 -.16'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(90deg, rgba(220, 228, 232, 0) 30%, rgba(220, 228, 232, .14) 50%, rgba(220, 228, 232, 0) 70%),
  linear-gradient(90deg, #08090A 0%, #1A1D20 9%, #24282B 30%, #2C3134 50%, #24282B 70%, #191C1F 91%, #08090A 100%);
  box-shadow: 0 40px 70px -28px rgba(15, 18, 20, .55), inset 0 0 0 1px rgba(0, 0, 0, .6); }
.strop::before { content: ''; position: absolute; inset: 12px 8px 48px; border-left: 2px dashed rgba(220, 226, 230, .4); border-right: 2px dashed rgba(220, 226, 230, .4); }
.strop-hw { position: absolute; top: 0; left: 26%; width: var(--sw); height: calc(var(--sw) * .62); z-index: 2; overflow: visible; }
.strop-razor { position: absolute; top: 40px; left: calc(26% - var(--sw) * .3486); z-index: 3; width: calc(var(--sw) * 3.73); max-width: none; height: auto; pointer-events: none; will-change: transform; filter: drop-shadow(0 7px 6px rgba(15, 18, 20, .4)); }
.strop-tag { position: absolute; left: 0; top: 64px; z-index: 1; width: min(30%, 180px); padding: 10px 14px 8px; transform: rotate(-3deg); font: 400 clamp(19px, 1.5vw, 23px)/1.2 var(--hand); color: var(--pen); }
@media (max-width: 1023px) { .strop { left: 30%; } .strop-hw { left: 30%; } .strop-razor { left: calc(30% - var(--sw) * .3486); } .strop-tag { width: 27%; padding: 8px 10px 6px; font-size: 17px; } }

/* ---------- photographs given the full width: the lather on home, the 1935 print on the barber's page ---------- */
.bleed { margin: 0; }
.bleed-frame { --ci: 0%; --cx: 0%; height: clamp(380px, 80vh, 900px); overflow: hidden; clip-path: inset(var(--ci) var(--cx)); }
.bleed-frame img, .print-img img { width: 100%; height: 100%; object-fit: cover; }
.bleed-frame img { object-position: 50% 34%; }
.bleed figcaption { padding: 14px var(--g) 0; }
@media (max-width: 767px) { .bleed-frame { height: auto; aspect-ratio: 4 / 3.3; } .bleed-frame img { object-position: 54% 30%; } }
/* the print: a photograph on paper, a little crooked, the way it hangs by the mirror */
.print { max-width: 1180px; margin: 0 auto; padding: 0 var(--g); }
.print-frame { padding: clamp(10px, 1.4vw, 22px) clamp(10px, 1.4vw, 22px) clamp(14px, 2vw, 30px); background: #FFFFFF; transform: rotate(-.6deg); box-shadow: 0 40px 80px -36px rgba(15, 18, 20, .45), 0 1px 0 rgba(15, 18, 20, .08); }
.print-img { aspect-ratio: 1600 / 1272; overflow: hidden; }
.print-img img { object-position: 50% 0%; }
.print figcaption { margin-top: 18px; }

/* ---------- the pass: full-bleed ink, the headline under lather ---------- */
.pass { position: relative; overflow: clip; }
.pass-in { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: calc(var(--hdr) + 32px) var(--g) 64px; text-align: center; }
.pass-head { position: relative; }
.pass-h { font-size: clamp(52px, 8.6vw, 160px); line-height: .92; letter-spacing: -.058em; }
.pl { display: block; }
.lather { position: absolute; left: -22%; top: -90%; width: 144%; height: 270%; pointer-events: none; }
.pass-copy { max-width: 32em; margin-top: clamp(64px, 6vw, 96px); }
html:not(.js) .lather, html.rm .lather { display: none; }

/* ---------- the mirror: a silvered plate that clears ---------- */
.m-copy { grid-column: 1 / 6; align-self: center; }
.m-plate { grid-column: 6 / 13; justify-self: end; position: relative; overflow: hidden; width: min(100%, calc(86vh * .8)); width: min(100%, calc(86svh * .8)); aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 8%; border-radius: 4px; background: linear-gradient(160deg, #FBFCFC 0%, #E8ECEE 42%, #D2D9DC 100%); box-shadow: inset 0 0 0 10px #C5CCD0, inset 0 0 0 11px #FFFFFF, inset 0 0 0 13px rgba(15, 18, 20, .12), 0 50px 100px -44px rgba(15, 18, 20, .55); }
.m-h { position: relative; z-index: 1; font: 600 clamp(68px, 9.4vw, 168px)/.9 var(--sans); letter-spacing: -.062em; text-align: center; color: var(--dark); }
.m-h em { color: var(--acc); }
.m-h span { display: block; }
.m-veil { --r: 115%; position: absolute; inset: 0; z-index: 2; background: rgba(250, 251, 251, .76); -webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 52%, transparent var(--r), #000 calc(var(--r) + 24%)); mask-image: radial-gradient(ellipse 72% 66% at 50% 52%, transparent var(--r), #000 calc(var(--r) + 24%)); }
html:not(.js) .m-veil, html.rm .m-veil { display: none; }
@media (max-width: 1023px) { .m-copy { margin-bottom: 40px; } .m-plate { margin-inline: auto; width: 100%; } }

/* ---------- the closing band, on ink ---------- */
.cta-band { background: var(--dark); --fg: #F2F3F1; --text: #C3C9CD; --steel: #8E979E; --on-fg: #0F1214; --acc: var(--alum); color: var(--text); padding: clamp(64px, 8vw, 128px) var(--g); display: grid; gap: 32px; align-items: center; }
.cta-band-line { font: 600 clamp(44px, 6.4vw, 120px)/.92 var(--sans); letter-spacing: -.058em; color: var(--fg); text-wrap: balance; }
.cta-band-act .note { margin-top: 14px; font-size: 15px; color: var(--steel); }
.cta-band-act .note a { color: var(--fg); font-family: var(--mono); font-size: 14px; }
@media (min-width: 1024px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; } .cta-band-act { min-width: 320px; } .cta-band-act .btn { width: 100%; } }
@media (max-width: 767px) { .cta-band-act .btn { width: 100%; } }

/* ---------- inner pages: the page head ---------- */
.ph { --h1: clamp(56px, 8vw, 144px); position: relative; padding: calc(var(--hdr) + clamp(48px, 10vh, 120px)) var(--g) clamp(48px, 6vw, 96px); }
.ph h1 { font-size: var(--h1); line-height: .9; letter-spacing: -.06em; text-wrap: balance; max-width: 11.5em; }
.ph .lede { margin-top: calc(var(--h1) * .34); max-width: 32em; }
@media (max-width: 767px) { .ph { --h1: min(12.4vw, 60px); } }
@media (min-width: 1024px) {
  .ph { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 40px); }
  .ph h1 { grid-column: 1 / -1; }
  .ph .lede { grid-column: 1 / 7; }
  .ph-drop .lede { grid-column: 7 / 12; }
}

/* ---------- the barber: counted in, counted out, on the drape ---------- */
.ct-head { grid-column: 1 / 6; align-self: start; }
@media (min-width: 1024px) { .ct-head { position: sticky; top: calc(var(--hdr) + 56px); } }
.ct-h { font-size: clamp(64px, 7.4vw, 132px); line-height: .9; }
.ct-h .ln { padding-right: .12em; margin-right: -.12em; }
.sw { display: inline-grid; vertical-align: top; }
.sw > span { grid-area: 1 / 1; transition: transform .7s var(--ease), opacity .5s var(--ease); }
.sw-b { transform: translateY(108%); opacity: 0; }
.count.is-out .sw-a { transform: translateY(-108%); opacity: 0; }
.count.is-out .sw-b { transform: none; opacity: 1; }
.ct-head .ct-h + p { margin-top: calc(clamp(64px, 7.4vw, 132px) * .32); }
.tray { grid-column: 7 / 13; }
@media (max-width: 1023px) { .tray { margin-top: 56px; } }
.tray li { padding: clamp(14px, 1.4vw, 22px) 0; border-top: 1px solid var(--rule); font: 600 clamp(26px, 2.8vw, 46px)/1.1 var(--sans); letter-spacing: -.04em; color: var(--fg); }
.tray li:last-child { border-bottom: 1px solid var(--rule); }
.ct-after { grid-column: 7 / 13; margin-top: clamp(32px, 3.4vw, 52px); }
/* on phones the heading has long gone by the end of the list, so the count closes with its own line there */
.ct-out { display: none; }
@media (max-width: 1023px) {
  .ct-h { font-size: clamp(44px, 12vw, 132px); }
  .ct-out { display: block; margin-top: 32px; font: 600 clamp(44px, 12vw, 132px)/.9 var(--sans); letter-spacing: -.055em; color: var(--fg); }
  html.js .ct-out .ln-i { transform: translateY(108%); transition: transform .8s var(--ease); }
  .count.is-out .ct-out .ln-i { transform: none; }
}

/* his voice: one line, big, with the print */
.voice { text-align: center; }
.voice .quote { grid-column: 2 / 12; }
.voice .print { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 96px); padding: 0; text-align: left; }
.voice blockquote { margin: 0; }
.voice blockquote p { max-width: 14em; margin-inline: auto; font: 600 clamp(40px, 5.4vw, 96px)/.98 var(--sans); letter-spacing: -.055em; color: var(--fg); text-wrap: balance; }
.voice figcaption { margin-top: clamp(20px, 2.4vw, 36px); font-size: 15px; }

/* the drawer, on ink: the regulars' cards. With motion on they sit in a stack and the front one slides off as you scroll */
.dr-text { grid-column: 1 / 6; align-self: center; }
.dr-stack { display: grid; gap: 28px; }
/* the stack's own frame: it runs to the right edge of the screen and clips there, so a card slid off the stack
   leaves the screen cleanly, and the frame can be pinned with position: fixed (a transform pin shakes on phones) */
.dr-clip { grid-column: 6 / 13; align-self: center; width: calc(100% + var(--g)); padding: 48px var(--g) 48px 0; overflow-x: hidden; overflow-x: clip; }
/* no negative margins on the frame: a pin moves an element's margins onto its spacer, which would shrink the frame */
.dr-stack .icard { --rule-h: 40px; grid-column: auto; align-self: stretch; width: 100%; max-width: 760px; margin: 0; padding: 22px clamp(20px, 2.4vw, 36px) 26px; transform: none; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 2px 0 rgba(0, 0, 0, .25); }
.dr-stack .icard-top { font-size: 14px; }
.dr-stack .icard dl > div { grid-template-columns: 76px minmax(0, 1fr); }
.dr-stack .icard dt { font-size: 14px; }
.dr-stack .icard dd, .dr-stack .icard .sig { font-size: clamp(24px, 2vw, 31px); line-height: var(--rule-h); }
.dr-stack.is-stacked { gap: 0; }
.dr-stack.is-stacked > .icard { grid-area: 1 / 1; will-change: transform; }
.icard .sig { margin-top: 6px; text-align: right; font: 400 24px/32px var(--hand); color: var(--pen); }
.dr-cta { margin-top: 28px; }
.drawer { overflow-x: clip; }
@media (min-width: 1024px) { .drawer { min-height: 100vh; min-height: 100svh; align-content: center; padding-top: calc(var(--hdr) + 32px); } }
@media (max-width: 1023px) { .ch.drawer { padding-left: 0; padding-right: 0; } .drawer .dr-text { padding: 0 var(--g); } .dr-clip { width: 100%; margin-top: -8px; padding: 48px var(--g); } .drawer .dr-text p { max-width: 30em; } }

/* the chair: full height off the left edge, his rules taped over its corner */
.chair-photo { position: relative; grid-column: 1 / 7; margin: 0 0 0 calc(-1 * var(--g)); }
.chair-photo img { width: 100%; height: 92vh; height: 92svh; min-height: 620px; max-height: 1040px; object-fit: cover; }
.chair-photo > figcaption { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 18px var(--g) 56px; color: #F2F3F1; background: linear-gradient(to bottom, rgba(15, 18, 20, .6), rgba(15, 18, 20, 0)); }
.chair-text { grid-column: 8 / 13; align-self: center; padding: var(--sec) 0; }
.sign-card { --rule-h: 46px; position: relative; width: 100%; max-width: 520px; padding: 40px clamp(24px, 3vw, 44px) 30px; transform: rotate(1.2deg); }
.sign-card::before { content: ''; position: absolute; top: -15px; left: 50%; width: 128px; height: 32px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 255, 255, .62); box-shadow: 0 1px 2px rgba(15, 18, 20, .16); }
.sign-card ul { background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule-h) - 1px), var(--rule-blue) calc(var(--rule-h) - 1px) var(--rule-h)); }
.sign-card li, .sign-card .sig { --p: 1; font: 400 clamp(25px, 2.2vw, 32px)/var(--rule-h) var(--hand); color: var(--pen); -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) * (100% + 28px) - 28px), transparent calc(var(--p) * (100% + 28px))); mask-image: linear-gradient(90deg, #000 calc(var(--p) * (100% + 28px) - 28px), transparent calc(var(--p) * (100% + 28px))); }
.sign-card .sig { margin-top: 8px; text-align: right; }
.chair .sign-card { position: absolute; right: -11%; bottom: 9%; width: min(78%, 440px); margin: 0; z-index: 2; }
@media (min-width: 1024px) { .ch.chair { padding-top: 0; padding-bottom: 0; } }
@media (max-width: 1023px) {
  .chair-photo { margin: 0 calc(-1 * var(--g)); }
  .chair-photo img { height: auto; min-height: 0; aspect-ratio: 4 / 4.6; }
  .chair .sign-card { position: relative; right: auto; bottom: auto; width: 88%; margin: -96px auto 0; }
  .chair-text { padding: 48px 0 0; }
}

/* rows: a statement on the left, the reason on the right (the booking terms) */
.rows-h { grid-column: 1 / -1; }
.rows { grid-column: 1 / -1; margin-top: calc(var(--h2) * .42); }
.rows > div { display: grid; gap: 10px 40px; padding: clamp(22px, 2.2vw, 32px) 0; border-top: 1px solid var(--rule); }
.rows > div:last-child { border-bottom: 1px solid var(--rule); }
.rows dt { font: 600 clamp(24px, 2.4vw, 40px)/1.08 var(--sans); letter-spacing: -.04em; color: var(--fg); text-wrap: balance; }
.rows dd { margin: 0; max-width: 32em; }
@media (min-width: 1024px) { .rows > div { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 40px); align-items: baseline; } .rows dt { grid-column: 1 / 7; } .rows dd { grid-column: 8 / 13; } }

/* ---------- prices: the board, then the ledger beside a sheet of his price book ---------- */
.ph-board { --h1: clamp(48px, 6vw, 104px); }
.board { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--fg); }
.board a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; column-gap: clamp(16px, 2vw, 32px); padding: clamp(8px, .9vw, 14px) 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.bd-n { font: 600 clamp(24px, 2.4vw, 40px)/1.1 var(--sans); letter-spacing: -.04em; color: var(--fg); transition: color .25s; }
.bd-m { font: 500 13px/1 var(--mono); color: var(--steel); }
.bd-p { min-width: 3.4ch; text-align: right; font: 500 clamp(30px, 3.2vw, 54px)/1 var(--mono); letter-spacing: -.04em; color: var(--fg); }
.bd-p small { font-size: 1em; letter-spacing: -.04em; }
.board a:hover .bd-n, .board a:focus-visible .bd-n { color: var(--acc); }
@media (min-width: 1024px) { .ph-board .lede { grid-column: 1 / 5; align-self: start; } .ph-board .board { grid-column: 6 / 13; grid-row: 2; } }
/* the sheet: a page of his price book, ruled, with a red margin line, lying open beside the ledger */
.sheet { grid-column: 7 / 13; color: var(--pen); background-color: #FFFFFF; background-image: linear-gradient(90deg, transparent 0 calc(var(--sheet-m) - 1px), rgba(196, 85, 93, .45) calc(var(--sheet-m) - 1px) calc(var(--sheet-m) + .5px), transparent calc(var(--sheet-m) + .5px)), repeating-linear-gradient(to bottom, transparent 0 39px, rgba(64, 112, 160, .16) 39px 40px); --sheet-m: 26px; --rule: rgba(15, 18, 20, .1); box-shadow: 0 40px 80px -40px rgba(15, 18, 20, .35); }
.sheet .svc-a p:not(.sv-lead):not(.sv-slip):not(.sv-pr) { color: #2C3E5C; }
@media (min-width: 1024px) { .sheet { --sheet-m: clamp(28px, 2.6vw, 44px); margin-right: calc(-1 * var(--g)); padding: 0 var(--g) 0 calc(var(--sheet-m) + clamp(28px, 2.6vw, 44px)); } }
@media (max-width: 1023px) { .sheet { margin: 0 calc(-1 * var(--g)); padding: 8px var(--g) 8px calc(var(--g) + 18px); } }
.lg { display: none; }
.svc-a { grid-column: 7 / 13; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--rule); }
.svc-a:last-of-type { border-bottom: 1px solid var(--rule); }
.sv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; margin-bottom: 18px; }
.sv-top h2 { font-size: clamp(36px, 4.6vw, 64px); }
.sv-pr { font: 500 clamp(32px, 4vw, 56px)/1 var(--mono); letter-spacing: -.04em; color: var(--fg); }
.sv-lead { font: 600 clamp(22px, 2vw, 30px)/1.2 var(--sans); letter-spacing: -.035em; color: var(--fg); text-wrap: balance; }
.svc-a p { max-width: 32em; }
.sv-lead + p { margin-top: 20px; }
.lg-slip, .sv-slip { display: inline-block; padding: 8px 18px 6px; transform: rotate(-1.4deg); font: 400 clamp(23px, 1.8vw, 27px)/1.3 var(--hand); }
.ch .lg-slip { margin-top: 26px; }
.ch .lg-p { margin-top: .1em; }
.ch .sv-slip { margin: 0 0 20px; }
@media (min-width: 1024px) { html.js .sv-slip { display: none; } }
.sv-book { display: inline-flex; align-items: center; min-height: 48px; margin-top: 18px; font: 500 17px/1 var(--sans); color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: var(--rule-2); transition: color .25s; }
.sv-book:hover { color: var(--acc); }
@media (min-width: 1024px) {
  .ledger { grid-template-rows: repeat(5, auto); }
  html.js .lg { display: block; grid-column: 1 / 6; grid-row: 1 / 6; align-self: start; position: sticky; top: calc(var(--hdr) + 7vh); }
  .lg-in { display: grid; }
  .lg-it { grid-area: 1 / 1; opacity: 0; transition: opacity .45s var(--ease); }
  .lg-it.is-on { opacity: 1; }
  .lg-it .ln-i { transform: translateY(108%); transition: transform .8s var(--ease); }
  .lg-it.is-up .ln-i { transform: translateY(-108%); }
  .lg-it.is-on .ln-i { transform: none; }
  .lg-n { font: 600 clamp(44px, 4.6vw, 84px)/.96 var(--sans); letter-spacing: -.055em; color: var(--fg); }
  .lg-p { font: 500 clamp(104px, 11vw, 196px)/.92 var(--mono); letter-spacing: -.07em; color: var(--fg); }
  .lg-p small { font-size: .5em; vertical-align: .72em; margin-right: .06em; letter-spacing: 0; color: var(--steel); }
  .svc-a { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; border-top: 0; }
  .svc-a:last-of-type { border-bottom: 0; }
  html.js .sv-top { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
}

/* ---------- visit: the day, live; then the street ---------- */
.ph-day { --h1: clamp(48px, 5.4vw, 92px); text-align: center; }
.ph-day h1 { margin-inline: auto; }
.door-card { grid-column: 1 / -1; justify-self: center; position: relative; width: min(100%, 460px); margin: calc(var(--h1) * .34) auto 0; padding: 38px 30px 20px; text-align: left; transform: rotate(-1.4deg); }
.door-card::before { content: ''; position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F4F6F7, #A3ABB1 62%, #5C646A); box-shadow: 0 2px 3px rgba(15, 18, 20, .3); }
.door-card .now { font: 400 clamp(25px, 2.1vw, 30px)/1.3 var(--hand); color: var(--pen); }
.ch .door-clock, .door-clock { margin-top: 12px; font: 500 13px/1.3 var(--sans); color: var(--card-ink); }
/* five times across one row: their ink is about 11.1em wide, so the size is set from the row */
.day { --tf: clamp(48px, calc((100vw - 2 * var(--g)) / 12.6), 140px); }
.times { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: calc(var(--tf) * .3) calc(var(--tf) * .25); margin-top: clamp(40px, 5vw, 72px); padding: calc(var(--tf) * .22) 0; border-block: 1px solid var(--rule); }
.times li { list-style: none; }
.times a { position: relative; display: inline-block; font: 600 var(--tf)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.05em; color: var(--fg); text-decoration: none; transition: color .3s var(--ease); }
.times a.is-past { color: #B9BEC1; }
.times a.is-now, .times a.is-next { color: var(--acc); }
/* with a non-scaling stroke the dashes are measured on screen, so the dash is longer than any ring will ever be */
.times .ring { position: absolute; left: -7%; top: -4%; width: 114%; height: 110%; overflow: visible; pointer-events: none; }
.times .ring path { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1600 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset .9s var(--ease); }
.times a:hover .ring path, .times a:focus-visible .ring path, .times a.is-now .ring path, .times a.is-next .ring path { stroke-dashoffset: 0; }
html.rm .times .ring path { transition: none; }
.times a:hover, .times a:focus-visible { color: var(--acc); }
.ph-day .day-note { grid-column: 1 / -1; max-width: none; margin: 22px auto 0; font-size: 15px; color: var(--steel); }
.street { margin: 0; }
.street img { width: 100%; height: 80vh; height: 80svh; min-height: 420px; max-height: 900px; object-fit: cover; object-position: 50% 40%; }
.street figcaption { padding: 0 var(--g); }
.street-text h2 { grid-column: 1 / 6; align-self: start; }
.st-copy { grid-column: 7 / 13; }
.st-copy a { color: var(--fg); font-family: var(--mono); font-size: .9em; }
@media (max-width: 1023px) { .st-copy { margin-top: calc(var(--h2) * .28); } }
@media (max-width: 767px) { .day { --tf: clamp(44px, 15vw, 64px); } .times { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; } }

/* ---------- FAQ ---------- */
.faq h2, .faq-head { grid-column: 1 / 5; align-self: start; }
@media (min-width: 1024px) { .faq-head { position: sticky; top: calc(var(--hdr) + 48px); } }
.faq-act { margin-top: clamp(28px, 3vw, 44px); }
.faq-act .note { margin-top: 14px; font-size: 15px; color: var(--steel); }
.faq-act .note a { color: var(--fg); font-family: var(--mono); font-size: 14px; }
@media (max-width: 1023px) { .faq-act .btn { width: 100%; } }
.qa { grid-column: 6 / 13; }
@media (max-width: 1023px) { .qa { margin-top: 48px; } }
.qa details { border-top: 1px solid var(--rule-2); }
.qa details:last-child { border-bottom: 1px solid var(--rule-2); }
.qa summary { position: relative; list-style: none; cursor: pointer; padding: 26px 56px 26px 0; font: 600 clamp(21px, 1.9vw, 28px)/1.2 var(--sans); letter-spacing: -.035em; color: var(--fg); transition: color .25s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--acc); }
.qa summary::before, .qa summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 18px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.qa summary::after { transform: rotate(90deg); }
.qa details[open] summary::after { transform: rotate(0deg); }
.qa details p { padding: 0 56px 28px 0; max-width: 36em; }

/* ---------- booking: the razor folds shut beside the form, which is a blank index card ---------- */
.ch.book { position: relative; padding-top: calc(var(--hdr) + clamp(40px, 7vh, 88px)); }
.book > * { position: relative; z-index: 1; }
.book { --h2: clamp(52px, 6vw, 104px); }
.book-side { grid-column: 1 / 6; align-self: start; }
@media (min-width: 1024px) { .book-side { position: sticky; top: calc(var(--hdr) + 40px); grid-row: 1 / span 2; } }
.book-side h1 { font-size: var(--h2); line-height: .92; letter-spacing: -.06em; text-wrap: balance; }
.book-side h1 + p { margin-top: calc(var(--h2) * .32); }
.stage-book { width: 100%; aspect-ratio: 3 / 2; margin-top: clamp(8px, 1.4vw, 24px); }
.after-lines { grid-column: 7 / 13; margin-top: clamp(32px, 3.4vw, 52px); }
.after-lines li { font: 600 clamp(19px, 1.6vw, 24px)/1.3 var(--sans); letter-spacing: -.03em; color: var(--fg); padding: 12px 0; border-top: 1px solid var(--rule); }
.after-lines li:last-child { border-bottom: 1px solid var(--rule); }
.after-lines p { margin-top: 18px; font-size: 16px; max-width: 34em; }
.form-card { grid-column: 7 / 13; align-self: start; background: var(--card); color: var(--pen); padding: clamp(18px, 2vw, 28px) clamp(20px, 2.6vw, 40px) clamp(24px, 2.8vw, 40px); border-radius: 2px; box-shadow: 0 40px 80px -36px rgba(15, 18, 20, .4), 0 1px 0 rgba(15, 18, 20, .08); }
@media (max-width: 1023px) { .form-card { margin-top: 40px; } }
.fc-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: 18px; border-bottom: 2px solid #C4555D; font: 500 13px/1.3 var(--sans); color: var(--card-ink); }
.form-card form { display: grid; gap: 18px; }
.form-card form[hidden], .f-done[hidden] { display: none; }
.f { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }
.f > span, .f legend { font: 500 13px/1.3 var(--sans); color: var(--card-ink); padding: 0; }
.f i { font-style: normal; }
.f-row.two { display: grid; gap: 18px; }
@media (min-width: 560px) { .f-row.two { grid-template-columns: 1fr 1fr; } }
.f input:not([type=radio]), .f select, .f textarea { width: 100%; min-height: 48px; padding: 6px 2px 2px; font: 400 25px/1.3 var(--hand); color: var(--pen); background: transparent; border: 0; border-bottom: 1px solid rgba(64, 112, 160, .6); border-radius: 0; -webkit-appearance: none; appearance: none; }
.f select { background-image: linear-gradient(45deg, transparent 50%, var(--pen) 50%), linear-gradient(135deg, var(--pen) 50%, transparent 50%); background-position: calc(100% - 14px) 56%, calc(100% - 8px) 56%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.f textarea { min-height: 96px; padding-top: 0; line-height: 32px; resize: vertical; border-bottom: 0; background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(64, 112, 160, .6) 31px 32px); }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--acc); outline-offset: 2px; }
.f [aria-invalid=true] { border-bottom: 2px solid #A3303B; }
/* choices are written out; the one you pick gets circled in pen */
.pick-row { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -12px; }
.pick label { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick span { position: relative; display: grid; place-items: center; min-height: 52px; padding: 0 16px; font: 400 25px/1 var(--hand); color: var(--pen); transition: color .2s; }
.pick span::after { content: ''; position: absolute; inset: 4px 0 2px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M9 23C5 10 38 3 62 5c24 2 36 9 32 20-4 10-38 14-63 11C13 34 3 27 11 16c4-5 12-8 19-9' fill='none' stroke='%231F3557' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition: opacity .25s; }
.pick input:checked + span::after { opacity: 1; }
.pick label:hover span { color: var(--acc); }
.pick input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.f-err { color: #A3303B; font-size: 15px; }
.btn-file { margin-top: 6px; }
.demo-note { margin-top: -6px; font-size: 14px; color: var(--card-ink); text-align: center; }
.f-done { padding: 12px 0; }
.f-done:focus { outline: none; }
.f-done-h { font: 600 clamp(48px, 5vw, 80px)/.95 var(--sans); letter-spacing: -.06em; color: var(--dark); }
.ch .f-done-when { margin: 14px 0 18px; font: 400 clamp(25px, 2.2vw, 30px)/1.3 var(--hand); color: var(--pen); }
.f-done p:last-child { color: var(--card-ink); }

/* ---------- footer, mobile bar ---------- */
.foot { padding: clamp(56px, 6vw, 96px) var(--g) 32px; border-top: 1px solid var(--rule); }
.foot-line { font: 600 clamp(36px, 4.4vw, 76px)/.92 var(--sans); letter-spacing: -.06em; color: var(--fg); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px clamp(20px, 2.4vw, 40px); margin-top: clamp(28px, 3vw, 44px); }
.foot-nav a { display: inline-flex; align-items: center; min-height: 48px; font: 500 clamp(19px, 1.6vw, 24px)/1 var(--sans); letter-spacing: -.03em; color: var(--fg); text-decoration: none; transition: color .25s; }
.foot-nav a:hover { color: var(--acc); }
.foot-nav a[aria-current=page] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: var(--rule-2); }
.foot-cols { display: grid; gap: 24px; margin-top: clamp(28px, 3vw, 44px); font-size: 15px; }
.foot-cols a { color: var(--fg); }
@media (min-width: 768px) { .foot-cols { grid-template-columns: 1fr 1fr 1.4fr; gap: 40px; } }
.foot-disc { color: var(--steel); }
.credits a { white-space: nowrap; }
.credits { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--steel); max-width: 60em; }
.mbar { display: none; }
@media (max-width: 767px) {
  .mbar { position: fixed; inset: auto 0 0; z-index: 48; display: grid; transform: translateY(110%); transition: transform .45s var(--ease); grid-template-columns: 1.7fr 1fr; gap: 10px; padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom)); background: rgba(245, 244, 240, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--rule); }
  .mbar.is-on { transform: none; }
  .foot { padding-bottom: calc(40px + 86px + env(safe-area-inset-bottom)); }
}

/* ---------- reveals (IntersectionObserver adds .in) ---------- */
html.js .rv { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
html.rm .rv { transform: none; transition: opacity .6s linear; }
html.rm .sw > span, html.rm .lg-it, html.rm .lg-it .ln-i, html.rm .ct-out .ln-i { transition: none; }
@media (prefers-reduced-motion: reduce) { html.js .rv { transform: none; transition: opacity .5s linear; } .btn, .qa summary::after, .sw > span, .lg-it, .lg-it .ln-i { transition: none; } }