/* Molten Studio — the hero design system.
   Opus chooses from these layouts, type pairings, palettes and motion moods; it never writes CSS.
   Every hero is the same markup with different classes and one tiny theme file of colours. */

/* ---- fonts (self-hosted, SIL Open Font License) ------------------------------------------- */
@font-face{font-family:'Fraunces Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/fraunces-latin-full-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces Variable';font-style:italic;font-display:swap;font-weight:100 900;src:url(/fonts/fraunces-latin-full-italic.woff2) format('woff2')}
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque Variable';font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk Variable';font-style:normal;font-display:swap;font-weight:300 700;src:url(/fonts/space-grotesk-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/instrument-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-display:swap;font-weight:400;src:url(/fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}

/* ---- base ---------------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body.hero-page{margin:0;background:var(--bg)}
.hero{
  --pad:clamp(20px,4.2vw,68px);
  --t0:.28s; --stag:.065s; --dur:1.15s; --lift:108%;
  --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --fs:clamp(44px,7.2vw,124px); --fk:1;
  --line:color-mix(in oklab,var(--ink) 15%,transparent);
  --media-h:clamp(420px,calc(100svh - 150px),820px);
  position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  background:var(--bg);color:var(--ink);overflow:hidden;
  font:400 clamp(15px,1.06vw,17px)/1.55 'Inter Variable',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
.hero.mo-calm{--t0:.35s;--stag:.09s;--dur:1.6s;--lift:100%;--ease:cubic-bezier(.22,1,.36,1)}
.hero.mo-lively{--ease:cubic-bezier(.2,1.25,.32,1)}
.hero.hl-m{--fk:.82}
.hero.hl-l{--fk:.66}

/* ambient light: two soft pools of the accent colour drifting very slowly */
.hero::before{content:'';position:absolute;inset:-25%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 34% at 86% 12%,color-mix(in oklab,var(--accent) 15%,transparent),transparent 70%),
             radial-gradient(30% 30% at 4% 96%,color-mix(in oklab,var(--accent) 9%,transparent),transparent 70%);
  animation:h-drift 26s ease-in-out infinite alternate}
.m-dark::before{background:radial-gradient(38% 34% at 86% 12%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 70%),
             radial-gradient(30% 30% at 4% 96%,color-mix(in oklab,var(--accent) 14%,transparent),transparent 70%)}

/* film grain, so flat colours feel printed rather than digital */
.h-grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* ---- navigation ---------------------------------------------------------------------------- */
.h-nav{position:relative;z-index:4;display:flex;align-items:center;gap:clamp(16px,3vw,48px);padding:clamp(16px,2.2vw,30px) var(--pad);animation:h-fade 1s var(--ease-out) both .1s}
.h-brand{margin-right:auto;font-family:var(--display);font-weight:var(--display-wght);font-size:clamp(18px,1.45vw,23px);letter-spacing:-.02em;line-height:1}
.t-warm .h-brand{font-variation-settings:'SOFT' 50,'opsz' 48}
.h-nav nav{display:flex;gap:clamp(14px,2.4vw,40px);font-size:.92em;color:var(--muted)}
.h-nav nav span{position:relative;cursor:pointer;transition:color .3s}
.h-nav nav span::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.h-nav nav span:hover{color:var(--ink)}
.h-nav nav span:hover::after{transform:scaleX(1);transform-origin:left}

/* ---- buttons ------------------------------------------------------------------------------- */
.h-btn{position:relative;display:inline-flex;align-items:center;gap:.65em;padding:1.02em 1.55em;border-radius:999px;overflow:hidden;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-weight:580;font-size:.98em;line-height:1;letter-spacing:-.005em;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.22),0 14px 34px -14px color-mix(in oklab,var(--accent) 75%,transparent);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.h-btn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease-out)}
.h-btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255/.22),0 22px 44px -16px color-mix(in oklab,var(--accent) 85%,transparent)}
.h-btn:hover svg{transform:translateX(4px)}
.h-ctas .h-btn:first-child::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255/.32) 50%,transparent 70%);transform:translateX(-130%);animation:h-shine 6s ease-in-out infinite 2.6s}
.h-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--ink) 24%,transparent)}
.h-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.h-btn.sm{padding:.78em 1.2em;font-size:.86em;box-shadow:none}

/* ---- copy ---------------------------------------------------------------------------------- */
.h-main{position:relative;z-index:2;display:grid;align-items:center;padding:0 var(--pad) var(--pad)}
.h-copy{position:relative;min-width:0}
.h-eyebrow{display:flex;align-items:center;gap:.8em;margin:0 0 1.5em;font-size:.76em;font-weight:620;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);animation:h-fade-up 1s var(--ease-out) both .18s}
.h-eyebrow::before{content:'';flex:0 0 2.4em;height:1px;background:currentColor;transform-origin:left;animation:h-line 1.3s var(--ease-out) both .2s}

.h-title{margin:0;font-family:var(--display);font-weight:var(--display-wght);letter-spacing:var(--display-track);
  font-size:calc(var(--fs) * var(--fk));line-height:.93;text-wrap:balance;font-optical-sizing:auto;hyphens:manual;overflow-wrap:break-word}
.t-warm .h-title{font-variation-settings:'SOFT' 30,'WONK' 0}
.t-editorial .h-title{line-height:.95;letter-spacing:-.022em}
.t-grotesk .h-title{line-height:.9}
.t-modern .h-title{line-height:.9}
.h-title em{font-family:var(--em-font);font-style:italic;font-weight:400;color:var(--accent-text)}
.t-warm .h-title em{font-weight:420;font-variation-settings:'SOFT' 100,'WONK' 1}
.t-grotesk .h-title em,.t-modern .h-title em{font-size:1.1em;letter-spacing:-.025em;line-height:.8}

