/* ===========================================================
   AURA — shared stylesheet
   Tokens first, then reset, texture, type, components, chrome.
   =========================================================== */

:root{
  /* Sampled from the reference frame, not invented. */
  --void:#07070a;
  --ink:#0d0d12;
  --tungsten:#e8a05c;   /* the amber ceiling lamp */
  --spill:#5fd6a0;      /* the green light spill at right */
  --ember:#b4342c;      /* the red film edge */
  --paper:#ece8e2;      /* the wordmark's warm off-white */
  --dim:#8b8681;
  --hair:rgba(236,232,226,.14);

  --pad:clamp(20px,5vw,72px);
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
/* Browsers give <figure> a default `margin: 1em 40px`. Left unreset, every .fig
   becomes 100% + 80px inside its grid cell, overflowing it and shifting the photo
   to the right — badly so on narrow viewports. */
figure{margin:0}

/* The nav is fixed and ~72px tall — keep anchor targets clear of it. */
[id]{scroll-margin-top:96px}
:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px}
::selection{background:var(--tungsten);color:var(--void)}

/* ---------- texture: grain + vignette ---------- */

/* Both overlays sit above content but never intercept a click. The grain layer is
   oversized and translated so the jitter never exposes an untextured edge. */
body::before{
  content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;
  pointer-events:none;z-index:4;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(1) infinite;
}
/* Stepped, not smooth — film grain jitters between frames, it does not pan. */
@keyframes grain{
  0%  {transform:translate(0,0)}
  12% {transform:translate(-3%,-4%)}
  25% {transform:translate(2%,-3%)}
  37% {transform:translate(-4%,2%)}
  50% {transform:translate(3%,3%)}
  62% {transform:translate(-2%,4%)}
  75% {transform:translate(4%,-2%)}
  87% {transform:translate(-3%,-3%)}
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.62) 100%);
}
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
}

/* ---------- layout ---------- */

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:820px}

.section{position:relative;padding-block:clamp(64px,7.5vw,108px);overflow:clip}
.section > .wrap{position:relative;z-index:1}
.section--tight{padding-block:clamp(48px,6vw,84px)}

/* A spill is a blurred colour field behind content. It is the ONLY place --tungsten
   and --spill appear as fills; buttons and cards never take them as backgrounds. */
.spill{
  position:absolute;width:min(760px,90vw);aspect-ratio:1;border-radius:50%;
  filter:blur(100px);opacity:.15;pointer-events:none;z-index:0;
}
.spill--tungsten{background:var(--tungsten)}
.spill--green{background:var(--spill)}
.spill--ember{background:var(--ember);opacity:.1}
.spill--tl{top:-25%;left:-15%}
.spill--tr{top:-20%;right:-18%}
.spill--br{bottom:-30%;right:-12%}
.spill--bl{bottom:-28%;left:-16%}

.rule{border:0;border-top:1px solid var(--hair);margin:0}

.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* ---------- type ---------- */

.display{
  font-family:var(--serif);font-weight:400;
  line-height:.94;letter-spacing:-.01em;
  font-size:clamp(34px,5.2vw,62px);
}
.display--xl{
  font-size:clamp(76px,17vw,210px);
  letter-spacing:.04em;line-height:.86;
}

/* The wordmark halo. Layered rather than one large blur so the letterforms keep
   their edge — a single wide shadow just makes a smudge. */
.glow{
  text-shadow:
    0 0 1px rgba(255,252,246,.9),
    0 0 12px rgba(255,246,232,.55),
    0 0 38px rgba(232,160,92,.32),
    0 0 90px rgba(232,160,92,.18);
}

.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:300;
  text-transform:uppercase;letter-spacing:.28em;color:var(--dim);
}
.lede{
  font-size:clamp(16px,1.5vw,19px);line-height:1.72;
  color:rgba(236,232,226,.76);max-width:64ch;
}
.prose p + p{margin-top:1.1em}
.prose{color:rgba(236,232,226,.76);max-width:68ch}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--paper);color:var(--void);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
.skip:focus{left:var(--pad);top:12px}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border:1px solid transparent;border-radius:2px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;
  cursor:pointer;transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.btn--primary{background:var(--paper);color:var(--void)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(232,160,92,.24)}
.btn--ghost{border-color:var(--hair);color:var(--paper)}
.btn--ghost:hover{border-color:rgba(236,232,226,.42);background:rgba(236,232,226,.05);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}
/* Stacked buttons that differ in width read as a mistake — match them on narrow screens. */
@media(max-width:520px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
}

