/* Statue Labs — landing page.
   Palette and type come from the brand artboard (SL.BRAND.0.2):
   three voices (the block, the figure, the marks), four colours.
   The roughness is in the surface: hewn edges, stone grain, leftover chips. */

:root {
  --lapis: #2431F0;
  --chalk: #DFFF4F;
  --block: #0D0D0D;
  --stone: #F3F1EA;
  --grey: #55544F;

  --f-block: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-figure: "Instrument Serif", Georgia, serif;
  --f-marks: "Space Mono", ui-monospace, Menlo, monospace;

  --pad: clamp(16px, 4.45vw, 64px);
  --maxw: 1440px;

  /* The ticker's height, so the hero can leave exactly that much of the first screen for it. */
  --tick-fs: clamp(1.125rem, 2.1vw, 1.875rem);
  --tick-h: calc(var(--tick-fs) * 2.05 + 4px);

  /* A block that was cut, not drawn. In percentages, so it follows the box. */
  --hewn: polygon(0 2.6%, 7% .6%, 23% 1.9%, 41% 0, 66% 1.5%, 88% .2%, 100% 2.2%, 99.2% 27%, 100% 58%, 98.8% 84%, 100% 100%, 79% 98.5%, 54% 100%, 31% 98.1%, 12% 99.6%, .4% 97.3%, 1.2% 71%, 0 44%, .9% 19%);

  /* Stone grain: speckle from fractal noise, dark for lapis and stone, light for the block. */
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.15 0 0 0 -.54'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -.53'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* Gentle pauses: scrolling settles at the start of each screen when it ends near one,
   but never locks. The snap points are the hero, the finished carve, the beliefs and the close. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-snap-type: y proximity;
}
.hero, .carve__done, .beliefs, .close { scroll-snap-align: start; }
.foot { scroll-snap-align: end; }

body {
  margin: 0;
  background: var(--lapis);
  color: var(--stone);
  font: 400 1.0625rem/1.5 var(--f-block);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--chalk);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--block);
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.grain { background-image: var(--grain-dark); background-size: 240px 240px; }
.grain--stone { background-color: var(--stone); background-image: var(--grain-stone); }


/* ── Hero ─────────────────────────────────────────────── */

/* One screen, one poster: the hero and the ticker fill the first viewport.
   STATUE hangs from the top margin, the stone stands on the ticker, and the
   hand is sized so its top meets STATUE's cap line. */
.hero {
  --wm-fs: clamp(3.5rem, 11.6vw, 10.5rem);
  --bar: calc(21.5px + 1.09375rem);       /* topbar height */
  --cap: max(var(--pad), 40px);            /* topbar to STATUE's cap line */
  --fig-h: calc(100svh - var(--tick-h) - var(--bar) - var(--cap) + 6px);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--tick-h));
  min-height: calc(100svh - var(--tick-h));
  overflow: hidden;
}
.hero > .wrap { flex: 1; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}
.topbar__mail {
  padding-bottom: .25em;
  border-bottom: 1.5px solid var(--chalk);
  color: var(--stone);
  font: 400 .875rem/1 var(--f-marks);
  text-decoration: none;
}
.topbar__mail:hover { color: var(--chalk); }

.hero__grid {
  flex: 1;
  display: grid;
  grid-template: 1fr / minmax(0, 1fr);
  align-items: start;
}
/* Wordmark and figure share one cell: the figure tucks its empty upper-left
   corner in beside STATUE instead of sitting in a column of its own. */
.hero__main, .hero__figure { grid-area: 1 / 1; }
.hero__main { position: relative; z-index: 1; }

/* The block: Archivo 800 at 125% width. Shouts. */
.wm {
  margin-top: calc(var(--cap) - .066 * var(--wm-fs));   /* .066em: line-box top to cap top */
  font: 800 var(--wm-fs)/.86 var(--f-block);
  font-stretch: 125%;
  letter-spacing: -.005em;
}
.wm__statue {
  position: relative;
  isolation: isolate;
  display: inline-block;
  color: var(--stone);
}
.wm__statue .ch { transition: color .18s ease-out, -webkit-text-stroke-color .18s ease-out; }

