/*
  The Turn: design system
  Theme: a scorecard / yardage-book, printed on paper, not a SaaS dashboard.
  No gradients, no glass, no icon-library rows, no soft fades on interactive
  elements. State changes are instant and crisp, like flipping a card.
*/

/* ---------------------------------------------------------------------- */
/* Fonts (self-hosted, no external requests)                              */
/* ---------------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------- */
/* Tokens                                                                  */
/* ---------------------------------------------------------------------- */

:root {
  /* type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* an 8px spacing scale, used everywhere, nothing off-scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* a fixed type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --text-2xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --text-3xl: clamp(2.75rem, 2rem + 3vw, 4.25rem);

  --line-tight: 1.15;
  --line-snug: 1.35;
  --line-normal: 1.6;

  --radius-sm: 3px;
  --radius-md: 4px;

  --border-thin: 1px;
  --border-thick: 2px;

  --container-max: 72rem;
  --measure: 40rem; /* comfortable reading line length */

  --duration-fast: 100ms;
  --duration-base: 160ms;

  /* light theme (default), warm scorecard paper */
  --color-paper: #f4efe2;
  --color-paper-raised: #ece4d0;
  --color-paper-sunken: #e6dcc3;
  --color-ink: #1d2420;
  --color-ink-soft: #4a544c;
  --color-ink-faint: #575f58; /* darkened from an earlier draft: clears 4.5:1 at small sizes on every surface color used */
  --color-fairway: #1f4d34;
  --color-fairway-strong: #143523;
  --color-fairway-tint: #dde8de;
  --color-clay: #a8471f;
  --color-clay-strong: #7d3216;
  --color-line: #cdc2a2;
  --color-line-strong: #a89a72;
  --color-focus: #1f4d34;
  --color-danger: #8a2b1c;
  --color-success: #1f4d34;
  --shadow-card: 0 1px 0 var(--color-line-strong);
  --shadow-lift: 0 6px 0 -3px var(--color-line-strong), 0 6px 14px rgba(29, 36, 32, 0.12);
  --color-scheme: light;
}

:root[data-theme="dark"] {
  /* dark theme: a dark fairway green, not a neutral black/grey, so the
     brand's green + beige still reads as green + beige after dark mode. */
  --color-paper: #121f19;
  --color-paper-raised: #182a20;
  --color-paper-sunken: #0d1712;
  --color-ink: #f4efe2;
  --color-ink-soft: #cdbfa0;
  --color-ink-faint: #a89a72;
  --color-fairway: #6fbf8f;
  --color-fairway-strong: #92d4ac;
  --color-fairway-tint: #1c2c22;
  --color-clay: #e2895a;
  --color-clay-strong: #f0a578;
  --color-line: #3d4a3c;
  --color-line-strong: #5c6b52;
  --color-focus: #92d4ac;
  --color-danger: #e2795f;
  --color-success: #6fbf8f;
  --shadow-card: 0 1px 0 var(--color-line-strong);
  --shadow-lift: 0 6px 0 -3px var(--color-line-strong), 0 6px 18px rgba(0, 0, 0, 0.5);
  --color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #121f19;
    --color-paper-raised: #182a20;
    --color-paper-sunken: #0d1712;
    --color-ink: #f4efe2;
    --color-ink-soft: #cdbfa0;
    --color-ink-faint: #a89a72;
    --color-fairway: #6fbf8f;
    --color-fairway-strong: #92d4ac;
    --color-fairway-tint: #1c2c22;
    --color-clay: #e2895a;
    --color-clay-strong: #f0a578;
    --color-line: #3d4a3c;
    --color-line-strong: #5c6b52;
    --color-focus: #92d4ac;
    --color-danger: #e2795f;
    --color-success: #6fbf8f;
    --shadow-card: 0 1px 0 var(--color-line-strong);
    --shadow-lift: 0 6px 0 -3px var(--color-line-strong), 0 6px 18px rgba(0, 0, 0, 0.5);
    --color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------- */
/* Reset & base                                                            */
/* ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: var(--color-scheme);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-normal);
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--line-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); font-weight: 600; }
h4 { font-size: var(--text-md); font-weight: 600; }

p { max-width: var(--measure); }
p + p { margin-top: var(--space-4); }

small, .text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--space-2); }

table { border-collapse: collapse; width: 100%; }

hr {
  border: none;
  border-top: var(--border-thin) solid var(--color-line);
  margin: var(--space-7) 0;
}

figure { margin: 0; }

::selection {
  background: var(--color-fairway);
  color: var(--color-paper);
}

/* focus is always visible; nothing is suppressed */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--duration-fast) ease;
  font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------- */
