/* modern-pte.com
   Work Sans carries everything: headings, text, tables, identifiers. Instrument
   Serif appears exactly once on the site, on the homepage feature hero, and is
   never used as a heading style — a serif applied to h1 would be a rule, and a
   rule would put it on twelve pages and make it the voice again.
   Warm paper ground and a narrower measure keep this deliberately unlike
   container-global.com, which is a navy grotesk site.
   Self-hosted fonts only; no external request. */

@font-face {
  font-family: 'Work Sans';
  src: url('/assets/fonts/work-sans-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-var.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ink: #16191D;
  --petrol: #0B4F52;
  --petrol-lt: #16777C;
  --muted: #5C605F;
  --amber: #8F5407;
  --crimson: #8C2320;
  --paper: #F7F6F3;
  --rule: #D8D5CE;
  --rule-soft: #E8E5DF;

  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Both kept as tokens so the existing call sites need no edit, but neither is
     a separate typeface any more. */
  --serif: var(--sans);
  --mono: var(--sans);
  /* The single editorial accent. One rule below may reference this and no other. */
  --accent-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --measure: 68ch;
  --gap: 1.5rem;
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; line-height: 1.2; color: var(--petrol); margin: 0 0 .6em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); color: var(--ink); letter-spacing: -.01em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--petrol-lt); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--petrol); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.mono { font-family: var(--mono); font-size: .93em; letter-spacing: -.01em; }

.wrap { width: min(76rem, 100% - 2.5rem); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--petrol); color: #fff; padding: .6rem 1rem; text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ------------------------------------------------------------------ header */
.site-header { border-bottom: 2px solid var(--petrol); background: #fff; }
.site-header .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; padding: 1.1rem 0; }
.brand { text-decoration: none; color: var(--ink); display: flex; align-items: baseline; gap: .55rem; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; }
.brand-sub { font-size: .8rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.35rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: .95rem; padding: .25rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--petrol); font-weight: 600; }

/* ------------------------------------------------------------- breadcrumbs */
.breadcrumb { background: var(--paper); border-bottom: 1px solid var(--rule-soft); font-size: .875rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: .6rem 0; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--rule); }

/* --------------------------------------------------------------------- hero */
.hero { padding: 3.2rem 0 2rem; border-bottom: 1px solid var(--rule-soft); }
.hero .meta { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--petrol); margin: 0 0 .8rem; }
.hero .lede { font-size: 1.2rem; color: var(--ink); max-width: 60ch; margin-top: .8rem; }

/* ----------------------------------------------------------------- sections */
.block { padding: 2.6rem 0; border-bottom: 1px solid var(--rule-soft); }
.block:last-of-type { border-bottom: 0; }
.block-head { margin-bottom: 1.4rem; }
.block-head .meta { font-size: .9rem; color: var(--muted); margin: 0; }
.prose > p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- grids */
/* Three columns rather than auto-fit: the six segments then fill two complete
   rows. An auto-fit grid gave four and then two, and a row with two orphans in
   it reads as a mistake. */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.grid-2 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.card { border: 1px solid var(--rule); border-left: 3px solid var(--petrol); padding: 1.15rem 1.25rem; background: #fff; }
.card h3 { margin-bottom: .35rem; }
.card h3 a { text-decoration: none; color: var(--petrol); }
.card h3 a:hover { text-decoration: underline; }
.card p { font-size: .95rem; color: var(--ink); margin: 0; }
.card .tag { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .4rem; }

/* --------------------------------------------------------------- fact list */
.facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: var(--measure); }
.facts > div { display: grid; grid-template-columns: minmax(11rem, 34%) 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule-soft); }
.facts dt { color: var(--muted); font-size: .92rem; }
.facts dd { margin: 0; }

/* ------------------------------------------------------------------ tables */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
caption { text-align: left; font-family: var(--mono); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding-bottom: .5rem; }
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
thead th { border-bottom: 2px solid var(--petrol); font-family: var(--sans); font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--petrol); }
tbody th { font-weight: 600; }
tbody tr:nth-child(even) { background: var(--paper); }

