/* Self-hosted stand-ins for the design's Adobe Fonts faces. When an Adobe Fonts
   kit is configured (src/site.mjs) the body gets .adobe-fonts and the real faces
   take over; these files are then never requested. */

@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/eb-garamond-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/eb-garamond-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/eb-garamond-cyrillic.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/eb-garamond-cyrillic-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Dawning of a New Day';
  src: url('/assets/fonts/dawning-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Tokens and base. The design is a 1440 artboard: 96 side margins, a 1248
   content column, type at 45 / 35 / 30 / 25 with 1.25 line height.

   --u is one artboard pixel; every measurement is the Figma value times --u.
   Columns are fluid (fr and min()), so the layout also holds between the
   phone breakpoint and 1440, where --u alone would overflow.

   Phones (max-width: 760px) have no Figma frames. They keep the same
   components and colours, stack every row, and switch type to fixed sizes
   through the --fs-* tokens, so components never restate font sizes. */

:root {
  --navy: #112e59;
  --blue: #244b80;
  --yellow: #f8cc35;
  --yellow-deep: #ebb81c;
  --muted: #637080;
  --paper: #faf9f5;
  --white: #fff;
  --placeholder: #e5e5e5;
  --line: #dadfdf; /* Figma's rule and field-border colour */

  --u: clamp(.62px, calc(100vw / 1440), 1.15px);

  --serif: 'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script: 'Dawning of a New Day', 'Segoe Script', 'Brush Script MT', cursive;

  --fs-h1: calc(45 * var(--u));
  --fs-h2: calc(45 * var(--u));
  --fs-sub: calc(35 * var(--u));
  --fs-accent: calc(35 * var(--u));
  --fs-btn: calc(30 * var(--u));
  --fs-title: calc(30 * var(--u));
  --fs-body: calc(25 * var(--u));

  --gutter: calc(96 * var(--u));
  --col: calc(1248 * var(--u));
  --sec-y: calc(80 * var(--u));
  --btn-w: calc(360 * var(--u));
  --btn-h: calc(80 * var(--u));

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* The stand-ins are tuned to Adobe's metrics, measured against Figma's render:
   EB Garamond sets 7-9% wider than Aldine Display, so it is tracked in (more for
   headings), and Dawning of a New Day sets about 20% narrower than Ernie, so it
   is scaled up on a fixed line box. Lines then break where the design breaks
   them. With an Adobe Fonts kit all of this is switched off. */
:root {
  --script-scale: 1.22;
  --track-body: -.025em;
  --track-head: -.03em;
}
.adobe-fonts {
  --serif: 'adobe-aldine', 'EB Garamond', Georgia, serif;
  --script: 'adobe-handwriting-ernie', 'Dawning of a New Day', cursive;
  --script-scale: 1;
  --track-body: 0;
  --track-head: 0;
}

@media (max-width: 760px) {
  :root {
    --u: .5px;
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-sub: 23px;
    --fs-accent: 22px;
    --fs-btn: 19px;
    --fs-title: 21px;
    --fs-body: 17px;
    --gutter: 20px;
    --sec-y: 48px;
    --btn-w: 100%;
    --btn-h: 54px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font: 400 var(--fs-body) / 1.25 var(--serif);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 400; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 16px; background: var(--navy); color: var(--white); text-decoration: none;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sec--navy :focus-visible { outline-color: var(--yellow); }

/* Type roles */
.h1 { font-size: var(--fs-h1); line-height: 1.25; letter-spacing: var(--track-head); }
.h2 { font-size: var(--fs-h2); line-height: 1.25; letter-spacing: var(--track-head); }
.h3 { font-size: var(--fs-sub); line-height: 1.25; letter-spacing: var(--track-head); }
.accent {
  font-family: var(--script);
  font-size: calc(var(--fs-accent) * var(--script-scale));
  line-height: calc(var(--fs-accent) * 1.25);
  letter-spacing: 0;
  color: var(--muted);
}
.lede { max-width: calc(760 * var(--u)); }

/* Shared components. Page-specific rules go in src/css/pages/<page>.css. */

/* ---- Header ----------------------------------------------------------------- */

.site-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--u));
  padding: calc(24 * var(--u)) var(--gutter) calc(20 * var(--u));
  background: var(--white);
}
/* The logo frame is 700 x 92.85 with the artwork inset to 71.47%. */
.site-head__brand { display: block; padding: calc(13.47 * var(--u)) 0 calc(13 * var(--u)); }
.site-head__brand img { width: calc(500.3 * var(--u)); }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 calc(32 * var(--u));
}
.site-nav a {
  display: block;
  text-decoration: none;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
@media (hover: hover) { .site-nav a:hover { text-decoration: underline; } }

/* ---- Sections --------------------------------------------------------------- */

.sec { padding: var(--sec-y) var(--gutter); }
.sec--white { background: var(--white); }
.sec--paper { background: var(--paper); }
.sec--navy { background: var(--navy); color: var(--white); }
.sec--navy .accent { color: rgba(255, 255, 255, .72); }

.wrap { width: min(var(--col), 100%); margin-inline: auto; }
.sec > .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: calc(36 * var(--u)); }
/* :where() keeps this at zero specificity, so components' own max-widths win. */
:where(.sec > .wrap) > * { max-width: 100%; }

