/* ==========================================================================
   sc-aasr.gr — public stylesheet
   Hand-written. No framework, no preprocessor, no build step.
   See DESIGN.md for the reasoning behind every value in here.
   ========================================================================== */

/* --- Fonts: self-hosted, Greek + Latin subsets only ---------------------- */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/ebgaramond-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Polytonic Greek (the Tassios diploma). Loaded only on pages that use it. */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/ebgaramond-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* The three-dots sign (Α∴Α∴Σ∴Τ∴), which neither EB Garamond nor Inter contain.
   A 780-byte subset of Noto Sans Math (SIL OFL), used for this one character. */
@font-face {
  font-family: 'Mason';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/mason-dots.woff2') format('woff2');
  unicode-range: U+2234;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/ebgaramond-latin.woff2') format('woff2');
  unicode-range: U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B0,U+00BB,U+2013,U+2014,U+2018-201E,U+2026;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/ebgaramond-latin-more.woff2') format('woff2');
  unicode-range: U+00A1-00A8,U+00AA,U+00AC-00AF,U+00B1-00BA,U+00BC-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-2012,U+201F-2025,U+2027-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B0,U+00BB,U+2013,U+2014,U+2018-201E,U+2026;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-more.woff2') format('woff2');
  unicode-range: U+00A1-00A8,U+00AA,U+00AC-00AF,U+00B1-00BA,U+00BC-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-2012,U+201F-2025,U+2027-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Stand-ins sized to match the web fonts, so that when a font arrives the text
   does not change width and the page does not jump. Local fonts only: nothing
   to download. Values measured from the font files (Greek letters, average
   advance width and vertical metrics). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 107.8%;
  ascent-override: 89.9%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Garamond Fallback';
  src: local('Georgia');
  size-adjust: 86.3%;
  ascent-override: 116.7%;
  descent-override: 34.5%;
  line-gap-override: 0%;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Palette, sampled from the emblem */
  --ink:         #1A1A1F;
  --ink-soft:    #5C5C66;
  --purple:      #5A2A5A;
  --purple-mid:  #823C82;
  --purple-wash: #EDE4ED;
  --gold:        #C8963C;
  --grey:        #B4B4B4;
  --paper:       #FFFFFF;
  --paper-alt:   #F7F7F8;
  --rule:        #E3E3E6;

  /* Families. Inter is the text face. EB Garamond is kept for titles only
     (h1–h4 and page titles in lists). EB Garamond is also the fallback after
     Inter, because it carries polytonic Greek (U+1F00–1FFF) which Inter does not. */
  --serif: 'EB Garamond', 'Garamond Fallback', 'Mason', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Inter Fallback', 'Mason', 'EB Garamond', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.75rem;

  /* Measure and rhythm */
  --wrap:    1080px;
  --measure: 44rem;   /* in rem, not ch: a width that depends on the font would jump when the font loads */
  --gutter:  20px;
  --band:    72px;
}

@media (min-width: 600px) {
  :root { --gutter: 24px; }
}
@media (min-width: 900px) {
  :root { --band: 96px; }
}

/* --- Reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Room for the fixed bar when jumping to an anchor. */
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, p, figure, figcaption { margin: 0; }

/* Titles are the one place EB Garamond is used. */
h1, h2, h3, h4 { font-family: var(--serif); }

/* --- Shared layout ------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

/* Visible for keyboard users only; never a focus ring removal. */
:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 2px;
}


/* --- Header -------------------------------------------------------------- */
/* Centred, because there is no navigation yet: a left-aligned emblem with an
   empty right side would read as unfinished. Not sticky. */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--gold);
  padding-block: 28px;
  text-align: center;
}

.masthead__logo {
  display: inline-block;
  line-height: 0;
}

/* The emblem is the masthead. It carries the organisation's name around its
   own arc, so nothing is set beneath it and it can be read at this size. */
.masthead__logo img {
  height: 116px;
  width: auto;
  margin-inline: auto;
}

@media (min-width: 700px) {
  .masthead { padding-block: 36px; }
  .masthead__logo img { height: 168px; }
}

/* --- Title band ---------------------------------------------------------- */

.title-band {
  background: var(--paper);
  padding-block: 56px 0;
  text-align: center;
}

