/* =========================================================
   ANIME CINEMA CLUB — shared stylesheet
   Zine / risograph look: cream paper, hard ink borders,
   offset shadows, Anton display + IBM Plex Mono body.
   ========================================================= */

:root{
  --paper:#efeadf;
  --ink:#121212;
  --blue:#2b5cff;
  --white:#ffffff;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --rule:4px solid var(--ink);
  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(18px,4vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:15px;line-height:1.55;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
a:hover{opacity:.78}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px
}
::selection{background:var(--blue);color:var(--paper)}
button{font:inherit;color:inherit;cursor:pointer}

.wrap{max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}
.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{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);padding:10px 16px;font-family:var(--display);text-transform:uppercase}
.skip:focus{left:8px;top:8px}

/* ---------- shell: fixed-width page slab on a dark backdrop ---------- */
.page{
  max-width:1200px;margin:0 auto;background:var(--paper);
  position:relative;overflow:hidden;
}
@media (min-width:1240px){
  body{background:#121212}
  .page{border-left:4px solid var(--ink);border-right:4px solid var(--ink)}
}

/* ---------- type helpers ---------- */
.display{font-family:var(--display);text-transform:uppercase;line-height:.9;letter-spacing:-.01em;font-weight:400}
.h-xl{font-size:clamp(46px,9.4vw,96px)}
.h-lg{font-size:clamp(40px,7.4vw,72px)}
.h-md{font-size:clamp(28px,4.4vw,44px)}
.h-sm{font-size:clamp(20px,2.6vw,26px)}
.kicker{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  display:inline-block;background:var(--ink);color:var(--paper);padding:4px 9px;font-weight:500
}
.kicker.inv{background:var(--paper);color:var(--ink)}
.lede{font-size:clamp(15px,1.6vw,18px);line-height:1.5;font-weight:500}
.small{font-size:12px;line-height:1.6}
.up{text-transform:uppercase}
.mark{background:var(--blue);color:var(--paper);padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* In display headings the line-height is 0.9 but Anton's content box is ~1.5em tall,
   so an inline highlight bleeds over the line above and below. Making it inline-block
   clips the painted box to the line box, which hugs the caps instead. */
.display .mark{display:inline-block;vertical-align:baseline}
.mono-list li{position:relative;padding-left:16px}
.mono-list li::before{content:"›";position:absolute;left:0;color:var(--blue);font-weight:700}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);text-transform:uppercase;text-decoration:none;
  font-size:clamp(16px,2vw,20px);padding:11px 22px;border:3px solid var(--ink);
  background:var(--ink);color:var(--paper);box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .12s ease;line-height:1.1;text-align:center;
}
.btn:hover{opacity:1;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-blue{background:var(--blue);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-lg{font-size:clamp(19px,2.6vw,28px);padding:14px 34px}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn.is-soon{cursor:pointer}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:var(--rule);
}
.nav-in{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{
  text-decoration:none;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(17px,2.4vw,25px);letter-spacing:.02em;
  display:flex;align-items:center;gap:9px;white-space:nowrap;flex-shrink:0
}
.brand .ji{background:var(--ink);color:var(--paper);padding:0 7px;transform:rotate(-4deg);display:inline-block;font-size:.86em}
.nav-links{display:flex;gap:11px;margin-left:auto;font-size:12px;text-transform:uppercase;font-weight:500;white-space:nowrap}
.nav-links a{text-decoration:none;padding:3px 0;border-bottom:2px solid transparent}
.nav-links a[aria-current="page"]{border-bottom-color:var(--blue);opacity:1}
.nav-social{display:flex;gap:8px;flex-shrink:0}
.soc{
  width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;
  border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  text-decoration:none;transition:background .12s ease,color .12s ease
}
.soc:hover{opacity:1;background:var(--ink);color:var(--paper)}
.soc svg{width:17px;height:17px;display:block}
.nav-cta{flex-shrink:0}
.nav-cta .btn{transform:rotate(-1.5deg);font-size:16px;padding:8px 16px}
.nav-cta .btn:hover{transform:rotate(-1.5deg) translate(-2px,-2px)}
.nav-toggle{display:none;margin-left:auto;background:var(--ink);color:var(--paper);border:3px solid var(--ink);font-family:var(--display);text-transform:uppercase;font-size:15px;padding:7px 13px}
/* Eight nav links plus the brand, socials and the ticket CTA need ~1110px, and
   .wrap never gives up more than ~1136px however wide the window gets, so the
   full row only survives at the very top of the range. Below that the menu
   button takes over rather than letting the links collapse into the CTA. */
@media (max-width:1219px){
  .nav-in{flex-wrap:wrap;gap:10px}
  .nav-links,.nav-cta{display:none}
  .brand{order:1}
  .nav-social{order:2;margin-left:auto}
  .nav-toggle{display:block;order:3;margin-left:0}
  .nav.open .nav-links{
    display:flex;flex-direction:column;width:100%;order:4;margin-left:0;gap:0;
    padding:8px 0 4px;font-size:16px
  }
  .nav.open .nav-links a{padding:12px 0;border-bottom:2px solid rgba(18,18,18,.12)}
  .nav.open .nav-cta{display:block;width:100%;order:5;padding:10px 0 14px}
  .nav.open .nav-cta .btn{width:100%;transform:none}
  .nav.open .nav-cta .btn:hover{transform:translate(-2px,-2px)}
}

/* ---------- marquee strip ---------- */
.strip{
  background:var(--ink);color:var(--paper);padding:9px 0;overflow:hidden;
  font-family:var(--display);font-size:clamp(15px,2.2vw,22px);text-transform:uppercase;letter-spacing:.04em
}
.strip-track{display:flex;gap:30px;white-space:nowrap;width:max-content;animation:slide 34s linear infinite}
.strip-track span{flex-shrink:0}
.strip .star{color:var(--blue)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}}

/* ---------- sections ---------- */
.sec{padding:clamp(38px,6vw,60px) 0;border-bottom:var(--rule)}
.sec-dark{background:var(--ink);color:var(--paper)}
.sec-blue{background:var(--blue);color:var(--paper)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:22px}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(18,18,18,.035) 3px 4px)}

