/*
 * Fonts are linked from the document head, not imported here.
 *
 * An @import inside a stylesheet cannot be discovered until this file has
 * been downloaded and parsed, so it serialises two round trips before a
 * single glyph is requested. A <link> in the head starts both at once.
 */

/* ==========================================================================
   CRAWFORD HILLS
   More Than Golf.

   Clever Fox Creative

   The organising idea: the homepage travels from golden hour into evening.
   Golf by day, sports bar by night. The palette, the imagery and the light
   all move with it, so "More Than Golf" is something the page does rather
   than something it claims.

   Phases are driven by [data-phase] on <body>, set by IntersectionObserver
   in main.js. Everything below reads from the phase tokens, so no component
   needs to know where it sits in the story.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
    /* Brand constants. These never change with phase. */
    --fairway:        #0F3D2E;
    --fairway-deep:   #072019;
    --fairway-lit:    #1B5E43;
    --amber:          #E0A33C;
    --amber-deep:     #B87C1E;
    /* Small amber text needs a darker mix to clear 4.5:1 on cream.
       --amber stays the brand color for fills, rules and dark surfaces. */
    --amber-text:     #8A5A00;
    --amber-glow:     #F5C468;
    --ember:          #D2592B;
    --cream:          #F8F5EE;
    --bone:           #ECE5D8;
    --night:          #0A0D0C;
    --night-soft:     #131817;
    --char:           #1C2321;

    /* Phase tokens. Overridden per phase below. */
    --bg:             var(--cream);
    --bg-alt:         var(--bone);
    --surface:        #FFFFFF;
    --ink:            #131A17;
    --ink-soft:       #55635C;
    --ink-faint:      #58655D;
    --rule:           #DED7C8;
    --rule-strong:    #C9C0AD;
    --accent:         var(--amber-text);
    --on-accent:      #FFFFFF;

    /* Type */
    /*
     * Fraunces, not a broadsheet serif.
     *
     * Instrument Serif is a newspaper face: high contrast, tight, vertical.
     * It made the site read like a magazine about a golf course rather than
     * the golf course, and it is the most-used display serif in this kind of
     * design right now. Fraunces is warmer and heavier, with enough of a
     * mid-century American accent to sit next to a course that opened in
     * 1948 and a sweatshirt that says SEE YOU AT THE HILLS.
     *
     * SOFT rounds the terminals; WONK turns on the alternate shapes that
     * give the italic its swing. Both are what keep it from reading generic.
     */
    --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    /* Metrics travel with the family. A serif set at another serif's
       tracking looks wrong for reasons nobody can name. */
    --disp-track: -.018em;
    --disp-line: .99;
    --disp-weight: 600;
    --f-ui:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --f-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Rhythm */
    --gutter:     clamp(20px, 5vw, 64px);
    --measure:    1280px;
    --measure-nr: 760px;

    --r-sm: 8px;
    --r:    14px;
    --r-lg: 22px;
    --r-xl: 32px;

    --tap: 48px;

    /* Motion. One curve for everything so the site feels like one hand made it. */
    --ease: cubic-bezier(.22, .8, .32, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .18s;
    --t:      .34s;
    --t-slow: .7s;

    --shadow-sm: 0 1px 2px rgba(7, 32, 25, .05);
    --shadow:    0 1px 1px rgba(7, 32, 25, .04), 0 8px 24px -10px rgba(7, 32, 25, .18);
    --shadow-lg: 0 2px 4px rgba(7, 32, 25, .05), 0 24px 60px -20px rgba(7, 32, 25, .34);

    color-scheme: light;
}

/* DAY — the course. Warm, bright, open.
   Phase tokens are deliberately scoped to <body>. Sections carry
   data-phase too, but only as a scroll trigger for main.js: if the
   attribute also painted tokens locally, a "night" section would render
   light text over a body that is still cream. */
body[data-phase="day"] {
    --bg:          var(--cream);
    --bg-alt:      var(--bone);
    --surface:     #FFFFFF;
    --ink:         #131A17;
    --ink-soft:    #55635C;
    --ink-faint:   #58655D;
    --rule:        #DED7C8;
    --rule-strong: #C9C0AD;
    --accent:      var(--amber-text);
    --on-accent:   #FFFFFF;
}

/* DUSK — the turn. The light drops, the greens deepen. */
body[data-phase="dusk"] {
    --bg:          #1E2A24;
    --bg-alt:      #17211C;
    --surface:     #22302A;
    --ink:         #F2EFE6;
    --ink-soft:    #B3C2B8;
    --ink-faint:   #9AA69F;
    --rule:        rgba(255, 255, 255, .12);
    --rule-strong: rgba(255, 255, 255, .22);
    --accent:      var(--amber);
    --on-accent:   #0A0D0C;
    color-scheme: dark;
}

/* NIGHT — the grill. Dark, warm, the game on. */
body[data-phase="night"] {
    --bg:          var(--night);
    --bg-alt:      var(--night-soft);
    --surface:     #161C1A;
    --ink:         #F6F2E9;
    --ink-soft:    #AEBAB2;
    --ink-faint:   #98A39C;
    --rule:        rgba(255, 255, 255, .11);
    --rule-strong: rgba(255, 255, 255, .2);
    --accent:      var(--amber);
    --on-accent:   #0A0D0C;
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

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

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

body {
    margin: 0;
    font-family: var(--f-ui);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* The phase change is the signature move, so it gets a long, calm fade. */
    transition: background-color 1.1s var(--ease), color 1.1s var(--ease);
}

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

a { color: inherit; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    /* SOFT rounds the terminals, WONK switches in the alternate shapes.
       Together they are what stop Fraunces reading like a default serif. */
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    letter-spacing: var(--disp-track);
    line-height: var(--disp-line);
    /* Headings here are written with deliberate line breaks. Balancing stops
       the browser leaving a single orphaned word when the break falls early. */
    text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--amber); color: #0A0D0C; }

:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 14px 22px;
    background: var(--fairway);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

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

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

.section {
    position: relative;
    padding-block: clamp(60px, 6.5vw, 100px);
}

/*
 * COLLAPSING THE GAP BETWEEN SECTIONS — BUT ONLY WHERE THERE IS ONE.
 *
 * Two plain sections stacked used to put 100px of air below one and 100px
 * above the next: 200px of nothing between two paragraphs, which at desktop
 * widths is most of a screen. So one section owns the gap and the next
 * starts straight in.
 *
 * That is only safe when the section above actually contributed the air.
 * A band paints its own background and rules its own edges, so its bottom
 * padding sits *inside* the colour block and stops at the boundary. The
 * section after it inherits nothing, and zeroing its top padding put the
 * eyebrow hard against the rule — "What's On" and "Before you come" were
 * both sitting on the line above them with about 15px of clearance.
 *
 * So both siblings have to be plain. A section following a band gets the
 * full measure back, which is the only way it reads as a new section
 * rather than as the tail of the one above.
 */
.section:not(.band) + .section:not(.band) { padding-top: 0; }

.section--tight { padding-block: clamp(44px, 4.5vw, 68px); }
.section--flush { padding-block: 0; }

/* --------------------------------------------------------------------------
   4. TYPE SCALE
   -------------------------------------------------------------------------- */

.display {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(3rem, 11vw, 8.5rem);
    line-height: .92;
    letter-spacing: -.035em;
}

.h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h2 { font-size: clamp(1.85rem, 3.5vw, 3rem); }
.h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.h4 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.eyebrow {
    display: block;
    font-family: var(--f-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.1em;
}

/* Headings sit hard against their following paragraph otherwise. */
h1 + p, h2 + p, h3 + p,
.h1 + .lede, .h2 + .lede, .h3 + .lede { margin-top: .75em; }

.lede {
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 52ch;
}

.micro {
    font-family: var(--f-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.num {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
}

/* Italic serif for the brand's dry asides. Straight from the commercial. */
.aside-voice {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-style: italic;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--tap);
    padding: 14px 28px;
    font-family: var(--f-ui);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--t) var(--ease),
                border-color var(--t) var(--ease),
                color var(--t) var(--ease),
                transform var(--t-fast) var(--ease);
}

.btn:active { transform: scale(.975); }

.btn--primary {
    background: var(--amber);
    border-color: var(--amber);
    color: #0A0D0C;
}
.btn--primary:hover { background: var(--amber-glow); border-color: var(--amber-glow); }

.btn--dark {
    background: var(--fairway);
    border-color: var(--fairway);
    color: #fff;
}
.btn--dark:hover { background: var(--fairway-lit); border-color: var(--fairway-lit); }

.btn--ghost {
    background: transparent;
    border-color: var(--rule-strong);
    color: var(--ink);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--on-media {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.btn--on-media:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }

.btn--lg { min-height: 56px; padding: 17px 34px; font-size: 1rem; }
.btn--sm { min-height: 40px; padding: 10px 18px; font-size: .86rem; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/*
 * A button row that follows a block of content needs air above it.
 *
 * .btn-row carried no top margin, so on the course page the two buttons sat
 * hard against the bottom edge of the course-hours card, reading as part of
 * it rather than as the next thing. Same on the homepage under the stat row.
 * Anywhere that already sets its own margin-top inline keeps it, since an
 * inline style wins over this.
 */
.course-hours + .btn-row,
.stat-row + .btn-row,
.hours-table + .btn-row { margin-top: 26px; }

/*
 * The scorecard page starts with the card, not with a photograph.
 *
 * Every other page opens with a full-bleed page-head that the fixed
 * navigation sits over by design. This one deliberately has none — the
 * point is that somebody standing on a tee sees the card immediately,
 * without a hero to scroll past — which left the eyebrow tucked under the
 * bar. It clears the navigation itself instead.
 */
.scorecard-page { padding-top: calc(var(--nav-h, 76px) + clamp(28px, 4vw, 52px)); }

/* Text link with an animated rule. Used for tertiary actions. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    color: var(--accent);
    padding-block: 6px;
}
.link-arrow svg { transition: transform var(--t) var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. MEDIA SYSTEM
   The site is designed around video. Every cinematic surface is a .media
   block: poster image first, real video injected by JS only when it is
   near the viewport, on a connection that can take it, and only if the
   visitor has not asked for reduced motion. Poster alone always looks
   finished, so a missing video file is never a broken layout.
   -------------------------------------------------------------------------- */

.media {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--fairway-deep);
}

.media__poster,
.media__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focal, 50% 50%);
}

.media__video {
    opacity: 0;
    transition: opacity 1s var(--ease);
    z-index: 1;
}
.media__video.is-playing { opacity: 1; }

/* Scrim. Strength is set per instance from data-overlay. */
.media__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(7, 18, 14, calc(var(--ov, .45) * .9)) 0%,
            rgba(7, 18, 14, calc(var(--ov, .45) * .35)) 42%,
            rgba(7, 18, 14, calc(var(--ov, .45) * 1.15)) 100%);
}