/* Layout helpers                                                          */
/* ---------------------------------------------------------------------- */

.wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: var(--space-8); }
.section-tight { padding-block: var(--space-6); }

.stack > * + * { margin-top: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-7); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.measure { max-width: var(--measure); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fairway);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Buttons: instant state swaps, not opacity fades                        */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 0.85em 1.4em;
  border-radius: var(--radius-sm);
  border: var(--border-thick) solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background-color var(--duration-fast) linear,
              color var(--duration-fast) linear,
              border-color var(--duration-fast) linear,
              transform var(--duration-fast) linear;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.6; }

.btn-primary {
  background: var(--color-fairway);
  color: var(--color-paper);
  border-color: var(--color-fairway);
}
.btn-primary:hover { background: var(--color-fairway-strong); border-color: var(--color-fairway-strong); }
:root[data-theme="dark"] .btn-primary { color: var(--color-paper-sunken); }

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-secondary:hover { background: var(--color-ink); color: var(--color-paper); }

.btn-clay {
  background: var(--color-clay);
  color: #fbf4ec;
  border-color: var(--color-clay);
}
.btn-clay:hover { background: var(--color-clay-strong); border-color: var(--color-clay-strong); }

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: transparent;
  padding-inline: 0.4em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}
.btn-ghost:hover { text-decoration-thickness: 2px; }

.btn-block { width: 100%; }
.btn-sm { padding: 0.6em 1em; font-size: var(--text-xs); }

/* generic inline text links inside prose */
.prose a, .link {
  color: var(--color-fairway);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.prose a:hover, .link:hover { text-decoration-thickness: 2px; }
:root[data-theme="dark"] .prose a, :root[data-theme="dark"] .link { color: var(--color-fairway-strong); }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-paper);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.site-header.is-scrolled { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
:root[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); }

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  letter-spacing: -0.01em;
}
.wordmark .dot { color: var(--color-clay); }

.main-nav { display: flex; align-items: center; gap: var(--space-6); }
.main-nav-links { display: flex; gap: var(--space-5); list-style: none; padding: 0; }
.main-nav-links a {
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  padding-block: var(--space-2);
  border-bottom: var(--border-thick) solid transparent;
}
.main-nav-links a:hover,
.main-nav-links a[aria-current="page"] { border-bottom-color: var(--color-clay); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) linear, border-color var(--duration-fast) linear;
}
.icon-btn:hover { background: var(--color-paper-raised); border-color: var(--color-line-strong); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }
.icon-btn[hidden] { display: none; }

.menu-toggle { display: none; }

@media (max-width: 860px) {
  .main-nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* mobile drawer */
.mobile-nav {
  display: none;
  border-top: var(--border-thin) solid var(--color-line);
  background: var(--color-paper);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; padding: var(--space-3) 0; margin: 0; }
.mobile-nav a {
  display: block;
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  font-weight: 600;
  border-bottom: var(--border-thin) solid var(--color-line);
}
.mobile-nav a:hover { background: var(--color-paper-raised); }

/* announcement banner */
.announcement {
  background: var(--color-fairway);
  color: var(--color-paper);
}
:root[data-theme="dark"] .announcement { color: var(--color-paper-sunken); }
.announcement-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  position: relative;
}
.announcement a { text-decoration: underline; text-underline-offset: 2px; }
.announcement-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: var(--space-1);
  position: absolute;
  right: var(--space-4);
  line-height: 0;
}
.announcement-close svg { width: 0.9rem; height: 0.9rem; }
@media (max-width: 640px) {
  .announcement-close { position: static; }
  .announcement-row { flex-wrap: wrap; }
}

