/* The public shell: header, footer, the 1200px column on paper (PCB-39); page rules go
   elsewhere. */

.ss-public {
  margin: 0;
  min-height: 100dvh;
  /* #333: no double-tap zoom, and no tap delay. Pinch still zooms. */
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
  background: var(--ss-paper);
  color: var(--ss-ink);
  font: var(--ss-text-lg) / var(--ss-leading-prose) var(--ss-font-ui);
}
.ss-public .ss-main { flex: 1 1 auto; }

/* One header for the public and signed-in shells (#456); the drawer hangs below --ss-appbar-h
   (bar height plus notch). */
.ss-pubhead {
  border-bottom: 1px solid var(--ss-ink);
  background: var(--ss-paper);
  position: sticky;
  top: 0;
  z-index: var(--ss-z-sticky);
  --ss-appbar-h: var(--ss-topbar-h);
}
.ss-pubhead__in {
  max-width: var(--ss-content-max);
  margin: 0 auto;
  height: var(--ss-appbar-h);
  padding: 0 var(--ss-space-12);
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
}
.ss-pubfoot__in {
  max-width: var(--ss-content-max);
  margin: 0 auto;
  padding: var(--ss-space-4) var(--ss-space-12);
  display: flex;
  align-items: center;
  gap: var(--ss-space-6);
}
/* The report control sits in this corner on a phone (bug-report.css); the menu keeps clear. */
.ss-pubhead__in { padding-right: calc(var(--ss-space-12) + var(--ss-bugreport-gap, 0px)); }
.ss-root a.ss-pubhead__brand {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font: var(--ss-weight-medium) var(--ss-display-s) / 1.1 var(--ss-font-display);
  color: var(--ss-ink-heading);
  text-decoration: none;
  margin-right: auto;
}
.ss-pubhead__brand img { flex: none; width: auto; height: 1.4em; }
/* #333: installed as an app there is no browser back; shell.js shows this only there. */
.ss-pubhead__back { flex-shrink: 0; }
/* #640: with the back button showing, the mark is what wraps the name onto two lines. */
@media (max-width: 374px) {
  .ss-pubhead__back:not([hidden]) ~ .ss-pubhead__brand img { display: none; }
}

/* A visitor's own two links: unchanged (decision 5). */
.ss-pubhead__nav { display: flex; align-items: center; gap: var(--ss-space-5); font-size: var(--ss-text-md); }
.ss-pubhead__nav a { color: var(--ss-ink); text-decoration: none; }
.ss-pubhead__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ss-pubhead__nav a.ss-btn { color: var(--ss-white); }
@media (pointer: coarse) {
  .ss-pubhead__nav > a:not(.ss-btn) { display: inline-flex; align-items: center; min-height: var(--ss-touch); }
}

/* A member's row, 960px and up: Stories · Media library · Groups · Browse · Notifications, then
   the account menu. Below 960px both give way to the drawer. */
.ss-pubhead__row { display: flex; align-items: center; gap: var(--ss-space-1); font-size: var(--ss-text-md); }
.ss-root a.ss-navlink {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--ss-space-3);
  border-radius: var(--ss-radius-round);
  color: var(--ss-ink);
  text-decoration: none;
  white-space: nowrap;
}
/* .ss-root a wins on specificity otherwise: an underlined, forest-on-hover body link. */
.ss-root a.ss-navlink:hover { background: var(--ss-fill); color: var(--ss-ink); }
/* The current page: a --ss-fill pill (decision 2). */
.ss-root a.ss-navlink[aria-current="page"] { background: var(--ss-fill); font-weight: var(--ss-weight-semibold); }
@media (pointer: coarse) { .ss-root a.ss-navlink { min-height: var(--ss-touch); } }

