/* ==========================================================================
   TUFTE SKIN  (reversible override layer)
   --------------------------------------------------------------------------
   Loaded AFTER the compiled theme CSS (main.css) via _includes/head/custom.html.
   Nothing here edits the theme's _sass/ or main.scss — remove the single <link>
   line and this file to fully revert.

   Design: cream ground, near-black serif body (et-book with a Tufte-adjacent
   fallback stack), narrow left-aligned reading column, understated dark-red
   links, hairline rules. Author-profile sidebar hidden site-wide; masthead nav
   kept.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. et-book webfont (best-effort). If the jsDelivr URLs 404, font-display:swap
      leaves the fallback stack in place, so text still renders in a serif.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "et-book";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/edwardtufte/et-book/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"),
       url("https://cdn.jsdelivr.net/gh/edwardtufte/et-book/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype");
}
@font-face {
  font-family: "et-book";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/edwardtufte/et-book/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"),
       url("https://cdn.jsdelivr.net/gh/edwardtufte/et-book/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype");
}
@font-face {
  font-family: "et-book";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/edwardtufte/et-book/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"),
       url("https://cdn.jsdelivr.net/gh/edwardtufte/et-book/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype");
}

/* --------------------------------------------------------------------------
   2. Palette + base type
   -------------------------------------------------------------------------- */
