/* Paperwork — coming soon
   Design: Claude Design "Paperwork Coming Soon v6" (+ v6 Mobile artboard). */

:root {
  --accent: #E8271C;
  --paper:  #F6F4F1;
  --ink:    #0C0C0D;

  /* Marquee: capped by viewport height as well as width so the lanes never
     eat the page on short/landscape screens. */
  --pw-size: clamp(30px, min(14vw, 6.4vh), 120px);
  --pw-leading: 0.86;
  --pw-tracking: -0.05em;
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--accent);
  color: var(--paper);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--ink); color: var(--paper); }

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------- marquee */

.marquee {
  flex: 0 0 auto;
  padding-top: 4vh;
  font-size: var(--pw-size);
  font-weight: 900;
  line-height: var(--pw-leading);
  letter-spacing: var(--pw-tracking);
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}

.lane {
  overflow: hidden;
  opacity: var(--o, 1);
}

.lane__row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: var(--dir, pw-l) var(--dur, 60s) linear infinite;
}

.lane__row > span { padding-right: 0.14em; }

/* Half the row width is exactly one group, so the seam never shows. */
@keyframes pw-l { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes pw-r { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

.lane:nth-child(1) { --o: 1;    --dur:  65s; --dir: pw-l; }
.lane:nth-child(2) { --o: 0.80; --dur:  85s; --dir: pw-r; }
.lane:nth-child(3) { --o: 0.60; --dur: 105s; --dir: pw-l; }
.lane:nth-child(4) { --o: 0.42; --dur: 130s; --dir: pw-r; }
.lane:nth-child(5) { --o: 0.26; --dur: 160s; --dir: pw-l; }
.lane:nth-child(6) { --o: 0.12; --dur: 195s; --dir: pw-r; }

/* ------------------------------------------------------------------- hero */

.hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: 5vh 6vw 6vh;
}

.hero__title {
  margin: 0;
  font-size: clamp(21px, 6.9vw, 30px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.wordmark {
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

.hero__sub {
  margin: 0;
  font-size: clamp(15px, 4.4vw, 19px);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.hero__meta {
  margin: 0;
  font-family: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ tablet / up */

@media (min-width: 768px) {
  :root {
    --pw-size: clamp(40px, min(8.6vw, 15.5vh), 220px);
    --pw-leading: 0.85;
    --pw-tracking: -0.055em;
  }

  .marquee { padding-top: 2.5vh; }

  /* v6 desktop runs five lanes, not six. */
  .lane--extra { display: none; }

  .lane:nth-child(1) { --o: 1;    --dur:  72s; }
  .lane:nth-child(2) { --o: 0.78; --dur:  92s; }
  .lane:nth-child(3) { --o: 0.52; --dur: 115s; }
  .lane:nth-child(4) { --o: 0.30; --dur: 138s; }
  .lane:nth-child(5) { --o: 0.13; --dur: 162s; }

  .hero {
    gap: 1.8vh;
    padding: 0 4.5vw 2vh;
  }

  .hero__title { font-size: clamp(24px, 2.9vw, 48px); }
  .hero__sub   { font-size: clamp(16px, 1.5vw, 24px); }
  .hero__meta  { font-size: 11px; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .lane__row {
    animation: none;
    transform: translateX(var(--rest, 0));
  }
  .lane:nth-child(2) { --rest: -6%;  }
  .lane:nth-child(3) { --rest: -13%; }
  .lane:nth-child(4) { --rest: -21%; }
  .lane:nth-child(5) { --rest: -30%; }
  .lane:nth-child(6) { --rest: -40%; }
}