/* ============================================================
   TRAIT'S TRADING
   Comic-book maximalism: hard black outlines, offset sticker
   shadows, halftone fields, oxblood + sunburst.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* Brand book palette */
  --ox:        #A10000;
  --ox-deep:   #6E0000;
  --ox-lift:   #C81212;
  --sun:       #FFD200;
  --sun-deep:  #E0B800;
  --ink:       #000000;
  --paper:     #FFFFFF;
  --smoke:     #7F7F7F;

  /* Derived surfaces */
  --bone:      #F6F1E7;   /* newsprint white */
  --bone-2:    #EDE5D6;
  --night:     #0B0B0B;
  --night-2:   #161616;

  --line:      3px;
  --line-thick:4px;
  --r:         14px;
  --r-sm:      8px;

  --pop:       8px 8px 0 var(--ink);
  --pop-sm:    5px 5px 0 var(--ink);
  --pop-sun:   8px 8px 0 var(--sun);
  --pop-ox:    8px 8px 0 var(--ox);

  --wrap:      1200px;
  --ease:      cubic-bezier(.2,.8,.2,1);

  --f-display: "Acme", "Impact", system-ui, sans-serif;
  --f-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:400; line-height:.95; letter-spacing:.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--sun); color:var(--ink); padding:.75rem 1.25rem;
  font-weight:800; border:var(--line) solid var(--ink);
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:4px solid var(--sun); outline-offset:3px; }
.section--dark :focus-visible,
.closer :focus-visible{ outline-color:var(--sun); }
.section--red :focus-visible{ outline-color:var(--paper); }

/* ---------- LAYOUT ---------- */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 820px); }

.section{ position:relative; padding:clamp(4.5rem,9vw,7.5rem) 0; }
.section--light{ background:var(--bone); }
.section--dark{ background:var(--night); color:var(--paper); }
.section--red{ background:var(--ox); color:var(--paper); }

/* Newsprint halftone field */
.section__halftone,
.hero__halftone,
.closer__halftone{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(currentColor 1.4px, transparent 1.5px);
  background-size:14px 14px;
  opacity:.07;
}
.section--dark .section__halftone{ color:var(--sun); opacity:.09; }

