/*
  Support Human — base design system.
  Palette, type scale and motifs from design/00-master-brief.md §2, amended by the link-colour
  correction in design/09-site-decisions.md (chat 6, turn 17) and the contrast floors in CLAUDE.md.
  This file carries chrome (site-header, site-footer) plus the shared reset and type primitives
  every later template builds on. Section-specific styling (strips, cards, post layout) belongs
  in its own template pass, not here.
*/

:root {
  /* Core */
  --sh-ink: #030203;
  --sh-paper: #fdfdfd;
  --sh-hairline: #d8d5d0;

  /* Small-text colour floor (CLAUDE.md) */
  --sh-grey-on-paper: #6b6b6b;
  --sh-grey-on-tint: #3a3a3a;
  --sh-grey-on-ink: #b8b6b4;

  /* Core accents */
  --sh-coral: #ee897c;
  --sh-peach: #fed5b7;
  --sh-blue: #69a3ff;
  --sh-purple-display: #a957b0;
  --sh-hot-pink: #fa5791;
  --sh-light-pink: #eda7e3;
  --sh-grey: #9c9c9c;
  --sh-green-bjb-only: #7fd6a2;
  --sh-career-suite-green: #c8e0b4;

  /* Links — purple is the signature colour (09 turn 17), retired #0b6aff site-wide */
  --sh-link: #8f3f96;
  --sh-link-hover: #ee897c;
  --sh-link-on-ink: #c9a0d1;

  /* Footer / near-black ground */
  --sh-footer-bg: #030203;
  --sh-footer-tagline: #c084c8;
  --sh-footer-meta: #b8b6b4;
  /* Both footer greys sit on the near-black ground, where the floor is a minimum LIGHTNESS:
     never darker than #b8b6b4 (CLAUDE.md). The label was #9c9c9c at 10px — 7.5:1, under the
     floor's 10.3:1 — and is the same slip Clign caught in the canvases. */
  --sh-footer-label: #b8b6b4;
  --sh-footer-rule: #3a3a3a;

  /* Section strip tints (pale) — 00 §"Shared chrome" + 09 §4 for Career Suite */
  --sh-tint-newsletter: #fbe3de;
  --sh-tint-jobs: #cfe1ff;
  --sh-tint-resources: #fbe6d4;
  --sh-tint-footnotes: #fdd9e6;
  --sh-tint-career-suite: #c8e0b4;
  --sh-tint-portfolio: #f0e4f5;
  --sh-tint-closed: #e6e4e2;

  /* Darkened nav-active-rule tints (09 turn 14) — Jobs and Resources are the two values the
     design canvas states explicitly. Newsletter and Footnotes are not stated anywhere in the
     docs; these two are derived by matching the same lightness/saturation reduction Jobs and
     Resources use against their own pale tint, so the four read as one consistent system rather
     than two designed values and two guesses. Flag for Steph to confirm or override. */
  --sh-active-newsletter: #eb9c8c;
  --sh-active-jobs: #6ea8f5;
  --sh-active-resources: #f0b98a;
  --sh-active-footnotes: #f282ab;

  /* Type */
  --sh-font-display: 'Instrument Serif', Georgia, serif;
  --sh-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sh-font-mono: 'Space Mono', monospace;

  --sh-gutter: 44px;
}

/* Reset */

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

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

