/* ==========================================================================
   Site styles: mobile-first.
   Base rules target phones; min-width media queries add tablet/desktop layout.
   ========================================================================== */

/* ---------- Design tokens ---------- */
/* One warm dark theme for every visitor: dark brown, warm off-white text, yellow highlights. */
:root {
  --bg: #17120d;
  --surface: #211a14;
  --surface-2: #2c241c;
  --text: #f2e9d8;
  --muted: #b5a891;
  --border: #3b3128;
  --accent: #f2c14e;
  --accent-hover: #ffd36e;
  --accent-soft: #3a2e13;
  --on-accent: #1c1508;
  --shadow: none;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --gutter: 1.25rem;
  --maxw: 66rem;

  color-scheme: dark;
}

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

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

/* Keeps hidden elements hidden even when a class (like .button) sets display. */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-hover);
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

/* Chemical formulas (Li₄ZrF₈, CO₂) without uneven line spacing. */
sub,
sup {
  line-height: 0;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: -9999px;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: 0.75rem;
}

.eyebrow {
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  max-width: 36rem;
  font-size: 1.125rem;
  color: var(--muted);
}

/* ---------- Page transitions ----------
   Browsers that support cross-page view transitions (Safari 18.2+, Chrome 126+)
   animate between pages; others simply change page. To and from the home page the
   whole screen blurs and fades into the next one. Between sections the content slides
   while the header stays put, and the name and menu links glide.

   assets/js/transitions.js sets the classes on <html> that pick the transition:
   vt-leaving-home / vt-leaving-to-home on the page left, vt-from-home / vt-to-home on
   the page arrived at, vt-forward / vt-back between pages. It also names the menu links
   (nav-apps, nav-info, ...) from their data-nav. The layers of a transition are styled by
   the page being arrived at, so every rule lives here in the shared file. */
@view-transition {
  navigation: auto;
}

:root {
  --vt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Pieces that stay put or glide from their old spot to their new one between pages. */
.site-name,
.brand {
  view-transition-name: site-name;
}

.site-header {
  view-transition-name: site-header;
}

.code-top {
  view-transition-name: code-top; /* the project title stays while files change under it */
}

.site-name,
.brand,
[data-nav] {
  view-transition-class: vt-text;
}

/* To and from home nothing glides: the screen is captured whole, so it blurs as one. */
.vt-leaving-home .site-name,
.vt-leaving-to-home .site-header,
.vt-leaving-to-home .brand,
.vt-leaving-to-home .code-top,
.vt-from-home .site-header,
.vt-from-home .brand,
.vt-from-home .code-top,
.vt-to-home .site-name {
  view-transition-name: none;
}

::view-transition {
  background: var(--bg);
}

/* Default: a cross-fade, with the content rising slightly. */
::view-transition-group(*) {
  animation-duration: 380ms;
  animation-timing-function: var(--vt-ease);
}

::view-transition-old(root) {
  animation: 180ms ease-out both page-out;
}

::view-transition-new(root) {
  animation: 380ms var(--vt-ease) 60ms both page-in;
}

/* Text keeps its proportions while it grows or shrinks between pages. */
::view-transition-old(*.vt-text),
::view-transition-new(*.vt-text),
::view-transition-old(site-name),
::view-transition-new(site-name),
::view-transition-old(nav-apps),
::view-transition-new(nav-apps),
::view-transition-old(nav-info),
::view-transition-new(nav-info) {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Page to page, and file to file in the code browser: the header stays still; the
   content slides the way the visitor is going (Apps, code, Info run left to right;
   the browser's back button goes back). */
.vt-back {
  --vt-dir: -1;
}

.vt-forward::view-transition-old(root),
.vt-back::view-transition-old(root) {
  animation: 200ms ease-in both vt-slide-out;
}

.vt-forward::view-transition-new(root),
.vt-back::view-transition-new(root) {
  animation: 380ms var(--vt-ease) 80ms both vt-slide-in;
}

/* Home <-> any page: the whole screen blurs from one page into the next. The old screen
   blurs while it is still clearly there and only then fades; the new one fades in still
   blurred and then sharpens. So the blur peaks while both screens show, not once they
   are nearly see-through, where it looks like a plain fade. A slight zoom moves in when
   leaving home and back out when returning to it, so the change still reads as a move in
   a browser that doesn't draw the blur. */
.vt-from-home {
  --vt-zoom: 1;
}

.vt-to-home {
  --vt-zoom: -1;
}

.vt-from-home::view-transition-old(root),
.vt-from-home::view-transition-new(root),
.vt-to-home::view-transition-old(root),
.vt-to-home::view-transition-new(root) {
  mix-blend-mode: normal;
}

.vt-from-home::view-transition-old(root),
.vt-to-home::view-transition-old(root) {
  animation: 340ms ease-in-out both vt-blur-out;
}

.vt-from-home::view-transition-new(root),
.vt-to-home::view-transition-new(root) {
  animation: 440ms ease-in-out 60ms both vt-blur-in;
}

@keyframes page-out {
  to {
    opacity: 0;
  }
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes vt-slide-out {
  to {
    opacity: 0;
    transform: translateX(calc(var(--vt-dir, 1) * -24px));
  }
}

@keyframes vt-slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--vt-dir, 1) * 32px));
  }
}

