/* ============================================================
   TANK JIUJITSU — SHARED STYLES
   Loaded by every page (index.html, history/index.html,
   gallery/index.html). This covers: design tokens, reset,
   the small utility-class layer, buttons, the reticle motif,
   nav, mobile nav, banner, footer, back-to-top, the trial
   booking modal, the shared page-header band used by History
   and Gallery, and the lightbox used by both of those pages.

   Anything specific to ONE page (hero, timetable, pricing,
   the lineage chain, the timeline, the gallery grid, etc.)
   stays in a <style> block inside that page instead — so you
   only ever have to look in one place to change how a section
   looks.
   ============================================================ */
:root{
  --ink:#0d0c0a;
  --ink-rgb: 13,12,10;
  --panel:#18160f;
  --panel-rgb: 24,22,15;
  --panel-2:#211e15;
  --line: rgba(201,163,78,0.14);
  --line-strong: rgba(201,163,78,0.4);
  --gold:#C9A34E;
  --gold-bright:#E9C878;
  --bronze:#8A6836;
  --bone:#F1EDE3;
  --ash:#948C80;
  --ash-dim:#8a8471;
  --blood:#7A1F1F;
  --blood-bright:#9C2B2B;
  --error-text:#E45C5C;
  --maxw:1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
/* scroll-padding-top keeps every in-page anchor jump (nav links, the
   lineage/timeline cross-links, "back to top") clear of the sticky
   nav (up to 82px) — without it, a section's heading can land
   partially hidden underneath the nav bar. */
html{ scroll-behavior:smooth; scroll-padding-top:96px; background:var(--ink); }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
a{ color:inherit; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
h1,h2,h3,h4{ font-family:'Oswald',sans-serif; text-transform:uppercase; line-height:1.1; letter-spacing:0.01em; }

::selection{ background:var(--gold); color:var(--ink); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--bronze); border:2px solid var(--ink); border-radius:20px; }
html{ scrollbar-color: var(--bronze) var(--ink); scrollbar-width:thin; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:1px; }

.container{ max-width:var(--maxw); margin:0 auto; padding-left:clamp(1.25rem,4vw,3rem); padding-right:clamp(1.25rem,4vw,3rem); }

.font-display{ font-family:'Big Shoulders Display',sans-serif; }
.font-head{ font-family:'Oswald',sans-serif; }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:'Oswald',sans-serif; font-size:0.76rem; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--gold); font-weight:600;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border:1.5px solid var(--gold);
  transform:rotate(45deg); flex-shrink:0;
}

.rule{ height:1px; background:linear-gradient(90deg, var(--line-strong), transparent); }

/* A photo filling a rounded/square container, with a graceful
   onerror fallback underneath (initials, gradient, icon — whatever
   the container provides). Used by coach avatars, lineage avatars,
   the person modal avatar, gallery tiles, and timeline photos. The
   container just needs position:relative + overflow:hidden. */
.avatar-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in-view{ transition-delay:.1s; }
.reveal-delay-2.in-view{ transition-delay:.2s; }
.reveal-delay-3.in-view{ transition-delay:.3s; }
.reveal-delay-4.in-view{ transition-delay:.4s; }

.motion-paused .ring,
.motion-paused .ring-inner,
.motion-paused .marquee-track,
.motion-paused .testi-track,
.motion-paused .hero-watermark,
.motion-paused .coaches-watermark,
.motion-paused .price-badge,
.motion-paused .scroll-cue span.line,
.motion-paused .scroll-cue-dot{ animation-play-state:paused; }