/* Hard edge between bands */
.section--dark + .section--red,
.section--red + .section--light,
.section--light + .section--dark{ border-top:var(--line-thick) solid var(--ink); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--night);
  border-bottom:var(--line-thick) solid var(--ink);
  box-shadow:0 4px 0 var(--sun);
}
.nav__inner{
  display:flex; align-items:center; gap:1.25rem;
  min-height:76px; padding-block:.6rem;
}
.nav__brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--paper); flex:0 0 auto;
}
.nav__mark{
  width:52px; height:52px; object-fit:contain;
  filter:drop-shadow(0 0 0 var(--ink));
}
.nav__word{ display:flex; flex-direction:column; line-height:1; }
.nav__name{
  font-family:var(--f-display); font-size:1.35rem;
  color:var(--sun); letter-spacing:.02em;
}
.nav__tag{
  font-size:.62rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--smoke); margin-top:.25rem;
}
.nav__links{
  display:flex; gap:1.75rem; margin-left:auto;
  font-weight:700; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.nav__links a{
  text-decoration:none; color:var(--paper);
  padding-block:.35rem; position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:3px; background:var(--sun); transition:right .25s var(--ease);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after{ right:0; }

.nav__cta{ flex:0 0 auto; }
.nav__toggle{ display:none; padding:.6rem; margin-left:auto; }
.nav__bars,
.nav__bars::before,
.nav__bars::after{
  display:block; width:26px; height:3px; background:var(--sun);
  transition:transform .25s var(--ease), opacity .2s;
}
.nav__bars::before,.nav__bars::after{ content:""; }
.nav__bars::before{ transform:translateY(-8px); }
.nav__bars::after{ transform:translateY(5px); }
.nav__toggle[aria-expanded="true"] .nav__bars{ background:transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before{ transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after{ transform:rotate(-45deg) translateY(-2px); }

.nav__drawer{
  border-top:var(--line) solid var(--sun);
  background:var(--night-2); padding:1rem 1.25rem 1.5rem;
  display:flex; flex-direction:column; gap:.2rem;
}
.nav__drawer[hidden]{ display:none; }
.nav__drawer a{
  text-decoration:none; color:var(--paper); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; font-size:.85rem;
  padding:.85rem 0; border-bottom:2px solid rgba(255,255,255,.1);
}
.nav__drawer > div{ margin-top:1rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-display); font-size:1.02rem;
  letter-spacing:.03em; text-decoration:none;
  padding:.78em 1.35em;
  border:var(--line) solid var(--ink);
  border-radius:var(--r-sm);
  background:var(--sun); color:var(--ink);
  box-shadow:var(--pop-sm);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s;
  white-space:nowrap;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn svg{ width:1.15em; height:1.15em; flex:0 0 auto; }

.btn--lg{ font-size:1.3rem; padding:.8em 1.5em; box-shadow:var(--pop); }
.btn--lg:hover{ box-shadow:10px 10px 0 var(--ink); }
.btn--sm{ font-size:.9rem; padding:.6em 1em; box-shadow:4px 4px 0 var(--ink); }

.btn--ghost{ background:var(--paper); }
.btn--ink{ background:var(--ink); color:var(--sun); border-color:var(--ink); box-shadow:5px 5px 0 var(--sun); }
.btn--ink:hover{ box-shadow:7px 7px 0 var(--sun); }
.btn--onDark{ box-shadow:5px 5px 0 var(--ox); }
.btn--onDark:hover{ box-shadow:7px 7px 0 var(--ox); }
.btn--outline{
  background:transparent; color:var(--paper); border-color:var(--paper);
  box-shadow:5px 5px 0 rgba(255,255,255,.25);
}
.btn--outline:hover{ background:var(--paper); color:var(--ink); box-shadow:7px 7px 0 rgba(255,255,255,.3); }

.btn--full{ width:100%; justify-content:center; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--ox);
  color:var(--paper);
  border-bottom:var(--line-thick) solid var(--ink);
  padding-top:clamp(3rem,6vw,5rem);
}
.hero__halftone{ color:var(--ink); opacity:.18; }
.hero__rays{
  position:absolute; inset:-30% -10% auto; height:150%;
  pointer-events:none; opacity:.16;
  background:repeating-conic-gradient(
    from 0deg at 62% 42%,
    var(--sun) 0deg 5deg, transparent 5deg 14deg
  );
  mask-image:radial-gradient(closest-side at 62% 42%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(closest-side at 62% 42%, #000 20%, transparent 78%);
  animation:spin 90s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding-bottom:clamp(3rem,6vw,4.5rem);
}

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--ink); color:var(--sun);
  font-weight:800; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase;
  padding:.5rem .95rem; border-radius:100px;
  border:2px solid var(--sun);
  margin-bottom:1.4rem;
}
.kicker__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--sun); box-shadow:0 0 0 0 var(--sun);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(255,210,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,210,0,0); }
}

.hero__title{
  font-size:clamp(2.9rem,7.4vw,5.6rem);
  color:var(--paper);
  text-shadow:
     4px 4px 0 var(--ink),
    -1px -1px 0 var(--ink), 1px -1px 0 var(--ink),
    -1px 1px 0 var(--ink),  1px 1px 0 var(--ink);
  margin-bottom:1.4rem;
}
.hero__title em{
  font-style:normal; color:var(--sun);
  display:inline-block; transform:rotate(-1.5deg);
}
.hero__sub{
  font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);
  max-width:44ch; margin-bottom:2rem;
  color:rgba(255,255,255,.94);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero__proof{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
  margin-top:2.4rem; padding-top:1.4rem;
  border-top:2px dashed rgba(255,255,255,.35);
}
.hero__proof li{
  font-size:.7rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase;
  border:2px solid rgba(255,255,255,.45);
  padding:.35rem .7rem; border-radius:100px;
}
/* Marvel is the mainstay, not one of six equals. */
.hero__proof li.is-lead{
  background:var(--sun); color:var(--ink);
  border-color:var(--ink);
}