body {
  margin: 0;
  background: var(--sh-paper);
  color: var(--sh-ink);
  font-family: var(--sh-font-body);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

img { max-width: 100%; display: block; }

button { font: inherit; }

/* Links — purple, hover coral (paper); on the footer's near-black ground, light purple */
a {
  color: var(--sh-link);
}
a:hover {
  color: var(--sh-link-hover);
}

/* On any tinted or near-black surface, links go back to ink + underline — the tint/ground itself
   carries the affordance instead of colour (00 §2, "the contrast rule"). Apply this class to any
   wrapper sitting on a section tint. */
.sh-on-tint a {
  color: var(--sh-ink);
  text-decoration: underline;
}

/* Decorative twinkle — aria-hidden at the call site, never text content */
.sh-twinkle {
  font-family: var(--sh-font-display);
  color: var(--sh-coral);
  font-style: normal;
}

.sh-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sh-skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 12px 16px;
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.sh-skip-link:focus {
  top: 12px;
}

/* ==========================================================================
   Koenig card widths — Ghost requires these to exist (gscan GS050).
   Base definitions only. design/09-site-decisions.md turn 35 maps them onto the post grid:
   Regular = the 562px measure, Wide = spans the notes margin and contents rail, and
   Full is deliberately NOT used on posts (a viewport-bleeding image fights the three-column
   grid). The post template pass sets the real values against that grid; these keep the
   classes defined everywhere else content can render.
   ========================================================================== */

.kg-width-wide {
  width: 100%;
}

.kg-width-full {
  width: 100%;
}

/* ==========================================================================
   Site header — masthead + nav (design 14a) and the mobile overlay (14b)
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--sh-ink);
  background: var(--sh-paper);
}

.site-header__row {
  padding: 22px var(--sh-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  text-decoration: none;
}
.site-header__brand:hover { color: var(--sh-ink); }

.site-header__avatar {
  width: 72px;
  height: auto;
  display: block;
  flex: none;
}

.site-header__wordmark-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.site-header__wordmark {
  height: 24px;
  width: auto;
  display: block;
}

.site-header__tagline {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  color: var(--sh-ink);
  white-space: nowrap;
}

/* Desktop nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav__link {
  color: var(--sh-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}
.site-nav__link:hover {
  border-bottom-color: var(--sh-hairline);
}
.site-nav__link[aria-current="page"] {
  font-weight: 700;
  border-bottom-color: var(--sh-nav-active-tint, var(--sh-ink));
}

.site-nav__subscribe {
  font-weight: 700;
  color: var(--sh-paper);
  background: var(--sh-ink);
  text-decoration: none;
  padding: 9px 16px;
}
.site-nav__subscribe:hover {
  color: var(--sh-paper);
  background: var(--sh-grey-on-paper);
}

/* Per-section active-tint hook: each template that includes this partial with active="jobs"
   etc. gets a body/header modifier class that sets --sh-nav-active-tint. */
.site-header--active-newsletter { --sh-nav-active-tint: var(--sh-active-newsletter); }
.site-header--active-jobs { --sh-nav-active-tint: var(--sh-active-jobs); }
.site-header--active-resources { --sh-nav-active-tint: var(--sh-active-resources); }
.site-header--active-footnotes { --sh-nav-active-tint: var(--sh-active-footnotes); }

.site-header__menu-toggle {
  display: none;
}

/* Mobile overlay menu (14b) */
.site-header__overlay {
  display: none;
}

@media (max-width: 900px) {
  .site-nav { display: none; }

  .site-header__menu-toggle {
    display: inline-flex;
    align-items: center;
    font-family: var(--sh-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sh-paper);
    background: var(--sh-ink);
    border: none;
    text-decoration: none;
    padding: 11px 14px;
    cursor: pointer;
  }

  .site-header__row {
    padding: 14px 18px;
  }
  .site-header__avatar { width: 44px; }
  .site-header__wordmark { height: 17px; }
  .site-header__tagline { display: none; }

  .site-header__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--sh-paper);
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.18s ease;
  }
  .site-header__overlay[data-open="true"] {
    transform: translateY(0);
  }

  .site-header__overlay-top {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--sh-ink);
  }

  .site-header__overlay-close {
    font-family: var(--sh-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sh-ink);
    background: var(--sh-paper);
    border: 1px solid var(--sh-ink);
    text-decoration: none;
    padding: 10px 14px;
    cursor: pointer;
  }

  .site-header__overlay-nav {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-header__overlay-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 18px;
    border-bottom: 1px solid var(--sh-ink);
    color: var(--sh-ink);
    text-decoration: none;
  }
  .site-header__overlay-link--newsletter { background: var(--sh-tint-newsletter); }
  .site-header__overlay-link--jobs { background: var(--sh-tint-jobs); }
  .site-header__overlay-link--resources { background: var(--sh-tint-resources); }
  .site-header__overlay-link--footnotes { background: var(--sh-tint-footnotes); }
  .site-header__overlay-link--career-suite { background: var(--sh-tint-career-suite); }

  .site-header__overlay-link-label {
    font-family: var(--sh-font-display);
    font-size: 30px;
    line-height: 1;
  }
  .site-header__overlay-link-count {
    font-family: var(--sh-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .site-header__overlay-foot {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .site-header__overlay-subscribe {
    display: block;
    text-align: center;
    background: var(--sh-ink);
    color: var(--sh-paper);
    text-decoration: none;
    padding: 15px;
    font-family: var(--sh-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .site-header__overlay-utility {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    font-family: var(--sh-font-mono);
    font-size: 11px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-header__overlay-utility a { color: var(--sh-ink); }
}

/* ==========================================================================
   Site footer (design 14d — the adopted "medium" option)
   ========================================================================== */

.site-footer {
  background: var(--sh-footer-bg);
  color: var(--sh-paper);
}

.site-footer__columns {
  padding: 36px var(--sh-gutter) 30px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 44px;
}

.site-footer__brand-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site-footer__wordmark {
  height: 22px;
  width: auto;
  display: block;
  align-self: flex-start;
}
.site-footer__tagline {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.15;
  color: var(--sh-footer-tagline);
}
.site-footer__policy {
  font-family: var(--sh-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: #e6e4e2;
  max-width: 34ch;
}
.site-footer__who-pays {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sh-link-on-ink);
}
.site-footer__joke {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--sh-footer-meta);
  max-width: 36ch;
  margin-top: 2px;
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.site-footer__group-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sh-footer-label);
}
.site-footer__group-link {
  font-family: var(--sh-font-display);
  font-size: 20px;
  color: var(--sh-paper);
  text-decoration: none;
}
.site-footer__group-link:hover {
  color: var(--sh-link-on-ink);
}

.site-footer__utility-row {
  border-top: 1px solid var(--sh-footer-rule);
  padding: 18px var(--sh-gutter) 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.site-footer__utility-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.site-footer__utility-links a { color: var(--sh-link-on-ink); }

.site-footer__copyright {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  color: var(--sh-footer-meta);
}

/* Visitor counter — live, backed by Supabase. See assets/js/visitor-counter.js.
   The [hidden] rule needs to be explicit: a bare `hidden` attribute loses to the class's own
   `display: flex`, so without it the empty counter would flash before JS fills it. */
.site-footer__counter {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-end;
}
.site-footer__counter[hidden] {
  display: none;
}
.site-footer__counter-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--sh-footer-meta);
  text-transform: uppercase;
}
.site-footer__counter-digits {
  display: flex;
  gap: 3px;
}
.site-footer__counter-digit {
  width: 24px;
  height: 30px;
  background: var(--sh-paper);
  color: var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .site-footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .site-footer__brand-col {
    grid-column: 1 / -1;
  }
  .site-footer__utility-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__counter {
    align-items: flex-start;
  }
}


/* ==========================================================================
   /newsletter/ (index-newsletter.hbs) and shared section components.
   The section strip, the chip and the funding band are shared: the funding band appears on
   the home page too, and the strip belongs to every section template still to be built.
   ========================================================================== */

/*
  /newsletter/ — frame 11d. See index.hbs for why this page introduces before it archives.
  Shared components that later index-*.hbs templates will reuse (the section strip, the chip,
  the funding band) live here for now and should move into main.css the moment a second
  section template needs them, rather than being copied.
*/

/* --------------------------------------------------------------------------
   Section strip — shared chrome. A full-bleed bordered band under the masthead, tinted per
   section, carrying exactly three things: section identity, the live count, and the one
   action that section wants.
   -------------------------------------------------------------------------- */

.section-strip {
  border-bottom: 1px solid var(--sh-ink);
  padding: 9px var(--sh-gutter);
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--sh-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-strip--newsletter { background: var(--sh-tint-newsletter); }
.section-strip--jobs { background: var(--sh-tint-jobs); }
.section-strip--resources { background: var(--sh-tint-resources); }
.section-strip--footnotes { background: var(--sh-tint-footnotes); }

.section-strip__name { font-weight: 700; }
.section-strip__count { white-space: nowrap; }

/* Separators are generated by the segment that follows them, never typed into the markup.
   That is what makes the zero rule work: a recency count renders as an empty span when its
   number is zero, `:empty` removes it, and its "·" goes with it rather than stranding itself
   against the next segment. `0 NEW THIS WEEK` would announce a quiet stretch across the top
   of the page, which is the same objection that ruled out the fundraiser thermometer.
   Separators are decoration, so they are hidden from assistive tech. */
.section-strip__detail::before,
.section-strip__count::before {
  content: "·";
  padding-right: 9px;
  color: var(--sh-grey-on-tint);
}
.section-strip__count:empty { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.news-hero {
  border-bottom: 1px solid var(--sh-ink);
  position: relative;
  overflow: clip;
  padding: 52px var(--sh-gutter) 46px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: center;
}
.news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-coral) 0.9px, transparent 1px);
  background-size: 6px 6px;
  opacity: 0.4;
  pointer-events: none;
}
.news-hero__pitch,
.news-subscribe { position: relative; }

.news-hero__pitch { display: flex; flex-direction: column; gap: 18px; }

/* Uncensored, deliberately — the archive below runs "assholes" and "goddamn" at full size, so
   starring the marketing copy was the only inconsistent option. */
.news-hero__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.news-hero__sub {
  font-family: var(--sh-font-body);
  font-size: 18px;
  line-height: 1.55;
  max-width: 58ch;
}

.news-subscribe {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.news-subscribe__heading {
  font-family: var(--sh-font-display);
  font-size: 28px;
  line-height: 1.06;
}
.news-subscribe__sub {
  font-family: var(--sh-font-body);
  font-size: 14px;
  line-height: 1.5;
}
.news-subscribe__form { display: flex; flex-direction: column; gap: 12px; }
.news-subscribe__form input {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 12px;
  font-family: var(--sh-font-mono);
  font-size: 14px;
  width: 100%;
}
.news-subscribe__form button {
  border: 1px solid var(--sh-ink);
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 13px;
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
}
.news-subscribe__note {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.55;
}
.news-subscribe__rss {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  color: var(--sh-ink);
  border-top: 1px solid var(--sh-hairline);
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   The three series panels — hairline grid made from a black background showing through gaps.
   -------------------------------------------------------------------------- */

.news-series {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.news-series__panel {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-series__panel--bjb { background: #fcbcd2; }
.news-series__panel--roundup { background: #cfe1ff; }
.news-series__panel--deep { background: #e5cde8; }

.news-series__label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.news-series__headline {
  font-family: var(--sh-font-display);
  font-size: 32px;
  line-height: 1.04;
}
.news-series__body {
  font-family: var(--sh-font-body);
  font-size: 14px;
  line-height: 1.5;
}
/* Steph's own line about the series — pushed to the foot so the three panels' asides align
   regardless of how long the body copy above them runs. */
.news-series__aside {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.35;
  margin-top: auto;
  padding-top: 14px;
}

/* --------------------------------------------------------------------------
   Hand-picked issues
   -------------------------------------------------------------------------- */

.news-picks {
  padding: 34px var(--sh-gutter) 36px;
  border-bottom: 1px solid var(--sh-ink);
}
.news-picks__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 42px;
  margin-bottom: 6px;
}
.news-picks__sub {
  font-family: var(--sh-font-body);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.news-picks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border: 1px solid var(--sh-ink);
}

/* The imageless card IS the treatment for issues, not a fallback — Steph dropped cover art to
   cut the work of publishing one. It fills its height with type. Never a grey box, never
   stock, never a shorter card that breaks the grid. */
.issue-card {
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.issue-card:hover { color: var(--sh-ink); }
.issue-card__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--sh-hairline);
  padding-bottom: 10px;
}
.issue-card--roundup .issue-card__top { border-bottom-color: #cfe1ff; }
.issue-card--bad-job-bingo .issue-card__top { border-bottom-color: #fcbcd2; }
.issue-card--deep-dives .issue-card__top { border-bottom-color: #e5cde8; }

/* Oversized numeral — a sanctioned decorative use of type, so it carries aria-hidden nothing:
   it is the date, which is real content, not decoration. */
.issue-card__numeral {
  font-family: var(--sh-font-display);
  font-size: 44px;
  line-height: 0.82;
}
.issue-card__series {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: right;
  line-height: 1.35;
  text-transform: uppercase;
}
.issue-card__title {
  font-family: var(--sh-font-display);
  font-size: 28px;
  line-height: 1.06;
}
.issue-card__dek {
  font-family: var(--sh-font-body);
  font-size: 14px;
  line-height: 1.45;
}
.issue-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 12px;
  color: var(--sh-grey-on-tint);
}
.issue-card__cta { color: var(--sh-link); }

/* --------------------------------------------------------------------------
   The archive
   -------------------------------------------------------------------------- */

.news-archive {
  padding: 30px var(--sh-gutter) 0;
  border-bottom: 1px solid var(--sh-ink);
}
.news-archive__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 4px;
}
.news-archive__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 42px;
}
.news-archive__range {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
}
.news-archive__sub {
  font-family: var(--sh-font-body);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.news-archive__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* One chip system, everywhere. */
.chip {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  padding: 5px 11px;
}
.chip:hover { color: var(--sh-ink); }
.chip--active { background: var(--sh-ink); color: var(--sh-paper); }
.chip--active:hover { color: var(--sh-paper); }
.chip--roundup { background: #cfe1ff; }
.chip--bjb { background: #fcbcd2; }
.chip--deep { background: #e5cde8; }

.issue-row {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--sh-hairline);
  color: var(--sh-ink);
  text-decoration: none;
  margin: 0 calc(var(--sh-gutter) * -1);
  padding-left: var(--sh-gutter);
  padding-right: var(--sh-gutter);
}
.issue-row:hover { color: var(--sh-ink); background: #fff6ef; }

/* The numeral cell. Shows the real issue number — the sequence in content/issue-numbers.md
   ("Steph's call: number them all"), backfilled as #issue-NNN internal tags 8 Aug 2026,
   resolving 09 turn 17's open question in favour of numbering. The digits are the tag's
   DESCRIPTION (a template cannot substring the name), prefix-revealed like every other
   tag-driven fact; the day/month stack remains as the fallback for any unnumbered post —
   which is exactly a future issue published before its tag is added. */
.issue-row__cell {
  width: 46px;
  flex: none;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  text-align: center;
  font-family: var(--sh-font-mono);
  padding: 3px 0 4px;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  align-self: center;
}
.issue-row--roundup .issue-row__cell { background: #cfe1ff; }
.issue-row--bad-job-bingo .issue-row__cell { background: #fcbcd2; }
.issue-row--deep-dives .issue-row__cell { background: #e5cde8; }

.issue-row__cell-day { font-size: 13px; font-weight: 700; }
.issue-row__cell-month {
  font-size: 10px; /* was 9px — below the 10px floor (CLAUDE.md); raised 8 Aug 2026 */
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.issue-row__cell-no { display: none; }
.issue-row__cell-no[data-slug^="hash-issue-"]:not(:empty) {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5; /* matches the two-line day/month stack's height, so rows stay even */
}
.issue-row__cell:has(.issue-row__cell-no[data-slug^="hash-issue-"]:not(:empty)) .issue-row__cell-day,
.issue-row__cell:has(.issue-row__cell-no[data-slug^="hash-issue-"]:not(:empty)) .issue-row__cell-month {
  display: none;
}

.issue-row__title {
  font-family: var(--sh-font-display);
  font-size: 26px;
  line-height: 1.1;
}
.issue-row__meta {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  margin-left: auto;
  white-space: nowrap;
}

.news-pagination {
  padding: 18px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--sh-font-mono);
  font-size: 11px;
}
.news-pagination__link {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  padding: 6px 13px;
}
/* A spent pagination arrow is still text, not a disabled form control, so it takes the paper
   floor: #6b6b6b at 11px (5.2:1). It was --sh-grey #9c9c9c, which measures 2.7:1. */
.news-pagination__link--off {
  border-color: var(--sh-hairline);
  color: var(--sh-grey-on-paper);
}
.news-pagination__position {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sh-grey-on-tint);
}

/* --------------------------------------------------------------------------
   Quotes wall
   -------------------------------------------------------------------------- */

.news-quotes {
  border-bottom: 1px solid var(--sh-ink);
  position: relative;
  overflow: clip;
  padding: 34px var(--sh-gutter) 38px;
}
.news-quotes::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-coral) 0.9px, transparent 1px);
  background-size: 7px 7px;
  opacity: 0.3;
  pointer-events: none;
}
.news-quotes__head,
.news-quotes__grid { position: relative; }

.news-quotes__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.news-quotes__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 42px;
}
.news-quotes__note {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sh-grey-on-tint);
}
.news-quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.news-quote {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* A reader's words, so Instrument Serif italic — their words, not Steph's. */
.news-quote blockquote {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
}
.news-quote figcaption {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
}

/* --------------------------------------------------------------------------
   Funding band. The footer deliberately does NOT absorb this (14e was the version that did) —
   pages keep their own funding band as a designed moment and the footer stays furniture.
   -------------------------------------------------------------------------- */

.funding-band {
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 34px var(--sh-gutter) 38px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}
.funding-band__pitch { display: flex; flex-direction: column; gap: 12px; }
.funding-band__heading {
  font-family: var(--sh-font-display);
  font-size: 40px;
  line-height: 1.04;
}
.funding-band__body {
  font-family: var(--sh-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: #e6e4e2;
  max-width: 44ch;
}
.funding-band__link {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-link-on-ink);
}

.funding-band__actions { display: flex; flex-direction: column; gap: 9px; }

/* The buttons name actions and are visually flat against each other on purpose: hedging one
   of them ranks the options, which policy forbids. The closing line removes the obligation
   for all three at once. */
.funding-band__button {
  border: 1px solid var(--sh-grey-on-paper);
  color: var(--sh-paper);
  text-decoration: none;
  padding: 13px 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--sh-font-body);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.funding-band__button:hover { color: var(--sh-paper); border-color: var(--sh-paper); }
.funding-band__button--primary {
  background: var(--sh-paper);
  color: var(--sh-ink);
  border-color: var(--sh-paper);
  font-weight: 700;
}
.funding-band__button--primary:hover { color: var(--sh-ink); }

.funding-band__close {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sh-footer-meta);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   390px
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .section-strip,
  .news-hero,
  .news-picks,
  .news-archive,
  .news-quotes,
  .funding-band {
    padding-left: 18px;
    padding-right: 18px;
  }

  .news-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .news-hero__heading { font-size: 40px; }

  .news-series { grid-template-columns: 1fr; }
  .news-series__headline { font-size: 26px; }

  .news-picks__grid { grid-template-columns: 1fr; }
  .news-picks__heading,
  .news-archive__heading,
  .news-quotes__heading { font-size: 30px; }

  .issue-row {
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .issue-row__title { font-size: 21px; flex: 1 1 60%; }
  .issue-row__meta { margin-left: 0; flex-basis: 100%; }

  .news-quotes__grid { grid-template-columns: 1fr; }
  .news-quotes__head { flex-direction: column; gap: 8px; }

  .funding-band {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .funding-band__heading { font-size: 30px; }
}


/* ==========================================================================
   The home page (index.hbs) — frame 13b.
   Type and colour fields only: no photographic or graphic objects except the stamp in the
   funding band. No section strip — "/" is not a section.
   ========================================================================== */

.home-hero {
  padding: 52px var(--sh-gutter) 46px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 56px;
  align-items: center;
}

/* Purple at display size is the sanctioned decorative use — this is a headline, not body copy.
   The hand-placed <br>s are the design: three "I" clauses as anaphora with the payoff on its
   own line. Do NOT add text-wrap: balance, which would rebalance them into prose. */
.home-hero__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--sh-purple-display);
}
.home-hero__body {
  font-family: var(--sh-font-body);
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}

.home-eyebrow {
  padding: 16px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-eyebrow .sh-twinkle { font-size: 22px; line-height: 1; }

/* The four properties. Hairline grid from a black ground showing through 1px gaps. */
.home-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.home-chip {
  color: var(--sh-ink);
  text-decoration: none;
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.home-chip:hover { color: var(--sh-ink); }
.home-chip--newsletter { background: var(--sh-tint-newsletter); }
.home-chip--jobs { background: var(--sh-tint-jobs); }
.home-chip--resources { background: var(--sh-tint-resources); }
.home-chip--footnotes { background: var(--sh-tint-footnotes); }

.home-chip__label {
  font-family: var(--sh-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-chip__count {
  font-family: var(--sh-font-display);
  font-size: 42px;
  line-height: 0.98;
}
.home-chip__body {
  font-family: var(--sh-font-body);
  font-size: 14px;
  line-height: 1.45;
}
/* The CTA is an action, never a count — nothing on a link that has to be counted by hand. */
.home-chip__cta {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 14px;
}

/* Career Suite — leaf green, halftone. Halftone appears exactly twice on this page (here and
   the subscribe card) so it stays an event rather than a texture. */
.home-suite {
  background: var(--sh-career-suite-green);
  border-bottom: 1px solid var(--sh-ink);
  padding: 30px var(--sh-gutter) 32px;
  position: relative;
  overflow: clip;
}
.home-suite::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-ink) 0.6px, transparent 0.7px);
  background-size: 6px 6px;
  opacity: 0.13;
  pointer-events: none;
}
.home-suite__head,
.home-suite__tools { position: relative; }

.home-suite__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 20px;
}
.home-suite__intro { display: flex; align-items: center; gap: 20px; }
.home-suite__avatar { width: 76px; height: auto; flex: none; }
.home-suite__label {
  font-family: var(--sh-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.home-suite__heading {
  font-family: var(--sh-font-display);
  font-size: 40px;
  line-height: 1.04;
}
.home-suite__cta {
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-paper);
  background: var(--sh-ink);
  text-decoration: none;
  padding: 12px 17px;
  white-space: nowrap;
  flex: none;
}
.home-suite__cta:hover { color: var(--sh-paper); }

.home-suite__tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border: 1px solid var(--sh-ink);
}
.home-tool {
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-tool:hover { color: var(--sh-ink); }
.home-tool__kind {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
}
.home-tool__name {
  font-family: var(--sh-font-display);
  font-size: 24px;
  line-height: 1.05;
}
.home-tool__body {
  font-family: var(--sh-font-body);
  font-size: 13px;
  line-height: 1.4;
}

/* Bio */
.home-bio {
  padding: 36px var(--sh-gutter) 38px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 56px;
  align-items: center;
}
.home-bio__eyebrow {
  font-family: var(--sh-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 11px;
}
.home-bio__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  max-width: 20ch;
}
.home-bio__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--sh-font-body);
  font-size: 17px;
  line-height: 1.55;
}
.home-bio__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.home-bio__links a {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-ink);
}

/* The teaser and "Last few issues" share this 1fr 340px grid on purpose — the aligned divider
   is what makes them read as one newsletter zone. Don't "fix" the uniformity. */
.home-newsletter,
.home-latest {
  display: grid;
  grid-template-columns: 1fr 340px;
  border-bottom: 1px solid var(--sh-ink);
}

.home-teaser {
  padding: 30px var(--sh-gutter) 32px;
  border-right: 1px solid var(--sh-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-teaser__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.02;
  margin-bottom: 12px;
}
.home-teaser__row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--sh-hairline);
  font-family: var(--sh-font-body);
  font-size: 16px;
  line-height: 1.45;
}
.home-teaser__rows .home-teaser__row:last-child { border-bottom: 1px solid var(--sh-hairline); }
.home-teaser__series {
  flex: none;
  width: 132px;
  border: 1px solid var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 0;
}
.home-teaser__series--roundup { background: #cfe1ff; }
.home-teaser__series--bjb { background: #fcbcd2; }
.home-teaser__series--deep { background: #e5cde8; }
.home-teaser__cta {
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--sh-ink);
  padding-bottom: 2px;
  align-self: flex-start;
  margin-top: 22px;
}

.home-subscribe {
  background: var(--sh-tint-newsletter);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: center;
  position: relative;
  overflow: clip;
}
.home-subscribe::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-ink) 0.6px, transparent 0.7px);
  background-size: 5px 5px;
  opacity: 0.16;
  pointer-events: none;
}
.home-subscribe > * { position: relative; }
.home-subscribe__heading {
  font-family: var(--sh-font-display);
  font-size: 30px;
  line-height: 1.06;
}
.home-subscribe__sub {
  font-family: var(--sh-font-body);
  font-size: 14px;
  line-height: 1.5;
}
.home-subscribe__form { display: flex; flex-direction: column; gap: 8px; }
.home-subscribe__form input {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 11px 12px;
  font-family: var(--sh-font-mono);
  font-size: 14px;
  width: 100%;
}
.home-subscribe__form button {
  border: 1px solid var(--sh-ink);
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 12px;
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
}
.home-subscribe__note {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.55;
}
/* RSS is offered as an equal alternative to email, not a consolation prize. */
.home-subscribe__rss {
  border-top: 1px solid var(--sh-ink);
  padding-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.home-subscribe__rss-heading {
  font-family: var(--sh-font-display);
  font-size: 19px;
  line-height: 1.15;
}
/* On a tint, links take ink + underline. */
.home-subscribe__rss a {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--sh-ink);
}

.home-latest__main { border-right: 1px solid var(--sh-ink); }
.home-latest__head {
  padding: 16px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.home-latest__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sh-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.home-latest__eyebrow .sh-twinkle { font-size: 22px; line-height: 1; }
.home-latest__all {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  color: var(--sh-ink);
}

.home-issue {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 16px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-hairline);
  color: var(--sh-ink);
  text-decoration: none;
}
.home-issue:last-child { border-bottom: none; }
.home-issue:hover { color: var(--sh-ink); background: #fff6ef; }

.home-issue__cell {
  width: 74px;
  flex: none;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 7px 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-issue--roundup .home-issue__cell { background: #cfe1ff; }
.home-issue--bad-job-bingo .home-issue__cell { background: #fcbcd2; }
.home-issue--deep-dives .home-issue__cell { background: #e5cde8; }
.home-issue__cell-day {
  font-family: var(--sh-font-display);
  font-size: 26px;
  line-height: 0.85;
}
.home-issue__cell-series {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.home-issue__title {
  font-family: var(--sh-font-display);
  font-size: 26px;
  line-height: 1.08;
}
.home-issue__meta {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  margin-left: auto;
  white-space: nowrap;
}

.home-more {
  padding: 22px 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-more__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sh-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-more__eyebrow .sh-twinkle { font-size: 20px; line-height: 1; }
.home-more__links { display: flex; flex-direction: column; }
.home-more__links a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--sh-hairline);
  color: var(--sh-ink);
  text-decoration: none;
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.1;
}
.home-more__links a:last-child { border-bottom: 1px solid var(--sh-hairline); }
.home-more__links a span:last-child {
  font-family: var(--sh-font-mono);
  font-size: 15px;
  color: var(--sh-purple-display);
}
/* Steph's aside — coral bar, the marginalia device. */
.home-more__note {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.35;
  padding-left: 12px;
  border-left: 2px solid var(--sh-coral);
  margin-top: 4px;
}

/* The press stamp — one editorial aside per page maximum, and this page's is here. */
.funding-stamp {
  transform: rotate(-6deg);
  flex: none;
  border: 3px double var(--sh-paper);
  background: var(--sh-coral);
  padding: 5px;
  align-self: center;
}
.funding-stamp__inner {
  border: 1px solid var(--sh-ink);
  padding: 12px 16px 11px;
  text-align: center;
  font-family: var(--sh-font-mono);
  color: var(--sh-ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.funding-stamp__stars {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
}
.funding-stamp__text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.34;
  text-transform: uppercase;
}

/* The home page's funding band carries the stamp beside the copy. */
.home .funding-band__pitch {
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
}
.home .funding-band__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 900px) {
  .home-hero,
  .home-bio {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .home-hero__heading { font-size: 38px; }
  .home-bio__heading { font-size: 32px; }

  .home-eyebrow,
  .home-suite,
  .home-teaser,
  .home-latest__head,
  .home-issue {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-chips,
  .home-suite__tools { grid-template-columns: 1fr; }

  .home-suite__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .home-suite__heading { font-size: 28px; white-space: normal; }

  .home-newsletter,
  .home-latest { grid-template-columns: 1fr; }
  .home-teaser,
  .home-latest__main { border-right: none; border-bottom: 1px solid var(--sh-ink); }
  .home-teaser__heading { font-size: 30px; }
  .home-teaser__row { flex-direction: column; gap: 6px; }
  .home-teaser__series { width: auto; align-self: flex-start; padding: 3px 10px; }

  .home-issue { flex-wrap: wrap; gap: 12px 16px; }
  .home-issue__title { font-size: 21px; flex: 1 1 60%; }
  .home-issue__meta { margin-left: 0; flex-basis: 100%; }

  .home .funding-band__pitch { flex-direction: column; }
}


/* ==========================================================================
   /t/{slug}/ — the shared tag archive (tag.hbs), plus the row and card vocabulary the
   section indexes inherit unchanged: the job row, the resource card, the chip system.
   Record: design/05a-tag-template-decisions.md.
   ========================================================================== */

/* Chrome accent by tag family. Ghost puts `tag-{slug}` on <body>, so the slug-prefix branching
   the record describes is done here with attribute-prefix selectors rather than in Handlebars,
   which has no prefix match. Order matters: first match in the record wins, so the more
   specific families are declared after the general ones. */
.tag-header { --tag-accent: var(--sh-coral); }
body[class*="tag-job-"] .tag-header { --tag-accent: var(--sh-blue); }
body[class*="tag-res-"] .tag-header { --tag-accent: var(--sh-peach); }
body[class*="tag-bjb-"] .tag-header { --tag-accent: var(--sh-hot-pink); }
body[class*="tag-job-status-"] .tag-header { --tag-accent: var(--sh-grey); }

.tag-header {
  padding: 44px var(--sh-gutter) 40px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.tag-header--compressed {
  grid-template-columns: 1fr auto;
  padding-top: 30px;
  padding-bottom: 28px;
  align-items: baseline;
}

.tag-header__eyebrow {
  font-family: var(--sh-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
/* Purple at display size is the sanctioned decorative use of accent colour. */
.tag-header__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 82px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--sh-purple-display);
  text-wrap: pretty;
}
.tag-header--compressed .tag-header__title { font-size: 48px; }
.tag-header__description {
  font-family: var(--sh-font-body);
  font-size: 17px;
  line-height: 1.55;
}
.tag-header__count {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
  margin-top: 14px;
}
.tag-header--compressed .tag-header__count { margin-top: 0; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Chips. Colour marks the AXIS, not the value — per-value colour would need 14+ hues and the
   palette has seven, with green and grey already committed.
   One chip system, used everywhere on the site.
   -------------------------------------------------------------------------- */

.tag-rows .chip,
.job-row__chips a,
.resource-card__chips a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.4;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Rating chips are TINTED rather than full strength, because the icon sits bare on the chip
   with no containing box and needs a pale ground to read. */
.chip--rating img {
  width: 15px;
  height: 15px;
  display: block;
  flex: none;
}
/* The warning glyph is too light against a pale tint without this — it is carried inline in
   every design frame for the same reason. */
.chip__icon--outlined {
  filter: drop-shadow(0 0 .6px #030203) drop-shadow(0 0 .6px #030203);
}
.chip--rating-green { background: #c9ead6; }
.chip--rating-fine { background: #fdeadb; }
.chip--rating-tread { background: #f7cac3; }
.chip--rating-bingo { background: #fcbcd2; }
.chip--rating-dont { background: #d6d4d6; }

/* Live status is full strength — it is the one thing on the row that must not read as a
   category. */
.chip--open { background: var(--sh-blue); }
.chip--closed { background: var(--sh-grey); }

/* --------------------------------------------------------------------------
   Job row (2a / 2b)
   -------------------------------------------------------------------------- */

/* The row is a div carrying a stretched title link, because it contains tag links and an
   <a> cannot nest inside another <a>. position: relative scopes the stretch. */
.job-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 150px;
  gap: 20px;
  align-items: start;
  padding: 18px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-hairline);
  color: var(--sh-ink);
}
.job-row:hover { background: #fff6ef; }

.job-row__title {
  color: var(--sh-ink);
  text-decoration: none;
}
/* Stretches the title's hit area over the whole row so the row still behaves like one target. */
.job-row__title::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* The chips sit above the stretched link so they stay independently clickable. */
.job-row__chips { position: relative; z-index: 1; }

/* Closed listings stay inline chronologically with a grey spine. Not bucketed — the archive
   is the point, and 408 of 447 listings are closed. */
.job-row--closed {
  border-left: 3px solid var(--sh-grey);
  padding-left: calc(var(--sh-gutter) - 3px);
}

.job-row__mark {
  width: 56px;
  height: 56px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  flex: none;
}
.job-row__mark img { width: 100%; height: 100%; object-fit: contain; }

/* The monogram fallback. Tints assigned by assets/js/monogram.js from the company name. */
.job-row__mark--monogram {
  font-family: var(--sh-font-display);
  font-size: 26px;
  line-height: 1;
}
.job-row__mark--tint-0 { background: #cfe1ff; }
.job-row__mark--tint-1 { background: #fbe6d4; }
.job-row__mark--tint-2 { background: #e5cde8; }
.job-row__mark--tint-3 { background: #c9ead6; }

.job-row__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.job-row__title-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.job-row__title {
  font-family: var(--sh-font-display);
  font-size: 27px;
  line-height: 1.04;
}
.job-row__commentary {
  font-family: var(--sh-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--sh-grey-on-tint);
}
.job-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* All three facts in Instrument Serif so they read as one set against the mono chips. Never
   mono: an early mock set location and dates in mono and it made the row feel like a
   spreadsheet rather than a broadsheet listing. */
.job-row__facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.14;
}
.job-row__date { color: var(--sh-grey-on-paper); }

/* --------------------------------------------------------------------------
   Resource card (2c)
   -------------------------------------------------------------------------- */

.resource-card {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: start;
  padding: 20px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-hairline);
  color: var(--sh-ink);
}
.resource-card:hover { background: #fff6ef; }
/* Drops the art column rather than leaving a 120px hole when an entry has no cover. */
.resource-card--no-art { grid-template-columns: 1fr; }

.resource-card__title {
  color: var(--sh-ink);
  text-decoration: none;
}
.resource-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
}
.resource-card__chips { position: relative; z-index: 1; }
.resource-card__art {
  border: 1px solid var(--sh-ink);
  overflow: clip;
  display: block;
}
.resource-card__art img { width: 100%; height: auto; display: block; }
.resource-card__main {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.resource-card__title {
  font-family: var(--sh-font-display);
  font-size: 27px;
  line-height: 1.04;
}
/* Neutral, and NOT italic. Most descriptions are the source's own words and they run long —
   italics would be a punishing read and a promise every future entry has to honour (chat 10). */
.resource-card__description {
  font-family: var(--sh-font-body);
  font-size: 15px;
  line-height: 1.55;
}
.resource-card__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.resource-card__more {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-link);
}

/* --------------------------------------------------------------------------
   Portfolio card — a clip file of published articles, not case studies (03a).
   -------------------------------------------------------------------------- */

.portfolio-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-hairline);
  color: var(--sh-ink);
  text-decoration: none;
}
.portfolio-card:hover { color: var(--sh-ink); background: #fff6ef; }
.portfolio-card__title {
  font-family: var(--sh-font-display);
  font-size: 26px;
  line-height: 1.06;
}
.portfolio-card__dek {
  font-family: var(--sh-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--sh-grey-on-tint);
}
.portfolio-card__meta {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}

/* --------------------------------------------------------------------------
   Empty tag
   -------------------------------------------------------------------------- */

.tag-empty {
  padding: 48px var(--sh-gutter) 56px;
  border-bottom: 1px solid var(--sh-ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 62ch;
}
.tag-empty__heading {
  font-family: var(--sh-font-display);
  font-size: 34px;
  line-height: 1.06;
}
.tag-empty__body {
  font-family: var(--sh-font-body);
  font-size: 16px;
  line-height: 1.55;
}
.tag-empty__exits {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 6px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .tag-header,
  .tag-header--compressed {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 18px 24px;
  }
  .tag-header__title { font-size: 40px; }
  .tag-header--compressed .tag-header__title { font-size: 32px; }

  /* Rows restack: title first, then meta, then chips wrapped. The desktop grid collapses
     entirely — the job board in particular gets read on a phone by people who are at work. */
  .job-row {
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 16px 18px;
  }
  .job-row--closed { padding-left: 15px; }
  .job-row__mark { width: 44px; height: 44px; }
  .job-row__title { font-size: 21px; }
  .job-row__facts {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 14px;
    text-align: left;
    font-size: 17px;
  }

  .resource-card {
    grid-template-columns: 84px 1fr;
    gap: 14px;
    padding: 16px 18px;
  }
  .resource-card__title { font-size: 21px; }

  .portfolio-card { padding: 16px 18px; }
  .tag-empty { padding: 32px 18px 36px; }
}


/* ==========================================================================
   page.hbs and the error pages
   ========================================================================== */

.page {
  padding: 44px var(--sh-gutter) 56px;
}
.page-header {
  max-width: 680px;
  margin-bottom: 28px;
}
.page-header__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 62px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 20ch;
  text-wrap: pretty;
}
.page-header__dek {
  font-family: var(--sh-font-body);
  font-size: 20px;
  line-height: 1.5;
  color: var(--sh-grey-on-tint);
  margin-top: 16px;
}
.page-feature {
  max-width: 680px;
  margin-bottom: 28px;
}
.page-feature figcaption {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  color: var(--sh-grey-on-paper);
  margin-top: 8px;
}

/* Error pages */

.error-header {
  padding: 52px var(--sh-gutter) 40px;
  border-bottom: 1px solid var(--sh-ink);
  max-width: 66ch;
}
.error-header__code {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.error-header__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 62px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--sh-purple-display);
}
.error-header__body {
  font-family: var(--sh-font-body);
  font-size: 18px;
  line-height: 1.55;
  margin-top: 16px;
}
.error-header__detail {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  color: var(--sh-grey-on-paper);
  margin-top: 14px;
}

.error-moves {
  padding: 30px var(--sh-gutter) 32px;
  border-bottom: 1px solid var(--sh-ink);
}
.error-moves__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 34px;
  margin-bottom: 14px;
}
.error-moves__list { list-style: none; padding: 0; }
.error-move {
  display: grid;
  grid-template-columns: 220px 260px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--sh-hairline);
}
.error-move__old {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  color: var(--sh-grey-on-paper);
  word-break: break-all;
}
.error-move__new {
  font-family: var(--sh-font-display);
  font-size: 24px;
  line-height: 1.1;
}
/* A reader who followed a dead link is owed the reason, not just a destination. */
.error-move__why {
  font-family: var(--sh-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--sh-grey-on-tint);
}

.error-doors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.error-door {
  color: var(--sh-ink);
  text-decoration: none;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.error-door:hover { color: var(--sh-ink); }
.error-door--newsletter { background: var(--sh-tint-newsletter); }
.error-door--jobs { background: var(--sh-tint-jobs); }
.error-door--resources { background: var(--sh-tint-resources); }
.error-door--footnotes { background: var(--sh-tint-footnotes); }
.error-door__chip {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.error-door__name {
  font-family: var(--sh-font-display);
  font-size: 30px;
  line-height: 1.04;
}
.error-door__body {
  font-family: var(--sh-font-body);
  font-size: 14px;
  line-height: 1.45;
}

.error-report {
  padding: 26px var(--sh-gutter) 40px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .page { padding: 26px 18px 36px; }
  .page-header__title { font-size: 36px; }

  .error-header,
  .error-moves,
  .error-report { padding-left: 18px; padding-right: 18px; }
  .error-header__heading { font-size: 36px; }
  .error-move { grid-template-columns: 1fr; gap: 4px; }
  .error-doors { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Section index pages — /jobs/ (index-jobs.hbs), /resources/ (index-resources.hbs),
   /portfolio/ (index-portfolio.hbs), /footnotes/ (index-footnotes.hbs).
   Records: design/01a, 02a, 03a, 04a. The job row, resource-card and chip vocabulary above
   is inherited; what follows is the index-only furniture: the house page header, the
   rating ramp, the filter shelf, the library card grid, the specimen and the reading list.
   ========================================================================== */

.section-strip--portfolio { background: var(--sh-tint-portfolio); }

/* Strip action: the one action the section wants, underlined like the canvas. */
.section-strip__action {
  margin-left: auto;
  white-space: nowrap;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   House page header (01a §3): near-white ground, 82px Instrument Serif tagline in the
   display purple, body copy in a second column, vertically centred. The marginalia note
   takes a 2px rule in the section's accent.
   -------------------------------------------------------------------------- */

.board-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 40px var(--sh-gutter) 38px;
  border-bottom: 2px solid var(--sh-ink);
}
.board-header__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 82px;
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--sh-purple-display);
  text-wrap: pretty;
}
.board-header__copy p { font-size: 17px; line-height: 1.55; }
.board-header__note {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--sh-blue);
}
.board-header__note--coral { border-left-color: var(--sh-coral); }
.board-header__note--purple { border-left-color: var(--sh-purple-display); }
.board-header__note--pink { border-left-color: var(--sh-hot-pink); }

.board-header--footnotes .board-header__title-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.fn-free-badge {
  border: 1px solid var(--sh-ink);
  background: var(--sh-peach);
  padding: 5px 11px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   The rating ramp (Jobs 5a): five cells in the verdict tints, icon + serif name +
   mono count + one-line description. On a rating channel the current cell gets the
   inset ink keyline. Suppressed entirely when nothing is open.
   -------------------------------------------------------------------------- */

.rating-ramp {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--sh-ink);
}
.rating-ramp__cell {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  color: var(--sh-ink);
  text-decoration: none;
  border-right: 1px solid var(--sh-ink);
}
.rating-ramp__cell:last-child { border-right: 0; }
.rating-ramp__cell:hover { color: var(--sh-ink); }
.rating-ramp__cell[aria-current="page"] { box-shadow: inset 0 0 0 3px var(--sh-ink); }
.rating-ramp__cell--green { background: #c9ead6; }
.rating-ramp__cell--fine { background: #fdeadb; }
.rating-ramp__cell--tread { background: #f7cac3; }
.rating-ramp__cell--bingo { background: #fcbcd2; }
.rating-ramp__cell--dont { background: #d6d4d6; }
.rating-ramp__cell > img { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.rating-ramp__body { display: block; flex: 1; min-width: 0; }
.rating-ramp__name-line { display: flex; align-items: center; gap: 14px; }
.rating-ramp__name {
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.05;
  white-space: nowrap;
}
.rating-ramp__count {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  margin-left: auto;
}
.rating-ramp__desc {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 5px;
  color: var(--sh-grey-on-tint);
}

/* The board with nothing open (18 §H frame 1a). */
.board-dry {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 44px;
  padding: 36px var(--sh-gutter) 40px;
  border-bottom: 1px solid var(--sh-ink);
}
.board-dry__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.02;
  margin-bottom: 14px;
}
.board-dry__copy p { font-size: 16px; line-height: 1.55; max-width: 58ch; margin-bottom: 10px; }
.board-dry__stat {
  border: 1px solid var(--sh-ink);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
}
.board-dry__stat-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.board-dry__stat-count {
  font-family: var(--sh-font-display);
  font-size: 64px;
  line-height: 1;
}
.board-dry__stat-note { font-family: var(--sh-font-mono); font-size: 11px; line-height: 1.6; color: var(--sh-grey-on-tint); }
.board-dry__prompt {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.55;
  border-top: 1px solid var(--sh-hairline);
  padding-top: 16px;
}

/* --------------------------------------------------------------------------
   Filter shelf — shared by /jobs/ and /resources/ (frames 6a → 1b, 02a §4).
   One bar: black FILTERS button, mono search, sort. The whole section carries `hidden`
   in the markup and is revealed by filter-shelf.js, so a no-JS page never shows dead
   controls. Under 900px the open panel becomes the full-height filter sheet (1e / 7b).
   -------------------------------------------------------------------------- */

.shelf[hidden] { display: none; }
.shelf { border-bottom: 1px solid var(--sh-ink); }

.shelf__bar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--sh-ink);
}
.shelf__filters-toggle {
  border: 0;
  border-right: 1px solid var(--sh-ink);
  background: var(--sh-ink);
  color: var(--sh-paper);
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 22px;
  cursor: pointer;
}
.shelf__search {
  flex: 1;
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 12px;
  padding: 15px 16px;
}
.shelf__search:focus-visible { outline: 3px solid var(--sh-blue); outline-offset: -3px; }
.shelf__sort {
  border: 0;
  background: var(--sh-paper);
  color: var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 12px;
  padding: 15px 20px;
  cursor: pointer;
  white-space: nowrap;
}

/* The panel. Desktop: drops below the bar. Mobile: becomes the sheet. */
.shelf__panel { border-bottom: 1px solid var(--sh-ink); background: var(--sh-paper); }
.shelf__panel-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px var(--sh-gutter) 12px;
  border-bottom: 1px solid var(--sh-ink);
}
.shelf__panel-title { font-family: var(--sh-font-display); font-size: 28px; line-height: 1; }
.shelf__panel-hint { font-family: var(--sh-font-mono); font-size: 10px; color: var(--sh-grey-on-paper); }
.shelf__panel-close {
  margin-left: auto;
  border: 0;
  background: none;
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.shelf__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 32px;
  padding: 8px var(--sh-gutter) 14px;
}
.shelf__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.shelf__group-head { display: block; width: 100%; padding: 0; }
.shelf__group-head button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid var(--sh-hairline);
  background: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.shelf__group-meta { font-family: var(--sh-font-mono); font-size: 12px; font-weight: 400; color: var(--sh-grey-on-paper); text-transform: none; }
.shelf__group-body { border-bottom: 1px solid var(--sh-hairline); }
.shelf__group--tall .shelf__group-body { max-height: 320px; overflow-y: auto; }
.shelf__option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 2px;
  border-bottom: 1px solid #e6e4e2;
  cursor: pointer;
}
.shelf__option:last-of-type { border-bottom: 0; }
/* Selected value: pale wash + 3px blue left edge (01a §8); Footnotes swaps the accent. */
.shelf__option:has(input:checked) { background: #fff6ef; box-shadow: inset 3px 0 0 var(--sh-blue); }
.shelf__option input {
  width: 12px;
  height: 12px;
  flex: none;
  accent-color: var(--sh-ink);
}
.shelf__option .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  padding: 2px 6px;
}
.shelf__option .chip img { width: 14px; height: 14px; }
.shelf__option-count { font-family: var(--sh-font-mono); font-size: 10px; color: var(--sh-grey-on-paper); margin-left: auto; }
.shelf__group-note {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--sh-grey-on-tint);
  background: #f2f0ee;
  padding: 9px 12px;
  margin: 8px 0;
}
/* Collection sub-headings written in by the script (By Discipline / Topic / Theme). */
.shelf__subhead {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
  padding: 11px 2px 3px;
}

.shelf__panel-actions {
  display: flex;
  gap: 12px;
  padding: 14px var(--sh-gutter) 18px;
}
.shelf__clear,
.shelf__apply {
  border: 1px solid var(--sh-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 0;
  cursor: pointer;
}
.shelf__clear { flex: 1; background: var(--sh-paper); color: var(--sh-ink); }
.shelf__apply { flex: 2; background: var(--sh-ink); color: var(--sh-paper); }

/* Active pills. Tints are painted by the script from the value's axis. */
.shelf__pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-ink);
  background: #fff6ef;
}
.shelf__pills-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 4px;
}
.shelf__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  padding: 3px 7px;
  cursor: pointer;
}
.shelf__pill strong { font-weight: 700; }
.shelf__pills-clear {
  border: 0;
  background: none;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-link);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shelf__result-line {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  color: var(--sh-grey-on-tint);
  padding: 9px var(--sh-gutter);
}

/* Over-filtered empty state (1b): a bordered panel, never a bare nothing. */
.shelf__empty { margin: 20px var(--sh-gutter) 28px; border: 1px solid var(--sh-ink); }
.shelf__empty-band {
  background: var(--sh-grey);
  padding: 13px 22px;
  border-bottom: 1px solid var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shelf__empty-body { padding: 24px 22px 26px; }
.shelf__empty-heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 34px; line-height: 1.04; }
.shelf__empty-copy { font-size: 15px; line-height: 1.58; max-width: 58ch; margin-top: 12px; }
.shelf__empty-exits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.shelf__empty-exits button {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 11px;
  padding: 7px 10px;
  cursor: pointer;
}
.shelf__empty-exits button[data-clear-all] { background: var(--sh-ink); color: var(--sh-paper); }

/* --------------------------------------------------------------------------
   The board row — job-row extended for /jobs/ (frame 1a): per-row labelled facts on
   desktop, the 1d card on mobile. No column header row; each row labels its own values.
   -------------------------------------------------------------------------- */

.job-row--board {
  grid-template-columns: 40px minmax(0, 1fr) 132px 148px 112px;
  align-items: start;
  padding: 22px var(--sh-gutter);
}
.job-row--board .job-row__mark { width: 40px; height: 40px; }
.job-row--board .job-row__title { font-size: 27px; }

/* Desktop hides the mobile-card furniture. */
.job-row__band,
.job-row__foot,
.job-row--board .job-row__company { display: none; }

.job-row__fact { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.job-row__fact-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}
.job-row__fact-value,
.job-row__fact-arrangement {
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.14;
}
.job-row__fact--posted { text-align: right; }
.job-row--closed .job-row__fact-value,
.job-row--closed .job-row__fact-arrangement { color: var(--sh-grey-on-tint); }

/* Tag-sourced fact values: every tag is rendered, CSS reveals the family the cell is
   about. Handlebars has no prefix match — this is the same substitution tag.hbs makes
   for chrome accents, applied to row data. */
.fact-tag { display: none; }
.job-row__fact-value--salary .fact-tag[data-slug^="job-salary-"] { display: block; }
.job-row__fact-value--location { font-size: 18px; color: var(--sh-grey-on-paper); }
.job-row__fact-value--location .fact-tag[data-slug^="job-location-"] { display: inline; }
.job-row__fact-value--location .fact-tag[data-slug^="job-location-"] ~ .fact-tag[data-slug^="job-location-"]::before { content: " · "; }
/* "See listing" appears only when no salary band tag exists on the row. Browsers without
   :has() show a blank cell instead — quieter than a wrong value. */
.fact-fallback { display: none; }
.job-row__fact-value--salary:not(:has([data-slug^="job-salary-"])) .fact-fallback { display: block; }

/* --------------------------------------------------------------------------
   Chip axis tints. Colour marks the AXIS, not the value (00 §2); {{tags}} outputs plain
   links, so the axis is read off the /t/{slug}/ href prefix. Job and resource tints per
   01a §8 / 02a; portfolio per 03a §2 (publication only). The rating and status tags render
   as designed chips in the markup itself, so their raw {{tags}} duplicates are dropped.
   -------------------------------------------------------------------------- */

.job-row__chips a[href*="/t/bjb-"],
.job-row__chips a[href*="/t/job-status-"],
.resource-card__chips a[href*="/t/bjb-"],
.library-card__chips a[href*="/t/bjb-"] { display: none; }

.job-row__chips a[href*="/t/job-discipline-"],
.resource-card__chips a[href*="/t/job-discipline-"] { background: var(--sh-tint-jobs); }
.job-row__chips a[href*="/t/job-level-"],
.resource-card__chips a[href*="/t/job-level-"] { background: #e5cde8; }
.job-row__chips a[href*="/t/job-type-"],
.job-row__chips a[href*="/t/job-arrangement-"],
.resource-card__chips a[href*="/t/job-type-"],
.resource-card__chips a[href*="/t/job-arrangement-"] { background: #e6e4e2; }
.job-row__chips a[href*="/t/job-salary-"],
.resource-card__chips a[href*="/t/job-salary-"] { background: var(--sh-tint-resources); }
/* The no-comp family is the loudest chip on the board on purpose — full-strength pink,
   because missing pay is the thing a job seeker most often can't find out any other way. */
.job-row__chips a[href*="/t/job-salary-no-comp"],
.job-row__chips a[href*="/t/job-salary-competitive"],
.job-row__chips a[href*="/t/job-salary-i-dont"] { background: var(--sh-hot-pink); }

.library-card__chips a,
.respost__chips a {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.4;
  padding: 3px 8px;
  white-space: nowrap;
}
.library-card__chips a[href*="/t/res-directory-"],
.resource-card__chips a[href*="/t/res-directory-"],
.respost__chips a[href*="/t/res-directory-"] { background: var(--sh-tint-resources); }
.library-card__chips a[href*="/t/res-collection-"],
.resource-card__chips a[href*="/t/res-collection-"],
.respost__chips a[href*="/t/res-collection-"] { background: #f5d9f1; }
.library-card__chips a[href*="/t/res-publisher-"],
.resource-card__chips a[href*="/t/res-publisher-"],
.respost__chips a[href*="/t/res-publisher-"] { background: #f7cec7; }

.specimen__chips a,
.portpost__chips a,
.chip--plain {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  white-space: nowrap;
}
.specimen__chips a[href*="/t/port-pub-"],
.portpost__chips a[href*="/t/port-pub-"] { background: var(--sh-tint-portfolio); }
.specimen__chips a[href*="/t/port-format-"],
.portpost__chips a[href*="/t/port-format-"] { background: #e6e4e2; }

/* --------------------------------------------------------------------------
   Library cards — /resources/ (frame 1a): kind band with coral corner, cover thumb,
   serif title, neutral description, chips, ADDED/MORE foot.
   -------------------------------------------------------------------------- */

.library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 24px var(--sh-gutter) 28px;
}
.library-card {
  position: relative;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  display: flex;
  flex-direction: column;
}
.library-card:hover { background: #fff6ef; }
.library-card__band {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--sh-ink);
}
.library-card__kind {
  flex: 1;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 11px;
}
.library-card__kind .fact-tag[data-slug^="res-directory-"] { display: inline; }
.library-card__kind .fact-tag[data-slug^="res-directory-"] ~ .fact-tag[data-slug^="res-directory-"]::before { content: " · "; }
.library-card__corner { width: 26px; background: var(--sh-coral); border-left: 1px solid var(--sh-ink); }
.library-card__head {
  padding: 16px 14px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.library-card__art {
  width: 52px;
  height: 52px;
  flex: none;
  border: 1px solid var(--sh-ink);
  overflow: clip;
}
.library-card__art img { width: 100%; height: 100%; object-fit: cover; }
.library-card__title {
  font-family: var(--sh-font-display);
  font-size: 26px;
  line-height: 1.04;
  color: var(--sh-ink);
  text-decoration: none;
}
.library-card__title::after { content: ""; position: absolute; inset: 0; }
.library-card__when {
  margin: 12px 14px 0;
  border: 1px solid var(--sh-ink);
  background: var(--sh-tint-resources);
  padding: 7px 10px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.library-card__desc { font-size: 14px; line-height: 1.55; margin: 12px 14px 0; }
.library-card__chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 14px 0;
}
.library-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding: 16px 14px 12px;
}
.library-card__added {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
}
.library-card__more {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-link);
}

/* Directory browse row (frame 1a; 7d for the mobile disclosure). */
.dir-browse { border-bottom: 2px solid var(--sh-ink); }
.dir-browse__bar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--sh-ink);
}
.dir-browse__label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-right: 1px solid var(--sh-ink);
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.dir-browse__all {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 12px 14px;
}
.dir-browse__disclosure { display: none; }
.dir-browse__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.dir-browse__cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--sh-ink);
  text-decoration: none;
  background: var(--sh-tint-resources);
  padding: 11px 14px;
  border-right: 1px solid var(--sh-ink);
}
.dir-browse__cell:nth-child(5n) { border-right: 0; }
.dir-browse__cell:nth-child(-n+5) { border-bottom: 1px solid var(--sh-ink); }
.dir-browse__cell:hover { color: var(--sh-ink); background: #fff6ef; }
.dir-browse__name { font-family: var(--sh-font-display); font-size: 19px; }
.dir-browse__count { font-family: var(--sh-font-mono); font-size: 10px; margin-left: auto; color: var(--sh-grey-on-tint); }

/* What's new — the changelog's home (02a §7). */
.whats-new { padding: 30px var(--sh-gutter) 34px; border-bottom: 1px solid var(--sh-ink); }
.whats-new__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 2px solid var(--sh-ink);
  padding-bottom: 10px;
}
.whats-new__twinkle { font-size: 26px; line-height: 1; }
.whats-new__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.015em;
}
.whats-new__all {
  margin-left: auto;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-underline-offset: 3px;
}
.whats-new__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--sh-ink);
  border-top: 0;
  margin-top: 18px;
}
.whats-new__entry {
  padding: 16px 18px;
  border-right: 1px solid var(--sh-ink);
  color: var(--sh-ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.whats-new__entry:last-child { border-right: 0; }
.whats-new__entry:hover { color: var(--sh-ink); background: #fff6ef; }
.whats-new__meta {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
}
.whats-new__title { font-family: var(--sh-font-display); font-size: 24px; line-height: 1.06; }
.whats-new__dek { font-size: 14px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Section CTA band — the hiring CTA on /jobs/, the suggest CTA on /resources/, the
   availability band on /portfolio/. Peach halftone; the dot grid is decoration.
   -------------------------------------------------------------------------- */

.hiring-band {
  position: relative;
  overflow: hidden;
  background: var(--sh-peach);
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 44px;
  align-items: center;
  padding: 34px var(--sh-gutter);
}
.hiring-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-ink) 0.6px, transparent 0.7px);
  background-size: 6px 6px;
  opacity: 0.14;
  pointer-events: none;
}
.hiring-band__copy,
.hiring-band__button { position: relative; }
.hiring-band__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.hiring-band__heading .sh-twinkle { font-size: 26px; vertical-align: 0.18em; }
.hiring-band__copy p { font-size: 15px; line-height: 1.58; max-width: 56ch; margin-top: 14px; }
.hiring-band__button {
  display: block;
  background: var(--sh-ink);
  color: var(--sh-paper);
  text-align: center;
  padding: 16px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
}
.hiring-band__button:hover { color: var(--sh-paper); }

/* Paging row shared by the boards. */
.board-paging {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 var(--sh-gutter);
}
.board-paging:empty { display: none; }
.board-paging .news-pagination { border-bottom: 0; flex: 1; }
.board-paging__perpage {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  padding: 18px 0;
}
.board-paging__perpage button {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 11px;
  padding: 4px 9px;
  cursor: pointer;
}
.board-paging__perpage button[aria-pressed="true"] { background: var(--sh-ink); color: var(--sh-paper); }

/* --------------------------------------------------------------------------
   The Specimen — /portfolio/ (03a §3, frames 1b / 5a). Panels alternate pale purple
   and peach. The pulled paragraph is their published work: serif, 27px, upright.
   -------------------------------------------------------------------------- */

.specimen {
  display: grid;
  grid-template-columns: 330px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--sh-ink);
}
.specimen__panel {
  border-right: 1px solid var(--sh-ink);
  background: var(--sh-tint-portfolio);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.specimen:nth-of-type(even) .specimen__panel { background: var(--sh-tint-resources); }
.specimen__pub {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.specimen__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.02;
  margin-top: 10px;
}
.specimen__panel-foot { display: flex; flex-direction: column; gap: 10px; }
.specimen__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.specimen__read {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}
.specimen__quote-col {
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.specimen__quote {
  font-family: var(--sh-font-display);
  font-size: 27px;
  line-height: 1.24;
  max-width: 44ch;
}
.specimen__attrib {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}

/* Everything else — the clip-file list. */
.clip-file { padding: 26px var(--sh-gutter) 30px; }
.clip-file__head { display: flex; align-items: baseline; gap: 12px; }
.clip-file__twinkle { font-size: 22px; line-height: 1; }
.clip-file__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 36px; line-height: 1; }
.clip-file__count {
  margin-left: auto;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clip-file__list {
  border-top: 2px solid var(--sh-ink);
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}
.clip-file__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.clip-file__row:hover { color: var(--sh-ink); background: #fff6ef; }
.clip-file__title { font-family: var(--sh-font-display); font-size: 21px; line-height: 1.14; }
.clip-file__credit {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Footnotes — /footnotes/ (04a §7 anatomy). Number and title serif, meta Space Mono,
   quote serif italic with the pink rule, footnote body sans opened by the dagger.
   -------------------------------------------------------------------------- */

.fn-controls { padding: 26px var(--sh-gutter) 0; }
.fn-controls[hidden] { display: none; }
.fn-controls__bar { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.fn-controls__search {
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 11px 14px;
  font-family: var(--sh-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sh-ink);
}
.fn-controls__sort,
.fn-controls__clear,
.fn-controls__rss {
  border: 1px solid var(--sh-ink);
  padding: 11px 16px;
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.fn-controls__sort { background: var(--sh-paper); color: var(--sh-ink); }
.fn-controls__clear { background: var(--sh-ink); color: var(--sh-paper); }
.fn-controls__rss { background: var(--sh-peach); color: var(--sh-ink); }

.fn-tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 16px; }
.fn-tag {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 4px 10px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sh-ink);
  cursor: pointer;
}
.fn-tag[aria-pressed="true"] {
  background: #fff6ef;
  border-left: 3px solid var(--sh-hot-pink);
}
.fn-tag__count { color: var(--sh-grey-on-paper); margin-left: 4px; }
.fn-tags__more {
  border: 0;
  background: none;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sh-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 6px;
}

.fn-result-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.fn-result-line__hint {
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--sh-grey-on-paper);
}

.fn-entries { padding: 0 var(--sh-gutter); }
.fn-entry {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  padding: 34px 0 32px;
  border-bottom: 1px solid var(--sh-hairline);
}
.fn-entry__rail { display: flex; flex-direction: column; gap: 8px; }
.fn-entry__number { font-family: var(--sh-font-display); font-size: 46px; line-height: 0.9; }
.fn-entry__media {
  font-family: var(--sh-font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.fn-entry__main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fn-entry__title-line { display: flex; align-items: baseline; gap: 12px; }
.fn-entry__title {
  flex: 1;
  font-family: var(--sh-font-display);
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--sh-ink);
  text-decoration: none;
}
.fn-entry__title:hover { color: var(--sh-link); }
.fn-entry__out { font-size: 24px; }
.fn-entry__anchor {
  border: 0;
  background: none;
  padding: 2px 4px;
  font-family: var(--sh-font-mono);
  font-size: 14px;
  color: var(--sh-grey-on-paper);
  cursor: pointer;
}
.fn-entry__byline {
  font-family: var(--sh-font-mono);
  font-size: 14px;
  line-height: 1.5;
}
.fn-entry__byline a {
  font-weight: 700;
  color: var(--sh-ink);
  text-decoration: underline;
  text-decoration-color: var(--sh-hot-pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.fn-entry__byline .fn-entry__in { color: var(--sh-grey-on-paper); }
.fn-entry__dates {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--sh-grey-on-paper);
}
/* Verb purple is the small-text value #8a3f91 — the display purple fails at 12px (04a §7). */
.fn-entry__verb { font-weight: 700; color: #8a3f91; text-transform: uppercase; }
.fn-entry__quote {
  margin-top: 6px;
  border-left: 2px solid var(--sh-hot-pink);
  padding-left: 14px;
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.34;
  max-width: 66ch;
  text-wrap: pretty;
}
.fn-entry__note { display: flex; align-items: flex-start; gap: 11px; margin-top: 4px; max-width: 66ch; }
.fn-entry__dagger {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 46px;
  line-height: 0.62;
  color: var(--sh-hot-pink);
  flex: none;
}
.fn-entry__note p { font-size: 17px; line-height: 1.56; text-wrap: pretty; }
.fn-entry__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fn-entry__tag {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 3px 8px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sh-ink);
  cursor: pointer;
}
.fn-entry__tag[aria-pressed="true"] { background: #fff6ef; border-left: 3px solid var(--sh-hot-pink); }

.fn-state {
  margin: 28px var(--sh-gutter);
  border: 1px solid var(--sh-ink);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.fn-state[hidden] { display: none; }
.fn-state__label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}
.fn-state__dagger {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 54px;
  line-height: 1;
  color: var(--sh-hot-pink);
}
.fn-state__heading { font-family: var(--sh-font-display); font-size: 34px; line-height: 1.05; }
.fn-state--loading .fn-state__heading { font-size: 28px; line-height: 1.1; }
.fn-state__copy { font-size: 15px; line-height: 1.55; max-width: 56ch; }
.fn-state__button {
  margin-top: 4px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.fn-paging {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px var(--sh-gutter) 30px;
  font-family: var(--sh-font-mono);
  font-size: 12px;
}
.fn-paging[hidden] { display: none; }
.fn-paging__pages { display: flex; gap: 6px; align-items: center; }
.fn-paging button {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 12px;
  padding: 6px 11px;
  cursor: pointer;
}
.fn-paging button[aria-current="page"],
.fn-paging button[aria-pressed="true"] { background: var(--sh-ink); color: var(--sh-paper); }
.fn-paging__range { margin-left: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sh-grey-on-paper); }
.fn-paging__perpage { display: flex; gap: 6px; align-items: center; }
.fn-paging__perpage-label { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sh-grey-on-paper); }

.fn-send {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  background: var(--sh-peach);
  border-top: 1px solid var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
  padding: 30px var(--sh-gutter);
}
.fn-send__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 34px; line-height: 1.04; letter-spacing: -0.015em; }
.fn-send__copy p { font-size: 15px; line-height: 1.55; margin-top: 8px; max-width: 62ch; }
.fn-send__button {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sh-ink);
  text-decoration: none;
  white-space: nowrap;
}
.fn-send__button:hover { color: var(--sh-ink); }

.fn-support {
  position: relative;
  overflow: hidden;
  background: var(--sh-hot-pink);
  border-bottom: 1px solid var(--sh-ink);
}
.fn-support::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-ink) 0.6px, transparent 0.7px);
  background-size: 6px 6px;
  opacity: 0.14;
  pointer-events: none;
}
.fn-support__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 56px;
  padding: 40px var(--sh-gutter);
}
.fn-support__pitch { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.fn-support__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.fn-support__pitch p { font-size: 16px; line-height: 1.55; max-width: 56ch; text-wrap: pretty; }
.fn-support__card {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 22px;
  width: 340px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fn-support__card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fn-support__action {
  display: block;
  text-align: center;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sh-ink);
  text-decoration: none;
}
.fn-support__action:hover { color: var(--sh-ink); }
.fn-support__action--primary { background: var(--sh-ink); color: var(--sh-paper); }
.fn-support__action--primary:hover { color: var(--sh-paper); }
.fn-support__action--member { background: var(--sh-peach); }
.fn-support__aside,
.fn-support__close {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.fn-support__close { font-weight: 700; }

/* --------------------------------------------------------------------------
   Mobile — 900px and down. The shelf panel becomes the full-height filter sheet
   (Jobs 1e / Resources 7b), the job row becomes the 1d card, the library goes to one
   column behind the directory disclosure (7a/7d), the specimen stacks (5a).
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .board-header,
  .board-header--footnotes {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 18px 26px;
  }
  .board-header__title { font-size: 46px; line-height: 0.96; }

  .rating-ramp { flex-direction: column; }
  .rating-ramp__cell { border-right: 0; border-bottom: 1px solid var(--sh-ink); }
  .rating-ramp__cell:last-child { border-bottom: 0; }
  .rating-ramp__name { font-size: 21px; white-space: normal; }

  .board-dry { grid-template-columns: 1fr; gap: 20px; padding: 26px 18px; }

  /* The filter sheet: the open panel takes the viewport. */
  .shelf__panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    border-bottom: 0;
  }
  .shelf__panel-head {
    position: sticky;
    top: 0;
    background: var(--sh-paper);
    padding: 18px 18px 16px;
    z-index: 1;
  }
  .shelf__panel-title { font-size: 32px; }
  .shelf__panel-hint { display: none; }
  .shelf__groups { grid-template-columns: 1fr; padding: 0 18px; gap: 0; }
  .shelf__group-head button { min-height: 46px; }
  .shelf__option { padding: 12px 2px; }
  .shelf__panel-actions {
    position: sticky;
    bottom: 0;
    background: var(--sh-paper);
    border-top: 1px solid var(--sh-ink);
    padding: 16px 18px 20px;
  }
  .shelf__bar { flex-wrap: wrap; }
  .shelf__pills { padding: 11px 18px; }
  .shelf__result-line { padding: 8px 18px; }
  .shelf__empty { margin: 16px 18px 22px; }

  /* Job row → the 1d card. */
  .job-row--board {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--sh-ink);
    border-left-width: 1px;
    margin: 14px 14px 0;
    padding: 0;
  }
  .job-row--board.job-row--closed { border-left: 4px solid var(--sh-grey); padding: 0; }
  .job-row--board .job-row__band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--sh-ink);
    padding: 8px 12px;
    font-family: var(--sh-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .job-row__band-rating { display: inline-flex; align-items: center; gap: 7px; }
  .job-row__band-rating img { width: 16px; height: 16px; }
  .job-row__band-status { font-weight: 400; }
  /* Band takes the row's rating tint. */
  .job-row--board:has(.chip--rating-green) .job-row__band { background: #c9ead6; }
  .job-row--board:has(.chip--rating-fine) .job-row__band { background: #fdeadb; }
  .job-row--board:has(.chip--rating-tread) .job-row__band { background: #f7cac3; }
  .job-row--board:has(.chip--rating-bingo) .job-row__band { background: #fcbcd2; }
  .job-row--board:has(.chip--rating-dont) .job-row__band { background: #d6d4d6; }
  .job-row--board.job-row--closed .job-row__band { background: #d6d4d6; }

  .job-row--board .job-row__mark {
    width: 26px;
    height: 26px;
    border: 0;
    position: absolute;
  }
  .job-row--board { position: relative; }
  .job-row--board .job-row__mark { margin: 14px 0 0 14px; }
  .job-row--board .job-row__company {
    display: block;
    font-family: var(--sh-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sh-grey-on-paper);
    padding: 20px 14px 0 50px;
  }
  .job-row--board .job-row__main { padding: 0 14px; }
  .job-row--board .job-row__title { font-size: 28px; line-height: 1.06; }
  .job-row--board .job-row__title-line { margin-top: 8px; }
  .job-row--board .job-row__title-line .chip--open,
  .job-row--board .job-row__title-line .chip--closed { display: none; }
  .job-row--board .job-row__commentary { color: var(--sh-ink); }
  .job-row--closed .job-row__commentary { color: var(--sh-grey-on-tint); }
  .job-row--board .job-row__chips {
    border-top: 1px solid var(--sh-hairline);
    margin-top: 12px;
    padding-top: 12px;
  }
  .job-row--board .job-row__fact {
    padding: 0 14px;
    border-top: 1px solid var(--sh-hairline);
    margin-top: 12px;
    padding-top: 12px;
  }
  .job-row--board .job-row__fact--posted { display: none; }
  .job-row--board .job-row__fact-value { font-size: 21px; }
  .job-row--board .job-row__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--sh-hairline);
    margin: 12px 14px 0;
    padding: 12px 0 14px;
    font-family: var(--sh-font-mono);
    font-size: 10px;
    color: var(--sh-grey-on-paper);
  }
  .job-row--board .job-row__foot-cta { font-size: 11px; color: var(--sh-link); }
  .board-rows { padding-bottom: 14px; }

  .library-grid { grid-template-columns: 1fr; padding: 16px; gap: 14px; }

  /* Directory row → disclosure (7d): collapsed by default so the first card sits high. */
  .dir-browse__bar { border-bottom: 0; }
  .dir-browse__label,
  .dir-browse__all { display: none; }
  .dir-browse__disclosure {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid var(--sh-ink);
    background: var(--sh-tint-resources);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .dir-browse__disclosure-count { font-family: var(--sh-font-mono); font-size: 12px; color: var(--sh-grey-on-tint); }
  .dir-browse__grid { display: none; grid-template-columns: 1fr 1fr; }
  .dir-browse--open .dir-browse__grid { display: grid; }
  .dir-browse__cell,
  .dir-browse__cell:nth-child(5n) {
    min-height: 46px;
    align-items: center;
    border-right: 1px solid var(--sh-ink);
    border-bottom: 1px solid var(--sh-ink);
  }
  .dir-browse__cell:nth-child(2n) { border-right: 0; }
  .dir-browse--open .dir-browse__bar::after { content: none; }

  .whats-new { padding: 24px 18px 28px; }
  .whats-new__grid { grid-template-columns: 1fr; }
  .whats-new__entry { border-right: 0; border-bottom: 1px solid var(--sh-ink); }
  .whats-new__entry:last-child { border-bottom: 0; }

  .hiring-band { grid-template-columns: 1fr; gap: 18px; padding: 24px 18px; }
  .hiring-band__heading { font-size: 32px; }

  /* Specimen stacks: the tinted panel announces the lead before you read a word (5a).
     Every lead gets a bordered read button — the underline is not a 44px target. */
  .specimen { grid-template-columns: 1fr; }
  .specimen__panel { border-right: 0; border-bottom: 1px solid var(--sh-hairline); padding: 18px; }
  .specimen__title { font-size: 30px; }
  .specimen__quote-col { padding: 18px; }
  .specimen__quote { font-size: 21px; line-height: 1.26; }
  .specimen__read {
    align-self: stretch;
    border: 1px solid var(--sh-ink);
    padding: 12px;
    text-align: center;
    text-decoration: none;
  }
  .clip-file { padding: 22px 18px; }
  .clip-file__list { grid-template-columns: 1fr; }
  .clip-file__row { grid-template-columns: 1fr; gap: 4px; }

  .fn-controls { padding: 12px 18px 0; }
  .fn-entries { padding: 0 18px; }
  .fn-entry { grid-template-columns: 1fr; gap: 9px; padding: 22px 0 20px; }
  .fn-entry__rail { flex-direction: row; align-items: baseline; gap: 10px; }
  .fn-entry__number { font-size: 34px; }
  .fn-entry__media { font-size: 12px; }
  .fn-entry__title { font-size: 26px; }
  .fn-entry__dagger { font-size: 40px; line-height: 0.66; }
  .fn-state { margin: 20px 18px; }
  .fn-paging { padding: 20px 18px 24px; }
  .fn-send { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 18px; }
  .fn-support__inner { flex-direction: column; gap: 20px; padding: 24px 18px; }
  .fn-support__card { width: 100%; }
  .fn-support__heading { font-size: 32px; }
  .board-paging { padding: 0 18px; }
}

/* Base chip visuals for the chips the board rows declare directly (rating, Open/Closed) —
   the original rule up in the tag-template section is scoped to .tag-rows, and the boards
   render outside it. Same values; do not fork them. */
.job-row .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.4;
  padding: 3px 8px;
  white-space: nowrap;
}
.job-row .chip--open { background: var(--sh-blue); }
.job-row .chip--closed { background: var(--sh-grey); }

/* ==========================================================================
   /resources/events/ (index-events.hbs, frame 4a/7c) and the two browse pages
   (browse-jobs.hbs frame 10a, browse-resources.hbs frame 2a).
   ========================================================================== */

/* Events header — peach halftone band with the NEXT ONE card. */
.events-header {
  position: relative;
  overflow: hidden;
  background: var(--sh-peach);
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 44px;
  align-items: start;
  padding: 34px var(--sh-gutter) 32px;
}
.events-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-ink) 0.6px, transparent 0.7px);
  background-size: 6px 6px;
  opacity: 0.14;
  pointer-events: none;
}
.events-header__copy,
.events-next { position: relative; }
.events-header__crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.events-header__crumb a { color: var(--sh-ink); text-underline-offset: 3px; }
.events-header__path { color: var(--sh-grey-on-tint); }
.events-header__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.events-header__intro { font-size: 16px; line-height: 1.6; max-width: 52ch; margin-top: 14px; }
.events-header__note {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--sh-coral);
  max-width: 56ch;
}
.events-next { border: 1px solid var(--sh-ink); background: var(--sh-paper); }
.events-next[hidden] { display: none; }
.events-next__body { padding: 16px 14px 14px; border-bottom: 1px solid var(--sh-ink); }
.events-next__label {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}
.events-next__soon {
  display: block;
  font-family: var(--sh-font-display);
  font-size: 44px;
  line-height: 1.02;
  margin-top: 4px;
}
.events-next__split {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--sh-grey-on-tint);
  margin-top: 6px;
}
.events-next__asof {
  padding: 11px 14px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sh-grey-on-tint);
}

.events-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-ink);
  background: #fff6ef;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  color: var(--sh-grey-on-tint);
}

/* The event row: date cell (script-revealed) · body · WHERE column. */
.event-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 24px;
  align-items: start;
  padding: 20px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-hairline);
}
.event-row--dated { grid-template-columns: 132px minmax(0, 1fr) 220px; }
.event-row:hover { background: #fff6ef; }
.event-row__cell {
  border: 1px solid var(--sh-ink);
  background: var(--sh-tint-resources);
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
}
.event-row__cell[hidden] { display: none; }
.event-row__cell-month {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sh-grey-on-tint);
}
.event-row__cell-day {
  font-family: var(--sh-font-display);
  font-size: 30px;
  line-height: 1;
  margin-top: 2px;
}
.event-row__cell-mode {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--sh-grey-on-tint);
  margin-top: 4px;
}
.event-row__main { min-width: 0; }
.event-row__title {
  font-family: var(--sh-font-display);
  font-size: 27px;
  line-height: 1.04;
  color: var(--sh-ink);
  text-decoration: none;
}
.event-row__title::after { content: ""; position: absolute; inset: 0; }
.event-row__when {
  display: block;
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--sh-grey-on-tint);
  margin-top: 4px;
}
.event-row__desc { display: block; font-size: 14px; line-height: 1.55; max-width: 66ch; margin-top: 9px; }
.event-row__chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
.event-row__chips a {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  padding: 3px 7px;
  white-space: nowrap;
}
.event-row__chips a[href*="/t/res-directory-"] { display: none; } /* the page IS the directory */
.event-row__chips a[href*="/t/res-collection-"] { background: #f5d9f1; }
.event-row__where { text-align: right; }
.event-row__where-label {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}
.event-row__where-label[hidden] { display: none; }
.event-row__where-place {
  display: block;
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.2;
  margin-top: 4px;
}
.event-row__more {
  display: inline-block;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-link);
  margin-top: 10px;
}