@keyframes spin-slow{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes spin-slow-rev{ from{ transform:rotate(360deg);} to{ transform:rotate(0deg);} }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-1.5%,1.5%) scale(1.04);} }
@keyframes scrollcue{ 0%{ opacity:0; transform:translateY(-8px);} 50%{ opacity:1;} 100%{ opacity:0; transform:translateY(12px);} }
@keyframes pulse-badge{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,163,78,0.45);} 50%{ box-shadow:0 0 0 8px rgba(201,163,78,0);} }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes marquee-rev{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
@keyframes flicker-in{ 0%{ opacity:0;} 8%{opacity:.4;} 16%{opacity:0;} 24%{opacity:1;} 100%{opacity:1;} }

.anim-spin-slow{ animation:spin-slow 90s linear infinite; }
.anim-spin-slow-rev{ animation:spin-slow-rev 130s linear infinite; }
.anim-drift{ animation:drift 22s ease-in-out infinite; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.09em;
  font-weight:600; font-size:0.86rem;
  padding:1rem 2rem;
  border:1.5px solid transparent;
  transition:transform .3s cubic-bezier(.16,.8,.24,1), box-shadow .3s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-solid{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn-solid:hover{ background:var(--gold-bright); border-color:var(--gold-bright); box-shadow:0 14px 30px -8px rgba(201,163,78,0.45); }
.btn-outline{ background:transparent; color:var(--bone); border-color:rgba(241,237,227,0.35); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); }
.btn-ghost{ color:var(--gold); font-size:.82rem; padding:.4rem 0; border:none; letter-spacing:.1em; }
.btn-ghost::after{ content:'→'; margin-left:.5em; display:inline-block; transition:transform .25s ease; }
.btn-ghost:hover::after{ transform:translateX(5px); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* ============================================================
   RETICLE — signature motif
   ============================================================ */
.reticle{ position:absolute; pointer-events:none; }
.reticle .ring{ position:absolute; inset:0; border:1px solid rgba(201,163,78,0.18); border-radius:50%; }
.reticle .ring-inner{ position:absolute; inset:15%; border:1px solid rgba(201,163,78,0.12); border-radius:50%; }
.reticle .tick{ position:absolute; background:rgba(201,163,78,0.4); }
.reticle .tick-h{ top:50%; left:-8%; right:-8%; height:1px; background:linear-gradient(90deg, transparent, rgba(201,163,78,0.4), transparent); }
.reticle .tick-v{ left:50%; top:-8%; bottom:-8%; width:1px; background:linear-gradient(180deg, transparent, rgba(201,163,78,0.4), transparent); }
.reticle .dot{ position:absolute; top:50%; left:50%; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px 2px rgba(201,163,78,0.6); }
.reticle .corner{ position:absolute; width:14px; height:14px; border-color:rgba(201,163,78,0.5); }
.reticle .corner-tl{ top:6%; left:6%; border-top:1px solid; border-left:1px solid; }
.reticle .corner-tr{ top:6%; right:6%; border-top:1px solid; border-right:1px solid; }
.reticle .corner-bl{ bottom:6%; left:6%; border-bottom:1px solid; border-left:1px solid; }
.reticle .corner-br{ bottom:6%; right:6%; border-bottom:1px solid; border-right:1px solid; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:40;
  background:var(--ink);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, padding .3s ease;
}
.nav.scrolled{
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:82px; transition:height .3s ease; }
.nav.scrolled .nav-inner{ height:68px; }
.nav-logo-img{ height:44px; width:44px; object-fit:contain; transition:height .3s ease,width .3s ease; }
.nav.scrolled .nav-logo-img{ height:36px; width:36px; }
.nav-wordmark{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.04em; }
.nav-wordmark span{ color:var(--gold); }

.nav-links a{
  position:relative; font-family:'Oswald',sans-serif; font-size:0.82rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--ash); font-weight:500; padding:.4rem 0; transition:color .2s ease;
}
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--gold); transition:width .25s ease; }
.nav-links a:hover, .nav-links a.current{ color:var(--bone); }
.nav-links a:hover::after, .nav-links a.current::after{ width:100%; }

/* With 7 nav links, the full row still doesn't comfortably fit next
   to the logo and CTA button between 1024-1199px — keep the hamburger
   menu for that range too, and only show the full row from 1280px up. */
@media (min-width:1024px) and (max-width:1279.98px){
  #siteNav .nav-links{ display:none; }
  #hamburger{ display:flex; }
  #mobileNav{ display:flex; }
  .nav-inner > .hidden.lg\:block{ display:none; }
}