/* Where the copy sits bottom-left over a full-bleed frame, a vertical
   gradient alone is not enough — a bright fairway on the left side of the
   shot will still swallow the type. These surfaces get a second, angled
   pass so the text block always has something dark beneath it, whatever
   the footage does. */
.hero .media__scrim::after,
.page-head .media__scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(101deg,
        rgba(6, 16, 13, .82) 0%,
        rgba(6, 16, 13, .58) 26%,
        rgba(6, 16, 13, .18) 52%,
        transparent 72%);
}

/* The turn and the film are centre-set, so they get a centred vignette
   instead of a side wash. */
.film .media__scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 74% 62% at 50% 50%,
        rgba(6, 16, 13, .58) 0%,
        rgba(6, 16, 13, .28) 55%,
        transparent 100%);
}

.media__content {
    position: relative;
    z-index: 3;
}

/* A small badge that appears on media blocks awaiting real footage.
   Prototype only: main.js strips these when data-src is present. */
.media__pending {
    position: absolute;
    z-index: 4;
    left: 14px;
    bottom: 14px;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    background: rgba(10, 13, 12, .62);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 5px 11px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   7. NAVIGATION
   Transparent over the hero, then condenses into a solid bar on scroll.
   -------------------------------------------------------------------------- */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background-color var(--t-slow) var(--ease),
                box-shadow var(--t-slow) var(--ease),
                backdrop-filter var(--t-slow) var(--ease);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 18px var(--gutter);
    transition: padding var(--t-slow) var(--ease);
}

.nav__brand {
    display: flex;
    align-items: center;
    flex: none;
    text-decoration: none;
    transition: transform var(--t-slow) var(--ease);
}
.nav__brand img {
    width: auto;
    height: 44px;
    transition: height var(--t-slow) var(--ease);
}

.nav__links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;      /* the bar gets taller otherwise, and it is fixed */
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__links a {
    display: block;
    padding: 10px 12px;
    font-size: .9rem;
    white-space: nowrap;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    border-radius: 999px;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.nav__links a:hover { background: rgba(255, 255, 255, .14); }
.nav__links a[aria-current="page"] { color: var(--amber-glow); }

.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Condensed state */
/* Condensed state. The colours live in section 26. */
.nav.is-stuck .nav__inner { padding-block: 9px; }
.nav.is-stuck .nav__brand img { height: 34px; }

/* Hamburger */
.nav__toggle {
    display: none;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    cursor: pointer;
}

.nav__toggle span {
    position: relative;
    display: block;
    width: 17px; height: 1.5px;
    background: #fff;
    transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 17px; height: 1.5px;
    background: inherit;
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after  { top:  5.5px; }
.nav.is-stuck .nav__toggle span,
.nav.is-stuck .nav__toggle span::before,
.nav.is-stuck .nav__toggle span::after { background: var(--ink); }

.nav__toggle[aria-expanded="true"] span { background: transparent !important; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* Mobile drawer */
.nav__drawer {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 96px var(--gutter) 40px;
    background: var(--night);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t) var(--ease), visibility var(--t);
}
.nav__drawer.is-open { opacity: 1; visibility: visible; }

.nav__drawer ul { list-style: none; margin: 0 0 32px; padding: 0; }
.nav__drawer li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.nav__drawer a {
    display: block;
    padding: 18px 0;
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: 2rem;
    color: var(--cream);
    text-decoration: none;
}
.nav__drawer a:hover { color: var(--amber); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    --ov: .5;
}

.hero .media__content {
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    /*
     * The top padding is a floor, not a look.
     *
     * The hero is a proportion of the screen with its copy pinned to the
     * bottom. On a tall screen there is 200-340px of unused space above the
     * copy, so this padding sits inside that slack and moves nothing. On a
     * short screen the copy filled the whole hero and reached y=0, where the
     * fixed navigation sits on top of it: the Mayor's iPhone SE and a Windows
     * laptop with two toolbars both put the logo straight through the brand
     * line. Reserving the nav's height here means the copy can never reach
     * the top, whatever the screen does. Because the hero is min-height, it
     * grows rather than overlapping if the copy still will not fit.
     *
     * The height query further down keeps that growth from being needed in
     * practice; this is the guarantee underneath it.
     */
    padding: calc(var(--nav-h, 84px) + 24px) var(--gutter) clamp(42px, 8vh, 90px);
}

/* The nav carries the mark, so the hero leads with the idea instead.
   A single mono line does the work of brand, place and category. */
.hero__brand {
    font-family: var(--f-mono);
    font-size: clamp(.66rem, 1.1vw, .76rem);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: clamp(18px, 3vh, 30px);
    padding-left: .2em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.hero__brand::before {
    content: "";
    display: block;
    width: 46px; height: 1px;
    background: var(--amber);
    margin-bottom: 16px;
}

.hero__statement {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(2.8rem, 9.5vw, 7.5rem);
    line-height: .9;
    letter-spacing: -.04em;
    color: #fff;
    margin-bottom: .34em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
}
.hero__statement em {
    font-style: italic;
    color: var(--amber-glow);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}

.hero__sub {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
    max-width: 44ch;
    margin-bottom: clamp(22px, 4vh, 36px);
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    pointer-events: none;
}
.hero__scroll::after {
    content: "";
    width: 1px; height: 38px;
    background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
    animation: scroll-cue 2.4s var(--ease) infinite;
}
@keyframes scroll-cue {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
    35%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    65%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* The scroll cue is a desktop affordance.
   It is centred at the bottom of the hero, and on a desktop the status pills
   end some 190px short of it. On a phone the pills run the width of the
   screen and straight through it: measured at 360, 390, 393, 412 and 430 wide,
   the cue lands on top of them every time. Nobody on a phone needs to be told
   a page scrolls, so below tablet width it simply goes. */
@media (max-width: 1023px) {
    .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   HERO ON A SHORT SCREEN

   Height, not width. A 1366x560 Windows laptop and a 375x553 iPhone SE have
   nothing in common horizontally and the same problem vertically: once the
   browser's own furniture is deducted there is not enough room for the hero
   at full size.

   Rather than let it spill, everything tightens a step. The scroll cue goes
   first: on a screen where the whole hero is already visible it is telling
   you something you can see. The aim is that "Call for Tee Times" is on the
   first screen of every device, because on a golf course website that button
   is the point.
   -------------------------------------------------------------------------- */

@media (max-height: 700px) {
    .hero .media__content { padding-bottom: 26px; }

    .hero__brand { margin-bottom: 10px; }
    .hero__brand::before { width: 36px; margin-bottom: 9px; }

    .hero__statement {
        font-size: clamp(2.1rem, 7vw, 3rem);
        margin-bottom: .2em;
    }

    .hero__sub {
        font-size: .96rem;
        line-height: 1.45;
        margin-bottom: 15px;
    }

    .hero .btn-row { gap: 9px; margin-bottom: 0; }
    .hero .btn { min-height: 46px; padding: 11px 24px; font-size: .92rem; }

    .hero__status { margin-top: 13px; gap: 8px; }

    /* Nothing to announce when the whole thing is already on screen. */
    .hero__scroll { display: none; }
}

/* Shorter still — a laptop with every toolbar open, or a phone in landscape.
   The sentence under the headline is the last thing to go and the threshold
   is set so it survives on an iPhone SE, which is the smallest phone anyone
   is realistically browsing this on. */
@media (max-height: 505px) {
    .hero__statement { font-size: clamp(1.9rem, 6vw, 2.4rem); }
    .hero__sub { display: none; }
    .hero .media__content { padding-bottom: 20px; }
}

/* --------------------------------------------------------------------------
   9. THE CHOICE
   Two doors: play, or eat. Establishes the duality in one screen.
   -------------------------------------------------------------------------- */

.choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--rule);
}

.choice__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(400px, 62vh, 640px);
    padding: clamp(26px, 4vw, 52px);
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    --ov: .52;
}

/* The choice cards set their copy at the bottom, so they take the same
   angled wash as the hero. */
.choice__card .media__scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(6, 16, 13, .78) 0%,
        rgba(6, 16, 13, .3) 40%,
        transparent 68%);
}

.choice__card .media {
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: transform 1.2s var(--ease);
}
.choice__card:hover .media { transform: scale(1.045); }

.choice__body { position: relative; z-index: 3; width: 100%; }

.choice__kicker {
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber-glow);
    margin-bottom: 12px;
}

.choice__title {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(2.2rem, 4.6vw, 3.8rem);
    line-height: .96;
    margin-bottom: .3em;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .5);
}

.choice__note {
    font-size: .98rem;
    color: rgba(255, 255, 255, .9);
    max-width: 34ch;
    margin-bottom: 20px;
}

