/* Petrak & Daughter Tire Co. — concept by Axava. Dark only, no photography. */

:root {
  --vulcanized: #0D0C0B;
  --sidewall: #1A1917;
  --groove: #2C2A27;
  --talc: #ECE6DA;
  --tread: #8F887D;
  --crayon: #F2C230;
  --crayon-press: #DDAE22;
  --brick: #7A2E21;
  --mortar: #3F1A13;

  --f-d: "Big Shoulders", "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-b: "Newsreader", Georgia, "Times New Roman", serif;

  --d-hero: clamp(56px, min(8.2vw, 15.5vh), 150px);
  --d-ph: clamp(52px, min(8vw, 14.5vh), 140px);
  --d-sign: clamp(64px, 12vw, 216px);
  --d-l: clamp(48px, 7vw, 128px);
  --d-rule: clamp(40px, 6vw, 116px);
  --d-triad: clamp(44px, 6.2vw, 112px);
  --d-m: clamp(40px, 4.6vw, 84px);
  --d-s: clamp(34px, 3.8vw, 64px);
  --d-xs: clamp(28px, 3vw, 48px);
  --lede: clamp(19px, 1.4vw, 23px);
  --body: clamp(17px, 1.25vw, 20px);
  --voice: clamp(20px, 1.55vw, 26px);
  --ui-l: clamp(32px, 3vw, 48px);

  --g: 24px;
  --hdr: 64px;
  --gap: 24px;
  --sec: 88px;
  --ease-out: cubic-bezier(.215, .61, .355, 1);
}
@media (min-width: 768px) { :root { --g: 32px; } }
@media (min-width: 1024px) { :root { --g: clamp(40px, 4.4vw, 72px); --hdr: 80px; --sec: clamp(120px, 16vh, 200px); } }
/* gutters that clear the notch in landscape */
:root { --gl: max(var(--g), env(safe-area-inset-left)); --gr: max(var(--g), env(safe-area-inset-right)); }
html { scroll-padding-top: calc(var(--hdr) + 16px); }
@media (max-width: 1023.98px) { html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--vulcanized); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--vulcanized); color: var(--talc);
  font-family: var(--f-b); font-size: var(--body); line-height: 1.55;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
em { font-style: normal; }
::selection { background: var(--crayon); color: var(--vulcanized); }
:focus-visible { outline: 3px solid var(--crayon); outline-offset: 3px; }
.nw { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
br.m-br { display: none; }
@media (min-width: 1024px) { .m-only { display: none !important; } }
@media (max-width: 1023.98px) { .d-only { display: none !important; } br.m-br { display: inline; } }

/* ---------- type ---------- */
.display {
  font-family: var(--f-d); font-weight: 800; text-transform: uppercase;
  line-height: .88; letter-spacing: -.01em; font-optical-sizing: auto; color: var(--talc);
  font-variant-numeric: lining-nums;
}
.d-hero { font-size: var(--d-hero); line-height: .86; }
.d-l { font-size: var(--d-l); }
.d-triad { font-size: var(--d-triad); }
.d-m { font-size: var(--d-m); line-height: .9; letter-spacing: -.005em; }
.d-s { font-size: var(--d-s); line-height: .92; }
.d-ph { font-size: var(--d-ph); line-height: .86; }
/* below a page title, section heads step down so the title stays the largest thing on the page */
html:not([data-page="home"]) .d-l { font-size: clamp(44px, 5.6vw, 100px); }
.c { color: var(--crayon); }
.lede { font-size: var(--lede); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
.body { font-size: var(--body); line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.voice { font-style: italic; font-size: var(--voice); line-height: 1.45; }
.small { font-size: 16px; line-height: 1.5; color: var(--tread); }
@media (min-width: 1024px) { .small { font-size: 17px; } }
.sig { display: block; margin-top: 12px; font-style: italic; font-size: 17px; color: var(--tread); }
.phone-l { display: inline-block; padding: 6px 0; margin: -6px 0; font-family: var(--f-d); font-weight: 700; font-size: var(--ui-l); line-height: 1; text-decoration: none; color: var(--talc); font-variant-numeric: lining-nums tabular-nums; }
.phone-l:hover { color: var(--crayon); }

/* masked line reveals: each .ln clips its .ln-i, padded so caps never touch the clip edge */
.ln { display: block; overflow: hidden; padding: .1em 0 .06em; margin: -.1em 0 -.06em; }
.ln-i { display: block; }
html.motion [data-reveal] .ln-i { transform: translateY(108%); }
html.motion [data-reveal].is-in .ln-i { transform: none; transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.motion [data-fade], html.motion [data-row] { opacity: 0; transform: translateY(16px); }
html.motion [data-fade].is-in, html.motion [data-row].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
html.motion .hero-fade { opacity: 0; transform: translateY(14px); }
html.motion .hero-fade.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
html.motion .d-hero .ln-i { transform: translateY(105%); }
html.motion .d-hero.is-in .ln-i { transform: none; transition: transform .9s cubic-bezier(.165, .84, .44, 1); transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 2px; border: 2px solid transparent;
  font-family: var(--f-d); font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer; font-optical-sizing: auto;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
@media (min-width: 1024px) { .btn { min-height: 60px; } .btn-lg { min-height: 68px; padding: 0 34px; font-size: 22px; } }
.btn-primary { background: var(--crayon); color: var(--vulcanized); }
.btn-primary:hover { background: var(--crayon-press); }
.btn-outline { background: transparent; color: var(--talc); border-color: var(--talc); }
.btn-outline:hover { background: var(--talc); color: var(--vulcanized); }
.btn-dark { background: var(--vulcanized); color: var(--talc); min-width: 280px; }
.btn-dark:hover { background: #24221F; }
.band .btn-dark:focus-visible, .band a:focus-visible { outline-color: var(--vulcanized); }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gr) 0 var(--gl);
}
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sidewall); border-bottom: 1px solid var(--groove); opacity: 0; transition: opacity .2s ease; }
.hdr.is-solid::before { opacity: 1; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; min-width: 0; }
.mark { color: var(--talc); flex: none; overflow: visible; }
.mark .st { stroke-dasharray: 5.4; stroke-dashoffset: 5.4; }
/* Jo's logo, with the concept badge set off by a groove */
.logo { display: block; flex: none; width: auto; height: 42px; }
@media (min-width: 1024px) { .logo { height: 54px; } }
.badge { padding-left: 12px; border-left: 1px solid var(--groove); font-style: italic; font-size: 12px; line-height: 1.2; color: var(--tread); white-space: nowrap; }
@media (min-width: 1024px) { .badge { font-size: 13px; } }
.nav { display: none; gap: 30px; align-items: center; }
.nav a { position: relative; padding: 10px 0; font-family: var(--f-d); font-weight: 600; font-size: 19px; text-decoration: none; color: var(--talc); }
.nav a:hover { color: var(--crayon); }
/* the current page wears the paint stripe */
.nav a[aria-current="page"] { color: var(--crayon); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 3px; border-radius: 2px; background: var(--crayon); }
.hdr-r { display: none; align-items: center; gap: 28px; }
.hdr-phone { display: none; font-family: var(--f-d); font-weight: 700; font-size: 20px; text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.hdr-phone:hover { color: var(--crayon); }
@media (min-width: 1024px) { .hdr-r, .nav { display: flex; } }
@media (min-width: 1360px) { .hdr-phone { display: inline; } }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--crayon); color: var(--vulcanized); font-family: var(--f-d); font-weight: 700; font-size: 18px; text-decoration: none; transform: translateY(-160%); }
.skip:focus { transform: none; }

/* ---------- menu (below 1024) ---------- */
.menu-b {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 0 0 16px; margin-right: -2px;
  background: none; border: 0; color: var(--talc); cursor: pointer;
  font-family: var(--f-d); font-weight: 700; font-size: 19px; line-height: 1; text-transform: uppercase; letter-spacing: .05em;
}
.menu-b i { position: relative; width: 22px; height: 12px; flex: none; }
.menu-b i::before, .menu-b i::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .25s var(--ease-out), top .25s var(--ease-out); }
.menu-b i::before { top: 0; }
.menu-b i::after { top: 10px; }
.menu-b[aria-expanded="true"] i::before { top: 5px; transform: rotate(45deg); }
.menu-b[aria-expanded="true"] i::after { top: 5px; transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 49; background: var(--vulcanized); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: calc(var(--hdr) + 28px) var(--gr) calc(28px + env(safe-area-inset-bottom)) var(--gl);
}
.menu[hidden] { display: none; }
.menu-l a { display: block; padding: 4px 0; font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 12.5vw, 72px); line-height: .92; text-decoration: none; color: var(--talc); }
.menu-l a[aria-current="page"] { color: var(--crayon); }
.menu-l a[aria-current="page"] .ln { padding-bottom: .12em; margin-bottom: -.12em; }
.menu-l a[aria-current="page"] .ln-i { display: inline-block; position: relative; }
.menu-l a[aria-current="page"] .ln-i::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .07em; border-radius: 2px; background: var(--crayon); }
.menu-f { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.menu-f .btn { width: 100%; margin-top: 8px; }
html.menu-open, html.menu-open body { overflow: hidden; }
html.menu-open .hdr::before { opacity: 1; }
html.motion .menu .ln-i { transform: translateY(105%); }
html.motion .menu.is-open .ln-i { transform: none; transition: transform .6s cubic-bezier(.165, .84, .44, 1); transition-delay: calc(60ms + var(--i, 0) * 45ms); }
@media (min-width: 1024px) { .menu-b { display: none; } .menu { display: none !important; } }

/* ---------- shared grid ---------- */
.hero, .prices, .star-track, .band, .visit, .foot, .ph, .idx, .dc-h, .dc-steps, .depth, .faq, .free, .fh, .tell, .close { padding-left: var(--gl); padding-right: var(--gr); }
@media (min-width: 1024px) {
  .hero, .prices, .star-track, .band, .visit, .foot, .ph, .idx, .dc-h, .dc-track, .depth, .faq, .free, .fh, .tell, .close, .dr-copy, .ledger-g {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  }
}

/* ---------- 3.1 hero ---------- */
.hero { position: relative; }
.hero-b1 { padding-top: calc(var(--hdr) + 36px); }
.d-hero { margin: 0 0 28px; }
.hero .lede { margin-bottom: 28px; }
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.hero-cta .btn-primary { width: 100%; }
.hours { margin-top: 2px; }
.stage { position: relative; }
.stage .still { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-stage .still-d { object-position: 0% 40%; }
.stage canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero-stage { margin: 40px calc(-1 * var(--gr)) 0 calc(-1 * var(--gl)); height: clamp(300px, 46svh, 420px); }
.hero-stage .stage-in { position: relative; height: 100%; overflow: clip; }
.hero-b2 { padding: 56px 0 0; }
.b2-in .d-m { margin-bottom: 24px; }
@media (min-width: 1024px) {
  .hero { min-height: calc(100vh + 80vh); min-height: calc(100svh + 80vh); }
  .hero-b1 { grid-column: 1 / 8; grid-row: 1; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--hdr) + 5vh); padding-bottom: 6vh; display: flex; flex-direction: column; justify-content: center; }
  .hero-cta { flex-direction: row; align-items: center; gap: 16px; margin-bottom: 22px; }
  .hero-cta .btn-primary { width: auto; }
  .hero-stage { grid-column: 8 / 13; grid-row: 1 / 3; margin: 0 calc(-1 * var(--gr)) 0 var(--gap); height: auto; }
  .hero-stage .stage-in { position: sticky; top: 0; height: 100vh; height: 100svh; }
  .hero-b2 { grid-column: 1 / 7; grid-row: 2; min-height: 80vh; padding: 0; display: flex; align-items: center; }
}

