/* ============================================================
   NTA — design tokens
   ============================================================ */
:root{
  --ink:        #070A08;
  --ink-2:      #0C110E;
  --ink-3:      #121A15;
  --bone:       #EFE8D8;
  --bone-dim:   #B9B2A3;
  --muted:      #7E8A80;
  --brass:      #C9A227;
  --brass-lt:   #E7C86A;
  --brass-dk:   #8A6E15;
  --moss:       #3E5541;
  --oxblood:    #8C2F1F;
  --line:       rgba(239,232,216,.13);
  --line-soft:  rgba(239,232,216,.07);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);
  --gutter:   clamp(20px, 5vw, 80px);
  --maxw:     1440px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--body); font-weight:300; font-size:clamp(15px,1.02vw,17px);
  line-height:1.65; letter-spacing:.005em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--brass); color:var(--ink); }

/* Film grain. Kept just larger than the viewport and composited on its own layer:
   an oversized layer with mix-blend-mode forces a full-page re-blend every frame
   and pins the main thread, which stalls every other animation on the page. */
body::after{
  content:""; position:fixed; inset:-8%; z-index:9998; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform; transform:translateZ(0);
  animation:grain 800ms steps(3) infinite;
}
@keyframes grain{
  0%  { transform:translate3d(0,0,0) }
  33% { transform:translate3d(-2%,1.5%,0) }
  66% { transform:translate3d(1.5%,-2%,0) }
  100%{ transform:translate3d(0,0,0) }
}

/* ============================================================
   Typography primitives
   ============================================================ */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; margin:0; line-height:1.02; letter-spacing:-.025em; }
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--brass);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--brass));
}
.h-xl{ font-size:clamp(3rem,9.2vw,9.5rem); }
.h-lg{ font-size:clamp(2.5rem,6vw,5.6rem); }
.h-md{ font-size:clamp(1.9rem,3.4vw,3.4rem); }
.h-sm{ font-size:clamp(1.25rem,1.7vw,1.75rem); }
.italic{ font-style:italic; font-weight:300; color:var(--brass-lt); }
.lede{ font-size:clamp(1.05rem,1.35vw,1.3rem); color:var(--bone-dim); max-width:60ch; line-height:1.62; }
.dim{ color:var(--muted); }

.section{ padding:clamp(90px,11vw,190px) var(--gutter); position:relative; }
.wrap{ max-width:var(--maxw); margin-inline:auto; width:100%; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ============================================================
   Preloader
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:10000; background:var(--ink);
  display:grid; place-content:center; gap:26px; justify-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
/* never let the curtain trap the page when JS is unavailable */
html:not(.js) #loader{ display:none; }
#loader.done{ opacity:0; visibility:hidden; }
.load-mark{
  font-family:var(--display); font-size:clamp(2.6rem,7vw,5rem); letter-spacing:.16em;
  color:var(--bone); display:flex; gap:.04em; overflow:hidden;
}
.load-mark span{
  display:inline-block; transform:translateY(110%);
  animation:loadUp .85s var(--ease) forwards;
}
.load-mark span:nth-child(2){ animation-delay:.08s }
.load-mark span:nth-child(3){ animation-delay:.16s }
@keyframes loadUp{ to{ transform:translateY(0) } }
.load-bar{ width:min(280px,52vw); height:1px; background:var(--line); position:relative; overflow:hidden; }
.load-bar i{
  position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--brass-dk),var(--brass-lt));
  transition:right .25s linear;
}
.load-note{ font-family:var(--mono); font-size:10px; letter-spacing:.28em; color:var(--muted); text-transform:uppercase; }

/* ============================================================
   Cursor
   ============================================================ */
/* The pointer is a rifle-scope reticle: tube, crosshair wires with a centre
   gap, and the dot as the aiming point. Both elements already exist on every
   page, so the whole thing is drawn in CSS with two pseudo-elements. */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; }
.cursor{
  width:42px; height:42px; margin:-21px 0 0 -21px;
  border:1px solid rgba(201,162,39,.6);
  box-shadow:0 0 0 3px rgba(201,162,39,.05), 0 0 16px rgba(201,162,39,.12);
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
  background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),opacity .3s;
}
/* the wires — they run past the tube wall and stop short of centre */
.cursor::before,.cursor::after{ content:""; position:absolute; }
.cursor::before{
  left:50%; top:-8px; bottom:-8px; width:1px; transform:translateX(-.5px);
  background:linear-gradient(180deg,
    rgba(201,162,39,0) 0, rgba(201,162,39,.85) 14%, rgba(201,162,39,.85) 33%,
    transparent 33%, transparent 67%,
    rgba(201,162,39,.85) 67%, rgba(201,162,39,.85) 86%, rgba(201,162,39,0) 100%);
}
.cursor::after{
  top:50%; left:-8px; right:-8px; height:1px; transform:translateY(-.5px);
  background:linear-gradient(90deg,
    rgba(201,162,39,0) 0, rgba(201,162,39,.85) 14%, rgba(201,162,39,.85) 33%,
    transparent 33%, transparent 67%,
    rgba(201,162,39,.85) 67%, rgba(201,162,39,.85) 86%, rgba(201,162,39,0) 100%);
}
.cursor-dot{
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px; background:var(--brass-lt);
  box-shadow:0 0 7px rgba(231,200,106,.85);
}
/* on anything clickable the scope opens up and the glass catches light */
.cursor.grow{
  width:74px; height:74px; margin:-37px 0 0 -37px;
  background:radial-gradient(circle at 50% 50%, rgba(201,162,39,.10), rgba(201,162,39,.03) 70%);
  border-color:var(--brass-lt);
  box-shadow:0 0 0 1px rgba(201,162,39,.22), 0 0 26px rgba(201,162,39,.18);
}
/* hide the arrow only once the reticle is actually running */
html.has-reticle, html.has-reticle body{ cursor:none }
html.has-reticle a,html.has-reticle button,html.has-reticle .g-item,
html.has-reticle summary,html.has-reticle label{ cursor:none }
html.has-reticle input,html.has-reticle textarea,html.has-reticle select{ cursor:auto }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{ display:none } }

/* ============================================================
   Scroll progress + section rail
   ============================================================ */
#progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:200; transform-origin:0 50%;
  transform:scaleX(0); background:linear-gradient(90deg,var(--brass-dk),var(--brass-lt),var(--brass));
}
#rail{
  position:fixed; right:calc(var(--gutter) * .45); top:50%; transform:translateY(-50%);
  z-index:120; display:grid; gap:16px; mix-blend-mode:difference;
}
#rail a{ display:block; width:7px; height:7px; border:1px solid rgba(239,232,216,.5); border-radius:50%;
  transition:all .35s var(--ease); }
#rail a.on{ background:var(--brass-lt); border-color:var(--brass-lt); transform:scale(1.5); }
@media (max-width:1100px){ #rail{ display:none } }

/* ============================================================
   Nav
   ============================================================ */
header{
  position:fixed; top:0; left:0; right:0; z-index:150;
  padding:17px var(--gutter); display:flex; align-items:center; justify-content:space-between;
  transition:padding .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
header.stuck{
  padding:11px var(--gutter); background:rgba(7,10,8,.78);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:13px; }
/* Header mark. The full badge carries its own wording, so it needs ~72px to stay
   legible; below that the ring text turns to mush. The header shrinks on scroll
   but the badge is floored at 58px for that reason. */
.brand-seal{
  width:80px; height:80px; flex:none; display:block;
  transition:width .45s var(--ease), height .45s var(--ease), filter .45s var(--ease);
}
.brand-seal img{ width:100%; height:100%; display:block; object-fit:contain }
.brand:hover .brand-seal{ filter:brightness(1.12) }
header.stuck .brand-seal{ width:64px; height:64px }
@media (max-width:600px){
  .brand-seal,header.stuck .brand-seal{ width:56px; height:56px }
}
.brand-txt strong{ display:block; font-family:var(--display); font-size:17px; font-weight:400; letter-spacing:.01em; line-height:1.15; }
.brand-txt span{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--muted); text-transform:uppercase; }
nav.links{ display:flex; gap:clamp(13px,1.5vw,30px); align-items:center; }
nav.links a{
  font-family:var(--mono); font-size:clamp(11px,.9vw,13px); letter-spacing:.15em; text-transform:uppercase;
  color:var(--bone-dim); position:relative; padding:8px 0; transition:color .3s;
}
nav.links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--brass);
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .45s var(--ease);
}
nav.links a:hover{ color:var(--bone); }
nav.links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav-cta{
  font-family:var(--mono); font-size:clamp(11px,.9vw,12.5px); letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--brass); color:var(--brass-lt); padding:13px 22px; border-radius:2px;
  position:relative; overflow:hidden; isolation:isolate; transition:color .4s var(--ease);
}
.nav-cta::before{
  content:""; position:absolute; inset:0; background:var(--brass); z-index:-1;
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.nav-cta:hover{ color:var(--ink); }
.nav-cta:hover::before{ transform:translateY(0); }
.burger{ display:none; width:34px; height:34px; place-content:center; }
.burger i{ display:block; width:22px; height:1px; background:var(--bone); position:relative; transition:.35s var(--ease); }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:22px; height:1px; background:var(--bone); transition:.35s var(--ease); }
.burger i::before{ top:-7px } .burger i::after{ top:7px }
.burger.on i{ background:transparent }
.burger.on i::before{ top:0; transform:rotate(45deg) }
.burger.on i::after{ top:0; transform:rotate(-45deg) }

