/* Decem Mafia Club. Hand-written; no framework. Tokens first, then base, layout, blocks, motion.
   Motion rule: every animation drives ONE registered custom property on a wrapper, children derive from it,
   so a whole scene is 1 animation object (keeps document.getAnimations() tiny). Initial values = FINAL frame,
   so reduced-motion / no-JS / no-@property all show the finished state. */
@font-face{font-family:"DMC Display";src:url(../fonts/display.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"DMC Body";src:url(../fonts/body.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"DMC Mono";src:url(../fonts/mono.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

@property --fly{syntax:"<number>";inherits:true;initial-value:1}
@property --draw{syntax:"<number>";inherits:true;initial-value:1}
@property --stamp{syntax:"<number>";inherits:true;initial-value:1}
@property --glow{syntax:"<number>";inherits:true;initial-value:1}
@property --dim{syntax:"<number>";inherits:true;initial-value:0}
@property --ce{syntax:"<number>";inherits:true;initial-value:1}
@property --me{syntax:"<number>";inherits:true;initial-value:1}
@property --mg{syntax:"<number>";inherits:true;initial-value:0}
@property --vic{syntax:"<number>";inherits:true;initial-value:1}
@property --lit{syntax:"<number>";inherits:true;initial-value:1}

:root{
  --ink:#0b0b0c;--ink-2:#141416;--ink-3:#1d1d20;--line:#2e2e32;
  --bone:#efe9df;--bone-2:#d8d1c4;--ash:#a09b92;
  --red:#d0201f;--red-btn:#bd1d1c;--red-hi:#f0524d;
  --serif:"DMC Display","Noto Serif Display",Georgia,"Times New Roman",serif;
  --sans:"DMC Body",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"DMC Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1120px;--hdr:64px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0;background:var(--ink);color:var(--bone);font:400 1.0625rem/1.6 var(--sans);overflow-x:clip;min-width:320px}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 1em;max-width:62ch;text-wrap:pretty}
ol,ul{margin:0;padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--bone);color:var(--ink);padding:12px 16px;z-index:100;font-weight:600}
.skip:focus{left:8px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.mono{font-family:var(--mono)}

/* ---------- header ---------- */
.hdr{position:relative;z-index:30;border-bottom:1px solid var(--line);background:var(--ink)}
.hdr__in{display:flex;align-items:center;gap:8px;min-height:var(--hdr)}
.brand{flex:none;display:flex;align-items:center;gap:12px;text-decoration:none;min-height:48px;margin-right:auto}
.brand svg{min-width:44px;flex:none}
.brand svg{width:44px;height:44px;flex:none}
.brand__t{font:700 1.125rem/1 var(--serif);letter-spacing:.01em;display:none}
.nav{display:flex;flex-wrap:wrap;gap:0 4px;width:100%;order:9}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:none;color:var(--bone-2)}
.nav a:hover,.nav a[aria-current=page]{color:var(--bone)}
.nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}
.lang{display:flex}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:500 .8125rem/1 var(--mono);color:var(--ash);text-decoration:none}
.lang a[aria-current=true]{color:var(--bone);box-shadow:inset 0 -2px 0 var(--red)}
.lang a:hover{color:var(--bone)}
.menu-btn{display:none;width:48px;height:48px;border:0;background:none;color:var(--bone);cursor:pointer;place-items:center}
.menu-btn svg{width:24px;height:24px}
.hdr .hdr__cta{display:none}
.js .menu-btn{display:grid}
.js .nav{display:none;position:fixed;inset:var(--hdr) 0 0 0;flex-direction:column;flex-wrap:nowrap;gap:0;padding:16px max(16px,env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));background:var(--ink);overflow:auto;order:0;z-index:29}
.js .nav a{font:600 1.75rem/1.2 var(--serif);min-height:56px;border-bottom:1px solid var(--line);padding:0}
.nav-open .nav{display:flex}
.nav-open{overflow:hidden}
@media (min-width:480px){.brand__t{display:block}}
@media (min-width:900px){
  .hdr__in{gap:12px}
  .nav,.js .nav{display:flex;position:static;flex-direction:row;width:auto;order:0;padding:0;background:none;overflow:visible;margin-right:8px}
  .js .nav a,.nav a{font:500 .9375rem/1 var(--sans);min-height:48px;border:0;padding:0 12px}
  .menu-btn,.js .menu-btn{display:none}
  .hdr .hdr__cta{display:inline-flex}
  .nav-open{overflow:visible}
}

/* ---------- buttons ---------- */
.btn{--mx:50%;--my:50%;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:2px;font:600 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;color:var(--bone);isolation:isolate;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .2s}
.btn--red{background:var(--red-btn)}
.btn--red::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(160px 160px at var(--mx) var(--my),rgba(255,120,110,.55),transparent 70%);opacity:0;transition:opacity .25s}
.btn--red:hover{background:#cc2220}
.btn--red:hover::before{opacity:1}
.btn--ghost{border-color:var(--line);background:transparent}
.btn--ghost:hover{border-color:var(--bone-2)}
.btn--sm{min-height:44px;padding:0 18px;font-size:.9375rem}
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--bone);font-weight:500}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(28px,6vw,72px) 0 clamp(36px,7vw,88px);background:radial-gradient(60% 55% at 78% 40%,rgba(208,32,31,.16),transparent 70%)}
.hero__grid{display:grid;gap:32px;align-items:center}
.hero h1{font-size:clamp(2.5rem,9.6vw,5.75rem);line-height:1;margin-bottom:.35em;letter-spacing:-.02em}
.lead{font:500 clamp(1.125rem,3.4vw,1.5rem)/1.35 var(--sans);color:var(--bone-2);margin-bottom:1.4em}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.facts{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.facts div{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.facts dt{font:500 .8125rem/1.2 var(--mono);color:var(--ash)}
.facts dd{margin:0;font-size:1rem;line-height:1.4}
.facts a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:-10px 0}
.facts .sub{color:var(--ash);font-size:.9375rem}
.hero__art{display:grid;place-items:center;perspective:900px;pointer-events:none}
.hero__art .scope{width:100%}
.scope{--glow:.5;width:min(78vw,360px);aspect-ratio:1;border-radius:50%;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .3s ease-out;will-change:transform}
.scope svg{width:100%;height:100%;overflow:visible}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.15fr .85fr;gap:48px}
  .facts{grid-template-columns:repeat(3,1fr);border-bottom:0;gap:24px}
  .facts div{border-bottom:0;border-top:0;padding:16px 0 0;align-content:start}
  .hero__art .scope{width:min(100%,440px)}
}
.lg-dots,.lg-cross{transform-origin:110px 110px}
.lg-dots .lg-blk{stroke:var(--red-hi);stroke-opacity:0;stroke-width:1.6}
.lg-dots.is-night .lg-blk{stroke-opacity:.85}

