/* ==========================================================================
   FAIRBANKS RETRIEVER CLUB
   Site stylesheet. One file, used by every page.

   IDENTITY NOTES
   --------------
   Colors are sampled directly out of the club logo:
     #C56D00  the orange of the "FRC" letters (also the original site's
              link color, so it has been the club's color for years)
     #A6B131  the moss green of the Alaska outline
     #183000  the deep spruce of the foliage
     #D0B98B  the dry tan of the cattails and grasses
   Orange is reserved for things you can act on. Moss appears only as thin
   rules and small marks, never as a large field — it is loud at size.

   Type is set like an AKC field trial running order: condensed uppercase
   for headings and dates, a plain grotesque for reading, tabular numerals
   everywhere numbers line up.
   ========================================================================== */

:root{
  /* --- brand, straight from the logo ------------------------------------ */
  --orange:#C56D00;
  --orange-dk:#A35700;   /* darker, for orange text on light backgrounds    */
  --moss:#A6B131;
  --moss-dk:#69751A;     /* darker, for moss text on light backgrounds
                            (4.5:1 on the page background — WCAG AA)        */

  /* Button colors are deliberately separate from the brand orange. Plain
     white on #C56D00 measures only 3.8:1, which fails WCAG AA for button
     text, so buttons use the darker orange in light mode and flip to
     dark-on-bright in dark mode (7:1). The brand orange is unchanged.      */
  --btn-bg:#A35700;
  --btn-bg-hover:#8A4900;
  --btn-ink:#FFFFFF;
  --spruce:#1E3A14;
  --spruce-2:#2C4A1C;
  --tan:#D0B98B;

  /* --- surfaces and text ------------------------------------------------ */
  --paper:#F4F2EA;       /* page background — warm birch                    */
  --paper-2:#EAE7DB;     /* footer, inset panels                            */
  --surface:#FFFFFF;
  --ink:#1A1C16;
  --muted:#5F6154;
  --line:#D3CFC0;
  --line-soft:#E3E0D4;

  /* --- bands (dark spruce sections) ------------------------------------- */
  --band:#1E3A14;
  --band-ink:#F1EFE4;
  --band-muted:#AFBBA2;
  --band-line:rgba(241,239,228,.20);
  --band-line-ui:rgba(241,239,228,.45);   /* borders on controls, not rules  */

  --plate:#FFFFFF;       /* backing behind the logo art                     */

  /* A very faint paper grain, just enough to stop large flat areas reading
     as dead color. Far too subtle to affect how readable any text is. */
  --grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'%20opacity='0.05'/%3E%3C/svg%3E");
  --radius:3px;          /* deliberately near-square — printed, not app-y   */
  --maxw:1120px;
  --rule:2px solid var(--moss);
}

@media (prefers-color-scheme:dark){
  :root{
    --orange:#E88A22;
    --orange-dk:#F0A051;
    --moss:#B8C43F;
    --moss-dk:#B8C43F;
    --btn-bg:#E88A22;
    --btn-bg-hover:#F0A051;
    --btn-ink:#14170F;
    --spruce:#9DBE86;
    --spruce-2:#9DBE86;
    --tan:#C7B189;

    --paper:#14170F;
    --paper-2:#1B1F16;
    --surface:#1B1F16;
    --ink:#E8E7DD;
    --muted:#9AA08C;
    --line:#2E3326;
    --line-soft:#252A1F;

    --band:#101509;
    --band-ink:#E8E7DD;
    --band-muted:#A3AD94;
    --band-line:rgba(232,231,221,.16);
    --band-line-ui:rgba(232,231,221,.45);
    /* Pale noise shows up far more on a dark ground, so dial it right back. */
    --grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'%20opacity='0.022'/%3E%3C/svg%3E");

    --plate:#F1EFE4;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--paper);
  background-image:var(--grain);
  background-size:140px 140px;
  color:var(--ink);
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange-dk)}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--btn-bg);color:var(--btn-ink);padding:12px 18px;font-weight:700}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

/* --- Headings: condensed, uppercase, tight ------------------------------ */
h1,h2,h3,h4,.cond{
  font-family:"Barlow Condensed","Barlow Semi Condensed",Barlow,Haettenschweiler,"Arial Narrow",sans-serif;
  margin:0;font-weight:600;line-height:1.05;
  text-transform:uppercase;letter-spacing:.012em;text-wrap:balance;
}
h1{font-size:clamp(2.3rem,7.2vw,4rem);font-weight:700;letter-spacing:.004em}
h2{font-size:clamp(1.6rem,4.2vw,2.3rem)}
h3{font-size:1.28rem}
h4{font-size:1.08rem}

