@font-face {
  font-family: Bitter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/bitter-latin.woff2') format('woff2');
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/manrope-latin.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --page: #141616;
  --surface: #1c1f1f;
  --surface-hover: #252929;
  --ink: #ece9e3;
  --muted: #a4aaa7;
  --bronze: #b79a80;
  --line: #3b4140;
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; }
::selection { background: var(--bronze); color: var(--page); }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { width: min(1240px, calc(100% - 104px)); margin-inline: auto; padding-bottom: 36px; }
.site-header { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.wordmark { font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 28px; letter-spacing: -.06em; color: var(--bronze); }
.wordmark span { font-weight: 400; font-size: 25px; padding-left: 18px; }
.domain, footer { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.domain { overflow-wrap: anywhere; text-align: right; }
.layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 72px; margin-top: 48px; align-items: start; }
.profile, .identity { min-width: 0; }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: .95; object-fit: cover; object-position: center; border-radius: 6px; }
.identity { margin-top: 24px; }
h1 { font-family: Bitter, Georgia, serif; font-size: 82px; font-weight: 600; line-height: .99; letter-spacing: -.045em; margin: 0; }
.handle { font-family: Bitter, Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.5; color: var(--muted); margin: 13px 0 0; }
.links { display: grid; gap: 14px; align-content: start; min-width: 0; scroll-margin-top: 16px; }
.link-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 28px;
  min-height: 128px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
  transition: background-color 170ms ease, border-color 170ms ease;
  -webkit-tap-highlight-color: #b79a8024;
}
.link-icon { width: 42px; height: 42px; color: var(--bronze); }
.link-copy { min-width: 0; overflow-wrap: anywhere; }
.link-copy strong { display: block; font-size: 25px; font-weight: 650; line-height: 1.3; letter-spacing: -.022em; }
.link-copy > span { display: block; font-size: 17px; line-height: 1.5; color: var(--muted); margin-top: 5px; }
.arrow { color: var(--bronze); }
.arrow svg { width: 28px; height: 28px; stroke-width: 1.65; transition: transform 170ms ease; }
@media (hover: hover) {
  .link-card:hover { background: var(--surface-hover); border-color: #82705f; }
  .link-card:hover .arrow svg { transform: translate(2px, -2px); }
}
.link-card:focus-visible, .links:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
footer { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); margin-top: 44px; padding-top: 18px; line-height: 1.5; }
.skip-link { position: fixed; z-index: 10; top: 8px; left: 8px; padding: 12px 16px; color: var(--page); background: var(--bronze); border-radius: 4px; transform: translateY(-180%); }
.skip-link:focus { transform: none; outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 1300px) {
  .shell { width: calc(100% - 80px); }
  .layout { grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); gap: 52px; }
  h1 { font-size: clamp(60px, 6.25vw, 80px); }
  .handle { font-size: 20px; }
  .link-card { grid-template-columns: 36px minmax(0, 1fr) 24px; min-height: 116px; padding: 22px 26px; gap: 24px; }
  .link-icon { width: 36px; height: 36px; }
  .link-copy strong { font-size: 22px; }
  .link-copy > span { font-size: 15px; }
  .arrow svg { width: 24px; height: 24px; }
}

@media (max-width: 1000px) {
  .shell { width: min(720px, calc(100% - 48px)); }
  .site-header { height: 72px; }
  .layout { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .profile { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 28px; align-items: center; }
  .identity { margin: 0; }
  .portrait { width: 136px; height: 144px; }
  h1 { font-size: 51px; line-height: 1.03; }
  .handle { font-size: 17px; margin-top: 10px; }
  .link-card { min-height: 104px; }
  footer { margin-top: 32px; }
}

@media (max-width: 700px) {
  .shell { width: min(520px, calc(100% - 36px)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .site-header { min-height: 54px; height: auto; gap: 16px; padding-top: env(safe-area-inset-top); }
  .wordmark { font-size: 22px; }
  .wordmark span { font-size: 21px; padding-left: 10px; }
  .domain { font-size: 10px; letter-spacing: .06em; }
  .layout { gap: 26px; margin-top: 24px; }
  .profile { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; }
  .portrait { width: 88px; height: 102px; border-radius: 4px; }
  h1 { font-size: 35px; line-height: 1.04; letter-spacing: -.04em; }
  .handle { font-family: Manrope, sans-serif; font-size: 12px; line-height: 1.5; margin-top: 8px; }
  .links { gap: 10px; }
  .link-card { grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 14px; min-height: 90px; padding: 18px 17px; border-radius: 6px; }
  .link-icon { width: 26px; height: 26px; }
  .link-copy strong { font-size: 16px; line-height: 1.35; letter-spacing: -.025em; }
  .link-copy > span { font-size: 11px; line-height: 1.5; margin-top: 5px; }
  .arrow svg { width: 20px; height: 20px; }
  footer { font-size: 10px; letter-spacing: .01em; margin-top: 28px; padding-top: 16px; gap: 12px; }
}

@media (max-width: 359px) {
  .shell { width: calc(100% - 32px); }
  .profile { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .portrait { width: 76px; height: 92px; }
  h1 { font-size: 31px; }
  .handle { font-size: 11px; }
  .link-card { grid-template-columns: 23px minmax(0, 1fr) 18px; padding: 17px 12px; gap: 11px; }
  .link-icon { width: 23px; height: 23px; }
  .link-copy strong { font-size: 15px; }
  .link-copy > span { font-size: 10.5px; }
  .arrow svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}