@layer pages {
  /* Standalone HTTP error layout; intentionally independent of app chrome. */
  .error-layout {
    display: grid;
    min-height: 100dvh;
    margin: 0;
    place-items: center;
    background: var(--color-error-canvas);
    color: var(--color-error-text);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .error-page {
    width: 100%;
    padding: 2rem 1rem;
  }

  .error-page__card {
    display: grid;
    gap: 1rem;
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
  }

  .error-page__status {
    margin: 0;
    color: var(--color-error-status);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .error-page__title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .error-page__body {
    margin: 0;
    color: var(--color-error-body);
  }

  .error-page__home {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.1em;
  }

  .error-page__reference {
    margin: 0;
    color: var(--color-error-reference);
    font-size: 0.875rem;
  }

  .error-page__reference-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
  }

  /* The safe default belongs to main itself. A view may select a semantic
     modifier, but forgetting one can never remove the page gutters again. */
  .site-main {
    width: min(100%, var(--width-application));
    margin-inline: auto;
    padding: var(--space-7) var(--page-gutter) var(--space-8);
    font-family: var(--font-interface);
  }

  /* Canonical application-page composition, modelled on Notifications: the
     title, its header rule, and the body share one reading column at every
     viewport. Existing surfaces may keep their semantic hooks, but new
     utility pages use this shell directly. */
  .page-shell,
  .feed-page,
  .post-reading-page,
  .writing-page,
  .community-page,
  .identity-roster,
  .discovery-page,
  .collection-page,
  .admin-page,
  .community-management-page,
  .personal-page,
  .report-page {
    width: min(100%, var(--width-reading));
    margin-inline: auto;
  }

  /* Only a genuine two-column body earns the wider column; its header widens
     with it so the title and the rule still meet the body's edges. */
  .settings-page,
  .community-management-page--tags,
  .mod-dashboard {
    width: min(100%, var(--width-wide));
  }

  .community-management-page--tags > .community-management-header,
  .mod-dashboard > .community-management-header {
    width: 100%;
  }

  .page-header {
    width: min(100%, var(--width-reading));
    margin-inline: auto;
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-5);
    border-bottom: var(--border-thin) solid var(--color-border-strong);
  }

  .page-header__back {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .page-header__back > a {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
  }

  .page-header__title {
    max-width: 24ch;
    margin: 0;
    font-size: var(--text-page-title);
    letter-spacing: -0.045em;
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
  }

  .page-header__lede {
    max-width: 38rem;
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
    font-family: var(--font-reading);
    font-size: var(--text-lg);
    line-height: 1.45;
  }

  .page-footer-nav {
    width: min(100%, var(--width-reading));
    margin-inline: auto;
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: var(--border-thin) solid var(--color-border);
    font-size: var(--text-sm);
  }

  .journal-surface,
  .journal-tombstone {
    width: min(100%, var(--journal-width-feed));
    margin-inline: auto;
  }

  .journal-surface {
    background: var(--journal-canvas);
  }

  .admin-index {
    width: min(100%, var(--width-application));
  }

  .collection-header,
  .community-management-header,
  .personal-header,
  .report-header {
    width: min(100%, var(--width-reading));
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-5);
    border-bottom: var(--border-thin) solid var(--color-border-strong);
  }

  .collection-header__title,
  .community-management-header__title,
  .personal-header__title,
  .report-header__title {
    max-width: 16ch;
    margin: 0;
    font-size: var(--text-page-title);
    letter-spacing: -0.06em;
    line-height: 0.94;
    overflow-wrap: anywhere;
  }

  .personal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
  }

  .personal-header__action,
  .personal-header__action form {
    min-width: 0;
    margin: 0;
  }

  .settings-page > .personal-header,
  .boundaries-page > .personal-header,
  .userpics-page > .personal-header,
  .custom-lists-page > .personal-header,
  .sessions-page > .personal-header {
    width: 100%;
  }

  .personal-header__heading {
    min-width: 0;
  }

  .personal-header__back {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .community-management-header__back {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .feed__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-bottom: var(--space-7);
  }

  .feed__heading {
    max-width: 37rem;
  }

  .feed__title {
    margin: 0;
    font-size: var(--text-page-title);
    font-weight: 700;
    letter-spacing: -0.065em;
    line-height: 0.92;
  }

  .feed__lede {
    margin: var(--space-4) 0 0;
    color: var(--color-text);
    font-family: var(--font-reading);
    font-size: var(--text-lg);
    line-height: 1.45;
  }

  .feed__chronology {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .feed__mark-all-read-form {
    margin: 0;
  }

  .feed__new-posts-indicator {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
  }

  .feed__pagination {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-thin) solid var(--color-border);
    text-align: center;
  }

  .post-reading {
    width: min(100%, var(--journal-width-reading, var(--width-reading)));
    margin-inline: auto;
  }

  .comments-section {
    width: min(100%, var(--journal-width-reading, var(--width-reading)));
    margin: var(--space-8) auto 0;
  }

  .post-reading__back {
    width: min(100%, var(--journal-width-reading, var(--width-reading)));
    margin: var(--space-6) auto 0;
    padding-top: var(--space-4);
    border-top: var(--border-thin) solid var(--color-border);
    font-size: var(--text-sm);
  }

  .writing-page__header {
    width: min(100%, var(--width-reading));
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: var(--border-thin) solid var(--color-border-strong);
  }

  .writing-page__title {
    max-width: 16ch;
    margin: 0;
    font-size: var(--text-page-title);
    letter-spacing: -0.06em;
    line-height: 0.94;
  }

  .writing-page__status {
    width: min(100%, var(--width-reading));
    margin-bottom: var(--space-5);
  }

  .writing-page__status .post-status {
    margin-top: 0;
  }

  .writing-page__back {
    width: min(100%, var(--width-reading));
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: var(--border-thin) solid var(--color-border);
    font-size: var(--text-sm);
  }

  /* Public Home: a page-scoped print shell. It deliberately does not mutate
     Journal/Dispatch tokens used by the rest of the application. */
  body.home-body {
    --home-paper: #d7c9ac;
    --home-paper-deep: #d0bc95;
    --home-paper-dark: #c7b28a;
    --home-ink: #0a0a0a;
    --home-ink-soft: #1c1c1c;
    --home-warm-white: #efe9dc;
    --home-vermilion: #bc3b38;
    /* Small accent text needs a darker red than the display
       vermilion: #bc3b38 reaches only 3.36:1 on paper and 2.96:1 on
       the deeper wire band. The ink token clears 4.5:1 on all three
       paper tones (6.14 / 5.41 / 4.86), so it is safe wherever a
       paper surface carries accent-coloured type. */
    --home-vermilion-ink: #7c211d;
    background: var(--home-paper);
    color: var(--home-ink);
  }

  .home-body :is(.home-header, .site-main--home) {
    background-color: var(--home-paper);
    background-image:
      radial-gradient(rgb(10 10 10 / 7%) 0.45px, transparent 0.55px),
      radial-gradient(rgb(239 233 220 / 12%) 0.45px, transparent 0.55px);
    background-position: 0 0, 3px 3px;
    background-size: 6px 6px;
    color: var(--home-ink);
  }

  .site-main.site-main--home {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: clip;
    font-family: "Roboto Flex", "Source Sans 3", ui-sans-serif, system-ui,
      sans-serif;
  }

  .site-main--home > .flash {
    position: relative;
    z-index: 5;
    width: min(calc(100% - 2rem), 72rem);
    padding-top: 1rem;
  }

  .home-header {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid var(--home-ink);
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
      monospace;
  }

  .home-header a,
  .home-header button,
  .home-discovery a,
  .home-resources a {
    color: inherit;
  }

  .home-utility,
  .home-masthead,
  .home-wire,
  .home-discovery,
  .home-resources,
  .home-footer {
    width: min(100%, 96rem);
    margin-inline: auto;
    border-inline: 1px solid var(--home-ink);
  }

  .home-utility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.5rem;
    padding: 0.5rem clamp(1rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--home-ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.045em;
  }

  /* The compact GX mark holds the corner. It reverses on hover rather
     than filling, because it is already a filled block. */
  .home-utility__brand {
    display: inline-flex;
    text-decoration: none;
  }

  .home-utility__mark {
    display: grid;
    width: 2.25rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--home-ink);
    background: var(--home-ink);
    color: var(--home-paper);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.1em;
    line-height: 1;
    text-transform: uppercase;
  }

  .home-utility__brand:hover .home-utility__mark,
  .home-utility__brand:focus-visible .home-utility__mark {
    background: transparent;
    color: var(--home-ink);
  }

  /* Language and Support are two separate controls, spaced apart. */
  .home-utility__tools {
    display: flex;
    align-self: center;
    align-items: center;
    gap: 0.75rem;
  }

  .home-utility__support {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--home-ink);
    text-decoration: none;
  }

  .home-utility__support:hover,
  .home-utility__support:focus-visible {
    background: var(--home-ink);
    color: var(--home-warm-white);
  }

  .home-masthead {
    position: relative;
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(25rem, 0.9fr);
    gap: clamp(2rem, 6vw, 7rem);
    min-height: 12rem;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3.5rem)
      clamp(2rem, 5vw, 4rem);
  }

  .home-masthead__identity {
    /* Artwork is 1403 x 991, and its visual anchor — the midline of the
       tail, the tail/body pinch, and the eye — sits at ~65.7% of the
       image height rather than at its geometric centre. Centring the
       box alone would read as sitting low. */
    --home-fish-width: clamp(7rem, 13vw, 12rem);
    --home-fish-height: calc(0.7063 * var(--home-fish-width));
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
  }

  /* Editorial mascot, not a control: the masthead's accessible name
     comes from the h1 beside it.

     A bottom margin on a centre-aligned flex item lifts its content by
     half the margin, so 2 x (0.657 - 0.5) puts the anchor — not the box
     centre — on the row's midline. The name and motto centre on that
     same line, which lands them level with the middle of the tail. */
  .home-masthead__fish {
    display: block;
    flex: none;
    width: var(--home-fish-width);
    height: auto;
    margin-bottom: calc(0.314 * var(--home-fish-height));
  }

  .home-masthead__words {
    min-width: 0;
  }

  /* `font-family: inherit` takes the mono stack from `.home-header`, so the
     wordmark is under the same constraint as the discovery headings below and
     tracked harder: -0.08em overlapped adjacent glyphs by 0.24px at the 1440
     capture and 0.38px at 390. Tracking is 0 here too. Widening the wordmark
     costs it a mono cell, which the 320px band pays for in
     `--home-fish-width`. */
  .home-masthead__name {
    max-width: none;
    margin: 0;
    color: var(--home-ink);
    font-family: inherit;
    font-size: clamp(1.75rem, 4vw, 4.25rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.92;
    text-transform: lowercase;
  }

  /* The cap is a measure limit, not a layout switch: below about 880px the
     identity column is narrower than the cap, so the column decides where the
     motto wraps and the cap does nothing. It only binds on wide screens,
     which is where a motto long enough to wrap looks worst. 24ch broke the
     Russian motto onto two lines at 1440px while 38px of column sat unused;
     30ch keeps it on one line there and still bounds the line length. The
     font-size clamp below is a separate concern — it scales type down for
     narrow screens and is not what wrapped the line. */
  .home-masthead__motto {
    max-width: 30ch;
    margin: 1rem 0 0;
    color: var(--home-ink-soft);
    font-size: clamp(0.75rem, 1.4vw, 1rem);
    line-height: 1.45;
    text-transform: lowercase;
  }

  .home-account,
  .home-session-actions {
    position: relative;
    z-index: 3;
    align-self: start;
    justify-self: end;
    width: min(100%, 34rem);
  }

  .home-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1.25rem;
    padding-left: 0;
  }

  .home-account__identity {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.35rem;
    /* Identity column stays inside the height of the action block, so
       the username never hangs below the buttons' frame. */
    max-width: 5rem;
  }

  .home-account__userpic {
    display: block;
    line-height: 0;
  }

  .home-account__username {
    display: flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.8 / the suite's 24x24 floor: at 0.7rem the text alone is
       only ~17px tall. The identity column still fits inside the height
       of the action block beside it. */
    min-height: 1.5rem;
    max-width: 100%;
    overflow: hidden;
    color: var(--home-vermilion-ink);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration-thickness: 0.12em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-account__actions,
  .home-session-actions {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .home-session-actions {
    justify-content: flex-end;
  }

  .home-account__sign-out {
    margin: 0;
  }

  .home-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--home-ink);
    border-radius: 0;
    background: transparent;
    color: var(--home-ink);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
  }

  /* The primary action is prominent at rest, not activated. A permanent ink
     fill read as selected, pressed or current — and New post is none of
     those: Home is the current page. Prominence comes from a vermilion rule
     under an otherwise ordinary action, leaving the ink fill to mean
     "you are interacting with this". Covers the guest Create account action,
     which shares the class. */
  .home-header .home-action--primary {
    box-shadow: inset 0 -3px 0 var(--home-vermilion);
  }

  .home-action:hover,
  .home-action:focus-visible {
    background: var(--home-ink);
    color: var(--home-warm-white);
  }

  /* Pressed is distinguishable from hovered, so the reversal does not have
     to carry both meanings. */
  .home-action:active {
    background: var(--home-vermilion);
    color: #fff;
  }

  .home-wire {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.55rem clamp(1rem, 3vw, 2.5rem);
    border-top: 1px solid var(--home-ink);
    background: var(--home-paper-deep);
    font-size: 0.75rem;
  }

  .home-wire p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-wire__label,
  .home-wire__status,
  .home-preview-label,
  .home-section-kicker {
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
      monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .home-wire__status,
  .home-preview-label {
    color: var(--home-vermilion-ink);
  }

  .home-discovery {
    min-height: 32rem;
    padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 4rem)
      clamp(4rem, 8vw, 8rem);
  }

  .home-discovery__intro {
    --home-lede-size: clamp(1.8rem, 4vw, 4.5rem);
    display: grid;
    grid-template-columns: minmax(10rem, 0.35fr) minmax(18rem, 1fr);
    gap: 2rem;
    align-items: start;
    margin-bottom: clamp(3rem, 7vw, 6rem);
  }

  .home-discovery__eyebrow,
  .home-section-kicker {
    margin: 0;
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
      monospace;
  }

  /* Optical alignment: the eyebrow's cap line meets the x-height of the
     lede beside it, not the lede's cap line. The offset is the serif
     face's cap-top-to-x-top drop (~0.36 of the lede's size) less the
     eyebrow's own cap-top inset inside its line box. Measured against
     the rendered glyph boxes, not eyeballed. */
  .home-discovery__eyebrow {
    margin-top: calc(0.36 * var(--home-lede-size) - 0.09rem);
    line-height: 1;
  }

  .home-discovery__lede {
    max-width: 30ch;
    margin: 0;
    color: var(--home-ink);
    font-family: Georgia, Cambria, "Times New Roman", serif;
    font-size: var(--home-lede-size);
    line-height: 0.98;
    text-wrap: balance;
  }

  .home-discovery__field {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 0.8fr);
    gap: clamp(3rem, 7vw, 7rem);
  }

  .home-discovery__field > section {
    padding-top: 1rem;
    border-top: 1px solid var(--home-ink);
  }

  /* Proportional, not monospace. A mono cell gives `m` and `щ` the same
     advance as `i` and `т`, so the wide letters are drawn compressed and
     close up their sidebearings while the narrow ones float in theirs:
     equal advances, visibly unequal letterfit. Measured on the fallback
     this box resolves, one line of "Communities" ran gaps from 3.0px to
     6.5px at 1440. Zeroing the tracking stopped the glyphs colliding but
     could not even the fit out, because no monospace face can -- the grid
     is the point of one. At display size that reads as a defect rather
     than as a grid, so these two headings take Home's bundled Source Sans
     3, which covers Latin and Cyrillic. The roles where the grid reads as
     deliberate -- utility rail, labels, ticker, wordmark -- stay mono.

     Tracking is stated rather than left to inherit: the masthead's
     negative value arrived through inheritance from `.home-header`, and
     naming it here is what stops that happening again.

     The size is fluid between its ends, not fixed at either: 1.35rem
     holds to 800px, 2.7vw governs from 800px to ~1541px, and 2.6rem caps
     it above that. */
  .home-discovery__field h3,
  .home-resources h2 {
    margin: 0.6rem 0 1.5rem;
    color: var(--home-ink);
    font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.35rem, 2.7vw, 2.6rem);
    letter-spacing: 0;
    line-height: 1;
  }

  .home-community-list,
  .home-tag-list,
  .home-resources ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .home-community-list {
    counter-reset: home-community;
  }

  .home-community-list li {
    position: relative;
    padding: 1.15rem 0 1.15rem 3rem;
    border-top: 1px dotted var(--home-ink-soft);
    counter-increment: home-community;
  }

  .home-community-list li::before {
    content: "0" counter(home-community);
    position: absolute;
    left: 0;
    font-family: "Roboto Mono", ui-monospace, monospace;
    font-size: 0.72rem;
  }

  .home-community-list__name {
    color: var(--home-ink);
    font-family: Georgia, Cambria, "Times New Roman", serif;
    font-size: clamp(1.35rem, 2.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.05;
    text-decoration-color: var(--home-vermilion);
  }

  .home-community-list p,
  .home-discovery__preview p,
  .home-discovery__empty {
    max-width: 48ch;
    margin: 0.6rem 0 0;
    color: var(--home-ink-soft);
    line-height: 1.55;
  }

  .home-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1.75rem;
    margin-bottom: 1.5rem;
  }

  /* The section's own browse link sits well clear of the copy above it
     — including the empty states, which have no list in between. */
  .home-discovery__field .home-text-link {
    margin-top: 1.75rem;
  }

  .home-discovery__field .home-tag-list + .home-text-link {
    margin-top: 0;
  }

  .home-tag-list a,
  .home-text-link,
  .home-resources a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--home-ink);
    color: var(--home-ink);
    font-family: "Roboto Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
  }

  .home-tag-list a:hover,
  .home-tag-list a:focus-visible,
  .home-text-link:hover,
  .home-text-link:focus-visible,
  .home-resources a:hover,
  .home-resources a:focus-visible {
    background: var(--home-ink);
    color: var(--home-warm-white);
  }

  .home-discovery__preview {
    align-self: start;
  }

  .home-resources {
    /* Mirrors the shared heading size below so the optical nudge on the
       link row scales with the title. */
    --home-resources-title: clamp(1.35rem, 2.7vw, 2.6rem);
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) minmax(18rem, 1.2fr);
    align-items: end;
    gap: 2rem;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 4vw, 4rem);
    border-top: 1px solid var(--home-ink);
    background: var(--home-paper-dark);
  }

  /* The link row sits on the bottom edge of "References and help"
     rather than floating at the top of its column. */
  .home-resources h2 {
    margin-bottom: 0;
  }

  /* `align-items: end` lines the row up with the heading's *line box*.
     With `line-height: 1` the heading's descenders drop below that box,
     so the row is nudged down to meet the ink instead — the edge the
     eye actually reads as the bottom of the text. */
  .home-resources ul {
    display: flex;
    flex-wrap: wrap;
    align-content: end;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-bottom: calc(-0.055 * var(--home-resources-title));
  }

  .home-resources li > span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3rem 0.5rem;
    border: 1px dotted var(--home-ink);
    font-family: "Roboto Mono", ui-monospace, monospace;
    font-size: 0.75rem;
  }

  .home-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 7rem;
    padding: 1.5rem clamp(1rem, 4vw, 4rem);
    border-color: var(--home-ink);
    background: var(--home-ink);
    color: var(--home-warm-white);
    font-family: "Roboto Mono", ui-monospace, monospace;
    font-size: 0.75rem;
  }

  .home-footer p {
    margin: 0;
  }

  .home-footer #home-support {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem 1rem;
    text-align: right;
  }

  .home-footer .home-preview-label {
    color: #e67c74;
  }

  @media (max-width: 840px) {
    .home-masthead {
      grid-template-columns: 1fr;
      gap: 2rem;
      min-height: 0;
    }

    .home-account,
    .home-session-actions {
      justify-self: start;
    }

    /* The userpic is the card's right-hand anchor, so the card spans the
       column rather than stopping at its desktop max width. */
    .home-account {
      width: 100%;
    }

    .home-account__actions,
    .home-session-actions {
      justify-content: flex-start;
    }

    .home-discovery__intro,
    .home-discovery__field,
    .home-resources {
      grid-template-columns: 1fr;
    }

    /* Single column: the eyebrow sits above the lede, so the optical
       x-height offset has nothing to align to. */
    .home-discovery__eyebrow {
      margin-top: 0;
    }

    /* Nothing sits opposite the link row once the strip stacks, so it
       returns to the page's left edge with everything else. */
    .home-resources ul {
      justify-content: flex-start;
    }
  }

  @media (max-width: 540px) {
    .home-utility {
      align-items: flex-start;
    }

    .home-masthead {
      min-height: 0;
      padding-inline: 1rem;
    }

    .home-masthead__identity {
      --home-fish-width: 6rem;
    }

    .home-account {
      grid-template-columns: minmax(0, 1fr) 3.5rem;
      width: 100%;
      padding-left: 0;
    }

    .home-action {
      min-height: 2.75rem;
    }

    .home-wire {
      grid-template-columns: auto 1fr;
    }

    .home-wire p {
      white-space: normal;
    }

    .home-wire__status {
      display: none;
    }

    .home-discovery {
      padding-inline: 1rem;
    }

    .home-discovery__lede {
      font-size: clamp(1.8rem, 10vw, 3rem);
    }

    .home-footer {
      align-items: flex-start;
      flex-direction: column;
    }

    .home-footer #home-support {
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (max-width: 720px) {
    :root {
      --page-gutter: var(--space-4);
    }

    .site-main {
      padding-block: var(--space-6) var(--space-7);
    }

    .feed__header {
      align-items: flex-start;
      margin-bottom: var(--space-6);
    }

    .page-header,
    .collection-header,
    .community-management-header,
    .personal-header,
    .report-header {
      margin-bottom: var(--space-6);
    }

  }

  @media (max-width: 350px) {
    :root {
      --page-gutter: var(--space-3);
    }

    /* With honest tracking the wordmark needs its full 10 mono cells, and at
       320px the 6rem mascot leaves only nine -- "gedanken x" broke to a second
       line with the x alone on it. The mascot yields rather than the h1: it is
       decorative, and every measurement that depends on it is derived from
       this variable, so the anchor math above still holds. */
    .home-masthead__identity {
      --home-fish-width: 4.5rem;
    }
  }
}