@font-face{font-family:Big;src:url(/assets/big.woff2) format("woff2");font-display:swap}
@font-face{font-family:Cond;src:url(/assets/cond.woff2) format("woff2");font-display:swap}
@font-face{font-family:Semi;src:url(/assets/semi.woff2) format("woff2");font-display:swap}

/* brand palette: ink #1E1B1F, pink #E5218B, deep #8E0F55, yellow #F6C624, cream #F7F0DC, slate #4A4F57
   layout follows the posts: yellow kicker, pink title, straight ink rows on a slate cut-paper shadow */
:root{--paper:#1E1B1F;--bg:url(/assets/bg-ink.webp?v=4);--hero:url(/assets/hero-dark.webp?v=3);--title:#E5218B;--text:#F7F0DC;
  --kick:#F6C624;--kickBg:transparent;--row:#1E1B1F;--rowText:#F7F0DC;--tile:#F6C624;--tileIcon:#1E1B1F;
  --primary:#E5218B;--primaryText:#1E1B1F;--pTile:#1E1B1F;--pTileIcon:#F6C624;--shadow:#4A4F57;
  --card:#F7F0DC url(/assets/card-paper.webp?v=2) 50%/cover;--cardText:#1E1B1F;--day:#E5218B;--every:#8E0F55;
  --fxSeq:url(/assets/fx-sequence-dark.webp?v=3);--fxNak:url(/assets/fx-nakmuay-dark.webp?v=3);--fxTig:url(/assets/fx-tigers-dark.webp?v=3);--fxCamp:url(/assets/fx-bagkick-flip-dark.webp?v=3)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--paper:#E5218B;--bg:url(/assets/bg-pink.webp?v=4);--hero:url(/assets/hero-light.webp?v=3);--title:#1E1B1F;--text:#1E1B1F;
  --kickBg:#1E1B1F;--primary:#F6C624;--card:#1E1B1F;--cardText:#F7F0DC;--day:#E5218B;--every:#F6C624;
  --fxSeq:url(/assets/fx-sequence-light.webp?v=3);--fxNak:url(/assets/fx-nakmuay-light.webp?v=3);--fxTig:url(/assets/fx-tigers-light.webp?v=3);--fxCamp:url(/assets/fx-bagkick-flip-light.webp?v=3)}}
:root[data-theme="light"]{--paper:#E5218B;--bg:url(/assets/bg-pink.webp?v=4);--hero:url(/assets/hero-light.webp?v=3);--title:#1E1B1F;--text:#1E1B1F;
  --kickBg:#1E1B1F;--primary:#F6C624;--card:#1E1B1F;--cardText:#F7F0DC;--day:#E5218B;--every:#F6C624;
  --fxSeq:url(/assets/fx-sequence-light.webp?v=3);--fxNak:url(/assets/fx-nakmuay-light.webp?v=3);--fxTig:url(/assets/fx-tigers-light.webp?v=3);--fxCamp:url(/assets/fx-bagkick-flip-light.webp?v=3)}

