/* Fields Day — see docs/DESIGN.md for what each token is for. */

@font-face{font-family:Orbitron;src:url('assets/orbitron.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:Archivo;src:url('assets/fonts/archivo-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap}
/* Logo wordmarks only. */
@font-face{font-family:"Archivo Logo";src:url('assets/archivo.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/poppins-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

:root{
  /* Colour */
  --black:#000;
  --ink:#fff;
  --ink-2:#c4c4c4;
  --ink-3:#949494;
  --ink-4:#767676;
  --line:#262626;
  --line-strong:#3a3a3a;
  --surface:#0c0c0c;

  /* Type */
  --font-display:Orbitron,"Arial Black",Arial,sans-serif;
  --font-text:Archivo,"Helvetica Neue",Arial,sans-serif;

  /* Space (4-pt) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --page-max:1600px;
  --page-pad:clamp(24px,6.2vw,100px);
  --gutter:clamp(18px,2vw,28px);

  /* Motion */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-press:140ms;
  --dur-hover:200ms;
  --dur-enter:700ms;
  --stagger:60ms;
}

*{box-sizing:border-box}
html{color-scheme:dark;background:var(--black);scroll-behavior:smooth;scroll-padding-top:28px;-webkit-text-size-adjust:100%}
body{position:relative;margin:0;color:var(--ink);background:var(--black);font-family:var(--font-text);font-weight:380;font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The splat canvas sits behind everything; content above stays crisp DOM. */
/* The splat canvas scrolls with the page inside a document-sized layer that clips its margins
   (splat-stage.js re-anchors it to the viewport on every draw; see OVERSCAN). */
.splat-layer{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;contain:strict}
.splat-stage{position:absolute;left:0;top:0;width:100%;display:block;will-change:transform}
.poster{position:relative;z-index:1}

/* Layout */
.poster{max-width:var(--page-max);min-height:100svh;margin:auto;padding:clamp(40px,5.5vw,86px) var(--page-pad) 36px;display:flex;flex-direction:column}

/* Scroll progress: a hairline along the top of the viewport. Driven by the scroll position itself where
   the browser can (animation-timeline), by main.js where it can't (.is-scripted). */
.progress{position:fixed;top:0;left:0;width:100%;height:1px;background:var(--ink);opacity:.55;transform:scaleX(0);transform-origin:left;z-index:5;pointer-events:none}
@supports (animation-timeline: scroll()){
  .progress:not(.is-scripted){animation:progress linear both;animation-timeline:scroll(root)}
  @keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* Ambient dust: faint points of light drifting behind the page, leaning away from the pointer. */
.dust{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;transform:translate(calc(var(--mx,0) * -10px),calc(var(--my,0) * -7px));transition:transform 1200ms var(--ease-out)}
.dust i{position:absolute;display:block;width:var(--d,1px);height:var(--d,1px);border-radius:50%;background:var(--ink);opacity:0;animation:dust var(--t,30s) linear infinite;animation-delay:var(--a,0s)}
@keyframes dust{0%{transform:translate(0,0);opacity:0}12%{opacity:var(--o,.3)}88%{opacity:var(--o,.3)}100%{transform:translate(var(--x,30px),var(--y,-120px));opacity:0}}

/* Ticker: what the day is, on a slow loop under the title. */
.ticker{position:relative;overflow:hidden;padding:15px 0;border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 75s linear infinite}
.ticker ul{display:flex;list-style:none;margin:0;padding:0}
.ticker li{display:flex;align-items:center;gap:var(--s-6);padding-right:var(--s-6);font-size:11px;font-weight:600;font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ticker li::after{content:"";flex:none;width:7px;height:7px;opacity:.45;background:linear-gradient(var(--ink),var(--ink)) center/7px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 7px no-repeat}
@keyframes ticker{to{transform:translateX(-50%)}}
@media(hover:hover){.ticker:hover .ticker-track{animation-play-state:paused}}

/* Marks */
.cross{display:block;position:relative;flex:none;width:11px;height:11px;opacity:.5}
.cross:before,.cross:after{content:"";position:absolute;background:var(--ink)}
.cross:before{width:11px;height:1px;top:5px;left:0}
.cross:after{height:11px;width:1px;top:0;left:5px}
.horizon{height:1px;background:var(--line);position:absolute;left:0;right:0;bottom:0}
.horizon span{position:absolute;left:calc(50% - 32px);width:64px;height:2px;top:-1px;background:var(--ink)}

/* Masthead */
.masthead{position:relative;text-align:center;padding:28px 0 65px}
.cross-left,.cross-right{position:absolute;top:0}.cross-left{left:0}.cross-right{right:0}
h1{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(48px,9.25vw,145px);line-height:1.15;text-transform:uppercase;letter-spacing:.035em;white-space:nowrap;transition:opacity 600ms var(--ease-out)}
/* The hero logo splat draws in this box; the h1 stays for screen readers and as the fallback. */
.title-splats{position:absolute;left:0;right:0;top:0;bottom:40px;pointer-events:none}
.splats .masthead{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(56px,6vw,90px)}
/* With splats the logo gets a stage of its own: on larger screens most of the first screen, the first
   scroll is the logo receding and dissolving into sparks, with the facts waiting just below the fold.
   On phones a box about as tall as the logo is at full width (it is ~1.5x wider than tall). */
.splats .masthead{min-height:min(76vw,64svh);display:flex;flex-direction:column;justify-content:center}
@media(min-width:760px){.splats .masthead{min-height:clamp(380px,66svh,820px)}}
/* With splats the text title stays hidden (it remains for screen readers); it shows only if the splat
   title fails to arrive (main.js adds .title-fallback). */
.splats h1{opacity:0}
.splats.title-fallback h1{opacity:1}

/* Buttons */
.button{display:inline-flex;align-items:center;gap:var(--s-5);min-height:48px;padding:0 var(--s-5);background:var(--ink);color:var(--black);font-size:14px;font-weight:560;font-stretch:112%;letter-spacing:.02em;text-decoration:none;transition:transform var(--dur-press) var(--ease-out),opacity var(--dur-hover) ease}
.button:active{transform:scale(.97)}
.button span[aria-hidden]{display:inline-block;transition:transform 220ms var(--ease-out)}
/* Ghost: text with a hairline that sweeps white from the left on hover. */
.button.is-ghost{position:relative;min-height:0;padding:13px 0;background:none;color:var(--ink);border-bottom:1px solid var(--ink-4);font-weight:450;transition:transform var(--dur-press) var(--ease-out)}
.button.is-ghost::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .button:hover{opacity:.88}
  .button:hover span[aria-hidden]{transform:translateX(4px)}
  .button.is-ghost:hover{opacity:1}
  .button.is-ghost:hover::after{transform:scaleX(1)}
  .button.is-ghost:hover span[aria-hidden]{transform:translateY(3px)}
  .button.is-ghost.is-up:hover span[aria-hidden]{transform:translateY(-3px)}
}

/* Event intro */
.event-intro{display:grid;grid-template-columns:1fr 1.65fr;gap:8%;padding:64px 0 96px}
.event-details p{margin:0}
.event-date{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.4vw,36px);line-height:1.3}
.event-weekday{display:block;font-family:var(--font-text);font-size:11px;font-weight:600;font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-3)}
.event-time{display:block;font-family:var(--font-text);font-weight:380;font-size:20px;margin-top:var(--s-3);color:var(--ink-2);font-variant-numeric:tabular-nums}
.event-details .event-venue{font-size:19px;line-height:1.65;margin:36px 0 var(--s-6)}
.event-venue span{color:var(--ink-3)}
.event-note strong{color:var(--ink);font-weight:600}
.section-no{font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--ink-3);margin-right:var(--s-4);vertical-align:.45em}
.event-story h2{font-size:clamp(28px,3vw,44px);font-weight:460;letter-spacing:-.03em;line-height:1.12;margin:0 0 var(--s-5)}
.event-story>p{font-size:17px;line-height:1.7;color:var(--ink-2);max-width:68ch;margin:0 0 17px}
.event-story>p.event-note{font-size:14px;color:var(--ink-3)}
.event-story .button.is-ghost{margin-top:var(--s-2)}

/* Section heading */
.section-heading{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-5);padding-top:26px;margin-bottom:38px}
/* Phone tilt (iOS asks for a tap first): a ghost control under the speakers heading, shown by main.js. */
.tilt-enable{display:inline-flex;align-items:center;gap:10px;margin:14px 0 0;padding:0 0 6px;background:none;border:0;border-bottom:1px solid var(--ink-4);color:var(--ink);font:inherit;font-size:12px;letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity 400ms var(--ease-out)}
.tilt-enable[hidden]{display:none}
.tilt-enable.is-done{opacity:0;pointer-events:none}
/* The section rule draws in from the left as the heading enters. */
.section-heading::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform 1100ms var(--ease-out)}
.section-heading.is-in::before{transform:scaleX(1)}
.no-js .section-heading::before{transform:none}
.section-heading h2{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.8vw,38px);letter-spacing:-.02em;margin:0}
.section-heading>p{font-size:11px;font-weight:600;font-stretch:125%;color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;margin:0}