.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,40px)}
.grid-2-even{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,40px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,24px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,20px)}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .grid-2,.grid-2-even,.grid-3{grid-template-columns:1fr}
}
@media (max-width:520px){.grid-4{grid-template-columns:1fr}}

/* ---------- hero (article header + full-width poster) ---------- */
.hero{position:relative;padding:clamp(24px,3.5vw,40px) 0 clamp(32px,4.5vw,48px);overflow:hidden}
.hero-col{max-width:880px;margin-left:auto;margin-right:auto;position:relative;z-index:2}
.hero-meta{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  display:flex;flex-wrap:wrap;gap:10px
}
.hero-h1{
  font-family:var(--mono);font-weight:700;text-transform:none;
  font-size:clamp(25px,3.2vw,40px);line-height:1.18;letter-spacing:-.015em;
  margin-top:16px;text-wrap:balance
}
.hero-h1 em{font-style:italic;font-weight:700}
.hero-deck{
  font-size:clamp(15px,1.5vw,17.5px);line-height:1.52;margin-top:16px;max-width:64ch;
  border-left:3px solid var(--ink);padding-left:14px
}
.hero-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.hero-line{
  display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:20px;
  font-size:12px;text-transform:uppercase;line-height:1.5
}
.hero-line span{position:relative;padding-left:14px}
.hero-line span::before{content:"\203A";position:absolute;left:0;color:var(--blue);font-weight:700}
.presskit-home{
  margin-top:22px;
  border:3px solid var(--ink);
  background:var(--white);
  padding:16px 18px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
  box-shadow:var(--shadow-sm);
  transform:rotate(-0.4deg);
}
.presskit-home-copy{flex:1 1 240px;min-width:0}
.presskit-home-title{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(22px,3.2vw,32px);
  line-height:.95;
  margin-top:8px;
}
.presskit-home-note{
  font-size:12.5px;
  line-height:1.5;
  margin-top:8px;
  max-width:48ch;
}
.presskit-home .btn{flex-shrink:0}
@media (max-width:520px){
  .presskit-home{transform:none}
  .presskit-home .btn{width:100%}
}

