/* The site's own layer on top of the Yardage Book.

   yb/tokens.css (the tokens), yb/yardage.css (the components) and
   yb/motifs/motifs.css (the background drawings) are copied in by
   scripts/yardage-sync.py and never edited here. This sheet holds only what
   the live pages need beyond the approved templates: the legal articles,
   which stay plain unclassed HTML (their text is pasted in verbatim), the
   placeholder note on the device renders, and a few page details. */

/* ------------------------------------------------- legal and support */

/* The article's own h2 / h3 / lists carry no classes (privacy and terms are
   pasted in verbatim), so the type roles are given here. */
.yb-article h2 { font: italic 480 var(--yb-type-title2-size)/var(--yb-type-title2-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); letter-spacing: -0.005em; scroll-margin-top: calc(var(--yb-header-height) + var(--yb-space-l)); }
.yb-article h3 { font: normal 500 var(--yb-type-title3-size)/var(--yb-type-title3-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); letter-spacing: -0.01em; scroll-margin-top: calc(var(--yb-header-height) + var(--yb-space-l)); }
.yb-article > section { scroll-margin-top: calc(var(--yb-header-height) + var(--yb-space-l)); }
.yb-article p, .yb-article li { font: normal 400 var(--yb-type-body-size)/var(--yb-type-body-line) var(--yb-font-sans); color: var(--yb-text); }
.yb-article ol { display: grid; gap: var(--yb-space-s); padding-left: 1.4em; list-style: decimal; }
.yb-article ol li::marker { font-family: var(--yb-font-mono); color: var(--yb-note); }
.yb-article ul + ul, .yb-article p + ol, .yb-article ol + p, .yb-article h3 + ol, .yb-article h2 + ol { margin-top: var(--yb-space-m); }
.yb-article strong { font-weight: 600; }
.yb-article aside { margin: var(--yb-space-l) 0; padding: var(--yb-space-m) var(--yb-space-l); border: var(--yb-line-thin) dashed var(--yb-rule-strong); color: var(--yb-text-secondary); }
.yb-article address { font-style: normal; margin-top: var(--yb-space-m); }
.yb-article table { width: 100%; border-collapse: collapse; margin: var(--yb-space-l) 0; font: normal 400 var(--yb-type-callout-size)/var(--yb-type-callout-line) var(--yb-font-sans); }
.yb-article th, .yb-article td { text-align: left; vertical-align: top; padding: var(--yb-space-s) var(--yb-space-m) var(--yb-space-s) 0; border-top: var(--yb-line-hair) solid var(--yb-rule); }
.yb-article th { font: normal 500 var(--yb-type-label-size)/var(--yb-type-label-line) var(--yb-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-note); }
.yb-article .yb-table-wrap, .yb-article table { overflow-wrap: anywhere; }
.yb-notice--inline { margin: var(--yb-space-l) 0; }
.yb-doc-head .yb-more { margin-top: var(--yb-space-l); }

/* -------------------------------------------------------------- home */

/* a text scorecard's column heads read from the left, as its cells do */
.yb-scorecard--text thead th { text-align: left; }

.yb-join-noscript { margin-top: var(--yb-space-m); }
.yb-devices-figure { display: grid; gap: var(--yb-space-m); margin: 0; }
.yb-range-lock { margin: var(--yb-space-x3) 0 0; }
/* The app images are design renders until the app's own screenshots land
   (scripts/yardage-devices.py writes the images and removes this note). */
.yb-device-note { font-size: var(--yb-type-note-small-size); color: var(--yb-note); max-width: 26rem; }
/* The spoken line lights while the voice would be speaking. */
.yb-metro-voice q { transition: color var(--yb-motion-quick) ease-out; }
.yb-metro-voice.is-speaking q { color: var(--yb-text); }

/* --------------------------------------------------------------- 404 */

/* The drawing fills the page under the header (cover-scaled, as
   feature-copy.js places the copy), never wider than the window. */
.yb-notfound .yb-feature-screen { width: 100%; aspect-ratio: auto; height: clamp(32rem, 56.25vw, 82vh); }
@media (max-width: 700px) { .yb-notfound .yb-feature-screen { height: auto; aspect-ratio: 390 / 844; } }

/* ------------------------------------- owner review 1 (2026-10-13) */

