/* Hero — the homepage first screen, ported 1:1 from design-hero-handoff/reference/index.html (source of truth) and SPEC.md.
   Structural differences from the reference only:
   - the hero is a 230vh block (.hx) with a sticky full-screen view (.hx-view) instead of fixed layers over a 230vh
     scroller, so the sections below follow it;
   - real fonts: Basis Grotesque for the headline and UI (Black stands in for the reference's 800),
     Tiempos Headline for the italic word, the work names and the menu hover;
   - tuned by the designer (2026-10-04): headline tracking -.03em (was -.02em), the word in Tiempos Light Italic (300)
     at -.034em (was Regular Italic, +.005em), on the baseline of “to” and .07em closer to it, sized to the
     headline's x-height (.935em), the full stop .08em apart; no work preview in the menu; the second screen is
     the studio, a whole screen (the work closes into the flower, which turns burgundy and opens into the mark beside
     the studio paragraph) instead of the list, and the work list follows it;
     the intro plays on every load (the handoff: once per session); a fifth work, “your logo.” (ICONIQ Realty),
     after the handoff's four; the way to the studio is the clean flower only;
   - no Replay button. */

.hx, .menu, .bar { --pad: clamp(16px, 2.4vw, 40px); --stone: #8D8782; line-height: normal; }
/* 315vh: the screen itself, the way to the studio (115vh), and a screen's hold while Selected work comes up over it
   from below (the designer, 2026-10-07: that transition back, but the studio must not simply hide: its mark and words
   drift up and away as the sheet comes, scroll.js) */
.hx { --ink: var(--charcoal); position: relative; height: 315vh; color: var(--ink); }
body.light .hx { --ink: var(--cream); }
.hx-view { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
/* "Studio" in the menu lands here: the scroll position where the studio screen is complete */
.hx-mark { position: absolute; left: 0; top: 115vh; width: 1px; height: 1px; }

.inkt { transition: color .7s ease; }
:where(.hx, .menu, .bar) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.hx, .menu, .bar) a { color: inherit; }
:where(.hx, .menu, .bar) :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* stage: the works, full-bleed, in two layers that take turns */
.stage { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.layer { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; transform-origin: 0 0; }
.pic { position: absolute; inset: 0; overflow: hidden; }
.pic img, .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.scrim { position: absolute; inset: 0; pointer-events: none; opacity: var(--sc, 1); background:
  linear-gradient(to top, rgba(22, 20, 19, .66) 0%, rgba(22, 20, 19, .16) 45%, rgba(22, 20, 19, 0) 68%),
  linear-gradient(to bottom, rgba(16, 14, 13, var(--top, .4)) 0%, rgba(16, 14, 13, 0) 28%); }
/* the reel: the headline over moving work, often light (cards, a pink ground): a deeper scrim under it, and it fades
   away over the reel's cream opening and ending (hero.js) */
.hx.reel .scrim { transition: opacity .6s ease; background:
  linear-gradient(to top, rgba(22, 20, 19, .8) 0%, rgba(22, 20, 19, .42) 38%, rgba(22, 20, 19, 0) 70%),
  linear-gradient(to right, rgba(22, 20, 19, .38) 0%, rgba(22, 20, 19, 0) 55%),
  linear-gradient(to bottom, rgba(16, 14, 13, var(--top, .3)) 0%, rgba(16, 14, 13, 0) 24%); }

/* top bar: on screen on every page (the designer's request, 2026-10-05). header.js sets its ink from what is under it
   (the hero's own ink over the hero; charcoal on cream, cream on [data-ground="dark"] below it); once the hero has gone
   it takes the ground's colour and tightens */
.bar { pointer-events: none; position: fixed; left: 0; right: 0; top: 0; z-index: 9; padding: calc(env(safe-area-inset-top, 0px) + var(--pad)) var(--pad) var(--pad);
  display: flex; align-items: center; justify-content: space-between; color: var(--charcoal); background: transparent;
  transition: color .7s ease, background-color .45s ease, padding .5s cubic-bezier(.2, .8, .2, 1); }
.bar.ink-light { color: var(--cream); }
.bar.solid { background: var(--cream); padding-top: calc(env(safe-area-inset-top, 0px) + 14px); padding-bottom: 14px; }
.bar.solid.on-dark { background: var(--charcoal); }
.bar.solid.over-hx { padding-top: calc(env(safe-area-inset-top, 0px) + var(--pad)); padding-bottom: var(--pad); }
.bar.on-burgundy .link-cta { background: var(--cream); color: var(--burgundy); }
.bar > * { pointer-events: auto; }
.logo { display: block; color: inherit; line-height: 0; }
.logo svg { height: clamp(34px, 3vw, 46px); width: auto; display: block; fill: currentColor; transition: fill .7s ease; }
.actions { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 36px); font-size: 15px; font-weight: 500; letter-spacing: -.005em; }
.menu-btn { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; font-weight: 500; }
.mln { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 24px; height: 12px; justify-content: center; position: relative; }
.mln i { display: block; height: 1.5px; background: currentColor; transition: width .4s cubic-bezier(.7, 0, .2, 1), transform .4s cubic-bezier(.7, 0, .2, 1); }
.mln i:first-child { width: 24px; }
.mln i:last-child { width: 15px; }
.menu-btn:hover .mln i:first-child, .menu-btn:focus-visible .mln i:first-child { width: 15px; }
.menu-btn:hover .mln i:last-child, .menu-btn:focus-visible .mln i:last-child { width: 24px; }
.mln.x i { position: absolute; left: 0; top: 50%; width: 24px !important; margin-top: -.75px; }
.mln.x i:first-child { transform: rotate(45deg); }
.mln.x i:last-child { transform: rotate(-45deg); }
.menu-btn:hover .mln.x i:first-child { transform: rotate(135deg); }
.menu-btn:hover .mln.x i:last-child { transform: rotate(45deg); }

.link-cta { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; background: var(--burgundy); color: var(--cream); padding: 16.5px 24px 16.5px 26px; justify-content: center; /* 54 px tall like every button (2026-10-09) */ font-size: 16px; font-weight: 500; border-radius: 4px; transition: background-color .3s ease; }
.link-cta .ar { display: inline-block; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
/* the reference's long thin arrow, drawn (Basis Grotesque's own → is short and heavy): 1em wide, centred .27em above the baseline */
.link-cta .ar svg { display: inline-block; width: 1em; height: .375em; vertical-align: .08em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.7; }
/* hover, focus and a press: a deeper burgundy (the designer, 2026-10-09: cream was tried and taken back) */
.link-cta:hover, .link-cta:focus-visible, .link-cta:active { background: var(--burgundy-deep, #561F2C); }
.link-cta:hover .ar { transform: translateX(4px); }
.cta-top { display: none; }
.meta { position: absolute; right: var(--pad); bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); z-index: 4; display: flex; flex-direction: column; align-items: flex-end; }

/* headline */
.hero { pointer-events: none; position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); z-index: 3;
  font-weight: 900; font-size: clamp(42px, 10.6vw, 200px); line-height: .9; letter-spacing: 0; margin: 0; } /* the font's own spacing (the designer, 2026-10-06); the italic word keeps its own */
.js .hero:not(.ready) .wp { opacity: 0; } /* the plain words wait until they are split into letters */
.ln { display: flex; align-items: center; white-space: nowrap; }
/* the changing word sits on the baseline of “to” (Tiempos and Basis centre differently in a line); line-height 0 keeps
   the word's box from making the last line taller, so the lines above do not move */
#l3 { align-items: baseline; }
.wp, #word { pointer-events: auto; display: inline-block; }
.ch { display: inline-block; opacity: 0; transform-origin: 50% 85%; }
.ch.rest { opacity: 1; }
.ch.go { animation: inL .5s cubic-bezier(.2, .8, .2, 1) forwards; }
#word { opacity: 0; font-family: "Tiempos Headline", "Times New Roman", serif; font-style: italic; font-weight: 300; font-size: .935em; letter-spacing: -.034em; line-height: 0; margin-left: -.07em; padding-right: .1em; transform-origin: left center; }
/* .935em: Tiempos draws its lowercase 7% taller than Basis at the same size, so the word matches the headline's x-height;
   the full stop stands a little apart from the italic's last letter (with -.034em tracking it tucked under it) */
#word .stop { margin-left: .08em; }
#word.in { animation: inL .55s cubic-bezier(.2, .8, .2, 1) forwards; }
#word.out { animation: outL .32s cubic-bezier(.7, 0, .8, .3) forwards; }
#word.shown { opacity: 1; }
@keyframes inL { from { filter: blur(14px); opacity: 0; transform: translateX(.4em) scaleX(1.5); } to { filter: none; opacity: 1; transform: none; } }
@keyframes outL { from { opacity: 1; } to { filter: blur(14px); opacity: 0; transform: translateX(-.4em) scaleX(1.5); } }
.fuse { flex: 1; height: .09em; margin: 0 .14em 0 .24em; position: relative; top: .06em; }
.fuse i { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(0); transition: transform .65s cubic-bezier(.7, 0, .2, 1); }
.spark { width: .3em; height: .3em; flex: none; margin-right: clamp(110px, 12vw, 200px); }

/* the rolling flower of the intro, drawn in viewport coordinates */
#rollsvg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; z-index: 8; }

/* side pager: four lines, pause */
.pager { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .6s ease, color .7s ease; }
.pager.on { opacity: 1; pointer-events: auto; }
/* the reel: the headline steps aside once the reel's flower has opened: small, from its bottom-left corner (hero.js) */
.hx.reel .hero { transform-origin: 0 100%; transition: scale .9s cubic-bezier(.65, 0, .35, 1); }
.hx.reel.small .hero { scale: .3; }
/* the tall l's of “all of it.” (Tiempos italic) reach above the line: the last line sits a little lower */
.hx.reel #l3 { margin-top: .1em; }
/* no scrim over the reel's cream opening and ending */
.hx.reel.cream .scrim { opacity: 0; }
/* the sound switch, over the call to action: a speaker in one thin line, half transparent (the designer, 2026-10-14) */
.snd { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 -9px 8px; padding: 0;
  background: none; border: 0; color: inherit; cursor: pointer; opacity: .5; transition: opacity .3s ease; }
.snd:hover, .snd:focus-visible { opacity: .9; }
.snd svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.snd .wv { display: none; }
.snd.on .wv { display: inline; }
.snd.on .x { display: none; }
.snd { position: relative; }
.snd__hint { position: absolute; right: 100%; top: 50%; margin-right: 4px; padding: 6px 0; font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; translate: 10px -50%; clip-path: inset(0 0 0 100%); transition: opacity .5s ease, translate .7s cubic-bezier(.2, .8, .2, 1), clip-path .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.snd__ring { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid currentColor; border-radius: 50%; opacity: 0; pointer-events: none; }
.snd.hint { opacity: .95; }
.snd.hint .snd__hint { opacity: .9; translate: 0 -50%; clip-path: inset(0 0 0 0); }
.snd.hint .snd__ring { animation: snd-ring 2.4s cubic-bezier(.2, .7, .3, 1) .3s 2; }
@keyframes snd-ring { 0% { opacity: .55; scale: .7; } 100% { opacity: 0; scale: 1.9; } }
@media (prefers-reduced-motion: reduce) { .snd.hint .snd__ring { animation: none; } .snd__hint { transition: opacity .3s ease; translate: 0 -50%; clip-path: none; } }
@media (prefers-reduced-motion: reduce) { .hx.reel .hero { transition: none; } }
/* the reel: no lines at the side (the designer, 2026-10-14); the reel runs on its own, the pause button stays for the keyboard */
.hx.reel .pg { display: none; }
.pg { display: flex; align-items: center; gap: 12px; padding: 5px 0 5px 12px; font-size: 14px; font-weight: 500; }
.pg .lb { opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; white-space: nowrap; }
.pg:hover .lb, .pg:focus-visible .lb { opacity: 1; transform: none; }
.pg .tr { position: relative; width: 2px; height: 40px; flex: none; }
.pg .tr::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .45; }
.pg .tr b { position: absolute; inset: 0; background: currentColor; transform-origin: top; transform: scaleY(0); }
/* the pause button is out of sight (the designer, 2026-10-06) but still there for the keyboard: Tab brings it in under
   the lines, as a skip link does */
.pp { position: absolute; right: 0; top: 100%; margin-top: 10px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; clip-path: inset(50%); }
.pp:focus-visible { clip-path: none; }
.pp svg { width: 12px; height: 12px; fill: currentColor; }

/* the studio (2026-10-04, a whole screen since 2026-10-06): the words beside the burgundy uyáva mark the work turns into
   (drawn on the stage by scroll.js), the link to the About page under them; as Selected work comes up over the screen
   they drift up and away (scroll.js) */
.about { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; z-index: 4; width: min(60vw, 980px); pointer-events: none; visibility: hidden; color: var(--charcoal); }
.hx[data-band="charcoal"] .about, .hx[data-band="burgundy"] .about { color: var(--cream); }
/* on the burgundy ground the burgundy call to action turns cream */
.hx[data-band="burgundy"].on-ground .link-cta, .bar.on-burgundy .link-cta { background: var(--cream); color: var(--burgundy); }
.hx[data-band="burgundy"].on-ground .link-cta:hover, .bar.on-burgundy .link-cta:hover { background: var(--charcoal); color: var(--cream); }
.about__text { margin: 0; font-size: clamp(1.5rem, 2.75vw, 3.6rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; text-wrap: pretty; opacity: 0; }
/* Learn more about us: a text link like “View case” (the designer, 2026-10-06), mono caps on an underline with the
   arrow; scroll.js brings it in after the words */
.about__go { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(22px, 2.6vw, 36px); padding: 8px 0; border-bottom: 1px solid currentColor; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--burgundy); opacity: 0; pointer-events: none; transition: color .3s var(--ease-out); }
.about__go .i { transition: translate .35s var(--ease-out); }
.about__go:hover { color: var(--charcoal); }
.about__go:hover .i, .about__go:focus-visible .i { translate: 4px 0; }
.hx[data-band="charcoal"] .about__go, .hx[data-band="burgundy"] .about__go { color: var(--cream); }

/* menu */
.menu { position: fixed; inset: 0; z-index: 10; background: var(--cream); color: var(--charcoal); visibility: hidden;
  clip-path: path('M0 0Z'); -webkit-clip-path: path('M0 0Z');
  display: grid; grid-template-rows: auto 1fr auto; padding: var(--pad); padding-top: calc(env(safe-area-inset-top, 0px) + var(--pad)); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pad)); }
