/* Mitten City TCG — ported 1:1 from "Mitten City TGC - Site.dc.html" (Claude Design).
   (The source file in the Design project still has the old TGC spelling in its
    NAME — that is the real filename, do not "correct" it or it will not be found.)
   Every value below is lifted from the source file. The six --brand-* tokens are the
   ones exposed in Edit Mode → Theme; the rest are the design's fixed neutrals. */

:root{
  /* editable brand tokens */
  --blue:#2471BC;
  --gold:#F4C830;
  --ink:#0A0A0C;
  --paper:#FFFFFF;
  --panel:#141418;
  --hair:#E4E4E7;

  /* fixed neutrals from the design */
  --blue-line:#C7D8EA;
  --blue-wash:#F2F7FC;
  --blue-lite:#BBD3EA;
  --blue-pale:#DCE9F5;
  --blue-soft:#5A9BDC;
  --line-dark:#26262B;
  --mist:#F4F4F5;
  --mist-deep:#EDEDEF;
  --hair-lite:#F0F0F1;
  --rule:#C7CBD1;
  --grey:#71717A;
  --grey-d:#52525B;
  --grey-dk:#8A8A93;
  --grey-l:#A1A1AA;
  --steel:#4a515b;
  --pack-ink:#12161c;
  --night:#16233a;

  --f-display:'Anton',sans-serif;
  --f-body:'Space Grotesk',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',monospace;

  --wrap:1280px;
  --pad:40px;
  --stage-scale:1;
}

html,body{margin:0;padding:0;background:var(--paper);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
img{display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline}

.page{font-family:var(--f-body);color:var(--ink);background:var(--paper)}

/* ---------------------------------------------------------------- image slots */

.slot{position:relative;overflow:hidden;background:var(--mist)}
.slot > img{width:100%;height:100%;object-fit:cover}
.slot[data-fit="contain"] > img{object-fit:contain}
/* A slot whose image fails to load shows its label, not a broken-image icon.
   The <img> stays in the DOM so the model keeps the reference — fix the file
   and a refresh brings it straight back. */
.slot.is-broken > img{display:none}
.slot:not(.is-filled)::after,
.slot.is-broken::after{
  content:attr(data-ph);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:12px;text-align:center;
  font:500 10px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);
}

/* ---------------------------------------------------------------- header */

