/* BrnKo — Persona-inspired UI, Kotlin/JetBrains palette
   Deliberate design vocabulary:
   - clip-path polygons everywhere; nothing is a plain rectangle
   - elements rotate ±1–6° so the layout reads as "assembled by hand"
   - hard offset shadows (no soft blur) — comic-book stamped feel
   - Anton italic display face + JetBrains Mono for micro-copy
   - purple → pink → orange gradient carries the Kotlin brand
   - SVG grain overlay over the whole page
*/

/* Fonts are loaded via <link rel="stylesheet"> in index.html to avoid the
   render-blocking penalty of @import inside CSS. Manrope was dropped from the
   font families here — it was loaded but never used. */

.ms{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none}

/* ---- palette ----
   Fixed brand tokens (--k-black, --k-orange, etc) never flip — they're the
   design's "ink" colours. Theme-dependent tokens (--k-page, --k-fg, --k-fg-dim)
   flip between dark and light. Panels/cards keep their dark surface treatment
   in both modes; only the body background and "text on body" colours change,
   giving the light mode a Persona-menu-over-paper look. */
:root{
  --k-black:#0A0A0A;
  --k-surface:#141118;
  --k-surface-2:#1D1926;
  --k-surface-3:#252031;
  --k-purple:#7F52FF;
  --k-purple-deep:#5B2FE0;
  --k-pink:#E44857;
  --k-orange:#F88909;
  --k-text:#F5F5F5;
  --k-text-dim:#8A8494;
  --k-text-mute:#5A5566;
  --k-border:rgba(255,255,255,.14);
  --k-border-strong:rgba(255,255,255,.28);
  --k-shadow:6px 6px 0 var(--k-black);
  --k-shadow-lg:10px 10px 0 var(--k-black);
  --k-gradient:linear-gradient(112deg,var(--k-purple-deep) 0%,var(--k-purple) 45%,var(--k-pink) 100%);
  --k-gradient-warm:linear-gradient(96deg,var(--k-orange) 0%,var(--k-pink) 55%,var(--k-purple) 100%);

  /* Named clip-path polygons. Each name = the family of elements that share it.
     Update one place → the whole visual language shifts. */
  --k-cut-tag:polygon(6% 0,100% 0,94% 100%,0 100%);              /* pills, chips, buttons — right-tilt parallelogram */
  --k-cut-info:polygon(0 0,100% 4%,98% 100%,2% 96%);             /* info labels — torn edges */
  --k-cut-soft:polygon(4% 0,100% 5%,96% 100%,0 95%);             /* photo slots, speaker cards */
  --k-cut-panel:polygon(3% 0,100% 4%,97% 100%,0 96%);            /* panels — soft asymmetric */
  --k-cut-stage:polygon(18% 0,100% 6%,94% 100%,3% 92%);          /* hero stage frame — dramatic */
  --k-cut-torn:polygon(12% 0,100% 8%,88% 100%,0 92%);            /* torn on all corners */
  --k-cut-slant-r:polygon(10% 0,100% 0,90% 100%,0 100%);         /* tag pills, stronger slant */

  /* Theme-dependent — defaults to dark */
  --k-page:#0A0A0A;
  --k-fg:#F5F5F5;
  --k-fg-dim:#8A8494;
  --k-grain-opacity:.09;
}

/* Shared "info-chip" base — mono tag with polygon clip + hard offset shadow.
   Every element in the :is() list picks up these declarations; each rule below
   only carries what's unique to it (colour, font-size tweaks, skew, margin). */
:is(.head .label, .venue .label, .partners .label, .hp-eyebrow-label, .hp-note){
  font-family:'JetBrains Mono',monospace;
  font-weight:500;
  text-transform:uppercase;
  padding:6px 12px;
  background:var(--k-black);
  clip-path:var(--k-cut-info);
  box-shadow:3px 3px 0 var(--k-purple);
  display:inline-block;
}

