/* Self-hosted fonts: Latin subsets, about 35 KB together. All three are preloaded in <head>, and their display mode is optional
   (S5c; it was swap): a font that is not ready within about 100 ms of the first render is skipped for that page view, so text never
   jumps (layout shift), and because fonts are cached for a year every later page uses them. Checked by C12 and C29. */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: optional; src: url("/fonts/be-vietnam-pro-400.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: optional; src: url("/fonts/be-vietnam-pro-600.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: optional; src: url("/fonts/newsreader-500.woff2") format("woff2"); }
/* Closing the Wound: Indigo. Reference stylesheet for S4.
   Motion is decorative only: CSS scroll timelines plus one small first-party script (under 1 KB) that fades the background brush on wide screens.
   Without support, or with reduced motion set, everything renders still and complete. Text never moves, fades or hides. */
.site {
  --indigo: #252d5c; --indigo-deep: #1c2248; --indigo-bright: #3a4588; --thanaka: #f2dc97; --gold: #a07c2a; --ochre: #c4a043;
  --ink: #1e2232; --muted: #555b70; --link: #2f3b86; --paper: #ffffff; --mist: #eef0f6; --tint: #e8ebf6; --ring: #c9cfe4;
  --rule: #dde0ea; --rule-strong: #b6bbcd;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pad-x: 18px; --hdr-h: 64px; --wrap: 76rem; --prose: 35em; --radius: 6px; --section-gap: 56px;
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17.5px; line-height: 1.66; font-weight: 400;
  font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; position: relative;
}
.site *, .site *::before, .site *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; }
.sym { position: absolute; width: 0; height: 0; overflow: hidden; }
.site main { flex: 1 0 auto; position: relative; z-index: 1; }
.site a { color: var(--link); text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.24em; text-decoration-skip-ink: auto; }
.site a:hover { text-decoration-color: currentColor; }
.site :focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 2px; }
.nb { white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -200px; z-index: 50; padding: 12px 16px; background: var(--ink); color: #fff !important; text-decoration: none !important; }
.skip:focus { top: 12px; }

/* Indigo surfaces: a fine twill, like indigo-dyed cotton, drawn in CSS (no images) */
.twill { background-color: var(--indigo);
  background-image: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(255, 255, 255, 0) 1px 5px); }
.twill-glow { background-image:
  radial-gradient(90% 120% at 100% 0%, rgba(242, 220, 151, 0.16), rgba(242, 220, 151, 0) 60%),
  repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(255, 255, 255, 0) 1px 5px); }
.site-header :focus-visible, .utility :focus-visible, .next :focus-visible, .site-footer :focus-visible { outline-color: var(--thanaka); }

/* Utility strip: help in the same place on every page */
.utility { position: relative; z-index: 21; background: var(--indigo-deep); color: #fff; font-size: 15px; }
.u-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); min-height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.site .utility a { color: #fff; text-decoration-color: var(--thanaka); display: inline-flex; align-items: center; min-height: 40px; }

/* Main bar */
.site-header { position: sticky; top: 0; z-index: 20; color: #fff; border-bottom: 2px solid var(--thanaka);
  background-color: var(--indigo);
  background-image: linear-gradient(100deg, rgba(58, 69, 136, 0) 35%, rgba(58, 69, 136, 0.55) 100%),
                    repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(255, 255, 255, 0) 1px 5px); }
.bar { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); min-height: var(--hdr-h); display: flex; align-items: center; gap: 6px; }
.brand { margin-right: auto; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: #fff !important; text-decoration: none !important;
  font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.1; white-space: nowrap; font-variation-settings: "opsz" 24; }
.logo { flex: none; width: 30px; height: 30px; color: var(--thanaka); fill: currentColor; }
.nav-desk { display: none; }
.actions { display: flex; align-items: center; gap: 6px; }
.act-email, .menu > summary { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px;
  font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; border-radius: var(--radius); }
