@font-face {
  font-family: Inter;
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f6f4ed;
  --ink: #252720;
  --yellow: #f4c849;
}

* { box-sizing: border-box; }
html { min-width: 280px; background: var(--paper); }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.site-header { padding: clamp(24px, 4.8vw, 64px) clamp(24px, 5.3vw, 80px) 0; }
.wordmark { font-size: clamp(25px, 2.6vw, 40px); font-weight: 900; letter-spacing: -0.035em; line-height: 1; }
.wordmark span { font-size: .49em; letter-spacing: -.035em; }
main { flex: 1; display: grid; place-items: center; padding: 64px 24px 96px; }
.message { width: 100%; text-align: center; }
.cone { display: block; width: clamp(78px, 8.3vw, 124px); height: auto; margin: 0 auto clamp(32px, 3.5vw, 52px); transform-origin: 50% 90%; animation: settle 900ms ease-out both; }
h1 { max-width: 1300px; margin: 0 auto; font-size: clamp(42px, 8.15vw, 124px); font-weight: 900; letter-spacing: -.045em; word-spacing: .02em; line-height: .99; text-wrap: balance; }
p { margin: clamp(28px, 3.2vw, 48px) auto 0; font-size: clamp(17px, 2.45vw, 37px); line-height: 1.55; font-weight: 400; letter-spacing: -.035em; }
.construction-stripe { flex: 0 0 42px; background: repeating-linear-gradient(132deg, var(--yellow) 0 34px, var(--ink) 34px 68px); }
@keyframes settle { 0% { transform: rotate(-8deg); } 45% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
@media (max-height: 800px) and (min-width: 601px) {
  main { padding: 24px 24px 40px; }
  .cone { width: 76px; margin-bottom: 28px; }
  h1 { font-size: clamp(50px, 7.4vw, 100px); }
  p { font-size: clamp(18px, 2.2vw, 30px); margin-top: 28px; }
}
@media (max-width: 600px) {
  main { padding: 72px 22px 92px; }
  h1 { font-size: clamp(36px, 9.3vw, 55px); line-height: 1.05; letter-spacing: -.04em; }
  p { max-width: 345px; font-size: 18px; line-height: 1.6; letter-spacing: -.02em; }
  p span { display: block; margin-top: 12px; }
  .desktop-break { display: none; }
  .construction-stripe { flex-basis: 28px; background-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .cone { animation: none; } }