/* Two navy sections in a row: Chrome can leave a lighter hairline where their
   boundary falls on a fractional pixel; paint over it without moving anything. */
.sec--navy + .sec--navy { box-shadow: 0 -1px 0 var(--navy); }

/* "Browse all …" style buttons sit 28 further down than the section gap. */
.more { padding-top: calc(28 * var(--u)); }

/* Every page opens under the 6px yellow rule. */
.intro { border-top: calc(6 * var(--u)) solid var(--yellow); }
.intro > .wrap { gap: calc(24 * var(--u)); }

.heading { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }

/* ---- Buttons ---------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)) calc(24 * var(--u)); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-w);
  min-height: var(--btn-h);
  padding: 0 calc(20 * var(--u));
  border: 1px solid transparent;
  font-size: var(--fs-btn);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary { background: var(--yellow); color: var(--navy); }
.btn--secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--yellow-deep); }
  .btn--secondary:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .sec--navy .btn--secondary:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
}

/* ---- Artwork cards ---------------------------------------------------------- */

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(36 * var(--u));
  width: 100%;
}

.card { display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--u)); min-width: 0; }
.card__img { display: block; width: 100%; aspect-ratio: 392 / 360; overflow: hidden; background: var(--placeholder); }
.card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: scale .6s var(--ease);
}
@media (hover: hover) { .card:hover .card__img img { scale: 1.03; } }

.card__artist { color: var(--muted); text-underline-offset: .16em; text-decoration-thickness: 1px; }
.card__title { font-size: var(--fs-title); line-height: 1.25; }
.card__more { font-weight: 600; text-underline-offset: .16em; text-decoration-thickness: 1px; }

/* ---- Image beside text ------------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 576fr) minmax(0, 600fr);
  gap: calc(72 * var(--u));
  align-items: start;
  width: 100%;
}
.split--rev .split__media { order: 2; }
.split__media { overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); }
.split__text > p:not(.accent) { max-width: calc(560 * var(--u)); }

/* ---- Forms ------------------------------------------------------------------ */

