/* ==========================================================================
   HOME HERO (mh-): the homepage only, loaded after css/magik.css.
   The hero as it is live on production (commit a2cc524): ink ground, the
   portrait falling into it from the right, the eyebrow, one headline, two
   actions and the MAGIK lockup. The header, the phone menu and the film
   dialog it uses are the shared ones in css/magik.css; this file only adds
   their homepage entrance and the red logo's size over the hero.

   Sizes are the boards' own at 1440 and 390 and scale between them. Every
   entrance animation holds its final frame (fill-mode both), so each
   element's static style IS the composed hero: reduced motion switches the
   animations off and shows the finished page at once. The entrance never
   moves the layout.

   A later view of the homepage in the same tab session skips the opening
   titles: html.mh-return, set by the inline script in the head of
   index.html before the first paint.

   Cache: /css/hero.css?v=N on index.html; bump N when this file changes.
   ========================================================================== */

.mh-hero{
  --mh-ink:#0A0506;
  --mh-white:#FFFCFC;
  --mh-grey:#CCC4C5;
  --mh-red:#E31B23;
  /* one left edge and one right edge for header and hero: 96px at 1440,
     and past 1920 the content column stops growing and centres */
  --mh-g:clamp(56px, 6.667vw, 128px);
  --mh-pad:max(var(--mh-g), calc((100% - 1664px) / 2));
  --mh-display:'Archivo Display', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mh-arrive:cubic-bezier(.2,.8,.2,1);
  --mh-ease:cubic-bezier(.19,1,.22,1);
}
@media (max-width:899px){
  .mh-hero{ --mh-g:clamp(20px, 5.13vw, 44px); }
}