:root {
  --tufte-bg: #fffff8;
  --tufte-ink: #111;
  --tufte-link: #8b2b2b;
  --tufte-rule: rgba(17, 17, 17, 0.18);
  --tufte-serif: "et-book", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

html {
  background-color: var(--tufte-bg);
}

body {
  background-color: var(--tufte-bg);
  color: var(--tufte-ink);
  font-family: var(--tufte-serif);
  line-height: 1.5;
}

/* Body copy inherits the serif; keep code/monospace as the theme set it. */
#main,
.page__content,
.archive,
p, li, dd, dt, blockquote, figcaption, caption {
  font-family: var(--tufte-serif);
}

/* --------------------------------------------------------------------------
   3. Masthead — kept visible; tinted cream so it blends with the ground.
      Layout untouched (still fixed, full width, hairline bottom border).
   -------------------------------------------------------------------------- */
.masthead {
  background: var(--tufte-bg);
  border-bottom: 1px solid var(--tufte-rule);
}
.greedy-nav {
  background: var(--tufte-bg);
}
.greedy-nav a {
  color: var(--tufte-ink);
}
.greedy-nav a:hover {
  color: var(--tufte-link);
}
.greedy-nav .visible-links a:before {
  background: var(--tufte-link);
  height: 1px; /* thin the theme's 4px slab to a Tufte hairline underline */
}
/* The site-wide hover border-bottom (section 7) also matches masthead links,
   adding a 1px box on hover; inside the display:table nav that nudges the whole
   row and makes the menu jitter. Suppress it here — the animated :before bar
   above is the hover underline, and the text still recolours to red. */
.greedy-nav a,
.greedy-nav a:hover {
  border-bottom: none;
}
/* Overflow "hidden links" popup menu */
.greedy-nav .hidden-links {
  background: var(--tufte-bg);
  border: 1px solid var(--tufte-rule);
}
.greedy-nav .hidden-links a {
  color: var(--tufte-ink);
}
.greedy-nav .hidden-links a:hover {
  color: var(--tufte-link);
  background: transparent;
}

/* --------------------------------------------------------------------------
   4. Hide the author-profile sidebar + avatar SITE-WIDE.
      #main .sidebar (specificity 1,1,0) beats the theme's .sidebar rules,
      including the position:fixed variant at >=1024px.
   -------------------------------------------------------------------------- */
#main .sidebar,
.sidebar.sticky,
.author__avatar,
.author__urls-wrapper {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Reclaim the vacated sidebar gutter and set a narrow reading column.
      The theme places content with Susy floats (span/prefix/suffix) at $large.
      Neutralise that geometry, then constrain the column and push it right a
      little (the Tufte idiom: generous left margin, open right margin).
   -------------------------------------------------------------------------- */
.page,
.archive {
  float: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Prose (single layout, incl. the About homepage): ~40rem measure. */
.page__inner-wrap {
  max-width: 40rem;
}

/* List-heavy (archive layout: publications, cv, media, scc, more_news…): ~42rem. */
.archive {
  max-width: 42rem;
}

/* Generous left margin only once there is room for it. */
@media screen and (min-width: 60em) {
  .page__inner-wrap,
  .archive {
    margin-left: 5rem;
  }
}

/* --------------------------------------------------------------------------
   6. Headings — large roman name/page H1; light italic section subheads.
   -------------------------------------------------------------------------- */
.page__title,
h1.tufte-name {
  font-family: var(--tufte-serif);
  font-weight: 400;      /* roman, not bold */
  font-style: normal;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 0.4em;
}

/* Empty theme title (About + scc use title:"") — collapse the blank band. */
.page__title:empty {
  display: none;
}

/* Section subheads: light-weight italic. */
.page__content h2,
.page__content h3,
.archive h2,
.archive h3,
h2.tufte-subhead {
  font-family: var(--tufte-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}
.page__content h2,
.archive h2,
h2.tufte-subhead {
  font-size: 1.7rem;
  margin-top: 1.8em;
}
.page__content h3,
.archive h3 {
  font-size: 1.35rem;
}

/* --------------------------------------------------------------------------
   7. Links — understated dark red, no heavy underline; hairline on hover.
   -------------------------------------------------------------------------- */
.page__content a,
.archive a,
.page__inner-wrap a,
a {
  color: var(--tufte-link);
  text-decoration: none;
  border-bottom: none;
}
.page__content a:visited,
.archive a:visited {
  color: var(--tufte-link);
}
.page__content a:hover,
.archive a:hover,
.page__inner-wrap a:hover,
a:hover {
  color: var(--tufte-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 43, 43, 0.5);
}

/* --------------------------------------------------------------------------
   8. Rules / borders — hairline.
   -------------------------------------------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid var(--tufte-rule);
  margin: 2em 0;
}
.archive__subtitle,
.page__meta,
.page__content footer.page__meta {
  border-color: var(--tufte-rule);
}

/* --------------------------------------------------------------------------
   9. Media safety — stop hardcoded-width images/iframes overflowing the
      narrow column (scc.md 700px imgs, talkmap.html 850px iframe, etc.).
   -------------------------------------------------------------------------- */
#main img,
#main iframe,
.page__content img,
.page__content iframe,
.archive img,
.archive iframe {
  max-width: 100%;
  height: auto;
}

/* Wide markdown tables (demo pages) — scroll rather than force page overflow. */
.page__content table,
.archive table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   10. About page (homepage) — single-column layout written in _pages/about.md.
   -------------------------------------------------------------------------- */
.about-page {
  max-width: 40rem;
}

/* Tufte-style margin note: the three profile links (Scholar, PhilPapers, ORCID)
   sit in the right margin at wide widths, float beside the text at medium
   widths, and collapse to a small link row above the name on phones. The
   portrait itself now lives at the foot of the Media page (.tufte-endportrait). */
.about-page {
  position: relative;
}
.about-page .tufte-margin-note {
  float: right;
  width: 11rem;
  margin: 0.3em 0 1em 1.6em;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.7);
}
.about-page .tufte-margin-note a {
  display: block;
}

/* Wide widths: lift the note out of the text column into the right margin. */
@media screen and (min-width: 64em) {
  .about-page .tufte-margin-note {
    float: none;
    position: absolute;
    /* Align with the first body paragraph ("I am a philosopher..."), not the
       name heading: roughly the H1's line-box (2.6rem x 1.1) + its bottom
       margin. Nudge if the heading size changes. */
    top: 3.8rem;
    left: calc(100% + 1.5rem);
    width: 11rem;
    margin: 0;
  }
}

/* Phones: a small inline row of links above the name. */
@media screen and (max-width: 30em) {
  .about-page .tufte-margin-note {
    float: none;
    width: auto;
    margin: 0 0 1.2em;
  }
  .about-page .tufte-margin-note a {
    display: inline;
    margin-right: 1.1em;
  }
}

/* Per-bullet margin links ("Papers on X") beside the two research-area bullets.
   Wide widths: lifted into the right margin, top-aligned to their bullet. Narrow
   widths: a small link line beneath the bullet. They deep-link to a pre-filtered
   Publications view (/publications/#<topic>). */
.about-page .about-marginlink {
  display: block;
  margin-top: 0.4em;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.7);
}
.about-page .about-marginlink a {
  display: block;
}
@media screen and (min-width: 64em) {
  .about-page li.has-marginlink {
    position: relative;
  }
  .about-page .about-marginlink {
    position: absolute;
    top: 0;
    left: calc(100% + 1.5rem);
    width: 11rem;
    margin: 0;
  }
}

/* Full-width landscape figure: spans the text column plus the right margin at
   wide widths; the full column width otherwise. Used on the About and
   Self-Control-in-Context pages. */
.tufte-fullwidth {
  margin: 2em 0 0.6em;
}
.tufte-fullwidth img {
  display: block;
  width: 100%;
  height: auto;
}
.tufte-fullwidth figcaption {
  margin-top: 0.5em;
  font-size: 0.82rem;
  color: rgba(17, 17, 17, 0.65);
}
@media screen and (min-width: 64em) {
  .tufte-fullwidth {
    width: calc(100% + 1.5rem + 11rem);
  }
}

/* Small framed portrait, tucked at the foot of the Media page. */
.tufte-endportrait {
  margin: 3.5em auto 0.5em;
  max-width: 200px;
  text-align: center;
}
.tufte-endportrait img {
  display: block;
  width: 100%;
  height: auto;
}
.tufte-endportrait figcaption {
  margin-top: 0.6em;
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(17, 17, 17, 0.65);
}

/* Figure + margin-aside rows (About page). A column-width figure or block is
   paired with an aside that, at wide widths, sits in the right margin top-aligned
   to the row; on narrow screens the aside falls into normal flow beneath it.
   Used for (a) the lake photo with its "When I'm not doing philosophy" note, and
   (b) the "More updates" line with the profile portrait alongside it. */
.tufte-colfig {
  margin: 2em 0 0.6em;
}
.tufte-colfig img {
  display: block;
  width: 100%;
  height: auto;
}
.about-page .about-aside {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.7);
}
.about-page .about-aside p {
  margin: 0.4em 0 0;
  font-size: inherit;
}
.about-page .about-portrait {
  margin: 1.4em auto 0;
  max-width: 200px;
}
.about-page .about-portrait img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 64em) {
  .about-page .about-figrow {
    position: relative;
  }
  .about-page .about-figrow .about-aside {
    position: absolute;
    top: 0;
    left: calc(100% + 1.5rem);
    width: 11rem;
    margin: 0;
  }
}