/* breadcrumbs */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  padding-block: var(--space-4);
}
.breadcrumbs a { text-decoration: none; color: var(--color-ink-soft); }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { margin-inline: var(--space-2); }

/* scroll progress bar (journal posts) */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--color-clay);
  width: 0%;
  z-index: 150;
  transition: width 60ms linear;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-9) var(--space-8);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero h1 { margin-bottom: var(--space-4); }
.hero .lede {
  font-size: var(--text-md);
  color: var(--color-ink-soft);
  max-width: 34rem;
}
.hero .cta-row { margin-top: var(--space-6); }

/* photo hero, home page only: a full-bleed image behind the existing content,
   with a fixed (theme-independent) scrim and text palette so it stays legible
   over whatever photo gets dropped in at /assets/img/hero-course.jpg.
   The scrim is the site's own fairway green fading into a warm beige edge,
   not a generic dark/black overlay, so it stays on-brand over any photo. */
.hero.has-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: none;
  padding-block: var(--space-9) var(--space-9);
}
.hero-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  z-index: -2;
}
.hero-photo-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 53, 35, 0.88) 0%, rgba(20, 53, 35, 0.68) 45%, rgba(230, 220, 195, 0.28) 82%);
}
.hero.has-photo .eyebrow { color: #dcefdf; }
.hero.has-photo h1 { color: #fbf8f0; }
.hero.has-photo .lede { color: #ece6d4; }
.hero.has-photo .btn-secondary { color: #fbf8f0; border-color: #fbf8f0; }
.hero.has-photo .btn-secondary:hover { background: #fbf8f0; color: var(--color-ink); }
.hero.has-photo .card-scorecard { box-shadow: 0 16px 34px rgba(11, 27, 18, 0.4); }
@media (max-width: 860px) {
  .hero-photo-bg { object-position: center; }
  .hero-photo-scrim { background: linear-gradient(180deg, rgba(20, 53, 35, 0.6) 0%, rgba(20, 53, 35, 0.88) 62%, rgba(20, 53, 35, 0.93) 100%); }
}

/* the home hero's photo is a looping video by default; .hero-photo-still is
   the same frame as a plain <img>, kept in the DOM but hidden, and swapped
   in for anyone who has asked their OS for reduced motion. */
.hero-photo-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-photo-still { display: block; }
}

/* shorter photo header band used on secondary pages (About, Journal,
   Printables, Kit, Plan): same green-to-beige scrim as the home hero,
   scaled down, with the text anchored to the bottom like a magazine
   header. */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 20rem;
  padding-block: var(--space-7);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: -2;
}
.page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(230, 220, 195, 0.24) 0%, rgba(20, 53, 35, 0.78) 68%, rgba(20, 53, 35, 0.92) 100%);
}
.page-hero .eyebrow { color: #dcefdf; }
.page-hero h1 { color: #fbf8f0; }
.page-hero .lede { color: #ece6d4; }
@media (max-width: 640px) {
  .page-hero { min-height: 16rem; padding-block: var(--space-6); }
}

/* a scorecard graphic used decoratively in the hero, built from real markup */
.card-scorecard {
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  background: var(--color-paper-raised);
  overflow: hidden;
}
.card-scorecard-head {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-thin) solid var(--color-line-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card-scorecard table { font-family: var(--font-mono); font-size: var(--text-xs); }
.card-scorecard th, .card-scorecard td {
  padding: var(--space-2) var(--space-3);
  text-align: center;
  border-bottom: var(--border-thin) solid var(--color-line);
}
.card-scorecard th:first-child, .card-scorecard td:first-child {
  text-align: left;
  font-weight: 700;
}
.card-scorecard tfoot td { font-weight: 700; border-top: var(--border-thick) solid var(--color-ink); border-bottom: none; }
.card-scorecard th:last-child, .card-scorecard td:last-child { text-align: right; }
.card-scorecard tbody tr.is-leak td {
  color: var(--color-clay);
  font-weight: 700;
  background: var(--color-fairway-tint);
}
.card-scorecard tbody tr.is-leak td:first-child { border-left: var(--border-thick) solid var(--color-clay); }
.card-scorecard-foot {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  border-top: var(--border-thin) solid var(--color-line-strong);
}
.card-scorecard-foot strong { color: var(--color-clay); }

/* ---------------------------------------------------------------------- */
/* Cards (flat, hairline border, no color bars, no blur)                  */
/* ---------------------------------------------------------------------- */

.card {
  background: var(--color-paper-raised);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--duration-fast) linear, box-shadow var(--duration-fast) linear;
}
a.card { text-decoration: none; display: block; color: inherit; }
a.card:hover { border-color: var(--color-ink); box-shadow: var(--shadow-lift); }

.card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card h3 { margin-top: var(--space-2); }
.card p { margin-top: var(--space-2); color: var(--color-ink-soft); }

.card-row { display: flex; gap: var(--space-5); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }

/* numbered "holes" process row, replaces icon-box triads */
.hole-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hole-step {
  padding: var(--space-6) var(--space-5);
  border-right: var(--border-thin) solid var(--color-line);
}
.hole-step:last-child { border-right: none; }
.hole-step .hole-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-clay);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.hole-step h3 { margin-top: var(--space-3); }
.hole-step p { margin-top: var(--space-2); color: var(--color-ink-soft); font-size: var(--text-sm); }
@media (max-width: 760px) {
  .hole-steps { grid-template-columns: 1fr; }
  .hole-step { border-right: none; border-bottom: var(--border-thin) solid var(--color-line); }
  .hole-step:last-child { border-bottom: none; }
}

/* section headers */
.section-head { max-width: 38rem; margin-bottom: var(--space-6); }
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
  font-weight: 700;
  font-size: var(--text-sm);
}
.field .hint { font-size: var(--text-xs); color: var(--color-ink-faint); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0.7em 0.85em;
  border: var(--border-thin) solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-focus);
}
.field.has-error input, .field.has-error select { border-color: var(--color-danger); }
.field-error {
  display: none;
  color: var(--color-danger);
  font-size: var(--text-xs);
  font-weight: 600;
}
.field.has-error .field-error { display: block; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* estimate-mode toggle (fairways / GIR / putts / up-and-down "not sure" inputs) */
.field-group + .field-group { margin-top: var(--space-5); }
.mode-toggle {
  display: inline-block;
  margin-top: var(--space-2);
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-fairway);
  text-decoration: underline;
  cursor: pointer;
}
.mode-toggle:hover { color: var(--color-fairway-strong); }
.estimate-block .hint[data-estimate-live] {
  font-weight: 600;
  color: var(--color-ink-soft);
  margin-top: var(--space-2);
}
input[type="range"] {
  width: 100%;
  height: 6px;
  margin-top: var(--space-3);
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-line);
  border-radius: 999px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-fairway);
  border: 3px solid var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-paper);
  border-radius: 50%;
  background: var(--color-fairway);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  cursor: pointer;
}
input[type="range"]:focus-visible { box-shadow: 0 0 0 3px var(--color-fairway-tint); }