.choice__go {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: .94rem;
    color: #fff;
}
.choice__go svg { transition: transform var(--t) var(--ease); }
.choice__card:hover .choice__go svg { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   10. TODAY AT CRAWFORD HILLS
   Staff-maintained status board. Never invents data: if a field has not
   been updated it says so.
   -------------------------------------------------------------------------- */

/*
 * The status strip is a band, and now says so in the markup rather than
 * quietly repeating a band's background and rules under its own name.
 *
 * That mattered beyond tidiness: the rule that collapses the gap between
 * stacked sections exempts .band, because a band's padding sits inside its
 * own colour block and gives the next section nothing. This element looked
 * like a band and was not one, so the section after it — "The Course", on
 * the homepage — started hard against the strip's bottom rule.
 */

.today__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

/* THE PRO SHOP.
   Thirteen things on a shelf behind a counter at a nine-hole municipal
   course. Not a boutique, and pretending otherwise with a big photographic
   grid would be a lie about the size of it: most items have no photograph
   and may never have one. So the card is typographic first and grows a
   picture when one is assigned, rather than leaving a hole where a photo
   should be. The price is set in the display face because in a shop the
   price is the second thing you read and it may as well be worth reading. */
.shop-group { margin-top: 46px; }
.shop-group:first-of-type { margin-top: 34px; }
.shop-group__h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--f-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
}
.shop-group__h .ic { color: var(--accent); flex: 0 0 auto; }

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-card { display: flex; }
.shop-card__link {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    padding: 22px 22px 18px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.shop-card__link:hover,
.shop-card__link:focus-visible { border-color: var(--accent); transform: translateY(-2px); }

.shop-card__shot {
    display: block;
    aspect-ratio: 4 / 3;
    margin: -22px -22px 16px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    background: var(--rule);
}
.shop-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-card__name {
    font-size: 1.02rem;
    line-height: 1.35;
    color: var(--ink);
}
.shop-card__price {
    align-self: end;
    margin-top: 14px;
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--accent);
}
.shop-card__go {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.shop-card__link:hover .shop-card__go,
.shop-card__link:focus-visible .shop-card__go { color: var(--accent); }

.shop-foot { margin-top: 46px; }
.shop-foot .micro { margin-top: 14px; }
.shop-empty {
    margin-top: 28px;
    padding: 26px 28px;
    border: 1px solid var(--rule);
    border-radius: 16px;
    background: var(--surface);
}
.shop-empty p { margin: 0; }
.shop-empty a { color: var(--accent); font-weight: 600; }

@media (max-width: 520px) {
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .shop-card__link { padding: 18px 18px 15px; }
    .shop-card__price { font-size: 1.4rem; }
}

/* THE BOARD.
   Four live facts answering one question: can I go out right now. It was
   four identical cells in a white box with hairlines between them, which is
   a table, not an answer: everything at one weight, so nothing read as the
   point, and a dot sitting inline in the text pushed each value right while
   the line beneath it started at the cell edge.

   It is a board now, in the sense a course has one by the first tee. Deep
   green so the open/closed colours carry on it, the course given the width
   and the size the question deserves, and the dot in its own gutter so the
   three lines of every cell share one left edge. */
.today__grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    background: #0F3D2E;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgba(9, 32, 24, .55);
}

.today__cell {
    display: grid;
    grid-template-columns: 11px minmax(0, 1fr);
    column-gap: 13px;
    align-content: start;
    background: transparent;
    padding: 26px 26px 28px;
    min-height: 128px;
    position: relative;
}
/* Hairlines that stop short of the edges, so the panel reads as one object
   rather than four boxes pushed together. */
.today__cell + .today__cell::before {
    content: "";
    position: absolute;
    left: 0; top: 24px; bottom: 24px;
    width: 1px;
    background: rgba(242, 239, 230, .14);
}

.today__label,
.today__value,
.today__meta { grid-column: 2; }

.today__label {
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    /* .48 failed contrast on the green at this size. Measured, not judged by eye. */
    color: rgba(242, 239, 230, .74);
    margin-bottom: 12px;
}

.today__value {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(1.45rem, 1.9vw, 1.78rem);
    line-height: 1.06;
    color: #F2EFE6;
}
/* The first cell is the question. The rest are the answer's footnotes. */
.today__cell:first-child .today__value { font-size: clamp(1.8rem, 2.7vw, 2.5rem); }

.today__value--ok   { color: #7FD8A4; }
.today__value--warn { color: #F0BE5C; }
.today__value--off  { color: #F2947C; }

.today__meta {
    margin-top: 8px;
    font-size: .82rem;
    line-height: 1.5;
    color: rgba(242, 239, 230, .78);
}
.today__cell:first-child .today__meta { font-size: .88rem; }

/* THE DOT.
   Six things use this class: the two hero pills, the course pill, the grill
   pill, the order page's status line and the board. Five of them set it
   inline in a sentence and need the gap after it; only the board puts it in
   a column of its own.

   The board's rework took that gap off the shared class instead of scoping
   it, and the green dot ended up sitting on top of the words in the hero.
   The base rule is the inline one again, and the board's placement is
   qualified to the board. */
.status-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 9px;
    vertical-align: middle;
    background: var(--ink-faint);
}
.status-dot--ok   { background: #2F9E5F; }
.status-dot--warn { background: var(--amber-deep); }
.status-dot--off  { background: var(--ember); }

/* Only inside the board. */
.today__cell .status-dot {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    margin-right: 0;
    background: rgba(242, 239, 230, .5);
}
.today__cell:first-child .status-dot { width: 11px; height: 11px; }
.today__cell .status-dot--ok   { background: #7FD8A4; }
.today__cell .status-dot--warn { background: #F0BE5C; }
.today__cell .status-dot--off  { background: #F2947C; }

.status-dot--live {
    animation: pulse-dot 2.6s var(--ease) infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47, 158, 95, .5); }
    50%      { box-shadow: 0 0 0 7px rgba(47, 158, 95, 0); }
}

/* Alert bar. Only rendered when staff have posted a notice. */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-left: 4px solid var(--amber-deep);
    border-radius: var(--r-sm);
    font-size: .95rem;
}
.alert[data-level="alert"] { border-left-color: var(--ember); }

/* --------------------------------------------------------------------------
   11. EDITORIAL SPLIT
   Oversized media beside text. The workhorse section.
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 84px);
    align-items: center;
}
.split--reverse > :first-child { order: 2; }

.split__media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    --ov: .18;
}
.split__media--wide { aspect-ratio: 3 / 2; }

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 4vw, 44px);
    margin: 28px 0;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.stat__n {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1;
    color: var(--ink);
}
.stat__l {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 7px;
}

/* --------------------------------------------------------------------------
   12. THE FILM
   The commercial gets a proper cinematic frame, not an embed.
   -------------------------------------------------------------------------- */

.film {
    position: relative;
    min-height: clamp(460px, 74vh, 760px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    --ov: .58;
}

.film .media__content {
    padding: var(--gutter);
    max-width: 780px;
}

.film__eyebrow {
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 22px;
}

.film__line {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    line-height: .98;
    color: #fff;
    margin-bottom: .18em;
}
.film__line em { font-style: italic; color: var(--amber-glow); }

.film__sub {
    color: rgba(255, 255, 255, .88);
    margin-bottom: 34px;
}

/* The play control. Ring, fill, and a slow breathing halo. */
.play-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    font-family: var(--f-ui);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
}

.play-btn__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 74px; height: 74px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .5);
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.play-btn__ring::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .34);
    animation: film-halo 3.4s var(--ease) infinite;
}
@keyframes film-halo {
    0%   { transform: scale(1);    opacity: .75; }
    70%  { transform: scale(1.42); opacity: 0; }
    100% { transform: scale(1.42); opacity: 0; }
}
.play-btn__ring svg { transform: translateX(2px); }
.play-btn:hover .play-btn__ring { border-color: #fff; transform: scale(1.06); }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(14px, 4vw, 48px);
    background: rgba(5, 8, 7, .93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t) var(--ease), visibility var(--t);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__frame {
    position: relative;
    width: min(1180px, 100%);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9);
    transform: scale(.965);
    transition: transform var(--t-slow) var(--ease-out);
}
.lightbox.is-open .lightbox__frame { transform: scale(1); }
.lightbox__frame video,
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; }

.lightbox__empty {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: rgba(255, 255, 255, .82);
    font-family: var(--f-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    line-height: 2;
}

.lightbox__close {
    position: absolute;
    top: -52px; right: 0;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.lightbox__close:hover { border-color: #fff; transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   13. COURSE TOUR
   Nine holes as an experience. Map on the left, hole detail on the right.
   -------------------------------------------------------------------------- */

/* The aerial gets the full width. It is the best picture on the site and a
   photograph of the actual course is the whole point of the section. */
.tour__map {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--fairway-deep);
    aspect-ratio: 16 / 9;
    margin-bottom: clamp(22px, 3vw, 34px);
}

.tour {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.tour__panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.tour__selector {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
}
.tour__selector button {
    width: 44px; height: 44px;
    font-family: var(--f-mono);
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--t) var(--ease);
}
.tour__selector button:hover { border-color: var(--accent); color: var(--accent); }
.tour__selector button[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* --------------------------------------------------------------------------
   THE HOLE CARD
   On a golf course website this is the product, and it was a thumbnail beside
   a four-cell table. Now the picture carries the frame, the number sits on it
   at display size, and the yardages read as figures worth knowing rather than
   as a spreadsheet row.
   -------------------------------------------------------------------------- */

.hole-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    min-height: 420px;
}

.hole-card__media {
    position: relative;
    --ov: .18;
    min-height: 320px;
}

/* A gradient under the stamp only. The flat overlay that covers the whole
   frame would have to be heavy enough to ruin the photograph before it made
   small mono type legible over sunlit grass. */
.hole-card__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    z-index: 2;
    background: linear-gradient(to top, rgba(6, 12, 9, .92), rgba(6, 12, 9, .5) 46%, transparent);
    pointer-events: none;
}
.hole-card__media .media__poster { height: 100%; }

/* The number, over the picture, at the size it deserves. */
.hole-card__stamp {
    position: absolute;
    left: clamp(18px, 3vw, 34px);
    /* Enough room for the descender box. At line-height .78 the glyph sits
       below its own box and a tighter offset clipped the numeral. */
    bottom: clamp(20px, 3vw, 32px);
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: #fff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
    pointer-events: none;
}
.hole-card__stamp .micro { color: rgba(255,255,255,.9); }

.hole-card__n {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(4.4rem, 9vw, 8rem);
    line-height: .78;
    color: #fff;
}

.hole-card__body {
    padding: clamp(24px, 3vw, 38px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Centred, so a hole with no name yet does not leave a hole at the top
       of the panel. The nav pins itself to the bottom regardless. */
    justify-content: center;
}
.hole-card__nav { margin-top: auto; }

.hole-card__name {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.08;
}

/* Either what the course wrote about the hole, or a fact read off the card.
   Set quieter than the heading so the numbers underneath stay the focus. */
.hole-card__note {
    margin-top: 10px;
    max-width: 38ch;
    font-size: .96rem;
    line-height: 1.55;
    color: var(--ink-soft);
}


/* Figures, not table cells. Hairlines between, no boxes. */
.hole-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.hole-stats div {
    padding: 16px 6px 15px;
    text-align: left;
    position: relative;
}
.hole-stats div + div { border-left: 1px solid var(--rule); padding-left: 14px; }
.hole-stats dd {
    margin: 4px 0 0;
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Changing hole is a cut, not a redraw. */
@keyframes holeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.hole-card__body > * { animation: holeIn .32s cubic-bezier(.2,.7,.3,1) both; }
.hole-card__body > *:nth-child(2) { animation-delay: .04s; }
.hole-card__body > *:nth-child(3) { animation-delay: .08s; }
.hole-card__body > *:nth-child(4) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
    .hole-card__body > * { animation: none; }
}

@media (max-width: 900px) {
    .hole-card { grid-template-columns: 1fr; min-height: 0; }
    .hole-card__media { aspect-ratio: 16 / 10; min-height: 0; }
}

.hole-stats dt {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 5px;
}
.hole-stats dd {
    margin: 0;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.12rem;
    font-weight: 500;
    color: var(--ink);
}

.hole-card__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}

.hole-card__nav button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink-soft);
    font-family: var(--f-ui);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t) var(--ease);
}
.hole-card__nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hole-card__nav button:disabled { opacity: .35; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   14. SCORECARD
   -------------------------------------------------------------------------- */

.scorecard-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--surface);
}

