/* torinmcfarland.com: one stylesheet for every page.
   Layout B "sidebar" from the approved preview (design/site_preview.html), styled with candidates B + D
   from design/candidates/ (chosen 2026-11-11):
   - B, title-slide sidebar: the Beamer title slide as the sidebar — Ole Miss navy panel, ghosted Lyceum,
     red stripe with a powder-blue rule. On phones, a navy header band.
   - D, editorial paper: warm paper and ink, serif name and headings, letter-spaced tabs, Lyceum colophon. */

:root {
  /* Page: warm paper and ink */
  --bg: #f8f6f1;
  --surface: #eeebe4;
  --fg: #1d1b17;
  --muted: #615b52;
  --line: #e1dbcf;
  --accent: #1f4a73;
  --red: #b8102a;
  /* Sidebar panel: colours from the Beamer template (same in light and dark) */
  --panel: #162b48;          /* OleMissNavy */
  --panel-fg: #ffffff;
  --panel-muted: #c5d0de;
  --panel-link: #a8cdf0;
  --brand-red: #cc092f;      /* OleMissRed */
  --brand-powder: #006ba6;   /* OleMissPowder */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151412; --surface: #1e1c19; --fg: #ece7df; --muted: #a59e93; --line: #2f2c27;
    --accent: #9cc0e4; --red: #ff8a95;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151412; --surface: #1e1c19; --fg: #ece7df; --muted: #a59e93; --line: #2f2c27;
  --accent: #9cc0e4; --red: #ff8a95;
  color-scheme: dark;
}

body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Skip link: the first thing a keyboard user reaches; hidden above the window until focused */
.skip {
  position: fixed; left: 12px; top: 0; z-index: 100;
  padding: 8px 14px; border-radius: 0 0 6px 6px;
  background: var(--panel); color: var(--panel-fg); font-weight: 600; text-decoration: none;
  transform: translateY(-110%);
}
.skip:focus { transform: none; outline: 2px solid var(--panel-link); outline-offset: 2px; }

/* ---------- Page frame: sidebar profile + nav + main ---------- */
.site {
  max-width: 70rem; margin: 0 auto;
  padding-block: 44px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  font-size: 1rem; line-height: 1.6;
  display: grid; grid-template-columns: 16.5rem minmax(0, 1fr);
  grid-template-areas: "profile nav" "profile main";
  /* When a page is shorter than the sidebar, the extra height must go to the main row,
     or the nav row grows and pushes the page content down (seen on 404 and Teaching). */
  grid-template-rows: auto 1fr;
  column-gap: 56px; align-items: start;
}

/* ---------- Sidebar profile (text sits on the navy panel at every width) ---------- */
.profile {
  grid-area: profile;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px);
}
.photo {
  display: block; flex: none;
  width: 100%; max-width: 200px; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 28%; background: var(--surface);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.22);
}
.id { min-width: 0; }
/* The name's box shrinks to the text, so the red rule under it spans the whole name. */
.name {
  margin: 0; width: fit-content; max-width: 100%;
  font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em;
  text-wrap: balance; color: var(--panel-fg);
}
.name::after { content: ""; display: block; width: 100%; height: 3px; margin-top: 14px; background: var(--brand-red); }
.role, .affil { margin: 0; color: var(--panel-muted); }
.role { margin-top: 6px; }
.logo { display: block; width: auto; height: 42px; margin-top: 12px; }
.email { margin: 12px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; overflow-wrap: anywhere; }
.links { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; }
.profile a { color: var(--panel-link); }
.profile :focus-visible { outline-color: var(--panel-fg); }

/* Desktop: the navy panel runs the full height of the window, with the ghosted Lyceum and the stripe
   fixed at its foot. Panel edge = left page margin + 16px gutter + sidebar column + half the 56px gap. */
