/* Shared styles for the portfolio and articles. */

/* Palette */
:root {
  --bg: #ffffff;
  --paper: oklch(0.985 0.003 255);
  --wash: oklch(0.968 0.005 250);
  --ink: oklch(0.16 0.02 255);
  --muted: oklch(0.54 0.015 255);
  --rule: oklch(0.82 0.008 255);
  --rule-soft: oklch(0.89 0.006 255);
  --accent: oklch(0.45 0.15 255);
  --accent-bg: oklch(0.97 0.02 255);
  interpolate-size: allow-keywords;
}

/* Always reserve the scrollbar gutter. Without it, a page that fits exactly one
   screen gains a scrollbar the moment a row is expanded, and the whole layout
   jumps 15px sideways in the middle of the animation. The gutter is only
   honoured on a scroll container, hence the explicit overflow-y. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.keep-together, .rows summary .loc { white-space: nowrap; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 Helvetica, Arial, sans-serif;
  text-wrap: pretty;
}

.wrap {
  padding: 28px 32px 16px;
}

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

h1, h2, h3 { font-family: Helvetica, Arial, sans-serif; text-wrap: balance; }

h1 { font-size: 36px; font-weight: 700; margin: 0 0 8px; }
h2 { font-size: 24px; margin: 44px 0 16px; }
h2 .muted { font-size: 16px; font-weight: normal; }
h3 { font-size: 18px; margin: 28px 0 6px; }

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

sup { font-size: 13px; line-height: 0; }
sup a { text-decoration: none; }

.muted { color: var(--muted); }

/* full-bleed: content spans the available column */
p, ul { max-width: none; }

/* header */

