/* greypaint.app
   The product is one thing: a version number moving. So the version bumps are
   the hero, set at monumental scale, and the sentence is the caption under
   them. Everything else is kept nearly wordless so that lands.
   Palette and type are the app's own. */

:root {
  --paper:   #EFEEEC;
  --panel:   #F6F5F3;
  --ink:     #1B1A19;
  --muted:   #6F6C68;
  --faint:   #B4B1AC;
  --wasabi:  #CDD152;
  --olive:   #5F6318;
  --on-acc:  #1A1B0A;
  --edge:    rgba(27, 26, 25, 0.08);
  --rule:    rgba(27, 26, 25, 0.14);
  --wash:    rgba(27, 26, 25, 0.035);

  --sans: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --col: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(var(--col), 100% - 44px); margin-inline: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }

.kicker {
  margin: 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}

/* ---------------- nav ---------------- */

header { border-bottom: 1px solid var(--edge); }
.nav { display: flex; align-items: center; gap: 14px; height: 62px; }
.nav .spacer { flex: 1; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 26px; height: 26px; display: block; }
.brand span { font-family: var(--mono); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; }
.nav .req { font-family: var(--mono); font-size: 12px; color: var(--muted); }
@media (max-width: 720px) { .nav .req { display: none; } }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  padding: 14px 24px;
  border: 1px solid transparent; border-radius: 12px;
  background: var(--ink); color: var(--paper);
  transition: background-color 120ms ease, transform 120ms ease;
}
.btn:hover { background: #302e2c; }
.btn:active { transform: scale(.985); }
.btn svg { flex: none; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* ================ the hero: the bumps ================ */

.board { padding: 76px 0 0; }

.board-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding-bottom: 22px;
}

/* one bump per line, set like a monument */
.bump {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px auto;
  align-items: baseline;
  gap: 0 18px;
  padding: 24px 14px;
  margin: 0 -14px;
  border-top: 1px solid var(--edge);
  border-radius: 10px;
  transition: background-color 160ms ease;
}
.bump:last-of-type { border-bottom: 1px solid var(--edge); }
.bump:hover { background: var(--wash); }

/* the detail waits underneath until you look */
.bump .via {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 220ms cubic-bezier(.22,1,.36,1), opacity 160ms ease, margin-top 220ms ease;
}
.bump:hover .via, .bump:focus-within .via {
  max-height: 2.4em; opacity: 1; margin-top: 12px;
}

.bump .app {
  font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing: -.03em;
  line-height: 1;
}
.bump .old, .bump .new {
  font-family: var(--mono);
  font-size: clamp(17px, 2.1vw, 25px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bump .old { color: var(--faint); }
.bump .arw { color: var(--faint); text-align: center; font-family: var(--mono); }
.bump .new { color: var(--olive); }

/* the new number arrives as the scan resolves it */
.js .bump .new, .js .bump .arw { opacity: 0; }
.js .bump.in .new, .js .bump.in .arw {
  opacity: 1;
  transition: opacity .3s ease;
}
.js .bump .new { transform: translateY(4px); }
.js .bump.in .new { transform: none; transition: opacity .3s ease, transform .34s cubic-bezier(.22,1,.36,1); }

.board-foot {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 20px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}

/* the sentence, as a caption under the monument */
.thesis { margin-top: 60px; display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.thesis h1 {
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.06;
  letter-spacing: -.03em;
  max-width: 18ch;
}

.scribbled { position: relative; display: inline-block; }
.scribbled svg {
  position: absolute; left: -.05em; right: -.05em; bottom: -.15em;
  width: calc(100% + .1em); height: .28em; overflow: visible;
}
.scribbled path {
  fill: none; stroke: var(--wasabi);
  stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: draw 1s cubic-bezier(.22,1,.36,1) 1.15s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ================ the app ================ */

.stage { margin: 104px auto 0; }
.stage img, .stage video { display: block; width: 100%; height: auto; }

/* ================ spare sections ================ */

section { padding: 116px 0 0; }

.rule { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* two claims, side by side, nothing else */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 56px; }
.pair .claim { max-width: 15ch; }
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; gap: 32px; } }

/* three modes, three words */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.mode {
  border: 1px solid var(--edge); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column; gap: 10px;
}
.mode.on { background: var(--wasabi); border-color: transparent; color: var(--on-acc); }
.mode.on .kicker { color: rgba(26,27,10,.7); }
.mode h3 { font-size: 22px; letter-spacing: -.02em; }
.mode p { font-size: 14.5px; color: var(--muted); }
.mode.on p { color: rgba(26,27,10,.78); }
@media (max-width: 820px) { .grid3 { grid-template-columns: 1fr; } }

/* one-line claims */
.claim {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.08; letter-spacing: -.028em;
  max-width: 20ch;
}
/* close */
.close { margin-top: 128px; display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.close .req { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 14px; }

footer {
  margin-top: 92px; padding: 24px 0 56px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
footer .spacer { flex: 1; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 880px) {
  .board { padding-top: 48px; }
  .stage { margin-top: 64px; }
  section { padding-top: 80px; }
  .thesis { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scribbled path { animation: none; stroke-dashoffset: 0; }
  .js .bump .new, .js .bump .arw { opacity: 1; transform: none; }
  * { transition-duration: 1ms !important; }
}