/* 1. The grid behind the swing and the metronome card: quieter. The same
   cell and hairline, the rule at 55%: still there, never louder than the
   data on it. */
.yb-grid-paper {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--yb-grid-cell) - var(--yb-line-hair)), color-mix(in srgb, var(--yb-rule) 55%, transparent) calc(var(--yb-grid-cell) - var(--yb-line-hair)) var(--yb-grid-cell)),
    repeating-linear-gradient(to right, transparent 0 calc(var(--yb-grid-cell) - var(--yb-line-hair)), color-mix(in srgb, var(--yb-rule) 55%, transparent) calc(var(--yb-grid-cell) - var(--yb-line-hair)) var(--yb-grid-cell));
}

/* 2. The hand path in 3D (hero-path.js): the whole figure turns it. A
   horizontal drag turns it; a vertical one still scrolls the page. */
.yb-orbit { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; border-radius: var(--yb-radius-control); }
.yb-orbit.is-turning { cursor: grabbing; }
.yb-orbit canvas { display: block; position: absolute; inset: 0; }
.yb-hero .yb-orbit { max-height: min(72vh, 46rem); width: 100%; }
.yb-orbit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yb-space-xs) var(--yb-space-l); margin-top: var(--yb-space-s); color: var(--yb-note); }
/* The readout's states stack in one cell, so it is always as wide as the
   longest ("from the target") and the hint, key and button after it never
   move as it turns (owner, 2026-10-13); hero-path.js shows one ([data-on]).
   The degrees: a right-aligned, tabular slot the width of "−175°". Hidden
   states are visibility: hidden, so screen readers read only the shown one. */
.yb-orbit-view { color: var(--yb-text); display: inline-grid; justify-items: start; }
.yb-orbit-view > [data-view] { grid-area: 1 / 1; white-space: nowrap; visibility: hidden; }
.yb-orbit-view > [data-on] { visibility: visible; }
.yb-orbit-deg { display: inline-block; min-width: 5ch; text-align: right; font-family: var(--yb-font-mono); font-variant-numeric: tabular-nums; }
.yb-orbit-play { margin-left: auto; }
.yb-orbit-play[hidden] { display: none; }  /* until hero-path.js runs: without it there is nothing to play */
/* one button, two glyphs: the one shown says what a press does */
.yb-orbit-play svg { width: 20px; height: 20px; }
.yb-orbit-play[data-state="playing"] .yb-glyph-play,
.yb-orbit-play[data-state="paused"] .yb-glyph-pause,
.yb-orbit-play:not([data-state]) .yb-glyph-play { display: none; }
/* the app's speed key (WristPathSpeedLegend): blue slower, red faster */
.yb-speed-key { display: inline-flex; align-items: center; gap: var(--yb-space-xs); }
.yb-speed-ramp { width: 4em; height: 5px; border-radius: 3px; background: linear-gradient(to right, rgb(64, 179, 242), rgb(159, 125, 157), rgb(255, 71, 71)); }

/* 4. The hero and the statement, wider: the spread may grow past the page
   measure on wide screens, the words take the larger page, and the
   headline sets on two lines once there is room. All fluid. */
