@charset "utf-8";

/* =============================================================================
   ONDULEE STUDIOS — site.css
   Built Step 2. One stylesheet for the whole site. No inline <style> anywhere.
   Section order: 1 tokens · 2 faces · 3 reset · 4 type · 5 bay grid · 6 shell
                  7 focus · 8 print · 9 reduced motion
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   Every value below is from the invariants block. The one derived set is the
   spacing scale: the block fixes a 24px gutter and nothing else, so the scale is
   multiples and divisions of that gutter rather than a new set of numbers.
   -------------------------------------------------------------------------- */

:root {
  /* palette */
  --backdrop: #EDEBF0;
  --bay:      #F8F7FA;
  --ink:      #2C1140;
  --ink-soft: #6E6478;
  --violet:   #6A2A8F;
  --magenta:  #B31C86;

  /* families */
  --font-latin: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-zh: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", sans-serif;

  /* type scale — size / leading / width axis / weight / tracking */
  --fs-title: clamp(30px, 4.2vw, 62px);
  --lh-title: 1.05;
  --wdth-title: 112%;
  --wght-title: 700;
  --ls-title: -0.02em;

  --fs-h1: clamp(28px, 3.4vw, 50px);
  --lh-h1: 1.1;
  --wdth-h1: 108%;
  --wght-h1: 700;

  --fs-h2: 24px;
  --lh-h2: 1.2;
  --wdth-h2: 100%;
  --wght-h2: 600;

  --fs-body: 17px;
  --lh-body: 1.62;
  --measure-body: 62ch;

  --fs-doc: 15px;
  --lh-doc: 1.58;
  --measure-doc: 72ch;

  --fs-record: 15px;
  --lh-record: 1.35;
  --wght-record: 500;

  --fs-label: 13.5px;
  --lh-label: 1.4;

  /* chinese, expressed as ratios of the adjacent latin size */
  --zh-title-scale: 0.92;
  --zh-title-lh: 1.28;
  --zh-title-wght: 900;
  --zh-body-scale: 1.02;
  --zh-body-lh: 1.85;

  /* bay geometry */
  --column-max: 1240px;
  --gutter: 24px;
  --bay-width: 292px;
  --bay-aspect: 9 / 16;
  --bays: 1;
  --pad: 20px;

  /* spacing, derived from the 24px gutter */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 24px;
  --space-4: 36px;
  --space-5: 48px;
  --space-6: 72px;
  --space-7: 96px;
  --space-8: 144px;
}

@media (min-width: 620px)  { :root { --bays: 2; --pad: var(--gutter); } }
@media (min-width: 900px)  { :root { --bays: 3; } }
@media (min-width: 1180px) { :root { --bays: 4; } }

/* -----------------------------------------------------------------------------
   2. FACES
   Self-hosted subsets from /assets/fonts/. No external request.
   The Chinese faces carry a unicode-range matching their subset exactly, so a
   page with no Chinese on it never downloads them.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/assets/fonts/notosanssc-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+300A-300B, U+4E00, U+4E07, U+4E71, U+4E8E, U+4ED9, U+4EFB,
    U+4FEE, U+5149, U+524D, U+5267, U+540C, U+548C, U+5566, U+573A, U+584C,
    U+590D, U+591C, U+5929, U+5951, U+5957, U+5976, U+5B50, U+5B97, U+5C71,
    U+5E55, U+604B, U+623F, U+6296, U+6D77, U+6DB5, U+6F2B, U+7075, U+7237,
    U+7684, U+7A7F, U+7EFC, U+7F57, U+82CF, U+871C, U+8D77, U+8D8A, U+95E8,
    U+95FA, U+97F3, U+9F50, U+FF01, U+FF1A;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/assets/fonts/notosanssc-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+300A-300B, U+4E00, U+4E07, U+4E71, U+4E8E, U+4ED9, U+4EFB,
    U+4FEE, U+5149, U+524D, U+5267, U+540C, U+548C, U+5566, U+573A, U+584C,
    U+590D, U+591C, U+5929, U+5951, U+5957, U+5976, U+5B50, U+5B97, U+5C71,
    U+5E55, U+604B, U+623F, U+6296, U+6D77, U+6DB5, U+6F2B, U+7075, U+7237,
    U+7684, U+7A7F, U+7EFC, U+7F57, U+82CF, U+871C, U+8D77, U+8D8A, U+95E8,
    U+95FA, U+97F3, U+9F50, U+FF01, U+FF1A;
}

/* -----------------------------------------------------------------------------
   3. RESET
   Box sizing, margins, list and image defaults. Nothing more.
   -------------------------------------------------------------------------- */

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, address {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

/* <address> carries an italic UA default that nothing in this design asks for.
   The footer was patching it locally with .footer__legal; it belongs here, now
   that the contact page sets an address too. */
address { font-style: normal; }

/* -----------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Short pages were ending above the fold and leaving a band of page ground below
   the footer: /about/, /team/ and /contact/ all run under 970px, and the document
   pages will be shorter still. The column pins the footer to the bottom of the
   viewport without changing anything on a page that already fills it. svh rather
   than vh so mobile browser chrome cannot push the page into overflow. */
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--backdrop);
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-stretch: 100%;
  /* tabular figures everywhere, so every number on the site sets in columns */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: left;
}

