/* hero-copy: the living name, the lead, the CA pill, the ink buttons and the topbar name */

.hero-copy.hc-root {
  position: relative;
  z-index: 0;                       /* drips sit behind the words, above the water */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* ---------- the name ---------- */
.hc-name {
  position: relative;
  margin: 0;
  font-weight: 560;
  white-space: nowrap;
  font-kerning: normal;
  -webkit-user-select: none;
  user-select: none;
}
.hero-copy__name.hc-name {
  /* sized by the shorter side, so the countdown below it is still on the first screen;
     --hc-fit (name.js, at most 1) shrinks it when the word and its brain would not fit the column,
     e.g. while the wider fallback serif shows before Fraunces arrives */
  font-size: calc(clamp(118px, min(19vw, 27vh), 280px) * var(--hc-fit, 1));
  line-height: .9;
  letter-spacing: -0.012em;
  margin: 0 0 .07em -0.05em;
  padding-top: .07em;               /* room for the brain on the i (its top sits ~.04em above the line box) */
  cursor: default;
  /* No negative z-index here. The drips stay under the text anyway: everything after the name paints later (the lead's
     words and the sub line are stacking contexts, the pill, the buttons and the countdown are positioned). In WebKit a
     negative z-index under these letter layers made the whole hero copy one big layer that repainted every frame, and
     on iPhones it came back blank (owner's recording, 21 Oct 2026). Checked pixel for pixel in Chrome and WebKit. */
}
/* the breathing axes re-shape these letters many times a second; keep that work inside the name */
.hero-copy__name, .topbar__name { contain: layout style; }
.hc-name__word { display: inline-block; position: relative; }
.hc-l {
  display: inline-block;
  position: relative;
  transform-origin: 50% 90%;
  font-variation-settings: "wght" 560, "opsz" 144, "SOFT" 100, "WONK" 1;
  will-change: transform;
}
/* hand kerning, since every letter is its own box */
.hero-copy__name .hc-l:first-child { margin-right: -0.055em; }
.hc-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* the dot of the i is the brain */
.hc-dot {
  position: absolute;
  left: 50%;
  bottom: .545em;
  width: .4em;
  margin-left: -.2em;
  pointer-events: none;
}
.hc-dot__lift { display: block; transform-origin: 50% 80%; will-change: transform; }
.hc-brain { display: block; width: 100%; height: auto; overflow: visible; }
.hc-brain__mass { fill: currentColor; }
.hc-brain__groove { fill: var(--field); }
.hc-brain__eye { fill: var(--cream); }
.hc-brain__pupil { fill: var(--ink); }

.hc-drips {
  position: absolute;
  left: 0; top: 0;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
  fill: currentColor;
}

/* ---------- lead ---------- */
.hero-copy__lead {
  font-size: clamp(23px, min(2.1vw, 3.5vh), 33px);
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin: 0 0 .42em;
  max-width: 19.5em;
  font-variation-settings: "wght" 420, "opsz" 40, "SOFT" 100, "WONK" 0;
}
.hc-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.32em) scale(1.04);
  filter: blur(.14em);
  font-variation-settings: "wght" 880, "opsz" 40, "SOFT" 100, "WONK" 1;
  transition:
    opacity .55s var(--ease-out) var(--d, 0s),
    filter .9s var(--ease-out) var(--d, 0s),
    transform 1s var(--ease-jelly) var(--d, 0s),
    font-variation-settings 1.25s var(--ease-out) var(--d, 0s);
}
.is-in > .hc-w {
  opacity: 1;
  transform: none;
  filter: blur(0);
  font-variation-settings: "wght" 420, "opsz" 40, "SOFT" 100, "WONK" 0;
}
.hero-copy__sub {
  font-size: clamp(16px, 1.22vw, 19px);
  line-height: 1.5;
  max-width: 29em;
  margin: 0 0 1em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s var(--ease-out) var(--d, 0s), transform 1.3s var(--ease-out) var(--d, 0s);
}
.hero-copy__sub.is-in { opacity: .84; transform: none; }
/* the morphing word and its full stop never part, and the box keeps the word's widest width */
.hc-keep { display: inline-block; white-space: nowrap; }
.hc-morph {
  display: inline-block;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% 70%;
  font-variation-settings: "wght" 420, "opsz" 18, "SOFT" 100, "WONK" 0;
  transition: font-variation-settings 1.15s var(--ease-jelly), transform 1.15s var(--ease-jelly);
}