.title-band__h1 {
  max-width: 700px;
  margin-inline: auto;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

@media (min-width: 720px) {
  .title-band { padding-block: 80px 0; }
  .title-band__h1 { font-size: var(--fs-2xl); }
}

/* --- Welcome ------------------------------------------------------------- */

/* The change of background is itself the separator, so the space below the
   signature is shorter than the space above the section. */
.welcome { padding-block: var(--band) calc(var(--band) * 0.55); }

.welcome__grid { display: grid; gap: 32px; }

/* The portrait is first in source order so that it sits above the text on
   narrow screens without any reordering trickery. */
.welcome__portrait {
  max-width: 340px;
  margin-inline: auto;
}

.welcome__portrait img {
  width: 100%;
  border: 1px solid var(--rule);
}

.welcome__prose > * + * { margin-top: 1.05em; }

.welcome__lead {
  font-size: 1.3125rem;
  line-height: 1.55;
}

.welcome__body p { font-size: var(--fs-md); line-height: 1.7; }
.welcome__body > * + * { margin-top: 1.05em; }
.welcome__body ul, .welcome__body ol { padding-left: 1.4em; }
.welcome__body blockquote {
  margin: 0;
  padding-left: 1.2em;
  border-left: 1px solid var(--gold);
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .welcome__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
  }
  .welcome__portrait {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
  }
  .welcome__prose {
    grid-column: 1;
    grid-row: 1;
  }
}

/* --- Signature ----------------------------------------------------------- */

.signature { margin-top: 44px; text-align: center; }

.signature__rule {
  width: 48px;
  height: 1px;
  margin: 0 auto 16px;
  border: 0;
  background: var(--gold);
}

.signature__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--ink);
}

.signature__title {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .signature { text-align: right; }
  .signature__rule { margin-right: 0; margin-left: auto; }
}

/* --- Council photograph -------------------------------------------------- */

.council {
  background: var(--paper-alt);
  padding-block: var(--band);
}

.council__figure { margin: 0; }

.council__figure img { width: 100%; }

.council__caption {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Footer -------------------------------------------------------------- */
/* The one place purple is a large area. It works because everything above is
   white. Two lines only — this site has no contact details. */

/* The emblem is drawn for a light ground: on the deep purple its black
   lettering and the magenta star ring lose nearly all of their contrast. The
   band therefore sits on the palest purple, which keeps the colour present
   without it becoming a large flat fill. A gold hairline opens the band,
   answering the one that closes the masthead. */
.site-footer {
  background: var(--purple-wash);
  border-top: 1px solid var(--gold);
  color: var(--ink);
  padding-block: 48px;
  text-align: center;
}

.site-footer__logo {
  line-height: 0;
}

.site-footer__logo img {
  height: 88px;
  width: auto;
  margin-inline: auto;
}

.site-footer__nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 28px 0 0;
  padding: 0;
}

.site-footer__nav a {
  font-family: var(--sans);
  font-size: var(--fs-base);
  color: var(--purple);
}

.site-footer__legal {
  max-width: 470px;
  margin: 28px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(90, 42, 90, 0.18);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (min-width: 700px) {
  .site-footer { padding-block: 64px; }
  .site-footer__logo img { height: 107px; }
}

/* --- Links --------------------------------------------------------------- */

a { color: var(--purple); }

.welcome__body a {
  text-decoration: underline;
  text-decoration-color: var(--purple-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 120ms linear;
}

.welcome__body a:hover { text-decoration-thickness: 2px; }

/* Footer links: plain until hovered or focused. */
.site-footer a {
  color: var(--purple);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--purple-mid);
}
.site-footer a:hover,
.site-footer a:focus-visible { text-decoration: underline; }

/* --- Error page ---------------------------------------------------------- */

.notice {
  padding-block: var(--band);
  text-align: center;
}

.notice__title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.2;
}

.notice__text { margin-top: 16px; color: var(--ink-soft); }

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ==========================================================================
   Step 2 — menu, inner pages, news
   ========================================================================== */

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--purple);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  padding: 12px 16px;
  border: 1px solid var(--rule);
}
.skip-link:focus { left: var(--gutter); top: 8px; }

/* --- Main menu ------------------------------------------------------------ */
/* Mobile first: a plain list under a "Μενού" button. Without JavaScript the
   whole list is simply visible. */

.site-nav {
  position: relative;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.site-nav__toggle {
  display: block;
  width: 100%;
  padding: 14px var(--gutter);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.3;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.site-nav__list,
.sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.js .site-nav__list:not(.is-open) { display: none; }

.site-nav__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--rule);
}

.site-nav__link {
  flex: 1 1 auto;
  padding: 13px var(--gutter);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}

.site-nav__item.is-current > .site-nav__link { color: var(--purple); }

.sub-toggle {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}

.sub-toggle__icon path { stroke: currentColor; stroke-width: 1.2; fill: none; }
.sub-toggle[aria-expanded="true"] .v { display: none; }

.sub { flex: 1 0 100%; background: var(--paper-alt); }
.js .has-sub:not(.is-open) > .sub { display: none; }

