/* 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}