/* Woo’s Briefing components. Every colour and font comes from tokens.css; see DESIGN.md. */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font: 400 var(--text-md)/1.6 var(--font-body); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); color: var(--ink); line-height: 1.05; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* masthead */
.mast { border-bottom: 3px double var(--rule-2); }
.mast__top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--space-lg); padding-block: var(--space-lg) var(--space-md); }
.mast__date, .mast__about { font: 400 var(--text-sm)/1.3 var(--font-ui); color: var(--muted); }
.mast__about { justify-self: end; }
.word { font: 700 var(--text-word)/0.9 var(--font-display); letter-spacing: -0.03em; color: var(--ink); text-decoration: none; font-variation-settings: "opsz" 72; white-space: nowrap; }
.sections { border-top: 1px solid var(--rule); }
.sections ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: var(--space-lg); overflow-x: auto; scrollbar-width: none; }
.sections a { display: inline-block; padding-block: var(--space-sm); font: 400 var(--text-sm)/1 var(--font-ui); color: var(--ink); text-decoration: none; white-space: nowrap; }
.sections a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.sections a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }

/* lead */
.lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-xl) var(--space-lg); }
.lead__text { display: grid; gap: var(--space-lg); align-content: center; }
.lead h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; max-width: 16ch; }
.lead h1 a { text-decoration: none; }
.lead h1 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.dek { font-size: var(--text-lead); line-height: 1.45; color: var(--ink-2); max-width: 40ch; }
.byline { font: 400 var(--text-sm)/1.45 var(--font-ui); color: var(--muted); }
.byline b { font-weight: 600; color: var(--ink); }
.btn { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-sm) var(--space-lg); background: var(--accent); color: var(--accent-ink); font: 600 var(--text-sm)/1 var(--font-ui); text-decoration: none; border-radius: 2px; white-space: nowrap; transition: background-color var(--dur) var(--ease); }
.btn:hover { background: var(--accent-2); }
.btn:active { background: var(--accent-2); transform: translateY(1px); }

/* the plate: a story's sea-chart image (rendered by blog_studio/image.py from the same tokens) */
.plate { margin: 0; display: grid; gap: var(--space-xs); min-width: 0; }
.plate img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-2); background: var(--sea); }
.plate figcaption { font: 400 var(--text-xs)/1.4 var(--font-ui); color: var(--muted); }

/* chart inks, shared by both maps */
.g-grid line { stroke: var(--coast); stroke-opacity: 0.35; stroke-dasharray: 1 1.4; }
.g-grid text { fill: var(--muted); font-family: var(--font-ui); }
.g-land path { fill: var(--land); stroke: var(--coast); }
.g-hi path { fill: var(--land-hi); stroke: var(--accent); }
.g-dot { fill: var(--accent); }
.g-ring { fill: none; stroke: var(--accent); }
.g-place { fill: var(--ink); font-family: var(--font-ui); font-weight: 600; }

/* region */
.region { padding-block: var(--space-3xl) var(--space-2xl); border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2xl); align-items: start; }
.region h2 { font-size: var(--text-section); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.region__text { display: grid; gap: var(--space-md); }
.region__text p { color: var(--muted); max-width: 45ch; }
.region__frame { border: 1px solid var(--rule-2); background: var(--sea); min-width: 0; }
.region__map { display: block; width: 100%; height: auto; }
.pin circle { fill: var(--ink); stroke: var(--sheet); stroke-width: 1.2; transition: transform var(--dur) var(--ease); transform-box: fill-box; transform-origin: center; }
.pin text { fill: var(--ink); font: 600 11px var(--font-ui); paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round; }
.pin--live circle { fill: var(--accent); }
.pin--live text { fill: var(--accent-2); }
.pin:hover circle, .pin:focus-visible circle { transform: scale(1.5); }

/* index */
.index { padding-block: var(--space-2xl) var(--space-3xl); display: grid; gap: var(--space-lg); }
.index h2 { font-size: var(--text-section); font-weight: 700; letter-spacing: -0.02em; }
.index ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-2); }
.row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 6fr) minmax(0, 2.6fr) minmax(0, 1.2fr); gap: var(--space-lg); align-items: baseline; padding-block: var(--space-md); border-bottom: 1px solid var(--rule); text-decoration: none; transition: background-color var(--dur) var(--ease); }
.row:hover { background: var(--paper-2); }
.row:hover .row__head { text-decoration: underline; text-decoration-color: var(--accent); }
.row__place, .row__date { font: 400 var(--text-sm)/1.4 var(--font-ui); color: var(--muted); }
.row__date { text-align: right; }
.row__head { font: 400 var(--text-lg)/1.3 var(--font-display); color: var(--ink); }
.row__fig { font: 400 var(--text-sm)/1.4 var(--font-ui); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.row__fig b { font-weight: 600; color: var(--ink); }
li:first-child .row__head, li:first-child .row__fig b { color: var(--accent-2); }

/* the record */
.band { background: var(--ink); color: var(--paper); }
.band :focus-visible { outline-color: var(--sheet); }
.band .card :focus-visible { outline-color: var(--focus); }
.record { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); padding-block: var(--space-3xl); }
.record h2 { color: var(--sheet); font-size: var(--text-section); font-weight: 700; letter-spacing: -0.02em; }
.record__text { display: grid; gap: var(--space-lg); align-content: start; }
.record__text p { max-width: 48ch; }
.record__text a { color: var(--sheet); }
.card { margin: 0; background: var(--sheet); color: var(--ink-2); padding: var(--space-lg); border-top: 3px solid var(--accent); display: grid; gap: var(--space-md); }
.card dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); }
.card dt { font: 400 var(--text-sm)/1.5 var(--font-ui); color: var(--muted); }
.card dd { margin: 0; font-size: var(--text-md); line-height: 1.5; overflow-wrap: anywhere; }
.card mark { background: var(--land-hi); color: var(--ink); padding-inline: var(--space-2xs); }

