/*
Theme Name: Pin Seeker
Theme URI: https://pinseekergolf.com
Author: Pin Seeker
Description: Custom traffic-director theme for Pin Seeker Indoor Golf & Sports Grill. WordPress serves marketing pages only; bookings, food orders, gift cards and lead capture route to Golf O'Clock, Square, and GoHighLevel.
Version: 0.3.69
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: pinseeker
*/

/* Self-hosted fonts (see assets/fonts/) — downloaded once from Google Fonts
   and served from this theme instead of fonts.googleapis.com/fonts.gstatic.com.
   Removes two third-party requests per visit; browsers no longer share a
   cross-site Google Fonts cache anyway (cache partitioning), so self-hosting
   is strictly faster now. Weight 400 700 on Inter reflects the source file
   actually being a variable font — Google's CSS just repeats the same file
   per static weight for older-browser compatibility, so one @font-face
   covering the whole range is equivalent and smaller. Re-fetch from
   fonts.googleapis.com/css2?family=... if the weights/families in use ever
   change. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Pathway Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/pathway-gothic-one-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pathway Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/pathway-gothic-one-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#070807;
  --ink-2:#0d0f0d;
  --forest:#07332b;
  --forest-2:#0d4438;
  --gold:#c7a052;
  --gold-light:#e0c27c;
  --ivory:#f3eadb;
  --paper:#eee7da;
  --muted:#b7afa2;
  --line:rgba(199,160,82,.42);
  --lime:#a4d100;
  --copper:#b96a40;
  --max:1320px;
  --pad:clamp(22px,4vw,64px);
  --display:'Pathway Gothic One','Arial Narrow',sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--body);line-height:1.55}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.wrap{width:min(var(--max),calc(100% - 2*var(--pad)));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--ivory);color:var(--ink);padding:10px 14px}
.utility{background:var(--forest);border-bottom:1px solid rgba(224,194,124,.35)}
.utility__inner{min-height:34px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;color:var(--gold-light);font:15px/1 var(--display);letter-spacing:.12em}
.site-topbar{position:sticky;top:0;z-index:30}
.header{position:relative;background:rgba(7,8,7,.55);backdrop-filter:blur(14px) brightness(.55);border-bottom:1px solid rgba(199,160,82,.28)}
/* grid-template-rows:86px is load-bearing, not decorative -- without an
   EXPLICIT row size, a CSS grid row using implicit ('auto') sizing grows
   to fit its tallest item (the bleeding logo, up to 180px) regardless of
   the container's own declared height:86px box. That inflated row is
   then what align-items:center centers EVERY item against -- not just
   the logo, ALL of them -- so .menu/.nav/.header__cta would end up
   vertically centered within the logo's full height instead of the
   header's real visible bar. Mostly invisible on wider layouts (the
   logo's centering more or less canceled itself out there), but on
   mobile, where only .menu shows and nothing was offsetting the logo's
   full uncompensated height, it visibly pushed .menu down below the
   header entirely, into the hero. An explicit row size makes 'auto'
   sizing use exactly that value instead, so every item -- including a
   deliberately-oversized one like the logo -- centers against the
   header's REAL box, and only the logo (via align-self below) overflows
   it on purpose. Confirmed via a live CSS injection test before writing
   this rule for real, not assumed. */
.header__inner{height:86px;display:grid;grid-template-columns:clamp(220px,22vw,320px) 1fr auto;grid-template-rows:86px;align-items:center;gap:28px}
.logo img{width:111px;height:70px;object-fit:contain}
/* "Bleed" enlargement -- unscoped as of 2026-09-01, when Rossford
   started using the same real transparent-crest logo file as Bremerton
   (see inc/sites.php pinseeker_site_image_uri()). Was scoped to
   .site-bremerton until then -- only suits a real transparent-background
   logo, and Rossford's old generated placeholder had a solid background
   that would've shown as a jarring solid rectangle overlapping the
   utility bar/hero with this same treatment.
   Fluid (not a fixed transform:scale multiplier) so the logo scales
   continuously with the viewport -- and the grid column above is fluid
   for the same reason -- instead of jumping between a few discrete
   sizes and occasionally colliding with the nav at in-between widths
   (the recurring problem with the old scale-tier approach).
   --logo-h holds the current breakpoint/scroll-state's logo height as
   one shared value, read by the image's own height below -- so the two
   can never drift out of sync (changing size at a breakpoint, or via
   .is-scrolled, automatically recalculates the right bleed too).
   Plain align-self:center now that .header__inner has a real, explicit
   row size (see above) -- centering a 180px logo against a genuinely
   86px-tall row correctly overflows it evenly, no manual margin-top
   math needed. An earlier version computed that offset by hand
   (margin-top:calc((86px - var(--logo-h))/2)) specifically because the
   row DIDN'T have an explicit size yet and had already auto-grown to
   match the logo, making align-self:center alone a no-op -- fixing the
   row's own sizing is the more correct fix, since it also fixes every
   OTHER item's centering at the same time (see the grid-template-rows
   comment above), not just the logo's. See .hero__copy/.page-intro
   below for the matching top-clearance value,
   and .hero__content below for why the downward half of this bleed no
   longer needs a z-index escalation to stay safe. */
.logo{position:relative;z-index:1;align-self:center;--logo-h:clamp(95px,13vw,180px)}
.logo img{height:var(--logo-h);width:auto;object-fit:initial}
/* Optical-centering nudge, largest sizes only (>1100px, where --logo-h
   is at or near its 180px max and the effect is most visible) --
   mathematically the logo box IS centered on .header__inner's true row
   (confirmed via direct measurement: diff <1px from the row's real
   center at 1400/1920/2560px), but the crest's own visual weight isn't
   evenly distributed within that box -- the top half (the ornate "GOLF"
   text arc + the crossing clubs' shafts converging) reads as denser
   than the plainer bottom half (just the club heads + "SPORTS GRILL"),
   a common optical-centering illusion where a geometrically-centered
   badge shape reads as sitting too high. Nudged down 14px, confirmed
   by eye against an overlay marking the row's true center/edges at
   several candidate values (0/8/14/20px) before picking this one --
   noticeably corrects the "too high" perception while still leaving a
   real amount of upward bleed into the green .utility bar (the reason
   this is scoped narrower than "every tier using align-self:center" --
   the ≤1100px tier's smaller logo wasn't reported as having this
   problem, so its plain mathematical centering is left alone).
   Note: align-self:center centers the item's MARGIN box, so a
   margin-top of M only shifts the visible content down by M/2 (half
   gets redistributed by the centering math itself, half comes through
   as real displacement) -- the values compared by eye above and the
   20px landed on here both already account for that; the real visual
   shift this produces is ~10px, not 20. */
@media (min-width:1101px){
  .logo{margin-top:20px}
}
.nav{display:flex;justify-content:center;gap:clamp(15px,2.1vw,32px);font:clamp(18px,1.5vw,24px)/1 var(--display);letter-spacing:.08em}
/* Nav items are real <li>s (a real "Primary Menu" assigned in
   Appearance > Menus renders through WordPress's default Walker, which
   always wraps each link in <li> regardless of the items_wrap markup
   passed to wp_nav_menu() in header.php) -- without this, the browser's
   default list-item marker rendered as a mid-dot between items, which
   was never intentional markup, just an unreset default. */
.nav li{list-style:none}
.nav a{color:var(--paper);padding:12px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--gold-light);border-color:var(--gold)}
.menu{display:none;background:transparent;border:1px solid var(--gold);color:var(--ivory);padding:10px 13px;font:18px var(--display);letter-spacing:.08em}
/* Wraps .menu + the mobile-only .header__book-mobile as one grid item
   (grid-column:3, set at <=800px below) so the two sit side by side
   with their own small gap, independent of the wider gap the rest of
   .header__inner's columns use. Hidden outside the mobile tier -- the
   full .header__cta ("BOOK A BAY") already covers this on wider
   screens, and .mobile-actions only exists so a small width phone has
   a quick booking affordance in the header itself, not just the
   fixed-bottom .mobile-bar. */