/* miss-tally (optional swing-fault counters) */
.miss-tally {
  border-top: var(--border-thin) solid var(--color-line);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
}
.miss-tally summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-sm);
}
.miss-tally summary .hint { font-weight: 400; }
.miss-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.miss-grid .field label { font-size: var(--text-xs); }
.miss-grid .field input { padding: 0.55em 0.6em; text-align: center; }
@media (max-width: 640px) { .miss-grid { grid-template-columns: repeat(2, 1fr); } }

.drill-list { margin-top: var(--space-3); padding-left: 1.2em; }
.drill-list li { margin-top: var(--space-2); color: var(--color-ink-soft); }

.form-status {
  display: none;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
}
.form-status.is-success {
  display: block;
  background: var(--color-fairway-tint);
  color: var(--color-fairway-strong);
  border: var(--border-thin) solid var(--color-fairway);
}
.form-status.is-error {
  display: block;
  background: transparent;
  color: var(--color-danger);
  border: var(--border-thin) solid var(--color-danger);
}

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* signup / waitlist block */
.signup-card {
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-paper-raised);
}

/* ---------------------------------------------------------------------- */
/* FAQ (native details/summary, works with no JS)                         */
/* ---------------------------------------------------------------------- */

.faq-item {
  border-bottom: var(--border-thin) solid var(--color-line);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-4);
  font-weight: 700;
  font-size: var(--text-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { flex-shrink: 0; transition: transform var(--duration-base) ease; }
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item p { padding-bottom: var(--space-4); color: var(--color-ink-soft); }

/* ---------------------------------------------------------------------- */
/* Round X-Ray results                                                     */
/* ---------------------------------------------------------------------- */

.leak-bar-row {
  display: grid;
  grid-template-columns: 9rem 1fr 4.5rem;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.leak-bar-row .label { font-weight: 700; font-size: var(--text-sm); }
.leak-bar-track {
  height: 0.9rem;
  background: var(--color-paper-sunken);
  border: var(--border-thin) solid var(--color-line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.leak-bar-fill {
  height: 100%;
  background: var(--color-clay);
}
.leak-bar-fill.is-fairway { background: var(--color-fairway); }
.leak-bar-row .value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-align: right;
  font-weight: 700;
}
@media (max-width: 560px) {
  .leak-bar-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .leak-bar-row .value { text-align: left; }
}

.result-headline {
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-paper-raised);
}
.result-headline .big {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Utility buttons: copy, print, back to top                              */
/* ---------------------------------------------------------------------- */

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: var(--border-thin) solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.9em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--color-ink);
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--color-ink); background: var(--color-paper-raised); }
.copy-btn[data-copied="true"] { border-color: var(--color-fairway); color: var(--color-fairway); }

