/* ==========================================================================
   West Career & Technical Academy — AV Club
   Dark maroon base, one warm accent, large photography.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, served from this site rather than from Google (issues #45, #66).

   These used to load from fonts.googleapis.com, which cost a render-blocking
   request to a third-party origin -- a DNS lookup, a TCP connection and a TLS
   handshake before the browser could even discover which font files it
   needed. On a phone that was over a second of blank page. It also meant
   every visitor's IP address was disclosed to Google just for loading a
   typeface, which is what #66 asked to remove.

   Both families are variable fonts: ONE file covers weights 400-600, which is
   why there is a weight RANGE below rather than a rule per weight. Google
   serves all three Inter weights from a single URL for the same reason --
   splitting them into a file per weight would make a browser download the
   same bytes three times.

   Only the latin and latin-ext subsets are kept. The others Google offers
   (cyrillic, greek, vietnamese) are not used by this site's content.

   font-display: swap is deliberate and must stay: text paints immediately in
   a fallback face and swaps when the real one arrives, so a slow font never
   holds up the first paint. That is also why these are NOT preloaded -- the
   largest-contentful-paint element here is the hero photograph, and a
   preloaded font would compete with it for bandwidth.

   To change or add a weight, edit this block and put the matching .woff2 in
   assets/fonts/. See assets/fonts/LICENSE.md for the licence.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'WCTA Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/wcta-serif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'WCTA Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/wcta-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'WCTA Serif';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/wcta-serif-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'WCTA Serif';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/wcta-serif-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:        #1C0F12;   /* page base */
  --bg-2:      #26151A;   /* raised sections */
  --bg-3:      #331E24;   /* cards */
  --bg-4:      #452A32;   /* borders, hover */

  --paper:     #F7F3EE;   /* light sections, for long reading */
  --paper-2:   #EDE6DC;

  --brass:     #C2A063;   /* the only accent */
  --brass-lt:  #E3C88F;

  --on-dark:      rgba(255,255,255,.88);
  --on-dark-mid:  rgba(255,255,255,.66);
  --on-dark-soft: rgba(255,255,255,.6);  /* was .44: failed WCAG AA (4.38:1) against --bg */

  --ink:      #241417;
  --ink-mid:  #5C464C;

  --serif: "WCTA Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  color: #fff;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
