@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300..600&family=Petrona:ital,wght@0,400;0,600;1,400&display=swap");

:root {
  --ice: #FAFAFA;
  --ice-scuffed: #F0F2F5;
  --board-ink: #1F2937;
  --ink-muted: #6B7280;
  --blue-line: #307BA6;
  --blue-line-ink: #2D6B90;
  --deep-water: #155579;
  --rink-board: #ABC1CF;
  --face-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --face-text: "Petrona", Georgia, "Times New Roman", serif;
  --size-sm: 0.75rem;
  --size-base: 1rem;
  --size-step: 1.272rem;
  --size-lg: 1.618rem;
  --size-lg-step: 2.058rem;
  --size-xl: 2.618rem;
  --size-hero: 4.5rem;
  --space-xs: 12px;
  --space-sm: 24px;
  --space-md: 36px;
  --space-lg: 48px;
  --space-xl: 72px;
  --space-xxl: 96px;
  --line-width: 12px;
  --rail: 14rem;
  --gutter: 24px;
  --rhythm: 48px;
  --page-column: 64rem;
  --measure: 66ch;
}

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

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

body {
  min-height: 100vh;
  margin: 0;
  background: var(--ice);
  color: var(--board-ink);
  font-family: var(--face-text);
  font-size: var(--size-base);
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, iframe, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; }
::selection { background: var(--rink-board); color: var(--board-ink); }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--board-ink);
  font-family: var(--face-display);
  font-weight: 500;
  text-wrap: balance;
}
h1 {
  max-width: 20ch;
  font-size: clamp(2.75rem, 2rem + 3.2vw, var(--size-hero));
  line-height: 1.02;
  letter-spacing: -0.01em;
}
h2 {
  max-width: 28ch;
  font-size: clamp(var(--size-lg), 1rem + 2.4vw, var(--size-xl));
  line-height: 1.08;
}
h3 {
  font-size: clamp(var(--size-step), 0.9rem + 1vw, var(--size-lg));
  line-height: 1.15;
}
h4 { font-size: var(--size-step); line-height: 1.2; }
p { margin: 0 0 var(--space-sm); text-wrap: pretty; }
strong, b { font-weight: 600; }
address { margin: 0 0 var(--space-sm); font-style: normal; line-height: 1.618; }
hr { margin: var(--rhythm) 0; border: 0; border-block-start: 1px solid var(--rink-board); }

