/* gallery — extracted from the prototype page */

/* ============================================================
   BLACK MAMBA — tokens
   ============================================================ */
:root{
  --ink:        #050506;
  --ink-2:      #0a0a0d;
  --ink-3:      #101014;
  --paper:      #f7f5f0;
  --mute:       rgba(247,245,240,.58);
  --faint:      rgba(247,245,240,.34);
  --gold:       #d8b96a;
  --gold-lite:  #f3e3b0;
  --gold-deep:  #8a6b25;
  --line:       rgba(216,185,106,.22);
  --glass:      rgba(255,255,255,.055);
  --glass-edge: rgba(255,255,255,.16);

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

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

::selection{ background:rgba(216,185,106,.28); color:#fff; }

/* ---------- atmosphere layers ---------- */
#field{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(216,185,106,.10), transparent 55%),
    radial-gradient(100% 70% at 50% 110%, rgba(216,185,106,.05), transparent 60%),
    radial-gradient(140% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.72) 100%);
}
.cursor-glow{
  position:fixed; top:0; left:0; z-index:2; pointer-events:none;
  width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(216,185,106,.11), rgba(216,185,106,.045) 34%, transparent 66%);
  opacity:0; transition:opacity .6s var(--ease-soft);
  will-change:transform;
}
body.pointer-fine .cursor-glow{ opacity:1; }

.page{ position:relative; z-index:3; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:38px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.h-sec{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem, 5.2vw, 3.9rem);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:.5em 0 0;
}
.h-sec em{ font-style:italic; color:var(--gold-lite); }
.lede{
  max-width:46ch;
  color:var(--mute);
  font-size:clamp(.95rem,1.6vw,1.06rem);
  margin:18px 0 0;
}
.rule{ height:1px; background:linear-gradient(90deg, var(--line), transparent); border:0; margin:0; }

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

.section{ position:relative; padding-block:clamp(88px,12vw,150px); }
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; }

/* ============================================================
   Liquid-glass primitives
   ============================================================ */
.glass{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 42%, rgba(255,255,255,.05));
  border:1px solid var(--glass-edge);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 0 22px rgba(255,255,255,.045),
    0 14px 34px rgba(0,0,0,.55);
  overflow:hidden;
}
.glass::after{ /* specular sweep */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.20) 48%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .85s var(--ease);
  pointer-events:none;
}
.glass:hover::after{ transform:translateX(120%); }

.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 26px;
  border-radius:999px;
  font-size:12.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper);
  transform:translateZ(0);
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease), color .38s var(--ease);
  will-change:transform;
}
.pill:hover{
  transform:translateY(-2px) scale(1.022);
  border-color:rgba(216,185,106,.55);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 0 26px rgba(216,185,106,.16),
    0 10px 28px rgba(0,0,0,.55),
    0 0 30px rgba(216,185,106,.24);
}
.pill:active{ transform:translateY(0) scale(.982); transition-duration:.12s; }

.pill-gold{
  background:linear-gradient(180deg, rgba(216,185,106,.94), rgba(160,124,44,.9));
  border:1px solid rgba(243,227,176,.6);
  color:#14100a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 30px rgba(138,107,37,.35);
}
.pill-gold:hover{ color:#0d0a05; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 34px rgba(216,185,106,.4); }

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:18px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .5s var(--ease), background .5s var(--ease);
}
.nav.is-stuck{ padding-block:11px; background:linear-gradient(180deg, rgba(5,5,6,.72), transparent); }

.brand{ display:flex; align-items:center; gap:12px; letter-spacing:.42em; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-name{
  font-family:var(--display);
  font-size:15px; font-weight:500;
  letter-spacing:.44em; text-transform:uppercase;
  padding-left:2px;
}
.brand-sub{
  display:block;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.3em;
  color:var(--faint); text-transform:uppercase; margin-top:3px; padding-left:3px;
}

.nav-links{
  display:flex; align-items:center; gap:8px; padding:5px; border-radius:999px;
  perspective:700px;
  /* clear frosted capsule — heavy blur, minimal fill */
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014) 55%, rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(0,0,0,.34);
  overflow:visible;              /* let item lift, tilt and gold glow escape the capsule */
}
.nav-links::after{ display:none; } /* no capsule-wide white sweep — the gold sheen belongs to each item */
.nav-link{
  position:relative;
  isolation:isolate;
  padding:10px 20px;
  border-radius:999px;
  font-size:11.5px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
  border:1px solid transparent;
  transform-style:preserve-3d;
  transition:
    color .42s var(--ease),
    transform .48s var(--ease),
    border-color .42s var(--ease),
    box-shadow .42s var(--ease),
    text-shadow .42s var(--ease);
  will-change:transform;
}
/* metallic-gold glass pane + specular sheen, revealed on hover */
.nav-link::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background-image:
    linear-gradient(105deg, transparent 34%, rgba(255,248,222,.40) 47%, transparent 61%),
    linear-gradient(168deg,
      rgba(246,231,183,.34) 0%,
      rgba(216,185,106,.19) 34%,
      rgba(138,107,37,.13) 62%,
      rgba(246,231,183,.28) 100%);
  background-size:230% 100%, 100% 100%;
  background-position:150% 0, 0 0;
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  opacity:0;
  transition:opacity .42s var(--ease), background-position .95s var(--ease);
  pointer-events:none;
}
.nav-link:hover,
.nav-link:focus-visible{
  color:var(--gold-lite);
  text-shadow:0 0 16px rgba(216,185,106,.55);
  border-color:rgba(216,185,106,.52);
  transform:translateY(-2px) rotateX(8deg) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,248,222,.55),
    inset 0 0 0 1px rgba(216,185,106,.16),
    inset 0 -4px 10px rgba(216,185,106,.18),
    0 8px 20px rgba(0,0,0,.55),
    0 0 30px rgba(216,185,106,.32);
}
.nav-link:hover::before,
.nav-link:focus-visible::before{ opacity:1; background-position:-50% 0, 0 0; }
.nav-link:active{
  transform:translateY(0) rotateX(0deg) scale(.972);
  transition-duration:.12s;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.45),
    0 0 18px rgba(216,185,106,.22);
}
/* current section stays gold */
.nav-link.is-active{
  color:var(--gold);
  text-shadow:0 0 14px rgba(216,185,106,.42);
  border-color:rgba(216,185,106,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 0 20px rgba(216,185,106,.14);
}
.nav-link.is-active::before{ opacity:.55; }
.nav-link.is-active:hover{ color:var(--gold-lite); }
.nav-link.is-active::after{
  content:"";
  position:absolute; left:20px; right:20px; bottom:6px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow:0 0 8px rgba(216,185,106,.6);
}
.nav-cta{ display:none; }

.burger{
  display:none;
  width:46px; height:46px; border-radius:999px;
  align-items:center; justify-content:center;
}
.burger span{
  display:block; width:17px; height:1px; background:var(--paper);
  position:relative; transition:transform .4s var(--ease), background .3s;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:17px; height:1px; background:var(--paper);
  transition:transform .4s var(--ease), opacity .25s;
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:55;
  padding:110px var(--gut) 40px;
  background:rgba(5,5,6,.86);
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  display:flex; flex-direction:column; gap:6px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
body.menu-open .drawer{ opacity:1; visibility:visible; transform:none; }
.drawer a{
  font-family:var(--display);
  font-size:clamp(2rem,9vw,2.9rem);
  line-height:1.5;
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:6px 2px;
  transition:color .3s, padding-left .4s var(--ease);
}
.drawer a:hover,.drawer a:focus-visible{
  color:var(--gold-lite);
  padding-left:14px;
  text-shadow:0 0 26px rgba(216,185,106,.42);
  border-bottom-color:rgba(216,185,106,.4);
}
.drawer a.is-active{ color:var(--gold); border-bottom-color:rgba(216,185,106,.34); }
.drawer a.is-active::before{
  content:""; display:inline-block;
  width:16px; height:1px; margin-right:12px; vertical-align:middle;
  background:var(--gold); box-shadow:0 0 8px rgba(216,185,106,.7);
}
.drawer .drawer-foot{
  margin-top:auto; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--faint); text-transform:uppercase;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:140px 96px;
  overflow:hidden;
}
.beam{
  position:absolute; top:-30vh; left:50%; z-index:-1;
  width:78vw; height:120vh; margin-left:-39vw;
  background:conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(216,185,106,.085) 12deg, transparent 26deg, transparent 334deg, rgba(216,185,106,.06) 350deg, transparent 360deg);
  filter:blur(22px);
  opacity:.9;
  animation:sway 22s var(--ease-soft) infinite alternate;
}
@keyframes sway{ from{ transform:rotate(-4deg) scaleY(1);} to{ transform:rotate(4deg) scaleY(1.06);} }

