/* /portfolio/ — the hub's register (Cormorant Garamond + IBM Plex Mono, monochrome, the `>` prompt as the
   only ornament) applied to a page that scrolls. Built on style.css: same tokens, same theme toggle. The
   content comes from tools/portfolio.src.html, so the class names below are its vocabulary. */

body.portfolio {
  display: block;
  min-height: 100vh;
  padding: 0 1.25rem 4rem;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: left;
}

/* top bar: back link, language switch, theme toggle */
.pf-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto; padding: 1.1rem 0 0.6rem;
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: lowercase;
}
.pf-back { color: var(--muted); text-decoration: none; display: inline-flex; gap: 0.5rem; }
.pf-back:hover { color: var(--text); }
.pf-langs { display: inline-flex; gap: 0.5rem; color: var(--muted); }
.pf-langs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.pf-langs a:hover { color: var(--text); border-bottom-color: var(--text); }
.pf-langs .on { color: var(--text); }
.pf-langs .sep { opacity: 0.5; }
.pf-theme { position: static; }

/* page grid: a quiet rail, one reading column */
.pf-page { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 960px) { .pf-page { grid-template-columns: 200px minmax(0, 1fr); gap: 3.5rem; } }
nav.rail { display: none; }
@media (min-width: 960px) {
  nav.rail { display: block; position: sticky; top: 1.5rem; align-self: start; }
  nav.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
  nav.rail a { color: var(--muted); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.04em; padding-left: 0.9rem; border-left: 1px solid var(--muted); display: block; line-height: 1.4; }
  nav.rail a:hover, nav.rail a.active { color: var(--text); border-left-color: var(--text); }
}
.pf-main { min-width: 0; max-width: 70ch; }

/* type */
.pf-main h1, .pf-main h2, .pf-main h3, .pf-main .lede, .pf-main blockquote, .pf-main .book h3 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: 0.01em; text-wrap: balance; margin: 0;
}
.pf-main h1 { font-weight: 300; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.1; letter-spacing: 0.04em; }
.pf-main h2 { font-weight: 300; font-size: 2rem; line-height: 1.15; margin-bottom: 1rem; }
.pf-main h3 { font-size: 1.35rem; line-height: 1.25; }
.pf-main .lede { font-size: 1.45rem; line-height: 1.35; margin: 1rem 0 1.2rem; }
.pf-main p { margin: 0 0 0.9rem; }
.pf-main .muted, .pf-main dd, .pf-main .meta, .pf-main .job time, .pf-main .job .org, .pf-main .earlier, .pf-main .book .meta { color: var(--muted); }
.pf-main a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--muted); }
.pf-main a:hover { border-bottom-color: var(--text); }
.pf-main code { font-family: inherit; font-size: 0.95em; }
.pf-main b, .pf-main dt { font-weight: 500; }

.pf-main .eyebrow { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.pf-main .eyebrow::before { content: "> "; }
.pf-main section { padding: 2.6rem 0; border-top: 1px solid var(--muted); }
.pf-main section:first-of-type { border-top: 0; padding-top: 0.5rem; }

.pf-main .links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.82rem; }
.pf-main .links a { border-bottom: 0; color: var(--text); }
.pf-main .links a::before { content: "> "; color: var(--muted); }
.pf-main .links a:hover { color: var(--muted); }