/* ---- Compact Kotlin code snippet (pinned under Kodee) ---- */
.code-snippet-compact{
  position:relative;
  max-width:280px;
  margin:26px auto 0;
  background:#151122;
  color:#e2e0f0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  line-height:1.65;
  clip-path:var(--k-cut-soft);
  box-shadow:6px 6px 0 var(--k-purple),12px 12px 0 var(--k-purple-deep);
  transform:rotate(-2.5deg);
  isolation:isolate;
  z-index:4;
}
.code-snippet-compact::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--k-orange),var(--k-pink),var(--k-purple));
  z-index:1;
}
.cs-chrome-compact{
  display:flex;align-items:center;gap:5px;
  padding:8px 12px 6px;
  background:#0d0a18;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cs-dot{
  width:11px;height:11px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.4);
}
.cs-chrome-compact .cs-dot{width:8px;height:8px;border-width:1px}
.cs-dot-r{background:#ff5f56}
.cs-dot-y{background:#ffbd2e}
.cs-dot-g{background:#27c93f}
.cs-tab-compact{
  margin-left:10px;
  padding:2px 10px 2px;
  background:#151122;
  color:var(--k-orange);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  clip-path:var(--k-cut-slant-r);
}
.cs-body-compact{padding:10px 14px 14px}
.cs-line-compact{white-space:pre}

/* syntax highlighting (also used by any future code decorations) */
.k-kw{color:var(--k-orange);font-weight:600}
.k-fn{color:#c586ff}
.k-str{color:#a5f0c1}
.k-num{color:var(--k-pink)}
.k-cmt{color:rgba(255,255,255,.32);font-style:italic}
.k-punct{color:rgba(255,255,255,.55)}

@media(max-width:1080px){
  .code-snippet-compact{max-width:260px;transform:rotate(-2deg)}
}
@media(max-width:720px){
  .code-snippet-compact{display:none}
}

/* ---- Cursor trail dots (installed by CursorTrail.kt) ---- */
.cursor-trail{
  position:fixed;
  top:0;left:0;
  pointer-events:none;
  z-index:210;
  border-radius:50%;
  background:var(--k-orange);
  border:2px solid var(--k-black);
  opacity:0;
  transition:opacity .35s ease,width .3s,height .3s;
  will-change:transform;
  mix-blend-mode:normal;
}
.cursor-trail.visible{opacity:.95}
.cursor-trail-0{width:12px;height:12px}
.cursor-trail-1{width:9px;height:9px;background:var(--k-pink);opacity:0}
.cursor-trail-1.visible{opacity:.7}
.cursor-trail-2{width:6px;height:6px;background:var(--k-purple);opacity:0}
.cursor-trail-2.visible{opacity:.55}
.cursor-trail-3{width:4px;height:4px;background:var(--k-purple-deep);opacity:0}
.cursor-trail-3.visible{opacity:.4}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){
  .cursor-trail{display:none}
}

/* ---- Persona cursor (hover-capable devices only) ---- */
@media (hover: hover) and (pointer: fine){
  /* Set on html so the cursor cascades. `*` inherits so text nodes, spans,
     and heading elements can't fall back to the default I-beam/arrow. */
  html{
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'><path d='M2 2 L2 22 L8 18 L11 25 L14 24 L11 17 L18 17 Z' fill='%23F88909' stroke='%230A0A0A' stroke-width='2' stroke-linejoin='round'/></svg>") 2 2,auto;
  }
  *, *::before, *::after{cursor:inherit}
  a,button,.btn,.hp-btn,.icon-btn,.brand,.chip,.hp-chip,.plogo,.spk,.slot-talk,input[type=button],[role=button]{
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='11' fill='%23F88909' stroke='%230A0A0A' stroke-width='2.5'/><circle cx='14' cy='14' r='3.5' fill='%230A0A0A'/></svg>") 14 14,pointer !important;
  }
  /* Text inputs keep the I-beam so people can select text meaningfully. */
  input[type=text],input[type=email],input[type=search],textarea{cursor:text !important}
  /* Rive writes cursor:auto directly on the canvas element via inline style
     when its hit-testing doesn't match a listener — force the persona arrow. */
  #kodee,.hp-stage,.stage,.stage-rocket,.stage-rocket img{cursor:inherit !important}
}

/* ---- base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--k-page);
  color:var(--k-fg);
  font-family:'Familjen Grotesk',system-ui,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s cubic-bezier(.2,0,0,1),color .4s cubic-bezier(.2,0,0,1);
}
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:200;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:var(--k-grain-opacity);
  mix-blend-mode:overlay;
}
/* Ambient marching stripes — very subtle purple-tinted 45° lines that drift
   across the viewport at ~7 px/s. Adds a low-grade "the whole page is moving"
   feel without being distracting. Below the grain (z 199 vs 200). */
body::after{
  content:"";
  position:fixed;inset:-40px;
  pointer-events:none;
  z-index:199;
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0 22px,
    rgba(127,82,255,.05) 22px 23px,
    transparent 23px 46px,
    rgba(248,137,9,.035) 46px 47px
  );
  animation:march-stripes 42s linear infinite;
  will-change:background-position;
}
@keyframes march-stripes{
  0%{background-position:0 0}
  100%{background-position:280px 280px}
}
@media(prefers-reduced-motion:reduce){body::after{animation:none}}

/* ---- Persona "confirm" click impact ---- */
/* When you press any interactive element: bright flash + slight overshoot
   scale + micro-rotate, resolving to a stamped-down pose. Mimics the P5
   menu-select punch. Overrides the existing :active { transform: scale() }. */
.btn:active,.hp-btn:active,.icon-btn:active,.plogo:active,.hp-chip:active,.chip:active,.spk:active{
  animation:confirm-impact .42s cubic-bezier(.2,.8,.2,1.02) both;
}
.bar nav a:active{animation:confirm-impact-nav .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes confirm-impact{
  0%  {filter:brightness(1) contrast(1);transform:scale(1) rotate(0deg)}
  18% {filter:brightness(2.2) contrast(1.35) saturate(1.4);transform:scale(1.06) rotate(-1.5deg)}
  55% {filter:brightness(.85) contrast(1);transform:scale(.93) rotate(1deg)}
  100%{filter:brightness(1) contrast(1);transform:scale(1) rotate(0deg)}
}
@keyframes confirm-impact-nav{
  0%,100%{filter:brightness(1)}
  30%{filter:brightness(1.9) contrast(1.3)}
}
@media(prefers-reduced-motion:reduce){
  .btn:active,.hp-btn:active,.icon-btn:active,.plogo:active,.hp-chip:active,.chip:active,.spk:active,.bar nav a:active{animation:none}
}

/* ---- RGB-split glitch on section titles ---- */
/* Punk-fanzine chromatic aberration when hovering a section h2. Offset
   pink/purple/orange copies of the letters flicker in stepped frames —
   reads as a broken analog signal / VHS ghost. Only fires on hover. */
.head h2{transition:text-shadow .25s ease}
.head h2:hover,.venue h2:hover,.partners h2:hover,.cta h2:hover{
  animation:rgb-glitch .45s steps(3,end) infinite;
}
@keyframes rgb-glitch{
  0%,100%{
    text-shadow:
      4px 4px 0 var(--k-purple-deep);
  }
  33%{
    text-shadow:
      2px 0 var(--k-pink),
      -2px 0 var(--k-purple),
      4px 4px 0 var(--k-purple-deep);
  }
  66%{
    text-shadow:
      -2.5px 0 var(--k-orange),
      2.5px 0 var(--k-purple),
      4px 4px 0 var(--k-purple-deep);
  }
}
/* Preserve section-specific base shadows during the glitch: because the
   animation replaces text-shadow entirely, add per-section keyframe overrides
   that keep the correct offset colour underneath. */
.venue h2:hover{animation:rgb-glitch-pink .45s steps(3,end) infinite}
@keyframes rgb-glitch-pink{
  0%,100%{text-shadow:4px 4px 0 var(--k-pink)}
  33%{text-shadow:2px 0 var(--k-pink),-2px 0 var(--k-purple),4px 4px 0 var(--k-pink)}
  66%{text-shadow:-2.5px 0 var(--k-orange),2.5px 0 var(--k-purple),4px 4px 0 var(--k-pink)}
}
@media(prefers-reduced-motion:reduce){
  .head h2:hover,.venue h2:hover,.partners h2:hover,.cta h2:hover{animation:none}
}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--k-purple);text-decoration:none;font-weight:600}
a:hover{color:var(--k-orange)}
.wrap{max-width:1280px;margin:0 auto;padding-inline:32px}
section{scroll-margin-top:96px}

/* ============================================================
   APP BAR
   ============================================================ */
.bar{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(12px);
  background:color-mix(in oklab,var(--k-black) 78%,transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .4s;
}
.bar.stuck{border-bottom-color:var(--k-purple)}
.bar-in{max-width:1280px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:baseline;gap:12px;color:var(--k-text)}
.brand b{
  font-family:'Anton',sans-serif;
  font-style:italic;
  font-size:30px;
  font-weight:400;
  letter-spacing:-.01em;
  text-transform:uppercase;
  background:var(--k-gradient-warm);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-right:.15em;
  display:inline-block;
}
.brand span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--k-text-dim);font-weight:500}
.bar nav{display:flex;gap:2px;margin-left:auto}
.bar nav a{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:9px 16px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--k-text-dim);
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  transition:color .25s ease;
}
/* Persona menu wipe: orange fill enters from the left with a diagonal edge.
   ::before sits behind the text (z-index:-1 inside isolation), then slides in. */
