/*! Made with care and love by Mina Vian */
/* The first screen: Memoir's clock and MEMOIR, one line on what it does, and the downloads, all in view at once.
   The clock and the word play their entrance as the page opens, without holding anything up. Scrolled away, the two
   fly up into the top left and stay there as the header; scrolled back, they fly home (site.js). */
:root {
  /* the wordmark as Memoir's own on Dark: platinum and a fine grain, with no glow */
  --wm-fill: linear-gradient(76deg, #a4a4ac, #dedee3 30%, #fff 55%, #e9e9ee 78%, #fff);
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px var(--gutter) 120px;
  text-align: center;
}
.hero-in { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 920px; }

/* ---------- the clock and the word ---------- */
/* the slot keeps the mark's room in the page while the mark itself is up in the header */
.mark-slot {
  --clock: clamp(76px, 13svh, 128px);
  --word: clamp(46px, min(13vw, 10svh), 96px);
  display: flex;
  justify-content: center;
  height: calc(var(--clock) + var(--clock) * 0.2 + var(--word));
}
.mark {
  position: relative;
  z-index: 61;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--clock) * 0.2);
  transform-origin: 0 0;
}
.clock { position: relative; width: var(--clock); aspect-ratio: 1; transform-origin: 0 0; }
.clock .logo { width: 100%; }

.docked .mark {
  position: fixed;
  top: 19px;
  left: var(--gutter);
  --clock: 36px;
  --word: 20px;
  flex-direction: row;
  gap: 11px;
}
.mark-home {
  position: absolute;
  inset: -8px -10px;
  z-index: 4;
  border-radius: 999px;
}
.mark-home:focus-visible { outline: none; box-shadow: var(--ring); }
html:not(.docked) .mark-home { display: none; }

/* MEMOIR, a letter to a box: site.js sets each box to its letter's width at the heaviest weight, so as
   the weight changes a letter thickens and thins in its own place and the word never shifts. Each
   letter is a slice of the one wordmark: --wm-w is the whole word's width and --wm-x the letter's
   offset in it, so the platinum and the grain run on across the letters as one. The grain is sized in
   em, so it keeps its place on the letters as the word flies and shrinks. */
.word {
  display: flex;
  margin: 0;
  font-family: "Memoir Unbounded", sans-serif;
  font-size: var(--word);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: 0 0;
}
.word .l {
  position: relative;
  display: block;
  text-align: center;
  color: transparent;
}
.word .l::after {
  content: attr(data-t);
  content: attr(data-t) / "";
  position: absolute;
  inset: 0;
  background:
    url("../img/grain.png") var(--wm-x, 0px) 0 / 0.65em 0.65em,
    linear-gradient(rgba(255, 255, 255, 0.1), transparent 45%, rgba(0, 0, 0, 0.1) 80%, rgba(255, 255, 255, 0.04)),
    var(--wm-fill) var(--wm-x, 0px) 0 / var(--wm-w, 100%) 100% no-repeat;
  background-blend-mode: soft-light, normal, normal;
  -webkit-background-clip: text;
  background-clip: text;
}
/* nothing of the word shows until its font is in (site.js) */
html:not(.ready) .word { visibility: hidden; }

/* ---------- what it does ---------- */
.hero-h {
  margin: clamp(26px, 4.4svh, 44px) 0 0;
  max-width: 17em;
  font-size: clamp(27px, 3.3vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-h .soft { color: var(--ink-4); }
.hero-sub {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--ink-2);
  text-wrap: balance;
}

/* ---------- the nudge to scroll ---------- */
.nudge {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 14px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
  transform: translateX(-50%);
  transition: color 0.2s var(--ease), opacity 0.4s var(--ease);
}
.nudge:hover { color: var(--ink); }
.nudge:focus-visible { outline: none; box-shadow: var(--ring); }
.nudge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scrolled .nudge { opacity: 0; pointer-events: none; }

@media (max-height: 640px) and (min-width: 721px) {
  .mark-slot { --clock: 64px; --word: 44px; }
  .hero-h { margin-top: 20px; }
}
@media (max-width: 720px) {
  .hero { padding-top: 88px; padding-bottom: 110px; }
}