/* colophon */
.colophon { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); padding-block: var(--space-2xl); }
.colophon .word { font-size: var(--text-2xl); }
.colophon ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font: 400 var(--text-sm)/1.5 var(--font-ui); }
.colophon p { font: 400 var(--text-sm)/1.55 var(--font-ui); color: var(--muted); max-width: 56ch; }
.colophon__links { display: grid; gap: var(--space-md); }

/* article */
.crumbs { padding-block: var(--space-lg) 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); font: 400 var(--text-sm)/1.4 var(--font-ui); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--rule-2); }
.post__head { padding-block: var(--space-lg) var(--space-xl); }
.post__head h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; max-width: 22ch; }
/* the article is one centred reading column: breadcrumb, headline and body share its left edge; the plate and the list below run wider, also centred */
.post .crumbs, .post .post__head { max-width: calc(680px + 2 * var(--gutter)); }
.post__plate .plate { max-width: 1040px; margin-inline: auto; }
.entry { margin-inline: auto; }
.more { max-width: calc(1040px + 2 * var(--gutter)); }
.entry { max-width: 680px; padding-block: var(--space-xl) var(--space-2xl); display: grid; gap: var(--space-lg); }
.entry > * { margin: 0; }
.entry h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.015em; padding-top: var(--space-lg); }
.entry p, .entry li { font-size: 1.1875rem; line-height: 1.65; color: var(--ink-2); max-width: 65ch; }
.entry ul, .entry ol { padding-left: 1.25em; display: grid; gap: var(--space-xs); }
.entry a { text-decoration-color: var(--accent); }
.entry .wb-summary { font-size: var(--text-lead); line-height: 1.5; color: var(--ink); }
.entry .wb-meta { font: 400 var(--text-sm)/1.55 var(--font-ui); color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: var(--space-sm); }
.entry .wb-keys { background: var(--sheet); border-top: 2px solid var(--rule-2); padding: var(--space-lg); display: grid; gap: var(--space-sm); }
.entry .wb-keys h2, .entry .wb-sources h2 { font-size: var(--text-lg); padding-top: 0; }
.entry .wb-keys li { font-size: var(--text-md); }
.entry .wb-sources { border-top: 2px solid var(--rule-2); padding-top: var(--space-md); display: grid; gap: var(--space-sm); }
.entry .wb-sources li { font: 400 var(--text-sm)/1.5 var(--font-ui); }
.entry .wb-attrib { font: 400 var(--text-xs)/1.5 var(--font-ui); color: var(--muted); }
.entry table { width: 100%; border-collapse: collapse; font: 400 var(--text-sm)/1.4 var(--font-ui); }
.entry th, .entry td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--rule); }
.entry th { color: var(--muted); font-weight: 400; border-bottom: 2px solid var(--rule-2); }
.more { padding-top: var(--space-xl); border-top: 1px solid var(--rule); }

@media (max-width: 60rem) {
  .lead, .region, .record, .colophon { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .mast__top { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-xs); }
  .mast__about { justify-self: start; }
  .sections ul { justify-content: flex-start; }
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); }
  .row__head { grid-column: 1 / -1; order: -1; }
  .row__date { display: none; }
}
/* on phones the chart scrolls sideways and opens at its east end, where the Gulf stories are */
@media (max-width: 40rem) { .region__frame { overflow-x: auto; direction: rtl; } .region__map { min-width: 680px; direction: ltr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }