/* AmpRoom Live — public plane.
   Brand-integration pass: the design system is derived from the AmpRoom logo
   spectrum (red → magenta → violet), not from the donor's purple.
   Eventino Home 2 remains the COMPOSITION donor — utility strip, floating white
   nav card, editorial hero, service mesh. No vendor source is used (D-06). */

:root{
  /* Logo-derived spectrum */
  /* Amp Room Marketplace palette (DL-0039). Gold is an accent, not a fill:
     #a8741a measures 4.06:1 against white and 3.83:1 against charcoal, so it
     fails AA for normal text in either direction and may not sit behind small
     copy. Charcoal carries the primary actions; gold carries hover, selection,
     fine rules and emphasis. --gold-ink is the deeper tone used only where a
     gold ground must hold text (5.63:1 with white). */
  --gold:#a8741a; --gold-ink:#8a5f15; --gold-pale:#F3EBDC; --charcoal:#242424;
  --red:#F0203C; --magenta:#FF1E7A; --violet:#7B2FF7; --pink-deep:#D6155F;
  --grad:linear-gradient(90deg,#F0203C 0%,#FF1E7A 52%,#7B2FF7 100%);
  --grad-soft:linear-gradient(90deg,#F0203C 0%,#FF1E7A 38%,#7B2FF7 72%,rgba(123,47,247,0) 100%);
  --blush:#FDF3F6;

  /* Anchors and neutrals — black anchors, it is not the page */
  /* Text on light ground. --grey was #7C8493 — 3.76:1 on white, which fails
     WCAG AA and sat on the SMALLEST type in the product: mono field labels,
     eyebrows and notes at 10–12px. --muted at 6.15:1 passed the check and was
     still hard to read on a bright screen. Everything moves darker; the steps
     between them stay so hierarchy survives, but the lightest is now 9.2:1. */
  --ink:#14161A; --slate:#1C1F25; --muted:#2B303A; --grey:#414855;
  --line:#E8E4E6; --line-2:#DEE1E6; --hair:#F0ECEE;
  --page:#FFFFFF; --warm:#F8F6F7; --tint:#F2EEF0; --white:#FFFFFF;
  /* Both sat just under AA on their own tinted pill grounds — 4.71:1 and
   4.46:1 at 10px, which is where a status label lives. */
  --ok:#0A5436; --warn:#5C3A00;

  --display:Archivo,system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1320px; --gut:30px; --space:112px; --space-sm:76px;
  --r:14px; --r-lg:20px; --r-xl:26px; --pill:999px;
  --e1:0 2px 10px rgba(20,22,26,.05);
  --e2:0 10px 34px rgba(20,22,26,.08);
  --e3:0 20px 60px rgba(20,22,26,.13);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--slate);
  font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--wrap),calc(100% - var(--gut)*2));margin-inline:auto}
section{padding-block:var(--space)}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:800;
  line-height:1.08;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(30px,3.3vw,44px)}
h3{font-weight:700;letter-spacing:-.01em}