#menu{
  position:fixed; inset:0; z-index:140; background:var(--ink-2);
  display:grid; gap:6px; padding:96px var(--gutter) 44px;
  /* the deeper links make the panel taller than a short phone screen, so it
     scrolls and never centres content off the top edge */
  align-content:center; align-content:safe center;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease); pointer-events:none;
}
#menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
#menu a{
  font-family:var(--display); font-size:clamp(2rem,7vw,4.2rem); line-height:1.12;
  border-bottom:1px solid var(--line-soft); padding:12px 0;
  opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
#menu.open a{ opacity:1; transform:none; }
#menu a:hover{ color:var(--brass-lt); }
#menu .m-meta{ margin-top:32px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
@media (max-width:1200px){ nav.links,.nav-cta{ display:none } .burger{ display:grid } }
/* the bigger nav needs the room on small laptops: the seal alone carries the brand there */
@media (min-width:1201px) and (max-width:1439px){ .brand-txt{ display:none } }
/* short screens: tighten the big links so the whole menu fits without scrolling */
@media (max-height:860px){
  #menu{ padding-top:84px }
  #menu a{ font-size:clamp(1.55rem,5.4vw,2.5rem); padding:9px 0 }
  #menu .m-meta{ margin-top:20px }
}

/* ============================================================
   Hero
   ============================================================ */
#hero{
  position:relative; min-height:100svh; display:grid; align-items:end;
  /* The header is fixed and ~101px tall. Without a top pad the bottom-aligned
     content overflows UPWARDS on any short viewport and slides under the nav.
     This pad must live on the base rule, not only in a mobile media query. */
  padding:146px var(--gutter) clamp(48px,7vw,90px);
  overflow:hidden; isolation:isolate;
}
.hero-media{ position:absolute; inset:-8% -4%; z-index:-3; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  filter:saturate(.62) contrast(1.12) brightness(.62);
  transform:scale(1.14); animation:kenburns 26s var(--ease-io) infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1.14) translate3d(0,0,0) } to{ transform:scale(1.25) translate3d(-1.5%,-2%,0) } }
.hero-veil{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 85% at 78% 18%, rgba(201,162,39,.15), transparent 58%),
    linear-gradient(180deg, rgba(7,10,8,.86) 0%, rgba(7,10,8,.38) 38%, rgba(7,10,8,.94) 88%, var(--ink) 100%);
}
.hero-veil::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(105% 78% at 50% 50%, transparent 42%, rgba(7,10,8,.72) 100%);
}
.hero-grid{
  position:absolute; inset:0; z-index:-1; opacity:.16;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(56px,7vw,110px) clamp(56px,7vw,110px);
  mask-image:radial-gradient(80% 60% at 50% 55%,#000,transparent 78%);
}
.hero-inner{ max-width:var(--maxw); margin-inline:auto; width:100%; }
.hero-title{ margin:0 0 clamp(24px,3vw,40px); }
.hero-title .ln{ display:block; overflow:hidden; }
.hero-title .ln > span{ display:block; transition:transform 1.15s var(--ease); }
.js .hero-title .ln > span{ transform:translateY(112%); }
.ready .hero-title .ln > span{ transform:translateY(0); }
.hero-title .ln:nth-child(2) > span{ transition-delay:.11s }
.hero-title .ln:nth-child(3) > span{ transition-delay:.22s }
.hero-bottom{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,80px); align-items:end;
  padding-top:clamp(24px,3vw,38px); border-top:1px solid var(--line);
}
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,30px); }
.stat b{
  display:block; font-family:var(--display); font-size:clamp(1.9rem,3.4vw,3.1rem);
  font-weight:400; color:var(--bone); line-height:1;
}
.stat span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.scroll-cue{
  position:absolute; left:var(--gutter); bottom:clamp(48px,7vw,90px); z-index:2;
  writing-mode:vertical-rl; font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:14px;
}
.scroll-cue::after{ content:""; width:1px; height:64px; background:linear-gradient(var(--brass),transparent); animation:cue 2.2s var(--ease-io) infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.35); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }
@media (max-width:900px){
  .hero-bottom{ grid-template-columns:1fr; }
  .scroll-cue{ display:none }
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:11px; padding:15px 26px; border-radius:2px;
  font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  border:1px solid var(--brass); position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn svg{ width:15px; height:15px; transition:transform .45s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover svg{ transform:translateX(4px); }
.btn-solid{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.btn-solid::before{ background:var(--bone); }
.btn-solid:hover{ color:var(--ink); border-color:var(--bone); }
.btn-ghost{ color:var(--brass-lt); }
.btn-ghost::before{ background:var(--brass); }
.btn-ghost:hover{ color:var(--ink); }
.btn-bone{ border-color:rgba(239,232,216,.35); color:var(--bone); }
.btn-bone::before{ background:var(--bone); }
.btn-bone:hover{ color:var(--ink); border-color:var(--bone); }

/* ============================================================
   Reveal utility
   ============================================================ */
[data-reveal]{ transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-reveal]{ opacity:0; transform:translateY(34px); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.09s } [data-reveal][data-d="2"]{ transition-delay:.18s }
[data-reveal][data-d="3"]{ transition-delay:.27s } [data-reveal][data-d="4"]{ transition-delay:.36s }
[data-reveal][data-d="5"]{ transition-delay:.45s } [data-reveal][data-d="6"]{ transition-delay:.54s }

/* ============================================================
   Marquee
   ============================================================ */
.marquee{
  border-block:1px solid var(--line); padding:20px 0; overflow:hidden; background:var(--ink-2);
  display:flex; position:relative;
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:16vw; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--ink-2),transparent) }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--ink-2),transparent) }
.mq-track{ display:flex; flex:none; gap:0; animation:mq 46s linear infinite; will-change:transform; }
.marquee:hover .mq-track{ animation-play-state:paused; }
.mq-track.rev{ animation-direction:reverse; }
/* track holds an even number of identical halves, so -50% is a seamless wrap */
@keyframes mq{ to{ transform:translateX(-50%) } }
.mq-item{
  display:inline-flex; align-items:center; gap:clamp(20px,3vw,44px); padding-inline:clamp(20px,3vw,44px);
  font-family:var(--display); font-size:clamp(1.1rem,1.9vw,1.9rem); white-space:nowrap; color:var(--bone-dim);
}
.mq-item em{ font-style:normal; color:var(--brass); font-size:.5em; }

/* ============================================================
   Mission / pillars
   ============================================================ */