/* A quieter inline link for card footers and prose. */
.link{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--tungsten);border-bottom:1px solid rgba(232,160,92,.32);padding-bottom:2px;
  transition:border-color .25s ease,color .25s ease;
}
.link:hover{color:var(--paper);border-bottom-color:var(--paper)}

/* ---------- cards ---------- */

.card{
  position:relative;background:var(--ink);border:1px solid var(--hair);border-radius:3px;
  padding:clamp(24px,3vw,34px);
  transition:border-color .35s ease,transform .35s ease,background .35s ease;
}
.card h3{font-family:var(--serif);font-size:23px;margin-bottom:10px}
.card p{color:rgba(236,232,226,.7);font-size:15px}
a.card:hover,.card--hover:hover{
  border-color:rgba(232,160,92,.38);transform:translateY(-3px);background:#101017;
}
@media(prefers-reduced-motion:reduce){a.card:hover,.card--hover:hover{transform:none}}

.card__meta{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--dim);margin-bottom:14px;display:block;
}

/* A numbered pillar card: Aspire / Unity / Reform / Activism. */
.pillar__n{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--tungsten);
  display:block;margin-bottom:18px;
}

/* ---------- tags ---------- */

.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{
  padding:9px 17px;border:1px solid var(--hair);border-radius:100px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(236,232,226,.8);
  transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.tag:hover{border-color:rgba(95,214,160,.5);color:var(--paper);background:rgba(95,214,160,.07)}

/* ---------- figures ---------- */

/* width:100% is load-bearing. Without it a .fig carrying an aspect-ratio inside
   a centred grid resolves its size from height and collapses to a fraction of
   its cell instead of filling it. */
.fig{position:relative;width:100%;border:1px solid var(--hair);border-radius:3px;overflow:hidden}
.fig img{width:100%;height:100%;object-fit:cover}
/* Photographs sit in a dark room; a light scrim keeps them from glaring. */
.fig::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,10,.12),rgba(7,7,10,.42));
}

/* ---------- nav ---------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  padding:16px var(--pad);
}
/* The frosted background lives on a pseudo-element, NOT on .nav itself.
   backdrop-filter would make .nav the containing block for the position:fixed
   drawer below, trapping the full-screen menu inside the 72px bar. */
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,10,.94),rgba(7,7,10,0));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.stuck::before{background:rgba(7,7,10,.95);border-bottom-color:var(--hair)}
.nav.open::before{background:var(--void)}

.nav__id{
  font-family:var(--serif);font-size:21px;letter-spacing:.14em;
  margin-right:auto;color:var(--paper);
}
.nav__links{display:flex;gap:28px}
.nav__links a{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--dim);position:relative;padding-bottom:4px;transition:color .25s ease;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--tungsten);transition:width .3s ease;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--paper)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%}

.nav__toggle{
  display:none;background:none;border:0;padding:8px;cursor:pointer;
  color:var(--paper);font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.2em;
}

@media(max-width:900px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed;inset:72px 0 0;flex-direction:column;justify-content:center;
    align-items:center;gap:34px;background:var(--void);
    opacity:0;visibility:hidden;
    /* Visibility must flip INSTANTLY on open: a hidden element silently ignores
       .focus(), so transitioning it would break keyboard access to the drawer.
       On close it is delayed by the fade duration so the menu does not vanish
       mid-animation. */
    transition:opacity .3s ease,visibility 0s linear .3s;
  }
  .nav.open .nav__links{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
  .nav__links a{font-size:14px;letter-spacing:.24em}
  /* Without JS the toggle cannot work, so show the links inline instead of
     hiding them behind a button that does nothing. */
  html:not(.js) .nav__toggle{display:none}
  html:not(.js) .nav__links{position:static;flex-direction:row;flex-wrap:wrap;
    opacity:1;visibility:visible;gap:16px;justify-content:flex-end;background:none}
}

/* ---------- footer ---------- */

.foot{border-top:1px solid var(--hair);padding-block:clamp(48px,6vw,76px);position:relative}
.foot__grid{display:grid;gap:40px;grid-template-columns:1.5fr 1fr 1fr}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr}}
.foot__mark{font-family:var(--serif);font-size:34px;letter-spacing:.1em;margin-bottom:14px}
.foot p{color:rgba(236,232,226,.62);font-size:14.5px;max-width:42ch}
.foot h4{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.24em;
  color:var(--dim);margin-bottom:18px;
}
.foot li{margin-bottom:11px}
.foot li a{font-size:14.5px;color:rgba(236,232,226,.72);transition:color .25s ease}
.foot li a:hover{color:var(--tungsten)}
.foot__base{
  margin-top:52px;padding-top:26px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}