/* --- The eyebrow: a small moss-ruled label above a heading -------------- */
.eyebrow{
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--moss);flex:none}
.lede{font-size:1.12rem;color:var(--muted);font-weight:500;max-width:none}

/* Numbers line up — dates, dues, phone numbers */
.num,.date,td.amount,.price,.tel{font-variant-numeric:tabular-nums}

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:50;background:var(--surface);
  border-bottom:1px solid var(--line);transition:box-shadow .2s ease;
}
.hdr.scrolled{box-shadow:0 2px 6px rgba(23,32,26,.07),0 14px 28px -22px rgba(23,32,26,.5)}
@media (prefers-reduced-motion:reduce){.hdr{transition:none}}
@supports (backdrop-filter:blur(10px)){
  .hdr{background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.5) blur(10px)}
}
/* Direct child only — as a descendant selector this also caught the mobile
   menu's own wrapper and squashed it to the width of its longest item. */
.hdr > .wrap{display:flex;align-items:center;gap:18px;min-height:66px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-right:auto;padding-block:7px}
.mark:hover{text-decoration:none}
.mark img{width:46px;height:auto;flex:none}
.mark-txt{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:17px;font-weight:700;
  letter-spacing:.035em;text-transform:uppercase;color:var(--ink);line-height:.98;
}
@media (min-width:520px){.mark img{width:52px}.mark-txt{font-size:20px}}
@media (min-width:1020px){.mark img{width:56px}.mark-txt{font-size:21px}}

.navbtn{
  display:inline-flex;align-items:center;gap:9px;background:none;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;cursor:pointer;min-height:44px;
}
.navbtn:hover{border-color:var(--muted)}
.navbtn .bars{display:block;width:17px;height:11px;position:relative}
.navbtn .bars i,.navbtn .bars i::before,.navbtn .bars i::after{
  position:absolute;left:0;right:0;height:2px;background:currentColor;content:"";
}
.navbtn .bars i{top:4.5px}
.navbtn .bars i::before{top:-4.5px}
.navbtn .bars i::after{top:4.5px}

nav.main{display:none}
nav.main > ul{list-style:none;display:flex;align-items:stretch;gap:1px;margin:0;padding:0}
nav.main > ul > li{display:flex}

/* Plain links and drop-down buttons share one rule. Left apart they sit at
   different heights: a link is a block and inherits the body's line-height,
   while a button resets to `normal`, so their text lands on different
   baselines and "Home" looks like it has slipped down the row. */
nav.main > ul > li > a,
.navtop{
  display:flex;align-items:center;gap:7px;
  padding:9px 12px;min-height:46px;
  color:var(--ink);text-decoration:none;cursor:pointer;
  background:none;border:0;border-bottom:3px solid transparent;
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:17px;font-weight:600;line-height:1.1;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
}
nav.main > ul > li > a:hover,
.navtop:hover{color:var(--orange-dk);border-bottom-color:var(--line);text-decoration:none}
nav.main > ul > li > a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--moss)}

/* --- Drop-downs ---------------------------------------------------------
   "Events" and "About Us" are headings, not links — they have no page of
   their own, so they are buttons. They open on click rather than on hover,
   which is the only version that works for touch and for keyboards. */
nav.main li.has-menu{position:relative}
.navtop[data-section="current"]{border-bottom-color:var(--moss)}
.navtop .caret{
  width:0;height:0;flex:none;
  border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:5px solid currentColor;margin-top:2px;transition:transform .15s ease;
}
.navtop[aria-expanded="true"] .caret{transform:rotate(180deg)}
.navtop[aria-expanded="true"]{color:var(--orange-dk)}
@media (prefers-reduced-motion:reduce){.navtop .caret{transition:none}}

.submenu{
  position:absolute;top:100%;left:0;z-index:60;min-width:212px;max-width:80vw;
  margin:0;padding:6px 0;list-style:none;display:block;
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--moss);
  box-shadow:0 4px 8px rgba(23,32,26,.09),0 18px 34px -18px rgba(23,32,26,.45);
}
/* display:block above would otherwise beat the browser's own [hidden] rule,
   leaving both menus permanently open. */
