/* Crown Art Events - Velvet. Deep wine ground, champagne gold, Cormorant serif. No dependencies. */
:root{
  --wine:#20090d;--wine-2:#2a0d13;--wine-3:#3a141c;
  --gold:#d8b46e;--gold-2:#b8924a;--cream:#f6e9dc;
  --ink-70:rgba(246,233,220,.74);--ink-50:rgba(246,233,220,.55);
  --line:rgba(216,180,110,.26);--line-2:rgba(216,180,110,.14);
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Sofia Sans",system-ui,sans-serif;
  --edge:clamp(20px,5vw,72px);--top-h:72px;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.77,0,.18,1);
}
*,*::before,*::after{box-sizing:border-box}
/* The UA rule for [hidden] is a bare attribute selector, so ANY class rule that sets
   `display` outranks it and the element stays in the layout. .cae-menu sets display:grid,
   which left the closed overlay covering the viewport at opacity 0 - invisible, but still
   the topmost hit-test target, so nothing in <main> could be clicked or hovered. Keep this
   guard above every component rule. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wine);color:var(--cream);font-family:var(--sans);font-size:16px;line-height:1.55;text-wrap:pretty;overflow-x:clip}
.cae{background:var(--wine);color:var(--cream);font-family:var(--sans)}
.cae a{color:var(--gold)}.cae a:hover{color:var(--cream)}
.cae img{display:block;max-width:100%}
.cae h1,.cae h2,.cae h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1;margin:0}
.cae p{margin:0}
::selection{background:rgba(216,180,110,.35)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.kicker{font-size:12px;line-height:1;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px}
.kicker.c{justify-content:center}
.kicker .dia{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}
.sec{padding:clamp(80px,11vw,168px) var(--edge)}
.h-display{font-size:clamp(44px,6.4vw,112px);line-height:.98;letter-spacing:-.015em;font-weight:300}
.h-display em,.h-mid em{font-style:italic;font-weight:400;color:var(--gold)}
.h-mid{font-size:clamp(34px,4vw,64px);line-height:1.02;font-weight:300}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--ink-70);max-width:50ch}
.copy{font-size:16px;line-height:1.65;color:var(--ink-70);max-width:56ch}
.meta{font-size:12px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);font-feature-settings:"tnum" 1}
.center{text-align:center}
.center .lead,.center .copy{margin-left:auto;margin-right:auto}
.rule{height:1px;background:var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 34px;border:1px solid var(--gold);color:var(--gold);text-decoration:none;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;background:transparent;cursor:pointer;transition:background .3s,color .3s}
.btn:hover{background:var(--gold);color:var(--wine)}
.btn.solid{background:var(--gold);color:var(--wine)}
.btn.solid:hover{background:var(--cream);color:var(--wine)}
.btn.quiet{border-color:var(--line);color:var(--cream)}
.btn.quiet:hover{border-color:var(--gold);background:transparent;color:var(--gold)}
.btn .arr{transition:transform .35s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}

/* chrome */
.cae-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none}
.cae-loader{display:none}
/* Three columns with equal 1fr flanks, not space-between: the brand is wider than the
   phone number, so distributing free space would centre the nav on the leftover strip
   and leave it off the page's own centre line, a few pixels out from the hero below it. */
.cae-top{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--top-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 var(--edge);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.cae-top .brand{grid-column:1;justify-self:start}
.cae-top .cae-nav{grid-column:2}
/* the number shows only above 1024px and the burger only at or below 860px, so these
   two never share the cell */
.cae-top .cae-tel,.cae-top .cae-burger{grid-column:3;justify-self:end}
.cae.is-scrolled .cae-top{background:rgba(32,9,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line-2)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream);font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.brand:hover{color:var(--cream)}
.brand img{width:26px;height:26px}
.cae-top .meta a{text-decoration:none;color:var(--cream);letter-spacing:.14em}
.cae-top .meta a:hover{color:var(--gold)}

/* Section nav. The bar speaks the same small tracked sans as .brand/.meta and stays out
   of the way; the mobile overlay is where the nav gets its voice, in Cormorant at display
   size. Anchors clear the fixed bar with scroll-margin - without it every jump parks the
   target heading underneath the 72px header. */
section[id]{scroll-margin-top:var(--top-h)}
.cae-nav{display:flex;align-items:center;gap:clamp(16px,2.1vw,32px)}
.cae-nav a{position:relative;padding:8px 0;text-decoration:none;color:var(--ink-70);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:color .35s var(--ease-out)}
.cae-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.cae-nav a:hover{color:var(--cream)}
.cae-nav a[aria-current]{color:var(--gold)}
.cae-nav a:hover::after,.cae-nav a[aria-current]::after{transform:scaleX(1)}

.cae-burger{display:none;align-items:center;gap:12px;padding:8px 0;background:none;border:0;color:var(--ink-70);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:color .3s}
.cae-burger:hover{color:var(--cream)}
.cae-burger-bars{position:relative;display:block;width:22px;height:9px;flex:none}
.cae-burger-bars::before,.cae-burger-bars::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--gold);transition:transform .4s var(--ease-io)}
.cae-burger-bars::before{top:0}
.cae-burger-bars::after{bottom:0}
.cae-burger[aria-expanded="true"] .cae-burger-bars::before{transform:translateY(4px) rotate(45deg)}
.cae-burger[aria-expanded="true"] .cae-burger-bars::after{transform:translateY(-4px) rotate(-45deg)}