/* logo parts (same markup in header/footer/hero). Colours are sampled from the club artwork (research/decem-logo-2026-10-23.png):
   red #e83030, white #f8f8f8; the disc is transparent, the dark page shows through. The three "black" seats are white in the artwork. */
.lg-red{fill:#e83030}
.lg-blk{fill:#f8f8f8}
.lg-rim,.lg-cross{fill:none;stroke:#f8f8f8}
.lg-glow{fill:url(#lgg);opacity:0}
.scope .lg-glow{opacity:calc(.32 + .5*var(--glow))}
/* fly-in: every mark (dots AND the sheriff star, which sits in a ring seat) flies from outside to its seat on the ring */
.scope .lg-dots .lg-m>*{--t:clamp(0,calc(var(--fly)*1.7 - var(--k)*.07),1);transform:translate(calc(var(--dx)*(1 - var(--t))*1px),calc(var(--dy)*(1 - var(--t))*1px));opacity:var(--t)}
.scope .lg-dots g:nth-child(1){--k:0;--dx:84;--dy:-67}
.scope .lg-dots g:nth-child(2){--k:1;--dx:107;--dy:-5}
.scope .lg-dots g:nth-child(3){--k:2;--dx:90;--dy:59}
.scope .lg-dots g:nth-child(4){--k:3;--dx:38;--dy:100}
.scope .lg-dots g:nth-child(5){--k:4;--dx:-28;--dy:103}
.scope .lg-dots g:nth-child(6){--k:5;--dx:-84;--dy:67}
.scope .lg-dots g:nth-child(7){--k:6;--dx:-107;--dy:5}
.scope .lg-dots g:nth-child(8){--k:7;--dx:-90;--dy:-59}
.scope .lg-dots g:nth-child(9){--k:8;--dx:-38;--dy:-100}
.scope .lg-dots g:nth-child(10){--k:9;--dx:28;--dy:-103}
.scope .lg-rim,.scope .lg-cross{stroke-dasharray:1}
.scope .lg-rim{stroke-dashoffset:calc(1 - var(--fly))}
.scope .lg-cross{stroke-dashoffset:calc(1 - var(--draw))}
.scope .lg-x{transform-origin:110px 110px;transform:scale(calc(1 + .55*(1 - var(--stamp))));opacity:var(--stamp)}

/* ---------- generic sections ---------- */
.sec{padding:clamp(56px,9vw,120px) 0}
.sec h2{font-size:clamp(1.875rem,5vw,3.25rem);margin-bottom:.5em}
.sec--alt{background:var(--ink-2)}
.pagehead{padding:clamp(24px,5vw,56px) 0 clamp(28px,5vw,56px);border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(2.125rem,7vw,4rem);margin-bottom:.4em}
.pagehead__cta{margin-top:20px}
@media (max-width:639px){.pagehead__cta .btn{width:100%}}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 4px;font:400 .875rem/1 var(--mono);color:var(--ash);margin-bottom:12px}
.crumbs li{display:flex;align-items:center;min-height:44px}
.crumbs li+li::before{content:"/";margin-right:4px;color:var(--line)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ash);text-decoration:none}
.crumbs a:hover{color:var(--bone)}
.prose h2{font-size:clamp(1.5rem,3.6vw,2.25rem);margin:0 0 .5em}
.prose .blk{padding:clamp(28px,5vw,56px) 0;border-bottom:1px solid var(--line)}
.prose .blk:last-child{border-bottom:0}
.tbd{display:inline-flex;align-items:center;gap:.6em;padding:.35em .9em;border:1px dashed var(--ash);border-radius:99px;color:var(--bone);font:500 .9375rem/1.3 var(--sans);background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.035) 6px 12px)}
.tbd::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--red);flex:none}
.tbd--sm{font-size:.8125rem;padding:.2em .7em}