a {
  color: var(--blue-line-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
a:hover { color: var(--deep-water); text-decoration-thickness: 2px; }

p a:not([class]), li a:not([class]), figcaption a:not([class]),
blockquote a:not([class]), dd a:not([class]) {
  color: var(--blue-line-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
p a:not([class]):hover, li a:not([class]):hover, figcaption a:not([class]):hover,
blockquote a:not([class]):hover, dd a:not([class]):hover {
  color: var(--deep-water);
  text-decoration-thickness: 2px;
}

:focus-visible { outline: 3px solid var(--blue-line); outline-offset: 3px; }

body > :not(.primary-menu) {
  padding-inline: max(var(--gutter), calc((100% - var(--page-column)) / 2));
}
body > :has(> .primary-menu) { display: contents; }
body > :has(> .primary-menu) > :not(.primary-menu) {
  padding-inline: max(var(--gutter), calc((100% - var(--page-column)) / 2));
}

.primary-menu { background: var(--ice); }
.primary-menu--sidebar-left-left-tracked {
  border-block-end: var(--line-width) solid var(--blue-line);
}
.primary-menu-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--gutter);
}
.primary-menu-brand {
  color: var(--board-ink);
  font-family: var(--face-display);
  font-size: var(--size-base);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: normal;
}
.primary-menu-phone {
  color: var(--ink-muted);
  font-family: var(--face-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}
.primary-menu-toggle {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.primary-menu-toggle span {
  display: block;
  height: 2px;
  background: var(--board-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.primary-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.primary-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.primary-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-menu-links {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-md) var(--gutter) calc(var(--space-md) + env(safe-area-inset-bottom));
  background: var(--board-ink);
  border-block-start: var(--line-width) solid var(--blue-line);
  box-shadow: 0 -12px 36px rgba(31, 41, 55, 0.28);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.primary-menu-links.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.28s ease;
}
.primary-menu--sidebar-left-left-tracked .primary-menu-links a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  color: var(--ice);
  font-family: var(--face-display);
  font-size: var(--size-step);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.primary-menu--sidebar-left-left-tracked .primary-menu-links a::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--space-xs);
  height: 2px;
  background: var(--rink-board);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.2s ease;
}
.primary-menu--sidebar-left-left-tracked .primary-menu-links a:hover,
.primary-menu--sidebar-left-left-tracked .primary-menu-links a[aria-current="page"] {
  color: var(--rink-board);
}
.primary-menu--sidebar-left-left-tracked .primary-menu-links a:hover::after { transform: scaleX(1); }
.primary-menu--sidebar-left-left-tracked .primary-menu-links a[aria-current="page"]::after {
  background: var(--blue-line);
  transform: scaleX(1);
}
.primary-menu--sidebar-left-left-tracked .primary-menu-links a:focus-visible {
  outline-color: var(--rink-board);
  outline-offset: 2px;
}

main, .main-passage { padding-block: var(--space-lg) var(--space-xl); }

:where(main, .main-passage) :is(p, li, dt, dd, figcaption) { max-width: var(--measure); }
:where(main, .main-passage) :is(p, li, dd) { line-height: 1.618; }
:where(main, .main-passage) h1 { margin-block-end: var(--space-md); }
:where(main, .main-passage) h2 { margin-block-end: var(--space-sm); }
:where(main, .main-passage) h3 { margin-block: var(--space-md) var(--space-xs); }
:where(main, .main-passage) :is(h2, h3):first-child { margin-block-start: 0; }
:where(main, .main-passage) :is(section, .region):not(:first-child) { margin-block-start: var(--rhythm); }

.main-passage-heading { margin-block-end: var(--rhythm); }
.main-passage-heading h1 { margin-block-end: var(--space-sm); }
.main-passage-standfirst {
  max-width: 44ch;
  margin-block-end: 0;
  font-size: var(--size-step);
  line-height: 1.45;
}

:where(main, .main-passage) ul {
  margin: 0 0 var(--space-sm);
  padding-inline-start: 1.25em;
  list-style: square;
}
:where(main, .main-passage) ul > li::marker { color: var(--blue-line); }
:where(main, .main-passage) ul > li + li { margin-block-start: 6px; }

:where(main, .main-passage) ol {
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
  counter-reset: passage-step;
}
:where(main, .main-passage) ol > li {
  position: relative;
  padding-inline-start: 3rem;
  counter-increment: passage-step;
}
:where(main, .main-passage) ol > li + li { margin-block-start: var(--space-sm); }
:where(main, .main-passage) ol > li::before {
  content: counter(passage-step);
  position: absolute;
  top: 0.05em;
  left: 0;
  width: 2rem;
  color: var(--blue-line);
  font-family: var(--face-display);
  font-size: var(--size-lg);
  font-weight: 500;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
:where(main, .main-passage) li > p:last-child { margin-block-end: 0; }

:where(main, .main-passage) dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 6px;
  margin: 0 0 var(--space-sm);
}
:where(main, .main-passage) dt {
  font-family: var(--face-display);
  font-size: var(--size-step);
  font-weight: 500;
  line-height: 1.25;
}
:where(main, .main-passage) dd { margin: 0; }
:where(main, .main-passage) dd + dt { margin-block-start: var(--space-sm); }

:where(main, .main-passage) details {
  max-width: 48rem;
  border-block-end: 1px solid var(--rink-board);
}
:where(main, .main-passage) details:first-of-type { border-block-start: 1px solid var(--rink-board); }
:where(main, .main-passage) summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  font-family: var(--face-display);
  font-size: var(--size-step);
  font-weight: 400;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
:where(main, .main-passage) summary::-webkit-details-marker { display: none; }
:where(main, .main-passage) summary::after {
  content: "";
  flex: none;
  align-self: center;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--blue-line), var(--blue-line)) center / 100% 2px no-repeat,
    linear-gradient(var(--blue-line), var(--blue-line)) center / 2px 100% no-repeat;
  transition: background-size 0.2s ease;
}
:where(main, .main-passage) details[open] > summary::after { background-size: 100% 2px, 2px 0; }
:where(main, .main-passage) summary:hover { color: var(--blue-line-ink); }
:where(main, .main-passage) summary > :is(h2, h3, h4) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
:where(main, .main-passage) details > :not(summary) { margin-block-end: var(--space-sm); }

.main-passage-table { margin-block: 0 var(--space-md); overflow-x: auto; }
.main-passage-table > table { min-width: 36rem; margin: 0; }
:where(main, .main-passage) table {
  width: 100%;
  margin-block: 0 var(--space-md);
  border-collapse: collapse;
  font-size: var(--size-base);
  line-height: 1.45;
}
:where(main, .main-passage) :is(th, td) {
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  border-block-end: 1px solid var(--rink-board);
  text-align: left;
  vertical-align: top;
  hyphens: auto;
}
:where(main, .main-passage) :is(th, td):last-child { padding-inline-end: 0; }
:where(main, .main-passage) th { font-family: var(--face-display); font-weight: 500; }
:where(main, .main-passage) thead th { border-block-end: 2px solid var(--board-ink); }
:where(main, .main-passage) caption {
  padding-block-end: var(--space-xs);
  caption-side: top;
  color: var(--ink-muted);
  font-style: italic;
  text-align: left;
}
:where(main, .main-passage) tfoot :is(th, td),
.main-passage-footnote :is(th, td) {
  padding-block-start: var(--space-xs);
  border-block-end: 0;
  font-family: var(--face-text);
  font-weight: 400;
}
:where(main, .main-passage) tfoot, .main-passage-footnote {
  color: var(--ink-muted);
  font-style: italic;
}

:where(main, .main-passage) blockquote {
  max-width: 44rem;
  margin: var(--space-lg) 0;
  padding: 6px 0 6px var(--space-md);
  border-inline-start: var(--line-width) solid var(--blue-line);
  font-family: var(--face-display);
  font-size: clamp(var(--size-step), 0.8rem + 1.6vw, var(--size-lg-step));
  font-weight: 300;
  line-height: 1.25;
}
:where(main, .main-passage) blockquote p { max-width: none; margin: 0 0 var(--space-xs); line-height: inherit; }
:where(main, .main-passage) blockquote :is(cite, footer) {
  display: block;
  margin-block-start: var(--space-xs);
  color: var(--ink-muted);
  font-family: var(--face-text);
  font-size: var(--size-base);
  font-style: normal;
  font-weight: 400;
}

:where(main, .main-passage) figure { margin: 0 0 var(--space-md); }
:where(main, .main-passage) figure > img,
:where(main, .main-passage) figure > a > img,
:where(main, .main-passage) figure > picture > img,
:where(main, .main-passage) > img,
:where(main, .main-passage) section > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
:where(main, .main-passage) > img,
:where(main, .main-passage) section > img { margin-block-end: var(--space-md); }
:where(main, .main-passage) figcaption {
  margin-block-start: var(--space-xs);
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.5;
}
:where(main, .main-passage) :is(iframe, video) {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--board-ink);
  border: 0;
}
.main-passage-film { margin-block: var(--space-lg); }
.main-passage-film > :is(iframe, video) { width: 100%; }

