/* =========================================================================
   STYLES.CSS: how the page looks.

   Section 1 (colours and fonts) is the part you're most likely to change.
   Everything is sized in rem, so on laptops the whole page scales as one
   piece to fit the screen. script.js picks that size automatically.

   Layout by screen size:
     phones   (under 720px)   one column
     tablets  (720–1099px)    a header band over two columns
     laptops  (1100px and up) three columns on one screen, no scrolling
   ========================================================================= */


/* ---------- 1. Colours and fonts ------------------------------------------ */

/* Light theme */
:root {
  --paper:     #FCFCFA;   /* page background */
  --ink:       #15181D;   /* main text */
  --muted:     #5F6775;   /* secondary text: journals, labels */
  --rule:      #E2E4E8;   /* thin lines and borders */
  --underline: #B9BFC9;   /* link underlines and dotted leaders */
  --accent:    #1F4C8F;   /* area codes, highlights, hover colour */
  --wash:      #EDF1F7;   /* pale accent: photo background, hover */

  /* Fonts. If you change one, also change the Google Fonts <link> in index.html. */
  --display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;                      /* name and headings */
  --text:    "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;  /* body text */
  --mono:    "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* [AI] tags */

  /* Side margin, and the width of the three laptop columns plus their two
     gaps (section 6). Keep --sheet equal to that total. */
  --gutter: 1rem;
  --sheet: 77rem;
}

/* Dark theme: used when the visitor's device is in dark mode, or after they press ◐. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #101216;
    --ink:       #E8E9EC;
    --muted:     #9AA2AF;
    --rule:      #272B33;
    --underline: #4B525E;
    --accent:    #9DBDF0;
    --wash:      #1A2130;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:     #101216;
  --ink:       #E8E9EC;
  --muted:     #9AA2AF;
  --rule:      #272B33;
  --underline: #4B525E;
  --accent:    #9DBDF0;
  --wash:      #1A2130;
  color-scheme: dark;
}


/* ---------- 2. Base ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--wash); color: var(--ink); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Hidden from view but read aloud by screen readers */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }


/* ---------- 3. Page frame ------------------------------------------------- */