.back-to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.back-to-top.is-visible { display: inline-flex; }
.back-to-top svg { width: 1.1rem; height: 1.1rem; }

/* floating contact (desktop / tablet only, to stay clear of the mobile sticky CTA) */
.floating-contact {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  background: var(--color-paper);
  border: var(--border-thick) solid var(--color-ink);
  border-radius: 999px;
  padding: 0.65em 1.1em;
  font-weight: 700;
  font-size: var(--text-xs);
  text-decoration: none;
  color: var(--color-ink);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.floating-contact:hover { background: var(--color-ink); color: var(--color-paper); }
@media (max-width: 760px) { .floating-contact { display: none; } }

/* sticky mobile CTA */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: var(--color-paper);
  border-top: var(--border-thick) solid var(--color-ink);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}
.sticky-mobile-cta.is-visible { display: block; }
@media (min-width: 761px) { .sticky-mobile-cta { display: none !important; } }

/* ---------------------------------------------------------------------- */
/* Search overlay                                                          */
/* ---------------------------------------------------------------------- */

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 26, 0.55);
  z-index: 180;
  display: none;
  padding-top: 10vh;
}
.search-overlay.is-open { display: block; }
.search-panel {
  max-width: 38rem;
  margin: 0 auto;
  background: var(--color-paper);
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.search-panel input {
  font-family: var(--font-body);
  font-size: var(--text-md);
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}
.search-results { overflow-y: auto; list-style: none; padding: 0; }
.search-results li + li { margin-top: var(--space-2); }
.search-results a {
  display: block;
  padding: var(--space-3);
  text-decoration: none;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
}
.search-results a:hover { border-color: var(--color-ink); background: var(--color-paper-raised); }
.search-empty { color: var(--color-ink-faint); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------- */
/* Confirmation modal (native <dialog>)                                    */
/* ---------------------------------------------------------------------- */

dialog.modal {
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  max-width: 26rem;
  width: calc(100% - 2rem);
  color: var(--color-ink);
  background: var(--color-paper);
}
dialog.modal::backdrop { background: rgba(20, 23, 26, 0.55); }
dialog.modal h3 { margin-bottom: var(--space-3); }
dialog.modal .modal-actions { margin-top: var(--space-5); display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ---------------------------------------------------------------------- */
/* Journal list / post                                                     */
/* ---------------------------------------------------------------------- */

.post-list { display: flex; flex-direction: column; gap: var(--space-4); }
.post-card {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: var(--border-thin) solid var(--color-line);
  text-decoration: none;
  color: inherit;
}
.post-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.post-card .date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  padding-top: var(--space-1);
}
.post-card p { color: var(--color-ink-soft); margin-top: var(--space-2); }
.post-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fairway);
  border: var(--border-thin) solid var(--color-fairway);
  border-radius: 999px;
  padding: 0.15em 0.7em;
  margin-top: var(--space-3);
}
@media (max-width: 620px) {
  .post-card { grid-template-columns: 1fr; }
}