/* ---------- years lines (under a chapter's h2) ---------- */
.years { font-family: var(--f-d); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--tread); margin-bottom: 10px; font-variant-numeric: lining-nums; }

/* ---------- 3.3 the wall ---------- */
/* the brick and its paint wear are baked once from wall.js's generators into assets/wall/ (tools/petrak-wall-export.mjs) */
.wall {
  --tile-w: 512px; --tile-h: 256px;
  position: relative; background-color: var(--brick);
  background-image: url(assets/wall/brick.jpg); background-size: var(--tile-w) var(--tile-h);
  background-position: 0 0;
}
@media (min-width: 1024px) { .wall { --tile-w: 960px; --tile-h: 480px; } }
.wall-in { padding: 0 var(--g); }
.sign { text-align: center; font-family: var(--f-d); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; font-size: clamp(56px, 18vw, 96px); }
.sign > span { display: block; }
.paint {
  -webkit-mask-size: var(--tile-w) var(--tile-h); mask-size: var(--tile-w) var(--tile-h);
  -webkit-mask-position: var(--mx, 0) var(--my, 0); mask-position: var(--mx, 0) var(--my, 0);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.paint.aged { -webkit-mask-image: url(assets/wall/paint-aged-m.webp); mask-image: url(assets/wall/paint-aged-m.webp); color: var(--talc); opacity: .9; }
@media (min-width: 1024px) { .paint.aged { -webkit-mask-image: url(assets/wall/paint-aged.webp); mask-image: url(assets/wall/paint-aged.webp); } }
.paint.fresh { -webkit-mask-image: url(assets/wall/paint-fresh.webp); mask-image: url(assets/wall/paint-fresh.webp); color: var(--crayon); }
/* "& Daughter": chalk snap lines, a chalk outline, a thin first coat and an opaque second, all in one cell */
.sign-fresh { display: grid !important; justify-items: center; margin-top: .04em; }
.sign-fresh > * { grid-area: 1 / 1; }
.chalk-l { position: relative; justify-self: stretch; align-self: stretch; pointer-events: none; opacity: calc(var(--chalkL, 1) * var(--clean, 1)); }
.cl { position: absolute; left: var(--cl-x, 0px); width: var(--cl-w, 100%); height: 2px; background: rgba(236, 230, 218, .38);
  -webkit-mask: url(assets/wall/chalk.webp) 0 0 / 256px 64px repeat; mask: url(assets/wall/chalk.webp) 0 0 / 256px 64px repeat; }
.cl-cap { top: var(--cl-cap, 12%); }
.cl-base { top: var(--cl-base, 84%); }
.chalk { display: inline-block; opacity: var(--clean, 1);
  -webkit-mask: url(assets/wall/chalk.webp) 0 0 / 256px 64px repeat; mask: url(assets/wall/chalk.webp) 0 0 / 256px 64px repeat; }
.chalk-i {
  display: inline-block; color: transparent; -webkit-text-stroke: 1.5px rgba(236, 230, 218, .5);
  -webkit-mask-image: linear-gradient(90deg, #000 0 49%, transparent 51% 100%); mask-image: linear-gradient(90deg, #000 0 49%, transparent 51% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: var(--chalk, 0%) 0; mask-position: var(--chalk, 0%) 0;
}
.coat { display: inline-block; }
.coat.c1 { opacity: .58; }
.coat .wipe {
  display: inline-block;
  -webkit-mask-image: url(assets/wall/wipe.webp); mask-image: url(assets/wall/wipe.webp);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.c1 .wipe { -webkit-mask-position: var(--w1, 0%) 0; mask-position: var(--w1, 0%) 0; }
.c2 .wipe { -webkit-mask-position: var(--w2, 0%) 0; mask-position: var(--w2, 0%) 0; }
/* until the scroll gets there, the chalk isn't snapped and neither coat is on */
html.motion .sat { --w1: 100%; --w2: 100%; --chalk: 100%; --chalkL: 0; --clean: 1; }
html.rm .sat .chalk-l, html.rm .sat .chalk, html:not(.js) .sat .chalk-l, html:not(.js) .sat .chalk { display: none; }
.cap { color: var(--talc); max-width: 30em; }
.rules li { font-family: var(--f-d); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 11vw, 56px); line-height: .95; letter-spacing: 0; text-wrap: balance; }
.rules li + li { margin-top: .45em; }
@media (min-width: 1024px) { .rules li + li { margin-top: .12em; } }
.rules .paint { display: inline-block; max-width: 100%; }
.cap-2 { margin: 48px 0 0 auto; text-align: right; max-width: 24em; }
@media (min-width: 1024px) {
  .sign { font-size: var(--d-sign); }
  .rules li { font-size: var(--d-rule); white-space: nowrap; }
  .rules .paint { display: inline-block; }
  .cap-2 { margin-top: 64px; }
}

/* ---------- 3.4 prices ---------- */
.prices { padding-top: var(--sec); padding-bottom: var(--sec); }
.prices .d-l { margin-bottom: 56px; }
.prow { border-top: 1px solid var(--groove); padding: 28px 0 30px; }
.prow-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; margin-bottom: 12px; }
.pname, .pprice { font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: var(--d-s); line-height: .95; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.pname { text-wrap: balance; }
.pprice { white-space: nowrap; justify-self: end; }
.pnote { border-top: 1px solid var(--groove); padding-top: 24px; max-width: 34em; }
@media (min-width: 1024px) {
  .prices .d-l { grid-column: 1 / 10; margin-bottom: 72px; }
  .plist { grid-column: 4 / 13; }
  .prow { padding: 36px 0; }
  .prow-h { column-gap: 32px; }
  .prow .body { max-width: 66%; }
}

/* ---------- 3.5 the star ---------- */
.star { padding-top: var(--sec); padding-bottom: var(--sec); }
.star-h { padding-left: var(--gl); padding-right: var(--gr); margin-bottom: 56px; }
.step + .step { margin-top: 88px; }
.sb { margin: 0 calc(-1 * var(--gr)) 28px calc(-1 * var(--gl)); aspect-ratio: 100 / 92; background: var(--vulcanized); overflow: clip; }
.sb .freeze { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.step-c .d-m { margin-bottom: 20px; }
@media (min-width: 1024px) {
  .star-h { max-width: calc((100% - 2 * var(--g)) * 10 / 12 + 2 * var(--g)); margin-bottom: 32px; }
  .star-stage-wrap { grid-column: 1 / 8; grid-row: 1; margin: 0 var(--gap) 0 calc(-1 * var(--gl)); position: relative; }
  .star-stage { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); }
  .star-stage .still { object-fit: contain; opacity: 0; transition: opacity .2s ease; }
  .star-stage .still.is-on { opacity: 1; }
  .steps { grid-column: 8 / 13; grid-row: 1; padding-bottom: 25vh; }
  .step { min-height: 60vh; display: flex; align-items: center; }
  .step + .step { margin-top: 0; }
  .step[data-step="a"] { padding-top: 25vh; min-height: 85vh; }
  .step[data-step="c"] { min-height: 80vh; }
}

/* ---------- 3.6 got life left ---------- */
.honest { background: var(--sidewall); padding-top: var(--sec); padding-bottom: var(--sec); }
.honest .d-l { margin-bottom: 40px; }
.honest-p .body + .body { margin-top: 1.1em; }
.honest-jo { margin-top: 40px; }
@media (min-width: 1024px) {
  .honest .d-l { grid-column: 1 / 12; margin-bottom: 64px; }
  .honest-p { grid-column: 7 / 12; }
}

/* ---------- 3.7 CTA band ---------- */
.band { background: var(--crayon); color: var(--vulcanized); padding-top: 72px; padding-bottom: 72px; }
.band-line { color: var(--vulcanized); margin-bottom: 32px; }
.band-line .b { color: var(--brick); }
.band .btn-dark { width: 100%; }
.band-note { color: var(--vulcanized); margin-top: 16px; max-width: 30em; }
.band-note a { display: inline-block; padding: 14px 0; margin: -14px 0; color: var(--vulcanized); text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 1024px) {
  .band { padding-top: clamp(72px, 10vh, 120px); padding-bottom: clamp(72px, 10vh, 120px); align-items: center; }
  .band-line { grid-column: 1 / 9; margin-bottom: 0; }
  .band-r { grid-column: 9 / 13; }
  .band .btn-dark { width: auto; }
}

/* ---------- 3.8 FAQ ---------- */
.faq { padding-top: var(--sec); padding-bottom: var(--sec); }
.faq .d-l { margin: 0 0 56px; }
.acc { border-bottom: 1px solid var(--groove); }
.acc-row { border-top: 1px solid var(--groove); }
.acc-row h3 { margin: 0; }
.acc-q {
  width: 100%; min-height: 88px; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: none; border: 0; color: var(--talc); text-align: left; cursor: pointer;
  font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: var(--d-xs); line-height: 1; letter-spacing: 0;
}
.acc-q:hover span { color: var(--crayon); }
.acc-q i { position: relative; flex: none; width: 20px; height: 20px; }
.acc-q i::before, .acc-q i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: var(--talc); transition: transform .3s var(--ease-out); }
.acc-q i::after { transform: rotate(90deg); }
.acc-q[aria-expanded="true"] i::after { transform: rotate(0deg) scaleX(0); }
@media (min-width: 1024px) { .acc-q i { width: 24px; height: 24px; } .faq .d-l { grid-column: 1 / 10; margin-bottom: 72px; } .acc { grid-column: 4 / 13; } }
.acc-a { overflow: hidden; }
.acc-a .body { padding: 0 0 28px; }

/* ---------- 3.9 visit + book ---------- */
.visit { padding-top: calc(var(--hdr) + 40px); padding-bottom: var(--sec); display: flex; flex-direction: column; }
.visit-hd { margin-bottom: 40px; }
.visit .facade { margin: 0 0 48px; }
.visit-r { background: var(--sidewall); padding: 28px var(--gr) 32px var(--gl); margin: 0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl)); border-radius: 0; }
.visit-l { margin-top: 64px; }
.addr { font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: var(--d-s); line-height: .95; margin-bottom: 32px; }
.hrs > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--groove); }
.hrs > div:last-child { border-bottom: 1px solid var(--groove); }
.hrs dt { font-family: var(--f-d); font-weight: 600; font-size: 20px; }
.hrs dd { font-size: var(--body); }
.walkin { margin-top: 20px; }
.visit-phone { margin-top: 36px; display: flex; flex-direction: column; gap: 8px; }
.visit-jo { margin-top: 40px; max-width: 26em; }
@media (min-width: 1024px) {
  .visit { display: grid; grid-template-rows: auto auto auto 1fr; padding-top: calc(var(--hdr) + 9vh); }
  .visit-hd { grid-column: 1 / 7; grid-row: 1; margin-bottom: 64px; }
  .visit .facade { grid-column: 1 / 6; grid-row: 2; margin: 0 0 56px; }
  .visit-l { grid-column: 1 / 6; grid-row: 3; margin-top: 0; }
  .visit-r { grid-column: 7 / 13; grid-row: 1 / 5; padding: 48px; margin: 0; border-radius: 2px; align-self: start; }
}