/* z-index 40 keeps the overlay under .cae-top (50), so the bar and its close control stay
   on top of it; the overlay's own top padding leaves that bar its room. */
.cae-menu{position:fixed;inset:0;z-index:40;display:grid;grid-template-rows:1fr auto;gap:32px;padding:calc(var(--top-h) + clamp(24px,6vh,64px)) var(--edge) clamp(28px,6vh,56px);background:var(--wine);overflow-y:auto;opacity:0;transition:opacity .45s var(--ease-out)}
.cae-menu.is-open{opacity:1}
.cae-menu-nav{display:grid;align-content:center;justify-items:start;gap:clamp(4px,1.2vh,14px)}
.cae-menu-nav a{font-family:var(--serif);font-weight:300;font-size:clamp(32px,8.4vw,56px);line-height:1.14;color:var(--cream);text-decoration:none;opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),color .3s ease;transition-delay:calc(var(--i,0)*40ms + 90ms)}
.cae-menu.is-open .cae-menu-nav a{opacity:1;transform:none}
.cae-menu-nav a:hover,.cae-menu-nav a[aria-current]{color:var(--gold)}
.cae-menu-tel{margin:0;padding-top:22px;border-top:1px solid var(--line-2)}
.cae-menu-tel a{text-decoration:none;color:var(--cream);letter-spacing:.14em}
.cae-menu-tel a:hover{color:var(--gold)}
.cae-menu-open,.cae-menu-open body{overflow:hidden}

/* The bar fits brand + 5 links + number down to ~1024px; below that the number goes and
   the overlay carries it. .cae-top .meta is already hidden under 860px further down. */
@media (max-width:1024px){
  .cae-top .cae-tel{display:none}
}
@media (max-width:860px){
  .cae-nav{display:none}
  .cae-burger{display:inline-flex}
}

/* reveals - gated on .cae-js so content is visible if the script never runs */
/* Never set `transform` on the .is-in state: elements like .scroll-cue rely on their own
   translateX(-50%) once revealed, and overriding it knocks them off centre. */
[data-reveal]{transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i,0)*100ms)}
.cae-js [data-reveal]:not(.is-in){opacity:0;transform:translateY(30px)}
/* Only the hero CTA gets a permanent compositing layer: its 1px border is rasterised once
   and moved, rather than re-rasterised as the motion settles, which shimmers on a 1x
   display. Scoped to this one element on purpose - `will-change` on all ~40 reveal
   targets promotes ~40 layers and costs far more memory than it is worth. */
