/* isohoops.app — one stylesheet, tokens first.
   Palette + type mirror the app (src/constants/theme.ts) so the site reads
   as ISO. Grain follows the app's texture vocabulary: fine noise everywhere,
   features (leaks, prism) only at moments. */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/caveat-600-latin.woff2') format('woff2');
}

:root {
  --ink: #17150F;
  --coal: #211E17;
  --coal-2: #2A2620;
  --paper: #F0EBDF;
  --cream: #E4DCC9;
  --ember: #E8842A;
  --smoke: #98917F;
  --go: #35A365;
  --amber: #D4A02C;
  --rest: #2E6BB0;
  --c-shooting: #E8842A;
  --c-finishing: #4A7DC9;
  --c-dribbling: #3E9E63;
  --c-passing: #D9B54A;
  --c-athleticism: #C25548;
  --line: rgba(240, 235, 223, 0.14);
  --line-ink: rgba(23, 21, 15, 0.18);
  --display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
.mark { height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- grain */
/* The app's 1024 tile at 1024 CSS px: exceeds a phone in both axes, so the
   period never completes on screen (CLAUDE.md anti-repeat rule). */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url('../img/film-grain.png') 0 0 / 1024px 1024px repeat;
  /* Plain alpha, not overlay: overlay compresses on charcoal (measured sd 3.5
     at 0.55). Round 1 art direction: 0.4 measured sd 7.5; Toby wanted it
     noticeably lighter, target sd ~5, so 0.26. */
  opacity: 0.26;
}
body.paper .grain { opacity: 0.17; }
/* On 2x/3x screens a 1024-CSS-px tile becomes 2x2 or 3x3 physical blocks (the
   app's density-blind-tile bug). Halving the CSS size keeps the grain near
   per-pixel at the cost of a 512px repeat period; revisit on a real phone. */
@media (min-resolution: 2dppx) { .grain { background-size: 512px 512px; } }

/* ------------------------------------------------------------- layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 3vw, 28px) var(--gutter);
}
.topbar .mark { width: clamp(64px, 9vw, 92px); height: auto; }
.topbar nav { display: flex; gap: 22px; }
.topbar a { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--cream); font-weight: 500; opacity: 0.85; }
.topbar a:hover { opacity: 1; color: var(--paper); }

/* ------------------------------------------------------------ photos */
.photo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
/* max-width: none — the global img rule must never leak into a cover image.
   No CSS filter on cover images: WebKit draws a filtered img at its uncropped
   size and leaves a gap at the edge (the interlude bug, 5 Sep 2026). */
.photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); }
/* Placeholder while a slot has no photo yet: the card-photo gradient from
   the brand mockup plus a quiet slot label so layout can be judged. */
.ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 120% at 80% 20%, rgba(232, 132, 42, 0.22), transparent 55%),
    linear-gradient(160deg, #332D21 0%, #1C1913 70%);
}
.ph::after {
  content: attr(data-slot);
  position: absolute;
  right: 16px;
  top: 72px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(240, 235, 223, 0.35);
  border: 1px dashed rgba(240, 235, 223, 0.25);
  padding: 4px 8px;
  border-radius: 4px;
}
.scrim { position: absolute; inset: 0; pointer-events: none; }
.leak { position: absolute; inset: 0; pointer-events: none; }
.prism {
  position: absolute;
  width: 34%;
  max-width: 420px;
  aspect-ratio: 3 / 1;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* -------------------------------------------------------------- hero */
/* Hero and close text is WHITE to match the wordmark; cream everywhere else. */
.hero .ghost { color: #fff; }
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid;
  align-items: start;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero .scrim {
  /* Copy lives over the dark ceiling / upper wall: charcoal from the top,
     gone by two thirds so the player and the ball stay untouched. A short
     fade at the foot dissolves the photo into the page. */
  background:
    linear-gradient(to bottom, rgba(23, 21, 15, 0.94) 0%, rgba(23, 21, 15, 0.8) 30%, rgba(23, 21, 15, 0.3) 56%, rgba(23, 21, 15, 0) 74%),
    linear-gradient(to top, var(--ink) 0%, rgba(23, 21, 15, 0.78) 14%, rgba(23, 21, 15, 0) 34%);
}
.hero .photo img { --focus: 50% 62%; }
/* Phones (hero-tall.jpg): the pitch sits over the dark ceiling and the badge
   drops to the foot over the floor, so the player and the ball in the middle
   of the frame stay clear of text. */
@media (max-width: 767px) {
  .hero__content { align-self: stretch; display: flex; flex-direction: column; padding-top: 78px; padding-bottom: 34px; }
  /* Name + pitch at the top over the ceiling; the sub-line and badge at the
     foot over the floor. The player and the ball own the middle. */
  .hero .hero__sub { text-wrap: balance; max-width: 30ch; margin-top: auto; padding-top: 40px; }
  .hero__kicker { font-size: 22px; margin-bottom: 6px; }
  .hero h1 { font-size: 38px; }
  .hero .cta { margin-top: 18px; }
}
/* Desktop (hero.jpg): the player stands in the left quarter and the ball
   hangs top right, so the copy block moves in from the left and stays under
   the ball, over the brick wall. */
@media (min-width: 900px) {
  .hero .hero__content { padding-left: 24%; padding-top: clamp(64px, 9vh, 120px); }
  .hero__mark { width: clamp(240px, min(26vw, 40vh), 400px); margin-bottom: 18px; }
  .hero h1 { font-size: clamp(48px, min(4.6vw, 8.4vh), 70px); }
}
.hero .leak { background: radial-gradient(55% 40% at 108% -6%, rgba(232, 132, 42, 0.32), transparent 65%); }
.hero .prism { right: -8%; top: 9%; transform: rotate(-24deg); }
.hero__content {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  padding: clamp(96px, 15vh, 150px) 0 clamp(44px, 7vw, 84px);
}
.hero__mark { width: clamp(180px, 50vw, 380px); height: auto; margin: 0 0 10px; }
.hero__kicker {
  font-family: var(--hand);
  color: var(--ember);
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1;
  display: inline-block;
  transform: rotate(-3deg);
  margin: 0 0 10px 4px;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(40px, 9.6vw, 80px);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  color: #fff;
  max-width: 11ch;
  text-wrap: balance;
}
/* Ghost words are pre-rendered SVG (scripts/site-svg.py): each word is one
   unioned outline path, fill none, a single stroke in the text colour. True
   hollow letters, one line, no seams. The svg height/vertical-align match
   Archivo Black's cap height (688/1000) plus the 30-unit stroke margin. */
.ghost { color: var(--paper); }
.ow { display: inline-block; height: 0.748em; vertical-align: -0.03em; overflow: visible; }
.ow path { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@media (min-width: 900px) { .ow path { stroke-width: 2px; } }
.hero__sub {
  margin-top: 22px;
  max-width: 34ch;
  font-size: clamp(17px, 2.1vw, 21px);
  color: #fff;
  text-wrap: pretty;
}
.cta { display: flex; align-items: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.badge img { height: 54px; width: auto; }
.badge { display: inline-block; transition: transform 0.15s ease; }
.badge:hover { transform: translateY(-1px); }
.cta__note { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; font-weight: 600; background: rgba(23, 21, 15, 0.62); padding: 9px 13px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ------------------------------------------------------------ features */
.feat { padding: clamp(72px, 11vw, 140px) 0; position: relative; }
.feat + .feat { padding-top: 0; }
.feat__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.feat__copy, .polas { min-width: 0; }
@media (min-width: 880px) {
  .feat__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 96px); }
  .feat--flip .feat__copy { order: 2; }
}
.kicker { font-family: var(--hand); color: var(--ember); font-size: clamp(22px, 2.6vw, 28px); line-height: 1; margin-bottom: 14px; display: inline-block; transform: rotate(-2deg); }
.feat h2 {
  font-family: var(--display);
  font-size: clamp(34px, 5.6vw, 68px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-wrap: balance;
  margin-bottom: 22px;
}
.feat p { max-width: 50ch; font-size: clamp(16px, 1.6vw, 18px); margin-bottom: 14px; text-wrap: pretty; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.facts li { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-weight: 500; }

/* ----------------------------------------------------------- polaroids */
.polas { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 24px 8px; }
.pola {
  --tilt: -2.2deg;
  --tape: -4deg;
  position: relative;
  width: min(62vw, 300px);
  flex: 0 0 auto;
  background: var(--paper);
  padding: 10px 10px 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 255, 255, 0.35) inset;
  transform: rotate(var(--tilt));
  transition: transform 0.25s ease;
}
.pola:hover { transform: rotate(0deg) translateY(-4px); }
.pola__shot { aspect-ratio: 1206 / 2622; overflow: hidden; border-radius: 4px; background: var(--ink); }
.pola__shot img { width: 100%; height: 100%; object-fit: cover; }
.pola__cap { margin: 10px 2px 0; min-height: 2.1em; font-family: var(--hand); color: #3B3529; font-size: 19px; line-height: 1.05; }
.pola__cap b { color: var(--ember); font-weight: 600; }
.pola__tape {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 28px;
  transform: translateX(-50%) rotate(var(--tape));
  background: rgba(236, 214, 170, 0.62);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
}
.polas--pair .pola { width: min(44vw, 250px); }
/* The second frame sits in front so its (longer) caption is never hidden. */
.polas--pair .pola:first-child { --tilt: -3deg; --tape: -5deg; margin-right: -22px; margin-top: 26px; }
.polas--pair .pola:last-child { --tilt: 2.4deg; --tape: 3deg; z-index: 1; }
.polas--pair .pola:hover { z-index: 2; }
@media (min-width: 880px) {
  .pola { width: clamp(200px, 26vw, 320px); }
  /* Two frames must fit the half-width column at 880-1250px too. */
  .polas--pair .pola { width: clamp(170px, 21.5vw, 270px); }
  .polas--pair .pola:first-child { margin-right: -26px; }
}

/* ------------------------------------------------------------- pies */
/* The app's pie (pie-chart.tsx): no slice strokes, charcoal gap lines only. */
.pie { display: block; width: 100%; height: auto; }
.pie-row { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; margin: 6px 0 20px; }
.pie-row .legend { margin: 0; }
.pie-card { display: grid; grid-template-columns: 118px 1fr; gap: 20px; align-items: center; margin: 4px 0 18px; padding: 16px 18px; background: var(--coal); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); max-width: 420px; }
.pie-card .eyebrow { grid-column: 1 / -1; margin: 0 0 2px; color: var(--smoke); font-weight: 600; letter-spacing: 0.22em; font-size: 10.5px; }
.pie-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pie-legend li { display: flex; align-items: center; gap: 9px; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }
.pie-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.pie-legend .p-shooting { --c: var(--c-shooting); }
.pie-legend .p-passing { --c: var(--c-passing); }
.pie-legend .p-dribbling { --c: var(--c-dribbling); }
.pie-legend .p-finishing { --c: var(--c-finishing); }
.pie-legend .p-athleticism { --c: var(--c-athleticism); }

/* ----------------------------------------------------- category legend */
/* The Drills tab's chip row: each chip carries a faded tint of its category
   colour so the row doubles as the legend for every dot and strip. */
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; padding: 0; list-style: none; }
.legend li { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); font-weight: 500; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 24%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.legend .l-shooting { --c: var(--c-shooting); }
.legend .l-passing { --c: var(--c-passing); }
.legend .l-dribbling { --c: var(--c-dribbling); }
.legend .l-finishing { --c: var(--c-finishing); }
.legend .l-athleticism { --c: var(--c-athleticism); }
.wo__label { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--smoke); font-weight: 600; margin: 28px 0 0; }

/* ------------------------------------------------------- workout list */
.wo { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
@media (min-width: 600px) { .wo { grid-template-columns: 1fr 1fr; } }
.wo li {
  display: grid;
  grid-template-columns: 5px 1fr auto;
  gap: 0 14px;
  align-items: center;
  padding: 11px 14px 11px 11px;
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.strip { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; align-self: stretch; border-radius: 3px; overflow: hidden; min-height: 40px; }
.strip span { display: block; width: 100%; }
.strip .s-shooting { background: var(--c-shooting); }
.strip .s-finishing { background: var(--c-finishing); }
.strip .s-dribbling { background: var(--c-dribbling); }
.strip .s-passing { background: var(--c-passing); }
.strip .s-athleticism { background: var(--c-athleticism); }
.wo__name { grid-column: 2; grid-row: 1; align-self: end; font-family: var(--display); text-transform: uppercase; font-size: 14.5px; line-height: 1.05; color: var(--paper); }
.wo__tag { grid-column: 2; grid-row: 2; align-self: start; font-family: var(--hand); color: var(--smoke); font-size: 17px; line-height: 1.05; margin-top: 3px; }
.wo__min { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); font-weight: 500; font-variant-numeric: tabular-nums; grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }

/* --------------------------------------------------------- photo bands */
.band { position: relative; width: 100%; overflow: hidden; background: var(--coal); isolation: isolate; }
/* Explicit height, never aspect-ratio + max-height: when the max-height
   clamped, WebKit transferred the clamp to the width and the whole band
   shrank away from the right edge (Toby's Safari, 5 Sep 2026). */
.band--interlude { height: clamp(260px, 75vw, 78svh); }
@media (min-width: 700px) { .band--interlude { height: clamp(320px, 42.8vw, 78svh); } }
/* The interlude photo is black and white; round 2 put the site grain back on
   it so it integrates with the page. */
/* Charcoal tint plus feathered top and bottom edges (the app's
   boundary-invisible rule): a dark band that dissolves into the page. */
.band--interlude .scrim {
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(23, 21, 15, 0) 28%, rgba(23, 21, 15, 0) 72%, var(--ink) 100%),
    rgba(23, 21, 15, 0.64);
}
.band--interlude .band__line { color: var(--ember); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); }
.band__line {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(22px, 4vw, 44px);
  z-index: 2;
  font-family: var(--hand);
  color: var(--paper);
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1;
  transform: rotate(-2deg);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.close {
  position: relative;
  min-height: min(78svh, 760px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.close .scrim { background: linear-gradient(to bottom, var(--ink) 0%, rgba(23, 21, 15, 0) 24%, rgba(23, 21, 15, 0) 76%, var(--ink) 100%), rgba(23, 21, 15, 0.22); }
.close .photo img { --focus: 50% 45%; }
/* Legibility comes from a local pool of charcoal behind the copy, not from
   dimming the whole photo: the ball keeps its ember. */
.close__content { background: radial-gradient(closest-side, rgba(23, 21, 15, 0.82), rgba(23, 21, 15, 0.55) 55%, rgba(23, 21, 15, 0) 100%); padding: 110px clamp(40px, 8vw, 120px); }
/* Desktop: the shoes and ball fill the left two thirds of close.jpg, so the
   closing copy sits right, over plain asphalt, and the still life stays whole. */
@media (min-width: 900px) {
  .close { place-items: center end; }
  .close__content { justify-items: end; text-align: right; margin-right: clamp(24px, 4vw, 72px); max-width: 560px; padding: 110px 60px; }
  .close h2 { font-size: clamp(30px, 3.3vw, 46px); }
  .close p { max-width: 34ch; }
  .close .cta { justify-content: flex-end; }
}
.close .leak { background: radial-gradient(40% 35% at -6% 105%, rgba(232, 132, 42, 0.26), transparent 65%); }
.close__content { position: relative; z-index: 2; padding: 90px var(--gutter); display: grid; justify-items: center; gap: 18px; }
.close__content .mark { width: clamp(150px, 26vw, 260px); }
.close h2 { font-family: var(--display); font-size: clamp(30px, 5vw, 56px); line-height: 0.92; text-transform: uppercase; color: #fff; text-wrap: balance; }
.close p { max-width: 40ch; color: var(--cream); text-wrap: pretty; }
.close .cta { justify-content: center; margin-top: 10px; }

/* -------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); padding: 36px 0 44px; }
.footer .row { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer a { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--cream); font-weight: 500; }
.footer a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.footer .legal { margin-top: 18px; font-size: 13px; color: var(--smoke); }
.footer .mark { width: 56px; opacity: 0.9; }

/* ----------------------------------------------------- legal / support */
body.paper { background: var(--paper); color: var(--ink); color-scheme: light; }
body.paper .topbar { position: static; padding-inline: 0; }
body.paper .topbar .mark { filter: brightness(0); }
body.paper .topbar a { color: var(--ink); opacity: 0.75; }
.doc { width: min(100% - 2 * var(--gutter), 720px); margin-inline: auto; padding: 8px 0 96px; }
.doc__head { padding: 36px 0 26px; border-bottom: 1px dashed var(--line-ink); margin-bottom: 30px; }
.eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ember); font-weight: 600; margin-bottom: 10px; }
.doc h1 { font-family: var(--display); font-size: clamp(38px, 7vw, 64px); line-height: 0.9; text-transform: uppercase; color: var(--ink); }
.doc__date { font-family: var(--hand); font-size: 24px; color: #6B6353; margin-top: 12px; }
.doc .lede { font-size: 19px; line-height: 1.5; max-width: 60ch; margin-bottom: 26px; text-wrap: pretty; }
.doc h2 { font-family: var(--display); font-size: 21px; line-height: 1.05; text-transform: uppercase; margin: 40px 0 12px; color: var(--ink); scroll-margin-top: 20px; }
.doc h3 { font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #6B6353; font-weight: 600; margin: 24px 0 8px; }
.doc p { max-width: 66ch; margin-bottom: 12px; line-height: 1.6; text-wrap: pretty; }
.doc ul { max-width: 66ch; padding-left: 20px; margin: 0 0 14px; }
.doc li { margin-bottom: 7px; line-height: 1.55; }
.doc li::marker { color: var(--ember); }
.doc a { color: var(--ink); text-decoration-color: rgba(232, 132, 42, 0.8); text-underline-offset: 3px; }
.doc a:hover { color: var(--ember); }
.doc .toc { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.doc .toc li { margin: 0; }
.doc .toc a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #6B6353; font-weight: 600; border-bottom: 1px solid var(--line-ink); }
.doc .toc a:hover { color: var(--ember); border-color: var(--ember); }
.short { background: var(--ink); color: var(--cream); border-radius: 12px; padding: 20px 22px; margin: 0 0 8px; }
.short h2 { color: var(--paper); margin: 0 0 12px; font-size: 16px; }
.short ul { margin: 0; }
.short li::marker { color: var(--ember); }
.short b { color: var(--paper); }
.callout { border-left: 3px solid var(--ember); padding: 4px 0 4px 16px; margin: 16px 0 18px; }
.callout p { margin-bottom: 6px; }
.faq dt { font-family: var(--display); font-size: 15px; text-transform: uppercase; margin: 24px 0 8px; line-height: 1.2; }
.faq dd { margin: 0; max-width: 66ch; line-height: 1.6; }
.faq dd + dd { margin-top: 8px; }
.mail { font-family: var(--display); font-size: clamp(20px, 4vw, 30px); text-transform: none; text-decoration: none; color: var(--ink); display: inline-block; border-bottom: 3px solid var(--ember); margin: 6px 0 18px; word-break: break-all; }
.mail:hover { color: var(--ember); }
.doc__foot { margin-top: 56px; padding-top: 22px; border-top: 1px dashed var(--line-ink); font-size: 13px; color: #6B6353; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.doc__foot a { color: #6B6353; }

@media (prefers-reduced-motion: reduce) {
  .pola, .badge { transition: none; }
  .pola:hover { transform: rotate(var(--tilt)); }
}