.field {
  width: 100%;
  min-height: var(--btn-h);
  padding: calc(18 * var(--u));
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font-size: var(--fs-body);
  line-height: 1.25;
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.field[aria-invalid="true"] { border-color: #b3261e; }

.form-status:empty { display: none; }
.form-status { flex-basis: 100%; }

.subscribe__form {
  display: flex;
  flex-wrap: wrap;
  gap: calc(24 * var(--u));
  width: 100%;
}
.subscribe__form .field { flex: 864 1 0; width: auto; }
.subscribe__form .btn { flex: 0 0 var(--btn-w); }

/* ---- Footer ----------------------------------------------------------------- */

.site-foot { padding: calc(72 * var(--u)) var(--gutter); background: var(--white); }
.site-foot > .wrap { display: flex; flex-direction: column; gap: calc(36 * var(--u)); }
/* The divider sits at the footer's top edge with the logo 72 below it. */
.site-foot--divided { padding-top: 0; }
.site-foot--divided > .wrap { border-top: 1px solid var(--line); padding-top: calc(72 * var(--u)); }
.site-foot__logo { width: min(calc(640 * var(--u)), 100%); }
.site-foot__cols {
  display: grid;
  grid-template-columns: minmax(0, 430fr) minmax(0, 330fr) minmax(0, 400fr);
  gap: calc(44 * var(--u));
}
.site-foot__col { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.site-foot__col p { max-width: calc(400 * var(--u)); }
.site-foot__col--nav ul { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.site-foot a { text-decoration: none; text-underline-offset: .2em; }
@media (hover: hover) { .site-foot a:hover { text-decoration: underline; } }

/* ---- Scroll reveal (app.js marks only what starts below the fold) ---------- */

.rv-pending { opacity: 0; transform: translateY(calc(24 * var(--u))); }
.rv-pending.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) var(--rd, 0ms), transform .8s var(--ease) var(--rd, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .btn, .card__img img { transition: none; }
  .card:hover .card__img img { scale: none; }
}
@media print { .rv-pending { opacity: 1; transform: none; } }

/* ---- Phones ----------------------------------------------------------------- */

@media (max-width: 760px) {
  /* Desktop measure limits are written in --u and would shrink to a third of the
     screen here; on phones text runs the full column. Every direct child of a
     section stretches, so wrapped buttons go full width like the rest. */
  main p, main h1, main h2, main h3, main li, .site-foot p { max-width: none !important; }
  :where(.sec > .wrap) > * { align-self: stretch; }

  .site-head { gap: 14px; padding-top: 18px; padding-bottom: 16px; }
  .site-head__brand { padding: 0; }
  .site-head__brand img { width: min(100%, 360px); }
  .site-nav ul { gap: 6px 18px; font-size: 17px; }

  .grid3 { grid-template-columns: 1fr; gap: 40px; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .split--rev .split__media { order: 0; }

  .subscribe__form { flex-direction: column; gap: 12px; }
  .subscribe__form .field, .subscribe__form .btn { flex: none; width: 100%; }

  .site-foot { padding-block: 40px; }
  .site-foot__cols { grid-template-columns: 1fr; gap: 28px; }
}

/* Two-column cards between phone and desktop. */
@media (min-width: 761px) and (max-width: 1000px) {
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Art & Artists (91:2532), All artworks (93:675), All artists (101:3024), the
   artist pages (101:1204) and the artwork pages (91:2799). */

/* Intro: eyebrow, title and a 720 lede, all 36 apart. */
.art-intro > .wrap { gap: calc(36 * var(--u)); }
.art-intro__lede { max-width: calc(720 * var(--u)); }

/* Buttons under a grid sit 28 further down than the section gap. */

/* The artists: two 600 profiles, 48 apart, a 600 x 300 painting each. */
.art-profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(48 * var(--u));
  width: 100%;
}
.art-profile { gap: calc(20 * var(--u)); }
.art-profile > p { max-width: calc(580 * var(--u)); }
.art-profile__img { display: block; width: 100%; aspect-ratio: 600 / 300; overflow: hidden; background: var(--placeholder); }
.art-profile__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
@media (hover: hover) { .art-profile:hover .art-profile__img img { scale: 1.03; } }

/* A closer look: the 301 frame clips a 576 x 420 image to its top. The text
   column is 302 (Figma clips it); the 1px overlap also hides the hairline that
   two navy sections leave between them at a fractional boundary. */
.art-closer { margin-bottom: -1px; }
.art-closer .split__media { aspect-ratio: 576 / 301; }
.art-closer .split__media img { height: auto; aspect-ratio: 576 / 420; }

/* About the Artist / About the artwork: a 35 statement, 1050 wide. */
.art-statement__text { max-width: calc(1050 * var(--u)); font-size: var(--fs-sub); line-height: 1.25; }

/* Artwork detail: back link, then a 736 x 518 painting (contained, never
   cropped) beside a 448 column centred on the painting's height. */
.art-detail__back { text-decoration: none; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (hover: hover) { .art-detail__back:hover { text-decoration: underline; } }
.art-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 736fr) minmax(0, 448fr);
  gap: calc(64 * var(--u));
  width: 100%;
}
.art-detail__media { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.art-detail__img { aspect-ratio: 736 / 518; overflow: hidden; }
.art-detail__img img { width: 100%; height: 100%; object-fit: contain; }
.art-detail__caption { color: var(--muted); }
.art-detail__info {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: calc(24 * var(--u));
  aspect-ratio: 448 / 518;
}
.art-detail__facts dt, .art-detail__facts dd { display: inline; }
.art-detail__facts dd::before { content: '· '; }

@media (prefers-reduced-motion: reduce) {
  .art-profile__img img { transition: none; }
  .art-profile:hover .art-profile__img img { scale: none; }
}

@media (max-width: 760px) {
  .art-profiles { grid-template-columns: 1fr; gap: 40px; }
  .art-detail__grid { grid-template-columns: 1fr; gap: 28px; }
  .art-detail__img { aspect-ratio: auto; }
  .art-detail__img img { height: auto; }
  .art-detail__info { aspect-ratio: auto; gap: 16px; }
}

/* The Foundation (91:2685), Support (91:2745), Enquiry (91:2928), Event
   registration (91:3123) and its confirmation (91:3147). */

/* Introduction: eyebrow, title and lede 36 apart (400 tall with the 6 rule,
   394 without it on the form pages). */
.fnd-intro > .wrap { gap: calc(36 * var(--u)); }
.fnd-intro__lede { max-width: calc(720 * var(--u)); }

/* Image beside text: a 576 x 420 painting. */
.fnd-feature .split__media { aspect-ratio: 576 / 420; }

/* Our artistic approach: a 35 statement, 1080 wide. */
.fnd-statement {
  max-width: calc(1080 * var(--u));
  font-size: var(--fs-sub);
  line-height: 1.25;
  letter-spacing: var(--track-head);
}

/* People & governance, Ambassadors: 384 squares, 48 apart, rows 36 apart. */
.fnd-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(36 * var(--u)) calc(48 * var(--u));
  width: 100%;
}
.fnd-person { display: flex; flex-direction: column; gap: calc(16 * var(--u)); min-width: 0; }
.fnd-person__img { aspect-ratio: 1; background: var(--placeholder); }
.fnd-person__role { color: var(--muted); }

/* Institutional information */
.fnd-institution__lede { max-width: calc(900 * var(--u)); }
.fnd-cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(48 * var(--u));
  width: 100%;
}
.fnd-col { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.fnd-col p { max-width: calc(580 * var(--u)); }

/* What support makes possible: a rule above each row, 36 either side.
   Columns 100 / 470 / 582 with 48 gaps. */
.fnd-steps { display: flex; flex-direction: column; gap: calc(36 * var(--u)); width: 100%; }
.fnd-step {
  display: grid;
  grid-template-columns: minmax(0, 100fr) minmax(0, 470fr) minmax(0, 582fr);
  gap: calc(48 * var(--u));
  align-items: start;
  padding-top: calc(36 * var(--u));
  border-top: 1px solid var(--line);
}
.fnd-step__num { font-size: var(--fs-sub); line-height: 1.25; letter-spacing: var(--track-head); color: var(--blue); }

/* Ways to contribute: three 392 columns, 36 apart. */
.fnd-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(36 * var(--u));
  width: 100%;
}
.fnd-route { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); min-width: 0; }
.fnd-route .btn { max-width: 100%; }

/* Forms: labels 12 above 69-tall fields, groups 36 apart, two 600 columns. */
.fnd-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(36 * var(--u));
  width: 100%;
}
.fnd-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(48 * var(--u));
  width: 100%;
}
.fnd-field { display: flex; flex-direction: column; gap: calc(12 * var(--u)); width: 100%; min-width: 0; }
.fnd-form .field { min-height: 0; border-color: var(--line); }
/* Restated because the line-coloured border above outranks the shared rule. */
.fnd-form .field[aria-invalid="true"] { border-color: #b3261e; }
.fnd-field--tall .field { min-height: var(--btn-h); }
.fnd-field--message .field { display: block; height: calc(160 * var(--u)); min-height: calc(160 * var(--u)); resize: vertical; }
.fnd-form input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.fnd-form input[type="number"]::-webkit-inner-spin-button,
.fnd-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fnd-form__note { color: var(--muted); max-width: calc(1000 * var(--u)); }

/* Event lines: muted above the registration form, navy on the confirmation. */
.fnd-summary--muted { color: var(--muted); }

@media (max-width: 760px) {
  .fnd-people, .fnd-cols2, .fnd-routes, .fnd-form__row { grid-template-columns: 1fr; }
  .fnd-people { gap: 32px; }
  .fnd-routes { gap: 36px; }
  .fnd-form__row { gap: 18px; }
  .fnd-step { grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
  .fnd-step p { grid-column: 2; }
  .fnd-field--message .field { height: 160px; min-height: 160px; }
}

/* Two portraits a row between phone and desktop. */
@media (min-width: 761px) and (max-width: 1000px) {
  .fnd-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Home (91:2453). */

/* 01 / Opening: 64 top, 72 bottom; text column 504 beside a 672 x 550 artwork. */
.opening { padding-top: calc(64 * var(--u)); padding-bottom: calc(72 * var(--u)); }
.opening__grid {
  display: grid;
  grid-template-columns: minmax(0, 504fr) minmax(0, 672fr);
  gap: calc(72 * var(--u));
  width: 100%;
}
.opening__text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(28 * var(--u)); }
.accent--blue { color: var(--blue); }
.opening__lede { max-width: calc(470 * var(--u)); }
.opening__actions { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.opening__art { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.opening__img { display: block; aspect-ratio: 672 / 550; overflow: hidden; }
.opening__img img { width: 100%; height: 100%; object-fit: cover; }
.caption { color: var(--muted); }

/* 03 / News: a 600 x 320 image beside a summary spread over the same height. */
.announce {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 600fr);
  gap: calc(48 * var(--u));
  width: 100%;
}
.announce__img { display: block; aspect-ratio: 600 / 320; overflow: hidden; }
.announce__img img { width: 100%; height: 100%; object-fit: cover; }
.announce__text {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: calc(16 * var(--u));
}
.announce__text > p:not(.accent) { max-width: calc(580 * var(--u)); }

/* The Foundation: the frame is 301 tall and clips a 576 x 420 image to its top. */
.home-foundation .split__media { aspect-ratio: 576 / 301; }
.home-foundation .split__media img { height: auto; aspect-ratio: 576 / 420; }

@media (max-width: 760px) {
  .opening__grid, .announce { grid-template-columns: 1fr; gap: 28px; }
  .opening__art { order: -1; }
  .opening__actions { width: 100%; }
  .announce__text { gap: 14px; }
}

/* News & Events (91:2602) and the featured exhibition (91:2872). */

/* Both introductions space eyebrow, title, text and button 36 apart. */
.news-intro > .wrap, .news-intro .heading,
.exh-intro > .wrap, .exh-intro .heading { gap: calc(36 * var(--u)); }

/* ---- News & Events ---------------------------------------------------------- */

/* Featured announcement: a 576 x 301 crop of the painting beside 600 of text. */
.news-feature {
  display: grid;
  grid-template-columns: minmax(0, 576fr) minmax(0, 600fr);
  gap: calc(72 * var(--u));
  width: 100%;
}
.news-feature__img { display: block; aspect-ratio: 576 / 301; overflow: hidden; }
.news-feature__img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.news-feature__text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); }
.news-feature__text > p { max-width: calc(560 * var(--u)); }

/* Upcoming event: a 180-wide navy date block as tall as the 1020-wide text. */
.event {
  display: grid;
  grid-template-columns: minmax(0, 180fr) minmax(0, 1020fr);
  gap: calc(48 * var(--u));
  width: 100%;
}
.event__date {
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding: calc(24 * var(--u));
  background: var(--navy); color: var(--white);
}
.event__date-label { color: var(--yellow); }
.event__date-value { font-size: var(--fs-sub); line-height: 1.25; }
.event__text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--u)); }
.event__where, .news-note, .past__meta { color: var(--muted); }
.event__desc { max-width: calc(900 * var(--u)); }

