/* ---------------------------------------------------------
   Simple theme, in the style of darioamodei.com: a plain serif
   column on a warm cream background, near-monochrome text and
   links, no color accents. Loaded after pico.css to retheme its
   components (grid, buttons, cards, nav) rather than replace
   them, so existing pages keep working. Formerly split between
   this file and custom.css; custom.css's rules now live here and
   are no longer loaded separately.
--------------------------------------------------------- */

@import "fonts.css";

:root {
  --measure: 38rem;
}

:root:not([data-theme="dark"]) {
  --pico-background-color: #F8F3EA;
  --pico-color: #24231E;
  --pico-muted-color: #625F55;
  --pico-muted-border-color: #8F887C;
  --pico-border-color: #8F887C;

  --pico-primary: #24231E;
  --pico-primary-background: #24231E;
  --pico-primary-hover: #625F55;
  --pico-primary-hover-background: #1f1e1d;
  --pico-primary-focus: rgba(31, 30, 29, 0.25);
  --pico-primary-inverse: #F8F3EA;

  --pico-contrast: #24231E;
  --pico-contrast-hover: #625F55;
  --pico-contrast-focus: rgba(31, 30, 29, 0.25);
  --pico-contrast-inverse: #f4e8d8;

  --pico-h1-color: #24231E;
  --pico-h2-color: #24231E;
  --pico-h3-color: #24231E;
  --pico-h4-color: #24231E;
  --pico-h5-color: #24231E;
  --pico-h6-color: #24231E;

  --pico-accent-color: #4A6B3E;
  --pico-underline: #4A6B3E;
  
  --pico-color-red: #C25B34;
  --pico-color-blue: #45709A;
  --pico-color-yellow: #D99A3A;
  --pico-color-green: #3A8A6E;
  --pico-color-indigo: #7FB3D5;
  --pico-color-violet: #A9739E;
  --pico-color-gray: #8F887C;

  --pico-card-background-color: #F8F3EA;
  --pico-card-sectioning-background-color: transparent;
  --pico-card-border-color: #F8F3EA;
  --pico-card-box-shadow: none;
  --pico-button-box-shadow: none;
  --pico-button-hover-box-shadow: none;

  --pico-form-element-background-color: #f4e8d8;
  --pico-form-element-border-color: #ddd0ba;
  --pico-form-element-color: #1f1e1d;

  --pico-code-background-color: #F0E9DD;
  --pico-code-color: #625F55;
}

:root {
  --pico-font-family-sans-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-font-family-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-family-heading: "Young Serif", Georgia, serif;
  --pico-font-weight: 400;
  --pico-border-radius: 2px;
  --pico-line-height: 1.6;
  --pico-typography-spacing-vertical: 1.2rem;
}

/* Home page */
.home-photo {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 25%;
  margin-right: 0%;
  margin-left: 5%;
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow);
}

/* Hide the photo on mobile: at narrow widths it eats too much space
   next to the name/contact block. Without the photo (and its
   margin-left) ahead of it, the title row loses the only thing that
   was giving it a left gutter, so it needs its own padding to line
   up with the card gutter below it. */
@media (max-width: 768px) {
  .home-photo {
    display: none;
  }

  .title-row {
    padding-inline: var(--pico-block-spacing-horizontal);
  }
}

/* Layout: constrain article width to a narrow, essay-like measure */
main {
  margin-inline: auto;
  overflow: visible;
}

/* Sticky header: pinned full-width so its fade can reach the
   viewport edges, with the nav inside it keeping the usual centered
   measure. The gradient fades from the page background color down to
   transparent, so content scrolling underneath gradually dissolves
   into the header rather than getting a hard clipped edge. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  padding: 1rem 0 2rem;
  background: linear-gradient(to bottom, var(--pico-background-color) 60%, transparent);
}

.site-header nav {
  margin-inline: auto;
}

@media (min-width: 768px) {
  main, .site-header nav {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  main {
    max-width: 100vw;
    margin-right: 0vw;
    margin-left: 0vw;
  }

  .site-header nav {
    max-width: 90vw;
    margin-inline: auto;
  }
}

/* Headings: tighten line-height for a display feel. */
h1, h2, h3, h4, h5, h6,
article > header {
  font-weight: 700;
  line-height: 1.15;
}

h1 {
  font-family: var(--font-family-heading);
  /* Young Serif only ships a 400 weight; 700 would just trigger
     browser faux-bold, so use its real weight instead. */
  font-weight: 400;
  font-size: 2.4rem;
  padding-top: 1.0em;
}