#mission{ background:var(--ink); }
.mission-head{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,6vw,90px);
  align-items:start; margin-bottom:clamp(50px,7vw,100px);
}
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.pillar{
  background:var(--ink); padding:clamp(30px,3.2vw,50px); position:relative; overflow:hidden;
  transition:background .55s var(--ease);
}
.pillar::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--brass),var(--brass-lt));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--ease);
}
.pillar:hover{ background:var(--ink-3); }
.pillar:hover::before{ transform:scaleX(1); }
.pillar .ic{
  width:46px; height:46px; border:1px solid var(--line); border-radius:50%; display:grid; place-content:center;
  color:var(--brass); margin-bottom:26px; transition:.55s var(--ease);
}
.pillar:hover .ic{ border-color:var(--brass); background:rgba(201,162,39,.09); transform:rotate(-8deg) scale(1.06); }
.pillar .ic svg{ width:19px; height:19px; }
.pillar h3{ font-size:clamp(1.35rem,1.9vw,1.85rem); margin-bottom:14px; }
.pillar p{ margin:0; color:var(--muted); font-size:.95rem; }
.pillar .n{
  position:absolute; right:clamp(18px,2vw,30px); top:clamp(18px,2vw,26px);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:rgba(239,232,216,.16);
}
.purposes{ margin-top:clamp(50px,6vw,86px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,38px); }
.purpose{ padding-top:22px; border-top:1px solid var(--line); }
.purpose b{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--brass); display:block; margin-bottom:12px; }
.purpose p{ margin:0; font-size:.92rem; color:var(--bone-dim); }
@media (max-width:900px){
  .mission-head{ grid-template-columns:1fr }
  .pillars{ grid-template-columns:1fr }
  .purposes{ grid-template-columns:1fr 1fr }
}
@media (max-width:560px){ .purposes{ grid-template-columns:1fr } }

/* ============================================================
   Convention feature
   ============================================================ */
#convention{ position:relative; overflow:hidden; background:var(--ink-2); }
.conv-bg{ position:absolute; inset:0; z-index:0; }
.conv-bg img{ width:100%; height:120%; object-fit:cover; filter:saturate(.4) brightness(.35); }
.conv-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ink-2) 12%,rgba(12,17,14,.72) 55%,rgba(12,17,14,.4)); }
.conv-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,90px); align-items:center; }
.conv-badge{
  display:inline-flex; align-items:center; gap:10px; border:1px solid var(--brass);
  padding:8px 16px; border-radius:100px; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lt); margin-bottom:26px;
}
.conv-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--brass-lt); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(231,200,106,.5) } 50%{ opacity:.6; box-shadow:0 0 0 8px rgba(231,200,106,0) } }
.conv-meta{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:36px; }
.conv-row{ background:rgba(7,10,8,.65); padding:18px 22px; display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:baseline; }
.conv-row b{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); font-weight:500; }
.conv-row span{ color:var(--bone); font-size:.97rem; }
.conv-card{
  border:1px solid var(--line); background:rgba(7,10,8,.6); backdrop-filter:blur(10px);
  padding:clamp(26px,3vw,44px); position:relative;
}
.conv-card .corner{ position:absolute; width:16px; height:16px; border:1px solid var(--brass); }
.conv-card .c1{ top:-1px; left:-1px; border-right:0; border-bottom:0 }
.conv-card .c2{ top:-1px; right:-1px; border-left:0; border-bottom:0 }
.conv-card .c3{ bottom:-1px; left:-1px; border-right:0; border-top:0 }
.conv-card .c4{ bottom:-1px; right:-1px; border-left:0; border-top:0 }
.conv-list{ list-style:none; margin:0 0 30px; padding:0; display:grid; gap:14px; }
.conv-list li{ display:flex; gap:13px; align-items:flex-start; font-size:.95rem; color:var(--bone-dim); }
.conv-list svg{ width:16px; height:16px; color:var(--brass); flex:none; margin-top:3px; }
@media (max-width:900px){ .conv-inner{ grid-template-columns:1fr } .conv-row{ grid-template-columns:1fr; gap:4px } }

/* ============================================================
   Divisions — hover-swap index
   ============================================================ */
#divisions{ background:var(--ink); }
.div-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:clamp(40px,5vw,70px); }
.div-list{ border-top:1px solid var(--line); position:relative; }
.div-row{
  display:grid; grid-template-columns:78px 1fr auto; gap:clamp(16px,3vw,40px); align-items:center;
  padding:clamp(20px,2.4vw,32px) 0; border-bottom:1px solid var(--line);
  position:relative; cursor:pointer; transition:padding-left .6s var(--ease);
}
.div-row::before{
  content:""; position:absolute; inset:0 -24px; background:linear-gradient(90deg,rgba(201,162,39,.08),transparent 70%);
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
.div-row:hover{ padding-left:20px; }
.div-row:hover::before{ opacity:1; }
.div-row .idx{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--muted); transition:color .4s; }
.div-row:hover .idx{ color:var(--brass); }
.div-row h3{ font-size:clamp(1.4rem,3vw,2.6rem); transition:color .45s var(--ease); }
.div-row:hover h3{ color:var(--brass-lt); font-style:italic; }
.div-row .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:right; max-width:260px; }
.div-preview{
  position:fixed; width:300px; height:380px; z-index:60; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity .45s var(--ease), transform .45s var(--ease);
  overflow:hidden; border:1px solid rgba(201,162,39,.4); box-shadow:0 30px 80px rgba(0,0,0,.65);
}
.div-preview.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.div-preview img{ width:100%; height:100%; object-fit:cover; filter:saturate(.7) contrast(1.1) brightness(.8); }
.div-preview::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(7,10,8,.7)); }
@media (max-width:820px){
  .div-row{ grid-template-columns:52px 1fr; }
  .div-row .tag{ grid-column:2; text-align:left; max-width:none; }
  .div-preview{ display:none }
}

/* ============================================================
   Awards — drag carousel
   ============================================================ */
#awards{ background:var(--ink-2); overflow:hidden; }
.aw-scroller{
  display:flex; gap:clamp(16px,1.8vw,28px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:26px; margin-top:clamp(40px,5vw,64px); cursor:grab;
  scrollbar-width:thin; scrollbar-color:var(--brass-dk) transparent;
}
.aw-scroller.dragging{ cursor:grabbing; scroll-snap-type:none; }
.aw-scroller::-webkit-scrollbar{ height:2px }
.aw-scroller::-webkit-scrollbar-thumb{ background:var(--brass-dk) }
.aw-card{
  flex:0 0 clamp(270px,25vw,360px); scroll-snap-align:start;
  border:1px solid var(--line); background:var(--ink); padding:clamp(24px,2.4vw,36px);
  min-height:340px; display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
  transform-style:preserve-3d; will-change:transform; user-select:none;
}
.aw-card:hover{ border-color:rgba(201,162,39,.5); background:var(--ink-3); }
.aw-card .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.aw-card .ic{ color:var(--brass); }
.aw-card .ic svg{ width:26px; height:26px; }
.aw-card .prize{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--brass-lt);
  border:1px solid rgba(201,162,39,.35); padding:5px 10px; border-radius:100px; white-space:nowrap;
}
.aw-card h3{ font-size:clamp(1.25rem,1.7vw,1.6rem); margin-bottom:12px; }
.aw-card p{ margin:0; font-size:.9rem; color:var(--muted); }
.aw-card .trophy{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--bone-dim); text-transform:uppercase; padding-top:18px; border-top:1px solid var(--line); }
.drag-hint{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; margin-top:8px; }
.drag-hint svg{ width:14px; height:14px; color:var(--brass); }

/* ============================================================
   Gallery
   ============================================================ */
