/* ==========================================================================
   Weather Caddy — Components
   Prefix: .wc-
   Depends on tokens.css.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--botanical-celadon) 18%, transparent), transparent 27rem),
    radial-gradient(circle at 84% 32%, color-mix(in srgb, var(--bunker-light) 11%, transparent), transparent 31rem),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-feature-settings: "onum" 1, "kern" 1;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   Shell & backdrop
   The lathe field is fixed behind everything at low opacity; the botanical
   watermark for the current course sits on top of it, also fixed. Together
   they are what makes two courses feel like two different documents.
   -------------------------------------------------------------------------- */

.wc-shell { position: relative; isolation: isolate; min-height: 100vh; overflow: clip; }

.wc-backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .28;
}
.wc-backdrop svg,
.wc-backdrop img { width: 100%; height: 100%; object-fit: cover; }

.wc-watermark {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  display: grid; place-items: center;
  opacity: .085;
  color: var(--turf);
}
.wc-watermark svg,
.wc-watermark img { width: min(92vw, 900px); height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .wc-watermark { transition: opacity .4s ease; }
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.wc-masthead {
  position: relative; z-index: 30;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--fairway-light) 72%, var(--paper-light)),
    color-mix(in srgb, var(--links-light) 52%, var(--paper-light)) 52%,
    color-mix(in srgb, var(--fairway-light) 72%, var(--paper-light)));
  border-top: 3px solid var(--turf-2);
  border-bottom: 1px solid color-mix(in srgb, var(--links) 42%, transparent);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--turf-2) 11%, transparent);
}
.wc-masthead-row {
  max-width: 1180px; margin-inline: auto; padding: .85rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.wc-wordmark {
  font-family: var(--font-caps); font-size: var(--step-1);
  letter-spacing: .22em; text-transform: uppercase; color: var(--turf-2);
  text-decoration: none; display: flex; align-items: baseline; gap: .55rem;
}
.wc-wordmark small {
  font-family: var(--font-ledger); font-size: var(--step--2);
  letter-spacing: .16em; color: var(--bunker-2); text-transform: uppercase;
}
.wc-nav { display: flex; gap: 1.1rem; margin-left: auto; flex-wrap: wrap; }
.wc-nav a {
  font-family: var(--font-caps); font-size: var(--step--1); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.wc-nav a:hover, .wc-nav a[aria-current] { color: var(--turf); border-bottom-color: var(--bunker); }

/* --------------------------------------------------------------------------
   Type furniture
   -------------------------------------------------------------------------- */

.wc-caps {
  font-family: var(--font-caps); text-transform: uppercase;
  letter-spacing: .14em; font-weight: 500; font-size: var(--step--1);
  color: var(--flag);
}
.wc-serial {
  font-family: var(--font-ledger); letter-spacing: .18em;
  color: var(--turf); font-variant-numeric: tabular-nums; font-size: var(--step--2);
}
.wc-denomination {
  font-family: var(--font-display); color: var(--turf-2); line-height: .72;
  font-size: var(--step-4);
  text-shadow: 1px 1px 0 var(--paper), 2px 2px 0 color-mix(in srgb, var(--turf) 25%, transparent);
}
.wc-rule { border: none; border-top: 1px solid var(--rule); margin: 0; }
.wc-rule-lathe { display: block; width: 100%; height: 22px; color: var(--fairway); opacity: .5; }
.wc-dropcap::first-letter {
  float: left; font: 700 3.4em/.72 var(--font-display);
  color: var(--turf-2); padding: .04em .09em 0 0;
}
.wc-lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 40ch; }

/* --------------------------------------------------------------------------
   Engraved surfaces
   .wc-engraved  — the light frame, used for ordinary cards
   .wc-scorecard — the banknote plate, re-read as a golf scorecard
   -------------------------------------------------------------------------- */

.wc-engraved {
  border: 1px solid var(--rule);
  box-shadow:
    inset 0 0 0 3px var(--paper),
    inset 0 0 0 4px var(--rule-soft),
    0 8px 22px color-mix(in srgb, var(--ink) 6%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--botanical-celadon) 13%, transparent), transparent 44%),
    var(--paper-light);
}

.wc-scorecard {
  position: relative; isolation: isolate;
  overflow: hidden;
  background:
    repeating-linear-gradient(106deg, transparent 0 6px, color-mix(in srgb, var(--turf) 2.2%, transparent) 6px 7px),
    linear-gradient(115deg, var(--paper-glow), var(--paper-light) 58%, color-mix(in srgb, var(--botanical-celadon) 18%, var(--paper-light)));
  border: 1.5px solid var(--ink);
  box-shadow:
    inset 0 0 0 3px var(--paper-light),
    inset 0 0 0 4.5px var(--turf),
    inset 0 0 0 8px var(--paper-light),
    inset 0 0 0 9.5px var(--bunker-2),
    inset 0 0 0 13px var(--paper-light),
    inset 0 0 0 14px color-mix(in srgb, var(--turf) 70%, transparent),
    0 15px 38px color-mix(in srgb, var(--ink) 14%, transparent);
  padding: clamp(1.5rem, 3.4vw, 3rem);
}
.wc-scorecard > :not(.wc-banknote-field) { position: relative; z-index: 2; }
.wc-scorecard::before,
.wc-scorecard::after { content: ""; position: absolute; pointer-events: none; z-index: 1; }
.wc-scorecard::before {
  inset: 15px;
  border: 1px solid color-mix(in srgb, var(--turf) 60%, transparent);
  background:
    radial-gradient(ellipse at center,
      transparent 0 29%,
      color-mix(in srgb, var(--links) 12%, transparent) 29.3% 29.8%,
      transparent 30.1% 38%,
      color-mix(in srgb, var(--turf) 10%, transparent) 38.3% 38.8%,
      transparent 39.1%),
    radial-gradient(circle at center, color-mix(in srgb, var(--fairway-light) 32%, transparent), transparent 62%);
}
.wc-scorecard::after {
  inset: 19px; opacity: .72;
  background:
    radial-gradient(circle at 0 0,       transparent 0 21px, var(--bunker-2) 21.5px 22.2px, transparent 22.8px 26px, var(--turf) 26.5px 27.1px, transparent 27.7px),
    radial-gradient(circle at 100% 0,    transparent 0 21px, var(--bunker-2) 21.5px 22.2px, transparent 22.8px 26px, var(--turf) 26.5px 27.1px, transparent 27.7px),
    radial-gradient(circle at 0 100%,    transparent 0 21px, var(--bunker-2) 21.5px 22.2px, transparent 22.8px 26px, var(--turf) 26.5px 27.1px, transparent 27.7px),
    radial-gradient(circle at 100% 100%, transparent 0 21px, var(--bunker-2) 21.5px 22.2px, transparent 22.8px 26px, var(--turf) 26.5px 27.1px, transparent 27.7px);
}

.wc-banknote-field {
  position: absolute; inset: 12px; z-index: 0; pointer-events: none;
  width: calc(100% - 24px); height: calc(100% - 24px);
  color: var(--fairway); opacity: .34;
}

.wc-scorecard-head {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  font-family: var(--font-ledger); font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--turf);
  padding-bottom: .55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bunker-2) 58%, transparent);
}

.wc-ribbon {
  border-block: 1px solid var(--turf);
  background: color-mix(in srgb, var(--turf-tint) 72%, var(--paper));
  box-shadow: inset 0 2px 0 var(--paper-light), inset 0 -2px 0 var(--paper-light);
  padding: .5rem 1rem;
}

/* --------------------------------------------------------------------------
   The playability seal — the page's single hero number
   -------------------------------------------------------------------------- */