/* Title card (home page name + contact block): only the name (h1)
   uses the heading font. The role/affiliation/contact lines stay in
   the body font (Newsreader), just larger than normal running text. */
.title-card h5 {
  font-family: var(--pico-font-family-sans-serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 125%;
}

.title-card h6 {
  font-family: var(--pico-font-family-sans-serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 120%;
}

/* Keep <sup> from breaking link underlines into two segments. Pico
   already raises <sup> via `position: relative` rather than
   `vertical-align`, but browsers still paint text-decoration lines
   per inline text fragment, so the raised glyph still gets its own
   segment of underline. Making it an atomic inline box (inline-block)
   fixes this: decoration lines are drawn straight through atomic
   inline boxes at the ancestor's single baseline instead of
   following the fragment's own shifted position. */
sup {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-size: 0.7em;
}

/* Links: simple, monochrome, underlined, no colored accents */
a {
  color: var(--pico-color);
  text-decoration: underline wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--pico-muted-border-color);
  padding-inline: 0.1em;
  margin-inline: -0.1em;
}
/* Scale the underline down for small text (e.g. poster venue links)
   so the wavy line doesn't dwarf the smaller font. */
a:has(small),
small a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--pico-muted-color);
  text-decoration-color: var(--pico-accent-color);
}

button a {
  color: inherit;
}

/* Nav: plain text links, no colorful per-item underline accents */
nav {
  white-space: nowrap;
}

nav a {
  color: inherit;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--pico-accent-color);
}

/* Blog titles and project card titles: same hover-only wavy
   underline as the navbar, instead of showing it all the time like
   a regular body link. */
a.post-title,
a.card-title {
  text-decoration: none;
}

a.post-title:hover,
a.card-title:hover {
  text-decoration: underline wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--pico-accent-color);
}

/* Flatten buttons/inputs to match the plain, undecorated aesthetic */
button, input[type="submit"], input[type="button"], [role="button"] {
  box-shadow: none;
}

/* Tag filter buttons (research page): quiet outline style instead of
   a solid color fill */
.tag-btn {
  background: transparent;
  color: var(--pico-color);
  border: 1px solid var(--pico-muted-border-color);
}
.tag-btn.active {
  background: var(--pico-color);
  color: var(--pico-background-color);
  border-color: var(--pico-color);
}

/* Sidenotes via absolute positioning in a relative wrapper */
.sidenote {
  float: right;
  clear: right;
  width: 18vw;
  margin-right: calc(-20vw - 1ch);
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  text-align: left;
}

.sidenote-wrapper {
  position: static; /* remove relative */
}

/* Collapse on mobile */
@media (max-width: 768px) {
  .sidenote {
    position: static;
    display: block;
    border-left: 2px solid var(--pico-primary);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
  }
}

.sc {
  font-variant: small-caps;
}

/* Containers */
.container {
  display: flex;
}

/* Artifact badges */
.badge-container {
  display: flex;
  align-items: center;
  gap: 0.3em;
  justify-content: left;
  font-size: 1em;
}

.badges a {
  display: flex;
  align-items: center;
  gap: 0.3em;
  justify-content: left;
  font-size: 1em;
  border-bottom: none;
}

.badge {
  height: 1.8em;
  width: auto;
}

/* Blog post list */
.posts-list {
  display: flex;
  flex-direction: column;
}

.post-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-title {
  width: 75%;
}

.post-date {
  white-space: nowrap;
}

/* Prism overrides */
pre[class*="language-"] {
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 0.5em;
  border: 1px solid var(--pico-muted-border-color);
  font-size: 0.95em;
}

pre[class*="language-"],
code[class*="language-"] {
  font-size: 0.95em;
  font-family: var(--pico-font-family-monospace);
  color: var(--pico-color);
  background: var(--pico-code-background-color);
}

/* Inline code */
:not(pre) > code {
  padding: 0.1em 0.3em;
  border-radius: 1em;
}

/* Reformat summary menu */
summary {
  list-style: none;
}

summary::marker {
  content: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Mobile/desktop-only content */
@media (min-width: 769px) {
  .mobile-only  { display: none !important; }
  .desktop-only { display: auto; }
}
@media (max-width: 768px) {
  .mobile-only { display: auto; }
  .desktop-only  { display: none !important; }
}