.hamburger{ display:flex; flex-direction:column; gap:5px; width:30px; padding:6px; }
.hamburger span{ display:block; width:100%; height:2px; background:var(--bone); transition:transform .3s ease, opacity .3s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:39; background:rgba(var(--ink-rgb),0.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transform:translateY(-100%); transition:transform .4s cubic-bezier(.16,.8,.24,1);
}
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav a{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:1.5rem; color:var(--bone); }
.mobile-nav a:hover{ color:var(--gold); }

/* ============================================================
   BANNER
   ============================================================ */
.banner{
  background:linear-gradient(90deg, var(--panel), var(--panel-2) 45%, var(--panel));
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:grid-template-rows .4s ease;
  display:grid; grid-template-rows:1fr;
}
.banner.dismissed{ grid-template-rows:0fr; border-bottom-color:transparent; }
.banner-inner-wrap{ overflow:hidden; }
.banner-inner{
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  padding:.62rem clamp(1rem,4vw,3rem); text-align:center; flex-wrap:wrap;
  font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.04em;
}
.banner-inner strong{ color:var(--gold); font-weight:600; }
.banner-close{ position:absolute; right:clamp(.75rem,3vw,1.5rem); top:50%; transform:translateY(-50%); color:var(--ash); font-size:1.1rem; line-height:1; padding:.4rem; }
.banner-close:hover{ color:var(--gold); }
.banner-row{ position:relative; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--panel); border-top:1px solid var(--line); padding:5rem 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3.5rem; }
.footer-brand-row{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.1rem; }
.footer-logo-img{ height:46px; width:46px; object-fit:contain; }
.footer-wordmark{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.05rem; }
.footer-wordmark span{ color:var(--gold); }
.footer-brand p{ color:var(--ash); font-size:.9rem; max-width:300px; }
.footer-social{ display:flex; gap:.8rem; margin-top:1.4rem; }
.footer-social a{ width:36px; height:36px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, color .2s ease; color:var(--ash); }
.footer-social a:hover{ border-color:var(--gold); color:var(--gold); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{ font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); margin-bottom:1.2rem; }
.footer-col a, .footer-col p{ display:block; color:var(--ash); font-size:.9rem; margin-bottom:.75rem; transition:color .2s ease; }
.footer-col address{ font-style:normal; color:var(--ash); font-size:.9rem; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ border-top:1px solid var(--line); padding:1.6rem clamp(1.25rem,4vw,3rem); text-align:center; color:var(--ash-dim); font-size:.8rem; }
.footer-bottom p + p{ margin-top:.35rem; }
.footer-credit{ font-size:.74rem; opacity:.7; }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1/-1; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:30;
  width:46px; height:46px; border:1px solid var(--line-strong); background:rgba(var(--ink-rgb),0.94);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, border-color .2s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ border-color:var(--gold); }

/* ============================================================
   MODAL BASE (trial booking modal + reused by the person modal
   on the home page, and the same panel styling backs the photo
   lightbox on the Gallery/History pages)
   ============================================================ */
.modal-backdrop{
  position:fixed; inset:0; z-index:100; background:rgba(var(--ink-rgb),0.82);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1.25rem;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.modal-backdrop.open{ opacity:1; pointer-events:auto; }
.modal-panel{
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-strong); position:relative;
  padding:clamp(1.75rem,4vw,2.75rem); transform:scale(.94) translateY(14px); transition:transform .35s cubic-bezier(.16,.8,.24,1);
}
.modal-backdrop.open .modal-panel{ transform:scale(1) translateY(0); }
.modal-panel::before{ content:''; position:absolute; top:0; left:0; height:3px; width:100%; background:linear-gradient(90deg,var(--gold),var(--bronze)); }
.modal-close{ position:absolute; top:1.2rem; right:1.2rem; color:var(--ash); font-size:1.3rem; line-height:1; padding:.3rem; }
.modal-close:hover{ color:var(--gold); }

.modal-eyebrow{ font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.modal-title{ font-family:'Oswald',sans-serif; font-size:1.5rem; text-transform:uppercase; font-weight:700; margin-top:.4rem; }
.modal-subtitle{ color:var(--ash); font-size:.88rem; margin-top:.5rem; }

.modal-progress{ display:flex; gap:.4rem; margin:1.6rem 0 2rem; }
.modal-progress span{ height:3px; flex:1; background:var(--line); transition:background-color .3s ease; }
.modal-progress span.done{ background:var(--gold); }

.modal-step{ display:none; }
.modal-step.active{ display:block; animation:stepIn .4s cubic-bezier(.16,.8,.24,1); }
@keyframes stepIn{ from{ opacity:0; transform:translateX(10px);} to{ opacity:1; transform:translateX(0);} }

.field-label{ display:block; font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ash); margin-bottom:.5rem; }
.field-input{
  width:100%; background:var(--ink); border:1px solid var(--line-strong); color:var(--bone);
  padding:.85rem 1rem; font-family:'Inter',sans-serif; font-size:.94rem; margin-bottom:1.3rem; transition:border-color .2s ease;
}
.field-input:focus{ outline:none; border-color:var(--gold); }
.field-input::placeholder{ color:var(--ash-dim); }

