/* The public shell: header, footer, the 1200px column on paper. PCB-39. Page rules belong
   in that surface's own additions, not in this file's shell rules. */

.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; }

.ss-pubhead { border-bottom: 1px solid var(--ss-ink); background: var(--ss-paper); }
.ss-pubhead__in,
.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); Sign in keeps clear. */
.ss-pubhead__in { padding-right: calc(var(--ss-space-12) + var(--ss-bugreport-gap, 0px)); }
.ss-root a.ss-pubhead__brand {
  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__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); }

.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-pubhead__in, .ss-pubfoot__in { padding: var(--ss-space-3) var(--ss-space-4); gap: var(--ss-space-2); flex-wrap: wrap; }
  .ss-pubhead__in { padding-right: calc(var(--ss-space-4) + var(--ss-bugreport-gap, 0px)); }
  .ss-root a.ss-pubhead__brand { font-size: var(--ss-display-xs); }
  /* Signed in the nav is six links: wrapped they took 114px of a 344px screen, so the row
     scrolls sideways instead and every link stays whole. */
  .ss-pubhead__nav {
    gap: var(--ss-space-3);
    font-size: var(--ss-text-sm);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ss-pubhead__nav::-webkit-scrollbar { display: none; }
  .ss-pubhead__nav > * { flex: 0 0 auto; }
  /* The row scrolls sideways, so it clips: a link cannot grow its target past the row's own
     height. Each link is a full target instead, and the header's own padding pays most of it —
     a 44px row is its own breathing room. */
  .ss-pubhead__in { padding-block: 0; gap: var(--ss-space-1); }
  .ss-pubhead__nav { gap: var(--ss-space-2); }
  .ss-pubhead__nav > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ss-touch);
    /* "Stories" is 41px of ink; the padding is what takes the shortest link over 44. */
    padding-inline: var(--ss-space-1);
  }
  .ss-root a.ss-pubhead__brand { display: inline-flex; align-items: center; min-height: var(--ss-touch); }
  .ss-pubhead__nav--wide {
    flex: 1 1 100%;
    /* A link fading at the edge says the row goes on; `--ss-bugreport-gap` stays clear. */
    margin-right: calc(-1 * var(--ss-space-4));
    padding-right: var(--ss-space-4);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--ss-space-6)), transparent);
    mask-image: linear-gradient(to right, black calc(100% - var(--ss-space-6)), transparent);
  }
  .ss-pubhead__nav--wide::after { content: ""; flex: 0 0 var(--ss-space-6); }
}

.ss-public .ss-page { padding-top: var(--ss-space-12); }
/* The browser's paragraph and heading margins are cleared once here. `.ss-empty` and
   `.ss-prose` keep theirs: their spacing is the component's, not the page's. */
.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); }
.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); }

.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: the masthead on a photograph ----
   Only `--stage` is on the photograph: with no background the masthead stands on paper. */
.ss-masthead--stage {
  position: relative;
  isolation: isolate;
  min-height: min(62vh, 620px);
  display: flex;
  align-items: flex-end;
  background: var(--ss-stage);
}
.ss-masthead--stage .ss-masthead__in { width: 100%; padding-top: var(--ss-space-16); }

.ss-masthead__photo { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.ss-masthead__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Two washes. The band ends on a hard edge into paper — a print on the page, not a fade-out. */
.ss-masthead__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--ss-stage) 78%, transparent) 0%, transparent 62%),
    var(--ss-scrim);
}
@media (prefers-reduced-motion: no-preference) {
  /* Decoration on a photograph, so it stops entirely rather than slowing. */
  .ss-masthead__photo img { animation: ss-masthead-pan 60s var(--ss-ease) infinite alternate; transform-origin: 50% 50%; }
  @keyframes ss-masthead-pan {
    from { transform: scale(1.06) translate3d(0, -1%, 0); }
    to { transform: scale(1.12) translate3d(0, 1%, 0); }
  }
}

/* The masthead's own text is on the stage, not on paper. */
.ss-masthead--stage .ss-title-xl { color: var(--ss-ink-on-dark); }
.ss-masthead--stage .ss-masthead__tagline,
.ss-masthead--stage .ss-masthead__note { color: var(--ss-ink-on-dark); }
.ss-masthead--stage a.ss-btn--ghost { color: var(--ss-ink-on-dark); border-color: var(--ss-ink-on-dark); }
.ss-masthead--stage a.ss-btn--ghost:hover { background: transparent; color: var(--ss-ink-on-dark); text-decoration: underline; }
.ss-masthead--stage :focus-visible { outline-color: var(--ss-focus-on-dark); }

.ss-masthead__credit {
  position: absolute;
  right: var(--ss-space-4);
  bottom: var(--ss-space-4);
  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) ----
   A form with no script behind it, sized for a 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): the header and the footer touch the screen's edges. */
@media (display-mode: standalone) {
  .ss-pubhead { padding-top: env(safe-area-inset-top, 0px); }
  .ss-pubfoot { padding-bottom: env(safe-area-inset-bottom, 0px); }
}