/* Before the cut: the whole name sits inside the block, only scored. */
.wm__statue::before {
  content: "";
  position: absolute;
  inset: -.07em -.1em -.06em -.07em;
  z-index: -1;
  background: var(--block);
  transform: rotate(-1.4deg);
  clip-path: inset(0 0 0 var(--cut, 0px));
  transition: clip-path .16s cubic-bezier(.3, .7, .2, 1);
  visibility: hidden;
}
.cut-pending .wm__statue::before { visibility: visible; }
.cut-pending .wm__statue .ch:not(.is-cut) {
  color: transparent;
  -webkit-text-stroke: .02em var(--chalk);
}

/* LABS stays in its block. The shadow sits on the wrapper so it follows the hewn edge. */
.wm__labs {
  display: block;
  width: max-content;
  margin-top: .2em;
  margin-left: -.05em;
  transform: rotate(-2.5deg);
  filter: drop-shadow(.07em .07em 0 var(--stone));
}
.wm__labs > span {
  display: block;
  padding: .14em .22em .12em .2em;
  background: var(--block);
  color: transparent;
  -webkit-text-stroke: .02em var(--chalk);
  clip-path: var(--hewn);
}

/* The figure, rising out of its block, with one chalk line where the next cut goes */
/* 6px of optical overshoot: the stone's top is rounded, so it rises a hair above the cap line. */
.hero__figure {
  position: relative;
  align-self: end;
  justify-self: end;
  width: clamp(40%, calc(var(--fig-h) / 1.1557), 62%);
  margin-top: calc(var(--cap) - 6px);
}
.hero__figure img { width: 100%; }
.chalk-line {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.chalk-line line {
  stroke: var(--chalk);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}


/* ── Ticker ───────────────────────────────────────────── */

.ticker {
  overflow: hidden;
  background: var(--chalk);
  color: var(--block);
  border-block: 2px solid var(--block);
}
.ticker__track {
  display: flex;
  width: max-content;
  padding: .55em 0 .5em;
  font: 800 var(--tick-fs)/1 var(--f-block);
  font-stretch: 125%;
  white-space: nowrap;
  animation: ticker 70s linear infinite;
}
.ticker__track i {
  padding-inline: 1.4em;
  font-style: normal;
  font-weight: 400;
}
@keyframes ticker { to { transform: translateX(-50%); } }


/* ── Belief 01: carved out of a block of CONTEXT ──────── */

.carve {
  background: var(--block) var(--grain-light);
  background-size: 240px 240px;
}

/* Without JS: the sentence, set plainly. */
.carve__line {
  max-width: 14ch;
  padding-block: clamp(72px, 10vw, 160px);
  font: 700 clamp(2rem, 5.4vw, 4.75rem)/1.02 var(--f-marks);
  text-transform: uppercase;
}
.carve__block { display: none; }

/* A snap point where the carving is done (main.js finishes it at top = -45vh). */
.carve { position: relative; }
.carve__done { display: none; position: absolute; top: 50vh; left: 0; width: 1px; height: 1px; }
.carve--live:not(.carve--still) .carve__done { display: block; }

.carve--live .carve__line {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.carve--live .carve__block {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  font: 700 var(--fs)/.92 var(--f-marks);
  color: var(--grey);
  user-select: none;
  -webkit-user-select: none;
}

/* The block is carved over the first stretch of scrolling; the stage then holds
   the finished sentence in place for a while before letting go. */
.carve--live:not(.carve--still) { height: 190vh; }
.carve--live:not(.carve--still) .carve__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.carve--still .carve__stage { padding-block: clamp(64px, 9vw, 128px); }

.carve__block > span {
  text-align: center;
  transition:
    opacity .4s cubic-bezier(.55, 0, .85, .35),
    transform .4s cubic-bezier(.55, 0, .85, .35),
    color .5s ease;
}
.carve__block > .v { visibility: hidden; }
/* A cut chip drops and turns as it goes. */
.carve__block > .x { opacity: 0; transform: translateY(.6em) rotate(var(--r, 0deg)); }
/* The sentence was grey stone like the rest; freed, it turns to marble. */
.carve__block > .lit { color: var(--stone); }


/* ── Beliefs 02 and 03 ────────────────────────────────── */

.beliefs {
  color: var(--block);
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(40px, 7svh, 120px);
}

.b2 {
  font: 800 min(8.6vw, 8rem, 12svh)/.98 var(--f-block);
  font-stretch: 125%;
  letter-spacing: -.01em;
  color: var(--lapis);
}
.b2 > span, .b3 > span { display: block; }
.b2 em {
  font: italic 400 1.22em/.8 var(--f-figure);
  letter-spacing: -.01em;
  color: var(--block);
}

.b3wrap {
  margin-top: clamp(40px, 7svh, 112px);
  filter: drop-shadow(clamp(8px, 1.1vw, 16px) clamp(8px, 1vw, 14px) 0 var(--lapis));
}
.b3card {
  padding: clamp(28px, 6svh, 80px) clamp(22px, 3.8vw, 56px) clamp(32px, 7svh, 88px);
  background: var(--block);
  color: var(--stone);
  transform: rotate(-1.5deg);
  clip-path: var(--hewn);
}
.b3 {
  font: 800 min(5.8vw, 5.5rem, 8.2svh)/1.04 var(--f-block);
  font-stretch: 125%;
  letter-spacing: -.005em;
}
.b3 em {
  font: italic 400 1.26em/.9 var(--f-figure);
  color: var(--chalk);
}
/* Accumulated: the word piles up behind itself. */
.b3__acc {
  width: max-content;
  text-shadow:
    .02em .025em 0 var(--block),
    .035em .045em 0 var(--chalk),
    .055em .07em 0 var(--block),
    .07em .09em 0 var(--lapis),
    .09em .115em 0 var(--block),
    .105em .135em 0 var(--chalk),
    .125em .16em 0 var(--block),
    .14em .18em 0 var(--lapis);
}


/* ── Close: one figure, one line, one address ─────────── */

.close {
  display: grid;
  align-content: center;
  min-height: calc(100vh - 80px);
  min-height: calc(100svh - 80px);   /* the close and the footer share the last screen */
  padding-block: clamp(40px, 7svh, 136px);
}

.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(36px, 5.5vw, 88px);
  align-items: end;
}
.close__photo {
  width: min(100%, calc(68svh * 1.187));   /* 1.187: the photo's width over its height */
  background: var(--block);
  clip-path: var(--hewn);
}
.close__photo img { width: 100%; }

.close__title {
  font: italic 400 clamp(3.5rem, 8.4vw, 8rem)/.9 var(--f-figure);
  letter-spacing: -.01em;
}
.close__text {
  max-width: 25rem;
  text-wrap: pretty;
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.45;
}
.close__mail {
  display: inline-block;
  margin-top: clamp(24px, 2.8vw, 36px);
  padding: .6em .8em .55em;
  background: var(--block);
  color: var(--chalk);
  font: 800 clamp(1.0625rem, 1.9vw, 1.625rem)/1 var(--f-block);
  font-stretch: 125%;
  text-decoration: none;
  clip-path: var(--hewn);
}
.close__mail:hover { background: var(--chalk); color: var(--block); }
/* The hewn edge clips anything outside the box, so the focus ring goes inside. */
.close__mail:focus-visible { outline-offset: -6px; box-shadow: none; }


/* ── Footer ───────────────────────────────────────────── */

.foot {
  background: var(--block);
  color: var(--stone);
  font: 400 .75rem/1.4 var(--f-marks);
  letter-spacing: .02em;
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 28px;
}
.mw {
  font: 800 1rem/1 var(--f-block);
  font-stretch: 125%;
  white-space: nowrap;
}
.mw__block {
  display: inline-block;
  padding: .2em .25em .16em;
  background: var(--stone);
  color: var(--block);
}


/* ── Smaller screens ──────────────────────────────────── */

/* Narrow, or a portrait tablet: wordmark on top, hand below it. */
@media (max-width: 820px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .hero { --wm-fs: min(16.4vw, 8rem); }
  .hero__grid { grid-template-rows: auto 1fr; }
  .hero__figure {
    grid-area: 2 / 1;
    /* Fill what's left under LABS (2.35em of wordmark below the cap line), within limits. */
    width: clamp(min(78%, 440px), calc((100svh - var(--tick-h) - var(--bar) - var(--cap) - 2.35 * var(--wm-fs) - 16px) / 1.1557), min(100%, 680px));
    margin: 16px 0 0 auto;
  }
}

@media (max-width: 820px) {
  .close__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  /* Phones: the hand can't fill the height at this width, so the hero hugs its
     content instead, with the stone still standing on the ticker. */
  .hero { min-height: 0; }
  .hero__figure { width: min(92%, 480px); margin-top: 20px; }

  /* Too narrow for the set line breaks: let the beliefs wrap on their own. */
  .b2 { font-size: 10.4vw; }
  .b3 { font-size: 7.4vw; }
  .b2 > span, .b3 > span:not(.b3__acc) { display: inline; }
  .b3__acc { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .carve__block > span, .wm__statue .ch { transition: none; }
}