/* ============================================================
   HERO: ONE SENTENCE
     Hey, I'm Davyd [portrait],
     a [role]
     building systems
     teams ship with.

   The portrait is set into the sentence as a glyph and the role rolls through
   three labels. Both open an inspector (css/inspect.css, js/hero.js).

   The hero fills the first screen: the playful part of the site is one closed
   room, and "See the work" is the way out. Explored in inspect-lab.html.
   ============================================================ */

/* ---------- the first screen ----------
   The header sits outside <main>, so the hero takes the viewport minus the
   header's height. js/hero.js keeps --header-h exact; 66px is what the header
   measures at most widths, so the first paint is already close.

   Desktop: headline and buttons stay together, a little above centre (more
   padding below than above). Phones: buttons pinned to the bottom of the
   screen and the headline centred in the room above them. The inspector is
   off there (css/inspect.css).

   svh, not vh: on phones vh is the height with the toolbars hidden, which
   pushes the pinned buttons under the toolbar on first load. */
:root{--header-h:66px;}
.hero{
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  padding-block:clamp(24px,4svh,56px) clamp(40px,9svh,112px);
  max-width:none;
}
/* phones: see the end of the file. Kept last so the base .cta margin below
   cannot override the pinned buttons. */

/* ---------- the sentence ----------
   Size: three limits, and the smallest wins.
     fit   - the widest line fills the column. "a product strategist" measures
             8.03em; 8.3 leaves ~3% for rendering differences between browsers.
             This is what sizes phones.
     curve - the size by width: 42.5px at 393, 96px at 1440, so a desktop line
             takes about two-thirds of the column.
     tall  - short screens. At 11% of the viewport height a 1440x790 laptop
             window gets ~87px instead of 96.
   Phones in landscape fall to the 2rem floor rather than below it.

   Leading 1.2: Merriweather's glyphs span 1.25em top to bottom, so much less
   crowds one line's descenders into the next line's ascenders. */
.hero h1{
  --fs-fit:calc((100vw - 2 * var(--gutter)) / 8.3);
  --fs-curve:calc(22.4px + 5.11vw);
  --fs-tall:11vh;
  --lh:1.2;
  font-family:var(--display);font-weight:500;
  font-size:clamp(2rem, min(var(--fs-fit), var(--fs-curve), var(--fs-tall)), 6rem);
  line-height:var(--lh);letter-spacing:-0.028em;color:var(--ink);
  /* Merriweather has an optical-size axis the browser matches to the pixel
     size: at 42px it draws a wider text cut ("product designer" 7.52em) than
     at 96px (6.96em). That breaks every em measurement here the moment the
     size changes, so the display cut is pinned at every size. */
  font-variation-settings:"opsz" 96;
  margin:0;max-width:17em;
  /* lets the role's tint sit at z-index -1: behind the letters, not the page */
  isolation:isolate;
}
@supports (height:1svh){ .hero h1{--fs-tall:11svh;} }

/* ---------- the portrait, as a glyph ----------
   1em tall, from 0.9em above the baseline to 0.1em below: its centre (0.4em)
   sits on the middle of the capitals, so it reads level with the words, and
   it stays inside the line box, so line 1 is no taller than the rest.
   img/avatar.png is cut out (from the retouched PSD): the same square crop
   the original photo was, so object-position 50% 36% frames it the same way
   and the inspector's drag-to-recrop still has room to move.
   The margin is asymmetric: a symmetric one leaves a gap before the comma
   that reads as a typo. */
.hero .face{
  display:inline-block;
  width:1.32em;height:1em;
  vertical-align:-0.1em;margin:0 0.03em 0 0.14em;
  object-fit:cover;object-position:50% 36%;
  border-radius:0.1em;
  background:var(--portrait-ground);   /* css/color.css; blue on hover */
  transition:background-color var(--hover-t) ease;
}
@media (hover:hover){ .hero .face:hover{background:var(--accent);} }