#gallery{ background:var(--ink); }
.g-grid{
  margin-top:clamp(40px,5vw,70px);
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(74px,7vw,116px); gap:clamp(10px,1.1vw,18px);
}
.g-item{
  margin:0; /* figure defaults to 1em 40px, which would break the grid cells */
  position:relative; overflow:hidden; cursor:pointer; background:var(--ink-3);
  border:1px solid transparent; transition:border-color .5s var(--ease);
}
.g-item:hover{ border-color:rgba(201,162,39,.5); }
.g-item img{
  width:100%; height:100%; object-fit:cover; filter:saturate(.55) brightness(.72) contrast(1.08);
  transition:transform 1.1s var(--ease), filter .7s var(--ease);
}
.g-item:hover img{ transform:scale(1.09); filter:saturate(.95) brightness(.92) contrast(1.05); }
.g-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:18px 20px; z-index:2;
  background:linear-gradient(transparent,rgba(7,10,8,.92));
  transform:translateY(14px); opacity:0; transition:.55s var(--ease);
}
.g-item:hover figcaption{ transform:none; opacity:1; }
.g-item figcaption b{ display:block; font-family:var(--display); font-size:1.05rem; font-weight:400; }
.g-item figcaption span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
/* third line on a winner card: the species the award was taken with */
.g-item figcaption em{ display:block; margin-top:3px; font-style:normal;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim); }
.g-item .plus{
  position:absolute; top:14px; right:14px; width:30px; height:30px; z-index:2;
  border:1px solid var(--line); border-radius:50%; display:grid; place-content:center;
  color:var(--bone); opacity:0; transform:scale(.7) rotate(-45deg); transition:.5s var(--ease);
  background:rgba(7,10,8,.5); backdrop-filter:blur(6px);
}
.g-item:hover .plus{ opacity:1; transform:none; }
.g-item .plus svg{ width:14px; height:14px; }
/* Column spans sum to 12 per band; every item in a band shares one row span,
   so bands stay flush instead of going ragged. */
.s-3{ grid-column:span 3 } .s-4{ grid-column:span 4 }
.s-5{ grid-column:span 5 } .s-6{ grid-column:span 6 }
.t4{ grid-row:span 4 } .t5{ grid-row:span 5 }
@media (max-width:900px){
  .s-3,.s-4,.s-5,.s-6{ grid-column:span 6 }
  .t4{ grid-row:span 3 } .t5{ grid-row:span 4 }
}
@media (max-width:560px){
  .g-item{ grid-column:span 12 !important }
  .t4,.t5{ grid-row:span 4 }
}

/* Lightbox */
#lightbox{
  position:fixed; inset:0; z-index:9500; background:rgba(4,6,5,.96);
  display:grid; place-content:center; padding:clamp(20px,5vw,70px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
  backdrop-filter:blur(8px);
}
#lightbox.on{ opacity:1; visibility:visible; }
#lightbox img{
  max-width:min(1100px,88vw); max-height:78vh; object-fit:contain;
  transform:scale(.94); opacity:0; transition:.6s var(--ease); border:1px solid var(--line);
}
#lightbox.on img{ transform:none; opacity:1; }
.lb-cap{ text-align:center; margin-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); }
.lb-btn{
  position:absolute; width:46px; height:46px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-content:center; color:var(--bone); transition:.4s var(--ease);
}
.lb-btn:hover{ border-color:var(--brass); color:var(--brass-lt); background:rgba(201,162,39,.1); }
.lb-btn svg{ width:18px; height:18px }
#lb-close{ top:clamp(18px,3vw,34px); right:clamp(18px,3vw,34px) }
#lb-prev{ left:clamp(14px,2.5vw,34px); top:50% ; margin-top:-23px }
#lb-next{ right:clamp(14px,2.5vw,34px); top:50%; margin-top:-23px }

/* ============================================================
   Membership
   ============================================================ */
#membership{ background:var(--ink-2); position:relative; overflow:hidden; }
.mem-bg{ position:absolute; inset:0; opacity:.16; }
.mem-bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.5); }
.mem-inner{ position:relative; z-index:1; }
.tiers{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(40px,5vw,66px); }
.tier{
  background:var(--ink); padding:clamp(24px,2.2vw,34px) clamp(18px,1.8vw,26px);
  display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden;
  transition:background .5s var(--ease), transform .5s var(--ease);
}
.tier:hover{ background:var(--ink-3); }
.tier.feat{ background:linear-gradient(180deg,rgba(201,162,39,.09),var(--ink) 55%); }
.tier .flag{
  position:absolute; top:0; right:0; background:var(--brass); color:var(--ink);
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; padding:5px 12px;
}
.tier .kind{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.tier .price{ font-family:var(--display); font-size:clamp(2rem,3vw,2.9rem); line-height:1; }
.tier .price sup{ font-size:.42em; vertical-align:super; color:var(--muted); }
.tier .per{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:-8px; }
.tier p{ margin:0; font-size:.88rem; color:var(--muted); flex:1; }
.tier a{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone);
  display:inline-flex; align-items:center; gap:8px; padding-top:14px; border-top:1px solid var(--line);
  transition:color .4s, gap .4s var(--ease);
}
.tier a:hover{ color:var(--brass-lt); gap:14px; }
.tier a svg{ width:13px; height:13px }
.benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,34px); margin-top:clamp(44px,5vw,70px); }
.ben{ display:flex; gap:14px; align-items:flex-start; padding-top:20px; border-top:1px solid var(--line); }
.ben svg{ width:17px; height:17px; color:var(--brass); flex:none; margin-top:3px }
.ben b{ display:block; font-family:var(--body); font-weight:500; font-size:.95rem; margin-bottom:4px }
.ben span{ font-size:.85rem; color:var(--muted) }
@media (max-width:1100px){
  .tiers{ grid-template-columns:repeat(2,1fr) }
  .tier:last-child{ grid-column:span 2 } /* 5 tiers in 2 columns leaves a hole otherwise */
  .benefits{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .tiers{ grid-template-columns:1fr }
  .tier:last-child{ grid-column:auto }
  .benefits{ grid-template-columns:1fr }
}

/* ============================================================
   Heritage timeline
   ============================================================ */
#heritage{ background:var(--ink); position:relative; }
.tl{ position:relative; margin-top:clamp(46px,5vw,80px); padding-left:clamp(30px,5vw,80px); }
.tl-line{ position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--line); }
.tl-line i{ position:absolute; inset:0 0 auto 0; height:0; background:linear-gradient(var(--brass-lt),var(--brass-dk)); }
.tl-item{ position:relative; padding-bottom:clamp(34px,4vw,58px); }
.tl-item::before{
  content:""; position:absolute; left:calc(clamp(30px,5vw,80px) * -1 + 2px); top:9px;
  width:9px; height:9px; border-radius:50%; background:var(--ink); border:1px solid var(--brass);
  transform:scale(0); transition:transform .6s var(--ease);
}
.tl-item.in::before{ transform:scale(1); }
.tl-item b{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--brass); display:block; margin-bottom:10px }
.tl-item h3{ font-size:clamp(1.3rem,2.2vw,2rem); margin-bottom:10px }
.tl-item p{ margin:0; color:var(--muted); max-width:62ch; font-size:.95rem }
.her-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:start }
.her-quote{
  border-left:2px solid var(--brass); padding:6px 0 6px 26px; margin-top:36px;
  font-family:var(--display); font-style:italic; font-size:clamp(1.15rem,1.7vw,1.5rem); color:var(--bone);
}
.her-quote span{ display:block; margin-top:14px; font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
@media (max-width:900px){ .her-grid{ grid-template-columns:1fr } }

/* ============================================================
   Vendors
   ============================================================ */
#vendors{ background:var(--ink-2); padding-block:clamp(70px,8vw,120px) }
.v-head{ padding-inline:var(--gutter); max-width:var(--maxw); margin:0 auto clamp(34px,4vw,54px) }
.v-strip{ margin-block:14px }
.v-chip{
  display:inline-flex; align-items:center; gap:12px; padding:14px 26px; margin-inline:7px;
  border:1px solid var(--line); border-radius:2px; white-space:nowrap; flex:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  transition:border-color .45s var(--ease), color .45s var(--ease), background .45s var(--ease);
}
.v-chip:hover{ border-color:var(--brass); color:var(--brass-lt); background:rgba(201,162,39,.06) }
.v-chip svg{ width:14px; height:14px; color:var(--brass) }

/* ============================================================
   Join / contact
   ============================================================ */
#join{ background:var(--ink); }
.join-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,96px); align-items:start }
.field{ position:relative; margin-bottom:26px }
.field input,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:16px 0 12px; color:var(--bone); font-family:var(--body); font-size:1rem; outline:none;
  transition:border-color .45s var(--ease);
}
.field label{
  position:absolute; left:0; top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); pointer-events:none;
  transition:.45s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.6 }