/* Eyebrow — mono, tracked, with a spectrum dot */
/* Eyebrow: a 2px spectrum rule, not a dot — per canvas */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 24px}
.eyebrow::before{content:"";height:2px;width:56px;background:var(--grad);flex:none}
.hero .eyebrow{color:#B4BAC4}
.sec-head{max-width:780px;margin-bottom:56px}
.sec-head p{margin:16px 0 0;font-size:17px;color:var(--muted);max-width:64ch}
.rule{height:3px;width:220px;background:var(--grad);border-radius:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
  font-family:var(--body);font-weight:600;font-size:15px;padding:16px 28px;
  border-radius:var(--pill);border:1px solid transparent;cursor:pointer;transition:.22s ease}
/* The primary action is charcoal, not gold. With the gold lockup beside it in
   the header, a second large gold object competes with the identity; charcoal
   reads as the expensive, restrained option and lets the gold hover supply the
   movement. The hover ground is --gold-ink rather than --gold because the
   label is 15px and --gold would put it at 4.06:1. */
.btn-grad{background:var(--charcoal);color:#fff;box-shadow:0 6px 18px rgba(36,36,36,.18);
  transition:background .3s ease,box-shadow .3s ease,transform .3s ease}
.btn-grad:hover{background:var(--gold-ink);box-shadow:0 10px 28px rgba(168,116,26,.30);
  transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-out{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-out:hover{border-color:var(--ink)}
.btn-lg{padding:18px 34px;font-size:16px}

/* ── HEADER ───────────────────────────────────────────────────── */
/* THE HEADER — one light surface, and the only navigation object on the page.
   A full-width black utility strip used to sit above it carrying locale and the
   account links. It made the top of every page dark, competed with the event
   hero for the eye, and put what a returning visitor needs in the least readable
   band on the site. Everything is here now, on white, in one header:

     brand → marketplace navigation → primary CTA → account utilities

   The utilities sit on their own line above the navigation, smaller and quieter,
   so they are plainly reachable without competing with where you can go. */
.navwrap{position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(20,22,26,.05);
  transition:box-shadow .22s ease}
/* The spectrum is the one piece of brand in the chrome, and it stays. */
.navwrap::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad);z-index:1}
.navwrap.stuck{box-shadow:0 6px 24px rgba(20,22,26,.11)}
/* Two tiers on one surface: the brand spans both, utilities sit top-right,
   navigation and the calls to action share the line beneath. */
.navcard{position:relative;display:grid;align-items:center;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"brand util util"
                      "brand nav  acts";
  column-gap:38px;row-gap:4px;padding:14px 0 16px}
.navmenu{display:contents}
.lockup{grid-area:brand}
.head-util{grid-area:util;justify-self:end;display:flex;align-items:center;gap:2px}
.navcard nav{grid-area:nav}
.navcard .acts{grid-area:acts}

/* Account and locale. Readable, and deliberately quieter than the navigation. */
.head-util .lang{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  color:var(--muted);padding:5px 10px;border:1px solid var(--line-2);
  border-radius:var(--pill);margin-right:8px}
.head-util a{font-size:13.5px;font-weight:500;color:var(--muted);
  padding:6px 11px;border-radius:8px;transition:.18s ease}
.head-util a:hover{color:var(--ink);background:var(--warm)}
.head-util #myTickets{color:var(--ink);font-weight:600}

/* Lockup A — flat mark plus wordmark. */
.lockup{display:flex;align-items:center;gap:16px;flex:none;text-decoration:none}
.lockup,.lockup *{text-decoration:none}
/* Flat black AR monogram, transparent ground. The neon artwork was drawn on
   black, so it needed a crop window, an offset and a blend mode before it could
   sit on a light header — and it still arrived clipped at the apex. A tightly
   cropped transparent asset needs none of that: the plate, the offsets and the
   filters all go, and the mark is sized by height alone. Dark grounds take the
   reversed white file rather than a filtered black one. */
/* Amp Room Marketplace lockup. The supplied artwork is a square stacked
   lockup; at header height its MARKETPLACE line falls below legibility, so the
   header uses a horizontal arrangement of the same authentic elements. Height
   is capped at 44px — below the 54px raster mark it replaces — so the wider
   lockup does not grow the header. Below 900px the wordmark is dropped for the
   monogram rather than scaled until MARKETPLACE becomes unreadable. */
.lockup-logo{display:block;flex:0 0 auto;height:44px;width:auto}
.lockup-mono{display:none;flex:0 0 auto;height:38px;width:auto}
footer.site .lockup-logo{height:42px}
@media(max-width:900px){
  .navcard .lockup-logo{display:none}
  .navcard .lockup-mono{display:block}}
@media(max-width:760px){
  .navcard .lockup-mono{height:32px}
  footer.site .lockup-logo{height:36px}}
.mark{display:block;flex:0 0 auto;height:54px}
.mark img{display:block;height:100%;width:auto}
.mark.lg{height:60px}
.mark.sm{height:34px}
.lockup .wm{display:flex;flex-direction:column;gap:3px}
.lockup .wm b{font-family:var(--display);font-weight:800;font-size:23px;
  letter-spacing:.02em;line-height:1;color:var(--ink)}
/* The wordmark's LIVE is 11.5px under heavy tracking, which is small type even
   though it is brand rather than operational. The spectrum violet reads 5.85:1 —
   above AA and under the aim — so the WORDMARK uses a deeper step of the same
   hue. The gradient itself is untouched: that is the brand, and it never carries
   text. */
.lockup .wm i{font-family:var(--display);font-style:normal;font-weight:700;font-size:11.5px;
  letter-spacing:.42em;line-height:1;color:#5E1CC2}

.navmenu{display:contents}
.navcard nav{display:flex;gap:4px;font-size:16.5px;font-weight:500;color:var(--slate);white-space:nowrap}
.navcard nav a{position:relative;padding:12px 15px;border-radius:10px;
  transition:background .18s ease,color .18s ease}
.navcard nav a:hover{background:var(--warm)}
.navcard nav a:hover{color:var(--ink)}
/* The active item is underlined in the spectrum — the only place the gradient is
   used as a state rather than as decoration, so it has to mean something. */
.navcard nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;
  border-radius:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease}
.navcard nav a[aria-current="true"]{color:var(--ink);font-weight:600;background:var(--warm)}
.navcard nav a[aria-current="true"]::after{transform:scaleX(1)}
.navcard .acts{margin-left:auto;display:flex;gap:12px;align-items:center}
.navcard .acts .btn{padding:15px 26px;font-size:15.5px}
.navcard .acts .btn-out{border-color:var(--line-2);color:var(--ink);font-weight:600;
  transition:border-color .3s ease,background .3s ease,color .3s ease}
.navcard .acts .btn-out:hover{border-color:var(--gold);background:var(--gold-pale);color:var(--charcoal)}
.navcard .acts .btn-out:hover{border-color:var(--ink);background:var(--warm)}

.burger{display:none;margin-left:auto;width:44px;height:38px;padding:9px 10px;gap:5px;
  flex-direction:column;justify-content:center;background:transparent;border:1px solid var(--line-2);
  border-radius:11px;cursor:pointer}
.burger span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:.24s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* A proper light mobile header: brand and a control, and everything else in a
   panel that opens beneath it. Not a desktop nav scrolled sideways. */
@media(max-width:1080px){
  .navcard{grid-template-columns:1fr auto;
    grid-template-areas:"brand burger" "menu menu";
    column-gap:14px;row-gap:0;padding:12px 0}
  .burger{display:flex;grid-area:burger;justify-self:end}
  .navmenu{display:none;grid-area:menu}
  .navmenu.open{display:flex;flex-direction:column;gap:6px;
    padding-top:14px;margin-top:12px;border-top:1px solid var(--line)}
  /* The menu owns its children again, so they stop taking grid areas. */
  .navmenu .head-util,.navmenu nav,.navmenu .acts{grid-area:auto}
  /* The five primary links tighten by ~16%: 49.6px pitch to 41.6px. They stay
     full-width rows, so the target is 390 x 41.6 — comfortably hittable even
     though the height alone is under the 44px platform guideline for small
     controls. Any further and this becomes a list you have to aim at. */
  .navcard nav{flex-direction:column;gap:0;font-size:16.5px;white-space:normal}
  /* Body leading of 1.65 is loose for a single-line nav item and was most of
     the height. Tightening the line box rather than the padding keeps the
     row a comfortable target while the list reads as a list. */
  .navcard nav a{padding:10px 14px;line-height:1.3}
  .navcard nav a::after{left:14px;right:14px;bottom:4px}
  /* Utilities go last on a phone: they are what you reach for, not what you
     scan, and the marketplace navigation should be the first thing under the
     brand. */
  .head-util{order:3;justify-self:stretch;flex-wrap:wrap;gap:6px;
    padding-top:14px;margin-top:8px;border-top:1px solid var(--line)}
  .head-util a{font-size:15px;padding:10px 12px}
  /* No auto margin: it pushed the last link onto a line of its own. */
  .head-util .lang{margin-right:6px}
  /* The break before the calls to action stays stronger than the rhythm inside
     the list — it has to read as a different kind of thing, and tightening the
     links above it would otherwise flatten that distinction. */
  .navcard .acts{order:2;margin-left:0;flex-direction:column;align-items:stretch;
    gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
  .navcard .acts .btn{width:100%;padding:15px 22px}
  .mark{height:46px}
  .lockup .wm b{font-size:20px}
}

/* ── HERO ─────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:82px 92px;background:#0C0D10;isolation:isolate}
.hero .beam{position:absolute;pointer-events:none;filter:blur(46px);opacity:.5}
.hero .b1{width:520px;height:520px;left:-140px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,32,60,.30),transparent 66%)}
.hero .b2{width:620px;height:620px;right:-180px;top:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,47,247,.26),transparent 66%)}
.hero .b3{width:420px;height:420px;left:40%;bottom:-230px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,30,122,.20),transparent 68%)}
/* Reversed monogram as a watermark on a dark band — texture, not a second mark. */
.watermark{position:absolute;right:-4%;top:-16%;width:640px;height:640px;
  object-fit:contain;opacity:.10;pointer-events:none;z-index:0}
.pagehead .watermark{right:-6%;top:-30%;width:560px;height:560px;opacity:.13}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 452px;
  gap:60px;align-items:start}
.hero h1{font-size:clamp(44px,5.9vw,82px);line-height:.96;letter-spacing:-.03em;color:#fff;margin-bottom:26px}
.hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.hero .lede{font-size:19px;line-height:1.6;color:#C0C6CF;margin:0 0 32px;max-width:520px}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap}
.btn-dark-out{border-color:rgba(20,22,26,.22);color:var(--ink);background:transparent}
.btn-dark-out:hover{border-color:var(--gold);background:var(--gold-pale);color:var(--charcoal)}

/* Event Brief panel — white card, spectrum edge */
.brief{position:relative;background:var(--white);border-radius:var(--r-xl);
  box-shadow:var(--e3);padding:34px;overflow:hidden}
.brief::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--grad)}
.brief .top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.brief h3{font-size:22px;margin-bottom:3px}
.brief .sub{font-size:14px;color:var(--muted);margin:0 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{padding:9px 16px;border-radius:var(--pill);border:1px solid var(--line-2);
  background:var(--white);color:var(--muted);font:500 13.5px var(--body);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--grey);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}
.fld{margin-bottom:12px}
.fld label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.fld input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--warm);color:var(--ink);font:400 15px var(--body)}
.fld input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,116,26,.18)}
.brief .btn{width:100%;margin-top:8px}
.brief small{display:block;text-align:center;color:var(--grey);font-size:12px;margin-top:12px}