.scorecard {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: .86rem;
}
.scorecard th, .scorecard td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid var(--rule);
}
.scorecard thead th {
    background: var(--fairway);
    color: #fff;
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
}
.scorecard tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--ink-soft);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.scorecard tbody tr:nth-child(even) td,
.scorecard tbody tr:nth-child(even) th { background: var(--bg-alt); }
.scorecard .is-total {
    font-weight: 500;
    color: var(--accent);
    border-left: 1px solid var(--rule);
}
/* The header row sits on fairway green, where the day accent is unreadable. */
.scorecard thead .is-total { color: var(--amber-glow); }

/* --------------------------------------------------------------------------
   15. MENU
   -------------------------------------------------------------------------- */

.menu-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}
.menu-tabs button {
    min-height: 42px;
    padding: 10px 19px;
    font-family: var(--f-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--t) var(--ease);
}
.menu-tabs button:hover { border-color: var(--accent); color: var(--accent); }
.menu-tabs button[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2px 48px;
}

.dish {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    align-items: baseline;
    padding: 17px 0;
    border-bottom: 1px solid var(--rule);
}
.dish__name {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: 1.28rem;
    line-height: 1.15;
}
.dish__price {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    color: var(--accent);
}
.dish__desc {
    grid-column: 1 / -1;
    font-size: .9rem;
    color: var(--ink-soft);
    max-width: 48ch;
}
.dish--feature .dish__name::after {
    content: "House favorite";
    display: inline-block;
    margin-left: 11px;
    vertical-align: middle;
    font-family: var(--f-mono);
    font-size: .56rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 999px;
    padding: 4px 9px;
}

/* --------------------------------------------------------------------------
   16. RATES
   -------------------------------------------------------------------------- */

.rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    /*
     * Each card is its own height.
     *
     * Grid stretches every card in a row to match the tallest, which is fine
     * for a comparison table where the rows have to line up and wrong here:
     * these are five independent price lists of different lengths. Green Fees
     * has eight rows and Cart Storage has two, so Cart Storage was a short
     * list floating at the top of a card three times its size, with a foot of
     * blank paper under it.
     */
    align-items: start;
}

.rate-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    border-radius: var(--r);
    padding: clamp(22px, 3vw, 30px);
}
.rate-card h3 { margin-bottom: 5px; }
.rate-card__note {
    font-size: .86rem;
    color: var(--ink-faint);
    margin-bottom: 20px;
}

.rate-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
}
.rate-row:last-child { border-bottom: 0; }
.rate-row__price {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--ink);
}
.rate-row__price--tbd {
    color: var(--ink-faint);
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* The two confirmed deals get real presence. */
/*
 * Tournament pricing on the Plan an Event page.
 *
 * The page used to say pricing was "not published online", which stopped
 * being true the moment the City's schedule went in. Somebody deciding
 * whether they can afford to hold a scramble here should not have to fill
 * in a form to find out, so the four numbers are on the page and the rest
 * is still a conversation.
 */
.plan__fees {
    margin-top: 22px;
    padding: 16px 18px;
    border-left: 2px solid var(--accent);
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    border-radius: 0 var(--r) var(--r) 0;
    font-size: .92rem;
    line-height: 1.6;
}

/*
 * Where the fees come from.
 *
 * The City sets these prices and publishes them itself, so the page says so
 * and links to the schedule. It is small print by design — a golfer reading
 * the table does not need it, and the one person who does need it is either
 * checking the site against the ordinance or wondering whether a number is
 * stale.
 */
.rates__source {
    margin-top: 26px;
    max-width: 68ch;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--ink-faint);
}

.deal-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2px;
    margin-top: 40px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    overflow: hidden;
}
.deal {
    background: var(--fairway);
    color: #fff;
    padding: clamp(24px, 3.4vw, 34px);
}
.deal__day {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber-glow);
    margin-bottom: 12px;
}
.deal__title {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1;
    margin-bottom: 9px;
}
.deal__detail { color: rgba(255, 255, 255, .9); font-size: .95rem; }

/* --------------------------------------------------------------------------
   17. EVENTS
   -------------------------------------------------------------------------- */

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

/*
 * AN EMPTY CALENDAR, DESIGNED ON PURPOSE.
 *
 * For most of the year there is nothing scheduled, so this is not an edge
 * case — it is the state the section is usually in, and it has to look
 * deliberate. It was borrowing .rate-card, which is sized for one column
 * of a three-column grid: a narrow box adrift in two columns of nothing,
 * under a headline promising leagues and scrambles. It read as a card that
 * had failed to load.
 *
 * So it spans the grid and says the true thing with some composure: the
 * calendar is empty, here is where the news actually goes up, here is the
 * phone. Two real actions, at the size of actions.
 */
.calendar-empty {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    border-radius: var(--r);
    padding: clamp(28px, 4vw, 46px) clamp(26px, 4vw, 48px);
}

.calendar-empty__h {
    margin: 0 0 10px;
}

.calendar-empty__note {
    margin: 0;
    max-width: 52ch;
    color: var(--ink-soft);
}

/* The actions sit in their own column on desktop and stack under the text
   on narrow screens, where a two-column split would squeeze both. */
.calendar-empty__do {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.calendar-empty__do .btn { flex: 0 1 auto; }

@media (max-width: 860px) {
    .calendar-empty {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.event-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    overflow: hidden;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.event-card__date {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 17px 22px;
    background: var(--fairway);
    color: #fff;
    font-family: var(--f-mono);
}
.event-card__day {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
}
.event-card__mon {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber-glow);
}
.event-card__time { margin-left: auto; font-size: .74rem; color: rgba(255,255,255,.88); }

.event-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.event-card__type {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 9px;
}
.event-card__title { font-size: 1.4rem; margin-bottom: 9px; }
.event-card__summary { font-size: .9rem; color: var(--ink-soft); flex: 1; margin-bottom: 16px; }

/*
 * A nudge to whoever can edit the page, shown in place of copy that has
 * not been written yet. Staff-only: it is printed behind a capability
 * check in ch_page_intro(), never for a visitor. Deliberately quiet —
 * it is an instruction to one person, not part of the design.
 */
.editor-prompt {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--ink-faint);
    border-left: 2px solid var(--accent);
    padding-left: 12px;
    margin: 0;
}

.tag-placeholder {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: .56rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8A5A00;
    background: #FFF2D6;
    border: 1px solid #E8C97E;
    border-radius: 999px;
    padding: 4px 9px;
    margin-bottom: 10px;
}
body[data-phase="night"] .tag-placeholder,
body[data-phase="dusk"] .tag-placeholder {
    color: var(--amber-glow);
    background: rgba(224, 163, 60, .13);
    border-color: rgba(224, 163, 60, .4);
}

/* --------------------------------------------------------------------------
   18. PLAN AN EVENT / FORMS
   -------------------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }

.field label {
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.field label .req { color: var(--ember); }

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 13px 15px;
    font-family: var(--f-ui);
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field__help { font-size: .8rem; color: var(--ink-faint); }
.field__error { font-size: .82rem; color: var(--ember); font-weight: 600; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--ember); }

.form-note {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-size: .86rem;
    color: var(--ink-faint);
}

.form-success {
    display: none;
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 4px solid #2F9E5F;
    border-radius: var(--r);
}
.form-success.is-shown { display: block; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --------------------------------------------------------------------------
   19. LOCATION
   -------------------------------------------------------------------------- */

/*
 * VISIT
 *
 * The map was a 4:3 card vertically centred against a column holding an
 * address, a phone number, Facebook, course hours and seven rows of grill
 * hours. It floated in the middle of its own half with a third of a screen
 * of nothing above and below it.
 *
 * It stretches now, and sticks: the map stays with you as you read down the
 * hours, which is the one moment on the site where somebody is holding both
 * pieces of information at once.
 */
.locate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: stretch;
}