/* form */
.bk-legend { font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 2.8vw, 44px); line-height: .95; margin-bottom: 24px; padding: 0; outline: none; }
.rows { display: grid; gap: 8px; }
@media (min-width: 1024px) { .rows-2 { grid-template-columns: 1fr 1fr; } }
.rrow {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 0 20px; border: 1px solid var(--groove); border-radius: 2px; cursor: pointer;
  font-family: var(--f-d); font-weight: 600; font-size: 20px; line-height: 1.15; background: var(--vulcanized);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rrow:hover { border-color: var(--tread); }
.rrow input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rrow i { position: relative; width: 22px; height: 16px; flex: none; opacity: 0; }
.rrow i::before, .rrow i::after { content: ""; position: absolute; background: var(--crayon); height: 3px; border-radius: 1px; }
.rrow i::before { width: 9px; left: 0; top: 8px; transform: rotate(45deg); transform-origin: left center; }
.rrow i::after { width: 17px; left: 5px; top: 12px; transform: rotate(-50deg); transform-origin: left center; }
.rrow:has(input:checked) { border-color: var(--crayon); box-shadow: inset 0 0 0 1px var(--crayon); }
.rrow:has(input:checked) i { opacity: 1; }
.rrow.is-checked { border-color: var(--crayon); box-shadow: inset 0 0 0 1px var(--crayon); }
.rrow.is-checked i { opacity: 1; }
.rrow.is-off { opacity: .38; cursor: not-allowed; }
.rrow.is-off:hover { border-color: var(--groove); }
.rrow:has(input:focus-visible) { outline: 3px solid var(--crayon); outline-offset: 3px; }
.jo-reply { margin: 22px 0 32px; min-height: 3em; }
.jo-reply .voice { transition: opacity .2s ease; }
.jo-reply .voice.is-swap { opacity: 0; }
.jo-reply .sig { display: inline; margin: 0 0 0 4px; }
.fld { margin-top: 24px; }
.fld label, .lbl { display: block; font-family: var(--f-d); font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--talc); margin-bottom: 8px; }
.hint { font-size: 16px; line-height: 1.45; color: var(--tread); margin: -2px 0 10px; }
.fld input, .fld select, .fld textarea {
  display: block; width: 100%; min-height: 56px; padding: 0 16px; border: 1px solid var(--groove); border-radius: 2px;
  background: var(--vulcanized); color: var(--talc); font-family: var(--f-b); font-size: 17px; line-height: 1.4;
  -webkit-appearance: none; appearance: none; transition: border-color .15s ease;
}
.fld textarea { padding: 14px 16px; min-height: 112px; resize: vertical; }
.fld select { background-image: linear-gradient(45deg, transparent 50%, var(--talc) 50%), linear-gradient(135deg, var(--talc) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--tread); opacity: 1; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 3px solid var(--crayon); outline-offset: 2px; border-color: var(--crayon); }
.fld.is-err input, .fld.is-err select { border-color: var(--crayon); }
.err { margin-top: 8px; font-size: 16px; color: var(--talc); }
.err::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--crayon); vertical-align: 1px; }
.bk-next { width: 100%; margin-top: 32px; }
.bk-btns { display: flex; flex-direction: column-reverse; gap: 12px; margin-top: 32px; }
.bk-btns .btn { width: 100%; }
.bk-foot { margin-top: 16px; }
@media (min-width: 1024px) {
  .bk-btns { flex-direction: row; align-items: center; }
  .bk-btns .btn { width: auto; }
  .bk-btns .bk-send { flex: 1 1 auto; }
}
.bk { transition: height .25s var(--ease-out); }
.bk-step { transition: opacity .2s ease; }
.bk-step.is-out { opacity: 0; transition-duration: .15s; }
.bk-done { padding: 8px 0; }
.mark-done { width: 120px; height: 120px; margin-bottom: 28px; }
.mark-done .st { stroke-dasharray: 5.4; stroke-dashoffset: 5.4; }
.bk-thanks { margin-bottom: 20px; outline: none; }
.bk-done .body + .body { margin-top: 1em; }
.demo-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--groove); }