/* ------------------------------------------------------------- spec groups */
.spec { margin: 0 0 1.6rem; }
.spec h3 { font-family: var(--sans); font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--petrol); border-bottom: 1px solid var(--rule); padding-bottom: .35rem; margin-bottom: .6rem; }
.spec p { margin: 0; font-size: .98rem; }

/* ------------------------------------------------------------------- lists */
.ticks { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.ticks li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; }
.ticks li::before { content: "—"; position: absolute; left: 0; color: var(--petrol); }

.flow { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.flow li { counter-increment: step; position: relative; padding-left: 1.9rem; }
.flow li::before {
  /* A real sequence, so the number stays -- but as a numeral, not as a boxed
     zero-padded badge. */
  content: counter(step) ".";
  position: absolute; left: 0; top: 0;
  font-size: .95rem; font-weight: 600; color: var(--petrol);
  font-variant-numeric: tabular-nums;
}
.flow h3 { font-family: var(--sans); font-size: 1rem; margin-bottom: .2rem; color: var(--ink); }
.flow p { margin: 0; font-size: .96rem; color: var(--muted); }

/* ----------------------------------------------------------------- notices */
.notice { border: 1px solid var(--amber); border-left: 4px solid var(--amber); background: #FDF9F2; padding: 1rem 1.2rem; max-width: var(--measure); margin: 0; }
.notice h3 { font-family: var(--sans); font-size: 1rem; color: var(--amber); margin-bottom: .35rem; }
.notice p { margin: 0; font-size: .96rem; }
.notice--restricted { border-color: var(--crimson); background: #FCF5F4; }
.notice--restricted h3 { color: var(--crimson); }

/* --------------------------------------------------------------- documents */
.docrow { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.docrow li { border: 1px solid var(--rule); padding: .9rem 1rem; }
.docrow .code { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--petrol); display: block; margin-bottom: .3rem; }
.docrow strong { display: block; margin-bottom: .25rem; }
.docrow p { margin: 0; font-size: .92rem; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; }
.arrow-link { text-decoration: none; font-weight: 600; }
.arrow-link::after { content: " →"; }
.arrow-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ footer */
/* --------------------------------------------------------------- colophon
   container-global.com closes on a dark navy band with three headed columns of
   links. Repeating that shape here would make two unrelated Singapore companies
   look like one operator with one supplier — the exact inference the client
   asked us to avoid. So this page ends differently: a light ground, the
   registered particulars as labelled pairs, and one inline row of links with no
   column headings at all. */

.site-footer {
  background: var(--paper);
  color: var(--ink);
  margin-top: 3rem;
  padding: 2.4rem 0 1.4rem;
  border-top: 3px solid var(--petrol);
}
.site-footer a { color: var(--petrol); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.colophon {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.4rem 3rem;
  align-items: start;
}
.colophon-brand { display: flex; align-items: center; gap: .7rem; }
.colophon-mark { width: 34px; height: 34px; display: block; }
.colophon-name { font-size: .95rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }

/* Particulars as labelled pairs rather than as an address paragraph. */
.colophon-facts { display: grid; gap: .55rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 0; }
.colophon-facts dt { font-size: .8rem; color: var(--muted); margin-bottom: .1rem; }
.colophon-facts dd { margin: 0; font-size: .92rem; line-height: 1.45; font-variant-numeric: tabular-nums; }

/* One inline row, wrapping. No headings, no columns. */
.colophon-nav {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .35rem 1.15rem;
  margin: 1.8rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: .92rem;
}
/* No rules between the links: when the row wrapped, the divider landed at the
   start of the new line and read as a typo. Spacing alone separates them. */
.colophon-nav { column-gap: 1.9rem; row-gap: .6rem; }

.footer-bottom {
  margin-top: 1.4rem; padding-top: 0; border: 0;
  font-size: .82rem; color: var(--muted); max-width: 74ch;
}
.footer-copy { display: block; margin-top: .5rem; color: var(--muted); }

@media (max-width: 760px) {
  .colophon { grid-template-columns: 1fr; gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-nav, .breadcrumb, .site-footer { display: none; }
  body { font-size: 11pt; }
  a[href^="/"]::after { content: " (modern-pte.com" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* Legal furniture differs between the two sites on purpose; the copyright is a
   quieter fragment at the end of the sentence rather than a matching prefix. */
.footer-copy { display: block; margin-top: .5rem; opacity: .72; }

/* ================================================================= visual layer
   Art-direction pass. Circular brand mark, illustrated hero, proof band, section tone.
   The register keeps its quiet, documentary character; the imagery is editorial,
   never a photograph of company property. */

.brand { align-items: center; }
.brand-mark { height: 34px; width: 34px; display: block; }

/* --- hero: copy left, material still life right -------------------------- */
.hero--feature {
  position: relative; padding: 0; border-bottom: 1px solid var(--rule);
  background: var(--paper); overflow: hidden;
}
.hero-grid { position: relative; z-index: 1; }
.hero--feature .hero-copy { padding-block: 5rem; max-width: 34rem; }
.hero--feature h1 {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem); line-height: 1.06;
  letter-spacing: -.015em; margin-bottom: .55rem;
}
.hero--feature .lede { max-width: 30rem; }
.hero-art { position: absolute; inset: 0 0 0 42%; z-index: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
/* soft hand-off between copy column and artwork */
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(247,246,243,.86) 18%, rgba(247,246,243,0) 46%);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 0; }
.btn {
  display: inline-block; padding: .72rem 1.4rem; text-decoration: none;
  font-weight: 600; font-size: .95rem; border: 1px solid var(--petrol); color: var(--petrol);
}
.btn:hover { background: rgba(11,79,82,.07); color: var(--petrol); }
.btn--primary { background: var(--petrol); color: #fff; }
.btn--primary:hover { background: #0d6165; color: #fff; }
@media (max-width: 760px) {
  .hero-art { position: relative; inset: auto; height: 12rem; }
  .hero-art::after { background: linear-gradient(180deg, rgba(247,246,243,.55) 0%, rgba(247,246,243,0) 45%); }
  .hero--feature .hero-copy { padding-block: 2.8rem 1.6rem; max-width: none; }
}

/* --- proof band ---------------------------------------------------------- */
.proof { background: #fff; border-bottom: 1px solid var(--rule); padding: 1.4rem 0; }
.proof dl { margin: 0; display: grid; gap: .9rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.proof dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .2rem;
}
.proof dd { margin: 0; font-weight: 600; color: var(--ink); }

/* --- section tone -------------------------------------------------------- */
.block--paper { background: var(--paper); }
.block--dark { background: var(--petrol); color: #E4EFEF; border-bottom: 0; }
.block--dark h2, .block--dark h3 { color: #fff; }
.block--dark .meta { color: #9FCFD2; }
.block--dark a { color: #E8B87A; }
.block--dark .flow li::before { color: #7FD4D8; border-color: rgba(255,255,255,.3); }
.block--dark .flow p { color: #BFD9D9; }

/* --- icons --------------------------------------------------------------- */
.icon { display: block; width: 44px; height: 44px; color: var(--petrol); }
.card--icon { padding-top: 1.1rem; }
.card-icon { margin-bottom: .8rem; }
.hero--marked .hero-mark { margin-bottom: .9rem; }
.hero--marked .icon { width: 52px; height: 52px; }
.block--dark .icon { color: #7FD4D8; }
.block--paper .card { background: #fff; }

/* --- mobile navigation --------------------------------------------------- */
.nav-toggle { display: none; }
.nav-label { display: none; }
@media (max-width: 900px) {
  .nav-label {
    display: flex; align-items: center; gap: .5rem; margin-left: auto;
    padding: .45rem .8rem; border: 1px solid var(--rule); color: var(--ink);
    font-size: .9rem; cursor: pointer; user-select: none;
  }
  .nav-label::before { content: ""; width: 18px; height: 2px; background: currentColor;
    box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }
  .site-nav { flex-basis: 100%; margin-left: 0; max-height: 0; overflow: hidden; }
  .nav-toggle:checked ~ .site-nav { max-height: 30rem; }
  .site-nav ul { flex-direction: column; gap: 0; padding: .4rem 0 .2rem; }
  .site-nav li { border-top: 1px solid var(--rule-soft); }
  .site-nav a { display: block; padding: .75rem 0; font-size: 1rem; }
  .nav-toggle:focus-visible ~ .nav-label { outline: 3px solid var(--amber); outline-offset: 2px; }
}

/* --- responsive tables --------------------------------------------------- */
@media (max-width: 700px) {
  /* caption is missing from this list deliberately no longer: left as
     table-caption inside a display:block table it shrink-to-fits to about
     80px, so the caption printed one word per line on every table page. */
  table, thead, tbody, tr, th, td, caption { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tbody tr { border: 1px solid var(--rule); margin-bottom: .9rem; padding: .3rem .8rem .6rem; background: #fff; }
  tbody tr:nth-child(even) { background: var(--paper); }
  tbody th { border: 0; padding: .6rem 0 .3rem; font-size: 1.02rem; color: var(--petrol); }
  tbody td { border: 0; padding: .15rem 0; }
  tbody td::before { content: attr(data-label) ": "; color: var(--muted); font-size: .86rem; }
}

/* --- diagrams ------------------------------------------------------------ */
.diagram { margin: 0 0 1.6rem; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { font-size: .85rem; color: var(--muted); margin-top: .6rem; max-width: 62ch; }
.pk path, .pk rect { fill: #fff; stroke: var(--petrol); stroke-width: 1.6; }
.pk .pk-line { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.pk .pk-fill { fill: rgba(11,79,82,.14); stroke: none; }
.pk-cap text { fill: var(--muted); font-family: var(--mono); letter-spacing: .04em; }

/* --- composition refinements --------------------------------------------- */
.block-head { max-width: 64ch; }
.block-head h2 { position: relative; padding-top: .85rem; }
.block-head h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 2px;
  background: var(--petrol);
}
.block--dark .block-head h2::before { background: #7FD4D8; }

.block { padding: 3.2rem 0; }
.block--paper, .block--dark { padding: 4.4rem 0; }

.card h3 { font-size: 1.24rem; }

.block--dark, .block--dark p, .block--dark li, .block--dark dd, .block--dark td, .block--dark th {
  color: #E4EFEF;
}
.block--dark .ticks li::before { color: #7FD4D8; }
.block--dark .facts > div { border-bottom-color: rgba(255,255,255,.18); }
.block--dark .facts dt { color: #9FCFD2; }
.pk-tick path { stroke: var(--rule); stroke-width: 1; fill: none; }

/* The wordmark plus the "PTE. LTD. · SINGAPORE" qualifier is too wide to sit
   beside the menu button on a narrow phone, and pushed the header onto two
   rows. The qualifier is decorative here; the legal name is stated in full in
   the footer and on /legal/. */
@media (max-width: 460px) {
  .brand-sub { display: none; }
}

/* ------------------------------------------------- house-style corrections
   The previous system read as a pharmacopoeia monograph: serif headings, a
   monospace face reserved for anything that looked like data, uppercase labels
   above every block. A chemical trading house is a commercial business that
   handles technical documents, not a scientific publisher.

     - Source Code Pro leaves the public system entirely;
     - CAS numbers, HS codes and the UEN set in the text family with tabular
       figures — they are identifiers, not code;
     - micro-labels return to sentence case;
     - the serif stops being the dominant voice. */

.hero .meta,
.card .tag,
caption,
thead th,
.spec h3,
.proof dt,
.brand-sub {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.hero .meta { font-size: .95rem; font-weight: 400; color: var(--muted); }
.card .tag { font-size: .82rem; font-weight: 500; }
.proof dt { font-size: .82rem; font-weight: 400; color: var(--muted); }
.spec h3 { font-size: .95rem; }
caption { font-size: .9rem; font-weight: 400; }
thead th { font-size: .88rem; }
.brand-sub { font-size: .78rem; }

/* Identifiers: aligned by tabular figures in the text family. */
.mono,
.docrow .code,
.flow li::before,
.spec dd,
.proof dd {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-size: 1em;
}
.pk-cap text { font-family: var(--sans); letter-spacing: 0; }

/* Wider heading interval and a longer measure: fewer, larger statements
   instead of a uniform stack of equal-weight sections. */
h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.7rem); line-height: 1.06; letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 1.15rem + .85vw, 1.8rem); letter-spacing: -.012em; }
h3 { font-size: 1.1rem; letter-spacing: -.004em; }

.block-head h2::before { display: none; }
.block-head h2 { padding-top: 0; }

.block { padding-block: clamp(3rem, 2rem + 3vw, 4.75rem); }
.block--dark { padding-block: clamp(3.5rem, 2.2rem + 4vw, 5.75rem); }

/* The one accent. Scoped to a class that exists on the homepage and nowhere
   else, so it appears once on the site. Nothing else may reference
   --accent-serif; a second use would make it a rule again. */
.hero--feature h1 {
  font-family: var(--accent-serif);
  font-weight: 400;
  letter-spacing: -.004em;
  font-size: clamp(2.6rem, 1.6rem + 3.8vw, 4.2rem);
  line-height: 1.04;
}
h1 { font-weight: 650; }

/* ------------------------------------------------------------- composition
   Applied by hand in the content files, never by a blanket rule: the whole
   point is that sections should not all be the same shape. */

/* One section per page carries real weight. */
.block--anchor h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  max-width: 20ch;
  line-height: 1.06;
}
.block--anchor .block-head { margin-bottom: 1.6rem; }

/* Reading measure, centred. Alternating this against the full width is this
   site's signature; container-global.com uses a split heading column instead. */
.block--narrow .wrap { width: min(46rem, 100% - 2.5rem); }

/* The lead card takes the full width and the two supporting cards sit beneath
   it. Three equal cards in a row is the single most recognisable template
   shape; this states which one matters and still fills the rows completely. */
.grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--feature > :first-child { grid-column: 1 / -1; }
.grid--feature > :first-child h3 { font-size: 1.35rem; }
.grid--feature > :first-child p { font-size: 1.08rem; max-width: 62ch; }
@media (max-width: 620px) {
  .grid--feature { grid-template-columns: 1fr; }
}

/* A notice placed straight into <main> is outside .wrap, so it ran to the
   viewport edge. Inside a block it is already wrapped, which is why this is
   scoped to the direct child rather than applied to .notice itself. */
main > .notice {
  margin-inline-start: max(1.25rem, calc((100% - 76rem) / 2));
  margin-inline-end: 1.25rem;
}

/* Diagrams are drawn to a fixed geometry; squeezed into a 390px column the
   labels become unreadable. Below the breakpoint they scroll sideways at a
   legible size instead of shrinking. */
@media (max-width: 760px) {
  .diagram { overflow-x: auto; }
  .diagram svg { min-width: 32rem; }
}

.footer-mark { width: 40px; height: 40px; display: block; margin-bottom: .9rem; }

/* A row of onward links directly after body text was butting into the last
   paragraph, so it read as a continuation of the sentence rather than as a
   separate move. */
.prose + .actions { margin-top: 1.6rem; }

@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.colophon-name span {
  display: block; font-weight: 400; font-size: .82rem;
  color: var(--muted); margin-top: .1rem;
}

/* A definition row is a fixed 11rem label column beside the value. On a phone
   that leaves too little for the value, and an email address has no break
   opportunity, so the row pushed the page 17px wider than the viewport. Below
   the breakpoint the pair stacks, and long unbroken tokens may break. */
@media (max-width: 620px) {
  .facts > div { grid-template-columns: 1fr; gap: .15rem; }
  .facts dt { font-size: .85rem; }
}
.facts dd, .colophon-facts dd { overflow-wrap: anywhere; }