/* Already happened — the grey ledger. */
.events-past[hidden] { display: none; }
.events-past__band {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--sh-ink);
  background: #e6e4e2;
  padding: 14px var(--sh-gutter);
  font-family: var(--sh-font-mono);
  text-align: left;
  cursor: pointer;
}
.events-past__band-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.events-past__band-note { font-size: 11px; color: var(--sh-grey-on-tint); }
.events-past__list[hidden] { display: none; }
.events-past__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 220px;
  gap: 24px;
  align-items: baseline;
  padding: 13px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.events-past__row:hover { background: #fff6ef; }
.events-past__chip {
  justify-self: start;
  border: 1px solid var(--sh-ink);
  background: #e6e4e2;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  white-space: nowrap;
}
.events-past__title {
  font-family: var(--sh-font-display);
  font-size: 22px;
  line-height: 1.1;
  color: var(--sh-grey-on-tint);
}
.events-past__place {
  font-family: var(--sh-font-display);
  font-size: 18px;
  color: var(--sh-grey-on-paper);
  text-align: right;
}
.events-past__rule {
  padding: 16px var(--sh-gutter) 20px;
  border-bottom: 1px solid var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sh-grey-on-tint);
}

/* --------------------------------------------------------------------------
   Browse pages — shared header, categories box, sections, counted chips.
   -------------------------------------------------------------------------- */