.act-email, .menu > summary { padding: 0 12px; }
.act-email { background: var(--thanaka); color: var(--indigo) !important; text-decoration: none !important; }
.act-email:hover { text-decoration: underline !important; }
.menu { position: static; }
.burger { display: none; }
.menu[open] .m-open, .menu:not([open]) .m-close { display: none; }
html:has(.menu[open]) { overflow: hidden; }
.menu > summary { list-style: none; border: 1.5px solid rgba(255, 255, 255, 0.72); color: #fff; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - var(--hdr-h) - 2px); overflow: auto; overscroll-behavior: contain;
  background: #fff; color: var(--ink); border-top: 3px solid var(--thanaka); padding: 6px 0 28px;
  box-shadow: 0 0 0 100vmax rgba(28, 34, 72, 0.45); clip-path: inset(0 -100vmax -100vmax -100vmax); }
.site .menu-panel ul { list-style: none; margin: 0; padding: 0; }
.site .menu-panel li { margin: 0; padding: 0; }
.menu-panel a { display: flex; align-items: center; min-height: 54px; padding: 0 var(--pad-x); font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.menu-panel .crisis-item a { color: var(--link); font-weight: 600; }
.menu-panel a:hover { text-decoration: underline; }

/* Page */
.page { max-width: calc(var(--prose) + 2 * var(--pad-x)); margin: 0 auto; padding: 0 var(--pad-x); width: 100%; }
.head-band { position: relative; isolation: isolate; padding-bottom: 34px; }
.head-band::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: linear-gradient(180deg, #e6e9f5 0%, #eef0f8 62%, rgba(255, 255, 255, 0) 100%); }
.has-field .head-band::before { background: linear-gradient(180deg, rgba(230, 233, 245, 0.9) 0%, rgba(238, 240, 248, 0.82) 62%, rgba(255, 255, 255, 0) 100%); }
.has-field .rings { display: none; }
.head-band > :not(.rings) { position: relative; z-index: 1; }
.crumbs { font-size: 16px; line-height: 1.5; color: var(--muted); padding-top: 14px; }
.site .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.crumbs li { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--rule-strong); }
.site .crumbs a, .site .byline a { color: var(--muted); text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.crumbs [aria-current] { color: var(--ink); }
.page-head { padding-top: 36px; }
.site h1 { font-family: var(--serif); font-size: 40px; line-height: 1.04; font-weight: 500; letter-spacing: -0.018em; color: var(--indigo); font-variation-settings: "opsz" 60; margin: 0 0 16px; text-wrap: balance; }
.site h2 { font-family: var(--serif); font-size: 29px; line-height: 1.14; font-weight: 500; letter-spacing: -0.008em; color: var(--indigo); font-variation-settings: "opsz" 36; margin: 0 0 14px; text-wrap: balance; }
.site h3 { font-family: var(--serif); font-size: 22px; line-height: 1.25; font-weight: 500; color: var(--indigo); font-variation-settings: "opsz" 24; margin: 1.5em 0 0.35em; }
.byline { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0 0 20px; }
.byline a { color: var(--muted); }
.lede { font-size: 19.5px; line-height: 1.55; margin: 0; }
.site p { margin: 0 0 1em; text-wrap: pretty; }
.site p:last-child { margin-bottom: 0; }
.page section { margin-top: var(--section-gap); }
.site ul, .site ol { margin: 0 0 1em; padding-left: 1.3em; }
.site li { margin: 0.4em 0; padding-left: 0.15em; }
.site li::marker { color: var(--gold); }

/* Section break: a short dry-brush stroke above each section heading */
.seam { display: block; width: 58px; height: 10px; margin: 0 0 14px -2px; color: var(--gold); fill: currentColor; }
.next .seam { color: var(--thanaka); }

/* Rings: page-head background on every page; on desktop pages with the brush field they give way to it */
.rings { position: absolute; z-index: -1; pointer-events: none; top: -130px; right: calc(-1 * var(--pad-x) - 210px); width: 440px; height: 440px; color: var(--ring); }
.rings svg { width: 100%; height: 100%; overflow: visible; }
.rings circle { fill: none; stroke: currentColor; stroke-width: 1.25; }
.rings .r-t { stroke: #e2bf5c; stroke-width: 2.2; }
.rings g { transform-box: view-box; transform-origin: 50% 50%; }

/* The brush field, always fully painted, its circle nearly closed; on phones and tablets 10% larger than in S4 (S5, KokoKyi, 8 Oct).
   Desktop (1200 px and up): in its own lane on the right, 20% larger than in S4 and starting 24 px after the end of the text column,
   so it comes close to the words without sitting under them (S5); it fades out behind the closing block (the one script). */
.field { display: block; position: fixed; z-index: 0; pointer-events: none; top: 54%; right: calc(-40vw - min(4.7vw, 28px)); width: min(103vw, 616px); aspect-ratio: 1; transform: translateY(-50%); }
.field .spin { transform-box: view-box; transform-origin: 50% 50%; }
.field svg { width: 100%; height: 100%; overflow: visible; }
.field .f-rings { color: var(--ring); transform-box: view-box; transform-origin: 50% 50%; }
.field .f-rings circle { fill: none; stroke: currentColor; stroke-width: 0.32; }
.field .f-rings .r-t { stroke: #e2bf5c; stroke-width: 0.55; }
.field .f-brush { color: var(--thanaka); opacity: 0.5; }
@media (min-width: 600px) and (max-width: 1199px) { .field { right: calc(-26vw - min(4.7vw, 28px)); } }

/* Glyph lists: focus areas and methods */
.topics { list-style: none; padding-left: 0 !important; }
.topics li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; margin: 0 0 22px; padding: 0; }
.topics strong { font-family: var(--serif); font-size: 1.14em; font-weight: 500; color: var(--indigo); font-variation-settings: "opsz" 20; }
.site .topics strong a { color: var(--indigo); text-decoration: none; }
.site .topics strong a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.glyph { width: 44px; height: 44px; color: var(--indigo); }
.glyph * { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.glyph .t { stroke: var(--ochre); }
.glyph .dot { fill: var(--ochre); stroke: none; }
.glyph .dot-i { fill: currentColor; stroke: none; }

/* Hub pages: one item per focus area or method, each with its glyph */
.hub-grid { display: grid; gap: 30px; margin-top: var(--section-gap); }
.page .hub-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; margin: 0; }
.site .hub-item h2 { font-size: 25px; margin: 2px 0 8px; }
.hub-item p { margin-bottom: 0.6em; }

/* Paired links */
.routes { list-style: none; margin: 1.4em 0 0; padding: 0 !important; border-top: 2px solid var(--indigo); }
.routes li { margin: 0; padding: 0; }
.routes a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; border-bottom: 1px solid var(--rule); color: var(--indigo); text-decoration: none;
  font-family: var(--serif); font-size: 21px; font-variation-settings: "opsz" 24; }
.routes a::after { content: ""; flex: none; width: 9px; height: 9px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); margin-right: 4px; }
.routes a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

/* Tables */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: lining-nums tabular-nums; margin: 0.4em 0 0.9em; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--rule); }
.tbl thead th { font-size: 16px; font-weight: 600; background: var(--indigo); color: #fff; padding-top: 10px; padding-bottom: 10px; border-bottom: 0; }
.tbl thead th:first-child { border-top-left-radius: var(--radius); }
.tbl thead th:last-child { border-top-right-radius: var(--radius); }
.tbl tbody th { font-weight: 400; }
.fee-table tbody tr:first-child > * { background: #fbf4dc; }
.fee-table th:last-child, .fee-table td:last-child { text-align: right; padding-left: 16px; width: 1%; }
.fee-note { font-size: 16px; color: var(--muted); }
.tel a { display: inline-flex; align-items: center; min-height: 44px; font-size: 20px; font-weight: 600; white-space: nowrap; }
@media (max-width: 399px) { .tbl th, .tbl td { padding-left: 8px; padding-right: 8px; } .tel a { font-size: 19px; } }
@media (max-width: 599px) {
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stack, .stack tbody, .stack tr, .stack th, .stack td { display: block; width: 100%; }
  .stack tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .stack tbody th, .stack td { border: 0; padding: 3px 0; }
  .stack tbody th { font-weight: 600; font-size: 1.05em; padding-bottom: 6px; }
  .stack td::before { content: attr(data-label) ": "; color: var(--muted); }
}

/* Email block: full width, indigo, with a large brush enso that paints itself as the block comes into view */
.next { position: relative; overflow: clip; color: #fff; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 52px calc(50vw - 50%) 60px; view-timeline-name: --next; }
.next > * { position: relative; z-index: 1; }
.next h2 { color: #fff; }
.site .next a { color: #fff; text-decoration-color: var(--thanaka); }
.next .big-enso { position: absolute; z-index: 0; width: 330px; height: 330px; right: -150px; bottom: -150px; color: var(--thanaka); opacity: 0.2; }
.big-enso .reveal { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.big-enso .reveal { stroke-width: 24; }
.page section.next + section { margin-top: 0; padding-top: var(--section-gap); }
.page > section:last-child:not(.next) { padding-bottom: 72px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 1.4em 0 1.2em; }
.email-cta { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 260px; min-height: 50px; padding: 0 20px; border-radius: var(--radius);
  background: var(--thanaka); color: var(--indigo) !important; font-weight: 600; font-size: 17px; text-decoration: none !important; overflow-wrap: anywhere; box-shadow: 0 6px 18px rgba(10, 12, 30, 0.25); }
.email-cta:hover { text-decoration: underline !important; }
.copy[hidden] { display: none; }
.copy { font-family: var(--sans); font-size: 16px; font-weight: 600; min-height: 50px; padding: 0 16px; border-radius: var(--radius); cursor: pointer;
  background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.75); }

/* Sources */
.site .sources ul { list-style: none; padding-left: 0; }
.sources li { font-size: 16px; line-height: 1.55; color: var(--muted); padding-left: 1.25em; text-indent: -1.25em; margin: 0 0 0.75em; }


/* Footer: the enso again, complete as drawn */
.site-footer { position: relative; z-index: 1; color: #fff; background-color: var(--indigo-deep); border-top: 2px solid var(--thanaka); }
.foot { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--pad-x) 48px; display: grid; gap: 14px; }
.foot-brand { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 500; font-variation-settings: "opsz" 24; }
.foot-brand .logo { width: 44px; height: 44px; }
.foot-email { margin: 0; font-size: 19px; }
.site .site-footer a { color: #fff; text-decoration-color: var(--thanaka); }
.foot-links { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.foot-links.places { grid-template-columns: 1fr; }
.foot-links li { margin: 0; padding: 0; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }

@media (max-width: 599px) { .crumbs [aria-current] { display: none; } }
@media (max-width: 374px) {
  .site.site { --pad-x: 16px; }
  .menu > summary { width: 44px; padding: 0; }
  .burger { display: block; }
  .menu > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site h1 { font-size: 35px; }
}
@media (max-width: 339px) { .brand { white-space: normal; font-size: 17px; line-height: 1.05; } .logo { width: 28px; height: 28px; } }

/* Desktop */
@media (min-width: 960px) {
  .site { font-size: 18px; --pad-x: 40px; --section-gap: 72px; }
  .nav-desk { display: flex; align-items: center; gap: 2px; margin-right: 10px; }
  .site .nav-desk a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 16px; color: #fff; text-decoration: none; }
  .site .nav-desk a:hover, .site .nav-desk a[aria-current] { text-decoration: underline; text-decoration-color: var(--thanaka); text-decoration-thickness: 2px; }
  .menu { display: none; }
  .logo { width: 40px; height: 40px; }
  .brand { font-size: 21px; gap: 11px; }
  .page { max-width: var(--wrap); }
  .page p, .page ul, .page ol, .page h2, .page h3, .tbl, .cta, .routes, .byline { max-width: var(--prose); }
  .page .stack { max-width: 46rem; }
  .page-head { padding-top: 76px; padding-bottom: 12px; }
  .head-band { padding-bottom: 48px; }
  .site h1 { font-size: 60px; max-width: 13.5em; }
  .site h2 { font-size: 34px; }
  .lede { font-size: 21px; max-width: 31em; }
  .rings { width: 820px; height: 820px; top: -250px; right: -290px; }
  .topics.grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 8px; max-width: 46rem; }
  .topics.grid li { border-top: 1px solid var(--rule); padding-top: 20px; margin: 0; }
  .glyph { width: 52px; height: 52px; margin-top: -4px; }
  .topics li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; }
  .page .routes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; max-width: 46rem; }
  .hub-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 40px; max-width: 46rem; }
  .page .hub-item { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; }
  .site .hub-item h2 { font-size: 27px; }
  .next { padding-top: 72px; padding-bottom: 80px; }
  .next .big-enso { width: 520px; height: 520px; right: -60px; bottom: -190px; opacity: 0.42; }
  .cta { max-width: 32em; }
  .foot { grid-template-columns: 1fr auto; grid-template-areas: "brand links" "email places"; align-items: center; column-gap: 48px; row-gap: 6px; }
  .foot-brand { grid-area: brand; } .foot-email { grid-area: email; }
  .foot-links.primary { grid-area: links; } .foot-links.places { grid-area: places; }
  .foot-links, .foot-links.places { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 22px; }
}
@media (min-width: 1200px) {
  .field { top: calc(50% + 52px); right: auto; left: calc(max(0px, 50vw - 38rem) + var(--pad-x) + var(--prose) + 24px); width: min(103.2vh, 1003px); transition: opacity 0.7s ease; }
  .field .f-brush { opacity: 1; }
  .field.away { opacity: 0; }
  .field .f-rings circle { stroke-width: 0.16; }
  .field .f-rings .r-t { stroke-width: 0.32; }
}
/* Motion */
@keyframes turn-cw { to { transform: rotate(48deg); } }
@keyframes turn-ccw { to { transform: rotate(-36deg); } }
@keyframes hdr-lift { to { opacity: 1; } }
@keyframes paint { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes spin { from { transform: rotate(-16deg); } to { transform: rotate(81deg); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after { animation: hdr-lift linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    .rings .g-cw { animation: turn-cw linear both; animation-timeline: scroll(root); animation-range: 0 1100px; }
    .rings .g-ccw { animation: turn-ccw linear both; animation-timeline: scroll(root); animation-range: 0 1100px; }
    .next .big-enso .reveal { animation: paint linear both; animation-timeline: --next; animation-range: entry 10% cover 60%; }
    .field .f-brush { animation: spin linear both; animation-timeline: scroll(root); }
    .field .wheel { animation: wheel linear both; animation-timeline: scroll(root); }
  }
}
@media (prefers-reduced-motion: reduce) { .site * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* S4 additions (8 October 2026) */
/* Header shadow as you scroll: the same look as S3, drawn on a layer that fades in (opacity), so motion stays compositor-only (P11) */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -2px; pointer-events: none; box-shadow: 0 10px 28px rgba(15, 18, 40, 0.3); opacity: 0; }
/* Learn hub and 404: a list of links straight after the page head */
.hub-links { margin-top: var(--section-gap); }
.hub-links .routes { margin-top: 0; }
/* Accessibility targets: nothing below 16 px (A2), tel links at least 44 px wide (A4) */
.utility { font-size: 16px; }
.tel a { min-width: 44px; }
/* 320 px phones: keep the opening paragraph within the first screen when the heading runs long */
@media (max-width: 374px) { .page-head { padding-top: 28px; } }
/* The background logo's rings turn like wheels as you scroll down and back up: clockwise, anticlockwise, clockwise,
   anticlockwise from the centre out (KokoKyi, 8 Oct). Speeds follow meshed gears (each ring turns in proportion to
   1 / its radius). The brush keeps turning clockwise. Scroll-linked only; still and complete without support or with reduced motion.
   S5 (KokoKyi, 8 Oct): everything turns 1.8 times as far as in S4 (1.5 times, then another 20%); the brush turns 97 degrees. */
.field .f-brush, .field .wheel { transform-box: view-box; transform-origin: 50% 50%; }
.field .w1 { --turn: 216deg; } .field .w2 { --turn: -133deg; } .field .w3 { --turn: 65deg; } .field .w4 { --turn: -58deg; }
@keyframes wheel { to { transform: rotate(var(--turn)); } }