.bar nav a::before{
  content:"";
  position:absolute;
  inset:-2px -6px;
  z-index:-1;
  background:var(--k-orange);
  transform:translateX(-105%) skewX(-14deg);
  transition:transform .38s cubic-bezier(.2,.8,.2,1.05);
}
.bar nav a:hover{color:var(--k-black)}
.bar nav a:hover::before{transform:translateX(0) skewX(-14deg)}
.bar-tools{display:flex;align-items:center;gap:10px}

/* Theme toggle icon button */
.icon-btn{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:0;cursor:pointer;
  background:var(--k-surface-2);
  color:var(--k-text);
  clip-path:polygon(15% 0,100% 8%,85% 100%,0 92%);
  transition:background .3s,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.icon-btn:hover{background:var(--k-purple);transform:rotate(-6deg) scale(1.05)}
.icon-btn:active{transform:scale(.92)}
.icon-btn .ms{font-size:22px}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;cursor:pointer;
  font-family:'Anton',sans-serif;font-style:italic;font-size:17px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:16px 30px;
  clip-path:var(--k-cut-tag);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .3s;
  text-decoration:none;
}
.btn-fill{background:var(--k-orange);color:var(--k-black);box-shadow:var(--k-shadow)}
.btn-fill:hover{transform:translate(-3px,-3px);box-shadow:var(--k-shadow-lg);color:var(--k-black)}
.btn-out{background:transparent;color:var(--k-text);box-shadow:inset 0 0 0 2px var(--k-text)}
.btn-out:hover{background:rgba(255,255,255,.06);color:var(--k-text)}
.btn-xl{font-size:22px;padding:22px 44px}
.btn-sm{font-size:13px;padding:11px 22px}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--k-text);
  background:rgba(0,0,0,.55);
  border:2px solid var(--k-text);
  clip-path:var(--k-cut-tag);
  transform:rotate(-1deg);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s;
}
.chip:hover{transform:rotate(0) translateY(-2px);background:rgba(127,82,255,.25)}
.chip:nth-child(2){transform:rotate(1.2deg)}
.chip:nth-child(3){transform:rotate(-.5deg)}
.chip .ms{font-size:17px;color:var(--k-orange)}
.chip-key{background:var(--k-orange);color:var(--k-black);border-color:var(--k-black)}
.chip-key .ms{color:var(--k-black)}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.head{
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:40px;
  padding-bottom:16px;
}
/* Persona angular slab beneath every section head — the gradient bar wipes
   in from the left when the head enters view (piggybacks on modern
   animation-timeline: view() where supported; falls back to a static bar
   in older browsers, so nothing breaks). */
.head::after{
  content:"";
  position:absolute;
  bottom:-2px;left:0;
  height:8px;width:220px;
  background:var(--k-gradient);
  clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);
  transform:skewX(-14deg);
  transform-origin:left center;
}
@supports (animation-timeline: view()){
  .head::after{
    animation:slab-wipe linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 30%;
  }
  @keyframes slab-wipe{
    from{transform:skewX(-14deg) scaleX(0);opacity:.3}
    to  {transform:skewX(-14deg) scaleX(1);opacity:1}
  }
}
@media(prefers-reduced-motion:reduce){.head::after{animation:none}}
.head .label{
  font-size:12px;
  letter-spacing:.18em;
  color:var(--k-orange);
  margin-bottom:14px !important;
  /* Persona road-sign lean */
  transform:skewX(-8deg);
  transform-origin:bottom left;
}
.head h2{
  font-family:'Anton',sans-serif;font-style:italic;
  font-size:clamp(44px,6vw,86px);
  line-height:.92;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--k-text);
  text-shadow:4px 4px 0 var(--k-purple-deep);
}
.head p{color:var(--k-text-dim);max-width:38ch;font-size:16px}