.section-strip__name--link { font-weight: 700; color: var(--sh-ink); }

.browse-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 44px;
  align-items: start;
  padding: 34px var(--sh-gutter) 30px;
  border-bottom: 2px solid var(--sh-ink);
}
.browse-header__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 60px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--sh-purple-display);
}
.browse-header__intro { font-size: 17px; line-height: 1.6; max-width: 56ch; margin-top: 18px; }
.browse-header__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.browse-header__links a { text-underline-offset: 3px; }

.browse-doors { display: flex; flex-direction: column; margin-top: 26px; border-top: 1px solid var(--sh-ink); }
.browse-doors__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.browse-doors__row:hover { color: var(--sh-ink); background: #fff6ef; }
.browse-doors__name { font-family: var(--sh-font-display); font-size: 23px; line-height: 1.1; }
.browse-doors__cta {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-link);
  white-space: nowrap;
}

.browse-cats { border: 1px solid var(--sh-ink); padding: 14px 16px 12px; }
.browse-cats__label {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sh-ink);
}
.browse-cats__sub {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--sh-grey-on-tint);
  margin-top: 6px;
}
.browse-cats__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.browse-cats__row:last-of-type { border-bottom: 0; }
.browse-cats__row:hover { color: var(--sh-link); }
.browse-cats__name {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.browse-cats__value {
  font-family: var(--sh-font-display);
  font-size: 19px;
  line-height: 1;
  color: var(--sh-grey-on-paper);
}
.browse-cats__note {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--sh-grey-on-tint);
  background: #f2f0ee;
  padding: 9px 12px;
  margin-top: 8px;
}