/* the headline arrives word by word, each rising out of its own mask */
.w{display:inline-block;overflow:clip;vertical-align:top;padding:.06em .1em .16em .02em;margin:-.06em -.1em -.16em -.02em}
.w>span{display:inline-block;animation:h-rise var(--dur) var(--ease) both;animation-delay:var(--t0)}
.d2>span{animation-delay:calc(var(--t0) + var(--stag)*1)}  .d3>span{animation-delay:calc(var(--t0) + var(--stag)*2)}
.d4>span{animation-delay:calc(var(--t0) + var(--stag)*3)}  .d5>span{animation-delay:calc(var(--t0) + var(--stag)*4)}
.d6>span{animation-delay:calc(var(--t0) + var(--stag)*5)}  .d7>span{animation-delay:calc(var(--t0) + var(--stag)*6)}
.d8>span{animation-delay:calc(var(--t0) + var(--stag)*7)}  .d9>span{animation-delay:calc(var(--t0) + var(--stag)*8)}
.d10>span{animation-delay:calc(var(--t0) + var(--stag)*9)} .d11>span{animation-delay:calc(var(--t0) + var(--stag)*10)}
.d12>span{animation-delay:calc(var(--t0) + var(--stag)*11)} .d13>span{animation-delay:calc(var(--t0) + var(--stag)*12)}
.d14>span{animation-delay:calc(var(--t0) + var(--stag)*13)} .d15>span{animation-delay:calc(var(--t0) + var(--stag)*14)}
.d16>span{animation-delay:calc(var(--t0) + var(--stag)*15)}

.h-sub{max-width:33em;margin:1.55em 0 0;font-size:clamp(16px,1.24vw,19.5px);line-height:1.55;color:var(--muted);text-wrap:pretty;animation:h-fade-up 1.1s var(--ease-out) both .78s}
.h-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.15em;animation:h-fade-up 1.1s var(--ease-out) both .92s}
.h-badges{display:flex;flex-wrap:wrap;gap:10px 26px;margin:2.5em 0 0;padding:0;list-style:none;font-size:.86em;color:var(--muted)}
.h-badges li{display:flex;align-items:center;gap:.6em;animation:h-fade-up 1s var(--ease-out) both 1.08s}
.h-badges li:nth-child(2){animation-delay:1.18s} .h-badges li:nth-child(3){animation-delay:1.28s}
.h-badges li::before{content:'';flex:0 0 6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---- photographs ----------------------------------------------------------------------------- */
.ph{position:relative;overflow:hidden;background:color-mix(in oklab,var(--surface) 70%,var(--ink) 6%)}
.h-img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fx) var(--fy);scale:1.06;transition:scale 1.6s var(--ease-out)}
.h-img.main{animation:h-zoom 2.8s var(--ease-out) both .15s,h-breathe 22s ease-in-out infinite alternate 3s}
.tr-warm .h-img{filter:sepia(.16) saturate(1.12) contrast(1.03) brightness(1.02)}
.tr-cool .h-img{filter:saturate(.86) hue-rotate(-6deg) contrast(1.06)}
.tr-mono .h-img{filter:grayscale(1) contrast(1.12)}
.tr-duotone .h-img{filter:grayscale(1) contrast(1.18) brightness(1.04)}
.tr-duotone .ph::after{content:'';position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;opacity:.92;pointer-events:none}
/* pointer parallax (hero.js sets --px/--py between -0.5 and 0.5 on fine pointers only) */
.h-media,.h-mosaic,.h-frame,.h-inset,.h-ornament{transform:translate3d(calc(var(--px,0) * -16px),calc(var(--py,0) * -12px),0);transition:transform 1.2s var(--ease-out)}
.h-coin,.h-float,.h-stamp{transform:translate3d(calc(var(--px,0) * 22px),calc(var(--py,0) * 16px),0);transition:transform 1.2s var(--ease-out)}

/* ==== layout: split — copy beside an arched photograph ======================================= */
.l-split .h-main{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,100px)}
.l-split{--fs:clamp(44px,6.3vw,108px)}
.h-media{position:relative;height:var(--media-h)}
.h-arch{position:absolute;inset:0 0 0 7%;border-radius:999px 999px 26px 26px;box-shadow:0 50px 90px -50px rgb(0 0 0/.45);animation:h-arch 1.7s var(--ease-out) both .2s}
.h-coin{position:absolute;left:-3%;bottom:8%;width:clamp(116px,13vw,214px);aspect-ratio:1;border-radius:50%;
  border:clamp(6px,.6vw,10px) solid var(--bg);box-shadow:0 26px 50px -24px rgb(0 0 0/.5);animation:h-pop 1.2s var(--ease) both 1.05s,h-bob 7s ease-in-out infinite 2.3s}
.h-float{position:absolute;right:-3%;top:11%;z-index:2;display:flex;align-items:center;gap:.65em;padding:.9em 1.25em;border-radius:999px;
  background:color-mix(in oklab,var(--surface) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  font-size:.86em;font-weight:580;color:var(--ink);box-shadow:0 22px 44px -22px rgb(0 0 0/.42),inset 0 0 0 1px color-mix(in oklab,var(--ink) 9%,transparent);
  animation:h-pop 1s var(--ease) both 1.35s,h-bob 8s ease-in-out infinite 2.6s}
.h-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:h-ping 2.2s ease-out infinite 2s}

