/* navid.tech — base.css — reset, elements, typography, focus, layout
   primitives, prose, motion, print. Load after tokens.css. Docs: docs/DESIGN.md */

/* 1. Reset / normalize */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default margins; vertical rhythm is set deliberately below. */
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre { margin: 0; }
ul[class], ol[class] { padding-left: 0; list-style: none; }
html {
  /* Sticky header offset for in-page anchors + smooth scroll (opt-out below). */
  scroll-padding-top: calc(var(--header-height) + var(--space-lg));
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 2;
}
body {
  min-height: 100svh; margin: 0; background-color: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--text-base);
  font-weight: var(--weight-regular); line-height: var(--leading-body);
  font-synthesis-weight: none; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: proportional-nums; overflow-wrap: break-word;
}
img, picture, svg, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
svg { fill: currentColor; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }

/* Respect the author's line breaks in addresses. */
address { font-style: normal; }
[hidden] { display: none !important; }

/* 2. Typography — serif display stack for headings (scholarly, not template-y),
   system sans for body. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h4 {
  font-size: var(--text-lg); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h5 {
  font-size: var(--text-md); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h6 {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}
p { text-wrap: pretty; }
small { font-size: var(--text-sm); }
strong, b { font-weight: var(--weight-semibold); }
em, i { font-style: italic; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }
sub, sup { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
mark {
  background-color: var(--bg-warm-soft); color: var(--text); padding: 0.1em 0.25em;
  border-radius: var(--radius-xs);
}
hr {
  height: 0; margin-block: var(--space-xl); border: 0;
  border-top: var(--hairline);
}

/* 3. Links */
a {
  color: var(--link); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: var(--transition-color), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
a:visited { color: var(--link-visited); }
a:visited:hover { color: var(--link-hover); }

/* Links that are structural (nav, cards, buttons) opt out of underlines. */
a.u-plain, a.u-plain:visited { text-decoration: none; color: inherit; }
a.u-plain:hover { color: var(--link-hover); }

/* External-link marker for prose only; purely decorative. */
.prose a[target="_blank"]::after {
  content: "\2197"; display: inline-block; margin-inline-start: 0.15em; font-size: 0.8em;
  text-decoration: none; vertical-align: baseline;
}

/* 4. Focus */
:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs);
}

/* Remove the UA ring only where :focus-visible is supported. */
:focus:not(:focus-visible) { outline: none; }

/* Programmatically focused regions (skip-link targets) should not shout. */
[tabindex="-1"]:focus { outline: none; }

/* 5. Selection and scrollbars */
::selection {
  background-color: var(--selection-bg); color: var(--selection-text); text-shadow: none;
}
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* 6. Skip link — first child of <body>:
   <a class="skip-link" href="#main">Skip to content</a> */
.skip-link {
  position: fixed; top: var(--space-xs); left: var(--space-xs); z-index: var(--z-skiplink);
  padding: var(--space-xs) var(--space-md); background-color: var(--bg-surface);
  color: var(--text); border: var(--border-width) solid var(--border-accent);
  border-radius: var(--radius-sm); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); text-decoration: none;
  transform: translateY(calc(-100% - var(--space-md)));
  transition: transform var(--dur-base) var(--ease-out);
}
/* The shadow is applied only while focused: off-screen it is drawn outside the
   element's own box and leaves a pale sliver across the top of every page. */
.skip-link:focus { transform: translateY(0); box-shadow: var(--shadow-md); }

/* 7. Layout primitives */
.container {
  width: 100%; max-width: var(--container-md); margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.container--xs { max-width: var(--container-xs); }
.container--prose { max-width: var(--container-prose); }
.container--sm { max-width: var(--container-sm); }
.container--lg { max-width: var(--container-lg); }
.container--xl { max-width: var(--container-xl); }
.container--flush { padding-inline: 0; }

/* Vertical rhythm between page sections.
   A full --space-section on both sides of a boundary is band spacing: it is
   right when the background changes, and far too much when it does not. The
   two adjacency rules below halve the gap where a page head, a hero or a
   plain section runs straight into another section of the same ground. */
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-section-tight); }
/* Page head into its own content, same ground, no rule between: one step. */
.section--tight + .section:not(.section--alt):not(.section--inverse) { padding-block-start: 0; }
/* Across the hero's rule and colour change: one step from each side. */
.hero + .section { padding-block-start: var(--space-section-tight); }
.section--alt { background-color: var(--bg-surface); }
/* Inside a lifted band, surfaces flip to the page ground so cards and panels
   still read as raised rather than dissolving into the band. Holds in both
   themes, because both tokens swap together. */
.section--alt :is(.card:not(.card--flat), .panel) { background-color: var(--bg); }
.section--inverse {
  /* Local token remap: the light-theme accent is only 2.65:1 on navy. */
  --link: var(--c-teal-400); /* 9.08:1 */ --link-hover: var(--c-teal-300); /* 11.0:1 */
  --link-visited: var(--c-violet-300); /* 7.87:1 */
  --text-secondary: var(--c-navy-200); /* 8.83:1 */
  --text-muted: var(--c-navy-300); /* 6.42:1 */
  --border: var(--c-navy-600); --focus-ring: var(--c-teal-400); /* 9.08:1 */
  background-color: var(--bg-inverse); color: var(--text-inverse);
}
.section--inverse h1, .section--inverse h2, .section--inverse h3, .section--inverse h4 {
  color: var(--text-inverse);
}

