/* ============================================================
   Sam Upra — personal site
   Palette: Solarized · Type: IBM Plex Sans + IBM Plex Mono
   Tokens first; everything below inherits from these.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light;
  --bg:            #fdf6e3;
  --surface:       #eee8d5;
  --ink:           #073642;  /* headings */
  --text:          #586e75;  /* body copy   */
  --muted:         #5f7280;  /* meta, dates */
  --border:        rgba(7, 54, 66, .14);
  --border-strong: rgba(7, 54, 66, .38);
  --link:          #1f77a8;  /* solarized blue, deepened for AA contrast */
  --link-dim:      rgba(31, 119, 168, .45);
  --tag:           #5f7300;  /* solarized green, deepened for AA contrast */
  --selection:     rgba(38, 139, 210, .22);
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #002b36;
  --surface:       #073642;
  --ink:           #fdf6e3;
  --text:          #839496;
  --muted:         #74909b;
  --border:        rgba(131, 148, 150, .22);
  --border-strong: rgba(131, 148, 150, .45);
  --link:          #2aa198;
  --link-dim:      rgba(42, 161, 152, .45);
  --tag:           #859900;
  --selection:     rgba(42, 161, 152, .28);
}

/* Pre-JS fallback: honor the OS preference before the inline script runs. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:            #002b36;
    --surface:       #073642;
    --ink:           #fdf6e3;
    --text:          #839496;
    --muted:         #74909b;
    --border:        rgba(131, 148, 150, .22);
    --border-strong: rgba(131, 148, 150, .45);
    --link:          #2aa198;
    --link-dim:      rgba(42, 161, 152, .45);
    --tag:           #859900;
    --selection:     rgba(42, 161, 152, .28);
  }
}

/* ---------- base ---------- */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}

::selection { background: var(--selection); }

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 1.75rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--bg);
  font: 500 .8125rem var(--mono);
  padding: .5rem .9rem;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: no-preference) {
  main { animation: rise .45s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- header ---------- */

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--border);
}

.wordmark {
  font: 500 1rem var(--mono);
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--link); }

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Every link reserves the same underline space (transparent when inactive),
   so activating a tab never shifts its height — the bug Sam flagged. */
.nav a {
  font: 500 .8125rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--border-strong);
}

.theme-toggle {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); }

:root[data-theme="dark"] .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun,
:root:not([data-theme]) .icon-sun   { display: none; }

/* ---------- hero / page heads ---------- */

main { padding-bottom: .5rem; }

.hero { margin-top: clamp(3rem, 9vh, 5.5rem); }

.page-head { margin-top: clamp(2.75rem, 7vh, 4.25rem); }

h1, h2, h3 { color: var(--ink); font-weight: 600; }

.hero-title {
  font-size: clamp(2.35rem, 5.2vw + 1rem, 3.35rem);
  line-height: 1.05;
  letter-spacing: -.028em;
  margin: 0 0 1.15rem;
  text-wrap: balance;
}

.page-title {
  font-size: clamp(1.9rem, 3vw + .8rem, 2.4rem);
  letter-spacing: -.02em;
  margin: 0 0 .8rem;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.62;
  max-width: 34em;
  margin: 0;
}

.lede-note {
  margin: 1rem 0 0;
  font: 400 .8125rem/1.6 var(--mono);
  color: var(--muted);
}

/* ---------- section labels ---------- */

.label {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 3.25rem 0 1rem;
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

/* ---------- post lists ---------- */

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-item {
  position: relative;
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: 0 1.25rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--border);
}
.post-list .post-item:last-child { border-bottom: 0; }

.post-date {
  font: 500 .8125rem/1.9 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding-top: .18rem;
}

.post-title {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}
.post-title::after { content: ""; position: absolute; inset: 0; }

.post-item:hover .post-title {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.post-title:focus-visible::after {
  outline: 2px solid var(--link);
  outline-offset: 4px;
  border-radius: 6px;
}

.post-summary {
  margin: .3rem 0 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--muted);
}

.post-tags {
  margin: .5rem 0 0;
  display: flex;
  gap: .9rem;
}
.tag {
  font: 500 .6875rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tag);
}

.more:hover { color: var(--link); }

.empty {
  color: var(--muted);
  font-style: italic;
  padding: .95rem 0;
}

/* ---------- AI engineering evidence ---------- */

