/* ============================================================================
   WRX EDITORIAL SYSTEM — the single shared foundation for every editorial page.

   Master reference: /swing (swing.html), CEO-locked 2026-07-18.
   Every editorial page links THIS file and inherits paper, ink, WRX green, the
   reading typography, and the green-emphasis cue EXACTLY — never redefined per
   page. This is the mechanism that makes drift impossible: change a value here
   once and every editorial page moves together.

   Per-chapter freedom (NOT here): each page keeps its own layout, display
   headline, photography, footer statement, and mobile rules in its own <style>.
   Shared = the system (this file). Unique = the composition (the page).

   Font @font-face URLs below resolve relative to THIS file (…/v2/fonts/), so
   every page that links it loads the identical faces regardless of its folder.
   ============================================================================ */

@font-face { font-family:'Barlow'; src:url('fonts/Barlow-Regular.ttf')  format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('fonts/Barlow-Medium.ttf')   format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('fonts/Barlow-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('fonts/Barlow-Italic.ttf')   format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('fonts/Barlow-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('fonts/Barlow-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'DM Serif Display'; src:url('fonts/DMSerifDisplay-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'DM Serif Display'; src:url('fonts/DMSerifDisplay-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('fonts/Manrope-Variable.ttf') format('truetype-variations'); font-weight:200 800; font-display:swap; }
/* Barlow faces above are retained EXCLUSIVELY for the TOURSPECWRX wordmark — official
   standard (CEO 2026-07-23): Barlow 600 / WRX 700, tracking .04em, TRUE ITALIC forward
   lean (movement, progress, performance). Never use Barlow elsewhere. */

:root {
  /* --- HERITAGE PERFORMANCE typography (CEO-approved standard, 2026-07-23) ---
     Display = DM Serif Display (true italic available) · body/UI = Manrope.
     The upright Barlow wordmark is the single exception, preserved as standardized. */
  --display-font:'DM Serif Display',Georgia,serif;
  --ui-font:'Manrope','Helvetica Neue',Arial,sans-serif;
  /* --- foundation tokens (master values from /swing) --- */
  --paper:#FFFFFF;          /* editorial paper — pure white. The off-white was the root cause of the green-mismatch saga; never vary it. */
  --ink:#000000;            /* headlines + reading body — black, full presence */
  --ink-soft:#3C3B37;       /* secondary / caption — readable, never lightened for aesthetics */
  --wrx-green:#6C900B;
  /* Same hue, one step darker — for SMALL green text only (body cues, colophon links).
     #6C900B measures 3.73:1 on white and passes only as large text; these uses are
     11-17px, where AA requires 4.5:1. #5E7D0A measures 4.55:1. The approved display
     green above is unchanged. */
  --wrx-green-text:#5E7D0A;      /* WRX editorial green — light-room daylight value (dark rooms use #A6CE39) */

  /* --- WRX FLOATING PRINT STANDARD (CEO-locked 2026-07-19) --------------------
     THE single elevation for every editorial photograph on the site. Every primary image is presented as a framed
     print floating above the page: soft elevation, clean edges, white breathing room, NO border (shadow only).

     Geometry approved on the /contact print. It is deliberately wider and softer than a panel's shadow rather than
     darker: a dark photograph visually swallows a tight penumbra, so the same ink is spread over more area to read
     at the same perceived height. Ink is identical to the panel elevation (alphas .05 / .11 / .20) — never darken
     this to make an image "pop". Ambient layer reaches ~42px below the print.

     ONE system, ONE implementation: every print reads THIS token. Do not redefine it per page, and do not add a
     page-local shadow to an image — that is precisely the drift this file exists to prevent. The Hero is exempt
     (locked full-bleed cinematic language). UNIVERSAL since CEO 2026-07-22: every content photograph on every
     page floats on this token — including the services cards, where the card is the photograph's MOUNT (photo +
     pricing float as one print: no border, no hover lift). No surface that carries a photograph gets a private
     shadow. */
  /* DIMENSIONAL STEP-UP (CEO 2026-07-23, reference: the /contact print): slightly more
     presence — the print floats a few millimeters above the page. Same three-layer
     anatomy and warm ink; the increase is wider and softer, never darker: deeper drop,
     broader diffusion, a whisper more alpha. One token, every content photograph. */
  --lift-print:0 2px 4px -1px rgba(24,22,17,.07), 0 16px 32px -10px rgba(24,22,17,.14), 0 44px 80px -28px rgba(24,22,17,.24);

  /* --- THE QUIET DIVIDER (CEO-locked 2026-07-19) -----------------------------
     The single separator that closes every page. A hairline with the faintest
     downward depth — the same ink family and the same "wider and softer rather
     than darker" logic as --lift-print, so the page's ending reads like the edge
     of a mounted print rather than a branded rule.

     It replaced the 2px green rule by CEO ruling: the footer is a quiet
     signature, never a visual feature, and must never compete for attention.
     ONE definition — every footer template reads these two tokens. Do not give a
     footer its own rule, and never reintroduce green here (green stays on the
     WRX of the wordmark, where it identifies rather than divides). */
  --hairline:rgba(24,22,17,.11);
  --hairline-depth:0 1px 2px -1px rgba(24,22,17,.09), 0 4px 9px -6px rgba(24,22,17,.13);

  /* --- PRIMARY CTA ELEVATION (CEO-locked 2026-07-19) -------------------------
     The one visual cue that separates ACTION from editorial: every primary CTA
     sits very slightly off the page, and lifts a little further on hover. Size,
     typography, gold outline, and proportions are never changed to achieve this
     — depth is the whole mechanism.

     Same rgba(24,22,17) ink as --lift-print and --hairline-depth, but a tighter,
     shorter penumbra: a button is a small object resting close to the page,
     where a print floats above it. Three layers (contact / mid / ambient) so the
     edge stays crisp while the falloff stays soft.

     ONE definition — .cta is currently declared per page, so these tokens are
     what keep the three buttons identical. Never hand-write a CTA shadow. */
  /* Four layers, because a raised object needs all four to read as physical:
     ① contact shadow — the tight dark line where the object nearly touches the page
     ② form shadow    — the body of the cast shadow, offset downward
     ③ ambient        — the wide soft falloff that sets it in the room
     ④ top highlight  — the lit upper edge (inset), which is what actually sells "raised"
     Light from above, so the highlight is on top and every shadow falls down. */
  /* Light-room ink is ~60% of the dark-room strength. NOT an inconsistency: a shadow on
     white paper reads far stronger than the same shadow on a near-black photograph, so
     equal alpha would make the editorial buttons look heavier than the hero. The numbers
     differ so the buttons LOOK the same — optical parity over numeric parity (CEO 2026-07-19). */
  --lift-cta:0 1px 1px -.5px rgba(24,22,17,.10), 0 2px 5px -2px rgba(24,22,17,.11), 0 7px 16px -8px rgba(24,22,17,.15), inset 0 1px 0 rgba(255,255,255,.5);
  --lift-cta-hover:0 1px 2px -.5px rgba(24,22,17,.13), 0 4px 9px -3px rgba(24,22,17,.14), 0 14px 26px -12px rgba(24,22,17,.20), inset 0 1px 0 rgba(255,255,255,.7);

  /* Dark-room variant (the hero, over the photograph). The light-room ink above is
     rgba(24,22,17) — LIGHTER than the hero's #0D0D0E backdrop — so it composites to a
     ~1-unit change and would read as no shadow at all, or faintly the wrong way. On a
     near-black surface only black casts. Same three-layer geometry, black ink. */
  --lift-cta-dark:0 1px 2px -.5px rgba(0,0,0,.75), 0 4px 9px -2px rgba(0,0,0,.62), 0 14px 28px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.13);
  --lift-cta-dark-hover:0 1px 3px -.5px rgba(0,0,0,.80), 0 7px 15px -3px rgba(0,0,0,.70), 0 24px 44px -14px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.18);

  /* --- PRIMARY CTA GEOMETRY (CEO-locked 2026-07-19) --------------------------
     Canonical button = the homepage hero's START YOUR BUILD. Every primary CTA
     on the site reads these values, so all three are one object in three places.
     .cta is still declared per page; these tokens are what hold it together.

     Room-specific by design, NOT drift — the same two-value logic the brand
     already uses for green: the gold hue and the shadow ink change between the
     dark hero and the light editorial pages so the button stays legible and its
     shadow can actually cast. Geometry and typography never change. */
  /* floor raised 10px→12.5px: min(1.06vw,11.448px) only falls below 12.5px under ~1179px, so desktop is
     untouched, but the old floor collapsed the button to 10px/38px tall on a phone —
     under the 44px minimum tap target. */
  /* HERO IS CANONICAL (CEO 2026-07-23, closing the morning's flagged divergence): the
     homepage hero's stepped-down START YOUR BUILD is THE primary button; these tokens
     now carry its geometry so every page's CTA is the same object. Gold hue and shadow
     ink stay room-specific per the optical-parity law — they differ so the buttons LOOK
     identical. The 44px tap target survives as a hit-area extension (shared .cta::after),
     not as visual box height; page mobile blocks keep their larger touch minimums. */
  --cta-font-size:clamp(12px,min(.88vw,9.504px),14.5px);
  --cta-min-h:0px;   /* visual box hugs the label — the tap floor moved to .cta::after */
  --cta-weight:500;         /* dark room (hero) — cream letters on a near-black photograph */
  /* Light rooms drop one step. Dark-on-light irradiates: black at 500 on white paper reads
     visibly bolder than cream at 500 on the hero, at the identical size and tracking. 400
     is what makes them look like the same lettering (CEO: visual consistency, not identical
     CSS values). Contrast is unaffected — black on white stays 21:1. */
  --cta-weight-light:400;
  /* PROPORTION PASS (CEO 2026-07-20): the button system read as shouting rather than
     guiding. Reduced ~20% — the maximum available, because 55px x 0.80 = 44px is exactly
     the minimum tap target and 25% would land at 41px, below it. Font-size deliberately
     UNCHANGED: legibility is non-negotiable, so the mass came out of padding, tracking,
     border weight and arrow, not the lettering. */
  --cta-tracking:.115em;  /* quiet hierarchy site-wide (CEO 2026-07-23) */
  --cta-pad:.62em 1.15em;
  --cta-gap:.6em;
  --cta-radius:3px;
  --cta-border-w:1px;
  --cta-arrow-w:1.15em;
  --cta-arrow-h:.54em;
  --cta-arrow-stroke:1.35;

  /* Label definition (CEO 2026-07-19): the button labels read lighter than the site's
     reading copy (a CTA at 400 beside prose at 500), but weight, size, and shadow are
     locked. This is the SAME mechanism .ed-prose .g already uses to lift green cues to
     the black body's visual weight — a hair of same-colour stroke painted behind the
     fill, which thickens the letterform optically WITHOUT changing font-weight and
     WITHOUT changing advance width, so no geometry moves.
     .021em is the green cue's full step; a label only needs about half that.
     `currentColor` makes it correct in both rooms automatically. */
  --cta-ink-def:.011em;

  /* --- reading typography (the shared editorial prose treatment) --- */
  --ed-font:'Manrope','Helvetica Neue',Arial,sans-serif;
  --ed-body-size:clamp(1.02rem,min(1.1vw,11.88px),1.12rem);
  --ed-body-line:1.68;
  --ed-body-weight:400;
  --ed-para-gap:1.02em;
}

/* THE BRAND NAME IS THE BRANDMARK, EVERYWHERE (CEO 2026-07-23, supersedes the
   inline-roman clause of BRAND_CORE §2): wherever TOURSPECWRX renders on the site it
   carries the header treatment — Barlow true italic 600, .04em tracking, uppercase,
   black TOURSPEC, green WRX — at the surrounding text's own size. The header is the
   single source of truth. (Domains like TOURSPECWRX.COM remain protected technical
   identifiers.) */
.wrx-brand { font-family:'Barlow','Helvetica Neue',Arial,sans-serif; font-style:italic;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap; }
.wrx-brand b { color:var(--wrx-green); font-weight:700; }

/* THE SHARED TAP FLOOR (CEO 2026-07-23, with the hero-canonical geometry): the visual
   button hugs its label; the 44px accessibility target lives on this invisible
   extension instead. Every page's .cta inherits it; page rules may override the
   pseudo-element (the hero already carries its own identical one). */
.cta { position:relative; }
.cta::after { content:""; position:absolute; inset:-6px 0; }

/* Reading prose — apply this class to an editorial page's body-copy container.
   Black at full weight (grayscale smoothing OFF so black never thins to gray). */
.ed-prose {
  font-family:var(--ed-font);
  font-size:var(--ed-body-size);
  line-height:var(--ed-body-line);
  font-weight:var(--ed-body-weight);
  color:var(--ink);
  text-rendering:optimizeLegibility;
}
.ed-prose p + p { margin-top:var(--ed-para-gap); }

/* Green emphasis cue — the reading-guide word inside editorial prose.
   Optical-weight match: no bold-italic Barlow face exists and #6C900B reads
   lighter than black at equal stroke, so a subtle same-colour stroke is painted
   BEHIND the fill (thickens outward, clean counters) to lift the green to the
   black body's VISUAL weight. The rule is: green matches the black's visual
   weight, not the font-weight number. */
.ed-prose .g {
  color:var(--wrx-green-text);
  font-style:italic;
  font-weight:600;
  font-size:.955em;
  letter-spacing:-.008em;
  -webkit-text-stroke:.021em var(--wrx-green-text);
  paint-order:stroke fill;
}

/* ============================================================================
   GLOBAL SITE FOOTER — single source of truth (master = Contact page, CEO-locked
   2026-07-18). Self-contained explicit values → pixel-identical on every page
   regardless of that page's local tokens. Every page links this file and uses the
   identical <footer class="site-footer"> markup; no page defines its own footer CSS.
   ============================================================================ */
.site-footer { position:relative; padding:clamp(1rem,min(1.8vw,19.44px),1.4rem) min(3.2vw,34.56px) clamp(1.05rem,min(1.9vw,20.52px),1.45rem);
  border-top:0; background:#FFFFFF; }
/* the shared quiet divider — identical treatment on both footer templates */
.site-footer::before { content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--hairline); box-shadow:var(--hairline-depth); pointer-events:none; }
.site-footer .footer-inner { max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:.9rem 2.5rem; }
.site-footer .footer-lead { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; }
.site-footer .footer-statement { font-family:var(--display-font); font-weight:400;
  font-size:clamp(1.15rem,min(1.55vw,16.74px),1.42rem); line-height:1.1; letter-spacing:.01em; text-transform:none; color:#000000; }
.site-footer .footer-statement .accent { color:#6C900B; }
.site-footer .footer-social { display:flex; align-items:center; gap:1rem; }
.site-footer .footer-social a { color:#2E2E2E; display:inline-flex; transition:color 240ms ease, transform 240ms ease; }
.site-footer .footer-social a:hover, .site-footer .footer-social a:focus-visible { color:#6C900B; transform:translateY(-1px); }
.site-footer .footer-social a:focus-visible { outline:2px solid #6C900B; outline-offset:3px; border-radius:2px; }
.site-footer .footer-social svg { display:block; width:19px; height:19px; }
.site-footer .footer-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.3rem; font-size:.82rem; color:#2E2E2E; }
.site-footer .footer-legal { font-size:.78rem; color:#2E2E2E; letter-spacing:.01em; }

/* ============================================================================
   CANONICAL FOOTER SYSTEM — TWO TEMPLATES ONLY (CEO-locked 2026-07-19, final)
   ----------------------------------------------------------------------------
   Footer philosophy (CEO): not every page ends with a footer. Editorial pages
   end naturally; decision pages may carry one final takeaway. Never invent
   additional footer copy, and never invent a third footer style.

   TEMPLATE 1 — STATEMENT FOOTER  →  .site-footer  (defined above)
     Thin hairline · serif display statement, black lead + green payoff · social icons ·
     location + ©.  Pages: Services & Pricing · What If It's Not Your Swing ·
     Contact.  Each carries its own approved statement, set per page.

   TEMPLATE 2 — BRANDING FOOTER   →  .colophon-inner  (defined below)
     2px green rule · TOURSPECWRX wordmark left · contact and location right.
     Nothing else — deliberately thin, subtle, quiet.  Pages: Obsessed ·
     Is It You, or Your Clubs.  No statement on these pages.

   HOME — no footer of any kind. The homepage stays completely clean.

   .colophon-inner is the styled unit and sits directly inside a page's existing
   content container, inheriting that page's measure and padding. .site-colophon
   is an optional page-level wrapper for a footer outside the content column;
   set --colophon-measure to match the page.
   ============================================================================ */
.site-colophon { background:var(--paper); padding:0 var(--colophon-pad,min(3.2vw,34.56px)) clamp(1.5rem,min(2.4vw,25.92px),2.1rem); }
.site-colophon > * { max-width:var(--colophon-measure,1180px); margin-left:auto; margin-right:auto; }

.colophon-inner { position:relative; border-top:0; padding-top:clamp(.92rem,min(1.4vw,15.12px),1.22rem);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 2rem; }
/* the shared quiet divider — identical treatment on both footer templates */
.colophon-inner::before { content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--hairline); box-shadow:var(--hairline-depth); pointer-events:none; }
/* The footer wordmark IS the brandmark (CEO 2026-07-23, site-wide rule): identical
   construction to the approved header mark — Barlow true italic 600, .04em tracking,
   WRX 700 green — at the colophon's own smaller size. One logo, everywhere. */
/* Footer scale refinement (approved 2026-07-24): the footer wordmark matches the header
   wordmark's 1rem exactly — one logo, one size class — and the meta line holds one
   consistent size/tracking beside it. */
.colophon-inner .cw { font-family:'Barlow','Helvetica Neue',Arial,sans-serif;
  font-style:italic; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  font-size:1rem; color:var(--ink); white-space:nowrap; }
.colophon-inner .cw b { color:var(--wrx-green); font-weight:700; }
.colophon-inner .cmeta { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
/* BRAND STANDARD (CEO 2026-07-20, site-wide, no exceptions): wherever the TOURSPECWRX
   name appears, TOURSPEC is ink and WRX is green. The whole name is NEVER one colour.
   This link previously rendered "TOURSPECWRX.COM" entirely in green because the link
   colour applied to the whole string; the link now carries the page ink and only the
   <b> around WRX is green, exactly as the header wordmark does. */
.colophon-inner .cmeta a { color:var(--ink-soft); text-decoration:underline; text-underline-offset:.18em; }
.colophon-inner .cmeta a b { color:var(--wrx-green-text); font-weight:inherit; }
.site-footer .footer-legal b { color:var(--wrx-green-text); font-weight:inherit; }
.colophon-inner .cmeta a:hover, .colophon-inner .cmeta a:focus-visible { text-decoration:underline; }