form {
  display: grid;
  gap: var(--space-sm);
  max-width: 36rem;
  margin-block: 0 var(--space-md);
}
label {
  display: block;
  margin-block-end: 6px;
  font-family: var(--face-display);
  font-size: var(--size-base);
  font-weight: 500;
}
input:not([type="checkbox"], [type="radio"], [type="submit"]), select, textarea {
  width: 100%;
  padding: var(--space-xs);
  font: inherit;
  color: var(--board-ink);
  background: var(--ice);
  border: 1px solid var(--ink-muted);
  border-radius: 0;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--blue-line);
  outline-offset: 1px;
}

.action-link, form button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-sm);
  color: var(--ice);
  font-family: var(--face-display);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background: var(--deep-water);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.action-link:hover, form button:hover, input[type="submit"]:hover {
  color: var(--ice);
  background: var(--board-ink);
}
:is(p, li, dd, figcaption, blockquote) .action-link {
  display: inline;
  padding: 0;
  color: var(--blue-line-ink);
  font: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-align: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  background: none;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
:is(p, li, dd, figcaption, blockquote) .action-link:hover {
  color: var(--deep-water);
  text-decoration-thickness: 3px;
  background: none;
}

.ready-when-you-are { max-width: 44rem; margin-block: var(--rhythm); }
.ready-when-you-are p { font-size: var(--size-step); line-height: 1.45; }

.main-passage-recommendation {
  max-width: 44rem;
  margin-block: var(--space-lg);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: var(--ice-scuffed);
  border-block-start: var(--line-width) solid var(--blue-line);
}
.main-passage-recommendation h3 {
  margin: 0 0 var(--space-xs);
  font-size: clamp(var(--size-step), 0.9rem + 1vw, var(--size-lg));
}
.main-passage-recommendation p { max-width: 60ch; }
.main-passage-recommendation > :last-child { margin-block-end: 0; }

.arrangement {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
.feature-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}
.feature-note > :is(img, video, iframe),
.feature-note > a > img,
.feature-note > picture > img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 0;
}
.feature-note > :is(img, video, iframe, picture, a:has(> img)) { margin-block-end: var(--space-xs); }
.feature-note > a:has(> img) { display: block; }
.feature-note h3 { margin: 0; }
.feature-note p { margin: 0; }