.modified { margin: 0 0 6px; font-size: 13px; }
.contact { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

.tabs { margin-top: 0; padding-bottom: 0; }

.tabs button {
  font: inherit;
  background: none;
  cursor: pointer;
  display: flex;
  width: 100%;
  margin: 0;
  padding: 9px 2px 9px 12px;
  text-align: left;
  font-size: 15px;
  color: var(--ink);
  border: 0;
  border-left: 3px solid transparent;
  border-top: 1px solid var(--rule-soft);
}
.tabs button:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.tabs button:hover { background: var(--accent-bg); color: var(--accent); }

.tabs button[aria-selected="true"] {
  border-left-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  cursor: default;
}

/* on big screens the home page puts the header in a left column
   so the content can use the rest of the screen */


/* experience and repo rows */

.rows { border-bottom: 1px solid var(--rule-soft); margin: 12px 0; }

.rows details { border-top: 1px solid var(--rule-soft); }

.rows details:first-child { border-top: 0; }

.rows summary {
  padding: 18px 0;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 40px;
  row-gap: 4px;
  list-style: none;
}

/* custom disclosure marker, so the arrow sits well clear of the date */
.rows summary::-webkit-details-marker { display: none; }
.rows summary::marker { content: ""; }
.rows summary::before {
  content: "";
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  align-self: center;
  background: var(--ink);
  -webkit-mask: url("icons/chevron-right.svg") center / contain no-repeat;
  mask: url("icons/chevron-right.svg") center / contain no-repeat;
  transition: transform .22s ease;
  transform-origin: center;
}
.rows details[open] > summary::before { transform: rotate(90deg); }

.rows summary:hover { background: var(--accent-bg); }

.rows summary .when {
  flex: 0 0 11em;
  color: var(--muted);
}

.rows summary > b { flex: 0 1 auto; min-width: 15em; }

.rows summary .what { color: var(--muted); flex: 1 1 auto; }

.rows summary .desc {
  flex: 0 0 100%;
  margin: 4px 0 0;
  padding-left: calc(1em + 40px);
}

.rows details > div { padding: 6px 0 26px calc(1em + 40px); }

/* narrow screens: let the row stack, but keep everything aligned to one indent */
@media (max-width: 760px) {
  .rows summary { column-gap: 14px; padding: 14px 0; }
  .rows summary .when { flex: 0 0 auto; }
  .rows summary > b { flex: 0 0 100%; min-width: 0; }
  .rows summary .what { flex: 0 0 100%; }
  .rows summary > b,
  .rows summary .what,
  .rows summary .desc,
  .rows details > div { padding-left: calc(1em + 14px); }
}
.rows details ul { padding-left: 20px; }

.photos { display: flex; gap: 8px; margin: 14px 0 4px; }
.photos img { width: 33%; min-width: 0; }

/* tables: skills and transcript */

table { width: 100%; border-collapse: collapse; margin: 12px 0; border-bottom: 1px solid var(--rule-soft); }

.skills tbody tr:nth-child(even) { background: var(--accent-bg); }

th, td {
  text-align: left;
  vertical-align: top;
  padding: 8px 14px 8px 0;
  border-top: 1px solid var(--rule-soft);
}

th { border-top: 0; }


tr.note td {
  border-top: 0;
  padding: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

/* footnotes */

.footnotes p { margin: 6px 0; }

/* article pages */

.article {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.6;
}

.article h1 { font-size: 36px; line-height: 1.2; margin: 28px 0 10px; }

.article p, .article li { max-width: none; }

.article .byline { color: var(--muted); font-size: 14px; margin: 0 0 28px; }

.article figure { margin: 28px auto; max-width: 600px; }

.article figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

.article .credit { font-style: normal; display: block; }

.article .refs { font-size: 16px; }
.article .refs li { margin: 8px 0; }

/* article pages: directory on the left half, article on the right */

.dir nav a { display: block; margin: 0 0 10px; font-size: 18px; }

.dir .muted { font-size: 14px; }


/* Wide enough for the article to keep its measure and still have a margin:
   the index rail moves into that margin and stays there while you read. */


/* footer */

footer {
  margin-top: 56px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  color: var(--muted);
  font-size: 14px;
}


/* expanding a row: animate the height where supported, fade in everywhere */
.rows details::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size .28s ease, opacity .22s ease,
              content-visibility .28s allow-discrete;
}
.rows details[open]::details-content { block-size: auto; opacity: 1; }

@supports not selector(::details-content) {
  @keyframes rowReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
  .rows details[open] > div { animation: rowReveal .22s ease-out; }
}

/* involvement panels */
.involvement {
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  align-items: stretch;
  gap: 14px;
  margin: 18px 0 8px;
}


.involvement .inv-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 16px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.involvement .inv-card-aside {
  border-left: 3px solid var(--accent);
  padding: 14px 18px 16px 19px;
  gap: 6px;
  position: relative;
}

.inv-letters {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--accent);
  font-weight: 700;
}

.inv-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.inv-org { font-weight: 700; }
.inv-role { color: var(--muted); font-size: 14px; }
.inv-desc { margin: 0; }

.inv-article {
  display: block;
  background: var(--accent-bg);
  border: 1px solid var(--rule-soft);
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
}
.inv-article:hover { border-color: var(--accent); }
.inv-article-label {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.inv-article-title { display: block; color: var(--accent); font-weight: 600; }
.inv-article-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }

.inv-meta { font-size: 13px; color: var(--muted); }