/* The account menu: an avatar and a no-JS popover; shell.js adds only Escape and outside-click. */
.ss-navmenu { position: relative; }
.ss-navmenu > summary { display: flex; align-items: center; }
.ss-navmenu > summary::-webkit-details-marker { display: none; }
.ss-navmenu__trigger {
  gap: var(--ss-space-2);
  height: 40px;
  padding: 0 var(--ss-space-2) 0 var(--ss-space-1);
  border-radius: var(--ss-radius-round);
  color: var(--ss-ink);
  cursor: pointer;
}
.ss-navmenu__trigger:hover { background: var(--ss-fill); }
.ss-navmenu[open] > .ss-navmenu__trigger { background: var(--ss-fill); }
@media (pointer: coarse) { .ss-navmenu__trigger { min-height: var(--ss-touch); } }
.ss-navmenu__trigger svg { flex-shrink: 0; color: var(--ss-ink-3); transition: transform var(--ss-duration-fast) var(--ss-ease); }
.ss-navmenu[open] > .ss-navmenu__trigger svg { transform: rotate(180deg); }
.ss-navmenu__name {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ss-text-sm);
  font-weight: var(--ss-weight-medium);
}
.ss-navmenu__avatar { width: 28px; height: 28px; border-radius: var(--ss-radius-round); object-fit: cover; flex-shrink: 0; }
.ss-navmenu__avatar--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-forest-tint);
  color: var(--ss-forest);
  font: var(--ss-weight-medium) var(--ss-text-sm) / 1 var(--ss-font-display);
}
.ss-navmenu__pop {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--ss-space-2);
  width: 260px;
  flex-direction: column;
  gap: 2px;
  padding: var(--ss-space-2);
  background: var(--ss-print);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow-menu);
  z-index: var(--ss-z-menu);
}
.ss-navmenu[open] > .ss-navmenu__pop { display: flex; }
/* Three classes outrank .ss-root a.ss-navlink's own height, regardless of source order. */
.ss-root .ss-navmenu__pop .ss-navlink { height: auto; min-height: 36px; padding: var(--ss-space-2) var(--ss-space-3); border-radius: var(--ss-radius-md); }
@media (pointer: coarse) { .ss-root .ss-navmenu__pop .ss-navlink { min-height: var(--ss-touch); } }

/* Plan usage (#229): the account menu's head, once per responsive shape it appears in (#456). */
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--ss-space-2);
  padding: var(--ss-space-2) var(--ss-space-3) var(--ss-space-3);
  margin-bottom: var(--ss-space-1);
  border-bottom: 1px solid var(--ss-line);
}
.plan__name { margin: 0; font-size: var(--ss-text-xs); font-weight: var(--ss-weight-semibold); color: var(--ss-ink-2); }
.plan__rows { display: flex; flex-direction: column; gap: var(--ss-space-2); }
.plan__row { display: flex; flex-direction: column; gap: var(--ss-space-1); }
.plan__label { font-size: var(--ss-text-xs); color: var(--ss-ink-3); font-variant-numeric: tabular-nums; }
.plan__bar { display: block; height: 6px; border-radius: var(--ss-radius-round); background: var(--ss-fill); overflow: hidden; }
.plan__fill { display: block; height: 100%; background: var(--ss-forest); }

/* The drawer, under 960px: every item the row and the account menu carry, in one list. */
.ss-navdrawer { display: none; }
.ss-navdrawer > summary { display: flex; align-items: center; }
.ss-navdrawer > summary::-webkit-details-marker { display: none; }
.ss-navdrawer__panel {
  display: none;
  position: fixed;
  inset: var(--ss-appbar-h) auto 0 env(safe-area-inset-left, 0px);
  width: min(var(--ss-sidebar-w), 84vw);
  flex-direction: column;
  gap: 2px;
  padding: var(--ss-space-4);
  padding-bottom: calc(var(--ss-space-6) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--ss-print);
  border-right: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow-menu);
  z-index: var(--ss-z-sheet);
}
.ss-navdrawer[open] > .ss-navdrawer__panel { display: flex; }
.ss-navdrawer__divider { height: 1px; margin: var(--ss-space-2) 0; border: 0; background: var(--ss-line); }

@media (max-width: 959px) {
  .ss-pubhead__row { display: none; }
  .ss-navdrawer { display: block; }
}

.ss-pubfoot { border-top: 1px solid var(--ss-line); margin-top: var(--ss-space-16); }
.ss-pubfoot__in { font-size: var(--ss-text-sm); color: var(--ss-ink-3); }
.ss-pubfoot p { margin: 0; margin-right: auto; }
.ss-pubfoot nav { display: flex; gap: var(--ss-space-4); }
.ss-pubfoot a { color: var(--ss-ink-2); }

@media (max-width: 599px) {
  .ss-pubfoot__in { padding: var(--ss-space-3) var(--ss-space-4); gap: var(--ss-space-2); flex-wrap: wrap; }
  .ss-pubhead__in { padding: 0 calc(var(--ss-space-4) + var(--ss-bugreport-gap, 0px)) 0 var(--ss-space-4); }
  .ss-root a.ss-pubhead__brand { font-size: var(--ss-display-xs); }
}