.title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--wght-title);
  font-stretch: var(--wdth-title);
  letter-spacing: var(--ls-title);
}

.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--wght-h1);
  font-stretch: var(--wdth-h1);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--wght-h2);
  font-stretch: var(--wdth-h2);
}

/* h3 is not in the invariants' scale, which stops at h2. The terms and privacy
   documents need a third level for the clauses inside a numbered section, and those
   clauses have to be real headings so an attorney can navigate to the ones that are
   unwritten. 17px is the front-of-house body size, so it is a step the scale already
   contains rather than a new number. */
.h3 {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  font-stretch: 100%;
}

.prose { max-width: var(--measure-body); }
.prose + .prose { margin-top: var(--space-3); }

.prose--doc {
  font-size: var(--fs-doc);
  line-height: var(--lh-doc);
  max-width: var(--measure-doc);
}

/* Chinese. Expects lang="zh-Hans" on the same element.
   Sizes are ratios of the adjacent Latin size, so a title pair stays matched
   when the Latin size changes at a breakpoint. */
/* Chinese. Expects lang="zh-Hans" on the same element.
   line-height inherits: every Chinese run on this site is a fragment inside a Latin
   sentence, and the 1.85 leading the scale specifies for Chinese running text
   stretches the one line box that contains it. .zh--block restores that leading for
   a genuine paragraph of Chinese, which no page carries yet. */
.zh {
  font-family: var(--font-zh);
  font-size: calc(1em * var(--zh-body-scale));
  line-height: inherit;
  font-weight: 400;
  letter-spacing: 0;
}

.zh--block { line-height: var(--zh-body-lh); }

.zh--title {
  font-size: calc(1em * var(--zh-title-scale));
  line-height: var(--zh-title-lh);
  font-weight: var(--zh-title-wght);
}

/* Chinese set inline inside a Latin heading or link. The ratios in .zh describe a
   Chinese run of its own; dropped into an h2 they set the weight to 400 against the
   heading's 600 and stretch the line box from 1.20 to 1.85. This keeps the family
   switch and the zero tracking, and takes size, weight and leading from the parent. */
.zh--inherit {
  font-size: 1em;
  line-height: inherit;
  font-weight: inherit;
}

/* record cell: value above label */
.record__value {
  font-size: var(--fs-record);
  line-height: var(--lh-record);
  font-weight: var(--wght-record);
}

.record__label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 400;
  color: var(--ink-soft);
}