.wc-seal {
  position: relative; display: grid; place-items: center;
  width: clamp(9rem, 18vw, 13rem); aspect-ratio: 1;
  border-radius: 50%;
  border: 5px double var(--turf);
  background:
    repeating-radial-gradient(circle, transparent 0 5px, color-mix(in srgb, var(--fairway) 10%, transparent) 5.4px 6px),
    radial-gradient(circle, var(--paper-glow) 0 42%, color-mix(in srgb, var(--botanical-celadon) 52%, var(--paper-light)) 72%, var(--paper-light));
  box-shadow:
    0 0 0 4px var(--paper),
    0 0 0 5px var(--bunker-2),
    0 0 0 8px var(--paper),
    0 0 0 9px var(--links),
    0 8px 24px color-mix(in srgb, var(--ink) 15%, transparent);
  text-align: center;
}
.wc-seal .wc-seal-lathe {
  position: absolute; inset: 6px; color: var(--fairway); opacity: .54; pointer-events: none;
}
.wc-seal-score {
  font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 4.2rem);
  font-weight: 700; line-height: .8; color: var(--turf-2); position: relative;
  letter-spacing: -.06em;
  -webkit-text-stroke: .5px color-mix(in srgb, var(--bunker-2) 45%, var(--turf-2));
  text-shadow:
    0 1px 0 var(--paper-glow),
    1px 2px 0 color-mix(in srgb, var(--turf) 22%, transparent),
    -1px -1px 0 color-mix(in srgb, var(--paper) 82%, transparent);
}
.wc-seal-label {
  font-family: var(--font-caps); text-transform: uppercase; letter-spacing: .13em;
  font-size: var(--step--2); margin-top: .6rem; color: var(--ink-soft); position: relative;
}
.wc-seal-label small {
  display: block; margin-top: .28rem;
  font-family: var(--font-ledger); font-size: .52rem; letter-spacing: .12em;
  color: var(--bunker-2);
}

.wc-course-hero {
  display: grid;
  grid-template-columns: auto minmax(16rem, 1fr) minmax(11rem, 15.5rem);
  gap: clamp(1.2rem, 3vw, 2.7rem);
  align-items: center;
}
.wc-course-copy { min-width: 0; }
.wc-field-study {
  align-self: stretch; min-height: 18.5rem; position: relative; margin: 0;
  border-left: 1px solid color-mix(in srgb, var(--bunker-2) 38%, transparent);
}
.wc-field-study img {
  position: absolute; z-index: 1; inset: -3.7rem -1rem -3.2rem 0;
  width: calc(100% + 1rem); height: calc(100% + 6.9rem);
  object-fit: contain; object-position: center;
  filter: saturate(.88) contrast(.98);
}
.wc-field-study figcaption {
  position: absolute; z-index: 2; right: 0; bottom: -.5rem;
  max-width: 15rem; text-align: right;
  font-family: var(--font-ledger); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bunker-2);
}

.wc-design-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 23rem);
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center;
  min-height: 25rem;
}
.wc-design-hero .wc-field-study { min-height: 23rem; border-left: 0; }
.wc-design-hero .wc-field-study img { inset: -5.2rem -1.5rem -4.8rem -1rem; width: calc(100% + 2.5rem); height: calc(100% + 10rem); }

/* --------------------------------------------------------------------------
   Home folio & course atlas
   -------------------------------------------------------------------------- */

.wc-home-hero { min-height: 0; }
.wc-home-hero-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem);
  gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding-top: clamp(1.4rem, 3vw, 2.6rem);
}
.wc-home-hero h1 { max-width: 14ch; margin: .25rem 0 .8rem; font-size: var(--step-4); }
.wc-home-hero .wc-lede { max-width: 51ch; }
.wc-home-actions { display: flex; align-items: baseline; gap: .8rem 1.5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.wc-home-actions > a:not(.wc-folio-link) {
  font-family: var(--font-caps); font-size: var(--step--2); letter-spacing: .08em;
  color: var(--ink-soft); text-decoration-color: var(--rule);
}
.wc-home-emblem {
  position: relative; display: grid; place-items: center; align-content: center; justify-self: end;
  width: min(100%, 12rem); aspect-ratio: 1; border: 4px double var(--turf); border-radius: 50%;
  color: var(--turf-2); text-align: center;
  background:
    repeating-radial-gradient(circle, transparent 0 5px, color-mix(in srgb, var(--links) 14%, transparent) 5.5px 6px),
    radial-gradient(circle, var(--paper-glow) 0 43%, color-mix(in srgb, var(--botanical-celadon) 34%, var(--paper-light)) 72%);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--bunker-2), 0 8px 22px color-mix(in srgb, var(--ink) 14%, transparent);
}
.wc-home-emblem::before, .wc-home-emblem::after { content: "✦"; position: absolute; top: 50%; translate: 0 -50%; color: var(--bunker); font-size: .75rem; }
.wc-home-emblem::before { left: 1rem; }
.wc-home-emblem::after { right: 1rem; }
.wc-home-emblem span { font: 700 3.8rem/.8 var(--font-display); text-shadow: 1px 1px 0 var(--paper); }
.wc-home-emblem b, .wc-home-emblem small { display: block; font-family: var(--font-caps); text-transform: uppercase; letter-spacing: .14em; }
.wc-home-emblem b { font-size: var(--step--2); }
.wc-home-emblem small { margin-top: .25rem; color: var(--bunker-2); font-size: .5rem; }

.wc-home-atlas { padding-top: clamp(.7rem, 2vw, 1.4rem); scroll-margin-top: 1.5rem; }
.wc-home-atlas .wc-section-head { align-items: end; }
.wc-home-atlas .wc-section-head h2, .wc-home-flora .wc-section-head h2 { margin-top: .18rem; font-size: var(--step-3); }
.wc-atlas-intro { max-width: 65ch; margin: 0 0 1.15rem; color: var(--ink-soft); font-size: var(--step-1); }
.wc-atlas-frame {
  display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(14.5rem, .9fr);
  overflow: hidden; background: var(--paper-light);
}
.wc-atlas-map {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  border-right: 1px solid var(--rule);
  background:
    radial-gradient(circle at 24% 72%, color-mix(in srgb, var(--botanical-gold) 12%, transparent), transparent 28%),
    radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--links) 12%, transparent), transparent 34%),
    repeating-linear-gradient(28deg, transparent 0 8px, color-mix(in srgb, var(--turf) 2.3%, transparent) 8px 9px),
    var(--paper-glow);
}
.wc-atlas-map::before {
  content: ""; position: absolute; z-index: 0; inset: 13px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--bunker-2) 45%, transparent);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px color-mix(in srgb, var(--turf) 24%, transparent);
}
.wc-atlas-map svg { position: relative; z-index: 2; display: block; width: 100%; height: auto; overflow: visible; }
.wc-map-botanical {
  position: absolute; z-index: 1; pointer-events: none; width: 31%; height: 72%; object-fit: contain;
  opacity: .09; mix-blend-mode: multiply; filter: sepia(.2) saturate(.8);
}
.wc-map-botanical-west { left: -7%; bottom: -18%; rotate: -12deg; }
.wc-map-botanical-east { right: -6%; top: -15%; rotate: 10deg; }
.wc-map-insets rect { fill: color-mix(in srgb, var(--paper) 66%, transparent); stroke: color-mix(in srgb, var(--bunker-2) 48%, transparent); stroke-width: .8; stroke-dasharray: 2 3; }
.wc-map-state {
  fill: color-mix(in srgb, var(--botanical-celadon) 34%, var(--paper-light));
  stroke: color-mix(in srgb, var(--turf) 63%, var(--paper)); stroke-width: .72;
  fill-rule: evenodd; transition: fill .18s ease, filter .18s ease;
}
.wc-map-state.has-library { fill: color-mix(in srgb, var(--botanical-celadon) 47%, var(--paper-light)); }
.wc-map-state.has-course { fill: color-mix(in srgb, var(--state-accent) 44%, var(--paper-light)); stroke: color-mix(in srgb, var(--state-accent) 72%, var(--ink)); stroke-width: 1.15; }
.wc-map-state-link { --state-accent: var(--botanical-sage); outline: none; }
.wc-map-state-link:hover .wc-map-state,
.wc-map-state-link:focus .wc-map-state,
.wc-map-state-link.is-active .wc-map-state {
  fill: color-mix(in srgb, var(--state-accent) 72%, var(--paper-glow));
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--ink) 25%, transparent));
}
.wc-map-leader { fill: none; stroke: var(--state-accent); stroke-width: 1.2; stroke-dasharray: 2.5 2.5; }
.wc-map-pin-ring { fill: var(--paper-glow); stroke: var(--state-accent); stroke-width: 2; }
.wc-map-pin-dot { fill: var(--state-accent); }
.wc-map-label rect { fill: color-mix(in srgb, var(--paper-glow) 92%, transparent); stroke: color-mix(in srgb, var(--state-accent) 72%, var(--ink)); stroke-width: .85; }
.wc-map-label text { fill: var(--turf-2); font: 600 11px var(--font-caps); letter-spacing: .025em; }
.wc-map-label .wc-map-label-state { fill: var(--bunker-2); font: 8px var(--font-ledger); letter-spacing: .12em; }
.wc-map-pin { outline: none; }
.wc-map-pin .wc-map-label, .wc-map-pin .wc-map-pin-ring { transition: filter .18s ease, transform .18s ease; transform-box: fill-box; transform-origin: center; }
.wc-map-pin:hover .wc-map-label, .wc-map-pin:focus .wc-map-label, .wc-map-pin.is-active .wc-map-label { filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--ink) 22%, transparent)); }
.wc-map-pin:hover .wc-map-pin-ring, .wc-map-pin:focus .wc-map-pin-ring, .wc-map-pin.is-active .wc-map-pin-ring { transform: scale(1.22); }
.wc-map-compass { fill: none; stroke: color-mix(in srgb, var(--bunker-2) 65%, transparent); stroke-width: .8; }
.wc-map-compass path { fill: color-mix(in srgb, var(--bunker) 46%, transparent); }
.wc-map-compass text { stroke: none; fill: var(--bunker-2); text-anchor: middle; font: 9px var(--font-caps); letter-spacing: .12em; }
.wc-map-key {
  position: absolute; z-index: 3; left: 1.4rem; bottom: .7rem; margin: 0;
  font: .52rem var(--font-ledger); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.wc-map-key span { display: inline-block; width: .65rem; aspect-ratio: 1; margin-right: .35rem; border: 1px solid var(--turf); background: color-mix(in srgb, var(--botanical-rose) 45%, var(--paper-light)); }

.wc-atlas-details { position: relative; min-width: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--botanical-celadon) 14%, transparent), transparent 54%), var(--paper-light); }
.wc-atlas-detail { position: relative; min-height: 100%; padding: clamp(1.1rem, 2.5vw, 1.65rem); animation: wc-atlas-reveal .24s ease-out; }
.wc-atlas-detail[hidden] { display: none; }
@keyframes wc-atlas-reveal { from { opacity: .3; translate: 6px 0; } }
.wc-atlas-detail-art {
  height: 8rem; margin: -1rem -1rem .7rem; overflow: hidden; border-bottom: 2px solid var(--state-accent);
  background: radial-gradient(circle, color-mix(in srgb, var(--state-accent) 26%, transparent), transparent 67%);
}
.wc-atlas-detail-art img { width: 100%; height: 13rem; object-fit: contain; object-position: center 32%; transform: translateY(-2.2rem); filter: saturate(.86) contrast(.98); }
.wc-atlas-detail h3 { margin: .2rem 0 .7rem; color: var(--turf-2); font-size: var(--step-2); }
.wc-atlas-detail > p:not(.wc-caps) { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.48; }
.wc-atlas-detail dl { display: grid; grid-template-columns: 1fr 1fr; margin: 1rem 0; border-block: 1px solid var(--rule-soft); }
.wc-atlas-detail dl div { padding: .55rem .4rem; }
.wc-atlas-detail dl div + div { border-left: 1px solid var(--rule-soft); }
.wc-atlas-detail dt { font: .56rem var(--font-ledger); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); }
.wc-atlas-detail dd { margin: .16rem 0 0; font: 600 var(--step--1) var(--font-display); color: var(--turf-2); }
.wc-atlas-selectors { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.wc-atlas-select {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 .65rem; align-items: center; min-width: 0;
  padding: .72rem 1rem; border: 0; border-right: 1px solid var(--rule); color: var(--ink-soft); text-align: left; cursor: pointer;
  background: var(--paper-light); font: inherit; transition: background .18s ease, box-shadow .18s ease;
}
.wc-atlas-select:last-child { border-right: 0; }
.wc-atlas-select > span { grid-row: 1 / 3; display: grid; place-items: center; width: 2.35rem; aspect-ratio: 1; border: 3px double var(--state-accent); border-radius: 50%; font: 600 .68rem var(--font-caps); color: var(--state-accent); }
.wc-atlas-select b { overflow: hidden; font: 600 var(--step--1) var(--font-display); color: var(--turf-2); text-overflow: ellipsis; white-space: nowrap; }
.wc-atlas-select small { font: .52rem var(--font-ledger); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.wc-atlas-select:hover, .wc-atlas-select:focus-visible, .wc-atlas-select.is-active { outline: none; background: color-mix(in srgb, var(--state-accent) 13%, var(--paper-light)); box-shadow: inset 0 -3px 0 var(--state-accent); }
.wc-map-credit { margin: .55rem 0 0; text-align: right; font: .52rem var(--font-ledger); letter-spacing: .06em; color: var(--ink-faint); }
.wc-map-credit a { text-decoration-color: var(--rule); }

.wc-home-tools {
  display: grid; grid-template-columns: minmax(15rem, 1.3fr) repeat(2, minmax(13rem, 1fr));
  border-block: 1px solid var(--rule); background: color-mix(in srgb, var(--paper-light) 78%, transparent);
}
.wc-home-tools > div, .wc-home-tools > a { padding: clamp(1rem, 2.4vw, 1.5rem); }
.wc-home-tools > div { align-self: center; }
.wc-home-tools h2 { margin-top: .2rem; font-size: var(--step-2); }
.wc-home-tools > a { position: relative; display: grid; grid-template-columns: 2.2rem 1fr; gap: .15rem .65rem; align-content: center; border-left: 1px solid var(--rule); color: var(--ink-soft); text-decoration: none; }
.wc-home-tools > a::after { content: "→"; position: absolute; right: 1rem; top: 50%; color: var(--bunker-2); translate: 0 -50%; }
.wc-home-tools > a span { grid-row: 1 / 3; font: 700 2.1rem/1 var(--font-display); color: var(--botanical-sage); }
.wc-home-tools > a b { padding-right: 1rem; font-family: var(--font-caps); color: var(--turf-2); letter-spacing: .05em; }
.wc-home-tools > a small { max-width: 28ch; padding-right: 1rem; color: var(--ink-faint); }
.wc-home-tools > a:hover { background: color-mix(in srgb, var(--botanical-celadon) 13%, transparent); }

.wc-home-flora { scroll-margin-top: 1.5rem; }
.wc-home-course-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .8rem; }
.wc-home-course {
  display: grid; grid-template-columns: 5.4rem 1fr; min-width: 0; min-height: 7.4rem; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--state-accent) 48%, var(--rule)); color: var(--ink-soft); text-decoration: none;
  background: var(--paper-light); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--rule-soft);
}
.wc-home-course img { width: 5.4rem; height: 100%; object-fit: cover; object-position: center; border-right: 2px solid var(--state-accent); filter: saturate(.87) contrast(.98); }
.wc-home-course > span { display: grid; align-content: center; min-width: 0; padding: .75rem; }
.wc-home-course small { overflow: hidden; font: .48rem var(--font-ledger); letter-spacing: .08em; text-transform: uppercase; color: var(--bunker-2); text-overflow: ellipsis; white-space: nowrap; }
.wc-home-course b { margin-top: .12rem; font: 600 var(--step-1) var(--font-display); color: var(--turf-2); }
.wc-home-course em { margin-top: .25rem; font-size: .72rem; line-height: 1.3; color: var(--ink-faint); }
.wc-home-course:hover { border-color: var(--state-accent); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--state-accent), 0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent); }