.field input:focus,.field textarea:focus{ border-bottom-color:var(--brass) }
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  top:-4px; font-size:9px; color:var(--brass);
}
.field .bar{ position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--brass);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--ease) }
.field input:focus ~ .bar,.field textarea:focus ~ .bar{ transform:scaleX(1) }
.check{ display:flex; gap:12px; align-items:flex-start; margin:8px 0 28px; cursor:pointer; font-size:.88rem; color:var(--muted) }
.check input{ position:absolute; opacity:0; pointer-events:none }
.check .box{ width:17px; height:17px; border:1px solid var(--line); flex:none; margin-top:2px; display:grid; place-content:center; transition:.4s var(--ease) }
.check .box svg{ width:11px; height:11px; color:var(--ink); opacity:0; transform:scale(.4); transition:.4s var(--ease) }
.check input:checked ~ .box{ background:var(--brass); border-color:var(--brass) }
.check input:checked ~ .box svg{ opacity:1; transform:none }
#form-ok{
  display:none; align-items:center; gap:12px; border:1px solid var(--brass);
  background:rgba(201,162,39,.08); padding:16px 20px; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-lt);
}
#form-ok.on{ display:flex; animation:okIn .6s var(--ease) }
@keyframes okIn{ from{ opacity:0; transform:translateY(12px) } }
.contact-block{ border:1px solid var(--line); padding:clamp(26px,3vw,42px); display:grid; gap:26px }
.cline{ display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start }
.cline .ic{ width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:grid; place-content:center; color:var(--brass) }
.cline .ic svg{ width:15px; height:15px }
.cline b{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:6px }
.cline p{ margin:0; font-size:.97rem; line-height:1.55 }
.cline a:hover{ color:var(--brass-lt) }
.socials{ display:flex; gap:12px; margin-top:4px }
.socials a{
  width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:grid; place-content:center;
  color:var(--bone-dim); transition:.45s var(--ease);
}
.socials a:hover{ border-color:var(--brass); color:var(--brass-lt); transform:translateY(-3px) }
.socials svg{ width:16px; height:16px }
/* Lucide dropped brand marks, so Facebook/Instagram are inlined */
.brand-ic{ width:16px; height:16px; display:block }
@media (max-width:900px){ .join-grid{ grid-template-columns:1fr } }

/* ============================================================
   Footer
   ============================================================ */
footer{ background:var(--ink-2); border-top:1px solid var(--line); padding:clamp(60px,7vw,100px) var(--gutter) 34px; position:relative; overflow:hidden }
.f-mark{
  font-family:var(--display); font-size:clamp(3rem,13vw,12rem); line-height:.9; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(239,232,216,.13); text-align:center;
  margin-bottom:clamp(40px,5vw,70px); user-select:none;
}
.f-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(24px,3vw,50px); padding-bottom:44px; border-bottom:1px solid var(--line) }
.f-col h4{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin-bottom:18px; font-weight:500 }
.f-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.f-col a{ font-size:.9rem; color:var(--bone-dim); transition:color .35s, padding-left .35s var(--ease) }
.f-col a:hover{ color:var(--brass-lt); padding-left:6px }
.f-about p{ margin:0 0 18px; font-size:.9rem; color:var(--muted); max-width:38ch }
.f-bot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.f-bot .credit a{ color:var(--bone-dim); transition:color .35s }
.f-bot .credit a:hover{ color:var(--brass-lt) }
#totop{ display:inline-flex; align-items:center; gap:9px; transition:gap .4s var(--ease), color .35s }
#totop:hover{ color:var(--brass-lt); gap:14px }
#totop svg{ width:13px; height:13px }
.disclaimer{ margin-top:18px; font-family:var(--body); font-size:11px; letter-spacing:0; text-transform:none; color:rgba(126,138,128,.7); max-width:80ch }
@media (max-width:900px){ .f-cols{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .f-cols{ grid-template-columns:1fr } }

/* ============================================================
   Reduced motion
   ============================================================ */
/* Drop looping, parallax and large-travel motion — the kinds that cause trouble —
   but keep gentle opacity fades, which are the recommended substitute rather
   than stripping the page back to nothing. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important }
  body::after,
  .hero-media img,
  .scroll-cue::after,
  .conv-badge .dot,
  .mq-track,
  .load-mark span{ animation:none !important }
  .cursor,.cursor-dot{ display:none }
  .js .hero-title .ln > span{ transform:none !important }
  .js [data-reveal]{ transform:none }            /* fade in place, no travel */
  [data-reveal]{ transition:opacity .6s ease !important }
  .g-item:hover img,
  .aw-card:hover,
  .socials a:hover,
  .div-row:hover{ transform:none !important }
  .div-row:hover{ padding-left:0 !important }
  .div-preview{ display:none !important }
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */

/* Current page marker in nav */
nav.links a.current{ color:var(--brass-lt) }
nav.links a.current::after{ transform:scaleX(1) }
#menu a.current{ color:var(--brass-lt) }
.f-col a.current{ color:var(--brass-lt) }

/* Page banner (compact hero for interior pages) */
.pagehead{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(150px,15vw,220px) var(--gutter) clamp(50px,6vw,80px);
  border-bottom:1px solid var(--line);
}
.pagehead-media{ position:absolute; inset:-6%; z-index:-3 }
.pagehead-media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.5) contrast(1.1) brightness(.5);
  transform:scale(1.06);
}
.pagehead::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(110% 80% at 80% 10%, rgba(201,162,39,.13), transparent 60%),
    linear-gradient(180deg, rgba(7,10,8,.9) 0%, rgba(7,10,8,.55) 45%, var(--ink) 100%);
}
.pagehead-inner{ max-width:var(--maxw); margin-inline:auto; width:100% }
.pagehead h1{ font-size:clamp(2.6rem,7vw,6rem); margin:22px 0 0 }
.pagehead .lede{ margin-top:24px }
.crumb{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.crumb a:hover{ color:var(--brass-lt) }
.crumb svg{ width:11px; height:11px; opacity:.5 }

/* Generic prose */
.prose{ max-width:74ch }
.prose h2{ font-size:clamp(1.6rem,2.6vw,2.4rem); margin:clamp(38px,4vw,60px) 0 16px }
.prose h3{ font-size:clamp(1.2rem,1.8vw,1.55rem); margin:32px 0 12px }
.prose p{ color:var(--bone-dim); margin:0 0 16px }
.prose ul,.prose ol{ color:var(--bone-dim); margin:0 0 20px; padding-left:20px }
.prose li{ margin-bottom:9px }
.prose li::marker{ color:var(--brass) }
.prose strong{ color:var(--bone); font-weight:500 }
.prose a{ color:var(--brass-lt); text-decoration:underline; text-underline-offset:3px }

/* Two-column page layout with a sticky side rail */
.pagegrid{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:clamp(34px,5vw,80px); align-items:start }
.pagegrid.flip{ grid-template-columns:330px minmax(0,1fr) }
.sidecard{
  position:sticky; top:110px; border:1px solid var(--line);
  background:var(--ink-2); padding:clamp(22px,2.4vw,32px); display:grid; gap:18px;
}
.sidecard h3{ font-size:1.25rem }
.sidecard p{ margin:0; font-size:.9rem; color:var(--muted) }
.sidecard .row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:.9rem }
.sidecard .row:last-of-type{ border-bottom:0 }
.sidecard .row b{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); font-weight:500 }
@media (max-width:960px){
  .pagegrid,.pagegrid.flip{ grid-template-columns:1fr }
  .sidecard{ position:static }
}