.main-passage-section > h2 { margin-block-end: var(--space-md); }

.split-region-hotspots {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-xs);
  margin: 0;
}
.split-region-hotspots > :is(img, video, iframe, picture, a) {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  overflow: hidden;
  border: 0;
}
.split-region-hotspots > :is(a, picture) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-region-hotspots > figcaption { grid-row: 2; grid-column: 1; margin: 0; }
.split-region--image-hotspots-tooltips > .split-region-hotspots ~ * { margin-block-start: var(--space-md); }

.accent-mark {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  grid-column: 1;
  justify-self: start;
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  color: var(--board-ink);
  font-family: var(--face-display);
  font-size: var(--size-base);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
  background: none;
  border: 0;
  cursor: default;
}
.accent-mark::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  background: var(--blue-line);
}
.split-region-hotspots > .accent-mark:first-of-type { margin-block-start: var(--space-xs); }
.accent-mark-label { display: block; }

.split-region-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(16rem, calc((100% - var(--space-lg)) / 2))), 1fr));
  gap: var(--space-sm) var(--space-lg);
}
.split-region-columns > p { max-width: none; margin: 0; }
.split-region--two-column-text-newspaper .split-region-columns--2 > p { hyphens: auto; }

.split-region--double-sidebar-centered {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md) var(--space-lg);
  align-items: start;
}
.split-region--double-sidebar-centered > :not(.split-region-aside, .split-region-text) {
  grid-column: 1 / -1;
  margin-block-end: 0;
}
.split-region--double-sidebar-centered > :is(h2, h3):first-child { order: -2; }
.split-region-text { order: -1; min-width: 0; }
.split-region-text > :last-child { margin-block-end: 0; }
.split-region-aside {
  min-width: 0;
  padding-block-start: var(--space-xs);
  border-block-start: 1px solid var(--rink-board);
}
.split-region-aside h3 { margin: 0 0 var(--space-xs); font-size: var(--size-step); }
.split-region-aside p { line-height: 1.5; }
.split-region-aside > :last-child { margin-block-end: 0; }

.closing-block { background: var(--ice); }
.closing-block--statement-1col-own-row { padding-block: var(--space-xl) var(--space-md); }
.closing-block[data-edge="hairline"] { border-block-start: 1px solid var(--rink-board); }
.closing-block-inner { display: grid; gap: var(--space-lg); }
.closing-block-inner--1col { grid-template-columns: minmax(0, 1fr); }
.closing-block-column { min-width: 0; }
.closing-block-column--statement { max-width: 40rem; }
.closing-block-column--statement p { margin: 0 0 var(--space-sm); line-height: 1.618; }
.closing-block-heading {
  max-width: none;
  margin: 0 0 var(--space-xs);
  font-size: var(--size-lg);
  line-height: 1.1;
}
.closing-block-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.closing-block .closing-block-pages a {
  color: var(--blue-line-ink);
  font-family: var(--face-display);
  font-size: var(--size-step);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  text-decoration-line: underline;
  text-decoration-color: var(--rink-board);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  white-space: nowrap;
}
.closing-block .closing-block-pages a:hover { color: var(--deep-water); text-decoration-color: currentColor; }
.closing-block-meta { margin-block-start: var(--space-lg); }
.closing-block-meta--row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
}
.closing-block-meta p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--size-sm);
  letter-spacing: 0.02em;
}

@media (min-width: 481px) {
  .primary-menu-brand { font-size: var(--size-step); }
}

