/* Site stylesheet. One file, no preprocessor, no JavaScript.
 *
 * Layout: a sticky top bar, then the page content as a grid of panels
 * that fills the width of the window. The outer margins are fixed
 * (they do not grow when zooming out); a wider window or a smaller
 * zoom gives more columns instead of longer lines. Small screens get
 * a single column.
 *
 * Colours: light theme by default, dark theme following the visitor's
 * system setting (prefers-color-scheme). Accents: tieflila and altrosa
 * share the work (links, titles, highlights); red is reserved for
 * warnings.
 */

/* ---------- fonts: Libertinus Serif, self-hosted (OFL, see OFL.txt) ---------- */

@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/libertinus/LibertinusSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/libertinus/LibertinusSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/libertinus/LibertinusSerif-Semibold.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/libertinus/LibertinusSerif-SemiboldItalic.woff2") format("woff2");
  font-weight: 500 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- colours ---------- */

:root {
  /* light: very bright beige page, slightly deeper beige panels */
  --page: #fcf8f1;
  --panel: #f4ede2;
  --text: #2b2430;
  --text-quiet: #6e6372;
  --rule: #e4d9cb;

  --lila: #4f2a68;          /* tieflila: name, titles, links */
  --rosa: #94566a;          /* altrosa, deep enough for text on beige (4.8:1 on panels) */
  --rosa-soft: #d7b2bc;     /* altrosa for lines and underlines */
  --rosa-wash: #ecd9dc;     /* altrosa as a faint surface */
  --red: #a3232e;           /* warnings only */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark: true black page, dark grey behind all text, soft beige text */
    --page: #000000;
    --panel: #19171a;
    --text: #ece3d3;
    --text-quiet: #b4aa9b;
    --rule: #2c282d;

    --lila: #bfa3dd;
    --rosa: #e2aab8;
    --rosa-soft: #8a5d69;
    --rosa-wash: #2a1f23;
    --red: #ef7079;
  }
}

/* ---------- sizes ----------
 * One knob for the size of everything, like browser zoom:
 * all lengths are in rem, and 1rem = --scale x the visitor's own default
 * font size (so a visitor who set a bigger default still gets bigger text).
 * Desktops get the large size Lino chose (160 %), tablets and phones less,
 * so a phone does not show three words per line.
 * Media queries cannot see --scale (they measure in the browser default),
 * so they are written in em and the tiers below match them.
 */

:root { --scale: 1.6; font-size: calc(var(--scale) * 100%); }
@media (max-width: 64em) { :root { --scale: 1.35; } }   /* tablets, small laptops */
@media (max-width: 40em) { :root { --scale: 1.1; } }    /* phones */

:root {
  --font: "Libertinus Serif", "Linux Libertine O", "Linux Libertine",
          Charter, "Bitstream Charter", Cambria, serif;

  --edge: clamp(1rem, 3vw, 3rem);   /* outer margin, in rem: zoom-stable */
  --gap: 1.5rem;                    /* space between panels */
  --panel-pad: 1.5rem 1.75rem;
  --col-min: 24rem;                 /* a panel is never narrower */
  --cols: 2;                        /* at most this many columns */
  --measure: 70ch;                  /* longest comfortable line */
  --bar-height: 3.25rem;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-height) + 1rem);  /* anchors clear the sticky bar */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.25rem;               /* Libertinus has a small x-height */
  line-height: 1.55;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  hyphens: auto;
  text-rendering: optimizeLegibility;
}

p, li, dd { text-wrap: pretty; }
p { margin: 0 0 0.75em; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  hyphens: manual;
}

h1, h2, .smallcaps, .site-nav, .site-title, summary {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;           /* small caps need a little air */
  font-variant-numeric: lining-nums;
}

h1 { font-size: 2.1rem; color: var(--lila); margin: 0 0 0.25rem; }
h2 { font-size: 1.45rem; color: var(--rosa); margin: 0 0 0.75rem; }
h3 { font-size: 1.15rem; color: var(--lila); margin: 1.25rem 0 0.4rem; }
h4, h5, h6 { font-size: 1rem; font-style: italic; font-weight: 400; margin: 1rem 0 0.3rem; }

a {
  color: var(--lila);
  text-decoration-line: underline;
  text-decoration-color: var(--rosa-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
a:hover { text-decoration-color: currentColor; }

strong, b { font-weight: 600; }

img { max-width: 100%; height: auto; }

code, pre {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.85em;
}
pre { overflow-x: auto; padding: 0.75rem 1rem; background: var(--rosa-wash); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }

address { font-style: normal; }

ul, ol { padding-left: 1.2em; margin: 0 0 0.75em; }
li { margin: 0.15em 0; }
li::marker { color: var(--rosa); }

:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }

::selection { background: var(--rosa-wash); }

.warning { color: var(--red); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--edge); top: 0.5rem; z-index: 20; background: var(--page); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- top bar ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding: 0.55rem var(--edge) 0.5rem;
  background: var(--page);
  border-bottom: 1px solid var(--rule);
}