.hero-inner{ width:100%; }
.hero-head{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3rem, 11.2vw, 9.2rem);
  line-height:.92;
  letter-spacing:-.03em;
  margin:26px 0 0;
}
.hero-head .line{ display:block; overflow:hidden; }
.hero-head .line > span{ display:block; transform:translateY(105%); }
.hero-head em{
  font-style:italic;
  background:linear-gradient(92deg, var(--gold-lite), var(--gold) 45%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:12px 34px;
  margin-top:34px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint);
}
.hero-meta span{ display:flex; align-items:center; gap:10px; }
.hero-meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.75; }
.hero-copy{ max-width:40ch; color:var(--mute); margin:26px 0 0; font-size:clamp(1rem,1.7vw,1.12rem); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

.scroll-cue{
  position:absolute; left:var(--gut); bottom:34px;
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--faint);
}
.scroll-cue i{
  display:block; width:1px; height:44px;
  background:linear-gradient(180deg, var(--gold), transparent);
  animation:drop 2.6s var(--ease-soft) infinite;
  transform-origin:top;
}
@keyframes drop{ 0%{transform:scaleY(.2); opacity:0} 40%{opacity:1} 100%{transform:scaleY(1); opacity:0} }

/* ---------- ticker strip ---------- */
.strip{
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding-block:16px;
  overflow:hidden;
  background:rgba(255,255,255,.012);
}
.strip-track{
  display:flex; gap:56px; width:max-content;
  animation:slide 46s linear infinite;
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap;
}
.strip:hover .strip-track{ animation-play-state:paused; }
.strip-track b{ color:var(--gold); font-weight:400; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   Upcoming events — ticket stubs
   ============================================================ */
.events{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.014) 30%, transparent); }
.event-list{ margin-top:clamp(44px,6vw,68px); display:grid; gap:20px; }

.event{
  position:relative;
  display:grid;
  grid-template-columns:132px 1.05fr 1.4fr auto;
  align-items:center;
  gap:clamp(20px,3vw,44px);
  padding:22px clamp(22px,3vw,34px) 22px 22px;
  border-radius:20px;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.event::before{ /* stub perforation */
  content:"";
  position:absolute; left:172px; top:18px; bottom:18px; width:1px;
  background:repeating-linear-gradient(180deg, rgba(216,185,106,.5) 0 3px, transparent 3px 9px);
  opacity:.5;
}
.event:hover{ border-color:rgba(216,185,106,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 22px 50px rgba(0,0,0,.6), 0 0 42px rgba(216,185,106,.12); }

.event-date{
  position:relative; z-index:2;
  text-align:center;
  padding:14px 8px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(216,185,106,.13), rgba(216,185,106,.03));
  border:1px solid rgba(216,185,106,.24);
}
.event-date .d{ font-family:var(--display); font-size:2.5rem; line-height:1; display:block; }
.event-date .m{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); display:block; margin-top:6px; }
.event-date .y{ font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; color:var(--faint); display:block; margin-top:2px; }