/* Generic owl-style stack: children get consistent spacing, no margin math. */
.stack > * + * { margin-block-start: var(--flow, var(--space-md)); }
.stack--sm { --flow: var(--space-sm); }
.stack--lg { --flow: var(--space-lg); }
.stack--xl { --flow: var(--space-xl); }

/* Main landmark: <main id="main" tabindex="-1"> */
main { display: block; }

/* 8. Prose — wrap long-form bodies in <div class="prose"> ... </div> */
.prose {
  max-width: var(--measure); font-size: var(--text-md); line-height: var(--leading-loose);
  color: var(--text-secondary);
}
.prose > * + * { margin-block-start: var(--space-md); }
.prose h2 {
  margin-block-start: var(--space-2xl); margin-block-end: var(--space-xs);
  font-size: var(--text-xl);
}
.prose h3 {
  margin-block-start: var(--space-xl); margin-block-end: var(--space-3xs);
  font-size: var(--text-lg);
}
.prose h2 + *, .prose h3 + * { margin-block-start: var(--space-xs); }
.prose :is(h2, h3, h4, strong) { color: var(--text); }
.prose ul, .prose ol { padding-inline-start: var(--space-lg); }
.prose li + li { margin-block-start: var(--space-2xs); }
.prose li::marker { color: var(--accent-quiet); }
.prose img, .prose figure { margin-block: var(--space-xl); }
.prose figure img { border-radius: var(--radius-md); }
.prose figcaption {
  margin-block-start: var(--space-xs); font-size: var(--text-sm); color: var(--text-muted);
}
.prose dt { font-weight: var(--weight-semibold); color: var(--text); }
.prose dd { margin-inline-start: 0; margin-block-end: var(--space-sm); }

/* First paragraph of an article can be lifted with .lede */
.lede {
  font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-secondary);
  letter-spacing: var(--tracking-snug);
}

/* 9. Small utilities (kept intentionally few) */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.u-muted { color: var(--text-muted); }
.u-secondary { color: var(--text-secondary); }
.u-accent { color: var(--accent); }
.u-mono { font-family: var(--font-mono); font-size: 0.92em; }
.u-center { text-align: center; }
.u-measure { max-width: var(--measure); }
.u-measure-narrow { max-width: var(--measure-narrow); }
.u-nowrap { white-space: nowrap; }
.u-eyebrow {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent);
}

/* 10. Motion preferences */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  /* Keep state changes legible without movement. */
  .card:hover, .btn:hover { transform: none !important; }
}

/* 11. Print — tuned for the CV and publications pages */
@page { margin: 16mm 14mm; }
@media print {
  :root {
    --bg: #ffffff; --bg-surface: #ffffff; --bg-subtle: #ffffff; --bg-inset: #ffffff;
    --bg-accent-soft: #ffffff; --text: #000000; --text-secondary: #1a1a1a;
    --text-muted: #3d3d3d; --accent: #000000; --link: #000000; --link-visited: #000000;
    --border: #999999; --shadow-xs: none; --shadow-sm: none; --shadow-md: none;
    --shadow-lg: none;
  }
  html, body {
    background: #fff !important; color: #000 !important; font-size: 10.5pt; line-height: 1.42;
  }
  /* Chrome off. */
  .site-header, .site-footer, .nav, .nav-toggle, .nav-toggle-label, .to-top, .theme-toggle, .pagination, .skip-link, .card__cta, .no-print, nav[aria-label="Breadcrumb"] {
    display: none !important;
  }
  .print-only { display: block !important; }
  main, .container, .container--lg, .container--xl, .prose {
    max-width: none !important; width: auto !important; padding: 0 !important;
    margin: 0 !important;
  }
  .section { padding-block: 0 8pt !important; }
  a { text-decoration: none; color: #000 !important; }
  /* Show destinations for real links, not for in-page or mail-obfuscation. */
  .prose a[href^="http"]::after, .pub-item a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 8.5pt; color: #333; word-break: break-all;
  }
  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid-page; }
  h1 { font-size: 18pt; }
  h2 { font-size: 13pt; border-bottom: 0.5pt solid #999; padding-bottom: 2pt; }
  h3 { font-size: 11pt; }
  p, li, blockquote, figure, tr, .pub-item, .card, .timeline__item {
    page-break-inside: avoid; break-inside: avoid;
  }
  .card, .pub-item, .panel {
    border: 0.5pt solid #bbb !important; box-shadow: none !important; padding: 6pt 0 !important;
    background: none !important;
  }
  .tag, .pill {
    border: 0.5pt solid #777 !important; background: none !important; color: #000 !important;
  }
  /* CV: the timeline rail and its dots are screen furniture. On paper the
     dates already order the entries, so drop the rail and reclaim the indent. */
  .timeline__item {
    border-inline-start: 0 !important; padding-inline-start: 0 !important;
    padding-block-end: 9pt !important;
  }
  .timeline__item::before { display: none !important; }
  .timeline__item ul { padding-inline-start: 12pt !important; }
  .timeline__dates { font-size: 8.5pt; }
  .section--tight + .section, .hero + .section { padding-block-start: 0 !important; }
  /* Publications: the year rail becomes a plain left column. */
  .pub-item { padding-block: 5pt !important; }
  .pub-item__year { border-inline-end: 0 !important; }
  .pub-item details { display: none !important; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  blockquote { border-left: 1.5pt solid #000; }
  pre { white-space: pre-wrap; border: 0.5pt solid #bbb; }
  abbr[title]::after { content: " (" attr(title) ")"; }
}