/* ---------- shared: page heads, arrow links, next page ---------- */
.ph { padding-top: calc(var(--hdr) + 40px); padding-bottom: 72px; }
.ph .d-ph { margin-bottom: 32px; }
.ph-r .lede + .ph-cta { margin-top: 28px; }
.ph-cta { display: flex; flex-direction: column; gap: 12px; }
.ph-cta .btn { width: 100%; }
@media (min-width: 1024px) {
  .ph { padding-top: calc(var(--hdr) + 9vh); padding-bottom: 9vh; }
  /* the title on the left, what it means beside its last line */
  .ph .d-ph { grid-column: 1 / 8; grid-row: 1; margin-bottom: 0; }
  .ph-r { grid-column: 8 / 13; grid-row: 1; align-self: end; }
  /* tires: the three prices are the head */
  .ph-tires .d-ph { grid-column: 1 / 7; }
  .ph-tires .ph-r { grid-column: 1 / 7; grid-row: 2; align-self: start; margin-top: 40px; }
  .ph-tires { grid-template-rows: auto auto 1fr; }
  .ph-tires .tiers { grid-column: 8 / 13; grid-row: 1 / 4; align-self: start; }
  .ph-cta { flex-direction: row; flex-wrap: wrap; }
  .ph-cta .btn { width: auto; }
}
@media (min-width: 1024px) and (max-width: 1099.98px) { .ph-prices .ph-cta .btn { flex: 1 1 100%; } }
.ph + .prices { padding-top: 8px; }

.more { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; padding: 10px 0; font-family: var(--f-d); font-weight: 700; font-size: 20px; line-height: 1.15; text-decoration: none; color: var(--talc); }
.more span { background: linear-gradient(var(--crayon), var(--crayon)) 0 100% / 100% 2px no-repeat; padding-bottom: 4px; }
.more:hover { color: var(--crayon); }
.arw, .more i, .next-a i { position: relative; flex: none; width: 22px; height: 14px; transition: transform .25s var(--ease-out); }
.more i::before, .next-a i::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
.more i::after, .next-a i::after { content: ""; position: absolute; right: 1px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transform-origin: 60% 40%; }
.more:hover i, .next-a:hover i { transform: translateX(5px); }
.hero-b2 .more { margin-top: 24px; }

.next { border-top: 1px solid var(--groove); }
.next-a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; padding: 56px var(--gr) 72px var(--gl); text-decoration: none; color: var(--talc); }
.next-t { grid-column: 1; font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: var(--d-l); line-height: .88; transition: color .2s ease; }
.next-d { grid-column: 1; margin-top: 16px; max-width: 34em; color: var(--tread); text-wrap: balance; }
.next-a i { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 44px; height: 28px; }
.next-a i::before { height: 3px; margin-top: -1.5px; }
.next-a i::after { width: 18px; height: 18px; margin-top: -9.5px; border-width: 3px; }
.next-a:hover .next-t { color: var(--crayon); }
.next-a:focus-visible { outline-offset: -6px; }
@media (min-width: 1024px) { .next-a { padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(88px, 13vh, 150px); } .next-a i { width: 64px; height: 36px; } }

