@font-face {
  font-family: Archivo;
  src: url('/holding-assets/archivo.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/holding-assets/inter.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Fragment Mono';
  src: url('/holding-assets/mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fcfcfa;
  --ink: #17191d;
  --muted: #62656b;
  --line: #d9d9d3;
  --red: #c8102e;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--paper); }

.page {
  width: min(100% - 112px, 1440px);
  min-height: 100svh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.masthead {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.wordmark { width: 136px; height: auto; }
.status, .eyebrow, .footer {
  font-family: 'Fragment Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.6;
  text-transform: uppercase;
}
.status { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.status-mark { width: 6px; height: 6px; background: var(--red); }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 0 64px;
  text-align: center;
}

.construction { width: min(560px, 100%); }
.assembly { display: block; width: 100%; height: auto; overflow: visible; }
.drawing-grid { color: #e1e1da; }
.guides { color: #c5c5bd; }
.drawing-ticks { color: #a2a49e; }
.face-top { fill: var(--paper); }
.face-left { fill: #f0f0eb; }
.face-right { fill: #e3e3dc; }
.block-eight { color: var(--red); }
.block-eight .face-top, .block-eight .face-left, .block-eight .face-right { fill: var(--paper); }
.block { transform: translateY(0); }

.motion-ready .block {
  animation: assemble 10s cubic-bezier(.45, 0, .2, 1) infinite both;
}
.motion-ready .block-two { animation-delay: .18s; }
.motion-ready .block-three { animation-delay: .36s; }
.motion-ready .block-four { animation-delay: .54s; }
.motion-ready .block-five { animation-delay: .72s; }
.motion-ready .block-six { animation-delay: .9s; }
.motion-ready .block-seven { animation-delay: 1.08s; }
.motion-ready .block-eight { animation-delay: 1.26s; }
.animation-paused .block { animation-play-state: paused; }

@keyframes assemble {
  0%, 10%, 90%, 100% { transform: translateY(-48px); opacity: .15; }
  30%, 65% { transform: translateY(0); opacity: 1; }
}

.eyebrow { margin: 0 0 24px; color: var(--muted); }
h1 {
  font-family: Archivo, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.05;
  letter-spacing: -.055em;
  margin: 0;
  text-wrap: balance;
}
.full-stop { color: var(--red); }
.description {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.footer {
  position: relative;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}
.footer::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 1px;
  height: 8px;
  background: var(--ink);
}
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 0 8px 8px;
  background: none;
  border: 0;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.motion-toggle:hover { color: var(--ink); }
.motion-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.motion-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.play-icon, .animation-paused .pause-icon { display: none; }
.animation-paused .play-icon { display: block; }

@media (min-width: 900px) and (max-height: 800px) {
  .masthead { min-height: 88px; }
  .construction { width: 400px; }
  main { padding-block: 8px 40px; }
}

@media (max-width: 600px) {
  .page { width: calc(100% - 48px); }
  .masthead { min-height: 88px; gap: 16px; }
  .wordmark { width: 104px; }
  .status { max-width: 140px; font-size: 9px; gap: 8px; }
  main { padding: 32px 0 56px; }
  .construction { width: min(400px, calc(100% + 24px)); margin-inline: -12px; }
  .eyebrow { font-size: 9px; margin-bottom: 16px; letter-spacing: .06em; }
  h1 { max-width: 10ch; margin-inline: auto; font-size: clamp(36px, 10vw, 56px); }
  .description { font-size: 14px; }
  .footer { min-height: 80px; font-size: 9px; letter-spacing: .025em; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .block { animation: none; }
  .motion-toggle { display: none; }
}