.site-title {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--lila);
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav li { margin: 0; }
.site-nav a {
  font-size: 1.2rem;
  color: var(--text-quiet);
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--lila); border-bottom-color: var(--rosa-soft); }
.site-nav a[aria-current="page"] { color: var(--lila); border-bottom-color: var(--rosa); }

/* sticky only on desktops, where there is room for it */
@media (min-width: 64em) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: var(--bar-height);
  }
}

/* ---------- page frame ---------- */

main { padding: 2rem var(--edge) 0; }

.page-header { margin-bottom: 1.75rem; max-width: var(--measure); }
.page-description { color: var(--text-quiet); font-style: italic; margin: 0; }

.lead { max-width: 100ch; margin-bottom: 1.75rem; font-size: 1.1em; }

/* names that must not be split across lines (e.g. at their hyphens) */
.nowrap { white-space: nowrap; }

/* a page with a single panel (e.g. contact): title and panel centred */
.page-single { max-width: 52rem; margin-inline: auto; }
.page-single .grid { grid-template-columns: 1fr; }

/* ---------- the grid ----------
 * Columns are at least --col-min wide and at most --cols per row:
 * the max() keeps each column at least 1/--cols of the row,
 * min(100%, ...) lets a single column shrink on small screens.
 */

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--col-min),
      (100% - (var(--cols) - 1) * var(--gap)) / var(--cols))), 1fr));
  align-items: start;
}
.grid-home { --cols: 2; }
.grid-wide { --cols: 1; }

.panel {
  background: var(--panel);
  padding: var(--panel-pad);
  border-radius: 3px;
  min-width: 0;                     /* long words never widen a column */
}
.panel > :last-child { margin-bottom: 0; }

/* prose inside a wide panel keeps a readable line length */
.panel p, .panel ul, .panel ol, .panel dl, .panel address { max-width: var(--measure); }

/* ---------- folding: <details> ----------
 * In Markdown, a section folds when its heading carries a class:
 *   ## Title
 *   {: .fold}          starts folded
 *   {: .fold-open}     foldable, starts open
 * Elsewhere: <details markdown="1"><summary>Title</summary> ... </details>
 */

summary {
  cursor: pointer;
  list-style: none;
  color: var(--rosa);
}
summary::-webkit-details-marker { display: none; }

/* a small drawn chevron, so it does not depend on font glyphs */
summary::before {
  content: "";
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin: 0 0.55em 0.12em 0.05em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
details[open] > summary::before { transform: rotate(45deg); }
summary:hover { color: var(--lila); }

/* a whole panel that folds: the heading is the summary */
details.panel > summary > h2 { display: inline; margin: 0; }
details.panel > summary { margin: 0; }
details.panel[open] > summary { margin-bottom: 0.75rem; }

/* a fold inside a panel */
.panel details { margin: 0.5rem 0 0.25rem; }
.panel details > summary { font-size: 1.05rem; }
.panel details[open] > summary { margin-bottom: 0.4rem; }

/* ---------- home page ---------- */

.about-panel { display: flow-root; }

/* portrait with an arched top: oversized radii shrink to a semicircle */
.portrait {
  float: right;
  width: min(11rem, 42%);
  margin: 0.25rem 0 0.75rem 1.25rem;
}
.portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 999px 999px 3px 3px;
}
.portrait address {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-quiet);
}

.more-link { margin-top: 0.75rem; font-style: italic; }

/* teaching: term line, downloads, the short list on the home page */
.term { color: var(--rosa); font-style: italic; margin-top: -0.4rem; }
.teaching-list .term { margin: 0; }
.teaching-list { list-style: none; padding: 0; }
.teaching-list li { margin: 0 0 0.4rem; }
.teaching-title { font-weight: 600; }
.downloads { padding-left: 1.2em; }

/* ---------- publications ---------- */

ol.bibliography {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--col-min),
      (100% - (var(--cols) - 1) * var(--gap)) / var(--cols))), 1fr));
  align-items: start;
}
ol.bibliography > li {
  margin: 0;
  background: var(--panel);
  padding: var(--panel-pad);
  border-radius: 3px;
}

/* the publications page: one entry per row; on wide screens the
   title spans the row, the abstract sits right of authors and links
   (from 90em, i.e. about 1440 px, where both halves stay readable) */