.event-media{
  position:relative; z-index:2;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
}
.ph{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(216,185,106,.24), transparent 58%),
    linear-gradient(140deg, #16151a, #08080a 55%, #121016);
  transition:transform 1.1s var(--ease), filter .8s var(--ease);
}
.ph::after{
  content:attr(data-ph);
  position:absolute; left:12px; bottom:10px;
  font-family:var(--mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(247,245,240,.4);
}
.ph.v2{ background:radial-gradient(120% 100% at 80% 10%, rgba(216,185,106,.2), transparent 55%), linear-gradient(200deg, #191419, #07070a 60%, #14120c); }
.ph.v3{ background:radial-gradient(100% 100% at 50% 100%, rgba(216,185,106,.22), transparent 60%), linear-gradient(20deg, #0d0d12, #131017 70%); }
.ph.v4{ background:radial-gradient(90% 90% at 10% 90%, rgba(216,185,106,.18), transparent 60%), linear-gradient(160deg, #121218, #0a090c 65%, #17130d); }
.event:hover .ph{ transform:scale(1.05); }

.event-body{ position:relative; z-index:2; }
.event-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold);
}
.event-name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.14;
  margin:10px 0 0; letter-spacing:-.01em;
}
.event-facts{
  display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}
.event-facts b{ color:var(--gold-lite); font-weight:400; }
.event-actions{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.seats{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

.events-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; margin-top:34px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}

/* ============================================================
   About band
   ============================================================ */
.about{ border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.stat{ border-left:1px solid var(--line); padding-left:16px; }
.stat b{ display:block; font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:400; color:var(--gold-lite); line-height:1; }
.stat span{ display:block; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.about-frame{ position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.09); }
.about-frame .ph{ background:radial-gradient(110% 90% at 70% 15%, rgba(216,185,106,.26), transparent 58%), linear-gradient(200deg,#1a1620,#08080b 60%,#15120b); }

/* ============================================================
   Gallery — contact sheet
   ============================================================ */
.gallery-grid{
  margin-top:clamp(44px,6vw,68px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.shot{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  cursor:zoom-in;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), transform .6s var(--ease);
}
.shot:hover{ border-color:rgba(216,185,106,.42); box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(216,185,106,.1); transform:translateY(-3px); }
.shot:hover .ph{ transform:scale(1.06); filter:saturate(1.1); }
.shot .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 18px 16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg, transparent, rgba(4,4,6,.9));
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.shot:hover .cap, .shot:focus-visible .cap{ opacity:1; transform:none; }
.shot .cap b{ color:var(--gold); font-weight:400; }
.shot .no{
  position:absolute; top:14px; left:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:rgba(247,245,240,.5);
}
.s-a{ grid-column:span 7; aspect-ratio:16/10; }
.s-b{ grid-column:span 5; aspect-ratio:4/5; }
.s-c{ grid-column:span 4; aspect-ratio:1/1; }
.s-d{ grid-column:span 4; aspect-ratio:1/1; }
.s-e{ grid-column:span 4; aspect-ratio:1/1; }
.s-f{ grid-column:span 12; aspect-ratio:21/8; }

.lightbox{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(10px,1.6vw,26px);
  /* the same night as the rest of the site, rather than a flat black sheet */
  background:var(--ink);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox figure{ margin:0; width:min(2200px,97vw); }
.lightbox .frame{ position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; border:1px solid rgba(216,185,106,.3); }
.lightbox figcaption{
  margin-top:12px; display:flex; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}
.lightbox .close{
  position:absolute; top:24px; right:24px;
  width:46px; height:46px; border-radius:999px; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   Contact
   ============================================================ */
.contact-card{
  border-radius:26px;
  padding:clamp(34px,5.4vw,66px);
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,5vw,64px); align-items:center;
}
.contact-lines{ display:grid; gap:16px; margin-top:26px; }
.contact-lines a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.09);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); transition:color .35s, border-color .35s, padding-left .4s var(--ease);
}
.contact-lines a:hover{ color:var(--gold-lite); border-color:rgba(216,185,106,.42); padding-left:8px; }
.contact-lines span{ color:var(--faint); }

/* ============================================================
   Footer
   ============================================================ */
.footer{ padding-block:clamp(64px,8vw,96px) 34px; border-top:1px solid rgba(255,255,255,.07); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,5vw,64px); }
.foot-brand .brand-name{ font-size:19px; }
.foot-note{ color:var(--faint); max-width:34ch; margin-top:18px; font-size:14px; }
.foot-col h4{
  font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin:0 0 18px;
}
.foot-col a{ display:block; color:var(--mute); font-size:14px; padding:5px 0; transition:color .3s, padding-left .35s var(--ease); }
.foot-col a:hover{ color:var(--paper); padding-left:6px; }

.socials{ display:flex; gap:10px; margin-top:26px; perspective:600px; }
.social{
  position:relative;
  isolation:isolate;
  overflow:visible;              /* let the lift and gold glow escape the circle */
  width:46px; height:46px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d;
  transition:transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s var(--ease);
}
.social::after{ display:none; }  /* no white sweep — the gold sheen belongs to the icon */
/* metallic-gold glass pane, revealed on hover */
.social::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background-image:
    linear-gradient(105deg, transparent 34%, rgba(255,248,222,.40) 47%, transparent 61%),
    linear-gradient(168deg,
      rgba(246,231,183,.34) 0%,
      rgba(216,185,106,.19) 34%,
      rgba(138,107,37,.13) 62%,
      rgba(246,231,183,.28) 100%);
  background-size:230% 100%, 100% 100%;
  background-position:150% 0, 0 0;
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  opacity:0;
  transition:opacity .42s var(--ease), background-position .95s var(--ease);
  pointer-events:none;
}
.social svg{ width:21px; height:21px; fill:var(--paper); opacity:.8; transition:fill .35s, opacity .35s, filter .42s var(--ease); }
.social:hover,
.social:focus-visible{
  transform:translateY(-3px) rotateX(8deg) scale(1.03);
  border-color:rgba(216,185,106,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,248,222,.55),
    inset 0 0 0 1px rgba(216,185,106,.16),
    inset 0 -4px 10px rgba(216,185,106,.18),
    0 8px 20px rgba(0,0,0,.55),
    0 0 30px rgba(216,185,106,.32);
}
.social:hover::before,
.social:focus-visible::before{ opacity:1; background-position:-50% 0, 0 0; }
.social:active{ transform:translateY(0) rotateX(0deg) scale(.972); transition-duration:.12s; }
.social:hover svg,
.social:focus-visible svg{ fill:var(--gold-lite); opacity:1; filter:drop-shadow(0 0 8px rgba(216,185,106,.45)); }

.foot-base{
  margin-top:clamp(48px,7vw,80px); padding-top:22px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.foot-base nav{ display:flex; flex-wrap:wrap; gap:22px; }
.foot-base a{ transition:color .3s; }
.foot-base a:hover{ color:var(--gold-lite); }

/* ============================================================
   Metallic-gold interaction — nav items, event actions, socials
   (richer pass; overrides the earlier per-element rules)
   ============================================================ */
.event-actions, .events-foot{ perspective:600px; }

.nav-link,
.event-actions .pill,
.events-foot .pill,
.social{
  position:relative;
  isolation:isolate;
  overflow:visible;
  transform-style:preserve-3d;
}
/* the capsule-wide white sweep would wash over the gold */
.event-actions .pill::after,
.events-foot .pill::after,
.social::after{ display:none; }

/* brushed-gold glass pane: bright crown, bronze belly, lit base edge */
.nav-link::before,
.event-actions .pill::before,
.events-foot .pill::before,
.social::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background-image:
    linear-gradient(102deg, transparent 30%, rgba(255,251,236,.52) 45%, rgba(255,246,214,.20) 53%, transparent 66%),
    linear-gradient(166deg,
      rgba(255,246,214,.46) 0%,
      rgba(232,182,47,.30) 30%,
      rgba(150,113,34,.17) 58%,
      rgba(216,185,106,.25) 78%,
      rgba(255,246,214,.42) 100%);
  background-size:240% 100%, 100% 100%;
  background-position:150% 0, 0 0;
  backdrop-filter:blur(12px) saturate(165%);
  -webkit-backdrop-filter:blur(12px) saturate(165%);
  opacity:0;
  transition:opacity .45s var(--ease), background-position 1s var(--ease);
  pointer-events:none;
}

.nav-link:hover, .nav-link:focus-visible,
.event-actions .pill:hover, .event-actions .pill:focus-visible,
.events-foot .pill:hover, .events-foot .pill:focus-visible,
.social:hover, .social:focus-visible{
  color:var(--gold-lite);
  text-shadow:0 0 18px rgba(232,182,47,.5);
  border-color:rgba(232,182,47,.58);
  transform:translateY(-2.5px) rotateX(8deg) scale(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.68),
    inset 0 0 0 1px rgba(232,182,47,.22),
    inset 0 -5px 12px rgba(232,182,47,.22),
    0 10px 24px rgba(0,0,0,.55),
    0 0 12px rgba(232,182,47,.26),
    0 0 38px rgba(216,185,106,.28);
}
.nav-link:hover::before, .nav-link:focus-visible::before,
.event-actions .pill:hover::before, .event-actions .pill:focus-visible::before,
.events-foot .pill:hover::before, .events-foot .pill:focus-visible::before,
.social:hover::before, .social:focus-visible::before{
  opacity:1; background-position:-55% 0, 0 0;
}
.nav-link:active,
.event-actions .pill:active,
.events-foot .pill:active,
.social:active{
  transform:translateY(0) rotateX(0deg) scale(.972);
  transition-duration:.12s;
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(232,182,47,.22),
    0 0 22px rgba(232,182,47,.24);
}

/* current section: gold at rest, brighter on hover */
.nav-link.is-active{
  color:var(--gold);
  text-shadow:0 0 16px rgba(232,182,47,.45);
  border-color:rgba(232,182,47,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.34),
    inset 0 0 0 1px rgba(232,182,47,.14),
    0 0 24px rgba(216,185,106,.18);
}
.nav-link.is-active::before{ opacity:.7; }
.nav-link.is-active::after{
  background:linear-gradient(90deg, transparent, rgba(255,246,214,.95), transparent);
  box-shadow:0 0 10px rgba(232,182,47,.75);
}

/* event date stubs — same metal, same lift */
.event-date{
  isolation:isolate;
  overflow:visible;
  transition:
    transform .45s var(--ease),
    border-color .45s var(--ease),
    box-shadow .45s var(--ease),
    background .45s var(--ease);
}
.event-date::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background-image:
    linear-gradient(102deg, transparent 30%, rgba(255,251,236,.52) 45%, rgba(255,246,214,.20) 53%, transparent 66%),
    linear-gradient(166deg,
      rgba(255,246,214,.46) 0%,
      rgba(232,182,47,.30) 30%,
      rgba(150,113,34,.17) 58%,
      rgba(216,185,106,.25) 78%,
      rgba(255,246,214,.42) 100%);
  background-size:240% 100%, 100% 100%;
  background-position:150% 0, 0 0;
  backdrop-filter:blur(12px) saturate(165%);
  -webkit-backdrop-filter:blur(12px) saturate(165%);
  opacity:0;
  transition:opacity .45s var(--ease), background-position 1s var(--ease);
  pointer-events:none;
}
.event-date:hover{
  transform:perspective(700px) translateY(-2.5px) rotateX(8deg) scale(1.035);
  border-color:rgba(232,182,47,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.68),
    inset 0 0 0 1px rgba(232,182,47,.22),
    inset 0 -5px 12px rgba(232,182,47,.22),
    0 10px 24px rgba(0,0,0,.55),
    0 0 12px rgba(232,182,47,.26),
    0 0 38px rgba(216,185,106,.28);
}
.event-date:hover::before{ opacity:1; background-position:-55% 0, 0 0; }
/* keep the date legible on top of the lit metal */
.event-date .d,
.event-date .m,
.event-date .y{ transition:color .45s var(--ease), text-shadow .45s var(--ease); }
.event-date:hover .d{ color:#fff9e8; text-shadow:0 1px 10px rgba(60,40,4,.7); }
.event-date:hover .m{ color:#fff3cf; text-shadow:0 1px 8px rgba(60,40,4,.65); }
.event-date:hover .y{ color:rgba(255,246,214,.82); text-shadow:0 1px 8px rgba(60,40,4,.6); }

/* ============================================================
   Reveals
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s);
}
.hero.is-ready .hero-head .line > span{
  transform:none;
  transition:transform 1.25s var(--ease) var(--d,0s);
}
.hero .fade{ opacity:0; transform:translateY(16px); }
.hero.is-ready .fade{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .event{ grid-template-columns:110px 1fr; grid-template-areas:"date body" "media media" "act act"; }
  .event::before{ display:none; }
  .event-date{ grid-area:date; }
  .event-body{ grid-area:body; }
  .event-media{ grid-area:media; aspect-ratio:16/9; margin-top:6px; }
  .event-actions{ grid-area:act; flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
  .about-grid{ grid-template-columns:1fr; }
  .about-frame{ aspect-ratio:16/10; order:-1; }
  .contact-card{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:720px){
  .brand-sub{ display:none; }
  .hero{ min-height:92svh; }
  .hero-actions .pill{ width:100%; }
  .event{ grid-template-columns:1fr; grid-template-areas:"media" "date" "body" "act"; padding:16px; gap:16px; }
  .event-date{ display:flex; align-items:baseline; gap:12px; justify-content:flex-start; padding:10px 16px; }
  .event-date .d{ font-size:1.9rem; } .event-date .m,.event-date .y{ margin-top:0; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .s-a,.s-f{ grid-column:span 2; aspect-ratio:16/10; }
  .s-b,.s-c,.s-d,.s-e{ grid-column:span 1; aspect-ratio:1/1; }
  .shot .cap{ opacity:1; transform:none; font-size:9px; padding:26px 12px 12px; }
  .foot-top{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:1fr; gap:14px; }
  .scroll-cue{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-head .line > span{ transform:none; }
  .hero .fade{ opacity:1; transform:none; }
  .cursor-glow{ display:none; }
}
/* ============================================================
   Gallery — editorial grid, cinematic tiles
   ============================================================ */
.edit-grid{
  margin-top:clamp(40px,5.5vw,64px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,1.4vw,18px);
}
.tile{
  grid-column:span var(--span,4);
  aspect-ratio:var(--ar,1/1);
}

/* cinematic hover — camera push, cursor-tracked tilt, gold sweep, dark-to-gold wash */
.shot{
  --rx:0deg; --ry:0deg; --px:0; --py:0; --mx:50%; --my:50%;
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition:border-color .6s var(--ease), box-shadow .6s var(--ease), transform .75s var(--ease);
}
.shot.tilt{ transition:border-color .6s var(--ease), box-shadow .6s var(--ease), transform .12s linear; }
.shot:hover, .shot:focus-visible{
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-7px) scale(1.014);
  border-color:rgba(232,182,47,.62);
  box-shadow:
    inset 0 0 0 1px rgba(232,182,47,.2),
    0 32px 74px rgba(0,0,0,.68),
    0 0 18px rgba(232,182,47,.26),
    0 0 68px rgba(216,185,106,.3);
}
.shot:hover .ph, .shot:focus-visible .ph{
  transform:scale(1.075) translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0);
  filter:saturate(1.1) contrast(1.04);
}
.shot-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 1.7s var(--ease), filter 1s var(--ease);
}
.shot:hover .shot-img, .shot:focus-visible .shot-img{
  transform:scale(1.085) translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0);
  filter:saturate(1.1) contrast(1.04);
}

/* gold light sweep — one refined pass, then a long pause */
.shot::before{
  content:"";
  position:absolute; top:-60%; bottom:-60%; left:0; width:34%;
  z-index:3; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,251,236,0) 0%,
    rgba(255,246,214,.14) 34%,
    rgba(240,206,110,.44) 50%,
    rgba(255,246,214,.14) 66%,
    rgba(255,251,236,0) 100%);
  filter:blur(7px);
  transform:translate3d(-160%,0,0) rotate(14deg);
  opacity:0;
}
.shot:hover::before, .shot:focus-visible::before{ animation:shotSweep 3.6s var(--ease) .1s infinite; }
@keyframes shotSweep{
  0%   { transform:translate3d(-160%,0,0) rotate(14deg); opacity:0; }
  7%   { opacity:.95; }
  34%  { transform:translate3d(360%,0,0) rotate(14deg); opacity:0; }
  100% { transform:translate3d(360%,0,0) rotate(14deg); opacity:0; }
}