.browse-section { padding: 30px var(--sh-gutter) 0; }
.browse-section--last,
.browse-page .browse-section:last-of-type { padding-bottom: 34px; }
.browse-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--sh-ink);
}
.browse-section__twinkle { font-size: 26px; line-height: 1; }
.browse-section__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin-right: auto;
}
.browse-section__anchor {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sh-grey-on-paper);
}
.browse-section__intro {
  font-size: 16px;
  line-height: 1.58;
  max-width: 96ch; /* reference measure, not reading measure (01a §6) */
  margin-top: 14px;
  color: var(--sh-grey-on-tint);
}
.browse-section__intro code { font-family: var(--sh-font-mono); font-size: 13px; }

.browse-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.browse-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  padding: 5px 9px;
  font-family: var(--sh-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.browse-chip:hover { color: var(--sh-ink); outline: 2px solid var(--sh-ink); outline-offset: -2px; }
.browse-chip__count { font-size: 11px; color: var(--sh-grey-on-tint); }
/* Axis tints; rating chips take their own verdict tint per value (no icons here). */
.browse-chips--discipline .browse-chip { background: var(--sh-tint-jobs); }
.browse-chips--level .browse-chip { background: #e5cde8; }
.browse-chips--type .browse-chip { background: #e6e4e2; }
.browse-chips--salary .browse-chip { background: var(--sh-tint-resources); }
.browse-chips--salary .browse-chip[href*="no-comp"],
.browse-chips--salary .browse-chip[href*="competitive"],
.browse-chips--salary .browse-chip[href*="i-dont"] { background: var(--sh-hot-pink); }
.browse-chips--status .browse-chip[href*="job-status-open"] { background: var(--sh-blue); }
.browse-chips--status .browse-chip[href*="job-status-closed"] { background: var(--sh-grey); }
.browse-chips--other .browse-chip { background: #e6e4e2; }
.browse-chips--rating .browse-chip[href*="/t/bjb-green-means-go"] { background: #c9ead6; }
.browse-chips--rating .browse-chip[href*="/t/bjb-probably-fine"] { background: #fdeadb; }
.browse-chips--rating .browse-chip[href*="/t/bjb-tread-carefully"] { background: #f7cac3; }
.browse-chips--rating .browse-chip[href*="/t/bjb-bingo"] { background: #fcbcd2; }
.browse-chips--rating .browse-chip[href*="/t/bjb-maybe-dont"] { background: #d6d4d6; }

/* Directory rows (browse-resources): two-column bordered grid, blurb from the tag
   description. */
.browse-dir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--sh-ink);
  margin-top: 16px;
}
.browse-dir__row {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--sh-ink);
  border-bottom: 1px solid var(--sh-hairline);
}
.browse-dir__row:nth-child(odd) { border-right: 1px solid var(--sh-hairline); }
.browse-dir__row:hover { color: var(--sh-ink); background: #fff6ef; }
.browse-dir__name-line { display: flex; align-items: baseline; gap: 10px; }
.browse-dir__name { font-family: var(--sh-font-display); font-size: 24px; }
.browse-dir__count {
  margin-left: auto;
  border: 1px solid var(--sh-ink);
  background: var(--sh-tint-resources);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  padding: 2px 6px;
}
.browse-dir__blurb {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 6px;
  color: var(--sh-grey-on-tint);
  text-wrap: pretty;
}

/* Collection / publisher groups: chip + blurb + count rows. */
.browse-group { border: 1px solid var(--sh-ink); margin-top: 16px; }
.browse-group__label {
  display: block;
  padding: 9px 14px;
  border-bottom: 1px solid var(--sh-ink);
  background: #f2f0ee;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.browse-group__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.browse-group__row:last-child { border-bottom: 0; }
.browse-group__row:hover { color: var(--sh-ink); background: #fff6ef; }
.browse-group__chip {
  border: 1px solid var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  padding: 3px 7px;
  white-space: nowrap;
  min-width: 190px;
}
.browse-group__chip--collection { background: #f5d9f1; }
.browse-group__chip--publisher { background: #f7cec7; }
.browse-group__blurb { font-size: 14px; line-height: 1.5; color: var(--sh-grey-on-tint); }
.browse-group__count {
  margin-left: auto;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  color: var(--sh-grey-on-paper);
}

@media (max-width: 900px) {
  .events-header { grid-template-columns: 1fr; gap: 20px; padding: 24px 18px; }
  .events-header__title { font-size: 44px; }
  .events-bar { padding: 9px 18px; }
  .event-row,
  .event-row--dated { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .event-row__cell { flex-direction: row; align-items: baseline; gap: 10px; align-self: start; }
  .event-row__cell-day { margin-top: 0; }
  .event-row__where { text-align: left; }
  .events-past__band { padding: 12px 18px; flex-direction: column; gap: 4px; }
  .events-past__row { grid-template-columns: 1fr; gap: 6px; padding: 12px 18px; }
  .events-past__place { text-align: left; }
  .events-past__rule { padding: 14px 18px 18px; }

  .browse-header { grid-template-columns: 1fr; gap: 22px; padding: 24px 18px; }
  .browse-header__title { font-size: 40px; }
  .browse-section { padding: 24px 18px 0; }
  .browse-section--last,
  .browse-page .browse-section:last-of-type { padding-bottom: 26px; }
  .browse-dir { grid-template-columns: 1fr; }
  .browse-dir__row:nth-child(odd) { border-right: 0; }
  .browse-group__row { flex-wrap: wrap; }
  .browse-group__chip { min-width: 0; }
}

/* ==========================================================================
   /who-pays-for-this/ (who-pays-for-this.hbs, 12 §1: this page owns the near-black
   ground and full-strength coral), /contact/ (contact.hbs, 13) and /services/
   (services.hbs, 03a §5). The ask-band is the shared money closer for the page set.
   ========================================================================== */

.section-strip--plain { background: var(--sh-paper); }
.section-strip--plain .section-strip__count { color: var(--sh-grey-on-paper); text-transform: uppercase; }

.wp-eyebrow {
  font-family: var(--sh-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Full-width ruled band label — the 13px size of the two-size eyebrow system (12 §4). */
.wp-band {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-ink);
}
.wp-band__twinkle { font-size: 22px; line-height: 1; }
.wp-band__label {
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Hero — near-black, coral halftone at 0.16. */
.wp-hero {
  position: relative;
  overflow: clip;
  background: var(--sh-ink);
  color: var(--sh-paper);
  border-bottom: 1px solid var(--sh-ink);
  padding: 60px var(--sh-gutter) 56px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: center;
}
.wp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-coral) 0.9px, transparent 1px);
  background-size: 7px 7px;
  opacity: 0.16;
  pointer-events: none;
}
.wp-hero__copy, .wp-stamp { position: relative; }
.wp-hero__copy { display: flex; flex-direction: column; gap: 20px; }
.wp-hero__eyebrow { display: flex; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.wp-hero__eyebrow .sh-twinkle { font-size: 22px; line-height: 1; }
.wp-hero__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 78px;
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.wp-hero__title-accent { color: var(--sh-coral); }
.wp-hero__sub { font-size: 17px; line-height: 1.55; max-width: 58ch; color: #e6e4e2; }

.wp-stamp {
  transform: rotate(-8deg);
  justify-self: center;
  border: 3px double var(--sh-paper);
  background: var(--sh-coral);
  padding: 5px;
}
.wp-stamp__inner {
  border: 1px solid var(--sh-ink);
  padding: 14px 18px 13px;
  text-align: center;
  font-family: var(--sh-font-mono);
  color: var(--sh-ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wp-stamp__stars { font-size: 10px; font-weight: 700; letter-spacing: 0.34em; }
.wp-stamp__text { font-size: 14px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.34; text-transform: uppercase; }

/* Refusals — 3×2 hairline grid, centred cells. */
.wp-refusals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.wp-refusal {
  background: var(--sh-paper);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 7px;
  min-height: 96px;
}
.wp-refusal__name { font-family: var(--sh-font-display); font-size: 34px; line-height: 1.02; }
.wp-refusal__note { font-family: var(--sh-font-mono); font-size: 11px; line-height: 1.55; color: var(--sh-grey-on-paper); }

.wp-just-no { padding: 30px var(--sh-gutter) 34px; border-bottom: 1px solid var(--sh-ink); }
.wp-just-no p {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
  max-width: 40ch;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.wp-just-no .sh-twinkle { font-size: 22px; line-height: 1; flex: none; }
.wp-just-no em { font-family: var(--sh-font-display); font-weight: 400; font-size: 30px; }

/* Their words take the serif; the highlighter mark is the body's own device. */
.wp-their-words { font-family: var(--sh-font-display); font-size: 19px; }

.wp-why,
.wp-payers {
  padding: 46px var(--sh-gutter) 48px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 372px 1fr;
  gap: 56px;
  align-items: start;
}
.wp-why__head { display: flex; flex-direction: column; gap: 11px; position: sticky; top: 20px; }
.wp-why__heading,
.wp-payers__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.02;
  text-wrap: balance;
}
.wp-why__heading { color: var(--sh-purple-display); }
.wp-why__body { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; }
.wp-why__body p { font-size: 17px; line-height: 1.55; }
.wp-why__marked {
  font-size: 27px !important;
  font-weight: 700;
  line-height: 1.3 !important;
  background: linear-gradient(#f7cec7, #f7cec7) 0 78% / 100% 44% no-repeat;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.wp-means {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.wp-means__cell {
  background: var(--sh-paper);
  padding: 30px var(--sh-gutter) 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wp-means__label { font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.wp-means__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 32px; line-height: 1.04; max-width: 34ch; text-wrap: balance; }
.wp-means__cell p { font-size: 16px; line-height: 1.5; }

.wp-cost {
  padding: 44px var(--sh-gutter) 46px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 56px;
  align-items: center;
}
.wp-cost__figure { display: flex; flex-direction: column; gap: 10px; }
.wp-cost__number { display: flex; align-items: baseline; gap: 14px; }
.wp-cost__amount { font-family: var(--sh-font-display); font-size: 104px; line-height: 0.86; color: var(--sh-coral); }
.wp-cost__unit { font-family: var(--sh-font-mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.wp-cost__unit-sub { color: var(--sh-grey-on-paper); }
.wp-cost__what { font-family: var(--sh-font-mono); font-size: 12px; line-height: 1.6; color: var(--sh-grey-on-paper); max-width: 40ch; }
.wp-cost__copy { display: flex; flex-direction: column; gap: 16px; max-width: 52ch; }
.wp-cost__copy p { font-size: 17px; line-height: 1.55; }

.wp-payers__head { display: flex; flex-direction: column; gap: 11px; }
.wp-payers__list { display: flex; flex-direction: column; gap: 20px; max-width: 60ch; }
.wp-payers__list p { display: flex; align-items: baseline; gap: 12px; font-size: 17px; line-height: 1.55; }
.wp-payers__n { font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; color: var(--sh-link); width: 18px; flex: none; }
.wp-payers__close { font-size: 21px !important; font-weight: 700; line-height: 1.4 !important; margin-top: 6px; gap: 10px !important; }
.wp-payers__close .sh-twinkle { font-size: 17px; line-height: 1; flex: none; }

/* The tier — near-black again. */
.wp-tier {
  background: var(--sh-ink);
  color: var(--sh-paper);
  border-bottom: 1px solid var(--sh-ink);
  padding: 54px var(--sh-gutter) 56px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: start;
}
.wp-tier__copy { display: flex; flex-direction: column; gap: 15px; }
.wp-tier__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 62px;
  line-height: 0.98;
  max-width: 18ch;
  margin-bottom: 3px;
}
.wp-tier__copy p { font-size: 17px; line-height: 1.55; max-width: 60ch; color: #e6e4e2; }
.wp-tier__dont { color: var(--sh-coral); }
.wp-tier__panel {
  border: 1px solid var(--sh-grey-on-paper);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wp-tier__panel-label { font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sh-grey-on-ink); }
.wp-tier__panel-answer { font-family: var(--sh-font-display); font-size: 56px; line-height: 0.9; color: var(--sh-coral); }
.wp-tier__free-list {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--sh-footer-rule);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wp-tier__free-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.wp-tier__free-tag { font-family: var(--sh-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sh-grey-on-ink); }

/* Broke help — halftone on paper at 0.3. */
.wp-broke {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--sh-ink);
  padding: 40px var(--sh-gutter) 44px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: center;
}
.wp-broke::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-coral) 0.9px, transparent 1px);
  background-size: 7px 7px;
  opacity: 0.3;
  pointer-events: none;
}
.wp-broke__head, .wp-broke__list { position: relative; }
.wp-broke__head { display: flex; flex-direction: column; gap: 10px; }
.wp-broke__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 40px; line-height: 1.02; }
.wp-broke__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wp-broke__list li { display: flex; align-items: baseline; gap: 9px; font-size: 17px; line-height: 1.5; }
.wp-broke__list .sh-twinkle { font-size: 15px; line-height: 1; flex: none; }

.wp-disclaimer {
  padding: 30px var(--sh-gutter) 32px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}
.wp-disclaimer__label { font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.wp-disclaimer__body { display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
.wp-disclaimer__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 30px; line-height: 1.04; }
.wp-disclaimer__body p { font-size: 16px; line-height: 1.5; color: var(--sh-grey-on-tint); }
.wp-disclaimer__aside {
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.45 !important;
  color: var(--sh-ink) !important;
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 4px;
}
.wp-disclaimer__aside .sh-twinkle { font-size: 15px; line-height: 1; flex: none; }

/* The ask band — shared closer for the money-adjacent pages. */
.ask-band {
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 44px var(--sh-gutter) 46px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: center;
  border-bottom: 1px solid var(--sh-footer-rule);
}
.ask-band__pitch { display: flex; flex-direction: column; gap: 12px; }
.ask-band__heading { font-family: var(--sh-font-display); font-size: 44px; line-height: 1.04; }
.ask-band__body { font-size: 15px; line-height: 1.55; max-width: 46ch; color: #e6e4e2; }
.ask-band__link {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-link-on-ink);
  align-self: flex-start;
}
/* The fundraiser line — text, never a button; hidden until one is running. */
.ask-band__fundraiser {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--sh-coral);
  margin-top: 4px;
}
.ask-band__fundraiser[hidden] { display: none; }
.ask-band__actions { display: flex; flex-direction: column; gap: 9px; }
.ask-band__action {
  border: 1px solid var(--sh-grey-on-paper);
  color: var(--sh-paper);
  text-decoration: none;
  padding: 13px 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ask-band__action:hover { color: var(--sh-paper); border-color: var(--sh-paper); }
.ask-band__action--primary {
  background: var(--sh-paper);
  color: var(--sh-ink);
  border-color: var(--sh-paper);
  font-weight: 700;
}
.ask-band__action--primary:hover { color: var(--sh-ink); }
.ask-band__close {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sh-grey-on-ink);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   /contact/
   -------------------------------------------------------------------------- */

.contact-hero {
  padding: 52px var(--sh-gutter) 46px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 56px;
  align-items: end;
}
.contact-hero__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 78px;
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.contact-hero__sub { font-size: 18px; line-height: 1.55; max-width: 58ch; margin-top: 18px; }
.contact-expect {
  border: 1px solid var(--sh-ink);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.contact-expect p { font-size: 16px; line-height: 1.5; }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.contact-card {
  background: var(--sh-paper);
  border: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--sh-ink);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 104px;
}
.contact-card:hover { background: #fff6ef; }
.contact-card--active,
.contact-card--active:hover { background: var(--card-tint); }
.contact-card__name {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--sh-font-display);
  font-size: 27px;
  line-height: 1.04;
}
.contact-card__mark {
  color: var(--sh-coral);
  font-family: var(--sh-font-display);
  font-size: 16px;
  line-height: 1;
  width: 12px;
  flex: none;
  visibility: hidden;
}
.contact-card--active .contact-card__mark { visibility: visible; }
.contact-card__blurb {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--sh-grey-on-tint);
  padding-left: 21px;
}

.contact-panel {
  padding: 44px var(--sh-gutter) 48px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 372px 1fr;
  gap: 56px;
  align-items: start;
}
.contact-panel[hidden] { display: none; }
.contact-panel__happens { display: flex; flex-direction: column; gap: 12px; }
.contact-panel__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 38px; line-height: 1.02; }
.contact-panel__happens > p { font-size: 16px; line-height: 1.5; color: var(--sh-grey-on-tint); }
.contact-panel__aside {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.45 !important;
  color: var(--sh-ink) !important;
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 4px;
}
.contact-panel__aside .sh-twinkle { font-size: 15px; line-height: 1; flex: none; }
.contact-panel__alt {
  border-top: 1px solid var(--sh-hairline);
  padding-top: 16px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-panel__alt p { font-size: 15px; line-height: 1.5; color: var(--sh-grey-on-tint); }
.contact-panel__alt a {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-start;
}

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.contact-form__field { display: flex; flex-direction: column; gap: 7px; }
.contact-form__field--wide { grid-column: 1 / -1; }
.contact-form__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.contact-form__hint {
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--sh-grey-on-paper);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form textarea {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 12px 14px;
  font-family: var(--sh-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sh-ink);
  width: 100%;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--sh-link);
  box-shadow: inset 0 0 0 1px var(--sh-link);
}
.contact-form__optin { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.contact-form__optin input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--sh-link); flex: none; }
.contact-form__optin span { font-size: 15px; line-height: 1.45; }
.contact-form__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 2px; }
.contact-form__submit {
  background: var(--sh-ink);
  color: var(--sh-paper);
  border: 0;
  cursor: pointer;
  padding: 15px 26px;
  font-family: var(--sh-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact-form__submit:hover { background: var(--sh-link); }
.contact-form__note {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--sh-grey-on-paper);
  max-width: 46ch;
}

/* Honeypot (13 §9). `left: -9999px` rather than `display: none` on purpose — a bot that
   parses CSS skips anything hidden, and this field only works if it looks reachable.
   The wrapper carries aria-hidden so nothing is announced. */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submission outcome. Sits where the form's own note sits, in the same voice — success is
   a fact, not a celebration, and it never promises a reply time (13 §2). */
.contact-form__result {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 46ch;
  padding: 12px 14px;
  border: 1px solid var(--sh-ink);
}
.contact-form__result--ok { background: var(--sh-tint-resources); }
.contact-form__result--error { background: #f7cac3; }

/* Hidden by default and revealed two ways, so the page works with or without JS:
   :target for the no-JS POST (the Worker 303s back to #sent / #send-failed), and the
   data-shown attribute for the scripted path. Ghost cannot read a query string, which is
   why this is a fragment rather than ?sent=1. */
.contact-form__result { display: none; margin-top: 18px; }
.contact-form__result:target,
.contact-form__result[data-shown] { display: block; }
.contact-result { scroll-margin-top: 24px; }

.contact-elsewhere {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.contact-elsewhere__cell {
  background: var(--sh-paper);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-elsewhere__label { font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.contact-elsewhere__cell p { font-size: 16px; line-height: 1.5; }
.contact-elsewhere__cell a {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   /services/
   -------------------------------------------------------------------------- */

.services-header__aside { font-size: 15px !important; color: var(--sh-grey-on-tint); margin-top: 12px; }

.offer {
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 380px 1fr;
}
.offer__intro {
  border-right: 1px solid var(--sh-ink);
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Oversized purple numerals: the sanctioned decorative use of accent colour. */
.offer__numeral { font-family: var(--sh-font-display); font-size: 54px; line-height: 0.9; color: var(--sh-purple-display); }
.offer__name { font-family: var(--sh-font-display); font-weight: 400; font-size: 34px; line-height: 1.08; }
.offer__framing { font-size: 14px; line-height: 1.55; }
.offer__badge {
  border: 1px solid var(--sh-ink);
  background: var(--sh-tint-portfolio);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  align-self: flex-start;
  margin-top: 4px;
}
.offer__link {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
  align-self: flex-start;
}
.offer__scope { padding: 26px 40px; }
.offer__scope--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}
.offer__phase { display: flex; flex-direction: column; gap: 10px; }
.offer__phase-name { font-family: var(--sh-font-display); font-weight: 400; font-size: 26px; line-height: 1; }
.offer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.offer__list li { border-top: 1px solid var(--sh-hairline); padding-top: 9px; }
.offer__list--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 34px;
}
.offer__scope-label {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  margin-bottom: 14px;
}
.offer__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.offer__chip {
  border: 1px solid var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.offer__chip--ghost { background: #e6e4e2; }
.offer__scope-note { font-size: 14px; line-height: 1.55; max-width: 62ch; margin-top: 14px; }

/* The joke band — coral halftone, kept verbatim. */
.services-joke {
  position: relative;
  overflow: hidden;
  background: var(--sh-coral);
  border-bottom: 1px solid var(--sh-ink);
  padding: 34px var(--sh-gutter);
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 44px;
  align-items: start;
}
.services-joke::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-ink) 0.6px, transparent 0.7px);
  background-size: 6px 6px;
  opacity: 0.14;
  pointer-events: none;
}
.services-joke__intro, .services-joke__list { position: relative; }
.services-joke__intro { display: flex; flex-direction: column; gap: 10px; }
.services-joke__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 40px; line-height: 1; }
.services-joke__offer { font-family: var(--sh-font-display); font-size: 26px; line-height: 1.1; }
.services-joke__framing { font-size: 14px; line-height: 1.55; }
.services-joke__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 34px;
  font-size: 15px;
  line-height: 1.5;
}
.services-joke__list li { border-top: 1px solid var(--sh-ink); padding-top: 10px; }

.services-close {
  display: grid;
  grid-template-columns: 1fr 440px;
  border-bottom: 1px solid var(--sh-ink);
}
.services-terms {
  padding: 40px;
  border-right: 1px solid var(--sh-ink);
  display: flex;
  flex-direction: column;
  gap: 26px;
  justify-content: center;
}
.services-terms__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 46px; line-height: 1.02; max-width: 16ch; }
.services-terms__list { margin: 0; display: flex; flex-direction: column; gap: 13px; }
.services-terms__row { display: flex; gap: 14px; align-items: baseline; }
.services-terms__row dt {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  flex: 0 0 96px;
}
.services-terms__row dd { margin: 0; font-size: 16px; line-height: 1.5; }

.services-form { padding: 34px 40px; gap: 12px; }
.services-form__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 32px; line-height: 1.05; margin-bottom: 2px; }
.services-form__topics { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.services-form__topic-row { display: flex; flex-wrap: wrap; gap: 6px; }
.services-form__topic { cursor: pointer; }
.services-form__topic input { position: absolute; opacity: 0; pointer-events: none; }
.services-form__topic span {
  display: inline-block;
  border: 1px solid var(--sh-ink);
  padding: 6px 10px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.services-form__topic input:checked + span { background: var(--sh-ink); color: var(--sh-paper); }
.services-form__topic input:focus-visible + span { outline: 3px solid var(--sh-blue); outline-offset: 1px; }
.services-form__submit { width: 100%; }

@media (max-width: 900px) {
  .wp-hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 18px 36px; }
  .wp-hero__title { font-size: 44px; }
  .wp-stamp { justify-self: start; }
  .wp-band { padding: 14px 18px; }
  .wp-refusals, .wp-means { grid-template-columns: 1fr; }
  .wp-refusal, .wp-means__cell { padding: 20px 18px; }
  .wp-just-no { padding: 22px 18px 26px; }
  .wp-just-no p { font-size: 21px; flex-wrap: wrap; }
  .wp-why, .wp-payers, .wp-cost, .wp-broke, .wp-disclaimer, .wp-tier {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 18px 32px;
  }
  .wp-why__head { position: static; }
  .wp-why__heading, .wp-payers__heading { font-size: 32px; }
  .wp-cost__amount { font-size: 72px; }
  .wp-tier__heading { font-size: 40px; }
  .ask-band { grid-template-columns: 1fr; gap: 24px; padding: 30px 18px 34px; }
  .ask-band__heading { font-size: 32px; }

  .contact-hero { grid-template-columns: 1fr; gap: 22px; padding: 28px 18px 30px; }
  .contact-hero__title { font-size: 46px; }
  .contact-cards { grid-template-columns: 1fr; }
  .contact-panel { grid-template-columns: 1fr; gap: 26px; padding: 28px 18px 32px; }
  .contact-form__grid { grid-template-columns: 1fr; }
  .contact-elsewhere { grid-template-columns: 1fr; }

  .offer { grid-template-columns: 1fr; }
  .offer__intro { border-right: 0; border-bottom: 1px solid var(--sh-hairline); padding: 22px 18px; }
  .offer__scope { padding: 20px 18px 24px; }
  .offer__scope--split, .offer__list--pair { grid-template-columns: 1fr; }
  .services-joke { grid-template-columns: 1fr; padding: 24px 18px; }
  .services-joke__list { grid-template-columns: 1fr; }
  .services-close { grid-template-columns: 1fr; }
  .services-terms { border-right: 0; border-bottom: 1px solid var(--sh-ink); padding: 26px 18px; }
  .services-terms__heading { font-size: 34px; }
  .services-form { padding: 24px 18px 28px; }
}

/* ==========================================================================
   Legal pages — /privacy/ (privacy.hbs, 15 §5–6) and /terms/ (terms.hbs, 16).
   One layout: white strip with the maintained date, purple hero with a two-column
   intro, ruled two-column sections (serif heading | 72ch body), near-black closer.
   ========================================================================== */

.legal-hero {
  padding: 52px var(--sh-gutter) 44px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: start;
}
.legal-hero__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 82px;
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--sh-purple-display);
  text-wrap: balance;
}
.legal-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}
.legal-hero__intro p { font-size: 17px; line-height: 1.55; }

.legal-section {
  border-bottom: 1px solid var(--sh-hairline);
  padding: 26px var(--sh-gutter) 28px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 44px;
  align-items: start;
}
.legal-section__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.06;
}
.legal-section__body {
  font-size: 16px;
  line-height: 1.62;
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The comment rules — same ruled vocabulary as the 21b strip above the comment box. */
.legal-rules {
  border-top: 1px solid var(--sh-ink);
  margin-top: 4px;
  display: flex;
  flex-direction: column;
}
.legal-rules__row {
  border-bottom: 1px solid var(--sh-hairline);
  padding: 12px 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: baseline;
}
.legal-rules__label {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.legal-rules__text { font-size: 15px; line-height: 1.55; }

.legal-close {
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 34px var(--sh-gutter) 36px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 50px;
  align-items: start;
  border-bottom: 1px solid var(--sh-footer-rule);
}
.legal-close__copy { display: flex; flex-direction: column; gap: 12px; }
.legal-close__heading { font-family: var(--sh-font-display); font-size: 42px; line-height: 1.02; }
.legal-close__body { font-size: 15px; line-height: 1.55; max-width: 52ch; color: #e6e4e2; }
.legal-close__actions { display: flex; flex-direction: column; gap: 13px; }
.legal-close__button {
  border: 1px solid var(--sh-paper);
  color: var(--sh-paper);
  text-decoration: none;
  padding: 13px 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.legal-close__button:hover { color: var(--sh-paper); background: rgba(253, 253, 253, 0.12); }
.legal-close__link {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-link-on-ink);
}

@media (max-width: 900px) {
  .legal-hero { grid-template-columns: 1fr; gap: 14px; padding: 26px 18px 24px; }
  .legal-hero__title { font-size: 44px; line-height: 0.98; }
  .legal-hero__intro { padding-top: 0; }
  .legal-section { grid-template-columns: 1fr; gap: 10px; padding: 20px 18px 22px; }
  .legal-section__title { font-size: 26px; }
  .legal-rules__row { grid-template-columns: 1fr; gap: 5px; }
  .legal-close { grid-template-columns: 1fr; gap: 16px; padding: 24px 18px 26px; }
  .legal-close__heading { font-size: 30px; }
}

/* ==========================================================================
   /about/ (about.hbs, 15a) and /faqs/ (faqs.hbs, 18a — shares the legal-page shell).
   ========================================================================== */

.sh-twinkle--purple { color: var(--sh-link); }

.about-hero {
  padding: 52px var(--sh-gutter) 46px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 56px;
  align-items: center;
}
.about-hero__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 76px;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--sh-purple-display);
}
.about-hero__sub { font-size: 18px; line-height: 1.55; text-wrap: pretty; }

.about-places {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.about-place {
  background: var(--place-tint, var(--sh-paper));
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-place__name {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about-place__what { font-family: var(--sh-font-display); font-size: 26px; line-height: 1.04; }

.about-work {
  padding: 36px var(--sh-gutter) 38px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 56px;
  align-items: center;
}
.about-work__head { display: flex; flex-direction: column; gap: 11px; }
.about-work__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  max-width: 22ch;
}
.about-work__body { display: flex; flex-direction: column; gap: 16px; }
.about-work__body p { font-size: 17px; line-height: 1.55; }
.about-work__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.about-work__links a { color: var(--sh-ink); }

.about-person {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--sh-ink);
  padding: 40px var(--sh-gutter) 42px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 44px;
  align-items: start;
}
.about-person::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-coral) 0.9px, transparent 1px);
  background-size: 7px 7px;
  opacity: 0.3;
  pointer-events: none;
}
.about-person__photo, .about-person__copy { position: relative; }
.about-person__photo { display: flex; flex-direction: column; gap: 14px; }
.about-person__photo img { width: 100%; height: auto; border: 1px solid var(--sh-ink); }
.about-person__caption { font-family: var(--sh-font-mono); font-size: 11px; line-height: 1.6; }
.about-person__copy { display: flex; flex-direction: column; gap: 16px; }
.about-person__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  max-width: 24ch;
}
.about-person__copy p { font-size: 17px; line-height: 1.55; }
.about-person__note {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 20px !important;
  line-height: 1.35 !important;
  padding-left: 16px;
  border-left: 2px solid var(--sh-coral);
}

.about-foot {
  display: grid;
  grid-template-columns: 1fr 340px;
  border-bottom: 1px solid var(--sh-ink);
}
.about-disclaimer {
  padding: 30px var(--sh-gutter) 32px;
  border-right: 1px solid var(--sh-ink);
  display: flex;
  flex-direction: column;
  gap: 11px;
  justify-content: center;
}
.about-disclaimer__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.02;
  max-width: 28ch;
}
.about-disclaimer p { font-size: 16px; line-height: 1.5; max-width: 58ch; }
.about-elsewhere {
  padding: 22px 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-elsewhere__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.about-elsewhere__label .sh-twinkle { font-size: 20px; line-height: 1; }
.about-elsewhere__list { display: flex; flex-direction: column; }
.about-elsewhere__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--sh-hairline);
  color: var(--sh-ink);
  text-decoration: none;
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.1;
}
.about-elsewhere__row:last-child { border-bottom: 1px solid var(--sh-hairline); }
.about-elsewhere__out { font-family: var(--sh-font-mono); font-size: 15px; color: var(--sh-purple-display); }
.about-elsewhere__note {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.35;
  padding-left: 12px;
  border-left: 2px solid var(--sh-coral);
  margin-top: 4px;
}

/* FAQs — legal shell plus the jump chips and the Q/A grid. */
.legal-hero__note {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 17px !important;
  line-height: 1.4 !important;
  padding-left: 14px;
  border-left: 2px solid var(--sh-purple-display);
}
.faq-jump {
  padding: 22px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-ink);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.faq-jump__label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
  margin-right: 4px;
}
.faq-jump__chip {
  border: 1px solid var(--sh-ink);
  background: var(--chip-tint, var(--sh-paper));
  color: var(--sh-ink);
  text-decoration: none;
  padding: 7px 14px;
  font-family: var(--sh-font-mono);
  font-size: 12px;
}
.faq-jump__chip:hover { color: var(--sh-ink); outline: 2px solid var(--sh-ink); outline-offset: -2px; }

.faq-section { border-bottom: 1px solid var(--sh-ink); padding: 34px var(--sh-gutter) 14px; }
.faq-section__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
}
.faq-section__blurb {
  font-size: 15px;
  line-height: 1.55;
  color: var(--sh-grey-on-tint);
  margin: 10px 0 22px;
  max-width: 88ch;
}
.faq-qa {
  border-top: 1px solid var(--sh-hairline);
  padding: 20px 0;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  align-items: start;
}
.faq-qa__q {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.1;
}
.faq-qa__a {
  font-size: 16px;
  line-height: 1.62;
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; gap: 16px; padding: 26px 18px 28px; }
  .about-hero__title { font-size: 42px; }
  .about-places { grid-template-columns: 1fr 1fr; }
  .about-work, .about-person { grid-template-columns: 1fr; gap: 20px; padding: 26px 18px 30px; }
  .about-work__heading, .about-person__heading { font-size: 34px; }
  .about-person__photo { max-width: 260px; }
  .about-foot { grid-template-columns: 1fr; }
  .about-disclaimer { border-right: 0; border-bottom: 1px solid var(--sh-ink); padding: 24px 18px 26px; }
  .about-disclaimer__heading { font-size: 30px; }
  .about-elsewhere { padding: 20px 18px 24px; }

  .faq-jump { padding: 16px 18px; }
  .faq-section { padding: 26px 18px 10px; }
  .faq-section__title { font-size: 34px; }
  .faq-qa { grid-template-columns: 1fr; gap: 10px; padding: 16px 0 18px; }
}

.about-elsewhere__soon {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}

/* ==========================================================================
   /bad-job-bingo/ (bad-job-bingo.hbs — github-career-suite.md, frames 1a/1b).
   The game's page: near-black hero on the jobs blue, six real squares, the verdict
   ramp with live counts, and the honesty band.
   ========================================================================== */

/* Coral vanishes on the jobs tint; the blue tint takes the small-text tread rust,
   the black grounds take the board blue. Both are decorative marks. */
.sh-twinkle--rust { color: #94493a; }
.sh-twinkle--blue { color: var(--sh-blue); }

.wp-band--blue { background: var(--sh-tint-jobs); }
.wp-band__meta {
  margin-left: auto;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
}
.wp-band__link {
  margin-left: auto;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-ink);
  text-underline-offset: 3px;
}

.bjb-hero {
  position: relative;
  overflow: clip;
  background: var(--sh-ink);
  color: var(--sh-paper);
  border-bottom: 1px solid var(--sh-ink);
  padding: 56px var(--sh-gutter) 52px;
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 56px;
  align-items: center;
}
.bjb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-blue) 0.9px, transparent 1px);
  background-size: 7px 7px;
  opacity: 0.18;
  pointer-events: none;
}
.bjb-hero__copy, .bjb-hero__panel { position: relative; }
.bjb-hero__copy { display: flex; flex-direction: column; gap: 18px; }
.bjb-hero__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bjb-hero__eyebrow .sh-twinkle { font-size: 22px; line-height: 1; }
.bjb-hero__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 74px;
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.bjb-hero__title-accent { color: var(--sh-blue); }
.bjb-hero__sub { font-size: 17px; line-height: 1.55; max-width: 58ch; color: #e6e4e2; }
.bjb-hero__panel {
  border: 1px solid var(--sh-grey-on-paper);
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bjb-hero__panel-label {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sh-grey-on-ink);
}
.bjb-hero__panel-answer {
  font-family: var(--sh-font-display);
  font-size: 40px;
  line-height: 1.02;
  color: var(--sh-blue);
}
.bjb-hero__panel-note {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--sh-grey-on-ink);
  border-top: 1px solid var(--sh-footer-rule);
  padding-top: 12px;
}