/* Hero art */
.hero__art{ position:relative; display:grid; place-items:center; }
.hero__burst{
  position:absolute; inset:0; display:grid; place-items:center;
  animation:spin 40s linear infinite;
}
.hero__burst svg{ width:104%; height:104%; fill:var(--sun); opacity:.92; }
.hero__mascot{
  position:relative; z-index:2;
  width:min(100%,520px);
  filter:drop-shadow(6px 8px 0 rgba(0,0,0,.55));
  transform:rotate(-2deg);
}
.hero__stamp{
  position:absolute; z-index:3; right:2%; bottom:4%;
  display:flex; flex-direction:column; gap:.15rem;
  background:var(--ink); color:var(--sun);
  border:var(--line) solid var(--sun);
  padding:.7rem 1rem; border-radius:var(--r-sm);
  transform:rotate(6deg);
  font-family:var(--f-display); font-size:1.05rem; line-height:1.1;
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow:5px 5px 0 rgba(0,0,0,.45);
}

/* Ticker */
.ticker{
  position:relative; z-index:2;
  background:var(--sun); color:var(--ink);
  border-top:var(--line-thick) solid var(--ink);
  overflow:hidden; padding:.7rem 0;
}
.ticker__track{
  display:flex; gap:2.5rem; width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--f-display); font-size:1.02rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__track span{ display:inline-flex; align-items:center; gap:2.5rem; }
.ticker__track span::after{
  content:"★"; color:var(--ox); font-size:.85em;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   STATS BAND
   Real published numbers. Loud, then out of the way.
   ============================================================ */
.statsband{
  background:var(--ink); color:var(--paper);
  border-bottom:var(--line-thick) solid var(--ink);
  padding:clamp(2rem,4vw,2.75rem) 0;
}
.statsband__grid{
  display:grid; gap:1.25rem 1rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.statsband__item{
  text-align:center; position:relative;
  padding-inline:.75rem;
}
.statsband__item + .statsband__item::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%;
  width:2px; background:rgba(255,255,255,.16);
}
.statsband__figure{
  font-family:var(--f-display);
  font-size:clamp(2.1rem,1.5rem + 2.2vw,3.1rem);
  color:var(--sun); line-height:1; letter-spacing:.01em;
}
.statsband__label{
  font-size:.72rem; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; margin-top:.5rem;
}
.statsband__note{
  font-size:.72rem; color:var(--smoke); margin-top:.2rem;
}
@media (max-width:640px){
  .statsband__grid{ grid-template-columns:1fr 1fr; }
  .statsband__item:nth-child(odd)::before{ display:none; }
}

/* ============================================================
   THE ROOM — story pull-quote + supporting points
   ============================================================ */
.story{
  margin:0 0 clamp(2rem,4vw,3rem);
  background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--pop-sun);
  padding:clamp(1.75rem,4vw,2.75rem);
  position:relative;
  max-width:64ch;
}
/* Oversized comic open-quote */
.story::before{
  content:"\201C";
  position:absolute; top:-.34em; left:.42em;
  font-family:var(--f-display);
  font-size:clamp(5rem,10vw,7rem);
  line-height:1; color:var(--sun);
  text-shadow:3px 3px 0 var(--ink);
  pointer-events:none;
}
.story__quote{
  margin:0; position:relative; z-index:1;
  font-size:clamp(1.12rem,1rem + .6vw,1.45rem);
  line-height:1.5; font-weight:600;
}
.story__caption{
  margin-top:1.25rem; padding-top:1.1rem;
  border-top:2px dashed rgba(0,0,0,.22);
  font-size:.92rem; font-weight:700; color:var(--ox);
  font-style:italic;
}