/* ── tables: boxed, with side rules ─────────────────────────────────────── */
table { border: 1px solid var(--rule); }
th, td { padding: 9px 16px; }
thead th {
  background: var(--wash);
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
td + td, th + th { border-left: 1px solid var(--rule-soft); }

/* skills: level meter */
.skills td.level { white-space: nowrap; width: 15em; }
.skills .level-text {
  display: inline-block;
  width: 7.5em;
  font-size: 14px;
  color: var(--ink);
  vertical-align: middle;
}
.skills .barwrap {
  display: inline-grid;
  grid-template-columns: repeat(5, 16px);
  gap: 3px;
  vertical-align: middle;
}
.skills .barwrap span { height: 9px; background: var(--rule); }
.skills .barwrap span.on { background: var(--accent); }
.skills td:first-child { font-weight: 600; width: 14em; }
.skills td:last-child a { text-decoration: underline; text-underline-offset: 3px; }

.course:target, .inv-card:target, .rows details:target, .repos h3:target {
  scroll-margin-top: 24px;
}
.rows details:target::details-content,
.rows details:has(:target)::details-content { transition: none; }

html.has-skill-example { overflow: hidden; }
.skill-example {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 20px 80px rgb(0 0 0 / .18);
}
.skill-example[open] { display: flex; flex-direction: column; animation: exampleReveal .14s ease-out; }
.skill-example::backdrop { background: rgb(15 23 42 / .32); }
.skill-example-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--rule-soft);
}
.skill-example-label { margin: 0 0 8px; color: var(--accent); font-size: 13px; }
.skill-example h2 { margin: 0; padding: 0; border: 0; font-size: 24px; line-height: 1.25; }
.skill-example-meta { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.skill-example-meta:empty { display: none; }
.skill-example-close {
  flex: 0 0 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  font: 26px/1 Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.skill-example-close:hover { background: var(--accent-bg); }
.skill-example :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skill-example-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px; }
.skill-example-body > :first-child,
.skill-example-body > div > :first-child { margin-top: 0; }
.skill-example-body > :last-child,
.skill-example-body > div > :last-child { margin-bottom: 0; }
.skill-example-body h3 { margin-top: 26px; }
.skill-example-project + .skill-example-project { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule-soft); }
.skill-example-project h3 { margin: 0 0 8px; font-size: 18px; }
.skill-example-project p { margin: 0; color: var(--muted); }
@keyframes exampleReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .skill-example[open] { animation: none; } }
@media (max-width: 560px) {
  .skill-example { max-height: calc(100dvh - 24px); }
  .skill-example-header { padding: 20px; gap: 12px; }
  .skill-example-body { padding: 20px; }
}


/* transcript: each term reads as its own block */


/* the term heading sits attached to its table */
h3 + p.muted { margin-top: 2px; }

/* ── sidebar ────────────────────────────────────────────────────────────── */
.statblock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 20px 0 4px;
}
.statblock > div {
  background: var(--paper);
  padding: 12px 14px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.statblock .k {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.statblock .v {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.side-label {
  margin: 22px 0 8px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.side-links { list-style: none; margin: 0; padding: 0; }
.side-links li { border-top: 1px solid var(--rule-soft); }
.side-links li:last-child { border-bottom: 1px solid var(--rule-soft); }
.side-links a,
.side-links li.plain {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  font-size: 14px;
  text-decoration: none;
  color: var(--ink);
}
.side-links a:hover { background: var(--accent-bg); color: var(--accent); }
.side-links li.plain { color: var(--muted); }
.side-links .tag,
.side-links .ext { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.side-links a:hover .tag,
.side-links a:hover .ext { color: var(--accent); }


/* ══ heavier structural rules ═══════════════════════════════════════════════
   Major blocks are bracketed in ink, the way the portfolio site does it, so
   the page reads in sections rather than as one long field of hairlines. */
.rows,
.transcript { border-bottom: 1px solid var(--ink); }
.skills { border: 1px solid var(--rule); border-bottom-color: var(--ink); }
h2 { padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
h2 .h2-link {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  color: var(--accent);
  margin-left: 12px;
  vertical-align: 2px;
  white-space: nowrap;
}
h2 .h2-link:hover { color: var(--ink); }
footer { border-top: 1px solid var(--ink); padding-top: 14px; }

/* ══ transcript ═════════════════════════════════════════════════════════════ */
.transcript { }
.transcript .term { padding: 22px 0 4px; border-bottom: 1px solid var(--rule-soft); }
.transcript .term:last-child { border-bottom: none; }

.transcript .term-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 0 0 14px;
}
.transcript .term-stat {
  background: var(--paper);
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.transcript .term-head .k { font-size: 12px; color: var(--muted); }
.transcript .term-head .v {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.transcript .course { padding: 13px 0 14px; border-top: 1px dotted var(--rule); }
.transcript .course:first-child { border-top: none; }
.transcript .course-row {
  display: grid;
  grid-template-columns: 104px 1fr 64px 52px;
  gap: 16px;
  align-items: baseline;
}
.transcript .course-code {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.transcript .course-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.transcript .course-cr {
  font-size: 14px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.transcript .course-grade {
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
  position: relative;
  font-variant-numeric: tabular-nums;
}
.transcript .course-grade .g-mod { font-size: .8em; vertical-align: .15em; }
.transcript .course-note {
  margin-top: 5px;
  padding-left: 120px;
  padding-right: 130px;
  font-size: 14.5px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
}
.fn-ref { font-size: 11px; vertical-align: super; margin-left: 2px; text-decoration: none; }

/* ══ repos: column table ════════════════════════════════════════════════════ */
.repos .repo-head,
.repos summary {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(0, 2fr) 90px 110px;
  gap: 26px;
  align-items: baseline;
}
.repo-head span:nth-child(4),
.repos summary .status { grid-column: 4; }
.repo-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.repo-head span:nth-child(3) { white-space: nowrap; }
.repos summary { padding: 20px 12px; }
.repos summary::before { display: none; }
.repos summary .name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.repos .repo-title { font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3; }
.repos .repo-handle { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.repos summary .desc {
  flex: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}
.repos summary .lang {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: normal;
}
.repos .status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}
/* Two states only; the round dot keeps status distinct from language text. */
.repos .status .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
}
.repos .status.done { color: var(--ink); }
.repos .status.done .dot { background: #2f7d4a; }
.repos .status.wip .dot { background: #b87816; }

/* Planned additions to projects already listed in the table. */
.soon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 4px;
}
.soon-card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  background: var(--paper);
  padding: 17px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.soon-project {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  text-wrap: balance;
}
.soon-parent {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 12px;
}
.soon-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.repos details > div {
  padding: 16px 0 22px 20px;
  border-left: 2px solid var(--accent);
  margin-left: 12px;
  min-width: 0;
}
.repos details > div a { overflow-wrap: anywhere; }
.repos details[open] > summary {
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.repos details[open] > summary:hover { background: var(--accent-bg); }
.repos details > div h3 { margin-top: 22px; font-size: 16px; }
.repos details > div h3:first-child { margin-top: 4px; }


.involvement .inv-card { height: 100%; }


/* ── page intro: reads as a masthead, not loose paragraphs ───────────────── */
.page-intro {
  padding: 4px 0 20px;
  margin-bottom: 4px;
}
.page-intro + h2 { margin-top: 34px; }
.page-intro .lede {
  margin: -2px 0 14px;
  font-size: 21px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 52ch;
}
.page-intro .lede em { font-style: normal; }
.page-intro .sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}

/* the first block after a heading shouldn't double the gap */
h2 + .rows, h2 + .transcript, h2 + table { margin-top: 14px; }
.transcript .term:first-child { padding-top: 6px; }


/* ── article pages: same sidebar language as the home page ───────────────── */
.dir-name { margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.dir-name a { color: var(--ink); text-decoration: none; }
.dir-name a:hover { color: var(--accent); }
.dir .side-links .article-list li.here span,
.dir .article-list li.here span {
  display: block;
  padding: 8px 2px 8px 12px;
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
}
.dir .article-list a { line-height: 1.35; }


/* -- footer: one row, links left, centre and right ----------------------- */
footer { font-size: 14px; }
.foot-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 2px 0 4px;
}
.foot-row p { margin: 0; }
.foot-row .fl-mid { text-align: center; }
.foot-row .fl-right { text-align: right; }
.foot-row a { color: var(--ink); text-decoration: none; }
.foot-row a:hover { color: var(--accent); text-decoration: underline; }
.foot-row nav a + a { margin-left: 20px; }
@media (max-width: 700px) {
  .foot-row { grid-template-columns: 1fr; gap: 9px; }
  .foot-row .fl-mid,
  .foot-row .fl-right { text-align: left; }
  .foot-row nav a + a { margin-left: 18px; }
}


/* ── previous / next: quiet, ruled, no boxes ─────────────────────────────── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 52px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: Helvetica, Arial, sans-serif;
}
.post-nav.one { grid-template-columns: 1fr; }
.post-nav .pn { text-decoration: none; color: var(--ink); display: block; }
.post-nav .next { text-align: right; grid-column: 2; }
.post-nav.one .next { grid-column: 1; }
.post-nav .lbl {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.post-nav .t { font-size: 16px; font-weight: 600; line-height: 1.4; }
.post-nav .pn:hover .t { color: var(--accent); }
@media (max-width: 700px) {
  .post-nav { grid-template-columns: 1fr; gap: 20px; }
  .post-nav .next { text-align: left; grid-column: 1; }
}


/* ══ Market Opinions: editorial feature and article grid ══════════════════ */
.featured-section-title {
  color: var(--ink);
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  border-bottom-color: var(--ink);
}
.featured-article {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
  margin-top: 14px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.featured-article:hover,
.featured-article:focus-visible { border-color: var(--accent); }
.featured-image {
  min-height: 320px;
  overflow: hidden;
  background: var(--wash);
  border-right: 1px solid var(--rule);
}
.featured-image img,
.article-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 36px;
}
.article-meta {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.featured-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.featured-excerpt {
  margin-top: 14px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.article-cta {
  display: block;
  margin-top: 16px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
.article-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.article-list-head h3 {
  margin: 0;
  font-size: 17px;
  text-wrap: balance;
}
.article-list-head span {
  color: var(--muted);
  font-size: 12px;
}
.article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 20px;
}
.article-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 250px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.article-card:hover,
.article-card:focus-visible { border-color: var(--accent); }
.article-card-image {
  overflow: hidden;
  background: var(--wash);
  border-right: 1px solid var(--rule);
}
.article-card-copy {
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
}
.article-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.article-excerpt {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.article-card .article-cta { margin-top: auto; padding-top: 14px; }
.featured-article:hover .featured-title,
.article-card:hover .article-title { color: var(--accent); }


/* -- article index rail: the "all articles" staple beside the text --------
   A panel that fills the white column: washed header strip, a thumbnail and
   a single line of type per article, Home as a footer strip. */
.art-rail-in {
  border: 1px solid var(--rule);
  background: var(--paper);
}
.art-rail-in .side-label {
  margin: 0;
  padding: 11px 14px 10px;
  background: var(--wash);
  border-bottom: 1px solid var(--rule);
}
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { border-top: 1px solid var(--rule-soft); }
.rail-list li:first-child { border-top: 0; }
.rail-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 11px;
  border-left: 3px solid transparent;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--ink);
  text-decoration: none;
}
.rail-list a:hover { background: var(--accent-bg); color: var(--accent); }
.rail-list .rt { flex: 0 0 auto; }
.rail-list .rt img {
  display: block;
  width: 64px;
  height: 43px;
  object-fit: cover;
  border: 1px solid var(--rule-soft);
  background: var(--wash);
}
.rail-list a:hover .rt img { border-color: var(--accent); }
.rail-list .rx { min-width: 0; }
/* one line of type: it clips rather than wraps */
.rail-list .rn {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-list .d {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
}
.rail-list li.here > a {
  border-left-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}
.rail-list li.here .d { color: var(--accent); }
.rail-home {
  display: block;
  margin: 0;
  padding: 11px 14px;
  border-top: 1px solid var(--rule);
  background: var(--wash);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.rail-home:hover { text-decoration: underline; }

/* below the rail breakpoint it becomes a normal block under the article */
@media (max-width: 1699px) {
  .art-rail { max-width: 720px; margin: 44px auto 0; }
}

/* ── previous / next: boxed, at the foot of the article ─────────────────── */
.post-foot { margin: 52px 0 0; padding-top: 26px; border-top: 1px solid var(--ink); }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-foot .pf {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 18px;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
}
.post-foot .pf:hover { border-color: var(--accent); background: var(--accent-bg); }
.post-foot .pf:hover .t { color: var(--accent); }
.post-foot .pf.next { text-align: right; }
.post-foot .pf.pf-home .t { color: var(--accent); }
.post-foot .lbl {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-foot .t { font-size: 15px; font-weight: 600; line-height: 1.35; }
@media (max-width: 700px) {
  .pf-row { grid-template-columns: 1fr; }
  .post-foot .pf.next { text-align: left; }
}

/* Responsive layout: one desktop shell, one compact shell. Components use
   the width of their content column rather than unrelated window thresholds. */
.wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 28px clamp(20px, 2vw, 32px) 16px;
}
.home section > :first-child, .article-page .article h1 { margin-top: 0; }
.home section, .article-page .art-col {
  min-width: 0;
  container: content / inline-size;
}
.identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  min-width: 0;
}
.identity h1, .identity .dir-name {
  margin: 0;
  font-size: clamp(18px, 6vw, 28px);
  line-height: 1.1;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.identity-text { min-width: 0; }
.identity-text .contact { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.contact-line { display: block; white-space: nowrap; }
.identity-photo {
  display: block;
  flex: 0 0 clamp(80px, 20vw, 88px);
  width: clamp(80px, 20vw, 88px);
  height: clamp(80px, 20vw, 88px);
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--wash);
}
.identity-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; }
.compact-actions, .directory-toggle { display: none; }
.site-directory { display: block; }

/* Use the available column without leaving an empty half of the intro. */
.page-intro { display: block; padding: 0; margin-bottom: 0; }
.intro-text { max-width: none; padding-left: 14px; border-left: 3px solid var(--accent); }
.page-intro .lede { font-size: 21px; max-width: none; }
.page-intro .sub { max-width: none; }
.intro-side { display: block; min-width: 0; margin: 0; }
.seeking { width: 100%; max-width: none; margin-top: 20px; padding: 0 0 0 14px; border-left: 3px solid var(--accent); background: transparent; }
.seeking-text { margin: 0; font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }
.seeking-availability { display: block; margin-top: 10px; color: var(--muted); }
.page-intro + h2 { margin-top: 28px; }

/* Restore the original compact date / employer / role / location columns. */
.rows:not(.repos) summary {
  display: grid;
  grid-template-columns: 16px minmax(120px, .9fr) minmax(150px, 1.2fr) minmax(130px, 1fr) minmax(110px, .8fr);
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
}
.rows:not(.repos) summary .role, .rows:not(.repos) summary .loc { color: var(--muted); }
.rows:not(.repos) summary .when, .rows:not(.repos) summary > b,
.rows:not(.repos) summary .role, .rows:not(.repos) summary .loc { min-width: 0; padding: 0; margin: 0; }
.rows:not(.repos) details > div { padding-left: calc(1em + 40px); }

/* Preserve the existing component designs; compact only when they need room. */
.article-page .art-col { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; gap: 44px; }
.article-page .article, .article-page .post-foot, .article-page .art-rail { width: 100%; max-width: 720px; margin-inline: auto; }
.article-page .article > *, .article-page .post-foot { max-width: 720px; margin-left: auto; margin-right: auto; }
.art-rail { position: static; margin-top: 0; }

@container content (min-width: 781px) {
  .page-intro { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .seeking { margin-top: 0; }
  .article-page .refs { columns: 2; column-gap: 48px; }
  .article-page .refs li { break-inside: avoid; }
}
@container content (max-width: 1100px) {
  .article-grid { grid-template-columns: 1fr; }
  .repos .repo-head { display: none; }
  .repos summary { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 16px; padding: 17px 12px; }
  .repos summary .name { grid-column: 1 / -1; grid-row: 1; }
  .repos summary .desc { grid-column: 1 / -1; grid-row: 2; }
  .repos summary .lang { grid-column: 1; grid-row: 3; }
  .repos summary .status { grid-column: 2; grid-row: 3; }
}
@container content (max-width: 780px) {
  .involvement, .soon-grid { grid-template-columns: 1fr; }
  .featured-article { grid-template-columns: 1fr; }
  .featured-image { min-height: 0; aspect-ratio: 16 / 7; border-right: 0; border-bottom: 1px solid var(--rule); }
  .featured-copy { padding: 24px 22px; }
  .featured-title { font-size: 23px; }
  .transcript .course-row { grid-template-columns: 76px minmax(0, 1fr) 46px 40px; gap: 10px; }
  .transcript .course-note { padding-left: 0; padding-right: 0; }
}

@container content (max-width: 690px) {
  .rows:not(.repos) summary { grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 15px 0; }
  .rows:not(.repos) summary::before { grid-column: 1; grid-row: 1 / 4; align-self: center; }
  .rows:not(.repos) summary .when { grid-column: 2; grid-row: 1; font-size: 13px; }
  .rows:not(.repos) summary .loc { grid-column: 3; grid-row: 1; font-size: 13px; text-align: right; }
  .rows:not(.repos) summary > b { grid-column: 2 / -1; grid-row: 2; font-size: 16px; }
  .rows:not(.repos) summary .role { grid-column: 2 / -1; grid-row: 3; font-size: 14px; }
  .rows:not(.repos) details > div { padding-left: 30px; }
}

@media (min-width: 960px) {
  .home, .article-page { min-height: 100dvh; display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .home header, .article-page .dir { grid-row: 1; grid-column: 1; padding-right: 24px; align-self: stretch; }
  .home header .side-in, .article-page .dir-in { position: sticky; top: 28px; max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain; }
  .home section, .article-page .art-col { grid-row: 1; grid-column: 2; padding: 0 0 40px 32px; }
  .home::before, .article-page::before { content: ""; grid-row: 1; grid-column: 2; border-left: 1px solid var(--rule-soft); pointer-events: none; }
  .home section > :first-child, .article-page .article h1 { margin-top: 0; }
  .home footer, .article-page footer { grid-row: 2; grid-column: 1 / -1; margin-top: 0; }
  .home .tabs { margin-top: 0; }
  .identity h1, .identity .dir-name { font-size: 28px; }
  .article-page .crumbs { display: none; }
}
@media (min-width: 1540px) {
  .article-page .art-col { grid-template-columns: minmax(0, 720px) minmax(240px, 1fr); column-gap: 46px; align-items: start; max-width: 1222px; width: 100%; margin-inline: auto; }
  .article-page .art-rail { position: sticky; top: 28px; max-width: none; }
}
@media (max-width: 959px) {
  .home header, .article-page .dir { padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--rule-soft); }
  .home header .side-in, .article-page .dir-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; }
  .modified { grid-column: 1; grid-row: 1; align-self: center; font-size: 12px; margin: 0; }
  .identity { grid-column: 1 / -1; grid-row: 2; margin: 14px 0 0; }
  .identity-text .contact { font-size: 12px; }
  .site-directory { grid-column: 1 / -1; }
  .has-mobile-navigation .directory-toggle { display: inline-flex; align-items: center; justify-content: center; grid-column: 2; grid-row: 1; min-height: 40px; padding: 9px 12px; border: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .wrap { padding-block: 18px 16px; }
  .page-intro .lede { font-size: 19px; }
  .page-intro .sub { font-size: 14px; }
  .article { font-size: 17px; line-height: 1.65; }
  .article h1 { font-size: clamp(29px, 8vw, 36px); }
  .home footer .foot-row { gap: 14px; }
}

@container content (max-width: 600px) {
  .article-card { grid-template-columns: 1fr; }
  .featured-image { aspect-ratio: 16 / 7; border-right: 0; border-bottom: 1px solid var(--rule); }
  .article-card-image { aspect-ratio: 16 / 8; border-right: 0; border-bottom: 1px solid var(--rule); }
}
/* Keep the original table and meters; give examples room on smaller desktops. */
@container content (max-width: 980px) {
  .skills td:first-child { width: 150px; }
}
@container content (max-width: 700px) {
  .skills, .skills tbody, .skills tr, .skills td { display: block; width: 100%; }
  table.skills { border: 1px solid var(--rule); border-bottom-color: var(--ink); }
  .skills thead { display: none; }
  .skills tr { position: relative; margin: 0; border: 0; border-top: 1px solid var(--rule-soft); }
  .skills tbody tr:first-child { border-top: 0; }
  .skills td, .skills td + td { border: 0; }
  .skills td:first-child { width: auto; padding-right: 124px; padding-bottom: 0; background: transparent; }
  .skills td.level { display: block; width: auto; padding-block: 5px 0; }
  .skills .barwrap { position: absolute; top: 16px; right: 16px; }
  .skills .level-text { width: auto; }
  .skills td:last-child { padding-bottom: 14px; font-size: 14px; line-height: 1.6; }
}
@media (max-width: 850px) {
  .skills, .skills tbody, .skills tr, .skills td { display: block; width: 100%; }
  table.skills { border: 1px solid var(--rule); border-bottom-color: var(--ink); }
  .skills thead { display: none; }
  .skills tr { position: relative; margin: 0; border: 0; border-top: 1px solid var(--rule-soft); }
  .skills tbody tr:first-child { border-top: 0; }
  .skills td, .skills td + td { border: 0; }
  .skills td:first-child { width: auto; padding-right: 124px; padding-bottom: 0; background: transparent; }
  .skills td.level { display: block; width: auto; padding-block: 5px 0; }
  .skills .barwrap { position: absolute; top: 16px; right: 16px; }
  .skills .level-text { width: auto; }
  .skills td:last-child { padding-bottom: 14px; font-size: 14px; line-height: 1.6; }
}
@container content (max-width: 540px) {
  .transcript .course-row { grid-template-columns: minmax(0, 1fr) 44px 34px; row-gap: 4px; }
  .transcript .course-code { grid-column: 1 / -1; }
  .transcript .course-note { padding: 0; }
  .transcript .term-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transcript .term-stat:first-child { grid-column: 1 / -1; }
}

html.has-site-menu { overflow: hidden; }
.site-menu { position: fixed; inset: 0 auto 0 0; width: min(320px, calc(100vw - 32px)); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-right: 1px solid var(--rule); color: var(--ink); background: var(--bg); }
.site-menu[open] { display: flex; flex-direction: column; }
.site-menu::backdrop { background: rgb(15 23 42 / .28); }
.site-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--rule-soft); }
.site-menu-header h2 { margin: 0; padding: 0; border: 0; font-size: 17px; }
.site-menu-close, .directory-toggle { font: 500 13px/1.3 Helvetica, Arial, sans-serif; color: var(--ink); background: transparent; cursor: pointer; }
.site-menu-close { min-height: 40px; padding: 9px 0 9px 12px; border: 0; }
.site-menu-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 28px; }
.site-menu .site-directory { display: block; }
.site-menu .side-label { margin: 24px 0 8px; }
.site-menu .side-links a { min-height: 44px; padding: 11px 0; font-size: 14px; overflow-wrap: anywhere; }
.site-menu .side-links a:hover { background: transparent; text-decoration: underline; }
.site-menu .tabs { margin: 0; }
.site-menu .tabs button { min-height: 44px; padding: 11px 0; font-size: 14px; border: 0; border-bottom: 1px solid var(--rule-soft); background: transparent; text-align: left; }
.site-menu .tabs button[aria-selected="true"] { padding-left: 12px; border-left: 2px solid var(--accent); color: var(--accent); background: transparent; }
.site-menu :focus-visible, .directory-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Balance short labels as a unit; prose inherits widow-aware wrapping. */
.rows summary > b, .rows summary .role,
.repos .repo-title, .skills td:first-child,
.transcript .course-name, .inv-org, .inv-article-title,
.post-nav .t, .dir .article-list a, .dir .article-list .here span {
  text-wrap: balance;
}
.byline, .article-meta, .inv-article-meta { text-wrap: balance; }

/* Compact portraits leave enough room for complete header facts at 320px. */
@media (max-width: 360px) {
  .identity-photo { flex-basis: 72px; width: 72px; height: 72px; }
}