.sub a {
  display: block;
  padding: 11px var(--gutter) 11px calc(var(--gutter) + 18px);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--rule);
}

.sub a[aria-current="page"] { color: var(--purple); }

@media (min-width: 900px) {
  .site-nav__toggle { display: none !important; }
  .js .site-nav__list:not(.is-open),
  .site-nav__list { display: flex; }

  .site-nav__list {
    justify-content: center;
    gap: 0 clamp(1.1rem, 2.6vw, 2.5rem);
    padding-inline: var(--gutter);
  }

  .site-nav__item { position: relative; flex-wrap: nowrap; border-top: 0; }

  .site-nav__link {
    flex: 0 0 auto;
    padding: 17px 2px;
    font-size: clamp(0.875rem, 1.3vw, 0.9375rem);
    font-weight: 500;
    letter-spacing: 0.005em;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 8px;
  }

  .site-nav__link:hover,
  .site-nav__item.is-current > .site-nav__link { text-decoration-color: var(--gold); }

  .sub-toggle { width: 28px; height: 28px; margin-left: 2px; }

  .sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 19.5rem;
    max-width: 26rem;
    padding: 6px 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top-color: var(--gold);
  }

  /* The menu is centred; keep a panel inside the page near the right edge. */
  .site-nav__item:nth-last-child(-n+3) > .sub { left: auto; right: 0; }

  .sub a { padding: 9px 20px; border-top: 0; }
  .sub a:hover { background: var(--purple-wash); }

  /* Without JavaScript the panels open on hover or keyboard focus. */
  html:not(.js) .has-sub:hover > .sub,
  html:not(.js) .has-sub:focus-within > .sub { display: block; }
  html:not(.js) .sub { display: none; }
}

/* --- Inner pages ---------------------------------------------------------- */

.crumbs { padding-top: 26px; }

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
}

.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--gold); }
.crumbs a { color: var(--ink-soft); }

.page { padding-block: 28px var(--band); }

.page__title {
  max-width: 26em;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.18;
  text-wrap: balance;
}

.page__year,
.page__subtitle {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.page__meta {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

.page > .prose,
.page > .gallery,
.page > .document { margin-top: 32px; }

@media (min-width: 720px) {
  .page__title { font-size: 2.375rem; }
}

/* --- Prose ----------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.05em; }

.prose h2 {
  margin-top: 2.1em;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

.prose h3 {
  margin-top: 1.8em;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
}

.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose h2, .prose h3 { scroll-margin-top: 16px; }

.prose a {
  color: var(--purple);
  text-decoration: underline;
  text-decoration-color: var(--purple-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a:hover { text-decoration-thickness: 2px; }

.prose ul {
  padding-left: 1.1em;
  list-style: none;
  border-left: 1px solid var(--gold);
}
.prose ul > li + li { margin-top: 0.35em; }
.prose ol { padding-left: 1.6em; }

.prose blockquote {
  margin: 2em 0;
  padding: 1.4em 1.2em;
  text-align: center;
  border-block: 1px solid var(--gold);
}
.prose blockquote > * + * { margin-top: 0.9em; }

.figure { margin: 2em 0; max-width: 100%; }
.figure img { width: 100%; height: auto; border: 1px solid var(--rule); }
.figure--portrait { max-width: 340px; }

.figure__caption {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
}

.gallery { display: grid; gap: 20px; max-width: 860px; align-items: start; }
.gallery .figure { margin: 0; max-width: none; }
.gallery .figure--portrait { max-width: none; }
.gallery--1 .figure--portrait { max-width: 340px; }

@media (min-width: 600px) {
  .gallery--2, .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Section landing pages ------------------------------------------------ */

.children { margin-top: 56px; padding-top: 30px; max-width: 800px; border-top: 1px solid var(--rule); }

.children__heading {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--sans);
  color: var(--ink-soft);
}

.children__list { margin: 12px 0 0; padding: 0; list-style: none; }

.children__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.children__link {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--purple);
  text-decoration-color: var(--purple-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.children__link:hover { text-decoration-thickness: 2px; }

.children__excerpt { margin: 6px 0 0; font-size: var(--fs-base); line-height: 1.55; color: var(--ink-soft); }

.children__year {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--purple);
}

@media (min-width: 700px) {
  .children__list--timeline .children__item { flex-direction: row; gap: 32px; }
  .children__list--timeline .children__year { flex: 0 0 8.5rem; padding-top: 3px; }
}

/* --- Council members ------------------------------------------------------- */

.roster { max-width: 680px; margin: 36px 0 0; }

.roster__row { display: grid; gap: 2px; padding: 15px 0; border-top: 1px solid var(--rule); }
.roster__row:last-child { border-bottom: 1px solid var(--rule); }
.roster__role { margin: 0; font-size: var(--fs-sm); color: var(--purple); }
.roster__name {
  margin: 0;
  /* Regular weight on purpose: the bold of the variable Inter file draws the Greek
     omega wrongly on some computers (seen on a client's PC, 2026-10). The default
     weight (400) is not affected, so the names stand out by size and ink instead. */
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--ink);
}