/* bloom under the cursor, vignette, gold floor */
.shot::after{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(260px 260px at var(--mx) var(--my), rgba(240,206,110,.2), transparent 68%),
    radial-gradient(125% 92% at 50% 44%, transparent 38%, rgba(3,3,5,.58) 100%),
    linear-gradient(180deg, rgba(4,4,6,0) 46%, rgba(6,5,4,.46) 80%, rgba(122,92,28,.4) 100%);
  opacity:0;
  transition:opacity .65s var(--ease);
}
.shot:hover::after, .shot:focus-visible::after{ opacity:1; }
.shot .cap, .shot .no{ z-index:4; }

/* placeholder frame — disappears the moment a real photo is dropped in */
.tile .ph::before{
  content:"";
  position:absolute; inset:14px;
  border:1px dashed rgba(232,182,47,.22);
  border-radius:10px;
  transition:border-color .6s var(--ease);
}
.shot:hover .ph::before{ border-color:rgba(232,182,47,.4); }
.ph-hint{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(247,245,240,.34);
  pointer-events:none;
}

/* ---------- slideshow lightbox ---------- */
.lightbox .frame.is-img{ aspect-ratio:auto; display:flex; background:#08080a; }
#lbImg{ display:none; margin:auto; max-width:100%; max-height:94vh; width:auto; height:auto; }
.frame.is-img #lbImg{ display:block; }
.frame.is-img #lbPh{ display:none; }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  font-size:24px; line-height:1; color:var(--paper);
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer; z-index:6;
  transition:border-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.lb-nav:hover{
  color:var(--ink); border-color:rgba(232,182,47,.6);
  background:linear-gradient(150deg, #f6e2a8 0%, #e8b62f 42%, #b8892a 72%, #f3dc9e 100%);
  box-shadow:0 0 26px rgba(216,185,106,.34);
  transform:translateY(-50%) scale(1.06);
}
.lb-nav.prev{ left:clamp(12px,3vw,42px); }
.lb-nav.next{ right:clamp(12px,3vw,42px); }
.lb-count{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--gold); }

@media (max-width:1080px){
  .edit-grid{ grid-template-columns:repeat(6,1fr); }
  .tile{ grid-column:span var(--span-md,3); }
}
@media (max-width:620px){
  .edit-grid{ gap:10px; }
  .tile{ grid-column:1 / -1; aspect-ratio:var(--ar-sm,4/3); }
  .lb-nav{ width:44px; height:44px; font-size:20px; }
}
@media (prefers-reduced-motion: reduce){
  .shot:hover::before, .shot:focus-visible::before{ animation:none; }
  .shot:hover, .shot:focus-visible{ transform:translateY(-3px); }
}

/* the full lockup, in place of the diamond and the typeset name */
.brand-lockup{ display:block; height:54px; width:auto; }
.foot-lockup{ display:block; height:78px; width:auto; margin-bottom:20px; }
@media (max-width:720px){ .brand-lockup{ height:42px; } .foot-lockup{ height:60px; } }

.drawer-lockup{ height:66px; width:auto; display:block; margin:0 auto 30px; }

/* ============================================================
   GALLERY TABS
   ============================================================ */
.tabs-wrap{ margin:-18px auto 38px; }
.tabs{
  display:grid; grid-template-columns:1fr 1fr;   /* the two are always equal */
  gap:12px; width:100%; max-width:620px;
}
.tab{
  display:flex; align-items:center; justify-content:center; gap:11px;
  min-height:62px; padding:16px 22px; cursor:pointer;
  border-radius:14px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.tab svg{ width:21px; height:21px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linejoin:round; stroke-linecap:round; }
.tab svg .fill{ fill:currentColor; stroke:none; }
.tab span{ white-space:nowrap; }

/* off: dark, gold-rimmed, light type */
.tab{
  background:linear-gradient(180deg,#101014 0%,#0a0a0d 100%);
  border:1.5px solid rgba(232,182,47,.55);
  color:var(--paper);
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.tab:hover{
  border-color:rgba(232,182,47,.95);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(216,185,106,.22);
  transform:translateY(-2px);
}
/* on: solid gold, dark type */
.tab.is-on{
  background:linear-gradient(150deg,#f6e2a8 0%,#e8b62f 44%,#c1932c 76%,#f3dc9e 100%);
  border-color:#e8b62f;
  color:#0a0a0d;
  box-shadow:0 12px 32px rgba(0,0,0,.45), 0 0 34px rgba(216,185,106,.4);
  transform:none;
}
.tab.is-on:hover{ transform:translateY(-2px); }
.tab:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

@media (max-width:560px){
  .tabs{ gap:9px; }
  .tab{ min-height:56px; padding:14px 12px; font-size:10.5px; letter-spacing:.14em; gap:8px; }
  .tab svg{ width:18px; height:18px; }
}

/* one panel at a time, and no argument about it */
#panel-photos[hidden], #panel-motion[hidden]{ display:none !important; }

/* ============================================================
   MOTION FLYERS
   ============================================================ */
.motion-grid{
  display:grid; gap:clamp(14px,1.8vw,26px);
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  max-width:1640px; margin-inline:auto;      /* wider than the text column */
  align-items:start;
}
@media (max-width:1180px){ .motion-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .motion-grid{ grid-template-columns:1fr; } }

.mf{
  position:relative; overflow:hidden; border-radius:20px;
  width:100%; max-width:430px; margin-inline:auto;
  aspect-ratio:9/16;                          /* every card the same frame */
  background:linear-gradient(180deg,#0b0b0f 0%,#07070a 100%);
  border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.mf:hover{
  border-color:rgba(232,182,47,.55);
  transform:translateY(-4px);
  box-shadow:0 34px 72px rgba(0,0,0,.62), 0 0 44px rgba(216,185,106,.2);
}
@media (max-width:640px){ .mf{ max-width:min(440px, 92vw); } }

/* The flyers are not all the same shape. Nothing is cropped to fit the frame —
   these are posters, and the edges carry the venue, the date and the phone
   number. The whole flyer is shown, centred, on plain dark. */
.mf-art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; display:block;
  background:#08080b;
}
.mf-shade{
  position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,5,6,0) 0%, rgba(5,5,6,.72) 62%, rgba(5,5,6,.92) 100%);
}
.mf-play{
  position:absolute; inset:0; z-index:2; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; color:var(--paper);
}
.mf-play .disc{
  width:86px; height:86px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(10,10,13,.52);
  border:1px solid rgba(232,182,47,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 38px rgba(216,185,106,.3);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.mf-play .disc svg{ width:30px; height:30px; margin-left:5px; fill:var(--gold-lite); }
.mf-play:hover .disc, .mf-play:focus-visible .disc{
  transform:scale(1.1);
  background:rgba(232,182,47,.2);
  box-shadow:0 0 54px rgba(216,185,106,.5);
}
.mf-play:focus-visible{ outline:2px solid var(--gold); outline-offset:-5px; }
.mf-title{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:3;
  text-align:left; pointer-events:none;
}
.mf-title b{
  display:block; font-family:var(--display); font-weight:400; font-size:20px; line-height:1.2;
}
.mf-title span{
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}

/* the fourth card, until the file arrives */
.mf-soon{
  display:grid; place-items:center;
  background:rgba(255,255,255,.03);
  border:1.5px dashed rgba(232,182,47,.36);
  box-shadow:none;
}
.mf-soon:hover{ transform:none; border-color:rgba(232,182,47,.5); box-shadow:none; }
.mf-soon .soon-inner{ text-align:center; padding:20px; }
.mf-soon .soon-mark{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(232,182,47,.34);
  background:rgba(10,10,13,.4);
}
.mf-soon .soon-mark svg{ width:22px; height:22px; margin-left:3px; fill:rgba(232,182,47,.5); }
.mf-soon b{
  display:block; font-family:var(--display); font-weight:400; font-size:21px;
  color:var(--paper); margin-bottom:7px;
}
.mf-soon .soon-note{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
}

/* ============================================================
   THE PLAYER
   ============================================================
   A flyer opens over the page rather than inside its card, so it can be
   watched at a decent size. Nothing is loaded or played until the button is
   pressed, and the video is thrown away again on close — so no flyer keeps
   running quietly behind a closed window. */
.mfl{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,40px);
  background:rgba(3,3,5,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.mfl.on{ opacity:1; visibility:visible; }
/* a class selector beats the browser's own [hidden] rule, so say it plainly */
.mfl[hidden]{ display:none !important; }

.mfl-missing{
  max-width:420px; padding:30px 28px; border-radius:16px; text-align:center;
  border:1px solid rgba(232,182,47,.4); background:rgba(10,10,13,.9);
}
.mfl-missing b{
  display:block; font-family:var(--display); font-weight:400; font-size:21px;
  color:var(--paper); margin-bottom:10px;
}
.mfl-missing p{ margin:0; color:var(--mute); font-size:13.5px; line-height:1.75; }
.mfl-missing code{
  display:inline-block; margin-top:12px; padding:7px 13px; border-radius:8px;
  background:rgba(232,182,47,.12); color:var(--gold-lite);
  font-family:var(--mono); font-size:11.5px;
}
.mfl-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  max-width:min(560px, 100%); width:100%; max-height:100%;
}
.mfl video{
  max-width:100%; max-height:min(86vh, 1000px);
  width:auto; height:auto; display:block;
  border-radius:16px; background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(216,185,106,.14);
}
.mfl-close{
  position:absolute; top:-58px; right:0; z-index:2;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:12px 20px; border-radius:999px;
  border:1px solid rgba(232,182,47,.5);
  background:rgba(10,10,13,.7);
  color:var(--gold-lite);
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.mfl-close svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; fill:none; }
.mfl-close:hover{ background:var(--gold-hot); border-color:var(--gold-hot); color:#0a0a0d; }
.mfl-close:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.mfl-cap{
  position:absolute; left:0; right:0; bottom:-46px; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}
@media (max-width:640px){
  .mfl-close{ top:auto; bottom:-56px; right:50%; transform:translateX(50%); }
  .mfl-cap{ display:none; }
}

.mf-empty{
  grid-column:1 / -1;
  padding:56px 28px; text-align:center;
  border:1px dashed rgba(216,185,106,.3); border-radius:18px;
  color:var(--mute); font-size:14px; line-height:1.8;
}
.mf-empty b{ display:block; font-family:var(--display); font-weight:400; font-size:22px;
  color:var(--paper); margin-bottom:8px; }
.mf-empty span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); }

/* ============================================================
   CROWDS & MOMENTS
   ============================================================
   Each row is a flex line where every photograph's flex-grow is its own
   aspect ratio. Widths then come out proportional to shape, which makes the
   heights within a row identical — a justified row, flush on both edges,
   with every image at its true proportions. Nothing is cropped: the tile is
   given the picture's ratio rather than the picture being cut to the tile. */







/* ============================================================
   LIGHTBOX CAROUSEL
   ============================================================
   The photographs that are not being looked at sit behind the open one, on a
   shallow arc — smaller, darker, out of focus. Moving on turns the whole ring
   by one place rather than cutting between pictures. Slow on purpose: this is
   meant to be felt rather than noticed.
   ============================================================ */
.lb-ring{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity .5s var(--ease);
}
.lightbox.is-open .lb-ring.on{ opacity:1; }
.lb-ring{ perspective:1800px; }
.lb-ring img{
  position:absolute; left:50%; top:50%;
  /* The width has to be stated. With width:auto an <img> draws at its own
     natural size — the card copy, 560px — and the max-width above did nothing
     but stop it growing, which is why the ring stayed small however high the
     caps went. This is the size of the photograph at the front of the ring;
     the rest are the same picture scaled back from it. */
  /* The flat 1000px cap was what held this back: on anything wider than about
     1600px the picture stopped growing while the screen kept going. It now
     scales with the window, and the height is what finally limits it. */
  width:min(72vw, var(--src, 2000px));
  height:auto;
  max-height:92vh;
  border-radius:16px;
  border:1px solid rgba(216,185,106,.24);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  transform:translate(-50%,-50%) scale(.5);
  opacity:0; will-change:transform, opacity, filter;
  transition:
    transform 1050ms cubic-bezier(.22,.61,.36,1),
    opacity   900ms cubic-bezier(.22,.61,.36,1),
    filter    900ms cubic-bezier(.22,.61,.36,1);
}
/* the open photograph keeps the stage to itself */
.lightbox figure{ position:relative; z-index:2; }
/* the wheel carries the picture itself, so the fixed frame gets out of the way
   — the caption and counter underneath it stay exactly where they were */
.lightbox.ring-on #lbFrame{ opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.lightbox.ring-on figure{ pointer-events:none; }
.lightbox.ring-on figcaption{ position:relative; z-index:4; }

/* a soft fade as one picture gives way to the next — this is also what a
   phone gets, in place of the ring */
.frame.is-img #lbImg{ animation:lbSwap 620ms var(--ease); }
@keyframes lbSwap{
  from{ opacity:0; transform:translateY(6px) scale(.985); }
  to{   opacity:1; transform:none; }
}

@media (max-width:820px){
  .lb-ring{ display:none; }        /* too crowded, and not worth the work */
}
@media (prefers-reduced-motion: reduce){
  .lb-ring img{ transition:none; }
  .frame.is-img #lbImg{ animation:none; }
}

/* ============================================================
   THE VIEWER'S SKY
   ============================================================
   The page already runs one gold field, on #field. Rather than start a second
   one that would drift out of step with it, the viewer copies that canvas
   frame by frame — so it is the same dust, the same sparkles, moving in the
   same places, just carried above the backdrop that hides the gallery. */
.lb-field{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none; opacity:.85;
}
.lb-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(216,185,106,.16), transparent 55%),
    radial-gradient(95% 70% at 88% 100%, rgba(216,185,106,.11), transparent 60%),
    radial-gradient(80% 60% at 50% 45%, transparent 30%, rgba(3,3,5,.72) 100%);
}

/* ============================================================
   CONCERTS & PERFORMERS
   ============================================================
   The editorial rhythm is kept — 7 and 5 across, then three of 4, then one
   full-width, then 7 and 5 again — but each tile is given its own
   photograph's proportions, so the grid stays irregular without a single
   picture being cropped to fit it. A few tiles are nudged down a little,
   which is what stops the rows reading as a plain table. */
.edit-grid .shot-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease);
}
.edit-grid .shot:hover .shot-img{ transform:scale(1.045); }
.edit-grid .tile{ transform:translateY(var(--lift, 0px)); }
@media (max-width:900px){ .edit-grid .tile{ transform:none; } }

/* ============================================================
   CART & MY TICKETS
   ============================================================
   A prototype only: the count and the purchased tickets live in this
   browser, under bm-cart-v1 and bm-tickets-v1. No money, no server. */
.hdr-tools{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  position:relative; display:grid; place-items:center;
  width:44px; height:44px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--paper); text-decoration:none;
  transition:border-color .4s var(--ease), background .4s var(--ease),
             color .4s var(--ease), transform .4s var(--ease);
}
.icon-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* the hover: a lift, a warm gold light, and the basket rocking once as though
   it had been nudged — enough to notice, not enough to be busy */