.menu.open { visibility: visible; }
.menu .mtop { display: flex; justify-content: space-between; align-items: center; }
.menu .logo svg { fill: var(--charcoal); }
.mbody { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.mlinks { list-style: none; margin: 0; padding: 0; }
.mlinks li { overflow: hidden; }
/* air between the links (the designer, 2026-10-06: they stood too close) */
.mlinks li + li { margin-top: clamp(12px, 1.8vw, 28px); }
.mlinks a { display: inline-flex; align-items: flex-start; gap: .12em; text-decoration: none; font-weight: 900; font-size: clamp(52px, 8.4vw, 150px); line-height: .95; letter-spacing: 0;
  transform: translateY(105%); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.menu.shown .mlinks a { transform: none; }
.mlinks li:nth-child(2) a { transition-delay: .05s; }
.mlinks li:nth-child(3) a { transition-delay: .1s; }
.mlinks li:nth-child(4) a { transition-delay: .15s; }
.mlinks li:nth-child(5) a { transition-delay: .2s; }
.mlinks .t { display: inline-block; }
.mlinks a:hover .t, .mlinks a:focus-visible .t { font-family: "Tiempos Headline", "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: .005em; }
.mlinks sup { font-size: .16em; font-weight: 500; letter-spacing: 0; margin-top: .5em; color: var(--stone); }
.mfoot { display: flex; flex-wrap: wrap; gap: 12px 36px; justify-content: space-between; align-items: flex-end; font-size: 15px; }
.mfoot .socials { display: flex; gap: 28px; }
.mfoot a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s; }
.mfoot a:hover { border-color: currentColor; }
.mfoot .muted { color: var(--stone); }

@media (max-width: 860px) {
  /* phones and portrait tablets (the designer, 2026-10-06): the bar a little lower, with a larger logo and Menu; the call
     to action leaves the bar for a full-size button under the headline, which is larger and sits above it */
  .bar, .menu, .bar.solid.over-hx { padding-top: calc(env(safe-area-inset-top, 0px) + 24px); }
  .logo svg { height: 40px; }
  .actions { gap: 12px; }
  .menu-btn { font-size: 17px; gap: 11px; }
  .mln { width: 26px; }
  .mln i:first-child { width: 26px; }
  .mln i:last-child { width: 16px; }
  /* the button stays clear of the bottom edge and the home gesture, where a thumb reaches it easily */
  .meta { left: var(--pad); right: auto; bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px) + 40px); align-items: flex-start; }
  /* 15.6vw: the longest line, “to your brand.”, is about 5.64em at the font's own spacing, so it fits down to 320 px */
  .hero { font-size: 15.6vw; bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px) + 136px); }
  /* phones, the reel (2026-10-14): the button on the right, narrower, the sound icon above it; the headline sits over
     the button's row during the intro, then, small, drops to the bottom left, level with the button */
  .hx.reel .meta { left: auto; right: var(--pad); bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  .hx.reel .meta .link-cta { padding: 13px 16px 13px 18px; gap: 10px; font-size: 15px; }
  .hx.reel .hero { bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px) + 112px); transition: scale .9s cubic-bezier(.65, 0, .35, 1), translate .9s cubic-bezier(.65, 0, .35, 1); }
  .hx.reel.small .hero { scale: .4; translate: 0 112px; }
  /* the intro's line runs nearly to the edge, so the flower has a real way to roll (2026-10-07) */
  .spark { margin-right: 8vw; }
  .pager { top: 42%; }
  /* phones (the designer, 2026-10-06/07): one column on the left edge — the mark large (.46 of the width, 260 px at
     most) standing on the words' edge, 48 px above the words, the link 40 px under them; scroll.js centres the column
     between the bar and the bottom and sets the words' top (the panel's “centred” puts it in the middle across) */
  .about { top: calc(36dvh + min(20.6vw, 116px) + 48px); translate: none; right: var(--pad); width: auto; }
  /* more air between the words and the link (2026-10-07) */
  .about__go { margin-top: 40px; }
  .hx.about-centre .about { text-align: center; }
  .about__text { font-size: min(6.2vw, 30px); line-height: 1.12; } /* capped: on portrait tablets the words would run into the work sheet */
  .pg .tr { height: 24px; }
  .mfoot { flex-direction: column; align-items: flex-start; }
}
/* portrait tablets: the same composition as phones, the studio's words a size up */
@media (min-width: 761px) and (max-width: 860px) {
  .about__text { font-size: 4.2vw; }
}
@media (prefers-reduced-motion: reduce) {
  .ch { opacity: 1; }
  .ch.go, #word.in, #word.out { animation: none !important; }
  #word.in { opacity: 1; }
  .mlinks a { transition: none; }
}