/*
  The experiment: the portfolio as a film.

  Sizes. On a wide screen every scene is drawn on a 1920 by 1080 sheet and the sheet is scaled to the
  window. One unit, --u, is a 1920th of the width or a 1080th of the height, whichever is smaller, so
  "calc(24 * var(--u))" is 24 pixels on a full HD screen and less on a smaller one. Phones have their own
  layout at the end of this file.

  Motion. film.js gives each scene two numbers as the site scrolls: --in runs 0 to 1 while the scene
  arrives, --out runs 0 to 1 while it leaves. Everything that moves is worked out from those two, so a
  scene at rest (--in 1, --out 0) is the finished scene.
*/

:root {
  --ink: #1b070b;
  --cream: #f6ebd5;
  --mango: #ffb01f;
  --red: #e3212b;
  --teal: #0b6b6e;
  --wine: #6d0c18;
  --paper: #fffaf0;
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  --display: 'Shrikhand', Georgia, serif;
  --text: 'Sofia Sans', 'Segoe UI', system-ui, sans-serif;
  --tall: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-body: max(13px, calc(24 * var(--u)));
  --t-small: max(12px, calc(19 * var(--u)));
  --foot: calc(78 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--cream); font-family: var(--text); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; font-weight: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 90; padding: 10px 16px; background: var(--cream); color: var(--ink); font-weight: 700; border-radius: 6px; }
.skip:focus { top: 12px; }
.noscript { padding: 40px; font-size: 18px; }

/* ---------- scenes ---------- */

.scene {
  --in: 1; --out: 0;
  --win: clamp(0, calc(var(--in) / .72), 1);
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: var(--bg); color: var(--fg);
}
.scene[data-bg="ink"] { --bg: var(--ink); --fg: var(--cream); }
.scene[data-bg="mango"] { --bg: var(--mango); --fg: var(--ink); }
.scene[data-bg="cream"] { --bg: var(--cream); --fg: var(--ink); }
.scene[data-bg="teal"] { --bg: var(--teal); --fg: var(--cream); }
.scene[data-bg="red"] { --bg: transparent; --fg: var(--cream); }
.frame { position: absolute; left: 50%; top: 50%; width: calc(1920 * var(--u)); height: calc(1080 * var(--u)); transform: translate(-50%, -50%); }

html.stage .scene { position: fixed; inset: 0; min-height: 0; visibility: hidden; }
html.stage .scene.is-on { visibility: visible; }