/* --------------------------------------------------------------------------
   Golf folio — courses, clubs, and tee selection
   -------------------------------------------------------------------------- */

.wc-golf-features {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.wc-golf-feature {
  --feature-accent: var(--botanical-sage);
  position: relative; isolation: isolate; overflow: hidden; min-height: 19rem;
  padding: 1.35rem; color: var(--ink-soft); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--feature-accent) 52%, var(--rule));
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--feature-accent) 22%, transparent), transparent 42%),
    var(--paper-light);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--rule-soft), 0 10px 26px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wc-golf-feature::after {
  content: ""; position: absolute; z-index: -1; width: 12rem; aspect-ratio: 1;
  right: -4.5rem; top: -4.5rem; border-radius: 50%; opacity: .34;
  background: repeating-radial-gradient(circle, transparent 0 6px, var(--feature-accent) 6.5px 7px);
}
.wc-golf-feature:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--rule-soft), 0 15px 34px color-mix(in srgb, var(--ink) 12%, transparent); }
.wc-golf-feature h3 { font-size: var(--step-2); color: var(--ink); margin: .25rem 0 .8rem; }
.wc-golf-feature p:not(.wc-caps) { max-width: 28ch; }
.wc-golf-feature > b { position: absolute; left: 1.35rem; bottom: 1.25rem; font-family: var(--font-caps); font-size: var(--step--2); letter-spacing: .1em; color: var(--turf); }
.wc-feature-number { display: block; font-family: var(--font-display); font-size: 3.8rem; line-height: .8; color: var(--feature-accent); }

.wc-directory-hero { min-height: 30rem; }
.wc-directory-hero-copy { width: min(59%, 42rem); padding-top: clamp(2.5rem, 6vw, 5.5rem); }
.wc-directory-hero h1 { font-size: var(--step-4); margin: .35rem 0 1rem; }
.wc-directory-botanical { position: absolute !important; z-index: 1 !important; inset: 3rem 0 0 55%; pointer-events: none; }
.wc-directory-botanical img { position: absolute; width: 48%; height: 100%; object-fit: contain; filter: saturate(.82) contrast(.98); }
.wc-directory-botanical img:nth-child(1) { left: -4%; top: 4%; transform: rotate(-8deg); }
.wc-directory-botanical img:nth-child(2) { left: 21%; top: -3%; transform: rotate(5deg); }
.wc-directory-botanical img:nth-child(3) { left: 45%; top: 7%; transform: rotate(10deg); }

.wc-library-intro { max-width: 72ch; color: var(--ink-soft); font-size: var(--step-1); }
.wc-library-source {
  margin: .7rem 0 0; font: .56rem/1.5 var(--font-ledger); letter-spacing: .05em;
  color: var(--ink-faint); text-align: right;
}
.wc-library-source a { text-decoration-color: var(--rule); }
.wc-state-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.wc-state-entry {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 0 .65rem;
  min-height: 4.7rem; padding: .62rem .72rem; border: 1px solid color-mix(in srgb, var(--state-accent) 43%, var(--rule));
  background: linear-gradient(145deg, color-mix(in srgb, var(--state-accent) 10%, var(--paper-light)), var(--paper-light));
  color: var(--ink-soft); text-decoration: none; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--rule-soft);
}
.wc-state-entry > span { grid-row: 1 / 3; display: grid; place-items: center; width: 2.35rem; aspect-ratio: 1; border: 3px double var(--state-accent); border-radius: 50%; color: var(--state-accent); font: 600 .65rem var(--font-caps); }
.wc-state-entry b { overflow: hidden; color: var(--turf-2); font: 600 var(--step--1) var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.wc-state-entry strong { color: var(--state-accent); font: 700 var(--step-1) var(--font-display); }
.wc-state-entry small { grid-column: 2 / 4; color: var(--ink-faint); font: .48rem var(--font-ledger); letter-spacing: .1em; text-transform: uppercase; }
.wc-state-entry:hover, .wc-state-entry:focus-visible { outline: none; border-color: var(--state-accent); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--state-accent), 0 7px 18px color-mix(in srgb, var(--ink) 8%, transparent); }

.wc-breadcrumb { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font: var(--step--2) var(--font-caps); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.wc-breadcrumb a { color: var(--turf); text-decoration-color: var(--bunker); }
.wc-state-library-hero { --state-accent: var(--botanical-sage); min-height: 23rem; }
.wc-state-library-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 30rem); align-items: center; gap: clamp(1rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2.4rem); }
.wc-state-library-heading h1 { margin: .2rem 0 .7rem; font-size: var(--step-4); }
.wc-state-flora-preview { position: relative; height: 17rem; overflow: hidden; border-left: 1px solid color-mix(in srgb, var(--state-accent) 50%, var(--rule)); }
.wc-state-flora-preview img { position: absolute; top: -2.5rem; width: 48%; height: 22rem; object-fit: contain; filter: saturate(.9); }
.wc-state-flora-preview img:nth-child(1) { left: -5%; rotate: -7deg; }
.wc-state-flora-preview img:nth-child(2) { left: 27%; z-index: 2; }
.wc-state-flora-preview img:nth-child(3) { left: 58%; rotate: 7deg; }
.wc-library-search {
  display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; align-items: center; gap: .75rem;
  margin-bottom: 1rem; padding: .75rem 1rem; border: 1px solid var(--rule); background: var(--paper-light);
  font-family: var(--font-caps); color: var(--turf-2);
}
.wc-library-search span { font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; }
.wc-library-search input { min-width: 0; padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 0; color: var(--ink); background: var(--paper-glow); font: var(--step-0) var(--font-body); }
.wc-library-search input:focus { outline: 2px solid color-mix(in srgb, var(--links) 55%, transparent); outline-offset: 1px; }
.wc-library-search output { font: .55rem var(--font-ledger); color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }
.wc-library-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .42rem; margin: 0; padding: 0; list-style: none; }
.wc-library-row[hidden] { display: none; }
.wc-library-row > a {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto 1rem; align-items: center; gap: .65rem;
  min-height: 4.25rem; padding: .55rem .72rem; border: 1px solid var(--rule-soft); background: color-mix(in srgb, var(--paper-light) 86%, transparent); color: var(--ink-soft); text-decoration: none;
}
.wc-library-row > a:hover, .wc-library-row > a:focus-visible { outline: none; border-color: var(--botanical-sage); background: color-mix(in srgb, var(--botanical-celadon) 14%, var(--paper-light)); }
.wc-library-row-mark { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; border: 1px solid var(--bunker-2); border-radius: 50%; color: var(--bunker-2); font: .56rem var(--font-ledger); }
.wc-library-row-copy { min-width: 0; }
.wc-library-row-copy b, .wc-library-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-library-row-copy b { color: var(--turf-2); font: 600 var(--step--1) var(--font-display); }
.wc-library-row-copy small { margin-top: .12rem; color: var(--ink-faint); font-size: .65rem; }
.wc-library-row-status { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; color: var(--ink-faint); font: .48rem var(--font-ledger); letter-spacing: .06em; text-transform: uppercase; }
.wc-library-row-status i { width: .45rem; aspect-ratio: 1; border-radius: 50%; background: var(--botanical-sage); }
.wc-library-row.is-finished > a {
  border-color: color-mix(in srgb, var(--state-accent, var(--botanical-sage)) 52%, var(--rule));
  background: linear-gradient(105deg, color-mix(in srgb, var(--state-accent, var(--botanical-sage)) 11%, var(--paper-light)), var(--paper-light));
}
.wc-library-row.is-finished .wc-library-row-status { color: var(--turf); }
.wc-library-row.is-finished .wc-library-row-status i { background: var(--botanical-rose); box-shadow: 0 0 0 2px color-mix(in srgb, var(--botanical-rose) 18%, transparent); }
.wc-library-row-arrow { color: var(--bunker-2); }
.wc-library-empty { padding: 2rem; border: 1px dashed var(--rule); text-align: center; color: var(--ink-faint); }