/* explain */
.explain .wrap{display:grid;gap:12px}
.explain h2{font-size:clamp(2.25rem,7vw,4.75rem);max-width:14ch}
.explain p{font-size:1.1875rem;color:var(--bone-2)}
@media (min-width:900px){.explain .wrap{grid-template-columns:1fr 1fr;gap:56px;align-items:end}}

/* ---------- night scene ---------- */
.night{position:relative;background:var(--ink)}
.night__stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:16px;padding:clamp(32px,6vw,72px) 0;overflow:hidden;isolation:isolate}
.night__light{position:absolute;inset:0;z-index:-1;background:radial-gradient(52% 46% at 50% 48%,rgba(239,233,223,.14),transparent 70%);opacity:calc(1 - var(--dim))}
.night__title{font-size:clamp(1.75rem,4.5vw,3rem)}
.night__ring{width:min(100%,420px,52svh);max-width:100%;margin:0 auto;aspect-ratio:1;align-self:center;min-width:0}
.night__ring svg{width:100%;height:100%;overflow:visible}
.seat-bg{fill:#1b1b1e;stroke:var(--bone-2);stroke-width:1.5}
.seat--city .seat-bg{stroke:var(--red)}
.seat--mafia .seat-bg{stroke:var(--bone-2)}
.seat-bg,.seat-eye{transition:none}
.seat-eye{fill:var(--bone);transform-box:fill-box;transform-origin:center;transform:scaleY(var(--ce))}
.seat--mafia .seat-eye{transform:scaleY(var(--me))}
.seat-num{font:500 11px/1 var(--mono);fill:var(--ash);text-anchor:middle}
.seat-glow{fill:var(--red);opacity:0}
.seat--mafia .seat-glow{opacity:calc(.55*var(--mg))}
.seat--mafia .seat-eye{fill:color-mix(in srgb,var(--red-hi) calc(var(--mg)*100%),var(--bone))}
.seat-x{stroke:var(--red-hi);stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--vic))}
.seat--dead .seat-bg{opacity:calc(1 - .65*var(--vic))}
.seat--dead .seat-eye{opacity:calc(1 - var(--vic))}
.night__table{fill:none;stroke:var(--line);stroke-width:1.5}
.night__xmark{font:700 64px/1 var(--serif);fill:var(--red);text-anchor:middle;opacity:calc(.9 - .6*var(--dim))}
.night__caps{position:relative;min-height:5.6em;display:grid}
.night__s{display:none}
/* static default (no JS / reduced motion): captions as a plain list */
.night__caps{display:block}
.night__caps p{margin:0 0 .6em;text-align:left;max-width:none;font-size:1.0625rem}
.night__caps p::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--red);margin-right:.7em;vertical-align:.1em}