.pill-group{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.3rem; }
.pill{
  font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.03em; padding:.6rem 1.1rem;
  border:1px solid var(--line-strong); color:var(--ash); text-transform:none; transition:all .2s ease;
}
.pill[aria-pressed="true"]{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.pill:not([aria-pressed="true"]):hover{ border-color:var(--gold); color:var(--bone); }

.waiver-box{ background:var(--ink); border:1px solid var(--line); padding:1rem 1.1rem; margin-bottom:1.3rem; max-height:110px; overflow-y:auto; font-size:.78rem; color:var(--ash-dim); line-height:1.55; }
.waiver-check{ display:flex; align-items:flex-start; gap:.7rem; margin-bottom:1.6rem; cursor:pointer; }
.waiver-check input{ margin-top:.2rem; accent-color:var(--gold); width:16px; height:16px; flex-shrink:0; }
.waiver-check span{ font-size:.86rem; color:var(--ash); }

.modal-nav-row{ display:flex; gap:.85rem; margin-top:.5rem; }
.modal-nav-row .btn{ flex:1; }

.confirm-wrap{ text-align:center; padding:1rem 0; }
.confirm-icon{ width:64px; height:64px; border:2px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.4rem; }
.confirm-wrap h3{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:1.4rem; font-weight:700; }
.confirm-wrap p{ color:var(--ash); font-size:.92rem; margin-top:.8rem; max-width:36ch; margin-left:auto; margin-right:auto; }

.field-error{ color:var(--error-text); font-size:.76rem; margin:-1rem 0 1rem; display:none; }
.field-error.show{ display:block; }

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============================================================
   FILTER CHIP — reusable small toggle button. Used by the
   Timetable filters on the home page and the person filters on
   the History page (each page provides its own flex-container
   class for spacing; this covers the button itself).
   ============================================================ */
.filter-chip{
  font-family:'Oswald',sans-serif; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; font-weight:500;
  padding:.5rem 1rem; border:1px solid var(--line); color:var(--ash); display:inline-flex; align-items:center; gap:.5rem;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.filter-chip .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.filter-chip[aria-pressed="true"]{ border-color:var(--gold); color:var(--bone); background:rgba(201,163,78,0.08); }
.filter-chip:hover{ border-color:var(--line-strong); color:var(--bone); }

/* ============================================================
   PAGE HEADER — shared intro band for the History and Gallery
   sub-pages (the home page uses the big hero instead of this).
   ============================================================ */
.page-header{ position:relative; padding:calc(6rem + 2vw) 0 4rem; background:var(--ink); overflow:hidden; border-bottom:1px solid var(--line); }
.page-header-bg{ position:absolute; inset:0; z-index:0; }
.page-header-bg img{ width:100%; height:100%; object-fit:cover; opacity:.22; filter:grayscale(.3); }
.page-header-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--ink-rgb),0.55) 0%, rgba(var(--ink-rgb),0.85) 70%, var(--ink) 100%);
}
.page-header-inner{ position:relative; z-index:1; }
.page-header-crumb{ font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ash); display:inline-flex; align-items:center; gap:.5em; margin-bottom:1.3rem; }
.page-header-crumb:hover{ color:var(--gold); }
.page-header h1{ font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:clamp(2.4rem,1.6rem+4vw,4.6rem); line-height:.98; text-transform:uppercase; max-width:18ch; }
.page-header h1 .hi{ color:var(--gold); }
.page-header p{ color:var(--ash); max-width:56ch; margin-top:1.3rem; font-size:1.02rem; }

/* ============================================================
   LIGHTBOX — used on the Gallery grid and History photos.
   Markup is injected by main.js the first time it finds any
   [data-lightbox] image, so pages only need the attribute.
   ============================================================ */