.hero-poster{
  position:relative;margin:clamp(24px,3.5vw,34px) 0 0;
  border:3px solid var(--ink);background:var(--ink)
}
.hero-poster img{width:100%;height:auto;display:block;filter:saturate(1.05) contrast(1.03)}
.tape{position:absolute;background:rgba(255,255,255,.5);border:1px dashed rgba(18,18,18,.3);width:120px;height:32px;z-index:4}
.stamp{
  position:absolute;right:-16px;top:-16px;width:clamp(88px,11vw,150px);aspect-ratio:1;border-radius:50%;
  background:var(--blue);color:var(--paper);border:3px solid var(--ink);
  display:grid;place-items:center;text-align:center;transform:rotate(-14deg);z-index:5;
  font-family:var(--display);text-transform:uppercase;line-height:.95;
  font-size:clamp(17px,2.2vw,26px);padding:10px
}
.stamp small{font-family:var(--mono);font-size:.55em;display:block;margin-top:4px}
.poster-credit{margin-top:18px;font-size:11px;text-transform:uppercase;opacity:.7;line-height:1.5}
@media (max-width:520px){
  .stamp{right:-10px;top:-10px}
  .tape{width:84px;height:24px;left:20%!important}
}

/* ---------- cards / figures ---------- */
.card{border:3px solid var(--ink);padding:clamp(16px,2.4vw,20px);background:var(--paper);color:var(--ink)}
.card-dark{border-color:var(--paper);color:var(--ink)}
.card-blue{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.card .num{font-family:var(--display);font-size:clamp(38px,5vw,56px);line-height:1;color:var(--blue)}
.card-blue .num{color:var(--paper)}
.card h3{font-family:var(--display);font-size:clamp(18px,2.2vw,24px);text-transform:uppercase;margin-top:8px}
.card p{font-size:13px;margin-top:9px;line-height:1.5;opacity:.86}

.fig{margin:0;border:3px solid var(--ink);position:relative;background:var(--ink)}
.fig img{width:100%;object-fit:cover;filter:saturate(1.08) contrast(1.04)}
.fig figcaption{
  position:absolute;bottom:-13px;left:12px;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);padding:2px 8px;font-size:11px;text-transform:uppercase;max-width:calc(100% - 24px)
}
.fig figcaption.blue{background:var(--blue);color:var(--paper)}
.fig-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}

.club-meetup .btn{margin-top:20px}
.club-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 12px;
  margin-top:22px;
  align-items:start;
}
.club-photos > :first-child{grid-column:1 / -1}
.club-photos .fig img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  height:auto;
}
.club-photos > :first-child .fig img{aspect-ratio:4 / 3}
.club-photos-credit{margin-top:18px;opacity:.7;text-transform:uppercase;letter-spacing:.04em}

.crew{border-collapse:collapse;margin-top:24px;font-size:12.5px;width:100%;text-transform:uppercase}
.crew td{padding:7px 8px 7px 0;vertical-align:top}
.crew td.k{opacity:.6;white-space:nowrap}
.crew tr{border-top:1px solid var(--ink)}
.crew tr:first-child{border-top:2px solid var(--ink)}
.crew tr:last-child{border-bottom:2px solid var(--ink)}
@media (max-width:620px){
  .crew,.crew tbody,.crew tr,.crew td{display:block;width:100%}
  .crew tr{padding:8px 0}
  .crew td{padding:1px 0}
  .crew td.k{font-size:11px}
}

.pull{margin:0;font-family:var(--display);font-size:clamp(24px,3.4vw,34px);line-height:1;text-transform:uppercase}
.pull .src{font-family:var(--mono);font-size:12px;background:var(--ink);color:var(--paper);padding:2px 6px;vertical-align:middle;-webkit-text-stroke:0;text-transform:none}
.pull.blue{color:var(--blue);-webkit-text-stroke:1px var(--ink)}

