/* ==========================================================================
   WOLFE & HOOVER - SHARED DESIGN SYSTEM  (wh-system.css, v1 2026-09-27)
   One file for the whole site: homepage, /book, /helm, /weather, /p.
   Include with:  <link rel="stylesheet" href="/assets/wh-system.css">
   Matches the Detroit FB flyers (charcoal / cream / gold, Barlow) and the
   red/white business cards (Viva Magenta #BB2649, Cloud #F0EEE9, contour mesh).

   Rules:
   - Use the tokens (var(--wh-*)), never raw hex, in page CSS.
   - Small text colours must be the *-text variants (all pass WCAG AA on paper).
   - No emoji anywhere (standing rule). Icons are inline SVG.
   - Phone is always 773-835-4289.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subset, OFL) ---- */
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-condensed-800.woff2) format("woff2")}

:root{
  /* Brand colour */
  --wh-red:#BB2649;          /* card magenta: primary action, accents (white text on it = 6.0:1) */
  --wh-red-deep:#9C1E3C;     /* hover/pressed, red text on paper (7.1:1) */
  --wh-red-tint:#F6E4E8;
  --wh-gold:#B9B288;         /* logo gold: rules, pinstripes, text on dark only */
  --wh-gold-text:#6E6A3E;    /* gold for small text on light (5.0:1) */
  --wh-slate:#879FB7;        /* logo slate: lines, text on dark */
  --wh-slate-text:#4A6480;   /* slate for small text/links on light */
  --wh-peri:#6667AB;         /* card contour mesh */

  /* Neutrals */
  --wh-night:#262634;        /* darkest band (card ink) */
  --wh-charcoal:#3A3F4F;     /* headings, flyer footer band (white text 10.5:1) */
  --wh-charcoal-2:#4A4D5C;   /* header band */
  --wh-ink:#22262F;          /* body text */
  --wh-muted:#5F6672;        /* secondary text (5.2:1 on paper) */
  --wh-hairline:#D5DBE2;
  --wh-tint:#EEF1F5;
  --wh-cloud:#F0EEE9;        /* card cream */
  --wh-paper:#F5F3EE;        /* page background (flyer cream) */
  --wh-white:#FFFFFF;

  /* Semantic */
  --wh-bg:var(--wh-paper);
  --wh-surface:var(--wh-white);
  --wh-text:var(--wh-ink);
  --wh-heading:var(--wh-charcoal);
  --wh-link:var(--wh-slate-text);
  --wh-primary:var(--wh-red);
  --wh-primary-hover:var(--wh-red-deep);
  --wh-on-primary:#FFFFFF;
  --wh-success:#2F6B4F;
  --wh-warning:#8A5A00;
  --wh-danger:var(--wh-red-deep);
  --wh-focus:#1F6FEB;

  /* Type */
  --wh-font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --wh-font-body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --wh-fs-xs:.8125rem;   /* 13 */
  --wh-fs-sm:.9375rem;   /* 15 */
  --wh-fs-base:1.0625rem;/* 17 */
  --wh-fs-lg:1.25rem;    /* 20 */
  --wh-fs-xl:clamp(1.75rem,5.5vw,2.5rem);
  --wh-fs-2xl:clamp(2.25rem,8vw,3.75rem);
  --wh-fs-hero:clamp(2.75rem,12vw,5.5rem);
  --wh-lh-tight:.95;
  --wh-lh-body:1.55;
  --wh-track-kicker:.18em;

  /* Space, shape, depth */
  --wh-s1:4px; --wh-s2:8px; --wh-s3:12px; --wh-s4:16px; --wh-s5:24px; --wh-s6:32px; --wh-s7:48px; --wh-s8:64px; --wh-s9:96px;
  --wh-radius-sm:6px; --wh-radius:10px; --wh-radius-lg:16px; --wh-radius-pill:999px;
  --wh-shadow-1:0 1px 2px rgba(34,38,47,.08),0 1px 1px rgba(34,38,47,.04);
  --wh-shadow-2:0 8px 28px rgba(34,38,47,.12);
  --wh-maxw:1120px;
  --wh-tap:48px;             /* minimum touch target */
  --wh-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}fieldset{min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--wh-bg);color:var(--wh-text);font:400 var(--wh-fs-base)/var(--wh-lh-body) var(--wh-font-body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--wh-link);text-underline-offset:.15em}