.bar {
  max-width: calc(var(--sheet) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.theme {
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-end: -0.5rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.theme:hover { background: var(--wash); }
.theme svg { width: 0.95rem; height: 0.95rem; display: block; }

.sheet {
  max-width: calc(var(--sheet) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 1.25rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
.col { min-width: 0; display: grid; gap: 1.75rem; align-content: start; }

/* Shown only if content.js has a typo */
.problem {
  grid-column: 1 / -1;
  max-width: 44rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--wash);
  font-size: 0.95rem;
}
.problem code { font-family: var(--mono); font-size: 0.9em; }


/* ---------- 4. Headings --------------------------------------------------- */

.h {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 0.7rem;
}
.h .n { font-family: var(--mono); font-style: normal; font-size: 0.7rem; color: var(--muted); }
.sub {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 1rem 0 0.45rem;
}
.h + .sub { margin-top: 0; }


/* ---------- 5. Components ------------------------------------------------- */

/* Name and photo */
.who { display: flex; align-items: center; gap: 1rem; }
.portrait {
  position: relative;
  flex: none;
  width: 4.75rem;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  margin-left: 4px;
  background: var(--wash);
  outline: 1px solid var(--rule);
  outline-offset: 4px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.monogram { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--accent); letter-spacing: 0.04em; }
h1 { font-family: var(--display); font-size: 2.35rem; line-height: 1; letter-spacing: -0.012em; }
h1 i { letter-spacing: 0; }

/* Bio and its [AI] [S] [P] buttons */
.bio { font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.code {
  font-family: var(--mono);
  font-size: 0.7em;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 2px;
  padding: 0 0.05em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.code:hover { background: var(--wash); box-shadow: 0 0 0 0.2em var(--wash); }
.code[aria-pressed="true"] { background: var(--accent); color: var(--paper); box-shadow: 0 0 0 0.2em var(--accent); }

/* Email / CV / Time */
.contact { display: grid; font-size: 0.9375rem; }
.contact > div {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.6rem;
  min-height: 2.75rem;
  border-top: 1px solid var(--rule);
}
.contact > div:last-child { border-bottom: 1px solid var(--rule); }
.contact dt {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--muted);
}
.contact dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; min-width: 0; }
.contact time { font-variant-numeric: tabular-nums; }
#email { white-space: nowrap; font-size: 0.875rem; }
.copy {
  font-size: 0.75rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.copy:hover { color: var(--accent); border-color: var(--underline); }
.copy.done { color: var(--accent); border-color: var(--accent); }
@media (max-width: 380px) { #email { font-size: 0.78rem; } .copy { padding-inline: 0.4rem; } }

/* Positions */
.positions { display: grid; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.4; color: var(--muted); }
.positions b { color: var(--ink); font-weight: 600; }

/* Highlight buttons above the publications */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; }
.legend .k {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-right: 0.15rem;
}
.legend button {
  font-size: 0.8125rem;
  line-height: 1.2;
  min-height: 2.25rem;
  padding: 0.3rem 0.75rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.legend button:hover { border-color: var(--underline); }
.legend button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.legend .tag { color: var(--accent); }
.legend [aria-pressed="true"] .tag { color: inherit; opacity: 0.75; }

/* Publications */
.pubs { display: grid; gap: 0.85rem; }
.pub { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.75rem; }
.pub.newyear { margin-top: 0.4rem; }
.yr { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 0.15rem; }
.pub-title { font-size: 1rem; line-height: 1.32; font-weight: 500; text-decoration: none; text-wrap: pretty; }
a.pub-title:hover { text-decoration: underline; }
.meta {
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.55rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}
.meta cite { font-style: italic; }
.vol { font-variant-numeric: tabular-nums; }
.tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; }

/* Highlighting: nothing is hidden, the other areas fade back */
[data-tags] { transition: opacity 0.2s ease; }
body[data-hl] [data-tags].dim { opacity: 0.28; }
body[data-hl] .tag .on { color: var(--accent); }

/* Work in progress, with dotted leaders like a table of contents */
.wip { display: grid; gap: 0.3rem; font-size: 0.9375rem; line-height: 1.4; }
.wip li { display: flex; align-items: baseline; gap: 0.5rem; }
.wip li > span:first-child { order: 1; min-width: 0; }
.wip li::after {
  content: "";
  order: 2;
  flex: 1 1 1rem;
  min-width: 1rem;
  border-bottom: 1px dotted var(--underline);
  transform: translateY(-0.3em);
}
.wip li .tag { order: 3; }
.wip i { color: var(--muted); }

/* Music */
.music p { font-size: 0.9375rem; }
.instruments { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-top: 0.2rem; font-size: 0.9375rem; }
.instruments a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; }
.instruments a::before {
  content: "";
  width: 0.4em;
  height: 0.48em;
  background: var(--muted);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: background-color 0.15s ease;
}
.instruments a:hover::before { background: var(--accent); }


/* ---------- 6. Tablets: header band over two columns ---------------------- */

@media (min-width: 720px) {
  :root { --gutter: 2rem; }
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; padding-block: 1.5rem 2.5rem; }
  .col-id {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "who contact" "bio positions";
    gap: 1.25rem 2.5rem;
  }
  .who { grid-area: who; }
  .bio { grid-area: bio; }
  .contact { grid-area: contact; align-self: start; }
  .pos { grid-area: positions; }
  .portrait { width: 5.25rem; }
  h1 { font-size: 2.6rem; }
}


/* ---------- 7. Laptops and up: the whole page on one screen --------------- */

@media (min-width: 1100px) {
  /* Starting size before script.js fine-tunes it to the exact window. */
  html { font-size: clamp(12.5px, min(calc(100vh / 47), calc(100vw / 82)), 18.5px); }
  :root { --gutter: 2.5rem; }
  .bar { padding-block: 0.6rem 0; }
  .sheet {
    /* left column · publications · in progress & music (total = --sheet) */
    grid-template-columns: 21.5rem minmax(0, 32.5rem) 17rem;
    justify-content: space-between;
    column-gap: 3rem;
    padding-block: 1.5rem 1.5rem;
  }
  .col-id {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: 1.15rem;
  }
  .who, .bio, .contact, .pos { grid-area: auto; }
  .portrait { width: 5.5rem; }
  h1 { font-size: 2.25rem; white-space: nowrap; }
  .bio { font-size: 0.98rem; }
  .contact { font-size: 0.875rem; }
  .contact > div { min-height: 2.1rem; }
  #email { font-size: 0.8125rem; }
  .h { margin-bottom: 0.5rem; }
  .positions { line-height: 1.35; gap: 0.4rem; }
  .legend { margin-bottom: 0.8rem; gap: 0.35rem; }
  .legend .k { display: none; }
  .legend button { min-height: 0; padding: 0.18rem 0.55rem; font-size: 0.72rem; }
  .pubs { gap: 0.55rem; }
  .pub.newyear { margin-top: 0.3rem; }
  .pub-title { line-height: 1.28; }
  .meta { margin-top: 0.1rem; }
  .instruments a { min-height: 1.7rem; }
  .col-wip { gap: 1.5rem; }
}


/* ---------- 8. Printing and reduced motion -------------------------------- */

@media print {
  :root { --paper: #fff; --ink: #000; --muted: #444; --rule: #ccc; --underline: #999; --accent: #000; --wash: #f2f2f2; }
  .theme, .copy, .legend { display: none !important; }
  a { text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}