:root {
  --page: #ffffff;
  --surface: #ffffff;
  --ink: #0c1a2b;
  --muted: #526273;
  --faint: #7e8b99;
  --line: #d3dce6;
  --accent: #0067b9;
  --accent-strong: #004d8c;
}

.site-brand,
.header-download,
.hero-kicker,
.hero h1 small,
.hero-contact,
.overview strong,
.section-index,
.entry-meta time,
.honor-entry time,
.compact-entry time,
.footer-links,
.footer-note { font-family: var(--mono); }

.hero {
  grid-template-columns: minmax(0, 1fr) 178px;
  padding-top: 68px;
}

.hero-visual { width: 156px; height: 196px; }
.portrait-frame { border: 1px solid var(--accent); }
.hero-mark {
  right: -10px;
  bottom: -20px;
  display: block;
  color: color-mix(in srgb, var(--accent) 12%, transparent);
  font-family: var(--mono);
  font-size: 64px;
  letter-spacing: -0.12em;
}

.hero-kicker::before { content: "> "; }
.hero h1 { font-size: clamp(54px, 6.8vw, 78px); }
.hero-identity { color: var(--accent); font-family: var(--mono); font-size: 12px; }
.overview { border-top: 1px solid var(--line); }
.overview div { justify-content: flex-start; }

.section-heading {
  grid-template-columns: 46px 1fr;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-heading::after { right: auto; left: 0; width: 7px; height: 100%; bottom: 0; transform: scaleY(0); transform-origin: top; }
.section-heading.is-visible::after { animation-name: rail-in; }
.section-heading h2 { color: var(--ink); font-family: var(--mono); font-size: 22px; }
.section-heading h2::before { color: var(--accent); content: "// "; }
.entry-head h3 { font-family: var(--mono); font-size: 19px; }
.text-link { font-family: var(--mono); }
.honor-entry:hover,
.compact-entry:hover,
.skill-list li:hover { background: #f6faff; }

@keyframes rail-in { to { transform: scaleY(1); } }

@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr 88px; padding-top: 42px; }
  .hero-visual { width: 84px; height: 112px; }
  .hero-mark { display: none; }
  .overview div { justify-content: flex-start; }
}