@media (min-width: 640px) {
  .roster__row { grid-template-columns: 19rem minmax(0, 1fr); gap: 24px; align-items: baseline; }
}

/* --- Publications ------------------------------------------------------------ */

.pubs { margin-top: 52px; }
.pubs:first-of-type { margin-top: 36px; }

.pubs__heading {
  max-width: 28em;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

.pubs > .prose { margin-top: 18px; }
.pubs__split { display: grid; gap: 24px; margin-top: 22px; }
.pubs__split .prose { margin-top: 0; }

.pubs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 34px 24px;
  align-items: start;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.pubs__grid--single { grid-template-columns: minmax(0, 220px); margin: 0; }

.cover { margin: 0; }
.cover__frame { line-height: 0; border: 1px solid var(--rule); background: var(--paper-alt); }
.cover__frame img { display: block; width: 100%; height: auto; }

.cover__frame--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
}
.cover__frame--empty img { width: 58%; }

.cover__caption {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (min-width: 760px) {
  .pubs__split { grid-template-columns: 220px minmax(0, 1fr); gap: 44px; }
}

/* --- News ----------------------------------------------------------------------- */

.news-list { max-width: 860px; margin: 34px 0 0; padding: 0; list-style: none; }

.news-item { display: grid; gap: 16px; padding: 28px 0; border-top: 1px solid var(--rule); }
.news-item:last-child { border-bottom: 1px solid var(--rule); }

.news-item__thumb {
  display: block;
  line-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
}
.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-item__thumb img[src$="logo.png"] { object-fit: contain; padding: 14%; }

.news-item__meta {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

.news-item__title { margin: 6px 0 0; font-size: var(--fs-lg); font-weight: 400; line-height: 1.25; }
.news-item__title a { color: var(--ink); text-decoration: none; }
.news-item__title a:hover { color: var(--purple); text-decoration: underline; text-decoration-thickness: 1px; }
.news-item__subtitle { margin: 6px 0 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; color: var(--ink-soft); }
.news-item__excerpt { margin: 8px 0 0; font-size: var(--fs-base); line-height: 1.55; color: var(--ink-soft); }

@media (min-width: 700px) {
  .news-item { grid-template-columns: 168px minmax(0, 1fr); gap: 32px; }
}

.paging { display: flex; gap: 18px; margin-top: 32px; font-family: var(--sans); font-size: var(--fs-sm); }
.paging [aria-current="page"] { color: var(--ink-soft); }

.back { margin: 48px 0 0; font-size: var(--fs-base); }

/* --- Homepage news ----------------------------------------------------------- */

.news-band { padding-block: var(--band); background: var(--paper); }

.news-band__heading {
  margin: 0 0 8px;
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.news-band__list { max-width: 760px; margin: 32px auto 0; padding: 0; list-style: none; }
.news-band__item { padding: 22px 0; border-top: 1px solid var(--rule); }
.news-band__item:last-child { border-bottom: 1px solid var(--rule); }

.news-band__label { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); }

.news-band__meta {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

.news-band__title { margin: 6px 0 0; font-size: var(--fs-lg); font-weight: 400; line-height: 1.25; }
.news-band__title a { color: var(--ink); text-decoration: none; }
.news-band__title a:hover { color: var(--purple); text-decoration: underline; text-decoration-thickness: 1px; }
.news-band__subtitle { margin: 6px 0 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; color: var(--ink-soft); }
.news-band__all { max-width: 760px; margin: 26px auto 0; font-size: var(--fs-base); }

/* --- Document page, pager ---------------------------------------------------- */

.document__link { display: inline-block; line-height: 0; }
.document__link img { max-width: 562px; width: 100%; height: auto; border: 1px solid var(--rule); }
.document__open { margin: 14px 0 0; font-family: var(--sans); font-size: var(--fs-sm); }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--measure);
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.pager a { display: block; max-width: 48%; text-decoration: none; }
.pager__next { margin-left: auto; text-align: right; }
.pager__hint { display: block; font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-soft); }
.pager__title { display: block; margin-top: 2px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--purple); }
.pager a:hover .pager__title { text-decoration: underline; text-decoration-thickness: 1px; }

