/* Vema, design A: "Tuff". Static, system fonts, no external requests. */
:root {
  --tuff: #cfa7a2;        /* Yerevan pink tuff: the ground of the hero and the who-is-writing field */
  --tuff-deep: #b98680;   /* the same stone, one tone deeper: the monument letters on tuff */
  --dust: #efe2de;        /* tuff dust: the light reading field */
  --basalt: #1e2022;      /* Armenian basalt: the ink, and the dark fields */
  --basalt-2: #2e3135;    /* one tone step up from basalt: hover on dark */

  --m: clamp(20px, 2.4vw, 36px);
  --g: clamp(12px, 1.6vw, 24px);
  --pad: clamp(80px, 11vw, 176px);

  --small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --lead: clamp(1.25rem, 1.08rem + 0.7vw, 1.625rem);
  --head: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --display: clamp(2.375rem, 0.9rem + 5.6vw, 6rem);

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
          "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--basalt);
  color: var(--basalt);
  font: 400 var(--body)/1.5 var(--font);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
::selection { background: var(--basalt); color: var(--tuff); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 5; background: var(--basalt); color: var(--dust); padding: 12px 16px; }
.skip:focus { top: 12px; }

/* ---------- fields: each section is one flat field with its own ink ---------- */
.field { position: relative; }
.f-tuff   { background: var(--tuff);   color: var(--basalt); --muted: #4d3c3a; --mono: var(--tuff-deep); }
.f-dust   { background: var(--dust);   color: var(--basalt); --muted: #5a4a47; }
.f-basalt { background: var(--basalt); color: var(--dust);   --muted: #bfaea9; --mono: var(--tuff); }
.f-basalt :focus-visible { outline-color: var(--tuff); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-inline: var(--m);
}

/* ---------- the monument (custom VEMA letterforms, carved) ---------- */
svg.mono { display: block; fill: var(--mono); color: var(--mono); }
.mark-v { width: 0.86em; height: 1em; fill: currentColor; flex: none; }

/* ---------- bar ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(var(--m) * 0.8) var(--m) 0;
  position: relative; z-index: 2;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; min-height: 44px; }
.brand .mark-v { font-size: 1.05rem; }
.bar nav { display: flex; gap: clamp(16px, 2.4vw, 36px); }
.bar nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.bar nav a:hover, .bar nav a[aria-current="page"] { text-decoration: underline; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 14px 26px;
  background: var(--basalt); color: var(--dust); text-decoration: none;
  font-weight: 650; font-size: var(--body); letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.btn:hover { background: var(--basalt-2); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline-color: var(--basalt); }

.act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.status { color: var(--muted); font-size: var(--small); }

/* ---------- hero, idea pages ---------- */
.hero { overflow: hidden; }
.hero-copy { padding: clamp(56px, 9vh, 112px) var(--m) 0; }
.hero h1 {
  font-size: var(--display); font-weight: 680; line-height: 0.98; letter-spacing: -0.042em;
  max-width: 17ch; text-wrap: balance; margin-left: -0.04em;
}
.hero-idea .sub { font-size: var(--lead); line-height: 1.35; max-width: 40ch; margin-top: clamp(20px, 3vh, 32px); text-wrap: pretty; }
.hero-idea .act { margin-top: clamp(28px, 4vh, 40px); }
.sunk {
  margin-top: clamp(56px, 9vh, 104px);
  height: 13.2vw;                       /* only the top 44% of the letters: the name sunk into the stone */
  overflow: hidden;
}
.sunk svg { width: 106vw; margin-left: -3vw; height: auto; transform-origin: 50% 0; }

/* ---------- hero, front page ---------- */
.hero-front { min-height: min(100svh, 1000px); display: flex; flex-direction: column; }
.hero-front main { flex: 1; display: flex; flex-direction: column; }
.hero-front .sub { font-size: var(--lead); line-height: 1.32; max-width: 31ch; text-wrap: pretty; }
.hero-front .act { margin-top: clamp(24px, 3.5vh, 36px); }
.hero h1.stand { max-width: none; margin-left: 0; font-size: 1rem; line-height: 0; }
.stand { margin-top: auto; padding-top: 0; height: calc(116vw * 1000 / 3490 * 0.92); overflow: hidden; }
.stand .mono-stand { width: 116vw; margin-left: -6.5vw; height: auto; transform-origin: 50% 100%; }
.mono-tall { display: none; }

/* ---------- questions ---------- */
.ask { padding-block: var(--pad); }
.ask-side { grid-column: 1 / 5; align-self: start; }
.ask-side h2 { font-size: var(--head); font-weight: 680; line-height: 1.02; letter-spacing: -0.03em; max-width: 11ch; }
.ask-side p { margin-top: 20px; max-width: 24ch; }
.qs { grid-column: 6 / 13; }
.qs li { font-size: var(--lead); line-height: 1.3; font-weight: 520; letter-spacing: -0.01em; max-width: 34ch; text-wrap: pretty; }
.qs li + li { margin-top: clamp(28px, 3.4vw, 48px); }
.taps { grid-column: 6 / 13; margin-top: clamp(56px, 7vw, 96px); }
.taps > p { max-width: 46ch; }
.taps ul { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tap {
  display: block; padding: 16px 22px; background: var(--tuff); color: var(--basalt); text-decoration: none;
  font-size: var(--body); font-weight: 520; max-width: 100%;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.tap:hover { background: var(--basalt); color: var(--dust); }
.tap:active { transform: translateY(2px); }

/* ---------- poster lines ---------- */
.poster { padding-block: var(--pad); }
.poster h2 { padding-inline: var(--m); font-size: var(--head); font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; color: var(--muted); }
.lines { margin-top: clamp(32px, 5vw, 72px); }
.lines li, .lines li > a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; }
.lines li { padding-inline: var(--m); }
.lines li > a { grid-column: 1 / -1; text-decoration: none; }
.word {
  grid-column: 1 / 8; font-size: var(--display); font-weight: 680; line-height: 1.04; letter-spacing: -0.045em;
  white-space: nowrap; margin-left: -0.04em;
}
.fact { grid-column: 8 / 13; font-size: var(--body); line-height: 1.4; max-width: 36ch; }
.lines li + li { margin-top: clamp(4px, 0.8vw, 12px); }
.note { margin: clamp(40px, 5vw, 72px) var(--m) 0 calc(var(--m) + (100% - 2 * var(--m) - 11 * var(--g)) / 12 * 7 + 7 * var(--g)); max-width: 42ch; font-weight: 500; }
.note { text-wrap: pretty; }
.poster-index .word { transition: color var(--t-hover) ease, transform 320ms var(--ease-out); }
.poster-index a:hover .word, .poster-index a:focus-visible .word { color: var(--tuff); transform: translateX(0.12em); }
.poster-index a:focus-visible { outline-offset: 6px; }

/* ---------- how (front page) ---------- */
.how { padding-block: var(--pad); }
.how h2 { grid-column: 1 / 6; font-size: var(--head); font-weight: 680; line-height: 1.02; letter-spacing: -0.03em; max-width: 12ch; }
.how .statement { grid-column: 6 / 13; font-size: var(--lead); line-height: 1.32; max-width: 36ch; font-weight: 500; text-indent: 2.5em; }

/* ---------- who ---------- */
.who { padding-block: var(--pad); }
.facts { grid-column: 1 / 5; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--g); align-content: start; }
.facts dt { font-size: var(--small); color: var(--muted); }
.facts dd { font-weight: 650; margin-top: 2px; }
.who-text { grid-column: 6 / 13; }
.who-text .lead { font-size: var(--lead); line-height: 1.32; font-weight: 600; letter-spacing: -0.01em; max-width: 30ch; }
.who-text .creds { font-size: var(--lead); line-height: 1.32; max-width: 34ch; margin-top: 18px; }
.who-text .never { margin-top: clamp(32px, 4vw, 56px); max-width: 52ch; }

/* ---------- footer ---------- */
.foot { padding-top: clamp(56px, 7vw, 96px); overflow: hidden; }
.foot-cols { row-gap: 20px; font-size: var(--body); }
.foot-cols p { grid-column: span 3; max-width: 26ch; }
.foot-cols p:first-child a { font-weight: 650; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-mark { padding: clamp(72px, 12vw, 200px) var(--m) 0; }
.mono-foot { width: 100%; height: auto; transform-origin: 50% 100%; }
.legal { padding: 20px var(--m) 28px; font-size: var(--small); color: var(--muted); }

/* ---------- tablet ---------- */
@media (max-width: 960px) {
  .ask-side { grid-column: 1 / -1; position: static; }
  .ask-side h2 { max-width: none; }
  .qs, .taps { grid-column: 1 / -1; margin-top: 40px; }
  .qs li { max-width: 40ch; }
  .word { grid-column: 1 / -1; }
  .fact { grid-column: 1 / -1; margin: 4px 0 18px; }
  .note { margin-left: var(--m); max-width: 46ch; }
  .how h2, .how .statement { grid-column: 1 / -1; }
  .how .statement { margin-top: 28px; }
  .facts { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .who-text { grid-column: 1 / -1; margin-top: 48px; }
  .foot-cols p { grid-column: span 6; }
  /* front hero: the monument turns a quarter and runs down the right side */
  .hero-front { min-height: min(100svh, 1100px); position: relative; }
  .hero-front .hero-copy { max-width: 58vw; position: relative; z-index: 1; }
  .hero-front .act { flex-direction: column; align-items: flex-start; }
  .stand { position: absolute; inset: 72px 0 0 auto; height: auto; padding: 0; margin: 0; width: 42vw; overflow: hidden; }
  .stand .mono-stand { display: none; }
  .mono-tall { display: block; height: 104%; width: auto; aspect-ratio: 1000 / 3490; margin-top: -2%; }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 600px) {
  .bar { padding-top: 14px; }
  .bar nav { gap: 14px; font-size: 0.9375rem; }
  .brand span { display: none; }
  .brand .mark-v { font-size: 1.5rem; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); line-height: 1.02; }
  .hero-idea .sub { font-size: 1.125rem; }
  .sunk { height: 13.6vw; margin-top: 48px; }

  .hero-front .hero-copy { max-width: 56vw; padding-top: 44px; }
  .hero-front .sub { font-size: 1.1875rem; }
  .hero-front .btn { padding-inline: 20px; }

  .facts { grid-template-columns: 1fr 1fr; }
  .foot-cols p { grid-column: 1 / -1; }
  .lines li + li { margin-top: 0; }
  .word { font-size: clamp(2.25rem, 12vw, 3rem); }
}

/* ---------- motion: CSS only, scroll-linked where supported, nothing hidden without it ---------- */
@keyframes enter { from { opacity: 0; transform: translateY(26px); } }
@keyframes sink { to { transform: scale(0.93); } }
@keyframes settle { from { transform: scale(0.94); } }

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .sub, .hero .act { animation: enter 900ms var(--ease-out) both; }
  .hero .sub { animation-delay: 90ms; }
  .hero .act { animation-delay: 180ms; }

  @supports (animation-timeline: view()) {
    .mono-stand, .sunk svg { animation: sink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .mono-foot { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .ask-side, .qs li, .taps > p, .taps li, .poster h2, .lines li, .note,
    .how h2, .how .statement, .facts > div, .who-text > p, .foot-cols p {
      animation: enter linear both; animation-timeline: view(); animation-range: entry 5% entry 70%;
    }
    .qs li:nth-child(2), .taps li:nth-child(2), .facts > div:nth-child(2), .who-text > p:nth-of-type(2) { animation-range: entry 12% entry 78%; }
    .qs li:nth-child(3), .taps li:nth-child(3), .facts > div:nth-child(3), .who-text > p:nth-of-type(3) { animation-range: entry 18% entry 85%; }
    .lines li { animation-range: entry 0% entry 55%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}