/* ============================================================
   PROGRAM
   ============================================================ */
.program{
  position:relative;
  background:var(--k-surface);
  clip-path:polygon(2% 0,100% 3%,98% 100%,0 97%);
  padding:64px 48px;
  margin-top:24px;
  transform:rotate(-.9deg);
}
.program::before{
  content:"";position:absolute;top:0;left:0;right:0;height:12px;
  background:var(--k-gradient);
}
.slot{
  display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:center;
  padding:22px 26px;
  border-top:1px solid var(--k-border);
  transition:background .25s,transform .25s;
}
.slot:first-of-type{border-top:0}
.slot-talk:hover{background:rgba(127,82,255,.09);transform:translateX(6px)}
.slot time{
  font-family:'Anton',sans-serif;font-style:italic;
  font-size:32px;color:var(--k-orange);letter-spacing:.02em;
}
.slot h3{
  font-family:'Familjen Grotesk',sans-serif;
  font-size:20px;font-weight:700;letter-spacing:-.015em;
  color:var(--k-text);
}
.slot .who{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;letter-spacing:.06em;
  color:var(--k-text-dim);margin-top:5px;text-transform:uppercase;
}
.slot .tag{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 16px;
  background:var(--k-purple);color:var(--k-black);
  clip-path:var(--k-cut-slant-r);
  font-weight:700;transform:rotate(-2deg);
}
.slot.break{
  background:linear-gradient(96deg,rgba(248,137,9,.14),rgba(228,72,87,.1) 60%,transparent);
  border-top-color:var(--k-orange);
}
.slot.break .tag{background:var(--k-orange);color:var(--k-black)}

/* ============================================================
   SPEAKERS
   ============================================================ */
.speakers{padding-block:72px 32px}
.spk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,320px));
  gap:20px;
  margin-top:40px;
  align-items:start;
  justify-content:center;
}
/* Desktop: the speakers-grid copy of the code snippet is hidden —
   the hero already renders one below Kodee. On compact viewports the hero
   copy is hidden and this one takes over as the 4th grid cell. */
.spk-grid .code-snippet-compact{display:none}
.spk{
  --base-rot:-1deg;
  --base-lift:0px;
  position:relative;
  background:var(--k-surface);
  clip-path:polygon(6% 0,100% 4%,94% 100%,0 96%);
  padding:14px 14px 26px;
  transform-style:preserve-3d;
  transform:
    translateY(var(--base-lift))
    rotate(var(--base-rot))
    perspective(1400px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg));
  transition:transform .18s cubic-bezier(.2,.8,.2,1.05),background .3s;
  will-change:transform;
}
.spk:nth-child(2){--base-rot:1.2deg}
.spk:nth-child(3){--base-rot:-.7deg}
.spk:nth-child(4){--base-rot:.9deg}
.spk:hover{--base-rot:0deg;--base-lift:-8px;background:var(--k-surface-2)}
.photo{
  aspect-ratio:1;
  clip-path:var(--k-cut-soft);
  background:repeating-linear-gradient(45deg,var(--k-surface-2) 0 10px,var(--k-surface-3) 10px 20px);
  display:grid;place-items:center;overflow:hidden;
}
.photo span{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--k-text-mute);
}
.spk h3{
  font-family:'Anton',sans-serif;font-style:italic;text-transform:uppercase;
  font-size:22px;margin-top:20px;padding:0 10px;letter-spacing:-.01em;color:var(--k-text);
  min-height:26px;
}
.spk .role{
  padding:0 10px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--k-orange);margin-top:6px;min-height:16px;
}
.spk .talk{padding:0 10px;margin-top:14px;font-size:14.5px;color:var(--k-text-dim);min-height:18px}
.spk-photo-img{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.02) saturate(1.05)}

/* ============================================================
   SPEAKER MODAL — click a card to open, Persona-styled overlay
   ============================================================ */
.spk-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  padding:24px;
  animation:modal-fade .35s ease both;
}
.spk-modal-backdrop{
  position:absolute;inset:0;
  background:color-mix(in oklab,var(--k-black) 78%,transparent);
  backdrop-filter:blur(8px);
}
.spk-modal-panel{
  position:relative;
  max-width:820px;width:100%;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--k-surface);
  clip-path:var(--k-cut-panel);
  padding:52px 44px 44px 32px;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:32px;
  align-items:start;
  box-shadow:14px 14px 0 var(--k-purple-deep);
  animation:modal-slam .55s cubic-bezier(.34,1.56,.64,1) both;
}
.spk-modal-panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:8px;
  background:var(--k-gradient);
}
.spk-modal-close{
  position:absolute;top:14px;right:14px;
  width:42px;height:42px;
  background:var(--k-orange);color:var(--k-black);
  border:0;cursor:pointer;
  font-family:'JetBrains Mono',monospace;
  font-size:18px;font-weight:700;
  clip-path:var(--k-cut-torn);
  box-shadow:3px 3px 0 var(--k-black);
  transition:transform .2s ease;
  z-index:1;
}
.spk-modal-close:hover{transform:rotate(-6deg) scale(1.06)}
.spk-modal-close:active{transform:scale(.95)}
.spk-modal-media{align-self:start}
.spk-modal-photo{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  clip-path:var(--k-cut-soft);
  display:block;
  filter:contrast(1.02) saturate(1.05);
}
.spk-modal-info{min-width:0}
.spk-modal-role{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--k-orange);
  margin-bottom:12px;
}
.spk-modal-name{
  font-family:'Anton',sans-serif;font-style:italic;text-transform:uppercase;
  font-size:clamp(36px,4.4vw,56px);
  line-height:.92;letter-spacing:-.02em;
  color:var(--k-text);
  text-shadow:4px 4px 0 var(--k-purple-deep);
  margin:0 0 18px;
}
.spk-modal-talk{
  font-family:'Familjen Grotesk',sans-serif;
  font-weight:600;font-size:18px;line-height:1.35;
  color:var(--k-text);
  margin:0 0 24px;
}
.spk-modal-abstract{
  font-family:'Familjen Grotesk',sans-serif;
  font-size:15.5px;line-height:1.6;
  color:var(--k-text);
  margin:0 0 14px;
}
.spk-modal-abstract:last-child{margin-bottom:0}
.spk-modal-abstract-empty{
  color:var(--k-text-dim);
  font-style:italic;
}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-slam{
  0%  {opacity:0;transform:translateY(60px) rotate(-3deg) scale(.92)}
  100%{opacity:1;transform:none}
}
@media(max-width:720px){
  .spk-modal{padding:16px}
  .spk-modal-panel{
    grid-template-columns:1fr;
    gap:20px;
    padding:44px 22px 22px;
  }
  .spk-modal-media{justify-self:center;max-width:220px;width:100%}
  .spk-modal-name{font-size:clamp(32px,8vw,44px)}
}
@media(prefers-reduced-motion:reduce){
  .spk-modal{animation:none}
  .spk-modal-panel{animation:none}
}

