/* Hallmark · macrostructure: Index-First · tone: editorial · anchor hue: 80 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 */
/* Theme: Studio. Nav: N9, one external destination. Footer: Ft1. */
@import url("./tokens.css");

@font-face {
  font-family: "Newsreader";
  src: url("./assets/newsreader-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./assets/plex-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 101%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 95%;
  ascent-override: 101%;
  descent-override: 27%;
  line-gap-override: 0%;
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: var(--space-lg); }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { color: var(--color-paper); background: var(--color-accent); }
a {
  color: var(--color-accent);
  text-decoration-thickness: var(--rule-width);
  text-underline-offset: 0.25em;
  transition: color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--color-ink); text-decoration-thickness: 2px; }
a:active { color: var(--color-muted); }
a[aria-disabled="true"] { color: var(--color-muted); pointer-events: none; text-decoration: none; }
a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 5px;
  border-radius: var(--radius-sm);
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 700; }
h1 { font-size: var(--text-display); line-height: 1.15; letter-spacing: -0.025em; }
h2 { font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.015em; }
h3 { font-size: var(--text-md); font-weight: 600; line-height: 1.4; }
.shell { width: min(100%, var(--page-width)); margin-inline: auto; padding-inline: var(--page-gutter); }
.skip {
  position: absolute;
  inset-inline-start: var(--space-md);
  top: var(--space-md);
  z-index: var(--z-raised);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.wordmark {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link, .action, .foot-link { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-xs); line-height: 1; }
.nav-link { font-size: var(--text-sm); }
.intro { padding-block: var(--space-2xl) var(--space-xl); display: grid; gap: var(--space-lg); }
.intro-copy { max-width: 35ch; color: var(--color-muted); font-size: var(--text-md); line-height: 1.5; }
.jump-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-top: var(--space-sm); }
.jump-links a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.index-section { padding-block: var(--space-xl); border-top: var(--rule-width) solid var(--color-rule); }
.index-section > h2 { margin-bottom: var(--space-lg); }
.about-copy { max-width: 64ch; display: grid; gap: var(--space-md); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); padding-block-start: var(--space-lg); margin: 0; }
.facts div { min-width: 0; }
.facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.facts dd { margin: 0; }
.project { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); }
.project + .project { border-top: var(--rule-width) solid var(--color-rule); }
.project-title { display: grid; gap: var(--space-xs); align-content: start; }
.category { color: var(--color-muted); font-size: var(--text-sm); }
.project-body { display: grid; gap: var(--space-md); }
.project-body p { max-width: 62ch; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding: 0; margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.tags li + li::before { content: "·"; padding-inline-end: var(--space-md); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); }
.action { font-weight: 600; }
.note { padding-block: var(--space-lg); display: grid; gap: var(--space-xs); }
.note + .note { border-top: var(--rule-width) solid var(--color-rule); }
.elsewhere { list-style: none; padding: 0; margin: 0; }
.elsewhere li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.elsewhere .detail { color: var(--color-muted); font-size: var(--text-sm); }
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-lg);
  border-top: var(--rule-width) solid var(--color-rule);
  padding-block: var(--space-xl);
}
.footer-name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }
.footer-copy { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-xs); }
@media (min-width: 40rem) {
  .intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; padding-block: var(--space-3xl) var(--space-2xl); }
  .jump-links { grid-column: 1 / -1; }
  .project { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--space-xl); }
  .index-section { padding-block: var(--space-xl) var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}