.wp-why__marked--blue { background-image: linear-gradient(var(--sh-tint-jobs), var(--sh-tint-jobs)); }
.wp-why__heading--ink { color: var(--sh-ink); }
.bjb-squares-intro { padding-bottom: 30px; }

.bjb-samples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.bjb-sample {
  background: var(--sh-paper);
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bjb-sample__chip {
  align-self: flex-start;
  border: 1px solid var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
}
.bjb-sample__chip--red { background: #fcbcd2; }
.bjb-sample__chip--yellow { background: #fdeadb; }
.bjb-sample__square {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.08;
  text-wrap: pretty;
}
.bjb-sample__why { font-size: 15px; line-height: 1.5; color: var(--sh-grey-on-tint); }

.bjb-howto {
  padding: 26px var(--sh-gutter) 30px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}
.bjb-howto__list { display: flex; flex-direction: column; gap: 14px; max-width: 62ch; }
.bjb-howto__list p { display: flex; align-items: baseline; gap: 12px; font-size: 16px; line-height: 1.5; }

.bjb-ramp {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--sh-ink);
}
.bjb-ramp__cell {
  display: block;
  text-decoration: none;
  color: var(--sh-ink);
  background: var(--verdict-tint);
  padding: 24px 20px;
  border-right: 1px solid var(--sh-ink);
}
.bjb-ramp__cell:last-child { border-right: 0; }
.bjb-ramp__cell:hover { color: var(--sh-ink); box-shadow: inset 0 0 0 3px var(--sh-ink); }
.bjb-ramp__cell img { width: 30px; height: 30px; display: block; }
.bjb-ramp__name {
  display: block;
  font-family: var(--sh-font-display);
  font-size: 28px;
  line-height: 1.02;
  margin-top: 16px;
}
.bjb-ramp__desc {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 10px;
  color: var(--sh-grey-on-tint);
  text-wrap: pretty;
}
.bjb-ramp__count {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 14px;
  color: var(--sh-grey-on-tint);
}
.bjb-ramp-note {
  background: #e5cde8;
  border-bottom: 1px solid var(--sh-ink);
  padding: 13px var(--sh-gutter);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.bjb-ramp-note__copy { font-family: var(--sh-font-mono); font-size: 11px; line-height: 1.7; }
.bjb-ramp-note__link {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  white-space: nowrap;
  color: var(--sh-ink);
  text-underline-offset: 3px;
}

.bjb-skip {
  background: var(--sh-ink);
  color: var(--sh-paper);
  border-bottom: 1px solid var(--sh-ink);
  padding: 48px var(--sh-gutter) 50px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: start;
}
.bjb-skip__copy { display: flex; flex-direction: column; gap: 15px; }
.bjb-skip__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: 0.98;
  max-width: 20ch;
  margin-bottom: 3px;
}
.bjb-skip__copy > p { font-size: 17px; line-height: 1.55; max-width: 60ch; color: #e6e4e2; }
.bjb-skip__not-list {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--sh-footer-rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bjb-skip__not-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.bjb-skip__no { font-family: var(--sh-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sh-grey-on-ink); }

.bjb-play { background: var(--sh-tint-jobs); border-bottom: 1px solid var(--sh-ink); padding: 40px var(--sh-gutter) 48px; }
.bjb-play__head {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 24px;
}
.bjb-play__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 42px; line-height: 1.02; margin-top: 10px; }
.bjb-play__sub { font-size: 17px; line-height: 1.55; max-width: 56ch; }
.bjb-play__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bjb-tool {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  text-decoration: none;
  color: var(--sh-ink);
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bjb-tool:hover { color: var(--sh-ink); box-shadow: inset 0 0 0 2px var(--sh-ink); }
.bjb-tool__kicker { font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.bjb-tool__name { font-family: var(--sh-font-display); font-size: 34px; line-height: 1.02; }
.bjb-tool__body { font-size: 15px; line-height: 1.5; }
.bjb-tool__cta { font-family: var(--sh-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; color: var(--sh-link); }
.bjb-tool__url { font-family: var(--sh-font-mono); font-size: 10px; color: var(--sh-grey-on-paper); }

.bjb-paper {
  border-bottom: 1px solid var(--sh-ink);
  padding: 14px var(--sh-gutter);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bjb-paper[hidden] { display: none; }
.bjb-paper__copy { font-family: var(--sh-font-mono); font-size: 11px; line-height: 1.7; color: var(--sh-grey-on-tint); }
.bjb-paper__links { margin-left: auto; font-family: var(--sh-font-mono); font-size: 11px; white-space: nowrap; }

.bjb-shelves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.bjb-shelf { background: var(--sh-paper); padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 14px; }
.bjb-shelf__name { font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.bjb-shelf__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
  font-family: var(--sh-font-display);
  font-size: 21px;
  line-height: 1.1;
}
.bjb-shelf__kind { font-family: var(--sh-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-grey-on-paper); white-space: nowrap; }

.bjb-recent { border-bottom: 1px solid var(--sh-ink); }
.bjb-recent__row {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 15px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-hairline);
  color: var(--sh-ink);
  text-decoration: none;
}
.bjb-recent__row:last-child { border-bottom: 0; }
.bjb-recent__row:hover { color: var(--sh-ink); background: #fff6ef; }
.bjb-recent__cell {
  flex: none;
  border: 1px solid var(--sh-ink);
  background: var(--sh-tint-jobs);
  text-align: center;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  padding: 3px 8px;
  white-space: nowrap;
}
.bjb-recent__title { font-family: var(--sh-font-display); font-size: 26px; line-height: 1.1; }
.bjb-recent__date {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  margin-left: auto;
  white-space: nowrap;
}

.bjb-send {
  position: relative;
  overflow: clip;
  background: var(--sh-tint-jobs);
  border-bottom: 1px solid var(--sh-ink);
  padding: 40px var(--sh-gutter) 44px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: center;
}
.bjb-send__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 40px; line-height: 1.02; margin-top: 10px; }
.bjb-send__body { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; }
.bjb-send__body p { font-size: 17px; line-height: 1.55; }
.bjb-send__button {
  align-self: flex-start;
  background: var(--sh-ink);
  color: var(--sh-paper);
  text-decoration: none;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bjb-send__button:hover { color: var(--sh-paper); }

@media (max-width: 900px) {
  .bjb-hero { grid-template-columns: 1fr; gap: 28px; padding: 30px 18px 34px; }
  .bjb-hero__title { font-size: 44px; }
  .bjb-samples { grid-template-columns: 1fr; }
  .bjb-howto { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px 26px; }
  .bjb-ramp { grid-template-columns: 1fr; }
  .bjb-ramp__cell { border-right: 0; border-bottom: 1px solid var(--sh-ink); }
  .bjb-ramp__cell:last-child { border-bottom: 0; }
  .bjb-ramp-note { padding: 12px 18px; }
  .bjb-skip { grid-template-columns: 1fr; gap: 24px; padding: 30px 18px 34px; }
  .bjb-skip__heading { font-size: 38px; }
  .bjb-play { padding: 26px 18px 30px; }
  .bjb-play__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
  .bjb-play__tools { grid-template-columns: 1fr; }
  .bjb-shelves { grid-template-columns: 1fr; }
  .bjb-recent__row { flex-wrap: wrap; gap: 10px; padding: 13px 18px; }
  .bjb-recent__title { font-size: 21px; }
  .bjb-send { grid-template-columns: 1fr; gap: 16px; padding: 26px 18px 30px; }
}

/* ==========================================================================
   /account/ (account.hbs, 17d/17f) and /podcast/ (podcast.hbs, 19c).
   ========================================================================== */

.account-hero { align-items: center; }
.account-signin { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.account-signin__button {
  background: var(--sh-ink);
  color: var(--sh-paper);
  text-decoration: none;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.account-signin__button:hover { color: var(--sh-paper); background: var(--sh-link); }
.account-signin__alt {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-underline-offset: 3px;
}

.account-acknowledged {
  background: var(--sh-tint-newsletter);
  border-bottom: 1px solid var(--sh-ink);
  padding: 30px var(--sh-gutter) 32px;
}
.account-acknowledged__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.02;
}
.account-acknowledged p { font-size: 16px; line-height: 1.55; max-width: 66ch; margin-top: 10px; }

.account-card {
  border-bottom: 1px solid var(--sh-ink);
  padding: 26px var(--sh-gutter) 30px;
  max-width: 860px;
}
.account-card__label {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.account-card__body { font-size: 16px; line-height: 1.55; max-width: 62ch; margin-bottom: 14px; }
.account-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--sh-hairline);
}
.account-card__value { font-family: var(--sh-font-display); font-size: 22px; line-height: 1.1; }
.account-card__value-group { display: flex; flex-direction: column; gap: 4px; }
.account-card__value-note {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}
.account-card__link {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-underline-offset: 3px;
}
.account-card__note { font-size: 14px; color: var(--sh-grey-on-tint); margin-top: 8px; }
.account-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.account-card__button {
  border: 1px solid var(--sh-ink);
  background: var(--sh-ink);
  color: var(--sh-paper);
  text-decoration: none;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-card__button:hover { color: var(--sh-paper); background: var(--sh-link); border-color: var(--sh-link); }
.account-card__button--quiet { background: var(--sh-paper); color: var(--sh-ink); }
.account-card__button--quiet:hover { background: var(--sh-paper); color: var(--sh-ink); border-color: var(--sh-ink); }

.account-feeds { display: flex; flex-direction: column; }
.account-feeds__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.account-feeds__row:hover { color: var(--sh-ink); background: #fff6ef; }
.account-feeds__name {
  font-family: var(--sh-font-display);
  font-size: 21px;
  line-height: 1.1;
  padding: 2px 10px;
}
.account-feeds__name--roundup { background: var(--sh-tint-newsletter); }
.account-feeds__name--bjb { background: #fcbcd2; }
.account-feeds__name--deep { background: #e5cde8; }
.account-feeds__path {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-link);
  white-space: nowrap;
}
.ask-band__link + .ask-band__close { margin-top: 2px; }

/* Podcast */
.podcast-subscribe {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-ink);
  background: #fff6ef;
}
.podcast-subscribe__label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.podcast-subscribe__app {
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.1;
  text-underline-offset: 3px;
}
.podcast-episodes__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 30px var(--sh-gutter) 8px;
}
.podcast-episodes__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 46px; line-height: 1; }
.podcast-episodes__count {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}
.podcast-episodes { padding: 10px var(--sh-gutter) 34px; }
.podcast-episode {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--sh-hairline);
}
.podcast-episode__play {
  width: 56px;
  height: 56px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-link);
  display: flex;
  align-items: center;
  justify-content: center;
}
.podcast-episode__play:hover { background: var(--sh-ink); }
/* The triangle is drawn with borders, not the ▶ character — the glyph sits low in its
   em box and no amount of flex centering fixes it (15 §2). */
.podcast-episode__play-glyph {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--sh-paper);
  margin-left: 3px;
}
.podcast-episode__title {
  font-family: var(--sh-font-display);
  font-size: 27px;
  line-height: 1.08;
  color: var(--sh-ink);
  text-decoration: none;
}
.podcast-episode__title:hover { color: var(--sh-link); }
.podcast-episode__meta {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  margin-top: 6px;
}
.podcast-episode__blurb { font-size: 15px; line-height: 1.5; max-width: 66ch; margin-top: 8px; }
.podcast-episode__read {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
  text-underline-offset: 3px;
}
.podcast-episodes__empty {
  padding: 10px var(--sh-gutter) 34px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 62ch;
  color: var(--sh-grey-on-tint);
}

@media (max-width: 900px) {
  .account-card { padding: 20px 18px 24px; }
  .account-acknowledged { padding: 24px 18px 26px; }
  .account-acknowledged__heading { font-size: 30px; }
  .podcast-subscribe { padding: 12px 18px; }
  .podcast-episodes__head { padding: 24px 18px 6px; }
  .podcast-episodes__heading { font-size: 34px; }
  .podcast-episodes { padding: 8px 18px 26px; }
  .podcast-episode { grid-template-columns: 44px 1fr; }
  .podcast-episode__play { width: 44px; height: 44px; }
  .podcast-episode__read { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   /newsletter/browse/ (browse-newsletter.hbs, Homepage turn 16; record 14).
   ========================================================================== */

.browse-header--single { grid-template-columns: minmax(0, 720px); }

.news-search {
  padding: 24px var(--sh-gutter) 26px;
  border-bottom: 1px solid var(--sh-ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
}
.news-search[hidden] { display: none; }
.news-search__label {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.news-search__form { display: flex; align-items: stretch; }
.news-search__form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--sh-ink);
  border-right: 0;
  background: var(--sh-paper);
  padding: 13px 16px;
  font-family: var(--sh-font-mono);
  font-size: 12px;
  color: var(--sh-ink);
}
.news-search__form button {
  border: 1px solid var(--sh-ink);
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 13px 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.news-search__scope {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}

/* The three series — numeral-cell tints, motif sizes per 14 §6 (label 10px/0.06em). */
.series-index { border-bottom: 1px solid var(--sh-ink); }
.series-index__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 16px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.series-index__row:last-child { border-bottom: 0; }
.series-index__row:hover { color: var(--sh-ink); background: #fff6ef; }
.series-index__cell {
  border: 1px solid var(--sh-ink);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.series-index__cell--roundup { background: var(--sh-tint-newsletter); }
.series-index__cell--bjb { background: #fcbcd2; }
.series-index__cell--deep { background: #e5cde8; }
.series-index__count { font-family: var(--sh-font-display); font-size: 30px; line-height: 1; }
.series-index__cell-name {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.series-index__name { display: block; font-family: var(--sh-font-display); font-size: 27px; line-height: 1.06; }
.series-index__desc { display: block; font-size: 15px; line-height: 1.5; color: var(--sh-grey-on-tint); margin-top: 5px; }
.series-index__path {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-link);
  white-space: nowrap;
}

/* The A–Z: CSS columns, not a grid (14 §2) — punchline tags shouldn't shove neighbours. */
.tag-index { padding: 22px var(--sh-gutter) 34px; border-bottom: 1px solid var(--sh-ink); }
.tag-index__intro { font-size: 15px; line-height: 1.55; max-width: 88ch; color: var(--sh-grey-on-tint); margin-bottom: 20px; }
.tag-index__list { columns: 3; column-gap: 44px; }
.tag-index__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
  break-inside: avoid;
}
.tag-index__row:hover { color: var(--sh-ink); background: #fff6ef; }
.tag-index__name { font-family: var(--sh-font-display); font-size: 19px; line-height: 1.15; }
.tag-index__count {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  color: var(--sh-grey-on-paper);
  white-space: nowrap;
}

.fn-send__aside a { text-underline-offset: 3px; }
.fn-send__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.fn-send__button--primary { background: var(--sh-ink); color: var(--sh-paper); }
.fn-send__button--primary:hover { color: var(--sh-paper); }

@media (max-width: 900px) {
  .news-search { padding: 18px 18px 22px; }
  .series-index__row { grid-template-columns: 110px 1fr; padding: 14px 18px; }
  .series-index__path { grid-column: 2; justify-self: start; }
  .tag-index { padding: 18px 18px 26px; }
  .tag-index__list { columns: 1; }
}

/* ==========================================================================
   /search/ (search.hbs; 18 §A, frames 1a–1c). Grouped results with each type's
   native row. States rendered by assets/js/search.js.
   ========================================================================== */

.search-bar { border-bottom: 1px solid var(--sh-ink); padding: 22px var(--sh-gutter) 0; }
.search-bar__form {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 0 16px;
  max-width: 860px;
}
.search-bar__glyph { font-size: 22px; line-height: 1; }
.search-bar__form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 15px 0;
  font-family: var(--sh-font-display);
  font-size: 24px;
  color: var(--sh-ink);
}
.search-bar__form input:focus-visible { outline: none; }
.search-bar__form:focus-within { outline: 3px solid var(--sh-blue); outline-offset: -3px; }
.search-bar__clear {
  border: 0;
  background: none;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  cursor: pointer;
  white-space: nowrap;
}
.search-bar__types { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 16px; }
.search-bar__types[hidden] { display: none; }
.search-bar__type {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
}
.search-bar__type-count { color: var(--sh-grey-on-paper); }

.search-group { border-bottom: 1px solid var(--sh-ink); padding-bottom: 8px; }
.search-group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px var(--sh-gutter) 10px;
  border-bottom: 2px solid var(--sh-ink);
}
.search-group__head .sh-twinkle { font-size: 20px; line-height: 1; }
.search-group__name { font-family: var(--sh-font-display); font-weight: 400; font-size: 30px; line-height: 1; margin-right: auto; }
.search-group__note {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}

.search-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 13px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.search-row:hover { color: var(--sh-ink); background: #fff6ef; }
.search-row__lead { flex: none; }
.search-row__lead .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  padding: 3px 8px;
  white-space: nowrap;
}
.search-row__lead .chip img { width: 15px; height: 15px; }
.search-row__lead .chip--directory { background: var(--sh-tint-resources); }
.search-row__title { display: block; font-family: var(--sh-font-display); font-size: 23px; line-height: 1.12; }
.search-row__sub {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sh-grey-on-tint);
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-row__aside {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  white-space: nowrap;
}
.search-row__cell {
  border: 1px solid var(--sh-ink);
  background: var(--sh-tint-newsletter);
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
}
.search-row__cell-day { font-family: var(--sh-font-display); font-size: 21px; line-height: 1; }
.search-row__cell-mon {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
}
.search-row__dagger {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 30px;
  line-height: 0.8;
  color: var(--sh-hot-pink);
  align-self: start;
}

.search-empty {
  padding: 36px var(--sh-gutter) 40px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}
.search-empty[hidden] { display: none; }
.search-empty--resting { grid-template-columns: minmax(0, 720px); }
.search-empty__heading { font-family: var(--sh-font-display); font-weight: 400; font-size: 38px; line-height: 1.02; }
.search-empty__copy p { font-size: 16px; line-height: 1.55; max-width: 58ch; margin-top: 12px; }
.search-empty__browse { border: 1px solid var(--sh-ink); padding: 14px 16px 6px; }
.search-empty__browse-label {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sh-ink);
}
.search-empty__browse-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
  font-family: var(--sh-font-display);
  font-size: 19px;
  line-height: 1.15;
}
.search-empty__browse-row:last-child { border-bottom: 0; }
.search-empty__browse-row:hover { color: var(--sh-ink); background: #fff6ef; }
.search-empty__browse-row span:last-child { font-family: var(--sh-font-mono); font-size: 11px; color: var(--sh-grey-on-paper); }

.search-scope {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  padding: 13px var(--sh-gutter);
  border-bottom: 1px solid var(--sh-ink);
  background: #fff6ef;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--sh-grey-on-tint);
}
.search-scope[hidden] { display: none; }
.search-scope a { white-space: nowrap; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .search-bar { padding: 16px 18px 0; }
  .search-bar__form input { font-size: 19px; padding: 13px 0; }
  .search-group__head { padding: 14px 18px 9px; }
  .search-row { grid-template-columns: auto minmax(0, 1fr); padding: 12px 18px; }
  .search-row__aside { grid-column: 2; }
  .search-row__title { font-size: 20px; }
  .search-empty { grid-template-columns: 1fr; gap: 22px; padding: 26px 18px 30px; }
  .search-scope { padding: 12px 18px; }
}

/* --------------------------------------------------------------------------
   /fundraiser/ — a ledger, not a thermometer (12 §3; Who Pays frames 2a/2b).
   Shares the who-pays chrome: wp-hero (near-black + coral halftone), wp-band, ask-band.
   Only the fundraiser-specific pieces live here. No fill, no percentage, no progress
   geometry anywhere in this block — a bar is a race, a ledger is a price list.
   -------------------------------------------------------------------------- */

.fr-hero { grid-template-columns: 1fr 360px; }

/* The raised box. Hand-counted figure with its stamp — the stamp is what makes a
   week-stale number honest. #b8b6b4 is the small-text floor on the near-black ground. */
.fr-raised {
  border: 1px solid var(--sh-grey-on-paper);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fr-raised__label {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sh-grey-on-ink);
}
.fr-raised__amount {
  font-family: var(--sh-font-display);
  font-size: 76px;
  line-height: 0.9;
  color: var(--sh-coral);
}
.fr-raised__stamp {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--sh-grey-on-ink);
}

/* The ledger. */
.fr-ledger {
  padding: 30px var(--sh-gutter) 36px;
  border-bottom: 1px solid var(--sh-ink);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}
.fr-ledger__head { display: flex; flex-direction: column; gap: 12px; }
.fr-ledger__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.02;
}
.fr-ledger__sub { font-size: 16px; line-height: 1.5; color: var(--sh-grey-on-tint); }

.fr-ledger__rows { display: flex; flex-direction: column; }
.fr-rung {
  display: grid;
  grid-template-columns: 96px 1fr 110px;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--sh-hairline);
}
.fr-rung__amount {
  font-family: var(--sh-font-mono);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sh-grey-on-paper);
}
.fr-rung--covered .fr-rung__amount { color: var(--sh-ink); }
.fr-rung__buys { font-size: 17px; line-height: 1.45; }
.fr-rung__status {
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-ink);
}
.fr-rung__status .sh-twinkle { color: var(--sh-coral); font-size: 14px; }

.fr-ledger__over {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.fr-ledger__over .sh-twinkle { color: var(--sh-coral); font-size: 15px; line-height: 1; flex: none; }

/* The two commitments, on the shared hairline grid. */
.fr-cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
}
.fr-cell {
  background: var(--sh-paper);
  padding: 30px var(--sh-gutter) 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fr-cell__label {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fr-cell__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.04;
  max-width: 22ch;
}
.fr-cell__body { font-size: 16px; line-height: 1.5; }

@media (max-width: 900px) {
  .fr-hero { grid-template-columns: 1fr; }
  .fr-raised { padding: 18px 16px 20px; }
  .fr-raised__amount { font-size: 56px; }

  .fr-ledger {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 18px 26px;
  }
  .fr-ledger__heading { font-size: 30px; }
  .fr-ledger__sub { font-size: 15px; }

  /* 2b: amount and status share the first row, what-it-buys takes the second. */
  .fr-rung {
    grid-template-columns: 1fr auto;
    gap: 3px 12px;
    padding: 11px 0;
  }
  .fr-rung__amount { font-size: 15px; }
  .fr-rung__buys { grid-column: 1 / -1; font-size: 15px; }
  .fr-rung__status { grid-row: 1; grid-column: 2; }
  .fr-ledger__over { font-size: 16px; margin-top: 8px; }

  .fr-cells { grid-template-columns: 1fr; }
  .fr-cell { padding: 20px 18px 22px; }
  .fr-cell__heading { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   Comment counts on issue rows and cards (comments canvas: non-zero only, never in email).
   {{comment_count empty="" ... class="sh-comment-count"}} renders nothing at zero, so the
   separator lives here rather than dangling in the template.
   -------------------------------------------------------------------------- */
.sh-comment-count::before { content: " · "; }

/* ==========================================================================
   /jobs/{slug}/ — a rated job listing (partials/post-job.hbs, job-similar.hbs).
   Record: design/01a-index-jobs-decisions.md §4–5. Design: Jobs canvas 1c (header from
   8a), 7a closed, 7b ghost job, 9a reader-submitted, 12a at 390px.

   The body is the bjb-job-tool's HTML, so almost everything below styles {{content}}
   rather than markup this theme wrote. Selectors stay generic (h2, blockquote, p) for
   that reason — the tool must not have to learn our class names.
   ========================================================================== */

.jobpost__strip .section-strip__name { text-decoration: none; }
.jobpost__strip-company {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* 9a: provenance reads as one of the facts, not as a badge shouting for attention. */
.jobpost__provenance {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 3px 7px;
}
/* Closed: the strip goes grey (01a §5, §8). The rating keeps its own tint — see below. */
.jobpost--closed .jobpost__strip { background: var(--sh-tint-closed); }

.jobpost__header {
  padding: 34px var(--sh-gutter) 30px;
  border-bottom: 2px solid var(--sh-ink);
}
.jobpost__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
.jobpost--closed .jobpost__title { color: #3a3a3a; }

.jobpost__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
/* The rating as a tinted bordered block rather than its own band (8a beat 1c's first
   draft). It keeps its tint on a closed listing: the rating is a permanent fact about the
   posting, and greying it would imply the reading expired with the link (01a §5). */
.jobpost__rating {
  font-family: var(--sh-font-display);
  font-size: 22px;
  line-height: 1;
  padding: 6px 12px;
  gap: 9px;
}
.jobpost__rating img { width: 20px; height: 20px; }
.jobpost__meta-fact {
  font-family: var(--sh-font-body);
  font-size: 16px;
}
.jobpost__arrangement::after { content: ", "; }
/* Open/Closed and Posted/Closed text pairs (01a §11). Both strings are rendered and CSS
   picks one, because the Handlebars alternative — an {{else}} inside {{#foreach tags}} —
   fires once per non-matching tag. The state class itself comes off the SLUG via
   {{#match}}, so the verdict of "is this closed" is still decided server-side. */
.chip.is-closed, .is-closed { display: none; }
.job-row--closed .chip.is-closed { display: inline-flex; }
.jobpost--closed .is-closed { display: inline; }
.job-row--closed .chip.is-open,
.job-row--closed .is-open,
.jobpost--closed .is-open { display: none; }
.jobpost--closed .jobrail__block--apply { display: none; }

/* Resource cards: events promote the excerpt to a date band and describe from the body;
   every other directory uses the excerpt as the description (02a §5–6). */
.library-card__body { display: contents; }
.library-card__when,
.library-card__desc--body { display: none; }
.library-card__body.is-event .library-card__when,
.library-card__body.is-event .library-card__desc--body { display: block; }
.library-card__body.is-event .library-card__desc--excerpt { display: none; }

/* Portfolio dates: undated pieces show the year alone (03a §1). */
.clip-file__credit .is-year,
.chip--plain .is-year { display: none; }
.is-undated .is-year { display: inline; }
.is-undated .is-full { display: none; }

/* The rating chip slot (partials/rating-chip.hbs, 01a §11). The verdict itself is resolved
   server-side by slug with {{#match}} — the only thing CSS decides here is whether the
   "Not yet rated" fallback shows, and it shows unless a real chip rendered. If :has() is
   missing both appear: visibly wrong, never silently empty (§11). */
.rating-slot { display: contents; }
.chip--unrated {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #e6e4e2;
  border: 1px solid var(--sh-ink);
  padding: 4px 9px;
}
.rating-slot:has(.chip--rating) .chip--unrated { display: none; }

/* Company, salary and location are all revealed the same way: the markup prints every tag
   and CSS shows the one whose slug carries the right prefix. Handlebars has no prefix
   match, and — unlike {{primary_tag}} — this does not care what order the tags are in. */
.jobpost__company .fact-tag[data-slug^="job-company-"] { display: inline; }
/* Portfolio publication, same reasoning: #portfolio at sort order 0 kills primary_tag. */
.jobpost__company--pub .fact-tag[data-slug^="port-pub-"] { display: inline; }
.jobrail__company-link { display: none; }
.jobrail__company-link[data-slug^="job-company-"] { display: block; }
.jobpost__meta-fact--salary .fact-tag[data-slug^="job-salary-"] { display: inline; }
.jobpost__meta-fact--location .fact-tag[data-slug^="job-location-"] { display: inline; }
.jobpost__meta-fact--location .fact-tag[data-slug^="job-location-"] ~ .fact-tag[data-slug^="job-location-"]::before { content: " · "; }
.jobpost__meta-fact--salary:not(:has([data-slug^="job-salary-"])) .fact-fallback { display: inline; }

/* State callouts. Both sit above the notes so a reader meets them before the rating. */
.jobpost__callout {
  margin: 26px var(--sh-gutter) 0;
  border: 1px solid var(--sh-ink);
  padding: 18px 20px;
  max-width: 66ch;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jobpost__callout p { font-size: 16px; line-height: 1.55; margin: 0; }
.jobpost__callout-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.jobpost__callout--closed { background: var(--sh-tint-closed); }
/* 7b's light pink. A different axis from the rating: one says how bad the posting is, the
   other whether it is a posting at all, so it must not borrow a rating tint (01a §8). */
.jobpost__callout--ghost { background: #f5d9f1; }

.jobpost__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
  padding: 30px var(--sh-gutter) 0;
  align-items: start;
}

/* ---- the tool's body ---------------------------------------------------- */

.jobpost__content { font-family: var(--sh-font-body); }
.jobpost__content > * { max-width: 66ch; }
.jobpost__content p {
  font-size: 17px;
  line-height: 1.62;
  margin: 14px 0 0;
}
/* Section headings inside a page: Instrument Serif 36px with a coral ✦ over a 2px rule
   (01a §2.4). "Steph's Notes", "From the Reviews" and "3 Comments" are peers. */
.jobpost__content h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 34px 0 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sh-ink);
}
.jobpost__content h2::before {
  content: "✦";
  font-size: 26px;
  color: var(--sh-coral);
  line-height: 1;
  flex: none;
}
.jobpost__content h3 {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.08;
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--sh-ink);
}
/* The company's own words. Same device as everywhere else on the site — a left bar means
   someone else is talking, and Steph's reply sits outside it as ordinary body copy with no
   marker at all (09 turns 23–25, 34). The tool emits blockquote > p > em for quoted lines
   and a bare <p> for commentary, so this needs no authoring discipline. */
.jobpost__content blockquote {
  margin: 26px 0 0 22px;
  border-left: 2px solid var(--sh-grey);
  padding: 2px 0 2px 16px;
}
.jobpost__content blockquote p {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  margin: 0;
}
/* The original JD is reference, not reading, so it takes the full column rather than the
   66ch measure (01a §4) — it is the one part of the page a reader scans against the source
   instead of reading through. */
.jobpost__content h3 ~ p,
.jobpost__content h3 ~ ul,
.jobpost__content h3 ~ h4 { max-width: none; }

/* The apply control is a kg-button-card the tool writes into the body. This is the one
   permanent theme rule 01a §5 calls for: on a closed listing it comes off the page rather
   than being edited out by hand, listing by listing. */
.jobpost--closed .kg-button-card,
body.tag-job-status-closed .kg-button-card { display: none; }

.jobpost__content .kg-button-card { margin-top: 26px; }
.jobpost__content .kg-btn {
  display: inline-block;
  font-family: var(--sh-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 14px 26px;
}

/* ---- the rail ----------------------------------------------------------- */

.jobpost__rail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
}
.jobrail__block {
  border-top: 1px solid var(--sh-hairline);
  padding: 16px 0;
}
.jobrail__block:first-child { border-top: none; padding-top: 0; }
.jobrail__label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  margin: 0;
}
.jobrail__value {
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.2;
  margin: 7px 0 0;
}
.jobrail__company { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.jobrail__logo { width: 28px; height: 28px; object-fit: contain; flex: none; }
.jobrail__company-name { font-family: var(--sh-font-display); font-size: 20px; line-height: 1.2; }
.jobrail__link,
.jobrail__note { display: block; margin-top: 8px; }
.jobrail__link { font-family: var(--sh-font-mono); font-size: 11px; letter-spacing: 0.06em; }
.jobrail__note { font-size: 13px; line-height: 1.5; color: var(--sh-grey-on-paper); }
.jobrail__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jobrail__share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jobrail__share a,
.jobrail__copy {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  padding: 6px 10px;
  cursor: pointer;
}
/* 00 §5 where a reader is actually looking at a rating. Not small print — it does the same
   job as the Bad Job Bingo standing note inside an issue, so it takes body size. */
.jobrail__disclaimer {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sh-ink);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- similar jobs ------------------------------------------------------- */

.jobsimilar { padding: 40px var(--sh-gutter) 0; }
.jobsimilar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sh-ink);
}
.jobsimilar__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
}
.jobsimilar__heading .sh-twinkle { color: var(--sh-coral); font-size: 26px; }
.jobsimilar__all { font-family: var(--sh-font-mono); font-size: 11px; letter-spacing: 0.06em; }

/* 390px (12a). Three columns become one; the rail follows the body rather than being cut,
   because everything in it is a fact the reader still wants. */
@media (max-width: 900px) {
  .jobpost__header { padding-left: 18px; padding-right: 18px; }
  .jobpost__title { font-size: 38px; }
  .jobpost__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .jobpost__rail { position: static; }
  .jobpost__callout { margin-left: 18px; margin-right: 18px; }
  .jobsimilar { padding-left: 18px; padding-right: 18px; }
  .jobsimilar__heading { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   /resources/{slug}/ — the single entry (partials/post-resource.hbs).
   Record: design/02a-index-resources-decisions.md §5; frames 4b (page) and
   4c (fact block). Same measure as /jobs/{slug}/: reading column + 320px rail
   + 60px gap. The canvas draws its labels at 9px; they rise to the 10px floor
   here (CLAUDE.md — never smaller than 10px), same correction the job rail made.
   -------------------------------------------------------------------------- */

/* Directory, collections and publisher are revealed off the tag slugs by prefix —
   the markup prints every tag, CSS shows the right ones (01a §10). Shared by the
   strip and the rail. */
.respost__dir .fact-tag[data-slug^="res-directory-"] { display: inline; }
.respost__dir .fact-tag[data-slug^="res-directory-"] ~ .fact-tag[data-slug^="res-directory-"]::before { content: " · "; }
.respost__collections .fact-tag[data-slug^="res-collection-"] { display: inline; }
.respost__collections .fact-tag[data-slug^="res-collection-"] ~ .fact-tag[data-slug^="res-collection-"]::before { content: " · "; }
.respost__publisher .fact-tag[data-slug^="res-publisher-"] { display: inline; }

.respost__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
  padding: 38px var(--sh-gutter) 40px;
  align-items: start;
}

/* ---- header: cover art + title + chips (4b) ------------------------------ */

.respost__header { display: flex; gap: 20px; align-items: flex-start; }
.respost__art {
  width: 104px;
  height: 104px;
  flex: none;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
}
.respost__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.respost__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
/* Events keep dates + location in the excerpt (02a §5); every other directory's
   excerpt is card copy, so the line renders only on an event entry. */
.respost__when { display: none; }
.respost--event .respost__when {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 10px 0 0;
}
.respost__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ---- vendor disclosure band (02a §3/§5): who published it, nothing on top --- */

.respost__vendor {
  border: 1px solid var(--sh-ink);
  background: #f7cec7;
  padding: 12px 14px;
  margin-top: 22px;
}
.respost__vendor-line {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

/* ---- the fact block (02a §5, 4c) — built by resource-post.js from the typed
   Label: value run; only the fields present render. Two columns like 4b; the
   border arithmetic keeps the bottom row clean at any count. ----------------- */

.respost-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--sh-ink);
  margin-top: 22px;
}
.respost-facts__row {
  display: flex;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid #e6e4e2;
}
.respost-facts__row:nth-child(odd) { border-right: 1px solid var(--sh-ink); }
.respost-facts__row:last-child,
.respost-facts__row:nth-child(odd):nth-last-child(2) { border-bottom: 0; }
.respost-facts__label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  min-width: 96px;
  flex: none;
  padding-top: 5px;
}
.respost-facts__value {
  font-family: var(--sh-font-display);
  font-size: 19px;
  line-height: 1.1;
}

/* ---- the body, as typed --------------------------------------------------- */

.respost__content { font-family: var(--sh-font-body); margin-top: 22px; }
.respost__content > * { max-width: 66ch; }
.respost__content p {
  font-size: 17px;
  line-height: 1.62;
  margin: 14px 0 0;
}
/* House section heading — "Where to find it", "Steph's Notes" (Tooling and Gear
   only, 00 §5), an event's Tickets / Schedule / Refunds. Same as /jobs/{slug}/. */
.respost__content h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 34px 0 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sh-ink);
}
.respost__content h2::before {
  content: "✦";
  font-size: 26px;
  color: var(--sh-coral);
  line-height: 1;
  flex: none;
}
.respost__content h3 {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.08;
  margin: 34px 0 0;
}
/* Their words (02a §5): the publisher's own description, Instrument Serif italic
   with the peach bar — the resources page marks the border in peach where the job
   page uses grey (4b). The credit sits under it in the meta voice. */