/* ---------- ticket tiers ---------- */
.tier{
  border:3px solid var(--ink);background:var(--white);position:relative;
  box-shadow:8px 8px 0 var(--ink);display:flex;flex-direction:column
}
.tier.vip{background:var(--blue);color:var(--paper)}
.grid-3.ticket-grid{align-items:stretch;margin-top:48px;padding-top:8px}
.grid-3.ticket-grid .tier-name{font-size:clamp(18px,1.7vw,26px)}
.grid-3.ticket-grid .tier-price{font-size:clamp(44px,5.2vw,72px)}
.grid-3.ticket-grid .tier .btn{font-size:clamp(15px,1.5vw,20px);padding:12px}
.tier-top{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-bottom:3px dashed var(--ink);padding:13px clamp(16px,2.4vw,24px);
  text-transform:uppercase;font-size:12px
}
.tier-body{padding:clamp(18px,2.6vw,24px);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;flex:1}
.tier-name{font-family:var(--display);font-size:clamp(24px,3vw,32px);text-transform:uppercase;line-height:1}
.tier ul{margin-top:14px;font-size:13.5px;line-height:1.65}
.tier ul li::before{content:"✕ ";opacity:.7}
.tier-price{font-family:var(--display);font-size:clamp(60px,9vw,104px);line-height:.85}
.tier-flag{
  position:absolute;top:-20px;right:18px;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);font-family:var(--display);font-size:16px;
  text-transform:uppercase;padding:5px 12px;transform:rotate(3deg);z-index:2
}
.tier .btn{border-top:3px solid var(--ink);box-shadow:none;transform:none;border-left:0;border-right:0;border-bottom:0;padding:14px;font-size:clamp(18px,2.4vw,26px)}
.tier .btn:hover{transform:none;box-shadow:none;background:var(--blue)}
@media (max-width:520px){
  .tier-body{grid-template-columns:1fr}
  .tier-price{font-size:64px}
}

