@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-latin-variable.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --background: #141414;
  --text: #dedbd5;
  --heading: #f0ede7;
  --muted: #a6a29b;
  --line: #30302d;
  --focus: #e6c998;
  font-family: Newsreader, Georgia, 'Times New Roman', serif;
  font-synthesis: none;
  font-optical-sizing: auto;
  background: var(--background);
  color: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; }
::selection { background: #dedbd5; color: #141414; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--heading); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; border-radius: 1px; }
p, h1, h2, h3 { margin: 0; }

.page { width: min(100% - 48px, 656px); margin-inline: auto; padding-block: 88px 36px; }
.skip-link { position: absolute; top: 12px; left: 12px; padding: 10px; background: var(--background); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
h1 { color: var(--heading); font-size: clamp(32px, 5vw, 40px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.intro { margin-top: 22px; max-width: 610px; font-size: 21px; line-height: 1.55; }
.now { margin-top: 16px; font-size: 21px; line-height: 1.55; }

.section { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); }
.label, .period, .role, .footer { font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: 12px; font-weight: 400; line-height: 1.65; color: var(--muted); }
.label { font-size: 13px; letter-spacing: 0.035em; }
.links { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 0; margin: 8px 0 -8px; list-style: none; }
.links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; }
.work { padding: 0; margin: 25px 0 0; list-style: none; }
.work > li + li { margin-top: 28px; }
.work-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
h3 { color: var(--heading); font-size: 21px; line-height: 1.35; font-weight: 500; }
.period { white-space: nowrap; }
.role { margin-top: 3px; }
.summary { margin-top: 10px; font-size: 19px; line-height: 1.5; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer a { min-height: 44px; display: inline-flex; align-items: center; }
.footer span { align-self: center; }

@media (max-width: 520px) {
  .page { width: calc(100% - 40px); padding-block: 48px 24px; }
  .intro, .now { font-size: 20px; }
  .work-heading { flex-direction: column; gap: 3px; }
  .summary { font-size: 18px; }
  .section { margin-top: 30px; }
}

@media print {
  :root { --background: white; --text: #222; --heading: #111; --muted: #555; --line: #ccc; color-scheme: light; }
  .page { padding-block: 24px; }
  .skip-link { display: none; }
  .work > li { break-inside: avoid; }
}