/* at a glance */
.pf-main .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.2rem; margin-top: 1.8rem; }
@media (max-width: 560px) { .pf-main .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-main .stat { border-top: 1px solid var(--text); padding-top: 0.6rem; }
.pf-main .stat b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pf-main .stat span { font-size: 0.74rem; color: var(--muted); line-height: 1.4; display: block; margin-top: 0.3rem; }

/* experience */
.pf-main .exp { display: grid; gap: 1.4rem; }
.pf-main .job { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; }
@media (max-width: 520px) { .pf-main .job { grid-template-columns: 1fr; gap: 0.2rem; } }
.pf-main .job time { font-size: 0.74rem; letter-spacing: 0.04em; line-height: 1.8; }
.pf-main .job h3 { font-size: 1.3rem; }
.pf-main .job .org { font-size: 0.8rem; margin-bottom: 0.4rem; }
.pf-main .job ul { margin: 0; padding-left: 1.1rem; }
.pf-main .job li { margin-bottom: 0.25rem; }
.pf-main .earlier { font-size: 0.86rem; border-left: 1px solid var(--muted); padding-left: 0.9rem; margin-top: 1.4rem; }

.pf-main .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pf-main .tags span { font-size: 0.74rem; padding: 0.4rem 0.6rem; border: 1px solid var(--muted); }

.pf-main .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem 1.8rem; }
.pf-main dl { margin: 0; display: grid; gap: 0.5rem; }
.pf-main dd { margin: 0; font-size: 0.86rem; }

/* work cards: a rule and a hanging prompt, no fill, no shadow */
.pf-main .work { display: grid; gap: 1rem; }
.pf-main .card { border: 1px solid var(--muted); padding: 1.1rem 1.25rem; display: grid; gap: 0.5rem; }
.pf-main .card header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.pf-main .card h3 a { border-bottom: 0; }
.pf-main .card h3 a::before { content: "> "; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; vertical-align: 0.15em; }
.pf-main .card h3 a:hover { color: var(--muted); }
.pf-main .card .meta { font-size: 0.72rem; letter-spacing: 0.03em; }
.pf-main .card p { margin: 0; font-size: 0.88rem; }
.pf-main .signals { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.72rem; color: var(--muted); }
.pf-main .signals span::before { content: "✓ "; }

/* books and essays */
.pf-main .books { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.pf-main .book { border: 1px solid var(--muted); border-left: 3px solid var(--text); padding: 0.9rem 1rem; }
.pf-main .book h3 { font-size: 1.3rem; }
.pf-main .book .meta { font-size: 0.72rem; }
.pf-main .book p { font-size: 0.86rem; margin: 0.4rem 0 0; }
.pf-main .essays { padding-left: 1.1rem; margin: 0 0 0.9rem; }
.pf-main .essays li { margin-bottom: 0.35rem; }

.pf-main blockquote { margin: 1.2rem 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 1px solid var(--text); font-size: 1.35rem; line-height: 1.35; }
.pf-main blockquote footer { font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; color: var(--muted); margin-top: 0.4rem; }

.pf-main .sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.pf-main .site { border: 1px solid var(--muted); padding: 1.1rem 1.25rem; }
.pf-main .site h3 { margin-bottom: 0.4rem; }
.pf-main .site a.url { font-size: 0.82rem; }
.pf-main .site a.url::before { content: "> "; color: var(--muted); }

.pf-main .contact { display: grid; gap: 0.4rem; font-size: 0.88rem; }
.pf-main .contact .row { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.pf-main .contact .row > span:first-child { color: var(--muted); min-width: 6rem; }
.pf-main footer.end { margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--muted); font-size: 0.72rem; line-height: 1.6; color: var(--muted); }

.pf-main img, .pf-main pre { max-width: 100%; }
.pf-main pre { overflow-x: auto; }

/* style.css centres <main> and makes every <nav> a centred column for the one-screen hub; undo both here. */
body.portfolio main { text-align: left; padding: 0; max-width: 70ch; }
body.portfolio nav { display: block; flex-direction: initial; align-items: initial; gap: 0; }
body.portfolio nav.pf-langs { display: inline-flex; flex-direction: row; align-items: baseline; gap: 0.5rem; }
body.portfolio nav.rail { display: none; }
@media (min-width: 960px) { body.portfolio nav.rail { display: block; } }
body.portfolio nav a { display: inline; font-size: inherit; letter-spacing: inherit; }
body.portfolio nav.rail a { display: block; font-size: 0.78rem; }
body.portfolio .pf-main ul, body.portfolio .pf-main ol { padding-left: 1.1rem; }
body.portfolio .pf-main li { text-align: left; }