/* Speakers */
.speaker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:58px var(--gutter)}
.speaker{min-width:0;display:flex;flex-direction:column}
.speaker h3{font-size:22px;font-weight:520;letter-spacing:-.025em;line-height:1.2;margin:22px 0 9px}
.speaker-role{font-size:11px;font-weight:600;font-stretch:125%;line-height:1.6;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;min-height:35px}
.speaker-bio{font-size:14px;line-height:1.65;color:var(--ink-2);margin:0 0 22px}
.speaker-link{font-size:12px;color:var(--ink);text-decoration:none;margin-top:auto;width:fit-content;border-bottom:1px solid var(--line-strong);padding-bottom:5px;transition:border-color var(--dur-hover) ease}
.speaker-link span[aria-hidden]{display:inline-block;margin-left:14px;transition:transform 200ms var(--ease-out)}
.speaker-index{transition:background var(--dur-hover) ease,color var(--dur-hover) ease}
@property --tick{syntax:"<length>";inherits:false;initial-value:10px}
@property --tick-c{syntax:"<color>";inherits:false;initial-value:rgba(255,255,255,.35)}
@media(hover:hover) and (pointer:fine){
  /* Press and drag a portrait to turn it (splat-stage.js); a plain click still opens the link. */
  .splats .splat-frame{-webkit-user-drag:none;user-select:none}
  .splats .splat-frame:active{cursor:grabbing}
  /* Press and drag the hero logo to turn it (splat-stage.js). */
  .splats.title-splats-ready .masthead{-webkit-user-select:none;user-select:none}
  .splats.title-splats-ready .masthead:active{cursor:grabbing}
  .speaker-link:hover{border-color:var(--ink)}
  /* Hovering a card: corner ticks reach out and brighten, the numeral inverts, the arrow nudges. */
  .speaker:hover .splat-frame{--tick:18px;--tick-c:rgba(255,255,255,.9)}
  .speaker:hover .speaker-index{background:var(--ink);color:var(--black)}
  .speaker:hover .speaker-link{border-color:var(--ink)}
  .speaker:hover .speaker-link span[aria-hidden]{transform:translate(2px,-2px)}
}
/* Card text fades up in step with its portrait's reveal (.is-revealing from main.js / splat-stage.js). */
.js .speaker:not(.is-cta)>:not(.splat-frame){opacity:0;transform:translateY(10px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.js .speaker.is-revealing>:not(.splat-frame){opacity:1;transform:none}
.js .speaker.is-revealing>h3{transition-delay:.06s}
.js .speaker.is-revealing>.speaker-role{transition-delay:.12s}
.js .speaker.is-revealing>.speaker-bio{transition-delay:.18s}
.js .speaker.is-revealing>.speaker-link{transition-delay:.24s}

/* Splat frame: a transparent window onto the canvas, marked by corner ticks. */
.splat-frame{--tick:10px;--tick-c:rgba(255,255,255,.35);position:relative;display:block;aspect-ratio:1;overflow:hidden;text-decoration:none;
  background:
    linear-gradient(var(--tick-c),var(--tick-c)) top left/var(--tick) 1px,
    linear-gradient(var(--tick-c),var(--tick-c)) top left/1px var(--tick),
    linear-gradient(var(--tick-c),var(--tick-c)) top right/var(--tick) 1px,
    linear-gradient(var(--tick-c),var(--tick-c)) top right/1px var(--tick),
    linear-gradient(var(--tick-c),var(--tick-c)) bottom left/var(--tick) 1px,
    linear-gradient(var(--tick-c),var(--tick-c)) bottom left/1px var(--tick),
    linear-gradient(var(--tick-c),var(--tick-c)) bottom right/var(--tick) 1px,
    linear-gradient(var(--tick-c),var(--tick-c)) bottom right/1px var(--tick);
  background-repeat:no-repeat}
.splat-frame{-webkit-tap-highlight-color:transparent;transition:--tick 260ms var(--ease-out),--tick-c 260ms ease}
.portrait{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
/* When splats draw, the photo stays for screen readers but is visually replaced. */
.splats .splat-frame .portrait{opacity:0}
.splats .splat-frame.is-fallback .portrait{opacity:1}
.speaker-index{position:absolute;left:12px;bottom:12px;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--ink);background:rgba(0,0,0,.72);padding:8px 9px}

/* Register tile: the one filled box on the page. */
.is-cta{justify-content:flex-start}
.cta-tile{aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:clamp(20px,2.2vw,32px);background:var(--surface);border:1px solid var(--line)}
.cta-tile p{margin:0}
.cta-kicker{font-size:11px;font-weight:600;font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cta-tile .cta-title{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1.15;margin:auto 0 var(--s-5)}

/* Partners */
.partners-intro{margin-top:100px}
.logos{display:flex;flex-direction:column;justify-content:center;padding:60px 0 80px;gap:50px}
/* Wayfinding: three quiet columns, facts only (from the venue's visitor information). */
.wayfinding{padding:0 0 80px}
.way-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(28px,4vw,64px);align-items:start}
/* The map: OpenStreetMap streets as dotted lines (splat-like points), the walk from the Sands St gate as
   drifting dots, Building 215 solid with a pulsing pin. The whole map opens Google Maps directions. */
.way-map{position:relative;display:block;overflow:hidden;aspect-ratio:960/600;border:1px solid var(--line);background:#030303;text-decoration:none;outline-offset:6px}
.way-map-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.way-map-svg text{font-family:var(--font-text);fill:var(--ink-3)}
.m-coast path{fill:none;stroke:#fff;stroke-opacity:.28;stroke-width:1.4;stroke-dasharray:.1 6;stroke-linecap:round}
.m-minor path,.m-major path,.m-yard path{fill:none;stroke:#fff;stroke-linecap:round;transition:stroke-opacity 400ms var(--ease-out)}
.m-minor path{stroke-opacity:.16;stroke-width:1.8;stroke-dasharray:.1 5}
.m-major path{stroke-opacity:.3;stroke-width:2.6;stroke-dasharray:.1 5}
.m-yard path{stroke-opacity:.42;stroke-width:2;stroke-dasharray:.1 4}
.m-street{font-size:11px;font-weight:600;font-stretch:125%;letter-spacing:.14em;text-transform:uppercase}
.m-water{font-size:13px;font-style:italic;letter-spacing:.3em;text-anchor:middle}
.m-area{font-size:11px;font-weight:600;font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;text-anchor:middle}
.m-station circle{fill:#030303;stroke:#fff;stroke-width:1.6}
.m-station text{font-size:13px;fill:var(--ink-2)}
.m-station tspan{font-weight:700;fill:var(--ink)}
.m-route{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.1 8;animation:m-walk 1.4s linear infinite}
@keyframes m-walk{to{stroke-dashoffset:-8.1}}
.m-building{fill:#fff}
.m-gate rect{fill:#030303;stroke:#fff;stroke-width:1.6}
.m-gate text{font-size:12px;fill:var(--ink-2);text-anchor:end}
.m-pin .m-dot{fill:#fff}
.m-pin .m-pulse{fill:none;stroke:#fff;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:m-pulse 2.4s var(--ease-out) infinite}
@keyframes m-pulse{from{transform:scale(.6);opacity:.9}to{transform:scale(3.2);opacity:0}}
.m-dest text{font-family:var(--font-display);font-weight:800;font-size:20px;fill:var(--ink)}
.m-dest .m-sub{font-family:var(--font-text);font-weight:500;font-size:13px;fill:var(--ink-2)}
.way-map-cta{position:absolute;right:14px;bottom:12px;font-size:12px;color:var(--ink);padding-bottom:4px;border-bottom:1px solid var(--line-strong);transition:border-color var(--dur-hover) ease}
@media(hover:hover) and (pointer:fine){
  .way-map-cta{opacity:.7;transition:opacity var(--dur-hover) ease,border-color var(--dur-hover) ease}
  .way-map:hover .way-map-cta{opacity:1;border-color:var(--ink)}
  .way-map:hover .m-minor path{stroke-opacity:.26}.way-map:hover .m-yard path{stroke-opacity:.6}
}
@media(prefers-reduced-motion:reduce){.m-route,.m-pin .m-pulse{animation:none}.m-pin .m-pulse{opacity:.5}}
.way h3{font-size:11px;font-weight:600;font-stretch:125%;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);margin:0 0 14px}
.way p,.way li{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0}
.way p+p{margin-top:12px}
.way ul,.way ol{list-style:none;padding:0;margin:0}
.way li+li{margin-top:8px}
.way ol{counter-reset:way}
.way ol li{counter-increment:way;display:grid;grid-template-columns:22px 1fr}
.way ol li::before{content:counter(way);font-family:var(--font-display);font-weight:800;font-size:11px;color:var(--ink-3);padding-top:4px}
.way a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color var(--dur-hover) ease}
.way a:hover{border-color:var(--ink)}
@media(max-width:760px){.way-grid{grid-template-columns:1fr;gap:32px}.wayfinding{padding-bottom:56px}
  /* phones: a closer crop around the gate and the building, so labels stay readable */
  .way-map{aspect-ratio:4/3}
  .way-map-svg{inset:auto;left:0;top:0;width:170%;height:auto;transform:translate(-40.5%,-21.4%)}
  .m-street,.m-area{font-size:13px}.m-station text{font-size:15px}.m-gate text{font-size:14px}
  .m-dest text{font-size:21px}.m-dest .m-sub{font-size:14px}}
.logo-row{display:grid;align-items:center}
.primary-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,4.2vw,68px)}
.secondary-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,4.2vw,68px)}
.logo{min-width:0;min-height:92px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);transition:opacity var(--dur-hover) ease,transform var(--dur-hover) var(--ease-out);outline-offset:14px}
.logo img{display:block;max-width:100%;height:auto;max-height:78px;object-fit:contain;filter:brightness(0) invert(1)}
@media(hover:hover) and (pointer:fine){.logo:hover{opacity:.72;transform:translateY(-3px)}}
.xgrids img{width:253px}.crysta img{width:253px}.nyc-capture img{width:278px}
.houdini{flex-direction:column;gap:14px}.houdini img{width:226px}.sidefx-name{font-size:12px;font-weight:700;letter-spacing:.18em}
.radiance{flex-direction:column;gap:12px}.radiance img{height:52px;width:52px}
.radiance-wordmark{font-family:"Archivo Logo",Arial,sans-serif;font-size:clamp(16px,1.45vw,23px);font-weight:700;letter-spacing:-.04em;white-space:nowrap}
.evercoast{gap:12px}.evercoast-wordmark{font-family:Poppins,sans-serif;font-size:clamp(20px,2.1vw,32px);font-weight:400;line-height:1}
.primary-row .evercoast img{width:34px;height:auto;max-height:none;flex:0 0 34px}
.scan-the-wild img{width:170px;max-height:112px}.forager img{width:157px;max-height:107px}

/* Credits and footer */
.credits{font-size:11px;color:var(--ink-4);line-height:1.8;margin:0 0 30px}
.credits summary{cursor:pointer;width:fit-content}
.credits a{color:var(--ink-3);text-underline-offset:3px}
.credits ul{padding-left:18px;columns:2}
.colophon{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);margin:0 0 var(--s-6);font-size:12px;color:var(--ink-3)}
.colophon p{margin:0}
.colophon .button{font-size:12px;padding:9px 0}
footer{display:flex;align-items:center;gap:24px}.footer-line{height:1px;background:var(--line);flex:1}

/* Entrance: text blocks fade up once, when first seen (main.js adds .is-in). */
.js .enter{opacity:0;transform:translateY(12px);filter:blur(5px);transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out),filter var(--dur-enter) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
.js .enter.is-in{opacity:1;transform:none;filter:blur(0)}

/* Responsive */
@media(max-width:1050px){.speaker-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}.event-intro{gap:6%;grid-template-columns:1fr 1.5fr}}
@media(max-width:900px){.masthead{padding-bottom:45px}.primary-row,.secondary-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 65px;padding:0 7%}.logo{min-height:85px}.primary-row .logo img{max-height:50px}.radiance-wordmark{font-size:23px}}
@media(max-width:760px){.event-intro{grid-template-columns:1fr;gap:38px;padding:38px 0 60px}.event-details{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.event-details .event-venue{font-size:15px;margin:0}.event-details .button{grid-column:1/-1;justify-self:start}.event-date{font-size:24px}.event-time{font-size:16px}.speaker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 22px}.section-heading{display:block;margin-bottom:26px}.section-heading>p{margin-top:12px}.speaker h3{font-size:21px}.partners-intro{margin-top:70px}.credits ul{columns:1}}
@media(max-width:540px){.poster{padding:38px 24px 25px}.masthead{padding:26px 0 34px}h1{font-size:clamp(30px,8.7vw,47px);letter-spacing:.005em}.event-details{display:block}.event-details .event-venue{margin:22px 0 var(--s-5)}.event-story>p{font-size:16px}.speaker-grid{gap:36px 18px}.speaker h3{font-size:19px}.speaker-role{font-size:10px;min-height:48px}.speaker-bio{font-size:13px;line-height:1.6}.speaker-link{font-size:11px}.speaker-link span[aria-hidden]{margin-left:5px}.logos{padding:38px 0 48px;gap:32px}.primary-row,.secondary-row{padding:0;gap:32px 22px}.logo{min-height:90px}.primary-row .logo img{width:100%;max-height:50px}.houdini img{width:170px}.sidefx-name{font-size:10px}.radiance img{width:40px;height:40px}.radiance-wordmark{font-size:16px}.nyc-capture img{width:180px}.scan-the-wild img{width:130px;max-height:87px}.forager img{width:126px;max-height:86px}.evercoast{gap:8px}.evercoast-wordmark{font-size:clamp(16px,4.3vw,23px)}.primary-row .evercoast img{width:24px;flex-basis:24px}footer{gap:16px}.cta-tile{aspect-ratio:auto;min-height:220px}}
@media(max-width:370px){.speaker-grid{grid-template-columns:1fr}.speaker-role{min-height:0}.speaker-bio{font-size:14px}}

@media(max-width:760px){.colophon{flex-direction:column;align-items:flex-start;gap:var(--s-3)}}
/* Phones: entrances fade and rise, no blur (blur repaints every frame and costs on mobile GPUs). */
@media(max-width:760px){.js .enter{filter:none;transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .enter{transform:none;filter:none;transition:opacity 300ms ease}
  .ticker-track{animation:none}
  .dust{display:none}
  .section-heading::before{transform:none;transition:none}
  .js .speaker:not(.is-cta)>:not(.splat-frame){transform:none;transition:opacity 300ms ease}
  .button span[aria-hidden],.speaker-link span[aria-hidden]{transition:none}
  .button,.logo{transition:opacity var(--dur-hover) ease}
  .button:active{transform:none}
  .logo:hover{transform:none}
}