/* ABOUTME: Defines the blue editorial visual system for the rendered static site. */
/* ABOUTME: Styles shared safety, hazard, briefing, archive, and responsive layouts. */
:root {
  --page-background: #dceef6;
  --page-background-deep: #c7e4ef;
  --paper: #fffaf0;
  --paper-blue: #eef8fb;
  --ink: #173247;
  --ink-soft: #496574;
  --navy: #102f46;
  --teal: #18727b;
  --teal-dark: #105761;
  --coral: #ce6549;
  --coral-dark: #9f432f;
  --gold: #e3b65c;
  --sage: #6f8d81;
  --rule: #9dc2cf;
  --danger-background: #fff0e8;
  --danger-rule: #cf6046;
  --shadow: 0 18px 45px rgba(22, 65, 87, 0.12);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --content-width: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 250, 240, 0.9), transparent 31rem),
    radial-gradient(circle at 92% 22%, rgba(227, 182, 92, 0.2), transparent 25rem),
    linear-gradient(160deg, var(--page-background) 0%, var(--page-background-deep) 52%, #d9ece7 100%);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

.editorial-page {
  display: grid;
  place-items: start center;
}

.editorial-shell {
  width: min(100% - 40px, 820px);
  padding-block: clamp(48px, 10vw, 108px);
}

.editorial-shell h1 {
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(2.8rem, 8vw, 4.6rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.editorial-intro {
  max-width: 46rem;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1.25rem;
}

.editorial-actions,
.editorial-draft__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Where you are in the sitting. Pinned above the one draft on screen, so a
   reviewer never has to find their place: the whole reason the queue was
   awkward was that 22 expanded drafts in one column gave no answer to
   "which one am I on". */
.editorial-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 2px solid var(--rule);
}

.editorial-progress__where {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
}

.editorial-progress__moves {
  display: flex;
  gap: 10px;
}

/* The keys are the fast path and the buttons are the discoverable one, so
   the buttons are present and quiet rather than absent. */
.editorial-button--quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  font-weight: 600;
}

.editorial-button--quiet:hover {
  background: var(--paper);
  color: var(--coral-dark);
}

.editorial-progress__keys {
  margin: 0 0 0 auto;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.editorial-button {
  border: 0;
  border-radius: 4px;
  padding: 10px 16px;
  background: var(--teal-dark);
  color: white;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.editorial-button:hover {
  background: var(--coral-dark);
}

.editorial-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.editorial-button--quiet {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
}

.editorial-button--rejected {
  background: var(--coral-dark);
}

.editorial-status {
  margin: 26px 0;
  padding: 14px 16px;
  border-left: 4px solid var(--rule);
  background: rgba(255, 250, 240, 0.78);
  color: var(--ink-soft);
}

.editorial-status--ready {
  border-color: var(--teal);
}

.editorial-status--error {
  border-color: var(--danger-rule);
  background: var(--danger-background);
  color: var(--coral-dark);
}

.editorial-draft {
  margin-top: 20px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(24, 114, 123, 0.28);
  border-top: 4px solid var(--teal);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.editorial-draft h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1.12;
}

.editorial-draft__meta {
  margin: 8px 0 22px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.editorial-draft__body {
  font-family: var(--display);
  font-size: 1.18rem;
  line-height: 1.55;
}

a {
  color: var(--teal-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--coral-dark);
}

a:focus-visible {
  border-radius: 3px;
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.container {
  width: min(100% - 40px, var(--content-width));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--navy);
  transform: translateY(-160%);
}

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

.status-bar {
  background: var(--navy);
  color: #e9f6fa;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The strip carries data now, so it wraps rather than crushing on a phone. */
.status-bar__inner {
  flex-wrap: wrap;
  row-gap: 6px;
}

.strip-hazard {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffd9cf;
}

.strip-meeting strong {
  font-weight: 800;
}

.strip-weather {
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.status-bar__inner {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.staleness {
  display: inline-flex;
  align-items: center;
  color: #ffd7c8;
}

.status-dot {
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(206, 101, 73, 0.2);
}

.masthead {
  padding: clamp(36px, 7vw, 76px) 0 0;
}

.masthead__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: end;
  gap: clamp(28px, 4vw, 52px);
}

.masthead__kicker,
.eyebrow {
  margin: 0 0 10px;
  color: var(--coral-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.masthead__wordmark {
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  letter-spacing: -0.045em;
  line-height: 0.92;
  white-space: nowrap;
}

.masthead__wordmark a {
  color: inherit;
  text-decoration: none;
}

.masthead__standfirst {
  display: flex;
  max-width: 430px;
  flex-direction: column;
  gap: 6px;
}

/* The masthead line, in the slot the disclosure used to hold. */
.tagline {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  font-style: italic;
  line-height: 1.45;
}

/* On every page and no longer at tagline size. It is a caveat about how the
   writing is made, which a reader should be able to find and should not have
   to read before the name of the paper. */
.disclosure {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  opacity: 0.85;
}

.city-montage {
  margin: clamp(30px, 5vw, 50px) 0 0;
}

.city-montage__grid {
  display: grid;
  overflow: hidden;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(100px, 10vw, 145px));
  gap: 4px;
  border: 4px solid rgba(255, 250, 240, 0.9);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.city-montage__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.city-montage__image--aerial {
  grid-row: 1 / 3;
  object-position: center;
}

.city-montage__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 3px 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 0.78rem;
  font-style: italic;
}

.photo-credits {
  position: relative;
  font-family: var(--body);
  font-style: normal;
  text-align: right;
}

.photo-credits summary {
  color: var(--teal-dark);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
}

.photo-credits ul {
  margin: 10px 0 6px;
  padding: 14px 14px 14px 30px;
  border: 1px solid var(--rule);
  background: rgba(255, 250, 240, 0.96);
  box-shadow: var(--shadow);
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: left;
}

.photo-credits p {
  margin: 0;
  font-size: 0.7rem;
}

.city-montage + .section-nav {
  margin-top: 22px;
}

.section-nav {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  margin-top: 34px;
  padding: 17px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.section-nav a {
  position: relative;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  text-decoration: none;
}

.section-nav a::after {
  position: absolute;
  right: 100%;
  bottom: -18px;
  left: 0;
  height: 3px;
  background: var(--coral);
  content: "";
  transition: right 180ms ease;
}

.section-nav a:hover::after,
.section-nav a[aria-current="page"]::after {
  right: 0;
}

.page-content {
  padding-block: clamp(34px, 5vw, 62px) clamp(72px, 9vw, 110px);
}

.emergency {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px clamp(28px, 6vw, 72px);
  margin-bottom: 24px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(24, 114, 123, 0.28);
  border-top: 4px solid var(--teal);
  background: rgba(238, 248, 251, 0.84);
  box-shadow: var(--shadow);
}

.emergency .eyebrow {
  grid-column: 1 / -1;
  color: var(--teal-dark);
}

.emergency p {
  margin: 0;
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.45;
}

.emergency__links {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.emergency__links a {
  display: block;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  font-size: 0.83rem;
  font-weight: 750;
  text-decoration: none;
}

.hazard-status {
  margin-bottom: clamp(46px, 7vw, 76px);
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(206, 101, 73, 0.35);
  border-top: 4px solid var(--coral);
  background: var(--danger-background);
  box-shadow: var(--shadow);
}

.hazard-status__title {
  margin: 0 0 14px;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.1;
}

.hazard-status p,
.hazard-status ul {
  margin-block: 10px 0;
}

.hazard-list {
  padding-left: 1.35rem;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 650;
}

.hazard-clear {
  color: #27604d;
  font-weight: 800;
}

.hazard-freshness {
  padding: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  list-style: none;
}

.edition-line {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: clamp(34px, 5vw, 54px);
  color: var(--sage);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.edition-line__rule {
  height: 1px;
  flex: 1;
  background: var(--rule);
}

.section-heading {
  margin-bottom: 22px;
}

/* Six sections each carried a heading at up to 3.8rem, so most of the page's
   height was its own table of contents. A section label names where you are;
   it does not need to be the largest thing on the screen. */
.section-heading h2 {
  max-width: 820px;
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* The page's own sections, sticky so it is reachable from anywhere in a page
   that is six sections tall. */
.jump {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 10px 0;
  gap: 8px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper, #eef6fa);
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.jump a {
  color: var(--ink-soft);
  text-decoration: none;
}

.jump a:hover,
.jump a:focus-visible {
  color: var(--coral-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* A headline is the source's own title and runs to any length, so the lead
   slot steps down as the title grows: a short one gets the full size, a
   103-character one would otherwise become six lines of capitals. */
.briefing-item:first-child.headline--medium {
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
}

.briefing-item:first-child.headline--long {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.4;
  letter-spacing: -0.008em;
}

/* The day at a glance. Numbered because the order is salience, not
   chronology, and a reader is entitled to know the list is ranked. */
.digest {
  margin: 0 0 30px;
  padding: 18px clamp(18px, 3vw, 26px);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--coral);
  background: rgb(255 255 255 / 55%);
}

.digest .eyebrow {
  margin: 0 0 12px;
}

.digest__list {
  display: grid;
  margin: 0;
  padding: 0 0 0 1.15rem;
  gap: 8px;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.35;
}

.digest__list li::marker {
  color: var(--coral-dark);
  font-weight: 700;
}

.digest__list a {
  color: var(--ink);
  text-decoration: none;
}

.digest__list a:hover,
.digest__list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.briefing-list,
.story-list,
.archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.briefing-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule);
}

.briefing-item {
  display: flex;
  min-height: 132px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px clamp(20px, 4vw, 38px);
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 650;
  line-height: 1.35;
}

.briefing-item:nth-child(odd) {
  border-right: 1px solid var(--rule);
}

.briefing-item:first-child {
  min-height: 0;
  grid-column: 1 / -1;
  padding: clamp(30px, 5vw, 52px);
  border-top: 4px solid var(--coral);
  border-right: 0;
  background: rgba(255, 250, 240, 0.84);
  box-shadow: var(--shadow);
  /* A lead is the most important line on the page, not the largest object
     on it. At 2.55rem a 57-character title -- `855 Brotherton Road - The
     Alexan and Bethel Baptist Church` -- is two lines of poster type
     above a paragraph set at 1.05rem, and the gap between them reads as
     shouting rather than as hierarchy. Prominent is one step up from the
     items beside it, not six. */
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  letter-spacing: -0.012em;
  line-height: 1.25;
}

/* Two sections hold records that carry an account of their own: what the
   council decided, and what it is about to. Both were rendered into
   `briefing-list`, a two-column grid built for one-line briefs, so a title
   running to 300 characters with several paragraphs of approved article
   beneath it filled one cell for twenty lines while the cell beside it stood
   empty, and the article hung off the right of the page.

   A brief is scanned across; a record with an account is read down. One
   column, full measure, and the account sits under its own title. */
.story-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--rule);
}

.story-item {
  padding: 26px clamp(20px, 4vw, 38px);
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 650;
  line-height: 1.35;
}

/* Prose wants a line a person can track back from. The title above it may
   run the full width; the paragraphs under it do not. */
.story-item .approved-prose,
.story-item .references {
  max-width: 62ch;
}

/* The city writes its agenda item titles in capitals, and so do many permit
   descriptions -- 109 of 150 agenda titles and 163 permits in the stored
   record. The site publishes the record's own words, so the words stay as
   the city wrote them. What was wrong was the type.

   Capitals set at a brief headline's size and weight read as shouting and
   cost far more width than the same words in mixed case, which is what
   turned a long title into a wall. Set a step smaller, a little lighter and
   with the letter-spacing capitals need to stop crowding each other, the
   same words read as the formal title of a record, which is what they are.

   The words are untouched. Title-casing them was the alternative and it
   mangles `SB 79`, `LLC`, `ADU` and `CEQA`, which are the terms a resident
   came to the page to find. */
.briefing-item.headline--capitals,
.story-item.headline--capitals,
.archive-item.headline--capitals {
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.5;
}

.briefing-item:first-child.headline--capitals {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
}

/* The title is the link. It carries the line's own type, so a list reads as
   a list of things rather than a list of links, and only announces itself on
   hover and to the keyboard. */
.item-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.item-link:hover,
.item-link:focus-visible {
  color: var(--coral-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* One record, given the room a list line cannot give it. */
.item {
  max-width: 46rem;
}

.item__title {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.item__sentence {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.item__section {
  margin: 34px 0 0;
  padding: 22px clamp(18px, 3vw, 26px);
  border: 1px solid var(--rule);
  background: var(--paper);
}

.item__heading {
  margin: 0 0 14px;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.item__note {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.item__fields {
  display: grid;
  gap: 10px;
  margin: 0;
}

/* Label and value on one row at reading width, stacked when there is not
   room for both. `minmax(0, 1fr)` lets a long description wrap instead of
   forcing the grid wider than its container. */
.item__field {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 4px 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.item__field:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.item__field dt {
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.item__field dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* The passage the fields were read from, set as quoted evidence rather than
   as more of the site's own prose. */
.excerpt {
  margin: 0 0 18px;
  padding-left: 16px;
  border-left: 3px solid var(--gold);
}

.excerpt:last-child {
  margin-bottom: 0;
}

.excerpt__text {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.55;
}

.excerpt__cite {
  margin-top: 6px;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.item__source {
  margin: 30px 0 0;
}

@media (max-width: 620px) {
  .item__field {
    grid-template-columns: minmax(0, 1fr);
  }
}

.archive-link {
  margin: 30px 0 0;
}

.archive-link a {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--coral);
  color: var(--coral-dark);
  font-family: var(--display);
  font-weight: 750;
  text-decoration: none;
}

.archive-list {
  column-count: 2;
  column-gap: 46px;
}

.archive-item {
  break-inside: avoid;
  padding: 19px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.4;
}

.approved-prose {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: rgb(255 255 255 / 55%);
  border-left: 4px solid var(--coral);
  /* An approved article is body text and sets its own. The lead slot sizes
     its child text as a headline, up to 2.55rem in the display face at
     weight 650, which is right for one line naming an item and wrong for
     the several paragraphs of prose that sit under it. The reference block
     below already declares its own for the same reason. */
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.6;
}

.approved-prose__label {
  margin: 0 0 0.6rem;
  color: var(--coral-dark);
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.approved-prose p:last-child {
  margin-bottom: 0;
}

.references {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  background: rgb(238 248 251 / 70%);
  border-left: 4px solid var(--teal);
  font-family: var(--body);
  font-size: 0.92rem;
}

.references__label {
  margin: 0 0 0.6rem;
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reference-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference + .reference {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.reference p {
  margin: 0 0 0.4rem;
}

.reference p:last-child {
  margin-bottom: 0;
}

.reference__citation {
  color: var(--navy);
  font-weight: 700;
}

.reference__title {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.35;
}

.reference__status {
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.reference-summary {
  line-height: 1.5;
}

.reference__links a,
.reference__credit a {
  color: var(--teal-dark);
  font-weight: 700;
}

.reference__credit {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.site-footer {
  border-top: 1px solid rgba(16, 47, 70, 0.24);
  background: rgba(16, 47, 70, 0.07);
}

.site-footer__inner {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 0.9rem;
  font-style: italic;
}

.site-footer__place {
  color: var(--teal-dark);
  font-family: var(--body);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* The brief and the archive carry a right-hand rail. Weather is practical
   rather than news: it belongs beside the record, not inside it. The rail
   spans rows so it pins to the top of the column instead of stretching one
   row to its own height. Empty implicit rows collapse to nothing. */
.briefing,
.archive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.briefing > *,
.archive > * {
  grid-column: 1;
}

.briefing > .weather,
.archive > .weather {
  grid-column: 2;
  grid-row: 1 / span 20;
  align-self: start;
}

.weather {
  margin: 0 0 24px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(24, 114, 123, 0.28);
  border-top: 4px solid var(--teal);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.weather .section-heading {
  margin-bottom: 12px;
}

/* A rail heading sits beside the brief's own headline, so it takes the
   section label's scale rather than the display scale a full-width
   section heading uses. */
.weather .section-heading h2 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.weather-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.weather-period {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.45;
}

.weather-period:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 700px) {

  .briefing,
  .archive {
    grid-template-columns: 1fr;
  }

  .briefing > .weather,
  .archive > .weather {
    grid-column: 1;
    grid-row: auto;
  }
  body {
    font-size: 1rem;
  }

  .container {
    width: min(100% - 28px, var(--content-width));
  }

  .status-bar__inner {
    min-height: 30px;
    gap: 12px;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }

  .masthead {
    padding-top: 32px;
  }

  .masthead__row,
  .emergency {
    grid-template-columns: 1fr;
  }

  .masthead__wordmark {
    font-size: clamp(2.7rem, 14vw, 4rem);
    white-space: normal;
  }

  .disclosure {
    max-width: 34ch;
  }

  .city-montage__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 112px repeat(2, 82px);
  }

  .city-montage__image--aerial {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .city-montage__caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .photo-credits {
    text-align: left;
  }

  .section-nav {
    margin-top: 24px;
  }

  .emergency {
    padding: 22px;
  }

  .briefing-list {
    grid-template-columns: 1fr;
  }

  .briefing-item,
  .briefing-item:nth-child(odd) {
    min-height: 0;
    border-right: 0;
  }

  .briefing-item:first-child {
    grid-column: auto;
  }

  .story-item {
    padding-right: clamp(20px, 4vw, 38px);
  }

  .archive-list {
    column-count: 1;
  }

  .site-footer__inner {
    min-height: 150px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}

/* Both editions of the page, named in their own language. The one being read
   is marked rather than linked, so the strip says which edition you are in as
   well as offering the other. */
.languages {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The separator is drawn rather than written, so it is not a character a
   screen reader has to read out between two language names. */
.languages > * + *::before {
  content: "\00b7";
  margin-inline-end: 8px;
  opacity: 0.55;
}

.languages__current,
.languages__other {
  letter-spacing: 0.12em;
}

.languages__current {
  color: #ffffff;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
}

.languages__other {
  color: #e9f6fa;
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.languages__other:hover,
.languages__other:focus-visible {
  opacity: 1;
  color: #ffffff;
}