.wc-state-botany { padding-top: 1rem; }
.wc-library-botanical-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; }
.wc-library-botanical {
  --plate-accent: var(--botanical-sage); position: relative; overflow: hidden; margin: 0; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--plate-accent) 52%, var(--rule));
  background: linear-gradient(165deg, color-mix(in srgb, var(--plate-accent) 18%, var(--paper-light)), var(--paper-light) 48%);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--rule-soft);
}
.wc-library-botanical::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 3px; background: var(--plate-accent); }
.wc-library-botanical img { display: block; width: 100%; height: auto; filter: saturate(.96) contrast(.99); }
.wc-library-botanical figcaption { min-height: 4rem; padding: .5rem .62rem .62rem; border-top: 1px solid var(--rule-soft); }
.wc-library-botanical figcaption i, .wc-library-botanical figcaption b { display: block; overflow: hidden; text-overflow: ellipsis; }
.wc-library-botanical figcaption i { color: var(--ink-faint); font-size: .6rem; white-space: nowrap; }
.wc-library-botanical figcaption b { margin-top: .12rem; color: var(--turf-2); font: 600 .68rem var(--font-caps); letter-spacing: .035em; }

.wc-library-course-hero { min-height: 25rem; }
.wc-library-course-heading { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: 2rem; align-items: center; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.wc-library-course-heading h1 { max-width: 18ch; margin: .2rem 0 .7rem; font-size: var(--step-4); }
.wc-library-coordinate-seal { display: grid; place-items: center; align-content: center; width: 9rem; aspect-ratio: 1; justify-self: end; border: 4px double var(--turf); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 5px, color-mix(in srgb, var(--links) 13%, transparent) 5.5px 6px), var(--paper-glow); color: var(--turf-2); text-align: center; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--bunker-2); }
.wc-library-coordinate-seal span { font: 700 2.8rem/.9 var(--font-display); }
.wc-library-coordinate-seal small { font: .48rem var(--font-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--bunker-2); }
.wc-library-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: 1.2rem; border-block: 1px solid var(--rule-soft); }
.wc-library-facts > div { padding: .62rem .72rem; border-right: 1px solid var(--rule-soft); }
.wc-library-facts dt { font: .52rem var(--font-ledger); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.wc-library-facts dd { margin: .16rem 0 0; color: var(--turf-2); font: 600 var(--step--1) var(--font-display); }
.wc-library-actions { display: flex; gap: .7rem 1.4rem; flex-wrap: wrap; align-items: baseline; margin-top: 1rem; }
.wc-library-source-link { color: var(--ink-soft); font: var(--step--2) var(--font-caps); letter-spacing: .07em; text-transform: uppercase; text-decoration-color: var(--rule); }
.wc-library-provenance { padding: 1.3rem; }
.wc-library-provenance h2 { margin: .2rem 0 .55rem; font-size: var(--step-2); }
.wc-library-provenance p:last-child { max-width: 75ch; color: var(--ink-soft); }

.wc-course-directory { display: grid; gap: 1.3rem; }
.wc-course-card {
  --course-accent: var(--botanical-sage);
  display: grid; grid-template-columns: minmax(15rem, 32%) 1fr; min-height: 27rem;
  overflow: hidden; border: 1px solid color-mix(in srgb, var(--course-accent) 54%, var(--rule));
  background: var(--paper-light);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--rule-soft), 0 12px 30px color-mix(in srgb, var(--ink) 9%, transparent);
}
.wc-course-card-art {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--course-accent) 30%, transparent), transparent 66%),
    color-mix(in srgb, var(--course-accent) 8%, var(--paper));
  border-right: 1px solid color-mix(in srgb, var(--course-accent) 46%, var(--rule));
}
.wc-course-card-art img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.06); filter: saturate(.88) contrast(.98); }
.wc-course-card-art > span {
  position: absolute; left: 1rem; top: .8rem;
  font: 700 4.5rem/.8 var(--font-display); color: color-mix(in srgb, var(--course-accent) 62%, transparent);
}
.wc-course-card-body { padding: clamp(1.3rem, 3vw, 2.2rem); }
.wc-course-card h2 { font-size: var(--step-3); margin: .25rem 0 .65rem; }
.wc-course-deck { max-width: 56ch; font-size: var(--step-1); color: var(--ink-soft); }
.wc-course-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.25rem 0; border-block: 1px solid var(--rule-soft); }
.wc-course-facts > div { padding: .75rem; border-right: 1px solid var(--rule-soft); }
.wc-course-facts > div:last-child { border-right: 0; }
.wc-course-facts dt { font: var(--step--2) var(--font-ledger); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.wc-course-facts dd { margin: .25rem 0 0; font-family: var(--font-display); color: var(--turf-2); }
.wc-course-tees { display: flex; gap: .45rem 1rem; flex-wrap: wrap; font: var(--step--2) var(--font-ledger); color: var(--ink-soft); }
.wc-course-tees span { display: inline-flex; align-items: center; gap: .35rem; }
.wc-course-tees i { display: inline-block; width: .65rem; height: .65rem; border: 1px solid var(--paper); outline: 1px solid var(--tee-accent); border-radius: 50%; background: var(--tee-accent); }
.wc-ground-reading { color: var(--bunker-2); font-style: italic; }
.wc-folio-link { display: inline-flex; align-items: baseline; gap: .65rem; font-family: var(--font-caps); font-size: var(--step--1); letter-spacing: .08em; color: var(--turf); text-decoration: none; border-bottom: 1px solid var(--bunker); }
.wc-folio-link span { font-size: 1.3em; }

.wc-round-planner {
  position: relative; overflow: hidden; padding: clamp(1.1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--links) 14%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--botanical-celadon) 15%, var(--paper-light)), var(--paper-light) 52%);
}
.wc-round-planner::after {
  content: ""; position: absolute; pointer-events: none; width: 18rem; aspect-ratio: 1; right: -9rem; bottom: -11rem;
  border-radius: 50%; opacity: .14; background: repeating-radial-gradient(circle, transparent 0 7px, var(--links) 7.5px 8px);
}
.wc-round-planner > * { position: relative; z-index: 1; }
.wc-round-planner-head {
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--rule);
}
.wc-round-planner-head h2 { margin-top: .2rem; font-size: var(--step-2); }
.wc-round-controls {
  display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(9rem, .7fr) auto auto; gap: .65rem;
  align-items: end; margin-top: 1rem;
}
.wc-round-controls label { display: grid; gap: .28rem; color: var(--ink-faint); font: .56rem var(--font-ledger); letter-spacing: .08em; text-transform: uppercase; }
.wc-round-controls input, .wc-round-controls button {
  min-height: 2.75rem; border: 1px solid var(--rule); border-radius: 0; font: .72rem var(--font-caps); letter-spacing: .055em;
}
.wc-round-controls input { width: 100%; padding: .55rem .65rem; color: var(--ink); background: var(--paper-glow); }
.wc-round-controls button { padding: .55rem .9rem; color: var(--paper-glow); background: var(--turf); cursor: pointer; }
.wc-round-controls .wc-round-share { color: var(--turf); background: transparent; border-color: var(--turf); }
.wc-round-controls button:hover, .wc-round-controls button:focus-visible { outline: 2px solid color-mix(in srgb, var(--links) 45%, transparent); outline-offset: 2px; }
.wc-round-controls :disabled { cursor: wait; opacity: .58; }
.wc-round-status { display: flex; align-items: center; gap: .5rem; margin: .85rem 0 0; color: var(--ink-soft); font: .62rem var(--font-ledger); letter-spacing: .04em; }
.wc-round-status::before { content: ""; width: .55rem; aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--state-caution); box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-caution) 14%, transparent); }
.wc-round-status[data-state="loading"]::before { animation: wc-live-pulse 1.2s ease-in-out infinite; }
.wc-round-status[data-state="live"]::before { background: var(--state-prime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-prime) 14%, transparent); }
.wc-round-status[data-state="error"]::before { border-radius: 1px; background: var(--state-hold); box-shadow: none; rotate: 45deg; }
@keyframes wc-live-pulse { 50% { opacity: .35; scale: .72; } }
.wc-round-summary { display: grid; grid-template-columns: minmax(12rem, .65fr) minmax(0, 1.35fr); gap: .75rem; margin-top: 1rem; }
.wc-round-summary[hidden] { display: none; }
.wc-round-verdict, .wc-round-metrics { border: 1px solid var(--rule-soft); background: color-mix(in srgb, var(--paper-glow) 84%, transparent); }
.wc-round-verdict { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; align-items: center; padding: 1rem; }
.wc-round-verdict .wc-caps { grid-column: 1 / -1; }
.wc-round-verdict strong { font: 700 3.8rem/.9 var(--font-display); color: var(--turf-2); }
.wc-round-verdict > p:last-child { grid-column: 1 / -1; margin: .35rem 0 0; color: var(--ink-soft); font-size: var(--step--1); }
.wc-round-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.wc-round-metrics div { min-width: 0; padding: .75rem; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.wc-round-metrics div:nth-child(3n) { border-right: 0; }
.wc-round-metrics div:nth-last-child(-n + 3) { border-bottom: 0; }
.wc-round-metrics dt { color: var(--ink-faint); font: .52rem var(--font-ledger); letter-spacing: .08em; text-transform: uppercase; }
.wc-round-metrics dd { margin: .2rem 0 0; color: var(--turf-2); font: 600 var(--step--1) var(--font-display); line-height: 1.25; }
.wc-round-source { margin: .75rem 0 0; color: var(--ink-faint); font: .54rem/1.5 var(--font-ledger); letter-spacing: .025em; }
.wc-round-source a { color: var(--turf); text-decoration-color: var(--bunker); }

.wc-caddy-book {
  scroll-margin-top: 2rem; margin-top: clamp(2rem, 5vw, 4rem) !important;
  padding: clamp(1.1rem, 3vw, 2rem); position: relative; overflow: hidden;
  background:
    linear-gradient(130deg, color-mix(in srgb, var(--botanical-celadon) 18%, transparent), transparent 50%),
    var(--paper-light);
}
.wc-caddy-book::after {
  content: ""; position: absolute; pointer-events: none; width: 22rem; aspect-ratio: 1; right: -10rem; top: -11rem;
  border-radius: 50%; opacity: .2;
  background: repeating-radial-gradient(circle, transparent 0 8px, var(--fairway) 8.5px 9px);
}
.wc-caddy-head, .wc-tee-head {
  position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 1rem;
  padding-bottom: .8rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
.wc-caddy-head h2, .wc-tee-head h3 { font-size: var(--step-2); margin-top: .2rem; }
.wc-caddy-head p, .wc-tee-head p { margin-block: 0; }
.wc-caddy-layout { display: grid; grid-template-columns: minmax(17rem, .78fr) minmax(25rem, 1.22fr); gap: 1rem; }
.wc-player-card, .wc-club-card {
  margin: 0; border: 1px solid var(--rule-soft); padding: 1rem;
  background: color-mix(in srgb, var(--paper-glow) 78%, transparent);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--rule-soft);
}
.wc-player-card-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule-soft); font: var(--step--2) var(--font-ledger); letter-spacing: .1em; text-transform: uppercase; color: var(--turf); }
.wc-carry-control { display: block; margin-top: 1rem; }
.wc-carry-control > span { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); }
.wc-carry-control output { font-family: var(--font-display); font-weight: 700; color: var(--turf-2); }
.wc-carry-control small, .wc-select-control span { display: block; font-size: var(--step--2); color: var(--ink-faint); }
.wc-carry-control input { width: 100%; margin: .55rem 0 .2rem; accent-color: var(--turf); }
.wc-select-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7rem; margin-top: 1rem; }
.wc-select-control select {
  appearance: none; min-width: 8rem; padding: .48rem 2rem .48rem .7rem;
  border: 1px solid var(--rule); border-radius: 0; color: var(--ink); background:
    linear-gradient(45deg, transparent 50%, var(--turf) 50%) calc(100% - 13px) 50%/5px 5px no-repeat,
    linear-gradient(135deg, var(--turf) 50%, transparent 50%) calc(100% - 8px) 50%/5px 5px no-repeat,
    var(--paper-light); font-family: var(--font-caps);
}
.wc-caddy-summary { margin: 1rem 0 0; padding: .75rem; border-left: 3px solid var(--bunker); color: var(--ink-soft); background: color-mix(in srgb, var(--bunker-light) 13%, transparent); }
.wc-club-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wc-club-table th { font: var(--step--2) var(--font-ledger); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.wc-club-table th, .wc-club-table td { text-align: right; padding: .68rem .45rem; border-bottom: 1px solid var(--rule-soft); }
.wc-club-table th:first-child, .wc-club-table td:first-child { text-align: left; }
.wc-club-table [data-club] { font-family: var(--font-caps); color: var(--turf-2); text-transform: capitalize; }
.wc-ground-note { display: flex; gap: .8rem; align-items: flex-start; padding-top: .8rem; color: var(--ink-soft); }
.wc-ground-note > span { font: 2.2rem/.8 var(--font-display); color: var(--botanical-sage); }
.wc-ground-note p { margin: 0; }
.wc-tee-head { margin-top: 1.5rem; align-items: center; }
.wc-tee-head > p { max-width: 42ch; text-align: right; color: var(--ink-soft); }
.wc-tee-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.wc-tee-card {
  --tee-accent: var(--turf); position: relative; padding: 1rem; min-height: 13rem;
  border: 1px solid color-mix(in srgb, var(--tee-accent) 52%, var(--rule));
  background: linear-gradient(160deg, color-mix(in srgb, var(--tee-accent) 14%, var(--paper-light)), var(--paper-light) 58%);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--rule-soft);
}
.wc-tee-card.is-recommended { border-width: 2px; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--tee-accent), 0 8px 22px color-mix(in srgb, var(--tee-accent) 17%, transparent); transform: translateY(-2px); }
.wc-tee-mark { display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border: 3px double var(--tee-accent); border-radius: 50%; font: 700 var(--step-1) var(--font-display); color: var(--tee-accent); }
.wc-tee-card strong { display: block; margin-top: .45rem; font: 700 var(--step-2) var(--font-display); color: var(--turf-2); }
.wc-tee-card > span, .wc-tee-card > small { display: block; color: var(--ink-faint); font-size: var(--step--2); }
.wc-tee-stamp { position: absolute; inset: auto .75rem .7rem; padding-top: .4rem; border-top: 1px solid var(--rule-soft); font: var(--step--2) var(--font-ledger); letter-spacing: .08em; text-transform: uppercase; color: var(--tee-accent); }
.wc-caddy-disclaimer { margin: 1rem 0 0; font-size: var(--step--2); color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   Playability state chips
   Status colour is NEVER the only signal: every chip carries a glyph and a
   word. That is also what licenses the amber/crimson adjacency in the ramp.
   -------------------------------------------------------------------------- */

.wc-state {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-caps); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem .24rem;
  border: 1px solid currentColor; border-radius: 2px;
  background: color-mix(in srgb, currentColor 8%, var(--paper-light));
  white-space: nowrap;
}
.wc-state::before { font-family: var(--font-body); font-size: 1em; line-height: 1; }
.wc-state[data-state="prime"]   { color: var(--state-prime); }
.wc-state[data-state="prime"]::before   { content: "●"; }
.wc-state[data-state="caution"] { color: var(--state-caution); }
.wc-state[data-state="caution"]::before { content: "◐"; }
.wc-state[data-state="rough"]   { color: var(--state-rough); }
.wc-state[data-state="rough"]::before   { content: "◆"; }
.wc-state[data-state="hold"]    { color: var(--state-hold); }
.wc-state[data-state="hold"]::before    { content: "✕"; }

