:root,
[data-theme="light"] {
  --bg: #f7f8fa;
  --surface: #fbfcfd;
  --surface-2: #eef1f4;
  --line: #d8dee9;
  --line-strong: #c5ccd8;
  --text: #101218;
  --muted: #5d6573;
  --faint: #8a93a2;
  --accent: #5e81ac;
  --inverse: #0f1217;
  --inverse-text: #f7f8fa;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --text-xxs: .65rem;
  --text-xs: .77rem;
  --text-sm: .88rem;
  --text-base: 1rem;
  --text-lg: 1.22rem;
  --text-xl: clamp(2.5rem, 1.95rem + 1.8vw, 4.45rem);
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --content: 1320px;
  --sidebar: 160px;
  --spine: 1px;
}

[data-theme="dark"] {
  --bg: #161a20;
  --surface: #1b2028;
  --surface-2: #202632;
  --line: #313846;
  --line-strong: #475061;
  --text: #edf1f7;
  --muted: #b0b9c8;
  --faint: #7f8998;
  --accent: #81a1c1;
  --inverse: #edf1f7;
  --inverse-text: #11151b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--text-base)/1.58 var(--body);
}
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: .18em;
}
a:hover,
a:focus-visible {
  color: var(--accent);
  text-decoration: underline dotted;
}
button { font: inherit; }
img { display: block; max-width: 100%; height: auto; }

.page {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-5) var(--space-6) var(--space-20);
}

.topline-wrap {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  gap: var(--space-8);
  align-items: end;
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--line);
}
.brand-slot {
  display: flex;
  align-items: center;
  min-height: 46px;
}
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .16rem .38rem .13rem;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 4px;
  font-family: 'Satoshi', var(--body);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  white-space: nowrap;
  color: var(--text);
}
.wm-stem {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.058em;
}

.wm-eo {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.07em;
  margin-left: -.028em;
  display: inline-flex;
  align-items: baseline;
}

.wm-slash {
  display: inline-block;
  font-weight: 500;
  margin-inline: -.04em -.048em;
  transform: translateY(.016em) scaleX(.84);
  transform-origin: center;
  opacity: .72;
}
.topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.nav-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-width: 0;
  flex: 1;
}
.nav-inline a {
  display: inline-flex;
  align-items: baseline;
  gap: .44rem;
  white-space: nowrap;
  padding: .12rem 0;
}
.num,
.meta,
.stamp,
.code-small,
.caption-code,
.toggle-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.word {
  font-size: var(--text-xs);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}
.nav-inline a:hover .word,
.nav-inline a:hover .num,
.nav-inline a[aria-current="page"] .word,
.nav-inline a[aria-current="page"] .num {
  color: var(--accent);
}
.top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.theme-button {
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--text);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
}
.theme-icon {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  position: relative;
  display: block;
  background: transparent;
  color: var(--text);
}
.theme-icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  right: 2px;
  top: 2px;
}
[data-theme="dark"] .theme-icon {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
[data-theme="dark"] .theme-icon::after { background: var(--bg); }

.frame {
  display: grid;
  grid-template-columns: var(--sidebar) var(--spine) minmax(0, 1fr);
  gap: var(--space-8);
}
.identity {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-1);
  align-content: start;
  justify-items: start;
}
.identity-brief,
.identity p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
}
.identity p { max-width: 16ch; }
.identity-links-block {
  margin-top: 30px;
  display: grid;
  gap: var(--space-3);
  opacity: .78;
}
.identity-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .38rem;
}
.identity-links li:last-of-type { margin-top: .25rem; }
.identity-links a {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}
.identity-links-block:hover,
.identity-links-block:focus-within { opacity: .96; }
.spine { background: linear-gradient(var(--line-strong), var(--line)); }
.main { display: grid; gap: var(--space-24); }

.page-head,
.hero-copy {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}
.page-head > .stamp,
.hero-copy > .stamp {
  margin: 0;
}
.page-head > h1,
.hero-copy > h1 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: .95;
  letter-spacing: -.055em;
  max-width: 12ch;
}
.page-head > .lede,
.hero-copy > .lede {
  margin: 0;
  max-width: 58ch;
  color: var(--muted);
}
.page-head > .subnav {
  margin-top: -.25rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(320px, 420px);
  gap: var(--space-12);
  align-items: start;
  padding-top: var(--space-2);
}
.image-panel {
  display: grid;
  gap: var(--space-3);
  justify-self: end;
  width: 100%;
  max-width: 420px;
}
.hero-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center center;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  filter: grayscale(100%);
}
[data-theme="dark"] .hero-image {
  filter: grayscale(100%) sepia(35%) hue-rotate(175deg) saturate(140%) brightness(.88) contrast(.95);
}
.image-caption {
  max-width: 50ch;
  color: var(--muted);
  font-size: var(--text-sm);
}
.quiet-endmark {
  display: inline-block;
  width: .7em;
  height: .7em;
  border: 1px solid currentColor;
  margin-left: .55rem;
  vertical-align: middle;
  opacity: .55;
}

.section {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.section-body {
  display: grid;
  gap: var(--space-5);
}
.section-head {
  display: grid;
  gap: var(--space-2);
  max-width: 62ch;
}
.section-head h2 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  max-width: 58ch;
}
.inline-more,
.section-head p a,
.record-copy a,
.subnav a {
  color: color-mix(in srgb, var(--accent) 72%, var(--muted));
}
.code-link {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cjk-title {
  font-weight: 400;
  font-size: .92em;
  color: var(--muted);
  letter-spacing: 0;
}
.inline-meta {
  display: inline-block;
  padding-left: 0;
  font-size: .82em;
  color: var(--muted);
  white-space: normal;
  opacity: .75;
}
.two-col-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  max-width: 900px;
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}
.two-col-note p { margin: 0; color: var(--muted); }

.record-list { display: grid; }
.record {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.record:first-child { border-top: 1px solid var(--line-strong); }
.record-code {
  grid-column: 1;
  grid-row: 1;
  padding-top: .15rem;
  opacity: .9;
}
.record-main {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: var(--space-2);
  max-width: 62ch;
}
.record-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  max-width: clamp(30ch, 42vw, 42ch);
}
.record-copy {
  color: var(--muted);
  max-width: 60ch;
}
.record-copy p { margin: 0; }

footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-10);
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--text-xxs);
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 1120px) {
  .topline-wrap { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .frame { grid-template-columns: 1fr; }
  .spine { display: none; }
  .identity {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-10);
  }
  .hero,
  .section,
  .record,
  .two-col-note { grid-template-columns: 1fr; }
  .image-panel { justify-self: start; max-width: 360px; }
}

@media (max-width: 760px) {
  .page { padding: var(--space-4) var(--space-4) var(--space-16); }
  .top-actions { margin-left: auto; }
  .identity { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}