/* ---------- announcement banner ---------- */

.banner{
  position:relative;z-index:21;
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;
  padding:11px var(--pad);
  background:linear-gradient(90deg,rgba(180,52,44,.16),rgba(232,160,92,.16));
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(236,232,226,.86);text-align:center;
}
.banner a{color:var(--tungsten);border-bottom:1px solid rgba(232,160,92,.5);padding-bottom:1px}
.banner a:hover{color:var(--paper);border-bottom-color:var(--paper)}
/* The banner scrolls away; the nav sits below it until then. The banner wraps to two
   or three lines on narrow screens, so its height cannot be a constant — site.js
   measures it into --banner-h. These fallbacks keep the layout right without JS. */
.has-banner .nav{top:var(--banner-h,41px)}
.has-banner .nav.stuck{top:0}
@media(max-width:640px){.has-banner .nav{top:var(--banner-h,78px)}}

/* ---------- scroll reveal ---------- */

[data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].is-in{opacity:1;transform:none}

/* No JS means nothing will ever add .is-in, so never hide anything in the first
   place. This rule and the reduced-motion one below MUST stay separate blocks —
   a media query cannot be comma-joined with a selector. */
html:not(.js) [data-reveal]{opacity:1;transform:none;transition:none}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ===========================================================
   HOME
   =========================================================== */

/* The crowd photograph is a band anchored to the bottom of the hero, with the
   wordmark set above it — the reference frame's composition, but with "AURA" as
   live text rather than pixels baked into the photo. */
.hero{
  position:relative;overflow:clip;
  min-height:100svh;display:grid;align-content:center;
  padding-block:clamp(130px,18vh,180px) clamp(230px,33vh,360px);
}
/* The shader fills the hero; the photograph is a band along the bottom that
   fades up into it. If WebGL is unavailable the canvas stays transparent and
   this gradient is what shows — so the hero is never a flat black rectangle. */
.hero__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 12%,rgba(232,160,92,.18),transparent 55%),
    radial-gradient(90% 70% at 82% 78%,rgba(180,52,44,.14),transparent 60%),
    var(--void);
}
.hero__shader{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.2s ease;
}
/* Faded in only once the context is live, so a failed init never flashes. */
.hero__shader.is-live{opacity:1}
@media(prefers-reduced-motion:reduce){.hero__shader{transition:none}}

.hero__photo{
  position:absolute;left:0;right:0;bottom:0;height:clamp(260px,44vh,470px);
  /* Feather the top edge so the crowd emerges from the shader field rather
     than sitting on it as a hard-edged rectangle. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
}
.hero__photo img{position:absolute;inset:0;width:100%;height:100%}
/* The source crop is 1140x564; anything wider than that ratio would stretch faces,
   so a blurred copy of the same frame fills the overflow with its own colour. */
.hero__blur{object-fit:cover;filter:blur(34px) saturate(1.15);transform:scale(1.2);opacity:.55}
.hero__frame{object-fit:cover;object-position:center 40%;opacity:.88}
/* Sits over both shader and photo: keeps the wordmark's ground dark, lets the
   crowd read in the lower third, then closes into the page colour at the base. */
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,10,.55) 0%,rgba(7,7,10,.62) 34%,rgba(7,7,10,.3) 68%,rgba(7,7,10,.55) 86%,var(--void) 100%);
}
.hero__body{position:relative;z-index:1;text-align:center}
.hero__body .display--xl{margin-bottom:clamp(18px,2.4vw,30px)}
.hero__expand{
  font-family:var(--serif);font-size:clamp(16px,2.1vw,26px);
  line-height:1.35;letter-spacing:.02em;color:rgba(236,232,226,.9);
}
.hero__expand span{color:rgba(236,232,226,.62)}
.hero__tag{margin-top:clamp(20px,3vw,32px)}
.hero__lede{margin:22px auto 0;text-align:center}
.hero__cta{justify-content:center;margin-top:clamp(28px,4vw,40px)}

/* Slow drift. The photo is already soft, so a small scale change is plenty. */
@media(prefers-reduced-motion:no-preference){
  .hero__frame{animation:drift 26s ease-in-out infinite alternate}
}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07)}}

/* The partner sheet is a Canva export on white. Recolouring it would misrepresent
   other organisations' marks, so it stays accurate and is framed as a deliberate
   printed sheet instead — bounded, warm-toned and shadowed, not a full-bleed slab. */