@media (min-width: 821px) {
  /* The photo is exactly as wide as the name: the profile shrinks to its widest line (the name, ~228px;
     the job title is ~216px) and the photo takes that width. inline-size containment stops the photo's
     own 480px width from setting the profile width. Name, red rule and photo then line up. */
  .profile { width: fit-content; max-width: 100%; }
  .photo { width: 100%; max-width: none; contain: inline-size; }

  body {
    background: linear-gradient(to right,
      var(--panel) 0 calc(max(0px, (100% - 70rem - 32px) / 2) + 16px + 16.5rem + 28px),
      var(--bg) 0) fixed;
  }
  body::before {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    left: calc(max(0px, (100vw - 70rem - 32px) / 2) + 16px - 30px); bottom: -120px;
    width: calc(16.5rem + 60px); aspect-ratio: 1 / 1;
    background-color: #ffffff; opacity: 0.1;
    -webkit-mask: url("images/lyceum.png") center / contain no-repeat;
            mask: url("images/lyceum.png") center / contain no-repeat;
  }
  body::after {
    content: ""; position: fixed; left: 0; bottom: 0; pointer-events: none;
    width: calc(max(0px, (100vw - 70rem - 32px) / 2) + 16px + 16.5rem + 28px); height: 10px;
    background: linear-gradient(var(--brand-powder) 0 2px, var(--brand-red) 2px);
  }
}

/* ---------- Nav ---------- */
.sitenav {
  grid-area: nav;
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  padding-block: 2px 12px;
  border-bottom: 1px solid var(--line);
}
.sitenav a { color: var(--muted); text-decoration: none; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.sitenav a:hover { color: var(--fg); }
.sitenav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--red); }

/* ---------- Main column ---------- */
main { grid-area: main; min-width: 0; }
h2 { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; line-height: 1.25; margin: 34px 0 18px; }
.bio { margin-top: 28px; }
.bio p { margin: 0 0 12px; max-width: 65ch; }
.note { margin: 30px 0 0; color: var(--muted); font-size: 0.95rem; }
.eyebrow { font-family: var(--ui); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.count { font-variant-numeric: tabular-nums; color: var(--muted); }

/* ---------- Research: papers ---------- */
.papers { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.paper { display: grid; gap: 8px; padding-top: 26px; border-top: 1px solid var(--line); min-width: 0; }
.paper:first-child { border-top: 0; padding-top: 0; }
.ptitle { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; text-wrap: balance; }
/* Title links: ink text with a muted underline (6.2:1 light, 6.9:1 dark), so they read as links */
.ptitle a, .dtitle a { color: var(--fg); text-decoration-color: var(--muted); }
.ptitle a:hover, .dtitle a:hover { text-decoration-color: var(--accent); }
.coauth { margin: 0; color: var(--muted); }
.awards { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 0.93rem; }
.tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--red); margin-right: 8px; }

