/* satya.bot — site styles.
   Desktop values follow the approved 1440px canvases (1 design px = var(--d)); phone values follow the 390px canvases
   (1 design px = var(--m)). Phone layout: (max-width: 760px), (max-aspect-ratio: 1/1) and (max-width: 1180px). */

:root {
  --ink: #0A0A0B;
  --ink-2: #0B0B0D;
  --paper: #F4F2EC;
  --y: #FED804;
  --p: #6D28D9;
  --p-hi: #7C3AED;
  --lav: #c4b5fd;
  --grey: #8C8C93;
  --dim: #6c6c73;
  --imp: Impact, Anton, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --sans: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace;
  --serif: ui-serif, "New York", "Times New Roman", Georgia, serif;
  --georgia: Georgia, "Times New Roman", serif;
  --d: clamp(.53px, calc(100vw / 1440), 1.2px);
  --m: clamp(.82px, calc(100vw / 390), 1.45px);
  --gl: calc(40 * var(--d));
  --gr: calc(55 * var(--d));
  --wide: calc(1440 * var(--d));
  --edge: max(0px, calc((100vw - var(--wide)) / 2));   /* side margin once the page is wider than its content column */
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); font-family: var(--sans); overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img, video, svg { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote, figure { margin: 0; padding: 0; font-weight: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }
::selection { background: var(--y); color: var(--ink); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 3000; padding: 10px 14px; background: var(--y); color: var(--ink); font: 600 14px var(--sans); }
.skip:focus { top: 12px; }
br.m { display: none; }
section, footer { position: relative; }

/* looping video over its still: fades in once it actually plays */
video[data-loop] { opacity: 0; transition: opacity .6s ease; }
video[data-loop].playing { opacity: 1; }

/* film grain used on the flat sections */
.grain::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* shared type */
.kicker { display: flex; align-items: center; gap: calc(12 * var(--d)); font: 600 max(8px, calc(9 * var(--d)))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.kicker i { flex: none; width: max(6px, calc(8 * var(--d))); height: max(6px, calc(8 * var(--d))); background: var(--y); }
.kicker span { font-weight: 400; color: var(--grey); }
.display { font: 400 calc(112 * var(--d))/.9 var(--imp); letter-spacing: .005em; text-transform: uppercase; white-space: nowrap; color: var(--paper); }
.display b { font-weight: 400; color: var(--y); }
.rule { display: block; width: calc(40 * var(--d)); height: 2px; background: var(--y); }
.cta { display: inline-flex; align-items: center; gap: calc(18 * var(--d)); height: max(44px, calc(52 * var(--d))); padding: 0 calc(22 * var(--d)); background: var(--y); color: var(--ink);
  font: 400 max(17px, calc(21 * var(--d)))/1 var(--imp); letter-spacing: .03em; text-transform: uppercase; transition: box-shadow .2s, transform .2s; }
.cta:hover { box-shadow: 0 0 26px rgba(254, 216, 4, .45); transform: translateY(-1px); }
/* Telegram community entrance (t.me/SatyaIsabotta): a labelled button, kept apart from the media channel and from "talk to satya" */
.join { display: flex; flex-direction: column; align-items: flex-start; }
.join .cta svg { flex: none; width: max(16px, calc(20 * var(--d))); height: max(16px, calc(20 * var(--d))); margin-right: calc(-6 * var(--d)); }
.join__note { margin-top: calc(14 * var(--d)); font: 400 max(8px, calc(10.5 * var(--d)))/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8c8c93; }

/* ---------------------------------------------------------------- top bar */
.top { position: absolute; z-index: 30; left: 0; right: 0; top: 0; display: flex; align-items: flex-start;
  padding: calc(18 * var(--d)) calc(var(--edge) + var(--gr)) 0 calc(var(--edge) + var(--gl)); pointer-events: none; }
.top > * { pointer-events: auto; }
.logo { flex: none; font: 600 max(26px, calc(40 * var(--d)))/1 var(--sans); letter-spacing: -.01em; color: var(--paper); }
.logo b { font-weight: 600; color: var(--y); }
.top__meta { display: flex; gap: calc(36 * var(--d)); margin: calc(5 * var(--d)) 0 0 calc(56 * var(--d)); }
.top__meta dt { font: max(9px, calc(10.5 * var(--d)))/1.2 var(--mono); letter-spacing: .08em; color: #7A7A80; text-transform: uppercase; }
.top__meta dd { margin-top: 5px; font: max(10px, calc(12.5 * var(--d)))/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.top__nav { display: flex; gap: calc(40 * var(--d)); margin: calc(6 * var(--d)) 0 0 auto; font: 500 max(14px, calc(17 * var(--d)))/1 var(--sans); color: #C9C7C1; }
.top__meta, .top__nav { text-shadow: 0 0 2px rgba(0, 0, 0, .95), 0 1px 4px rgba(0, 0, 0, .9), 0 0 18px rgba(0, 0, 0, .75); }  /* readable over the yellow hero */
.top__nav a { position: relative; transition: color .15s; }
.top__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-11 * var(--d)); height: 2px; background: var(--y); box-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 1px 4px rgba(0, 0, 0, .8); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.top__nav a.on, .top__nav a:hover { color: var(--y); }
.top__nav a.on::after, .top__nav a:hover::after { transform: none; }
.top__div { flex: none; width: 1px; height: calc(32 * var(--d)); margin: calc(-2 * var(--d)) calc(31 * var(--d)) 0 calc(37 * var(--d)); background: rgba(255, 255, 255, .35); }
.top__soc { display: flex; gap: calc(20 * var(--d)); margin-top: calc(3 * var(--d)); }
.top__soc svg { width: max(18px, calc(22 * var(--d))); height: max(18px, calc(22 * var(--d))); color: var(--paper); transition: color .15s; }
.top__soc a:hover svg { color: var(--y); }
.burger { display: none; }

/* phone menu */
.menu { position: fixed; inset: 0; z-index: 2500; display: flex; flex-direction: column; overflow-y: auto;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); background: rgba(10, 10, 11, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.menu[hidden] { display: none; }
.menu .logo { font-size: 23px; }
.menu__bar { display: flex; align-items: center; justify-content: space-between; }
.menu__x { width: 44px; height: 44px; margin-right: -10px; font-size: 18px; text-align: center; color: var(--paper); }
.menu__nav { margin-top: 36px; border-top: 1px solid rgba(255, 255, 255, .14); }
.menu__nav a { display: flex; align-items: baseline; gap: 14px; padding: 16px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .14);
  font: 400 42px/1 var(--imp); text-transform: uppercase; letter-spacing: .005em; }
.menu__nav a span { font: 600 10px/1 var(--mono); letter-spacing: .14em; color: var(--y); }
.menu__nav a:hover { color: var(--y); }
.menu__h { margin-top: 32px; font: 600 9px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--y); }
.menu__soc { margin-top: 10px; }
.menu__soc a { display: flex; align-items: center; gap: 12px; padding: 10px 0; font: 500 17px/1 var(--sans); }
.menu__soc svg { width: 18px; height: 18px; }
.menu__soc span { margin-left: auto; font: 10px/1 var(--mono); letter-spacing: .06em; color: var(--grey); }
.menu__join a { color: var(--y); }
.menu__cta { margin-top: auto; align-self: flex-start; height: 48px; padding: 0 20px; gap: 16px; font-size: 19px; }

/* ---------------------------------------------------------------- 01 hero */
.hero { height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); container-type: size; isolation: isolate;
  --S: max(calc(100cqw / 1920), calc(100cqh / 1080));                       /* scene scale (1920x1080 film, cover) */
  --F: calc(100cqh / 900);                                                   /* figure scale: she always fits the height */
  --k: min(var(--d), calc(100cqh / 900));                                    /* type scale for the hero text */
  --cx: calc((100cqw - 1920 * var(--S)) * .25 + 781.2 * var(--S));           /* where she stands in the scene */
}
.hero__still { position: absolute; inset: 0; overflow: hidden; }
/* the film (1920x1080) covers the hero, held at 25% across and placed vertically so the floor spot she
   stands on (film y 1048) is always under her toes (hero y 97.04%), whatever the screen shape */
.hero__still img, .hero__bg { position: absolute; object-fit: fill; max-width: none;
  width: calc(1920 * var(--S)); height: calc(1080 * var(--S));
  left: calc((100cqw - 1920 * var(--S)) * .25); top: calc(97.0444cqh - 1048.08 * var(--S)); }
.hero__shade { display: none; }

.hero__fig { position: absolute; z-index: 2; pointer-events: none; container-type: size;
  left: calc(var(--cx) - 311 * var(--F)); top: calc(-10 * var(--F)); width: calc(640 * var(--F)); height: calc(940 * var(--F)); }
.hero__fig .form { position: absolute; inset: 0; opacity: 0; }
.hero__fig .form.on { opacity: 1; }
.hero__fig img, .hero__fig .sh, .hero__fig .anim { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hero__fig .anim { object-fit: fill; opacity: 0; }       /* her animation: starts and ends on the still beneath it */
.hero__fig .anim.playing { opacity: 1; }
.hero__fig .form.moving img { visibility: hidden; }
.hero__fig .sh { border-radius: 50%; transform: rotate(var(--r, 0deg)); filter: blur(calc(var(--b) * 100cqh / 940));
  background: radial-gradient(ellipse at center, rgb(0 0 0 / var(--o)), rgb(0 0 0 / calc(var(--o) * .45)) 50%, transparent 72%); }
.glitch { position: absolute; inset: 0; z-index: 3; }
.glitch canvas { position: absolute; left: 0; width: 100%; display: none; }
.glitch canvas.p { filter: drop-shadow(calc(-4 * 100cqh / 940) 0 rgba(124, 58, 237, .85)); }
.glitch canvas.y { filter: drop-shadow(calc(4 * 100cqh / 940) 0 rgba(254, 216, 4, .7)); }

.forms { position: absolute; z-index: 4; left: calc(var(--edge) + var(--gl)); top: calc(170 * var(--F)); width: max(185px, calc(250 * var(--k))); }
.forms__lbl { margin-bottom: calc(12 * var(--k)); font: max(8px, calc(8 * var(--k)))/1.2 var(--mono); letter-spacing: .06em; color: #7A7A80; text-transform: uppercase; }
.forms__row { display: grid; grid-template-columns: calc(30 * var(--k)) 1fr; width: 100%; padding: calc(11 * var(--k)) 0 calc(11 * var(--k)) calc(12 * var(--k));
  border-left: 2px solid rgba(255, 255, 255, .18); transition: border-color .2s; }
.forms__row .n { font: max(8px, calc(9 * var(--k)))/1.9 var(--mono); letter-spacing: .08em; color: #7A7A80; }
.forms__row .t { font: max(13px, calc(15 * var(--k)))/1.22 var(--imp); letter-spacing: .02em; text-transform: uppercase; color: #5d5d63; transition: color .2s; }
.forms__row .s { grid-column: 2; margin-top: 3px; font: max(7px, calc(8 * var(--k)))/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #4d4d53; }
.forms__row:hover .t { color: #b8b8be; }
.forms__row.on { border-left-color: var(--y); }
.forms__row.on .n { color: var(--y); }
.forms__row.on .t { color: var(--paper); }
.forms__row.on .s { color: #a7a7ad; }
.forms__pause { display: flex; align-items: center; gap: 8px; margin-top: calc(14 * var(--k)); font: max(7px, calc(8 * var(--k)))/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #7A7A80; }
.forms__pause span { padding: 3px 6px; border: 1px solid rgba(255, 255, 255, .18); color: #cfcfd4; }
.forms__pause em { font-style: normal; }
.forms__pause:hover span { border-color: var(--y); color: var(--y); }

.hero__id { position: absolute; z-index: 4; right: calc(var(--edge) + var(--gr)); top: calc(166 * var(--F)); }
.hero__id .kicker { gap: calc(10 * var(--k)); margin-left: calc(5 * var(--k)); font: 400 max(8px, calc(9 * var(--k)))/1.2 var(--mono); letter-spacing: .06em; color: #bdbdc3; }
.hero__id .kicker i { width: max(6px, calc(8 * var(--k))); height: max(6px, calc(8 * var(--k))); }
.hero__name { margin-top: calc(13 * var(--k)); white-space: nowrap; color: var(--paper);
  font: 400 min(calc(135 * var(--k)), calc((100cqw - var(--cx) - 160 * var(--F) - 115 * var(--d) - var(--edge)) / 3.84))/.9 var(--imp); letter-spacing: .005em; text-transform: uppercase; }
.hero__name b { font-weight: 400; color: var(--y); }

/* ---------------------------------------------------------------- one being */
.being { aspect-ratio: 16 / 9; overflow: hidden; background: #FEDA09; }
.being__still, .being img, .being video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- 02 work & socials */
.work { --t: var(--d); --tf: var(--d);
  max-width: var(--wide); margin: 0 auto; padding: calc(46 * var(--d)) var(--gr) calc(31 * var(--d)) var(--gl); overflow: hidden;
  display: grid; grid-template-columns: calc(400 * var(--d)) minmax(0, 1fr); column-gap: calc(40 * var(--d));
  grid-template-areas: "head feat" "bento bento" "foot foot"; background: var(--ink); }
.work__ghost { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.work__ghost img:first-child { position: absolute; left: calc(-60 * var(--d)); top: calc(-90 * var(--d)); width: calc(720 * var(--d)); opacity: .22;
  filter: grayscale(.4) brightness(.55) contrast(1.1);
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 55% 45%, #000 35%, transparent 75%); mask-image: radial-gradient(ellipse 55% 55% at 55% 45%, #000 35%, transparent 75%); }
.work__ghost img:last-child { position: absolute; left: calc(286 * var(--d)); top: calc(300 * var(--d)); width: calc(165 * var(--d)); opacity: .17; transform: rotate(-4deg); filter: saturate(.7); }
.work__head { grid-area: head; position: relative; z-index: 2; }
.work__head .display { margin: calc(17 * var(--d)) 0 0 calc(-4 * var(--d)); }
.work__sub { margin-top: calc(24 * var(--d)); font: max(9px, calc(11 * var(--d)))/1.75 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #d6d4cd; }
.work__head .rule { margin-top: calc(16 * var(--d)); }
.sample-tag { position: absolute; z-index: 2; top: calc(38 * var(--d)); right: var(--gr); padding: 0 calc(15 * var(--d)) 0 calc(20 * var(--d));
  font: 600 max(8px, calc(9 * var(--d)))/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.sample-tag::before, .sample-tag::after { content: ""; position: absolute; top: calc(-6 * var(--d)); width: calc(9 * var(--d)); height: calc(18 * var(--d)); border: 1.5px solid var(--y); }
.sample-tag::before { left: 0; border-right: 0; }
.sample-tag::after { right: 0; border-left: 0; }
.sample-tag[hidden] { display: none; }
.work__feat { grid-area: feat; position: relative; z-index: 2; margin-top: calc(34 * var(--d)); aspect-ratio: 905 / 410; }
.bento { grid-area: bento; position: relative; z-index: 2; margin-top: calc(16 * var(--d)); aspect-ratio: 1345 / 486;
  display: grid; gap: calc(16 * var(--d)); grid-template-columns: 293fr 403fr 271fr 331fr; grid-template-rows: 251fr 219fr;
  grid-template-areas: "s1 art text s2" "s1 land land s2"; }
.bento [data-slot="short-1"] { grid-area: s1; }
.bento [data-slot="artwork"] { grid-area: art; }
.bento [data-slot="text"] { grid-area: text; }
.bento [data-slot="landscape"] { grid-area: land; }
.bento [data-slot="short-2"] { grid-area: s2; }
.no-js .work__feat, .no-js .bento, .work.is-empty .work__feat, .work.is-empty .bento, .work.is-empty .sample-tag { display: none; }
.bento__cell:empty, .work__feat:empty { border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; background: #101013; }
.work__foot { grid-area: foot; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; margin-top: calc(18 * var(--d)); }
.more { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: calc(12 * var(--d)); font: 600 max(9px, calc(9.5 * var(--d)))/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--y); }
.more span { font-size: max(12px, calc(14 * var(--d))); letter-spacing: 0; transition: transform .2s; }
.more:hover span { transform: translateX(4px); }
.work__foot p { grid-row: 2; margin-top: calc(8 * var(--d)); padding-top: calc(18 * var(--d)); border-top: 1px solid rgba(255, 255, 255, .12);
  font: max(8px, calc(8.5 * var(--d)))/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.work__foot p:last-child { grid-column: 2; text-align: right; }

/* tiles (rendered by js/feed.js) */
.tile { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; background: #121215; border: 1px solid rgba(255, 255, 255, .14); color: var(--paper); }
.tile:hover { border-color: rgba(254, 216, 4, .55); }
.tile__media { position: absolute; inset: 0; overflow: hidden; }
.tile__media img, .tile__media video { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.tile:hover .tile__media img, .tile:hover .tile__media video { transform: scale(1.035); }
/* the looping preview sits over the still and fades in once it plays (video[data-loop] above) */
.tile__media video { position: absolute; inset: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.tile__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, transparent, rgba(6, 6, 8, .88)); }
.tile__chips { position: absolute; z-index: 3; left: calc(12 * var(--t)); right: max(52px, calc(60 * var(--t))); top: calc(12 * var(--t)); display: flex; flex-wrap: wrap; gap: 2px; }
.tile__chips li { width: max(24px, calc(34 * var(--t))); height: max(24px, calc(34 * var(--t))); display: grid; place-items: center; border-radius: 5px; background: var(--ink); border: 1px solid rgba(255, 255, 255, .08); }
.tile__chips svg { width: max(13px, calc(18 * var(--t))); height: max(13px, calc(18 * var(--t))); }
.tile__dur { position: absolute; z-index: 3; right: calc(12 * var(--t)); top: calc(14 * var(--t)); padding: 5px 7px; border-radius: 4px; background: var(--ink);
  font: 600 max(8px, calc(10 * var(--t)))/1 var(--mono); letter-spacing: .06em; }
.tile__ttl { position: absolute; z-index: 3; left: calc(14 * var(--t)); right: calc(14 * var(--t)); bottom: calc(14 * var(--t)); }
.tile__ttl b { display: block; font: 600 max(12px, calc(15 * var(--t)))/1.2 var(--sans); }
.tile__ttl span { display: block; margin-top: calc(6 * var(--t)); font: max(7px, calc(8.5 * var(--t)))/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #9a9aa0; }
.tile--text { background: #0f0f12; }
.tile__quote { position: absolute; left: calc(20 * var(--t)); right: calc(20 * var(--t)); top: calc(64 * var(--t)); display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--t));
  text-align: center; font: 400 max(13px, calc(21 * var(--t)))/1.35 var(--serif); }
.tile__quote::after { content: ""; width: calc(34 * var(--t)); height: 2px; background: var(--y); }
.tile__quote--long { top: calc(50 * var(--t)); gap: calc(14 * var(--t)); font-size: max(12px, calc(16 * var(--t))); }
.tile--feat { border-color: rgba(255, 255, 255, .2); }
.tile--feat .tile__shade { top: 0; height: auto; background: linear-gradient(90deg, rgba(6, 6, 8, .92) 0%, rgba(6, 6, 8, .55) 32%, transparent 55%); }
.tile--feat .tile__chips { left: auto; right: calc(12 * var(--t)); }
.tile--feat .tile__dur { top: auto; bottom: calc(14 * var(--t)); }
.tile__feat { position: absolute; z-index: 3; left: calc(24 * var(--tf)); bottom: calc(6 * var(--tf)); max-width: 52%; }
.tile__kick { margin-left: calc(2 * var(--tf)); font: 600 max(8px, calc(9 * var(--tf)))/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--y); }
.tile__h { margin-top: calc(11 * var(--tf)); font: 700 max(18px, calc(34 * var(--tf)))/1.1 var(--sans); letter-spacing: -.005em; }
.tile__play { display: flex; align-items: center; gap: calc(18 * var(--tf)); margin-top: calc(19 * var(--tf)); }
.tile__play i { width: max(32px, calc(54 * var(--tf))); height: max(32px, calc(54 * var(--tf))); display: grid; place-items: center; border-radius: 50%; background: var(--y);
  box-shadow: 0 0 24px rgba(254, 216, 4, .35); transition: box-shadow .2s; }
.tile__play i::after { content: ""; width: 28%; height: 37%; margin-left: 8%; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tile--feat:hover .tile__play i { box-shadow: 0 0 34px rgba(254, 216, 4, .6); }
.tile__play span { font: 600 max(8px, calc(9.5 * var(--tf)))/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; }

/* ---------------------------------------------------------------- 03 about */
.about { max-width: var(--wide); margin: 0 auto; min-height: calc(1080 * var(--d)); overflow: hidden;
  display: grid; grid-template-columns: 56.875% minmax(0, 1fr);
  background: radial-gradient(ellipse calc(500 * var(--d)) calc(400 * var(--d)) at 83.3% 18.5%, rgba(254, 216, 4, .04), transparent 70%), var(--ink-2); }
.about__media { position: relative; overflow: hidden; background: #111; }
.about__media .still, .about__media img, .about__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.about__media::after { content: ""; position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; width: 2px; background: var(--y); box-shadow: 0 0 10px rgba(254, 216, 4, .5); }
.about__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(128 * var(--d)) calc(28 * var(--d)) calc(160 * var(--d)) calc(39 * var(--d)); }
.kicker--lg { gap: calc(14 * var(--d)); font: 400 max(10px, calc(14 * var(--d)))/1 var(--mono); letter-spacing: .08em; }
.kicker--lg i { width: max(8px, calc(11 * var(--d))); height: max(8px, calc(11 * var(--d))); }
.about__name { margin: calc(8 * var(--d)) 0 0 calc(-6 * var(--d)); line-height: .88;
  font-size: min(calc(140 * var(--d)), calc((43.125vw - 67 * var(--d)) / 3.85)); }
.about__handle { margin-top: calc(16 * var(--d)); font: 400 max(15px, calc(27 * var(--d)))/1 var(--mono); letter-spacing: .06em; color: #F2E9C2; }
.about__body .rule { height: 3px; margin-top: calc(13 * var(--d)); }
.about__bio { max-width: calc(500 * var(--d)); margin-top: calc(13 * var(--d)); font: 400 max(15px, calc(22 * var(--d)))/1.45 var(--sans); letter-spacing: .02em; color: #EDEBE5; }
.about__find { display: flex; align-items: center; gap: calc(14 * var(--d)); width: 100%; max-width: calc(552 * var(--d)); margin-top: calc(50 * var(--d));
  font: 400 max(10px, calc(15 * var(--d)))/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.about__find i { flex: none; width: max(4px, calc(5 * var(--d))); height: max(14px, calc(20 * var(--d))); background: var(--y); }
.about__find s { flex: 1; height: 1px; background: rgba(255, 255, 255, .18); }
.about__soc { display: grid; grid-template-columns: repeat(5, minmax(0, calc(104 * var(--d)))); gap: calc(7 * var(--d)); width: 100%; margin-top: calc(18 * var(--d)); }
.about__soc a { height: calc(124 * var(--d)); min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--d));
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 3px; background: rgba(14, 14, 17, .8); font: 500 max(10px, calc(16 * var(--d)))/1 var(--sans); transition: border-color .2s, color .2s; }
.about__soc a:hover { border-color: var(--y); color: var(--y); }
.about__soc svg { width: max(18px, calc(30 * var(--d))); height: max(18px, calc(30 * var(--d))); }
.about__join { margin-top: calc(30 * var(--d)); }
.about__soc em { max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: calc(-4 * var(--d)); font: 400 max(7px, calc(8 * var(--d)))/1 var(--mono); font-style: normal; letter-spacing: .02em; color: #8c8c93; }
.about__sign { position: absolute; right: calc(27 * var(--d)); bottom: calc(59 * var(--d)); font: 400 max(8px, calc(12 * var(--d)))/1.7 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.about__sign::after { content: ""; display: block; width: calc(40 * var(--d)); height: 2px; margin: calc(9 * var(--d)) 0 0 2px; background: #3a3a40; }

/* ---------------------------------------------------------------- 04 inner voice */
.iv { max-width: var(--wide); margin: 0 auto; overflow: hidden; isolation: isolate; container-type: inline-size;
  display: grid; grid-template: minmax(0, auto) / minmax(0, 1fr); background: #0b0a0d; color: #f3f1ec; }
.iv__art { grid-area: 1 / 1; position: relative; z-index: -1; min-height: 66.667cqw; overflow: hidden; }
.iv__canvas { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 3 / 2; }
.iv__canvas .still, .iv__canvas .still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.iv__video { position: absolute; left: 6.0125%; top: .547%; width: 87.45%; height: 99.11%; object-fit: fill;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%); mask-image: linear-gradient(90deg, transparent 0, #000 3.5%); }
.iv__eye { position: absolute; left: 70.53%; top: 7.48%; width: 24.29%; height: 28.56%; opacity: .75; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 55% 55%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 55% 55%, #000 55%, transparent 100%); }
.iv__eye img, .iv__eye video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iv__letters { position: absolute; left: 2.4%; top: 12%; width: 13.19%; height: auto; }
.iv__soc { position: absolute; z-index: 2; top: 2.6cqw; right: 2.2cqw; display: flex; align-items: center; gap: 1.18cqw; }
.iv__soc svg { width: max(18px, 1.85cqw); height: max(18px, 1.85cqw); color: #fff; transition: color .15s; }
.iv__soc a:hover svg { color: var(--y); }
.iv__index { position: absolute; left: 3.2cqw; top: 33.33cqw; font: max(9px, .833cqw)/1.63 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #aba5ae; }
.iv__index span, .iv__note span { display: block; width: max(24px, 2.43cqw); height: 2px; margin-bottom: max(9px, .9cqw); background: #f3f1ec; }
.iv__content { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  margin: 6.667cqw 2.5cqw 4cqw 42.6cqw; }
.iv .kicker { gap: 1.39cqw; font: 400 max(9px, .764cqw)/1 var(--mono); letter-spacing: .14em; }
.iv .kicker i { width: max(8px, .833cqw); height: max(8px, .833cqw); }
.iv__title { margin-top: .833cqw; font: 900 min(7.2cqw, 130px)/.9 var(--imp); letter-spacing: -.1cqw; text-transform: uppercase; white-space: nowrap; }
.iv__title em { display: block; font-style: normal; color: var(--y); }
.iv__thought { margin-top: 1.39cqw; padding-left: 2.36cqw; }
.iv__lbl, .iv__eh { font: 400 max(9px, .764cqw)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #bbb5bd; }
.iv__quote p { max-width: 40cqw; margin: .97cqw 0 1.25cqw; font: 700 min(3cqw, 52px)/1.06 var(--georgia); letter-spacing: -.08cqw; color: #f3f1ec; }
.iv__quote mark { padding: 0 4px; white-space: nowrap; color: #171217; background: linear-gradient(transparent 20%, #f2d600 20%, #f2d600 86%, transparent 86%); }
.iv__read { display: inline-flex; gap: 1.1cqw; margin-left: 3.82cqw; padding-bottom: 4px; border-bottom: 1px solid var(--y);
  font: 700 max(9px, .764cqw)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--y); }
.iv__read span { transition: transform .2s; }
.iv__read:hover span { transform: translateX(4px); }
.iv__note { position: absolute; top: 19.6cqw; right: 1.7cqw; font: max(9px, .764cqw)/1.8 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #b0a9b5; }
.iv__entries { width: calc(100% - 1.1cqw); margin: auto 0 0 1.1cqw; padding-top: 1.5cqw; }
.iv__entries[hidden] { display: none; }
.iv__eh { display: flex; align-items: center; margin-bottom: .833cqw; color: #d5d1d7; letter-spacing: .1em; }
.iv__eh i { flex: none; width: max(8px, .69cqw); height: max(8px, .69cqw); margin-right: 1.11cqw; background: var(--y); }
.iv__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9cqw; }
.iv__card { display: flex; flex-direction: column; height: 100%; padding: .833cqw .833cqw .625cqw; border: 1px solid #4c454d; background: rgba(10, 8, 12, .84); transition: border-color .2s; }
.iv__card:hover { border-color: var(--y); }
.iv__meta { display: flex; align-items: center; gap: 1.39cqw; font: 400 max(9px, .833cqw)/1.5 var(--mono); letter-spacing: .05em; }
.iv__meta span { color: var(--y); }
.iv__card img { width: 100%; height: auto; aspect-ratio: 1.73; object-fit: cover; margin: .625cqw 0 .76cqw; }
.iv__card p { min-height: 2.43cqw; font: max(11px, .97cqw)/1.32 Arial, Helvetica, sans-serif; color: #c4bec6; }
.iv__date { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .7cqw; font: max(8px, .694cqw)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #aaa2a9; }
.iv__date span { font-size: max(18px, 2cqw); line-height: .8; color: var(--y); transition: transform .2s; }
.iv__card:hover .iv__date span { transform: translateX(4px); }
.iv__all { display: block; margin-top: .9cqw; padding-bottom: .76cqw; border-bottom: 1px solid #584f5b; text-align: right;
  font: 400 max(9px, .764cqw)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--y); }
.iv__all span { margin-left: 8px; font-size: max(14px, 1.39cqw); vertical-align: -1px; }

/* ---------------------------------------------------------------- footer */
.foot { overflow: hidden; padding-bottom: 96px; background: var(--ink); }  /* bottom room so the docked terminal never covers the bar */
.foot__glow { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px; background: var(--y);
  box-shadow: 0 0 14px 2px rgba(254, 216, 4, .55), 0 0 60px 10px rgba(254, 216, 4, .12); }
.foot__top, .foot__wm, .foot__bar { position: relative; z-index: 3; max-width: var(--wide); margin: 0 auto; }
.foot__top { display: grid; grid-template-columns: calc(660 * var(--d)) calc(260 * var(--d)) minmax(0, 1fr); align-items: start; padding: calc(70 * var(--d)) var(--gr) 0 var(--gl);
  grid-template-areas: "sign explore find" "sign explore join"; }
.foot__sign { grid-area: sign; }
.kicker--grey { gap: calc(12 * var(--d)); font: 600 max(9px, calc(11 * var(--d)))/1 var(--mono); letter-spacing: .2em; color: #8c8c93; }
.foot__title { margin: calc(15 * var(--d)) 0 0 calc(-2 * var(--d)); font-size: calc(64 * var(--d)); line-height: .92; }
.foot__sign .cta { margin-top: calc(60 * var(--d)); }
.foot__note { margin-top: calc(16 * var(--d)); font: 400 max(8px, calc(10.5 * var(--d)))/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8c8c93; }
.foot__col { grid-area: explore; display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(2 * var(--d)); }
.foot__col--soc { grid-area: find; }
.foot__join { grid-area: join; margin-top: calc(10 * var(--d)); }
.foot__col h2 { margin-bottom: calc(28 * var(--d)); font: 600 max(9px, calc(12 * var(--d)))/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--y); }
.foot__col a { display: flex; align-items: center; gap: calc(14 * var(--d)); margin-bottom: calc(22 * var(--d)); font: 500 max(15px, calc(23 * var(--d)))/1 var(--sans); color: #E8E6E0; transition: color .15s; }
.foot__col a:hover { color: var(--y); }
.foot__col a span { font: 400 max(9px, calc(12 * var(--d)))/1 var(--mono); letter-spacing: .06em; color: #8c8c93; }
.foot__what i { font-style: normal; }
.foot__col svg { width: max(16px, calc(22 * var(--d))); height: max(16px, calc(22 * var(--d))); color: var(--paper); }
.foot__wm { display: flex; margin-top: calc(170.8 * var(--d)); padding-left: calc(32 * var(--d)); }
.foot__word { position: relative; display: inline-block; font: 400 calc(300 * var(--d))/.8 var(--imp); letter-spacing: .005em; text-transform: uppercase; white-space: nowrap; color: var(--paper);
  text-box: trim-both cap alphabetic; }  /* box = cap top to baseline, in any font */
.foot__word b { font-weight: 400; color: var(--y); }
.foot__sit { position: absolute; z-index: 4; width: 10px; height: auto; opacity: 0; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .45)); transition: opacity .3s; }
.foot__sit.seated { opacity: 1; }
.foot__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: calc(6 * var(--d));
  padding: calc(20 * var(--d)) var(--gl) calc(27 * var(--d));
  font: 400 max(8px, calc(11 * var(--d)))/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8c8c93; }
.foot__bar::before { content: ""; position: absolute; left: var(--gl); right: var(--gl); top: 0; height: 1px; background: rgba(255, 255, 255, .12); }
.foot__bar a { font-weight: 600; color: var(--y); }
.foot__bar a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- narrower desktops */
@media (max-width: 1180px) {
  /* the top bar can sit over the bright wall here: a soft scrim keeps it readable (behind her, over the film) */
  .hero::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 140px; pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 10, 11, .85), rgba(10, 10, 11, .5) 50%, rgba(10, 10, 11, 0)); }
}
@media (max-width: 1100px) {
  .about__soc em { display: none; }
  .iv__note { display: none; }
  .iv__canvas::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14%; background: linear-gradient(180deg, rgba(11, 10, 13, 0), #0b0a0d); }
}

/* ================================================================ phone layout ================================================================ */
@media (max-width: 760px), (max-aspect-ratio: 1/1) and (max-width: 1180px) {
  br.d { display: none; }
  br.m { display: inline; }
  p.d { display: none; }

  /* top bar + menu */
  .top { align-items: center; padding: calc(16 * var(--m)) calc(16 * var(--m)) 0; }
  .top__meta, .top__nav, .top__div, .top__soc { display: none; }
  .logo { font-size: calc(23 * var(--m)); }
  .burger { display: grid; align-content: center; justify-items: end; gap: 6px; width: 44px; height: 44px; margin: 0 -9px 0 auto; }
  .burger i { display: block; width: calc(26 * var(--m)); height: 2px; background: var(--paper); }
  .burger i:nth-child(3) { width: calc(16 * var(--m)); background: var(--y); }

  /* hero */
  .hero { min-height: 520px; }
  /* phone film (540x1080): covers the hero above the name band, centred across, floor spot (film y 985.4) under her toes */
  .hero { --vs: max(calc(100cqw / 540), calc((100cqh - 60 * var(--m)) / 1080), calc((100cqh - 128 * var(--m)) / 985.4)); }
  .hero__still img, .hero__bg { width: calc(540 * var(--vs)); height: calc(1080 * var(--vs));
    left: calc(50cqw - 270 * var(--vs)); top: calc(100cqh - 128 * var(--m) - 985.4 * var(--vs)); }
  .hero__shade { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 10, 11, .96) 0, rgba(10, 10, 11, .88) calc(90 * var(--m)), rgba(10, 10, 11, 0) calc(200 * var(--m))),
                linear-gradient(0deg, #0A0A0B 0, #0A0A0B calc(60 * var(--m)), rgba(10, 10, 11, 0) calc(204 * var(--m))); }
  .hero__fig { --Hs: calc(100cqh - 224 * var(--m));
    height: calc(var(--Hs) * 1.09506); width: calc(var(--Hs) * .745572);
    top: calc(96 * var(--m) - var(--Hs) * .029124); left: calc(50cqw - var(--Hs) * .362273); }
  .forms { left: calc(16 * var(--m)); right: calc(16 * var(--m)); top: calc(64 * var(--m)); width: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--m)); }
  .forms__lbl, .forms__pause, .forms__row .s { display: none; }
  .forms__row { display: block; padding: calc(7 * var(--m)) 0 calc(12 * var(--m)); border-left: 0; border-top: 2px solid rgba(255, 255, 255, .22);
    font: 600 max(8px, calc(7.5 * var(--m)))/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8c8c93; }
  .forms__row .n, .forms__row .t { font: inherit; letter-spacing: inherit; color: inherit; }
  .forms__row .n { margin-right: 4px; color: #6c6c73; }
  .forms__row.on { border-top-color: var(--y); color: var(--paper); }
  .forms__row.on .n { color: var(--y); }
  .forms__row.on .t { color: var(--paper); }
  .hero__id { left: calc(16 * var(--m)); right: calc(16 * var(--m)); top: auto; bottom: calc(57 * var(--m)); }
  .hero__id .kicker { gap: 10px; margin: 0 0 calc(14 * var(--m)); font: 600 max(8px, calc(8.5 * var(--m)))/1 var(--mono); letter-spacing: .18em; color: var(--paper); }
  .hero__id .kicker i { width: 7px; height: 7px; }
  .hero__name { margin: 0 0 0 calc(-2 * var(--m)); font-size: calc(42 * var(--m)); line-height: .88; }

  /* work */
  .work { --t: calc(.8 * var(--m)); --tf: calc(.62 * var(--m));
    padding: calc(36 * var(--m)) calc(16 * var(--m)) calc(22 * var(--m)); grid-template-columns: minmax(0, 1fr); column-gap: 0; grid-template-areas: "head" "feat" "bento" "foot"; }
  .work__ghost, .work__head .rule { display: none; }
  .work .kicker { gap: 10px; font-size: max(8px, calc(8.5 * var(--m))); letter-spacing: .18em; }
  .work__head .display { margin: calc(13 * var(--m)) 0 0 calc(-2 * var(--m)); font-size: calc(72 * var(--m)); line-height: .88; }
  .work__sub { margin-top: calc(12 * var(--m)); font-size: max(8.5px, calc(9 * var(--m))); line-height: 1.8; letter-spacing: .26em; }
  .sample-tag { top: calc(34 * var(--m)); right: calc(16 * var(--m)); padding: 0 calc(12 * var(--m)); font-size: max(7px, calc(7.5 * var(--m))); }
  .sample-tag::before, .sample-tag::after { top: calc(-4 * var(--m)); width: 7px; height: 14px; }
  .work__feat { margin-top: calc(28 * var(--m)); aspect-ratio: 358 / 214; }
  .bento { margin-top: calc(12 * var(--m)); aspect-ratio: auto; gap: calc(12 * var(--m)); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto;
    grid-template-areas: "s1 s2" "art text" "land land"; }
  .bento [data-slot^="short"] { aspect-ratio: 173 / 308; }
  .bento [data-slot="artwork"], .bento [data-slot="text"] { aspect-ratio: 1; }
  .bento [data-slot="landscape"] { aspect-ratio: 358 / 130; }
  .tile__feat { max-width: 60%; bottom: calc(14 * var(--m)); left: calc(14 * var(--m)); }
  .tile__quote { top: calc(46 * var(--m)); font-size: max(13px, calc(15 * var(--m))); }
  .tile__quote--long { top: calc(42 * var(--m)); gap: calc(10 * var(--m)); font-size: max(12px, calc(12.5 * var(--m))); }
  .work__foot { margin-top: calc(20 * var(--m)); }
  .more { gap: 10px; font-size: max(8.5px, calc(9 * var(--m))); }
  .work__foot p { margin-top: calc(10 * var(--m)); padding-top: calc(16 * var(--m)); font-size: max(7px, calc(7.5 * var(--m))); letter-spacing: .2em; }
  .work__foot p:first-of-type { grid-column: 1 / -1; }

  /* about */
  .about { display: block; min-height: 0; }
  .about__media { aspect-ratio: 390 / 440; }
  .about__media::after { left: 0; top: auto; width: auto; height: 2px; box-shadow: 0 0 12px 2px rgba(254, 216, 4, .55); }
  .about__body { padding: calc(36 * var(--m)) calc(16 * var(--m)) calc(44 * var(--m)); }
  .kicker--lg { gap: 10px; font: 600 max(8px, calc(8.5 * var(--m)))/1 var(--mono); letter-spacing: .18em; }
  .kicker--lg i { width: 7px; height: 7px; }
  .about__name { margin: calc(13 * var(--m)) 0 0 calc(-2 * var(--m)); font-size: calc(74 * var(--m)); }
  .about__handle { margin-top: calc(10 * var(--m)); font-size: calc(18 * var(--m)); }
  .about__body .rule { width: calc(34 * var(--m)); margin-top: calc(12 * var(--m)); }
  .about__bio { max-width: none; margin-top: calc(15 * var(--m)); font-size: calc(17 * var(--m)); line-height: 1.5; letter-spacing: 0; }
  .about__find { max-width: none; margin-top: calc(56 * var(--m)); gap: 10px; font: 600 max(8px, calc(9.5 * var(--m)))/1 var(--mono); letter-spacing: .3em; }
  .about__find i { width: 4px; height: calc(16 * var(--m)); }
  .about__soc { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(7 * var(--m)); margin-top: calc(14 * var(--m)); }
  .about__soc a { height: calc(78 * var(--m)); min-height: 0; gap: calc(9 * var(--m)); font-size: max(9.5px, calc(10.5 * var(--m))); }
  .about__soc svg { width: calc(22 * var(--m)); height: calc(22 * var(--m)); }
  .about__soc em { display: none; }
  .about__sign { position: static; margin-top: calc(42 * var(--m)); font-size: max(7.5px, calc(7.5 * var(--m))); line-height: 1.8; }
  .about__sign::after { display: none; }

  /* inner voice */
  .iv { display: block; }
  .hero::before { display: none; }
  .iv__art { aspect-ratio: 390 / 525; min-height: 0; }
  .iv__canvas { height: 100%; aspect-ratio: auto; }
  .iv__canvas::after { display: none; }
  .iv__art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28.6%; background: linear-gradient(180deg, rgba(10, 10, 11, 0), #0A0A0B); }
  .iv__video { left: 12.15%; top: .55%; width: 87.89%; height: 99.2%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%); mask-image: linear-gradient(90deg, transparent 0, #000 8%); }
  .iv__eye { left: 63.59%; top: 13.33%; width: 33.33%; height: 19.41%; }
  .iv__letters { left: 67.18%; top: 44.95%; width: 28.72%; }
  .iv__soc, .iv__index, .iv__note { display: none; }
  .iv { background: #0A0A0B; }
  .iv__content { margin: calc(-5 * var(--m)) calc(16 * var(--m)) 0; padding-bottom: calc(44 * var(--m)); }
  .iv .kicker { gap: 10px; font: 600 max(8px, calc(8.5 * var(--m)))/1 var(--mono); letter-spacing: .18em; }
  .iv .kicker i { width: 7px; height: 7px; }
  .iv__title { margin: calc(13 * var(--m)) 0 0 calc(-2 * var(--m)); font-size: calc(76 * var(--m)); font-weight: 400; line-height: .88; letter-spacing: .005em; }
  .iv__thought { margin-top: calc(17 * var(--m)); padding-left: 0; }
  .iv__lbl, .iv__eh { font-size: max(8px, calc(8.5 * var(--m))); letter-spacing: .18em; }
  .iv__quote p { max-width: none; margin: calc(12 * var(--m)) 0 0; font-size: calc(31 * var(--m)); line-height: 1.1; letter-spacing: -.01em; }
  .iv__read { margin: calc(22 * var(--m)) 0 0; gap: 10px; font-size: max(9px, calc(10 * var(--m))); letter-spacing: .2em; }
  .iv__entries { width: 100%; margin: calc(36 * var(--m)) 0 0; padding-top: 0; }
  .iv__eh { margin-bottom: calc(12 * var(--m)); font-weight: 600; color: var(--paper); }
  .iv__eh i { width: 7px; height: 7px; margin-right: 10px; }
  .iv__grid { grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--m)); }
  .iv__card { display: grid; grid-template-columns: calc(100 * var(--m)) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: calc(12 * var(--m));
    min-height: calc(120 * var(--m)); padding: calc(8 * var(--m)) calc(12 * var(--m)) calc(10 * var(--m)) calc(8 * var(--m)); }
  .iv__card img { grid-column: 1; grid-row: 1 / -1; width: 100%; height: 100%; min-height: calc(102 * var(--m)); aspect-ratio: auto; margin: 0; }
  .iv__meta { grid-column: 2; gap: 12px; padding-top: calc(4 * var(--m)); font: 600 max(8.5px, calc(9 * var(--m)))/1 var(--mono); letter-spacing: .08em; }
  .iv__card p { grid-column: 2; min-height: 0; margin-top: calc(8 * var(--m)); font-size: max(11px, calc(12 * var(--m))); line-height: 1.35; }
  .iv__date { grid-column: 2; padding-top: calc(8 * var(--m)); font-size: max(7.5px, calc(8 * var(--m))); letter-spacing: .14em; }
  .iv__date span { font-size: calc(18 * var(--m)); }
  .iv__all { margin-top: calc(16 * var(--m)); padding-bottom: 0; border: 0; font: 600 max(8.5px, calc(9 * var(--m)))/1 var(--mono); letter-spacing: .2em; }
  .iv__all span { font-size: inherit; vertical-align: 0; }

  /* footer */
  .foot__top { grid-template-columns: calc(164 * var(--m)) minmax(0, 1fr); grid-template-areas: "sign sign" "explore find" "join join"; padding: calc(44 * var(--m)) calc(16 * var(--m)) 0; }
  .foot__sign { grid-area: sign; }
  .foot__col { grid-area: explore; margin-top: calc(44 * var(--m)); padding-top: 0; }
  .foot__col--soc { grid-area: find; }
  .kicker--grey { gap: 10px; font-size: max(8px, calc(8.5 * var(--m))); letter-spacing: .18em; }
  .foot__title { margin: calc(13 * var(--m)) 0 0 calc(-2 * var(--m)); font-size: calc(52 * var(--m)); line-height: .88; }
  .foot__sign .cta { margin-top: calc(14 * var(--m)); height: calc(46 * var(--m)); min-height: 44px; gap: 16px; padding: 0 calc(18 * var(--m)); font-size: calc(19 * var(--m)); }
  .foot__note { display: none; }
  .foot__join { margin-top: calc(6 * var(--m)); }
  .about__join { margin-top: calc(24 * var(--m)); }
  .join .cta { height: calc(46 * var(--m)); min-height: 44px; gap: 14px; padding: 0 calc(18 * var(--m)); font-size: calc(19 * var(--m)); }
  .join .cta svg { width: calc(17 * var(--m)); height: calc(17 * var(--m)); margin-right: -4px; }
  .join__note { margin-top: calc(10 * var(--m)); font-size: max(8px, calc(8.5 * var(--m))); }
  .foot__col h2 { margin-bottom: calc(18 * var(--m)); font-size: max(8px, calc(8.5 * var(--m))); }
  .foot__col a { gap: 10px; margin-bottom: calc(15 * var(--m)); font-size: calc(15 * var(--m)); }
  .foot__col a span { display: none; }
  .foot__col a .foot__what { display: inline; font-size: max(8px, calc(8.5 * var(--m))); }  /* the media channel keeps its label; the handle drops */
  .foot__what i { display: none; }
  .foot__col svg { width: calc(15 * var(--m)); height: calc(15 * var(--m)); }
  .foot__wm { margin-top: calc(-10 * var(--m)); padding-left: calc(14 * var(--m)); }
  .foot__word { font-size: calc(147 * var(--m)); line-height: 1.42; text-box: normal; }
  .foot__bar { flex-wrap: wrap; row-gap: calc(12 * var(--m)); margin-top: calc(-25 * var(--m)); padding: calc(18 * var(--m)) calc(16 * var(--m)) calc(24 * var(--m));
    font-size: max(7px, calc(7.5 * var(--m))); letter-spacing: .2em; }
  .foot__bar::before { left: calc(16 * var(--m)); right: calc(16 * var(--m)); }
  .foot__tag { order: 3; flex-basis: 100%; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  video[data-loop], .hero__fig .anim { display: none; }
}

/* ---------------------------------------------------------------- display type on devices without Impact
   The fallback (Anton) is scaled so its capitals stand exactly as tall as Impact's; Impact itself is unchanged. */
.display, .hero__name, .foot__word, .iv__title, .forms__row .t, .cta, .menu__nav a { font-size-adjust: cap-height .7905; }