.locate__map {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--bg-alt);
    position: sticky;
    top: calc(var(--nav-h, 76px) + 24px);
    /* Tall enough to hold its own against the column beside it, never so
       tall that it outgrows the window it is stuck to. */
    height: clamp(360px, 62vh, 560px);
    align-self: start;
}
.locate__map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
    .locate { grid-template-columns: 1fr; }
    .locate__map {
        position: static;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

.detail-list { margin: 0; }
.detail-list dt {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 6px;
}
.detail-list dd {
    margin: 0 0 22px;
    font-size: 1.05rem;
}
.detail-list a { color: var(--accent); text-decoration: none; font-weight: 600; }
.detail-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td {
    padding: 9px 0;
    border-bottom: 1px solid var(--rule);
    font-size: .95rem;
}
.hours-table td:last-child {
    text-align: right;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: .86rem;
    color: var(--ink-soft);
}
.hours-table tr.is-today td { color: var(--accent); font-weight: 600; }
.hours-table tr.is-today td:last-child { color: var(--accent); }

/* TODAY, as a tag rather than a word shoved against the day name.
   It was rendering as plain micro text with a single space in front of it,
   so "Wednesday TODAY" read as one run-on label. */
.day-tag {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px 3px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.5;
    color: var(--accent);
    vertical-align: 2px;
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .day-tag { border-color: var(--accent); }
}

/* The two hours headings carry a whole block each, so they sit at a
   different weight from Address and Clubhouse, which are one line.
   Qualified with dt because ".detail-list dt" above is more specific than a
/* WORTH KNOWING: four answers, not one wall.
   This is page copy staff type in the editor, so the shape has to survive
   whatever they write. Each top-level paragraph becomes a card; a bold lead
   line inside one becomes its heading. Anything that is not in that shape
   still reads as a card of plain text rather than breaking. */
.knowgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}
.knowgrid > p,
.knowgrid > ul,
.knowgrid > ol {
    margin: 0;
    padding: 24px 26px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--rule);
    border-radius: 16px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-soft);
}
.knowgrid > p > strong:first-child,
.knowgrid > p > b:first-child {
    display: block;
    margin-bottom: 8px;
    font-family: var(--f-display, inherit);
    font-size: 1.22rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--accent);
}
/* A <br> after that lead line would push the body down twice. */
.knowgrid > p > strong:first-child + br,
.knowgrid > p > b:first-child + br { display: none; }
.knowgrid > h3 {
    grid-column: 1 / -1;
    margin: 10px 0 0;
}
.knowgrid a { color: var(--accent); font-weight: 600; }

@media (max-width: 760px) {
    .knowgrid { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
    .knowgrid > p, .knowgrid > ul, .knowgrid > ol { padding: 20px 20px; }
}

/* THE TWO HOURS BLOCKS, AS TWO OBJECTS.
   Course hours and grill hours are near-identical seven row tables stacked
   in one column, and no amount of weight on the heading stopped them reading
   as a single fourteen row list: a label cannot separate two things that
   share an edge. So each becomes a panel with its own border, and takes the
   footer's own flag and fork marks, so you know which one you are looking at
   before reading a word.
   Qualified with dt because ".detail-list dt" above is more specific than a
   lone class, and quietly won: an earlier pass at the colour did nothing. */
.detail-list dt.detail-list__dt--strong {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 30px 0 0;
    padding: 16px 20px 0;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--rule);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    font-size: .78rem;
    letter-spacing: .14em;
    font-weight: 600;
    color: var(--ink);
}
.detail-list dt.detail-list__dt--strong .ic { color: var(--accent); flex: 0 0 auto; }

.detail-list dd.detail-list__panel {
    margin: 0 0 6px;
    padding: 6px 20px 16px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--rule);
    border-top: 0;
    border-radius: 0 0 14px 14px;
}
/* The table sits inside the panel rather than fighting its edge. */
.detail-list dd.detail-list__panel .hours-table tr:last-child td { border-bottom: 0; }
.detail-list dd.detail-list__panel .micro { display: block; margin-top: 4px; }

@media (max-width: 560px) {
    .detail-list dt.detail-list__dt--strong { padding: 14px 15px 0; margin-top: 24px; }
    .detail-list dd.detail-list__panel { padding: 4px 15px 14px; }
}

/* The Facebook row reads as a link, like the phone number above it. */
.detail-list__fb {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.detail-list__fb .ic { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */

.footer {
    background: var(--night);
    color: var(--cream);
    padding-top: clamp(56px, 8vw, 96px);

    /*
     * The footer is dark on every page, whatever phase the page itself is
     * in, so it carries its own muted tone. Taking var(--ink-faint) from a
     * day-phase page put a dark grey on near-black: eleven contrast
     * failures per page, and genuinely hard to read.
     */
    --footer-faint: #A8B3AB;
}
.footer__grid {
    display: grid;
    /* The last column carries the address, the phone, the email and the
       Facebook block, so it gets more room than the two link lists. */
    grid-template-columns: 1.5fr .85fr .85fr 1.3fr;
    gap: clamp(28px, 4vw, 56px);
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer__mark { width: 260px; margin-bottom: 22px; }
.footer__tag {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--amber);
    margin-bottom: 18px;
}
.footer__blurb { font-size: .9rem; color: rgba(246, 242, 233, .72); max-width: 34ch; }

.footer h4 {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; }
.footer a {
    font-size: .93rem;
    color: rgba(246, 242, 233, .82);
    text-decoration: none;
    transition: color var(--t) var(--ease);
}
.footer a:hover { color: var(--amber); }

.footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-block: 26px 30px;
    font-size: .82rem;
    color: rgba(246, 242, 233, .66);
}
.footer__base a { font-size: inherit; color: rgba(246, 242, 233, .86); }

/* The build credit.
   Colour is inherited from .footer__base rather than taken from the --ink
   tokens: the footer is dark but it is not inside a night-phase body, so
   those tokens resolve to their light-theme values and produced dark grey
   text on a dark bar. The link is underlined because it sits inside a line
   of prose, where colour alone is not a distinction anyone can rely on. */
.footer__credit {
    display: inline-block;
    margin-left: 10px;
    padding-left: 11px;
    border-left: 1px solid rgba(246, 242, 233, .22);
}
.footer__credit a {
    color: rgba(246, 242, 233, .86);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(246, 242, 233, .45);
    transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}
.footer__credit a:hover,
.footer__credit a:focus-visible {
    color: var(--amber);
    text-decoration-color: var(--amber);
}

@media (max-width: 560px) {
    .footer__credit {
        display: block;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        margin-top: 7px;
    }
}

.city-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 999px;
    font-size: .82rem;
    text-decoration: none;
    transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.city-badge:hover { border-color: var(--amber); background: rgba(224, 163, 60, .1); }

/* --------------------------------------------------------------------------
   21. MOBILE ACTION DOCK
   Four things a visitor standing outside actually needs.
   -------------------------------------------------------------------------- */

.dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    display: none;
    background: color-mix(in srgb, var(--night) 94%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(102%);
    transition: transform var(--t-slow) var(--ease-out);
}
.dock.is-up { transform: translateY(0); }

.dock__inner { display: grid; grid-template-columns: repeat(4, 1fr); }

.dock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 62px;
    padding: 9px 4px;
    text-decoration: none;
    color: rgba(246, 242, 233, .74);
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.dock a:active { background: rgba(255, 255, 255, .08); }
.dock a svg { width: 21px; height: 21px; }
.dock a--accent, .dock a.is-accent { color: var(--amber); }

/* --------------------------------------------------------------------------
   22. PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */

.page-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(320px, 52vh, 520px);
    --ov: .55;
}
.page-head .media__content {
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(34px, 6vh, 64px);
}
.page-head__title {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    line-height: .95;
    color: #fff;
    margin-bottom: .2em;
    text-shadow: 0 2px 28px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3);
}
.page-head__sub {
    color: rgba(255, 255, 255, .95);
    max-width: 46ch;
    font-size: 1.08rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

.crumbs {
    display: flex;
    gap: 9px;
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 18px;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--amber-glow); }

/* --------------------------------------------------------------------------
   23. REVEAL
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }

/* --------------------------------------------------------------------------
   24. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .tour { grid-template-columns: 1fr; }
}

/* Between the full bar and the drawer there is a stretch where the links
   fit but the buttons do not. The dock and the drawer both carry ordering,
   so that is the button that goes. */
@media (max-width: 1180px) {
    .nav__actions .btn--on-media { display: none; }
}

@media (max-width: 900px) {
    .nav__links { display: none; }
    .nav__toggle { display: inline-flex; }
    /* Every header button moves into the drawer and the dock. Leaving them
       here pushed the toggle past the right edge of a phone screen. */
    .nav__actions .btn { display: none; }
    .nav__drawer .btn { display: inline-flex; }

    .split,
    .locate { grid-template-columns: 1fr; }
    .split--reverse > :first-child { order: 0; }
    .split__media { aspect-ratio: 3 / 2; }

    .choice { grid-template-columns: 1fr; }
    .choice__card { min-height: 400px; }

    .dock { display: block; }
    body { padding-bottom: 62px; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }

    .hero { min-height: 92svh; }
    .hero__brand { letter-spacing: .18em; }

    .today__grid { grid-template-columns: 1fr 1fr; }
    /* Two up: the vertical hairline only belongs between columns, and every
       cell needs a horizontal one above it once the rows wrap. */
    .today__cell + .today__cell::before { top: 0; bottom: 0; }
    .today__cell:nth-child(odd) + .today__cell::before { top: 24px; bottom: 24px; }
    .today__cell:nth-child(n+3)::after {
        content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
        background: rgba(242, 239, 230, .14);
    }
    .today__cell:nth-child(odd):not(:first-child)::before { display: none; }
}
@media (max-width: 520px) {
    .today__grid { grid-template-columns: 1fr; }
    .today__cell { min-height: 0; padding: 20px 22px 22px; }
    .today__cell + .today__cell::before { display: none; }
    .today__cell + .today__cell::after {
        content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px;
        background: rgba(242, 239, 230, .14);
    }
    .today__cell:first-child .today__value { font-size: 2rem; }
    .hole-stats { grid-template-columns: repeat(2, 1fr); }
    .menu-grid { grid-template-columns: 1fr; gap: 0; }
    .footer__grid { grid-template-columns: 1fr; gap: 34px; }
    .footer__base { flex-direction: column; align-items: flex-start; }

    .tour__selector button { width: 42px; height: 42px; }
    /* Full width inside content rows only — never in the header or the dock. */
    .btn-row { flex-direction: column; align-items: stretch; }
    .btn-row .btn { width: 100%; }
    .play-btn { flex-direction: column; gap: 14px; }
    .lightbox__close { top: auto; bottom: -54px; right: 50%; transform: translateX(50%); }
    .lightbox__close:hover { transform: translateX(50%) rotate(90deg); }
}

/* --------------------------------------------------------------------------
   25. MOTION AND PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    /* Video is never injected under reduced motion. main.js checks this too. */
    .media__video { display: none; }
}