.plinks { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plinks a {
  display: inline-block; padding: 1px 9px;
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.6;
  text-decoration: none; border: 1px solid var(--line); border-radius: 3px;
}
.plinks a:hover { border-color: var(--accent); }

/* Collapsible abstract and presentations */
details { margin: 0; }
summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--accent); padding-block: 3px;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
details[open] > summary::before { transform: rotate(90deg); }
.abs p { margin: 8px 0 4px; max-width: 68ch; font-size: 0.97rem; }
.pres-groups { display: grid; gap: 12px; margin-top: 8px; }
.pres-label { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.venues {
  list-style: none; margin: 4px 0; padding: 0;
  columns: 2 15rem; column-gap: 28px;
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.45; color: var(--muted);
}
.venues li { display: block; break-inside: avoid; padding-block: 2px; }

/* ---------- Teaching ---------- */
.courses { display: grid; gap: 26px; }
.inst-group { display: grid; gap: 14px; }
.inst { margin: 0; font-size: 1.05rem; font-weight: 600; }
.course { display: grid; gap: 3px; min-width: 0; }
.course h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.chips { list-style: none; margin: 0; padding: 0; display: inline; }
.chips li { display: inline; }
.chips li + li::before { content: ", "; }
.cmeta, .rating { margin: 0; color: var(--muted); }

/* ---------- Discussions ---------- */
.disc-year { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 16px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.disc-year h3 { margin: 0; font-family: var(--mono); font-size: 0.85rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.disc { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.disc li { display: grid; gap: 2px; min-width: 0; }
.dtitle { margin: 0; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
.dauth, .dvenue { margin: 0; color: var(--muted); }
.dvenue { font-family: var(--mono); font-size: 0.85rem; }
.dstatus { margin: 4px 0 0; font-size: 0.92rem; }
.dstatus .st { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; margin-right: 6px; color: var(--red); }

/* ---------- Footer, with a small Lyceum as a colophon ---------- */
.site-foot { margin-top: 56px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font: italic 15px/1.5 var(--serif); }
.site-foot::before {
  content: ""; display: block; width: 28px; height: 28px; margin: 4px 0 12px;
  background-color: var(--muted); opacity: 0.75;
  -webkit-mask: url("images/lyceum.png") center / contain no-repeat;
          mask: url("images/lyceum.png") center / contain no-repeat;
}

/* ---------- Narrow screens: a navy header band, photo beside name and title ---------- */
@media (max-width: 820px) {
  /* Pull-down overscroll above the band (iPhone bounce) shows navy instead of page colour: the canvas
     takes html's navy, and body paints the page colour over everything else. */
  html { background: var(--panel); }
  body { min-height: 100vh; min-height: 100dvh; }

  .site { grid-template-columns: minmax(0, 1fr); grid-template-areas: "profile" "nav" "main"; grid-template-rows: none; }

  /* Full-bleed navy band. top: auto cancels the desktop sticky offset (24px), which would otherwise
     push the band down and leave a strip of page colour above it. Inside, a grid: a tall photo beside
     name, title, university and emails; the links run full width below. The logo is desktop-only. */
  .profile {
    position: relative; top: auto; isolation: isolate; overflow: hidden;
    background: var(--panel);
    margin: -44px calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding: 28px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px));
    display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; row-gap: 0;
  }
  .profile::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: -36px; bottom: -40px; width: 220px; aspect-ratio: 1 / 1;
    background-color: #ffffff; opacity: 0.12;
    -webkit-mask: url("images/lyceum.png") center / contain no-repeat;
            mask: url("images/lyceum.png") center / contain no-repeat;
  }
  /* The slide's stripe, as its own layer above the ghosted Lyceum so it stays solid */
  .profile::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; pointer-events: none;
    background: linear-gradient(var(--brand-powder) 0 2px, var(--brand-red) 2px);
  }
  .id { display: contents; }
  /* The photo takes its height from the text beside it: size containment means it contributes no
     height of its own, then height: 100% fills its grid area. object-fit crops it around the face. */
  .photo {
    grid-column: 1; grid-row: 1 / span 4;
    width: 104px; max-width: none; height: 100%; aspect-ratio: auto; contain: size;
  }
  .name, .role, .affil, .email { grid-column: 2; }
  .name { font-size: 1.75rem; }
  /* Title and university a little smaller, so the title stays ~11px shorter than the red rule
     and on one line down to 360px */
  .role, .affil { font-size: 0.86rem; }
  .logo { display: none; }
  .email { gap: 2px; margin-top: 12px; }
  .links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; font-size: 0.9rem; } /* one line down to ~360px */
  .sitenav { margin-top: 14px; }
}
@media (max-width: 520px) {
  .disc-year { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 340px) {
  /* Smallest phones: keep the name, the title and the three tabs on one line each; a narrower photo
     and slightly smaller addresses so the emails don't break mid-word. */
  .name { font-size: 1.5rem; }
  .sitenav { column-gap: 16px; }
  .profile { grid-template-columns: 88px minmax(0, 1fr); }
  .photo { width: 88px; }
  .role, .affil { font-size: 0.74rem; }
  .email { font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
  summary::before { transition: none; }
}