/* --------------------------------------------------------------------------
   Ledger — the tabular voice of the site
   -------------------------------------------------------------------------- */

.wc-ledger { width: 100%; min-width: 700px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wc-ledger caption {
  text-align: left; font-family: var(--font-caps); text-transform: uppercase;
  letter-spacing: .12em; font-size: var(--step--2); color: var(--flag);
  padding-bottom: .55rem;
}
.wc-ledger th, .wc-ledger td {
  padding: .42rem .6rem; text-align: right; border-bottom: 1px solid var(--rule-soft);
  font-size: var(--step--1);
}
.wc-ledger th {
  font-family: var(--font-ledger); font-weight: 400; font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}
.wc-ledger th:first-child, .wc-ledger td:first-child { text-align: left; }
.wc-ledger tbody tr:hover { background: color-mix(in srgb, var(--fairway) 7%, transparent); }
.wc-ledger td.num { font-family: var(--font-ledger); }

/* --------------------------------------------------------------------------
   Botanical plate cards
   -------------------------------------------------------------------------- */

.wc-plate {
  --plate-accent: var(--botanical-sage);
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--plate-accent) 16%, var(--paper-light)), var(--paper-light) 32%),
    var(--paper-light);
  border: 1px solid color-mix(in srgb, var(--plate-accent) 48%, var(--rule));
  box-shadow:
    inset 0 0 0 3px var(--paper),
    inset 0 0 0 4px color-mix(in srgb, var(--plate-accent) 28%, var(--rule-soft)),
    0 9px 24px color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--turf);
  padding: .65rem;
}
.wc-plate::before {
  content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--plate-accent), var(--bunker), var(--plate-accent));
  opacity: .75;
}
.wc-plate svg,
.wc-plate img { display: block; width: 100%; height: auto; }