/* links in prose: underlined at all times, colour is never the only signal */
.prose a,
a.link {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.prose a:hover,
a.link:hover { text-decoration-thickness: 2px; }

/* -----------------------------------------------------------------------------
   5. BAY GRID
   Content column 1240px = 4 bays of 292px + 3 gutters of 24px.
   A bay is 9:16. Below the top breakpoint the bays stay fluid and the count
   steps down; the bay is never allowed to overflow the viewport.
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: calc(var(--column-max) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.bays {
  display: grid;
  grid-template-columns: repeat(var(--bays), minmax(0, 1fr));
  gap: var(--gutter);
}

/* span helpers. Written out per breakpoint rather than calculated: span takes an
   integer, and min() in that slot is not reliably supported. A span can never
   exceed the bay count available at that width. */
.bay-span-2 { grid-column: span 1; }
.bay-span-3 { grid-column: span 1; }
.bay-span-all { grid-column: 1 / -1; }

@media (min-width: 620px) {
  .bay-span-2 { grid-column: span 2; }
  .bay-span-3 { grid-column: span 2; }
}

@media (min-width: 900px) {
  .bay-span-3 { grid-column: span 3; }
}

.bay-frame { aspect-ratio: var(--bay-aspect); }

/* -----------------------------------------------------------------------------
   6. SHELL
   -------------------------------------------------------------------------- */

/* main takes the slack so the footer sits at the bottom on short pages */
main { flex: 1 0 auto; }

/* skip link — first focusable element on every page */
.skip {
  position: absolute;
  left: var(--pad);
  top: 0;
  z-index: 10;
  transform: translateY(-120%);
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--backdrop);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.skip:focus-visible { transform: translateY(0); }

/* masthead */
.masthead {
  padding-block: var(--space-3);
}

.masthead__inner {
  display: grid;
  gap: var(--space-2);
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  width: max-content;
}

.masthead__mark { width: auto; height: 32px; flex: none; }

.masthead__word {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.01em;
}

.masthead__summary {
  display: inline-block;
  width: max-content;
  padding-block: var(--space-1);
  cursor: pointer;
  font-size: var(--fs-label);
  font-weight: 500;
}

.masthead__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.masthead__list a {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-record);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.masthead__list a:hover { border-bottom-color: var(--ink-soft); }

/* current page: an added underline, not a colour change */
.masthead__list a[aria-current="page"] { border-bottom-color: var(--magenta); }

@media (min-width: 620px) {
  .masthead__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  /* Above 620px the nav is always shown. Two overrides are needed because
     browsers changed how a closed <details> hides its content: older engines
     used a display rule on the children, current ones hide ::details-content.
     Both are overridden here so neither era can strand the nav. */
  .masthead__summary { display: none; }
  .masthead__nav { display: block; }
  .masthead__disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .masthead__list {
    flex-direction: row;
    gap: var(--space-3);
    padding-block: 0;
  }
}

/* footer */
.footer {
  margin-top: var(--space-7);
  padding-block: var(--space-5);
  background: var(--ink);
  color: var(--backdrop);
}

.footer__legal { font-style: normal; }

.footer__mark {
  width: auto;
  height: 28px;
  color: var(--backdrop);
  margin-bottom: var(--space-2);
}

.footer__name {
  font-size: var(--fs-record);
  line-height: var(--lh-record);
  font-weight: 500;
}

.footer__line {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.footer__list { display: grid; gap: var(--space-1); }

.footer a {
  color: var(--backdrop);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

/* thickness, not colour — --violet and --magenta are banned on this surface */
.footer a:hover { text-decoration-thickness: 2px; }

/* -----------------------------------------------------------------------------
   7. SLATE
   The bay proved. Frame is 9:16: art takes the top 9:12 (a 3:4 crop), the title
   pair takes the remaining 9:4, the record hangs below the frame line.

   Title size is container-relative, not viewport-relative. The invariants' display
   clamp is tied to the viewport, and inside a 274px bay a 30px floor puts title 1
   onto five lines and bursts the frame. 6.6cqi was chosen by measuring the real
   fonts: it leaves 8.9% slack before the Chinese breaks to a third line and 12.1%
   before the English breaks to a third, and because it is a ratio the slack is the
   same at every bay width. The px value before the clamp is the fallback for
   engines without container query units.
   -------------------------------------------------------------------------- */

@media (min-width: 1180px) {
  .slate__grid { --bays: 3; }
}

.slate__bay { container-type: inline-size; }

.slate__frame {
  aspect-ratio: var(--bay-aspect);
  display: grid;
  grid-template-rows: auto 1fr;
}

.slate__art {
  display: block;
  width: 100%;
}

.slate__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--bay);
}

/* the pair is one object on one spine: no parentheses, neither captions the other */
/* The base size is set once, on the pair. The two spans then take their sizes
   from it as ratios, so .zh--title keeps its 0.92 against whatever the container
   resolves to. Setting a font-size on .slate__zh instead would tie with .zh--title
   on specificity, win on source order, and silently flatten the ratio to 1.0. */
.slate__title {
  margin: 0;
  padding-top: var(--space-2);
  font-weight: 400;
  font-size: 26px;
  font-size: clamp(16px, 6.6cqi, 42px);
}

.slate__zh { display: block; }

.slate__en {
  display: block;
  margin-top: 0.45em;
  font-size: 1em;
  line-height: var(--lh-title);
  font-weight: var(--wght-title);
  font-stretch: var(--wdth-title);
  letter-spacing: var(--ls-title);
}

/* the overhang. Outside the 9:16 frame on purpose: the picture is the licensed
   thing, the record is the checkable thing. */
.slate__record {
  margin-top: var(--space-3);
  border-top: 1px solid var(--ink-soft);
  padding-top: var(--space-2);
}

.slate__watch { display: inline-block; margin-top: var(--space-2); }

.slate__note { margin-top: var(--space-4); color: var(--ink-soft); }

.slate__section { margin-top: var(--space-6); }
.slate__section .prose { margin-top: var(--space-3); }

.page-head { padding-bottom: var(--space-5); }
.page-head .prose { margin-top: var(--space-3); }

/* -----------------------------------------------------------------------------
   8. DOCUMENT
   Back of house. The same shell running as plain document pages: no hero, no art,
   no accent block. Three differences from front of house and nothing else.

     1. the prose column narrows to two bays plus a gutter (292 + 24 + 292 = 608)
     2. body drops to 15px / 1.58
     3. tables break out of that column and run the full four bays

   The measure is min() of the two figures the spec gives: 608px from the bay
   geometry, 72ch from the type scale. Whichever is narrower wins, so neither
   constraint can be violated by a change to the other.
   -------------------------------------------------------------------------- */

/* The cap lands on the text elements, never on a container. Capping .doc > *
   put it on <section>, and a table inside a 608px section cannot run four bays
   however wide the table itself is allowed to be. */
.doc .h1,
.doc .h2,
.doc p,
.doc li,
.doc address { max-width: min(608px, var(--measure-doc)); }

.doc p,
.doc li {
  font-size: var(--fs-doc);
  line-height: var(--lh-doc);
}

.doc .page-head { padding-bottom: var(--space-4); }

.doc section { margin-top: var(--space-5); }

/* the h1's own padding already opens the page; the first section adds nothing */
.doc section:first-of-type { margin-top: 0; }
.doc section > * + * { margin-top: var(--space-3); }

/* a run of short paragraphs inside a section reads better tightened */
.doc p + p { margin-top: var(--space-3); }

/* Tables are the one element that leaves the prose column. Full four bays.
   The wrapper scrolls when the table is wider than the viewport, and carries
   tabindex so a keyboard user can reach and pan a scrolling table. role/region
   plus aria-labelledby points a screen reader at the caption. */
.doc-table {
  max-width: none;
  overflow-x: auto;
  margin-top: var(--space-3);
}

/* Without a floor the table shrinks to the viewport instead of scrolling, and the
   wrapper's overflow never engages: at 375px the first column fell to 134px and
   "Rights, publishing operations and compliance" stacked six lines tall, 167px for
   one row. The floor holds a readable column and hands the overflow to the wrapper,
   which is focusable so a keyboard user can pan it. */
.doc-table table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--fs-doc);
  line-height: var(--lh-doc);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.doc-table caption {
  text-align: left;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--ink-soft);
  padding-bottom: var(--space-2);
}