/* Data table */
.tbl{ width:100%; border-collapse:collapse; border:1px solid var(--line); font-size:.93rem }
.tbl caption{ text-align:left; padding-bottom:14px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass) }
.tbl th,.tbl td{ padding:15px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
.tbl thead th{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); font-weight:500; background:var(--ink-2);
}
.tbl tbody tr{ transition:background .35s var(--ease) }
.tbl tbody tr:hover{ background:var(--ink-3) }
.tbl tbody tr:last-child td{ border-bottom:0 }
.tbl td.num{ font-family:var(--mono); color:var(--brass-lt); white-space:nowrap }
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* Accordion */
.acc{ border-top:1px solid var(--line) }
.acc-item{ border-bottom:1px solid var(--line) }
.acc-head{
  width:100%; text-align:left; display:grid; grid-template-columns:1fr 26px;
  gap:18px; align-items:center; padding:22px 0; cursor:pointer;
}
.acc-head h3{ font-size:clamp(1.05rem,1.5vw,1.35rem); transition:color .35s }
.acc-item:hover .acc-head h3,.acc-item.open .acc-head h3{ color:var(--brass-lt) }
.acc-head .pm{ position:relative; width:16px; height:16px; justify-self:end }
.acc-head .pm::before,.acc-head .pm::after{
  content:""; position:absolute; background:var(--brass); transition:transform .45s var(--ease);
}
.acc-head .pm::before{ top:7.5px; left:0; width:16px; height:1px }
.acc-head .pm::after{ left:7.5px; top:0; width:1px; height:16px }
.acc-item.open .pm::after{ transform:scaleY(0) }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease) }
.acc-item.open .acc-body{ grid-template-rows:1fr }
.acc-body > div{ overflow:hidden }
.acc-body p,.acc-body ul{ color:var(--muted); font-size:.93rem; margin:0 0 18px }
.acc-body ul{ padding-left:20px } .acc-body li{ margin-bottom:8px }
.acc-body li::marker{ color:var(--brass) }

/* Filter bar */
.filterbar{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:clamp(26px,3vw,40px) }
.filterbar button{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--bone-dim); padding:10px 16px; border-radius:2px;
  transition:all .4s var(--ease);
}
.filterbar button:hover{ border-color:var(--brass); color:var(--brass-lt) }
.filterbar button.on{ background:var(--brass); border-color:var(--brass); color:var(--ink) }

/* Card grid (news, board, products, generic) */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:clamp(14px,1.6vw,24px) }
.cards.two{ grid-template-columns:repeat(auto-fill,minmax(400px,1fr)) }
.card{
  border:1px solid var(--line); background:var(--ink-2); padding:clamp(22px,2.2vw,30px);
  display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.card::before{
  content:""; position:absolute; top:0; left:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--brass),var(--brass-lt));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .65s var(--ease);
}
.card:hover{ border-color:rgba(201,162,39,.4); background:var(--ink-3); transform:translateY(-4px) }
.card:hover::before{ transform:scaleX(1) }
.card .kicker{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass) }
.card h3{ font-size:clamp(1.15rem,1.6vw,1.45rem) }
.card p{ margin:0; font-size:.9rem; color:var(--muted); flex:1 }
.card .more{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone); display:inline-flex; align-items:center; gap:8px;
  padding-top:14px; border-top:1px solid var(--line); transition:gap .4s var(--ease), color .35s;
}
.card:hover .more{ color:var(--brass-lt); gap:13px }
.card .more svg{ width:13px; height:13px }
.card-media{ margin:calc(-1 * clamp(22px,2.2vw,30px)) calc(-1 * clamp(22px,2.2vw,30px)) 4px; aspect-ratio:16/10; overflow:hidden }
.card-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.6) brightness(.75); transition:transform 1s var(--ease), filter .6s }
.card:hover .card-media img{ transform:scale(1.06); filter:saturate(.9) brightness(.9) }

/* Product card */
.price-tag{ font-family:var(--display); font-size:1.9rem; color:var(--brass-lt); line-height:1 }
.price-tag sup{ font-size:.44em; vertical-align:super; color:var(--muted) }

/* Schedule */
.sched{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line) }
.sched-day{ background:var(--ink-2); padding:16px 20px; font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brass) }
.sched-row{ background:var(--ink); padding:15px 20px; display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:baseline;
  transition:background .35s var(--ease) }
.sched-row:hover{ background:var(--ink-3) }
.sched-row time{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; color:var(--brass-lt); white-space:nowrap }
.sched-row span{ color:var(--bone-dim); font-size:.94rem }
.sched-row.hi span{ color:var(--bone) }
.sched-row.hi time{ color:var(--brass) }
@media (max-width:700px){ .sched-row{ grid-template-columns:1fr; gap:5px } }

/* Notice / callout */
.notice{
  border:1px solid rgba(201,162,39,.35); background:rgba(201,162,39,.06);
  padding:20px 24px; display:grid; grid-template-columns:20px 1fr; gap:16px; align-items:start;
}
.notice svg{ width:18px; height:18px; color:var(--brass); margin-top:2px }
.notice p{ margin:0; font-size:.92rem; color:var(--bone-dim) }
.notice strong{ color:var(--bone); font-weight:500 }

/* Stat strip */
.statstrip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line) }
.statstrip .s{ background:var(--ink); padding:clamp(22px,2.4vw,32px) }
.statstrip b{ display:block; font-family:var(--display); font-size:clamp(1.8rem,3vw,2.8rem); line-height:1 }
.statstrip span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }

/* Form success (shared by all mockup forms) */
.form-ok{
  display:none; align-items:center; gap:12px; border:1px solid var(--brass);
  background:rgba(201,162,39,.08); padding:16px 20px; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-lt);
}
.form-ok.on{ display:flex; animation:okIn .6s var(--ease) }
.form-ok svg{ width:16px; height:16px }

/* Next/prev page footer nav */
.pagenav{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(60px,7vw,100px) }
.pagenav a{ background:var(--ink); padding:clamp(24px,3vw,40px); transition:background .45s var(--ease) }
.pagenav a:hover{ background:var(--ink-3) }
.pagenav b{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:10px }
.pagenav span{ font-family:var(--display); font-size:clamp(1.2rem,2vw,1.7rem) }
.pagenav a.next{ text-align:right }
@media (max-width:640px){ .pagenav{ grid-template-columns:1fr } .pagenav a.next{ text-align:left } }


/* ============================================================
   IDENTITY
   ============================================================ */

/* Loader seal — the rack draws itself in before the wordmark */
.load-seal{ width:92px; height:92px; margin-bottom:6px }
.load-seal img,.load-seal svg{ width:100%; height:100%; display:block }
.load-seal img{ opacity:0; animation:sealRing .9s var(--ease) .1s forwards }
@keyframes sealRing{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:none } }
@keyframes sealDraw{ to{ stroke-dashoffset:0 } }
@media (prefers-reduced-motion:reduce){
  .load-seal circle,.load-seal path{ animation:none !important; opacity:1; stroke-dashoffset:0 }
}

/* Brand page */
.logo-stage{
  border:1px solid var(--line); background:var(--ink-2);
  display:grid; place-items:center; padding:clamp(30px,4vw,60px); position:relative;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:32px 32px;
}
.logo-stage.wide{ padding:clamp(26px,3vw,44px) }
.logo-stage.wide svg{ width:min(460px,100%); height:auto }
.logo-slot svg{ display:block; max-width:100% ; height:auto }
.logo-slot.sm{
  margin:calc(-1 * clamp(22px,2.2vw,30px)) calc(-1 * clamp(22px,2.2vw,30px)) 8px;
  background:var(--ink); border-bottom:1px solid var(--line);
  display:grid; place-items:center; padding:30px 0;
}

.swatches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line) }
.sw{ background:var(--ink); padding:0 0 18px }
.sw .chip{ height:96px; border-bottom:1px solid var(--line) }
.sw b{ display:block; font-family:var(--display); font-weight:400; font-size:1.05rem; padding:16px 18px 2px }
.sw .mono{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--brass); padding:0 18px 6px }
.sw span:last-child{ display:block; font-size:.8rem; color:var(--muted); padding:0 18px }
.sidecard .row a{ color:var(--brass-lt); text-decoration:underline; text-underline-offset:3px }


/* Logo hero + concept exploration grid */
.logo-hero{ width:min(340px,70%); height:auto; display:block }
.logo-slot.sm img{ width:150px; height:150px; object-fit:contain }
.concept-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.concept{ margin:0; background:var(--ink); padding:22px 22px 18px; text-align:center;
  transition:background .45s var(--ease) }