@media (prefers-reduced-motion:no-preference){
  /* animated mode: tall pinned section */
  .night{height:320vh}
  .night__stage{position:sticky;top:0;height:100vh;height:100svh;padding:clamp(20px,4vw,48px) 0 calc(clamp(20px,4vw,48px) + 76px + env(safe-area-inset-bottom))}
  @media (min-width:900px){.night__stage{padding-bottom:clamp(20px,4vw,48px)}}
  .night__caps{display:grid;min-height:5.6em}
  .night__caps p{grid-area:1/1;margin:0 auto;text-align:center;max-width:28ch;font-size:clamp(1.125rem,3.2vw,1.625rem);opacity:0}
  .night__caps p::before{display:none}
  .night__caps p:first-child{opacity:1}
  .seat-eye{transition:transform .5s ease}
  @supports (animation-timeline:view()){
    .night{view-timeline:--night block}
    .night__stage{animation:night-vars linear both;animation-timeline:--night;animation-range:cover 24% cover 76%}
    .night__caps p{animation:cap linear both;animation-timeline:--night;animation-range:cover 24% cover 76%}
    .night__caps p:nth-child(1){animation-name:cap1}
    .night__caps p:nth-child(2){animation-name:cap2}
    .night__caps p:nth-child(3){animation-name:cap3}
    .night__caps p:nth-child(4){animation-name:cap4}
    .seat-eye{transition:none}
  }
  @supports not (animation-timeline:view()){
    /* IntersectionObserver sets data-phase on .night; sentinels mark the pinned scroll slices */
    .night__s{display:block;position:absolute;left:0;width:1px;height:55vh;pointer-events:none;visibility:hidden}
    .night__s:nth-of-type(1){top:50vh}.night__s:nth-of-type(2){top:105vh}.night__s:nth-of-type(3){top:160vh}.night__s:nth-of-type(4){top:215vh}
    .night__stage{--dim:0;--ce:1;--me:1;--mg:0;--vic:0;transition:none}
    .night[data-phase="1"] .night__stage{--dim:1;--ce:.08;--me:.08}
    .night[data-phase="2"] .night__stage{--dim:1;--ce:.08;--me:1;--mg:1}
    .night[data-phase="3"] .night__stage{--dim:0;--ce:1;--me:1;--vic:1}
    .night__light{transition:opacity .7s}
    .night__caps p{transition:opacity .5s}
    .night[data-phase="0"] .night__caps p:nth-child(1),.night[data-phase="1"] .night__caps p:nth-child(2),.night[data-phase="2"] .night__caps p:nth-child(3),.night[data-phase="3"] .night__caps p:nth-child(4){opacity:1}
    .night[data-phase="1"] .night__caps p:nth-child(1),.night[data-phase="2"] .night__caps p:nth-child(1),.night[data-phase="3"] .night__caps p:nth-child(1),
    .night[data-phase="2"] .night__caps p:nth-child(2),.night[data-phase="3"] .night__caps p:nth-child(2),.night[data-phase="3"] .night__caps p:nth-child(3){opacity:0}
    .seat-x{transition:stroke-dashoffset .6s ease .2s}
  }
}
@keyframes night-vars{
  0%,16%{--dim:0;--ce:1;--me:1;--mg:0;--vic:0}
  28%,46%{--dim:1;--ce:.08;--me:.08;--mg:0;--vic:0}
  54%,66%{--dim:1;--ce:.08;--me:1;--mg:1;--vic:0}
  72%,78%{--dim:1;--ce:.08;--me:.08;--mg:0;--vic:0}
  88%{--dim:0;--ce:1;--me:1;--mg:0;--vic:0}
  98%,100%{--dim:0;--ce:1;--me:1;--mg:0;--vic:1}
}
@keyframes cap1{0%,12%{opacity:1}20%,100%{opacity:0}}
@keyframes cap2{0%,20%{opacity:0}30%,40%{opacity:1}46%,100%{opacity:0}}
@keyframes cap3{0%,48%{opacity:0}56%,64%{opacity:1}72%,100%{opacity:0}}
@keyframes cap4{0%,78%{opacity:0}88%,100%{opacity:1}}