.cta{will-change:opacity,transform}
[data-reveal="clip"]{transition:clip-path 1.2s var(--ease-io)}
.cae-js [data-reveal="clip"]:not(.is-in){transform:none;opacity:1;clip-path:inset(0 0 100% 0)}
[data-reveal="wipe"]{transition:clip-path 1.1s var(--ease-io)}
.cae-js [data-reveal="wipe"]:not(.is-in){transform:none;opacity:1;clip-path:inset(0 100% 0 0)}
[data-reveal="fade"]{transition:opacity 1.6s ease}
.cae-js [data-reveal="fade"]:not(.is-in){transform:none;opacity:0}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln-i{display:inline-block;transition:transform 1.2s var(--ease-out) calc(var(--i,0)*120ms)}
.cae-js [data-lines]:not(.is-in) .ln-i{transform:translateY(112%)}
.words{--p:100%;background:linear-gradient(180deg,var(--cream) calc(var(--p) - 10%),rgba(246,233,220,.28) calc(var(--p) + 10%));-webkit-background-clip:text;background-clip:text;color:transparent}
.cae-js .words{--p:0%}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:calc(var(--top-h) + 40px) var(--edge) 96px}
.hero-bg{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.hero-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 62%,rgba(32,9,13,.1) 0%,rgba(32,9,13,.8) 72%),linear-gradient(180deg,rgba(32,9,13,.5),rgba(32,9,13,0) 30%,rgba(32,9,13,0) 70%,var(--wine))}
.hero-in{position:relative;max-width:1100px}
.display{font-size:clamp(50px,8.6vw,138px);line-height:.98;letter-spacing:.05em;text-transform:uppercase;font-weight:300}
.display .art{font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--gold)}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-50)}
.scroll-cue::after{content:"";width:1px;height:40px;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* marquee */
.marquee{overflow:hidden;display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.marquee-track{display:flex;width:max-content;animation:mq var(--dur,46s) linear infinite}
.marquee[data-reverse] .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:var(--gap,56px);padding-right:var(--gap,56px);flex:none}
.mq-item{display:flex;align-items:center;gap:var(--gap,56px);white-space:nowrap}
.mq-item::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}
.mq-text{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(26px,3vw,44px);color:var(--ink-70)}
.pt .mq-text{font-family:var(--sans);font-style:normal;font-weight:600;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-70)}
@keyframes mq{to{transform:translateX(-50%)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:44px var(--edge) 48px;border-left:1px solid var(--line);text-align:center}
.stat:first-child{border-left:0}
.stat-n{font-family:var(--serif);font-weight:300;font-size:clamp(60px,7vw,124px);line-height:.9;color:var(--cream);font-feature-settings:"tnum" 1}
.stat-n sup{font-size:.45em;vertical-align:.55em;color:var(--gold)}

/* format chapters (sticky stack) */
/* A pinned card can only ever show `100svh - var(--top-h)`, so the stack is only safe while
   a whole chapter fits in that. main.js measures on load and resize and sets .is-unpinned on
   every card when the tallest one does not - see fitCards() - which covers landscape phones
   and short desktop windows; the media query under 860px is the no-JS baseline for phones. */
.card{position:sticky;top:var(--top-h);background:var(--wine);border-top:1px solid var(--line)}
.card.is-unpinned{position:static}
.card.alt{background:var(--wine-2)}
.card-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100svh - var(--top-h));transform-origin:50% 0;will-change:transform,opacity}
.card-txt{padding:40px var(--edge) 48px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.card-num{font-family:var(--serif);font-weight:300;font-size:clamp(36px,3.6vw,60px);line-height:1;color:var(--gold);font-feature-settings:"tnum" 1}
.card-title{font-size:clamp(40px,4.6vw,80px);line-height:.98;max-width:12ch;font-weight:300}
.poster{position:relative;overflow:hidden;min-height:52svh}
.poster img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,9,13,0) 40%,rgba(32,9,13,.85))}
.poster-type{position:absolute;left:28px;right:28px;bottom:24px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(40px,5vw,96px);line-height:.9;color:var(--cream);z-index:1}
.poster-tag{position:absolute;top:24px;right:28px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);z-index:1}

/* gallery */
.gal .marquee{border:0;padding:0}
.gal .marquee-group{gap:2px;padding-right:2px}
.tile{position:relative;flex:none;width:clamp(220px,26vw,380px);aspect-ratio:3/4;overflow:hidden;margin:0;background:var(--wine-2)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.tile:hover img{transform:scale(1.05)}
.tile-cap{position:absolute;left:18px;bottom:16px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream)}

/* past events - posters sit dimmed and desaturated so their many brand colours read as
   one wine-toned field, then come up to full colour on hover (same idea as .video) */
/* 3 columns with one landscape poster spanning 2 = 9 slots, which tiles to exactly 3 full
   rows. At this width a 2-col span at 3/2 is the same height as a 1-col cell at 3/4, so the
   rows stay level. */
.events{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:1px;background:var(--line);border:1px solid var(--line)}
.event{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--wine)}
.event.wide{grid-column:span 2;aspect-ratio:3/2}
/* contain, not cover: these are posters, so cropping eats the header and the sponsor strip
   along the bottom. The cell becomes a mat and each poster is shown whole. */
.event img{width:100%;height:100%;object-fit:contain;opacity:.66;filter:saturate(.72) contrast(1.03);transition:transform .9s var(--ease-out),opacity .45s ease,filter .45s ease}
.event:hover img{transform:scale(1.03);opacity:1;filter:none}
.event::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,9,13,0) 62%,rgba(32,9,13,.82));pointer-events:none}
.event-cap{position:absolute;left:18px;right:18px;bottom:15px;z-index:1;margin:0;font-size:11px;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:var(--cream)}
.event-y{position:absolute;top:15px;right:18px;z-index:1;font-size:11px;letter-spacing:.22em;color:var(--gold)}