.ss-public .ss-page { padding-top: var(--ss-space-12); }
/* Paragraph and heading margins are cleared once; `.ss-empty` and `.ss-prose` keep theirs. */
.ss-public h1, .ss-public h2, .ss-public h3 { margin: 0; }
.ss-public p { margin: 0; }
.ss-public .ss-empty__title { margin: 0 0 var(--ss-space-2); }
.ss-public .ss-empty__body { margin: 0 auto var(--ss-space-4); max-width: 36ch; }

.ss-section { margin-top: var(--ss-space-16); }
/* components.css's `.ss-section` is the inspector's flex row (#441); a public page's section is a block. */
.ss-public .ss-page > .ss-section { display: block; padding: 0; border-bottom: 0; }
.ss-section:first-child { margin-top: 0; }
.ss-section__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ss-space-4);
  padding-bottom: var(--ss-space-3);
  margin-bottom: var(--ss-space-6);
  border-bottom: 1px solid var(--ss-line);
}
.ss-section__head h2 { margin-right: auto; }
.ss-section__more { font-size: var(--ss-text-md); white-space: nowrap; }

.ss-lede { color: var(--ss-ink-2); max-width: 60ch; margin-top: var(--ss-space-3); }
.ss-backlink { font-size: var(--ss-text-md); margin-top: var(--ss-space-3); }
/* These three stand alone on a line, so a full target costs nothing but their own leading. */
@media (pointer: coarse) {
  .ss-section__more > a,
  .ss-backlink > a,
  .ss-profile__link { display: inline-flex; align-items: center; min-height: var(--ss-touch); }
}

/* Search (#105): one field and one button, a plain GET form on Browse. */
.ss-search { display: flex; align-items: flex-end; gap: var(--ss-space-3); max-width: 40rem; margin-top: var(--ss-space-6); }
.ss-search__field { flex: 1 1 auto; }
.ss-issue__intro { margin-top: var(--ss-space-8); }

/* A series (#504): its page, and its card on the author's page. */
.ss-series { padding-bottom: var(--ss-space-8); border-bottom: 1px solid var(--ss-line); }
.ss-public .ss-series__facts { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); margin-top: var(--ss-space-2); }
.ss-public .ss-series__start { margin-top: var(--ss-space-6); }
.ss-series + .ss-section { margin-top: var(--ss-space-10); }
.ss-series__parts { list-style: none; margin: 0; padding: 0; }
.ss-series__part { display: flex; flex-direction: column; gap: var(--ss-space-2); }
.ss-series__part > .ss-storycard { flex: 1 1 auto; }
.ss-root a.ss-collection.ss-collection--series { display: flex; gap: var(--ss-space-4); align-items: center; }
.ss-collection__cover { flex: none; width: 96px; aspect-ratio: 4 / 3; border-radius: var(--ss-radius-md); object-fit: cover; }
.ss-collection__text { min-width: 0; }

.ss-masthead__in {
  max-width: var(--ss-content-max);
  margin: 0 auto;
  padding: var(--ss-space-16) var(--ss-space-12) var(--ss-space-12);
}
.ss-masthead__tagline {
  font-size: var(--ss-display-s);
  color: var(--ss-ink-2);
  line-height: 1.5;
  max-width: 36ch;
  margin-top: var(--ss-space-4);
}
.ss-masthead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-3); margin-top: var(--ss-space-8); }
.ss-masthead__note { margin-top: var(--ss-space-4); font-size: var(--ss-text-md); color: var(--ss-ink-3); }

/* Home (#677): the masthead matches sign-in. The veil, window and lines are `.ss-veil` in components.css; here they are
   absolute in the masthead and the window sits in the room right of the text column. */
.ss-masthead { position: relative; isolation: isolate; }
.ss-masthead::before { position: absolute; }
.ss-masthead--stage {
  min-height: min(62vh, 620px);
  display: flex;
  align-items: flex-end;
}
.ss-masthead--stage .ss-masthead__in { width: 100%; padding-top: var(--ss-space-16); }
.ss-masthead__in { position: relative; z-index: 1; }

.ss-masthead__photo { position: absolute; }