.expertise-copy {
  max-width: 40rem;
}
.expertise-copy p {
  margin: 0 0 .9rem;
  font-size: 1rem;
  line-height: 1.72;
  text-wrap: pretty;
}
.expertise-copy a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--link-dim);
}
.expertise-copy a:hover { text-decoration-color: var(--link); }

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin-top: 1rem;
}
.profile-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font: 500 .75rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.profile-links a:hover { color: var(--link); }

/* ---------- experience rows ---------- */

.xp-item {
  grid-template-columns: 11rem 1fr;
}
.xp-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-top: .24rem;
}
.xp-org {
  font: 500 .6875rem/1.5 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tag);
}
.xp-years {
  font: 400 .6875rem/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* year groups on the archive */

.year-group { margin: 0 0 2.25rem; }
.year-group:last-child { margin-bottom: 0; }
.year-group .post-list { margin-top: .35rem; }

/* ---------- article / prose ---------- */

.backlink {
  display: inline-block;
  margin-bottom: 2rem;
  font: 500 .8125rem var(--mono);
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}
.backlink:hover { color: var(--link); }

.article-title {
  font-size: clamp(1.9rem, 3vw + .8rem, 2.5rem);
  letter-spacing: -.022em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .9rem;
  margin-top: .95rem;
  font: 400 .8125rem var(--mono);
  color: var(--muted);
}

.prose { margin-top: 2.5rem; }
.prose p {
  margin: 0 0 1.15rem;
  line-height: 1.75;
  font-size: 1.0325rem;
  text-wrap: pretty;
}
.prose a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--link-dim);
  transition: text-decoration-color .15s ease;
}
.prose a:hover { text-decoration-color: var(--link); }
.prose h2 {
  font-size: 1.375rem;
  letter-spacing: -.01em;
  margin: 2.4rem 0 .8rem;
}
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1.15rem; }
.prose li { margin-bottom: .4rem; line-height: 1.7; }

.prose code {
  font-family: var(--mono);
  font-size: .855em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .12em .38em;
  color: var(--ink);
}
.prose pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: .8438rem;
  line-height: 1.65;
}
.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 1em;
  color: inherit;
}

.prose blockquote {
  margin: 1.4rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--border-strong);
  color: var(--muted);
  font-style: italic;
}
.prose blockquote p { margin-bottom: .4rem; }

.endmark {
  margin-top: 3rem;
  text-align: center;
  font-family: var(--mono);
  letter-spacing: .6rem;
  color: var(--muted);
  user-select: none;
}

/* ---------- footer ---------- */

.site-footer {
  margin-top: 5.5rem;
  border-top: 1px solid var(--border);
}
.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding-block: 1.4rem 3rem;
  font: 400 .75rem var(--mono);
  letter-spacing: .03em;
  color: var(--muted);
}

/* ---------- post-to-post navigation ---------- */

.post-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-top: 2.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--border);
}
.post-nav:empty { display: none; }

.post-nav a {
  font: 500 .8125rem var(--mono);
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}
.post-nav a:hover { color: var(--link); }
.nav-next { margin-left: auto; text-align: right; }

/* ---------- large screens ---------- */

@media (min-width: 75em) {
  .wrap { max-width: 46rem; }
  .lede { font-size: 1.25rem; }
}

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  body { line-height: 1.55; }
  .bar { padding-block: .9rem; }
  /* comfortable touch targets */
  .nav {
    gap: .35rem;
  }
  .nav a {
    padding: .65rem .45rem;
  }
  .theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }
  .hero { margin-top: 2.5rem; }
  .page-head { margin-top: 2.25rem; }
  .label { margin-top: 2.5rem; }
  .nav { gap: 1rem; }
  .post-item,
  .xp-item {
    grid-template-columns: 1fr;
    gap: .15rem;
    padding: 1.05rem 0;
  }
  .post-date { line-height: 1; padding-top: 0; }
  /* full-row tappability on the title link */
  .post-title { display: inline-block; padding-block: .1rem; }
  .prose { overflow-wrap: break-word; }
}

/* ---------- extra-narrow screens (≤400px: iPhone SE, fold covers) ---------- */

@media (max-width: 400px) {
  .wordmark { font-size: .8125rem; }
  .nav { gap: .25rem; }
  .nav a {
    padding: .65rem .15rem;
    letter-spacing: .04em;
  }
  .xp-item { grid-template-columns: 1fr; }
}

/* ---------- print ---------- */

@media print {
  .theme-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .prose a { color: #000; }
}