/* AmpRoom platform gateway — amproom.digital.
   Deliverable A of the approved four-page family.

   Its own stylesheet for the same reason live/ has one: the gateway answers a
   different question from the three planes and would otherwise inherit
   storefront furniture — filters, cards, ticket language — that a person
   choosing a door cannot act on. Every token below is the deployed system;
   nothing here is a new design decision. */
:root{
  --gold:#a8741a; --gold-ink:#8a5f15; --gold-pale:#F3EBDC; --charcoal:#242424;
  --ink:#14161A; --slate:#1C1F25; --muted:#2B303A; --grey:#414855;
  --line:#E8E4E6; --line-2:#DEE1E6; --hair:#F0ECEE;
  --page:#FFFFFF; --warm:#F8F6F7; --tint:#F2EEF0; --dark:#0C0D10;

  --display:Prata,"Times New Roman",Georgia,serif;
  --body:Rubik,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1320px; --gut:30px;
  --space:clamp(50px,8vw,72px); --space-sm:clamp(40px,6vw,54px);
  --space-head:clamp(36px,2.6vw,44px); --space-block:clamp(24px,2vw,28px);
  --r:14px; --r-lg:20px; --r-xl:26px; --pill:999px;
}
*,*::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}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;color:var(--ink);
  letter-spacing:-.008em;text-wrap:balance}
.wrap{width:min(var(--wrap),calc(100% - var(--gut)*2));margin-inline:auto}

.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:1px;width:56px;background:var(--gold);flex:none}

/* ── header ─────────────────────────────────────────────────────────────── */
.gw-head{background:var(--dark)}
.gw-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;
  padding-block:26px;border-bottom:1px solid rgba(255,255,255,.09)}
.lockup{display:flex;align-items:center;gap:11px}
.lockup img{display:block;flex:none;height:40px;width:auto}
.lockup b{font-family:var(--display);font-weight:400;font-size:21px;
  letter-spacing:.06em;color:#fff}
.gw-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px 34px;
  font-size:14.5px;color:#D6D9DE}
.gw-nav a:hover{color:#fff}

/* ── hero ───────────────────────────────────────────────────────────────── */
.gw-hero{background:var(--dark);padding-block:clamp(80px,11vw,130px) clamp(70px,9vw,104px)}
.gw-hero .eyebrow{color:#B4BAC4}
.gw-hero h1{font-size:clamp(44px,6.4vw,88px);line-height:1.06;letter-spacing:-.014em;
  color:#fff;max-width:20ch}
.gw-hero p{margin:34px 0 0;font-size:19px;line-height:1.6;color:#A8AFBA;max-width:56ch}
.gw-hosts{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:54px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8A92A0}

/* ── the three doors ────────────────────────────────────────────────────── */
.gw-sec{padding-block:var(--space)}
.gw-head-block{max-width:780px;margin-bottom:var(--space-head)}
.gw-head-block h2{font-size:clamp(30px,3.3vw,44px);line-height:1.14}
.gw-head-block p{margin:16px 0 0;font-size:17px;color:var(--muted);max-width:64ch}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.door{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--page);display:flex;flex-direction:column;transition:.22s ease}
.door:hover{border-color:var(--line-2);box-shadow:0 10px 34px rgba(20,22,26,.08)}
/* Image slot. Labelled rather than approximated: the three plates are crops of
   masters M1-M3 in the sourcing schedule and are swapped in when those land. */
.plate{aspect-ratio:5/4;background:var(--hair);position:relative;
  display:grid;place-items:center;border-bottom:1px solid var(--line);
  background-image:repeating-linear-gradient(135deg,transparent 0 10px,rgba(168,116,26,.05) 10px 20px)}
.plate span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);text-align:center;padding:0 16px;line-height:1.7}
.plate b{display:block;color:var(--gold-ink);font-weight:500}
.door-in{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.door-in .role{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-ink)}
.door-in h3{font-size:27px;line-height:1.15}
.door-in p{margin:0;font-size:15px;color:var(--muted)}
.btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;font-family:var(--body);font-weight:600;font-size:15px;padding:16px 28px;
  border-radius:var(--pill);border:1px solid transparent;transition:.22s ease}
.btn-solid{background:var(--charcoal);color:#fff;box-shadow:0 6px 18px rgba(36,36,36,.18)}
.btn-solid:hover{background:var(--gold-ink);box-shadow:0 10px 28px rgba(168,116,26,.30)}
.btn-out{border-color:var(--line-2);color:var(--ink)}
.btn-out:hover{border-color:var(--ink)}

/* ── discover / create / experience ─────────────────────────────────────── */
.gw-flow{background:var(--warm);border-top:1px solid var(--line);
  padding-block:var(--space-sm)}
.flow{display:grid;grid-template-columns:repeat(3,1fr)}
.flow > div{padding-inline:44px;border-right:1px solid var(--line)}
.flow > div:first-child{padding-left:0}
.flow > div:last-child{border-right:0;padding-right:0}
.flow .n{margin:0 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-ink)}
.flow h3{font-size:24px;line-height:1.2;margin-bottom:12px}
.flow p{margin:0;font-size:15.5px;color:var(--muted)}

/* ── one event, published where it belongs ──────────────────────────────── */
.gw-about{padding-block:var(--space-sm)}
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start}
.about-grid h2{font-size:clamp(28px,2.8vw,38px);line-height:1.14;margin-bottom:16px}
.about-grid > div > p{margin:0;font-size:16.5px;color:var(--muted);max-width:52ch}
.pubtable{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pubtable .row{display:grid;grid-template-columns:1.4fr 1fr 1fr}
.pubtable .head{background:var(--tint);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey)}
.pubtable .head > div{padding:14px 20px;border-left:1px solid var(--line)}
.pubtable .head > div:first-child{border-left:0}
.pubtable .body{border-bottom:1px solid var(--hair)}
.pubtable .body:last-child{border-bottom:0}
.pubtable .body > div{padding:16px 20px;border-left:1px solid var(--hair);
  font-family:var(--mono);font-size:12px;color:var(--grey)}
.pubtable .body > div:first-child{border-left:0;font-family:var(--body);
  font-size:15px;color:var(--ink)}
.pubtable .yes{color:var(--gold-ink)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.gw-foot{background:var(--ink);color:#8A92A0;
  padding-block:var(--space-sm) calc(var(--space-sm) * .7)}
.gw-foot .lockup b{color:#fff}
.gw-foot .lockup img{height:42px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;
  gap:40px;flex-wrap:wrap}
.gw-foot p{margin:16px 0 0;font-size:14px}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-col span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#5F6773}
.foot-col a:hover{color:#fff}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap}

@media(max-width:1080px){
  .doors{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:var(--space-block)}
  .flow > div{padding-inline:0;border-right:0;border-bottom:1px solid var(--line);
    padding-bottom:var(--space-block)}
  .flow > div:last-child{border-bottom:0;padding-bottom:0}
  .about-grid{grid-template-columns:1fr;gap:var(--space-head)}
}
@media(max-width:720px){
  .gw-hosts{display:none}          /* desktop reassurance, not mobile content */
  .pubtable .row{grid-template-columns:1fr}
  .pubtable .head{display:none}
  .pubtable .body > div{border-left:0}
  .pubtable .body > div:first-child{padding-bottom:4px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}