/* ── CATEGORY MESH ────────────────────────────────────────────── */
.mesh{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden}
.cat{position:relative;background:var(--white);padding:30px 26px 34px;transition:.24s ease}
.cat::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.cat:hover{background:var(--warm)}
.cat:hover::after{transform:scaleX(1)}
.cat .ic{width:54px;height:54px;border-radius:15px;background:var(--hair);
  display:grid;place-items:center;margin-bottom:18px;transition:.24s}
.cat .ic svg{width:24px;height:24px;fill:none;stroke:var(--slate);stroke-width:1.7;transition:.24s}
.cat:hover .ic{background:var(--grad)}
.cat:hover .ic svg{stroke:#fff}
.cat b{display:block;font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--ink)}
.cat span{display:block;margin-top:5px;font-size:13px;color:var(--grey)}

/* ── STEPS ────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--magenta);margin-bottom:14px}
.step b{display:block;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);margin-bottom:7px}
.step p{margin:0;font-size:14.5px;color:var(--muted)}

/* ── SUPPLY CARDS ─────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:24px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:.24s}
.card:hover{box-shadow:var(--e2);transform:translateY(-4px)}
.card .art{height:158px;position:relative;overflow:hidden;background:var(--ink)}
/* LED-array motif derived from the primary mark — no stock photography */
.card .art::before{content:"";position:absolute;inset:-10%;
  background-image:radial-gradient(circle,rgba(255,30,122,.85) 1.4px,transparent 1.6px);
  background-size:15px 15px;opacity:.5}