@media print {
    .nav, .dock, .hero__scroll, .lightbox, .media__video, .film { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
    .media__scrim { display: none; }
    .section { padding-block: 18pt; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    .scorecard-wrap { overflow: visible; border: 1px solid #999; }
    .scorecard { min-width: 0; }
}

/* --------------------------------------------------------------------------
   THE PRINTED SCORECARD

   "Print the card" used to hand the printer the whole website — navigation,
   hero, the hole tour, the footer, and a screen-shaped table of scores
   somewhere in the middle. Nobody carries that round nine holes.

   So the card is typeset for paper on its own terms: one sheet, black on
   white, with boxes big enough to write a number in with a pencil while
   leaning on a cart. It is built only when the button is pressed and thrown
   away afterwards, which is why all of this lives behind one class.

   It prints whether or not anybody has entered a score. With scores it is a
   record of the round; empty it is a blank Crawford Hills card, which is the
   likelier reason somebody reaches for a printer.
   -------------------------------------------------------------------------- */

.print-sheet { display: none; }

@media print {
    @page {
        size: letter portrait;
        margin: 14mm 12mm;
    }

    /* Hide the site, show the sheet. Hiding the body's own children rather
       than everything means the sheet keeps its ancestors and still paints. */
    html.is-printing-card body > *:not(.print-sheet) { display: none !important; }

    html.is-printing-card,
    html.is-printing-card body {
        background: #fff !important;
        margin: 0;
        padding: 0;
    }

    .print-sheet {
        display: block;
        color: #000;
        font-family: Georgia, "Times New Roman", serif;
    }

    .print-sheet__head {
        text-align: center;
        border-bottom: 2pt solid #000;
        padding-bottom: 6pt;
        margin-bottom: 10pt;
    }

    .print-sheet__brand {
        font-size: 26pt;
        letter-spacing: .04em;
        line-height: 1.05;
    }

    .print-sheet__sub {
        font-size: 9pt;
        letter-spacing: .12em;
        text-transform: uppercase;
        margin-top: 3pt;
    }

    /* Date, tee and weather, with a rule to write on. */
    .print-sheet__meta,
    .print-sheet__foot {
        display: flex;
        justify-content: space-between;
        gap: 10pt;
        font-size: 9pt;
    }
    .print-sheet__meta { margin-bottom: 8pt; }
    .print-sheet__foot {
        margin-top: 10pt;
        padding-top: 5pt;
        border-top: .5pt solid #999;
        color: #333;
    }
    .print-sheet__meta u,
    .print-sheet__foot u {
        display: inline-block;
        min-width: 90pt;
        border-bottom: .5pt solid #000;
        text-decoration: none;
    }

    .print-card {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 10pt;
    }

    .print-card th,
    .print-card td {
        border: .5pt solid #444;
        text-align: center;
        padding: 3pt 0;
    }

    /* The hole numbers, in a band that survives a printer set to greyscale. */
    .print-card thead th {
        background: #0F3D2E;
        color: #fff;
        font-size: 11pt;
        padding: 5pt 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* The name column. Width has to be declared on the header cell: the
       table is laid out fixed, so the first row decides every column, and
       a width set on the body cells alone was quietly ignored — the name
       came out narrower than a yardage and wrapped onto two lines. */
    .print-card .pc-name { width: 17%; }

    /* Yardage, par and handicap: reference, so lighter than the play area. */
    .print-card .pc-ref th[scope="row"] {
        text-align: left;
        padding-left: 5pt;
        font-size: 9pt;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .print-card .pc-ref td { background: #F2F1EC; font-size: 9pt; }

    .print-card .pc-total {
        background: #E4E2DA;
        font-weight: bold;
    }
    .print-card thead .pc-total {
        background: #0F3D2E;
        color: #fff;
    }

    /* Player lines, tall enough to write a number in with a pencil while
       leaning on a cart. */
    .print-card .pc-player th,
    .print-card .pc-player td {
        height: 40pt;
        font-size: 14pt;
        vertical-align: middle;
    }

    /* Five or six players means twelve rows once both nines are on the page,
       which is more than a sheet of letter will take at full height. They
       give up a few points each rather than spilling onto a second page,
       and there is still room to write. */
    .print-sheet--tight .print-card .pc-player th,
    .print-sheet--tight .print-card .pc-player td {
        height: 29pt;
        font-size: 12.5pt;
    }
    .print-sheet--tight .print-card__label { margin: 7pt 0 3pt; }
    .print-sheet--tight .print-sheet__head { padding-bottom: 5pt; margin-bottom: 8pt; }
    .print-sheet--tight .print-sheet__brand { font-size: 22pt; }
    .print-card .pc-player th {
        text-align: left;
        padding-left: 5pt;
        border-bottom: .5pt solid #444;
        font-size: 11pt;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Which nine this block is. */
    .print-card__label {
        font-size: 8.5pt;
        letter-spacing: .16em;
        text-transform: uppercase;
        margin: 10pt 0 3pt;
    }
    .print-card__label:first-of-type { margin-top: 0; }

    /* One sheet. If a card ever grows past a page, it breaks between
       players rather than through the middle of a row. */
    .print-card tr { break-inside: avoid; }
    .print-sheet { break-inside: avoid-page; }
}

/* --------------------------------------------------------------------------
   26. THE CONDENSED BAR
   The mark is white with a dark keyline: it belongs on a dark ground. So
   the bar goes dark the moment it condenses, in every phase. One mark, one
   behaviour, and it never has to compete with whatever the hero is doing.
   -------------------------------------------------------------------------- */

.nav.is-stuck {
    background: color-mix(in srgb, var(--fairway-deep) 90%, transparent);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 14px 40px -28px rgba(0, 0, 0, .9);
}
body[data-phase="dusk"]  .nav.is-stuck { background: color-mix(in srgb, #14201B 92%, transparent); }
body[data-phase="night"] .nav.is-stuck { background: color-mix(in srgb, var(--night) 90%, transparent); }

.nav.is-stuck .nav__links a { color: rgba(255, 255, 255, .88); }
.nav.is-stuck .nav__links a:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.nav.is-stuck .nav__links a[aria-current="page"] { color: var(--amber-glow); }
.nav.is-stuck .nav__toggle { border-color: rgba(255, 255, 255, .4); }
.nav.is-stuck .nav__toggle span,
.nav.is-stuck .nav__toggle span::before,
.nav.is-stuck .nav__toggle span::after { background: #fff; }

/* --------------------------------------------------------------------------
   27. RULE
   A hairline that draws itself as its section arrives. Small, but it is the
   kind of detail that makes a page feel authored rather than assembled.
   -------------------------------------------------------------------------- */

.rule-draw {
    height: 1px;
    background: var(--rule-strong);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--ease-out);
}
.rule-draw.is-in { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   28. SECTION HEADS
   -------------------------------------------------------------------------- */

.head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px 48px;
    align-items: end;
    margin-bottom: clamp(32px, 4vw, 54px);
}
.head__text { max-width: 58ch; }
.head p { margin-top: 14px; }

@media (max-width: 760px) {
    .head { grid-template-columns: 1fr; align-items: start; }
}

/* A quiet band used to set off the menu preview inside a dark phase. */
.band {
    background: var(--bg-alt);
    border-block: 1px solid var(--rule);
}

/* Inline status pill, used in the hero and the footer. */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(10, 13, 12, .42);
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pill--plain {
    background: var(--surface);
    border-color: var(--rule-strong);
    color: var(--ink-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Small print used under placeholder data so a demo never reads as fact. */
.note-placeholder {
    margin-top: 26px;
    padding: 14px 18px;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--r-sm);
    font-size: .84rem;
    color: var(--ink-faint);
}

/* Clean presentation mode (?clean). Strips every prototype-only marker so
   the page can be walked through without the scaffolding showing. */
/*
 * Build scaffolding: hidden unless asked for.
 *
 * These markers exist so the two of us can see what is still waiting for
 * content. They are not for the public and they are certainly not for
 * somebody being shown the site for the first time, so the default is off
 * and ?notes turns them on.
 */
.media__pending,
.note-placeholder,
.tag-placeholder,
.holemap__note--demo { display: none !important; }

.is-notes .media__pending,
.is-notes .note-placeholder,
.is-notes .tag-placeholder,
.is-notes .holemap__note--demo { display: revert !important; }

.is-notes .media__pending,
.is-notes .note-placeholder { display: block !important; }
.is-notes .tag-placeholder { display: inline-block !important; }

/* Pending badge, right-aligned, where a bottom-left label already lives. */
.media__pending--right { left: auto; right: 14px; }

/* --------------------------------------------------------------------------
   29. WORDPRESS
   Styles that only matter once the theme is running: editor output, menus
   generated by wp_nav_menu, pagination, captions. Kept together so the
   prototype and the theme can share one stylesheet byte for byte.
   -------------------------------------------------------------------------- */

/* A plain page's prose is capped for readability but left where the page
   heading starts, not centred in the viewport. */
.ch-prose--flush { max-width: var(--measure-nr); }

.ch-prose h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 1.6em 0 .5em; }
.ch-prose h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 1.5em 0 .45em; }
.ch-prose p,
.ch-prose ul,
.ch-prose ol { color: var(--ink-soft); line-height: 1.85; }
.ch-prose ul,
.ch-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.ch-prose li { margin-bottom: .5em; }
.ch-prose a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.ch-prose blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--accent);
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: 1.35rem;
    font-style: italic;
    color: var(--ink);
}
.ch-prose img { border-radius: var(--r); margin: 1.4em 0; }
.ch-prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

/* wp_nav_menu adds its own classes; neutralise the list defaults. */
.nav__links li,
.nav__drawer li,
.footer li { list-style: none; }
.nav__links,
.nav__drawer ul,
.footer ul { margin: 0; padding: 0; }
.footer .menu { list-style: none; margin: 0; padding: 0; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption { font-size: .84rem; color: var(--ink-faint); margin-top: 8px; }

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: .84rem;
    text-decoration: none;
    color: var(--ink-soft);
}
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* The admin bar sits over a fixed header; give it room. */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* --------------------------------------------------------------------------
   30. THE TURN
   The hinge of the whole site, and the one place the page stops behaving
   like a page. Three viewport-heights of scroll drive a single sticky frame
   in which the golf course dissolves into the kitchen and the light goes
   out. Everything is opacity and transform, so it costs the compositor and
   nothing else.

   Phase markers are plain empty divs at three depths inside the section, so
   the existing IntersectionObserver drives the palette. The scrub does not
   need to know the phase system exists, and the phase system does not need
   to know about the scrub.
   -------------------------------------------------------------------------- */

.turn {
    position: relative;
    /*
     * The runway. This was 320vh, and 320vh was wrong: the crossfade only
     * occupied the middle third of it, so the first thousand pixels of
     * scrolling changed nothing at all and the section read as a stall
     * rather than a transition. Shorter runway, and the fade below now
     * spans 70% of it, so the picture is moving almost the whole way down.
     */
    height: 210vh;
    --p: 0;                 /* 0 → 1, written by main.js */
}

.turn__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--night);
}

.turn__layer {
    position: absolute;
    inset: 0;
    will-change: opacity, transform;
}

/*
 * A true dissolve: the two curves are mirror images across the same window,
 * so A + B is always 1 and the picture never thins out.
 *
 * The previous pair left a gap in the middle where A had almost gone and B
 * had barely arrived — at the halfway point they measured 0.13 and 0.20
 * against a near-black stage, so the whole screen dipped to black and the
 * transition read as a fault rather than a cut. Now one image is always
 * fully carrying the frame.
 *
 * Motion runs from 15% to 72% of the runway. The tail is deliberate: it
 * leaves a beat at the end to read the line before the section releases.
 */
.turn__layer--a {
    opacity: clamp(0, calc((0.72 - var(--p)) / 0.57), 1);
    transform: scale(calc(1 + var(--p) * 0.10));
}

.turn__layer--b {
    opacity: clamp(0, calc((var(--p) - 0.15) / 0.57), 1);
    transform: scale(calc(1.14 - var(--p) * 0.14));
}

.turn__copy {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--gutter);
    pointer-events: none;
}

.turn__line {
    grid-area: 1 / 1;
    margin: 0;
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    color: #fff;
    line-height: .98;
    letter-spacing: -.035em;
    text-shadow: 0 2px 40px rgba(0, 0, 0, .5);
    will-change: opacity, transform;
}

.turn__line--a {
    font-size: clamp(4rem, 17vw, 13rem);
    opacity: clamp(0, calc((0.44 - var(--p)) / 0.16), 1);
    transform: translateY(calc(var(--p) * -40px));
}

.turn__line--b {
    font-size: clamp(2.2rem, 6.4vw, 5rem);
    max-width: 16ch;
    opacity: clamp(0, calc((var(--p) - 0.46) / 0.18), 1);
    transform: translateY(calc((1 - var(--p)) * 42px));
}
.turn__line--b em { font-style: italic; color: var(--amber-glow); }

/* A hairline that fills as the transition runs. Small, but it tells the
   visitor this is happening on purpose and how far through it they are. */
.turn__meter {
    position: absolute;
    left: 50%;
    bottom: clamp(26px, 6vh, 56px);
    z-index: 6;
    width: min(180px, 34vw);
    height: 1px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .22);
    opacity: clamp(0, calc(var(--p) / 0.12), 1);
}
.turn__meter::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--p) * 100%);
    background: var(--amber);
}