.mobile-actions{display:none}
.header__book-mobile{display:none;background:var(--gold);color:#111;border:1px solid var(--gold);padding:10px 13px;font:18px var(--display);letter-spacing:.08em;text-align:center}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid transparent;font:20px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;transition:.2s ease}
.button:hover{transform:translateY(-1px)}
.button--gold{background:var(--gold);color:#111;border-color:var(--gold)}
.button--outline{background:transparent;color:var(--ivory);border-color:rgba(243,234,219,.58)}
.button--forest{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.eyebrow{margin:0 0 12px;color:var(--gold-light);font:18px/1 var(--display);letter-spacing:.18em;text-transform:uppercase}
.eyebrow--dark{color:var(--forest)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.025em;text-transform:uppercase;margin:0}
h1{font-size:clamp(70px,8vw,132px);line-height:.82}
h2{font-size:clamp(44px,5vw,82px);line-height:.92}
h3{font-size:clamp(27px,2.5vw,42px);line-height:1}
p{margin:0 0 18px}
.hero{position:relative;min-height:700px;display:grid;align-items:center;overflow:visible}
/* Bleeds the hero photo up behind the (now translucent, blurred)
   .header so the image shows through the nav instead of stopping at
   the hero's own top edge -- top is pulled up by exactly .header's own
   height (86px desktop, 70px mobile -- see the ≤800px override below)
   so the image's visible top edge lines up with the TOP of the header,
   not the utility bar above it (the utility bar stays opaque green on
   purpose, see .site-topbar). */
.hero__image{position:absolute;inset:0;top:-86px;filter:saturate(.88) contrast(1.05)}
.hero__image-crop{width:100%;height:100%}
.hero__image img{width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,7,.98) 0%,rgba(7,8,7,.92) 33%,rgba(7,8,7,.40) 68%,rgba(7,8,7,.08) 100%),linear-gradient(0deg,rgba(7,8,7,.85),transparent 45%)}
/* Deliberately NORMAL stacking here (no z-index bump above
   .site-topbar's 30) -- a previous version raised this to 31 so the
   hero's own CTA buttons would win against the bleeding logo if the
   two ever lined up on-screen during scroll. That fixed the narrow
   button-collision case but broke the general one: EVERY piece of
   hero copy (eyebrow, h1, lead, all three buttons) inherited the same
   z-index, so as any of it scrolled through the sticky header's fixed
   screen band, it rendered fully opaque IN FRONT of the header instead
   of correctly dimming/blurring behind its translucent background --
   reported as hero text "floating over the nav bar." Reverted now
   that .logo's bleed is roughly half as deep (see
   above) -- there's much less overlap band left for the two to
   collide in, and letting scrolled content sit behind the sticky
   header (its intended, normal behavior) is what makes the header's
   own blur/darken vibrancy effect read correctly in the first place. */
.hero__content{position:relative}
.hero__copy{max-width:610px;padding:90px 0}
/* Clearance below the header for the bleed logo (see .logo above) so
   it doesn't overlap the eyebrow/heading text at rest -- applies to
   both sites as of 2026-09-01 (Rossford now shares Bremerton's real
   bleed-enabled logo). Sized to the logo's worst-case downward overflow
   past the header (~47px at the largest desktop size, centered per
   .logo above) plus a real margin, not the much larger 150px an earlier
   top-anchored version of the logo needed -- that oversized gap is also
   what was behind the "nav bar feels too tall" report, since it read as
   dead space between the header and the actual page heading. */
.hero__copy{padding-top:72px}
.hero h1 span{color:var(--gold)}
.hero__lead{max-width:580px;margin:28px 0 32px;font-size:clamp(18px,1.6vw,24px);color:#e5ddcf}
.hero__actions,.actions{display:flex;gap:12px;flex-wrap:wrap}
.promise{border-block:1px solid var(--line);background:#090b09}
.promise .wrap{text-align:center;padding:24px 0}
.promise p{margin:0;font:clamp(26px,3vw,44px)/1 var(--display);letter-spacing:.15em}
.promise p span{color:var(--gold)}
.promise small{display:block;margin-top:8px;color:var(--muted);font-size:15px}
.section{padding:clamp(70px,8vw,118px) 0}
.section--kitchen{background:linear-gradient(180deg,#0d100e,#090a09)}
.split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:clamp(36px,6vw,84px);align-items:center}
.split--reverse .split__media{order:2}
/* A slot with no real photo renders nothing (pinseeker_picture()), so the
   layout falls back to text-only instead of an empty column (2026-10-14). */
.split__media:not(:has(img)),.first-visit__photo:not(:has(img)),.hero__image:not(:has(img)){display:none}
.split:not(:has(.split__media img)),.visit__grid:not(:has(img)),.first-visit:not(:has(.first-visit__photo img)){grid-template-columns:1fr}
.hero:not(:has(.hero__image img)){min-height:0}
.split--reverse .split__copy{order:1}
.split__copy>p:not(.eyebrow):not(.callout){font-size:clamp(17px,1.5vw,22px);color:#d5ccbe;max-width:580px}
.callout{font:clamp(26px,2.6vw,42px)/1.06 var(--display);color:var(--gold-light);text-transform:uppercase}
.food-mosaic{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;min-height:560px;gap:8px}
.food-mosaic img{height:100%;object-fit:cover}
.food-mosaic img:first-child{grid-row:1/3}
.section--calendar{background:var(--forest);border-block:1px solid rgba(224,194,124,.32)}
.section-head{margin-bottom:36px}
.section-head--split{display:grid;grid-template-columns:1fr minmax(320px,.72fr);gap:50px;align-items:end}
.section-head--split>p{color:#d9d0c2;max-width:560px}
/* One flat grid (see front-page.php / page-whats-on.php — no more
   .calendar-column wrappers splitting it into two separately-stacked
   lists) so days read left to right, then wrap top to bottom like a
   normal calendar, growing from 1 column up to 4 as the viewport widens
   (min-width tiers below, same 521/800/1100 breakpoints used elsewhere).
   Dividers between cells are the grid gap itself showing through (a
   background color on the gap, one on each .day) — this way the dividing
   lines are consistent whether a row ends up with 1, 2, 3 or 4 items in
   it, without needing per-column border rules keyed to a column count
   that changes by breakpoint. */
.calendar-grid{display:grid;grid-template-columns:1fr;gap:1px;border:1px solid rgba(224,194,124,.4);background:rgba(224,194,124,.4)}
.day{display:grid;grid-template-columns:94px 1fr;gap:18px;align-items:center;min-height:100px;padding:18px 24px;background:rgba(6,22,18,.45)}
/* gold-light, not gold: 5.9:1 on the tile vs 4.2:1 (WCAG AA, axe 2026-10-14) */
.day>span{font:25px/1 var(--display);letter-spacing:.08em;color:var(--gold-light)}
.day strong{display:block;font:25px/1.05 var(--display);letter-spacing:.035em}
.day small{display:block;margin-top:7px;color:#c8c0b3}
/* This week's actual calendar events under a tile (inc/offers.php) */
.day__event{display:block;margin-top:6px;font-style:normal;font-size:14px;color:var(--gold-light)}
.day__event::before{content:"+ "}
/* The tint sits on the same dark base as every other tile, so text can't
   land on the light part of the photo behind (featured was 2.1:1). */
.day--featured{background:linear-gradient(rgba(199,160,82,.09),rgba(199,160,82,.09)),rgba(6,22,18,.45)}
.day--monthly{background:linear-gradient(rgba(164,209,0,.08),rgba(164,209,0,.08)),rgba(6,22,18,.45)}
.center{text-align:center;margin-top:28px}
.section--offers{background:#0b0d0b}
.offers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* page-parties.php's grid only ever has 2 tiers (2026-09-01 restructure)
   -- the shared 4-column .offers-grid left it stretched thin with a lot
   of dead space at desktop widths (>1100px, where the base rule above
   is what applies). Scoped to min-width:1101px specifically because the
   tablet tier's own .offers-grid{grid-template-columns:1fr 1fr} below
   already gives exactly the 2-column layout this needs -- and this
   selector's higher specificity (two classes) would otherwise also win
   over the mobile ≤800px single-column rule further down, which is not
   what's wanted there. */
@media (min-width:1101px){
  .offers-grid--parties{grid-template-columns:repeat(2,1fr);max-width:800px}
}
.offer{min-height:350px;padding:28px;border:1px solid var(--line);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(13,68,56,.52),rgba(7,8,7,.8))}
.offer__label{font:16px/1 var(--display);letter-spacing:.14em;color:var(--gold-light)}
.offer h3{margin:18px 0}
.offer__price{font:24px/1.15 var(--display);text-transform:uppercase;color:var(--ivory)}
.offer__price strong{font-size:46px;color:var(--gold-light)}
.offer p{color:#d1c8ba}
.offer__note{font-size:13px;color:var(--gold-light)}
/* page-instructors.php's "menu" -- same card language as .offer above
   (border + dark-to-forest gradient) but a simpler single-column list,
   since an instructor card is read top-to-bottom (name, bio,
   availability) rather than compared side-by-side like a pricing tier. */
.instructor-menu{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.instructor-card{padding:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(13,68,56,.52),rgba(7,8,7,.8))}
.instructor-card h2{margin:0 0 12px;font-size:clamp(24px,2.4vw,32px)}
.instructor-card p{color:#d1c8ba;margin:0 0 8px}
.instructor-card__availability{color:var(--gold-light)}
.offer>a{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font:20px var(--display);letter-spacing:.06em;color:var(--gold-light)}
.mini-rates{margin:10px 0 20px}
.mini-rates div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(224,194,124,.22)}
.mini-rates span{font-size:12px;color:#c7bfb2}
.mini-rates strong{font:20px var(--display);color:var(--gold-light)}
.mini-rates__strike{color:var(--muted);text-decoration:line-through;font-size:.85em;margin-right:12px}
.section--memberships{background:var(--paper);color:#151714}
.section--memberships .section-head>p{color:#494d46}
/* Comparison table (see inc/memberships.php) — the only Flex Memberships
   layout at every screen size (2026-08-15; a separate desktop card grid
   used to sit above this, but the table read better everywhere so it was
   dropped). Base rules below are the tightest (mobile) tier; the
   min-width tiers further down scale typography/padding up for
   tablet/desktop instead of the table just sitting tiny on a big screen.
   Four plans since 2026-10-14 (monthly bay-hours + loyalty pricing).
   The "RECOMMENDED" plan's whole column is tinted (.is-featured on every
   cell, not just the header) since the cards used to carry that emphasis
   via a gold border/shadow and this is the only visual treatment doing
   that job now. */
.member-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:20px}
.member-table{width:100%;min-width:680px;border-collapse:collapse;background:#f7f1e7;font-size:14px}
.member-table th,.member-table td{padding:8px;border:1px solid rgba(7,51,43,.18);text-align:center;vertical-align:middle}
.member-table thead th{font:18px var(--display);letter-spacing:.04em;color:var(--forest)}
.member-table thead th.is-featured,.member-table td.is-featured{background:rgba(199,160,82,.18)}
.member-table__flag{display:block;width:88%;margin:0 auto 6px;padding:5px 0;border-radius:999px;background:var(--gold);color:#111;text-align:center;font:12px var(--display);letter-spacing:.08em}
.member-table tbody th{text-align:left;font:18px var(--display);letter-spacing:.06em;color:var(--forest);background:#f7f1e7;position:sticky;left:0}
.member-table tbody tr:nth-child(even) td:not(.is-featured){background:rgba(7,51,43,.03)}
.member-table td strong{font-size:19px;color:#111}
.member-table__hours{display:block;margin-top:4px;font:14px var(--body);font-weight:700;letter-spacing:.02em;color:#2c312b}
.member-table__tagline{display:block;margin-top:2px;font:13px var(--body);letter-spacing:0;color:#494d46}
.member-table__sub{display:inline-block;margin-top:4px;font-size:12px;line-height:1.35;color:#494d46}
.member-table td strong.member-table__mid{font-size:16px}
.member-table-wrap:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Shown only where the table is wider than the screen (phones): a visible
   cue for the approved swipe pattern (reviewer PS-20). */
.member-table__swipe{display:none;margin:14px 0 0;font-size:13px;color:#494d46}
@media (max-width:760px){.member-table__swipe{display:block}}
.membership-loyalty{max-width:760px;margin:24px auto 0;padding:16px 20px;border:1px solid rgba(199,160,82,.55);background:rgba(199,160,82,.12);text-align:center;color:#2c312b;line-height:1.55}
.membership-loyalty strong{display:block;margin-bottom:4px;font:20px var(--display);letter-spacing:.04em;color:var(--forest)}
.member-table__details td ul{margin:0;padding:0;list-style:none;text-align:left;font-size:13px;line-height:1.5;color:#3a3f3a}
.member-table__details td li{padding:3px 0}
.member-table__cta td{padding:10px 4px}
.member-table__cta .button{width:100%;font-size:16px;font-weight:700;padding:12px 6px}

@media (min-width:521px){
  .member-table{min-width:720px;font-size:16px}
  .member-table th,.member-table td{padding:10px 12px}
  .member-table thead th{font-size:20px}
  .member-table__flag{font-size:13px}
  .member-table tbody th{font-size:20px}
  .member-table td strong{font-size:22px}
  .member-table__hours{font-size:15px}
  .member-table__sub{font-size:13px}
  .member-table td strong.member-table__mid{font-size:18px}
  .member-table__details td ul{font-size:14px}
  .member-table__cta td{padding:14px 8px}
  .member-table__cta .button{font-size:18px;padding:14px 8px}
  .calendar-grid{grid-template-columns:1fr 1fr}
}

@media (min-width:800px){
  .member-table{min-width:680px;font-size:18px}
  .member-table th,.member-table td{padding:14px 16px}
  .member-table thead th{font-size:24px}
  .member-table__flag{font-size:14px}
  .member-table tbody th{font-size:24px}
  .member-table td strong{font-size:29px}
  .member-table__details td ul{font-size:16px}
  .member-table__cta td{padding:16px 10px}
  .member-table__cta .button{font-size:21px;padding:16px 10px}
  .calendar-grid{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1100px){
  .calendar-grid{grid-template-columns:repeat(4,1fr)}
  .member-table{font-size:19px}
  .member-table th,.member-table td{padding:18px 22px}
  .member-table thead th{font-size:27px}
  .member-table__flag{font-size:15px}
  .member-table tbody th{font-size:27px}
  .member-table td strong{font-size:33px}
  .member-table__details td ul{font-size:17px;line-height:1.6}
  .member-table__cta td{padding:18px 12px}
  .member-table__cta .button{font-size:24px;padding:18px 12px}
}
.membership-note{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;padding:26px 0 0;color:#42483f}
.membership-note strong{color:var(--forest)}
.section--kaboom{background:linear-gradient(180deg,#081d18,#07110f)}
.split__media img{width:100%;height:100%;max-height:620px;object-fit:cover}
.text-stats{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:24px 0}
.text-stats span{padding:14px 0;border-top:1px solid var(--line);font:18px var(--display);letter-spacing:.05em;color:var(--gold-light)}
.section--golf{background:#090a09}
.section--more{background:var(--forest)}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.more-grid article{padding:26px;border-top:2px solid var(--gold);background:rgba(0,0,0,.18)}
.more-grid h3{font-size:32px}
.more-grid p{color:#d5ccbe}
.more-grid a{font:18px var(--display);letter-spacing:.07em;color:var(--gold-light);border-bottom:1px solid var(--gold)}
.signup{padding:58px 0;background:#0b0c0b;border-block:1px solid var(--line)}
.signup__grid{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center}
.signup h2{font-size:54px}
.signup__form{display:grid;grid-template-columns:1fr auto;gap:10px}
.signup__form label span{position:absolute;left:-9999px}
.signup__form input{width:100%;min-height:50px;background:#121612;color:var(--ivory);border:1px solid rgba(243,234,219,.4);padding:12px 16px}
.visit{padding:70px 0;background:#111311}
.visit__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:55px;align-items:center}
.visit img{max-height:440px;object-fit:cover}
.visit a:not(.button){color:var(--gold-light);text-decoration:underline}
.footer{padding:30px 0;background:#030403;border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:180px 1fr auto auto auto;align-items:center;gap:28px;font:16px var(--display);letter-spacing:.08em}
.footer img{width:160px;height:80px;object-fit:contain}
.social-links{display:flex;gap:14px}
.social-links a{color:var(--muted);transition:color .15s ease}
.social-links a:hover,.social-links a:focus-visible{color:var(--gold)}
.mobile-bar{display:none}

@media (max-width:1100px){
  /* Fluid, not a fixed px value -- shrinks smoothly from desktop's
     clamp() down to this tier's own tighter ceiling instead of jumping
     straight to a small fixed column, so there's no width range in
     between where the logo is stuck too small or too big for the
     available room (the recurring collision problem with the old
     fixed-tier + transform:scale approach -- see git history). */
  .header__inner{grid-template-columns:clamp(150px,20vw,220px) 1fr auto}
  /* Fluid, not the flat 14px this used to be -- at 801-829px specifically
     (just above the mobile breakpoint, where the nav column is at its
     tightest relative to the logo/CTA columns already claiming space),
     a real gap of exactly 14px left "EAT & DRINK" ~18px short of fitting
     on one line, so it wrapped to 2 lines while every other item stayed
     on 1 -- confirmed via real height measurement (64px vs 46px), not a
     screenshot artifact, and confirmed as the ONLY wrap in the entire
     800-2000px range checked at a 10px step. Bremerton-only in practice
     (Rossford's shorter no-food nav never gets this close to overflowing).
     clamp(8px,1vw,14px) keeps the same ~14px feel through most of this
     tier (1vw only reaches 14 at 1400px, well past this tier's own
     1100px ceiling) while giving up enough room right at the low end. */
  .nav{gap:clamp(8px,1vw,14px)}
  .offers-grid{grid-template-columns:1fr 1fr}
  .more-grid{grid-template-columns:1fr 1fr}
  .logo{--logo-h:clamp(80px,10vw,130px)}
}

@media (max-width:800px){
  body{padding-bottom:64px}
  .utility__inner{font-size:12px;gap:10px;padding:8px 0}
  /* gap:10px overrides the base rule's 28px -- that 28px is fine on
     desktop (3 columns all carrying real content), but at this tier
     the middle "1fr" column is pure empty spacer (.nav is display:none
     when closed and position:absolute -- taken out of grid flow
     entirely -- when open, so it never actually occupies this column),
     and 2 gaps of 28px around a column with nothing in it is 56px of
     pure overhead on a row barely 284px wide at the smallest real
     phone width. Confirmed via real measurement this was the actual
     cause of the .mobile-actions/BOOK button below overflowing off
     the right edge at 320-340px before this was reduced, not the
     buttons themselves being too wide. */
  .header__inner{height:70px;grid-template-columns:clamp(150px,32vw,220px) 1fr auto;grid-template-rows:70px;gap:10px}
  .logo img{width:92px;height:58px}
  /* align-self:start (not center) -- on mobile the .utility bar's own
     text wraps to 2 lines spanning nearly the full width (not just a
     clear band to the logo's right, like desktop/tablet have room
     for), so any upward bleed here visibly covers real address/phone
     text. Bleed stays downward-only on this tier; the wider tiers
     above keep the full up-and-down bleed where there's nothing under
     it to cover. Now that .header__inner has an explicit 70px row
     (see the base rule's comment), align-self:start correctly anchors
     the logo's top to the row's real top and lets it overflow only
     downward -- .menu (the other item in this row) still centers
     correctly against the real 70px row regardless of the logo's own
     align-self, since each item's alignment is independent. */
  /* Floor lowered from 128px to 95px (2026-08-26) -- the old 128px
     floor applied all the way from 320px up to 457px (28vw doesn't
     reach 128 until then), which left no room for the new .menu +
     .header__book-mobile pair below ~365px: the logo's real rendered
     width (height * its ~1.59 aspect ratio) genuinely overlapped the
     button cluster at 320-360px, confirmed via direct measurement
     (clearance as negative as -34px) and a real screenshot showing the
     crest visually poking through/behind the MENU button. A lower,
     still-fluid floor (not a separate hard breakpoint) shrinks the
     logo just enough at the narrowest real phone widths to keep it
     clear of the buttons, while 28vw still governs everything above
     ~339px exactly as before. */
  .logo{--logo-h:clamp(95px,28vw,150px);align-self:start}
  /* Shrinks the bleed logo once the page has scrolled even a little
     (see the 'is-scrolled' class toggled in main.js) -- reclaims
     vertical space during scroll and, as a side effect, shrinks the
     already-small overlap band with any hero content scrolling
     through the sticky header's screen position even further. Mobile
     only, per request -- desktop keeps one fixed bleed size. Only
     --logo-h needs to change here -- the image's own height and the
     align-self:start anchor above both key off it live, so the
     overflow depth shrinks with it automatically too. */
  .is-scrolled .logo{--logo-h:clamp(96px,22vw,118px)}
  .nav{display:none;position:absolute;left:0;right:0;top:70px;background:#090a09;border-bottom:1px solid var(--line);padding:22px var(--pad);flex-direction:column;align-items:flex-start}
  .nav--open{display:flex}
  .header__cta{display:none}
  /* Compact quick-booking affordance next to MENU -- see .mobile-actions
     above for why. Sized to roughly match .menu's own footprint (same
     padding/font) so the pair reads as one deliberate unit, just with
     inverse (solid gold) fill instead of MENU's outline treatment.
     Tighter padding and gap than either button's own base declaration
     -- two buttons now share the space one used to have alone, and the
     header__inner gap reduction above wasn't quite enough on its own
     to fit both comfortably at a real 320px-wide phone. */
  .mobile-actions{display:flex;align-items:center;gap:6px;grid-column:3}
  .header__book-mobile{display:block;padding:8px 10px}
  .menu{display:block;padding:8px 10px}
  .hero{min-height:700px;align-items:end}
  .hero__image{background-position:62% center;top:-70px}
  /* ROI crop, mobile only -- the 15% left / 10% top / 5% right / 5%
     bottom margins define a region of interest, and that ROI is
     treated as if it were the whole source photo for a normal
     edge-to-edge cover-fill of the hero (no letterboxing) -- matching
     how the hero image behaves everywhere else, just cropped into a
     curated region first. object-fit alone can't express 4 independent
     edge percentages, so .hero__image-crop fills the hero exactly
     (width/height:100%) and the img inside is manually scaled/shifted
     to reproduce cover's own math sourced from the ROI instead of the
     full photo.
     height:auto (not a hardcoded %) is load-bearing: it's what
     guarantees the image is scaled proportionally rather than
     distorted, since it always derives from the ACTUAL loaded
     resource's real native ratio regardless of any imprecision in the
     width% below. Real bug hit and fixed here: this math originally
     assumed the hero photos were 1600x1000 (1.6 ratio, matching the
     front-page.php width/height attributes at the time), but the real
     Bremerton rotator photos are actually 1800x1350 (4:3, 1.333) --
     confirmed by inspecting the files directly (getimagesize) and the
     browser's own naturalWidth/naturalHeight on the loaded resource,
     not assumed from the HTML attributes (which were themselves wrong
     and have been corrected to 1600x1200 in front-page.php). Using the
     wrong 1.6 ratio didn't distort the image (height:auto always
     prevents that) but did over-scale/over-crop it well past the
     intended margins, which read as "out of proportion."
     ROI aspect with the correct 4:3 source: ((1-.15-.05)/(1-.10-.05))*(4/3)
     = 1.2549. Height is always the binding dimension for every real
     phone shape measured this session (~0.42-0.6, far narrower than
     1.2549), so translateY/img-height% are fixed constants (-10%,
     117.647%, both ratio-independent -- they only depend on the
     vertical margins T/B); img-width%/translateX% depend on both the
     native ratio AND how tall/narrow the device is -- solved
     algebraically per aspect-ratio tier, given container aspect Rcon
     and native ratio Rn=4/3:
       width% = Rn/(0.85*Rcon)*100
       translateX% = -(0.15 + (0.80 - 0.85*Rcon/Rn))*100
     Extra crop beyond the specified margins (needed to fully cover
     narrower devices) comes ENTIRELY off the left -- the right edge
     stays pinned at the original 5% margin regardless of device shape,
     so the lower-right of the photo is always what's kept on screen
     when a viewport forces a tighter final crop, matching this
     project's standing "prefer bottom-right" preference for this hero
     image. See CLAUDE.md for the full derivation
     and the same real-device aspect buckets already validated earlier
     this session (~0.56 older/Plus-style phones, ~0.46 modern Face-ID
     iPhones). Rossford's still-placeholder hero image is actually
     1600x1000 (1.6) -- this math is tuned for Bremerton's real photos
     specifically, so Rossford's crop will be slightly imprecise until
     it gets real photography (already a tracked open item). */
  .hero__image-crop{width:100%;height:100%;overflow:hidden;position:relative}
  .hero__image-crop img{position:absolute;top:0;left:0;height:auto;max-width:none;width:224.09%;transform:translate(-50.37%,-10%)}
  .hero__shade{background:linear-gradient(0deg,rgba(7,8,7,.99) 0%,rgba(7,8,7,.95) 38%,rgba(7,8,7,.26) 78%,rgba(7,8,7,.05) 100%)}
  .hero__copy{padding:280px 0 48px;max-width:100%}
  .hero:not(:has(.hero__image img)) .hero__copy{padding-top:56px}
  h1{font-size:78px}
  .hero__lead{font-size:18px}
  .hero__actions{display:grid;grid-template-columns:1fr 1fr}
  .hero__actions .button:first-child{grid-column:1/3}
  .promise p{font-size:26px;letter-spacing:.1em}
  .split,.split--reverse{grid-template-columns:1fr}
  .split--reverse .split__media,.split--reverse .split__copy{order:initial}
  .food-mosaic{min-height:470px}
  .section-head--split{grid-template-columns:1fr;gap:15px}
  .day{grid-template-columns:54px 1fr;gap:10px;min-height:110px;padding:15px 12px}
  .day>span{font-size:20px}
  .day strong{font-size:20px}
  .day small{font-size:12px;line-height:1.35}
  .offers-grid{grid-template-columns:1fr}
  .offer{min-height:300px}
  .more-grid{grid-template-columns:1fr}
  .signup__grid,.visit__grid{grid-template-columns:1fr}
  .first-visit{grid-template-columns:1fr}
  .menu-pdf__frame{display:none}
  .signup__form{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;text-align:center;justify-items:center}
  .mobile-bar{position:fixed;display:grid;grid-template-columns:1fr 1fr;left:0;right:0;bottom:0;z-index:40;background:#030403;border-top:1px solid var(--gold)}
  .mobile-bar--single{grid-template-columns:1fr}
  /* The fixed bar used to cover the field being typed in (WCAG 2.2
     focus-not-obscured, scan 2026-10-13): keep focused fields scrolled
     clear of it, and hide it while a form field has focus. */
  html{scroll-padding-bottom:84px}
  body:has(form :is(input,select,textarea):focus) .mobile-bar{display:none}
  .mobile-bar a{display:flex;align-items:center;justify-content:center;min-height:60px;font:20px var(--display);letter-spacing:.06em}
  .mobile-bar a:last-child{background:var(--gold);color:#111}
}
@media (max-width:800px) and (max-aspect-ratio:3/5){
  .hero__image-crop img{width:285.205%;transform:translate(-59.94%,-10%)}
}
@media (max-width:800px) and (max-aspect-ratio:1/2){
  .hero__image-crop img{width:341.006%;transform:translate(-65.67%,-10%)}
}

@media (max-width:520px){
  :root{--pad:18px}
  h1{font-size:68px}
  h2{font-size:48px}
  .section{padding:64px 0}
  .hero{min-height:680px}
  .hero__copy{padding-top:260px}
  .hero__actions{grid-template-columns:1fr}
  .hero__actions .button:first-child{grid-column:auto}
  .button{width:100%}
  .promise p{font-size:22px}
  .food-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:230px 160px;min-height:0}
  .food-mosaic img:first-child{grid-column:1/3;grid-row:auto}
  .day{grid-template-columns:1fr;align-content:start;min-height:155px}
  .day>span{font-size:22px}
  .day strong{font-size:18px}
  .day small{font-size:11px}
  .offers-grid{gap:12px}
  .offer{padding:22px}
  .text-stats{grid-template-columns:1fr}
  .signup h2{font-size:44px}
  .visit__grid{gap:28px}
}

/* Sub-page intro banner (menu, golf, memberships, parties, more, etc.) */
.page-intro{background:var(--forest);border-bottom:1px solid rgba(224,194,124,.32);padding:56px 0 44px}
/* Same reasoning and same reduced value as .hero__copy above, applies
   to both sites as of 2026-09-01 -- the bleed logo overlaps sub-page
   headings otherwise, since .header (and the logo bleeding out of it)
   is shared across every page, not just the homepage hero. */
.page-intro{padding-top:72px}
.page-intro__back{display:inline-block;margin-bottom:20px;font:16px/1 var(--display);letter-spacing:.08em;color:var(--gold-light)}
.page-intro__back:hover{color:var(--ivory)}
.page-intro h1{font-size:clamp(48px,6vw,90px)}
.page-intro__lead{max-width:640px;color:#d9d0c2;font-size:clamp(17px,1.4vw,20px);margin:18px 0 0}
.page-cta{padding:0 0 clamp(70px,8vw,118px)}
@media (max-width:800px){
  .page-intro{padding:40px 0 32px}
}

/* Blog / articles (magazine layout). The whole .article wrapper (title
   band, hero image, content + sidebar) shares one continuous paper
   background -- a single light "page," editorial-site style (The
   Athletic / Golf.com), rather than separate light cards floating on
   the sitewide dark body background. Sitewide .page-intro on every
   OTHER sub-page is untouched and stays dark green. */
.article{background:var(--paper);padding-bottom:64px}
.article .page-intro{background:none;border-bottom:1px solid rgba(7,51,43,.18)}
.article .page-intro__back{color:var(--forest)}
.article .page-intro__back:hover{color:var(--forest-2)}
.article .page-intro h1{color:var(--forest)}
.article .page-intro__lead{color:#2c2e2a}
.article__byline{color:#6b6455;font:16px var(--display);letter-spacing:.06em}
/* Byline + share icons on one row, right above the hero image, instead
   of the share icons sitting atop the body text further down -- reads
   as "date · share this" the way most editorial sites place it. */
.article__meta-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:14px}
.article__hero{margin:0 auto 40px;max-width:1052px}
.article__hero img{width:100%;height:auto;display:block;border-radius:4px}

/* Content + sidebar area. This, .article__hero above, and
   .article__intro-inner below are deliberately capped to the SAME
   1052px (720 content + 32 gap + 300 sidebar) so the page-intro title
   band and hero image both line up with the two-column area under
   them, instead of the sitewide 1320px default -- if this number
   changes, update all three rules together. */
.article__intro-inner{max-width:1052px}
.article__layout{display:grid;grid-template-columns:1fr;gap:32px;max-width:1052px}
.article__main{min-width:0}
.article__body{max-width:none;margin:0;padding:48px 40px 0;color:#2c2e2a;font-size:20px;line-height:1.7}
.article__body p{margin:0 0 24px}
.article__share{display:flex;gap:10px;flex-shrink:0}
.article__share a,.article__share-copy{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(7,51,43,.08);color:var(--forest);border:none;cursor:pointer;transition:background .15s ease,color .15s ease}
.article__share a:hover,.article__share a:focus-visible,.article__share-copy:hover,.article__share-copy:focus-visible{background:var(--forest);color:var(--ivory)}
.article__share-copy.is-copied{background:var(--gold);color:#111}

.article__sidebar{display:flex;flex-direction:column;gap:24px}
.ad-tile{background:#fff;border-radius:8px;border-top:3px solid var(--gold);box-shadow:0 2px 10px rgba(7,51,43,.09);overflow:hidden;color:#2c2e2a}
.ad-tile img{width:100%;height:150px;object-fit:cover;display:block}
.ad-tile__body{padding:18px}
.ad-tile h4{font:24px var(--display);letter-spacing:.02em;margin:4px 0 8px;color:var(--forest)}
.ad-tile p{margin:0 0 14px;font-size:16px;line-height:1.5}
.ad-tile .button{width:100%;text-align:center;font-size:15px;padding:10px 12px}
.ad-tile .eyebrow{color:#6b6455;font-size:14px}
.recent-articles{list-style:none;margin:0;padding:0}
.recent-articles li{border-top:1px solid rgba(7,51,43,.12);padding:12px 0}
.recent-articles li:first-child{border-top:none;padding-top:8px}
.recent-articles a{color:#2c2e2a;font-size:16px;line-height:1.4;text-decoration:none}
.recent-articles a:hover{color:var(--forest)}
.recent-articles__flag{display:inline-block;margin-left:6px;font:12px var(--display);letter-spacing:.05em;color:#8a5a1a;background:rgba(199,160,82,.25);padding:2px 6px;border-radius:4px;vertical-align:middle}
.recent-articles li.is-current{cursor:default}
.recent-articles li.is-current strong{color:var(--forest);font-size:16px}
.recent-articles__current{display:inline-block;margin-left:6px;font:12px var(--display);letter-spacing:.05em;color:var(--ivory);background:var(--forest);padding:2px 7px;border-radius:4px;vertical-align:middle}

/* "This week" sidebar events tile -- reuses the same feed as
   /whats-on/ (see pinseeker_article_events_tile()), just a shorter
   7-day window rendered as a compact list instead of the wider
   .events-list grid (which is styled for the sitewide dark theme, not
   this white card). */
.sidebar-events{list-style:none;margin:0 0 14px;padding:0}
.sidebar-events li{padding:9px 0;border-top:1px solid rgba(7,51,43,.12)}
.sidebar-events li:first-child{border-top:none;padding-top:0}
.sidebar-events__date{display:block;font:14px var(--display);letter-spacing:.04em;color:var(--forest)}
.sidebar-events__title{display:block;font-size:16px;line-height:1.35;margin-top:2px}

/* Recent-articles block repeated at the end of the article body
   (in addition to the sidebar tile) -- a wider list, so it gets its
   own 2-column treatment on larger screens rather than reusing the
   sidebar's cramped single column. */
/* Responsive 16:9 embed wrapper for real official YouTube videos inside
   an article body -- embedding is the officially-sanctioned way to use
   third-party video (no rehosting), unlike the static reference images
   this project is more cautious about. */
.article__video{position:relative;aspect-ratio:16/9;margin:28px 0 8px;border-radius:6px;overflow:hidden;background:#000}
.article__video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.article__video-caption{margin:0 0 24px;color:#6b6455;font-size:15px}
/* Required photo-credit line for real, licensed reference photography
   (public domain / Creative Commons) -- sits directly under the image
   it credits, pulled tight against it (negative top margin cancels
   .article__body img's own bottom margin) since it's a caption, not a
   new block of body copy. */
.photo-credit{margin:-16px 0 24px;color:#6b6455;font-size:13px;font-style:italic}
.photo-credit a{color:inherit;text-decoration:underline;text-decoration-color:rgba(107,100,84,.5)}
.photo-credit a:hover,.photo-credit a:focus-visible{color:var(--forest);text-decoration-color:currentColor}

.article__more{margin:48px 0 0;padding-top:32px;border-top:1px solid rgba(7,51,43,.15)}
.article__more .recent-articles{margin-top:14px}
@media (min-width:600px){
  .article__more .recent-articles{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .article__more .recent-articles li:nth-child(2){border-top:none;padding-top:8px}
}

@media (min-width:1100px){
  .article__layout{grid-template-columns:720px 300px}
}
/* Sitewide h2 (clamp(44px,5vw,82px), uppercase) is sized for big section
   banners -- overwhelming and hard to read as an inline article
   subheading, especially for a full phrase rather than a short label.
   Editorial-appropriate size/case instead: a clear step up from body
   text, not a competing headline. */
.article__body h2{font-size:28px;line-height:1.25;text-transform:none;letter-spacing:.01em;color:var(--forest);margin:40px 0 18px}
.article__body h2:first-child{margin-top:0}
.article__float{float:right;width:44%;max-width:320px;margin:0 0 22px 28px}
.article__float-image{width:100%;height:auto;display:block;border-radius:4px}
.article__gallery,.article__body .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:36px 0 0;clear:both}
.article__body .gallery-item{margin:0}
.article__body .gallery img{width:100%;height:180px;object-fit:cover;border-radius:4px}
.article__tags{clear:both;margin-top:36px;padding-top:20px;border-top:1px solid rgba(7,51,43,.15);display:flex;gap:10px;flex-wrap:wrap}
.article__tags a{font:13px var(--display);letter-spacing:.05em;color:var(--forest);background:rgba(7,51,43,.08);padding:6px 14px;border-radius:999px}
.article__body img{width:100%;height:auto;display:block;border-radius:6px;margin:0 0 24px}

/* Multi-part series nav: "Part N of M" interlinks + previous/next --
   only rendered at all when an article has a _pinseeker_series value
   (see pinseeker_article_series_nav() in inc/articles.php). */
.article__series-nav{clear:both;margin:40px 0 0;padding-top:28px;border-top:1px solid rgba(7,51,43,.15)}
.series-nav__list{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:10px 0 22px;padding:0}
.series-nav__list a,.series-nav__list li.is-current span{display:inline-block;font:14px var(--display);letter-spacing:.05em;padding:7px 15px;border-radius:999px}
.series-nav__list a{color:var(--forest);background:rgba(7,51,43,.08);text-decoration:none}
.series-nav__list a:hover{background:var(--forest);color:var(--ivory)}
.series-nav__list li.is-current span{background:var(--forest);color:var(--ivory)}
.series-nav__prevnext{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.series-nav__prev,.series-nav__next{font:16px var(--display);letter-spacing:.02em;color:var(--forest);text-decoration:none;max-width:48%}
.series-nav__prev:hover,.series-nav__next:hover{text-decoration:underline}
.series-nav__next{margin-left:auto;text-align:right}
/* Same tiered-breakpoint scaling already used elsewhere (e.g. the
   memberships table) rather than a fluid clamp(), for consistency --
   base size is tuned for mobile, steps up at the same 800/1100px tiers.
   Column width (max-width:680px above) deliberately does NOT widen here
   -- a readable ~65-75 character line length is the point of a narrow
   article column, at any viewport size. */
@media (min-width:800px){
  .article__body{font-size:21px}
  .article__body h2{font-size:30px}
}
@media (min-width:1100px){
  .article__body{font-size:22px}
  .article__body h2{font-size:32px}
}
@media (max-width:700px){
  .article__float{float:none;width:100%;max-width:none;margin:0 0 22px}
  .article__gallery,.article__body .gallery{grid-template-columns:1fr 1fr}
  .article__body{padding:32px 22px 0}
}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:rgba(0,0,0,.18);border-top:2px solid var(--gold)}
.blog-card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:rgba(0,0,0,.3)}
.blog-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card__body{padding:22px}
.blog-card__body h3{font-size:24px;margin:6px 0 8px}
.blog-card__body p{color:#d5ccbe}
.blog-card__link{display:inline-block;margin-top:10px;font:15px var(--display);letter-spacing:.06em;color:var(--gold-light);border-bottom:1px solid var(--gold)}
@media (max-width:1100px){
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .blog-grid{grid-template-columns:1fr}
}

/* Reviewer menu (inc/reviewer.php) -- cluster dev/staging only, PIN-gated,
   deliberately muted so it never reads as a real site feature. Bottom left;
   the GHL chat bubble takes the bottom right (assets/js/main.js). */
.reviewer{position:fixed;left:16px;bottom:24px;z-index:50;font-family:var(--body)}
.reviewer__toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:#1b1d1a;color:#a49c8e;border:1px solid rgba(183,175,162,.4);border-radius:999px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.reviewer__toggle:hover,.reviewer--open .reviewer__toggle{color:var(--ivory);border-color:rgba(183,175,162,.7)}
.reviewer__panel{display:none;position:absolute;left:0;bottom:calc(100% + 10px);width:270px;max-width:calc(100vw - 32px);max-height:70vh;overflow:auto;background:#1b1d1a;border:1px solid rgba(183,175,162,.35);border-radius:10px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.reviewer--open .reviewer__panel{display:block}
.reviewer--unlocked .reviewer__pin{display:none}
.reviewer__pin label,.reviewer__panel small{display:block;padding:4px 10px 8px;color:#7a746a;font-size:11px;letter-spacing:.06em}
.reviewer__panel small{padding-top:12px}
.reviewer__panel small:first-child{padding-top:4px}
.reviewer__pin-row{display:flex;gap:8px;padding:0 10px}
.reviewer__pin input{flex:1;min-width:0;background:#0f100e;color:var(--ivory);border:1px solid rgba(183,175,162,.35);border-radius:6px;padding:8px 10px;font-size:16px;letter-spacing:.2em}
.reviewer__pin button{background:transparent;color:#c9c2b4;border:1px solid rgba(183,175,162,.4);border-radius:6px;padding:8px 12px;font-size:13px;cursor:pointer}
.reviewer__msg{margin:8px 10px 2px;min-height:1em;color:#c9a46a;font-size:13px}
.reviewer__menu a{display:block;padding:8px 10px;border-radius:6px;font-size:14px;color:#c9c2b4}
.reviewer__menu a:hover{background:rgba(255,255,255,.06);color:var(--ivory)}
.reviewer__months{display:grid;grid-template-columns:1fr 1fr 1fr}
.reviewer__months a{padding:7px 10px;font-size:13px}
/* /review/docs/ page (inc/reviewer.php) */
.docs-page h1{margin-bottom:24px}
.docs-page__pin{max-width:360px}
.docs-page__pin label{display:block;margin-bottom:8px;color:#b7afa2;font-size:14px}
.docs-page__row{display:flex;gap:10px}
.docs-page__row input{flex:1;min-width:0;background:#0f100e;color:var(--ivory);border:1px solid rgba(183,175,162,.35);border-radius:6px;padding:10px 12px;font-size:18px;letter-spacing:.2em}
.docs-page__msg{min-height:1.2em;margin-top:10px;color:#c9a46a}
.docs-page__index h2{font-size:clamp(22px,2.4vw,30px);margin:28px 0 8px}
.docs-page__index ul{list-style:none;margin:0;padding:0;max-width:860px}
.docs-page__index li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:10px 0;border-bottom:1px solid rgba(183,175,162,.18)}
.docs-page__index a{color:var(--ivory)}
.docs-page__index a:hover{color:#e0c27c}
.docs-page__index span{color:#7a746a;font-size:13px}
/* Reviewer doc viewer (inc/reviewer.php, assets/js/main.js) */
.reviewer-doc-open{overflow:hidden}
.reviewer-doc-open chat-widget{display:none!important} /* its card would sit on the reader; also when the chat loads after a #doc= deep link */
.reviewer-doc{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#141513;color:#d8d2c6;font-family:var(--body)}
.reviewer-doc[hidden]{display:none}
.reviewer-doc__bar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 20px;border-bottom:1px solid rgba(183,175,162,.3);background:#1b1d1a}
.reviewer-doc__bar h2{margin:0;font-size:clamp(20px,2.4vw,28px);color:var(--ivory)}
.reviewer-doc__meta{margin:4px 0 0;color:#7a746a;font-size:12px;overflow-wrap:anywhere}
.reviewer-doc__close{flex:none;width:40px;height:40px;background:transparent;color:#c9c2b4;border:1px solid rgba(183,175,162,.4);border-radius:999px;font-size:24px;line-height:1;cursor:pointer}
.reviewer-doc__body{flex:1;overflow:auto;padding:20px max(16px,calc((100vw - 860px)/2)) 60px;font-size:15px;line-height:1.6}
.reviewer-doc__body h1,.reviewer-doc__body h2,.reviewer-doc__body h3,.reviewer-doc__body h4{color:var(--ivory);margin:1.4em 0 .5em;line-height:1.2;scroll-margin-top:12px}
.reviewer-doc__body h1{font-size:30px}.reviewer-doc__body h2{font-size:24px}.reviewer-doc__body h3{font-size:19px}.reviewer-doc__body h4{font-size:16px}
.reviewer-doc__body a{color:#e0c27c;text-decoration:underline}
.reviewer-doc__body code{background:#0f100e;padding:1px 5px;border-radius:4px;font-size:.9em;overflow-wrap:anywhere}
.reviewer-doc__body pre{background:#0f100e;padding:12px;border-radius:6px;overflow:auto}
.reviewer-doc__body pre code{padding:0;overflow-wrap:normal}
.reviewer-doc__body table{display:block;overflow-x:auto;border-collapse:collapse;margin:1em 0;font-size:14px}
.reviewer-doc__body th,.reviewer-doc__body td{border:1px solid rgba(183,175,162,.3);padding:6px 8px;vertical-align:top;text-align:left}
.reviewer-doc__body th{background:#1b1d1a;color:var(--ivory)}
.reviewer-doc__body ul,.reviewer-doc__body ol{padding-left:1.4em}
.reviewer-doc__body blockquote{margin:1em 0;padding:4px 14px;border-left:3px solid #e0c27c;color:#b7afa2}
@media (max-width:800px){
  .reviewer{bottom:76px}
}

/* /legacy/ archive page */
.legacy-section{padding:36px 0;border-bottom:1px solid rgba(224,194,124,.18)}
.legacy-section h2{font-size:clamp(28px,3vw,40px);margin-bottom:10px}
.legacy-section ul{margin:12px 0 0;padding:0;list-style:none}
.legacy-section li{padding:8px 0;color:#c8c0b3;border-top:1px solid rgba(224,194,124,.12)}

/* /faq/ page */
.faq-item{padding:28px 0;border-bottom:1px solid rgba(224,194,124,.18)}
.faq-item h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.faq-item p{color:#d1c8ba;margin:0}

/* Video placeholder — same idea as the placeholder photos: real asset TBD */
/* First-visit explainer on /golf/ (replaced the coming-soon video, 2026-10-14) */
.first-visit{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.first-visit__photo{margin:0;border:1px solid var(--line);overflow:hidden;aspect-ratio:4/3}
.first-visit__photo img{width:100%;height:100%;object-fit:cover}
.first-visit__steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.first-visit__steps li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:2px;align-items:start}
.first-visit__num{grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--gold);color:#111;display:flex;align-items:center;justify-content:center;font:24px/1 var(--display)}
.first-visit__steps h3{margin:2px 0 0;font:22px/1 var(--display);letter-spacing:.04em;color:var(--ivory)}
.first-visit__steps p{margin:0}
/* /menu/: the printed menu (PDF) embedded, as on the old site (2026-10-14) */
.menu-pdf__frame{display:block;width:100%;height:min(1300px,90vh);border:1px solid var(--line);background:#fff}
.menu-pdf__fallback{margin-top:12px;font-size:14px}
/* Placeholder for an external CTA whose URL isn't set yet (pinseeker_cta_html) */
.button.is-pending{opacity:.55;cursor:not-allowed;pointer-events:none;background:transparent;border-color:var(--line);color:var(--gold-light)}
.is-pending__note{font-size:.7em;letter-spacing:.08em;opacity:.85}
.legacy-note{display:inline-block;margin-top:10px;padding:6px 12px;border:1px solid rgba(224,194,124,.35);border-radius:999px;font:14px var(--display);letter-spacing:.04em;color:var(--gold-light)}

/* Native forms (see inc/forms.php) */
.form-grid{display:grid;gap:18px;max-width:640px;margin-top:20px}
.form-grid>label{display:grid;gap:6px}
.form-grid>label>span{font:14px/1 var(--display);letter-spacing:.06em;color:var(--gold-light)}
.form-grid input[type="text"],.form-grid input[type="email"],.form-grid input[type="tel"],.form-grid input[type="date"],.form-grid select,.form-grid textarea{min-height:48px;background:#121612;color:var(--ivory);border:1px solid rgba(243,234,219,.4);padding:10px 14px;color-scheme:dark;font-family:var(--body);font-size:16px}
.form-grid textarea{min-height:96px;resize:vertical}
.form-grid fieldset{border:1px solid rgba(224,194,124,.3);padding:16px;display:flex;flex-wrap:wrap;gap:10px 20px;margin:0}
.form-grid legend{padding:0 8px;font:15px var(--display);letter-spacing:.06em;color:var(--gold-light)}
.form-grid .checkbox{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:#d1c8ba;cursor:pointer;line-height:1.4}
.form-grid .checkbox input{width:auto;min-height:0;margin-top:3px;flex-shrink:0}
.form-grid button{justify-self:start}
.native-form__thanks{font:24px/1.1 var(--display);letter-spacing:.04em;color:var(--gold-light);margin:0}
/* Required fields are marked visibly, not only to screen readers (the
   required attribute already covers those). */
.form-grid>label:has(:required)>span::after{content:" *";color:var(--gold)}
.form-grid__note{font-size:13px;color:#d1c8ba;margin:0}
/* Honeypot field (see pinseeker_honeypot_field() in inc/forms.php) --
   positioned off-screen rather than display:none/opacity:0, which some
   spam bots specifically check for and skip. */
.native-form__hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* Upcoming events list (see inc/calendar.php) */
.events-list{display:grid;gap:1px;background:rgba(224,194,124,.22);border:1px solid rgba(224,194,124,.4);margin-top:20px}
.events-list__item{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:16px 20px;background:rgba(6,22,18,.45)}
.events-list__item time{font:17px/1.2 var(--display);letter-spacing:.03em;color:var(--gold)}
.events-list__item strong{display:block;font:20px var(--display);letter-spacing:.03em}
.events-list__item small{display:block;margin-top:4px;color:#c8c0b3;letter-spacing:.06em}
@media (max-width:600px){
  .events-list__item{grid-template-columns:1fr;gap:6px}
}

/* /golf-ball-promo/ */
.promo-steps{list-style:none;counter-reset:promo-step;margin:20px 0;padding:0;display:grid;gap:14px}
.promo-steps li{counter-increment:promo-step;padding-left:44px;position:relative;color:#d5ccbe}
.promo-steps li::before{content:counter(promo-step);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#111;font:18px/30px var(--display);text-align:center}

/* League system (homepage micro-promo, /golf/ preview, /leagues/ — see
   inc/leagues.php). Deliberately reuses this theme's existing tokens/
   button/eyebrow/callout treatment throughout — the design spec's own
   note: "structural wireframe, not a visual redesign." */
/* Featured: the month's biggest event or deal (inc/featured.php). Sits
   above the homepage hero, so it's the first thing a visitor sees. */
.featured{background:linear-gradient(135deg,#0b0d0b 0%,#1a1408 100%);border-bottom:2px solid var(--gold)}
.featured__inner{padding:72px 0 34px;display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.featured--image .featured__inner{grid-template-columns:3fr 2fr}
.featured__copy h2{font-size:clamp(44px,6vw,86px);line-height:.95;margin:4px 0 10px;color:var(--ivory)}
.featured__when{margin:0 0 14px;font:clamp(22px,2.4vw,30px)/1.1 var(--display);letter-spacing:.08em;color:var(--gold-light)}
.featured__details{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.featured__details li{padding:8px 14px;border:1px solid rgba(224,194,124,.45);border-radius:999px;color:var(--ivory);font-size:16px}
.featured__actions{display:flex;flex-wrap:wrap;gap:12px}
.featured__image img{display:block;width:100%;height:auto;border:1px solid rgba(224,194,124,.35)}
/* The band takes the header-bleed spot: the hero's photo normally rises
   86px (70px mobile) behind the translucent header (.hero__image above),
   which would cover the band's bottom. The band's top padding clears the
   bleed logo, same value as .page-intro. */
.featured + .hero .hero__image{top:0}

.league-promo{background:var(--forest);border-block:1px solid rgba(224,194,124,.32)}
.league-promo__inner{padding:28px 0;display:grid;grid-template-columns:3fr 2fr;gap:32px;align-items:center;min-height:160px}
.league-promo__copy h2{font-size:clamp(30px,3.2vw,46px);margin:6px 0 10px}
/* Compact all-caps metadata line ("THU 6:30 PM · 6 WEEKS · ...") — same
   uppercase-via-CSS treatment as .eyebrow/.callout elsewhere, so
   inc/leagues.php can store/reuse the underlying strings in normal case. */
.league-promo__meta{margin:0 0 10px;font:18px/1.3 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--gold-light)}
.league-promo__desc{margin:0;color:#d5ccbe;max-width:520px}
.league-promo__also{margin:12px 0 0;font-size:14px;color:var(--muted)}
.league-promo__actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.league-promo__secondary{font:15px/1 var(--body);letter-spacing:.02em;color:var(--gold-light);border-bottom:1px solid var(--gold)}

/* League cards — 3 across desktop, 2 tablet, 1 mobile (design spec
   section 14), shared by /golf/'s 2-card preview and /leagues/'s full
   board. Visual language matches .offer/.instructor-card (existing card
   pattern) rather than introducing a new one. */
.league-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.league-grid--preview{grid-template-columns:repeat(2,1fr);max-width:800px}
.league-card{padding:28px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,rgba(13,68,56,.52),rgba(7,8,7,.8))}
.league-card h3{margin:0;font-size:clamp(24px,2.2vw,30px)}
.league-card__status{display:inline-block;align-self:flex-start;margin:0;padding:5px 12px;border-radius:999px;font:14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.league-card__status--open,.league-card__status--few_spots{background:var(--gold);color:#111}
.league-card__status--waitlist,.league-card__status--coming_soon{background:transparent;border:1px solid var(--line);color:var(--gold-light)}
.league-card__status--in_progress{background:rgba(164,209,0,.16);color:var(--lime)}
.league-card__schedule{margin:0;font:20px/1.15 var(--display);letter-spacing:.03em;color:var(--ivory)}
.league-card__details{list-style:none;margin:0;padding:0;color:#d1c8ba}
.league-card__details li{padding:3px 0}
.league-card__price{margin:0;font:22px/1.15 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--gold-light)}
.league-card__note{margin:0;color:var(--muted)}
.league-card .actions{margin-top:auto;padding-top:8px}

/* Per-league sign-up section (id=league slug) and the generic
   league-interest section further down /leagues/ — both are plain
   .section wraps around the shared native-form styling, no new CSS
   needed beyond a slightly muted divider so they read as distinct from
   the card grid above them. */
.section--league-signup,.section--league-interest{border-top:1px solid rgba(224,194,124,.18)}

/* "How leagues work" — 3 plain text columns, no icon row (design spec
   section 8). */
.how-it-works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:28px}
.how-it-works-grid__number{margin:0 0 8px;font:18px/1 var(--display);letter-spacing:.1em;color:var(--gold)}
.how-it-works-grid__step h3{margin:0 0 8px;font-size:clamp(22px,2vw,28px)}
.how-it-works-grid__step p{margin:0;color:#d1c8ba}

@media (max-width:1100px){
  .league-grid{grid-template-columns:1fr 1fr}
  .league-grid--preview{grid-template-columns:1fr 1fr}
  .how-it-works-grid{grid-template-columns:1fr}
}

@media (max-width:800px){
  .league-promo__inner{grid-template-columns:1fr;padding:20px 0;min-height:0}
  .featured__inner,.featured--image .featured__inner{grid-template-columns:1fr;padding:40px 0 28px;gap:20px}
  .league-promo__actions{align-items:stretch}
  .league-promo__actions .button{width:100%;text-align:center}
  .league-grid,.league-grid--preview{grid-template-columns:1fr}
}