.publication-list ol.bibliography { --cols: 1; }
@media (min-width: 90em) {
  .publication-list .pub {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  .publication-list .pub > p { grid-column: 1; }
  .publication-list .pub > .pub-title { grid-column: 1 / -1; }   /* title uses the full width */
  .publication-list .pub-abstract { grid-column: 2; grid-row: 2 / span 3; margin: 0; }
}

/* the same list inside a home panel: plain, stacked */
.panel ol.bibliography { display: block; }
.panel ol.bibliography > li { background: none; padding: 0; margin: 0 0 1rem; }

.pub p { margin: 0 0 0.15rem; }
.pub-title { font-weight: 600; color: var(--lila); line-height: 1.3; }
.pub-authors { font-size: 0.95rem; }
.pub-authors strong { font-weight: 400; text-decoration: underline; text-decoration-color: var(--rosa-soft); text-underline-offset: 0.2em; }
.pub-venue { font-size: 0.95rem; }
.pub-venue cite { font-style: italic; }
.open-access { color: var(--rosa); font-variant-caps: all-small-caps; letter-spacing: 0.05em; }
.pub-meta { font-size: 0.95rem; color: var(--text-quiet); }
.pub-abstract p { font-size: 0.95rem; }

/* ---------- CV ---------- */

.cv-map {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 1.25rem;
  margin: 0;
}
.cv-map dt { color: var(--text-quiet); font-style: italic; }
.cv-map dd { margin: 0; }

.cv-timeline { list-style: none; padding: 0; margin: 0; }
.cv-timeline > li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  margin: 0 0 0.9rem;
}
.cv-year {
  color: var(--rosa);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.cv-title { margin: 0; font-weight: 600; }
.cv-institution { margin: 0; color: var(--text-quiet); font-style: italic; }
.cv-timeline ul { margin: 0.2rem 0 0; }

@media (max-width: 35em) {
  .cv-timeline > li { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- footer ---------- */

.site-footer {
  margin-top: 3rem;
  padding: 1.25rem var(--edge) 2.5rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  color: var(--text-quiet);
}
.site-footer p { margin: 0.2rem 0; }
.site-footer a { color: var(--text-quiet); }
.site-footer a:hover { color: var(--lila); }

/* ---------- back to top ----------
 * A plain link to #top. Where the browser supports scroll-driven
 * animations it fades in after scrolling; elsewhere it is always there.
 */

.to-top {
  position: fixed;
  right: var(--edge);
  bottom: 1.25rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel);
  color: var(--rosa);
  text-decoration: none;
  font-variant-numeric: lining-nums;
}
.to-top:hover { color: var(--lila); background: var(--rosa-wash); }

@supports (animation-timeline: scroll()) {
  @keyframes to-top-appear {
    from { opacity: 0; visibility: hidden; }
    to   { opacity: 1; visibility: visible; }
  }
  .to-top {
    animation: to-top-appear linear both;
    animation-timeline: scroll();
    animation-range: 0 20rem;
  }
}

/* ---------- small screens: one column, the current simple layout ---------- */

@media (max-width: 40em) {
  body { font-size: 1.15rem; }
  :root { --panel-pad: 1.1rem 1.15rem; --gap: 1rem; }
  main { padding-top: 1.25rem; }
  h1 { font-size: 1.8rem; }
  .portrait { width: min(9rem, 40%); }
}

/* ---------- print ---------- */

@media print {
  :root { --page: #fff; --panel: #fff; --text: #000; }
  .site-nav, .to-top, .skip-link { display: none; }
  .site-header { position: static; }
  .grid, ol.bibliography { display: block; }
  .panel, ol.bibliography > li { padding: 0; margin-bottom: 1rem; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- fleurons ----------
 * Printer's flowers from Libertinus itself (no images):
 * ☙ U+2619, ⚘ U+2698, ❧ U+2767.
 * - the divider ☙ ⚘ ❧ sits under every page title (not under panel
 *   titles: Lino found that too crowded);
 * - an unfolded section shows a flower ⚘ right next to the place
 *   where it folds back in; it simply appears, no animation;
 * - a Markdown `---` (an <hr>) becomes the divider as well;
 * - every page ends with a single ❧ above the footer.
 * Altrosa and small, so they decorate without asking for attention.
 */

:root {
  --fleurons: "\2619\2002\2698\2002\2767";
  --flower: "\2698";
}

/* under page titles (and the lead line of the home page) */
.page-header::after,
.home-lead::after {
  content: var(--fleurons);
  display: block;
  margin-top: 0.6rem;
  color: var(--rosa);
  font-size: 1.05rem;
  font-style: normal;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* the flower next to an open fold, where a click folds it back in */
details.panel[open] > summary > h2::after,
.panel details[open] > summary::after {
  content: var(--flower);
  margin-left: 0.45em;
  color: var(--rosa);
  font-variant-caps: normal;
  letter-spacing: 0;
}

hr {
  border: 0;
  margin: 1.75rem auto;
  height: auto;
  text-align: center;
  line-height: 1;
}
hr::after {
  content: var(--fleurons);
  color: var(--rosa);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
}

.page-end {
  margin: 3rem 0 0;
  text-align: center;
  color: var(--rosa);
  font-size: 1.4rem;
  line-height: 1;
}
.page-end + .site-footer { margin-top: 1.25rem; }

@media print {
  hr::after, .page-end { color: #000; }
}