.concept:hover{ background:var(--ink-3) }
.concept img{ width:100%; height:auto; max-width:150px; margin:0 auto 14px; display:block }
.concept figcaption b{ display:block; font-family:var(--display); font-weight:400; font-size:1rem }
.concept figcaption span{ font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted) }
.concept.chosen{ background:linear-gradient(180deg,rgba(201,162,39,.10),var(--ink) 60%) }
.concept.chosen figcaption span{ color:var(--brass) }



/* ============================================================
   MOBILE HERO — clear the fixed header
   The header is ~100px tall once the full badge is in it. The hero is
   bottom-aligned with no top padding, so on narrow screens its first row
   (the two eyebrow lines) slid underneath and collided with the logo.
   Fix: pad the hero below the header, and move the eyebrows out of the
   top row entirely so they read as a subtitle under the headline.
   ============================================================ */
@media (max-width:900px){
  #hero{ padding-top:132px; }
}
@media (max-width:600px){
  #hero{ padding-top:104px; }
}
/* The badge already reads "National Taxidermists Association", so below this
   width the text wordmark only wraps to two lines and crowds the nav — which
   made the header 113px tall and squeezed the hero. Drop it. */
@media (max-width:1100px){
  .brand-txt{ display:none; }
}


/* ============================================================
   PILLAR CARD IMAGERY
   A blurred, heavily dimmed photograph behind each pillar. Scaled up 1.2x
   because filter:blur() feathers the edges transparent and would otherwise
   show a pale rim inside the card border.
   ============================================================ */
.pillar{ isolation:isolate; }
.pillar-bg{
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.pillar-bg img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.2);
  filter:blur(9px) saturate(.9) brightness(.8);
  opacity:.62;
  transition:opacity .7s var(--ease), filter .7s var(--ease), transform .9s var(--ease);
}
.pillar-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,10,8,.28) 0%, rgba(7,10,8,.60) 52%, rgba(7,10,8,.86) 100%);
}
.pillar:hover .pillar-bg img{
  opacity:.8; filter:blur(6px) saturate(1.05) brightness(.9); transform:scale(1.26);
}
@media (prefers-reduced-motion:reduce){
  .pillar:hover .pillar-bg img{ transform:scale(1.2); }
}


/* One quiet line under the hero buttons, replacing the cluttered two-line
   eyebrow row that used to sit directly beneath the nav. */
.hero-meta{
  margin:22px 0 0; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.hero-meta::before{
  content:""; display:inline-block; width:26px; height:1px; margin-right:12px;
  vertical-align:middle; background:linear-gradient(90deg,var(--brass),transparent);
}
@media (max-width:600px){
  .hero-meta{ font-size:9.5px; letter-spacing:.16em; line-height:1.7 }
}


/* ============================================================
   DROPDOWN NAVIGATION
   Pure CSS: :hover for mouse, :focus-within for keyboard, so the menu
   still opens if JavaScript fails. Below 960px nav.links is hidden and
   the burger menu takes over, so the hover dependency never hits touch.
   ============================================================ */
nav.links{ align-items:center }
.nav-item{ position:relative; display:flex; align-items:center }

.nav-item > a{ display:inline-flex; align-items:center; gap:6px }
.caret{
  width:10px; height:7px; flex:none; opacity:.65;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.nav-item.has-sub:hover > a .caret,
.nav-item.has-sub:focus-within > a .caret{ transform:rotate(180deg); opacity:1 }

.subnav{
  position:absolute; top:100%; left:-24px; z-index:160; width:380px;
  /* the pad is the bridge between link and panel — without it the menu
     closes as the pointer crosses the gap */
  padding:18px 0 10px;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.985);
  transform-origin:44px 0;
  transition:opacity .3s var(--ease), transform .45s var(--ease), visibility .3s;
}
/* the panel — a rounded card drawn behind the rows, so the bridge stays invisible */
.subnav::before{
  content:""; position:absolute; inset:18px 0 0 0; border-radius:16px;
  border:1px solid rgba(239,232,216,.11);
  background:
    radial-gradient(120% 90% at 22% 0%, rgba(201,162,39,.13), transparent 62%),
    linear-gradient(180deg, rgba(18,26,21,.98), rgba(7,10,8,.985));
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:
    0 34px 80px rgba(0,0,0,.65),
    0 6px 20px rgba(0,0,0,.4),
    0 1px 0 rgba(239,232,216,.07) inset;
}
/* brass cap on the top edge, sitting under the parent link — an accent
   rather than a notch, so nothing overlaps the first row */
.subnav::after{
  content:""; position:absolute; top:17px; left:26px; width:72px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--brass-lt),var(--brass) 45%,rgba(201,162,39,0));
  box-shadow:0 0 14px rgba(201,162,39,.45);
}
.nav-item.has-sub:hover .subnav,
.nav-item.has-sub:focus-within .subnav{ opacity:1; visibility:visible; transform:none }

.subnav a{
  position:relative; display:block; margin:0 10px; padding:15px 38px 16px 18px;
  border-radius:11px; border:0;
  opacity:0; transform:translateY(9px);
  transition:opacity .45s var(--ease), transform .45s var(--ease),
             background .3s var(--ease), box-shadow .3s var(--ease);
}
/* hairline between rows, inset so it never touches the rounded corners */
.subnav a + a{ margin-top:1px }
.subnav a + a::before{
  content:""; position:absolute; top:-1px; left:15px; right:16px; height:1px;
  background:var(--line-soft); transition:opacity .25s var(--ease);
}

/* two lines per row: the label, then what the page actually is */
.s-l{
  display:block; font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone-dim); line-height:1.3;
  transition:color .3s var(--ease), transform .35s var(--ease);
}
.s-d{
  display:block; margin-top:5px; font-family:var(--body); font-size:13.5px;
  letter-spacing:.005em; text-transform:none; color:var(--muted); line-height:1.35;
  transition:color .3s var(--ease), transform .35s var(--ease);
}
/* chevron that slides in on the right of the hovered row.
   nav.links a::after (the underline sweep) outranks a bare .subnav a::after,
   so these carry the nav.links prefix or the underline draws through the label. */
nav.links .subnav a::after{
  content:""; position:absolute; right:17px; top:50%; left:auto; bottom:auto;
  display:block; width:6px; height:6px; margin-top:-4px; background:none;
  border:0; border-right:1.5px solid var(--brass-lt); border-top:1.5px solid var(--brass-lt);
  border-radius:1px;
  opacity:0; transform:rotate(45deg) translate(-4px,4px); transform-origin:50% 50%;
  transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.subnav a:hover,
.subnav a:focus-visible{
  background:linear-gradient(90deg, rgba(201,162,39,.13), rgba(201,162,39,.04));
  box-shadow:0 1px 0 rgba(239,232,216,.06) inset, 0 6px 18px rgba(0,0,0,.28);
  outline:0;
}
.subnav a:hover .s-l,
.subnav a:focus-visible .s-l{ color:var(--brass-lt); transform:translateX(3px) }
.subnav a:hover .s-d,
.subnav a:focus-visible .s-d{ color:var(--bone-dim); transform:translateX(3px) }
nav.links .subnav a:hover::after,
nav.links .subnav a:focus-visible::after{ opacity:1; transform:rotate(45deg) }
/* the divider above a highlighted row would clip its rounded corner */
.subnav a:hover + a::before,
.subnav a:focus-visible + a::before,
.subnav a:hover::before{ opacity:0 }

/* rows arrive one after the other once the panel is open */
.nav-item.has-sub:hover .subnav a,
.nav-item.has-sub:focus-within .subnav a{ opacity:1; transform:none }
.subnav a:nth-child(1){ transition-delay:.04s }
.subnav a:nth-child(2){ transition-delay:.08s }
.subnav a:nth-child(3){ transition-delay:.12s }
.subnav a:nth-child(4){ transition-delay:.16s }
.subnav a:nth-child(5){ transition-delay:.20s }

/* Mobile: compact cluster of the deeper pages under the big links */
/* the id selector on #menu a outranks a bare class, so these carry it too */
#menu .m-more{
  display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:22px;
  padding-top:20px; border-top:1px solid var(--line);
}
#menu .m-more a{
  font-family:var(--mono); font-size:11px; line-height:1.2; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding:0; border:0;
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
#menu .m-more a:hover{ color:var(--brass-lt) }