/* ============================================================
   VENUE
   ============================================================ */
.venue{
  position:relative;
  background:var(--k-surface);
  clip-path:var(--k-cut-panel);
  padding:72px 56px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  margin-top:24px;
  transform:rotate(.6deg);
}
.venue::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--k-gradient)}
.venue .label{
  font-size:12px;
  letter-spacing:.18em;
  color:var(--k-orange);
  margin-bottom:14px !important;
  transform:skewX(-8deg);
  transform-origin:bottom left;
}
.venue h2{
  font-family:'Anton',sans-serif;font-style:italic;text-transform:uppercase;
  font-size:clamp(38px,4.8vw,60px);line-height:.94;letter-spacing:-.02em;
  margin-bottom:22px;color:var(--k-text);
  text-shadow:4px 4px 0 var(--k-pink);
}
.venue .addr{font-size:17px;color:var(--k-text-dim);margin-bottom:8px}
.venue .addr b{color:var(--k-text);font-weight:700}
/* Venue map tile — MapLibre canvas + PMTiles behind a clip-pathed frame.
   The whole tile is an anchor to Google Maps; the canvas passes clicks
   through so a plain click anywhere opens the destination. */
.map{
  aspect-ratio:4/3;
  clip-path:var(--k-cut-soft);
  background:var(--k-surface-2);
  overflow:hidden;
  position:relative;
  display:block;
  color:inherit;
  text-decoration:none;
}
.map-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
}
/* Kill MapLibre's default outline / focus ring and pass clicks to the anchor. */
.map-canvas .maplibregl-canvas,
.map-canvas canvas{outline:none !important}
.map-canvas .maplibregl-control-container{pointer-events:none}
.map-canvas .maplibregl-ctrl-attrib{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(10,10,10,.6);color:var(--k-text-dim);
  padding:2px 8px;
  pointer-events:auto;
}
.map-canvas .maplibregl-ctrl-attrib a{color:var(--k-text-dim);text-decoration:underline}

/* Persona pin: rotated square with hard offset shadow. Center dot echoes the
   info-chip mono/orange palette used throughout. */
.map-pin{
  width:26px;height:26px;
  background:var(--k-orange);
  border:2px solid var(--k-black);
  box-shadow:4px 4px 0 var(--k-purple-deep);
  transform:rotate(45deg);
  display:grid;place-items:center;
  pointer-events:none;
}
.map-pin-dot{
  width:8px;height:8px;background:var(--k-black);border-radius:50%;
  transform:rotate(-45deg);
}

/* Bottom-right "open in maps" call-to-action pinned inside the tile. Sits
   above the canvas but stays visually part of the same clip-pathed frame. */
.map-open{
  position:absolute;
  right:14px;top:14px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:var(--k-black);
  color:var(--k-orange);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  clip-path:var(--k-cut-tag);
  box-shadow:3px 3px 0 var(--k-purple-deep);
  transition:transform .18s cubic-bezier(.2,.8,.2,1.05),box-shadow .18s;
  pointer-events:none;
}
.map:hover .map-open{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--k-purple-deep);
}
.map-open-arrow{
  font-family:'Anton',sans-serif;font-style:italic;font-size:14px;letter-spacing:0;
  transform:translateY(-1px);
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{
  padding-block:64px;
  display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;
}
.partners .label{
  font-size:12px;
  letter-spacing:.18em;
  color:var(--k-orange);
  margin-bottom:10px !important;
  transform:skewX(-8deg);
  transform-origin:bottom left;
}
.partners h2{
  font-family:'Anton',sans-serif;font-style:italic;text-transform:uppercase;
  font-size:clamp(36px,4.2vw,52px);line-height:.94;letter-spacing:-.02em;
  color:var(--k-text);
  text-shadow:4px 4px 0 var(--k-purple);
}
.plist{display:flex;flex-wrap:wrap;gap:16px}
.plogo{
  --base-rot:-1.5deg;
  --base-lift:0px;
  padding:20px 32px;
  background:transparent;
  border:2px solid var(--k-orange);
  clip-path:var(--k-cut-tag);
  font-family:'Anton',sans-serif;font-style:italic;
  font-size:28px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;
  color:var(--k-text);
  text-decoration:none;
  transform-style:preserve-3d;
  transform:
    translateY(var(--base-lift))
    rotate(var(--base-rot))
    perspective(1200px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg));
  transition:transform .18s cubic-bezier(.2,.8,.2,1.05),background .3s,border-color .3s;
  will-change:transform;
}
.plogo:nth-child(2){--base-rot:1.2deg;border-color:var(--k-purple)}
.plogo:nth-child(3){--base-rot:-.5deg;border-color:var(--k-pink)}
.plogo:hover{background:rgba(248,137,9,.14);--base-rot:0deg;--base-lift:-4px}
.plogo:nth-child(2):hover{background:rgba(127,82,255,.14)}
.plogo:nth-child(3):hover{background:rgba(228,72,87,.14)}
.plogo small{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--k-text-dim);font-weight:500;font-style:normal;margin-top:3px;
}