.card .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(240,32,60,.55),rgba(123,47,247,.5))}
.card:nth-child(2) .art::before{background-size:11px 11px;opacity:.42}
.card:nth-child(3) .art::before{background-size:19px 19px;opacity:.55}
.card:nth-child(4) .art::before{background-size:13px 13px;opacity:.46}
.card .body{padding:22px 24px 24px}
.card b{display:block;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
.card .meta{font-size:13.5px;color:var(--grey);margin:5px 0 14px}

.verts{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:20px}
.vert{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px}
.vert b{display:block;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:6px}
.vert p{margin:0;font-size:14px;color:var(--muted)}

.eco{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px}
.eco-c{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.eco-c b{font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--ink)}
.eco-c p{margin:0;flex:1;font-size:14px;color:var(--muted)}

.markets{display:flex;flex-wrap:wrap;gap:10px}
.market{padding:11px 20px;border-radius:var(--pill);background:var(--white);
  border:1px solid var(--line);font-weight:600;font-size:14.5px;color:var(--ink)}
.note{background:var(--white);border:1px solid var(--line);border-left:3px solid transparent;
  border-image:var(--grad) 1;border-radius:0 var(--r) var(--r) 0;padding:22px 26px;
  margin-top:30px;font-size:14.5px;color:var(--muted);max-width:88ch}

/* Status — governance-critical */
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:var(--pill)}
.st-live{background:#E7F5EE;color:#08462D}
.st-sandbox{background:#FBF1DC;color:var(--warn)}
.st-concept{background:var(--hair);color:var(--muted)}
.st-off{background:transparent;border:1px dashed var(--line-2);color:var(--grey)}

footer.site{background:var(--ink);color:#8A92A0;padding-block:56px 40px}
footer.site .lockup .wm b{color:#fff}
footer.site .lockup .tile{background:rgba(255,255,255,.06)}
footer.site p{margin:16px 0 0;font-size:14px}

/* 1280 is a common laptop width and the nav was wrapping there. Tighten before hiding. */
/* NARROW DESKTOP ONLY. Unbounded, this sat after the mobile block and won at
   390px — so the mobile link padding never applied and tightening the menu
   changed nothing. A desktop-narrowing rule must not reach past the
   breakpoint where the layout stops being a desktop. */
@media(min-width:1081px) and (max-width:1380px){.navcard{column-gap:24px}
  .navcard nav{gap:2px;font-size:15.5px}
  .navcard nav a{padding:11px 11px}.navcard .acts .btn{padding:14px 20px;font-size:15px}
  .mark{height:38px}
  .lockup .wm b{font-size:17px}.btn{padding:14px 22px;font-size:14.5px}}
@media(max-width:1120px){.hero .wrap{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){section{padding-block:var(--space-sm)}.steps{grid-template-columns:1fr}.util{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ── INSIDE THE ROOM — rights-cleared editorial imagery on a dark band ─── */
.room{background:#0C0D10;position:relative;overflow:hidden}
.room .sec-head h2{color:#fff}
.room .sec-head p{color:#A8AFBA}
.room .eyebrow{color:#B4BAC4}
/* ── INTERNAL PUBLIC PAGE ─────────────────────────────────────── */
.pagehead{background:#0C0D10;padding-block:72px 84px;position:relative;overflow:hidden;isolation:isolate}
.pagehead .beam{position:absolute;pointer-events:none;filter:blur(46px)}
.pagehead .b1{width:480px;height:480px;left:-140px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,32,60,.28),transparent 66%)}
.pagehead .b2{width:560px;height:560px;right:-160px;top:-140px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,47,247,.24),transparent 66%)}
.pagehead .wrap{position:relative;z-index:1}
.pagehead h1{color:#fff;font-size:clamp(38px,4.6vw,62px);line-height:1.02;letter-spacing:-.03em;max-width:18ch}
.pagehead .lede{color:#C0C6CF;font-size:18px;max-width:56ch;margin:22px 0 0}
.crumb{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#7C8493;margin-bottom:22px}
.crumb a:hover{color:#fff}
.pagehead .stats{display:flex;gap:40px;margin-top:38px;position:relative}
.pagehead .stats div b{display:block;font-family:var(--display);font-weight:800;font-size:30px;color:#fff}
.pagehead .stats div span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8A92A0}

.filters{display:flex;gap:10px;flex-wrap:wrap;padding-block:26px;border-bottom:1px solid var(--line)}
.filter{padding:9px 16px;border-radius:var(--pill);border:1px solid var(--line-2);background:#fff;
  font:500 13.5px var(--body);color:var(--muted);cursor:pointer;transition:.2s}
.filter:hover{border-color:var(--grey);color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}

.listings{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:36px}
.listing{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:.24s;display:flex;flex-direction:column}
.listing:hover{box-shadow:var(--e2);transform:translateY(-4px)}
.listing .ph{height:186px;position:relative;overflow:hidden;background:#0C0D10}
.listing .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.listing:hover .ph img{transform:scale(1.05)}
.listing .ph .tag{position:absolute;top:12px;left:12px}
.listing .in{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.listing b{font-family:var(--display);font-weight:700;font-size:18.5px;color:var(--ink)}
.listing .meta{font-size:13.5px;color:var(--grey);margin:0}
.listing .spec{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cover{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 28px;margin-top:34px;display:flex;gap:20px;align-items:flex-start}
.cover .dot{width:10px;height:10px;border-radius:50%;background:var(--grad);flex:none;margin-top:6px}
.cover b{display:block;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:5px}
.cover p{margin:0;font-size:14.5px;color:var(--muted)}

/* ── SOCIAL ───────────────────────────────────────────────────── */
.social{margin-top:26px}
.social h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#8A92A0;margin:0 0 14px;font-weight:500}
.social ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  color:#C0C6CF;transition:.22s ease}
.social a:hover{color:#fff;border-color:transparent;background:var(--grad);
  transform:translateY(-2px)}
.social svg{width:19px;height:19px;fill:currentColor;display:block}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
@media(max-width:720px){.foot-grid{flex-direction:column;gap:26px}}

/* ── EVENT MARKETPLACE ────────────────────────────────────────── */
.hero-sec{padding-block:30px 0}
/* Photography first. Nothing here dims the image to make white text work — the
   text sits on its own translucent surface instead, and the event stays the
   thing you look at. */
.feature{position:relative;background:#0C0D10;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);box-shadow:var(--e3);min-height:600px}
/* The only gradient left is a corner wash under the carousel controls, sized to
   the controls rather than to the picture. */
.feature::after{content:"";position:absolute;right:0;bottom:0;z-index:1;pointer-events:none;
  width:min(50%,520px);height:150px;
  background:linear-gradient(to top left,rgba(12,13,16,.52),rgba(12,13,16,0) 62%)}

/* ── HERO CAROUSEL ─────────────────────────────────────────────
   Frames stack in one grid cell and cross-fade. The drift is slower than the
   fade and runs the whole time a frame is up, so the band never sits still —
   but it moves at a speed you notice only if you look for it. */
.hero-stage{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0C0D10}
.hero-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:opacity,transform;
  transform:scale(1.09) translate3d(var(--kb-x,-1.8%),0,0);
  transition:opacity 1200ms ease,transform 9200ms linear}
/* A frame already on screen holds full opacity underneath while the next one
   fades in over it. Cross-fading both through a dark stage would dip the whole
   band to black mid-transition — the exact darkening this pass removes. */
.hero-frame.prev{opacity:1;z-index:1}
.hero-frame.on{opacity:1;z-index:2;transform:scale(1) translate3d(0,0,0)}

.hero-dots{position:absolute;right:28px;bottom:24px;z-index:4;
  display:flex;gap:7px;align-items:center}
.hero-dot{width:30px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.42);box-shadow:0 1px 3px rgba(0,0,0,.45);position:relative;overflow:hidden;
  transition:background 220ms ease,width 320ms ease}
.hero-dot:hover{background:rgba(255,255,255,.5)}
.hero-dot.on{width:52px;background:rgba(255,255,255,.3)}
.hero-dot.on::after{content:"";position:absolute;inset:0;transform-origin:left;
  background:var(--grad)}
/* The fill tracks the dwell only when the carousel is actually advancing. */
.hero-dots[data-auto="on"] .hero-dot.on::after{animation:heroDot 7400ms linear forwards}
.hero-dots:not([data-auto="on"]) .hero-dot.on::after{transform:scaleX(1)}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes heroDot{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  .hero-frame{transition:opacity 200ms ease;transform:none!important}
  .hero-dots[data-auto="on"] .hero-dot.on::after{animation:none;transform:scaleX(1)}
}
/* A warm neutral glass panel, not a black slab. It has to stay readable over
   changing hero photography, so the fill is opaque enough to carry charcoal
   type on its own and the blur only adds depth — the card does not depend on
   what happens to be behind it. */
.fpanel{position:absolute;z-index:3;left:40px;top:50%;transform:translateY(-50%);
  width:clamp(360px,33%,470px);padding:34px 34px 32px;
  background:rgba(250,249,247,.90);backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(20,22,26,.09);border-radius:22px;
  box-shadow:0 28px 64px rgba(16,17,21,.26),0 1px 0 rgba(255,255,255,.8) inset}
.fmeta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--pill);border:1px solid rgba(20,22,26,.16);color:var(--muted)}
/* Charcoal rather than gold: this pill carries 11px uppercase mono, which gold
   cannot hold at AA. */
.pill.cat{background:var(--charcoal);border-color:transparent;color:#fff;font-weight:600}
.feature h1{color:var(--ink);font-size:clamp(29px,2.5vw,40px);line-height:1.06;letter-spacing:-.025em}
/* The location reads as a subtitle to the event name, not as another fact in
   the list below it. */
.feature .floc{color:var(--slate);font-family:var(--display);font-weight:600;
  font-size:clamp(19px,1.5vw,25px);line-height:1.15;margin:6px 0 0;letter-spacing:-.01em}
.feature .sum{color:var(--muted);font-size:15px;line-height:1.55;margin:14px 0 20px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* When and where read as facts on a line, each with its own glyph — the mock's
   calendar and pin, not a label/value table. */
.fwhen{display:flex;flex-direction:column;gap:10px;margin:18px 0;color:var(--muted);font-size:14.5px}
.fwhen .from b{color:var(--ink);font-weight:600}
/* The panel closes on the supply side of the same event — a quieter line than
   the ticket CTA, because it is addressed to a different reader. */
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(20,22,26,.12)}
.oplink{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.oplink:hover{color:var(--magenta)}
.fwhen span{display:inline-flex;align-items:center;gap:9px}
.fwhen svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--magenta);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.facts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.opp-flag{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--pill);
  background:rgba(20,22,26,.045);border:1px solid rgba(20,22,26,.12);color:var(--muted);font-size:14px}
.opp-flag i{width:7px;height:7px;border-radius:50%;background:var(--grad);font-style:normal;flex:none}

.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.evcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:.24s}
.evcard:hover{box-shadow:var(--e2);transform:translateY(-4px)}
.evcard .ph{height:212px;position:relative;overflow:hidden;background:#0C0D10}
.evcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.evcard:hover .ph img{transform:scale(1.05)}
.evcard .ph .tags{position:absolute;top:11px;left:11px;right:11px;display:flex;gap:6px;
  justify-content:flex-end;align-items:flex-start}
.evcard .in{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.evcard b{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);line-height:1.25}
.evcard .when{font-size:13.5px;color:var(--muted)}
.evcard .oc{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink-deep)}
.evcard .foot{display:flex;gap:8px;margin-top:auto;padding-top:14px}
.evcard .foot .btn{flex:1;padding:11px 14px;font-size:13.5px}

.filters-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.fbtn{padding:9px 18px;border-radius:var(--pill);border:1px solid var(--line-2);background:#fff;
  font:500 13.5px var(--body);color:var(--muted);cursor:pointer;transition:.2s}
.fbtn:hover{border-color:var(--grey);color:var(--ink)}
.fbtn[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}

.oppgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.oppcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  display:flex;flex-direction:column;gap:9px;transition:.22s}
.oppcard:hover{box-shadow:var(--e2);transform:translateY(-3px)}
.oppcard .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.oppcard b{font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--ink)}
.oppcard .ev{font-size:13px;color:var(--muted)}
.oppcard p{margin:0;font-size:13.5px;color:var(--muted);flex:1}
.oppcard .cta{margin-top:6px}
.st-open{background:#FDE9F0;color:var(--pink-deep)}
.st-rfq{background:#EDE6FE;color:#421793}
.st-awarded{background:var(--hair);color:var(--muted)}

/* three entry paths */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.path{padding:28px 26px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;gap:10px}
.path .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-deep)}
.path b{font-family:var(--display);font-weight:700;font-size:21px;color:var(--ink)}
.path p{margin:0;font-size:14.5px;color:var(--muted);flex:1}

@media(max-width:900px){.paths{grid-template-columns:1fr}.feature{min-height:auto}
  .feature .wrap{padding-block:44px 40px}.fwhen{gap:16px}}

/* ── EVENTS RAIL ──────────────────────────────────────────────
   A rail rather than a grid: a marketplace has more events than fit above the
   fold, and a grid that shows exactly four implies there are exactly four. */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.rail-head>div:first-child{max-width:780px}
.railnav{display:flex;gap:10px;flex:none;padding-bottom:4px}
.rbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:#fff;
  display:grid;place-items:center;cursor:pointer;transition:.2s ease}
.rbtn svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.rbtn:hover:not(:disabled){border-color:var(--ink);transform:translateY(-1px)}
.rbtn:disabled{opacity:.34;cursor:default}

.smoke{background:var(--warm)}
.evrail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(316px,1fr);gap:22px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:8px;scrollbar-width:none}
.evrail::-webkit-scrollbar{display:none}
.evrail>*{scroll-snap-align:start}
/* One event should not stretch across the rail and pretend to be a hero. */
.evrail:has(>:only-child){grid-auto-columns:minmax(316px,420px);justify-content:start}

.evcard .ph{position:relative}
.evcard .datepill{position:absolute;left:14px;bottom:14px;z-index:2;background:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);padding:7px 12px;border-radius:var(--pill);box-shadow:var(--e1)}
.evcard .pills{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 2px}
.chip{font-size:12px;font-weight:500;padding:5px 11px;border-radius:var(--pill);
  border:1px solid var(--line-2);color:var(--muted);background:#fff}
.chip.on-sale{color:#0A5436;border-color:#BFE3D2;background:#F1F9F5}
.chip.open{color:#8E0C40;border-color:#F6CEDD;background:var(--blush)}

/* ── BROWSE: filters, search, tiles ───────────────────────────── */
.findbar{display:grid;grid-template-columns:1fr 260px 220px;gap:12px;margin:0 0 32px}
.fld{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--pill);padding:0 20px;height:56px;transition:border-color .2s ease}
.fld:focus-within{border-color:var(--ink)}
.fld svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--grey);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fld input,.fld select{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:400 15px var(--body);color:var(--ink)}
/* A placeholder is a hint, not content. It stays lighter than what you type so
   an empty field still reads as empty — but at 6.15:1 it clears AA, which the
   browser default and the old --grey did not. */
:root{--placeholder:#5A6270}
.fld input::placeholder,input::placeholder,textarea::placeholder{color:var(--placeholder)}
.fld select{appearance:none;cursor:pointer;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237C8493' stroke-width='1.6' stroke-linecap='round'/></svg>")
    no-repeat right center/12px 8px;padding-right:20px}

.tilegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:.22s ease}
.tile:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--line-2)}
.tile .ph{aspect-ratio:5/4;background:var(--hair);overflow:hidden}
.tile .ph img{width:100%;height:100%;object-fit:cover;display:block}
.tile .in{padding:14px 15px 16px}
.tile b{display:block;font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--ink);line-height:1.25;margin-bottom:6px}
.tile .m{font-size:13px;color:var(--muted)}
.tile .d{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grey);margin-top:4px}

/* ── OPPORTUNITIES AS A LIST ──────────────────────────────────
   A grid of cards invites browsing. This is a queue of work an organiser is
   waiting on, so it reads as a list with a state and a chevron. */
.opplist{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  overflow:hidden;margin-bottom:20px}
.opprow{display:flex;align-items:center;gap:18px;padding:20px 24px;
  border-bottom:1px solid var(--hair);transition:background .18s ease}
.opprow:last-child{border-bottom:0}
.opprow:hover{background:var(--warm)}
.opprow .ic{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--blush)}
.opprow .ic svg{width:21px;height:21px;fill:none;stroke:var(--pink-deep);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.opprow .tx{flex:1;min-width:0}
.opprow .tt{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.opprow b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.opprow .ev{font-size:13.5px;color:var(--muted);margin-top:3px}
.opprow .chev{width:20px;height:20px;flex:none;fill:none;stroke:var(--grey);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.opprow:hover .chev{stroke:var(--ink)}
.st-pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;white-space:nowrap}
.st-open{background:var(--blush);color:#8E0C40}
.st-closing{background:#FFF5E0;color:#5C3A00}
.st-won{background:var(--hair);color:var(--muted)}
.btn-block{width:100%}

/* ── INSIDE THE ROOM — one unbroken strip ─────────────────────── */
.strip{display:flex;gap:0;margin-top:44px}
.strip img{flex:1 1 0;min-width:0;height:330px;object-fit:cover;display:block;border:0;border-radius:0;
  margin-right:-1px;transition:flex-grow .45s ease}
.strip img:last-child{margin-right:0}
/* Hovering widens one frame. It does not darken the other seven. */
.strip img:hover{flex-grow:2.1}

/* ── HOW AMPROOM WORKS ────────────────────────────────────────── */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 30px;display:flex;flex-direction:column;gap:14px}
.work .ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--blush)}
.work .ic svg{width:24px;height:24px;fill:none;stroke:var(--pink-deep);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.work b{font-family:var(--display);font-weight:800;font-size:24px;color:var(--ink)}
.work ul{margin:0;padding:0;list-style:none;flex:1;display:flex;flex-direction:column;gap:9px}
.work li{position:relative;padding-left:22px;font-size:15.5px;color:var(--muted)}
.work li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;
  border-radius:2px;background:var(--grad)}
.work .btn{align-self:flex-start;margin-top:6px}

/* ── TRUST BAND + NEWSLETTER ──────────────────────────────────── */
.trust{background:var(--warm);padding-block:var(--space-sm);position:relative}
.trust::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-bottom:52px}
.titem{display:flex;gap:16px}
.titem .ic{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#fff;box-shadow:var(--e1)}
.titem .ic svg{width:22px;height:22px;fill:none;stroke:var(--pink-deep);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.titem b{display:block;font-family:var(--display);font-weight:700;font-size:17px;
  color:var(--ink);margin-bottom:5px}
.titem p{margin:0;font-size:14.5px;color:var(--muted)}

.stay{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 34px;display:grid;
  grid-template-columns:1fr auto;gap:20px 34px;align-items:center;box-shadow:var(--e1)}
.stay b{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink)}
.stay>div>p{margin:4px 0 0;font-size:15px;color:var(--muted)}
.stay-in{display:flex;gap:10px}
.stay-in input{border:1px solid var(--line-2);border-radius:var(--pill);padding:15px 22px;
  font:400 15px var(--body);color:var(--ink);min-width:250px;background:var(--warm)}
.stay-in input:focus{outline:0;border-color:var(--ink);background:#fff}
.stay-out{grid-column:1/-1;margin:0;font-size:14px;color:var(--muted)}
.stay-out:empty{display:none}

@media(max-width:1080px){
  .tilegrid{grid-template-columns:repeat(3,1fr)}
  .findbar{grid-template-columns:1fr 1fr}
  .findbar .fld-search{grid-column:1/-1}
  .works,.tgrid{grid-template-columns:1fr}
  .stay{grid-template-columns:1fr}
  .strip img{height:210px}
}
@media(max-width:720px){
  .hero-sec{padding-block:16px 0}
  .rail-head{flex-direction:column;align-items:stretch}
  .railnav{justify-content:flex-end}
  .findbar{grid-template-columns:1fr}
  .tilegrid{grid-template-columns:repeat(2,1fr)}
  .stay-in{flex-direction:column}
  .stay-in input,.stay-in .btn{width:100%}
  /* The strip cannot be eight images wide on a phone; it becomes a swipe. */
  .strip{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip img{flex:0 0 72%;height:230px;scroll-snap-align:center}
  .strip img:hover{flex-grow:0}
}

/* ── MY TICKETS — the ticket is the object, not the receipt ────
   Boarding-pass shape: everything a person needs on the left, a stub on the
   right. The stub is where an entry credential would live and deliberately does
   not pretend to be one. */
.tix-sec{padding-block:56px var(--space)}
.tix-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}
.tix-head h1{font-size:clamp(28px,3vw,40px)}
.tix-list{display:grid;gap:18px}
.tix{display:grid;grid-template-columns:1fr 232px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e1)}
.tix-main{padding:26px 28px}
.tix-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.tix h2{font-size:24px;margin-bottom:18px}
.tix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px}
.tix-grid label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);margin-bottom:4px}
.tix-grid div{font-size:15px;color:var(--ink)}
.tix-grid .ref{font-family:var(--mono);font-size:14px;letter-spacing:.06em}
.tix-acts{display:flex;align-items:center;gap:14px;margin-top:24px}
.tix-state{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#0A5436}
.pay-note{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.pay{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px}
.pay-sandbox{background:#FBF1DC;color:#5C3A00}
.pay-none{background:var(--hair);color:var(--muted)}
.pay-live{background:#E7F5EE;color:#0A5436}
.pay-fail{background:#FDE8E6;color:#96201A}

/* The stub. A real-looking code that cannot admit anyone is worse than an
   obvious placeholder — somebody would take it to a door. */
.tix-stub{border-left:2px dashed var(--line-2);background:var(--warm);padding:26px 22px;
  display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;text-align:center}
.stub-art{width:104px;height:104px;border-radius:12px;border:1px dashed var(--line-2);
  background:repeating-linear-gradient(45deg,var(--hair) 0 8px,transparent 8px 16px)}
.tix-stub p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.tix-stub b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin-bottom:5px}

.tix-find{max-width:620px;margin:0 auto;text-align:center}
.tix-find h1{font-size:clamp(28px,3vw,40px);margin-bottom:12px}
.tix-find p{color:var(--muted)}
.find-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;
  margin:26px 0 6px;text-align:left}
.find-row label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey)}
.find-row input{width:100%;margin-top:6px;padding:14px 16px;border:1px solid var(--line-2);
  border-radius:var(--pill);font:400 15px var(--body);color:var(--ink);background:#fff}
.find-row input:focus{outline:0;border-color:var(--ink)}
.find-err{color:#B3261E;font-size:14px;margin-top:10px}

@media(max-width:820px){
  .tix{grid-template-columns:1fr}
  .tix-stub{border-left:0;border-top:2px dashed var(--line-2);flex-direction:row;text-align:left}
  .tix-grid{grid-template-columns:repeat(2,1fr)}
  .find-row{grid-template-columns:1fr}
}

/* ── EVENT PAGE ───────────────────────────────────────────────── */
.ev-hero{position:relative;background:#0C0D10;overflow:hidden;isolation:isolate;
  padding-block:0;min-height:560px;display:flex;align-items:flex-end}
/* No full-frame scrim. A short wash along the bottom edge only, where the panel
   meets the picture and the section meets the page. */
.ev-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;z-index:1;
  pointer-events:none;background:linear-gradient(0deg,rgba(12,13,16,.62),rgba(12,13,16,0))}
.ev-hero .wrap{position:relative;z-index:3;width:min(var(--wrap),calc(100% - var(--gut)*2))}
.ev-hero .fpanel{position:relative;left:auto;top:auto;transform:none;
  width:clamp(340px,42%,560px);margin:0 0 46px}
.ev-hero .hero-dots{bottom:22px;right:max(var(--gut),calc((100vw - var(--wrap))/2))}
.ev-hero h1{color:#fff;font-size:clamp(30px,2.9vw,44px);line-height:1.05;letter-spacing:-.025em}
.ev-cols{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start}
.ev-sec{margin-bottom:44px}
.ev-sec h2{font-size:26px;margin-bottom:14px}
.ev-sec p{color:var(--muted);font-size:16px;margin:0 0 12px}
.ticket{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;
  display:flex;gap:14px;align-items:center;background:#fff}
.ticket .t{flex:1;min-width:0}
.ticket b{display:block;font-size:15.5px;color:var(--ink);font-weight:600}
.ticket .d{font-size:13px;color:var(--muted)}
.ticket .pr{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);white-space:nowrap}
.qty-ctl{display:flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:var(--pill);overflow:hidden}
.qty-ctl button{width:34px;height:34px;border:0;background:#fff;cursor:pointer;font-size:16px;color:var(--ink)}
.qty-ctl button:hover:not(:disabled){background:var(--hair)}
.qty-ctl button:disabled{opacity:.35;cursor:not-allowed}
.qty-ctl span{min-width:32px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.basket{position:sticky;top:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:22px;box-shadow:var(--e2)}
.basket h3{font-size:19px;margin-bottom:4px}
.basket .rowline{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.basket .tot{display:flex;justify-content:space-between;padding:14px 0 4px;font-weight:700;
  font-family:var(--display);font-size:19px;color:var(--ink)}
.basket .btn{width:100%;margin-top:12px}
.buyer{display:grid;gap:10px;margin:6px 0 12px}
.buyer label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey)}
.buyer input{width:100%;margin-top:5px;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:10px;font:400 14px var(--body);color:var(--ink);background:#fff}
.buyer input:focus{outline:0;border-color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:13.5px}

.paynote{margin-top:12px;padding:12px 14px;border-radius:10px;background:#FBF1DC;color:#4E3100;font-size:13px;line-height:1.55}
.gal-ev{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal-ev img{width:100%;height:150px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.sched{border-left:2px solid var(--line);padding-left:18px}
.sched li{list-style:none;margin-bottom:16px;position:relative}
.sched li::before{content:"";position:absolute;left:-25px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--grad)}
.sched b{display:block;font-size:15px;color:var(--ink)}
.sched span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--grey)}
@media(max-width:980px){.ev-cols{grid-template-columns:1fr}.basket{position:static}
  .gal-ev{grid-template-columns:repeat(2,1fr)}}

/* Mobile header: the nav card overflowed — the lockup plus two CTAs cannot sit
   on one row at 375px, so the secondary action drops and the card wraps. */
@media(max-width:760px){
  .navwrap{padding-top:14px}
  .navcard{flex-wrap:wrap;gap:12px;padding:14px 16px;row-gap:12px}
  .navcard .acts{margin-left:0;width:100%}
  .lockup .wm b{font-size:17px}
  .navcard .acts .btn{flex:1;padding:13px 16px;font-size:14px}
  .mark{height:32px}
  .lockup .wm b{font-size:15px}.lockup .wm i{font-size:8.5px}
  .feature h1,.ev-hero h1{font-size:clamp(30px,8vw,40px)}
  .feature .sum{font-size:16px}
  .facts{flex-direction:column;align-items:stretch}
  .facts .btn,.facts .opp-flag{width:100%;justify-content:center}
  .evgrid,.oppgrid{grid-template-columns:1fr}
  .gal-ev{grid-template-columns:1fr}
  .ticket{flex-wrap:wrap;row-gap:10px}
  .ticket .t{flex:1 1 100%}
}

/* Below 900 the panel stops floating over the picture and sits under it,
   overlapping the lower edge. The photograph keeps a band of its own rather
   than being three-quarters covered by a black card. */
@media(max-width:900px){
  .feature{min-height:0}
  .feature::after{width:100%;height:110px;
    background:linear-gradient(0deg,rgba(12,13,16,.5),rgba(12,13,16,0))}
  .hero-stage{position:relative;inset:auto;height:clamp(330px,72vw,460px)}
  .fpanel{position:relative;left:auto;top:auto;transform:none;
    width:auto;margin:-38px 16px 16px;padding:26px 24px 24px}
  .ev-hero{min-height:0;display:block}
  .ev-hero::after{height:110px}
  .ev-hero .hero-stage{position:relative;inset:auto;height:clamp(300px,66vw,420px)}
  .ev-hero .fpanel{width:auto;margin:-54px 0 28px}
  .ev-hero .hero-dots{right:var(--gut)}
}