/* ---------- info grid ---------- */
.infogrid{display:grid;grid-template-columns:repeat(3,1fr);border:3px solid var(--ink);font-size:13px;line-height:1.55}
.infogrid > div{padding:clamp(16px,2.4vw,20px);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.infogrid > div:nth-child(3n){border-right:0}
.infogrid > div:nth-last-child(-n+3){border-bottom:0}
.infogrid h4{font-family:var(--display);font-size:clamp(17px,2vw,22px);text-transform:uppercase;margin-bottom:8px}
.infogrid .blue{background:var(--blue);color:var(--paper)}
@media (max-width:860px){
  .infogrid{grid-template-columns:1fr}
  .infogrid > div{border-right:0;border-bottom:3px solid var(--ink)}
  .infogrid > div:last-child{border-bottom:0}
}

/* ---------- accordion ---------- */
.acc{border:3px solid var(--ink)}
.acc details{border-bottom:3px solid var(--ink)}
.acc details:last-child{border-bottom:0}
.acc summary{
  list-style:none;cursor:pointer;padding:15px clamp(14px,2vw,20px);
  font-family:var(--display);text-transform:uppercase;font-size:clamp(16px,2vw,21px);
  display:flex;justify-content:space-between;align-items:center;gap:12px
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--blue);font-size:1.3em;line-height:1}
.acc details[open] summary::after{content:"–"}
.acc details[open] summary{background:var(--ink);color:var(--paper)}
.acc .body{padding:0 clamp(14px,2vw,20px) 18px;font-size:14px;line-height:1.6}
.acc details[open] .body{padding-top:16px}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:16px}
.field > span.lab{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;margin-bottom:6px
}
.field .hint{display:block;font-size:11px;opacity:.7;margin-top:5px;text-transform:none;letter-spacing:0;font-weight:400}
.input,select.input,textarea.input{
  width:100%;font:inherit;font-size:15px;background:var(--white);color:var(--ink);
  border:3px solid var(--ink);padding:11px 13px;border-radius:0;-webkit-appearance:none;appearance:none
}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
textarea.input{min-height:130px;resize:vertical}
.input::placeholder{color:rgba(18,18,18,.42)}
.input:invalid.touched{border-color:#c1121f}
.err{display:none;color:#c1121f;font-size:11.5px;margin-top:5px;text-transform:uppercase;font-weight:700}
.field.bad .err{display:block}
.field.bad .input{border-color:#c1121f}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;margin-bottom:14px}
.check input{width:19px;height:19px;flex-shrink:0;margin-top:1px;accent-color:var(--blue)}
.qty{display:flex;align-items:stretch;border:3px solid var(--ink);width:max-content;background:var(--white)}
.qty button{width:44px;border:0;background:var(--ink);color:var(--paper);font-family:var(--display);font-size:20px;line-height:1}
.qty input{width:64px;border:0;text-align:center;font:inherit;font-family:var(--display);font-size:22px;background:var(--white);color:var(--ink);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-note{font-size:11.5px;line-height:1.6;text-transform:uppercase;opacity:.75;margin-top:12px}

/* ---------- modal ---------- */
.modal-root{position:fixed;inset:0;z-index:200;display:none}
.modal-root.open{display:block}
.modal-back{position:absolute;inset:0;background:rgba(18,18,18,.82);animation:fade .18s ease}
.modal-shell{
  position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(14px,4vh,48px) var(--pad);overflow-y:auto;-webkit-overflow-scrolling:touch
}
.modal{
  position:relative;background:var(--paper);color:var(--ink);border:4px solid var(--ink);
  box-shadow:10px 10px 0 var(--blue);width:100%;max-width:560px;margin:auto;
  animation:pop .2s cubic-bezier(.2,.9,.3,1.2)
}
.modal.wide{max-width:900px}
.modal-hd{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px clamp(16px,3vw,24px);border-bottom:4px solid var(--ink);background:var(--ink);color:var(--paper)
}
.modal-hd h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(19px,3vw,28px);line-height:1}
.modal-x{
  background:var(--paper);color:var(--ink);border:3px solid var(--paper);
  font-family:var(--display);font-size:17px;line-height:1;width:34px;height:34px;flex-shrink:0
}
.modal-bd{padding:clamp(18px,3vw,26px)}
.modal-bd > p{font-size:14px;line-height:1.6}
.modal-ft{padding:0 clamp(18px,3vw,26px) clamp(18px,3vw,26px);display:flex;flex-wrap:wrap;gap:10px}
.modal .video{position:relative;padding-top:56.25%;background:#000}
.modal .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal .lightbox-img{width:100%;height:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal,.modal-back{animation:none}}

.summary-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:7px 0;border-bottom:1px dashed rgba(18,18,18,.3);text-transform:uppercase}
.summary-row.total{border-bottom:0;border-top:3px solid var(--ink);margin-top:6px;padding-top:11px;font-family:var(--display);font-size:22px}

.notice{border:3px solid var(--ink);background:var(--blue);color:var(--paper);padding:16px 18px;font-size:13.5px;line-height:1.6}
.notice strong{font-family:var(--display);font-size:18px;text-transform:uppercase;display:block;margin-bottom:5px;letter-spacing:.01em}
.notice.flat{background:var(--paper);color:var(--ink)}

.success{text-align:center;padding:10px 0}
.success .tick{font-family:var(--display);font-size:56px;line-height:1;color:var(--blue);-webkit-text-stroke:2px var(--ink)}
.success h3{font-family:var(--display);text-transform:uppercase;font-size:26px;margin:10px 0 8px}
.success p{font-size:14px;line-height:1.6}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px)}
.toast{
  background:var(--ink);color:var(--paper);border:3px solid var(--blue);padding:12px 15px;
  font-size:13px;line-height:1.45;box-shadow:5px 5px 0 rgba(43,92,255,.45);animation:pop .2s ease
}

/* ---------- misc blocks ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;font-size:11.5px;text-transform:uppercase}
.tags li{border:2px solid var(--ink);padding:4px 9px}
.tags li.on{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.sec-dark .tags li{border-color:var(--paper)}

.linkline{text-decoration:none;font-size:12.5px;text-transform:uppercase;border-bottom:2px solid var(--ink);align-self:flex-start;display:inline-block;background:none;border-left:0;border-right:0;border-top:0;padding:0 0 2px}
.sec-dark .linkline{border-bottom-color:var(--paper)}

.dateblock{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;border:3px solid var(--ink);overflow:hidden}
.dateblock div{padding:14px 18px;border-right:3px solid var(--ink);flex:1 1 150px}
.dateblock div:last-child{border-right:0}
.dateblock .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;opacity:.65}
.dateblock .v{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,2.2vw,23px);line-height:1.1;margin-top:5px}

.steps{counter-reset:s;display:grid;gap:14px}
.steps li{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.55}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--display);font-size:26px;line-height:1;color:var(--blue);flex-shrink:0;min-width:38px
}

/* ---------- CTA band ---------- */
.cta{padding:clamp(46px,7vw,72px) 0;text-align:center;background:var(--blue);color:var(--paper);border-bottom:var(--rule);position:relative;overflow:hidden}
.cta h2{font-family:var(--display);font-size:clamp(56px,17vw,200px);line-height:.85;text-transform:uppercase;margin-top:10px;text-shadow:6px 6px 0 var(--ink);-webkit-text-stroke:2px var(--ink)}
.cta p{font-size:clamp(15px,1.8vw,17px);margin:18px auto 0;max-width:560px}

/* ---------- footer ---------- */
.foot{padding:clamp(28px,4vw,36px) 0;font-size:13px}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(20px,3vw,28px)}
.foot h4{font-family:var(--display);font-size:16px;text-transform:uppercase}
.foot ul{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.foot a{text-decoration:underline;text-underline-offset:3px}
.legal{margin-top:22px;font-size:10px;line-height:1.55;text-transform:uppercase;opacity:.65;max-width:820px}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr}}

