/* Looper website. One file, no build step, no web fonts.
   The look follows the app's default "Clubhouse" theme (ios/Looper/Theme/RoundTheme.swift, RoundStyle.clubhouse and
   its on-green variant): three materials taken from the app icons. Club green for the header, the hero and the bands
   (indoors); cream card stock for everything you read (on the course); brass on green only. Names and numbers in the
   system serif (New York on Apple devices), labels in small tracked capitals, one action per screen, and the hole drawn
   in green ink with the caddie's line in claret. Dark mode takes the page indoors: cream on a deeper green. */

:root {
  color-scheme: light dark;

  /* The materials (fixed in both color schemes) */
  --green: #0e3b2e;
  --green-deep: #0a2c22;
  --stock: #f4efe3;
  --stock-light: #fbf8f0;
  --brass: #c8a75a;
  --claret: #a32a1e;
  --moss: #4a5a50; /* secondary ink on stock, 6:1 */

  --hair: 1px;
  --radius: 6px;
  --gutter: 16px;
  --measure: 40rem;

  /* Names, numbers and headings: the system serif, like the app's numerals (New York). No web fonts. */
  --display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* On stock: green ink, a green action with a brass keyline. The app-screen card (.screen) is stock in both schemes. */
:root,
.screen {
  --paper: var(--stock);
  --panel: var(--stock-light);
  --ink: var(--green);
  --ink-2: var(--moss);
  --line: rgba(14, 59, 46, 0.35); /* the second, lighter line of a double rule */
  --wash: rgba(14, 59, 46, 0.08);
  --action: var(--green);
  --action-ink: var(--stock);
  --keyline: var(--brass);
  --label: var(--moss);
  --call: var(--claret);
  --on-ink: var(--stock); /* text on an ink block */
  --focus: var(--claret);

  /* The drawn hole (always on stock) */
  --h-paper: #f4efe3;
  --h-trees: #e7e7d4;
  --h-trees-line: rgba(14, 59, 46, 0.3);
  --h-fairway: #d3dfbf;
  --h-green: #a8c98a;
  --h-sand: #fbf8f0;
  --h-dot: rgba(14, 59, 46, 0.55);
  --h-water: #bfd3d9;
  --h-tee: #fbf8f0;
  --h-line: #0e3b2e;
  --h-call: #a32a1e;
  --h-land: rgba(163, 42, 30, 0.14);

  /* The phone frame around app screenshots */
  --bezel: #111111;
  --bezel-edge: #111111;
}

/* On the green: cream type, brass labels and rules, and the action is a brass plate. */
.site-header,
.hero,
.band,
.strip,
.callout {
  --paper: var(--green);
  --panel: var(--green);
  --ink: var(--stock);
  --ink-2: rgba(244, 239, 227, 0.84);
  --line: rgba(200, 167, 90, 0.55);
  --wash: rgba(244, 239, 227, 0.12);
  --action: var(--brass);
  --action-ink: var(--green);
  --keyline: rgba(14, 59, 46, 0.5);
  --label: var(--brass);
  --call: var(--brass);
  --on-ink: var(--green);
  --focus: var(--brass);
  background: var(--green);
  color: var(--stock);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: var(--green-deep);
    --panel: var(--green);
    --ink: var(--stock);
    --ink-2: rgba(244, 239, 227, 0.8);
    --line: rgba(200, 167, 90, 0.55);
    --wash: rgba(244, 239, 227, 0.12);
    --action: var(--brass);
    --action-ink: var(--green);
    --keyline: rgba(14, 59, 46, 0.5);
    --label: var(--brass);
    --call: #f0907f;
    --on-ink: var(--green);
    --focus: var(--brass);

    --bezel: #050505;
    --bezel-edge: #4a4944;
  }

  /* Indoors every roundel is ringed in brass. */
  .holeno {
    box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 5px var(--stock), inset 0 0 0 6px var(--brass);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

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

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  background: var(--wash);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Read by screen readers, not shown. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--brass);
  color: var(--green);
  font-weight: 700;
}

.skip:focus {
  top: 8px;
}

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Names and headings: the serif, in the case they are written in. */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

/* Small tracked capitals: the label over a number, the line under a name. */
.strip .from,
.num .label,
.swing,
.tags li,
.kicker {
  font-family: var(--text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Header: the roundel, the name and two links on the club green, over a brass hairline. */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: var(--hair) solid var(--brass);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
}

.brand:hover {
  background: none;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(200, 167, 90, 0.6);
}

.nav {
  display: flex;
  gap: 4px;
}

.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 1rem;
  text-decoration: none;
}