*{box-sizing:border-box;margin:0}
html{background:var(--paper);color:var(--text);overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{min-height:100vh;background:var(--paper) var(--bg) 50% 0/100% auto repeat-y;font:500 16px/1.4 Semi,"Arial Narrow",sans-serif;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
.wrap{max-width:460px;margin:0 auto;padding:0 16px max(32px,env(safe-area-inset-bottom))}
.i{width:1em;height:1em;fill:currentColor;flex:none}

/* small print pieces shared with the posts */
.kick{display:inline-block;align-self:flex-start;font:800 13px/1 Semi,sans-serif;letter-spacing:.12em;color:var(--kick);background:var(--kickBg);padding:5px 0}
:root[data-theme="light"] .kick{padding:5px 8px}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .kick{padding:5px 8px}}
.tag{display:inline-block;align-self:flex-start;font:900 18px/1 Cond,sans-serif;letter-spacing:.03em;text-transform:uppercase;padding:9px 12px 8px;background:#1E1B1F;color:#F6C624;box-shadow:-6px 6px 0 var(--shadow)}

/* hero: club FX halftone, fading into the page */
.hero{position:relative;max-width:460px;margin:0 auto;padding:0 16px 26px;min-height:min(132vw,600px);display:flex;flex-direction:column;justify-content:space-between}
.hero .photo{position:absolute;inset:0 -16px 0;background:var(--hero) 50% 0/cover no-repeat;
  -webkit-mask:linear-gradient(#000 0,#000 52%,transparent 96%);mask:linear-gradient(#000 0,#000 52%,transparent 96%)}
.bar{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding-top:max(16px,env(safe-area-inset-top))}
.logo{display:block;width:76px;height:auto}
.theme{width:44px;height:44px;border:0;border-radius:50%;background:#1E1B1F;color:#F7F0DC;cursor:pointer;display:grid;place-items:center;font-size:22px}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:block}:root:not([data-theme="light"]) .theme .moon{display:none}}
.title{position:relative;display:flex;flex-direction:column}
h1{font:900 clamp(62px,19.5vw,88px)/.84 Big,Impact,sans-serif;color:var(--title);letter-spacing:.005em;margin:8px 0 18px}
h2{font:900 54px/.86 Big,Impact,sans-serif;color:var(--title);margin:8px 0 20px}

.banner{font:900 20px/1.15 Cond,sans-serif;padding:12px 14px;margin:0 0 18px 6px;background:#F6C624;color:#1E1B1F;box-shadow:-6px 6px 0 var(--shadow)}
.next{display:flex;flex-direction:column;gap:6px;padding:13px 16px 14px;margin:0 0 30px 6px;background:var(--row);color:var(--rowText);box-shadow:-6px 6px 0 var(--shadow)}
.next .k{font:800 13px/1 Semi,sans-serif;letter-spacing:.12em;color:#F6C624;display:flex;align-items:center;gap:8px}
.next .v{font:900 clamp(20px,6.6vw,28px)/1.05 Cond,sans-serif;letter-spacing:.02em;white-space:nowrap}
.next .dot{width:10px;height:10px;border-radius:50%;background:#F6C624;flex:none;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.next .dot{animation:none}}

/* buttons: the posts' step rows (yellow tile, ink bar, slate shadow) */
.links{display:grid;gap:14px;margin-bottom:60px;padding-left:6px}
.btn{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;min-height:68px;background:var(--row);color:var(--rowText);text-decoration:none;
  box-shadow:-6px 6px 0 var(--shadow);transition:transform .1s,box-shadow .1s}
.btn.primary{background:var(--primary);color:var(--primaryText)}
.btn:active{transform:translate(-3px,3px);box-shadow:-3px 3px 0 var(--shadow)}
.tile{width:48px;height:48px;display:grid;place-items:center;background:var(--tile);color:var(--tileIcon);font-size:28px;flex:none}
.primary .tile{background:var(--pTile);color:var(--pTileIcon)}
.tx{flex:1;min-width:0}
.btn .lbl{display:block;font:900 27px/.95 Cond,sans-serif;letter-spacing:.01em}
.btn .sub{display:block;font:600 14px/1.2 Semi,sans-serif;margin-top:4px;opacity:.8}
.btn .go{font-size:20px;opacity:.6}
.btn:focus-visible{outline:3px solid #F6C624;outline-offset:4px}

section{display:flex;flex-direction:column;margin-bottom:60px;scroll-margin-top:16px}
.cards{list-style:none;padding:0 0 0 6px;display:grid;gap:14px}
.card{position:relative;padding:14px 16px 13px;background:var(--card);color:var(--cardText);box-shadow:-6px 6px 0 var(--shadow)}
.card b{display:block;font:900 44px/.9 Big,Impact,sans-serif;color:var(--day)}
.card .time{display:block;font:900 26px/1 Cond,sans-serif;margin-top:6px}
.card .every{position:absolute;top:13px;right:14px;font:800 12px/1 Semi,sans-serif;letter-spacing:.1em;color:var(--every)}
.note{font:900 20px/1.2 Cond,sans-serif;padding:10px 14px;margin:0 0 16px 6px;background:#F6C624;color:#1E1B1F;box-shadow:-6px 6px 0 var(--shadow)}

.mapcard{display:block;position:relative;margin:0 0 22px 6px;box-shadow:-6px 6px 0 var(--shadow)}
.mapcard img{display:block;width:100%;height:auto;border:4px solid #1E1B1F}
.sticker{position:absolute;right:10px;bottom:10px;font:900 15px/1 Cond,sans-serif;letter-spacing:.05em;padding:8px 10px 7px;background:#F6C624;color:#1E1B1F}
.place{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:4px 0 30px 6px;padding:14px 16px 15px;background:#1E1B1F;color:#F7F0DC;box-shadow:-6px 6px 0 var(--shadow)}
.place .walk{font:900 22px/1.1 Cond,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#F6C624}
.place b{font:900 28px/1.05 Cond,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.place a{font:700 19px/1.2 Semi,sans-serif;letter-spacing:.03em;color:#F7F0DC;text-decoration:none;opacity:.9}
.place a span{color:#E5218B}
section .btn{margin-left:6px}

footer{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:8px;text-align:center}
.social{display:flex;gap:14px}
.social a{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#1E1B1F;color:#F7F0DC;font-size:26px}
footer .logo{width:56px}
footer p{font:800 11px/1.3 Semi,sans-serif;letter-spacing:.08em}

/* FX backdrops from the kit's fight-photo set, behind the open space at the top of each section, faded at both ends */
#sessions,#map,footer{position:relative;isolation:isolate}
#sessions::before,#map::before,footer::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:-70px;height:420px;pointer-events:none;opacity:.85;
  background:var(--fx) 50% 0/cover no-repeat;-webkit-mask:linear-gradient(transparent,#000 25%,#000 55%,transparent);mask:linear-gradient(transparent,#000 25%,#000 55%,transparent)}
#sessions::before{--fx:var(--fxSeq)}
#map::before{--fx:var(--fxCamp);background-position:50% 30%}
footer::before{--fx:var(--fxTig);top:0;height:auto;bottom:0;background-position:50% 35%;-webkit-mask:linear-gradient(transparent,#000 30%,#000 75%,transparent);mask:linear-gradient(transparent,#000 30%,#000 75%,transparent)}
#sessions,#map{padding-top:90px}
footer{padding-top:150px;padding-bottom:40px}

/* print texture: grime-scan grain on every box, worn-ink specks knocked out of the type */
.btn,.next,.tag,.banner,.note,.card,.tile,.place{position:relative;isolation:isolate}
.btn::after,.next::after,.card::after,.tag::after,.banner::after,.note::after,.tile::after,.place::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(/assets/grain.webp?v=3) 0 0/385px;mix-blend-mode:overlay;opacity:.55;z-index:-1}
h1,h2,.btn .lbl,.card b,.kick{-webkit-mask:url(/assets/wear.webp?v=3) 0 0/300px;mask:url(/assets/wear.webp?v=3) 0 0/300px}

/* strip under the title: tagline and next social take turns, the new one swooshes in from the right */
.ticker{display:grid;justify-items:start;gap:12px}
.ticker .tag{max-width:100%;line-height:1.1}
.ticker .soc{background:#F6C624;color:#1E1B1F}
.ticker .soc .k{display:block;font:800 11px/1 Semi,sans-serif;letter-spacing:.12em;margin-bottom:5px;color:#8E0F55}
.ticker.run{gap:0}
.ticker.run .tag{grid-area:1/1;visibility:hidden;transform:translateX(110vw)}
.ticker.run .tag.on{visibility:visible;transform:none;animation:swoosh-in .62s cubic-bezier(.16,.9,.3,1.12) both}
.ticker.run .tag.off{visibility:visible;animation:swoosh-out .38s cubic-bezier(.6,0,.9,.4) both}
@keyframes swoosh-in{0%{transform:translateX(110vw) skewX(-18deg);opacity:.4}65%{transform:translateX(-10px) skewX(4deg);opacity:1}100%{transform:none}}
@keyframes swoosh-out{to{transform:translateX(-110vw) skewX(14deg);opacity:0}}
.ticker.run .tag.on::before{content:"";position:absolute;inset:0 auto 0 100%;width:70vw;pointer-events:none;
  background:linear-gradient(90deg,rgba(229,33,139,.8),rgba(229,33,139,0));animation:trail .62s ease-out both}
@keyframes trail{from{opacity:1;transform:scaleX(1);transform-origin:left}to{opacity:0;transform:scaleX(0);transform-origin:left}}
@media (prefers-reduced-motion:reduce){.ticker.run .tag.on{animation:fade .3s both}.ticker.run .tag.off{animation:none;visibility:hidden}.ticker.run .tag.on::before{display:none}}
@keyframes fade{from{opacity:0}}

/* Join: a punchy wiggle every few seconds, with a shine across it, to pull the eye */
.links .btn.primary{animation:nudge 4.2s ease-in-out 1.2s infinite}
.links .btn.primary .tile{animation:jab 4.2s ease-in-out 1.2s infinite}
.links .btn.primary::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.45) 50%,transparent 58%) 100% 0/300% 100% no-repeat;animation:shine 4.2s ease-in-out 1.2s infinite}
@keyframes nudge{0%,78%,100%{transform:none}81%{transform:rotate(-2deg) scale(1.04)}84%{transform:rotate(2deg) scale(1.04)}87%{transform:rotate(-1.5deg) scale(1.02)}90%{transform:rotate(1deg)}93%{transform:none}}
@keyframes jab{0%,80%,100%{transform:none}84%{transform:translateX(5px) rotate(-10deg)}88%{transform:none}}
@keyframes shine{0%,80%{background-position:100% 0}96%,100%{background-position:0 0}}
.links .btn.primary:active{animation:none}
@media (prefers-reduced-motion:reduce){.links .btn.primary,.links .btn.primary .tile,.links .btn.primary::before{animation:none}}

/* Join: heavier print texture, torn-poster scan + wall specks over the grain */
.links .btn.primary .tile{position:relative;isolation:isolate}
.links .btn.primary .tile::after{background:url(/assets/specks.webp?v=2) 40% 60%/180px auto,url(/assets/grain.webp?v=3) 0 0/210px;opacity:.75}
.links .btn.primary .lbl{-webkit-mask:url(/assets/wear.webp?v=3) 20px 10px/200px;mask:url(/assets/wear.webp?v=3) 20px 10px/200px}

/* Find the dojo: heading gets the slate offset like the buttons, no worn specks, and the photo eases off behind it */

/* Headings: no eyebrows; each heading sits on a ragged blot of the page's own texture, so the photo drops back behind it */
.hd{position:relative;isolation:isolate;width:fit-content}
.hd::before{content:"";position:absolute;z-index:-1;left:-80px;right:-90px;top:-60px;bottom:-44px;pointer-events:none;
  background:linear-gradient(var(--hdTint,transparent),var(--hdTint,transparent)),var(--paper) var(--bg) 50% 0/430px auto;-webkit-mask:url(/assets/blot.webp?v=1) 0 0/100% 100%;mask:url(/assets/blot.webp?v=1) 0 0/100% 100%;opacity:1}
.hd h1,.hd h2{margin-top:0}
:root{--hdTint:rgba(14,12,15,.6)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--hdTint:transparent}}
:root[data-theme="light"]{--hdTint:transparent}
.title .hd{margin-top:6px}

/* Timetable: day block + time, like the link rows; the next session gets a sticker */
.card{display:flex;align-items:stretch;gap:14px;padding:10px 16px 10px 10px}
.card .day{flex:none;width:84px;min-height:76px;display:grid;place-items:center;position:relative;isolation:isolate;
  background:var(--day);color:#1E1B1F;font:900 38px/1 Big,Impact,sans-serif;letter-spacing:.02em}
.card .tx{display:flex;flex-direction:column;justify-content:center;min-width:0}
.card .time{margin:0;font:900 clamp(26px,8.4vw,34px)/1 Cond,sans-serif;white-space:nowrap}
.card .len{margin-top:7px;font:800 12px/1 Semi,sans-serif;letter-spacing:.1em;color:var(--every)}
.card.is-next::before{content:attr(data-flag);position:absolute;z-index:2;top:-11px;right:12px;transform:rotate(3deg);
  font:900 15px/1 Cond,sans-serif;letter-spacing:.05em;padding:6px 9px 5px;background:#F6C624;color:#1E1B1F;box-shadow:-3px 3px 0 var(--shadow)}

/* Shadows: the slate cut-paper shadow is its own layer, worn ragged into whatever sits behind it.
   Box fills keep the light grain, now as a blended background layer so ::after is free for the shadow. */
.btn,.btn.primary,.next,.tag,.ticker .soc,.banner,.note,.place{background-image:url(/assets/grain.webp?v=3);background-size:385px;background-blend-mode:overlay}
.links .btn.primary{background-image:url(/assets/torn.webp?v=2),url(/assets/specks.webp?v=2),url(/assets/grain.webp?v=3);
  background-position:30% 20%,0 0,0 0;background-size:360px auto,260px auto,280px;background-blend-mode:overlay}
.btn,.next,.tag,.banner,.note,.card,.place,.mapcard{--o:6px;box-shadow:none;position:relative;isolation:isolate}
.btn::after,.next::after,.tag::after,.banner::after,.note::after,.card::after,.place::after,.mapcard::after{content:"";position:absolute;z-index:-1;inset:auto;
  left:calc(-1 * var(--o));top:var(--o);width:100%;height:100%;pointer-events:none;opacity:1;mix-blend-mode:normal;
  background:var(--shadow);clip-path:polygon(0 0,var(--o) 0,var(--o) calc(100% - var(--o)),100% calc(100% - var(--o)),100% 100%,0 100%);
  -webkit-mask:url(/assets/shadow-wear.webp?v=3) var(--wx,0) var(--wy,0)/300px;mask:url(/assets/shadow-wear.webp?v=3) var(--wx,0) var(--wy,0)/300px}
.btn:active{box-shadow:none;--o:3px}
.links .btn:nth-child(2n),.cards li:nth-child(2n),.place{--wx:-130px;--wy:-90px}
.links .btn:nth-child(3n),.mapcard{--wx:-210px;--wy:-40px}


/* Timetable variants under review (data-v on .cards): block (default), bill, ticket, big */
.card .full{display:none}
.cards[data-v="bill"]{gap:0;padding-left:0}
[data-v="bill"] .card{display:block;background:none;padding:14px 0 20px;color:var(--text)}
[data-v="bill"] .card::after{left:0;top:auto;bottom:0;width:100%;height:6px;background:#F6C624;clip-path:none}
[data-v="bill"] .day{display:none}
[data-v="bill"] .full{display:block;font:900 clamp(56px,17vw,74px)/.85 Big,Impact,sans-serif;color:var(--title);-webkit-mask:url(/assets/wear.webp?v=3) 0 0/300px;mask:url(/assets/wear.webp?v=3) 0 0/300px}
[data-v="bill"] .time{margin-top:8px;font-size:clamp(28px,9vw,36px)}
[data-v="bill"] .len{color:var(--text);opacity:.75}
[data-v="bill"] .card.is-next::before{top:18px;right:0}
[data-v="ticket"] .card{background:#1E1B1F;color:#F7F0DC;padding:0;gap:0}
[data-v="ticket"] .day{width:96px;min-height:96px;background:#F6C624;color:#1E1B1F;font-size:42px}
[data-v="ticket"] .tx{padding:12px 16px 12px 22px;background:radial-gradient(circle,#F6C624 2px,transparent 2.6px) 2px 0/8px 11px repeat-y}
[data-v="ticket"] .time{font-size:clamp(28px,8.8vw,36px)}
[data-v="ticket"] .len{color:#F6C624}
[data-v="big"] .card{padding:0 16px 0 0;gap:16px}
[data-v="big"] .day{width:42px;min-height:0;background:#1E1B1F;color:#F6C624;font-size:26px;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.08em}
[data-v="big"] .tx{padding:12px 0 14px}
[data-v="big"] .time .a{display:block;font:900 clamp(60px,19vw,80px)/.85 Big,Impact,sans-serif;color:var(--day)}
[data-v="big"] .time .b{display:block;margin-top:4px;font-size:26px}
[data-v="big"] .time .b{text-indent:0}