/* ============================================================
   REGISTER CTA
   ============================================================ */
.cta{
  position:relative;
  background:var(--k-gradient);
  clip-path:polygon(3% 0,100% 5%,97% 100%,0 95%);
  padding:64px 64px;
  text-align:center;
  margin-bottom:64px;
  overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(0,0,0,.06) 12px 13px);
  pointer-events:none;
}
.cta h2{
  font-family:'Anton',sans-serif;font-style:italic;text-transform:uppercase;
  font-size:clamp(56px,8vw,120px);line-height:.9;letter-spacing:-.02em;
  color:var(--k-text);
  text-shadow:6px 6px 0 var(--k-black);
  position:relative;
}
.cta p{
  /* Sit the copy inside a dark chip so mono text reads clearly against the
     purple→pink gradient. Same "info tag" treatment as .hp-note. */
  margin:28px auto 0;
  max-width:52ch;
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--k-text);
  padding:14px 22px;
  background:var(--k-black);
  clip-path:polygon(2% 0,100% 4%,98% 100%,0 96%);
  box-shadow:4px 4px 0 var(--k-orange);
  position:relative;
  display:inline-block;
  text-align:left;
}
.cta .btn-fill{
  margin-top:42px;
  background:var(--k-black);color:var(--k-orange);
  padding:24px 44px;font-size:22px;
  box-shadow:6px 6px 0 rgba(0,0,0,.4);
  position:relative;
}
.cta .btn-fill:hover{
  background:var(--k-black);color:var(--k-orange);
  transform:translate(-4px,-4px);
  box-shadow:10px 10px 0 rgba(0,0,0,.4);
}
.cta .small{
  margin-top:22px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.08em;
  color:var(--k-black);opacity:.7;position:relative;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  border-top:2px solid var(--k-purple);
  padding-block:36px 56px;
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;letter-spacing:.06em;color:var(--k-text-dim);text-transform:uppercase;
}
footer .flinks{display:flex;gap:22px}
footer .flinks a{color:var(--k-text-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
footer .flinks a:hover{color:var(--k-orange)}
footer .powered b{color:var(--k-orange);font-family:'Anton',sans-serif;font-style:italic;font-weight:400;font-size:15px;letter-spacing:.02em;text-transform:uppercase}

/* ============================================================
   REVEAL
   ============================================================ */
/* Persona slam: odd elements slam from bottom-left with a counter-clockwise
   rotation, even from bottom-right clockwise — reads as "cards placed by hand"
   rather than a uniform fade. Spring easing on transform, ease-out on opacity. */
.rv{
  opacity:0;
  transform:translate(-18px,50px) rotate(-2.2deg) scale(.94);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1.05),
              transform .85s cubic-bezier(.34,1.56,.64,1);
}
.rv:nth-of-type(2n){transform:translate(18px,50px) rotate(2.2deg) scale(.94)}
.rv:nth-of-type(3n){transform:translate(0,60px) rotate(-1deg) scale(.92)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .spk-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:660px;
    margin-inline:auto;
  }
  /* Show the speakers-grid copy of the snippet in the empty 4th cell (Wout,
     Michal, ???, snippet — 2×2). Reset the base rule's centering margin so it
     participates as a normal grid item. */
  .spk-grid .code-snippet-compact{
    display:block;
    margin:0;
    max-width:none;
    width:100%;
    align-self:center;
    justify-self:stretch;
    transform:rotate(-2deg);
    font-size:11px;
  }
  .partners{grid-template-columns:1fr;gap:28px}
  .venue{grid-template-columns:1fr;padding:48px 36px;gap:36px}
  .bar nav{display:none}
  .head{flex-direction:column;align-items:flex-start}
}
@media(max-width:720px){
  .spk-grid{grid-template-columns:1fr;max-width:340px}
  /* On phones the grid is single-column; snippet would push cards apart,
     so hide it. */
  .spk-grid .code-snippet-compact{display:none}
  .slot{grid-template-columns:100px 1fr;gap:16px;padding:18px 18px}
  .slot .tag{grid-column:2;justify-self:start}
  .wrap{padding-inline:20px}
  .program{padding:48px 24px}
  .cta{padding:64px 28px}
  .bar-in{gap:10px;padding-inline:20px}
  .brand span{display:none}
  .bar-tools{gap:6px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ============================================================
   HERO (Persona-style — the only hero now)
   ============================================================ */
.hero-p{
  position:relative;
  min-height:calc(100svh - 74px);
  padding-block:24px 60px;
  overflow:hidden;
  isolation:isolate;
}
.hp-slab{
  position:absolute;z-index:0;
  top:-8%;left:-6%;width:70%;height:120%;
  background:var(--k-gradient);
  clip-path:polygon(0 4%,92% 0,100% 92%,6% 100%);
  transform:rotate(-3deg);
  animation:hp-slam-in .9s cubic-bezier(.2,.9,.2,1.15) both;
}
.hp-slab::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 8px,rgba(0,0,0,.06) 8px 9px);
  mix-blend-mode:multiply;
}
.hp-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;
  height:100%;min-height:calc(100svh - 158px);
}
.hp-copy{display:flex;flex-direction:column;gap:22px;animation:hp-slam-copy .7s cubic-bezier(.2,.9,.2,1.1) .1s both}
.hp-eyebrow{display:inline-flex;align-items:center;gap:14px}
.hp-chip-num{
  display:inline-grid;place-items:center;
  width:48px;height:48px;
  background:var(--k-orange);color:var(--k-black);
  font-family:'Anton',sans-serif;font-style:italic;font-size:24px;
  clip-path:polygon(12% 0,100% 6%,88% 100%,0 94%);
  transform:rotate(-6deg);
  box-shadow:4px 4px 0 var(--k-black);
}
.hp-eyebrow-label{
  font-size:12.5px;
  letter-spacing:.16em;
  color:var(--k-text);
}
.hp-title{
  font-family:'Anton','Familjen Grotesk',sans-serif;
  font-style:italic;
  font-size:clamp(96px,15vw,240px);
  line-height:.82;letter-spacing:-.02em;
  margin:0;text-transform:uppercase;
  color:var(--k-text);
  text-shadow:6px 6px 0 var(--k-black),12px 12px 0 var(--k-purple-deep);
  padding-right:.25em;
}
/* "Brn" gets a knockout stroke — the letterforms read as stamped, matching
   Persona menu-title typography. "Ko" keeps solid orange for punch contrast. */