/* ---------- CA pill ---------- */
.hc-ca-mount { position: relative; }
.hero-copy .hc-ca-mount { margin: 0 0 12px; }
.hc-ca {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 20px;
  border: 0;
  background: none;
  color: inherit;
  font: 13px/1.25 var(--mono);
  letter-spacing: .01em;
  cursor: pointer;
  transform-origin: 30% 55%;
  -webkit-tap-highlight-color: transparent;
}
.hc-ca:focus-visible { outline: none; }
.hc-ca:focus-visible .hc-ca__ring { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 2 5; }
.hc-ca__ring, .hc-ca__splat { position: absolute; overflow: visible; pointer-events: none; fill: currentColor; }
.hc-ca__ring { z-index: -1; }
.hc-ca__splat { z-index: 2; }
.hc-ca__text { display: inline-flex; gap: 9px; white-space: nowrap; transition: opacity .25s var(--ease-out); }
.hc-ca__k { opacity: .55; }
.hc-ca__short { display: none; }
.hc-ca__icon { width: 15px; height: 15px; flex: none; overflow: visible; fill: currentColor; transition: opacity .25s var(--ease-out); }
.hc-ca__icon-back { opacity: .42; }
.hc-ca.is-empty .hc-ca__icon { display: none; }
.hc-ca.is-splat .hc-ca__text, .hc-ca.is-splat .hc-ca__icon { opacity: 0; }
.hc-ca__msg {
  position: absolute;
  left: 20px;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  line-height: 1.45;
  color: var(--hc-msg, var(--cream));
  opacity: 0;
  pointer-events: none;
}
.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 720px) {
  .hc-ca__full { display: none; }
  .hc-ca__short { display: inline; }
}

/* ---------- ink buttons ---------- */
.hero-copy__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0; }
/* the countdown lives in this column: one gap above it, scaled to the screen height */
.hero-copy.hc-root > #countdown { margin-top: clamp(18px, 2.8vh, 30px); }
.hero-copy .btn.hc-btn {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  padding: 14px 22px;
  white-space: nowrap;
  transform-origin: 50% 60%;
  transition: color .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.hero-copy .btn--line.hc-btn { padding: 14px 20px; }
.hc-btn__shape { position: absolute; overflow: visible; pointer-events: none; z-index: -1; fill: currentColor; }
.btn--ink.hc-btn .hc-btn__shape { fill: var(--ink); }
.hc-btn__label { position: relative; }
.hero-copy .btn.hc-btn:focus-visible { outline: 2px dashed currentColor; outline-offset: 6px; }

/* ---------- topbar name ---------- */
.topbar__name.hc-name {
  display: inline-block;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.03em;
  padding-top: 6px;
}
.topbar__name .hc-l { font-variation-settings: "wght" 620, "opsz" 72, "SOFT" 100, "WONK" 1; }
.topbar__name .hc-dot { width: .52em; margin-left: -.26em; bottom: .6em; }
.topbar__mark .topbar__name.hc-name { vertical-align: middle; }
/* once the text turns cream in deep water, a cream brain would swallow its cream eyes: it stays
   Turri's ink brain, with a cream rim so it still reads against the dark water */
.is-deep .topbar__name .hc-brain__mass {
  fill: var(--ink);
  stroke: var(--cream);
  stroke-width: 70px;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* Short desktop screens (laptops with the browser chrome on): the ring moves up beside the
   buttons, so the tide and the drops leaving it are on the first screen.
   Left: the address and the buttons, stacked. Right: the ring with Turri's line. */
@media (min-width: 901px) and (max-height: 820px) {
  .hero-copy.hc-root {
    display: grid;
    grid-template-columns: min-content minmax(0, 1fr);
    grid-template-areas:
      "name  name"
      "lead  lead"
      "sub   sub"
      "ca    cd"
      "links cd";
    justify-items: start;
    column-gap: clamp(26px, 2.8vw, 44px);
    align-self: start;              /* hang from the top; the jelly beside it may be taller */
  }
  .hero-copy__name.hc-name { grid-area: name; }
  .hero-copy__lead { grid-area: lead; }
  .hero-copy__sub { grid-area: sub; }
  /* the two halves of the stack meet in the middle, so it centres against the ring */
  .hero-copy.hc-root > #ca-pill { grid-area: ca; align-self: end; z-index: 2; }   /* a splat may land on the ring */
  .hero-copy__links { grid-area: links; align-self: start; }
  .hero-copy.hc-root > #countdown {
    grid-area: cd; align-self: center; justify-self: stretch;
    margin-top: 0; min-width: 0;
    container: hc-cd / inline-size;
  }
  /* the short address keeps the left column as narrow as the buttons */
  .hero-copy .hc-ca__full { display: none; }
  .hero-copy .hc-ca__short { display: inline; }
}
/* on narrow short screens there is no room for Turri's line beside the ring: the ring speaks
   alone and the line is kept for screen readers only */
@container hc-cd (max-width: 290px) {
  .hero-copy .cd__say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 900px) {
  .hero-copy.hc-root { padding-top: 12px; }
}
@media (max-width: 720px) {
  .hero-copy__name.hc-name { font-size: calc(min(36vw, 158px) * var(--hc-fit, 1)); }
  .hero-copy__lead { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-w { opacity: 1; transform: none; filter: none; font-variation-settings: "wght" 420, "opsz" 40, "SOFT" 100, "WONK" 0; }
  .hero-copy__sub { opacity: .84; transform: none; }
  .hero-copy .btn.hc-btn:hover { transform: scale(1.04); }
}