:root {
  color-scheme: light dark;
  --bg: #F6F4EF;
  --ink: #141414;
  --muted: #6E6B64;
  --accent: #FF4A00;
  --accent-text: #D63C00;
  --rule: color-mix(in srgb, var(--ink) 18%, transparent);
  --pad: clamp(24px, 4vw, 64px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D0D0C;
    --ink: #E9E7E0;
    --muted: #8B8880;
    --accent-text: #FF4A00;
  }
}

* { box-sizing: border-box; margin: 0; }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-inline: var(--pad);
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  line-height: 1.5;
}
::selection { background: var(--ink); color: var(--bg); }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 5px; }
.micro { color: var(--muted); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; }
a.micro { text-decoration: none; }
a.micro:hover, a.micro:focus-visible { color: var(--accent-text); text-decoration: underline; text-underline-offset: 5px; }
.top { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mark { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px; }
.mark svg { display: block; }
main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  padding-block: 64px;
}
h1 {
  font-size: clamp(2.25rem, 5vw, 6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dot { color: var(--accent); }

/* load-in: name rises out of its line, dot lands last, links follow */
@media (prefers-reduced-motion: no-preference) {
  h1 { clip-path: inset(0 -1em); }
  h1 > span, .dot { display: inline-block; }
  h1 > span { animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  h1 > span + span { animation-delay: 0.09s; }
  .dot { animation: land 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both; }
  .top, footer { animation: fade 0.8s ease-out both; }
  .mark path + path { animation: fade 0.3s steps(1) 0.3s both, blink 0.9s steps(1) 0.3s 2; }
  .links { animation: draw 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; transform-origin: left; }
  .links a { animation: lift 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .links a:nth-child(1) { animation-delay: 0.35s; }
  .links a:nth-child(2) { animation-delay: 0.42s; }
  .links a:nth-child(3) { animation-delay: 0.49s; }
  .links a:nth-child(4) { animation-delay: 0.56s; }
}
@keyframes rise { from { transform: translateY(105%); } }
@keyframes land { from { transform: scale(0); } }
@keyframes fade { from { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lift { from { opacity: 0; transform: translateY(12px); } }
.links { border-top: 1px solid var(--rule); }
.links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
  padding-block: 23px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.label { grid-column: 1; font-size: 1.375rem; }
.dest { grid-column: 1; color: var(--muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.arrow { grid-column: 2; grid-row: 1; color: var(--muted); }
.links a:hover, .links a:focus-visible { color: var(--accent-text); }
.links a:hover .label, .links a:focus-visible .label { text-decoration: underline; text-underline-offset: 5px; }
.links a:hover .arrow, .links a:focus-visible .arrow { color: inherit; }
footer { display: flex; justify-content: space-between; gap: 16px; padding-block: 22px; border-top: 1px solid var(--rule); }

@media (max-width: 800px) {
  .top { min-height: 72px; }
  .top .micro { max-width: 24ch; text-align: right; }
  main { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 7svh, 64px); padding-block: 40px; }
  h1 { font-size: calc((100vw - var(--pad) - var(--pad)) / 7.7); line-height: 1.02; }
  .links a { padding-block: 18px; }
  .label { font-size: 1.125rem; }
  .dest { font-size: 0.75rem; }
}