/* ---------- sponsors ---------- */
.sponsor-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,28px);margin-top:26px}
@media (max-width:860px){.sponsor-grid{grid-template-columns:1fr}}
.sponsor{
  border:3px solid var(--ink);background:var(--white);color:var(--ink);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column
}
.sec-dark .sponsor{border-color:var(--paper);box-shadow:6px 6px 0 var(--blue)}
/* Fixed-height plates so the logos line up across a row whatever their
   proportions — the partners range from a 3:1 horizontal lockup to a nearly
   square stacked one. */
.sp-logo{
  display:grid;place-items:center;background:var(--ink);
  border-bottom:3px solid var(--ink);padding:24px 22px;min-height:210px;overflow:hidden
}
.sp-logo.on-paper{background:var(--white)}
/* An absolute cap, not a percentage: the grid row is content-sized, so a
   percentage max-height resolves circularly and the logo overflows the plate. */
.sp-logo img{max-height:162px;max-width:100%;width:auto;object-fit:contain}
@media (max-width:520px){
  .sp-logo{min-height:180px}
  .sp-logo img{max-height:132px}
}
.sp-body{padding:clamp(16px,2.4vw,22px);display:flex;flex-direction:column;gap:10px;flex:1}
.sp-body h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(21px,2.6vw,28px);line-height:1}
.sp-role{font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.65}
.sp-body p{font-size:13.5px;line-height:1.55}
.sp-body .linkline{margin-top:auto;border-bottom-color:var(--ink)}

/* ---------- guests ---------- */
.guest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,26px);margin-top:28px}
@media (max-width:860px){.guest-grid{grid-template-columns:1fr}}
.guest-card{
  display:flex;flex-direction:column;text-decoration:none;
  border:3px solid var(--ink);background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .12s ease
}
.guest-card:hover{opacity:1;transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--blue)}
.guest-card img{width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:center center;border-bottom:3px solid var(--ink);filter:saturate(1.06) contrast(1.03)}
/* Duo and square frames match the submitted files so faces and corner
   watermarks stay in the card. A text credit still sits under every photo. */
