/* janpret.net — one narrow typed-page column, IBM Plex Mono throughout, one accent (leap mint). */

:root {
  --paper: #FAF8F3;
  --ink: #2B2B2B;
  --ink-soft: #66625B;
  --rule: #E3DED3;
  --panel: #F1EDE4;
  --mint: #97C5B0;
  /* Mint is too pale for text on paper, so in light mode links stay ink with a mint underline. */
  --link: var(--ink);
  --highlight: #CFE4DA;
  --sketch-card: transparent;
  --font: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1C1B19; --ink: #E4E0D8; --ink-soft: #A09B91; --rule: #34312C; --panel: #25231F;
    --link: var(--mint); --highlight: #2F4A3F; --sketch-card: #E6E1D6; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1C1B19; --ink: #E4E0D8; --ink-soft: #A09B91; --rule: #34312C; --panel: #25231F;
  --link: var(--mint); --highlight: #2F4A3F; --sketch-card: #E6E1D6; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  padding: 0 20px;
}
img { max-width: 100%; display: block; }
::selection { background: var(--highlight); color: var(--ink); }

.page { max-width: 780px; margin: 0 auto; padding-block: 48px 64px; display: grid; gap: 56px; }

/* ---------- links ---------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: background-color .15s;
}
a:hover { background: var(--highlight); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* ---------- header ---------- */
.masthead { display: grid; gap: 14px; }
.masthead-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.name {
  margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
}
.name a { color: var(--ink); text-decoration: none; }
.name a:hover { background: none; }
.theme-toggle {
  font: inherit; font-size: 13px; color: var(--ink-soft); background: none; border: 0; padding: 2px 0; cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }
nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 15px; }
nav a { text-decoration-color: transparent; }
nav a:hover { text-decoration-color: var(--mint); }
nav a[aria-current="page"] { text-decoration-color: var(--mint); }

/* ---------- sections ---------- */
h2 {
  margin: 0 0 20px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-soft); display: flex; align-items: center; gap: 14px;
}
h2::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
.lede { color: var(--ink-soft); }

/* ---------- home intro ---------- */
.intro { display: grid; grid-template-columns: 260px 1fr; gap: 36px; }
.intro > div { min-width: 0; }
.intro > .headshot { min-width: 0; }
/* Pencil-sketch portrait: ink lines on an opaque paper-coloured background, the same image in light and
   dark mode (a transparent image gets inverted by Samsung Internet's dark mode).
   On wide screens it stretches to the height of the bio column; in dark mode it reads as a paper card. */
.headshot { position: relative; min-height: 250px; overflow: hidden; background: var(--sketch-card); }
.headshot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 53% top;
}
.roles { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.links-row { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; margin-top: 20px; }

/* ---------- entries (publications, services) ---------- */
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.entry { display: grid; grid-template-columns: 56px 1fr; gap: 16px; }
.entry > div { min-width: 0; }
.year { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 14px; padding-top: 1px; }
.entry-title { display: block; font-weight: 500; }
.entry-meta { display: block; color: var(--ink-soft); font-size: 14px; }
.entry-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; margin-top: 4px; }

.plain-list { margin: 0; padding-left: 1.2em; }
.plain-list li { margin-bottom: 6px; }
.plain-list li::marker { color: var(--mint); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tags li { border: 1px solid var(--rule); padding: 2px 10px; border-radius: 2px; color: var(--ink-soft); }

footer {
  font-size: 12.5px; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 18px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
}

@media (max-width: 580px) {
  body { font-size: 15px; }
  .page { padding-block: 32px 48px; gap: 44px; }
  .name { font-size: 22px; }
  .intro { grid-template-columns: 1fr; gap: 22px; }
  .headshot { width: 180px; min-height: 0; aspect-ratio: 4 / 5; }
  .entry { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}