a:hover{color:var(--wh-red-deep)}
:focus-visible{outline:3px solid var(--wh-focus);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--wh-font-display);font-weight:800;color:var(--wh-heading);text-transform:uppercase;line-height:var(--wh-lh-tight);letter-spacing:.005em;margin:0 0 var(--wh-s4)}
h1{font-size:var(--wh-fs-hero)} h2{font-size:var(--wh-fs-2xl)} h3{font-size:var(--wh-fs-xl);line-height:1}
p{margin:0 0 var(--wh-s4)}
.wh-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wh-skip{position:absolute;left:var(--wh-s3);top:-60px;z-index:100;background:var(--wh-charcoal);color:#fff;padding:var(--wh-s3) var(--wh-s4);border-radius:var(--wh-radius-sm)}
.wh-skip:focus{top:var(--wh-s3)}

/* ---- Layout ---- */
.wh-wrap{width:100%;max-width:var(--wh-maxw);margin:0 auto;padding:0 var(--wh-s5)}
.wh-section{padding:var(--wh-s8) 0}
.wh-section--dark{background:var(--wh-charcoal);color:var(--wh-cloud)}
.wh-section--night{background:var(--wh-night);color:var(--wh-cloud)}
.wh-section--red{background:var(--wh-red);color:#fff}
.wh-section--dark :is(h1,h2,h3),.wh-section--night :is(h1,h2,h3),.wh-section--red :is(h1,h2,h3){color:#fff}
.wh-section--dark a:not(.wh-btn),.wh-section--night a:not(.wh-btn){color:var(--wh-gold)}
.wh-section--red a:not(.wh-btn){color:#fff}
.wh-grid{display:grid;gap:var(--wh-s4)}
@media (min-width:720px){.wh-grid--2{grid-template-columns:repeat(2,1fr)}.wh-grid--3{grid-template-columns:repeat(3,1fr)}.wh-section{padding:var(--wh-s9) 0}}

/* Light cards inside dark/red bands keep light-surface colours */
:is(.wh-section--dark,.wh-section--night,.wh-section--red) .wh-card:not(.wh-card--dark){color:var(--wh-text)}
:is(.wh-section--dark,.wh-section--night,.wh-section--red) .wh-card:not(.wh-card--dark) :is(h1,h2,h3){color:var(--wh-heading)}
:is(.wh-section--dark,.wh-section--night,.wh-section--red) .wh-card:not(.wh-card--dark) a:not(.wh-btn){color:var(--wh-red-deep)}
.wh-nowrap{white-space:nowrap}
:is(.wh-section--dark,.wh-section--night) :is(.wh-hint,.wh-note){color:var(--wh-hairline)}

/* ---- Kicker, rules, pinstripe ---- */
.wh-kicker{font:700 var(--wh-fs-xs)/1.2 var(--wh-font-body);letter-spacing:var(--wh-track-kicker);text-transform:uppercase;color:var(--wh-slate-text);margin:0 0 var(--wh-s3)}
.wh-section--dark .wh-kicker,.wh-section--night .wh-kicker{color:var(--wh-gold)}
.wh-section--red .wh-kicker{color:var(--wh-cloud)}
.wh-rule{width:96px;height:5px;background:var(--wh-gold);border:0;margin:var(--wh-s5) 0}
.wh-pinstripe{height:8px;background:linear-gradient(var(--wh-gold) 0 5px,var(--wh-slate) 5px 8px)}
.wh-accent{color:var(--wh-red)} .wh-section--dark .wh-accent,.wh-section--night .wh-accent{color:var(--wh-gold)}

/* ---- Buttons ---- */
.wh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--wh-s2);min-height:var(--wh-tap);padding:0 var(--wh-s5);border-radius:var(--wh-radius);border:2px solid transparent;font:700 var(--wh-fs-base)/1 var(--wh-font-body);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background .15s var(--wh-ease),transform .1s var(--wh-ease)}
.wh-btn:active{transform:translateY(1px)}
.wh-btn svg{width:20px;height:20px;flex:none}
.wh-btn--primary{background:var(--wh-primary);color:var(--wh-on-primary)}
.wh-btn--primary:hover{background:var(--wh-primary-hover);color:#fff}
.wh-btn--dark{background:var(--wh-charcoal);color:#fff}
.wh-btn--dark:hover{background:var(--wh-night);color:#fff}
.wh-btn--ghost{background:transparent;border-color:currentColor;color:var(--wh-charcoal)}
.wh-btn--ghost:hover{background:rgba(58,63,79,.06);color:var(--wh-charcoal)}
.wh-btn--light{background:#fff;color:var(--wh-red-deep)}
.wh-btn--light:hover{background:var(--wh-cloud);color:var(--wh-red-deep)}
.wh-btn--xl{min-height:60px;padding:0 var(--wh-s6);font-size:var(--wh-fs-lg);border-radius:var(--wh-radius-lg)}
.wh-btn--block{display:flex;width:100%}
.wh-btn[disabled],.wh-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.wh-section--dark .wh-btn--ghost,.wh-section--night .wh-btn--ghost,.wh-section--red .wh-btn--ghost{color:#fff}

/* ---- Cards, badges, lists ---- */
.wh-card{background:var(--wh-surface);border:1px solid var(--wh-hairline);border-radius:var(--wh-radius-lg);padding:var(--wh-s5);box-shadow:var(--wh-shadow-1);color:var(--wh-text)}
.wh-card h3{font-size:1.625rem;margin-bottom:var(--wh-s2)}
.wh-card--dark{background:var(--wh-night);border-color:rgba(255,255,255,.08);color:var(--wh-cloud)}
.wh-card--dark h3{color:#fff}
.wh-badge{display:inline-block;padding:4px 10px;border-radius:var(--wh-radius-pill);background:var(--wh-red-tint);color:var(--wh-red-deep);font:700 var(--wh-fs-xs)/1.3 var(--wh-font-body);letter-spacing:.08em;text-transform:uppercase}
.wh-badge--gold{background:rgba(185,178,136,.22);color:var(--wh-gold-text)}
.wh-badge--dark{background:rgba(255,255,255,.1);color:var(--wh-gold)}
.wh-check{list-style:none;padding:0;margin:0 0 var(--wh-s4)}
.wh-check li{position:relative;padding-left:32px;margin-bottom:var(--wh-s2);font-weight:600}
.wh-check li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border:2.5px solid var(--wh-slate-text);border-radius:3px;background:#fff}
.wh-check li::after{content:"";position:absolute;left:7px;top:6px;width:6px;height:12px;border-right:3px solid var(--wh-red);border-bottom:3px solid var(--wh-red);transform:rotate(40deg)}

/* ---- Forms ---- */
.wh-field{display:block;margin-bottom:var(--wh-s4)}
.wh-label{display:block;font:600 var(--wh-fs-sm)/1.3 var(--wh-font-body);color:var(--wh-charcoal);margin-bottom:6px}
.wh-label .wh-opt{font-weight:400;color:var(--wh-muted)}
.wh-input,.wh-select,.wh-textarea{width:100%;min-height:var(--wh-tap);padding:12px 14px;border:1.5px solid #B8C0CB;border-radius:var(--wh-radius);background:#fff;color:var(--wh-ink);font:500 16px/1.4 var(--wh-font-body)}
.wh-textarea{min-height:110px;resize:vertical}
.wh-input:focus,.wh-select:focus,.wh-textarea:focus{outline:none;border-color:var(--wh-focus);box-shadow:0 0 0 3px rgba(31,111,235,.25)}
.wh-input[aria-invalid="true"],.wh-select[aria-invalid="true"],.wh-textarea[aria-invalid="true"]{border-color:var(--wh-red-deep);background:#FFF7F8}
.wh-hint{font-size:var(--wh-fs-xs);color:var(--wh-muted);margin-top:4px}
.wh-error{color:var(--wh-red-deep);font-weight:600;font-size:var(--wh-fs-sm)}
.wh-choice{display:flex;flex-wrap:wrap;gap:var(--wh-s2)}
.wh-choice label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid #B8C0CB;border-radius:var(--wh-radius-pill);background:#fff;font-weight:600;cursor:pointer}
.wh-choice input{accent-color:var(--wh-red)}
.wh-choice label:has(input:checked){border-color:var(--wh-red);background:var(--wh-red-tint);color:var(--wh-red-deep)}

/* ---- Header band + mobile action bar ---- */
.wh-topbar{position:sticky;top:0;z-index:50;background:var(--wh-charcoal-2);color:#fff;border-bottom:3px solid var(--wh-gold)}
.wh-topbar .wh-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--wh-s3);min-height:64px}
.wh-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(38,38,52,.97);border-top:2px solid var(--wh-gold)}
.wh-actionbar .wh-btn{min-height:50px;padding:0 8px;font-size:var(--wh-fs-sm)}
@media (min-width:900px){.wh-actionbar{display:none}}

/* ---- Contour texture (the card mesh), usable on any dark/red band ---- */
.wh-contours{position:relative;isolation:isolate;overflow:hidden}
.wh-contours::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/img/contours-light.webp) center/cover no-repeat;opacity:.55;pointer-events:none}

/* ---- Footer ---- */
.wh-footer{background:var(--wh-night);color:var(--wh-hairline);padding:var(--wh-s7) 0 calc(var(--wh-s9) + env(safe-area-inset-bottom));font-size:var(--wh-fs-sm)}
.wh-footer a{color:var(--wh-cloud)}
.wh-footer .wh-kicker{color:var(--wh-gold)}
.wh-footer :is(p,small){color:var(--wh-hairline)}
.wh-footer a:hover{color:var(--wh-gold)}
@media (min-width:900px){.wh-footer{padding-bottom:var(--wh-s7)}}