/* --- Sticky bar ------------------------------------------------------------ */
/* Added by site.js once the full masthead has scrolled away. The wrap holds the
   old height, so nothing below moves. Slim: a small emblem and the menu. */

.site-top.is-compact {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: var(--paper);
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 2px 14px rgba(26, 26, 31, 0.09);
  animation: bar-in 180ms ease-out;
}

@keyframes bar-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

.is-compact .masthead { padding: 6px 0; border: 0; text-align: left; flex: 0 0 auto; }
.is-compact .masthead .wrap { padding: 0; max-width: none; }
.is-compact .masthead__logo img { height: 46px; }

.is-compact .site-nav { flex: 1 1 auto; position: static; background: none; border: 0; }
.is-compact .site-nav__toggle { width: auto; margin-left: auto; padding: 16px 0 16px var(--gutter); }

/* Small screens: the opened list drops from the bar over the page. */
.is-compact .site-nav__list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - 62px);
  overflow-y: auto;
  background: var(--paper);
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 10px 18px rgba(26, 26, 31, 0.1);
}

@media (min-width: 900px) {
  .is-compact .site-nav__list {
    position: static;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: 0;
    background: none;
    justify-content: flex-end;
    padding-inline: 0;
  }
  /* The menu fills the bar's height, so a submenu opens exactly at its lower edge. */
  .is-compact .site-nav { align-self: stretch; display: flex; }
  .is-compact .site-nav__list { align-items: stretch; flex: 1 1 auto; }
  .is-compact .site-nav__link { padding-block: 21px; }
  .is-compact .sub { top: 100%; }
  .is-compact .site-nav__item:nth-last-child(-n+3) > .sub { left: auto; right: 0; }
  .is-compact .site-nav__item:nth-child(-n+2) > .sub { left: 0; right: auto; }
}

/* --- Page header: picture or purple band -------------------------------------- */

.hero {
  position: relative;
  display: flex;
  min-height: clamp(260px, 36vw, 420px);
  margin-top: 24px;
  overflow: hidden;
  color: #fff;
  background: var(--purple);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Dark at the top (breadcrumbs) and at the bottom (title), so white text holds
   on any photograph. */
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(22, 10, 24, 0.55), rgba(22, 10, 24, 0) 38%),
    linear-gradient(to top, rgba(22, 10, 24, 0.9), rgba(22, 10, 24, 0.5) 42%, rgba(22, 10, 24, 0.08) 100%);
}

.hero--band {
  background: linear-gradient(135deg, #43204A 0%, var(--purple) 55%, #6B336B 100%);
}

/* The emblem as a faint white watermark. */
.hero__mark {
  position: absolute;
  right: -2%;
  bottom: -18%;
  width: auto;
  height: 135%;
  max-width: none;
  filter: brightness(0) invert(1);
  opacity: 0.08;
  pointer-events: none;
}

.hero__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  padding: 16px 20px 26px;
}

@media (min-width: 720px) {
  .hero__text { padding: 22px 40px 38px; }
}

.hero .crumbs { padding-top: 0; }
.hero .crumbs ol { color: rgba(255, 255, 255, 0.86); }
.hero .crumbs a { color: #fff; }
.hero .crumbs li + li::before { color: var(--gold); }

.hero__year {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--gold);
}

.hero__h1 {
  max-width: 24em;
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

@media (min-width: 720px) {
  .hero__h1 { font-size: 2.5rem; }
}

.page--hero { padding-top: 12px; }

/* --- Pictures inside the text ------------------------------------------------------ */
/* Tall pictures sit to the right of the text on a wide screen; two or more in a
   row of paragraphs sit side by side as a strip. */

@media (min-width: 760px) {
  .prose .figure--portrait {
    float: right;
    width: 300px;
    max-width: 42%;
    margin: 6px 0 20px 36px;
  }
  .prose h2, .prose h3 { clear: both; }
}
.prose::after { content: ""; display: block; clear: both; }

.figure-row {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 16px;
  max-width: 640px;
  margin: 2em 0;
  clear: both;
}
.figure-row .figure { float: none; width: auto; max-width: none; margin: 0; }
.figure-row--2 { --n: 2; }
.figure-row--3 { --n: 3; }
.figure-row--4 { --n: 4; }

/* --- Print --------------------------------------------------------------------- */

@media print {
  .site-top-wrap, .site-nav, .skip-link, .pager, .site-footer, .crumbs, .news-band { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .masthead { border: 0; padding-block: 0 12pt; }
  .masthead__logo img { height: 70px; }
  .page { padding-block: 0; }
}