.yb-hero h1 { max-width: 16ch; text-wrap: balance; }
@media (min-width: 960px) {
  .yb-hero .yb-wrap.yb-spread { max-width: min(100%, 118rem); }
  .yb-spread { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .yb-page--left { padding: var(--yb-space-x5) clamp(var(--yb-space-x3), 4vw, var(--yb-space-x6)) var(--yb-space-x5) clamp(var(--yb-space-x3), 4vw, var(--yb-space-x6)); }
  .yb-page--right { padding: var(--yb-space-xxl) clamp(var(--yb-space-xl), 2.4vw, var(--yb-space-x4)) var(--yb-space-x3); }
}
.yb-statement-section p { max-width: min(100%, 44ch); }
/* Past the display token's cap (5.4rem, reached near 1600px) the hero's words
   kept growing nowhere, and at 2560 they filled half their page. On very wide
   screens the headline and the lead keep scaling with the viewport; both
   joins are continuous (4.2vw = 5.4rem at about 2060px; 0.86vw = the lead's
   cap at about 2210px), and the lead's measure is in ch so it widens with it. */
@media (min-width: 1600px) {
  .yb-hero h1 { font-size: clamp(var(--yb-type-display-size), 4.2vw, 7.5rem); }
  .yb-hero .yb-lead { font-size: clamp(var(--yb-type-lead-size), 0.86vw, 1.6rem); max-width: min(100%, 58ch); }
}

/* 5. "already own" in green, no rule (owner, review 2: "the easiest to read
   green that we use for the logo, darkest"). Brand green #17C97F on paper is
   1.88:1, under the 3:1 large text needs; the logo's darkest band, #0E8F5E,
   is 3.58:1 on paper (#F3EFE4), and the headline is large text; at night the
   brand green itself, 8.83:1 on #0D100F. The design lead's token for it,
   --yb-accent-text (tokens.json accentText, 2026-10-13), replaced the local
   --site-em-green this file used to define. */
.yb-em--green { color: var(--yb-accent-text); }

/* The turn hint names the gesture the visitor has: a drag with a mouse or
   trackpad, a swipe on a touch screen. */
.yb-hint-coarse { display: none; }
@media (pointer: coarse) {
  .yb-hint-fine { display: none; }
  .yb-hint-coarse { display: inline; }
}

/* ------------------------------------------- owner review 2 (2026-10-13) */

/* A motif in every section (owner: "a new texture on each section"), each
   section a different one, a map (hole or green) never next to a map. The
   opening (the hero and the statement) is ONE page with one motif that runs
   down to the first section's double rule, not clipped at the hero's foot. */
.yb-opening { position: relative; overflow: hidden; }
.yb-opening > .yb-hero, .yb-opening > .yb-statement-section { position: relative; z-index: 1; }
/* the footer's drawing sits under its words like every section's */
.yb-footer > .yb-motif { z-index: 0; }

/* Feathered motif edges (owner, 2026-10-13: the footer's drawing "gets cut
   off sharply" between section 7 and the footer). A motif may end hard only
   at a divider line (DESIGN-LANGUAGE section 8: no visible end of the
   pattern inside the frame). The section double rules are dividers; these
   edges are not: the last section's foot and the footer's head (one ground
   at night, so the two drawings met in a straight seam), the 404 drawing's
   foot, and the opening's and the 404's heads under the header (its rule
   shows only once scrolled). Each eases out over a static band of its own
   ground, so the two drawings at a seam cross-fade through bare ground and
   never sit doubled at full strength.
   Why a ground band and not mask-image: motif-fade.js writes each motif's
   mask inline (the fade under the ink), and an inline mask-image replaces
   any stylesheet mask, so a CSS mask on .yb-motif would never apply, and an
   !important one would erase the fade under the words. Over a flat ground a
   band of that ground is the same picture as a mask. It sits above the
   drawing and under the words (each pseudo's z-index and place in tree
   order), takes no pointer, and reads --yb-ground where it is drawn, so it
   is night in the footer and follows the page's theme elsewhere. */
.yb-footer:not(:has(> .yb-motif[data-tail]))::after,
main > .yb-hole-section:last-child:not(:has(> .yb-motif[data-tail]))::after,
main > .yb-hole-section:has(> .yb-motif[data-tail="top"])::after,
.yb-notfound-screen::after,
.yb-notfound-screen::before,
.yb-opening::before {
  content: ""; position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  /* eased, not linear: a straight ramp shows its far end as a faint line */
  background: linear-gradient(var(--site-feather-dir, to bottom), var(--yb-ground), color-mix(in srgb, var(--yb-ground) 72%, transparent) 25%, color-mix(in srgb, var(--yb-ground) 38%, transparent) 50%, color-mix(in srgb, var(--yb-ground) 12%, transparent) 75%, transparent);
}
/* the footer's head: about 40% of a short footer, at most 180px */
.yb-footer:not(:has(> .yb-motif[data-tail]))::after { top: 0; height: clamp(96px, 40%, 180px); }
/* the foot of the section above the footer (contact on the home page) and of
   the 404 drawing: they ease out where the footer's drawing eases in */
main > .yb-hole-section:last-child:not(:has(> .yb-motif[data-tail]))::after,
.yb-notfound-screen::after { bottom: 0; height: clamp(96px, 25%, 180px); --site-feather-dir: to top; }
/* The home page's tail (owner, 2026-10-13: section 7 and the footer as ONE drawing; site.js
   slices one picture across both): no band at the seam, so the drawing runs on into the
   footer; it enters the contact section under its double rule, feathered. */
main > .yb-hole-section:has(> .yb-motif[data-tail="top"])::after {
  top: calc(var(--yb-double-rule-top) + var(--yb-double-rule-gap) + var(--yb-double-rule-bottom));
  height: clamp(64px, 18%, 160px);
}
/* the heads under the header: a header's height, just enough that the
   drawing comes out from under the bar instead of starting on a line */
.yb-opening::before,
.yb-notfound-screen::before { top: 0; height: var(--yb-header-height, 64px); z-index: 1; }
/* A section's drawing loads as the section comes within a screen and a half
   (motif-enter.js adds .is-near): nine drawings are about 270 KB, and a visitor
   who never scrolls should not pay for them. The opening's paints at once.
   Without JavaScript only the opening has one; they are decoration. */
.yb-motif[data-defer]:not(.is-near) { background-image: none; }

/* No flicker (owner, 2026-10-13: "the motif flicker as they load, can we just have them
   softly load in slowly no flicker its distracting"). Every motif waits at 0 and eases to
   its level once its drawing is decoded and its fade under the words is on it
   (motif-enter.js adds .is-shown): motion gentle, 0.9 s ease-out; under Reduce Motion a
   quick 160 ms opacity fade (the gentle token is zero there). The level is
   --site-motif-level (1; the scorecard's is lower, below), so a fade never overshoots a
   motif's own strength. Without JavaScript noscript.css shows them at their level.
   It waits at 0.001, not 0, on its own layer (will-change): a layer at exactly 0 is not
   drawn, so the browser rastered the drawing only once the fade had begun, and on a phone
   the first frames of the fade were held back until it was three quarters done (a jump).
   At 0.001 (a whisper line at 0.009%: nothing to see) it is rastered while it waits. Once
   the fade is done (.is-settled) the layer goes and it paints with the page again. */
.yb-motif { opacity: 0.001; transition: opacity var(--yb-motion-gentle); will-change: opacity; }
.yb-motif.is-shown { opacity: var(--site-motif-level, 1); }
.yb-motif.is-settled { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .yb-motif { transition: opacity var(--yb-motion-quick) ease-out; } }

/* The scorecard grid (owner, 2026-10-13: "the scorecard grid motif is too distracting
   because it kinda lines up with the content in front of it so we need to dial back the
   opacity of only the scorecard motif more than the maps"). A site-local level, half the
   whisper strength the maps keep (for the design lead to make a token: motif.scorecard =
   0.5 x whisper), and the grid moved off the page's own: the element runs a few odd pixels
   past its box on each side, so cover scales the drawing ~3% and shifts it, and its rules
   no longer fall on text baselines or column edges. */
.yb-motif--scorecard-fragment {
  --site-motif-level: var(--site-scorecard-strength, 0.5);
  inset: -19px -27px -13px -23px;
}

/* Footer: Follow (owner list W1, 2026-10-20). Instagram, X and YouTube, all
 * @stripedgolfapp (each URL checked to resolve to the Striped Golf profile on
 * 2026-10-20). Style per the owner's reference: a small mono "FOLLOW" label,
 * then square outline buttons with a monochrome glyph. Yardage parts only:
 * the label is .yb-label, the buttons are the 44 px touch target with the
 * control radius and a hairline in the footer's night rule colour. Hover
 * brings the line up to brand green and the glyph up to full ink, eased like
 * the rest of the site; no movement, so nothing jumps under the pointer.
 * The links leave the site in the same tab, like every other link here. */
.site-follow { margin-top: var(--yb-space-xxl); display: grid; gap: var(--yb-space-s); justify-items: start; }
.site-follow-label { margin: 0; color: var(--yb-note); }
.site-follow-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--yb-space-m); }
.site-follow-link {
  display: inline-grid; place-items: center;
  width: var(--yb-min-target); height: var(--yb-min-target);
  border: var(--yb-line-thin) solid var(--yb-rule);
  border-radius: var(--yb-radius-control);
  color: var(--yb-text-secondary);
  transition: border-color var(--yb-motion-quick) var(--yb-ease-out), color var(--yb-motion-quick) var(--yb-ease-out);
}
.site-follow-link:hover { border-color: var(--yb-accent); color: var(--yb-text); }
.site-follow-link svg { display: block; }
@media (prefers-reduced-motion: reduce) { .site-follow-link { transition: none; } }