: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; }
.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(3rem, 13.7vw, 12rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
h1 > span { display: block; }
.dot { color: var(--accent); }
.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)) / 3.9); line-height: 1.02; }
  .links a { padding-block: 18px; }
  .label { font-size: 1.125rem; }
  .dest { font-size: 0.75rem; }
}