.respost__content blockquote {
  margin: 20px 0 0;
  border-left: 2px solid var(--sh-peach);
  padding: 2px 0 2px 16px;
  max-width: 60ch;
}
.respost__content blockquote p {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  margin: 0;
}
.respost__content .respost__credit {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  margin: 8px 0 0;
  padding-left: 18px;
}
/* The links row — an all-links paragraph, classed by resource-post.js. Generic on
   purpose: platforms, retailers and join links are the same component (02a §5). */
.respost__content .respost__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  max-width: none;
}
.respost__content .respost__links a {
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
}
.respost__content .respost__links a::after { content: " ↗"; }

/* ---- nearby in the library (4b) ------------------------------------------ */

.resnearby { margin-top: 40px; }
.resnearby__head {
  display: flex;
  align-items: baseline;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--sh-ink);
}
.resnearby__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
}
.resnearby__heading .sh-twinkle { color: var(--sh-coral); font-size: 26px; }
.resnearby__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.resnearby__row:hover .resnearby__title { text-decoration: underline; text-underline-offset: 3px; }
.resnearby__title {
  font-family: var(--sh-font-display);
  font-size: 24px;
  line-height: 1.06;
}
.resnearby__kind .fact-tag[data-slug^="res-directory-"] {
  display: inline-block;
  border: 1px solid var(--sh-ink);
  background: var(--sh-tint-resources);
  font-family: var(--sh-font-mono);
  font-size: 10px;
  padding: 2px 6px;
  white-space: nowrap;
}
.resnearby__added {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  color: var(--sh-grey-on-paper);
  margin-left: auto;
  white-space: nowrap;
}