/* Dark ink, not the greys: over a black photograph the veil is a mid grey, where --ss-ink-2 is 2.8:1 and --ss-ink 5.8:1. */
.ss-masthead--stage .ss-masthead__tagline,
.ss-masthead--stage .ss-masthead__note { color: var(--ss-ink); }
.ss-masthead--stage a.ss-btn--ghost { color: var(--ss-ink); border-color: var(--ss-ink); }

@media (min-width: 960px) {
  /* The text column is 34rem; no line sits behind a word, as a dotted line takes even --ss-ink under 4.5:1. */
  .ss-masthead__in > * { max-width: 34rem; }
  .ss-masthead__in > .ss-masthead__tagline { max-width: min(36ch, 34rem); }
  .ss-masthead {
    --ss-text-clear: calc(var(--ss-space-12) + 34rem + var(--ss-space-4));
    --ss-veil-keep: linear-gradient(to right, transparent calc(50% - min(var(--ss-content-max), 100%) / 2 + var(--ss-text-clear)), var(--ss-paper) 0);
  }
  .ss-masthead__photo {
    --ss-win-gap: var(--ss-space-8);
    /* The foot keeps the window clear of the credit pill. */
    --ss-win-foot: var(--ss-space-16);
    --ss-win-left: calc(50cqw - min(var(--ss-content-max), 100cqw) / 2 + var(--ss-text-clear));
    --ss-win-room: calc(100cqw - var(--ss-win-left));
    --ss-win-w: min(400px, calc(var(--ss-win-room) - 2 * var(--ss-win-gap)), calc((100cqh - var(--ss-win-gap) - var(--ss-win-foot)) * 26 / 34));
    --ss-win-h: calc(var(--ss-win-w) * 34 / 26);
    --ss-win-x: calc(var(--ss-win-left) + (var(--ss-win-room) - var(--ss-win-w)) / 2);
    --ss-win-y: min((100cqh - var(--ss-win-h)) / 2, 100cqh - var(--ss-win-foot) - var(--ss-win-h));
  }
}
/* Under 960px the words span the screen, so no line can stay clear of them. */
@media (max-width: 959px) {
  .ss-masthead__photo::after,
  .ss-masthead.ss-veil-lines::before { display: none; }
}

.ss-masthead__credit {
  position: absolute;
  right: var(--ss-space-4);
  bottom: var(--ss-space-4);
  z-index: 2;
  max-width: min(28rem, calc(100vw - 2rem));
  height: auto;
  padding: var(--ss-space-2) var(--ss-space-4);
  font-weight: var(--ss-weight-regular);
}
.ss-root .ss-masthead__credit a { color: var(--ss-focus-on-dark); }

/* ---- Home: the featured story that leads the page ---- */
.ss-lead { display: grid; gap: var(--ss-space-8); grid-template-columns: 1.35fr 1fr; align-items: center; }
.ss-root a.ss-lead__link { display: block; text-decoration: none; color: inherit; }
.ss-lead__print { display: block; width: 100%; }
.ss-lead__print > img { width: 100%; aspect-ratio: 16 / 10; }
.ss-lead__title { font-size: var(--ss-display-xl); letter-spacing: -0.01em; margin-top: var(--ss-space-2); }
.ss-root a.ss-lead__titlelink { color: inherit; text-decoration: none; }
.ss-root a.ss-lead__titlelink:hover { text-decoration: underline; text-underline-offset: 4px; }
.ss-lead__standfirst {
  font: italic var(--ss-weight-regular) var(--ss-display-s) / 1.5 var(--ss-font-display);
  color: var(--ss-ink-2);
  margin-top: var(--ss-space-4);
  max-width: 44ch;
}
.ss-lead__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-3); margin-top: var(--ss-space-5); }