.collabs__art{
  margin:26px auto 0;max-width:940px;
  background:#faf8f5;border-radius:5px;padding:clamp(14px,2vw,26px);
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  border:1px solid rgba(236,232,226,.12);
}
.collabs__art img{width:100%;height:auto;filter:saturate(.94) contrast(.97)}

.mission__grid{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:1.1fr 1fr;align-items:center}
@media(max-width:900px){.mission__grid{grid-template-columns:1fr}}
.mission__text .display{margin:14px 0 24px;max-width:15ch}
.mission__text .btn-row{margin-top:30px}
.mission__fig{aspect-ratio:4/5}
.mission__fig img{height:100%}

.pillars__h{margin:14px 0 clamp(34px,4.5vw,52px);max-width:18ch}

.impact{border-block:1px solid var(--hair)}
.impact__grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.impact__n{
  font-size:clamp(46px,6vw,76px);line-height:1;
  color:var(--paper);margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.impact__label{color:rgba(236,232,226,.62);font-size:14.5px;line-height:1.6;max-width:30ch}
.impact__cta{margin-top:clamp(30px,4vw,46px)}

.join__inner{text-align:center}
.join__inner .display{max-width:16ch;margin:0 auto}
.join__inner .lede{margin:22px auto 0;text-align:center}
.join__cta{justify-content:center;margin-top:34px}

.foot__where{margin-top:18px;font-size:14px;color:rgba(236,232,226,.5)}

/* ===========================================================
   INNER PAGES
   =========================================================== */

/* Top padding clears the fixed nav. The announcement banner is in normal flow,
   so this one value works whether or not a page carries it. */
.phead{
  position:relative;overflow:clip;
  padding-block:clamp(128px,17vh,178px) clamp(34px,4.5vw,58px);
}
.phead__h{margin:14px 0 20px;font-size:clamp(44px,7vw,92px)}
.phead .lede{max-width:56ch}

.sec__h{margin:14px 0 clamp(32px,4.5vw,50px);max-width:20ch}

/* ---------- about ---------- */

.who{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:1.05fr 1fr;align-items:center;margin-top:24px}
@media(max-width:900px){.who{grid-template-columns:1fr}}
.who__line{font-size:clamp(24px,2.7vw,34px);line-height:1.22;margin-bottom:24px}
.who__art{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.who__art .fig{aspect-ratio:3/4}

.deep__row{display:grid;gap:clamp(14px,3vw,52px);grid-template-columns:minmax(200px,1fr) 2fr;padding-block:clamp(28px,4vw,44px)}
@media(max-width:820px){.deep__row{grid-template-columns:1fr;gap:14px}}
.deep__h{font-size:clamp(26px,3vw,38px)}

.topics__more{
  margin-top:clamp(28px,3.5vw,42px);font-size:clamp(22px,3vw,34px);
  color:var(--tungsten);letter-spacing:.02em;
}
.topics .btn-row{margin-top:clamp(30px,4vw,46px)}

/* ---------- get involved ---------- */

.lead-cta{
  display:grid;gap:clamp(24px,4vw,52px);grid-template-columns:1fr 1fr;align-items:center;
  border:1px solid var(--hair);border-radius:3px;background:var(--ink);
  padding:clamp(20px,2.4vw,28px);
}
@media(max-width:860px){.lead-cta{grid-template-columns:1fr}}
.lead-cta__fig{aspect-ratio:3/2}
.lead-cta__h{font-size:clamp(26px,3.4vw,42px);margin:12px 0 16px}
.lead-cta__body .btn-row{margin-top:26px}

.ways{margin-top:clamp(28px,3.5vw,44px)}
.ways .link,.grid .link{display:inline-block;margin-top:18px}

.member{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:860px){.member{grid-template-columns:1fr}}
.member__list li{
  padding:16px 0 16px 34px;border-bottom:1px solid var(--hair);position:relative;
  color:rgba(236,232,226,.78);font-size:15.5px;
}
.member__list li:first-child{border-top:1px solid var(--hair)}
.member__list li::before{
  content:'';position:absolute;left:6px;top:24px;width:12px;height:1px;background:var(--tungsten);
}

.questions{
  margin-top:clamp(36px,5vw,64px);padding:clamp(28px,4vw,48px);
  border:1px solid var(--hair);border-radius:3px;text-align:center;
}
.questions .display{font-size:clamp(26px,3.2vw,38px);margin-bottom:12px}
.questions .prose{margin:0 auto;max-width:52ch}
.questions .btn-row{justify-content:center;margin-top:26px}

/* ---------- archive ---------- */

.chips{display:flex;flex-wrap:wrap;gap:9px;margin:clamp(28px,3.5vw,44px) 0 10px}
.chip{
  padding:9px 17px;border:1px solid var(--hair);border-radius:100px;background:none;
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--dim);cursor:pointer;transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.chip:hover{color:var(--paper);border-color:rgba(236,232,226,.4)}
.chip[aria-pressed="true"]{
  color:var(--void);background:var(--paper);border-color:var(--paper);
}

.arc__group{margin-top:clamp(34px,4.5vw,56px)}
.arc__gh{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.24em;
  color:var(--tungsten);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--hair);
}
.arc__group .card h4{font-family:var(--serif);font-size:20px;line-height:1.25;margin-bottom:10px}
.arc__group .card p{font-size:14px}

/* ---------- schedule ---------- */

.sched{display:grid;gap:clamp(28px,5vw,60px);grid-template-columns:1.2fr 1fr;align-items:center}
@media(max-width:860px){.sched{grid-template-columns:1fr}}
.sched__fig{aspect-ratio:4/5;max-height:480px}

.embed{
  margin-top:clamp(32px,4vw,52px);
  border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:var(--ink);
  aspect-ratio:16/11;
}
@media(max-width:760px){.embed{aspect-ratio:3/4}}
.embed iframe{width:100%;height:100%;border:0;display:block}
.embed__fallback{margin-top:16px;font-size:14px;color:var(--dim)}

/* ---------- 404 ---------- */

.nf{min-height:76svh;display:grid;align-content:center}
.nf__inner{text-align:center}
.nf__h{font-size:clamp(38px,6.5vw,80px);margin:14px 0 20px}
.nf__inner .lede{margin:0 auto;text-align:center}
.nf__cta{justify-content:center;margin-top:32px}
.nf__help{margin-top:28px;font-size:14px;color:var(--dim)}

/* ---------- gallery ---------- */

/* CSS columns, not a JS masonry library — a dependency would buy nothing here.
   Column order runs top-to-bottom per column, which is fine for an undated
   set of event photos. */
.shots{columns:4;column-gap:14px}
@media(max-width:1280px){.shots{columns:3}}
@media(max-width:900px){.shots{columns:2}}
@media(max-width:540px){.shots{columns:1}}

.shot{
  display:block;break-inside:avoid;margin-bottom:14px;
  border:1px solid var(--hair);border-radius:3px;overflow:hidden;position:relative;
  transition:border-color .35s ease,transform .35s ease;
}
.shot img{width:100%;height:auto;transition:opacity .35s ease,transform .6s ease}
.shot:hover{border-color:rgba(232,160,92,.42);transform:translateY(-2px)}
.shot:hover img{opacity:.86;transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){
  .shot:hover{transform:none}
  .shot:hover img{transform:none}
}

/* ---------- lightbox ---------- */

.lb{
  border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100vw;height:100vh;overflow:hidden;
  display:grid;place-items:center;
}
.lb::backdrop{background:rgba(4,4,6,.94);backdrop-filter:blur(6px)}
.lb:not([open]){display:none}
.lb__img{
  max-width:min(92vw,1400px);max-height:86vh;width:auto;height:auto;
  border-radius:3px;box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.lb__close,.lb__nav{
  position:fixed;z-index:2;background:rgba(13,13,18,.82);color:var(--paper);
  border:1px solid var(--hair);border-radius:2px;cursor:pointer;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;
  transition:background .25s ease,border-color .25s ease;
}
.lb__close:hover,.lb__nav:hover{background:var(--ink);border-color:rgba(236,232,226,.44)}
.lb__close{top:18px;right:18px;padding:11px 18px;font-size:10.5px}
.lb__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:17px;line-height:1}
.lb__nav--prev{left:16px}
.lb__nav--next{right:16px}
.lb__count{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--dim);
}
@media(max-width:620px){
  .lb__nav{width:44px;height:44px}
  .lb__nav--prev{left:8px}
  .lb__nav--next{right:8px}
  .lb__img{max-width:96vw}
}

/* ---------- cursor glow (fine pointers only, added by JS) ---------- */

.cursor-glow{
  position:fixed;top:0;left:0;width:420px;height:420px;margin:-210px 0 0 -210px;
  border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(232,160,92,.13),transparent 68%);
  mix-blend-mode:screen;will-change:transform;
}