.icon-btn:hover, .icon-btn:focus-visible{
  color:#0a0a0d;
  border-color:rgba(232,182,47,.9);
  background:linear-gradient(150deg,#f6e2a8 0%,#e8b62f 46%,#c1932c 100%);
  transform:translateY(-2px) scale(1.09);
  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    0 0 26px rgba(216,185,106,.55),
    0 0 60px rgba(216,185,106,.28);
}
.icon-btn svg{ transition:transform .5s cubic-bezier(.34,1.4,.5,1); }
#cartBtn:hover svg{ animation:cartNudge .62s cubic-bezier(.34,1.3,.5,1); }
@keyframes cartNudge{
  0%   { transform:rotate(0deg) translateY(0); }
  35%  { transform:rotate(-7deg) translateY(-1.5px); }
  65%  { transform:rotate(4deg)  translateY(0); }
  100% { transform:rotate(0deg)  translateY(0); }
}
#ticketsBtn:hover svg{ transform:rotate(-6deg) scale(1.06); }

/* the badge lifts clear of the gold rather than disappearing into it */
.icon-btn:hover .count{
  background:#0a0a0d; color:var(--gold-lite);
  box-shadow:0 0 0 1px rgba(232,182,47,.6), 0 0 16px rgba(216,185,106,.5);
}

/* a slow gold sheen that crosses the button once on hover */
.icon-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size:260% 100%; background-position:130% 0;
  opacity:0; pointer-events:none;
}
.icon-btn:hover::after{ opacity:1; transition:none; animation:iconSheen .85s ease-out; }
@keyframes iconSheen{
  from{ background-position:130% 0; opacity:.9; }
  to  { background-position:-40% 0; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .icon-btn{ transition:background .3s, color .3s, border-color .3s; }
  .icon-btn:hover{ transform:none; }
  #cartBtn:hover svg, #ticketsBtn:hover svg{ animation:none; transform:none; }
  .icon-btn:hover::after{ animation:none; opacity:0; }
}
.icon-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.icon-btn .count{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px;
  padding:0 5px; border-radius:999px;
  display:none; place-items:center;
  background:linear-gradient(150deg,#f6e2a8 0%,#e8b62f 46%,#c1932c 100%);
  color:#0a0a0d; font-family:var(--mono); font-size:10px; font-weight:600;
  line-height:1; box-shadow:0 0 14px rgba(216,185,106,.5);
}
.icon-btn .count.on{ display:grid; }
@media (max-width:720px){ .icon-btn{ width:40px; height:40px; } }

/* ============================================================
   MY TICKETS
   ============================================================
   The purchased tickets, read from this browser. It opens here rather than
   sending anyone to another page, so it works wherever the header does. */
.tkv{
  position:fixed; inset:0; z-index:95;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,44px);
  background:var(--ink);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.tkv.is-open{ opacity:1; visibility:visible; }
.tkv[hidden]{ display:none !important; }
.tkv-field{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.85; }
.tkv-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(216,185,106,.16), transparent 55%),
    radial-gradient(95% 70% at 88% 100%, rgba(216,185,106,.11), transparent 60%),
    radial-gradient(80% 60% at 50% 45%, transparent 30%, rgba(3,3,5,.7) 100%);
}
.tkv-panel{
  position:relative; z-index:2;
  width:min(820px, 100%); max-height:90vh; overflow:auto;
  border-radius:26px; padding:clamp(20px,2.4vw,34px);
  border-color:rgba(232,182,47,.3);
  box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 60px rgba(216,185,106,.14);
}
.tkv-close{
  position:absolute; top:18px; right:18px; z-index:4;
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:11px 18px; border-radius:999px;
  border:1px solid rgba(232,182,47,.5); background:rgba(10,10,13,.72);
  color:var(--gold-lite);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.tkv-close svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.tkv-close:hover{ background:var(--gold-hot); border-color:var(--gold-hot); color:#0a0a0d; }
.tkv-close:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.tkv-head{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.05; margin:10px 0 22px;
}
.tkv-head em{ font-style:italic; text-transform:none; color:var(--gold-lite); }

.tkt{
  border:1px solid var(--line); border-radius:16px;
  padding:20px 22px; margin-bottom:14px;
  background:rgba(255,255,255,.03);
}
.tkt h3{ font-family:var(--display); font-weight:400; font-size:20px; margin:0; }
.tkt .when{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin:6px 0 14px;
}
.tkt-line{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-top:1px solid rgba(255,255,255,.07);
  font-size:14px;
}
.tkt-line b{ font-weight:500; }
.tkt-line small{ display:block; color:var(--mute); font-size:11.5px; }
.tkt-foot{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(232,182,47,.28);
}
.tkt-ref{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute); }
.tkt-total{ font-family:var(--display); font-size:20px; color:var(--gold-lite); }
.tkt-print{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  margin-top:14px; padding:11px 20px; border-radius:999px;
  border:1px solid rgba(232,182,47,.5); background:rgba(232,182,47,.1);
  color:var(--gold-lite);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.tkt-print:hover{ background:var(--gold-hot); color:#0a0a0d; }
.tkv-empty{ text-align:center; padding:36px 20px; }
.tkv-empty p{ color:var(--mute); margin:0 0 22px; }


/* ---------------------------------------------------------- */


/* ============================================================
   About page — additions only (homepage styles above untouched)
   ============================================================ */
.hero.is-about{
  min-height:auto;
  padding-block:clamp(150px,19vw,200px) clamp(48px,7vw,84px);
}
.hero.is-about .hero-head{ font-size:clamp(2.6rem, 8vw, 6.4rem); }

.story-grid{
  display:grid; grid-template-columns:1.18fr .82fr;
  gap:clamp(34px,6vw,84px); align-items:start;
}
.prose p{
  color:var(--mute);
  font-size:clamp(1rem,1.6vw,1.09rem);
  line-height:1.78;
  margin:0 0 24px;
  max-width:62ch;
}
.prose p:last-child{ margin-bottom:0; }
.prose .drop{ color:var(--paper); }
.prose em{ font-family:var(--display); font-style:italic; color:var(--gold-lite); font-size:1.12em; }

.side-card{ border-radius:22px; padding:clamp(26px,3.4vw,38px); }
.side-card h3{
  font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin:0 0 20px;
}
.pillars{ display:grid; gap:0; }
.pillar{
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:baseline; gap:16px;
}
.pillar:first-child{ border-top:0; padding-top:0; }
.pillar:last-child{ padding-bottom:0; }
.pillar b{
  font-family:var(--display); font-weight:400; font-size:1.32rem;
  color:var(--gold-lite); flex:none; min-width:8.5ch;
}
.pillar span{ color:var(--mute); font-size:14px; line-height:1.6; }

.artist-grid{
  margin-top:clamp(40px,5.5vw,62px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.artist{
  position:relative; isolation:isolate; overflow:visible;
  border-radius:20px; padding:30px 24px;
  text-align:center;
  transform-style:preserve-3d;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.artist::after{ display:none; }
.artist::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background-image:
    linear-gradient(102deg, transparent 30%, rgba(255,251,236,.52) 45%, rgba(255,246,214,.20) 53%, transparent 66%),
    linear-gradient(166deg,
      rgba(255,246,214,.46) 0%,
      rgba(232,182,47,.30) 30%,
      rgba(150,113,34,.17) 58%,
      rgba(216,185,106,.25) 78%,
      rgba(255,246,214,.42) 100%);
  background-size:240% 100%, 100% 100%;
  background-position:150% 0, 0 0;
  backdrop-filter:blur(12px) saturate(165%);
  -webkit-backdrop-filter:blur(12px) saturate(165%);
  opacity:0;
  transition:opacity .45s var(--ease), background-position 1s var(--ease);
  pointer-events:none;
}
.artist:hover{
  transform:perspective(700px) translateY(-2.5px) rotateX(8deg) scale(1.035);
  border-color:rgba(232,182,47,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.68),
    inset 0 0 0 1px rgba(232,182,47,.22),
    inset 0 -5px 12px rgba(232,182,47,.22),
    0 10px 24px rgba(0,0,0,.55),
    0 0 12px rgba(232,182,47,.26),
    0 0 38px rgba(216,185,106,.28);
}
.artist:hover::before{ opacity:1; background-position:-55% 0, 0 0; }
.artist b{
  display:block;
  font-family:var(--display); font-weight:400; font-size:clamp(1.05rem,1.7vw,1.34rem);
  line-height:1.3; letter-spacing:.07em;
  text-transform:uppercase;
}
.artist:hover b{ color:#fff9e8; text-shadow:0 1px 10px rgba(60,40,4,.6); }

.craft-grid{
  margin-top:clamp(40px,5.5vw,62px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.craft{ border-radius:20px; padding:clamp(24px,2.6vw,32px); }
.craft b{
  display:block;
  font-family:var(--display); font-weight:400; font-size:1.38rem; line-height:1.2;
  color:var(--gold-lite);
}
.craft span{ display:block; margin-top:12px; color:var(--mute); font-size:14px; line-height:1.65; }

.closing{ text-align:center; }
.closing .h-sec{ margin-inline:auto; max-width:20ch; }
.closing .lede{ margin-inline:auto; text-align:center; }
.closing .hero-actions{ justify-content:center; }

/* the two section headings only — Playfair Display, a touch bolder */
#artists .h-sec,
#craft .h-sec{
  font-family:"Playfair Display", var(--display);
  font-weight:600;
  letter-spacing:-.022em;
}
#artists .h-sec em,
#craft .h-sec em{ font-weight:600; }

@media (max-width:1080px){
  .story-grid{ grid-template-columns:1fr; }
  .artist-grid,.craft-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .artist-grid,.craft-grid{ grid-template-columns:1fr; }
  .pillar{ flex-direction:column; gap:6px; }
  .pillar b{ min-width:0; }
}


/* ---------------------------------------------------------- */

body{font:14px/1.6 system-ui,sans-serif;color:#111;margin:14mm}' +
      'section{page-break-inside:avoid;border:1px solid #ccc;border-radius:8px;padding:16px;margin-bottom:14px}' +
      'h2{margin:0 0 4px;font-size:19px}table{width:100%;border-collapse:collapse;margin-top:10px}' +
      'td{padding:6px 0;border-top:1px solid #eee}.ref{margin:12px 0 0;font-size:12px;color:#555}' +
      '