.hp-title-brn{
  -webkit-text-stroke:2.5px var(--k-black);
  text-stroke:2.5px var(--k-black);
  paint-order:stroke fill;
}
.hp-title-ko{
  font-style:italic;
  color:var(--k-orange);
  text-shadow:6px 6px 0 var(--k-black),12px 12px 0 var(--k-pink);
  display:inline-block;
  margin-right:.1em;
}
/* Per-letter slam-in on load. Each glyph gets its own delay via the --i
   CSS variable set inline in HeroPersona.kt (0..1..2 for Brn, 3..4 for Ko).
   Odd glyphs come from left with counter-rotate, even from right — same
   choreography language as the .rv scroll reveal but for a single word. */
.hp-letter{
  display:inline-block;
  animation:hp-letter-in .7s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(.15s + var(--i,0) * .06s);
  transform-origin:center bottom;
}
.hp-letter:nth-child(2n){animation-name:hp-letter-in-alt}
@keyframes hp-letter-in{
  0%  {opacity:0; transform:translateY(60px) rotate(-8deg) scale(.7);}
  60% {opacity:1;}
  100%{opacity:1; transform:translateY(0) rotate(0) scale(1);}
}
@keyframes hp-letter-in-alt{
  0%  {opacity:0; transform:translateY(60px) rotate(8deg) scale(.7);}
  60% {opacity:1;}
  100%{opacity:1; transform:translateY(0) rotate(0) scale(1);}
}
@media(prefers-reduced-motion:reduce){
  .hp-letter{animation:none;transform:none}
}
.hp-sub{
  font-family:'Familjen Grotesk',sans-serif;
  font-size:clamp(18px,1.9vw,24px);
  font-weight:600;letter-spacing:-.01em;max-width:34ch;
  color:var(--k-text);
  padding:10px 14px;background:var(--k-black);
  clip-path:var(--k-cut-info);
  align-self:flex-start;
}
.hp-chips{display:flex;flex-wrap:wrap;gap:10px}
.hp-chip{
  display:inline-flex;align-items:center;padding:10px 18px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--k-text);background:rgba(0,0,0,.55);
  border:2px solid var(--k-text);
  clip-path:var(--k-cut-tag);
  transform:rotate(-1deg);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s;
}
.hp-chip:hover{transform:rotate(0) translateY(-2px);background:rgba(127,82,255,.25)}
.hp-chip:nth-child(2){transform:rotate(1.2deg)}
.hp-chip:nth-child(3){transform:rotate(-.5deg)}
.hp-chip-key{background:var(--k-orange);color:var(--k-black);border-color:var(--k-black)}

.hp-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.hp-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 28px;
  font-family:'Anton',sans-serif;font-style:italic;
  font-size:19px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.hp-btn-fill{
  background:var(--k-orange);color:var(--k-black);
  clip-path:var(--k-cut-tag);
  box-shadow:6px 6px 0 var(--k-black);
}
.hp-btn-fill:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--k-black);color:var(--k-black)}
.hp-btn-out{
  background:transparent;color:var(--k-text);
  border:2px solid var(--k-text);
  clip-path:var(--k-cut-tag);
}
.hp-btn-out:hover{background:rgba(255,255,255,.08);color:var(--k-text)}
.hp-arrow{font-size:22px;line-height:1;transform:translateY(-1px)}

/* Note tag — same "info chip" treatment as .hp-eyebrow-label so the copy
   reads clearly against the purple slab instead of low-contrast dim text. */
.hp-note{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--k-text);
  padding:7px 14px;
  box-shadow:3px 3px 0 var(--k-orange);
  align-self:flex-start;
}

/* .hp-art is always a centered flex container so the stage + snippet stay
   grouped together (no wandering off-centre inside a wide grid cell). At
   rest it's a column (snippet stacked below Kodee); the compact media query
   below flips it to row so the snippet slides to Kodee's left. */
.hp-art{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  animation:hp-slam-art .8s cubic-bezier(.2,.9,.2,1.15) .2s both;
}
/* Row that holds the stage frame + KODEE label side-by-side. The label
   pins to the frame's bottom-right edge like a name tag. */
.hp-stage-row{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  width:auto;
  flex:0 0 auto;
}
/* Torn asymmetric plate — polygon corners have wildly different offsets
   (18/6/94-100/3-92) so the outline reads "handmade / cut with scissors"
   rather than a rounded rectangle. Frame rotates opposite to .hp-art's
   post-animation +2deg tilt, so the net lean is left (–2deg from viewport).
   Hard offset shadow in --k-purple-deep gives it the Persona "stamped
   on paper" weight that the buttons and chips already carry. */
