/* Rock Dance International: the club patch outside, a clean archive inside. Black twill, gold cord, red, bone, steel-blue Earth. */
@font-face{font-family:"RDI Slab";src:url(/fonts/alfa-latin.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"RDI Slab";src:url(/fonts/alfa-latin-ext.woff2) format("woff2");font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"RDI Slab";src:url(/fonts/rslab-cyrillic.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"RDI Slab";src:url(/fonts/rslab-cyrillic-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

:root{
  --bg:#050404;--ink:#f3ece0;--soft:#cfc5b3;--gold:#f0a91c;--gold-deep:#a8730f;--red:#c8161d;--red-deep:#6e0b0f;
  --blue:#4f7fb0;--blue-ink:#9cc0e4;--line:rgba(240,169,28,.28);--measure:68ch;
  --twill:repeating-linear-gradient(135deg,rgba(243,236,224,.04) 0 1px,transparent 1px 5px),#0d0b09;
  --cord:repeating-linear-gradient(120deg,#6b4806 0 1px,#f0a91c 1px 4px,#ffd98a 4px 5px,#c1850f 5px 7px);
  --display:"RDI Slab","Roboto Slab",Rockwell,"Hiragino Sans","Noto Sans CJK JP","Malgun Gothic","PingFang SC",serif;
  --text:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Hiragino Sans","Noto Sans CJK JP","Malgun Gothic","PingFang SC",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--text);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;background:var(--bg);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:-.005em;margin:0;text-wrap:balance}
:lang(ja) :is(h1,h2,h3,.when,.h),:lang(ko) :is(h1,h2,h3,.when,.h),:lang(zh) :is(h1,h2,h3,.when,.h){font-weight:900;letter-spacing:0;line-height:1.2}
p{margin:0}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:.6rem 1rem;z-index:20}
.skip:focus{left:1rem;top:1rem}
.wrap{width:min(1180px,100% - 2rem);margin-inline:auto}

/* Top bar: black, closed by a gold cord */
.top{position:sticky;top:0;z-index:10;background:#000}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:var(--cord);box-shadow:0 3px 6px rgba(0,0,0,.6)}
.top .wrap{display:flex;align-items:center;gap:1.25rem;min-height:4.25rem}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);text-decoration:none;font-family:var(--display);font-size:1.05rem;white-space:nowrap}
.brand img{width:42px;height:42px;border-radius:50%}
.nav{display:flex;gap:1.1rem;margin-left:auto;font-size:.95rem}
.nav a{color:var(--soft);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--gold);border-bottom-color:var(--gold)}
.nav a.ev{color:var(--gold)}
.nav a.don{color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:.3rem .85rem}
.nav a.don:hover,.nav a.don[aria-current]{background:var(--gold);color:#140f05}
.lang,.menu{position:relative}
.menu{display:none}
.lang summary,.menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:.3rem .85rem;font-size:.9rem;color:var(--ink)}
.lang summary::-webkit-details-marker,.menu summary::-webkit-details-marker{display:none}
.lang[open] summary,.menu[open] summary{border-color:var(--gold)}
.lang .code{display:none}
.lang ul,.menu nav{position:absolute;right:0;top:calc(100% + .6rem);list-style:none;margin:0;padding:.4rem;background:#0b0907;border:1px solid var(--gold-deep);border-radius:12px;min-width:13rem;box-shadow:0 18px 40px rgba(0,0,0,.7)}
.menu nav{display:grid;gap:.1rem}
.lang li a,.menu nav a{display:block;padding:.5rem .75rem;border-radius:8px;color:var(--ink);text-decoration:none}
.lang li a:hover,.lang li a[aria-current],.menu nav a:hover,.menu nav a[aria-current]{background:#1d1608;color:var(--gold)}

/* Buttons: small stitched patches */
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.3rem;border-radius:999px;font-weight:800;text-decoration:none;transition:transform .45s var(--ease),background-color .3s,color .3s,box-shadow .45s var(--ease)}
.btn-gold{background:var(--gold);color:#140c00;outline:1.5px dashed rgba(20,12,0,.5);outline-offset:-6px;box-shadow:0 1px 0 #ffd98a inset,0 8px 18px -8px rgba(0,0,0,.9)}
.btn-gold:hover{color:#140c00;transform:translateY(-2px);box-shadow:0 1px 0 #ffd98a inset,0 14px 26px -10px rgba(0,0,0,.95)}
.btn-line{border:2px solid var(--gold);color:var(--gold)}
.btn-line:hover{background:var(--gold);color:#140c00}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* The patch: black twill, twisted gold cord edge, a running stitch inside, raised lettering */
.announce,.band,.sewn{position:relative;background:var(--twill);border-radius:22px;box-shadow:0 0 0 1px #2a1c03,0 22px 40px -18px rgba(0,0,0,.95)}
.announce::before,.band::before,.sewn::before{content:"";position:absolute;inset:0;padding:6px;border-radius:inherit;background:var(--cord);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.announce::after,.band::after,.sewn::after{content:"";position:absolute;inset:12px;border:2px dashed rgba(243,236,224,.3);border-radius:13px;pointer-events:none}
.announce h1,.band h1,.sewn .h{color:var(--ink);paint-order:stroke fill;-webkit-text-stroke:.07em var(--gold-deep);text-shadow:0 1px 0 rgba(255,255,255,.18),0 3px 0 #000,0 5px 10px rgba(0,0,0,.7)}

/* Home: the 2027 event leads */
.home-hero{padding:clamp(1.6rem,4vw,3.4rem) 0 clamp(2rem,5vw,3.6rem);border-bottom:1px solid var(--line)}
.home-hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"a p" "a l";gap:1.4rem clamp(1.5rem,4vw,3.5rem);align-items:center}
.announce{grid-area:a;padding:clamp(2rem,4vw,3.2rem) clamp(1.6rem,3.6vw,3rem);transform:rotate(-1deg);animation:sew 1.2s var(--ease) both}
@keyframes sew{from{transform:rotate(-3.5deg) scale(.97);box-shadow:0 0 0 1px #2a1c03,0 4px 8px -4px rgba(0,0,0,.9)}}
.announce h1{font-size:clamp(2.5rem,5.4vw,4.7rem);line-height:.95}
.announce .h1a{display:block}
.announce .h1b{display:block;margin-top:.7rem;font-size:max(1.05rem,.36em);line-height:1.2;color:var(--gold);-webkit-text-stroke:0;text-shadow:0 2px 0 #000}
.announce .when{margin-top:1.5rem;padding:.5em .9em .55em;border-radius:6px;background:var(--red);font:400 clamp(1.1rem,1.5vw,1.4rem)/1.15 var(--display);text-wrap:balance;color:var(--ink);
  outline:1.5px dashed rgba(243,236,224,.55);outline-offset:-6px;box-shadow:0 0 0 2px var(--gold-deep),0 10px 18px -10px rgba(0,0,0,.9)}
.announce .where{margin-top:.9rem;font-weight:700;font-size:1.08rem;color:var(--ink)}
.home-hero .plate{grid-area:p}
.home-hero .lead{grid-area:l;align-self:start;max-width:60ch;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--soft)}

/* Interior header: the title sewn on a band, the illustration mounted as an archive plate */
.page-head{padding:clamp(1.5rem,4vw,3rem) 0 clamp(2rem,4.5vw,3.2rem);border-bottom:1px solid var(--line)}
.page-head .wrap{display:grid;gap:1.8rem clamp(1.5rem,4vw,3.5rem);align-items:center}
.page-head.has-img .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.band{width:fit-content;max-width:100%;padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.4rem,3vw,2.3rem)}
.band h1{font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.04}
.page-head .lead{margin-top:1.4rem;max-width:60ch;font-size:clamp(1.06rem,1.4vw,1.2rem);color:var(--ink)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .55rem;margin:0 0 1.2rem;padding:0;font-size:.9rem;color:var(--soft)}
.crumbs li+li::before{content:"/";margin-right:.55rem;color:var(--gold-deep)}
.crumbs a{color:var(--soft)}
.plate{position:relative;margin:0;padding:10px;background:#16130f;border:1px solid rgba(243,236,224,.16);border-radius:3px;box-shadow:0 26px 46px -24px rgba(0,0,0,.95)}
.plate img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0d0b09}
.plate::after{--c:clamp(18px,2.4vw,28px);content:"";position:absolute;inset:3px;pointer-events:none;background:
  linear-gradient(135deg,var(--gold) 0 50%,transparent 0) 0 0/var(--c) var(--c) no-repeat,linear-gradient(225deg,var(--gold) 0 50%,transparent 0) 100% 0/var(--c) var(--c) no-repeat,
  linear-gradient(45deg,var(--gold) 0 50%,transparent 0) 0 100%/var(--c) var(--c) no-repeat,linear-gradient(315deg,var(--gold) 0 50%,transparent 0) 100% 100%/var(--c) var(--c) no-repeat}

/* Body: a clean archive */
.page-body{padding:clamp(2rem,5vw,3.8rem) 0 clamp(2.5rem,6vw,4.5rem)}
.page-body.has-toc{display:grid;grid-template-columns:minmax(11rem,14rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.toc{position:sticky;top:6rem;font-size:.92rem}
.toc p{font-family:var(--display);color:var(--gold);margin-bottom:.7rem}
.toc ol{list-style:none;margin:0;padding:0 0 0 1rem;border-left:1px solid var(--line);display:grid;gap:.5rem}
.toc a{color:var(--soft);text-decoration:none}
.toc a:hover{color:var(--gold)}
.toc.strip{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:2.2rem;padding-bottom:1.4rem;border-bottom:1px dashed var(--line)}
.toc.strip p{margin:0;font-size:1rem}
.toc.strip ol{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;border:0}
.toc.strip a{display:block;padding:.3rem .75rem;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.toc.strip a:hover{border-color:var(--gold);color:var(--gold)}
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:1.1em}
.prose>:first-child{margin-top:0}
.l-fichas .prose,.l-timeline .prose,.l-home .prose,.t-sources .prose{max-width:none}
:is(.l-fichas,.l-timeline,.l-home,.t-sources) .prose>:not(.fichas,.timeline,.wall,.minute,.src-list,.bleed,.statement,.moves,.rounds,.versus,.index,.names,.program){max-width:var(--measure)}
.prose h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-top:2em;scroll-margin-top:6rem}
.prose h2::after{content:"";display:block;width:3.5rem;height:4px;margin-top:.7rem;border-radius:2px;background:var(--cord)}
.prose h3{font-size:clamp(1.25rem,2vw,1.5rem);margin-top:1.9em;color:var(--gold);scroll-margin-top:6rem}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--red)}
.prose strong{color:#fff}
.prose>blockquote{position:relative;margin:1.8em 0;padding:0 0 0 2.4rem;font:400 clamp(1.15rem,1.9vw,1.4rem)/1.35 var(--display);color:var(--gold)}
.prose>blockquote::before{content:"“";position:absolute;left:0;top:-.15em;font:400 3em/1 var(--display);color:var(--red)}
.prose blockquote .orig{font:400 .97rem/1.5 var(--text);color:var(--soft)}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto}
.prose th,.prose td{padding:.6rem .55rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{color:var(--gold);font-weight:700}
a.cite{display:inline-block;margin-left:.15em;padding:.12em .32em;border:1px solid var(--gold-deep);border-radius:4px;color:var(--gold);font:700 .58em/1 var(--text);vertical-align:super;text-decoration:none;opacity:.85}
a.cite:hover,a.cite:focus-visible{background:var(--gold);color:#000;opacity:1}
.cites{white-space:nowrap}

/* OG quotes: woven labels of their own, with the speaker */
.quote{position:relative;max-width:60ch;margin:1.8em 0;padding:1.3rem 1.5rem 1.2rem;background:var(--ink);color:#16100a;border-radius:5px;box-shadow:0 16px 28px -18px rgba(0,0,0,.95)}
.quote::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(110,11,15,.45);border-radius:3px;pointer-events:none}
.quote blockquote{margin:0;font:400 clamp(1.12rem,1.7vw,1.35rem)/1.32 var(--display);color:#16100a}
.quote blockquote::before{content:"“";display:block;height:.55em;font:400 3rem/1 var(--display);color:var(--red)}
.quote blockquote p+p{margin-top:.5rem}
.quote .orig{font:400 .95rem/1.5 var(--text);color:#4a4036}
.quote figcaption{margin-top:.9rem;font-size:.92rem;line-height:1.45;color:#3d342a}
.quote .who{display:block;font-weight:800;font-size:1rem;color:#7a0d12}
.quote a.cite{background:#16100a;color:var(--gold)}
.prose>.quote:nth-of-type(odd){transform:rotate(-.4deg)}

/* More detail: the depth, in the blue of the Earth */
.deep{margin-top:1.2em;border:1px solid rgba(79,127,176,.6);border-radius:10px;background:#080b10}
.deep>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.65rem;padding:.65rem 1rem;color:var(--blue-ink);font-weight:700;font-size:.95rem;border-radius:9px}
.deep>summary::-webkit-details-marker{display:none}
.deep>summary::before{content:"";flex:none;width:.45rem;height:.45rem;margin-left:.15rem;border-right:2px solid;border-bottom:2px solid;transform:rotate(-45deg);transition:transform .35s var(--ease)}
.deep[open]>summary::before{transform:rotate(45deg)}
.deep>summary:hover{color:var(--ink)}
.deep>:not(summary){margin:0 1.1rem;font-size:.97rem;color:var(--soft)}
.deep>:not(summary)+:not(summary){margin-top:.8em}
.deep>:last-child:not(summary){margin-bottom:1.1rem}
.deep ul,.deep ol{padding-left:1.2rem}
.deep .quote{margin-block:1rem;transform:none}

/* Fichas: the archive's index cards */
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1.1rem;align-items:start;margin:1.4rem 0 2.8rem}
.ficha{position:relative;padding:1.35rem 1.35rem 1.3rem;background:#0e0c0a;border:1px solid rgba(240,169,28,.34);border-radius:12px;box-shadow:0 12px 26px -18px rgba(0,0,0,.95)}
.ficha::before{content:"";position:absolute;inset:5px;border:1px dashed rgba(240,169,28,.2);border-radius:8px;pointer-events:none}
.ficha>*+*{margin-top:.75em}
.ficha h3{margin:0;font-size:1.32rem;color:var(--gold)}
.ficha>p{font-size:.97rem;color:var(--soft)}
.ficha>h3+p{margin-top:.55em;font-size:1.02rem;color:var(--ink)}
.ficha .quote{margin:1rem 0 .2rem;padding:1rem 1.1rem;transform:none}
.ficha .quote blockquote{font-size:1.08rem}
.ficha:has(h3:target){border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 12px 26px -18px rgba(0,0,0,.95)}

/* Timeline: a cord down the page, a dated knot at each stop */
.timeline{--d:8.5rem;position:relative;list-style:none;margin:1.6rem 0 3rem;padding:0!important}
.timeline::before{content:"";position:absolute;top:.5rem;bottom:1rem;left:calc(var(--d) + 1.4rem);width:3px;border-radius:2px;background:var(--cord)}
.hito{position:relative;max-width:calc(var(--measure) + var(--d) + 3.2rem);padding:0 0 2.3rem calc(var(--d) + 3.2rem);margin:0!important}
.hito::before{content:"";position:absolute;top:.3rem;left:calc(var(--d) + 1.4rem + 1.5px - .55rem);width:1.1rem;height:1.1rem;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--gold)}
.hito h3{margin:0;color:var(--ink)}
.hito .when{position:absolute;left:0;top:.1rem;width:var(--d);text-align:right;font-size:1.3rem;line-height:1.1;color:var(--gold)}
.hito .what{display:block;font-size:clamp(1.2rem,1.9vw,1.4rem);line-height:1.15}
.hito>*+*{margin-top:.7em}
.hito>p{color:var(--soft)}
.hito>h3+p{color:var(--ink)}
.hito:has(h3:target)::before{background:var(--gold)}

/* Sources: the archive index */
.sources{padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--line);background:#0a0807}
.sources h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.src-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.9rem;width:fit-content}
.src-fold>summary::-webkit-details-marker{display:none}
.src-fold>summary::after{content:"";width:.6rem;height:.6rem;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translateY(-25%);transition:transform .35s var(--ease)}
.src-fold[open]>summary::after{transform:rotate(225deg)}
.src-fold>summary h2{display:flex;align-items:center;gap:.7rem}
.src-fold .n{font:700 .95rem/1 var(--text);padding:.35em .6em;border:1px solid var(--gold-deep);border-radius:6px;color:var(--gold)}
.src-fold>summary:hover h2{color:var(--gold)}
.sources .note{margin-top:.6rem;max-width:var(--measure);color:var(--soft);font-size:.95rem}
.sources ol,.src-list{counter-reset:n;list-style:none;margin:1.5rem 0 0;padding:0!important;columns:2 30rem;column-gap:3rem;font-size:.93rem;color:var(--soft)}
.sources li,.src-list li{counter-increment:n;position:relative;break-inside:avoid;margin:0!important;padding:.7rem 0 .7rem 3.6rem;border-top:1px dotted rgba(240,169,28,.32)}
.sources li::before,.src-list li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.66rem;width:2.7rem;padding:.1rem 0;border:1px solid var(--gold-deep);border-radius:4px;text-align:center;font:700 .82rem/1.4 var(--text);font-variant-numeric:tabular-nums;color:var(--gold)}
.sources li:target,.src-list li:target{background:rgba(240,169,28,.09)}
.sources .by,.src-list .by{color:var(--ink);font-weight:700}
.t-sources .prose h2{margin-top:1.8em}

/* The event, sewn at the end of each page */
.cta-event{padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(2.5rem,6vw,4rem)}
.sewn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem 1.8rem;align-items:center;padding:clamp(1.5rem,3vw,2.1rem) clamp(1.5rem,3.5vw,2.6rem)}
.sewn img{position:relative;width:112px;height:112px;border-radius:50%;box-shadow:0 8px 16px -8px rgba(0,0,0,.9)}
.sewn .h{font:400 clamp(1.4rem,2.6vw,2rem)/1.1 var(--display)}
.sewn p+p{margin-top:.4rem;color:var(--soft)}
.sewn .btn{position:relative}

/* Home: Up Rock in one minute, then the archive doors (patches of different colors and sizes) */
.l-home .page-body{padding-top:clamp(1.5rem,4vw,2.8rem)}
.l-home .prose>h2{max-width:24ch}
.minute{list-style:none;padding:0!important;margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:0 2.5rem;max-width:74rem}
.minute li{padding:1.1rem 0;border-top:2px dashed rgba(240,169,28,.32);margin:0!important;color:var(--soft)}
.minute li strong{display:block;font:400 1.25rem/1.2 var(--display);color:var(--ink);margin-bottom:.35rem}
.wall{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:clamp(1rem,2vw,1.4rem);margin:1.8rem 0 1rem}
.flyer{--r:-.6deg;position:relative;grid-column:span 4;display:flex;flex-direction:column;gap:.5rem;min-height:11.5rem;padding:1.5rem 1.45rem 1.3rem;border-radius:16px;text-decoration:none;color:var(--ink);background:var(--twill);
  transform:rotate(var(--r));box-shadow:0 0 0 1px rgba(240,169,28,.4),0 14px 28px -16px rgba(0,0,0,.95);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.flyer::before{content:"";position:absolute;inset:7px;border:1.5px dashed currentColor;border-radius:10px;opacity:.38;pointer-events:none}
.flyer b{font:400 clamp(1.55rem,2.4vw,2.2rem)/1 var(--display);color:var(--gold)}
.flyer span{font-size:.98rem;line-height:1.45;color:var(--soft)}
.flyer em{margin-top:auto;font-style:normal;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.flyer:hover,.flyer:focus-visible{color:var(--ink);transform:rotate(0) translateY(-3px);box-shadow:0 0 0 2px var(--gold),0 20px 34px -14px rgba(0,0,0,.95)}
.flyer.wide{grid-column:span 8;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:.4rem 1.5rem;min-height:9rem}
.flyer.wide b{flex:1 1 100%}
.flyer.wide span{flex:1 1 20rem}
.flyer.wide em{margin:0 0 0 auto}
.flyer.tall{grid-row:span 2}
.flyer.gold{background:var(--gold);color:#140c00}
.flyer.gold b,.flyer.gold span{color:#140c00}
.flyer.red{background:var(--red)}
.flyer.red b,.flyer.red span{color:var(--ink)}
.flyer.ink{background:#000;box-shadow:0 0 0 2px var(--gold-deep),0 14px 28px -16px rgba(0,0,0,.95)}
.flyer:is(.gold):hover,.flyer:is(.gold):focus-visible{color:#140c00}
.flyer:nth-child(3n+2){--r:.8deg}
.flyer:nth-child(4n+3){--r:-.3deg}
.flyer:nth-child(5n){--r:.5deg}
.flyer.event{grid-column:span 8;min-height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;--r:-.3deg;background:var(--gold);color:#140c00}
.flyer.event b{font-size:clamp(1.9rem,4vw,3.1rem);color:#140c00}
.flyer.event span{color:#140c00}
.flyer.event em{margin:0 0 0 auto}

/* Guide pages: the answer first, then blocks that change shape as the page goes */
.l-guide .prose{max-width:none}
.l-guide .prose>:not(.tiles,.cards,.split,.compare,.pull,.doors,.bleed,.statement,.moves,.rounds,.versus,.index,.names,.program){max-width:var(--measure)}
.l-guide .prose h2{margin-top:2.4em}
.l-guide .prose>h2:first-child{margin-top:0}
img.pic{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#0d0b09;box-shadow:0 0 0 1px rgba(243,236,224,.14),0 18px 32px -20px rgba(0,0,0,.95)}
.tiles ul{list-style:none;padding:0!important;margin:1.3rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem}
.tiles li{margin:0!important;padding:1.25rem 1.2rem 1.3rem;border-radius:14px;background:#0e0c0a;box-shadow:0 0 0 1px rgba(240,169,28,.32);color:var(--soft);font-size:.98rem;line-height:1.45}
.tiles li strong{display:block;margin-bottom:.45rem;font:400 clamp(1.35rem,2.2vw,1.75rem)/1.05 var(--display);color:var(--gold)}
.tiles li:nth-child(2){background:var(--red);color:var(--ink);box-shadow:none}
.tiles li:nth-child(2) strong{color:var(--ink)}
.tiles li:nth-child(3){background:var(--ink);color:#2a2118;box-shadow:none}
.tiles li:nth-child(3) strong{color:var(--red-deep)}
.tiles li:nth-child(4){background:#0c1522;box-shadow:0 0 0 1px rgba(79,127,176,.6)}
.tiles li:nth-child(4) strong{color:var(--blue-ink)}
.tiles li:nth-child(5){background:var(--gold);color:#140f05;box-shadow:none}
.tiles li:nth-child(5) strong{color:#140f05}
.tiles li:nth-child(3) a.cite{border-color:#7a6a55;color:#5a4a36}
.cards ul,.doors ul{list-style:none;padding:0!important;margin:1.3rem 0 0;display:grid;gap:1.4rem}
.cards ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.doors ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.cards li,.doors li{margin:0!important;color:var(--soft);font-size:.98rem;line-height:1.5}
.cards li strong{display:block;margin:.9rem 0 .3rem;font:400 1.7rem/1 var(--display);color:var(--gold)}
.cards li>a:last-child{display:inline-block;margin-top:.7rem;font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase}
.doors li{position:relative;padding-bottom:.2rem}
.doors li>a{display:block;margin:.75rem 0 .25rem;font:400 1.3rem/1.1 var(--display);text-decoration:none}
.doors li>a strong{color:var(--gold)}
.doors li>a::after{content:"";position:absolute;inset:0}
.doors li:hover img.pic{box-shadow:0 0 0 2px var(--gold),0 18px 32px -20px rgba(0,0,0,.95)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:1.3rem}
.split>:first-child{grid-column:1;grid-row:1/span 20}
.split>:not(:first-child){grid-column:2;margin:0 0 1rem}
.split.flip>:first-child{grid-column:2}
.split.flip>:not(:first-child){grid-column:1}
.split ol{list-style:none;counter-reset:paso;padding:0!important}
.split ol li{counter-increment:paso;position:relative;margin:0!important;padding:.75rem 0 .8rem 3.4rem;border-top:1px dashed rgba(240,169,28,.3);color:var(--soft)}
.split ol li:first-child{border-top:0;padding-top:.1rem}
.split ol li::before{content:counter(paso);position:absolute;left:0;top:.55rem;font:400 2.3rem/1 var(--display);color:var(--red)}
.split ol li:first-child::before{top:0}
.split ol li strong{color:var(--ink)}
.compare table{display:table;max-width:44rem;margin-top:1rem;font-size:1rem}
.compare th,.compare td{padding:.85rem .9rem}
.compare th:nth-child(2),.compare td:nth-child(2){background:rgba(240,169,28,.1);color:var(--ink)}
.compare td:first-child{color:var(--gold);font-weight:700}
.pull .quote{max-width:none;margin:2.6rem 0 .4rem;padding:clamp(1.8rem,4vw,2.8rem) clamp(1.5rem,5vw,4rem);background:var(--red);color:var(--ink);transform:none;text-align:center}
.pull .quote::before{border-color:rgba(243,236,224,.35)}
.pull .quote blockquote{font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.15;color:var(--ink)}
.pull .quote blockquote::before{color:var(--gold)}
.pull .quote figcaption,.pull .quote .who{color:var(--ink)}
.pull .quote a.cite{background:transparent;color:var(--ink);border-color:rgba(243,236,224,.6)}

/* ============ 2026-10-31 · Overdrive: the battle poster ============ */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-heavy:cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
/* film grain over everything, fixed so it never repaints with the scroll */
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}

/* Buttons: a pill with its own arrow island */
.btn{gap:.75rem;padding:.85rem .9rem .85rem 1.35rem;transition:transform .5s var(--ease-heavy),background-color .3s var(--ease-out),color .3s var(--ease-out),box-shadow .5s var(--ease-heavy)}
.btn:active{transform:scale(.97)}
.btn .arr{position:relative;flex:none;width:2rem;height:2rem;border-radius:50%;background:rgba(20,12,0,.15);transition:transform .55s var(--ease-heavy)}
.btn .arr::before{content:"";position:absolute;inset:0;margin:auto;width:.48rem;height:.48rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateX(-2px) rotate(45deg)}
.btn-line .arr{background:rgba(240,169,28,.16)}
.btn:hover .arr,a:hover>.btn .arr{transform:translateX(4px) scale(1.06)}

/* ---- Home: you scroll into the patch and the battle opens up ---- */
.intro{position:relative;background:#000;color:var(--ink)}
.intro-stage{position:relative;min-height:calc(100dvh - 4.25rem);overflow:hidden;display:grid;align-content:end}
.intro-patch{position:absolute;top:0;right:0;width:56%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:58% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
.intro-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden}
.intro-copy{position:relative;z-index:1;padding-block:clamp(3rem,10vh,7rem) clamp(1.5rem,4vh,2.5rem)}
.intro h1{max-width:9ch;font-size:clamp(2.8rem,5vw,4.3rem);line-height:.9;letter-spacing:-.01em;color:var(--ink);text-shadow:0 6px 30px rgba(0,0,0,.65)}
.intro .h1a{display:block}
.intro .h1b{display:block;margin-top:.9rem;font-size:max(1.15rem,.3em);line-height:1.1;letter-spacing:.01em;color:var(--gold)}
.intro .when{display:inline-block;margin:0 0 1.3rem;padding:.5em .85em;border-radius:8px;background:var(--red);font:400 clamp(1.1rem,1.7vw,1.5rem)/1.1 var(--display);box-shadow:0 14px 26px -14px rgba(200,22,29,.9)}
.intro .where{margin-top:.8rem;font-weight:700;font-size:1.08rem;color:var(--soft)}
.intro .ctas{margin-top:1.8rem}
.intro-line{position:relative;z-index:1;padding-bottom:clamp(2rem,6vh,3.5rem)}
.intro-line .lead{max-width:40ch;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--soft)}
.intro h1{animation:slam 1s var(--ease-out) both}
.intro .when{animation:slam 1s .12s var(--ease-out) both}
@keyframes slam{from{opacity:0;transform:scale(1.14);filter:blur(10px)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .intro{height:250dvh;view-timeline:--intro block}
    .intro-stage{position:sticky;top:4.25rem;height:calc(100dvh - 4.25rem);min-height:0}
    .intro-copy{padding-top:4rem}
    .intro-patch{animation:patch-go linear both;animation-timeline:--intro;animation-range:contain 0% contain 44%}
    .intro-scene{visibility:visible;animation:scene-in linear both;animation-timeline:--intro;animation-range:contain 30% contain 66%}
    .intro-copy{animation:copy-out linear both;animation-timeline:--intro;animation-range:contain 4% contain 34%}
    .intro-line{position:absolute;inset:auto 0 0;pointer-events:none;padding-bottom:clamp(2.5rem,9vh,6rem);animation:line-in linear both;animation-timeline:--intro;animation-range:contain 60% contain 88%}
    .intro-line .lead{max-width:30ch;font:400 clamp(1.4rem,2.5vw,2.15rem)/1.16 var(--display);color:var(--ink);text-shadow:0 4px 24px rgba(0,0,0,.85)}
    .intro-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 55%);opacity:0;animation:line-in linear both;animation-timeline:--intro;animation-range:contain 55% contain 80%}
  }
}
@keyframes patch-go{60%{opacity:1}to{transform:scale(3.2);opacity:0}}
@keyframes scene-in{from{opacity:0;transform:scale(1.3)}to{opacity:1;transform:none}}
@keyframes copy-out{to{opacity:0;transform:translateY(-14vh);filter:blur(6px)}}
@keyframes line-in{from{opacity:0;transform:translateY(8vh)}to{opacity:1;transform:none}}

/* ---- Guide pages: full-bleed cover, title on the art ---- */
.cover{position:relative;isolation:isolate;display:grid;align-items:end;min-height:min(86dvh,54rem);overflow:hidden;background:#000;view-timeline:--cover block}
.cover-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,4,4,.25),rgba(5,4,4,.05) 30%,rgba(5,4,4,.82) 76%,var(--bg))}
.cover-text{padding-block:7rem clamp(2.5rem,6vw,4.5rem)}
.cover .crumbs a,.cover .crumbs li{color:var(--ink)}
.cover h1{max-width:11ch;font-size:clamp(3.1rem,8.6vw,6rem);line-height:.9;color:var(--ink);text-shadow:0 6px 34px rgba(0,0,0,.7);animation:slam 1.05s var(--ease-out) both}
.cover .lead{max-width:44ch;margin-top:1.4rem;font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.45;color:var(--ink);text-shadow:0 2px 16px rgba(0,0,0,.8);animation:rise .9s .15s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cover-img{animation:drift linear both;animation-timeline:--cover;animation-range:exit 0% exit 100%}
  }
}
@keyframes drift{to{transform:translateY(18%) scale(1.08)}}

/* ---- Ticker: red tape across the page ---- */
.ticker{position:relative;z-index:2;overflow:hidden;margin-block:clamp(2rem,5vw,3.5rem);padding:.85rem 0;background:var(--red);transform:rotate(-1.5deg);box-shadow:0 18px 30px -18px rgba(0,0,0,.95)}
.ticker::before,.ticker::after{content:"";position:absolute;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,rgba(243,236,224,.55) 0 10px,transparent 10px 18px)}
.ticker::before{top:5px}.ticker::after{bottom:5px}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker span{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem;font:400 clamp(1.5rem,3.2vw,2.5rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.ticker span::after{content:"";width:.7em;height:.7em;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ticker span:nth-child(3n+2){color:transparent;-webkit-text-stroke:1.5px var(--ink)}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---- The event as a ticket at the end of the pages ---- */
.ticket{padding:clamp(2rem,6vw,4.5rem) 0}
.ticket .wrap{filter:drop-shadow(0 26px 34px rgba(0,0,0,.75))}
.ticket-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.2rem clamp(1.5rem,3vw,2.6rem);padding:clamp(1.3rem,3vw,2rem) clamp(1.6rem,4vw,3.2rem);border-radius:20px;background:var(--gold);color:#140c00;text-decoration:none;
  -webkit-mask:radial-gradient(circle 16px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 16px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;transition:transform .6s var(--ease-heavy)}
.ticket-in:hover{color:#140c00;transform:translateY(-4px) rotate(-.5deg)}
.ticket-in img{width:120px;height:120px;border-radius:50%;box-shadow:0 10px 18px -8px rgba(0,0,0,.6)}
.ticket-in .t-body{position:relative;padding-left:clamp(1.5rem,3vw,2.6rem);border-left:2px dashed rgba(20,12,0,.4)}
.ticket-in .h{display:block;font:400 clamp(1.7rem,3.4vw,2.7rem)/1 var(--display)}
.ticket-in .p{display:block;margin-top:.5rem;font-weight:700;font-size:1.02rem}
.ticket-in .count{display:inline-block;margin-top:.8rem;padding:.35rem .75rem;border-radius:7px;background:#140c00;color:var(--gold);font-weight:800;font-size:.92rem;letter-spacing:.02em}
.ticket-in .count[hidden]{display:none}
.ticket-in .btn{background:#140c00;color:var(--gold);outline-color:rgba(240,169,28,.4)}
.ticket-in .btn .arr{background:rgba(240,169,28,.18)}

/* ---- Poster sections inside the body ---- */
:is(.l-guide,.l-home) .prose h2{font-size:clamp(2.3rem,5.6vw,4rem);line-height:.95;margin-top:2.2em}
:is(.l-guide,.l-home) .prose>h2:first-child{margin-top:.4em}
.statement p{max-width:26ch;font:400 clamp(1.65rem,3.6vw,2.85rem)/1.16 var(--display);color:var(--ink);text-wrap:balance}
.statement strong{color:var(--gold)}
.statement a.cite{font-size:.3em;vertical-align:1.3em;opacity:.6}

/* the three moves as a comic page: one tall panel, two stacked, black gutters */
.moves ul{list-style:none;margin:1.6rem 0 0;padding:12px!important;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-auto-rows:minmax(15rem,auto);gap:12px;background:#000;border-radius:6px;box-shadow:0 0 0 1px rgba(243,236,224,.14),0 30px 50px -30px rgba(0,0,0,.95)}
.moves li{position:relative;container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-end;min-height:17rem;margin:0!important;padding:clamp(1rem,2.4vw,1.6rem);overflow:hidden;color:var(--ink);font-size:1rem;line-height:1.45;isolation:isolate}
.moves li:first-child{grid-row:span 2;clip-path:polygon(0 0,100% 0,97% 100%,0 100%)}
.moves li:nth-child(2){clip-path:polygon(3% 0,100% 0,100% 100%,0 100%)}
.moves li:nth-child(2) img.pic{object-position:50% 12%}
.moves li:nth-child(2)>a{left:auto;right:clamp(1rem,2.4vw,1.6rem);transform:rotate(4deg);transform-origin:100% 50%}
.moves li:nth-child(2):hover>a{transform:rotate(1deg) scale(1.04)}
.moves li:nth-child(3){clip-path:polygon(0 0,100% 0,100% 100%,3% 100%)}
.moves li img.pic{position:absolute;inset:0;z-index:-2;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;transition:transform 1.1s var(--ease-heavy)}
.moves li::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.88))}
.moves li>a{position:absolute;top:clamp(.8rem,2vw,1.4rem);left:clamp(1rem,2.4vw,1.6rem);text-decoration:none;transform:rotate(-4deg);transform-origin:0 50%;transition:transform .6s var(--ease-heavy)}
.moves li>a::after{content:"";position:absolute;inset:-60rem}
.moves li>a strong{font:400 min(5.4rem,12.5cqi)/.9 var(--display);text-transform:uppercase;color:var(--gold);-webkit-text-stroke:.08em #000;paint-order:stroke fill;text-shadow:0 8px 22px rgba(0,0,0,.75)}
.moves li:nth-child(2)>a strong{color:var(--ink)}
.moves li:nth-child(3)>a strong{color:#ff5a3c}
.moves li a.cite{position:relative;z-index:2}
.moves li:hover img.pic,.moves li:focus-within img.pic{transform:scale(1.07)}
.moves li:hover>a{transform:rotate(-1deg) scale(1.04)}
.moves li>a:focus-visible{outline-offset:6px}

/* how a battle runs: the image holds still while the rounds go by */
.rounds{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start;margin-top:1.6rem}
.rounds>:first-child{position:sticky;top:6rem;margin:0}
.rounds>img.pic:first-child{aspect-ratio:4/3}
.rounds ol{list-style:none;counter-reset:r;margin:0;padding:0!important}
.rounds ol li{counter-increment:r;position:relative;display:block;padding-left:clamp(4.6rem,9vw,7rem)!important;min-height:clamp(9rem,24vh,14rem);margin:0!important;padding:1.4rem 0;border-top:1px solid var(--line);color:var(--soft);font-size:1.08rem}
.rounds ol li::before{content:counter(r);position:absolute;left:0;top:1.3rem;font:400 clamp(3.4rem,7vw,5.6rem)/.8 var(--display);color:transparent;-webkit-text-stroke:2px var(--red)}
.rounds ol li strong{display:block;margin-bottom:.35rem;font:400 clamp(1.5rem,2.6vw,2.1rem)/1 var(--display);color:var(--ink)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rounds ol li{animation:round-in linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
    .rounds ol li::before{animation:round-num linear both;animation-timeline:view();animation-range:cover 18% cover 45%}
  }
}
@keyframes rise-v{from{opacity:0;transform:translateY(30px)}}
@keyframes round-in{from{opacity:.15;transform:translateX(40px)}}
@keyframes round-num{to{color:var(--red)}}

/* Up Rock versus breaking: a fight card */
.versus{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;margin-top:1.6rem}
.vs-side{padding:clamp(1.6rem,3.5vw,2.8rem);border-radius:18px}
.vs-side h3{margin:0 0 1.2rem!important;font-size:clamp(2rem,4.4vw,3.3rem)!important;line-height:.95}
.vs-side ul{list-style:none;margin:0;padding:0!important;display:grid;gap:1rem}
.vs-side li{margin:0!important;font-size:1.05rem}
.vs-side li b{display:block;margin-bottom:.15rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.vs-a{background:var(--gold);color:#140c00}
.vs-a h3{color:#140c00!important}
.vs-a a.cite{border-color:rgba(20,12,0,.5);color:#140c00}
.vs-b{background:#0e0c0a;box-shadow:0 0 0 1px rgba(243,236,224,.18);color:var(--soft)}
.vs-b h3{color:var(--ink)!important}
.vs-b li b{color:var(--gold)}
.vs-mid{align-self:center;z-index:1;display:grid;place-items:center;width:clamp(4.6rem,8vw,6.4rem);aspect-ratio:1;margin-inline:-1.6rem;border-radius:50%;background:var(--red);font:400 clamp(1.6rem,3vw,2.3rem)/1 var(--display);color:var(--ink);box-shadow:0 0 0 6px var(--bg),0 18px 28px -10px rgba(0,0,0,.9)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .vs-a{animation:from-left linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    .vs-b{animation:from-right linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    .vs-mid{animation:vs-pop linear both;animation-timeline:view();animation-range:cover 20% cover 40%}
  }
}
@keyframes from-left{from{opacity:0;transform:translateX(-12%) rotate(-2deg)}}
@keyframes from-right{from{opacity:0;transform:translateX(12%) rotate(2deg)}}
@keyframes vs-pop{from{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.18) rotate(6deg)}to{transform:none}}

/* where it started: the art full width, a rubber stamp on it */
.origin{position:relative;isolation:isolate;display:grid;align-items:end;min-height:min(92dvh,52rem);margin-top:1.8rem;overflow:hidden}
.origin>:first-child{position:absolute;inset:0;z-index:-2;margin:0}
.origin>img.pic:first-child{height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
.origin::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,4,4,.9),rgba(5,4,4,.35) 46%,transparent 70%),linear-gradient(0deg,var(--bg),transparent 26%),linear-gradient(180deg,var(--bg),transparent 14%)}
.origin-text{width:min(1180px,100% - 2rem);margin:0 auto;padding-block:clamp(3rem,8vw,6rem)}
.origin-text>*{max-width:46ch}
.origin-text>*+*{margin-top:1em}
.origin-text p{color:var(--ink);font-size:1.1rem}
.stamp{display:inline-block;max-width:none!important;padding:.45em .8em .5em;border:4px double var(--red);border-radius:6px;font:400 clamp(1.9rem,5vw,3.9rem)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#ff4a3d!important;background:rgba(200,22,29,.08);transform:rotate(-5deg);mix-blend-mode:screen}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .stamp{animation:stamp linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
  }
}
@keyframes stamp{0%{opacity:0;transform:rotate(-14deg) scale(2.2)}70%{opacity:1;transform:rotate(-4deg) scale(.94)}to{opacity:1;transform:rotate(-5deg)}}

/* the names, set as a run of lettering */
.names ul{list-style:none;margin:1.2rem 0 0;padding:0!important;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem}
.names li{display:flex;align-items:center;gap:1.4rem;margin:0!important;font:400 clamp(1.7rem,4vw,3rem)/1.1 var(--display);color:var(--ink)}
.names li:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--gold)}
.names li:not(:last-child)::after{content:"";width:.5em;height:.5em;background:var(--red);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.names strong{color:inherit}

/* the next doors: an index with the art sliding in */
.index ul{list-style:none;margin:1.4rem 0 0;padding:0!important;border-bottom:1px solid var(--line)}
.index li{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) clamp(7rem,14vw,11rem);align-items:center;gap:1rem 2rem;margin:0!important;padding:1.1rem .4rem;border-top:1px solid var(--line);color:var(--soft);font-size:1rem;transition:background-color .4s var(--ease-out)}
.index li>a{grid-column:1;grid-row:1;font:400 clamp(1.9rem,4.4vw,3.4rem)/1 var(--display);text-decoration:none;transition:transform .55s var(--ease-heavy),color .3s}
.index li>a strong{color:var(--ink);transition:color .3s}
.index li>a::after{content:"";position:absolute;inset:0}
.index li img.pic{grid-column:3;grid-row:1;border-radius:4px;transform:rotate(2deg) scale(.92);opacity:.7;transition:transform .6s var(--ease-heavy),opacity .4s}
.index li:hover{background:rgba(240,169,28,.06)}
.index li:hover>a{transform:translateX(.6rem)}
.index li:hover>a strong{color:var(--gold)}
.index li:hover img.pic{transform:rotate(-1.5deg) scale(1.04);opacity:1}
.index li a.cite{position:relative;z-index:1}
.index li:nth-child(odd) img.pic{transform:rotate(-2deg) scale(.92)}

/* home: the day, set like a fight card */
.program{position:relative;margin-top:2rem;padding:clamp(2.5rem,6vw,5rem) 0;background:var(--gold);color:#140c00}
.program-in{width:min(1180px,100% - 2rem);margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem clamp(2rem,6vw,5rem);align-items:center}
.program .date{font:400 clamp(4.5rem,13vw,9.5rem)/.82 var(--display);letter-spacing:-.02em}
.program .date span{display:block;font-size:.34em;letter-spacing:.04em}
.program h2{margin:0!important;color:#140c00!important;font-size:clamp(2rem,4.4vw,3.4rem)!important}
.program h2::after{background:#140c00!important}
.program ul{list-style:none;margin:1.3rem 0 0;padding:0!important;display:flex;flex-wrap:wrap;gap:.6rem}
.program li{margin:0!important;padding:.55rem 1rem;border-radius:999px;background:#140c00;color:var(--gold);font-weight:800}
.program li::marker{content:none}
.program p{margin-top:1.1rem!important;font-weight:700;font-size:1.1rem}
.program a:not(.btn){color:#140c00}
.program .ctas{margin-top:1.5rem}
.program .btn-gold{background:#140c00;color:var(--gold)}
.program .btn-gold .arr{background:rgba(240,169,28,.18)}
.program .count{display:inline-block;margin-left:.6rem;padding:.3rem .65rem;border-radius:7px;border:2px solid #140c00;font-weight:800}
.program .count[hidden]{display:none}

/* the pull quote: a full-width red band */
.pull{margin-top:2.6rem}
.pull .quote{border-radius:0;margin:0}

/* Footer */
footer{position:relative;padding:2.6rem 0 3rem;color:var(--soft);font-size:.92rem;background:#000}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--cord)}
footer .wrap{display:flex;flex-direction:column;gap:1rem}
footer .pages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem 1.3rem}
footer a{color:var(--soft)}
footer a:hover{color:var(--gold)}
.legal{padding:4rem 0;max-width:68ch}
.legal h1{font-size:2.4rem;margin:1.5rem 0}
.legal p+p{margin-top:1rem}
.legal h2{font-size:1.8rem;margin:3rem 0 1rem}

/* el menú entero necesita ~1080 px en inglés: por debajo del ancho de la web, se pliega en «Menu» */
@media (max-width:1180px){
  .nav{display:none}
  .menu{display:block;margin-left:auto}
}
@media (max-width:900px){
  .lang .full{display:none}.lang .code{display:inline}
  .home-hero .wrap{grid-template-columns:1fr;grid-template-areas:"a" "p" "l"}
  .announce{transform:none}
  .page-head.has-img .wrap{grid-template-columns:minmax(0,1fr)}
  .page-body.has-toc{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
  .timeline{--d:0rem}
  .timeline::before{left:.45rem}
  .hito{padding-left:2.4rem}
  .hito::before{left:calc(.45rem + 1.5px - .55rem)}
  .hito .when{position:static;display:block;width:auto;text-align:left;font-size:1.1rem;margin-bottom:.25rem}
  .wall{grid-template-columns:1fr 1fr}
  .flyer,.flyer.wide,.flyer.event{grid-column:span 2}
  .flyer.tall{grid-row:auto}
  .tiles ul,.doors ul{grid-template-columns:1fr 1fr}
  .tiles li:last-child:nth-child(odd){grid-column:1/-1}
  .cards ul{grid-template-columns:1fr}
  .cards li{display:flow-root}
  .cards li img.pic{float:left;width:min(42%,11rem);margin:.2rem 1rem .4rem 0;aspect-ratio:1}
  .cards li strong{margin-top:0}
  .split,.split.flip{grid-template-columns:minmax(0,1fr)}
  .split>:first-child,.split.flip>:first-child,.split>:not(:first-child),.split.flip>:not(:first-child){grid-column:1;grid-row:auto}
  .split>:first-child{margin-bottom:1.2rem}
}
@media (max-width:640px){
  .sewn{grid-template-columns:auto minmax(0,1fr)}
  .sewn img{width:64px;height:64px}
  .sewn .btn{grid-column:1/-1;justify-self:start}
  .announce::after,.band::after,.sewn::after{inset:9px}
  .quote{padding:1.1rem 1.15rem 1rem}
}
@media (max-width:520px){
  .brand{font-size:.86rem;gap:.45rem}
  .brand img{width:34px;height:34px}
  .brand{white-space:normal;line-height:1.05;font-size:.92rem}
  .top .wrap{gap:.6rem}
  .band h1{font-size:clamp(1.6rem,8.4vw,2rem)}
}

@media (max-width:899px){
  .intro-stage{align-content:end;min-height:calc(100dvh - 4.25rem)}
  .intro-patch{width:100%;height:auto;aspect-ratio:1;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent);transform-origin:50% 50%}
  .intro-copy{padding-top:min(92vw,30rem)}
  .intro h1{font-size:clamp(2.6rem,12vw,3.6rem)}
  .ticket-in{grid-template-columns:auto minmax(0,1fr)}
  .ticket-in img{width:72px;height:72px}
  .ticket-in .t-body{padding-left:1.1rem}
  .ticket-in .btn{grid-column:1/-1;justify-self:start}
  .moves ul{grid-template-columns:minmax(0,1fr);padding:8px!important;gap:8px}
  .moves li:first-child{grid-row:auto}
  .moves li,.moves li:first-child,.moves li:nth-child(2),.moves li:nth-child(3){clip-path:none;min-height:clamp(15rem,70vw,22rem)}
  .rounds{grid-template-columns:minmax(0,1fr)}
  .rounds>:first-child{position:static}
  .rounds>img.pic:first-child{aspect-ratio:16/9}
  .rounds ol li{min-height:0;padding-left:3.8rem!important}
  .versus{grid-template-columns:minmax(0,1fr)}
  .vs-mid{justify-self:center;margin:-1.4rem 0;width:4.4rem}
  .origin{min-height:auto}
  .origin>:first-child{position:relative;inset:auto}
  .origin>img.pic:first-child{height:auto;aspect-ratio:4/3}
  .origin::after{background:linear-gradient(0deg,var(--bg) 42%,rgba(5,4,4,.0) 70%)}
  .origin-text{margin-top:-6rem;padding-top:0}
  .index li{grid-template-columns:minmax(0,1fr) 6.5rem;gap:.4rem 1rem;padding:.9rem .2rem}
  .index li img.pic{grid-column:2;grid-row:1/span 2}
  .index li>a{font-size:clamp(1.6rem,7vw,2.2rem)}
  .program-in{grid-template-columns:minmax(0,1fr)}
  .rounds ol li,.vs-a,.vs-b{animation-name:rise-v}
}
@media (max-width:520px){
  .ticket-in{padding:1.3rem 1.4rem;-webkit-mask:none;mask:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* «More coming soon» (Moi, 31/10): lo que sigue en estudio no se enseña a medias */
.soon{margin:2.2rem 0 0;padding:1rem 1.2rem;border:1px dashed var(--gold-deep);border-radius:10px;background:#0d0a06;color:var(--soft)}
.soon p{margin:0}.soon strong{color:var(--gold)}
/* Newsletter: nombre o aka, email y país obligatorios; crew opcional (worker.js → D1) */
.newsletter{margin:2.5rem 0;padding:clamp(1.4rem,4vw,2.4rem);border:1px solid var(--line);border-radius:14px;background:var(--twill)}
.prose .newsletter h2{margin-top:0}
.newsletter form{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem 1.2rem;margin-top:1.2rem}
.newsletter label{display:grid;gap:.35rem;font-weight:700;font-size:.92rem}
.newsletter input:not([type=checkbox]){width:100%;padding:.7rem .85rem;border:1px solid var(--gold-deep);border-radius:8px;background:#050404;color:var(--ink);font:inherit;font-weight:400}
.newsletter input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.newsletter .consent{grid-column:1/-1;display:flex;gap:.6rem;align-items:flex-start;font-weight:400;color:var(--soft)}
.newsletter .consent input{margin-top:.3rem;accent-color:var(--gold)}
.newsletter .btn{justify-self:start;border:0;cursor:pointer;font-size:1rem}
.newsletter .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nl-msg{display:none;margin:1rem 0 0;padding:.8rem 1rem;border-radius:8px;font-weight:700}
.nl-msg:target{display:block}
.nl-msg.ok{background:var(--gold);color:#140c00}.nl-msg.err{background:var(--red-deep);color:var(--ink)}