.ss-grid { display: grid; gap: var(--ss-space-8) var(--ss-space-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ss-grid--after-lead { margin-top: var(--ss-space-16); }

.ss-storycard { display: flex; flex-direction: column; gap: var(--ss-space-3); }
.ss-root a.ss-storycard__link { display: block; text-decoration: none; color: inherit; }
.ss-storycard__print { display: block; width: 100%; }
.ss-storycard__print > img { width: 100%; aspect-ratio: 16 / 10; }
.ss-storycard__placeholder { aspect-ratio: 16 / 10; border-radius: var(--ss-radius-xs); }
.ss-storycard__title { margin-top: var(--ss-space-3); }
.ss-root .ss-storycard__link:hover .ss-storycard__title { text-decoration: underline; text-underline-offset: 3px; }
.ss-storycard__desc { color: var(--ss-ink-2); font-size: var(--ss-text-md); margin-top: var(--ss-space-2); }
.ss-storycard__tags { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); list-style: none; margin: 0; padding: 0; }
.ss-storycard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ss-space-2) var(--ss-space-3); font-size: var(--ss-text-sm); color: var(--ss-ink-2); margin-top: auto; }
.ss-storycard__author { color: var(--ss-ink-2); }
.ss-storycard__when { color: var(--ss-ink-3); font-size: var(--ss-text-xs); }

/* A tag reads as a quiet chip, not a bright link inside a paragraph. */
.ss-root a.ss-tagref {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--ss-radius-sm);
  background: var(--ss-fill);
  color: var(--ss-ink-2);
  font-size: var(--ss-text-xs);
  text-decoration: none;
}
.ss-root a.ss-tagref:hover { background: var(--ss-forest-tint); color: var(--ss-forest); }

/* `static/js/follow.js` owns these class names and data attributes; restyle, never fork. */
.ss-root .story-card__follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ss-control-md);
  padding: 0 var(--ss-space-4);
  border: 1px solid var(--ss-line-control);
  border-radius: var(--ss-radius-md);
  background: var(--ss-print);
  font: var(--ss-weight-medium) var(--ss-text-sm) / 1 var(--ss-font-ui);
  color: var(--ss-ink);
  text-decoration: none;
  cursor: pointer;
}
.ss-root .story-card__follow:hover { background: var(--ss-fill); }
/* On, not off: the pressed state is filled, so it can't read as a disabled button. */
.ss-root .story-card__follow.is-following {
  background: var(--ss-forest);
  border-color: var(--ss-forest);
  color: var(--ss-white);
}
.ss-root .story-card__follow[disabled] { opacity: 0.6; }
@media (pointer: coarse) { .ss-root .story-card__follow { min-height: var(--ss-touch); } }

.ss-collections { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ss-space-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ss-root a.ss-collection {
  display: block; padding: var(--ss-space-5) var(--ss-space-6); text-decoration: none; color: inherit; }
.ss-collection:hover { background: var(--ss-forest-tint); }
.ss-collection__title { display: block; font-family: var(--ss-font-display); font-size: var(--ss-display-s); color: var(--ss-ink-heading); }
.ss-collection__desc { display: block; color: var(--ss-ink-2); font-size: var(--ss-text-md); margin-top: var(--ss-space-2); }

.ss-tagcloud { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); list-style: none; margin: 0; padding: 0; }
.ss-root a.ss-tagcloud__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-2);
  min-height: var(--ss-control-md);
  padding: 0 var(--ss-space-4);
  border: 1px solid var(--ss-line-control);
  border-radius: var(--ss-radius-md);
  color: var(--ss-ink);
  text-decoration: none;
  font-size: var(--ss-text-sm);
}
.ss-root a.ss-tagcloud__tag:hover { background: var(--ss-fill); }
.ss-root a.ss-tagcloud__tag[aria-current="true"] { background: var(--ss-forest); border-color: var(--ss-forest); color: var(--ss-white); }
.ss-tagcloud__count { color: var(--ss-ink-2); }
.ss-root a.ss-tagcloud__tag[aria-current="true"] .ss-tagcloud__count { color: var(--ss-white); }
@media (pointer: coarse) { .ss-root a.ss-tagcloud__tag { min-height: var(--ss-touch); } }

.ss-pager { display: flex; align-items: center; gap: var(--ss-space-4); margin-top: var(--ss-space-10); font-size: var(--ss-text-md); }
.ss-pager__status { color: var(--ss-ink-2); }

.ss-profile { display: flex; gap: var(--ss-space-6); align-items: flex-start; padding-bottom: var(--ss-space-8); border-bottom: 1px solid var(--ss-line); }
.ss-profile__avatar { width: 96px; height: 96px; border-radius: var(--ss-radius-round); object-fit: cover; flex-shrink: 0; }
.ss-profile__avatar--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-fill);
  color: var(--ss-ink-2);
  font: var(--ss-weight-medium) var(--ss-display-m) / 1 var(--ss-font-display);
}
.ss-profile__identity { display: flex; flex-direction: column; gap: var(--ss-space-2); min-width: 0; }
.ss-profile__handle { color: var(--ss-ink-3); font-size: var(--ss-text-md); }
.ss-profile__bio { color: var(--ss-ink); max-width: 60ch; }
.ss-profile__facts { display: flex; flex-wrap: wrap; gap: var(--ss-space-2) var(--ss-space-4); font-size: var(--ss-text-md); color: var(--ss-ink-2); }
.ss-profile__actions { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); margin-top: var(--ss-space-2); }