/* ---------- home: everything else on Kenmore (five pages, five nuts) ---------- */
.idx { padding-top: var(--sec); padding-bottom: var(--sec); }
.idx-h .d-l { margin-bottom: 32px; }
.idx-jo { max-width: 26em; margin-bottom: 48px; }
.hub { --hs: min(78vw, 300px); position: relative; }
.hub-svg { display: block; width: var(--hs); height: var(--hs); margin: 0 auto 40px; overflow: visible; }
.hub-rim { fill: none; stroke: var(--talc); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hub-thin { fill: none; stroke: var(--tread); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hub-face { fill: #151413; stroke: var(--groove); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hub-bore { fill: var(--vulcanized); stroke: var(--talc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hub-nut { fill: var(--sidewall); stroke: var(--talc); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .25s ease; }
.hub-lead { display: none; fill: none; stroke: var(--tread); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .25s ease; }
.hub-dot { display: none; fill: var(--tread); transition: fill .25s ease; }
/* the witness stripe: painted on the page you're on and on every page you've read */
.hub-st { fill: none; stroke: var(--crayon); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s var(--ease-out); }
.hub-st { pointer-events: none; }
.hub-st.is-seen, .hub-st[data-p="home"] { stroke-dashoffset: 0; }
html.motion .hub:not(.is-in) .hub-st[data-p="home"] { stroke-dashoffset: 1; }
html.motion .hub.is-in .hub-st[data-p="home"] { transition-delay: .6s; transition-duration: .3s; }
.hub-l { border-bottom: 1px solid var(--groove); }
.hub-i { border-top: 1px solid var(--groove); }
.hub-a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-items: center; padding: 24px 0 26px; text-decoration: none; color: var(--talc); }
.hub-mini { grid-row: 1; width: 44px; height: 44px; overflow: visible; }
.hub-mini .hub-st { stroke-width: 4.5; }
.hub-t { grid-column: 2; font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: var(--d-s); line-height: .92; transition: color .2s ease; }
.hub-d { grid-column: 2; max-width: 32em; color: var(--tread); text-wrap: pretty; }
.hub-a:hover .hub-t, .hub-a:focus-visible .hub-t { color: var(--crayon); }
.hub-a:hover .hub-mini .hub-st, .hub-a:focus-visible .hub-mini .hub-st { stroke-dashoffset: 0; }
@media (min-width: 1024px) {
  .idx-h { display: contents; }
  .idx-h .d-l { grid-column: 1 / 8; grid-row: 1; margin-bottom: 0; }
  .idx-jo { grid-column: 9 / 13; grid-row: 1; align-self: end; margin: 0; }
  .hub { --hs: clamp(340px, 34vw, 520px); --lw: calc((100% - var(--hs)) / 2 - 18px); grid-column: 1 / -1; grid-row: 2; height: var(--hs); margin-top: clamp(56px, 9vh, 96px); }
  .hub-svg { position: absolute; left: 50%; top: 0; margin: 0 0 0 calc(var(--hs) / -2); }
  .hub-lead, .hub-dot { display: inline; }
  .hub-l { border: 0; }
  .hub-i { position: absolute; top: calc(50% + var(--hs) * var(--y) / 600); width: var(--lw); border: 0; }
  .hub-side-r { left: calc(50% + var(--hs) / 2 + 18px); }
  .hub-side-l { right: calc(50% + var(--hs) / 2 + 18px); text-align: right; }
  .hub-a { display: block; padding: 0; transform: translateY(calc(var(--d-s) * -.46)); }
  .hub-mini { display: none; }
  .hub-t { display: block; }
  .hub-d { display: block; max-width: 21em; margin-top: 10px; font-size: 17px; }
  .hub-side-l .hub-d { margin-left: auto; }
  /* pointing at a page (its label or its nut) paints its nut and lights its leader */
  .hub-hit { cursor: pointer; }
  .hub:has(.hub-i[data-p="tires"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="tires"]:hover) .hub-svg .hub-st[data-p="tires"] { stroke-dashoffset: 0; }
  .hub:has(.hub-i[data-p="tires"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="tires"]:hover) .hub-hit[data-p="tires"] .hub-lead { stroke: var(--crayon); }
  .hub:has(.hub-i[data-p="tires"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="tires"]:hover) .hub-hit[data-p="tires"] .hub-dot { fill: var(--crayon); }
  .hub:has(.hub-i[data-p="tires"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="tires"]:hover) .hub-i[data-p="tires"] .hub-t { color: var(--crayon); }
  .hub:has(.hub-i[data-p="prices"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="prices"]:hover) .hub-svg .hub-st[data-p="prices"] { stroke-dashoffset: 0; }
  .hub:has(.hub-i[data-p="prices"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="prices"]:hover) .hub-hit[data-p="prices"] .hub-lead { stroke: var(--crayon); }
  .hub:has(.hub-i[data-p="prices"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="prices"]:hover) .hub-hit[data-p="prices"] .hub-dot { fill: var(--crayon); }
  .hub:has(.hub-i[data-p="prices"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="prices"]:hover) .hub-i[data-p="prices"] .hub-t { color: var(--crayon); }
  .hub:has(.hub-i[data-p="family"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="family"]:hover) .hub-svg .hub-st[data-p="family"] { stroke-dashoffset: 0; }
  .hub:has(.hub-i[data-p="family"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="family"]:hover) .hub-hit[data-p="family"] .hub-lead { stroke: var(--crayon); }
  .hub:has(.hub-i[data-p="family"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="family"]:hover) .hub-hit[data-p="family"] .hub-dot { fill: var(--crayon); }
  .hub:has(.hub-i[data-p="family"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="family"]:hover) .hub-i[data-p="family"] .hub-t { color: var(--crayon); }
  .hub:has(.hub-i[data-p="visit"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="visit"]:hover) .hub-svg .hub-st[data-p="visit"] { stroke-dashoffset: 0; }
  .hub:has(.hub-i[data-p="visit"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="visit"]:hover) .hub-hit[data-p="visit"] .hub-lead { stroke: var(--crayon); }
  .hub:has(.hub-i[data-p="visit"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="visit"]:hover) .hub-hit[data-p="visit"] .hub-dot { fill: var(--crayon); }
  .hub:has(.hub-i[data-p="visit"] .hub-a:is(:hover, :focus-visible), .hub-hit[data-p="visit"]:hover) .hub-i[data-p="visit"] .hub-t { color: var(--crayon); }
}
/* on narrow desktops the hub labels keep just their names; the descriptions still describe the links */
@media (min-width: 1024px) and (max-width: 1279.98px) { .hub-d { display: none !important; } }

/* ---------- tires: three prices, in the page head ---------- */
.tiers { margin-top: 56px; }
.tiers-ex { margin-bottom: 18px; max-width: 30em; }
.tier { position: relative; border-top: 1px solid var(--groove); padding: 20px 0 24px; }
.tier-jo::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--crayon); }
.tier-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.tier-k { font-family: var(--f-d); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
.tier-jo .tier-k { color: var(--crayon); }
.tier-p { flex: none; font-family: var(--f-d); font-weight: 800; font-size: var(--d-s); line-height: .9; font-variant-numeric: lining-nums tabular-nums; }
.tier-jo .tier-p { font-size: calc(var(--d-s) * 1.25); color: var(--crayon); }
.tiers-jo { margin-top: 28px; max-width: 26em; }
@media (min-width: 1024px) {
  .tiers { margin-top: 0; }
  .tier .body { font-size: 17px; }
}

/* ---------- tires: read your own sidewall ---------- */
.dc { padding-top: var(--sec); background: var(--vulcanized); }
.dc-h { padding-bottom: 48px; }
.dc-h .d-l { margin-bottom: 24px; }
.dc-stage {
  position: sticky; top: var(--hdr); z-index: 2; overflow: hidden;
  padding: 22px var(--gr) 24px var(--gl);
  background: radial-gradient(110% 140% at 18% 0%, #22201D 0%, #131211 55%, #0E0D0C 100%);
  border-top: 1px solid var(--groove); border-bottom: 1px solid var(--groove);
}
.dc-plate { --dc-fs: 64px; font-family: var(--f-d); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-variant-numeric: lining-nums; }
.dc-l1, .dc-l2 { font-size: var(--dc-fs); line-height: .9; white-space: nowrap; }
.dc-l1 { margin-bottom: .16em; }
.dc-l3 { margin-top: .85em; font-size: max(16px, calc(var(--dc-fs) * .26)); font-weight: 700; letter-spacing: .06em; line-height: 1; white-space: nowrap; }
/* molded, unlit: the letters are rubber on rubber until the light finds them */
.dc-plate [data-k], .dc-sl, .dc-dot { position: relative; color: #1E1C1A; text-shadow: 0 -1px 0 rgba(255, 255, 255, .08), 0 2px 2px rgba(0, 0, 0, .85); transition: color .45s ease, text-shadow .45s ease; }
.dc-plate [data-k].is-read { color: #5F5951; text-shadow: 0 -1px 0 rgba(255, 255, 255, .12), 0 2px 2px rgba(0, 0, 0, .85); }
.dc-plate [data-k].is-on, .dc-plate.is-done [data-k], .dc-plate.is-done .dc-sl { color: var(--talc); text-shadow: 0 -1px 0 rgba(255, 255, 255, .35), 0 2px 3px rgba(0, 0, 0, .9), 0 0 32px rgba(236, 230, 218, .16); }
.dc-plate [data-k]::after { content: ""; position: absolute; left: .03em; right: .03em; bottom: .06em; height: max(3px, .045em); border-radius: 2px; background: var(--crayon); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.dc-plate [data-k].is-on::after { transform: scaleX(1); }
.dc-l3 [data-k]::after { bottom: -.22em; height: 3px; }
.dc-steps { counter-reset: dc; }
.dc-step { min-height: 62vh; min-height: 62svh; display: flex; flex-direction: column; justify-content: center; padding: 56px 0; }
.dc-step:first-child { padding-top: 88px; }
.dc-step:last-child { padding-bottom: var(--sec); }
.dc-name { margin-bottom: 14px; font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: var(--d-s); line-height: .95; }
@media (min-width: 1024px) {
  .dc-h .d-l { grid-column: 1 / 9; }
  .dc-h .body { grid-column: 1 / 7; }
  .dc-h { padding-bottom: 24px; }
  .dc-track { padding-left: var(--gl); padding-right: var(--gr); }
  .dc-stage { grid-column: 1 / 8; grid-row: 1; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); margin-left: calc(-1 * var(--gl)); padding: 0 var(--gap) 0 var(--gl); display: flex; align-items: center; border: 0; background: radial-gradient(62% 48% at 30% 48%, #22201D 0%, #131211 55%, #0D0C0B 100%); }
  .dc-plate { width: 100%; }
  .dc-steps { grid-column: 8 / 13; grid-row: 1; padding: 0; }
  .dc-step { min-height: 72vh; min-height: 72svh; padding: 0; }
  .dc-step:first-child { padding-top: 30vh; min-height: 90vh; }
  .dc-step:last-child { padding-bottom: 45vh; min-height: calc(72vh + 45vh); }
}

/* ---------- tires: tread depth ---------- */
.depth { background: var(--sidewall); padding-top: var(--sec); padding-bottom: var(--sec); }
.depth .d-l { margin-bottom: 40px; }
.depth-p .body + .body { margin-top: 1.1em; }
.gauge { margin: 48px calc(-1 * var(--gr)) 0 calc(-1 * var(--gl)); padding: 28px var(--gr) 24px var(--gl); background: var(--vulcanized); border-top: 1px solid var(--groove); border-bottom: 1px solid var(--groove); }
.g-top { display: flex; flex-direction: column; gap: 24px; margin-bottom: 28px; }
.g-read { font-family: var(--f-d); font-weight: 900; font-size: clamp(88px, 9vw, 150px); line-height: .82; font-variant-numeric: lining-nums tabular-nums; }
.g-u { margin-left: .06em; font-size: .38em; font-weight: 700; color: var(--tread); }
.g-say { min-height: 4.4em; max-width: 26em; }
.g-say .voice { transition: opacity .16s ease; }
.g-say .voice.is-swap { opacity: 0; }
.g-say .sig { display: inline; margin: 0 0 0 4px; }
.gauge.is-low .g-n { color: var(--crayon); }
.g-viz { display: block; width: 100%; height: auto; overflow: visible; }
.g-car { fill: var(--groove); }
.g-belt { stroke: var(--tread); stroke-width: 1; opacity: .45; vector-effect: non-scaling-stroke; }
.g-blk { fill: #2A2825; stroke: var(--talc); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--s, .6)); transition: transform .35s var(--ease-out); }
.g-ref { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.g-6, .g-4 { stroke: var(--tread); stroke-dasharray: 6 6; }
.g-10 { stroke: var(--tread); stroke-dasharray: 2 6; opacity: .7; }
.g-2 { stroke: var(--crayon); stroke-width: 2; }
.g-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 24px; }
.g-key i { display: inline-block; width: 22px; margin-right: 8px; vertical-align: middle; border-top: 2px dashed var(--tread); }
.g-key .k2 { border-top: 2px solid var(--crayon); }
.g-key .k10 { border-top-style: dotted; }
.g-lbl { margin-bottom: 4px; text-wrap: balance; }
.g-in { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 48px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
.g-in::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--crayon) var(--p), var(--groove) var(--p)); }
.g-in::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -13px; border-radius: 50%; background: var(--crayon); border: 4px solid var(--vulcanized); box-shadow: 0 0 0 1px var(--crayon); }
.g-in::-moz-range-track { height: 4px; border-radius: 2px; background: var(--groove); }
.g-in::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--crayon); }
.g-in::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--crayon); border: 4px solid var(--vulcanized); box-shadow: 0 0 0 1px var(--crayon); }
.g-in:focus-visible { outline: 3px solid var(--crayon); outline-offset: 4px; }
.g-quarter { margin-top: 14px; max-width: 34em; }
.wear { margin-top: 88px; }
.wear-h { margin-bottom: 36px; text-wrap: balance; }
.wear-l { display: grid; gap: 40px; }
.wear-svg { display: block; width: 100%; max-width: 260px; height: auto; margin-bottom: 18px; overflow: visible; }
.w-new { fill: none; stroke: var(--tread); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.w-fill { fill: #2C2A27; stroke: var(--talc); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.w-gr { stroke: var(--sidewall); stroke-width: 7; }
.wear-t { margin-bottom: 6px; font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; }
.honest-jo { margin-top: 72px; max-width: 26em; }
@media (min-width: 1024px) {
  .depth .d-l { grid-column: 1 / 12; margin-bottom: 64px; }
  .depth-p { grid-column: 8 / 13; grid-row: 2; }
  .gauge { grid-column: 1 / 7; grid-row: 2; margin: 0; padding: 36px 40px 32px; border: 1px solid var(--groove); border-radius: 2px; align-self: start; }
  .wear { grid-column: 1 / -1; margin-top: 120px; }
  .wear-l { gap: 0; border-bottom: 1px solid var(--groove); }
  .wear-l li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: center; padding: 32px 0; border-top: 1px solid var(--groove); }
  .wear-svg { grid-row: 1 / 3; max-width: 380px; margin: 0; }
  .wear-t { align-self: end; }
  .wear-l .body { align-self: start; }
  .honest-jo { grid-column: 7 / 13; margin-top: 120px; }
}

/* ---------- prices: the ticket ---------- */
.prow .more { margin-top: 10px; }
.tk-c { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--groove); }
.tk-c .d-s { margin-bottom: 20px; }
.tk-c .body + .body { margin-top: 1.1em; }
.ticket { margin: 40px 0 0; }
.tk-paper {
  position: relative; max-width: 560px; padding: 26px 22px 30px; color: var(--brick);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 30%), #E9D88F;
  border-radius: 2px; transform: rotate(-1.2deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 28px 60px -18px rgba(0, 0, 0, .7);
  font-family: var(--f-d); font-variant-numeric: lining-nums;
}
.tk-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid var(--brick); }
.tk-shop { font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase; }
.tk-addr { grid-column: 1; margin-top: 9px; font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: .02em; }
.tk-addr span { white-space: nowrap; }
.tk-no { grid-column: 2; grid-row: 1 / 3; align-self: start; font-weight: 700; font-size: 14px; line-height: 1; text-align: right; }
.tk-no span { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: .02em; color: #A3291B; }
.tk-l, .tk-f dt { font-weight: 700; font-size: 12px; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; color: var(--brick); }
.tk-f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 12px; }
.tk-f dd, .tk-row { min-height: 34px; border-bottom: 1px solid rgba(122, 46, 33, .45); }
.tk-f dd { display: flex; align-items: flex-end; padding-bottom: 2px; }
.tk-row { display: flex; align-items: flex-end; gap: 12px; padding: 6px 0 2px; }
.tk-row .tk-l { flex: none; padding-bottom: 7px; }
.hw { font-family: "Nanum Pen Script", "Bradley Hand", "Segoe Print", cursive; font-weight: 400; font-size: 29px; line-height: .95; letter-spacing: 0; text-transform: none; color: #24283A; }
.tk-car { margin: 12px 0 2px; }
.tk-car-g { display: grid; grid-template-columns: 1fr 80px 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 12px; margin-top: 6px; }
.tk-svg { grid-column: 2; grid-row: 1 / 3; width: 80px; height: auto; }
.tk-body { fill: none; stroke: var(--brick); stroke-width: 1.5; }
.tk-glass { fill: rgba(122, 46, 33, .14); stroke: var(--brick); stroke-width: 1; }
.tk-tire { fill: var(--brick); }
.tk-w { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.tk-w .hw { font-size: 36px; }
.lf, .lr { grid-column: 1; justify-content: flex-end; }
.rf, .rr { grid-column: 3; }
.lf, .rf { grid-row: 1; } .lr, .rr { grid-row: 2; }
.tk-2 { display: grid; grid-template-columns: 1fr; }
.tk-lines { margin: 10px 0 4px; border-top: 2px solid var(--brick); }
.tk-li { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; min-height: 42px; padding: 8px 0 2px; border-bottom: 1px solid rgba(122, 46, 33, .45); }
.tk-li .tk-l { padding-bottom: 7px; }
.tk-tot { border-bottom: 2px solid var(--brick); }
.tk-note { flex-wrap: wrap; row-gap: 2px; }
.tk-note .hw { line-height: 1.05; }
.tk-ft { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 8px; }
.tk-ft .tk-row { flex: 1 1 auto; border: 0; }
.tk-sig { font-size: 36px; }
.tk-stamp { flex: none; margin-bottom: 2px; padding: 7px 10px 6px; border: 2px solid #A3291B; border-radius: 3px; color: #A3291B; font-weight: 800; font-size: 13px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; text-align: center; transform: rotate(-7deg); opacity: .88; }
html.motion .ticket .hw { clip-path: inset(-20% 100% -20% 0); }
html.motion .ticket.is-in .hw { clip-path: inset(-20% -2% -20% 0); transition: clip-path .42s cubic-bezier(.45, .05, .55, .95); transition-delay: calc(.55s + var(--i, 0) * .16s); }
html.motion .ticket .tk-stamp { opacity: 0; transform: rotate(-7deg) scale(1.3); }
html.motion .ticket.is-in .tk-stamp { opacity: .88; transform: rotate(-7deg) scale(1); transition: opacity .12s ease 3.45s, transform .22s cubic-bezier(.3, 1.6, .5, 1) 3.45s; }
@media (min-width: 640px) { .tk-paper { padding: 28px 32px 28px; } .tk-f { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tk-2 { grid-template-columns: 1fr 1fr; column-gap: 20px; } .tk-shop { font-size: 28px; } }
@media (min-width: 1024px) {
  [data-page="prices"] .plist { grid-column: 1 / 7; grid-row: 1; }
  [data-page="prices"] .prow .body { max-width: none; }
  .tk-c { grid-column: 1 / 7; grid-row: 2; }
  .ticket { grid-column: 8 / 13; grid-row: 1 / 3; align-self: start; justify-self: start; width: 100%; max-width: 540px; margin: 0; }
  .ticket.is-pinned .tk-paper { transform: rotate(-1.2deg) scale(var(--tk-s, 1)); transform-origin: 0 0; }
  .prices.tk-flow .plist { grid-column: 1 / -1; }
  .prices.tk-flow .tk-c { grid-column: 1 / 7; grid-row: 2; }
  .prices.tk-flow .ticket { grid-column: 8 / 13; grid-row: 2; margin-top: 56px; }
  .tk-f { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1360px) { .tk-f { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the 1979 form (/family/): the shop's white copy gone cream, faded print, no rotation, the unfaded strip showing where the mat slipped */
.tk-paper.tk-79 {
  max-width: 440px; width: 100%; padding: 26px 28px; transform: none; box-shadow: none; color: #8E5043;
  background: linear-gradient(#F4F1E8 0 4px, transparent 4px), linear-gradient(90deg, rgba(0, 0, 0, .012), rgba(255, 255, 255, .02) 40%, rgba(0, 0, 0, .018)), #EEE5C8;
}
.tk-79 .tk-l, .tk-79 .tk-f dt, .tk-79 .tk-w, .tk-79 .tk-shop, .tk-79 .tk-addr, .tk-79 .tk-no { color: #8E5043; }
.tk-79 .tk-no span { color: #B0543F; }
.tk-79 .tk-hd, .tk-79 .tk-lines, .tk-79 .tk-tot { border-color: #8E5043; }
.tk-79 .tk-f dd, .tk-79 .tk-row, .tk-79 .tk-li { border-bottom-color: rgba(142, 80, 67, .45); }
.tk-79 .tk-ft .tk-row { border: 0; }
.tk-79 .tk-body { stroke: #8E5043; }
.tk-79 .tk-glass { fill: rgba(142, 80, 67, .12); stroke: #8E5043; }
.tk-79 .tk-tire { fill: #8E5043; }
@media (max-width: 639.98px) {
  .tk-paper.tk-79 { padding: 20px 18px; }
  .tk-79 .tk-row, .tk-79 .tk-li { flex-wrap: wrap; }
  .tk-79 .tk-row > .ink-v { flex-basis: 100%; }
}
.tk-79 .tk-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .tk-paper.tk-79 .tk-f { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .tk-2 { grid-template-columns: 1fr; } }
/* pinned beside the list wherever the whole ticket fits on screen (main.js measures) */
@media (min-width: 1024px) { .ticket.is-pinned { position: sticky; top: calc(var(--hdr) + 28px); } }

/* ---------- prices: free ---------- */
.free { padding-top: var(--sec); padding-bottom: var(--sec); }
.free .d-l { margin-bottom: 48px; }
.free-l li { position: relative; border-top: 1px solid var(--groove); padding: 28px 0 32px 48px; }
.free-l li::before { content: ""; position: absolute; left: 0; top: 39px; width: 28px; height: 7px; border-radius: 2px; background: var(--crayon); transform: rotate(-9deg); }
.free-t { margin-bottom: 10px; font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: var(--d-xs); line-height: 1; }
@media (min-width: 1024px) {
  .free .d-l { grid-column: 1 / 9; margin-bottom: 72px; }
  .free-l { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .free-l li { padding: 36px 0 44px 56px; }
  .free-l li::before { top: 54px; }
}

/* ---------- family: As Jo tells it ---------- */
/* Jo's telling on the left; Dad's tire-crayon notes in the margin (drawn by crayon.js, placed by family.js) */
.fh { padding-top: calc(var(--hdr) + 40px); padding-bottom: 48px; }
.fh .d-ph { margin-bottom: 28px; }
.fh-lede, .tl .voice { max-width: 30em; }
.tell { padding-top: var(--sec); padding-bottom: var(--sec); }
.tl + .tl { margin-top: 18px; }
.walt { --wcap: 20px; position: relative; display: block; width: max-content; max-width: 100%; margin: 6px 0 22px auto; pointer-events: none; }
.walt canvas { display: block; }
.walt-t { position: absolute; inset: 0; overflow: hidden; color: transparent; font: 700 var(--wcap)/1 var(--f-d); white-space: nowrap; }
html:not(.js) .walt canvas { display: none; }
html:not(.js) .walt-t { position: static; color: var(--crayon); }
.ch-h { margin-bottom: 40px; }
.ch-h .display { margin-bottom: 14px; }
.tell-walt { background: var(--sidewall); }
/* the opening quote hangs into the margin, so its line's clip reaches out to meet it */
.pull .ln { padding-left: .34em; margin-left: -.34em; }
.pull { margin: 64px 0 20px; font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: var(--d-m); line-height: .92; color: var(--talc); text-wrap: balance; text-indent: -.32em; }
@media (min-width: 1024px) {
  .fh { padding-top: calc(var(--hdr) + 9vh); padding-bottom: 7vh; }
  .fh .d-ph { grid-column: 1 / 10; margin-bottom: 40px; }
  .tl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .tl > .voice { grid-column: 2 / 8; grid-row: 1; }
  .walt { --wcap: clamp(22px, 1.7vw, 30px); grid-column: 9 / 12; grid-row: 1; justify-self: start; margin: var(--note-top, 0px) 0 0; }
  .tl + .tl { margin-top: 20px; }
  .tl-pull .pull { grid-column: 2 / 11; grid-row: 1; margin: 9vh 0; }
  .tl-pull .walt { grid-column: 11 / 13; }
  .tell-stan { padding-top: 10vh; }
  .ch-h { grid-column: 1 / -1; margin-bottom: 9vh; }
  .ch-walt { grid-column: 5 / 13; text-align: right; }
  .ch-jo { grid-column: 1 / 11; margin-bottom: 8vh; }
  .tell-jo { padding-bottom: 14vh; }
  .tl-last { margin-top: 6vh !important; }
}

/* ---------- family: the drum ---------- */
.drum { position: relative; }
.dr-frame { position: relative; }
.dr-copy { padding: 72px var(--gr) 0 var(--gl); }
.dr-caps li + li { margin-top: 40px; }
.dr-caps .voice { max-width: 30em; }
.dr-stage .still { display: block; opacity: 0; transition: opacity .3s ease; }
.dr-stage .still[data-still="0"] { opacity: 1; }
.dr-stage canvas.gl { opacity: 0; transition: opacity .3s ease; }
.dr-stage.is-live canvas.gl { opacity: 1; }
/* the poster only stands in until the live drum arrives; the canvas is transparent, so the poster must go */
.dr-stage.is-live .still { opacity: 0; }
html.no-webgl .dr-stage .still { opacity: 0; transition: opacity .2s ease; }
html.no-webgl .dr-stage .still.is-on { opacity: 1; }
.dr-box { aspect-ratio: 100 / 82; max-height: 520px; margin-bottom: 22px; }
@media (min-width: 1024px) {
  html.js:not(.rm) .drum { height: calc(100svh - var(--hdr) + 200vh); }
  html.js:not(.rm) .dr-frame { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); overflow: clip; }
  .dr-stage { position: absolute; inset: 0; }
  .dr-stage .still { object-fit: cover; object-position: 50% 32%; }
  html.js:not(.rm) .dr-copy { position: absolute; left: 0; right: 0; bottom: max(40px, 6svh); padding-top: 0; align-items: end; }
  .dr-h { grid-column: 1 / 7; grid-row: 1; }
  .dr-h .years { margin-bottom: 0; }
  .dr-h .d-l { margin-bottom: 14px; }
  .dr-caps { grid-column: 7 / 13; grid-row: 1; display: grid; }
  html.js:not(.rm) .dr-caps li { grid-area: 1 / 1; align-self: end; }
  html.js:not(.rm) .dr-caps li + li { margin-top: 0; }
  html.motion .dr-caps li { opacity: 0; transform: translateY(10px); }
  html.motion .dr-caps li[data-k="1"] { opacity: 1; transform: none; }
  /* reduced motion: one plate, then every caption as a list */
  html.rm .dr-stage, html:not(.js) .dr-stage { position: relative; aspect-ratio: 1920 / 1000; max-height: 72svh; width: 100%; }
  html.rm .dr-stage .still, html:not(.js) .dr-stage .still { opacity: 0; }
  html.rm .dr-stage .still[data-still="4"], html:not(.js) .dr-stage .still[data-still="4"] { opacity: 1; }
  html.rm .dr-copy, html:not(.js) .dr-copy { align-items: start; padding-top: 48px; }
  html.rm .dr-caps li + li, html:not(.js) .dr-caps li + li { margin-top: .8em; }
}

/* ---------- family: ticket number one, framed level ---------- */
.tk1-row { margin: 72px 0 0; }
.tk1-frame { padding: 16px; background: #121110; box-shadow: inset 0 0 0 1px var(--groove), 0 1px 0 rgba(0, 0, 0, .4), 0 24px 50px -20px rgba(0, 0, 0, .7); }
.tk1-mat { padding: 16px; background: var(--talc); box-shadow: inset 0 0 0 2px #CFC6B4; }
.tk1-side { margin-top: 32px; }
.tk1-cap { display: block; margin-top: 28px; }
.ink-v { display: inline-flex; align-items: flex-end; min-width: 0; }
.ink { display: block; overflow: visible; max-width: 100%; height: auto; }
.ink:not([width]) { width: 0; height: 0; }
.ink-t { font: 600 17px/1.1 var(--f-d); color: #2E3346; text-transform: none; letter-spacing: 0; }
.ink-on .ink-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1024px) {
  .tk1-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-top: 12vh; }
  .tk1 { grid-column: 7 / 13; grid-row: 1; justify-self: start; width: min(100%, calc(440px + 2 * (16px + 28px))); }
  .tk1-mat { padding: 28px; }
  .tk1-side { grid-column: 2 / 6; grid-row: 1; align-self: end; margin-top: 0; }
}

/* ---------- family: three Saturdays ---------- */
.sat { position: relative; }
.sat-frame { position: relative; }
.sat-frame .wall-in { padding-top: calc(var(--hdr) + 20px); }
.ledger, .sat-final { color: var(--talc); }
.lg-d { display: block; font-family: var(--f-d); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--talc); font-variant-numeric: lining-nums; }
.lg-t { font-size: 19px; color: var(--talc); }
.sat-final > span { display: block; max-width: 30em; }
html.js.motion .sat { height: calc(100svh + 160vh); }
html.js.motion .sat-frame { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
html.js.motion .ledger { position: absolute; left: var(--gl); right: var(--gr); bottom: calc(24px + env(safe-area-inset-bottom)); display: grid; }
html.js.motion .ledger .lg { grid-area: 1 / 1; align-self: end; }
html.js.motion .sat-final { position: absolute; left: var(--gl); right: var(--gr); bottom: calc(24px + env(safe-area-inset-bottom)); }
html.motion .lg, html.motion .sat-final { opacity: 0; }
/* reduced motion and no JS: the sign is complete; the rows and the last line stack under it */
html.rm .ledger, html:not(.js) .ledger { margin: 56px var(--gr) 0 var(--gl); }
html.rm .lg + .lg, html:not(.js) .lg + .lg { margin-top: 14px; }
html.rm .sat-final, html:not(.js) .sat-final { margin: 24px var(--gr) 0 var(--gl); padding-bottom: 64px; }
.wall-rules { background-position: 0 var(--bgy, 0px); }
.wall-rules .wall-in { padding-top: 48px; padding-bottom: 96px; }
@media (min-width: 1024px) {
  html.js.motion .sat { height: calc(100svh + 180vh); }
  .sat-frame .wall-in { padding-top: calc(var(--hdr) + 6vh); }
  html.js.motion .ledger, html.js.motion .sat-final { left: 0; right: 0; bottom: 7vh; padding: 0 var(--gr) 0 var(--gl); }
  html.js.motion .ledger { display: block; }
  .lg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; }
  html.js.motion .ledger .lg { grid-area: auto; }
  .lg + .lg { margin-top: 14px; }
  .lg-d { grid-column: 2 / 5; font-size: 22px; }
  .lg-t { grid-column: 5 / 12; font-size: var(--voice); }
  .sat-final > span { grid-column: 5 / 12; max-width: none; }
  html.rm .ledger, html:not(.js) .ledger, html.rm .sat-final, html:not(.js) .sat-final { margin-left: 0; margin-right: 0; padding-left: var(--gl); padding-right: var(--gr); }
  .wall-rules .wall-in { padding-top: 8vh; padding-bottom: 16vh; }
}

/* ---------- family: Saturdays now ---------- */
.close { padding-top: var(--sec); padding-bottom: var(--sec); }
.close-l { margin-top: 40px; font-size: clamp(26px, 2.4vw, 40px); line-height: 1.3; color: var(--talc); max-width: 22em; }
.close-sig { margin-top: 16px; }
.walt-check { --wcap: 30px; margin-top: 8px; }
@media (min-width: 1024px) {
  .close-p { grid-column: 2 / 8; }
  .close-l { grid-column: 2 / 9; grid-row: 2; }
  .close-sig { grid-column: 2 / 9; grid-row: 3; }
  .walt-check { --wcap: clamp(30px, 2.2vw, 38px); grid-column: 9 / 11; grid-row: 2; margin-top: var(--note-top, 40px); }
}

/* ---------- visit: the shopfront ---------- */
.facade { margin: 0 0 48px; }
.fd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fd-wall { fill: #3B1A13; }
.fd-brk { pointer-events: none; }
#fd-brk path { fill: none; stroke: rgba(13, 12, 11, .55); stroke-width: 1; }
.fd-ln { fill: none; stroke: var(--talc); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fd-thin { fill: none; stroke: var(--tread); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fd-door { fill: #1A1917; stroke: var(--talc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fd-sign { font-family: var(--f-d); font-weight: 900; font-size: 31px; letter-spacing: .01em; fill: var(--talc); }
.fd-dtr { fill: var(--crayon); }
.fd-num { font-family: var(--f-d); font-weight: 700; font-size: 15px; fill: var(--talc); }
.fd-arrow { fill: none; stroke: var(--crayon); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fd-lbl { font-family: var(--f-d); font-weight: 700; font-size: 24px; fill: var(--crayon); }
@media (max-width: 640px) { .fd-num { font-size: 24px; } .fd-lbl { font-size: 32px; } }
html.motion .facade .fd-svg { clip-path: inset(0 100% 0 0); }
html.motion .facade.is-in .fd-svg { clip-path: inset(0 -2% 0 0); transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1) .1s; }
html.motion .facade .fd-arrow { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.motion .facade.is-in .fd-arrow { stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--ease-out) 1.25s; }
html.motion .facade.is-in .fd-head { transition-duration: .18s; transition-delay: 1.78s; }
html.motion .facade .fd-lbl { opacity: 0; }
html.motion .facade.is-in .fd-lbl { opacity: 1; transition: opacity .4s ease 1.9s; }

/* ---------- page to page ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.hdr { view-transition-name: hdr; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }

/* ---------- footer ---------- */
.foot { background: var(--sidewall); border-top: 1px solid var(--groove); padding-top: 64px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 36px; }
.foot-a { display: flex; gap: 18px; align-items: flex-start; }
.foot-logo { display: block; width: 260px; height: auto; margin-bottom: 22px; }
@media (min-width: 1024px) { .foot-logo { width: 340px; } }
.foot-ph { margin-top: 24px; }
.foot-n ul { display: grid; gap: 0; }
.foot-n a { position: relative; display: inline-block; padding: 11px 0; font-family: var(--f-d); font-weight: 700; font-size: 21px; line-height: 1.1; text-decoration: none; color: var(--talc); }
.foot-n a:hover, .foot-n a[aria-current="page"] { color: var(--crayon); }
.foot-n a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 2px; background: var(--crayon); }
.foot-c p + p { margin-top: 12px; }
.foot-c a { color: var(--tread); }
.foot-c a:hover { color: var(--talc); }
@media (min-width: 1024px) {
  .foot { display: grid; padding-top: 88px; padding-bottom: 72px; }
  .foot-a { grid-column: 1 / 6; }
  .foot-n { grid-column: 6 / 9; }
  .foot-c { grid-column: 9 / 13; }
}

/* ---------- mobile sticky bar ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; gap: 12px;
  padding: 12px var(--gr) calc(12px + env(safe-area-inset-bottom)) var(--gl);
  background: var(--sidewall); border-top: 1px solid var(--groove);
  transform: translateY(100%); transition: transform .2s ease, visibility 0s linear .2s; visibility: hidden;
}
.mbar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.mbar .btn-outline { flex: 0 0 calc(40% - 6px); padding: 0 12px; }
.mbar .btn-primary { flex: 1 1 auto; padding: 0 12px; }
@media (max-width: 1023.98px) { .foot { padding-bottom: calc(48px + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { .mbar { display: none; } }

/* ---------- reduced motion + no WebGL ---------- */
html.no-webgl .stage .still { display: block; }
html.no-webgl .hero-stage .still-m { display: none; }
@media (max-width: 1023.98px) {
  html.no-webgl .hero-stage .still-d { display: none; }
  html.no-webgl .hero-stage .still-m { display: block; }
}
html.no-webgl .star-stage .still { opacity: 0; }
html.no-webgl .star-stage .still.is-on, html.no-webgl.rm .star-stage .still[data-still="d"] { opacity: 1; }
html.no-webgl .sb .freeze { display: none; }
html.rm .sb .still { display: block; }
html.rm *, html.rm *::before, html.rm *::after { transition-duration: 0s !important; animation-duration: 0s !important; }