/* Plate internals. Present here so an inlined plate inherits the page's ink;
   the standalone asset files carry an equivalent block of their own for the
   <img> case, where custom properties cannot reach. */
.wc-plate-art { stroke-linecap: round; stroke-linejoin: round; }
.wc-plate-latin  { font: italic 12px Georgia, serif; fill: currentColor; opacity: .75; stroke: none; }
.wc-plate-name   { font-family: var(--font-caps); font-weight: 600; fill: currentColor; stroke: none; }
.wc-plate-family { font-family: var(--font-ledger); fill: currentColor; opacity: .6; stroke: none; letter-spacing: .16em; }
.wc-plate-rule   { stroke: currentColor; stroke-width: .6; opacity: .45; }

/* Lathe field classes, for a backdrop inlined rather than loaded as an image. */
.lathe-a { stroke: var(--links); }
.lathe-b { stroke: var(--fairway); }
.wc-plate-note {
  font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5;
  padding: .5rem .75rem 0; border-top: 1px solid var(--rule-soft); margin-top: .4rem;
}
.wc-plate-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(285px, 100%), 1fr));
}

.wc-course-research {
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--rule);
  background: linear-gradient(145deg, color-mix(in srgb, var(--botanical-celadon) 10%, var(--paper-light)), var(--paper-light));
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--rule-soft);
}
.wc-course-research ol {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem;
  margin: 0; padding: 0; list-style: none; counter-reset: research-source;
}
.wc-course-research li {
  counter-increment: research-source; position: relative; min-width: 0;
  padding: .65rem .75rem .65rem 2.4rem; border-top: 1px solid var(--rule-soft);
}
.wc-course-research li::before {
  content: counter(research-source, decimal-leading-zero); position: absolute; left: .25rem; top: .72rem;
  color: var(--bunker-2); font: .58rem var(--font-ledger); letter-spacing: .06em;
}
.wc-course-research a { color: var(--turf); font: 600 var(--step--1) var(--font-display); text-decoration-color: var(--bunker); }
.wc-course-research span, .wc-course-research small { display: block; margin-top: .16rem; color: var(--ink-faint); line-height: 1.42; }
.wc-course-research span { font-size: .68rem; }
.wc-course-research small { font: .52rem var(--font-ledger); letter-spacing: .035em; }

.wc-botanical-showcase {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 2vw, 1.4rem); margin: 1.6rem 0 2.2rem;
}
.wc-study-card {
  margin: 0; min-height: 29rem; position: relative; overflow: hidden;
  border: 1px solid var(--rule);
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--botanical-celadon) 30%, transparent), transparent 58%),
    var(--paper-light);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--rule-soft), 0 12px 30px color-mix(in srgb, var(--ink) 8%, transparent);
}
.wc-study-card img {
  width: 100%; height: 25rem; display: block; object-fit: contain;
  margin-top: -1.3rem; filter: saturate(.9) contrast(.98);
}
.wc-study-card figcaption {
  position: absolute; inset: auto 1rem .8rem;
  padding-top: .65rem; border-top: 1px solid color-mix(in srgb, var(--bunker-2) 48%, transparent);
  font-family: var(--font-caps); text-transform: uppercase; letter-spacing: .1em;
  font-size: var(--step--2); color: var(--turf-2);
}

/* --------------------------------------------------------------------------
   Hole strip — 18 holes as an engraved run
   -------------------------------------------------------------------------- */

.wc-holes {
  display: grid; grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 2px; border: 1px solid var(--rule);
}
.wc-hole {
  display: grid; gap: .1rem; padding: .45rem .2rem; text-align: center;
  background: var(--paper-light);
  border-right: 1px solid var(--rule-soft);
}
.wc-hole:last-child { border-right: 0; }
.wc-hole b { font-family: var(--font-ledger); font-size: var(--step--2); color: var(--ink-faint); font-weight: 400; }
.wc-hole span { font-family: var(--font-display); font-size: var(--step--1); color: var(--ink); }
.wc-hole i {
  display: block; height: 3px; border-radius: 2px; margin-top: .25rem;
  background: currentColor;
}
@media (max-width: 780px) {
  .wc-holes { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

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

.wc-wrap { max-width: 1180px; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3.5rem) 1.25rem; }
.wc-narrow { max-width: 720px; }
.wc-stack > * + * { margin-top: 1.4rem; }
.wc-grid-2 { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.wc-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--rule-soft);
}
.wc-section-head::after {
  content: ""; flex-basis: 4rem; height: 2px; order: 3;
  background: linear-gradient(90deg, var(--bunker), var(--botanical-rose));
}