.submenu[hidden]{display:none}
/* The right-hand menu opens leftwards so it stays on screen. */
nav.main > ul > li.has-menu:last-child .submenu{left:auto;right:0}
.submenu a{color:var(--ink);text-decoration:none}
.submenu li{margin:0}
.submenu a{
  display:block;padding:10px 16px;white-space:nowrap;border-bottom:0;
  font-size:16px;letter-spacing:.05em;
}
.submenu a:hover{background:var(--brand-soft);color:var(--brand-ink);border-bottom:0}
.submenu a[aria-current="page"]{
  color:var(--brand-ink);background:var(--brand-soft);
  box-shadow:inset 4px 0 0 var(--moss);
}
.hdr .cta{
  display:none;background:var(--btn-bg);color:var(--btn-ink);text-decoration:none;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:11px 17px;border-radius:var(--radius);white-space:nowrap;
}
.hdr .cta:hover{background:var(--btn-bg-hover);text-decoration:none}
@media (min-width:1020px){nav.main{display:block}.hdr .cta{display:inline-block}.navbtn{display:none}}

#menu{border-top:1px solid var(--line);background:var(--surface)}
#menu ul{list-style:none;margin:0;padding:6px 0 18px;display:grid;grid-template-columns:1fr;gap:0}
#menu a{
  display:flex;align-items:center;min-height:48px;padding:11px 2px;text-decoration:none;color:var(--ink);
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:19px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line-soft);
}
#menu a:hover{color:var(--orange-dk)}
#menu a[aria-current="page"]{border-left:4px solid var(--moss);padding-left:12px}
#menu li:last-child a{border-bottom:0}
@media (min-width:1020px){#menu{display:none !important}}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btnrow{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--radius);text-decoration:none;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:18px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:2px solid transparent;min-height:50px;cursor:pointer;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn-primary:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}
.btn-ghost{background:transparent;color:var(--band-ink);border-color:var(--band-line-ui)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--moss)}
.btn-quiet{background:var(--surface);color:var(--ink);border-color:var(--line)}

/* A small arrow on buttons that leave the site. */
.ext{
  width:0;height:0;display:inline-block;margin-left:2px;
  border:5px solid transparent;border-left-color:currentColor;
  transform:translateY(1px) rotate(-45deg);
}
/* Read out by screen readers, invisible on screen. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.btn-quiet:hover{border-color:var(--moss)}

/* ==========================================================================
   Hero — full-bleed photo with a spruce wash. Works with no photo too.
   To use a photo: put it in images/ and set --hero-photo on .hero (see the
   comment in index.html).
   ========================================================================== */
.hero{
  position:relative;background:var(--band);color:var(--band-ink);
  padding-block:52px 56px;overflow:hidden;border-bottom:4px solid var(--moss);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:var(--hero-photo,none);
  background-size:cover;background-position:center 38%;
  opacity:.34;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,26,10,.62) 0%,rgba(16,26,10,.80) 62%,rgba(16,26,10,.94) 100%);
}
.hero>*{position:relative;z-index:1}
/* A soft pool of light behind the crest so it sits in the scene rather
   than on top of it. */
.hero .badge-art{position:relative}
.hero .badge-art::before{
  content:"";position:absolute;inset:-14%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(166,177,49,.22),transparent 68%);
}
.hero .wrap{display:grid;gap:34px;align-items:center}
@media (min-width:900px){
  .hero{padding-block:76px 80px}
  .hero .wrap{grid-template-columns:1.45fr .82fr;gap:54px}
}
.hero .eyebrow{color:var(--band-muted)}
.hero .eyebrow::before{background:var(--moss)}
.hero h1{color:var(--band-ink);line-height:.98}
.hero h1 em{font-style:normal;color:var(--moss);display:block}
.hero .lead{
  margin-top:18px;font-size:clamp(1.05rem,2.5vw,1.22rem);font-weight:500;color:var(--band-muted);
  line-height:1.55;
}

/* The logo sits on a cream placard — the club's black Labrador would
   disappear against the dark spruce otherwise. Square corners and a thin
   keyline, so it reads as an enamel club sign rather than a UI card. */
.badge-art{
  background:#F4F2EA;padding:22px 24px 16px;
  outline:1px solid rgba(30,58,20,.22);outline-offset:-7px;
  box-shadow:0 24px 46px -26px rgba(0,0,0,.9);
  max-width:300px;margin-inline:auto;width:100%;
  border-top:6px solid var(--orange);
}
.badge-art img{width:100%}
.badge-cap{
  margin-top:14px;padding-top:11px;border-top:1px solid #D6D2C3;
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:#66685C;text-align:center;   /* 4.9:1 on the cream placard */
}

/* --- Interior page header -----------------------------------------------
   Plain dark green by default. To put a photo behind one, add the
   has-photo class and point it at the file:

     <div class="pagehead has-photo" style="--hero-photo:url('images/x.jpg')">

   Both parts are needed — the class turns on the dark wash that keeps the
   white heading readable, and without it a photo would wash the text out.
   ------------------------------------------------------------------------ */