@keyframes mhDraw{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
@keyframes mhFade{ from{opacity:0;} to{opacity:1;} }
@keyframes mhUp{ from{opacity:0; transform:translateY(var(--mh-up, 14px));} to{opacity:1; transform:none;} }
@keyframes mhRise{ from{transform:translateY(118%);} to{transform:none;} }
@keyframes mhStamp{ 0%{transform:scale(0);} 62%{transform:scale(1.4);} 100%{transform:scale(1);} }
@keyframes mhPortrait{ from{opacity:0; transform:scale(1.06);} to{opacity:1; transform:none;} }
/* The opening titles. Each title owns a 4000ms slot: its motion in the first
   2400ms, still and readable to 3400ms, then out over 600ms (mhTitleOut, on
   the title itself; MOVE IT FORWARD fades its words and its ball separately,
   so the ball can leave last). Everything inside a title is timed from its
   slot start, --mh-t. */
@keyframes mhTitleOut{
  0%, 85%{opacity:1; animation-timing-function:cubic-bezier(.55,0,1,.45);}
  100%{opacity:0;}
}
@keyframes mhOn{ from, to{opacity:1;} }
@keyframes mhOff{ from, to{opacity:0;} }
@keyframes mhOut{ from{opacity:1;} to{opacity:0;} }
/* SEE IT: two lids draw out from the centre line, then part */
@keyframes mhLidDraw{ from{scale:0 1;} to{scale:1 1;} }
@keyframes mhLidUp{ from{translate:0 0;} to{translate:0 calc(-1 * var(--mh-open));} }
@keyframes mhLidDown{ from{translate:0 0;} to{translate:0 var(--mh-open);} }
@keyframes mhEyeOpen{
  from{clip-path:inset(var(--mh-mid) -.3em calc(100% - var(--mh-mid)) -.3em);}
  to{clip-path:inset(calc(var(--mh-mid) - var(--mh-open)) -.3em calc(100% - var(--mh-mid) - var(--mh-open)) -.3em);}
}
/* the pupil: grows in the gap between the words, inside the opening lids
   (600ms), is still for 40ms, then glides out to the end of the line and
   settles as the full stop (800ms) */
@keyframes mhPupil{
  0%{translate:var(--mh-pupil); scale:0; animation-timing-function:cubic-bezier(.2,.8,.2,1);}
  41.7%{translate:var(--mh-pupil); scale:1.5;}
  44.4%{translate:var(--mh-pupil); scale:1.5; animation-timing-function:cubic-bezier(.4,0,.2,1);}
  100%{translate:0 0; scale:1;}
}
/* the word comes into focus as the pupil moves off it */
@keyframes mhFocus{ from{opacity:.4;} to{opacity:1;} }
/* MAKE IT WORK: letters typed, then the cursor rides along WORK: the solid
   word is revealed behind it (mhBuild) and the outline is taken away at the
   same edge (mhConsume), so the fill edge is always the cursor's left edge */
@keyframes mhKey{ from, to{color:transparent;} }
@keyframes mhBuild{
  from{clip-path:inset(-.3em 100% -.3em -.3em);}
  to{clip-path:inset(-.3em -.07em -.3em -.3em);}
}
@keyframes mhConsume{
  from{clip-path:inset(-.3em -.3em -.3em -.05em);}
  to{clip-path:inset(-.3em -.3em -.3em calc(100% + .07em));}
}
@keyframes mhRide{ from{translate:calc(-1 * var(--mh-work)) 0;} to{translate:0 0;} }
/* MOVE IT FORWARD: the ball's travel, bounce and roll, and the words it
   sweeps into place and pushes forward. x is one ease-out over the whole run,
   from --mh-kick (off screen, left of the line) to rest at --mh-stop, so the
   ball is fastest at the kick and only ever slows. The wake (the soft edge
   the words appear behind) runs on the same curve, from just behind the ball
   to .4em past it, so the last letter is whole when the ball stops. */
@keyframes mhKick{ from{translate:calc(var(--mh-kick) - var(--mh-stop)) 0;} to{translate:0 0;} }
@keyframes mhWake{
  from{-webkit-mask-position:calc(var(--mh-kick) - 8em) 0; mask-position:calc(var(--mh-kick) - 8em) 0;}
  to{-webkit-mask-position:calc(var(--mh-stop) - 7.6em) 0; mask-position:calc(var(--mh-stop) - 7.6em) 0;}
}
/* y: in the air, it falls to the line (0-600ms), makes one small bounce
   (600-1200ms: 300 up, 300 down) and then rolls */
@keyframes mhBounce{
  0%{translate:0 -.7em; animation-timing-function:cubic-bezier(.55,0,1,.6);}
  26%{translate:0 0; animation-timing-function:cubic-bezier(0,.4,.45,1);}
  39%{translate:0 -.3em; animation-timing-function:cubic-bezier(.55,0,1,.6);}
  52%, 100%{translate:0 0;}
}
@keyframes mhRoll{ from{rotate:-360deg;} to{rotate:0deg;} }
@keyframes mhPush{
  0%{translate:-.32em 0; animation-timing-function:cubic-bezier(.25,.6,.35,1);}
  72%{translate:.03em 0; animation-timing-function:cubic-bezier(.45,0,.45,1);}
  100%{translate:0 0;}
}

/* ---------- the shared header over the hero, homepage only ----------
   The hairline draws left to right, then the logo and nav fade in. Other
   pages show the header at once. Over the hero the logo is the red
   production file (logo-red.png) at 35px, as on production; the phone size
   (24px) is the shared one. */
.m-header--over .m-header-rule{ animation:mhDraw 1100ms cubic-bezier(.65,0,.35,1) 100ms both; }
.m-header--over .m-header-bar{ animation:mhFade 700ms ease 300ms both; }
@media (min-width:900px){
  .m-header--over .m-logo-dark{ height:35px; }
}

/* ---------- the hero ----------
   Desktop is one grid: header space, a free gap, the main block (eyebrow,
   headline, actions) as one group, a second free gap, then the bottom row.
   The gaps flex 3:2, so the group sits low with generous space above it. */
.mh-hero{
  /* production's base size and line height, so everything the hero inherits
     resolves as it does there (the body here is 17px / 1.6) */
  position:relative; overflow:hidden; font-size:16px; line-height:normal;
  display:grid; align-items:start;
  grid-template-columns:var(--mh-pad) minmax(0, 1fr) var(--mh-pad);
  grid-template-rows:80px minmax(48px, 3fr) auto minmax(40px, 2fr) 44px 20px;
  min-height:calc(100vh - 16px);
  min-height:min(calc(100svh - 16px), 1080px);
  padding:0;
  background:var(--mh-ink); color:var(--mh-white);
  font-family:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  scroll-margin-top:0;
  --mh-hs:clamp(75px, 8.334vw, 120px);
  --mh-skip:0ms;
}
.mh-hero p{margin:0;}

/* image area: the portrait */
.mh-image{position:absolute; inset:0; z-index:0; pointer-events:none;}
/* Height is the hero's, up to 64% of the width; width follows the photograph's
   own ratio, and the right 6.9% runs off the edge, as on the board (1240 x 884
   at x 286 in a 1440 x 884 hero). The cap is what keeps the face on screen and
   the earring clear of the headline on narrower or taller windows. On very
   wide, short windows it never narrows below 60% of the hero. */
.mh-portrait{
  position:absolute; top:0; right:0; height:min(100%, 64vw);
  aspect-ratio:1274 / 908; min-width:60%;
  transform:translateX(6.94%);
}
/* Where the cap leaves ink below the portrait, its bottom edge fades into it.
   The band is exactly as tall as that gap (up to 120px), so when the portrait
   fills the hero, as at 1440 x 900, it has no height at all. */
.mh-portrait-end{
  position:absolute; left:0; right:0;
  --mh-gap:clamp(0px, calc(100% - min(100%, 64vw)), 120px);
  top:calc(min(100%, 64vw) - var(--mh-gap)); height:var(--mh-gap);
  background:linear-gradient(180deg, rgba(10,5,6,0) 0%, #0A0506 100%);
}
.mh-portrait-in{
  position:relative; height:100%; transform-origin:70% 40%;
  animation:mhPortrait 2600ms cubic-bezier(.2,.7,.2,1) 200ms both;
}
.mh-portrait picture{display:block; height:100%;}
.mh-portrait-img{display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 30%;}
.mh-fall{position:absolute; left:0; top:0; display:block;}
/* the fall into ink at the portrait's left edge: 440 of its 1240px */
.mh-fall-left{width:35.48%; height:100%; background:linear-gradient(90deg, #0A0506 0%, rgba(10,5,6,.82) 24%, rgba(10,5,6,0) 100%);}
.mh-fall-bottom{display:none;}

/* main block: the eyebrow, the headline and the actions, one group */
.mh-main{grid-row:3; grid-column:2; position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; min-width:0;}

/* the eyebrow sits directly above the headline, on its left edge */
.mh-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.18em; line-height:16px;
  text-transform:uppercase; color:var(--mh-grey);
  animation:mhFade 700ms ease 500ms both;
}
.mh-eyebrow span{white-space:nowrap;}

/* headline: YOUR IDEA, / MADE REAL. Each word rises out of its own mask; the
   masks carry 0.16em of extra room below so the comma is never clipped. */
.mh-head{position:relative; margin-top:28px; width:100%; max-width:760px;}
.mh-h1, .mh-titles{
  font-family:var(--mh-display); font-size:var(--mh-hs); font-weight:900; font-stretch:90%;
  line-height:.84; letter-spacing:-.03em; word-spacing:-.02em;
  text-transform:uppercase; color:var(--mh-white);
}
.mh-h1{margin:0; font-size:calc(var(--mh-hs) - 2px); letter-spacing:calc(-.03em + 1.5px);} /* Daniela: 2px smaller and 1.5px more tracking, so the headline reads at once */
.mh-l{display:block; white-space:nowrap;}
.mh-w{display:inline-block; vertical-align:top; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em;}
.mh-w > span{display:block; animation:mhRise 800ms var(--mh-arrive) calc(var(--mh-rd, 12400ms) - var(--mh-skip)) both;}
.mh-w3, .mh-w4{--mh-rd:12520ms;}
/* optical indent: the M's side bearing would otherwise sit in from the Y */
.mh-w3{margin-left:-.06em;}
.mh-sq{display:inline-block; width:.17em; height:.17em; margin-left:.07em; background:var(--mh-red); vertical-align:baseline;}
/* the real full stop is inside the square, transparent, so it is still read */
.mh-h1 .mh-sq{overflow:hidden; color:transparent; line-height:0; animation:mhStamp 420ms cubic-bezier(.3,1.5,.5,1) calc(13050ms - var(--mh-skip)) both;}

/* the title sequence: SEE IT. / MAKE IT WORK. / MOVE IT FORWARD., once,
   4000ms each, back to back from 400ms; the headline rises as the last one
   leaves at 12400ms. The red square leads each one: the pupil, the cursor, the
   ball. What moves: opacity, the individual transforms (translate, scale,
   rotate), clip-path, and for the kick the words' mask-position. Every title
   is absolutely placed over the headline, so nothing around it shifts.
   Distances are in em of the title type (Archivo Display 900, 90% width,
   -.03em tracking), so they hold at every size; --mh-base is the baseline of
   the first line, measured from the top of the title. */
.mh-titles{position:absolute; left:0; top:0; width:100%; pointer-events:none;}
.mh-hero .mh-titles p{
  position:absolute; left:0; top:0; white-space:nowrap; opacity:0;
  animation:mhTitleOut 4000ms linear var(--mh-t) forwards;
  --mh-base:.75em;
}
.mh-hero .mh-titles .mh-t1{--mh-t:400ms;}
.mh-hero .mh-titles .mh-t2{--mh-t:4400ms;}
/* MOVE IT FORWARD stays on until its ball has gone (4150ms; step-end holds
   it at full opacity, then off); its words and its ball fade on their own
   (below) */
.mh-hero .mh-titles .mh-t3{--mh-t:8400ms; animation:mhOut 4150ms step-end var(--mh-t) forwards;}

/* SEE IT: an eye opening. 0-800 a thin line draws out from the centre;
   600-2000 it parts into two lids, the type revealed between them, dim;
   960-1560 the square grows in the gap between the words as the pupil,
   always inside the opening; 1600-2400 it glides out and settles as the full
   stop while the word comes into focus (1600-2400) and the lids fade
   (1800-2400). */
.mh-t1{
  --mh-mid:calc(var(--mh-base) - .35em);   /* halfway up the capitals */
  --mh-open:.44em;                           /* centre to lid: cap height / 2 + .09em */
  --mh-pupil:-1.12em -.265em;                /* from the stop to the gap between SEE and IT, halfway up */
}
.mh-eye{
  display:inline-block;
  animation:mhEyeOpen 1400ms cubic-bezier(.45,0,.2,1) calc(var(--mh-t) + 600ms) both,
            mhFocus 800ms cubic-bezier(.45,0,.2,1) calc(var(--mh-t) + 1600ms) both;
}
.mh-t1 .mh-sq{position:relative; z-index:1; animation:mhPupil 1440ms linear calc(var(--mh-t) + 960ms) both;}
.mh-lid{
  position:absolute; left:-.08em; right:-.08em; top:var(--mh-mid); height:2px;
  background:var(--mh-white);
  animation:mhLidDraw 800ms cubic-bezier(.2,.8,.2,1) var(--mh-t) both,
            mhLidUp 1400ms cubic-bezier(.45,0,.2,1) calc(var(--mh-t) + 600ms) both,
            mhFade 600ms ease reverse calc(var(--mh-t) + 1800ms) both;
}
.mh-lid-top{margin-top:-2px;}
.mh-lid-bottom{animation-name:mhLidDraw, mhLidDown, mhFade;}

/* MAKE IT WORK: building. WORK is there first as a wireframe (0-700). The
   cursor is on at the start of line 1 from 0, and MAKE IT types in at 140ms
   a key (140-980), the cursor always after the last key. It blinks off after
   the T (1120-1600), comes back on at the start of WORK (1600) and rides
   along it to the full stop (1600-2400); WORK turns solid behind it as if it
   compiled, and the outline goes at the same edge. --mh-work is the distance
   from WORK's left edge to the full stop's left edge (WORK's width plus the
   .07em gap). */
.mh-t2{--mh-work:3.078em;}
.mh-type > span{animation:mhKey 1ms linear calc(var(--mh-t) + var(--mh-k)) backwards;}
.mh-type > span:nth-child(1){--mh-k:140ms;}
.mh-type > span:nth-child(2){--mh-k:280ms;}
.mh-type > span:nth-child(3){--mh-k:420ms;}
.mh-type > span:nth-child(4){--mh-k:560ms;}
.mh-type > span:nth-child(5){--mh-k:700ms;}
.mh-type > span:nth-child(6){--mh-k:840ms;}
.mh-type > span:nth-child(7){--mh-k:980ms;}
/* the cursor on line 1: one square per key, each shown only while its key is
   the last one typed (the ::before is the cursor before the first key); zero
   width in the line, so it never moves the letters */
.mh-type > span::after, .mh-type > span:first-child::before{
  content:""; display:inline-block; width:.17em; height:.17em; vertical-align:baseline;
  background:var(--mh-red); opacity:0;
}
.mh-type > span::after{margin:0 -.24em 0 .07em; animation:mhOn 140ms linear calc(var(--mh-t) + var(--mh-k));}
.mh-type > span:first-child::before{margin-right:-.17em; animation:mhOn 140ms linear var(--mh-t);}
/* the cursor on line 2 is the full stop itself */
.mh-t2 > .mh-sq{
  animation:mhOff 1ms linear calc(var(--mh-t) + 1600ms) backwards,
            mhRide 800ms cubic-bezier(.2,.1,.5,1) calc(var(--mh-t) + 1600ms) both;
}
.mh-work{position:relative; display:inline-block;}
.mh-wire{
  display:inline-block;
  color:transparent; -webkit-text-stroke:max(1.5px, .014em) rgba(255,252,252,.78);
  animation:mhFade 700ms cubic-bezier(.2,.8,.2,1) var(--mh-t) both,
            mhConsume 800ms cubic-bezier(.2,.1,.5,1) calc(var(--mh-t) + 1600ms) both;
}
.mh-built{
  position:absolute; left:0; top:0; color:var(--mh-white);
  animation:mhBuild 800ms cubic-bezier(.2,.1,.5,1) calc(var(--mh-t) + 1600ms) both;
}

/* MOVE IT FORWARD: a kick. The square is the ball: kicked in from off the
   left, it falls to the line (600), makes one small bounce (600-1200) and
   rolls, slowing, to a stop as the full stop (2300); its x and its spin run
   on one ease-out over the whole 2300ms. The words appear in its wake and
   are pushed forward by it, then settle (FORWARD 600-2300, MOVE IT 120ms
   behind). They leave at 3400-4000 and the ball 150ms after them
   (3550-4150). --mh-stop is where the ball comes to rest: the full stop's
   left edge, measured from the start of the line; --mh-kick is where it
   starts, far enough left to be off screen at every width. */
.mh-t3{--mh-stop:4.93em; --mh-kick:-1.5em;}
.mh-wake{
  display:inline-block;
  /* Daniela, 27 September: a genuine bug, not a design change. The soft edge
     was wide enough (.4em) that a bold letter caught mid-reveal read as a
     stray white glow, most visible in a still frame. Narrower now, so the
     reveal stays a clean edge at every moment, never a blur. */
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - .14em), transparent);
          mask-image:linear-gradient(90deg, #000 calc(100% - .14em), transparent);
  -webkit-mask-size:8em 100%; mask-size:8em 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:calc(var(--mh-stop) - 7.6em) 0; mask-position:calc(var(--mh-stop) - 7.6em) 0;
  animation:mhWake 2300ms cubic-bezier(.3,.6,.5,1) var(--mh-t) both,
            mhPush 1700ms linear calc(var(--mh-t) + 600ms) both,
            mhOut 600ms cubic-bezier(.55,0,1,.45) calc(var(--mh-t) + 3400ms) forwards;
}
.mh-wake:first-child{
  animation-duration:2300ms, 1580ms, 600ms;
  animation-delay:var(--mh-t), calc(var(--mh-t) + 720ms), calc(var(--mh-t) + 3400ms);
}
.mh-ball{
  display:inline-block;
  animation:mhKick 2300ms cubic-bezier(.3,.6,.5,1) var(--mh-t) both,
            mhOut 600ms cubic-bezier(.55,0,1,.45) calc(var(--mh-t) + 3550ms) forwards;
}
.mh-ball .mh-sq{
  animation:mhBounce 2300ms linear var(--mh-t) both,
            mhRoll 2300ms cubic-bezier(.3,.6,.5,1) var(--mh-t) both;
}

/* A later view of the homepage in the same tab session (html.mh-return, set
   by the inline script in the page head before the first paint): no titles,
   and the headline and the rest arrive at once, 12200ms earlier (headline
   200ms, stamp 850ms, actions 1000ms, bottom row 1200ms, all done by
   1800ms). */
html.mh-return .mh-titles{display:none;}
html.mh-return .mh-hero{--mh-skip:12200ms;}
html.mh-return .mh-eyebrow{animation-delay:100ms;}
html.mh-return .mh-portrait-in{animation-duration:1600ms;}

/* the actions, directly under the headline */
.mh-actions{
  margin-top:40px; display:flex; align-items:center; flex-wrap:wrap; gap:12px 32px;
  animation:mhUp 700ms var(--mh-arrive) calc(13200ms - var(--mh-skip)) both;
}
.mh-start{
  display:inline-flex; align-items:center; gap:40px; height:56px; padding:0 22px 0 24px;
  background:var(--mh-red); color:var(--mh-white);
  font-size:15px; font-weight:600; white-space:nowrap;
  transition:background .2s ease;
}
.mh-start:hover{background:#C8141B;}
.mh-start svg{flex:none; transition:transform .25s var(--mh-ease);}
.mh-start:hover svg{transform:translate(2px,-2px);}
.mh-see{
  display:inline-flex; align-items:center; gap:14px; height:56px; padding:0;
  background:transparent; border:0; color:var(--mh-white);
  font-family:inherit; font-size:14px; font-weight:500; white-space:nowrap; cursor:pointer;
}
.mh-see-ring{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border:1px solid rgba(255,252,252,.7); border-radius:50%;
  transition:background .2s ease, border-color .2s ease;
}
.mh-see:hover .mh-see-ring{background:rgba(255,252,252,.1); border-color:var(--mh-white);}
/* the film button needs the script (js/magik.js wires [data-film-open]), so
   it stays out of sight until then and is never a button that does nothing */
.mh-see:not(.is-ready){visibility:hidden;}

/* bottom row: the scroll cue, and the MAGIK lockup at the right */
.mh-bottom{
  grid-row:5; grid-column:2; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:24px; height:44px;
  animation:mhFade 600ms ease calc(13400ms - var(--mh-skip)) both;
}
.mh-scroll{
  display:inline-flex; align-items:center; gap:16px; height:44px;
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--mh-grey);
  transition:color .2s ease;
}
.mh-scroll:hover{color:var(--mh-white); text-decoration:underline; text-underline-offset:.35em; text-decoration-thickness:1px;}
.mh-scroll span{display:block; flex:none; width:48px; height:1px; background:var(--mh-red);}
.mh-hero .mh-sign{display:flex; align-items:baseline; gap:12px; line-height:1; white-space:nowrap;}
.mh-sign b{
  font-family:var(--mh-display); font-size:17px; font-weight:900; font-stretch:100%;
  letter-spacing:0; text-transform:uppercase; color:var(--mh-white);
}
/* the last letter's tracking hangs past the edge, so the S lands on it */
.mh-sign span{
  margin-right:-.22em;
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--mh-grey);
}

/* ---------- the hero on phones and small tablets (H02) ----------
   The portrait owns the top; the group stacks on one left edge below it, with
   the free height shared above and below it. The headline breaks into four
   lines. The portrait scales with the width up to 520px tall (and never past
   about two thirds of a short, landscape window). */
@media (max-width:899px){
  .mh-hero{
    --mh-ph:min(111.8vw, 520px, 64svh);
    --mh-hs:clamp(52px, 17.4vw, 96px);
    --mh-up:12px;
    grid-template-rows:minmax(0, 1fr) auto minmax(6px, 1fr) 44px 2px;
    min-height:calc(100vh - 8px);
    min-height:calc(100svh - 8px);
    padding-top:max(298px, calc(var(--mh-ph) * .6835));
  }
  .mh-portrait{height:var(--mh-ph); min-width:0; transform:translateX(8.5%);}
  .mh-portrait-end{display:none;}
  .mh-portrait-in{transform-origin:78% 30%;}
  /* fall into ink to the left (ink until the window edge at 390, then the
     board's 190px fall), and at the bottom, behind the type */
  .mh-fall-left{width:58.8%; background:linear-gradient(90deg, #0A0506 0%, #0A0506 47.2%, rgba(10,5,6,.7) 65.2%, rgba(10,5,6,0) 100%);}
  .mh-fall-bottom{display:block; top:49.1%; width:100%; height:50.9%; background:linear-gradient(180deg, rgba(10,5,6,0) 0%, rgba(10,5,6,.78) 40%, #0A0506 78%);}

  .mh-main{grid-row:2;}
  .mh-eyebrow{font-size:10px; letter-spacing:.16em; line-height:15px;}
  .mh-head{margin-top:14px; max-width:none;}
  .mh-h1, .mh-titles{line-height:.92;}
  .mh-titles{font-size:calc(var(--mh-hs) * .88);}
  .mh-hero .mh-titles p{--mh-base:.77em;}
  .mh-t3{--mh-kick:-.9em;}   /* the phone gutter is only about .35em */
  .mh-l{display:block;}
  .mh-w{display:block;}
  .mh-w2, .mh-w3, .mh-w4{margin-left:-.06em;}
  .mh-w2{--mh-rd:12480ms;}
  .mh-w3{--mh-rd:12560ms;}
  .mh-w4{--mh-rd:12640ms;}
  .mh-h1 .mh-sq{animation-delay:calc(13150ms - var(--mh-skip));}
  .mh-actions{margin-top:24px; gap:12px 16px;}
  .mh-start{gap:20px; height:52px; padding:0 16px 0 18px; font-size:14px;}
  .mh-start svg{width:10px; height:10px;}
  .mh-see{gap:10px; height:52px; font-size:13px;}

  .mh-bottom{grid-row:4;}
  .mh-scroll{gap:14px;}
  .mh-scroll span{width:32px;}
  .mh-hero .mh-sign{display:none;}
}

/* Reduced motion: no entrance, no cross-fades. Every element's static style
   is its final frame, so the hero and the header appear composed, with no
   titles. The typing cursor is drawn with pseudo-elements, which * does not
   match, so they are named too. */
@media (prefers-reduced-motion: reduce){
  .m-header, .m-header *, .mh-hero, .mh-hero *,
  .mh-titles *::before, .mh-titles *::after{
    animation:none !important; transition:none !important;
  }
}