/* Foundation news: two 600-wide stories, 48 apart. */
.stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(48 * var(--u));
  width: 100%;
}
.story { display: flex; flex-direction: column; align-items: flex-start; gap: calc(18 * var(--u)); }
.story__text { max-width: calc(580 * var(--u)); }

/* ---- Exhibition ------------------------------------------------------------- */

/* The painting at 1248 x 480 with its caption a section gap below. */
.exh-art { display: flex; flex-direction: column; gap: calc(36 * var(--u)); width: 100%; }
.exh-art__img { display: block; aspect-ratio: 1248 / 480; overflow: hidden; }
.exh-art__img img { width: 100%; height: 100%; object-fit: cover; }
.exh-art__caption { color: var(--muted); }

/* About the exhibition (744) beside the 432-wide navy visitor panel. */
.exh-about {
  display: grid;
  grid-template-columns: minmax(0, 744fr) minmax(0, 432fr);
  gap: calc(72 * var(--u));
  align-items: start;
  width: 100%;
}
.exh-about__text { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }

.visit {
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u));
  padding: calc(24 * var(--u));
  background: var(--navy); color: var(--white);
}
.visit .btn { max-width: 100%; }
.visit :focus-visible { outline-color: var(--yellow); }
@media (hover: hover) {
  .visit .btn--secondary:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
}

.exh-learning__text { max-width: calc(900 * var(--u)); }

/* ---- Phones ----------------------------------------------------------------- */

@media (max-width: 760px) {
  /* Paper follows paper here, so the second section drops its top padding. */
  .news-featured, .exh-overview { padding-top: 0; }
  .news-feature, .event, .stories, .exh-about { grid-template-columns: 1fr; }
  .news-feature { gap: 24px; }
  .news-feature__text, .event__text { gap: 14px; }
  .event { gap: 20px; }
  /* The date block becomes a strip above the event. */
  .event__date { flex-direction: row; align-items: baseline; gap: 12px; padding: 14px 18px; }
  .stories { gap: 44px; }
  .story { gap: 12px; }
  .exh-art { gap: 14px; }
  .exh-about { gap: 32px; }
  .visit { gap: 16px; padding: 22px 20px; }
  .visit .btn { width: 100%; }
}