.post-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

blockquote.pull {
  border-left: var(--border-thick) solid var(--color-clay);
  padding-left: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-ink);
  margin-block: var(--space-6);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose table {
  margin-block: var(--space-5);
  font-size: var(--text-sm);
}
.prose th, .prose td {
  border-bottom: var(--border-thin) solid var(--color-line);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.prose th { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  border-top: var(--border-thin) solid var(--color-line);
  padding-top: var(--space-5);
  flex-wrap: wrap;
}
.post-nav a { text-decoration: none; max-width: 20rem; }
.post-nav .dir { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }
.post-nav .title { font-weight: 700; }
.post-nav a:hover .title { text-decoration: underline; }
.post-nav .next { text-align: right; margin-left: auto; }

/* ---------------------------------------------------------------------- */
/* Printables                                                              */
/* ---------------------------------------------------------------------- */

.tracker-sheet {
  border: var(--border-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-paper-raised);
}
.tracker-sheet table { font-size: var(--text-xs); }
.tracker-sheet th, .tracker-sheet td {
  border: var(--border-thin) solid var(--color-line-strong);
  padding: var(--space-2);
  text-align: center;
}
.tracker-sheet th { font-family: var(--font-mono); background: var(--color-paper-sunken); }

.drill-block {
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.drill-block h3 { display: flex; align-items: baseline; gap: var(--space-3); }
.drill-block .drill-num { font-family: var(--font-mono); color: var(--color-clay); font-weight: 700; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer {
  border-top: var(--border-thick) solid var(--color-ink);
  padding-block: var(--space-7);
  background: var(--color-paper-raised);
  margin-top: var(--space-9);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-3);
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li + li { margin-top: var(--space-2); }
.footer-col a { text-decoration: none; font-size: var(--text-sm); }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--color-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

/* ---------------------------------------------------------------------- */
/* Print stylesheet                                                        */
/* ---------------------------------------------------------------------- */

@media print {
  .site-header, .mobile-nav, .announcement, .site-footer, .back-to-top,
  .floating-contact, .sticky-mobile-cta, .breadcrumbs, .progress-bar,
  .no-print, .search-overlay, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
  .tracker-sheet, .drill-block, .card { border-color: #000 !important; background: #fff !important; }
  main { padding: 0 !important; }
  .wrap { max-width: 100% !important; padding: 0 !important; }
}

/* ---------------------------------------------------------------------- */
/* Misc page bits                                                          */
/* ---------------------------------------------------------------------- */

.center-head { text-align: center; max-width: 40rem; margin-inline: auto; }
.error-page { text-align: center; padding-block: var(--space-10); }
.error-page .code {
  font-family: var(--font-mono);
  color: var(--color-clay);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
}

table.compare-table { font-size: var(--text-sm); }
table.compare-table th, table.compare-table td { padding: var(--space-3); border-bottom: var(--border-thin) solid var(--color-line); }
table.compare-table th { text-align: left; font-family: var(--font-mono); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.05em; }

/* My rounds page */
table.rounds-table { font-size: var(--text-sm); min-width: 32rem; }
table.rounds-table th, table.rounds-table td { padding: var(--space-3); border-bottom: var(--border-thin) solid var(--color-line); text-align: left; }
table.rounds-table th { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.05em; color: var(--color-ink-soft); }
table.rounds-table td:last-child { text-align: right; }