/* ---------- roles ---------- */
.roles h2{margin-bottom:.2em}
.hint{color:var(--ash);font:400 .875rem/1.4 var(--mono);margin-bottom:24px}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rcard{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;perspective:800px;min-height:44px}
.rcard__in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.rcard[aria-pressed=true] .rcard__in{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){.rcard:hover .rcard__in{transform:rotateY(180deg)}}
.rf,.rb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;padding:14px;display:flex;flex-direction:column;overflow:hidden}
.rf{background:var(--ink-3);border:1px solid var(--line);align-items:center;justify-content:center;gap:10px;color:var(--ash);font:400 .8125rem/1.3 var(--mono);text-align:center}
.rf svg{width:44%;height:auto;opacity:.9}
.rb{transform:rotateY(180deg);justify-content:flex-end;gap:6px}
.rb h3{font-size:clamp(1.375rem,4.4vw,1.875rem)}
.rb p{margin:0;font-size:.875rem;line-height:1.4}
.rb--red{background:var(--red-btn);color:var(--bone)}
.rb--black{background:#050506;border:1px solid var(--red);color:var(--bone)}
.rb svg{position:absolute;top:14px;right:14px;width:28px;height:28px}
@media (min-width:700px){.rgrid{grid-template-columns:repeat(4,1fr);gap:16px}.rb p{font-size:.9375rem}}

/* ---------- stats (bone panel) ---------- */
.stats{background:var(--bone);color:var(--ink)}
.stats h2{color:var(--ink)}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 16px;margin:0 0 28px}
.sgrid div{border-top:2px solid var(--ink);padding-top:12px}
.sgrid dt{font:500 clamp(2.5rem,10vw,4.75rem)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sgrid dd{margin:4px 0 0;font-size:1rem;color:#3d3a35}
.src{font:400 .875rem/1.5 var(--mono);color:#4a463f}
.src a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.medals{margin-top:32px;border-top:1px solid #b9b2a4}
.medals h3{font:600 1.125rem/1.3 var(--sans);margin:16px 0 8px}
.medals li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #cfc8ba;clip-path:inset(0 calc(100%*(1 - var(--lit))) 0 0)}
.pl{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:600 1.25rem/1 var(--mono)}
.stats .link{color:var(--ink)}
@media (min-width:800px){.sgrid{grid-template-columns:repeat(4,1fr);gap:24px}}

/* ---------- flow ---------- */
.flow{counter-reset:s;position:relative;display:grid;gap:0;margin:0 0 1.5em}
.flow li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:0 16px;padding-bottom:28px;opacity:calc(.4 + .6*var(--lit))}
.flow li:last-child{padding-bottom:0}
.flow li::before{content:"";position:absolute;left:21px;top:20px;bottom:-20px;width:2px;background:var(--red);transform-origin:top;transform:scaleY(var(--lit))}
.flow li:last-child::before{display:none}
.flow__dot{grid-row:1/3;width:44px;height:44px;border-radius:50%;border:2px solid color-mix(in srgb,var(--red) calc(var(--lit)*100%),var(--line));background:var(--ink);position:relative;z-index:1}
.flow__dot::after{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--red);transform:scale(var(--lit))}
.flow h3{font:600 1.25rem/1.2 var(--mono);margin:8px 0 4px;letter-spacing:-.01em}
.flow p{margin:0;color:var(--bone-2)}
.note{font:600 1.375rem/1.3 var(--serif);margin:0 0 1em}

/* ---------- corp ---------- */
.corp{border:1px dashed var(--ash);border-radius:4px;padding:clamp(20px,4vw,40px);display:grid;gap:8px;justify-items:start}
.corp h2{font-size:clamp(1.5rem,3.6vw,2.25rem);margin:0}
.corp p{margin:0 0 8px}

/* ---------- cta ---------- */
.endcta{text-align:left;background:radial-gradient(70% 90% at 100% 100%,rgba(208,32,31,.18),transparent 70%)}
.endcta h2{font-size:clamp(2.25rem,7vw,4.5rem);max-width:16ch}
.endcta p{color:var(--bone-2);font-size:1.1875rem}
.endcta .row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}

/* ---------- faq, table, lists ---------- */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 0;cursor:pointer;font:600 1.125rem/1.35 var(--sans);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--mono);color:var(--red-hi);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:12px;margin:0;color:var(--bone-2)}
.faq .tbd{margin:0 0 16px}
.tbl{width:100%;border-collapse:collapse;margin:0 0 8px}
.tbl caption{text-align:left;color:var(--ash);font:400 .875rem/1.4 var(--mono);padding-bottom:8px}
.tbl th,.tbl td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font:500 .8125rem/1.3 var(--mono);color:var(--ash)}
.tbl td:first-child{font:700 1.125rem/1.3 var(--serif)}
@media (max-width:639px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl tr{border-bottom:1px solid var(--line);padding:12px 0}
  .tbl td{border:0;padding:2px 0}
  .tbl td+td::before{content:attr(data-l) ": ";color:var(--ash);font:400 .8125rem/1 var(--mono)}
}
.cards{display:grid;gap:12px}
.ev{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:16px 0;border-top:1px solid var(--line);align-items:center}
.ev:last-child{border-bottom:1px solid var(--line)}
.ev time,.ev .d{font:500 1rem/1.3 var(--mono);color:var(--red-hi)}
.ev h3{font:600 1.25rem/1.3 var(--sans)}
.ev p{grid-column:2;margin:0;color:var(--ash)}
.ev .pl{grid-row:1/3}
.ev--res{grid-template-columns:44px 1fr}
.linkrow{display:grid;gap:0}
.linkrow a{display:flex;align-items:center;min-height:56px;border-top:1px solid var(--line);text-decoration:none;font-weight:500}
.linkrow a:last-child{border-bottom:1px solid var(--line)}
.linkrow a:hover{color:var(--red-hi)}
.chan{display:grid;gap:12px}
.chan__c{border:1px solid var(--line);border-radius:4px;padding:20px;display:grid;gap:6px;justify-items:start}
.chan__c h3{font-size:1.5rem}
.chan__c p{margin:0 0 8px;color:var(--bone-2)}
.venue{display:grid;gap:8px}
.venue address{font:600 1.5rem/1.3 var(--serif);font-style:normal}
@media (min-width:700px){.chan{grid-template-columns:repeat(2,1fr)}}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding:40px 0 calc(96px + env(safe-area-inset-bottom));background:var(--ink)}
.ftr__g{display:grid;gap:28px}
.ftr h2{font:500 .8125rem/1.2 var(--mono);color:var(--ash);margin:0 0 6px;letter-spacing:0}
.ftr ul a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;color:var(--bone-2)}
.ftr ul a:hover{color:var(--bone)}
.ftr .brand svg{width:56px;height:56px}
.brand--ftr .brand__t{display:block}
.ftr__tag{color:var(--ash);max-width:32ch;margin:12px 0 0}
.ftr__fine{margin-top:28px;color:var(--ash);font-size:.875rem;max-width:none}
.ftr__fine a{color:var(--bone-2)}
.ftr__credit{margin-top:6px}
.ftr__credit a{color:var(--ash)}
.ftr__credit a:hover{color:var(--bone)}
@media (min-width:800px){.ftr__g{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:900px){.ftr{padding-bottom:48px}}

/* ---------- sticky CTA + consent ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(11,11,12,.94);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s}
.sticky .btn{width:100%}
.sticky-on .sticky{transform:none;visibility:visible;transition:transform .3s ease}
@media (min-width:900px){.sticky{display:none}}
/* the bar is fixed: reserve its height (52px button + 2x10px padding + 1px border) so it never covers the page bottom */
@media (max-width:899px){body{padding-bottom:calc(73px + env(safe-area-inset-bottom))}}
.consent{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;max-width:520px;background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:16px;display:grid;gap:12px}
.consent[hidden]{display:none}
.consent p{margin:0;font-size:.9375rem}
.consent .row{display:flex;gap:8px}
.notfound{min-height:60svh;display:grid;align-content:center;gap:8px;padding:64px 0}
.notfound h1{font-size:clamp(2.5rem,8vw,5rem)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .scope{animation:fly 1.4s cubic-bezier(.2,.7,.2,1) .1s both,draw .8s ease-out 1.2s both,stamp .55s cubic-bezier(.3,1.5,.5,1) 1.85s both}
  /* the ambient loop is hero.js (one seat of the ring every ~8 s). This is only its fallback when the module is missing. */
  html:not(.hero-js) .hero .lg-dots{animation:dmc-spin 80s cubic-bezier(.3,1.4,.5,1) 4s infinite}
  html:not(.hero-js) .hero.is-off .lg-dots{animation-play-state:paused}
  /* the flow + medals: one animation per item, driven by scroll position */
  @supports (animation-timeline:view()){
    .flow li{animation:lit linear both;animation-timeline:view();animation-range:entry 20% entry 80%}
    .medals li{animation:lit linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }
  @supports not (animation-timeline:view()){
    .js [data-reveal]{--lit:0;transition:--lit .7s ease}
    .js [data-reveal].is-in{--lit:1}
  }
}
@keyframes fly{from{--fly:0}to{--fly:1}}
@keyframes draw{from{--draw:0}to{--draw:1}}
@keyframes stamp{from{--stamp:0}to{--stamp:1}}
@keyframes dmc-spin{0%{rotate:0deg}1.4%{rotate:39deg}2%,10%{rotate:36deg}11.4%{rotate:75deg}12%,20%{rotate:72deg}21.4%{rotate:111deg}22%,30%{rotate:108deg}31.4%{rotate:147deg}32%,40%{rotate:144deg}41.4%{rotate:183deg}42%,50%{rotate:180deg}51.4%{rotate:219deg}52%,60%{rotate:216deg}61.4%{rotate:255deg}62%,70%{rotate:252deg}71.4%{rotate:291deg}72%,80%{rotate:288deg}81.4%{rotate:327deg}82%,90%{rotate:324deg}91.4%{rotate:363deg}92%,100%{rotate:360deg}}
@keyframes lit{from{--lit:0}to{--lit:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Size-adjusted local fallbacks so the swap to the web fonts does not re-wrap the phone hero text (no layout jump).
   Ratios measured as web-font width / Times-metric (115%) and Arial-metric (105.7%) width on the actual RU strings. */
@font-face{font-family:"DMC Display Fallback";src:local("Times New Roman Bold"),local("TimesNewRomanPS-BoldMT"),local("Liberation Serif Bold"),local("Tinos Bold");font-weight:700;size-adjust:115%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"DMC Body Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");font-weight:400 600;size-adjust:105.7%;ascent-override:92%;descent-override:24%;line-gap-override:0%}

@media (max-width:899px){
  /* Phone hero (owner-chosen variant A): emblem first, full opacity, everything centred. The text block is display:contents so
     h1/lead/CTA/facts and the emblem are siblings in one column. */
  :root{--em:min(60vw,260px,calc(100vw - 48px),36svh);--h1:clamp(1.75rem,7.6vw,2.25rem);--lead:clamp(1rem,4.2vw,1.1875rem)}
  .hero{padding:20px 0 40px}
  .hero__grid{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
  .hero__text{display:contents}
  .hero__art{position:relative;z-index:auto;top:auto;left:auto;translate:none;flex:none;
    width:var(--em);margin:0 auto;-webkit-mask-image:none;mask-image:none}
  .hero__art .lg-dots.is-night .lg-blk{stroke-opacity:.85}
  .hero h1{font-size:var(--h1);line-height:1.08;margin:0 0 .4em;max-width:14em}
  .hero .lead{font-size:var(--lead);line-height:1.38;margin:0 auto 1.2em;max-width:26em}
  .hero__cta{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:2px;width:100%;margin:0 0 20px}
  .hero__cta .btn--red{width:100%}
  /* secondary CTA: quiet text link, not a second block */
  .hero__cta .btn--ghost{width:auto;min-height:44px;padding:0 12px;border:0;background:none;color:var(--bone-2);
    font-weight:500;font-size:.9375rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
  .hero .facts{align-self:stretch;text-align:left;margin-top:12px;order:5}
  .hero__art{order:1}.hero h1{order:2}.hero .lead{order:3}.hero__cta{order:4}
  .hero{background:radial-gradient(70% 36% at 50% 24%,rgba(208,32,31,.2),transparent 72%)}
  .hero__art{margin-bottom:clamp(16px,3.2svh,28px)}
  .hero h1{font-family:"DMC Display","DMC Display Fallback","Noto Serif Display",Georgia,serif}
  .hero .lead{font-family:"DMC Body","DMC Body Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
}