a { color: var(--brass); text-underline-offset: 3px; }
a:hover { color: #E3C88F; }
strong { font-weight: 600; color: #fff; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 720px; }

/* ───────────────────────────────── light sections for long reading ── */
.light { background: var(--paper); color: var(--ink); }
.light h1, .light h2, .light h3 { color: var(--ink); }
.light a { color: #7A4250; }
.light a:hover { color: #52272F; }
.light strong { color: var(--ink); }
.light .lede { color: var(--ink-mid); }
/* .navCard .go normally reads at var(--brass), 2.24:1 on --paper -- fails
   WCAG AA (issue #65). It only appears inside a .light section on the
   Contact page's "Find us online" cards, so re-point it at the same darker
   accent already used for .light a rather than a new one-off colour. */
.light .navCard .go { color: #7A4250; }
/* :focus-visible's outline is the same 2.24:1 brass and, being 2px non-text
   UI, needs the 3:1 minimum WCAG 2.1 SC 1.4.11 sets for that -- not the 4.5:1
   text threshold above, but it still fails on a --paper background. */
.light :focus-visible { outline-color: #7A4250; }

/* ────────────────────────────────────────────────────────── motion ── */
@keyframes riseIn { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform:none; } }
@keyframes slowZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

.enter > * { animation: riseIn .9s var(--ease) both; }
.enter > *:nth-child(1){animation-delay:.05s}
.enter > *:nth-child(2){animation-delay:.14s}
.enter > *:nth-child(3){animation-delay:.23s}
.enter > *:nth-child(4){animation-delay:.32s}
.enter > *:nth-child(5){animation-delay:.41s}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity:1 !important; transform:none !important; transition:none; }
  .enter > * { animation: none; }
  *, *::before, *::after { animation-duration:.001s !important; transition-duration:.08s !important; }
  /* Exempt the hero carousel: it is the club's main way of showing their work,
     and it was specifically asked to slide. Everything decorative above still
     stops. Delete these two lines to make it snap instead of slide. */
  .hero__slide { transition-duration: 1s !important; }
  .hero__slide.is-reset { transition-duration: 0s !important; }
}

/* ──────────────────────────────────────────────────────── elements ── */
.eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 1rem;
}
.light .eyebrow { color: #8A6A38; }

.lede { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--on-dark-mid); max-width: 60ch; line-height: 1.6; }

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .84rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 1rem 1.9rem; border: 1px solid var(--brass); background: var(--brass);
  color: #1C0F12; text-decoration: none; border-radius: 2px;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: #E3C88F; border-color: #E3C88F; color: #1C0F12; transform: translateY(-2px); }
.btn span { transition: transform .3s var(--ease); }
.btn:hover span { transform: translateX(5px); }
.btn--line { background: transparent; color: var(--brass); }
.btn--line:hover { background: var(--brass); color: #1C0F12; }
.light .btn--line { border-color: #7A4250; color: #7A4250; }
.light .btn--line:hover { background: #7A4250; color: #fff; }
.btn--white { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn--white:hover { background: #fff; border-color: #fff; color: #1C0F12; }

section { padding: clamp(62px, 9vw, 118px) 0; }
.raised { background: var(--bg-2); }

/* ──────────────────────────────────────────────────────── masthead ── */
/* Solid background, no backdrop-filter: blurring behind a sticky bar that sits
   over full-bleed photos caused visible repaint glitches while scrolling. */
.masthead { background: var(--bg); border-bottom: 1px solid rgba(194,160,99,.22); position: sticky; top: 0; z-index: 50; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.brand picture, .foot__id picture { display: block; flex: none; line-height: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: #fff; }
.brand__sub { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-top: 2px; }

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  font-size: .8rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--on-dark-mid); text-decoration: none; padding: .55rem .9rem; border-radius: 2px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav a[aria-current="page"] { color: var(--brass); }

/* Hamburger: three lines that fold into an X when open (issue #5). */
.navToggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px; padding: 0; margin-right: -8px;
  align-items: center; justify-content: center;
}
.navToggle__bars, .navToggle__bars::before, .navToggle__bars::after {
  display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
.navToggle__bars { position: relative; }
.navToggle__bars::before, .navToggle__bars::after { content: ""; position: absolute; left: 0; }
.navToggle__bars::before { top: -8px; }
.navToggle__bars::after  { top:  8px; }
.navToggle.is-open .navToggle__bars { background: transparent; transition: background .1s; }
.navToggle.is-open .navToggle__bars::before { transform: translateY(8px) rotate(45deg); }
.navToggle.is-open .navToggle__bars::after  { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 780px) {
  .navToggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid rgba(194,160,99,.22);
    padding: .4rem var(--gut) 1rem; max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .4s var(--ease), opacity .3s var(--ease);
  }
  .nav.is-open { max-height: 400px; opacity: 1; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* ──────────────────────────────────────────────────────────── hero ── */
.hero { position: relative; overflow: hidden; background: var(--bg); min-height: min(84vh, 720px); display: grid; align-items: end; }
.hero__stage { position: absolute; inset: 0; }
/* Sliding carousel. Every slide is parked off to the right; the active one sits
   at 0 and the outgoing one slides off to the left. .hero has overflow:hidden,
   so the parked slides are simply out of view. */
.hero__slide {
  position: absolute; inset: 0;
  transform: translateX(100%);
  transition: transform 1s var(--ease);
  will-change: transform;
}
.hero__slide.is-active  { transform: translateX(0); }
.hero__slide.is-leaving { transform: translateX(-100%); }
/* applied for one frame while a spent slide is parked back on the right,
   so it does not visibly fly back across the screen */
.hero__slide.is-reset { transition: none; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(28,15,18,.72) 0%, rgba(28,15,18,.42) 38%, rgba(28,15,18,.9) 88%, var(--bg) 100%),
    linear-gradient(90deg, rgba(28,15,18,.78) 0%, rgba(28,15,18,.25) 62%, transparent 100%);
}
/* NOTE: __inner shares its element with .wrap, so never put max-width here --
   it would shrink the container and centre the whole block. Constrain the
   children instead. */
/* width:100% matters: .hero is a grid container, and .wrap's `margin-inline:auto`
   would otherwise shrink this item to fit-content and centre it. */
.hero__inner { position: relative; width: 100%; padding-block: clamp(90px, 14vw, 170px) clamp(56px, 7vw, 84px); }
.hero h1 { margin-bottom: .3rem; max-width: 13ch; }
.hero__motto { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--brass); margin: 0 0 1.5rem; }
.hero__lede { color: var(--on-dark); max-width: 46ch; font-size: 1.12rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.hero__dots { position: absolute; bottom: 26px; right: var(--gut); display: flex; gap: .45rem; z-index: 2; }
.hero__dot { width: 30px; height: 3px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.25); transition: background .35s var(--ease); }
.hero__dot.is-active { background: var(--brass); }

/* interior page banner */
.banner { position: relative; overflow: hidden; background: var(--bg); }
.banner .hero__scrim { background: linear-gradient(180deg, rgba(28,15,18,.8) 0%, rgba(28,15,18,.62) 40%, rgba(28,15,18,.95) 90%, var(--bg) 100%); }
.banner__inner { position: relative; padding-block: clamp(72px, 10vw, 120px) clamp(52px, 7vw, 84px); }
.banner h1 { max-width: 17ch; }
.banner p { color: var(--on-dark-mid); margin: 0; max-width: 56ch; font-size: 1.08rem; }

/* ───────────────────────────────────────────── full-bleed photo ──── */
.bleed { position: relative; height: clamp(320px, 52vw, 560px); overflow: hidden; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }
.bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 72%, var(--bg) 100%); }
.bleed__cap { position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vw, 40px); z-index: 2; }
.bleed__cap p { font-family: var(--serif); font-size: clamp(1.2rem, 2.6vw, 1.9rem); color: #fff; margin: 0; max-width: 26ch; line-height: 1.25; }

/* ────────────────────────────────────────────────── layout blocks ── */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(30px, 5vw, 72px); align-items: center; }
.grid { display: grid; gap: clamp(16px, 2.2vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.frame { overflow: hidden; border-radius: 2px; background: var(--bg-3); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.frame:hover img { transform: scale(1.05); }
.frame--wide { aspect-ratio: 3/2; }
.frame--tall { aspect-ratio: 4/5; }

.card {
  background: var(--bg-3); border: 1px solid var(--bg-4); padding: 1.8rem 1.7rem; border-radius: 2px;
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--brass); background: #3A2229; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--on-dark-mid); }
.light .card { background: #fff; border-color: var(--paper-2); }
.light .card:hover { background: #fff; border-color: #C9A97A; }
.light .card p { color: var(--ink-mid); }

.navCard { display: block; text-decoration: none; color: inherit; }
.navCard .go { display: inline-flex; gap: .4rem; margin-top: 1rem; font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); }
.navCard .go span { transition: transform .3s var(--ease); }
.navCard:hover .go span { transform: translateX(5px); }

/* simple numbered list */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; padding: 1.6rem 0; border-top: 1px solid var(--bg-4); display: grid; grid-template-columns: 3rem 1fr; gap: 1.4rem; }
.steps li:last-child { border-bottom: 1px solid var(--bg-4); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); font-size: 1.5rem; color: var(--brass); line-height: 1.2; }
.steps h3 { margin-bottom: .2rem; }
.steps p { margin: 0; color: var(--on-dark-mid); max-width: 60ch; }
.light .steps li { border-color: var(--paper-2); }
.light .steps p { color: var(--ink-mid); }
/* the step number (::before) is var(--brass), 2.24:1 on --paper -- fails even
   the large-text 3:1 threshold. Used on the Join page's numbered steps,
   which sit in a .light section (issue #65). */
.light .steps li::before { color: #7A4250; }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: .8rem; color: var(--on-dark-mid); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--brass); transform: rotate(45deg); }
.light .ticks li { color: var(--ink-mid); }

/* people */
.person { display: flex; gap: 1.1rem; align-items: center; background: var(--bg-3); border: 1px solid var(--bg-4); padding: 1.35rem 1.5rem; border-radius: 2px; transition: transform .5s var(--ease), border-color .5s var(--ease); }
.person:hover { transform: translateY(-4px); border-color: var(--brass); }
.person__mark { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--brass); color: #1C0F12; display: grid; place-items: center; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.person__name { font-family: var(--serif); font-size: 1.2rem; color: #fff; margin: 0; line-height: 1.25; }
.person__meta { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin: .2rem 0 0; }

/* the request-AV call to action */
.request { background: var(--brass); color: #1C0F12; }
.request h2, .request h3 { color: #1C0F12; }
.request p { color: #3A2A14; }
.request .btn { background: #1C0F12; border-color: #1C0F12; color: var(--brass); }
.request .btn:hover { background: #2E1A20; border-color: #2E1A20; color: #E3C88F; }
.request__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; }

/* info list */
.info { background: var(--bg-3); border: 1px solid var(--bg-4); padding: 2rem 1.9rem; border-radius: 2px; }
.info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.4rem; }
.info dt { color: var(--brass); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; padding-top: .35em; }
.info dd { margin: 0; color: var(--on-dark); }

/* ───────────────────────────────────────────────────────── gallery ── */
.album { margin-bottom: clamp(44px, 6vw, 72px); }
.album__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--bg-4); padding-bottom: .8rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.album__head h2 { margin: 0; font-size: 1.6rem; }
.album__meta { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--on-dark-soft); }

.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.gal button { padding: 0; border: 0; background: var(--bg-3); cursor: pointer; overflow: hidden; border-radius: 2px; aspect-ratio: 4/3; display: block; width: 100%; position: relative; transition: transform .5s var(--ease); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gal button:hover { transform: translateY(-4px); }
.gal button:hover img { transform: scale(1.07); }
.gal button::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--brass); transition: box-shadow .3s var(--ease); }
.gal button:hover::after, .gal button:focus-visible::after { box-shadow: inset 0 0 0 3px var(--brass); }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.4rem; }
.filters button { font: 500 .76rem var(--sans); letter-spacing: .11em; text-transform: uppercase; padding: .6rem 1.1rem; border: 1px solid var(--bg-4); background: transparent; color: var(--on-dark-mid); cursor: pointer; border-radius: 2px; transition: all .3s var(--ease); min-height: 44px; display: inline-flex; align-items: center; }
.filters button:hover { border-color: var(--brass); color: #fff; }
.filters button.is-active { background: var(--brass); border-color: var(--brass); color: #1C0F12; }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,7,9,.96); display: none; align-items: center; justify-content: center; padding: 4vmin; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 84vh; object-fit: contain; animation: riseIn .5s var(--ease) both; }
.lightbox__cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: var(--on-dark-soft); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.lightbox__btn { position: absolute; background: none; border: 1px solid rgba(255,255,255,.28); color: #fff; width: 46px; height: 46px; cursor: pointer; font-size: 1.25rem; border-radius: 2px; display: grid; place-items: center; transition: background .25s var(--ease); }
.lightbox__btn:hover { background: rgba(255,255,255,.15); }
.lightbox__prev { left: 3vmin; top: 50%; margin-top: -23px; }
.lightbox__next { right: 3vmin; top: 50%; margin-top: -23px; }
.lightbox__close { top: 3vmin; right: 3vmin; }

/* QR cards */
.qr { text-align: center; }
.qr img { width: 100%; max-width: 190px; margin: 0 auto 1.1rem; background: #fff; padding: 10px; border-radius: 2px; }

/* ────────────────────────────────────────────────────────── footer ── */
.foot { background: #150A0D; color: var(--on-dark-soft); padding: 1.9rem 0 1.6rem; border-top: 1px solid rgba(194,160,99,.2); font-size: .82rem; }
.foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.8rem; flex-wrap: wrap; }
.foot__id { display: flex; align-items: center; gap: .7rem; }
.foot__id img { width: 32px; height: 32px; border-radius: 50%; }
.foot__id b { font-family: var(--serif); font-weight: 600; color: #fff; font-size: .95rem; display: block; line-height: 1.2; }
.foot__id span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.foot nav { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.foot a { color: var(--on-dark-mid); text-decoration: none; font-size: .8rem; transition: color .25s var(--ease); }
.foot a:hover { color: var(--brass); }
.foot__legal { font-size: .72rem; color: rgba(255,255,255,.6); }  /* was .3: failed WCAG AA (2.63:1) against .foot's background */
.foot__cookiePrefs {
  font: inherit; font-size: .72rem; color: rgba(255,255,255,.6); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.foot__cookiePrefs:hover { color: var(--brass); }

/* ─────────────────────────────────────── cookie banner (issue #66) ── */
.cookieBanner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--bg-2); border-top: 1px solid rgba(194,160,99,.35);
  box-shadow: 0 -8px 30px rgba(0,0,0,.35);
}
.cookieBanner__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem 2rem;
  flex-wrap: wrap; padding-block: 1.1rem;
}
.cookieBanner p { margin: 0; max-width: 62ch; font-size: .92rem; color: var(--on-dark-mid); }
.cookieBanner a { color: var(--brass); }
.cookieBanner__actions { display: flex; gap: .7rem; flex: none; }
.cookieBanner .btn { padding: .7rem 1.3rem; font-size: .78rem; }

/* privacy page sections */
.privacy-section { margin-bottom: 2.2rem; }
.privacy-section:last-of-type { margin-bottom: 0; }
.privacy-section p { color: var(--on-dark-mid); }

@media (max-width: 700px) {
  .cookieBanner__inner { padding-block: .9rem; }
  .cookieBanner__actions { width: 100%; }
  .cookieBanner__actions .btn { flex: 1; justify-content: center; }
}

/* ────────────────────────────────────────── 404 page (issue #8) ────── */
.notfound { text-align: center; padding: clamp(70px, 12vw, 140px) 0; }
.notfound__crest { width: clamp(84px, 14vw, 118px); height: auto; border-radius: 50%; margin: 0 auto 2rem; }
.notfound h1 { max-width: 16ch; margin-inline: auto; }
.notfound .lede { margin-inline: auto; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.2rem; }
.notfound__links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center; margin-top: 2.8rem; padding-top: 1.8rem; border-top: 1px solid var(--bg-4); }
.notfound__links a { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mid); text-decoration: none; }
.notfound__links a:hover { color: var(--brass); }

/* ══════════════════════════════════════ mobile tuning (issue #4) ═════ */

@media (max-width: 700px) {
  body { font-size: 16px; line-height: 1.65; }
  h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  h2 { font-size: clamp(1.55rem, 6.4vw, 2rem); }
  h3 { font-size: 1.12rem; }
  section { padding: 52px 0; }

  /* the hero was taller than a phone screen, pushing all content below the fold */
  .hero { min-height: 0; }
  .hero__inner { padding-block: 84px 68px; }   /* padding-block only: the shorthand would wipe .wrap's side padding */
  .hero h1 { max-width: 100%; }
  .hero__lede { font-size: 1.02rem; }
  .banner__inner { padding-block: 56px 44px; }
  .banner h1 { max-width: 100%; }

  /* full-width buttons read better than two cramped ones side by side */
  .hero__actions, .notfound__actions { flex-direction: column; align-items: stretch; gap: .7rem; }
  .hero__actions .btn, .notfound__actions .btn { justify-content: center; width: 100%; }

  .bleed { height: 280px; }
  .bleed__cap p { font-size: 1.15rem; max-width: 100%; }

  .split, .request__inner { gap: 32px; }
  .card { padding: 1.5rem 1.4rem; }

  /* two photos per row beats one giant column */
  .gal { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .filters button { padding: .5rem .85rem; font-size: .7rem; }

  /* stacked labels stop the dates from wrapping mid-word */
  .info { padding: 1.6rem 1.4rem; }
  .info dl { grid-template-columns: 1fr; gap: .15rem; }
  .info dt { padding-top: .9em; }
  .info dt:first-child { padding-top: 0; }

  .steps li { grid-template-columns: 2.2rem 1fr; gap: 1rem; padding: 1.3rem 0; }
  .steps li::before { font-size: 1.2rem; }

  .person { padding: 1.15rem 1.2rem; gap: .9rem; }
  .person__mark { width: 42px; height: 42px; font-size: .95rem; }
  .person__name { font-size: 1.08rem; }

  /* footer reads as a stacked block rather than a squeezed row */
  .foot__inner { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .foot nav { gap: .35rem 1rem; }

  .lightbox { padding: 12px; }
  .lightbox img { max-height: 74vh; }
  .lightbox__btn { width: 44px; height: 44px; }  /* was 40px: under the 44px touch-target minimum (issue #50) */
  .lightbox__prev { left: 8px; margin-top: -22px; }
  .lightbox__next { right: 8px; margin-top: -22px; }
  .lightbox__close { top: 10px; right: 10px; }
}

@media (max-width: 420px) {
  .brand img { width: 38px; height: 38px; }
  .brand__name { font-size: 1rem; }
  .brand__sub { font-size: .53rem; letter-spacing: .13em; }
  .gal { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════ ultrawide tuning (issue #63) ═════
   Past 1800px the fixed 1200px .wrap left huge empty margins either side,
   while the full-bleed hero/banner and .bleed photos (sized off the viewport)
   stretched far wider than their content, cropping heavily into faces. */
@media (min-width: 1800px) {
  :root { --wrap: 1440px; }
  .bleed { height: clamp(320px, 32vw, 640px); }
  .hero { min-height: min(64vh, 760px); }
}

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 10px; z-index: 200; background: #fff; color: var(--ink); padding: .6rem 1rem; border-radius: 2px; }