.nav a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.nav a:hover {
  background: var(--wash);
}

main {
  display: block;
}

/* Home: hero, on the green edge to edge (the shadow paints the band; the clip keeps it to the hero's own height). */
.hero {
  display: grid;
  gap: 32px;
  padding: 36px 0 44px;
  box-shadow: 0 0 0 100vmax var(--green);
  clip-path: inset(0 -100vmax);
}

.hero h1 {
  font-size: clamp(2.7rem, 12vw, 4.2rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

/* "the call.": the two words that matter, in brass. */
.hero h1 .mark {
  color: var(--brass);
  font-style: italic;
}

/* The trust line above the headline: a brass label. */
.kicker {
  margin: 0 0 16px;
  color: var(--label);
  font-size: 0.75rem;
  line-height: 1.5;
  text-wrap: balance;
}

.lede {
  margin: 22px 0 0;
  max-width: 32rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.tags li {
  color: var(--label);
  font-size: 0.72rem;
  line-height: 1.6;
}

/* The one action: a plate with a fine line engraved just inside its edge. Brass on the green, green on the stock. */
.button,
.hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border: 0;
  border-radius: var(--radius);
  background: var(--action);
  box-shadow: inset 0 0 0 3px var(--action), inset 0 0 0 4px var(--keyline);
  color: var(--action-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.button {
  margin-top: 28px;
  padding: 0 32px;
}

.button:hover {
  background: var(--action);
  filter: brightness(1.08);
}

/* Two actions side by side, wrapping on a phone. The second is an outline so the App Store link stays the one plate. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.actions .button {
  margin-top: 0;
  padding: 0 24px;
}

.button.button-alt {
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
  color: inherit;
}

.button.button-alt:hover {
  background: transparent;
}

/* The example call: the round's green header band, the drawn hole, the call panel. A card of stock on the green. */
.call {
  margin: 0;
  max-width: 420px;
  width: 100%;
  justify-self: center;
}

/* The hero's app screenshot: a phone frame no wider than 300 px, centred in the column. */
.call .phone {
  max-width: 300px;
  margin: 0 auto;
}

.screen {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--brass);
}

.strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

/* The roundel from the caddie bib: the hole number and the step numbers. Brass ring on the green, green on stock. */
.holeno {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--stock);
  box-shadow: inset 0 0 0 2px var(--green), inset 0 0 0 5px var(--stock), inset 0 0 0 6px var(--green);
  color: var(--green);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.strip .holeno,
.band .holeno {
  box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 5px var(--stock), inset 0 0 0 6px var(--brass);
}

.strip .par {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.15;
}

.strip .from {
  display: block;
  margin-top: 2px;
  color: var(--label);
  font-size: 0.62rem;
}

.hole {
  width: 100%;
  height: auto;
  background: var(--h-paper);
}

.h-trees { fill: var(--h-trees); stroke: var(--h-trees-line); stroke-width: 0.6; stroke-dasharray: 2 2; }
.h-fw { fill: var(--h-fairway); stroke: var(--h-line); stroke-width: 1; }
.h-water { fill: var(--h-water); stroke: var(--h-line); stroke-width: 1.2; }
.h-sand { fill: var(--h-sand); stroke: var(--h-line); stroke-width: 1.2; }
.h-stip { fill: url(#sand); }
.h-dot { fill: var(--h-dot); }
.h-tee { fill: var(--h-tee); stroke: var(--h-line); stroke-width: 1; }
.h-green { fill: var(--h-green); stroke: var(--h-line); stroke-width: 1.5; }
.h-pin { stroke: var(--h-line); stroke-width: 1.5; }
.h-flag { fill: var(--h-call); }
.h-call { fill: none; stroke: var(--h-call); stroke-width: 2.6; stroke-linecap: round; }
.h-leave { fill: none; stroke: var(--h-call); stroke-width: 1.8; stroke-dasharray: 6 5; stroke-linecap: round; opacity: 0.85; }
.h-land { fill: var(--h-land); stroke: var(--h-call); stroke-width: 2.2; }
.h-x { stroke: var(--h-call); stroke-width: 2; stroke-linecap: round; }
.h-ball { fill: var(--h-line); stroke: var(--h-paper); stroke-width: 2; }
.h-note {
  fill: var(--h-call);
  stroke: var(--h-paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-family: var(--text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.panel {
  padding: 14px 16px 16px;
  border-top: var(--hair) solid var(--ink);
}

.hero-call {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.club {
  font-family: var(--display);
  font-weight: 600;
  font-size: 6rem;
  line-height: 0.8;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
}

.nums {
  flex: 1;
  min-width: 0;
}

.num {
  display: block;
}

.num + .num {
  margin-top: 6px;
  padding-top: 6px;
  border-top: var(--hair) solid var(--line);
}

.num .label {
  display: block;
  color: var(--label);
  font-size: 0.62rem;
  line-height: 1.4;
}

.num .value {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.num .from {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* The target in the serif, under the card's double rule; the swing after it as a small claret capital. */
.target {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 14px 0 0;
  padding-top: 11px;
  border-top: 3px double var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
}

.swing {
  order: 2;
  color: var(--call);
  font-size: 0.62rem;
}

.why {
  margin: 6px 0 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.thought {
  margin: 8px 0 0;
  color: var(--call);
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
}

.hit {
  display: flex;
  margin-top: 14px;
}

.call figcaption {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Sections, each under a double hairline. */
.section {
  padding: 40px 0;
  border-top: 3px double var(--ink);
}

.section h2 {
  font-size: clamp(1.9rem, 7.5vw, 2.8rem);
  margin-bottom: 18px;
}

.section > p,
.section .copy {
  max-width: var(--measure);
}

.steps {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}

.step h3 {
  font-size: 1.4rem;
  margin: 8px 0 6px;
}

.step p {
  margin: 0;
  color: var(--ink-2);
}

.section-lede {
  max-width: var(--measure);
  margin: -6px 0 24px;
  font-size: 1.15rem;
  color: var(--ink-2);
}

/* Real app screenshots in a phone frame drawn in CSS. Phones: the phone beside its words. Wide screens: three across. */
.shots {
  display: grid;
  gap: 28px;
}

.shot {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0;
}

.shot h3 {
  font-size: 1.35rem;
  margin: 0 0 6px;
}

.shot p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* The frame: 3% bezel, corners matched to an iPhone screen (radii in % of width / % of height). */
.phone {
  position: relative;
  padding: 3%;
  background: var(--bezel);
  border-radius: 15.8% / 7.5%;
  box-shadow: 0 0 0 1px var(--bezel-edge);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 13.7% / 6.3%;
  background: var(--h-paper);
}

/* The Dynamic Island, over the status bar's empty middle. */
.phone::after {
  content: "";
  position: absolute;
  top: 2.65%;
  left: 50%;
  width: 29.4%;
  aspect-ratio: 126 / 37;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

/* Questions on the home page: one row per question, each a link into faq.html. */
.qlinks {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hair) solid var(--ink);
}

.qlinks a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 0;
  border-bottom: var(--hair) solid var(--line);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.qlinks a::after {
  content: "→";
  margin-left: auto;
  font-family: var(--text);
}

/* faq.html: questions as section headings, sized down from the long-form h2. */
.faq h2 {
  font-size: 1.45rem;
  scroll-margin-top: 16px;
}

.boxed {
  padding: 14px 16px;
  border: var(--hair) solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
}

/* caddie.html: each scene is a pair, the yardage beside the caddie's call (a small card of stock, like the home page's).
   Stacked on phones, side by side from 640 px. */
.caddie h1 {
  margin-bottom: 22px;
}

.scene {
  margin: 28px 0 0;
}

.scene h3 {
  margin-top: 0;
}

.says {
  display: grid;
  gap: 10px;
  margin: 0 0 1em;
}

.said {
  padding: 12px 16px 14px;
  border-radius: var(--radius);
}

.said p {
  margin: 0;
}

.said-number {
  border: var(--hair) solid var(--line);
}

.said-label {
  color: var(--label);
  font-family: var(--text);
  font-weight: 600;
  font-size: 0.62rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.said-value,
.said-club {
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}

.said-call .said-label {
  color: var(--call);
}

.said-call .why {
  margin-top: 6px;
}

@media (min-width: 640px) {
  .says {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: stretch;
  }
}

/* A band of the club green across the page (the invite). */
.band {
  border-top: var(--hair) solid var(--brass);
  border-bottom: var(--hair) solid var(--brass);
}

.band .section {
  border-top: 0;
}

.big {
  font-size: 1.3rem;
  line-height: 1.45;
}

/* Long-form pages (privacy, support) */
.page {
  padding: 32px 0 44px;
}

.page h1 {
  font-size: clamp(2.5rem, 11vw, 4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.meta {
  margin: 14px 0 24px;
  font-size: 1rem;
  color: var(--ink-2);
}

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

.prose h2 {
  margin: 36px 0 12px;
  padding-top: 14px;
  border-top: 3px double var(--ink);
  font-size: 1.7rem;
}

.prose h3 {
  margin: 26px 0 8px;
  font-size: 1.3rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.prose li {
  margin-bottom: 0.55em;
}

.prose li::marker {
  font-weight: 700;
}

.prose strong {
  font-weight: 700;
}

.summary {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: var(--hair) solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
}

.summary h2 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 1.3rem;
}

.summary ul {
  margin: 0;
}

/* The one thing to read on a page: a block of the club green. */
.callout {
  margin: 0 0 1em;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-weight: 600;
}

.email {
  font-weight: 700;
}

.path {
  font-weight: 600;
}

/* Request an invite (join.html): a plain HTML form, big targets, hairline boxes. */
.join-intro {
  margin-top: 20px;
}

.join-intro ul {
  margin-bottom: 24px;
}

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

.field {
  margin: 0 0 22px;
}

fieldset.field {
  min-width: 0;
  padding: 0;
  border: 0;
}

/* float + full width: the only reliable way to give a legend a margin below it. */
fieldset.field > legend {
  float: left;
  width: 100%;
  padding: 0;
}

fieldset.field > legend + * {
  clear: both;
}

.field > label,
fieldset.field > legend {
  display: block;
  margin-bottom: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
}

/* The headline question (the course to map next): bigger, under a double rule. */
.field-lead {
  padding-top: 14px;
  border-top: 3px double var(--ink);
}

.field-lead > label {
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  line-height: 1.1;
}

.opt {
  margin-left: 0;
  font-family: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.hint {
  margin: -4px 0 8px;
  font-size: 1rem;
  color: var(--ink-2);
}

.join input[type="text"],
.join input[type="email"],
.join textarea {
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 12px 14px;
  border: var(--hair) solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem; /* 16 px or more: iOS doesn't zoom into the field */
  -webkit-appearance: none;
  appearance: none;
}

.join textarea {
  min-height: 128px;
  line-height: 1.4;
  resize: vertical;
}

.join input:focus-visible,
.join textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Each choice is one big target; two side by side. */
.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.field label.check {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  margin: 0;
  padding: 10px 14px;
  border: var(--hair) solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.1;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  accent-color: var(--green);
}

/* The picked choice turns into a block of the club green (browsers without :has() still show the radio itself). */
.field label.check:has(input:checked) {
  background: var(--green);
  border-color: var(--brass);
  color: var(--stock);
}

.field label.check:has(input:checked) input {
  accent-color: var(--brass);
}

.field label.check:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.fine {
  margin: 4px 0 0;
  font-size: 1rem;
  color: var(--ink-2);
}

.fine a {
  color: var(--ink);
}

button.button {
  width: 100%;
  margin-top: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Off screen and out of the tab order (the honeypot); people never see it. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A failed request comes back as join.html?error=<code>#error-<code>; only the targeted message shows. */
.form-error {
  display: none;
  max-width: var(--measure);
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 2px solid var(--call);
  border-radius: var(--radius);
  background: var(--panel);
  font-weight: 600;
  scroll-margin-top: 16px;
}

.form-error:target {
  display: block;
}

.form-error strong {
  display: block;
  color: var(--call);
  font-weight: 700;
}

.thanks-lede {
  margin-top: 20px;
}

/* Footer */
.site-footer .wrap {
  padding-top: 18px;
  padding-bottom: 36px;
  border-top: 3px double var(--ink);
  font-size: 1rem;
  color: var(--ink-2);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 10px;
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
}

.site-footer p {
  margin: 0 0 6px;
}

/* 404: the number as a big serif numeral, no roundel. */
.lost {
  display: grid;
  gap: 18px;
  padding: 40px 0 56px;
}

.lost .holeno {
  width: auto;
  height: auto;
  padding: 0;
  justify-self: start;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ink);
  font-size: clamp(5rem, 30vw, 9rem);
  line-height: 0.9;
}

.lost h1 {
  font-size: clamp(2.2rem, 9vw, 3.6rem);
}

/* Very narrow phones (320 px): keep the header on one line. */
@media (max-width: 369px) {
  .brand {
    gap: 8px;
    letter-spacing: 0.2em;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .nav a {
    padding: 0 6px;
  }

  .club {
    font-size: 5rem;
  }
}

/* Wider screens: text beside the drawing. */
@media (min-width: 820px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 56px;
    padding: 56px 0 64px;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 5.8vw, 5rem);
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
  }

  .shots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .shot {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 18px;
  }

  .phone {
    width: 100%;
    max-width: 280px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media print {
  .site-header .nav,
  .skip,
  .band {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}