/* ---- Prose pages (the accessibility statement; the flat article reuses it) ---- */
.ss-prose { max-width: 42rem; }
.ss-prose h1 { font: var(--ss-weight-medium) var(--ss-display-l) / var(--ss-leading-tight) var(--ss-font-display); color: var(--ss-ink-heading); letter-spacing: -0.01em; }
.ss-prose h2 { font: var(--ss-weight-medium) var(--ss-display-m) / 1.2 var(--ss-font-display); color: var(--ss-ink-heading); margin-top: var(--ss-space-12); }
.ss-prose h3 { font: var(--ss-weight-medium) var(--ss-display-s) / 1.25 var(--ss-font-display); color: var(--ss-ink-heading); margin-top: var(--ss-space-8); }
.ss-prose p, .ss-prose ul, .ss-prose ol { margin-top: var(--ss-space-4); line-height: var(--ss-leading-prose); }
.ss-prose li { margin-top: var(--ss-space-2); }
.ss-prose__lead { font-size: var(--ss-display-s); color: var(--ss-ink-2); line-height: 1.5; }
.ss-prose__meta { color: var(--ss-ink-3); font-size: var(--ss-text-md); margin-top: var(--ss-space-10); }
.ss-prose table { width: 100%; border-collapse: collapse; margin-top: var(--ss-space-4); font-size: var(--ss-text-md); }
.ss-prose caption { text-align: left; font-size: var(--ss-text-xs); font-weight: var(--ss-weight-semibold); color: var(--ss-ink-2); padding-bottom: var(--ss-space-2); }
.ss-prose th, .ss-prose td { text-align: left; vertical-align: top; padding: var(--ss-space-3) var(--ss-space-3) var(--ss-space-3) 0; border-bottom: 1px solid var(--ss-line); }
.ss-prose th { font-size: var(--ss-text-xs); font-weight: var(--ss-weight-semibold); color: var(--ss-ink-2); }
.ss-prose kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--ss-line-control);
  border-radius: var(--ss-radius-xs);
  background: var(--ss-print);
  font: var(--ss-text-xs) var(--ss-font-mono);
  color: var(--ss-ink);
}
.ss-prose code { font: var(--ss-text-sm) var(--ss-font-mono); background: var(--ss-fill); padding: 1px 5px; border-radius: var(--ss-radius-xs); }

@media (max-width: 959px) {
  .ss-lead { grid-template-columns: 1fr; gap: var(--ss-space-6); }
  .ss-lead__title { font-size: var(--ss-display-l); }
}
@media (max-width: 599px) {
  .ss-masthead__in { padding: var(--ss-space-10) var(--ss-space-4) var(--ss-space-8); }
  .ss-masthead__tagline { font-size: var(--ss-text-lg); }
  .ss-masthead--stage { min-height: min(70vh, 560px); }
  .ss-masthead--stage .ss-masthead__in { padding-top: var(--ss-space-12); }
  .ss-masthead__credit { display: none; }
  .ss-section { margin-top: var(--ss-space-12); }
  .ss-profile { flex-direction: column; gap: var(--ss-space-4); }
  .ss-grid { grid-template-columns: 1fr; }
}

/* Subscribe by email (PCB-23): no script, phone first. */
.ss-subscribe { margin-block: var(--ss-space-8); max-width: 42rem; }
.ss-subscribe__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ss-space-3); margin-block: var(--ss-space-4); }
.ss-subscribe__form .ss-field { flex: 1 1 18rem; }
.ss-subscribe .ss-hint { margin: 0; }

/* Installed as an app (#166): header and footer touch the edges; the bar grows by the inset
   (#333). */
@media (display-mode: standalone) {
  .ss-pubhead {
    --ss-appbar-h: calc(var(--ss-topbar-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .ss-pubfoot { padding-bottom: env(safe-area-inset-bottom, 0px); }
}