.pagehead{
  position:relative;overflow:hidden;
  background-color:var(--band);color:var(--band-ink);
  padding-block:38px 42px;border-bottom:4px solid var(--moss);
}
.pagehead.has-photo{padding-block:64px 68px}
.pagehead.has-photo::before{
  content:"";position:absolute;inset:0;
  background-image:var(--hero-photo,none);
  background-size:cover;background-position:center 42%;
  opacity:.38;
}
.pagehead.has-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,22,8,.55) 0%,rgba(14,22,8,.78) 65%,rgba(14,22,8,.92) 100%);
}
.pagehead>*{position:relative;z-index:1}
.pagehead .eyebrow{color:var(--band-muted)}
.pagehead h1{color:var(--band-ink);font-size:clamp(2rem,6vw,3.2rem)}
.pagehead p{margin-top:14px;color:var(--band-muted);font-size:1.06rem;font-weight:500}

/* ==========================================================================
   Sections
   ========================================================================== */
section{padding-block:52px}
section.tight{padding-block:36px}
section.alt{
  background-color:var(--paper-2);background-image:var(--grain);background-size:140px 140px;
  border-block:1px solid var(--line);
}
.sec-head{margin-bottom:24px;max-width:none}
.sec-head p{margin-top:10px;color:var(--muted);font-weight:500}

/* Long-form text */
/* Text runs the full width of the content column rather than being held to
   a narrow measure. The column itself is capped at --maxw, and everything
   still reflows down to one column on a phone. */
.prose{max-width:none}
.prose h2{margin-top:38px;padding-bottom:8px;border-bottom:var(--rule)}
.prose h3{margin-top:28px;color:var(--spruce)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin-top:15px}
.prose ul,.prose ol{margin-top:15px;padding-left:23px}
.prose li{margin-bottom:8px}
.prose li:last-child{margin-bottom:0}
.prose li::marker{color:var(--moss-dk);font-weight:700}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose .intro{
  font-family:"Petrona",Georgia,serif;font-style:italic;font-size:1.22rem;
  line-height:1.5;color:var(--spruce);text-transform:none;margin-bottom:6px;
}

.note{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--moss);
  padding:17px 19px;margin-top:22px;
}
.note.warn{border-left-color:var(--orange);background:var(--surface)}
.note :is(h2,h3,h4){margin-bottom:6px;font-size:1.12rem}

/* ==========================================================================
   Grounds-access alert (home page)
   ========================================================================== */
.alert{background:var(--surface);border-block:1px solid var(--line);padding-block:34px}
.alert-card{display:grid;gap:22px}
@media (min-width:860px){.alert-card{grid-template-columns:1.2fr 1fr;gap:40px}}
.tag{
  display:inline-block;background:var(--btn-bg);color:var(--btn-ink);
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;
}
.alert h2{margin-top:14px}
.alert p{margin-top:12px}

.keyline{
  margin-top:18px;border-top:var(--rule);
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 90px);
}
.keyline dl{margin:0}
/* Label above value on a phone, label beside value once there is room —
   a grid rather than a wrapping flex row, so every row aligns the same way
   instead of breaking differently depending on how long the text is. */
.kv{display:grid;grid-template-columns:1fr;gap:2px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
@media (min-width:420px){.kv{grid-template-columns:104px 1fr;gap:12px;align-items:baseline}}
.kv dt{
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--muted);margin:0;
}
.kv dd{margin:0;font-weight:600;font-size:15.5px}