/* Each property moves only between the keyframes that name it, so the zoom runs evenly
   from start to end while the blur and fade change pace at the middle keyframe. */
@keyframes vt-blur-out {
  55% {
    opacity: 0.85;
    filter: blur(14px);
  }
  to {
    opacity: 0;
    filter: blur(20px);
    transform: scale(calc(1 + var(--vt-zoom, 1) * 0.04));
  }
}

@keyframes vt-blur-in {
  from {
    opacity: 0;
    filter: blur(20px);
    transform: scale(calc(1 - var(--vt-zoom, 1) * 0.03));
  }
  45% {
    opacity: 0.85;
    filter: blur(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--text);
}

/* ---------- The SB mark ----------
   The S's lower bowl doubles as the B's upper bowl; the S peels off the top of the B's
   stem. Drawn inline with stroke="currentColor", so `color` sets it and it rides along in
   page transitions with the name. It is tall and narrow (about 1:2.4): size it by height. */
.brand-mark {
  flex: none;
  height: 2rem;
  width: auto;
  color: var(--accent);
  transition: color 0.15s;
}

.brand:hover .brand-mark {
  color: var(--accent-hover);
}

.site-nav ul {
  display: flex;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--surface-2);
}

@media (min-width: 30rem) {
  .site-header .container {
    column-gap: 1rem;
  }

  .site-nav ul {
    gap: 0.25rem;
  }

  .site-nav a {
    padding: 0 0.8rem;
  }
}

/* ---------- Buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.button-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.button-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.button-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.button-secondary:hover,
.button-secondary[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Page sections ---------- */
.hero {
  padding-block: 3rem 2.75rem;
}

.hero h1 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 6vw + 0.75rem, 4rem);
}

.page-header {
  padding-block: 2.5rem 1.5rem;
}

.page-header h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
}

.section {
  padding-block: 2.5rem;
}

.section + .section {
  border-top: 1px solid var(--border);
}

.page-header + .section {
  padding-top: 0;
}

@media (min-width: 48rem) {
  .hero {
    padding-block: 5.5rem 4.5rem;
  }

  .page-header {
    padding-block: 4rem 2rem;
  }

  .section {
    padding-block: 3.5rem;
  }
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s;
}