.lightbox-backdrop{
  position:fixed; inset:0; z-index:110; background:rgba(var(--ink-rgb),0.94);
  display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  /* backdrop-filter is also what makes .modal-backdrop composite correctly
     above the sticky nav once it's "stuck" from scrolling — without it,
     some browsers paint the stuck sticky layer above a later fixed
     sibling despite lower z-index. Keep this even though the blur itself
     is subtle; it's load-bearing for correct stacking, not just decoration. */
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.lightbox-backdrop.open{ opacity:1; pointer-events:auto; }
.lightbox-figure{ position:relative; max-width:min(1100px,92vw); max-height:88vh; transform:scale(.96); transition:transform .3s cubic-bezier(.16,.8,.24,1); }
.lightbox-backdrop.open .lightbox-figure{ transform:scale(1); }
.lightbox-figure img{ max-width:100%; max-height:80vh; width:auto; height:auto; margin:0 auto; border:1px solid var(--line-strong); }
.lightbox-caption{ text-align:center; color:var(--ash); font-size:.86rem; margin-top:1rem; }
.lightbox-close{ position:absolute; top:-2.6rem; right:0; color:var(--ash); font-size:1.5rem; line-height:1; padding:.3rem; }
.lightbox-close:hover{ color:var(--gold); }
.lightbox-arrow{
  position:fixed; top:50%; transform:translateY(-50%); width:48px; height:48px; border:1px solid var(--line-strong);
  background:rgba(var(--ink-rgb),0.7); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.3rem;
}
.lightbox-arrow:hover{ border-color:var(--gold); background:rgba(var(--ink-rgb),0.9); }
.lightbox-prev{ left:clamp(.5rem,3vw,2rem); }
.lightbox-next{ right:clamp(.5rem,3vw,2rem); }
@media (max-width:640px){
  .lightbox-arrow{ width:40px; height:40px; }
}

/* ============================================================
   UTILITIES
   Small hand-written layer covering the handful of layout/type
   utilities the markup uses (hidden/flex/grid, spacing, a few
   text treatments). Values match Tailwind's own defaults
   exactly, so nothing here is a mystery if you've used it before.
   ============================================================ */
.hidden{ display:none; }
.flex{ display:flex; }
.grid{ display:grid; }
.inline-block{ display:inline-block; }
.flex-1{ flex:1 1 0%; }
.items-center{ align-items:center; }
.items-stretch{ align-items:stretch; }
.grid-cols-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-cols-12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
.col-span-12{ grid-column:span 12 / span 12; }
.gap-3{ gap:.75rem; }
.gap-5{ gap:1.25rem; }
.gap-6{ gap:1.5rem; }
.gap-8{ gap:2rem; }
.mt-1{ margin-top:.25rem; }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:.75rem; }
.mt-4{ margin-top:1rem; }
.mt-6{ margin-top:1.5rem; }
.mb-6{ margin-bottom:1.5rem; }
.min-w-\[220px\]{ min-width:220px; }
.text-sm{ font-size:.875rem; line-height:1.25rem; }
.text-base{ font-size:1rem; line-height:1.5rem; }
.text-ash{ color:var(--ash); }
.text-gold{ color:var(--gold); }
.font-body{ font-family:'Inter',sans-serif; }
.font-normal{ font-weight:400; }
.font-semibold{ font-weight:600; }
.normal-case{ text-transform:none; }
.underline{ text-decoration-line:underline; }
.underline-offset-4{ text-underline-offset:4px; }
.decoration-bronze{ text-decoration-color:var(--bronze); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
.hover\:text-goldbright:hover{ color:var(--gold-bright); }
.focus\:not-sr-only:focus{ position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip:auto; white-space:normal; }
.focus\:fixed:focus{ position:fixed; }
.focus\:top-3:focus{ top:.75rem; }
.focus\:left-3:focus{ left:.75rem; }
.focus\:z-\[999\]:focus{ z-index:999; }
.focus\:bg-gold:focus{ background-color:var(--gold); }
.focus\:text-ink:focus{ color:var(--ink); }
.focus\:px-4:focus{ padding-left:1rem; padding-right:1rem; }
.focus\:py-2:focus{ padding-top:.5rem; padding-bottom:.5rem; }
.focus\:font-head:focus{ font-family:'Oswald',sans-serif; }
.focus\:uppercase:focus{ text-transform:uppercase; }
.focus\:text-sm:focus{ font-size:.875rem; line-height:1.25rem; }
.focus\:tracking-wider:focus{ letter-spacing:.05em; }

@media (min-width:640px){
  .sm\:inline{ display:inline; }
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:768px){
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:col-span-5{ grid-column:span 5 / span 5; }
  .md\:col-span-7{ grid-column:span 7 / span 7; }
}
@media (min-width:1024px){
  .lg\:hidden{ display:none; }
  .lg\:flex{ display:flex; }
  .lg\:block{ display:block; }
  .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}