details.dirs{margin-top:20px;border:1px solid var(--line);background:var(--surface)}
details.dirs>summary{
  cursor:pointer;padding:14px 17px;list-style:none;min-height:50px;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:18px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
details.dirs>summary::-webkit-details-marker{display:none}
details.dirs>summary::after{content:"+";font-size:22px;color:var(--moss-dk);line-height:1}
details.dirs[open]>summary{border-bottom:1px solid var(--line)}
details.dirs[open]>summary::after{content:"\2013"}
details.dirs ol,details.dirs ul{margin:0;padding:15px 20px 17px 38px;font-size:15.5px}
details.dirs li{margin-bottom:8px}
details.dirs li:last-child{margin-bottom:0}
details.dirs li::marker{color:var(--moss-dk);font-weight:700}

/* ==========================================================================
   Events — set like a running order, not as cards
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 16px;min-height:44px;cursor:pointer;color:var(--ink);
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
}
.chip:hover{border-color:var(--moss)}
.chip[aria-pressed="true"]{background:var(--spruce);border-color:var(--spruce);color:var(--paper)}
@media (prefers-color-scheme:dark){.chip[aria-pressed="true"]{background:var(--moss);border-color:var(--moss);color:#14170F}}

.season-note{
  border-top:4px solid var(--moss);background:var(--surface);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line);
  padding:17px 19px;margin-bottom:22px;display:grid;gap:5px;
}
.season-note strong{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:1.35rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.1;
}
.season-note span{color:var(--muted);font-size:15.5px;font-weight:500}

ul.events{list-style:none;margin:0;padding:0;border-top:var(--rule)}
.ev{
  display:grid;gap:2px 22px;padding:16px 2px;border-bottom:1px solid var(--line);
  align-items:baseline;
}
@media (min-width:700px){.ev{grid-template-columns:152px 1fr auto}}
.ev .date{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:17px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--spruce);white-space:nowrap;
}
.ev .what{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:1.32rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.12;
}
.ev .where{color:var(--muted);font-size:15.5px;font-weight:500;margin-top:4px}
.ev .host{
  justify-self:start;font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;padding-top:3px;
}
@media (min-width:700px){.ev .host{justify-self:end}}
.host.frc{color:var(--orange-dk)}
.host.other{color:var(--muted)}
/* Past events are de-emphasized with color, not opacity: fading the text
   to 55% dropped it to 2.4:1, well under the 4.5:1 minimum. */
.ev.past .what{color:var(--muted);font-weight:600}
.ev.past .date,.ev.past .host{color:var(--muted)}
.ev details{margin-top:10px;grid-column:1/-1}
.ev details summary{
  cursor:pointer;color:var(--orange-dk);min-height:44px;display:flex;align-items:center;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.ev details ol{margin:9px 0 2px;padding-left:22px;color:var(--muted);font-size:15.5px}
.ev details li{margin-bottom:6px}
.ev details li::marker{color:var(--moss-dk)}
li.ev-empty{
  list-style:none;padding:24px 2px;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:16.5px;font-weight:500;
}
.footnote{margin-top:20px;color:var(--muted);font-size:15.5px;font-weight:500;max-width:none}

/* ==========================================================================
   Panels (replaces generic cards — flat, ruled, numbered by role)
   ========================================================================== */
.grid3{display:grid;gap:0;border-top:var(--rule)}
@media (min-width:800px){.grid3{grid-template-columns:repeat(3,1fr);gap:0 34px}}
.grid2{display:grid;gap:22px}
@media (min-width:740px){.grid2{grid-template-columns:repeat(2,1fr);gap:34px}}

.panel{
  padding:24px 0;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:11px;
}
@media (min-width:800px){.panel{border-bottom:0;padding-bottom:6px}}
/* Component headings are sized by the component, never by the tag, so each
   page can use whichever heading LEVEL keeps its outline correct. Skipping
   from h1 straight to h3 breaks navigation for screen reader users. */
.panel :is(h2,h3,h4){color:var(--ink);font-size:1.28rem}
.panel p{color:var(--muted);font-size:16px;font-weight:500}
.panel ul{margin:0;padding-left:20px;color:var(--muted);font-size:15.5px}
.panel li{margin-bottom:6px}
.panel li::marker{color:var(--moss-dk)}
.panel .meta{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--moss-dk);
}
.panel a.more{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
}
.panel a.more:hover{text-decoration:underline}

/* A boxed card, used sparingly where something really is a separate object */
.card{
  background-color:var(--surface);
  background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 120px);
  border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:11px;
  box-shadow:0 1px 2px rgba(23,32,26,.05),0 12px 26px -20px rgba(23,32,26,.30);
}
.card :is(h2,h3,h4){color:var(--ink);font-size:1.28rem}
.card p{color:var(--muted);font-size:16px;font-weight:500}

/* ==========================================================================
   Photo blocks — drop club photos in here
   ========================================================================== */
/* Photos fill their frame, so a row of them reads as one clean band rather
   than a set of mismatched shapes. Nothing is lost: clicking a photo opens
   the whole, uncropped picture in the lightbox. */