.card:has(.card-link):hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card-placeholder {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.card h3 {
  margin: 0;
  font-size: 1.125rem;
}

.card p {
  margin: 0;
  font-size: 0.975rem;
  color: var(--muted);
}

/* Stretches the title link over the whole card so the full card is tappable. */
.card-link {
  color: inherit;
  text-decoration: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.button-small {
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  font-size: 0.9375rem;
}

/* Install panel: the one-line command, wrapped so it never scrolls sideways on a phone. */
/* Without scripts, the install command shows under the card instead of a Launch button. */
.install-note {
  font-size: 0.875rem;
}

.install-note code {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- The setup sheet ----------
   A dialog that slides up from the bottom of the screen when Launch is pressed. */
.sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}

.sheet::backdrop {
  background: rgb(0 0 0 / 0.55);
  opacity: 0;
  transition: opacity 260ms ease-out;
}

.sheet.is-open::backdrop {
  opacity: 1;
}

.sheet-panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 36rem;
  max-height: 85dvh;
  margin: 0 auto;
  padding: 0.75rem var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  transform: translateY(100%);
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sheet.is-open .sheet-panel {
  transform: none;
}

.sheet-handle {
  width: 2.5rem;
  height: 0.3rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: var(--border);
}

.sheet-close {
  position: absolute;
  top: 0.9rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.sheet-close:hover {
  color: var(--text);
}

.sheet-title {
  margin: 0 2.5rem 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.sheet p {
  margin: 0 0 0.75rem;
}

.sheet-steps {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.sheet-steps li {
  margin-bottom: 0.9rem;
}

.sheet-steps li::marker {
  color: var(--accent);
  font-weight: 600;
}

.sheet code {
  display: block;
  margin: 0.5rem 0 0.6rem;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sheet-note,
.sheet-already {
  font-size: 0.875rem;
  color: var(--muted);
}

.sheet-already {
  margin-bottom: 0;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

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

.sheet-opening {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.25rem 0 0.5rem;
}

.sheet-opening p {
  margin: 0;
}

.spinner {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

body:has(.sheet[open]) {
  overflow: hidden; /* the page stays put behind the sheet */
}

@media (prefers-reduced-motion: reduce) {
  .sheet-panel,
  .sheet::backdrop {
    transition: none;
  }

  .spinner {
    animation-duration: 2s;
  }
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- Home: name and two buttons, centered on screen ---------- */
.home-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: max(2rem, env(safe-area-inset-top)) var(--gutter) max(2rem, env(safe-area-inset-bottom));
  text-align: center;
}

.home-mark {
  height: clamp(5.5rem, 14vw, 8rem);
  width: auto;
  margin-bottom: -0.25rem; /* the name sits close under the mark; the buttons keep the full gap */
  color: var(--accent);
}

.home-mark-link {
  display: block;
  color: var(--accent);
  border-radius: var(--radius-sm);
}

.home-mark-link:hover {
  color: var(--accent-hover);
}

.home-name {
  margin: 0;
  font-size: clamp(1.5rem, 3vw + 0.75rem, 2.25rem);
  font-weight: 600;
}

.home-buttons {
  display: flex;
  gap: 0.75rem;
}

.home-buttons .button {
  min-width: 8.5rem;
  min-height: 3.25rem;
  font-size: 1.0625rem;
}

/* ---------- Code browser ---------- */
.code-page {
  padding-block: 2rem 3rem;
}

.code-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.code-top h1 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
}

.code-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4rem;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.code-crumbs a {
  padding-block: 0.4rem;
  text-decoration: none;
}

.code-crumbs [aria-current] {
  color: var(--text);
}

.code-message {
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
}

.code-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.code-list li + li {
  border-top: 1px solid var(--border);
}

.code-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
}

.code-list a:hover {
  background: var(--surface-2);
}

.code-list a.is-dir {
  color: var(--accent);
}

.code-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.code-size {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.code-file-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.code-file-links {
  display: flex;
  gap: 1rem;
}

/* Long code lines scroll inside the box, never the whole page. */
.code-file {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 4;
}

.code-image {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* README and other Markdown, rendered. */
.markdown {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

.markdown-file {
  margin-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.markdown > :first-child {
  margin-top: 0;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  margin: 1.6em 0 0.5em;
}

.markdown h1 {
  font-size: 1.6rem;
}

.markdown h2 {
  font-size: 1.3rem;
}

.markdown h3,
.markdown h4 {
  font-size: 1.075rem;
}

.markdown ul,
.markdown ol {
  padding-left: 1.4rem;
}

.markdown code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.markdown :not(pre) > code {
  padding: 0.1em 0.35em;
  background: var(--surface-2);
  border-radius: 4px;
}

.markdown pre {
  padding: 0.9rem;
  overflow-x: auto;
  background: var(--bg);
  border-radius: var(--radius-sm);
  overflow-wrap: normal;
}

.markdown img {
  max-width: 100%;
  height: auto;
}

.markdown table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

.markdown th,
.markdown td {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
}

.markdown blockquote {
  margin: 0 0 1em;
  padding-left: 1rem;
  border-left: 3px solid var(--border);
  color: var(--muted);
}

.markdown hr {
  border: 0;
  border-top: 1px solid var(--border);
}

/* ---------- Resume ---------- */
.resume {
  padding-block: 2rem 3rem;
}

.resume-header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}

.resume-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw + 1rem, 2.75rem);
}

.resume-title {
  margin: 0.35rem 0 0.9rem;
  font-size: 1.125rem;
  color: var(--muted);
}

.resume-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.resume-contact li {
  color: var(--muted);
}

.resume-section {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--border);
}

.resume-section:last-child {
  border-bottom: 0;
}

.resume-section > h2 {
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.resume-section > div > p:last-child {
  margin-bottom: 0;
}

.entry + .entry {
  margin-top: 1.75rem;
}

.entry-head {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.5rem;
}

.entry-head h3 {
  margin: 0;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.entry-org {
  font-weight: 400;
  color: var(--muted);
}

.entry-dates {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.entry ul {
  margin: 0;
  padding-left: 1.1rem;
}

.entry li + li {
  margin-top: 0.35rem;
}

.skill-group + .skill-group {
  margin-top: 1.25rem;
}

.skill-group h3 {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.9rem;
}

@media (min-width: 40rem) {
  .resume-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .entry-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
}

@media (min-width: 48rem) {
  .resume {
    padding-block: 3.5rem 4rem;
  }

  .resume-section {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 2rem;
    padding-block: 2.25rem;
  }

  .resume-section > h2 {
    margin: 0.3rem 0 0;
  }
}

/* ---------- Print (resume "Save as PDF") ---------- */
@media print {
  :root {
    --bg: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --text: #000;
    --muted: #333;
    --border: #bbb;
    --accent: #000;
    color-scheme: light;
  }

  @page {
    margin: 0.55in 0.6in;
  }

  body {
    display: block;
    font-size: 10pt;
    line-height: 1.4;
  }

  .site-header,
  .skip-link,
  .no-print {
    display: none !important;
  }

  .container {
    max-width: none;
    padding: 0;
  }

  .resume {
    padding: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .resume-header {
    padding-bottom: 0.12in;
  }

  .resume-header h1 {
    font-size: 20pt;
  }

  .resume-title {
    margin: 0.04in 0 0.08in;
    font-size: 11pt;
  }

  .resume-contact {
    font-size: 9pt;
  }

  .resume-section {
    display: grid;
    grid-template-columns: 1.2in 1fr;
    gap: 0.2in;
    padding-block: 0.12in;
  }

  .resume-section > h2 {
    margin: 0.02in 0 0;
    font-size: 8.5pt;
  }

  .entry,
  .skill-group {
    break-inside: avoid;
  }

  .entry + .entry {
    margin-top: 0.12in;
  }

  .entry-head {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.03in;
  }

  .entry-head h3 {
    font-size: 10.5pt;
  }

  .entry-dates {
    font-size: 9pt;
  }

  .entry li + li {
    margin-top: 0.02in;
  }

  .skill-group + .skill-group {
    margin-top: 0.08in;
  }

  .skill-group h3 {
    margin-bottom: 0.03in;
    font-size: 9.5pt;
  }

  /* Chips print as a plain comma-separated line. */
  .chips {
    display: block;
  }

  .chips li {
    display: inline;
    padding: 0;
    background: none;
    font-size: 9.5pt;
  }

  .chips li:not(:last-child)::after {
    content: ", ";
  }
}