/* Phase markers. Zero height, no paint, picked up by the phase observer. */
.turn__mark {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Reduced motion: no scrub, no runway. The section collapses to a single
   screen showing where the story lands, with both lines legible. */
@media (prefers-reduced-motion: reduce) {
    .turn { height: auto; }
    .turn__stage { position: relative; height: clamp(460px, 78vh, 760px); }
    .turn__layer--a { opacity: 0; transform: none; }
    .turn__layer--b { opacity: 1; transform: none; }
    .turn__line--a { opacity: 0; }
    .turn__line--b { opacity: 1; transform: none; }
    .turn__meter { display: none; }
}

/* --------------------------------------------------------------------------
   31. THE SCORECARD
   Not a picture of a scorecard. A scorecard.

   Somebody standing on the third tee with a phone in one hand should be able
   to keep score on this, and come back to it after their phone locks. So it
   takes taps rather than typing, it keeps a running total against par, and
   it survives a reload. It also prints on one sheet, because half the people
   who use it will want the paper.
   -------------------------------------------------------------------------- */

/* The one instruction the tool needs. It used to be .micro in the corner of
   the heading: the right words in a size that said "fine print", a long way
   from the grid they were about. Now it sits on the card and carries the
   accent, so the first thing you read after the title tells you what to do. */
.card-hint {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px;
    padding: 2px 0 2px 14px;
    /* A rule rather than a pill. The print button sits directly underneath
       and is an amber pill itself, so a bordered hint read as a second
       button and invited a tap that does nothing. */
    border-left: 3px solid var(--amber);
    color: var(--amber-glow);
    font-family: var(--f-mono);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.25;
}

.card-hint__icon {
    flex: none;
    opacity: .95;
}

@media (max-width: 460px) {
    .card-hint {
        font-size: .79rem;
        letter-spacing: .06em;
        gap: 9px;
        padding-left: 11px;
    }
}

.card-tool { margin-top: 8px; }

.card-tool__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.card-tool__bar .btn { flex: none; }

.card-tool__score {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-left: auto;
    font-family: var(--f-mono);
}
.card-tool__total {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1;
    color: var(--ink);
}
.card-tool__par {
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.card-tool__par--under { color: #2F9E5F; }
.card-tool__par--over  { color: var(--ember); }

.card-grid {
    width: 100%;
    min-width: 660px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: .88rem;
}
.card-grid th, .card-grid td {
    padding: 0;
    text-align: center;
    border-bottom: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
}
.card-grid th:last-child, .card-grid td:last-child { border-right: 0; }

.card-grid thead th {
    padding: 11px 8px;
    background: var(--fairway);
    color: #fff;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
}
.card-grid thead th:first-child { text-align: left; padding-left: 14px; }
.card-grid thead .is-total { color: var(--amber-glow); }

.card-grid tbody th {
    padding: 8px 10px 8px 14px;
    text-align: left;
    font-weight: 500;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}
.card-grid .row-ref td { padding: 9px 6px; color: var(--ink-faint); }
.card-grid .row-ref th { color: var(--ink-faint); }

/* A player's row of tappable cells. */
.card-grid .row-player th {
    text-transform: none;
    letter-spacing: 0;
    font-size: .9rem;
    color: var(--ink);
}
.card-grid .row-player input[type="text"] {
    width: 100%;
    min-width: 92px;
    min-height: 38px;
    padding: 6px 8px;
    font: inherit;
    font-family: var(--f-ui);
    font-size: .9rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
}
.card-grid .row-player input[type="text"]:hover { border-color: var(--rule); }
.card-grid .row-player input[type="text"]:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent);
}

.cell {
    width: 100%;
    min-width: 44px;
    height: 46px;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cell:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cell:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.cell[data-empty="true"] { color: var(--ink-faint); }

/* Score-to-par, shown the way a card does: circles under par, squares over. */
.cell[data-rel="-2"], .cell[data-rel="-1"] { color: #2F9E5F; font-weight: 500; }
.cell[data-rel="-1"] span { box-shadow: 0 0 0 1.5px currentColor; border-radius: 50%; padding: 3px 6px; }
.cell[data-rel="-2"] span {
    box-shadow: 0 0 0 1.5px currentColor, 0 0 0 4px transparent, 0 0 0 5.5px currentColor;
    border-radius: 50%; padding: 4px 7px;
}
.cell[data-rel="1"], .cell[data-rel="2"] { color: var(--ember); }
.cell[data-rel="1"] span { box-shadow: 0 0 0 1.5px currentColor; padding: 3px 6px; }
.cell[data-rel="2"] span {
    box-shadow: 0 0 0 1.5px currentColor, 0 0 0 4px transparent, 0 0 0 5.5px currentColor;
    padding: 4px 7px;
}

.card-grid .col-total {
    background: var(--bg-alt);
    font-weight: 500;
    color: var(--accent);
    border-left: 1px solid var(--rule-strong);
}

/* The number pad. Appears against the cell being filled. */
.pad {
    position: fixed;
    z-index: 130;
    display: grid;
    grid-template-columns: repeat(4, 46px);
    gap: 6px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.pad.is-open { opacity: 1; visibility: visible; transform: none; }
.pad button {
    height: 46px;
    font-family: var(--f-mono);
    font-size: 1rem;
    color: var(--ink);
    background: var(--bg-alt);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.pad button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pad button[data-pad="clear"] { grid-column: span 2; color: var(--ink-faint); }
.pad__hint {
    grid-column: 1 / -1;
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
    padding-top: 2px;
}

@media print {
    .card-tool__bar, .pad { display: none !important; }
    .card-grid { min-width: 0; font-size: 9pt; }
    .card-grid thead th { background: #0F3D2E !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cell { height: auto; }
}

/* --------------------------------------------------------------------------
   32. THE HOLE MAP
   The real course, from the air, with the nine pins on it.

   No published map of Crawford Hills exists, so rather than draw a diagram
   and hope it resembles the place, the site uses the drone photograph and
   Crawford Hills drop the pins themselves from the Control Center. Until
   they have, the map says so and shows the photograph on its own.
   -------------------------------------------------------------------------- */

.holemap {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--fairway-deep);
    isolation: isolate;
}

.holemap__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* A touch cooler and darker so the amber pins sit off it. */
    filter: saturate(.92) brightness(.9);
}

.holemap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 96% 90% at 50% 46%,
        transparent 40%, rgba(5, 14, 11, .45) 100%);
}

.holepin {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    padding: 0;
    font-family: var(--f-mono);
    font-size: .82rem;
    font-weight: 500;
    color: #fff;
    background: rgba(10, 16, 13, .58);
    border: 1.5px solid rgba(255, 255, 255, .62);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: transform var(--t) var(--ease), background-color var(--t) var(--ease),
                border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.holepin:hover { transform: scale(1.14); border-color: #fff; }

.holepin.is-active {
    background: var(--amber);
    border-color: var(--amber);
    color: #0A0D0C;
    transform: scale(1.2);
}
/* A single slow ring on the selected hole. One thing moving, not nine. */
.holepin.is-active::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1.5px solid var(--amber);
    animation: pin-ring 2.8s var(--ease) infinite;
}
@keyframes pin-ring {
    0%   { transform: scale(1);   opacity: .8; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

.holepin:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Said plainly, always visible, never hidden by presentation mode: these
   positions are ours until Crawford Hills places them. */
.holemap__note {
    position: absolute;
    z-index: 4;
    left: 14px; right: 14px; bottom: 14px;
    padding: 9px 14px;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
    background: rgba(8, 12, 10, .72);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 640px) {
    .holepin { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: .76rem; }
    .holemap__note { font-size: .56rem; padding: 8px 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .holepin.is-active::after { display: none; }
}


/* The hole card now sits full width under the map, so it reads across
   rather than down: the frame on one side, the numbers on the other. */
@media (min-width: 860px) {
    .hole-card {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: stretch;
    }
    .hole-card__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
    .hole-card__body { display: flex; flex-direction: column; justify-content: center; }
}

/* --------------------------------------------------------------------------
   33. THE OPENING
   The homepage arrives as a frame before it behaves like a page: the
   photograph is already there, then the chrome and the words settle onto it
   over about a second and a half.

   Two rules kept it honest. Nothing that affects the largest element is
   animated, so the opening cannot cost anything on the performance score.
   And it plays once per visit — coming back from the course page should not
   make somebody sit through it again.
   -------------------------------------------------------------------------- */

html.js body[data-intro="pending"] .nav,
html.js body[data-intro="pending"] .hero__brand,
html.js body[data-intro="pending"] .hero__statement,
html.js body[data-intro="pending"] .hero__sub,
html.js body[data-intro="pending"] .hero .btn-row,
html.js body[data-intro="pending"] .hero .pill,
html.js body[data-intro="pending"] .hero__scroll {
    opacity: 0;
}

body[data-intro] .nav,
body[data-intro] .hero__brand,
body[data-intro] .hero__statement,
body[data-intro] .hero__sub,
body[data-intro] .hero .btn-row,
body[data-intro] .hero .pill,
body[data-intro] .hero__scroll {
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

body[data-intro="pending"] .hero__brand    { transform: translateY(14px); }
body[data-intro="pending"] .hero__statement{ transform: translateY(26px); }
body[data-intro="pending"] .hero__sub      { transform: translateY(18px); }
body[data-intro="pending"] .hero .btn-row  { transform: translateY(14px); }
body[data-intro="pending"] .hero .pill     { transform: translateY(10px); }

body[data-intro="running"] .nav             { transition-delay: .95s; }
body[data-intro="running"] .hero__brand     { transition-delay: .10s; }
body[data-intro="running"] .hero__statement { transition-delay: .26s; }
body[data-intro="running"] .hero__sub       { transition-delay: .52s; }
body[data-intro="running"] .hero .btn-row   { transition-delay: .68s; }
body[data-intro="running"] .hero .pill      { transition-delay: .80s; }
body[data-intro="running"] .hero__scroll    { transition-delay: 1.15s; }

/* The amber rule above the brand line draws itself rather than fading. */
body[data-intro="pending"] .hero__brand::before { transform: scaleX(0); transform-origin: left; }
body[data-intro] .hero__brand::before { transition: transform 1s var(--ease-out) .18s; }

@media (prefers-reduced-motion: reduce) {
    html.js body[data-intro] .nav,
    html.js body[data-intro] .hero__brand,
    html.js body[data-intro] .hero__statement,
    html.js body[data-intro] .hero__sub,
    html.js body[data-intro] .hero .btn-row,
    html.js body[data-intro] .hero .pill,
    html.js body[data-intro] .hero__scroll { opacity: 1; transform: none; transition: none; }
    body[data-intro] .hero__brand::before { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   34. TONIGHT
   What the kitchen is actually doing today, read from the till's own day
   rules. On a Tuesday this says Taco Tuesday because the till says so, not
   because somebody remembered to update a banner.
   -------------------------------------------------------------------------- */

.tonight {
    border-block: 1px solid var(--rule);
    background: var(--bg-alt);
}

.tonight__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(20px, 3vw, 30px) var(--gutter);
}

.tonight__label {
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    flex: none;
}

.tonight__deals { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 38px); align-items: baseline; }

.tonight__deal { display: flex; align-items: baseline; gap: 12px; }
.tonight__name {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    line-height: 1.1;
}
.tonight__price {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    color: var(--accent);
}
.tonight__what {
    font-size: .9rem;
    color: var(--ink-faint);
    max-width: 42ch;
    line-height: 1.35;
}

.tonight__desc { font-size: .88rem; color: var(--ink-faint); max-width: 34ch; }

/* Day, then what it is, then the price. Below 900px the choices drop under
   the day rather than pushing the price off the end of the strip. */
@media (max-width: 900px) {
    .tonight__deal { flex-wrap: wrap; gap: 4px 12px; }
    .tonight__what { flex-basis: 100%; }
}

.tonight__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 760px) {
    .tonight__cta { margin-left: 0; width: 100%; }
    .tonight__cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   35. THE PLATE
   Four frames from the kitchen, sized unevenly on purpose so the eye moves
   through them rather than scanning a grid. One of the four is the flat top,
   which moves — so the band has a pulse without four videos competing.
   -------------------------------------------------------------------------- */

.plate {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2px;
    background: var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 16 / 7;
}

.plate__cell {
    position: relative;
    overflow: hidden;
    --ov: .3;
}
.plate__cell:nth-child(1) { grid-column: span 2; grid-row: span 2; --ov: .38; }
.plate__cell:nth-child(2) { grid-column: span 2; }
.plate__cell:nth-child(3),
.plate__cell:nth-child(4) { grid-column: span 1; }

.plate__cell .media__poster { transition: transform 1.4s var(--ease); }
.plate__cell:hover .media__poster { transform: scale(1.05); }

.plate__label {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: 14px;
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}

@media (max-width: 760px) {
    .plate {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        aspect-ratio: 1 / 1;
    }
    .plate__cell:nth-child(1) { grid-column: span 2; grid-row: span 1; }
    .plate__cell:nth-child(2) { grid-column: span 2; }
    .plate__cell:nth-child(3),
    .plate__cell:nth-child(4) { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   COURSE HOURS
   Set apart from the grill's hours wherever the two appear together, because
   the kitchen's narrow window is the one people misread as the course's.
   -------------------------------------------------------------------------- */

.course-hours {
    margin-top: 26px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
    background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.course-hours .eyebrow { display: block; margin-bottom: 8px; }
.course-hours__line {
    margin: 0;
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.25;
}
.course-hours .hours-table { margin-top: 4px; }

.hero__status {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Staff-only note inside the film lightbox. Never shown to a visitor. */
.lightbox__admin {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 12px 18px;
    background: #7a1f1f;
    color: #fff;
    font-family: var(--f-mono);
    font-size: .78rem;
    line-height: 1.45;
    text-align: left;
}

/* --------------------------------------------------------------------------
   36. FOLLOW ALONG
   Facebook is where this course actually posts, so it gets a band of its own
   above the footer rather than one word in a list of links.
   -------------------------------------------------------------------------- */

.follow {
    position: relative;
    background: #0E1512;
    color: #F6F2E9;
    padding-block: clamp(54px, 7vw, 92px);
    overflow: hidden;
}

/* A single wash of the brand amber, low and wide, so the band reads as part
   of the night end of the palette rather than a grey box bolted on. */
.follow::before {
    content: "";
    position: absolute;
    inset: auto -10% -60% 30%;
    height: 150%;
    background: radial-gradient(60% 50% at 50% 50%, rgba(224, 163, 60, .16), transparent 70%);
    pointer-events: none;
}

.follow__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
}

.follow .eyebrow { color: var(--amber); }

.follow__h {
    margin: 10px 0 0;
    color: #fff;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
}

.follow__lede {
    margin: 18px 0 0;
    max-width: 54ch;
    color: #B9C2BB;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.6;
}

/*
 * Mark, then the words, then the arrow.
 *
 * The button was two rows of text with an arrow on the end and nothing to
 * say where it went — the word Facebook was doing all the work. A mark on
 * the left says it at a glance, which is the whole job of that button.
 *
 * Three columns rather than two now, so the label and the sub-line stack
 * together in the middle instead of each claiming a row of the grid.
 */
.follow__cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0 18px;
    padding: 22px 26px;
    border-radius: 14px;
    text-decoration: none;
    color: #0E1512;
    background: var(--amber);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: 0 10px 34px rgba(224, 163, 60, .18);
}
.follow__cta:hover,
.follow__cta:focus-visible {
    background: #EDB35A;
    transform: translateY(-2px);
    box-shadow: 0 16px 44px rgba(224, 163, 60, .28);
}

/* The mark brings its own disc, so there is no badge behind it — it takes
   the button's ink colour and reads as solid on the amber. */
.follow__cta-mark {
    grid-column: 1;
    display: grid;
    place-items: center;
    color: #0E1512;
}
.follow__cta-mark svg { width: 38px; height: 38px; display: block; }

.follow__cta-text {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.follow__cta-label {
    font-family: var(--f-display);
    font-weight: var(--disp-weight);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.1;
}
.follow__cta-sub {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .72;
}
.follow__cta-go {
    grid-column: 3;
    font-size: 1.5rem;
    transition: transform .2s ease;
}
.follow__cta:hover .follow__cta-go { transform: translateX(4px); }

.follow__note {
    margin: 16px 0 0;
    font-size: .88rem;
    color: #8E9A92;
    line-height: 1.5;
}
.follow__note a { color: #C9D2CB; }

@media (max-width: 900px) {
    .follow__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   37. FOOTER LINKS
   The columns were plain text with two of them empty, because they depended
   on nav menus nothing ever created. Icons, real rows, and Facebook where
   people actually look for it.
   -------------------------------------------------------------------------- */

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

.footer__links a {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 7px 10px 7px 8px;
    margin-left: -8px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--footer-faint, var(--ink-faint));
    line-height: 1.45;
    transition: color .16s ease, background .16s ease;
}
.footer__links a:hover,
.footer__links a:focus-visible {
    color: var(--cream);
    background: rgba(248, 245, 238, .09);
}

.footer__links .ic {
    flex: none;
    margin-top: 3px;
    opacity: .55;
    transition: opacity .16s ease, transform .16s ease;
}
.footer__links a:hover .ic,
.footer__links a:focus-visible .ic { opacity: 1; transform: translateX(1px); }

.footer__link-text { min-width: 0; }

/*
 * Facebook is a row in the Find Us list, not a card above it.
 *
 * It had been a bordered block with a coloured disc and a line of
 * explanatory text, which made the quietest part of the page the loudest.
 * The band above the footer already makes the case for following; down here
 * it is one more way to reach the course, at the same weight as the address
 * and the phone number. The mark keeps its own colour so it is still
 * recognisable at 16px, and the list's own rules do the rest.
 */