/* about */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px clamp(24px,6vw,120px);align-items:start}
.quote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,3vw,48px);line-height:1.15;max-width:26ch;text-indent:-.4em}
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:24px;align-items:start;padding:22px 0;font-family:var(--serif);font-size:clamp(20px,1.7vw,26px);line-height:1.2;color:var(--cream)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold)}
.plus{position:relative;width:20px;height:20px;flex:none;margin-top:4px}
.plus::before,.plus::after{content:"";position:absolute;background:var(--gold);left:9px;top:0;width:1px;height:20px;transition:transform .35s var(--ease-out)}
.plus::after{transform:rotate(90deg)}
.qa[open] .plus::before{transform:rotate(90deg)}
.qa-a{padding:0 44px 26px 0;font-size:16px;line-height:1.65;color:var(--ink-70);max-width:60ch}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.member{background:var(--wine);display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:32px}
.member h3{font-size:clamp(26px,2.2vw,34px)}

/* video */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.video{position:relative;aspect-ratio:16/9;background:var(--wine-2);overflow:hidden;cursor:pointer;border:0;padding:0;width:100%;text-align:left;color:var(--cream);font:inherit;display:block}
.video img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.6) contrast(1.05);transition:transform .9s var(--ease-out),opacity .4s}
.video:hover img{transform:scale(1.03);opacity:.7}
.video .play{position:absolute;left:24px;right:24px;bottom:22px;display:flex;align-items:center;gap:16px;font-family:var(--serif);font-size:clamp(18px,1.6vw,24px);line-height:1.2}
.play-sq{width:54px;height:54px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;flex:none;transition:background .3s}
.video:hover .play-sq{background:var(--gold)}
.play-sq::before{content:"";width:0;height:0;border-left:12px solid var(--gold);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;transition:border-color .3s}
.video:hover .play-sq::before{border-left-color:var(--wine)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* awards + press */
.aw{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px 24px;padding:24px 0;border-top:1px solid var(--line)}
.aw:last-child{border-bottom:1px solid var(--line)}
.aw-y{font-family:var(--serif);font-size:22px;color:var(--gold)}
.aw-t{font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.2}
.press{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--cream);transition:padding-left .45s var(--ease-out),color .25s}
.press:last-child{border-bottom:1px solid var(--line)}
.press:hover{padding-left:14px;color:var(--gold)}
.press .arr{display:inline-block;transition:transform .45s var(--ease-out)}
.press:hover .arr{transform:translate(5px,-5px)}
.press-t{font-family:var(--serif);font-size:clamp(20px,1.9vw,28px);line-height:1.15}

/* close + footer */
.close{position:relative;overflow:hidden;text-align:center}
.close .hero-bg{transform:scaleX(-1)}
.close .hero-veil{background:linear-gradient(180deg,var(--wine),rgba(32,9,13,.55) 40%,rgba(32,9,13,.55) 60%,var(--wine))}
.close .in{position:relative}
.contact-big{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.2vw,52px);line-height:1;text-decoration:none;color:var(--cream);overflow-wrap:anywhere}
.contact-big:hover{color:var(--gold)}
.wordmark{font-family:var(--serif);font-weight:300;font-size:clamp(28px,8vw,165px);line-height:.9;letter-spacing:.06em;text-transform:uppercase;text-align:center;white-space:nowrap}
.foot-meta{display:flex;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;font-size:12px;letter-spacing:.08em;line-height:1.6;color:var(--ink-50)}
.foot-meta a{text-decoration:none;color:var(--ink-50)}
.foot-meta a:hover{color:var(--gold)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}

@media (max-width:860px){
  .cae-top .meta{display:none}
  .stats{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid var(--line);padding:32px var(--edge)}
  .stat:first-child{border-top:0}
  /* Stacked single-column, a card runs 715-836px tall against the 591px a pinned card gets
     on a 375x667 iPhone SE - so the bottom of every chapter, poster included, sat below the
     fold and the next card slid over it before it could be read. No phone is tall enough for
     this layout, so the stack is off for the whole range rather than left to fitCards(),
     which keeps the fix in place with the script blocked. main.js skips the scale/opacity
     handoff for any card that is not sticky, so keep the two in step. */
  .card{position:static}
  .card-in{grid-template-columns:1fr;min-height:0}
  .card-txt{gap:32px;padding:32px var(--edge) 40px}
  .poster{min-height:0;aspect-ratio:4/3}
  .split,.team,.videos{grid-template-columns:1fr}
  .events{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aw,.press{grid-template-columns:1fr;gap:6px}
  .press:hover{padding-left:0}
  .qa-a{padding-right:0}
}
@media (max-width:1180px) and (min-width:861px){
  .events{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],.ln-i,.cae-js [data-reveal]:not(.is-in),.cae-js [data-lines]:not(.is-in) .ln-i{opacity:1;transform:none;transition:none;clip-path:none}
  .cta{will-change:auto}
  .scroll-cue{transform:translateX(-50%)}
  .marquee-track,.scroll-cue::after{animation:none}
  .words,.cae-js .words{--p:100%}
  .cae-menu{transition:none}
  .cae-menu-nav a{transform:none;transition:color .3s ease}
}