.doc-table th,
.doc-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  font-variant-numeric: tabular-nums;
}

.doc-table thead th {
  background: var(--bay);
  font-weight: 600;
  border-bottom: 1px solid var(--ink-soft);
  padding-left: var(--space-2);
}

.doc-table tbody th {
  font-weight: 400;
  width: 40%;
}

/* row separators, --ink-soft at 25% */
.doc-table tbody tr + tr th,
.doc-table tbody tr + tr td {
  border-top: 1px solid rgba(110, 100, 120, 0.25);
  border-top: 1px solid color-mix(in srgb, var(--ink-soft) 25%, transparent);
}

.doc-table tbody th:first-child { padding-left: var(--space-2); }
.doc-table thead th:first-child { width: 40%; }

/* a value the table states as absent, and the note under a table */
.doc-note {
  margin-top: var(--space-3);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--ink-soft);
}

/* Numbered sections. Real <ol>/<li>, so a screen reader announces position and the
   structure survives with styles off. The number is a CSS counter, never typed into
   the markup, so deleting or reordering a clause cannot desynchronise it from the
   cross-references. role="list" is on the element because the reset's list-style:none
   otherwise strips list semantics in Safari. */
.doc-sections {
  counter-reset: docsec;
  margin-top: var(--space-5);
}