figure.photo{
  margin:0;background:var(--paper-2);border:1px solid var(--line);
  display:flex;flex-direction:column;width:100%;
  box-shadow:0 1px 2px rgba(23,32,26,.07),0 10px 22px -14px rgba(23,32,26,.32);
}
figure.photo img{
  width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;
  background:var(--paper-2);
}
figure.photo figcaption{
  padding:11px 14px;font-size:14.5px;color:var(--muted);
  border-top:1px solid var(--line);flex:1 0 auto;
}
figure.photo figcaption em{font-style:italic;display:block;margin-top:2px;font-size:13.5px}
.photo-empty{
  aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    repeating-linear-gradient(45deg,transparent 0 11px,rgba(166,177,49,.10) 11px 22px),
    var(--paper-2);
  color:var(--muted);padding:20px;
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;
}
.photostrip{display:grid;gap:14px}
@media (min-width:640px){.photostrip{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.photostrip{grid-template-columns:repeat(3,1fr)}}

/* --- Albums on the gallery page ---------------------------------------- */
.album{margin-bottom:52px}
.album:last-of-type{margin-bottom:0}
.album-head{margin-bottom:18px;padding-bottom:10px;border-bottom:var(--rule)}
.album-head h2{font-size:clamp(1.4rem,3.6vw,1.9rem)}
.album-head p{
  margin-top:6px;color:var(--muted);
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}

/* ==========================================================================
   Photo rail — a swipeable strip of photos
   Compact like a slideshow, but nothing is hidden: every photo is really on
   the page, so it can be scrolled, searched, linked and read out by a screen
   reader. Nothing auto-advances — a carousel that moves on its own is the
   single most complained-about pattern on the web.
   ========================================================================== */
.photorail{position:relative;margin-top:22px}
.rail-track{
  display:flex;gap:14px;margin:0;padding:0 0 6px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  /* proximity, not mandatory: a mandatory snap fights a smooth programmatic
     scroll and drags the arrows' animation back to where it started. */
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.rail-track::-webkit-scrollbar{height:8px}
.rail-track::-webkit-scrollbar-track{background:transparent}
.rail-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.rail-track>li{flex:0 0 min(78vw,330px);scroll-snap-align:start}
@media (min-width:900px){.rail-track>li{flex-basis:300px}}

.rail-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.rail-nav[hidden]{display:none}
.rail-btn{
  width:46px;height:46px;flex:none;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.rail-btn:hover:not(:disabled){border-color:var(--moss)}
.rail-btn:disabled{opacity:.4;cursor:default}

/* A photo you can click to enlarge */
/* Full height so that cards in a row line up along the bottom even when the
   captions run to different lengths. */
button.photo-open{
  display:flex;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:zoom-in;text-align:left;font:inherit;color:inherit;
}
button.photo-open{transition:transform .18s ease}
button.photo-open figure.photo{height:100%;transition:box-shadow .18s ease}
button.photo-open:hover{transform:translateY(-3px)}
button.photo-open:hover figure.photo{
  box-shadow:0 3px 6px rgba(23,32,26,.10),0 18px 34px -16px rgba(23,32,26,.45);
}
@media (prefers-reduced-motion:reduce){
  button.photo-open,button.photo-open figure.photo{transition:none}
  button.photo-open:hover{transform:none}
}

/* Optional flash on a photo — e.g. the title a dog just finished. */
figure.photo{position:relative}
.photo-tag{
  position:absolute;top:0;left:0;
  background:var(--btn-bg);color:var(--btn-ink);
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;
}
figure.photo figcaption strong{color:var(--ink);font-weight:700}

/* Lightbox. Uses the browser's own <dialog>, so Escape closes it and focus
   is handled without any extra code. */
dialog.lightbox{
  border:0;padding:0;background:transparent;max-width:min(96vw,1100px);max-height:96vh;
  color:var(--ink);
}
dialog.lightbox::backdrop{background:rgba(10,14,8,.88)}
.lightbox-inner{background:var(--surface);border:1px solid var(--line)}
/* width:auto so a 420px archive scan shows at its true size instead of
   being stretched into a blurry mess. */
.lightbox-inner img{
  display:block;margin:0 auto;width:auto;max-width:100%;max-height:78vh;
  background:#0D110A;
}
.lightbox-bar{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-top:1px solid var(--line)}
.lightbox-bar p{font-size:15.5px;color:var(--muted);margin:0}
.lightbox-close{
  margin-left:auto;flex:none;min-height:44px;padding:9px 16px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:16px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.lightbox-close:hover{border-color:var(--moss)}

/* ==========================================================================
   History — photographs as the structure of the page
   Rather than parking old pictures in a slider, the page is built out of
   them: an era marker, a column of text, and a photograph sized to what the
   photograph actually is. Portraits get a tall frame, group shots run the
   full width of the window, and a scanned newsletter is presented as a
   document rather than pretending to be a photo.
   ========================================================================== */

/* A band that escapes the content column and runs edge to edge. */
.bleed{
  position:relative;left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw;
  background:var(--band);
}
.bleed img{width:100%;height:clamp(240px,46vw,560px);object-fit:cover;display:block}

/* A whole-photo band: the picture is never cropped, it just sits inside the
   full-width band with room around it. Capped by height as well as width so
   a tall photo can't push everything else below the fold. */
.bleed-whole .bleed-inner{
  max-width:1000px;margin-inline:auto;padding:34px 20px 4px;
}
.bleed-whole img{
  width:auto;max-width:100%;height:auto;max-height:66vh;
  margin-inline:auto;object-fit:contain;
  box-shadow:0 4px 10px rgba(0,0,0,.35),0 22px 44px -22px rgba(0,0,0,.7);
}
.bleed-whole figcaption{padding-top:16px}
.bleed figcaption{
  background:var(--band);color:var(--band-muted);
  padding:14px 20px;font-size:15px;font-weight:500;text-align:center;
}
.bleed figcaption b{color:var(--band-ink);font-weight:600}

/* One era: a year, some text, a picture. */
.era{
  display:grid;gap:22px 40px;align-items:start;
  padding-block:38px;border-top:1px solid var(--line);
}
.era:first-of-type{border-top:0;padding-top:12px}
@media (min-width:860px){
  .era{grid-template-columns:118px minmax(0,1fr) minmax(0,1.05fr)}
  /* Add "flip" to an era and the picture moves to the middle column, so the
     page alternates instead of marching down one side. Done with a class
     rather than :nth-of-type, which counts every sibling div on the page and
     gets the rhythm wrong as soon as anything else is added. */
  .era.flip .era-media{grid-column:2;grid-row:1}
  .era.flip .era-text{grid-column:3;grid-row:1}
  /* An era with no picture of its own — the text runs across both columns. */
  .era.era-wide .era-text{grid-column:2 / -1}
}
.era-year{
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:clamp(2rem,5vw,2.9rem);font-weight:700;line-height:.95;
  color:var(--moss-dk);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.era-year small{
  display:block;margin-top:6px;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.era-text h3{font-size:1.32rem;margin-bottom:10px}
.era-text p{color:var(--ink);font-size:16.5px}
.era-text p + p{margin-top:12px}

.era-media figure{margin:0}
.era-media img{
  width:100%;display:block;border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(23,32,26,.08),0 16px 30px -18px rgba(23,32,26,.42);
}
/* Landscape and portrait get frames that suit them — no forced crop. */
.era-media.wide img{aspect-ratio:5/4;object-fit:cover}
.era-media.tall img{aspect-ratio:4/5;object-fit:cover;max-width:340px}
.era-media figcaption{
  margin-top:10px;font-size:14.5px;color:var(--muted);font-weight:500;line-height:1.45;
}
.era-media figcaption em{font-style:italic}

/* A scanned page from the newsletter, shown as the document it is. */
.document{
  display:grid;gap:24px;margin-top:8px;
  padding:26px;background:var(--surface);border:1px solid var(--line);
  border-top:4px solid var(--moss);
}
@media (min-width:820px){.document{grid-template-columns:1.15fr 1fr;gap:34px;align-items:start}}
.document img{
  width:100%;display:block;border:1px solid var(--line);
  box-shadow:0 2px 5px rgba(23,32,26,.10),0 14px 28px -16px rgba(23,32,26,.4);
}
.document .doc-note p{color:var(--ink);font-size:16.5px}
.document .doc-note p + p{margin-top:12px}
.document .doc-source{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.roster{margin-top:14px;padding-left:0;list-style:none}
.roster li{
  padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:16px;
}
.roster li:last-child{border-bottom:0}
.roster b{font-weight:600}
.roster span{color:var(--muted)}

/* ==========================================================================
   Join band
   ========================================================================== */
.join{
  background-color:var(--band);color:var(--band-ink);
  padding-block:52px;border-block:4px solid var(--moss);position:relative;overflow:hidden;
}
.join .wrap{display:grid;gap:30px}
@media (min-width:860px){.join .wrap{grid-template-columns:1.15fr 1fr;gap:52px;align-items:center}}
.join h2{color:var(--band-ink);font-size:clamp(1.75rem,4.8vw,2.6rem)}
.join p{margin-top:14px;color:var(--band-muted)}
.join .eyebrow{color:var(--band-muted)}
.paths{display:grid;gap:0;border-top:1px solid var(--band-line)}
.path{padding:18px 0;border-bottom:1px solid var(--band-line)}
.path :is(h2,h3,h4){color:var(--band-ink);font-size:1.15rem}
.path p{margin-top:6px;font-size:15.5px;color:var(--band-muted)}
.path a{color:var(--band-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.path a:hover{color:var(--moss)}

/* ==========================================================================
   Officers
   ========================================================================== */
.officers{display:grid;gap:0;margin:0;border-top:var(--rule)}
@media (min-width:660px){.officers{grid-template-columns:repeat(2,1fr);gap:0 30px}}
@media (min-width:940px){.officers{grid-template-columns:repeat(4,1fr)}}
.off{padding:15px 0;border-bottom:1px solid var(--line)}
.off dt{
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.off dd{
  margin:3px 0 0;font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:1.35rem;font-weight:600;text-transform:uppercase;letter-spacing:.01em;
}
.off a{text-decoration:none;color:var(--ink);border-bottom:2px solid var(--moss)}
.off a:hover{color:var(--orange-dk);text-decoration:none}
.board{margin-top:18px;color:var(--muted);font-size:16px}
.board b{
  color:var(--ink);font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;font-size:14.5px;
}

/* ==========================================================================
   Resource directory
   ========================================================================== */
.linkgroup{margin-top:38px}
.linkgroup:first-child{margin-top:0}
.linkgroup h2{padding-bottom:9px;border-bottom:var(--rule);margin-bottom:0}
ul.linklist{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media (min-width:760px){ul.linklist{grid-template-columns:repeat(2,1fr);gap:0 34px}}
ul.linklist li{padding:12px 2px;border-bottom:1px solid var(--line-soft);font-size:16px}
ul.linklist a{font-weight:600;text-decoration:none}
ul.linklist a:hover{text-decoration:underline}
ul.linklist .tel{color:var(--muted);white-space:nowrap;font-size:15px}
ul.linklist .desc{display:block;color:var(--muted);font-size:14.5px;margin-top:2px}

/* ==========================================================================
   Tables
   ========================================================================== */
.tablewrap{overflow-x:auto;margin-top:22px;border:1px solid var(--line);background:var(--surface)}
table.data{border-collapse:collapse;width:100%;font-size:16px}
table.data th,table.data td{padding:13px 17px;text-align:left;border-bottom:1px solid var(--line-soft)}
table.data th{
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:600;background:var(--paper-2);border-bottom:2px solid var(--moss);
}
table.data tr:last-child td{border-bottom:0}
table.data td.amount{font-weight:700;white-space:nowrap}

/* ==========================================================================
   Payment / forms
   ========================================================================== */
.paybox{
  background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--orange);
  padding:24px;display:flex;flex-direction:column;gap:13px;
}
.paybox :is(h2,h3,h4){font-size:1.2rem;font-weight:600}
.paybox p{color:var(--muted);font-size:16px}
.paybox label{
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.paybox select{
  font:inherit;font-size:16px;padding:12px 13px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%;min-height:50px;
}
.paybox .price{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:2rem;font-weight:700;
  color:var(--spruce);line-height:1;
}
.paybox form{margin:0;display:flex;flex-direction:column;gap:13px}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  background-color:var(--paper-2);background-image:var(--grain);background-size:140px 140px;
  border-top:4px solid var(--moss);padding-block:42px 30px;margin-top:10px;
}
.foot{display:grid;gap:30px}
@media (min-width:860px){.foot{grid-template-columns:1.35fr 1fr 1fr;gap:44px}}
footer h2{
  font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 13px;padding-bottom:9px;border-bottom:1px solid var(--line);
}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:var(--ink);text-decoration:none;font-size:16px}
footer a:hover{color:var(--orange-dk);text-decoration:underline}
.addr{font-style:normal;color:var(--muted);font-size:16px;line-height:1.7}
/* Facebook link — the icon is drawn inline rather than loaded as an image.
   The old site hotlinked a badge from facebook.com that had long since
   stopped working, which is exactly the failure this avoids. */
.social{
  display:inline-flex;align-items:center;gap:10px;margin-top:10px;
  font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;
}
.social-icon{width:24px;height:24px;flex:none;fill:currentColor}
.social:hover{color:var(--orange-dk);text-decoration:underline}
.social:hover .social-icon{fill:var(--orange-dk)}

.sponsor{display:flex;gap:15px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sponsor img{width:72px;background:var(--plate);padding:4px;flex:none;border-radius:2px}
.sponsor p{font-size:15px;color:var(--muted);line-height:1.45}
/* text-wrap:pretty stops the last line dropping to a single orphaned word. */
.quote{
  margin:34px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  font-family:"Petrona",Georgia,serif;font-style:italic;font-size:1.14rem;line-height:1.5;
  color:var(--muted);text-wrap:pretty;
}
.quote i{font-style:italic}
.quote cite{
  display:block;margin-top:9px;font-family:"Barlow Condensed",Barlow,sans-serif;
  font-style:normal;font-size:14px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
}
.legal{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--muted);font-size:15px;font-weight:500;
}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

@media print{
  .hdr,.navbtn,#menu,.filters,.btnrow,.skip,footer .foot{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero,.pagehead,.join{background:#fff;color:#000;border:0}
  .hero::before,.hero::after{display:none}
  .hero h1,.pagehead h1,.join h2,.hero .lead,.pagehead p{color:#000}
}