/* ==== layout: fullbleed — the photograph is the page =========================================== */
.l-fullbleed{--ink:#fff;--muted:rgb(255 255 255/.84);--accent-text:var(--accent-on-dark);--fs:clamp(48px,8vw,138px);background:#0f0f0f;color:#fff}
.h-bg{position:absolute;inset:0;z-index:-1;animation:h-fade 1.6s ease both}
.h-bg .h-img.main{animation:h-zoom-far 3.4s var(--ease-out) both,h-breathe 26s ease-in-out infinite alternate 3.4s}
.h-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0/.5) 0%,rgb(0 0 0/0) 26%),linear-gradient(18deg,rgb(0 0 0/.82) 6%,rgb(0 0 0/.34) 52%,rgb(0 0 0/0) 82%)}
.l-fullbleed .h-main{align-items:end;padding-bottom:calc(var(--pad) * 1.15)}
.l-fullbleed .h-copy{max-width:min(1040px,74%)}
.l-fullbleed .h-btn.ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.l-fullbleed .h-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.l-fullbleed .h-badges li{padding:.55em 1em;border-radius:999px;background:rgb(255 255 255/.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.l-fullbleed .h-nav nav{color:rgb(255 255 255/.86)}
.l-fullbleed .h-main::after{content:'';position:absolute;right:var(--pad);bottom:var(--pad);width:1px;height:72px;background:linear-gradient(rgb(255 255 255/0),#fff);transform-origin:top;animation:h-scroll 2.4s var(--ease-out) infinite 2s}
.l-fullbleed .h-grain{opacity:.16}

/* ==== layout: editorial — a magazine cover ====================================================== */
.l-editorial{--fs:clamp(50px,7.7vw,138px)}
.l-editorial .h-main{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,32px);align-content:center;align-items:start}
.l-editorial .h-copy{display:contents}
.l-editorial .h-eyebrow{grid-column:1/-1;grid-row:1;margin:0 0 clamp(20px,3.4vw,52px);padding-bottom:1.05em;border-bottom:1px solid var(--line)}
.l-editorial .h-eyebrow::before{display:none}
.l-editorial .h-eyebrow::after{content:'Nº 01';margin-left:auto;letter-spacing:.1em}
.l-editorial .h-title{grid-column:1/9;grid-row:2;align-self:end}
.l-editorial .h-sub{grid-column:1/6;grid-row:3;margin-top:clamp(22px,2.6vw,40px)}
.l-editorial .h-ctas{grid-column:1/6;grid-row:4}
.l-editorial .h-badges{grid-column:6/9;grid-row:3/5;flex-direction:column;gap:0;margin:clamp(22px,2.6vw,40px) 0 0;padding-left:clamp(14px,2vw,32px);border-left:1px solid var(--line)}
.l-editorial .h-badges li{padding:.85em 0;border-bottom:1px solid var(--line)}
.l-editorial .h-badges li:last-child{border-bottom:0}
.h-inset{grid-column:9/13;grid-row:2/5;align-self:center;margin:0;animation:h-fade 1s ease both .3s}
.h-inset .ph{aspect-ratio:4/5;border-radius:3px;animation:h-curtain 1.6s var(--ease-out) both .35s}
.h-inset figcaption{margin-top:.9em;font:italic 400 1.05em/1.3 'Instrument Serif',Georgia,serif;color:var(--muted)}
.h-inset figcaption::before{content:'↳ ';font-style:normal}
.h-ornament{grid-column:9/13;grid-row:2/5;align-self:center;justify-self:center;position:relative;width:min(100%,340px);aspect-ratio:1}
.h-ornament i{position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in oklab,var(--ink) 30%,transparent);animation:h-spin 60s linear infinite}
.h-ornament i+i{inset:22%;border:0;background:radial-gradient(circle at 35% 30%,color-mix(in oklab,var(--accent) 70%,#fff),var(--accent));animation:h-pop 1.4s var(--ease) both .6s,h-bob 9s ease-in-out infinite 2s}

/* ==== layout: mosaic — a bento of photographs =================================================== */
.l-mosaic{--fs:clamp(42px,5.7vw,98px)}
.l-mosaic .h-main{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.2vw,76px)}
.h-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:clamp(8px,.9vw,14px);height:var(--media-h)}
.tile{border-radius:clamp(14px,1.4vw,24px);animation:h-tile 1.3s var(--ease) both}
.tile:hover .h-img{scale:1.14}
.t1{grid-area:1/1/5/4;animation-delay:.2s}
.t2{grid-area:1/4/3/7;animation-delay:.34s}
.t3{grid-area:3/4/7/7;animation-delay:.48s}
.t4{grid-area:5/1/7/3;animation-delay:.62s}
.t5{grid-area:5/3/7/4;animation-delay:.76s}
.n3 .t1{grid-area:1/1/7/4}
.n4 .t4{grid-area:5/1/7/4}
.t2 .h-img{animation:h-breathe 19s ease-in-out infinite alternate 1.5s}
.t3 .h-img{animation:h-breathe 23s ease-in-out infinite alternate-reverse 1.5s}

/* ==== layout: poster — Swiss poster energy ====================================================== */
.l-poster{--fs:clamp(48px,7.6vw,140px)}
.l-poster .h-main{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(24px,4vw,70px);padding-bottom:clamp(110px,15svh,160px)}
.l-poster.t-grotesk .h-title,.l-poster.t-modern .h-title{text-transform:uppercase;line-height:.86;letter-spacing:-.04em}
.l-poster .h-title em{text-transform:none}
.h-frame{position:relative;height:calc(var(--media-h) - 90px);rotate:2.2deg;animation:h-drop 1.5s var(--ease) both .3s}
.h-frame .ph{height:100%;border-radius:4px;border:clamp(8px,.8vw,12px) solid var(--surface);box-shadow:0 60px 100px -50px rgb(0 0 0/.55),0 0 0 1px color-mix(in oklab,var(--ink) 8%,transparent)}
.h-stamp{position:absolute;left:clamp(-70px,-4.5vw,-40px);bottom:12%;z-index:2;display:grid;place-items:center;width:clamp(116px,10.5vw,168px);aspect-ratio:1;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);text-align:center;font-size:clamp(11px,.82vw,13px);font-weight:700;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;
  box-shadow:0 24px 44px -22px rgb(0 0 0/.55);animation:h-pop 1.1s var(--ease) both 1.15s}
.h-stamp span{max-width:76%;rotate:-2.2deg}
.h-stamp::before{content:'';position:absolute;inset:7px;border-radius:50%;border:1.5px dashed color-mix(in oklab,var(--accent-ink) 55%,transparent);animation:h-spin 24s linear infinite}

/* ribbon / marquee (poster and type) */
.h-marquee{position:relative;z-index:3;overflow:hidden;padding:1.05em 0;white-space:nowrap;border-block:1px solid var(--line);
  font-family:var(--display);font-weight:var(--display-wght);font-size:clamp(18px,1.75vw,28px);letter-spacing:-.01em;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  animation:h-fade 1.2s ease both 1.2s}
.h-marquee>div{display:inline-flex;align-items:center;gap:1.1em;padding-left:1.1em;animation:h-marquee 38s linear infinite}
.mo-calm .h-marquee>div{animation-duration:56s}
.h-marquee b{flex:0 0 .55em;height:.55em;background:var(--accent);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.l-poster .h-marquee{position:absolute;left:-4%;right:-4%;bottom:clamp(26px,5svh,54px);rotate:-2.4deg;border:0;background:var(--accent);color:var(--accent-ink);text-transform:uppercase;
  -webkit-mask-image:none;mask-image:none;box-shadow:0 22px 44px -22px rgb(0 0 0/.5);animation:h-ribbon 1.3s var(--ease-out) both 1.1s}
.l-poster .h-marquee b{background:var(--accent-ink)}

/* ==== layout: type — no photographs, pure typography and light ================================== */
.l-type{--fs:clamp(52px,8.6vw,158px)}
.l-type .h-main{position:static;grid-template-columns:1fr;justify-items:center;text-align:center}
.l-type .h-copy{display:flex;flex-direction:column;align-items:center;max-width:1180px}
.l-type .h-eyebrow{padding:.7em 1.15em;border-radius:999px;background:color-mix(in oklab,var(--surface) 75%,transparent);box-shadow:inset 0 0 0 1px var(--line);letter-spacing:.12em}
.l-type .h-eyebrow::before{flex:0 0 7px;height:7px;border-radius:50%;background:var(--accent);animation:h-ping 2.2s ease-out infinite 1.6s}
.l-type .h-sub{margin-inline:auto}
.l-type .h-ctas{justify-content:center}
.h-mesh{position:absolute;inset:0;z-index:-1;overflow:hidden;filter:blur(70px) saturate(1.15);opacity:.36;pointer-events:none}
.m-dark .h-mesh{opacity:.5}
.h-mesh i{position:absolute;width:44vw;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.h-mesh i:nth-child(1){left:-12vw;top:-18vw;animation:h-orbit 24s ease-in-out infinite alternate}
.h-mesh i:nth-child(2){right:-14vw;bottom:-22vw;width:50vw;background:color-mix(in oklab,var(--accent) 55%,var(--surface));animation:h-orbit 30s ease-in-out infinite alternate-reverse}
.h-mesh i:nth-child(3){right:8vw;top:-24vw;width:26vw;background:color-mix(in oklab,var(--accent) 45%,var(--bg));animation:h-orbit 20s ease-in-out infinite alternate 2s}

/* ---- motion ---------------------------------------------------------------------------------- */
@keyframes h-rise{from{transform:translateY(var(--lift)) rotate(2deg)}to{transform:none}}
@keyframes h-fade{from{opacity:0}}
@keyframes h-fade-up{from{opacity:0;transform:translateY(20px)}}
@keyframes h-line{from{transform:scaleX(0)}}
@keyframes h-zoom{from{scale:1.32}to{scale:1.06}}
@keyframes h-zoom-far{from{scale:1.4;filter:brightness(.6)}to{scale:1.06}}
@keyframes h-breathe{from{translate:0 0}to{translate:-1.6% -2.2%}}
@keyframes h-arch{from{clip-path:inset(100% 0 0 0 round 999px 999px 26px 26px)}to{clip-path:inset(0 0 0 0 round 999px 999px 26px 26px)}}
@keyframes h-curtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes h-pop{from{opacity:0;scale:.55}}
@keyframes h-bob{50%{translate:0 -10px}}
@keyframes h-ping{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 60%,transparent)}75%,100%{box-shadow:0 0 0 12px transparent}}
@keyframes h-tile{from{opacity:0;scale:.82;translate:0 28px}}
@keyframes h-drop{from{opacity:0;translate:0 60px;rotate:9deg}}
@keyframes h-ribbon{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes h-marquee{to{transform:translateX(-50%)}}
@keyframes h-shine{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@keyframes h-spin{to{rotate:360deg}}
@keyframes h-drift{to{translate:4% -3%}}
@keyframes h-orbit{to{translate:9vw 7vw;scale:1.15}}
@keyframes h-scroll{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}}

/* ---- phones ---------------------------------------------------------------------------------- */
@media (max-width:760px){
  .hero{--pad:20px;--fs:clamp(38px,11.2vw,58px);--media-h:clamp(300px,54svh,520px)}
  .hero.hl-m{--fk:.86} .hero.hl-l{--fk:.74}
  .h-title{hyphens:auto}
  .h-nav nav{display:none}
  .h-main{align-content:start;gap:30px!important}
  .l-split .h-main,.l-mosaic .h-main,.l-poster .h-main{grid-template-columns:minmax(0,1fr)}
  .l-split .h-arch{inset:0 4% 0 0}
  .h-coin{left:auto;right:-2%;bottom:-5%;width:104px}
  .h-float{right:auto;left:4%;top:auto;bottom:6%}
  .l-fullbleed .h-main{align-content:end}
  .l-type{--fs:clamp(42px,13vw,72px)}
  .l-type .h-main{align-content:center}
  .l-fullbleed .h-copy{max-width:100%}
  .l-fullbleed .h-main::after{display:none}
  .l-editorial .h-main{grid-template-columns:minmax(0,1fr)}
  .l-editorial .h-main>*,.l-editorial .h-copy>*{grid-column:1!important;grid-row:auto!important}
  .l-editorial .h-badges{flex-direction:row;flex-wrap:wrap;gap:0 18px;padding-left:0;border-left:0}
  .l-editorial .h-badges li{border-bottom:0;padding:.3em 0}
  .h-inset .ph{aspect-ratio:4/3}
  .h-ornament{width:220px}
  .l-poster .h-main{padding-bottom:110px}
  .h-frame{height:46svh;min-height:260px;margin:0 6px;rotate:1.6deg}
  .h-stamp{left:-10px;width:100px}
  .h-ctas .h-btn{flex:1 1 auto;justify-content:center}
  .h-badges{gap:8px 18px}
}

/* ---- people who prefer less motion get the finished page at once ---------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero *,.hero *::before,.hero *::after,.hero::before{animation:none!important;transition:none!important}
}

/* wall thumbnails: play the entrance once, then rest */
.still .hero *,.still .hero::before,.still .hero *::before,.still .hero *::after{animation-iteration-count:1!important}

/* ---- everything else, without a photo of its own: a poster in the colours of what they do, with a drawing of it that
   moves gently (src/site/art.ts; Sylvain's Round 2 run, 31 October 2026: "awful background hazy dual tone with no image
   … so bland, we can do much better even on free"). Their words, their name and their buttons as on every first screen;
   the ground in their drawing's colour, the drawing beside their name, their own words running along its foot. ------ */
.has-art{--fs:clamp(50px,7.6vw,138px);color:var(--accent-ink);
  background:radial-gradient(120% 95% at 90% 4%,color-mix(in oklab,var(--accent) 70%,#fff) 0%,var(--accent) 42%,color-mix(in oklab,var(--accent) 66%,#000) 100%)}
.has-art::before{background:radial-gradient(42% 38% at 80% 22%,color-mix(in oklab,var(--accent-2) 26%,transparent),transparent 70%),radial-gradient(36% 36% at 4% 96%,rgb(0 0 0/.2),transparent 70%)}
.has-art .h-grain{opacity:.3}
.has-art .h-brand,.has-art .h-nav nav,.has-art .h-nav nav a,.site .has-art .h-nav nav a{color:var(--accent-ink)}
.has-art .h-nav .h-btn{background:var(--accent-ink);color:var(--accent)}
.has-art .h-main{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);justify-items:stretch;align-items:center;text-align:left;gap:clamp(18px,4vw,72px)}
.has-art .h-copy{align-items:flex-start;max-width:none}
.has-art .h-eyebrow{padding:0;background:none;box-shadow:none;color:var(--accent-2);letter-spacing:.2em;font-weight:700}
.has-art .h-eyebrow::before{background:var(--accent-2)}
.has-art .h-title{color:var(--accent-ink);text-align:left}
/* (their name never runs into the drawing: the longest word of it sets how big it can be in its column; src/site/render.ts) */
.has-art .h-copy{container-type:inline-size;min-width:0}
.has-art .h-title{max-width:100%;font-size:min(calc(var(--fs) * var(--fk)),calc(100cqi / (var(--lw,8) * .63)))}
.lw-9{--lw:9}.lw-10{--lw:10}.lw-11{--lw:11}.lw-12{--lw:12}.lw-13{--lw:13}.lw-14{--lw:14}.lw-15{--lw:15}.lw-16{--lw:16}.lw-17{--lw:17}.lw-18{--lw:18}
.has-art .h-title em{color:var(--accent-2)}
.has-art .h-tag,.has-art .h-sub{margin-inline:0;color:color-mix(in oklab,var(--accent-ink) 88%,transparent);text-align:left}
.has-art .h-ctas{justify-content:flex-start}
.has-art .h-ctas .h-btn{background:var(--accent-ink);color:var(--accent);box-shadow:0 20px 44px -18px rgb(0 0 0/.5),inset 0 1px 0 rgb(255 255 255/.6)}
.has-art .h-ctas .h-btn.ghost{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--accent-ink) 62%,transparent)}
.site .has-art .h-open{align-self:flex-start;background:color-mix(in oklab,var(--accent-ink) 16%,transparent);color:var(--accent-ink)}
.has-art .h-where{background:color-mix(in oklab,var(--accent-ink) 14%,transparent);color:var(--accent-ink);box-shadow:none}
.has-art .h-where svg{stroke:var(--accent-2)}
.has-art .h-marquee{border:0;background:color-mix(in oklab,var(--accent) 58%,#000);color:var(--accent-ink);text-transform:uppercase;letter-spacing:.16em;font-weight:620;font-size:.8em}
.has-art .h-marquee b{background:var(--accent-2)}

/* the drawing: its colours from the site's own (a change of colours redraws it), entering once, then moving gently */
.h-art{position:relative;z-index:2;align-self:center;justify-self:center;width:min(100%,610px);animation:h-art-in 1.5s var(--ease-out) both .45s}
@keyframes h-art-in{from{opacity:0;translate:0 46px;scale:.93}}
.h-art .art{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:none;filter:drop-shadow(0 38px 48px rgb(0 0 0/.3))}
.art .a-g{fill:color-mix(in oklab,var(--accent) 74%,#fff)}
.art .a-gd{fill:color-mix(in oklab,var(--accent) 76%,#000)}
.art .a-gk{fill:color-mix(in oklab,var(--accent) 38%,#000)}
.art .a-h{fill:var(--accent-2)}
.art .a-lf{fill:var(--accent-ink)}
.art .a-w{fill:var(--surface)}
.art .a-l{fill:none;stroke:var(--accent-ink)}
.art .a-sh{fill:#000;opacity:.24}
.art .a-shade{fill:#000;opacity:.07}
.art .a-shade-soft{fill:#000;opacity:.05}
.art .a-trail{fill:none;stroke:var(--accent-ink);stroke-width:2.6;stroke-dasharray:2 11;stroke-linecap:round;opacity:.55}
.art .a-seam{fill:none;stroke:var(--accent-ink);stroke-width:2.4;stroke-linecap:round}
.art .a-ring{fill:none;stroke:var(--accent-2);stroke-width:2.6;opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes art-ring{0%,45%{opacity:0;scale:.3}50%{opacity:.95;scale:1}68%,100%{opacity:0;scale:1.8}}

/* a court: a lob rallying over the net, a ring where it lands */
.art-court .a-net line{stroke:color-mix(in oklab,var(--accent) 30%,#000);stroke-width:1.2;opacity:.6}
.art-court .a-net rect{fill:color-mix(in oklab,var(--accent) 34%,#000);opacity:.26}
.art-court .a-ball{transform:translate(298px,175px) scale(.86);animation:art-court-ball 1.3s linear infinite alternate}
.art-court .a-ball-sh{transform:translate(298px,316px) scale(.86);animation:art-court-sh 1.3s linear infinite alternate}
.art-court .a-ring-far{animation:art-ring 2.6s linear infinite}
.art-court .a-ring-near{animation:art-ring 2.6s linear infinite -1.3s}
@keyframes art-court-ball{0%{transform:translate(232px,452px) scale(1)}10%{transform:translate(245.5px,375px) scale(.972)}20%{transform:translate(259px,308.8px) scale(.944)}30%{transform:translate(272.3px,253.4px) scale(.916)}40%{transform:translate(285.4px,208.8px) scale(.888)}50%{transform:translate(298.5px,175px) scale(.86)}60%{transform:translate(311.4px,152px) scale(.832)}70%{transform:translate(324.3px,139.8px) scale(.804)}80%{transform:translate(337px,138.4px) scale(.776)}90%{transform:translate(349.5px,147.8px) scale(.748)}100%{transform:translate(362px,168px) scale(.72)}}
@keyframes art-court-sh{0%{transform:translate(232px,462px) scale(1);opacity:.3}50%{opacity:.12}100%{transform:translate(362px,176px) scale(.7);opacity:.3}}

/* a pitch: a long ball dropping into the far goal, the net giving */
.art-pitch .a-stripe{fill:color-mix(in oklab,var(--accent) 86%,#000);opacity:.45}
.art-pitch .a-net-g{fill:color-mix(in oklab,var(--accent-ink) 30%,transparent)}
.art-pitch .a-seam-k{fill:none;stroke:color-mix(in oklab,var(--accent) 38%,#000);stroke-width:1.6}
.art-pitch .a-ball{transform:translate(298px,185px) scale(.81);animation:art-pitch-ball 3.2s linear infinite}
.art-pitch .a-ball-sh{transform:translate(268px,330px) scale(.8);animation:art-pitch-sh 3.2s linear infinite}
.art-pitch .a-spin{animation:art-spin .8s linear infinite}
.art-pitch .a-goal{transform-box:fill-box;transform-origin:50% 100%;animation:art-goal 3.2s ease-out infinite}
@keyframes art-pitch-ball{0%{transform:translate(214px,470px) scale(1);opacity:0}4%{opacity:1}7%{transform:translate(235.9px,393px) scale(.962)}14%{transform:translate(255.3px,326px) scale(.924)}21%{transform:translate(272.1px,269px) scale(.886)}28%{transform:translate(286.3px,222px) scale(.848)}35%{transform:translate(298px,185px) scale(.81)}42%{transform:translate(307.1px,158px) scale(.772)}49%{transform:translate(313.7px,141px) scale(.734)}56%{transform:translate(317.7px,134px) scale(.696)}63%{transform:translate(319.1px,137px) scale(.658)}70%,86%{transform:translate(318px,150px) scale(.62);opacity:1}96%,100%{transform:translate(318px,150px) scale(.62);opacity:0}}
@keyframes art-pitch-sh{0%{transform:translate(214px,480px) scale(1);opacity:0}4%{opacity:.3}70%,86%{transform:translate(318px,156px) scale(.6);opacity:.3}96%,100%{opacity:0}}
@keyframes art-spin{to{rotate:360deg}}
@keyframes art-goal{0%,68%{scale:1 1}74%{scale:1.06 1.1}80%,100%{scale:1 1}}

/* a green: a putt curling in, dropping, the flag waving */
.art-green .a-bunker{fill:color-mix(in oklab,var(--accent-2) 70%,#fff);opacity:.9}
.art-green .a-dimple{fill:color-mix(in oklab,var(--surface) 80%,#000);opacity:.35}
.art-green .a-flag{transform-origin:395px 188px;animation:art-flag 2.4s ease-in-out infinite alternate}
.art-green .a-flag-fold{fill:none;stroke:color-mix(in oklab,var(--accent-2) 70%,#000);stroke-width:2;opacity:.35}
.art-green .a-ball{transform:translate(263px,440.5px) scale(.9);animation:art-green-ball 4.4s linear infinite}
.art-green .a-ball-sh{transform:translate(263px,447px) scale(.9);animation:art-green-sh 4.4s linear infinite}
@keyframes art-flag{from{transform:skewY(-5deg) scaleX(.95)}to{transform:skewY(5deg) scaleX(1.03)}}
@keyframes art-green-ball{0%{transform:translate(150px,430px) scale(1);opacity:0}5%{opacity:1}6.5%{transform:translate(172.1px,436.8px) scale(.98)}13%{transform:translate(194.5px,441.3px) scale(.96)}19.5%{transform:translate(217.1px,443.4px) scale(.94)}26%{transform:translate(239.9px,443.1px) scale(.92)}32.5%{transform:translate(263px,440.5px) scale(.9)}39%{transform:translate(286.3px,435.5px) scale(.88)}45.5%{transform:translate(309.9px,428.2px) scale(.86)}52%{transform:translate(333.7px,418.5px) scale(.84)}58.5%{transform:translate(357.7px,406.4px) scale(.82)}65%{transform:translate(386px,396px) scale(.8);opacity:1}71%{transform:translate(392px,402px) scale(.15);opacity:0}100%{transform:translate(392px,402px) scale(0);opacity:0}}
@keyframes art-green-sh{0%{transform:translate(150px,436px) scale(1);opacity:0}5%{opacity:.25}65%{transform:translate(386px,401px) scale(.8);opacity:.25}70%,100%{opacity:0}}

/* a slope, as a ski club's badge: an evening sky, the sun glowing, tracks curving down as they are skied, the snow glinting */
.art-slope .a-sky-0{stop-color:color-mix(in oklab,var(--accent) 52%,#fff)}
.art-slope .a-sky-1{stop-color:color-mix(in oklab,var(--accent-2) 34%,#fff)}
.art-slope .a-glow{fill:var(--accent-2);opacity:.3;transform-box:fill-box;transform-origin:center;animation:art-glow 4s ease-in-out infinite alternate}
.art-slope .a-snowshade{fill:color-mix(in oklab,var(--accent) 22%,var(--surface));opacity:.5}
.art-slope .a-track{fill:none;stroke:color-mix(in oklab,var(--accent) 46%,var(--surface));stroke-width:4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:0;animation:art-ski 5.2s ease-in-out infinite}
.art-slope .a-track-2{animation-delay:.12s}
.art-slope .a-spark{transform-box:fill-box;transform-origin:center;animation:art-glint 2.6s ease-in-out infinite}
.art-slope .a-spark-2{animation-delay:.9s}.art-slope .a-spark-3{animation-delay:1.7s}
.art-slope .a-rim{fill:none;stroke:var(--accent-ink);stroke-width:6}
@keyframes art-glow{to{scale:1.14;opacity:.45}}
@keyframes art-ski{0%{stroke-dashoffset:420}55%,82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes art-glint{0%,100%{opacity:.2;scale:.6}50%{opacity:1;scale:1.1}}

/* a pool: the water moving, two swimmers down their lanes, their arms turning over, the wake running off them */
.art-pool .a-block{fill:color-mix(in oklab,var(--accent) 22%,var(--surface))}
.art-pool .a-num{fill:var(--accent);font:800 13px/1 system-ui,sans-serif;text-anchor:middle}
.art-pool .a-laneline{fill:color-mix(in oklab,var(--accent) 50%,#000);opacity:.35}
.art-pool [class^="a-rope"]{stroke:var(--accent-2);stroke-width:6;stroke-dasharray:10 8;stroke-linecap:round}
.art-pool .a-rope-2{stroke:var(--accent-ink)}
.art-pool .a-ripple{fill:none;stroke:var(--accent-ink);stroke-width:2.4;opacity:.3;animation:art-ripple 6s linear infinite}
.art-pool .a-ripple-2{animation-duration:8s;opacity:.22}.art-pool .a-ripple-3{animation-duration:7s;opacity:.26}
.art-pool .a-wake{fill:none;stroke:var(--accent-ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 9;opacity:.7;animation:art-wake .6s linear infinite}
.art-pool .a-body{fill:color-mix(in oklab,var(--accent) 52%,#000);opacity:.82}
.art-pool .a-arm{fill:none;stroke:color-mix(in oklab,var(--accent) 52%,#000);stroke-width:7;stroke-linecap:round;opacity:.82;animation:art-arm .55s ease-in-out infinite alternate}
.art-pool .a-arm-l{transform-origin:-8px 4px}
.art-pool .a-arm-r{transform-origin:8px 4px;animation-delay:-.55s}
.art-pool .a-swim-1{transform:translate(244px,250px);animation:art-swim-up 9s linear infinite}
.art-pool .a-swim-2{transform:translate(468px,320px) rotate(180deg);animation:art-swim-down 11s linear infinite -4s}
.art-pool .a-pool-edge{fill:none;stroke:var(--surface);stroke-width:3}
@keyframes art-ripple{to{transform:translateX(-168px)}}
@keyframes art-wake{to{stroke-dashoffset:-15}}
@keyframes art-arm{from{scale:1 1}to{scale:1 -1}}
@keyframes art-swim-up{from{transform:translate(244px,530px)}to{transform:translate(244px,-50px)}}
@keyframes art-swim-down{from{transform:translate(468px,30px) rotate(180deg)}to{transform:translate(468px,610px) rotate(180deg)}}

/* a bike: its wheels and chainring turning, the road running under it */
.art-wheel .a-tyre{fill:none;stroke:color-mix(in oklab,var(--accent) 40%,#000);stroke-width:12}
.art-wheel .a-rim{fill:none;stroke:var(--accent-ink);stroke-width:3}
.art-wheel .a-spokes line{stroke:var(--accent-ink);stroke-width:1.6;opacity:.75}
.art-wheel .a-spokes{animation:art-spin 1s linear infinite}
.art-wheel .a-chain{animation-duration:2s}
.art-wheel .a-ring-c{fill:none;stroke:var(--accent-ink);stroke-width:3}
.art-wheel .a-hub{fill:var(--accent-2)}
.art-wheel .a-frame path{fill:none;stroke:var(--accent-2);stroke-width:9;stroke-linejoin:round;stroke-linecap:round}
.art-wheel .a-bar,.art-wheel .a-post{fill:none;stroke:var(--accent-ink);stroke-width:6;stroke-linecap:round}
.art-wheel .a-saddle{fill:var(--accent-ink)}
.art-wheel .a-kerb{fill:var(--accent-2);opacity:.55}
.art-wheel .a-road{animation:art-road .55s linear infinite}
.art-wheel .a-speed line{stroke:var(--accent-ink);stroke-width:4;stroke-linecap:round;opacity:.45;animation:art-dash 1.1s linear infinite}
@keyframes art-road{to{transform:translateX(-150px)}}
@keyframes art-dash{0%{transform:translateX(30px);opacity:0}30%{opacity:.5}100%{transform:translateX(-40px);opacity:0}}

/* a track: its six lanes round the field, a runner going round lane one (counter-clockwise, as on every track) with its
   trail, nearer the stand the bigger */
.art-track .a-field{fill:color-mix(in oklab,var(--accent) 16%,#3c8c52)}
.art-track .a-mow{fill:#fff;opacity:.08}
.art-track .a-lanes-t ellipse{fill:none;stroke:var(--accent-ink);stroke-width:2.2;opacity:.8}
.art-track .a-runner{transform:translate(127px,367px) scale(.96);animation:art-run 7s linear infinite -.3s}
.art-track .a-runner-glow{fill:var(--accent-2);opacity:.28;animation:art-pulse 1.1s ease-in-out infinite alternate}
.art-track .a-runner-trail{fill:var(--accent-2);transform:translate(150px,395px);animation:art-run 7s linear infinite}
.art-track .a-t1{opacity:.55;animation-delay:-.2s}.art-track .a-t2{opacity:.32;animation-delay:-.1s}.art-track .a-t3{opacity:.16;animation-delay:0s}
@keyframes art-pulse{to{scale:1.35;opacity:.12}}
@keyframes art-run{0.0%{transform:translate(300.0px,422.3px) scale(1.10)}2.78%{transform:translate(333.7px,420.7px) scale(1.10)}5.56%{transform:translate(366.4px,416.1px) scale(1.09)}8.33%{transform:translate(397.0px,408.6px) scale(1.07)}11.11%{transform:translate(424.7px,398.4px) scale(1.05)}13.89%{transform:translate(448.6px,385.8px) scale(1.03)}16.67%{transform:translate(468.0px,371.1px) scale(1.00)}19.44%{transform:translate(482.3px,355.0px) scale(0.97)}22.22%{transform:translate(491.1px,337.8px) scale(0.93)}25.0%{transform:translate(494.0px,320.0px) scale(0.90)}27.78%{transform:translate(491.1px,302.2px) scale(0.87)}30.56%{transform:translate(482.3px,285.0px) scale(0.83)}33.33%{transform:translate(468.0px,268.9px) scale(0.80)}36.11%{transform:translate(448.6px,254.2px) scale(0.77)}38.89%{transform:translate(424.7px,241.6px) scale(0.75)}41.67%{transform:translate(397.0px,231.4px) scale(0.73)}44.44%{transform:translate(366.4px,223.9px) scale(0.71)}47.22%{transform:translate(333.7px,219.3px) scale(0.70)}50.0%{transform:translate(300.0px,217.7px) scale(0.70)}52.78%{transform:translate(266.3px,219.3px) scale(0.70)}55.56%{transform:translate(233.6px,223.9px) scale(0.71)}58.33%{transform:translate(203.0px,231.4px) scale(0.73)}61.11%{transform:translate(175.3px,241.6px) scale(0.75)}63.89%{transform:translate(151.4px,254.2px) scale(0.77)}66.67%{transform:translate(132.0px,268.9px) scale(0.80)}69.44%{transform:translate(117.7px,285.0px) scale(0.83)}72.22%{transform:translate(108.9px,302.2px) scale(0.87)}75.0%{transform:translate(106.0px,320.0px) scale(0.90)}77.78%{transform:translate(108.9px,337.8px) scale(0.93)}80.56%{transform:translate(117.7px,355.0px) scale(0.97)}83.33%{transform:translate(132.0px,371.2px) scale(1.00)}86.11%{transform:translate(151.4px,385.8px) scale(1.03)}88.89%{transform:translate(175.3px,398.4px) scale(1.05)}91.67%{transform:translate(203.0px,408.6px) scale(1.07)}94.44%{transform:translate(233.6px,416.1px) scale(1.09)}97.22%{transform:translate(266.3px,420.7px) scale(1.10)}100.0%{transform:translate(300.0px,422.3px) scale(1.10)}}

/* a stave: its notes swaying, more rising off it, as it sounds */
.art-notes .a-staff path{fill:none;stroke:var(--accent-ink);stroke-width:2.6;opacity:.85}
.art-notes .a-staff{animation:art-staff 6s ease-in-out infinite alternate}
.art-notes .a-note{animation:art-bob 3.2s ease-in-out infinite}
.art-notes .a-note-2{animation-delay:.4s}.art-notes .a-note-3{animation-delay:.8s}.art-notes .a-note-4{animation-delay:1.2s}
.art-notes .a-float .a-note{animation:art-rise 5.4s ease-in infinite;opacity:0}
.art-notes .a-float .a-note-6{animation-delay:1.8s}.art-notes .a-float .a-note-7{animation-delay:3.6s}
.art-notes .a-sound circle{fill:none;stroke:var(--accent-2);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:art-sound 4.5s ease-out infinite}
.art-notes .a-sound circle+circle{animation-delay:2.25s}
@keyframes art-staff{to{transform:translateY(8px)}}
@keyframes art-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes art-rise{0%{transform:translateY(40px);opacity:0}20%{opacity:1}100%{transform:translateY(-120px);opacity:0}}
@keyframes art-sound{0%{scale:.5;opacity:.45}100%{scale:1.25;opacity:0}}

/* a stage: the light sweeping its boards between the curtains */
.art-stage .a-boards line{stroke:var(--accent-ink);stroke-width:1.2;opacity:.12}
.art-stage .a-beam{transform-origin:300px 60px;animation:art-beam 6s ease-in-out infinite alternate}
.art-stage .a-light{fill:var(--accent-2);opacity:.26}
.art-stage .a-pool{fill:var(--accent-2);opacity:.5}
.art-stage .a-fold{fill:none;stroke:color-mix(in oklab,var(--accent) 60%,#000);stroke-width:7;stroke-linecap:round;opacity:.38}
.art-stage .a-curtain-l{transform-origin:40px 70px;animation:art-curtain 5s ease-in-out infinite alternate}
.art-stage .a-curtain-r{transform-origin:560px 70px;animation:art-curtain 5s ease-in-out infinite alternate-reverse}
.art-stage .a-star{transform-box:fill-box;transform-origin:center;animation:art-glint 2.4s ease-in-out infinite}
@keyframes art-beam{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}
@keyframes art-curtain{to{transform:skewX(1.6deg)}}

/* a pennant: flying on its pole, the bunting swaying, confetti falling, turning as it falls */
.art-pennant .a-string{fill:none;stroke:var(--accent-ink);stroke-width:2;opacity:.7}
.art-pennant .a-bunt{transform-box:fill-box;transform-origin:50% 0;animation:art-sway 2.8s ease-in-out infinite alternate}
.art-pennant .a-bunt-1,.art-pennant .a-bunt-4,.art-pennant .a-bunt-7{animation-delay:-.9s}
.art-pennant .a-bunt-2,.art-pennant .a-bunt-5,.art-pennant .a-bunt-8{animation-delay:-1.8s}
.art-pennant .a-pennant{transform-origin:204px 256px;animation:art-wave 2.6s ease-in-out infinite alternate}
.art-pennant .a-c{transform-box:fill-box;transform-origin:center;animation:art-fall 8s linear infinite}
.art-pennant .a-flip{transform-box:fill-box;transform-origin:center;animation:art-flip .9s ease-in-out infinite alternate}
.art-pennant .a-c-0{translate:0 130px;animation-duration:7.2s;animation-delay:-1s}.art-pennant .a-c-1{translate:0 330px;animation-duration:9.4s;animation-delay:-6s}
.art-pennant .a-c-2{translate:0 80px;animation-duration:8.1s;animation-delay:-3.4s}.art-pennant .a-c-3{translate:0 400px;animation-duration:10.2s;animation-delay:-8.2s}
.art-pennant .a-c-4{translate:0 350px;animation-duration:7.7s;animation-delay:-5s}.art-pennant .a-c-5{translate:0 120px;animation-duration:9.8s;animation-delay:-2.2s}
.art-pennant .a-c-6{translate:0 260px;animation-duration:8.6s;animation-delay:-4.4s}.art-pennant .a-c-7{translate:0 440px;animation-duration:10.6s;animation-delay:-7.6s}
.art-pennant .a-c-8{translate:0 470px;animation-duration:7.9s;animation-delay:-6.8s}
.art-pennant .a-c-1 .a-flip,.art-pennant .a-c-4 .a-flip,.art-pennant .a-c-7 .a-flip{animation-duration:1.3s}
@keyframes art-wave{from{transform:skewY(-6deg) scaleX(.94)}to{transform:skewY(5deg) scaleX(1.04)}}
@keyframes art-sway{from{rotate:-7deg}to{rotate:6deg}}
@keyframes art-fall{0%{translate:0 -20px;rotate:0deg;opacity:0}8%{opacity:1}86%{opacity:1}100%{translate:0 520px;rotate:300deg;opacity:0}}
@keyframes art-flip{to{scale:-1 1}}

@media (max-width:760px){
  .has-art .h-main{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(20px,6vw,36px)}
  .has-art .h-copy{order:1}
  .h-art{order:2;width:min(94%,450px)}
}
@media (prefers-reduced-motion:reduce){.h-art,.h-art *{animation:none!important}.art-track .a-runner-trail{display:none}}