/* how a scene arrives: the wipes */
html.stage .scene.is-in[data-wipe="iris"] { clip-path: circle(calc(var(--win) * 76vmax) at 52% 58%); }
html.stage .scene.is-in[data-wipe="slant"] { clip-path: polygon(0 0, calc(var(--win) * 135%) 0, calc(var(--win) * 135% - 35%) 100%, 0 100%); }
html.stage .scene.is-in[data-wipe="rise"] { clip-path: inset(calc((1 - var(--win)) * 100%) 0 0 0); }
html.stage .scene.is-in[data-wipe="clock"] {
  -webkit-mask: conic-gradient(#000 calc(var(--win) * 360deg), #0000 0);
  mask: conic-gradient(#000 calc(var(--win) * 360deg), #0000 0);
}
/* and one that closes to a dot as it leaves */
html.stage .scene.is-out[data-exit-wipe="iris"] { clip-path: circle(calc((1 - var(--out)) * 96vmax) at 21% 55%); }

/* things that come in with their scene. --d is when each starts (0 to 1), --s how long it takes */
.fx { --x: clamp(0, calc((var(--in) - var(--d, .35)) / min(var(--s, .4), 1.0001 - var(--d, .35))), 1); --e: calc(1 - (1 - var(--x)) * (1 - var(--x))); }
.fx-rise { transform: translateY(calc((1 - var(--e)) * 70 * var(--u))); opacity: var(--x); }
.fx-left { transform: translateX(calc((1 - var(--e)) * -110 * var(--u))); opacity: var(--x); }
.fx-right { transform: translateX(calc((1 - var(--e)) * 110 * var(--u))); opacity: var(--x); }
.fx-drop { transform: translateY(calc((1 - var(--e)) * -330 * var(--u))); }
.fx-pop { transform: scale(calc(.55 + .45 * var(--e))) rotate(calc((1 - var(--e)) * -9deg)); opacity: var(--x); }

/* ---------- type ---------- */

/* big lettering with a hard shadow under it, the way a painted film poster is lettered */
.poster {
  --k: calc(1.7 * var(--u)); --ex: var(--ink);
  font-family: var(--display); color: var(--red); line-height: .94;
  text-shadow:
    calc(1 * var(--k)) calc(1 * var(--k)) 0 var(--ex), calc(2 * var(--k)) calc(2 * var(--k)) 0 var(--ex),
    calc(3 * var(--k)) calc(3 * var(--k)) 0 var(--ex), calc(4 * var(--k)) calc(4 * var(--k)) 0 var(--ex),
    calc(5 * var(--k)) calc(5 * var(--k)) 0 var(--ex), calc(6 * var(--k)) calc(6 * var(--k)) 0 var(--ex);
}
/* names run together in tall capitals and take turns in two colours, like the credits on a poster */
.billing { font: 600 calc(46 * var(--u))/1.04 var(--tall); text-transform: uppercase; letter-spacing: .012em; }
.billing span { margin-right: .42em; white-space: nowrap; }
.billing span:nth-child(even) { color: var(--alt, var(--red)); }

.btn {
  display: inline-flex; align-items: center; gap: .5em; padding: .62em 1.25em; border-radius: 99px;
  background: var(--ink); color: var(--cream); font: 700 var(--t-small)/1 var(--text); text-decoration: none;
  transition: transform .25s var(--ease), background .25s;
}
.btn:hover { transform: translateY(-2px); background: var(--red); }
.btn--line { background: none; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--line:hover { background: var(--cream); color: var(--ink); }
.round { width: 2.6em; height: 2.6em; border-radius: 50%; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 2px currentColor; font-size: var(--t-small); transition: background .2s, color .2s; }
.round svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.round:hover { background: var(--fg, var(--cream)); color: var(--bg, var(--ink)); }

/* ---------- Khushi ---------- */

.slot { position: absolute; bottom: var(--foot); width: 0; pointer-events: none; }
.pose { position: absolute; left: 0; bottom: 0; height: 100%; translate: -50% 0; }
.pose img { height: 100%; width: auto; max-width: none; transition: opacity .16s; }
.pose img + img { position: absolute; left: 50%; bottom: 0; translate: -50% 0; opacity: 0; }
.pose.alt img:first-child { opacity: 0; }
.pose.alt img + img { opacity: 1; }
html.stage .slot .pose { visibility: hidden; }

.star { position: fixed; inset: 0; z-index: 20; pointer-events: none; display: none; }
html.stage .star { display: block; }
.star__at { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.star .pose { height: 100vh; opacity: 0; }

.sparks { position: fixed; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
.sparks svg { position: absolute; left: 0; top: 0; width: calc(34 * var(--u)); height: calc(34 * var(--u)); min-width: 16px; min-height: 16px; fill: var(--red); stroke: var(--cream); stroke-width: 1.4; }

/* ---------- the curtain ---------- */

.curtain { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.curtain i, .drape {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .34), #0000 16%, #0000 78%, rgba(0, 0, 0, .42)),
    repeating-linear-gradient(90deg, #5d0914 0, #a3111f 2.2%, #e3212b 4.6%, #b4141f 6.4%, #6d0c18 8.4%, #4b0710 9.6%, #5d0914 10.5%);
}
.curtain i:first-child, .drape--l { left: 0; transform-origin: 0 50%; }
.curtain i:last-child, .drape--r { right: 0; transform-origin: 100% 50%; }
.curtain i { transition: transform 1.5s cubic-bezier(.7, 0, .2, 1); }
html.is-open .curtain i { transform: scaleX(0); }
html.still .curtain { display: none; }

/* ---------- 1. hello ---------- */

.hello { background: radial-gradient(120% 85% at 50% -12%, #6a1422 0%, #34090f 36%, var(--ink) 72%); }
.hello__word {
  position: absolute; left: 0; right: 0; top: calc(44 * var(--u)); text-align: center; white-space: nowrap;
  font-family: var(--display); color: var(--red); line-height: 1;
  transform: translateX(calc(var(--out) * -75vw));
}
.hello__word span { display: inline-block; }
html.intro:not(.is-open) .hello__word span { opacity: 0; }
html.intro.is-open .hello__word span { animation: letter .6s var(--ease) backwards; animation-delay: calc(.75s + var(--i) * 70ms); }
html.intro.is-open .hello__word .u { animation: letter .6s var(--ease) backwards, hum 2.6s ease-in-out infinite; animation-delay: calc(.75s + var(--i) * 70ms), calc(2s + var(--i) * 110ms); }
html:not(.intro):not(.still) .hello__word .u { animation: hum 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 110ms); }
@keyframes letter { from { opacity: 0; scale: .3 1.5; } }
@keyframes hum { 50% { translate: 0 -4%; } }

.slot--hello { left: calc(960 * var(--u)); bottom: calc(-470 * var(--u)); height: calc(1300 * var(--u)); }
.hello__mark, .hello__figures, .hello__hint { opacity: calc(1 - var(--out) * 2.2); }
.hello__mark { position: absolute; left: calc(110 * var(--u)); bottom: calc(170 * var(--u)); width: calc(620 * var(--u)); }
.hello__mark h1 { font: 400 calc(84 * var(--u))/.96 var(--display); color: var(--cream); }
.hello__mark p { font: 500 calc(30 * var(--u))/1.2 var(--text); margin-top: calc(14 * var(--u)); opacity: .82; }
.hello__links { position: absolute; left: calc(110 * var(--u)); bottom: calc(104 * var(--u)); display: flex; gap: calc(30 * var(--u)); font: 700 max(13px, calc(28 * var(--u)))/1 var(--tall); text-transform: uppercase; letter-spacing: .08em; opacity: calc(1 - var(--out) * 2.2); }
.hello__links a { text-decoration: none; border-bottom: 2px solid var(--mango); padding-bottom: .15em; transition: color .2s; }
.hello__links a:hover { color: var(--mango); }
.hello__figures { position: absolute; right: calc(110 * var(--u)); bottom: calc(104 * var(--u)); width: calc(560 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(26 * var(--u)) calc(30 * var(--u)); text-align: right; }
.hello__figures li { font: 500 max(12px, calc(27 * var(--u)))/1 var(--tall); text-transform: uppercase; letter-spacing: .08em; }
.hello__figures b { display: block; font: 800 calc(88 * var(--u))/.86 var(--tall); color: var(--mango); letter-spacing: 0; }
.hello__hint {
  position: absolute; right: calc(40 * var(--u)); top: 50%; display: flex; align-items: center; gap: calc(16 * var(--u));
  font: 700 max(11px, calc(18 * var(--u)))/1 var(--text); letter-spacing: .08em; rotate: 90deg; transform-origin: 100% 50%; translate: 0 calc(110 * var(--u));
}
.hello__hint i { width: calc(90 * var(--u)); height: 2px; background: linear-gradient(90deg, var(--mango) 50%, #f6ebd533 0) 100% 0 / 200% 100%; animation: cue 2.2s ease-in-out infinite; }
html.still .hello__hint i { animation: none; }
@keyframes cue { to { background-position: -100% 0; } }
html.intro:not(.is-open) :is(.hello__mark, .hello__figures, .hello__links) { opacity: 0; }
html.intro.is-open :is(.hello__mark, .hello__figures, .hello__links) { animation: rise .9s var(--ease) 1.5s backwards; }
@keyframes rise { from { opacity: 0; translate: 0 calc(50 * var(--u)); } }
/* where she does not travel, she still rises into the first scene */
html.intro:not(.stage):not(.is-open) .slot--hello .pose { opacity: 0; }
html.intro.is-open:not(.stage) .slot--hello .pose { animation: popup 1.2s var(--ease) .8s backwards; }
@keyframes popup { from { translate: -50% 55%; } }

/* ---------- 2. about ---------- */

.about__bio { position: absolute; left: calc(110 * var(--u)); top: calc(104 * var(--u)); width: calc(600 * var(--u)); }
.about__bio h2 { font-size: calc(132 * var(--u)); margin-bottom: calc(34 * var(--u)); }
.about__text p { font-size: var(--t-body); line-height: 1.5; font-weight: 500; margin-top: calc(20 * var(--u)); }
.slot--about { left: calc(1000 * var(--u)); height: calc(890 * var(--u)); }
.about__arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.about__arrows path { fill: none; stroke: var(--red); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.about__arrows .shaft { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--e)); }
.about__arrows .head { opacity: var(--x); }
.about__facts li { position: absolute; left: calc(var(--fx) * var(--u)); top: calc(var(--fy) * var(--u)); width: calc(var(--fw, 520) * var(--u)); }
.about__facts h3 { font: 400 calc(46 * var(--u))/1 var(--display); }
.about__facts p { font-size: max(12px, calc(22 * var(--u))); line-height: 1.36; font-weight: 500; margin-top: calc(8 * var(--u)); }

/* ---------- 3. experience ---------- */

.journey h2 { font: 400 calc(48 * var(--u))/1 var(--display); color: var(--red); }
.slot--desk { left: calc(350 * var(--u)); height: calc(540 * var(--u)); }
.journey__edu { position: absolute; left: calc(110 * var(--u)); top: calc(104 * var(--u)); width: calc(520 * var(--u)); }
.journey__edu li { margin-top: calc(24 * var(--u)); }
.journey__edu b { display: block; font: 800 calc(52 * var(--u))/.92 var(--tall); text-transform: uppercase; }
.journey__edu span { display: block; font-size: max(12px, calc(21 * var(--u))); font-weight: 500; margin-top: calc(5 * var(--u)); }
.journey__langs { font-size: max(12px, calc(20 * var(--u))); font-weight: 500; margin-top: calc(26 * var(--u)); opacity: .8; }
.journey__exp { position: absolute; left: calc(720 * var(--u)); top: calc(104 * var(--u)); width: calc(1090 * var(--u)); }
.journey__exp li { display: grid; grid-template-columns: calc(470 * var(--u)) 1fr; gap: calc(40 * var(--u)); align-items: start; padding: calc(24 * var(--u)) 0; border-top: calc(3 * var(--u)) solid var(--ink); margin-top: calc(22 * var(--u)); }
.journey__exp li + li { margin-top: 0; }
.journey__exp b { display: block; font: 800 calc(74 * var(--u))/.84 var(--tall); text-transform: uppercase; }
.journey__exp em { display: block; font: 600 max(12px, calc(22 * var(--u)))/1.25 var(--text); margin-top: calc(12 * var(--u)); }
.journey__exp time { display: block; font: 600 calc(30 * var(--u))/1 var(--tall); text-transform: uppercase; letter-spacing: .06em; color: var(--teal); margin-bottom: calc(10 * var(--u)); }
.journey__exp p { font-size: max(12px, calc(22 * var(--u))); line-height: 1.42; font-weight: 500; }
.journey__credits { position: absolute; left: calc(720 * var(--u)); top: calc(612 * var(--u)); width: calc(1090 * var(--u)); border-top: calc(3 * var(--u)) solid var(--ink); padding-top: calc(22 * var(--u)); }
.journey__credits .billing { font-size: calc(42 * var(--u)); }
.journey__credits h3 { font: 700 max(11px, calc(18 * var(--u)))/1 var(--text); margin: calc(20 * var(--u)) 0 calc(6 * var(--u)); opacity: .7; }
.journey__credits h3:first-child { margin-top: 0; }
.journey__credits div:nth-of-type(2) .billing { --alt: var(--teal); }

/* ---------- 4. brands ---------- */

.brands__head { position: absolute; left: calc(110 * var(--u)); top: calc(104 * var(--u)); width: calc(700 * var(--u)); }
.brands__head h2 { font: 400 calc(88 * var(--u))/.98 var(--display); }
.brands__head p { font: 800 calc(74 * var(--u))/1 var(--tall); text-transform: uppercase; color: var(--mango); margin-top: calc(20 * var(--u)); }
.slot--kiss { left: calc(330 * var(--u)); height: calc(590 * var(--u)); }
.brands__wall { position: absolute; left: 43%; right: -14%; top: -16%; bottom: -16%; display: flex; flex-direction: column; justify-content: center; gap: calc(24 * var(--u)); rotate: -9deg; }
.brands__fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal) 40%, #0b6b6e00 57%), linear-gradient(0deg, var(--teal) 3%, #0b6b6e00 13%); }
.strip { flex: none; overflow: hidden; background: #16090c; box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .3); }
.strip__run {
  --p: calc(31.5 * var(--u));
  display: flex; gap: calc(18 * var(--u)); width: max-content; padding: calc(34 * var(--u)) 0 calc(34 * var(--u)) calc(18 * var(--u));
  background:
    repeating-linear-gradient(90deg, #0000 0 calc(8 * var(--u)), var(--cream) calc(8 * var(--u)) calc(23 * var(--u)), #0000 calc(23 * var(--u)) var(--p)) 0 calc(9 * var(--u)) / auto calc(15 * var(--u)) no-repeat,
    repeating-linear-gradient(90deg, #0000 0 calc(8 * var(--u)), var(--cream) calc(8 * var(--u)) calc(23 * var(--u)), #0000 calc(23 * var(--u)) var(--p)) 0 calc(100% - 9 * var(--u)) / auto calc(15 * var(--u)) no-repeat;
  animation: run var(--t, 80s) linear infinite;
}
.strip:nth-child(even) .strip__run { animation-direction: reverse; }
html.stage .scene:not(.is-on) .strip__run, html.still .strip__run { animation-play-state: paused; }
@keyframes run { to { transform: translateX(-50%); } }
.cell { flex: none; width: calc(171 * var(--u)); height: calc(124 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--c, #fff); display: grid; place-items: center; overflow: hidden; }
.cell img { width: 76%; height: 70%; object-fit: contain; }
.cell--fill img { width: 100%; height: 100%; object-fit: cover; }
.cell--name { font: 700 calc(27 * var(--u))/.95 var(--tall); text-transform: uppercase; color: var(--ink); text-align: center; padding: 0 calc(12 * var(--u)); }

/* ---------- 5. intermission ---------- */

.drape--l { transform: translateX(calc((1 - var(--win)) * -101%)) scaleX(calc(1 - var(--out) * .97)); }
.drape--r { transform: translateX(calc((1 - var(--win)) * 101%)) scaleX(calc(1 - var(--out) * .97)); }
.pelmet {
  position: absolute; left: -2%; right: -2%; top: 0; height: calc(96 * var(--u));
  background: radial-gradient(ellipse 54% 100% at 50% 0, #5d0914 0 60%, #7c0f1c 84%, var(--mango) 85% 93%, #0000 94%) 0 0 / calc(190 * var(--u)) 100% repeat-x;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .4));
  transform: translateY(calc((1 - var(--win)) * -100% - var(--out) * 100%));
}
.serious__in { position: absolute; left: calc(140 * var(--u)); top: calc(330 * var(--u)); width: calc(1250 * var(--u)); opacity: calc(1 - var(--out) * 2.5); }
.serious__tag { display: flex; align-items: center; gap: calc(26 * var(--u)); font: 700 calc(44 * var(--u))/1 var(--tall); text-transform: uppercase; letter-spacing: .42em; color: var(--mango); }
.serious__tag i { width: calc(110 * var(--u)); height: calc(3 * var(--u)); background: currentColor; }
.serious__line { font: 400 calc(140 * var(--u))/.98 var(--display); margin-top: calc(34 * var(--u)); text-shadow: calc(7 * var(--u)) calc(7 * var(--u)) 0 #4b0710; }
.serious__next { display: grid; place-items: center; width: calc(96 * var(--u)); height: calc(96 * var(--u)); min-width: 44px; min-height: 44px; margin-top: calc(48 * var(--u)); border-radius: 50%; background: var(--mango); color: var(--ink); transition: background .2s; }
.serious__next:hover { background: var(--cream); }
.serious__next i { width: 28%; height: 28%; border: solid currentColor; border-width: 0 calc(5 * var(--u)) calc(5 * var(--u)) 0; rotate: 45deg; translate: 0 -18%; }
.slot--serious { left: calc(1540 * var(--u)); height: calc(900 * var(--u)); }

/* ---------- 6. social ---------- */

.social { background: radial-gradient(90% 70% at 50% 110%, #3a0c14 0%, var(--ink) 70%); }
.social::before, .social::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1.6%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .34), #0000 16%, #0000 78%, rgba(0, 0, 0, .42)), repeating-linear-gradient(90deg, #5d0914 0, #a3111f 11%, #e3212b 23%, #b4141f 32%, #6d0c18 42%, #4b0710 48%, #5d0914 52.500%);
}
.social::after { left: auto; right: 0; }
.sign {
  --b: calc(34 * var(--u));
  position: absolute; left: calc(960 * var(--u) - 13 * var(--b)); top: calc(50 * var(--u)); width: calc(26 * var(--b)); height: calc(6 * var(--b));
  display: grid; place-content: center; text-align: center; background: #2b0b11; border-radius: calc(20 * var(--u));
}
.sign::before, .sign::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  --lamp: #fff6d0 0 calc(.13 * var(--b)), var(--mango) calc(.16 * var(--b)) calc(.26 * var(--b)), #ffb01f66 calc(.3 * var(--b)), #0000 calc(.46 * var(--b));
  background: radial-gradient(circle at 25% 25%, var(--lamp)), radial-gradient(circle at 75% 75%, var(--lamp));
  background-size: calc(2 * var(--b)) calc(2 * var(--b));
  animation: bulbs 1.1s steps(1) infinite;
}
.sign::after { background-image: radial-gradient(circle at 75% 25%, var(--lamp)), radial-gradient(circle at 25% 75%, var(--lamp)); animation-delay: -.55s; }
html.still .sign::before, html.still .sign::after { animation: none; }
@keyframes bulbs { 50% { opacity: .22; } }
.sign p { font: 700 calc(26 * var(--u))/1 var(--tall); text-transform: uppercase; letter-spacing: .4em; margin-right: -.4em; opacity: .85; }
.sign h2 { font: 400 calc(84 * var(--u))/1 var(--display); color: var(--mango); margin-top: calc(6 * var(--u)); text-shadow: 0 0 calc(30 * var(--u)) #ffb01f66; }
.social__lead { position: absolute; left: 0; right: 0; top: calc(276 * var(--u)); text-align: center; font-size: var(--t-body); opacity: .8; }
.social__list { position: absolute; left: 0; right: 0; top: calc(350 * var(--u)); display: flex; justify-content: center; gap: calc(60 * var(--u)); perspective: calc(1700 * var(--u)); }
.bill {
  --rx: 0deg; --ry: 0deg;
  position: relative; display: block; width: calc(500 * var(--u)); height: calc(600 * var(--u)); text-align: left; color: var(--ink);
  border-radius: calc(12 * var(--u)); background: var(--c); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease), box-shadow .4s;
  box-shadow: 0 0 0 calc(7 * var(--u)) var(--cream), 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .55), 0 0 calc(110 * var(--u)) color-mix(in srgb, var(--c) 30%, #0000);
}
.bill:hover { box-shadow: 0 0 0 calc(7 * var(--u)) var(--cream), 0 calc(40 * var(--u)) calc(70 * var(--u)) rgba(0, 0, 0, .6), 0 0 calc(160 * var(--u)) color-mix(in srgb, var(--c) 55%, #0000); }
.bill__fan { position: absolute; left: 0; right: 0; top: calc(40 * var(--u)); height: calc(290 * var(--u)); }
.bill__fan img {
  position: absolute; left: 50%; top: 0; width: calc(150 * var(--u)); height: calc(266 * var(--u)); object-fit: cover;
  border: calc(4 * var(--u)) solid var(--cream); border-radius: calc(12 * var(--u)); transform-origin: 50% 130%;
  transform: translateX(-50%) rotate(calc((var(--i) - 2) * 9deg)) translateY(calc((var(--i) - 2) * (var(--i) - 2) * 3 * var(--u)));
  transition: transform .5s var(--ease); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .35);
}
.bill:hover .bill__fan img, .bill:focus-visible .bill__fan img { transform: translateX(-50%) rotate(calc((var(--i) - 2) * 14deg)) translateY(calc(-14 * var(--u))); }
.bill__foot { position: absolute; left: 0; right: 0; bottom: 0; height: calc(246 * var(--u)); padding: calc(26 * var(--u)) calc(30 * var(--u)); background: var(--cream); border-radius: 0 0 calc(12 * var(--u)) calc(12 * var(--u)); }
.bill__name { display: flex; align-items: center; gap: calc(18 * var(--u)); }
.bill__name b { font: 400 calc(40 * var(--u))/1 var(--display); display: block; }
.bill__name small { font: 600 calc(24 * var(--u))/1 var(--tall); text-transform: uppercase; letter-spacing: .08em; opacity: .7; display: block; margin-top: calc(6 * var(--u)); }
.tile { flex: none; width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--c, #fff); display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 calc(2 * var(--u)) rgba(27, 7, 11, .14); }
.tile img { width: 78%; height: 78%; object-fit: contain; }
.tile--fill img { width: 100%; height: 100%; object-fit: cover; }
.bill__stats { display: flex; gap: calc(26 * var(--u)); margin-top: calc(22 * var(--u)); }
.bill__stats span { font: 600 max(11px, calc(17 * var(--u)))/1.1 var(--text); display: block; }
.bill__stats b { display: block; font: 800 calc(56 * var(--u))/.9 var(--tall); color: var(--red); }
.bill__stats span:first-child b { font-size: calc(76 * var(--u)); margin-top: calc(-20 * var(--u)); }

/* ---------- 7. decks ---------- */

.decks__head { position: absolute; left: calc(110 * var(--u)); top: calc(104 * var(--u)); width: calc(620 * var(--u)); }
.decks__head h2 { font-size: calc(100 * var(--u)); }
.decks__head p { font-size: var(--t-body); font-weight: 500; margin-top: calc(26 * var(--u)); }
.slot--dealer { left: calc(300 * var(--u)); height: calc(560 * var(--u)); }
.decks__panel { position: absolute; left: calc(850 * var(--u)); top: calc(104 * var(--u)); width: calc(960 * var(--u)); }
.decks__count { font: 700 calc(30 * var(--u))/1 var(--tall); text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
.decks__panel h3 { font: 400 calc(60 * var(--u))/1 var(--display); margin-top: calc(8 * var(--u)); }
.decks__thought { font-size: max(13px, calc(23 * var(--u))); line-height: 1.44; font-weight: 500; margin-top: calc(14 * var(--u)); min-height: calc(166 * var(--u)); }
.decks__act { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(14 * var(--u)); }
.fan { position: absolute; left: calc(1250 * var(--u)); top: calc(566 * var(--u)); width: 0; height: 0; }
.card {
  --a: 0; --lift: 0;
  position: absolute; left: calc(-112 * var(--u)); top: 0; width: calc(224 * var(--u)); height: calc(316 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); padding: calc(20 * var(--u));
  background: var(--paper); color: var(--ink); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(18 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(27, 7, 11, .22);
  /* turned about a point far below the hand, then the chosen card is lifted and grown about its own middle */
  --r: calc(2400 * var(--u));
  opacity: var(--see, 1);
  transform: translateY(var(--r)) rotate(calc(var(--a) * 1deg)) translateY(calc(-1 * var(--r) - var(--lift) * 56 * var(--u))) scale(calc(1 + var(--lift) * .13));
  touch-action: pan-y; user-select: none; -webkit-user-drag: none;
}
.card.is-far { visibility: hidden; }
.card.is-red { --suit: var(--red); }
.card__ix { position: absolute; left: calc(13 * var(--u)); top: calc(11 * var(--u)); font: 800 calc(34 * var(--u))/.9 var(--tall); text-align: center; color: var(--suit, var(--ink)); }
.card__ix svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: currentColor; margin: calc(3 * var(--u)) auto 0; }
.card__ix + .card__ix { left: auto; top: auto; right: calc(13 * var(--u)); bottom: calc(11 * var(--u)); rotate: 180deg; }
.card .tile { width: calc(150 * var(--u)); height: calc(112 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: none; pointer-events: none; }
.card__name { font: 700 calc(25 * var(--u))/.95 var(--tall); text-transform: uppercase; letter-spacing: .04em; text-align: center; }

/* ---------- 8. wins ---------- */

.wins__light {
  position: absolute; inset: 0; --mx: 60%; --my: 40%;
  background:
    radial-gradient(circle calc(460 * var(--u)) at var(--mx) var(--my), rgba(255, 196, 80, .13), #0000 70%),
    conic-gradient(from 161deg at 26% -14%, #0000 0deg, rgba(255, 208, 120, calc(.26 * var(--in))) 7deg, rgba(255, 208, 120, calc(.26 * var(--in))) 22deg, #0000 30deg),
    radial-gradient(ellipse calc(430 * var(--u)) calc(90 * var(--u)) at 21% 93%, rgba(255, 208, 120, .3), #0000 70%);
}
.slot--trophy { left: calc(400 * var(--u)); height: calc(900 * var(--u)); }
.wins__body { position: absolute; left: calc(780 * var(--u)); top: calc(110 * var(--u)); width: calc(1030 * var(--u)); }
.gold {
  font: 400 calc(98 * var(--u))/1.1 var(--display); color: var(--mango);
  background: linear-gradient(100deg, #e8920a 0%, #ffd77a 22%, #fff3c9 34%, #ffb01f 52%, #c97a00 74%, #ffd77a 100%) var(--shine, 30%) 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.wins__list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(54 * var(--u)) calc(60 * var(--u)); margin-top: calc(56 * var(--u)); }
.win { text-align: center; }
.win__crest { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); height: calc(138 * var(--u)); }
.win__crest svg { flex: none; width: calc(74 * var(--u)); height: calc(138 * var(--u)); fill: var(--mango); }
.win__crest svg:last-child { scale: -1 1; }
.win__crest h3 { font: 700 calc(40 * var(--u))/.96 var(--tall); text-transform: uppercase; letter-spacing: .04em; max-width: calc(300 * var(--u)); }
.win p { font-size: max(12px, calc(20 * var(--u))); line-height: 1.42; margin: calc(14 * var(--u)) auto 0; max-width: calc(440 * var(--u)); opacity: .86; }
.win a, .win button { display: inline-block; margin-top: calc(12 * var(--u)); font: 700 var(--t-small)/1 var(--text); color: var(--mango); text-decoration: underline; text-underline-offset: .25em; }
.win a:hover, .win button:hover { color: var(--cream); }

/* ---------- 9. say hello ---------- */

.contact__line { position: absolute; left: calc(104 * var(--u)); top: calc(70 * var(--u)); font-size: calc(252 * var(--u)); --k: calc(2.4 * var(--u)); white-space: nowrap; }
.ticket {
  --rx: 0deg; --ry: 0deg;
  position: absolute; left: calc(118 * var(--u)); top: calc(430 * var(--u)); width: calc(860 * var(--u)); height: calc(250 * var(--u));
  display: grid; grid-template-columns: 1fr calc(190 * var(--u)); text-align: left; color: var(--ink);
  background:
    radial-gradient(circle calc(22 * var(--u)) at 0 50%, #0000 98%, var(--paper)) left / 51% 100% no-repeat,
    radial-gradient(circle calc(22 * var(--u)) at 100% 50%, #0000 98%, var(--paper)) right / 51% 100% no-repeat;
  filter: drop-shadow(calc(10 * var(--u)) calc(12 * var(--u)) 0 var(--ink));
  rotate: -3deg; transition: rotate .4s var(--ease), translate .4s var(--ease);
}
.ticket:hover { rotate: -1deg; translate: 0 calc(-8 * var(--u)); }
.ticket__main { padding: calc(34 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(56 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; }
.ticket__tag { font: 800 calc(30 * var(--u))/1 var(--tall); text-transform: uppercase; letter-spacing: .34em; color: var(--red); }
.ticket__mail { font: 800 calc(66 * var(--u))/1 var(--tall); letter-spacing: .01em; }
.ticket__hint { font: 600 var(--t-small)/1 var(--text); opacity: .7; }
.ticket.is-copied .ticket__hint { opacity: 1; color: var(--red); }
.ticket__stub { display: grid; place-items: center; border-left: calc(4 * var(--u)) dashed rgba(27, 7, 11, .45); }
.ticket__stub svg { width: 46%; fill: var(--red); transition: scale .3s var(--ease); }
.ticket:hover .ticket__stub svg { scale: 1.18; }
.contact__links { position: absolute; left: calc(118 * var(--u)); top: calc(770 * var(--u)); display: flex; gap: calc(44 * var(--u)); font: 800 calc(46 * var(--u))/1 var(--tall); text-transform: uppercase; letter-spacing: .04em; }
.contact__links a { text-decoration: none; border-bottom: calc(4 * var(--u)) solid var(--red); padding-bottom: .08em; transition: color .2s; }
.contact__links a:hover { color: var(--red); }
.slot--bye { left: calc(1560 * var(--u)); height: calc(930 * var(--u)); }
.contact__fine { position: absolute; left: calc(118 * var(--u)); top: calc(870 * var(--u)); font: 500 var(--t-small)/1 var(--text); opacity: .7; }

/* ---------- the strip at the bottom ---------- */

.chapters {
  --p: 0;
  position: fixed; z-index: 40; left: 50%; bottom: calc(14 * var(--u)); width: calc(1700 * var(--u)); translate: -50% 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center;
  font: 700 max(11px, calc(17 * var(--u)))/1 var(--text); color: var(--cream); transition: color .35s;
}
body[data-tone="light"] .chapters { color: var(--ink); }
.chapters::before, .chapters i { content: ''; position: absolute; left: 0; top: 0; height: 2px; background: currentColor; }
.chapters::before { right: 0; opacity: .28; }
.chapters i { width: calc(var(--p) * 100%); }
.chapters a { position: relative; padding: calc(17 * var(--u)) 0 calc(8 * var(--u)); text-decoration: none; opacity: .5; transition: opacity .25s; white-space: nowrap; }
.chapters a::before { content: ''; position: absolute; left: 50%; top: -3px; width: 2px; height: 8px; background: currentColor; }
.chapters a:hover, .chapters a[aria-current] { opacity: 1; }

/* a fine grain over everything, as on film */
.grain {
  position: fixed; inset: -40px; z-index: 60; pointer-events: none; opacity: .34; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.1 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite;
}
html.still .grain { animation: none; }
@keyframes grain { 20% { translate: -14px 9px; } 40% { translate: 11px -17px; } 60% { translate: -8px -12px; } 80% { translate: 16px 14px; } }

/* ---------- a brand's page ---------- */

dialog { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; color: var(--cream); }
dialog::backdrop { background: rgba(10, 2, 4, .7); }
.page, .proof { width: 100vw; height: 100vh; height: 100dvh; background: var(--ink); overflow-y: auto; --fg: var(--cream); --bg: var(--ink); }
.page[open] { animation: iris .65s cubic-bezier(.5, 0, .2, 1); }
.page.is-closing { animation: iris .4s cubic-bezier(.5, 0, .2, 1) reverse forwards; }
html.still .page[open], html.still .page.is-closing { animation: none; }
@keyframes iris { from { clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 50%)); } }
.page__bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(22 * var(--u)) calc(110 * var(--u)); background: linear-gradient(var(--ink) 60%, #1b070b00); }
.page__pager { display: flex; align-items: center; gap: 14px; font: 700 var(--t-small)/1 var(--text); }
.page__body { padding: calc(20 * var(--u)) calc(110 * var(--u)) calc(120 * var(--u)); }
.page__head { display: flex; align-items: center; gap: calc(34 * var(--u)); }
.page__head .tile { width: calc(150 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(22 * var(--u)); }
.page__head h2 { font: 400 calc(128 * var(--u))/1 var(--display); color: var(--mango); }
.page__head p { font: 600 calc(34 * var(--u))/1 var(--tall); text-transform: uppercase; letter-spacing: .1em; margin-top: calc(10 * var(--u)); opacity: .8; }
.page__stats { display: flex; gap: calc(90 * var(--u)); margin-top: calc(50 * var(--u)); }
.page__stats li { font: 600 var(--t-body)/1.1 var(--text); }
.page__stats b { display: block; font: 800 calc(150 * var(--u))/.86 var(--tall); color: var(--cream); }
.page__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(90 * var(--u)); margin-top: calc(64 * var(--u)); }
.page h3 { font: 400 calc(40 * var(--u))/1 var(--display); color: var(--mango); margin-bottom: calc(18 * var(--u)); }
.page__thought p { font-size: max(15px, calc(27 * var(--u))); line-height: 1.52; }
.page__thought p + p { margin-top: 1em; }
.page .billing { --alt: var(--mango); font-size: calc(50 * var(--u)); }
.page__group { margin-top: calc(70 * var(--u)); }
/* the work, on a strip of film that scrolls sideways */
.film { margin: 0 calc(-110 * var(--u)); overflow-x: auto; background: #0d0305; scrollbar-width: thin; scrollbar-color: var(--mango) #0000; }
.film ul {
  --p: calc(31.5 * var(--u));
  display: flex; gap: calc(20 * var(--u)); width: max-content; padding: calc(44 * var(--u)) calc(110 * var(--u));
  background:
    repeating-linear-gradient(90deg, #0000 0 calc(8 * var(--u)), var(--cream) calc(8 * var(--u)) calc(23 * var(--u)), #0000 calc(23 * var(--u)) var(--p)) 0 calc(12 * var(--u)) / auto calc(17 * var(--u)) no-repeat,
    repeating-linear-gradient(90deg, #0000 0 calc(8 * var(--u)), var(--cream) calc(8 * var(--u)) calc(23 * var(--u)), #0000 calc(23 * var(--u)) var(--p)) 0 calc(100% - 12 * var(--u)) / auto calc(17 * var(--u)) no-repeat;
}
.shot { position: relative; display: block; height: calc(460 * var(--u)); min-height: 250px; border-radius: calc(10 * var(--u)); overflow: hidden; background: #2b0b11; text-decoration: none; }
.shot img { height: 100%; width: auto; transition: scale .5s var(--ease); }
.shot:hover img, .shot:focus-visible img { scale: 1.05; }
.shot b { position: absolute; left: calc(10 * var(--u)); bottom: calc(10 * var(--u)); padding: .32em .6em; border-radius: 99px; background: var(--ink); color: var(--cream); font: 800 max(14px, calc(26 * var(--u)))/1 var(--tall); text-transform: uppercase; letter-spacing: .04em; }
.shot b small { font: inherit; font-weight: 500; opacity: .75; }

.proof h2 { font: 400 calc(40 * var(--u))/1 var(--display); color: var(--mango); }
.proof img { display: block; max-width: min(1100px, 92vw); max-height: 80vh; margin: 10px auto 60px; border-radius: 6px; }

/* ---------- phones, and windows too small for the sheet ---------- */

@media (max-width: 899px), (max-height: 519px) {
  :root { --u: calc(100vw / 860); --t-body: 16px; --t-small: 13px; --foot: 0px; }
  .scene { min-height: 0; }
  .frame { position: relative; left: 0; top: 0; width: auto; height: auto; transform: none; padding: 64px 22px 84px; display: flex; flex-direction: column; gap: 22px; }
  .frame > * { position: static !important; width: auto !important; }
  .slot { position: relative !important; left: auto !important; bottom: auto !important; width: 0 !important; height: 380px !important; margin: 0 auto; }
  .fx { transform: none; opacity: 1; }

  .hello { min-height: 100svh; display: flex; flex-direction: column; }
  .hello__word { position: static; padding-top: 70px; }
  .hello .frame { flex: 1; padding-top: 10px; justify-content: flex-end; }
  .slot--hello { height: 54svh !important; order: -1; margin-bottom: -40px; }
  .hello__mark h1 { font-size: 46px; }
  .hello__mark p { font-size: 18px; }
  .hello__links { gap: 20px; font-size: 19px; }
  .hello__figures { text-align: left; gap: 16px; }
  .hello__figures li { font-size: 15px; }
  .hello__figures b { font-size: 46px; }
  .hello__hint { display: none; }

  .poster { --k: 1px; }
  .about__bio h2 { font-size: 64px; margin-bottom: 8px; }
  .about__arrows { display: none; }
  .about__facts { display: grid; gap: 22px; }
  .about__facts li { position: static; width: auto; }
  .about__facts h3 { font-size: 30px; }
  .about__facts p { font-size: 16px; }

  .journey h2 { font-size: 34px; }
  .slot--desk { height: 250px !important; }
  .journey__edu b { font-size: 36px; }
  .journey__edu span, .journey__langs { font-size: 15px; }
  .journey__exp li { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; border-top-width: 2px; }
  .journey__exp b { font-size: 54px; }
  .journey__exp em, .journey__exp p { font-size: 15px; }
  .journey__exp time { font-size: 20px; }
  .journey__credits { border-top-width: 2px; padding-top: 18px; }
  .billing { font-size: 30px; }
  .journey__credits h3 { font-size: 13px; }

  .brands { display: flex; flex-direction: column; }
  .brands .frame { order: 1; }
  .brands__wall { order: 2; }
  .brands__head h2 { font-size: 50px; }
  .brands__head p { font-size: 44px; }
  .slot--kiss { height: 300px !important; }
  .brands .frame { padding-bottom: 20px; }
  .brands__wall { position: relative; left: -6%; right: auto; top: auto; bottom: auto; width: 112%; rotate: -4deg; padding: 30px 0 110px; --u: calc(100vw / 620); }
  .brands__fade { display: none; }

  .serious { background: var(--wine); min-height: 92svh; }
  .drape { width: 51%; transform: none !important; }
  .pelmet { --u: calc(100vw / 760); transform: none; }
  .serious .frame { padding-top: 130px; }
  .serious__tag { font-size: 20px; gap: 12px; }
  .serious__tag i { width: 34px; height: 2px; }
  .serious__line { font-size: 58px; margin-top: 16px; text-shadow: 3px 3px 0 #4b0710; }
  .serious__next { margin-top: 24px; }
  .serious__next i { border-width: 0 3px 3px 0; }
  .slot--serious { height: 400px !important; }

  .sign { --b: calc(100vw / 14); position: relative !important; left: auto; top: auto; width: calc(12 * var(--b)) !important; height: calc(5 * var(--b)); margin: 0 auto; border-radius: 12px; }
  .sign p { font-size: 13px; }
  .sign h2 { font-size: 34px; }
  .social__lead { text-align: center; }
  .social__list { flex-direction: column; align-items: center; gap: 40px; perspective: none; --u: calc(100vw / 600); }

  .decks .frame { overflow: hidden; }
  .decks__head h2 { font-size: 58px; }
  .slot--dealer { display: none; }
  .decks__panel h3 { font-size: 34px; }
  .decks__count { font-size: 19px; }
  .decks__thought { font-size: 16px; min-height: 12em; }
  .decks__act { gap: 12px; margin-top: 16px; }
  .fan { --u: calc(100vw / 760); position: relative !important; left: 50% !important; top: auto; width: 0 !important; height: calc(400 * var(--u)); margin-top: 40px; }

  .wins .frame { padding-top: 40px; }
  .wins__light { --u: calc(100vw / 760); background: radial-gradient(ellipse 80% 420px at 50% 0, rgba(255, 208, 120, .22), #0000 70%); }
  .slot--trophy { height: 400px !important; }
  .gold { font-size: 52px; }
  .wins__list { grid-template-columns: 1fr; gap: 38px; margin-top: 30px; }
  .win__crest { height: 96px; gap: 6px; }
  .win__crest svg { width: 52px; height: 96px; }
  .win__crest h3 { font-size: 28px; max-width: 210px; }
  .win p { font-size: 16px; max-width: 30em; }

  .contact__line { font-size: 23vw; white-space: normal; --k: 1.2px; }
  .ticket { --u: calc(100vw / 1010); position: relative !important; left: auto; top: auto; width: calc(860 * var(--u)) !important; margin: 10px auto; }
  .ticket__hint { font-size: 12px; }
  .contact__links { flex-wrap: wrap; gap: 14px 26px; font-size: 30px; }
  .contact__links a { border-bottom-width: 3px; }
  .slot--bye { height: 420px !important; margin-bottom: -84px; }
  .contact .frame { padding-bottom: 84px; }
  .contact__fine { order: 9; }

  .chapters { left: 0; bottom: 0; width: 100%; translate: none; padding: 0 0 10px; background: none; font-size: 0; }
  .chapters a { padding: 22px 0 8px; }
  .chapters a[aria-current] { font-size: 12px; overflow: visible; }

  .page__bar { padding: 14px 18px; }
  .page__body { padding: 10px 18px 80px; }
  .page__head { gap: 16px; }
  .page__head .tile { width: 70px; height: 70px; border-radius: 12px; }
  .page__head h2 { font-size: 44px; }
  .page__head p { font-size: 18px; }
  .page__stats { gap: 22px; margin-top: 28px; flex-wrap: wrap; }
  .page__stats li { font-size: 14px; }
  .page__stats b { font-size: 62px; }
  .page__cols { grid-template-columns: 1fr; gap: 34px; margin-top: 36px; }
  .page h3 { font-size: 28px; }
  .page .billing { font-size: 32px; }
  .page__group { margin-top: 44px; }
  .film { margin: 0 -18px; }
  .film ul { --u: 1px; padding: 36px 18px; gap: 12px; }
  .shot { height: 300px; }
  .shot b { left: 8px; bottom: 8px; font-size: 16px; }
  .proof h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}