/* ---------- the role ----------
   Labels stack in one grid cell. The slot's width is set in em by js/hero.js
   to the showing label and transitions with the roll. The role ends its own
   line, so a width change never moves another word.

   The box is padded past the descenders so its clip clears them, with the
   margins pulled back so the line does not get taller; the padded box then
   overlaps its neighbours, so it sits under the sentence (z-index -1). */
.hero .slot{
  display:inline-grid;vertical-align:bottom;text-align:left;
  position:relative;z-index:-1;
  padding:0.12em 0.14em 0.2em;margin:-0.12em -0.04em -0.2em;
  overflow:hidden;
  /* the tint, and the clip, hug the glyphs: 0.08em past the ascenders and
     the descenders. From the line-height and Merriweather's metrics (ascent
     .979, descent .271, ascenders .82, descenders .25 of the em):
       baseline, from the slot top = pad-top + (lh - 1.25) / 2 + .979
       top    = baseline - .90       -> lh/2 - .426
       bottom = box - baseline - .33 -> lh/2 - .484
     Change the face and these constants change with it. */
  --tint-top:calc((var(--lh) / 2 - 0.426) * 1em);
  --tint-bottom:calc((var(--lh) / 2 - 0.484) * 1em);
  clip-path:inset(var(--tint-top) 0 var(--tint-bottom) 0 round 0.1em);
  transition:width .62s cubic-bezier(.65,0,.35,1);
}
.hero .slot::before{
  content:"";position:absolute;left:0;right:0;z-index:-1;
  top:var(--tint-top);bottom:var(--tint-bottom);
  background:var(--role-ground);border-radius:0.1em;   /* css/color.css, css/theme.css */
}
.hero .slot.no-anim{transition:none;}
.hero .slot > span{
  grid-area:1 / 1;justify-self:start;white-space:nowrap;
  transform:translateY(-135%);
  transition:transform .62s cubic-bezier(.65,0,.35,1);
}
.hero .slot > span.is-on{transform:translateY(0);}
.hero .slot > span.is-out{transform:translateY(135%);}
/* stepping backwards rolls the other way */
.hero .slot > span.is-out-up{transform:translateY(-135%);}
.hero .slot > span.at-below{transform:translateY(135%);}
.hero .slot > span.no-anim{transition:none;}

@media (prefers-reduced-motion:reduce){
  .hero .slot{transition:none;}
  .hero .slot > span{transition:none;transform:none;}
  .hero .slot > span:not(.is-on){display:none;}
}

/* ---------- actions ---------- */
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(28px,3.4vw,44px) 0 0;}
.hero .cta a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 clamp(20px,2.2vw,30px);
  border-radius:14px;text-decoration:none;
  font-family:var(--body);font-weight:500;
  font-size:clamp(0.9375rem,0.9rem + 0.2vw,1.0625rem);  /* 15 -> 17 */
  letter-spacing:-0.005em;
  transition:background-color var(--hover-t) ease,color var(--hover-t) ease,border-color var(--hover-t) ease;
}
.hero .cta .go{background:var(--ink);color:var(--paper);border:1px solid var(--ink);}
/* filled button hovers to the text-strength blue: white on it is 5.25:1 */
@media (hover:hover){.hero .cta .go:hover{background:var(--accent-text);border-color:var(--accent-text);}}
.hero .cta .alt{background:var(--paper);color:var(--ink);border:1px solid var(--rule);}
@media (hover:hover){.hero .cta .alt:hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-text);}}   /* 2px hover stroke (css/shape.css for smooth corners) */
/* on a phone the two actions are the widest thing in the hero; full-width
   buttons read as a stack of choices rather than two stranded pills */
@media (max-width:479px){
  .hero .cta{flex-direction:column;align-items:stretch;}
}

/* ---------- phones: headline centred, buttons pinned to the bottom ---------- */
@media (max-width:767px){
  .hero{
    justify-content:flex-start;
    padding-block:clamp(20px,4svh,40px) calc(20px + env(safe-area-inset-bottom));
  }
  /* the headline centres in the room above the buttons (auto margins on both
     sides), and the buttons sit at the bottom; the padding is the least gap
     they keep from the headline on a short screen */
  .hero h1{margin-block:auto;}
  .hero .cta{margin-top:0;padding-top:28px;}
}