.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:88px;display:flex;align-items:center;gap:20px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{width:89px;height:64px;flex:none;background:transparent}
.brand-txt{display:flex;flex-direction:column;gap:2px}
.brand-name{font:400 19px/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand-sub{font:500 9px/1 var(--f-mono);letter-spacing:.18em;color:var(--grey);white-space:nowrap}

.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-a{font:500 13px/1 var(--f-body);color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-a:hover{color:var(--ink);text-decoration:underline}

/* No element carries .btn-rip any more — the header's RIP A PACK button was
   removed at his request. The rule is kept because it is the design's, so
   putting the button back is a markup change and nothing else. */
.btn-rip{font:500 10px/1 var(--f-mono);letter-spacing:.14em;color:var(--blue);background:transparent;border:1px solid var(--blue-line);padding:10px 14px;cursor:pointer;white-space:nowrap}
.btn-rip:hover{border-color:var(--blue);background:var(--blue-wash)}

/* The menu button exists only below 640px — above it the five links sit in the
   bar exactly as the design draws them. */
.nav-toggle{display:none}
.nav-toggle-bars{position:relative;display:block;width:16px;height:2px;background:var(--ink);transition:background .12s linear}
.nav-toggle-bars::before,
.nav-toggle-bars::after{content:'';position:absolute;left:0;width:16px;height:2px;background:var(--ink);transition:transform .16s ease,top .16s ease}
.nav-toggle-bars::before{top:-5px}
.nav-toggle-bars::after{top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}

/* ---------------------------------------------------------------- hero */

.hero{background:var(--paper)}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:70px var(--pad) 76px;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.hero-col{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:24px}

.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow-dash{width:26px;height:3px;background:var(--gold);flex:none}
.eyebrow-txt{font:500 11px/1.4 var(--f-mono);letter-spacing:.16em;color:var(--blue)}

.hero-h1{
  margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(46px,5.2vw,76px);line-height:.93;letter-spacing:.005em;
  text-transform:uppercase;text-wrap:balance;color:var(--ink);
}
.hero-lede{margin:0;max-width:500px;font:400 17px/1.6 var(--f-body);color:var(--grey-d);text-wrap:pretty}

.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;padding-top:6px}
.cta{font:600 14px/1 var(--f-body);text-decoration:none;white-space:nowrap}
.cta:hover{text-decoration:none}
.cta-solid{background:var(--blue);color:#fff;padding:17px 26px}
.cta-solid:hover{background:var(--ink);color:#fff}
.cta-ghost{background:transparent;color:var(--ink);padding:16px 25px;border:1px solid var(--rule)}
.cta-ghost:hover{border-color:var(--ink);color:var(--ink)}

.stats{display:flex;gap:34px;padding-top:12px;flex-wrap:wrap}
.stat-v{font:400 30px/1 var(--f-display);color:var(--ink)}
.stat-l{font:500 10px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--grey)}

.hero-mark{flex:0 1 540px;width:100%;max-width:540px;align-self:center;background:transparent;overflow:visible}
.hero-mark > img{width:100%;height:auto;object-fit:contain}
.hero-mark:not(.is-filled){min-height:220px;background:var(--mist)}

/* the blue strap under the hero */
.ribbon{background:var(--blue)}
.ribbon-in{max-width:var(--wrap);margin:0 auto;padding:18px var(--pad);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ribbon-dash{width:26px;height:3px;background:var(--gold);flex:none}
.ribbon-title{font:400 21px/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:#fff;white-space:nowrap}
.ribbon-note{margin-left:auto;font:500 10px/1.4 var(--f-mono);letter-spacing:.16em;color:var(--blue-lite);white-space:nowrap}

/* ---------------------------------------------------------------- section frame */

.sec-light{background:var(--paper)}
.sec-mist{background:var(--mist);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sec-dark{background:var(--ink);color:#fff}

.sec-head{max-width:var(--wrap);margin:0 auto;padding:76px var(--pad) 20px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sec-num{font:400 13px/1 var(--f-mono);color:var(--blue)}
.sec-num-gold{color:var(--gold)}
.sec-h2{margin:0;font:400 38px/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.sec-dark .sec-h2{color:#fff}
.sec-note{font:400 14px/1.4 var(--f-body);color:var(--grey);margin-left:auto}
.sec-note-dark{color:var(--grey-dk)}

/* ---------------------------------------------------------------- 01 shows */

.shows-grid{max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 84px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.show{border:1px solid var(--hair);background:#fff;display:flex;flex-direction:column}
.show:hover{border-color:var(--blue)}
.show-photo{aspect-ratio:16/10;background:var(--mist)}
.show-body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.show-date{align-self:flex-start;font:600 11px/1 var(--f-mono);letter-spacing:.1em;background:var(--gold);color:var(--ink);padding:7px 10px}
.show-title{margin:0;font:400 25px/1.08 var(--f-display);text-transform:uppercase}
.show-where{margin:0;font:400 14px/1.5 var(--f-body);color:var(--grey-d)}
.show-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-lite);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.show-table{font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--blue)}
.show-hours{font:400 12px/1 var(--f-body);color:var(--grey)}

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

.cards-grid{max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 84px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.card{background:#fff;border:1px solid var(--hair);display:flex;flex-direction:column}
.card:hover{border-color:var(--blue)}
.card-photo{aspect-ratio:5/7;background:var(--mist-deep)}
.card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-tag{align-self:flex-start;font:500 10px/1 var(--f-mono);letter-spacing:.12em;color:var(--blue);border:1px solid var(--blue-line);padding:6px 9px}
.card-title{margin:0;font:400 24px/1.06 var(--f-display);text-transform:uppercase}
.card-sub{margin:0;font:400 13px/1.5 var(--f-body);color:var(--grey-d)}
.card-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-lite);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-grade{font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--grey)}
.card-price{font:400 24px/1 var(--f-display);color:var(--ink)}

/* ---------------------------------------------------------------- 03 buy & sell */

.trade-grid{max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 84px;display:grid;grid-template-columns:1fr 1fr;gap:24px}

.panel{padding:40px;display:flex;flex-direction:column;gap:22px}
.panel-buy{background:var(--blue)}
.panel-sell{background:var(--panel);border:1px solid var(--line-dark)}
.panel-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.panel-h3{margin:0;font:400 30px/1 var(--f-display);text-transform:uppercase;color:#fff}
.panel-tag{font:500 10px/1 var(--f-mono);letter-spacing:.14em;color:var(--blue-lite)}
.panel-tag-gold{color:var(--gold)}

.rows{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.row{font:400 15px/1 var(--f-body);padding:15px 0;display:flex;justify-content:space-between;gap:16px}
.row-tag{font:500 11px/1.3 var(--f-mono)}

.panel-buy .row{color:#fff;border-top:1px solid rgba(255,255,255,.22)}
.panel-buy .row:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.panel-buy .row-tag{color:var(--blue-lite)}
.panel-buy .panel-note{color:var(--blue-pale)}

.panel-sell .row{color:var(--hair);border-top:1px solid var(--line-dark)}
.panel-sell .row:last-child{border-bottom:1px solid var(--line-dark)}
.panel-sell .row-tag{color:var(--grey)}
.panel-sell .row.is-accent .row-tag{color:var(--gold)}
.panel-sell .panel-note{color:var(--grey-l)}

.panel-note{margin:0;font:400 14px/1.55 var(--f-body);text-wrap:pretty}

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

.gal-grid{max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 84px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;gap:16px}
.gal{background:var(--mist)}
.gal.is-big{grid-column:span 2;grid-row:span 2}
.gal.is-wide{grid-column:span 2}

/* ---------------------------------------------------------------- 05 instagram

   The card frame is ours — border, hover, footer link, all the design's own.
   The rectangle inside it is Instagram's, drawn by Instagram, and we do not get
   to style across that boundary. What we do control is its height: --ig-h is
   set from the height the embed reports for itself (see wireEmbedHeights in
   main.js), and the value below is only what stands until it answers. */

.ig-grid{max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 84px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}

.ig{border:1px solid var(--hair);background:#fff;display:flex;flex-direction:column}
.ig:hover{border-color:var(--blue)}

.ig-frame{position:relative;height:var(--ig-h,700px);background:var(--mist)}
.ig-frame > iframe{display:block;width:100%;height:100%;border:0}

/* Same placeholder as an empty photo slot, for the same reason. */
.ig-frame:not(.is-filled){height:260px}
.ig-frame:not(.is-filled)::after{
  content:attr(data-ph);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:12px;text-align:center;
  font:500 10px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);
}

.ig-link{
  display:flex;align-items:center;gap:12px;min-height:44px;
  padding:15px 18px;border-top:1px solid var(--hair-lite);
  font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;
}
.ig-link:hover{color:var(--ink);background:var(--blue-wash);text-decoration:none}

/* A card with no post behind it is not a card. It exists only in Edit Mode,
   where it is the thing you paste a link into.
   An author rule, not [hidden] — see the toolbar-was-public note in the build
   handoff. Nothing about this depends on an attribute a script has to remember
   to set on the way out. */
.ig:not(.has-post){display:none}
body.is-editing .ig{display:flex}

/* The iframe swallows every click that lands on it, including the rails that
   move and delete the card, and the sign-on click that armed them. While
   editing, the post is a picture. */
body.is-editing .ig-frame{pointer-events:none}

/* ---------------------------------------------------------------- 06 contact */

.foot-grid{max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 64px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.foot-col{display:flex;flex-direction:column;gap:14px}
.foot-label{font:500 10px/1 var(--f-mono);letter-spacing:.16em;color:var(--grey)}
.foot-addr{margin:0;font:400 16px/1.6 var(--f-body);color:var(--hair)}
.foot-note{margin:0;font:400 14px/1.55 var(--f-body);color:var(--grey-dk);text-wrap:pretty}
.hours + .foot-note{font-size:13px}

.foot-link{font:400 16px/1.4 var(--f-body);color:#fff;text-decoration:none;align-self:flex-start}
.foot-link:hover{color:var(--gold);text-decoration:none}

.socials{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}
.social{font:500 10px/1 var(--f-mono);letter-spacing:.12em;color:var(--hair);border:1px solid var(--line-dark);padding:10px 13px;text-decoration:none}
.social:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}

.hours{display:flex;flex-direction:column}
.hrow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line-dark);font:400 14px/1 var(--f-body)}
.hrow:last-child{border-bottom:1px solid var(--line-dark)}
.hday{color:var(--hair)}
.htime{font:500 12px/1 var(--f-mono);color:#fff}
.hrow.is-dim .hday,.hrow.is-dim .htime{color:var(--grey-dk)}

/* Carries its own dark ground: it lives outside the removable sections, so it
   can end up sitting directly under a white one. */
.foot-bar{background:var(--ink);color:#fff;border-top:1px solid var(--line-dark)}
.foot-bar-in{max-width:var(--wrap);margin:0 auto;padding:26px var(--pad);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-mark{width:89px;height:64px;flex:none;background:transparent}
.foot-copy{font:400 12px/1.4 var(--f-body);color:var(--grey)}
.btn-replay{margin-left:auto;font:500 10px/1 var(--f-mono);letter-spacing:.14em;color:var(--hair);background:transparent;border:1px solid var(--line-dark);padding:11px 15px;cursor:pointer}
.btn-replay:hover{border-color:var(--gold);color:var(--gold)}
/* The sign-on door. Sits under the footer rule, quiet enough that a visitor's
   eye slides past it and findable the moment you go looking. */
.foot-admin-row{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 22px}
.foot-admin{
  font:400 11px/1 var(--f-body);color:var(--grey-dk);
  background:transparent;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-dark);
}
.foot-admin:hover{color:var(--hair);text-decoration-color:var(--hair)}
body.is-editing .foot-admin-row{display:none}

/* ================================================================ pack intro */

@keyframes mcPackIn{0%{opacity:0;transform:translateY(80px) scale(.82) rotateX(22deg)}55%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1) rotateX(0)}}
@keyframes mcShimmer{0%{transform:translateX(-80%) skewX(-18deg)}100%{transform:translateX(200%) skewX(-18deg)}}
@keyframes mcShake{0%{transform:rotate(0) translateY(0)}18%{transform:rotate(-1.8deg) translateY(-2px)}38%{transform:rotate(1.5deg)}58%{transform:rotate(-.9deg)}78%{transform:rotate(.5deg)}100%{transform:rotate(0) translateY(0)}}
@keyframes mcTear{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}20%{transform:translate(3px,-10px) rotate(-3.5deg);opacity:1}100%{transform:translate(196px,-402px) rotate(58deg) scale(.84);opacity:0}}
@keyframes mcOpen{from{clip-path:polygon(0% 0px, 3.3% 0px, 6.7% 0px, 10% 0px, 13.3% 0px, 16.7% 0px, 20% 0px, 23.3% 0px, 26.7% 0px, 30% 0px, 33.3% 0px, 36.7% 0px, 40% 0px, 43.3% 0px, 46.7% 0px, 50% 0px, 53.3% 0px, 56.7% 0px, 60% 0px, 63.3% 0px, 66.7% 0px, 70% 0px, 73.3% 0px, 76.7% 0px, 80% 0px, 83.3% 0px, 86.7% 0px, 90% 0px, 93.3% 0px, 96.7% 0px, 100% 0px, 100% 100%, 0% 100%)}to{clip-path:polygon(0% 23.3px, 3.3% 26.8px, 6.7% 29.9px, 10% 26.9px, 13.3% 23.1px, 16.7% 26.8px, 20% 29.3px, 23.3% 22.4px, 26.7% 27.3px, 30% 32.3px, 33.3% 23.2px, 36.7% 28.3px, 40% 25.1px, 43.3% 26px, 46.7% 20.4px, 50% 24.4px, 53.3% 21.1px, 56.7% 18.3px, 60% 22.7px, 63.3% 26.9px, 66.7% 25.3px, 70% 26.9px, 73.3% 23.8px, 76.7% 26.4px, 80% 29px, 83.3% 31px, 86.7% 28.2px, 90% 25.3px, 93.3% 25.7px, 96.7% 27.1px, 100% 28.2px, 100% 100%, 0% 100%)}}
@keyframes mcGlint{from{clip-path:polygon(0% 0px, 3.3% 0px, 6.7% 0px, 10% 0px, 13.3% 0px, 16.7% 0px, 20% 0px, 23.3% 0px, 26.7% 0px, 30% 0px, 33.3% 0px, 36.7% 0px, 40% 0px, 43.3% 0px, 46.7% 0px, 50% 0px, 53.3% 0px, 56.7% 0px, 60% 0px, 63.3% 0px, 66.7% 0px, 70% 0px, 73.3% 0px, 76.7% 0px, 80% 0px, 83.3% 0px, 86.7% 0px, 90% 0px, 93.3% 0px, 96.7% 0px, 100% 0px, 100% 100%, 0% 100%)}to{clip-path:polygon(0% 20.8px, 3.3% 24.3px, 6.7% 27.4px, 10% 24.4px, 13.3% 20.6px, 16.7% 24.3px, 20% 26.8px, 23.3% 19.9px, 26.7% 24.8px, 30% 29.8px, 33.3% 20.7px, 36.7% 25.8px, 40% 22.6px, 43.3% 23.5px, 46.7% 17.9px, 50% 21.9px, 53.3% 18.6px, 56.7% 15.8px, 60% 20.2px, 63.3% 24.4px, 66.7% 22.8px, 70% 24.4px, 73.3% 21.3px, 76.7% 23.9px, 80% 26.5px, 83.3% 28.5px, 86.7% 25.7px, 90% 22.8px, 93.3% 23.2px, 96.7% 24.6px, 100% 25.7px, 100% 100%, 0% 100%)}}
@keyframes mcMouth{0%{opacity:0}100%{opacity:1}}
@keyframes mcCard1{0%{opacity:0;transform:translate(0,24px) rotate(0) scale(.84)}22%{opacity:1}100%{opacity:1;transform:translate(-152px,-236px) rotate(-13deg) scale(1)}}
@keyframes mcCard2{0%{opacity:0;transform:translate(0,24px) rotate(0) scale(.84)}22%{opacity:1}100%{opacity:1;transform:translate(0,-274px) rotate(0deg) scale(1)}}
@keyframes mcCard3{0%{opacity:0;transform:translate(0,24px) rotate(0) scale(.84)}22%{opacity:1}100%{opacity:1;transform:translate(152px,-236px) rotate(13deg) scale(1)}}
@keyframes mcOut{0%{opacity:1}100%{opacity:0}}
@keyframes mcFadeUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}

.intro{position:fixed;inset:0;z-index:120;background:var(--ink);overflow:hidden;animation:mcOut .62s ease-in 4.40s forwards}
.intro-bg{position:absolute;inset:0;background:radial-gradient(ellipse 62% 48% at 50% 46%,var(--night) 0%,var(--ink) 72%)}

.intro-skip{position:absolute;top:26px;right:28px;z-index:6;font:500 10px/1 var(--f-mono);letter-spacing:.16em;color:var(--grey-dk);background:transparent;border:1px solid var(--line-dark);padding:11px 15px;cursor:pointer}
.intro-skip:hover{color:var(--gold);border-color:var(--gold)}
/* There is no hover on a phone, so pressing it has to say something. */
.intro-skip:active{color:var(--gold);border-color:var(--gold);background:rgba(244,200,48,.1)}

/* There was a phones-only "tap to rip" gate here that paused the whole sequence
   until the pack was tapped. Removed — iOS Safari does not reliably fire click
   on a plain div, so on a phone the pack simply sat there unopened. The intro
   runs on its own at every width, exactly as the design wrote it. */

.intro-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:1400px}
.intro-stage{display:flex;flex-direction:column;align-items:center;gap:26px;transform:scale(var(--stage-scale));transform-origin:50% 50%}

.intro-area{position:relative;width:620px;height:668px}
.intro-holder{position:absolute;left:160px;top:238px;width:300px;height:430px;transform-style:preserve-3d;perspective:1300px}

.pcards{position:absolute;inset:0}
.pcard{position:absolute;left:calc(50% - 74px);top:36px;width:148px;height:208px;z-index:1;transform-origin:50% 100%;opacity:0}
.pcard:nth-child(1){animation:mcCard1 1s cubic-bezier(.16,.84,.3,1) 2.49s forwards}
.pcard:nth-child(2){animation:mcCard2 1s cubic-bezier(.16,.84,.3,1) 2.63s forwards}
.pcard:nth-child(3){animation:mcCard3 1s cubic-bezier(.16,.84,.3,1) 2.77s forwards}

.pcard-in{width:100%;height:100%;background:var(--panel);border:1px solid var(--blue);box-shadow:0 18px 40px rgba(0,0,0,.6);padding:13px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.pcard-bar{height:3px;background:var(--gold);width:34px;flex:none}
.pcard-date{font:500 9px/1 var(--f-mono);letter-spacing:.14em;color:var(--grey-dk)}
.pcard-title{font:400 19px/1.02 var(--f-display);text-transform:uppercase;color:#fff}
.pcard-meta{margin-top:auto;font:400 10px/1.35 var(--f-body);color:var(--grey-l)}

.pcard.is-hit .pcard-in{background:var(--blue);border:1px solid var(--blue-soft)}
.pcard.is-hit .pcard-date{color:var(--blue-lite)}
.pcard.is-hit .pcard-meta{color:var(--blue-pale)}

.pack{position:absolute;inset:0;z-index:2;animation:mcPackIn .95s cubic-bezier(.2,.8,.25,1) both}
.pack-shake{width:100%;height:100%;perspective:1200px;animation:mcShake .85s ease-in-out 1.6s both}
.pack-3d{position:absolute;left:10px;right:10px;top:0;bottom:0;transform:rotateY(-9deg) rotateX(1.5deg)}

.pack-ground{position:absolute;left:5%;right:5%;bottom:-24px;height:32px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 72%)}

.pack-glint{position:absolute;inset:0;animation:mcGlint .42s ease-out 1.9s both}
.pack-glint-fill{position:absolute;inset:0;border-radius:8px;background:linear-gradient(180deg,#ffffff 0%,#e9edf3 100%)}

.pack-open{position:absolute;inset:0;animation:mcOpen .46s ease-out 1.88s both}
.pack-body{position:absolute;inset:0;border-radius:8px;overflow:hidden;box-shadow:0 34px 72px rgba(0,0,0,.66)}

.pack-foil{position:absolute;inset:0;background:linear-gradient(96deg,#dde2e9 0%,#ffffff 11%,#f3f6f9 24%,#e3e8ee 38%,#ffffff 51%,#edf0f4 64%,#ffffff 77%,#e6eaf0 90%,#d7dce4 100%)}
.pack-sheen{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.17) 0%,rgba(0,0,0,0) 14%,rgba(255,255,255,.62) 38%,rgba(255,255,255,0) 62%,rgba(0,0,0,.15) 100%)}
.pack-rib{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,rgba(0,0,0,.032) 1px 4px)}
.pack-tint{position:absolute;inset:0;background:var(--foil-tint,transparent);mix-blend-mode:color;opacity:var(--foil-tint-opacity,0)}

.pack-window{position:absolute;left:14px;right:14px;top:58px;bottom:110px;display:grid;place-items:center;background:transparent;overflow:visible}
.pack-window > img{width:236px;height:169px;max-width:100%;object-fit:contain;mix-blend-mode:multiply}

.pack-eyebrow{position:absolute;left:0;right:0;top:36px;display:flex;justify-content:center}
.pack-eyebrow span{font:500 8px/1 var(--f-mono);letter-spacing:.34em;color:var(--steel)}

.pack-title{position:absolute;left:16px;right:16px;bottom:56px;display:flex;flex-direction:column;align-items:center;gap:7px}
.pack-title-t{font:400 27px/1 var(--f-display);text-transform:uppercase;color:var(--pack-ink);letter-spacing:.03em}
.pack-rule{height:3px;width:58px;background:var(--gold)}
.pack-foot{position:absolute;left:16px;right:16px;bottom:30px;display:flex;justify-content:space-between}
.pack-foot span{font:500 8px/1 var(--f-mono);letter-spacing:.16em;color:var(--steel)}

/* the crimped, ribbed strips at the top and bottom of the pack */
.pack-crimp{position:absolute;left:0;right:0;height:26px;overflow:hidden}
.pack-crimp.is-top{top:0}
.pack-crimp.is-bottom{bottom:0;clip-path:polygon(0% 0%, 100% 0%, 100% 84%, 98.2% 100%, 96.4% 84%, 94.6% 100%, 92.9% 84%, 91.1% 100%, 89.3% 84%, 87.5% 100%, 85.7% 84%, 83.9% 100%, 82.1% 84%, 80.4% 100%, 78.6% 84%, 76.8% 100%, 75% 84%, 73.2% 100%, 71.4% 84%, 69.6% 100%, 67.9% 84%, 66.1% 100%, 64.3% 84%, 62.5% 100%, 60.7% 84%, 58.9% 100%, 57.1% 84%, 55.4% 100%, 53.6% 84%, 51.8% 100%, 50% 84%, 48.2% 100%, 46.4% 84%, 44.6% 100%, 42.9% 84%, 41.1% 100%, 39.3% 84%, 37.5% 100%, 35.7% 84%, 33.9% 100%, 32.1% 84%, 30.4% 100%, 28.6% 84%, 26.8% 100%, 25% 84%, 23.2% 100%, 21.4% 84%, 19.6% 100%, 17.9% 84%, 16.1% 100%, 14.3% 84%, 12.5% 100%, 10.7% 84%, 8.9% 100%, 7.1% 84%, 5.4% 100%, 3.6% 84%, 1.8% 100%, 0% 84%)}
.crimp-fill{position:absolute;inset:0;background:linear-gradient(180deg,#e7ebf1 0%,#ffffff 40%,#eef1f5 74%,#d8dee6 100%)}
.crimp-rib{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 1px,rgba(0,0,0,.085) 1px 3px)}
.crimp-line{position:absolute;left:0;right:0;height:2px;background:rgba(0,0,0,.13)}
.pack-crimp.is-top .crimp-line{bottom:0}
.pack-crimp.is-bottom .crimp-line{top:0}

.pack-shim{position:absolute;inset:0;overflow:hidden}
.pack-shim-bar{position:absolute;top:-15%;left:0;width:30%;height:130%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);animation:mcShimmer 2.3s linear .5s infinite}
.pack-inner{position:absolute;inset:0;box-shadow:inset 0 0 26px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.85)}
.pack-mouth{position:absolute;left:0;right:0;top:0;height:56px;background:linear-gradient(180deg,#04060a 0%,rgba(4,6,10,.82) 48%,rgba(4,6,10,0) 100%);opacity:0;animation:mcMouth .4s ease-out 1.94s forwards}

/* the torn-off strip that flies away */
.pack-tear{position:absolute;left:0;right:0;top:0;height:44px;overflow:hidden;z-index:3;transform-origin:100% 100%;clip-path:polygon(0% 0%, 100% 0%, 100% 28.2px, 96.7% 27.1px, 93.3% 25.7px, 90% 25.3px, 86.7% 28.2px, 83.3% 31px, 80% 29px, 76.7% 26.4px, 73.3% 23.8px, 70% 26.9px, 66.7% 25.3px, 63.3% 26.9px, 60% 22.7px, 56.7% 18.3px, 53.3% 21.1px, 50% 24.4px, 46.7% 20.4px, 43.3% 26px, 40% 25.1px, 36.7% 28.3px, 33.3% 23.2px, 30% 32.3px, 26.7% 27.3px, 23.3% 22.4px, 20% 29.3px, 16.7% 26.8px, 13.3% 23.1px, 10% 26.9px, 6.7% 29.9px, 3.3% 26.8px, 0% 23.3px);animation:mcTear .92s cubic-bezier(.4,.1,.6,1) 1.84s forwards}

.intro-cap{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:mcFadeUp .7s ease-out 3.3s forwards}
.intro-word{font:400 24px/1 var(--f-display);text-transform:uppercase;color:#fff;letter-spacing:.03em}
.intro-tag{font:500 9px/1 var(--f-mono);letter-spacing:.24em;color:var(--grey)}

/* The intro is decoration. Anyone who asked their OS for less motion gets the
   site straight away rather than a 5-second animation they can't stop. */
@media (prefers-reduced-motion: reduce){
  .intro{display:none}
}

/* ================================================================ responsive

   Above 1280px nothing here applies — the desktop layout is the design, untouched.
   Below it the fixed grids step down. The hero already reflows on its own: it is
   a wrapping flexbox in the design, and the headline is a clamp(). */

@media (max-width:1180px){
  :root{--pad:32px}
  .shows-grid,.cards-grid,.ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  :root{--pad:24px}
  .hdr-in{height:auto;padding:14px var(--pad);flex-wrap:wrap;gap:14px}
  .nav{margin-left:auto;gap:16px;flex-wrap:wrap}
  .nav-links{gap:16px}

  .hero-in{gap:32px;padding:52px var(--pad) 60px}
  .hero-mark{order:-1;flex:1 1 100%;max-width:420px}

  .ribbon-in{padding:16px var(--pad);gap:12px}
  .ribbon-title{white-space:normal;font-size:19px}
  .ribbon-note{margin-left:0;white-space:normal;flex-basis:100%}

  .sec-head{padding:56px var(--pad) 16px}
  .sec-h2{font-size:32px}
  .sec-note{margin-left:0;flex-basis:100%}

  .shows-grid,.cards-grid,.ig-grid{padding:18px var(--pad) 60px;gap:18px}
  .trade-grid{grid-template-columns:1fr;padding:18px var(--pad) 60px}
  .panel{padding:28px}
  .panel-h3{font-size:26px}

  .gal-grid{padding:18px var(--pad) 60px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}

  .foot-grid{grid-template-columns:1fr;gap:34px;padding:18px var(--pad) 48px}
  .foot-bar-in{padding:22px var(--pad)}
}

@media (max-width:640px){
  :root{--pad:20px}
  .brand-mark{width:67px;height:48px}
  .brand-name{font-size:17px}

  /* The header stops being a wall.
     Five wrapping links plus the brand plus RIP A PACK ran to about 140px of
     permanently-stuck header on a 360px screen — a sixth of the phone, on every
     scroll. Now it is one row: brand, RIP A PACK, menu. The links drop into a
     sheet underneath only when the menu is pressed.
     `order` puts them there: the sheet is last on the line even though it comes
     first in the markup, which keeps the tab order sane. */
  .hdr-in{
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
  }
  .nav{gap:10px;width:100%;align-items:center}

  .nav-links{
    display:none;order:3;flex-basis:100%;
    flex-direction:column;align-items:stretch;gap:0;
    margin-top:10px;border-top:1px solid var(--hair);
  }
  .nav[data-nav-open] .nav-links{display:flex}
  /* Edit Mode always shows them — otherwise the nav labels are the one piece of
     the page you could not retype on a phone. The button goes with them. */
  body.is-editing .nav-links{display:flex}
  body.is-editing .nav-toggle{display:none}

  .nav-a{
    display:flex;align-items:center;min-height:48px;
    font-size:15px;border-bottom:1px solid var(--hair-lite);
  }
  .nav-a:last-child{border-bottom:0}

  .nav-toggle{
    order:2;margin-left:auto;
    display:inline-flex;align-items:center;gap:9px;
    min-height:44px;padding:12px 14px;
    background:transparent;border:1px solid var(--rule);cursor:pointer;
    font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  }
  .nav-toggle:active{border-color:var(--blue);color:var(--blue)}

  .hero-ctas{gap:10px}
  .cta{flex:1 1 100%;text-align:center}
  .stats{gap:20px}
  .stat-v{font-size:26px}

  .ribbon-title{font-size:17px}

  .sec-h2{font-size:28px}
  .shows-grid,.cards-grid,.ig-grid{grid-template-columns:1fr}
  .show-title{font-size:22px}

  .gal-grid{grid-auto-rows:130px;gap:12px}
  .gal.is-big{grid-column:span 2;grid-row:span 2}
  .gal.is-wide{grid-column:span 2}

  /* SKIP was a 24px-tall target tucked in the corner with only a :hover state.
     It clears the notch now, and it is big enough to hit. */
  .intro-skip{
    top:max(20px, env(safe-area-inset-top));right:16px;
    min-height:44px;display:inline-flex;align-items:center;padding:11px 18px;
  }

  /* Everything you are meant to press gets a thumb-sized box. 44px is Apple's
     floor and these were all well under it — the nav links were 16px. */
  .foot-link,.social,.btn-replay,.foot-admin{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .btn-replay{margin-left:0}
  .foot-bar-in{
    gap:14px;
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
    padding-bottom:max(26px, env(safe-area-inset-bottom));
  }
}