/* ---- the rail (4b): open button, bordered fact box, share, report ---------- */

.respost__rail { position: sticky; top: 24px; }
.respost-rail__open {
  display: block;
  background: var(--sh-ink);
  color: var(--sh-paper);
  text-align: center;
  padding: 15px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
}
/* display: block above would defeat the hidden attribute — it stays hidden until
   resource-post.js finds a real destination. */
.respost-rail__open[hidden] { display: none; }
.respost-rail__box { border: 1px solid var(--sh-ink); border-top: 0; }
.respost-rail__open[hidden] + .respost-rail__box { border-top: 1px solid var(--sh-ink); }
.respost-rail__row { padding: 11px 13px; border-top: 1px solid var(--sh-ink); }
.respost-rail__label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
  margin: 0;
}
.respost-rail__value {
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.18;
  margin: 3px 0 0;
}
/* About and Publisher rows vanish when the entry has no tag on that axis — nothing
   marks an independent entry (02a §3), so an empty row would say the wrong thing. */
.respost-rail__row--about:not(:has(.fact-tag[data-slug^="res-collection-"])) { display: none; }
.respost-rail__row--publisher:not(:has(.fact-tag[data-slug^="res-publisher-"])) { display: none; }
.respost-rail__row--share { background: #f2f0ee; }
.respost-rail__share { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.respost-rail__share a,
.respost-rail__copy {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  padding: 6px 10px;
  cursor: pointer;
}
.respost-rail__report {
  display: block;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin-top: 5px;
}

/* ---- 390px: one column, rail follows the body (same rule as /jobs/{slug}/) -- */

@media (max-width: 900px) {
  .respost__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .respost__rail { position: static; }
  .respost__title { font-size: 38px; }
  .respost__art { width: 84px; height: 84px; }
  .resnearby__heading { font-size: 28px; }
  .respost-facts { grid-template-columns: 1fr; }
  .respost-facts__row:nth-child(odd) { border-right: 0; }
  .respost-facts__row:nth-child(odd):nth-last-child(2) { border-bottom: 1px solid #e6e4e2; }
  .respost-facts__row:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   /portfolio/{slug}/ — the single clip (partials/post-portfolio.hbs).
   Record: design/03a-index-portfolio-decisions.md §4 (option 2a); mobile 5b.
   The canvas draws its labels at 9px; they rise to the 10px floor here
   (CLAUDE.md), same correction as the job and resource rails.
   -------------------------------------------------------------------------- */

/* Topic and format reveals — publication rides the existing .jobpost__company--pub. */
.portpost__topics .fact-tag[data-slug^="port-topic-"] { display: inline; }
.portpost__topics .fact-tag[data-slug^="port-topic-"] ~ .fact-tag[data-slug^="port-topic-"]::before { content: " · "; }
.portpost__formats .fact-tag[data-slug^="port-format-"] { display: inline; }
.portpost__formats .fact-tag[data-slug^="port-format-"] ~ .fact-tag[data-slug^="port-format-"]::before { content: " · "; }

/* ---- header band: chips over the balanced 76px title (2a) ----------------- */

.portpost__header {
  padding: 40px var(--sh-gutter) 32px;
  border-bottom: 1px solid var(--sh-ink);
}
.portpost__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.portpost__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 76px;
  line-height: 0.96;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

/* ---- layout: reading column against a bordered 320px rail (2a) ------------
   Unlike the job and resource pages this pair is divided by a rule, not a gap —
   the columns stretch so the border runs the full height. */

.portpost__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
}
.portpost__main {
  padding: 36px var(--sh-gutter) 0;
  border-right: 1px solid var(--sh-ink);
}

/* ---- the excerpt, fading mid-thought (03a §4) -----------------------------
   The system's one sanctioned gradient, reused for excerpt rather than paywall.
   An overlay on the tail of the real opening — no JS, no marker in the content. */

.portpost__excerpt {
  position: relative;
  max-width: 66ch;
  font-family: var(--sh-font-body);
  font-size: 17px;
  line-height: 1.62;
}
.portpost__excerpt p { margin: 18px 0 0; }
.portpost__excerpt > *:first-child { margin-top: 0; }
.portpost__excerpt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10em;
  background: linear-gradient(to bottom, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0.86) 58%, #fdfdfd 100%);
  pointer-events: none;
}

/* ---- the hand-off (2a): serif line + source URL + black button ------------
   Grid areas so 390px can reorder to line / button / URL (5b) without new markup. */

.portpost__cta {
  max-width: 66ch;
  border-top: 2px solid var(--sh-ink);
  margin-top: 4px;
  padding: 22px 0 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "line btn"
    "src  btn";
  align-items: center;
  column-gap: 24px;
}
.portpost__cta-line {
  grid-area: line;
  font-family: var(--sh-font-display);
  font-size: 26px;
  line-height: 1.1;
  margin: 0;
}
.portpost__cta-pub .fact-fallback { display: none; }
.portpost__cta-pub:not(:has(.fact-tag[data-slug^="port-pub-"])) .fact-fallback { display: inline; }
.portpost__cta-src {
  grid-area: src;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--sh-grey-on-paper);
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}
.portpost__cta-btn {
  grid-area: btn;
  border: 1px solid var(--sh-ink);
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 13px 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- the rail: facts, related, availability (2a) -------------------------- */

.portpost__rail {
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.portfacts { border: 1px solid var(--sh-ink); }
.portfacts__head {
  background: var(--sh-tint-portfolio);
  border-bottom: 1px solid var(--sh-ink);
  padding: 8px 14px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.portfacts__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--sh-hairline);
  align-items: baseline;
}
.portfacts__row:last-child { border-bottom: 0; }
.portfacts__label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}
.portfacts__value {
  font-family: var(--sh-font-display);
  font-size: 19px;
  line-height: 1.16;
}
/* Format and Topic rows vanish when the piece has no tag on that axis. */
.portfacts__row--format:not(:has(.fact-tag[data-slug^="port-format-"])) { display: none; }
.portfacts__row--topic:not(:has(.fact-tag[data-slug^="port-topic-"])) { display: none; }

.portrail__related { display: flex; flex-direction: column; gap: 12px; }
/* Suppresses entirely, heading included, when the topic has no siblings — the heading
   renders outside the {{#get}} (see the partial), so CSS owns the empty case. */
.portrail__related:not(:has(.portrail__related-row)) { display: none; }
.portrail__related-head {
  border-bottom: 2px solid var(--sh-ink);
  padding-bottom: 8px;
}
.portrail__related-heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  margin: 0;
}
.portrail__related-heading .sh-twinkle { color: var(--sh-coral); font-size: 18px; }
.portrail__related-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--sh-hairline);
  text-decoration: none;
  color: var(--sh-ink);
}
.portrail__related-row:hover .portrail__related-title { text-decoration: underline; text-underline-offset: 3px; }
.portrail__related-title {
  font-family: var(--sh-font-display);
  font-size: 20px;
  line-height: 1.12;
}
.portrail__related-credit {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-grey-on-paper);
}

.portrail__avail {
  border: 1px solid var(--sh-ink);
  background: var(--sh-peach);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.portrail__avail-line {
  font-family: var(--sh-font-display);
  font-size: 22px;
  line-height: 1.12;
  margin: 0;
}
.portrail__avail-link {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 390px (5b): one column, shorter fade, button before the URL ---------- */

@media (max-width: 900px) {
  .portpost__header { padding: 22px 18px; }
  .portpost__title { font-size: 42px; line-height: 0.98; }
  .portpost__layout { grid-template-columns: minmax(0, 1fr); }
  .portpost__main { border-right: 0; padding: 22px 18px 0; }
  .portpost__excerpt { font-size: 16px; }
  .portpost__excerpt::after { height: 5em; }
  .portpost__cta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "line"
      "btn"
      "src";
    row-gap: 12px;
    padding-top: 16px;
    padding-bottom: 24px;
  }
  .portpost__cta-line { font-size: 24px; line-height: 1.08; }
  .portpost__cta-btn { white-space: normal; padding: 14px; }
  .portpost__cta-src { text-align: center; margin: 0; }
  .portpost__rail { padding: 22px 18px; gap: 22px; }
}