.guest-card img.duo{aspect-ratio:3 / 2}
.guest-card img.square{aspect-ratio:1 / 1}
.guest-card img.keep-bottom{object-position:center bottom}
.guest-card .gc-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.guest-card h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.6vw,28px);line-height:1}
.guest-card .gc-handle{font-size:11px;text-transform:uppercase;letter-spacing:.11em;opacity:.65}
.guest-card .gc-line{font-size:13px;line-height:1.5}
.guest-card .gc-credit{font-size:11.5px;line-height:1.45;text-transform:none;letter-spacing:.01em;opacity:.75}
.guest-card .gc-more{font-family:var(--display);text-transform:uppercase;font-size:15px;color:var(--blue);margin-top:auto}

.shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;margin-top:26px;align-items:start}
.shot-grid > :first-child{grid-column:1 / -1}
.shot-grid .fig img{width:100%;aspect-ratio:3 / 4;object-fit:cover}
/* The lead shot spans both columns, so a portrait source gets cropped to a
   landscape band. Biasing the crop upward keeps heads in frame. */
.shot-grid > :first-child .fig img{aspect-ratio:4 / 3;object-position:50% 10%}
/* Sets shot in landscape keep their own framing instead of being cropped to
   portrait cells. */
.shot-grid.landscape .fig img,
.shot-grid.landscape > :first-child .fig img{aspect-ratio:3 / 2;object-position:50% 50%}
@media (max-width:520px){
  .shot-grid{grid-template-columns:1fr}
  .shot-grid .fig img,.shot-grid > :first-child .fig img{aspect-ratio:3 / 4}
  .shot-grid.landscape .fig img,.shot-grid.landscape > :first-child .fig img{aspect-ratio:3 / 2}
}
/* Guest-submitted photos are shown whole. Cropping would cut corner
   watermarks; the caption still names the photographer. */
.shot-grid.submitted .fig img,
.shot-grid.submitted > :first-child .fig img{
  width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center
}
.ph-credit{text-transform:none;letter-spacing:0}
.credits{margin-top:24px;font-size:11.5px;line-height:1.7;text-transform:uppercase;letter-spacing:.03em;opacity:.72}
.credits.exact{text-transform:none;letter-spacing:.01em}
.credits li{padding-left:14px;position:relative}
.credits li::before{content:"\203A";position:absolute;left:0;color:var(--blue);font-weight:700}
.credits a{text-decoration:underline;text-underline-offset:2px}

/* ---------- cosplay night ---------- */
.cos-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 20px;margin-top:28px;align-items:start}
/* Two of these photographs are CC BY-NC-ND and are shown whole, never cropped,
   so the cells size to the image instead of forcing one aspect ratio on all
   three. The ragged bottom edge is fine — everything else here is askew too. */
.cos-shots .fig img{width:100%;height:auto}
.cos-shots .fig-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.cos-shots .fig a{display:block}
.cos-still{margin-top:36px;max-width:760px}
.cos-still .fig img{width:100%;height:auto}
@media (max-width:860px){.cos-shots{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cos-shots{grid-template-columns:1fr}}

.cosplay-callout{align-items:center}
.cosplay-callout .fig img{width:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:50% 22%}
/* The callout sits on the blue band, so the figure needs the ink frame back —
   .fig already draws it, but the caption tab has to stay legible against blue. */
.sec-blue .fig figcaption{background:var(--paper);color:var(--ink)}
@media (max-width:860px){.cosplay-callout .fig{margin-top:14px}}

/* ---------- 404 ---------- */
.oops{text-align:center;padding:clamp(56px,10vw,110px) 0}
.oops .big{font-family:var(--display);font-size:clamp(90px,26vw,260px);line-height:.85;color:var(--blue);-webkit-text-stroke:3px var(--ink);text-shadow:8px 8px 0 var(--ink)}