.hp-stage-frame{
  position:relative;
  width:100%;aspect-ratio:1;
  max-width:min(44svh,440px);
  flex:0 1 auto;
  padding:16px;
  background:var(--k-black);
  clip-path:var(--k-cut-stage);
  transform:rotate(-4deg);
  box-shadow:14px 14px 0 var(--k-purple-deep);
}
.hp-stage-frame::before{
  content:"";
  position:absolute;inset:-10px;
  background:linear-gradient(140deg,var(--k-orange),var(--k-pink),var(--k-purple));
  clip-path:var(--k-cut-stage);
  z-index:-1;
}
.hp-stage.stage{
  aspect-ratio:1;width:100%;max-width:none;margin:0;
  /* Kotlin brand orange stage — used across the site (labels, buttons, chip
     keys, slot times, card badges), so the plate reads as part of the
     design, complementary to Kodee's purple + high-contrast for the black
     rocket. 45° halftone matches .hp-slab and .cta. */
  background:
    repeating-linear-gradient(45deg,transparent 0 14px,rgba(0,0,0,.08) 14px 15px),
    radial-gradient(ellipse at 55% 60%,#FFA030 0%,var(--k-orange) 100%);
  border-radius:0;
  clip-path:var(--k-cut-stage);
  transition:none;cursor:pointer;
}
.hp-stage.stage:hover{border-radius:0;clip-path:var(--k-cut-stage)}
.hp-stage.stage .stage-fallback{background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(127,82,255,.14) 12px 24px)}
.hp-stage.stage .stage-fallback span{color:var(--k-text-dim)}

/* Rocket overlay — anchored to the rocket node's base pose in the .riv artboard.
   Percentages match the original pre-redesign CSS: the img is positioned by top-left
   so its CENTER lands at (baseX=530, baseY=500) inside the 800x800 artboard, at its
   baseScale=0.19 render size — bootRive() then applies translate/rotate/scale on top. */
.stage-rocket{position:absolute;inset:0;z-index:1;pointer-events:none}
.stage-rocket img{
  position:absolute;
  left:30.91%;
  top:45.52%;
  width:70.68%;
  height:33.96%;
  transform-origin:50% 50%;
  will-change:transform;
}
.hp-tag-corner{
  flex:0 0 auto;
  padding:8px 14px;
  margin-bottom:32px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;letter-spacing:.22em;
  color:var(--k-black);background:var(--k-orange);
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  transform:rotate(-4deg);
  box-shadow:4px 4px 0 var(--k-black);
}

@keyframes hp-slam-in{0%{transform:rotate(-10deg) translate(-20%,-10%);opacity:0}100%{transform:rotate(-3deg) translate(0,0);opacity:1}}
@keyframes hp-slam-copy{0%{transform:translateX(-40px) rotate(-1deg);opacity:0}100%{transform:translateX(0) rotate(0);opacity:1}}
@keyframes hp-slam-art{0%{transform:translateX(60px) rotate(6deg) scale(.9);opacity:0}100%{transform:translateX(0) rotate(2deg) scale(1);opacity:1}}

@media(max-width:1080px){
  /* Drop the desktop full-viewport min-height so the hero shrinks to the
     content and doesn't leave a large blank gap before .program. */
  .hero-p{min-height:0;padding-block:20px 32px}
  .hp-grid{grid-template-columns:1fr;text-align:center;gap:20px;min-height:0}
  .hp-copy{align-items:center}
  .hp-eyebrow{justify-content:center}
  .hp-sub{align-self:center}
  .hp-chips{justify-content:center}
  .hp-cta{justify-content:center}
  .hp-slab{width:120%;height:60%;top:-4%;left:-10%}
  .hp-title{font-size:clamp(72px,17vw,150px)}

  /* COMPACT HERO — Kodee (no frame, no orange plate) floats top-right of the
     hero slab beside the BrnKo title. Code snippet is hidden here and rendered
     inside the speakers grid instead (see .spk-grid .code-snippet-compact
     rule below). */
  .hp-art{
    position:absolute;
    top:12%;
    right:4%;
    width:min(180px,32vw);
    aspect-ratio:1;
    display:block;
    gap:0;
    z-index:1;
    animation:none;  /* skip the slam-in — Kodee just sits here */
  }
  .hp-stage-row{width:100%;gap:0}
  .hp-stage-frame{
    background:transparent;
    box-shadow:none;
    padding:0;
    clip-path:none;
    transform:none;
    max-width:none;
    width:100%;
    flex:1 1 auto;
  }
  .hp-stage-frame::before{display:none}
  .hp-stage.stage{
    background:transparent;
    clip-path:none;
  }
  .hp-stage.stage:hover{clip-path:none}
  .hp-tag-corner{display:none}
  /* Hero's copy of the code snippet is hidden — one lives in .spk-grid instead. */
  .hp-art .code-snippet-compact{display:none}
  /* Title visually above Kodee (Kodee peeks around the letters). The copy
     container passes pointer events through so hover/click still land on the
     Rive canvas in the empty space; re-enable them on the actual controls. */
  .hp-copy{position:relative;z-index:2;pointer-events:none}
  .hp-copy .hp-btn,
  .hp-copy .hp-chip,
  .hp-copy .hp-chip-num,
  .hp-copy .hp-eyebrow-label,
  .hp-copy a{pointer-events:auto}
}
@media(max-width:720px){
  .hp-art{
    top:8%;
    right:2%;
    width:min(140px,30vw);
  }
}

/* Base .stage kept only if the legacy Hero.kt is somehow rendered */
.stage{position:relative;aspect-ratio:1;width:100%;max-width:min(52svh,440px);margin-inline:auto;background:var(--k-surface);display:grid;place-items:center;overflow:hidden}
.stage canvas{width:100%;height:100%;display:block;position:relative;z-index:2}
.stage-fallback{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.stage.loaded .stage-fallback{display:none}