.doc-sections > li {
  counter-increment: docsec;
  /* never capped: a table inside a clause has to be able to run the full four bays */
  max-width: none;
}

.doc-sections > li + li { margin-top: var(--space-5); }

.doc-sections > li > .h2::before {
  content: counter(docsec) ". ";
}

.doc-sections > li > * + * { margin-top: var(--space-3); }

.doc-sections .h3 { margin-top: var(--space-4); }

/* bullet lists in running document text; the reset strips markers site-wide */
.doc-list {
  list-style: disc;
  padding-left: 1.2em;
  max-width: min(608px, var(--measure-doc));
}

.doc-list li { margin-top: var(--space-1); }

/* A clause counsel has not written yet. The heading ships so the gap is visible and
   navigable; this is the whole body. */
.doc-pending {
  color: var(--ink-soft);
  font-size: var(--fs-doc);
  line-height: var(--lh-doc);
}

/* The 404 is the one page the layout rules exempt from flush-left. Centred, and
   centred in the viewport rather than sitting under the masthead, because there is
   no content for the eye to start reading. */
.is-404 {
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: var(--space-7);
}

.is-404__block { max-width: 40ch; }
.is-404 .prose { margin-inline: auto; }

/* Draft status. A rule rather than a tinted panel: it marks the block as exceptional
   without becoming the decorated element a document page must not carry. */
.doc-draft {
  max-width: min(608px, var(--measure-doc));
  border-left: 3px solid var(--ink);
  padding-left: var(--space-3);
  margin-bottom: var(--space-4);
}

.doc-draft p { font-size: var(--fs-doc); line-height: var(--lh-doc); }

/* -----------------------------------------------------------------------------
   9. FOCUS
   outline:none appears nowhere in this file.
   -------------------------------------------------------------------------- */

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

/* on the ink surface the magenta ring is too dark to read, so the ring inverts */
.footer :focus-visible,
.skip:focus-visible {
  outline: 2px solid var(--backdrop);
  outline-offset: 2px;
}

/* cover art sits against both storm-dark and bright crops, so the ring carries
   its own inner rule. Drawn as a pseudo-element border rather than a box-shadow,
   which is banned site-wide. */
.cover-link { position: relative; display: block; }

.cover-link:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 0;
}

.cover-link:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--backdrop);
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   10. PRINT
   Reviewers print these pages and attach them to a file. Ink on white, external
   URLs written out, the legal block retained, images kept to a sane size.
   -------------------------------------------------------------------------- */

@media print {
  @page { margin: 18mm; }

  html { scroll-behavior: auto; }

  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.5;
  }

  .skip, .masthead__summary { display: none !important; }

  .masthead, .footer {
    background: #FFFFFF;
    color: #000000;
    margin-top: 0;
    padding-block: 0 0;
  }

  .footer { border-top: 1px solid #000000; padding-top: 6pt; margin-top: 12pt; }
  .footer a, .prose a, a.link, .masthead__list a { color: #000000; }
  .footer__mark { color: #000000; }

  /* expand external URLs; internal links are meaningless on paper */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  a[href^="mailto:"]::after { content: ""; }

  .masthead__list { display: none; }

  img, picture, svg { max-width: 100%; }
  img { max-height: 90mm; width: auto; }

  .bays { display: block; }
  .bays > * + * { margin-top: 8pt; }

  h1, h2, .h1, .h2, .title { break-after: avoid-page; }
  .record, .footer { break-inside: avoid; }
}

/* -----------------------------------------------------------------------------
   11. REDUCED MOTION
   The site has one transition, the disclosure height. Both it and smooth
   scrolling are switched off here.
   -------------------------------------------------------------------------- */

/* The one transition on the site. Scoped below 620px: above that the disclosure
   is forced open by section 6, and a block-size rule here would re-collapse it. */
@media (max-width: 619.98px) and (prefers-reduced-motion: no-preference) {
  .masthead__disclosure { interpolate-size: allow-keywords; }
  .masthead__disclosure::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 180ms ease, content-visibility 180ms allow-discrete;
  }
  .masthead__disclosure[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .masthead__disclosure::details-content { transition: none; }
}