.about-page .updates-list {
  list-style: none;
  padding-left: 0;
}
.about-page .updates-list > li {
  margin-bottom: 1em;
}

.about-page .more-updates {
  margin-top: 1.5em;
}

/* --------------------------------------------------------------------------
   11. Mobile / small-screen fixes (responsiveness audit, 2026-07-23).
   -------------------------------------------------------------------------- */

/* Hamburger button: recolour from theme grey to the cream ground, and its
   navicon bars from white to ink, so it isn't off-palette on cream. */
.greedy-nav button {
  background-color: var(--tufte-bg);
}
.greedy-nav .navicon,
.greedy-nav .navicon:before,
.greedy-nav .navicon:after {
  background: var(--tufte-ink);
}

/* Talkmap iframe: the media-safety height:auto rule (section 9) collapses the
   fixed-height map to ~150px. Restore a usable height while keeping it capped. */
.page__content iframe[src*="talkmap"],
.archive iframe[src*="talkmap"] {
  width: 100%;
  height: 70vh;
  min-height: 360px;
}

/* Defensive: break a future long URL/token rather than overflow the column. */
.page__content,
.archive {
  overflow-wrap: break-word;
}

/* Tighten oversized display type on narrow phones (<= 600px). */
@media screen and (max-width: 37.5em) {
  .page__title,
  h1.tufte-name {
    font-size: 2rem;
  }
  .page__content h2,
  .archive h2,
  h2.tufte-subhead {
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------------------------------
   12. Footer — a dark warm-charcoal bar (#33312e, the same tone as the "All"
       publications tab) with light cream text, anchoring the foot of the cream
       page. Links are cream, brightening with a hairline underline on hover.
       Loaded last, so these win over _footer.scss.
   -------------------------------------------------------------------------- */
.page__footer {
  background-color: #33312e;
  color: rgba(255, 255, 248, 0.72);
  border-top: none;
}
.page__footer a {
  color: rgba(255, 255, 248, 0.72);
  text-decoration: none;
}
.page__footer a:hover {
  color: #fffff8;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 248, 0.5);
}
.page__footer .fas,
.page__footer .fab,
.page__footer .far,
.page__footer .fal {
  color: rgba(255, 255, 248, 0.72);
}