@media (min-width: 769px) {
  :root { --gutter: 48px; --rhythm: 72px; }

  body {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  body > * { grid-column: 2; }
  body > :has(> .primary-menu) > :not(.primary-menu) { grid-column: 2; }
  .primary-menu { grid-column: 1; grid-row: 1 / -1; }

  .primary-menu--sidebar-left-left-tracked {
    border-block-end: 0;
    border-inline-end: var(--line-width) solid var(--blue-line);
  }
  .primary-menu-inner {
    container-type: inline-size;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-lg);
    padding: var(--space-lg) 0 var(--space-lg) var(--space-sm);
  }
  .primary-menu-brand {
    padding-inline-end: var(--space-sm);
    font-size: clamp(1.25rem, 11.5cqi, 2.25rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
  }
  .primary-menu-phone { padding-inline-end: var(--space-sm); }
  .primary-menu-toggle { display: none; }
  .primary-menu-links {
    position: static;
    z-index: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .primary-menu--sidebar-left-left-tracked .primary-menu-links a {
    min-height: 0;
    padding-block: 6px;
    color: var(--board-ink);
  }
  .primary-menu--sidebar-left-left-tracked .primary-menu-links a:hover,
  .primary-menu--sidebar-left-left-tracked .primary-menu-links a[aria-current="page"] {
    color: var(--blue-line-ink);
  }
  .primary-menu--sidebar-left-left-tracked .primary-menu-links a:focus-visible { outline-color: var(--blue-line); }

  .split-region--double-sidebar-centered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-region--double-sidebar-centered > .split-region-text { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  html { font-size: 106.25%; }
  :root { --gutter: 72px; --rail: 16rem; }

  main, .main-passage { padding-block: var(--space-xl) var(--space-xxl); }
  .primary-menu-inner { padding-inline-start: var(--space-md); }

  .arrangement--two-column-large-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }
  .arrangement--two-column-large-images > .feature-note:first-child:nth-last-child(odd) {
    display: flow-root;
    grid-column: 1 / -1;
  }
  .arrangement--two-column-large-images > .feature-note:first-child:nth-last-child(odd) > :is(img, video, iframe, picture, a:has(> img)) {
    float: left;
    width: 60%;
    margin: 0 var(--space-lg) var(--space-xs) 0;
  }
  .arrangement--two-column-large-images > .feature-note:first-child:nth-last-child(odd) > :is(h3, p) { max-width: none; }
  .arrangement--two-column-large-images > .feature-note:first-child:nth-last-child(odd) > h3 {
    margin-block-end: var(--space-sm);
    font-size: var(--size-lg-step);
  }
  .arrangement--two-column-large-images > .feature-note:first-child:nth-last-child(odd) > p { margin-block-end: var(--space-xs); }

  .split-region-hotspots > :is(img, video, iframe, picture, a) { aspect-ratio: 3 / 2; }
  .split-region-hotspots:has(> figcaption) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--space-md);
    align-items: end;
  }
  .split-region-hotspots:has(> figcaption) > figcaption {
    grid-row: 1;
    grid-column: 2;
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid var(--rink-board);
  }

  :where(main, .main-passage) dl {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-md) var(--space-lg);
  }
  :where(main, .main-passage) dt { grid-column: 1; }
  :where(main, .main-passage) dd { grid-column: 2; }
  :where(main, .main-passage) dd + dt { margin-block-start: 0; }
}

@media (min-width: 1280px) {
  html { font-size: 112.5%; }

  .split-region--double-sidebar-centered {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--space-md);
  }
  .split-region--double-sidebar-centered > .split-region-text { grid-column: auto; order: 0; }

  .accent-mark {
    position: absolute;
    grid-area: 1 / 1 / 2 / 2;
    top: var(--y, 50%);
    left: var(--x, 50%);
    z-index: 1;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    max-width: none;
    background: var(--blue-line);
    border: 4px solid var(--ice);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--blue-line), 0 2px 10px rgba(31, 41, 55, 0.35);
    transform: translate(-50%, -50%);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }
  .split-region-hotspots > .accent-mark:first-of-type { margin-block-start: 0; }
  .accent-mark::before {
    position: absolute;
    inset: -10px;
    width: auto;
    height: auto;
    background: none;
    border-radius: 50%;
  }
  .accent-mark:is(:hover, :focus-visible) {
    z-index: 3;
    background: var(--deep-water);
    box-shadow: 0 0 0 2px var(--deep-water), 0 2px 10px rgba(31, 41, 55, 0.35);
  }
  .accent-mark:focus-visible { outline: 3px solid var(--board-ink); outline-offset: 4px; }
  .accent-mark-label {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    width: max-content;
    max-width: 16rem;
    padding: 6px var(--space-xs);
    color: var(--ice);
    font-size: var(--size-sm);
    line-height: 1.3;
    letter-spacing: 0.02em;
    background: var(--board-ink);
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.25);
    transform: translateX(calc(var(--x, 50%) * -1));
  }
  .accent-mark-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--x, 50%);
    width: 2px;
    height: 8px;
    margin-inline-start: -1px;
    background: var(--board-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}