@media (max-width: 860px) {
  .wc-course-hero { grid-template-columns: auto 1fr; }
  .wc-course-hero .wc-field-study { display: none; }
  .wc-design-hero { grid-template-columns: 1fr; min-height: 0; }
  .wc-design-hero .wc-field-study { display: none; }
  .wc-atlas-frame { grid-template-columns: 1fr; }
  .wc-atlas-map { border-right: 0; border-bottom: 1px solid var(--rule); }
  .wc-atlas-details { min-height: 22rem; }
  .wc-atlas-detail { display: grid; grid-template-columns: minmax(9rem, .4fr) minmax(0, 1fr); grid-template-rows: auto; gap: 0 1.2rem; align-content: center; }
  .wc-atlas-detail-art { grid-row: 1 / 7; height: 18rem; margin: 0; border: 0; border-right: 2px solid var(--state-accent); }
  .wc-atlas-detail-art img { height: 22rem; transform: translateY(-1.6rem); }
  .wc-atlas-detail > *:not(.wc-atlas-detail-art) { grid-column: 2; }
  .wc-atlas-detail .wc-caps { margin-top: 0; }
  .wc-home-tools { grid-template-columns: 1fr 1fr; }
  .wc-home-tools > div { grid-column: 1 / -1; border-bottom: 1px solid var(--rule); }
  .wc-home-tools > a:first-of-type { border-left: 0; }
  .wc-state-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wc-state-library-heading { grid-template-columns: minmax(0, 1fr) minmax(13rem, 20rem); }
  .wc-library-botanical-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wc-botanical-showcase { grid-template-columns: 1fr; }
  .wc-study-card { min-height: 25rem; }
  .wc-study-card img { height: 22rem; }
  .wc-golf-features { grid-template-columns: 1fr; }
  .wc-golf-feature { min-height: 15rem; }
  .wc-directory-hero-copy { width: 100%; padding-top: 2rem; }
  .wc-directory-botanical { display: none; }
  .wc-course-card { grid-template-columns: 1fr; }
  .wc-course-card-art { min-height: 24rem; border-right: 0; border-bottom: 1px solid var(--rule); }
  .wc-round-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-round-summary { grid-template-columns: 1fr; }
  .wc-caddy-layout { grid-template-columns: 1fr; }
  .wc-tee-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .wc-course-hero { grid-template-columns: 1fr; justify-items: start; }
  .wc-seal { width: 8.5rem; }
  .wc-scorecard-head { align-items: flex-start; }
  .wc-home-hero-layout { grid-template-columns: 1fr; }
  .wc-home-emblem { display: none; }
  .wc-home-hero h1 { font-size: var(--step-3); }
  .wc-home-actions > a:not(.wc-folio-link) { display: none; }
  .wc-map-label, .wc-map-leader, .wc-map-compass { display: none; }
  .wc-map-botanical { opacity: .06; }
  .wc-map-key { left: 1rem; bottom: .35rem; font-size: .43rem; }
  .wc-atlas-details { min-height: 0; }
  .wc-atlas-detail { display: block; min-height: 24rem; }
  .wc-atlas-detail-art { height: 8rem; margin: -1rem -1rem .7rem; border-right: 0; border-bottom: 2px solid var(--state-accent); }
  .wc-atlas-detail-art img { height: 13rem; transform: translateY(-2.2rem); }
  .wc-atlas-selectors { grid-template-columns: 1fr; }
  .wc-atlas-select { border-right: 0; border-bottom: 1px solid var(--rule); }
  .wc-atlas-select:last-child { border-bottom: 0; }
  .wc-map-credit { text-align: left; }
  .wc-home-tools { grid-template-columns: 1fr; }
  .wc-home-tools > a { border-left: 0; border-top: 1px solid var(--rule); }
  .wc-home-course-rail { grid-template-columns: 1fr; }
  .wc-home-course { grid-template-columns: 6.4rem 1fr; }
  .wc-home-course img { width: 6.4rem; }
  .wc-state-directory { grid-template-columns: 1fr; }
  .wc-state-library-hero { min-height: 0; }
  .wc-state-library-heading, .wc-library-course-heading { grid-template-columns: 1fr; }
  .wc-state-library-heading h1, .wc-library-course-heading h1 { font-size: var(--step-3); }
  .wc-state-flora-preview, .wc-library-coordinate-seal { display: none; }
  .wc-library-search { grid-template-columns: 1fr; }
  .wc-library-list { grid-template-columns: 1fr; }
  .wc-library-row > a { grid-template-columns: 2.2rem minmax(0, 1fr) 1rem; }
  .wc-library-row-status { display: none; }
  .wc-library-botanical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-course-research ol { grid-template-columns: 1fr; }
  .wc-library-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-course-facts { grid-template-columns: 1fr; }
  .wc-course-facts > div { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .wc-course-facts > div:last-child { border-bottom: 0; }
  .wc-round-planner-head { align-items: flex-start; flex-direction: column; }
  .wc-round-controls { grid-template-columns: 1fr; }
  .wc-round-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-round-metrics div:nth-child(3n) { border-right: 1px solid var(--rule-soft); }
  .wc-round-metrics div:nth-child(2n) { border-right: 0; }
  .wc-round-metrics div:nth-last-child(-n + 3) { border-bottom: 1px solid var(--rule-soft); }
  .wc-round-metrics div:nth-last-child(-n + 2) { border-bottom: 0; }
  .wc-caddy-head, .wc-tee-head { align-items: flex-start; flex-direction: column; }
  .wc-tee-head > p { text-align: left; }
  .wc-tee-grid { grid-template-columns: 1fr; }
  .wc-tee-card { min-height: 11rem; }
}

.wc-footer {
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--turf-tint) 40%, var(--paper));
  margin-top: 3rem;
}
.wc-footer .wc-wrap { padding-block: 2rem; }
.wc-footer-links { display: flex; gap: .6rem 1.2rem; flex-wrap: wrap; font: var(--step--2) var(--font-caps); letter-spacing: .08em; text-transform: uppercase; }
.wc-footer-links a { color: var(--turf); text-decoration-color: var(--bunker); }

/* --------------------------------------------------------------------------
   Charts
   Recessive grid, thin marks, 4px rounded data-ends, 2px surface gaps.
   -------------------------------------------------------------------------- */

.wc-chart { position: relative; }
.wc-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.wc-chart .grid   { stroke: var(--chart-grid); stroke-width: 1; }
.wc-chart .axis   { stroke: var(--chart-axis); stroke-width: 1; }
.wc-chart .label  { fill: var(--chart-label); font-family: var(--font-ledger); font-size: 10px; letter-spacing: .08em; }
.wc-chart .muted  { fill: var(--chart-muted); font-family: var(--font-ledger); font-size: 9px; letter-spacing: .1em; }
.wc-chart .series { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wc-chart .bar    { rx: 4; }
.wc-chart .bar-sep { stroke: var(--chart-surface); stroke-width: 2; }
.wc-chart .wc-wind-arrow { fill: var(--paper-glow); stroke: var(--turf-2); stroke-width: .45; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--ink) 34%, transparent)); }

.wc-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--step--2); color: var(--ink-soft); font-family: var(--font-ledger); letter-spacing: .06em; }
.wc-legend span { display: inline-flex; align-items: center; gap: .38rem; }
.wc-legend i { width: 12px; height: 3px; border-radius: 2px; background: currentColor; }

/* Wide figures may scroll themselves; the page body never scrolls sideways. */
.wc-scroll-x { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Print — a scorecard should print like a scorecard
   -------------------------------------------------------------------------- */

@media print {
  .wc-backdrop, .wc-watermark, .wc-nav, .wc-field-study { display: none !important; }
  body { background: #fff; }
  .wc-scorecard { box-shadow: none; border: 1.5px solid #000; }
}