@media (prefers-reduced-motion:reduce){
  .subnav{ transition:opacity .001ms, visibility .001ms; transform:none }
  .subnav{ transform:none }
  .subnav a{ transform:none; transition:opacity .001ms, background .2s; transition-delay:0s !important }
  .subnav a:hover .s-l,.subnav a:hover .s-d{ transform:none }
  .caret{ transition:none }
}

/* Last dropdown in the row hugs the right edge so its panel can never
   overflow the viewport at the narrowest desktop width (961px). */
.nav-item.has-sub:has(> a[data-nav="scholarships"]) .subnav,
.nav-item.has-sub:has(> a[data-nav="about"]) .subnav{ left:auto; right:-24px }


/* ============================================================
   WINNER GRIDS (award photos)
   The reference gallery crops to a fixed grid cell. These are photographs of
   real people holding their work — a cell crop cut heads off — so the winner
   grids are a column masonry instead: every image keeps its own aspect ratio
   and is shown whole.
   ============================================================ */
.w-grid{
  display:block; columns:4; column-gap:clamp(10px,1.1vw,18px);
  grid-template-columns:none; grid-auto-rows:auto;
}
.w-grid .w-item{
  display:block; width:100%; break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 clamp(10px,1.1vw,18px);
  grid-column:auto !important; grid-row:auto !important;
}
.w-grid .w-item img{
  display:block; width:100%; height:auto; object-fit:contain;
}
@media (max-width:1100px){ .w-grid{ columns:3 } }
@media (max-width:760px){  .w-grid{ columns:2 } }
@media (max-width:480px){  .w-grid{ columns:1 } }

/* ============================================================
   RIGHT-HAND SECTION NAV
   Long pages (rules, awards, divisions, convention) carry a sticky list of
   their own sections on the right. It tracks the section in view and is
   hidden below 1180px, where the page is a single column anyway.
   ============================================================ */
.withside{ display:grid; grid-template-columns:minmax(0,1fr) 226px; gap:clamp(30px,4vw,64px); align-items:start }
.sidenav{ position:sticky; top:118px; padding-left:20px; border-left:1px solid var(--line) }
.sidenav b{
  display:block; margin-bottom:16px; font-family:var(--mono); font-weight:500;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
}
.sidenav a{
  position:relative; display:block; padding:7px 0 7px 16px; font-size:.84rem; line-height:1.35;
  color:var(--muted); transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.sidenav a::before{
  content:""; position:absolute; left:0; top:50%; width:7px; height:1px; margin-top:-.5px;
  background:var(--line); transition:background .3s var(--ease), width .3s var(--ease);
}
.sidenav a:hover{ color:var(--bone-dim); padding-left:20px }
.sidenav a.on{ color:var(--brass-lt) }
.sidenav a.on::before{ background:var(--brass-lt); width:11px }
@media (max-width:1180px){
  .withside{ grid-template-columns:1fr }
  .sidenav{ display:none }
}

/* Button grid — the association's own "click the links below" hub */
.hubgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); gap:10px }
.hubgrid a{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:17px 18px; border:1px solid var(--line); background:var(--ink-2);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.hubgrid a svg{ width:13px; height:13px; flex:none; color:var(--brass); opacity:.6; transition:opacity .3s, transform .35s var(--ease) }
.hubgrid a:hover{ border-color:rgba(201,162,39,.5); color:var(--brass-lt); background:var(--ink-3); transform:translateY(-2px) }
.hubgrid a:hover svg{ opacity:1; transform:translateX(3px) }

/* ============================================================
   MEMBERSHIPWORKS EMBEDS
   The association's own membership system renders the join form, the member
   directory and the account area inside #SFctr. Its stylesheet is light by
   default, so these rules re-skin it for the dark page without touching its
   markup.
   ============================================================ */
.mw-embed{ margin-top:clamp(34px,4vw,54px) }
#SFctr{ color:var(--bone); font-family:var(--body); font-size:.94rem }
#SFctr h1,#SFctr h2,#SFctr h3,#SFctr h4{ font-family:var(--display); font-weight:400; color:var(--bone) }
#SFctr a{ color:var(--brass-lt) }
#SFctr a:hover{ color:var(--brass) }
#SFctr input,#SFctr select,#SFctr textarea{
  background:var(--ink-3); color:var(--bone); border:1px solid var(--line);
  border-radius:0; padding:11px 13px; font-family:var(--body); font-size:.92rem;
}
#SFctr input:focus,#SFctr select:focus,#SFctr textarea:focus{
  outline:0; border-color:var(--brass); box-shadow:0 0 0 1px rgba(201,162,39,.35);
}
#SFctr input::placeholder,#SFctr textarea::placeholder{ color:var(--muted) }
#SFctr label,#SFctr .SFlbl{ color:var(--bone-dim) }
#SFctr button,#SFctr .SFbtn,#SFctr input[type="submit"],#SFctr input[type="button"]{
  background:var(--brass); color:#0B0F0C; border:0; border-radius:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 22px; cursor:none; transition:background .3s var(--ease), color .3s var(--ease);
}
#SFctr button:hover,#SFctr .SFbtn:hover,#SFctr input[type="submit"]:hover{ background:var(--brass-lt) }
/* cards, rows and panels the system draws for listings and membership levels */
#SFctr .SFbx,#SFctr .SFpne,#SFctr .SFitm,#SFctr .SFcrd,#SFctr fieldset{
  background:var(--ink-2); border:1px solid var(--line); border-radius:0; color:var(--bone-dim);
}
#SFctr table{ border-color:var(--line) }
#SFctr td,#SFctr th{ border-color:var(--line); color:var(--bone-dim) }
#SFctr hr{ border-color:var(--line) }
#SFctr img{ max-width:100% }

/* the real class names the membership system renders */
#SFctr .SFcrd{
  background:var(--ink-2); border:1px solid var(--line); border-radius:0;
  color:var(--bone-dim); box-shadow:none;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
#SFctr .SFcrd:hover{ border-color:rgba(201,162,39,.45); transform:translateY(-2px) }
#SFctr .SFcrdnam{ color:var(--bone); font-family:var(--display); font-weight:400; font-size:1.02rem }
#SFctr .SFcrdtxt,#SFctr .SFcrdrec{ color:var(--bone-dim) }
#SFctr .SFcrdlgo,#SFctr .SFcrdlgt,#SFctr .SFcrdlgw{ background:transparent }
#SFctr .SFpne,#SFctr .SFfnd,#SFctr .SF4{ background:transparent; border-color:var(--line) }
#SFctr .SFfndtag,#SFctr .SFfndopt{
  background:var(--ink-3); color:var(--bone-dim); border:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
#SFctr .SFfndtxt input,#SFctr input[type="text"],#SFctr input[type="search"]{
  background:var(--ink-3); color:var(--bone); border:1px solid var(--line);
}
#SFctr button{ background:var(--brass); color:#0B0F0C; border:0 }
#SFctr button:hover{ background:var(--brass-lt) }

/* the system paints its cards white inline, so these must be forced */
#SFctr .SFcrd,#SFctr .SFcrdlst > *{ background:var(--ink-2) !important; color:var(--bone-dim) !important }
#SFctr .SFcrd *{ background-color:transparent !important }
#SFctr .SFcrdnam,#SFctr .SFcrd b,#SFctr .SFcrd strong{ color:var(--bone) !important }
#SFctr .SFcrd a{ color:var(--brass-lt) !important }
#SFctr .SFfnd,#SFctr .SFpne,#SFctr .SF4,#SFctr .SFcrdlst{ background:transparent !important }
#SFctr .SFcrdlgo img,#SFctr .SFcrd img{ background:transparent !important }

/* seven top-level items: shave the label size on the narrower desktop widths */
@media (max-width:1440px){ nav.links a{ font-size:10px; letter-spacing:.13em } }