.roompoints{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.roompoint{
  border:var(--line) solid var(--paper);
  border-radius:var(--r);
  padding:1.4rem 1.3rem;
  background:rgba(0,0,0,.18);
  transition:transform .2s var(--ease), background .2s;
}
.roompoint:hover{ transform:translateY(-4px); background:rgba(0,0,0,.3); }
.roompoint__title{
  font-family:var(--f-display); font-size:1.28rem;
  color:var(--sun); margin-bottom:.5rem;
}
.roompoint__body{ font-size:.95rem; color:rgba(255,255,255,.92); }

/* Trailing "see everything" link under a section */
.section__more{ margin-top:clamp(2rem,4vw,2.75rem); }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.shead{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.shead__eyebrow{
  display:inline-block;
  font-size:.7rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase;
  background:var(--ink); color:var(--sun);
  padding:.4rem .85rem; border-radius:100px; margin-bottom:1.1rem;
}
.shead__title{
  font-size:clamp(2.1rem,4.6vw,3.5rem);
  margin-bottom:.9rem;
}
.shead__lede{
  font-size:clamp(1rem,.97rem + .28vw,1.16rem);
  color:#3A3A3A; max-width:56ch;
}
.shead--onDark .shead__lede{ color:#BDBDBD; }
.shead--onDark .shead__eyebrow{ background:var(--sun); color:var(--ink); }
.shead--onRed .shead__lede{ color:rgba(255,255,255,.9); }
.shead--onRed .shead__eyebrow{ background:var(--sun); color:var(--ink); }
.shead--onRed .shead__title{ color:var(--sun); }

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.cards{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.card{
  position:relative;
  background:var(--paper);
  border:var(--line) solid var(--ink);
  border-radius:var(--r);
  padding:1.75rem 1.5rem 1.6rem;
  box-shadow:var(--pop);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto; height:10px;
  background:var(--ox); border-bottom:var(--line) solid var(--ink);
}
.card:nth-child(4n+2)::before{ background:var(--sun); }
.card:nth-child(4n+3)::before{ background:var(--ink); }
.card:nth-child(4n+4)::before{ background:var(--smoke); }
.card:hover{ transform:translate(-3px,-3px) rotate(-.5deg); box-shadow:11px 11px 0 var(--ink); }

.card__n{
  position:absolute; top:1.05rem; right:1.1rem;
  font-family:var(--f-display); font-size:2.7rem;
  color:var(--bone-2); line-height:1; user-select:none;
}
.card__title{
  font-size:1.55rem; margin:.6rem 0 .65rem; position:relative;
}
.card__body{ color:#3A3A3A; font-size:.97rem; }
.card__tag{
  display:inline-block; margin-top:1.1rem;
  font-size:.66rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--bone-2); border:2px solid var(--ink);
  padding:.3rem .65rem; border-radius:100px;
}

/* ============================================================
   STEPS
   ============================================================ */
.steps{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  counter-reset:step;
}
.step{
  position:relative;
  background:var(--night-2);
  border:var(--line) solid var(--sun);
  border-radius:var(--r);
  padding:2.4rem 1.4rem 1.5rem;
  transition:transform .2s var(--ease), background .2s;
}
.step:hover{ transform:translateY(-5px); background:#1F1F1F; }
.step__n{
  position:absolute; top:-18px; left:1.2rem;
  font-family:var(--f-display); font-size:1.4rem;
  background:var(--sun); color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:var(--r-sm);
  padding:.15rem .7rem;
  box-shadow:4px 4px 0 var(--ox);
}
.step__title{ font-size:1.32rem; color:var(--sun); margin-bottom:.55rem; }
.step__body{ color:#C4C4C4; font-size:.95rem; }

.how__cta{ margin-top:3rem; display:flex; flex-wrap:wrap; gap:1rem; }

/* ============================================================
   TRUST
   ============================================================ */
.trust{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.trust__item{
  background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:var(--r);
  padding:1.6rem 1.4rem;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .2s var(--ease);
}
.trust__item:nth-child(even){ background:var(--sun); }
.trust__item:hover{ transform:rotate(-1deg) translateY(-4px); }
/* On the dark band a black drop shadow disappears — throw it in oxblood. */
.section--dark .trust__item{ box-shadow:6px 6px 0 var(--ox); }
.trust__stat{
  font-family:var(--f-display); font-size:1.5rem;
  margin-bottom:.55rem; display:flex; align-items:center; gap:.55rem;
}
.trust__stat::before{
  content:""; width:14px; height:14px; flex:0 0 auto;
  background:var(--ox); border:2px solid var(--ink);
  transform:rotate(45deg);
}
.trust__item:nth-child(even) .trust__stat::before{ background:var(--ink); }
.trust__body{ font-size:.96rem; color:#333; }

/* ============================================================
   SHOWS
   ============================================================ */
.shows{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem); align-items:start;
}
.shows__list{ display:grid; gap:1rem; }
.show{
  display:flex; align-items:center; gap:1.1rem;
  background:var(--paper);
  border:var(--line) solid var(--ink);
  border-radius:var(--r);
  padding:1.1rem 1.3rem;
  box-shadow:var(--pop-sm);
  transition:transform .2s var(--ease);
}
.show:hover{ transform:translateX(5px); }
.show__day{
  flex:0 0 auto; min-width:74px;
  font-family:var(--f-display); font-size:1.05rem;
  text-transform:uppercase; letter-spacing:.05em;
  background:var(--ox); color:var(--paper);
  border:2px solid var(--ink); border-radius:var(--r-sm);
  padding:.5rem .6rem; text-align:center; line-height:1.1;
}
.show__meta{ min-width:0; }
.show__title{ font-family:var(--f-display); font-size:1.24rem; }
.show__time{
  font-size:.76rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ox); margin-top:.15rem;
}
.shows__note{
  background:var(--sun);
  border:var(--line) solid var(--ink);
  border-radius:var(--r);
  padding:1.6rem 1.5rem;
  box-shadow:var(--pop);
  position:relative;
}
.shows__note::after{
  content:""; position:absolute; left:2.5rem; bottom:-19px;
  width:0; height:0;
  border:16px solid transparent;
  border-top-color:var(--ink); border-bottom:0;
}
.shows__noteTitle{ font-family:var(--f-display); font-size:1.45rem; margin-bottom:.6rem; }
.shows__noteBody{ font-size:.97rem; color:#2E2E2E; margin-bottom:1.3rem; }
.shows__all{
  display:inline-block; margin-top:1rem;
  font-size:.82rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:2px;
}
.shows__all:hover{ color:var(--ox); }

/* ============================================================
   PLATFORMS
   ============================================================ */
.platforms{
  display:grid; gap:1.35rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.plat{
  display:flex; flex-direction:column;
  background:var(--night-2);
  border:var(--line) solid var(--paper);
  border-radius:var(--r);
  padding:1.6rem 1.5rem;
  transition:transform .2s var(--ease), border-color .2s, background .2s;
}
.plat:hover{ transform:translateY(-5px); border-color:var(--sun); background:#1C1C1C; }
.plat--primary{
  background:var(--ox); border-color:var(--sun);
  box-shadow:var(--pop-sun);
}
.plat--primary:hover{ background:var(--ox-lift); }

.plat__top{ display:flex; align-items:center; gap:.85rem; margin-bottom:.9rem; }
.plat__icon{
  width:46px; height:46px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--sun); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:var(--r-sm);
}
.plat__icon svg{ width:24px; height:24px; }
.plat--primary .plat__icon{ background:var(--sun); }
.plat__name{ font-family:var(--f-display); font-size:1.45rem; color:var(--sun); }
.plat--primary .plat__name{ color:var(--paper); }
.plat__handle{
  font-size:.74rem; font-weight:700; letter-spacing:.09em;
  color:var(--smoke); margin-top:.1rem;
}
.plat--primary .plat__handle{ color:rgba(255,255,255,.8); }
.plat__badge{
  margin-left:auto; align-self:flex-start;
  font-size:.6rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase;
  border:2px solid currentColor; color:var(--smoke);
  padding:.22rem .5rem; border-radius:100px;
}
.plat--primary .plat__badge{ color:var(--sun); }
.plat__body{ color:#C4C4C4; font-size:.95rem; margin-bottom:1.4rem; }
.plat--primary .plat__body{ color:rgba(255,255,255,.94); }
.plat__cta{ margin-top:auto; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:grid; gap:.9rem; }
.faq__item{
  background:var(--paper);
  border:var(--line) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--pop-sm);
  overflow:hidden;
}
.faq__item[open]{ box-shadow:var(--pop); }
.faq__q{
  display:flex; align-items:center; gap:1rem;
  padding:1.15rem 1.35rem;
  font-family:var(--f-display); font-size:1.18rem;
  cursor:pointer; list-style:none;
  transition:background .18s;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ background:var(--bone); }
.faq__item[open] .faq__q{ background:var(--sun); border-bottom:var(--line) solid var(--ink); }
.faq__sign{
  margin-left:auto; flex:0 0 auto;
  width:28px; height:28px; display:grid; place-items:center;
  background:var(--ink); color:var(--sun);
  border-radius:6px; font-size:1.15rem; line-height:1;
  transition:transform .25s var(--ease);
}
.faq__item[open] .faq__sign{ transform:rotate(135deg); }
.faq__a{ padding:1.25rem 1.35rem; color:#3A3A3A; font-size:.99rem; }

/* ============================================================
   CLOSER
   ============================================================ */
.closer{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--paper);
  border-top:var(--line-thick) solid var(--ox);
  padding:clamp(3.5rem,7vw,5.5rem) 0;
}
.closer__halftone{ color:var(--ox); opacity:.28; }
.closer__inner{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:clamp(1.5rem,4vw,3rem);
  flex-wrap:wrap; justify-content:center; text-align:center;
}
.closer__mascot{
  width:min(38%,240px);
  filter:drop-shadow(5px 5px 0 var(--ox));
  transform:rotate(-4deg) scaleX(-1);
}
.closer__copy{ flex:1 1 340px; text-align:left; }
.closer__title{
  font-size:clamp(2.1rem,5vw,3.6rem);
  color:var(--sun); margin-bottom:.6rem;
}
.closer__sub{ color:var(--smoke); font-size:1.08rem; margin-bottom:1.9rem; }
.closer__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--night-2); color:var(--paper);
  border-top:var(--line-thick) solid var(--sun);
  padding:3rem 0 2rem;
}
.foot__inner{
  display:flex; align-items:center; gap:1.5rem;
  flex-wrap:wrap; justify-content:space-between;
  padding-bottom:2rem; border-bottom:2px solid rgba(255,255,255,.12);
}
.foot__brand{ display:flex; align-items:center; gap:.9rem; }
.foot__brand img{ width:56px; height:56px; object-fit:contain; }
.foot__name{ font-family:var(--f-display); font-size:1.4rem; color:var(--sun); }
.foot__tag{ font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--smoke); }

.foot__social{ display:flex; gap:.7rem; flex-wrap:wrap; }
.foot__link{
  display:grid; place-items:center;
  width:46px; height:46px;
  background:transparent; color:var(--paper);
  border:2px solid var(--smoke); border-radius:var(--r-sm);
  transition:background .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.foot__link:hover{ background:var(--sun); color:var(--ink); border-color:var(--ink); transform:translateY(-3px); }
.foot__link svg{ width:22px; height:22px; }

.foot__legal{ padding-top:1.6rem; }
.foot__legal p{ font-size:.76rem; color:var(--smoke); line-height:1.6; max-width:78ch; }
.foot__copy{ margin-top:.7rem; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .nav__cta{ display:none; }
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ order:2; }
  .hero__art{ order:1; margin-bottom:1rem; }
  .hero__mascot{ width:min(78%,380px); }
  .hero__actions,.hero__proof{ justify-content:center; }
  .hero__proof{ border-top-color:rgba(255,255,255,.3); }
  .shows{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  :root{ --pop:6px 6px 0 var(--ink); --pop-sm:4px 4px 0 var(--ink); }
  .nav__tag{ display:none; }
  .hero__stamp{ display:none; }
  .closer__inner{ flex-direction:column; }
  .closer__copy{ text-align:center; }
  .closer__actions{ justify-content:center; }
  .foot__inner{ justify-content:center; text-align:center; }
}