@layer components {
  /* ── LODGE ──────────────────────────────────────────────────────
     The member's front room. Lives in the same cork environment as
     Stay (same nav, same paper surfaces). Reads as a mini stay-
     clipboard for whatever you've said yes to, with an invitations
     drawer as a full-width band underneath.

     Visual reference: the Corkins printed PDFs — center-aligned,
     upright sans, generous tracking. NO italics on this surface.
  ─────────────────────────────────────────────────────────────── */
  .stay-shell.home-shell {
    flex-direction: column;
    align-items: stretch;
    padding: 92px 0 0;
  }

  /* On the Lodge the nav scrolls away with the page (Neal, Jul 16) —
     the chrome shouldn't ride along over the content. */

  /* "+ New gathering" in the lodge nav uses the shared .btn-glass
     utility from buttons.css. The short label is hidden until mobile. */
  .home-nav-cta {
    white-space: nowrap;
    background: var(--ink);
    color: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    text-shadow: none;
  }
  .home-nav-cta:hover { background: var(--ink-hover); color: var(--paper); }
  .home-nav-cta-short { display: none; }
  .home-nav-cta:focus { outline: none; }
  .home-nav-cta:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
  }

  /* Mobile: tighten the glass pill in tight nav space. The full label
     ("+ New" / "+ Request a stay") stays visible at every width — it's
     short enough to fit alongside the wrapping brand wordmark, even
     down to 320px. */
  @media (max-width: 480px) {
    .btn-glass {
      padding: 0 10px;
      font-size: 11px;
    }
  }

  .home-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Greeting on cork — light type, centered. Upright (no italic).
     Generous padding-bottom keeps the title block roomy without
     widening the gap between the stay cards below it. */
  .home-greeting {
    text-align: center;
    padding: var(--space-9) var(--space-4) calc(var(--space-9) + var(--space-7));
  }
  .home-greeting h1 {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
    color: var(--ink);
  }
  .home-greeting-name { color: var(--ink); }

  /* The identity-only page: on the account, in nothing yet. Its whole job is
     the slate, so the title sits close above it rather than floating in the
     96px of inline padding this page used to carry. */
  .home-identity-only {
    padding: var(--space-8) 0 var(--space-9);
    text-align: center;
  }
  .home-identity-only h1 {
    font-family: var(--display);
    font-weight: var(--weight-medium);
    font-size: 26px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--space-5);
    color: var(--ink);
  }
  .home-identity-aside {
    margin: var(--space-5) auto 0;
    max-width: 44ch;
    font-size: 14px;
    color: var(--ink-faint);
  }
  .home-identity-aside a { color: var(--ink-soft); }
  .home-greeting .meta {
    color: var(--ink-faint);
    margin: 0;
    font-family: var(--display);
    font-style: normal;
  }

  /* ── SNAPSHOT CARD ─────────────────────────────────────────────
     A mini stay clipboard — solid beige, center-aligned content
     to echo the printed PDFs. Tappable as a single unit → /stay.
  ─────────────────────────────────────────────────────────────── */
  .home-snapshot-card {
    display: block;
    width: 100%;
    background: var(--paper);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.05),
      0 8px 24px rgba(0, 0, 0, 0.16),
      0 18px 40px rgba(0, 0, 0, 0.09);
    padding: var(--space-7) var(--space-6) var(--space-7);
    color: inherit;
    text-align: center;
  }

  /* Top-of-card eyebrow — small caps in tracked sans, like a section
     marker on the printed PDFs. */
  .home-snapshot-eyebrow {
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-5);
  }

  /* Compact stay — for additional confirmed stays sitting under the
     primary snapshot. Body-text register, row layout (content left,
     button right). Hand-rolled markup; nothing inherited from prep. */
  .compact-stay {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background: var(--paper);
    padding: var(--space-5) var(--space-6);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.04),
      0 4px 14px rgba(0, 0, 0, 0.13),
      0 10px 24px rgba(0, 0, 0, 0.07);
  }
  .compact-stay-body {
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  .compact-stay-title {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 18px;
    color: var(--ink);
    line-height: 1.25;
    margin: 0 0 4px;
    letter-spacing: 0.005em;
  }
  .compact-stay-desc {
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 8px;
    max-width: 60ch;
  }
  .compact-stay-meta {
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-faint);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
  }
  .compact-stay-meta .dot { color: var(--ink-faint); }
  .compact-stay-countdown {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: var(--weight-semibold);
    border-radius: 999px;
    white-space: nowrap;
  }
  .compact-stay-action { flex-shrink: 0; display: flex; gap: 8px; }

  /* "View N more" — a glass disclosure for extra hosted gatherings beyond
     the first two. The <summary> is the glass button; the list opens below. */
  .home-more { text-align: center; }
  .home-more-toggle {
    margin: 0 auto;
    list-style: none;
    cursor: pointer;
  }
  .home-more-toggle::-webkit-details-marker { display: none; }
  .home-more-toggle::marker { content: ""; }
  /* Single chevron, baseline-aligned; flips on [open]. Lives outside the
     toggling labels so it doesn.t jump between states. */
  .home-more-chev {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.85em;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  .home-more[open] .home-more-chev { transform: rotate(180deg); }
  .home-more-label-open { display: none; }
  .home-more[open] .home-more-label-closed { display: none; }
  .home-more[open] .home-more-label-open { display: inline; }
  .home-more-list { margin-top: var(--space-3); }
  .home-more-list .compact-stay { margin-top: var(--space-4); }
  .home-more-list .compact-stay:first-child { margin-top: 0; }

  /* Center the borrowed prep-identity internals. */
  .home-snapshot-card .prep-identity { margin-bottom: var(--space-5); }
  .home-snapshot-desc {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 auto var(--space-4);
  }
  .home-snapshot-card .prep-identity-title {
    font-size: 28px;
    font-style: normal;
    font-weight: var(--weight-medium);
  }
  .home-snapshot-card .prep-identity-meta { justify-content: center; }
  .home-snapshot-card .prep-dates { justify-content: center; }
  .home-snapshot-card .prep-hosts { justify-content: center; }
  .home-snapshot-card .prep-hosts-link { justify-content: center; }

  /* Override prep-todos italics — no italic on the Lodge. */
  .home-snapshot-todos { margin: 0 0 4px; text-align: left; }
  /* Compact checklist — the prep-page .chk-* list folded into the single
     stay card: borderless rows flush within the card, hairline dividers,
     tighter spacing. Progress bar + type tags carry over for consistency. */
  .chk--compact .chk-head { margin-bottom: 8px; }
  .chk--compact .chk-title { font-size: 16px; }
  .chk--compact .chk-progress { margin-bottom: 12px; }
  .chk--compact .chk-item {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
  }
  .chk--compact .chk-list li:last-child .chk-item { border-bottom: none; }
  .chk--compact .chk-item:hover { box-shadow: none; }
  .chk--compact .chk-item:hover .chk-item-title { color: var(--ink); }
  .chk--compact .chk-item-mark { width: 18px; height: 18px; }
  .chk--compact .chk-item-title { font-size: 14px; }
  /* Completed items collapse into a single quiet summary row. */
  .chk-completed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    color: var(--ink-faint);
    font-size: 13px;
  }
  .chk-completed-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--paid);
    color: #fff;
    font-size: 10px;
    flex-shrink: 0;
  }
  .chk-due-compact {
    flex-shrink: 0;
    font-size: 12px; font-weight: var(--weight-semibold);
    color: var(--due);
  }

  /* ── HOSTING VARIANT ───────────────────────────────────────────
     Used by /lodge/host. Same snapshot card, but with a full-width
     color band on top reading "YOU ARE HOSTING", and a paired pair
     of CTAs at the bottom: "View as guest" + "Manage gathering".
     The card itself loses its outer padding so the band can reach
     edge-to-edge — internal padding moves to .home-snapshot-card-body.
  ─────────────────────────────────────────────────────────────── */
  .home-snapshot-card.home-snapshot-card--hosting {
    padding: 0;
    overflow: hidden;
  }
  .home-hosting-band {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    text-align: center;
    padding: 12px var(--space-6);
  }
  .home-snapshot-card--hosting .home-snapshot-card-body {
    padding: var(--space-7) var(--space-6) var(--space-7);
  }

  /* Two-button footer — equal-weight paired CTAs side by side. */
  .home-snapshot-foot--pair {
    gap: var(--space-3);
  }

  /* ── THIS-WEEK VARIANT ─────────────────────────────────────────
     Snapshot when arrival is <7 days out. Same body as the default
     snapshot, but capped with a full-width arrive-green band reading
     "THIS WEEK" — pulls the eye toward the imminent stay.
  ─────────────────────────────────────────────────────────────── */
  .home-snapshot-card.home-snapshot-card--this-week {
    padding: 0;
    overflow: hidden;
  }
  .home-this-week-band {
    /* Bands stay black. */
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    text-align: center;
    padding: 12px var(--space-6);
  }
  .home-snapshot-card--this-week .home-snapshot-card-body {
    padding: var(--space-7) var(--space-6) var(--space-7);
  }
  /* Countdown pill — pink, matching the band. */
  .home-snapshot-card--this-week .prep-dates-countdown {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink-soft);
  }

  /* ── EMPTY STATES ──────────────────────────────────────────────
     Used by /lodge/empty when there are no confirmed stays. The
     snapshot card slot becomes a roomy, centered "nothing yet" — a
     calm expanse rather than a cramped placeholder.
  ─────────────────────────────────────────────────────────────── */
  .home-snapshot-card.home-snapshot-card--empty {
    padding: var(--space-9) var(--space-7);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
  }
  .home-empty-inner { max-width: 52ch; }
  .home-empty-inner .home-snapshot-eyebrow { margin-bottom: var(--space-4); }
  .home-empty-headline {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 28px;
    color: var(--ink);
    margin: 0 0 var(--space-4);
    line-height: 1.2;
  }
  .home-empty-body {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 var(--space-6);
  }

  /* Drawer empty state — quiet text on the wood. */
  .home-empty-drawer {
    text-align: center;
    padding: var(--space-5) 0;
    color: rgba(255, 255, 255, 0.85);
  }
  .home-empty-drawer p {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 16px;
    margin: 0 0 6px;
  }
  .home-empty-drawer-soft {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6);
    font-weight: var(--weight-normal) !important;
  }

  /* Footer — single centered "View details" button. */
  .home-snapshot-foot {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
  }
  /* When the checklist sits right above the foot, drop the extra top margin —
     the checklist already carries its own bottom rhythm. */
  .home-snapshot-todos + .home-snapshot-foot { margin-top: var(--space-3); }

  /* ── SOLO STAY CARD ────────────────────────────────────────────
     A confirmed stay that belongs to no gathering. Same snapshot-card
     chrome as a gathering card, but always capped with a colored band
     ("Your stay" / "Your stay · this week") that subsumes the separate
     this-week band and eyebrow, and a LEFT-aligned body: the dates are
     the headline, the rest (countdown, who's with you, the lodging) is
     one quiet meta line. No checklist, no note.
  ─────────────────────────────────────────────────────────────── */
  .home-snapshot-card.home-snapshot-card--solo {
    padding: 0;
    overflow: hidden;
  }
  /* On desktop the body is a row: the dates + meta on the left, "View
     details" inline on the right of the cell — no divider, no own line.
     (Mobile stacks it back to a column with a full-width button.) */
  .home-snapshot-card--solo .home-snapshot-card-body {
    padding: var(--space-7) var(--space-6) var(--space-7);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
  }
  /* The flex gap owns the spacing now — drop .prep-identity's own bottom margin
     so the meta line and "View details" don't end up with a triple-stacked gap. */
  .home-snapshot-card--solo .prep-identity { text-align: left; flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
  .home-snapshot-card--solo .prep-identity-title + .home-solo-meta { margin-top: var(--space-3); }
  .home-snapshot-card--solo .home-snapshot-foot {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .home-solo-meta {
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-faint);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    align-items: baseline;
  }
  .home-solo-meta .dot { color: var(--ink-faint); }
  .home-solo-meta-countdown {
    color: var(--arrive);
    font-weight: var(--weight-semibold);
  }

  /* ── INVITATIONS DRAWER ────────────────────────────────────────
     Full-width surface with rounded top edge — reads as a drawer
     that's slid up from below, even though it's static. Holds
     a stack of invitation letters.
  ─────────────────────────────────────────────────────────────── */
  .home-drawer {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Drawer fills the remaining vertical space so it always extends
       at least to the bottom of the viewport — even when there are
       no letters / few invitations. The shell is a column flexbox
       with min-height: 100vh, so flex: 1 takes whatever's left. */
    flex: 1 0 auto;
    margin-top: var(--space-9);
    background: var(--ink);
    border-radius: 0;
    padding: var(--space-8) 0 var(--space-9);
    overflow: hidden;
  }
  /* Soft top-edge sheen — light catching the rounded lip of the wood. */
  .home-drawer::before { display: none; }
  /* Inner edge darkening + faint vertical grain overlay so the
     wood feels deep and slightly hand-finished, not a flat photo. */
  .home-drawer::after { display: none; }
  .home-drawer > * { position: relative; }
  .home-drawer-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }

  /* Section tag — a plain white label on the black drawer. */
  .home-drawer-eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto var(--space-6);
    padding: 7px 16px;
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    text-align: center;
    color: var(--ink);
    background: var(--paper);
  }

  /* ── LETTER CARD ───────────────────────────────────────────────
     An invitation rendered as a letter, not a tile. No pip
     stamps — unread state shows as a calmer left-edge accent.
  ─────────────────────────────────────────────────────────────── */
  .letter-card {
    display: block;
    position: relative;
    background: var(--paper);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.06),
      0 6px 14px rgba(20, 12, 4, 0.28),
      0 18px 32px rgba(20, 12, 4, 0.22);
    padding: var(--space-5) var(--space-6) var(--space-5);
    text-decoration: none;
    color: inherit;
    margin-bottom: var(--space-6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    transform: rotate(var(--letter-tilt, -0.6deg));
  }
  /* Scatter — each letter takes a slightly different tilt so a stack
     reads as a casually-arranged set of envelopes, not a list. */
  .letter-card:nth-child(3n)   { --letter-tilt:  0.7deg; }
  .letter-card:nth-child(3n+1) { --letter-tilt: -0.9deg; }
  .letter-card:nth-child(3n+2) { --letter-tilt:  0.4deg; }
  .letter-card:last-child { margin-bottom: 0; }
  .letter-card:hover {
    text-decoration: none;
    transform: rotate(0deg) translateY(-2px);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.06),
      0 10px 22px rgba(20, 12, 4, 0.32),
      0 26px 44px rgba(20, 12, 4, 0.22);
  }

  .letter-eyebrow {
    margin-bottom: var(--space-2);
    color: var(--ink-soft);
  }
  .letter-card h3 {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-semibold);
    font-size: 22px;
    line-height: 1.15;
    margin: 0 0 var(--space-3);
    color: var(--ink);
  }
  .letter-excerpt {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-4);
    font-style: normal;
  }
  .letter-meta {
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap-tight);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-medium);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    margin-bottom: var(--space-4);
  }
  .letter-meta .dot { color: var(--ink-faint); }

  .letter-action {
    padding-top: var(--space-3);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--slate);
    font-weight: var(--weight-semibold);
  }
  .letter-card:hover .letter-action { color: var(--slate-hover); }

  /* ── DRAWER REQUEST SLIP ───────────────────────────────────────
     A stay you've asked for, sitting in the drawer next to inbound
     invitation letters — but lighter than an envelope: a small
     carbon-copy slip, no big title, a "waiting on a organizer" line.
  ─────────────────────────────────────────────────────────────── */
  .drawer-request {
    position: relative;
    background: var(--paper-warm);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.05),
      0 4px 10px rgba(20, 12, 4, 0.22);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    transform: rotate(var(--slip-tilt, 0.5deg));
  }
  .drawer-request:nth-child(2n) { --slip-tilt: -0.6deg; }
  .drawer-request:last-child { margin-bottom: 0; }
  .drawer-request-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }
  .drawer-request-eyebrow { color: var(--ink-faint); }
  .drawer-request-ago {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--ink-faint);
    white-space: nowrap;
  }
  .drawer-request-dates {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 17px;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: var(--space-2);
  }
  .drawer-request-note {
    font-family: var(--sans);
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 var(--space-3);
  }
  .drawer-request-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  .drawer-request-status {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-faint);
  }
  .drawer-request-link {
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--slate);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
  }
  .drawer-request-link:hover { color: var(--slate-hover); }

  /* ── DECLINED INVITATIONS DISCLOSURE ───────────────────────────
     A <details> block under the active letter pile. The summary is
     a quiet cream-on-wood pill; expanding it reveals declined items
     as line-separated rows in light text with no paper background.
  ─────────────────────────────────────────────────────────────── */
  .home-declined { margin-top: var(--space-6); text-align: center; }

  /* The pill uses .btn-glass for the look (inline-flex). Centering the
     <summary> requires the parent <details> to text-align center, since
     `margin: 0 auto` alone can't center an inline-level element. */
  .home-declined-pill {
    list-style: none;
  }
  .home-declined-pill::-webkit-details-marker { display: none; }
  .home-declined-pill::marker { content: ''; }
  .home-declined-pill-label--open { display: none; }
  .home-declined[open] .home-declined-pill-label--closed { display: none; }
  .home-declined[open] .home-declined-pill-label--open { display: inline; }

  /* List of declined invitations — no paper, no fill. Just light
     text on wood with hairline separators. Reset text-align so the
     parent `.home-declined`'s centering doesn't leak into row copy. */
  .home-declined-list {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    border-top: 1px solid rgba(255, 240, 215, 0.18);
    text-align: left;
  }
  .home-declined-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255, 240, 215, 0.18);
  }
  .home-declined-row-body {
    flex: 1;
    min-width: 0;
  }
  .home-declined-title {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 16px;
    color: rgba(255, 245, 220, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    line-height: 1.25;
    margin-bottom: 3px;
  }
  .home-declined-meta {
    font-family: var(--sans);
    font-size: 12px;
    color: rgba(255, 240, 215, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.02em;
  }
  .home-declined-revisit {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 245, 220, 0.78);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
    flex-shrink: 0;
    transition: color 0.15s ease;
  }
  .home-declined-revisit:hover {
    color: rgba(255, 250, 230, 1);
    text-decoration: none;
  }

  /* ── CREATE PROMPT ─────────────────────────────────────────────
     Sits at the foot of the drawer, below any letters/requests and
     the declined-disclosures. A single frosted-glass panel holding
     the lead-in line and the create actions (request a stay; host a
     gathering, for hosts/organizers). The inner buttons are solid cream
     pills so they read against the glass. */
  /* Sits on the black drawer — hairline box, white text, white pills. */
  .home-create-panel {
    margin-top: var(--space-7);
    padding: var(--space-5) var(--space-6);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    text-align: center;
  }
  .home-create-panel-lead {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-medium);
    font-size: 15px;
    color: #fff;
    margin: 0 0 var(--space-4);
  }
  .home-create-panel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }
  .home-create-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 18px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid #fff;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .home-create-btn:hover {
    background: transparent;
    color: #fff;
    text-decoration: none;
  }

  /* ── IDENTITY-ONLY WELCOME PAGE ────────────────────────────────
     Used by /welcome (home_controller#identity_only).
  ─────────────────────────────────────────────────────────────── */
  .home { padding: var(--space-7) 0 var(--space-9); }
  .home-greeting { margin-bottom: var(--space-7); }
  .home-greeting h1 {
    font-family: var(--display);
    font-style: normal;
    font-size: 32px;
    margin-bottom: var(--space-2);
    line-height: 1.15;
  }
  .home-greeting .meta { color: var(--ink-soft); }

  /* ── SOLO FLOW (planning a stay) ───────────────────────────────
     Used by solo/dates, solo/travel, solo/submit.
  ─────────────────────────────────────────────────────────────── */
  .flow-page {
    min-height: 100vh;
    background: var(--paper);
    background-image:
      radial-gradient(circle at 20% 30%, rgba(180, 160, 120, 0.06) 0%, transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(180, 160, 120, 0.07) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-5);
  }
  .flow-card {
    width: 100%;
    max-width: 540px;
    background: var(--paper);
    padding: 56px 60px 48px;
    box-shadow: var(--shadow-paper);
    position: relative;
  }
  .flow-card h1 {
    font-family: var(--display);
    font-style: normal;
    font-size: 26px;
    margin-bottom: var(--space-3);
    line-height: 1.2;
  }
  .flow-card p { color: var(--ink-soft); }
  .flow-actions {
    margin-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
  }

  /* ── NEW GATHERING FLOW (creating, not requesting) ─────────────
     Same card geometry as the solo flow, but laid over the colored
     landscape (stay-shell + landscape_bg). The card itself drops the
     paper grain — it's a clean cream rectangle floating on color, with
     a softer shadow so it reads as resting, not glued down. Top nav is
     the lodge's nav so the surface still feels like part of Corkins.
  ─────────────────────────────────────────────────────────────── */
  .stay-shell.new-gathering-shell {
    flex-direction: column;
    align-items: stretch;
    padding: 92px 0 var(--space-9);
  }
  .stay-shell.new-gathering-shell .stay-nav { position: fixed; }

  .new-gathering-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--space-5) var(--space-9);
  }

  .new-gathering-card {
    width: 100%;
    max-width: 540px;
    background-color: var(--paper);
    background-image: var(--paper-texture);
    background-repeat: repeat;
    background-size: 480px auto;
    padding: 56px 60px 48px;
    /* Square corners — matches the modal card aesthetic. Used by the
       profile edit page, auth, invite welcome, new-gathering steps. */
    border-radius: 0;
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.05),
      0 14px 40px rgba(20, 15, 5, 0.22),
      0 30px 80px rgba(20, 15, 5, 0.14);
    position: relative;
  }
  /* Profile edit page is denser — wider card so the two-column grids
     (name+pronouns, dietary+allergies) breathe and the bio textareas
     don't feel cramped. Scoped via :has so the auth, invite-welcome,
     and new-gathering step cards stay at their narrower 540px. */
  .new-gathering-card:has(.profile-form) {
    max-width: 720px;
  }
  .new-gathering-card h1 {
    font-family: var(--display);
    font-style: normal;
    font-size: 26px;
    margin-bottom: var(--space-3);
    line-height: 1.2;
  }
  .new-gathering-card p { color: var(--ink-soft); }
  .new-gathering-card .flow-actions {
    margin-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
  }

  .new-gathering-host-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 0;
  }
  .new-gathering-host-name {
    font-size: 15px;
    color: var(--ink);
  }

  /* ── Host picker (multi-select) ────────────────────────────────
     Selected co-hosts render as pill chips inline with the "Add a
     co-host" button. Tapping the button opens a popover list of
     remaining people. Same ink-on-paper register as the rest of the
     card — no shadow drama, hairline borders, paper interior. */
  .host-picker {
    position: relative;
    margin-top: var(--space-2);
  }
  .host-picker-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--hover-edge);
    background: var(--paper-warm);
    border-radius: var(--radius-sm);
  }
  .host-picker.open .host-picker-control,
  .host-picker-control:focus-within {
    border-color: var(--ink);
    background: var(--paper);
  }

  .host-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    background: var(--paper-edge);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink);
  }
  .host-chip-name { line-height: 1; }
  .host-chip-remove {
    appearance: none;
    border: none;
    background: transparent;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .host-chip-remove:hover {
    background: var(--hover-wash-strong);
    color: var(--ink);
  }

  .host-picker-trigger {
    appearance: none;
    border: 1px dashed var(--hover-edge);
    background: transparent;
    border-radius: 999px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1.2;
  }
  .host-picker-trigger:hover {
    border-style: solid;
    color: var(--ink);
  }
  /* Text-input variant of the trigger — same pill shape but takes
     keystrokes so the menu filters as you type. Slightly wider so the
     placeholder + a few characters fit comfortably. */
  input.host-picker-search {
    cursor: text;
    min-width: 200px;
    outline: none;
  }
  input.host-picker-search:focus {
    border-style: solid;
    border-color: var(--ink);
    color: var(--ink);
  }
  input.host-picker-search::placeholder {
    color: var(--ink-faint);
  }

  .host-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--hover-edge);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(20, 15, 5, 0.18);
    padding: 6px;
    z-index: 5;
    display: none;
  }
  .host-picker.open .host-picker-menu { display: block; }

  .host-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
  }
  .host-picker-option:hover { background: var(--hover-wash); }
  .host-picker-option.hidden { display: none; }
  /* Nobody left to add. Sits in the menu where the options would be, styled
     as a statement rather than a row so it never reads as pickable. */
  .host-picker-none {
    padding: 8px 10px;
    font-size: 14px;
    color: var(--ink-faint);
    cursor: default;
  }
  /* On the gathering basics modal the picker reuses the .folder-fold-hosts
     flex row, so the chips wrapper is transparent — chips + "+ Add" flow
     on one line, the same as before the picker was wired up. */
  .folder-fold-hosts .host-picker-chips { display: contents; }

  @media (max-width: 540px) {
    .new-gathering-stage { padding: var(--space-5) var(--space-3) var(--space-7); }
    .new-gathering-card  { padding: 36px 28px 32px; }
    .new-gathering-card h1 { font-size: 22px; }
  }

  /* ── MOBILE ────────────────────────────────────────────────────
     Tighten padding, drop the centered-PDF treatment for left-aligned
     reading flow, let meta rows wrap, stack the compact stay so the
     button sits below the content.
  ─────────────────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    .home-content {
      padding: 0 var(--space-4);
      gap: var(--space-4);
    }

    /* Greeting — left, smaller type, but a lot of breathing room. */
    .home-greeting {
      text-align: left;
      padding: var(--space-8) 0 var(--space-9);
    }
    .home-greeting h1 { font-size: 34px; line-height: 1.1; }
    .home-greeting .meta { font-size: 14px; line-height: 1.5; }

    /* Snapshot — left aligned, smaller padding, smaller title. */
    .home-snapshot-card {
      padding: var(--space-5) var(--space-5);
      text-align: left;
    }
    .home-snapshot-eyebrow { margin-bottom: var(--space-3); }
    .home-snapshot-card .prep-identity-title { font-size: 22px; }
    .home-snapshot-card .prep-identity-meta,
    .home-snapshot-card .prep-dates,
    .home-snapshot-card .prep-hosts,
    .home-snapshot-card .prep-hosts-link {
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .home-snapshot-desc {
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      font-size: 13.5px;
    }
    .home-snapshot-foot { padding-top: var(--space-4); }

    /* Compact stay — stack vertically; the button sizes to its label
       (left-aligned under the meta), not full width. */
    .compact-stay {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-4);
      padding: var(--space-4) var(--space-5);
    }
    .compact-stay-desc { font-size: 13px; }
    .compact-stay-meta {
      flex-wrap: wrap;
      row-gap: 4px;
    }
    .compact-stay-action { align-self: flex-start; }
    .compact-stay-action .btn { width: auto; }

    /* Drawer — tighter padding, letters left + smaller. */
    .home-drawer { padding: var(--space-6) 0 var(--space-7); }
    .home-drawer-inner { padding: 0 var(--space-4); }

    .letter-card {
      padding: var(--space-4) var(--space-5);
      margin-bottom: var(--space-5);
      /* Less tilt on small screens — looks awkward when narrow. */
      --letter-tilt: -0.3deg;
    }
    .letter-card:nth-child(3n)   { --letter-tilt:  0.3deg; }
    .letter-card:nth-child(3n+1) { --letter-tilt: -0.4deg; }
    .letter-card:nth-child(3n+2) { --letter-tilt:  0.2deg; }

    .letter-card h3 { font-size: 19px; }
    .letter-excerpt { font-size: 14px; }
    .letter-meta {
      flex-wrap: wrap;
      row-gap: 4px;
    }

    /* Banded variants — tighter body padding, and the color band reads
       left-aligned to match the left-aligned card content on mobile. */
    .home-snapshot-card--hosting .home-snapshot-card-body,
    .home-snapshot-card--this-week .home-snapshot-card-body,
    .home-snapshot-card--solo .home-snapshot-card-body {
      padding: var(--space-5);
    }
    .home-this-week-band,
    .home-hosting-band {
      text-align: left;
    }
    /* Solo card stacks back to a column; "View details" sizes to its
       label, left-aligned under the meta (the flex row-gap is the spacing). */
    .home-snapshot-card--solo .home-snapshot-card-body {
      flex-direction: column;
      align-items: stretch;
    }
    .home-snapshot-card--solo .home-snapshot-foot { align-self: flex-start; }
    .home-snapshot-card--solo .home-snapshot-foot .btn { width: auto; }
    /* Empty state — keep it centered but trim the desktop generosity. */
    .home-snapshot-card.home-snapshot-card--empty {
      padding: var(--space-7) var(--space-5);
      min-height: 0;
    }
    .home-empty-headline { font-size: 22px; }
    /* Hosting variant's paired buttons stay side-by-side on mobile —
       "View as guest" + "Manage gathering" both fit a phone width. The
       gap shrinks to keep them comfortable, and each sizes to its label. */
    .home-snapshot-foot--pair {
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: var(--space-2);
    }
    .home-snapshot-foot--pair .btn { width: auto; }
  }
}

@layer components {
  /* ── THE LODGE, BASECAMP-SHAPED (coherence pass) ──────────────────
     Actions left, the card grid center, activity right. Clean flat
     cards — the first surface on the new system: no texture, hairline
     borders, type does the hierarchy. */
  .home-bc {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 240px minmax(0, 720px) 300px;
    justify-content: center;
    gap: 48px;
    padding: 120px 40px 80px;
    align-items: start;
  }
  .home-bc-greeting {
    font-family: var(--display);
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 20px;
  }
  .home-bc-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .home-bc-action {
    font-size: 14px;
    font-weight: var(--weight-semibold);
    color: var(--ink);
    text-decoration: none;
    background: var(--paper);
    border: 1px solid var(--hover-edge);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    transition: border-color 0.15s ease;
  }
  .home-bc-action:hover { border-color: var(--ink); text-decoration: none; }
  .home-bc-action--quiet { background: transparent; border-color: transparent; color: var(--ink-soft); padding-left: 0; }
  .home-bc-action--quiet:hover { border-color: transparent; color: var(--ink); text-decoration: underline; }

  .home-bc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  .bc-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--paper);
    border: 1px solid var(--hover-edge);
    border-radius: var(--radius-md);
    padding: 20px 22px 18px;
    min-height: 128px;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .bc-card:hover { border-color: var(--ink-faint); box-shadow: var(--shadow-card); text-decoration: none; }
  .bc-card--hosting { border-top: 3px solid var(--ink); }
  .bc-card-eyebrow {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--ink-faint);
  }
  .bc-card-title {
    font-family: var(--display);
    font-size: 19px;
    line-height: 1.2;
    font-weight: var(--weight-semibold);
  }
  .bc-card-meta { font-size: 13.5px; color: var(--ink-soft); }
  .bc-card-sub  { font-size: 12.5px; color: var(--ink-faint); margin-top: auto; }

  .home-bc-pending { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
  /* ── AROUND THE LODGE — the quiet discovery shelf. Rows, not cards:
     what's happening is ambient, not yours (yet). ── */
  .home-bc-around { margin-top: 34px; }
  .home-bc-around-h {
    font-size: var(--cap-md);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
  }
  .home-around-rows { list-style: none; margin: 0; padding: 0; }
  .home-around-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 2px;
  }
  .home-around-row + .home-around-row { border-top: 1px solid var(--paper-edge); }
  .home-around-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .home-around-title { font-weight: var(--weight-semibold); color: var(--ink); font-size: 15px; }
  .home-around-meta { color: var(--ink-faint); font-size: 13px; }
  .home-around-faces { display: flex; align-items: center; }
  .home-around-faces .avatar { margin-left: -6px; border: 2px solid var(--paper); }
  .home-around-faces .avatar:first-child { margin-left: 0; }
  .home-around-more { color: var(--ink-faint); font-size: 12px; margin-left: 4px; }
  .home-around-door { flex: none; font-size: 13px; white-space: nowrap; }
  @media (max-width: 640px) {
    .home-around-row { flex-wrap: wrap; }
    .home-around-door { margin-left: auto; }
  }

  /* Discovery opt-in row at the prep sheet's foot. */
  .prep-around-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--paper-edge);
  }
  .prep-around-copy { color: var(--ink-soft); font-size: 13.5px; flex: 1; }
  .prep-around-form { flex: none; }

  /* A proposal waiting on the organizers — present but not yet real,
     so the card sits ghosted: dashed edge, no door. */
  .bc-card--pending {
    border-style: dashed;
    cursor: default;
  }
  .bc-card--pending:hover { border-color: var(--paper-edge); box-shadow: none; }

  .home-bc-empty {
    color: var(--ink-soft);
    padding: 36px 32px;
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    max-width: 560px;
  }
  .home-bc-empty-headline {
    color: var(--ink);
    font-size: 19px;
    font-weight: var(--weight-semibold);
    line-height: 1.35;
  }
  .home-bc-empty-soft { color: var(--ink-faint); font-size: 14px; margin-top: 10px; line-height: 1.5; }
  .home-bc-empty-cta { margin-top: 18px; }
  .home-bc-center > .home-declined { margin-top: 24px; }

  .home-bc-right-h {
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: var(--weight-semibold);
    margin-bottom: 12px;
  }
  /* Activity as a timeline (borrowed from the greats): a thin thread
     down the left, each entry wearing Gather's mark for what happened —
     an ember for things sparked, a check for things settled, a curl of
     smoke for things said. */
  /* The full /activity page — one centered column of the same rail, in
     lodge chrome (not the organizer office). */
  .home-bc--single { grid-template-columns: minmax(0, 640px); justify-content: center; padding-top: 48px; }
  .home-activity-page { width: 100%; }
  .home-activity-page-head { margin-bottom: 20px; }
  .home-activity-page-head .muted { margin-top: 4px; }
  .home-activity-page-foot { margin-top: 34px; }
  .home-activity-empty { margin-top: 16px; }

  .home-bc-activity { list-style: none; margin: 0; padding: 0; position: relative; }
  .home-bc-activity::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: var(--hover-edge);
  }
  .home-bc-activity-row {
    position: relative;
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr);
    gap: 10px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.45;
    padding: 9px 0;
  }
  .home-bc-activity-mark {
    position: relative;
    z-index: 1;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    border: 1px solid var(--hover-edge);
  }
  .home-bc-activity-mark svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .home-bc-activity-mark--check { color: #3e7d4f; border-color: color-mix(in srgb, #3e7d4f 45%, transparent); }
  .home-bc-activity-mark--ember { color: #c2571f; border-color: color-mix(in srgb, #c2571f 40%, transparent); }
  .home-bc-activity-mark--smoke { color: var(--ink-faint); }
  .home-bc-activity strong { color: var(--ink); }
  .home-bc-activity-when {
    display: block;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
  }
  .home-bc-activity-where { display: block; font-size: 12px; color: var(--ink-faint); }

  /* ── Compress, THEN collapse (Neal, Jul 16 — Basecamp holds its three
     columns longer than we did). Two stages, each with a dock-open
     twin shifted by the dock's width:
       compact  — three columns tighten (slim rails, small gaps)
       collapse — activity retires, actions rise into a centered row ── */
  body.chat-dock-open .home-shell--bc .app-footer-bar { right: var(--chat-dock-w, 340px); }

  /* Stage 1: compact three-column. */
  @media (max-width: 1340px) {
    /* The single-column page (e.g. /activity) must stay one centered column —
       don't let the 3-column reassert drop it into the narrow left slot. */
    .home-bc:not(.home-bc--single) { grid-template-columns: 172px minmax(0, 1fr) 248px; gap: 22px; padding-left: 24px; padding-right: 24px; }
  }
  @media (max-width: 1700px) {
    body.chat-dock-open .home-shell--bc .home-bc:not(.home-bc--single) {
      grid-template-columns: 172px minmax(0, 1fr) 248px; gap: 22px; padding-left: 24px; padding-right: 24px;
    }
  }

  /* Stage 2: the collapse. */
  @media (max-width: 1040px) {
    .home-bc { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 28px; padding-top: 48px; }
    .home-shell--bc .home-account, .home-shell--bc .home-bc-left, .home-shell--bc .home-bc-center { grid-column: 1; grid-row: auto; }
    .home-bc-left { text-align: center; }
    .home-bc-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
    .home-bc-right { display: none; }
  }
  @media (max-width: 1380px) {
    body.chat-dock-open .home-shell--bc .home-bc {
      grid-template-columns: minmax(0, 720px); justify-content: center; gap: 28px; padding-top: 48px;
    }
    body.chat-dock-open .home-shell--bc .home-account,
    body.chat-dock-open .home-shell--bc .home-bc-left,
    body.chat-dock-open .home-shell--bc .home-bc-center { grid-column: 1; grid-row: auto; }
    body.chat-dock-open .home-shell--bc .home-bc-left { text-align: center; }
    body.chat-dock-open .home-shell--bc .home-bc-actions {
      flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
    }
    body.chat-dock-open .home-shell--bc .home-bc-right { display: none; }
  }
  @media (max-width: 800px) {
    .home-bc { padding: 32px 20px 80px; }

    /* THE GATHERING COMES BEFORE THE ERRANDS.
       Measured on a 390×844 phone: the hero ends at 418 (correctly capped
       at 42dvh since Aug 4), and the guest's own gathering card did not
       start until 712 — 132px of it above the fold, the rest below. The
       294px in between was the wordmark, the greeting, and two outline
       buttons offering to request a DIFFERENT gathering or ask for a
       stay. For someone who is already going somewhere in five weeks,
       that is three answers to questions they did not ask, stacked on top
       of the one they did.
       display:contents dissolves the aside at this width so the greeting
       and the actions can be ordered independently: a short hello, then
       the week they are actually attending, then everything else they
       could do from here. (Aug 11) */
    .home-shell--bc .home-account   { order: 1; }
    .home-shell--bc .home-bc-left   { display: contents; }
    .home-shell--bc .home-bc-greeting { order: 2; }
    /* The weather needs its own order or display:contents leaves it at 0 and
       it floats above the community's name — which is how it shipped for
       about ten minutes. A dissolved wrapper orders NOTHING for free. */
    .home-shell--bc .home-bc-weather { order: 3; }
    .home-shell--bc .home-bc-center { order: 4; }
    .home-shell--bc .home-bc-actions { order: 5; margin-top: 4px; }

    /* Secondary by weight as well as by position — these were competing
       with the card for attention while offering less. */
    .home-bc-greeting { font-size: 20px; margin-bottom: 12px; }

    /* The community's name is the page's identity and it keeps that job.
       It does not need a sixth-step margin under it on a 390px screen —
       the photo above already gives it all the separation it needs, and
       every pixel here is one the gathering card pays for. */
    .home-shell--bc .home-account { margin-bottom: var(--space-3); }
    .home-account-logo { font-size: 17px; }
  }
}

@layer components {
  .home-bc-hero { margin-bottom: 20px; }
  .home-bc-hero .home-snapshot-card { margin-bottom: 0; }
}

@layer components {
  .home-shell--bc { background: var(--desk); }
}

@layer components {
  /* ── DEFINITION PASS (Neal, Jul 15 eve) ─────────────────────────── */

  /* Stacked wordmark — CORKINS over EXCHANGE, the Kura/Soroban convention. */
  .stay-nav-brand--stacked {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: 15px;
    gap: 0;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
  }
  .stay-nav-brand--stacked .brand-line { display: block; }
  /* The menu carets earn their keep only if you can see them — 9px
     ink-faint read as dust (home-pulse pass). */
  .brand-chev { font-size: 12px; color: var(--ink-soft); vertical-align: 1px; }
  .brand-menu-wrap { position: relative; }
  .brand-menu {
    position: absolute;
    top: 44px;
    left: 0;
    right: auto;
    align-items: flex-start;
  }

  /* Left-rail actions: icons + weight (the Basecamp move). */
  .home-bc-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: var(--weight-bold);
  }
  .home-bc-action-icon {
    width: 16px; height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* Colored gathering cards — one steady tone per gathering, wash + top
     strip. color-mix against var(--paper) adapts to both modes. */
  .bc-card[class*="bc-card--tone-"] { border-top-width: 3px; border-top-style: solid; }
  .bc-card--tone-0 { border-top-color: #6f8f6a; background: color-mix(in srgb, #6f8f6a 9%, var(--paper)); }
  .bc-card--tone-1 { border-top-color: #a06a55; background: color-mix(in srgb, #a06a55 9%, var(--paper)); }
  .bc-card--tone-2 { border-top-color: #5f7d94; background: color-mix(in srgb, #5f7d94 9%, var(--paper)); }
  .bc-card--tone-3 { border-top-color: #a98a4a; background: color-mix(in srgb, #a98a4a 9%, var(--paper)); }
  .bc-card--tone-4 { border-top-color: #8a6a92; background: color-mix(in srgb, #8a6a92 9%, var(--paper)); }
  .bc-card--tone-5 { border-top-color: #4f7d6b; background: color-mix(in srgb, #4f7d6b 9%, var(--paper)); }

  /* Activity rail: bolder actors, a View-all door, tighter meta. */
  .home-bc-viewall {
    font-weight: var(--weight-semibold);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .home-bc-viewall:hover { color: var(--ink); }
  .home-bc-activity li { font-size: 13.5px; color: var(--ink-soft); }
  .home-bc-activity strong { font-weight: var(--weight-bold); }

  /* Bigger, brighter card titles (definition pass). */
  .bc-card-title { font-size: 20px; font-weight: var(--weight-semibold); }
  .home-bc-greeting { font-weight: var(--weight-semibold); }
}


@layer components {
  /* ── The account's logo above its gathering place ──────────────────
     Stacked wordmark (CORKINS / EXCHANGE) centered over the content
     column, chevron alongside — Basecamp's logo-and-menu, unabashedly.
     Clicking opens a search-and-jump panel. */
  .home-account {
    position: relative;
    text-align: center;
    margin: 0 0 var(--space-6);
    z-index: 30;
  }
  .home-account-logo {
    appearance: none;
    background: none;
    border: 0;
    padding: 4px 24px 4px 8px;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.12;
    font-family: var(--display);
    font-size: 19px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .home-account-line { display: block; }
  .home-account-chev {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--ink-soft);
    transition: transform 140ms ease;
  }
  .home-account-logo:hover .home-account-chev { transform: translateY(-50%) translateY(1px); }

  /* The jump panel — paper card floating under the logo. */
  .home-account-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 32px));
    background: var(--paper);
    border-radius: 10px;
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.06),
      0 12px 32px rgba(0, 0, 0, 0.22),
      0 28px 64px rgba(0, 0, 0, 0.14);
    padding: var(--space-4);
    text-align: left;
  }
  .home-account-panel.open { display: block; }
  .jump-search {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--sans);
    font-size: 14px;
    padding: 9px 12px;
    border: 1px solid var(--hover-edge);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    margin-bottom: var(--space-3);
  }
  .jump-search:focus { outline: 2px solid var(--ink-faint); outline-offset: 1px; }
  .jump-rows {
    max-height: min(46vh, 380px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .jump-row {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: background 100ms ease;
  }
  .jump-row:hover { background: rgba(0, 0, 0, 0.06); }
  /* display:block above would defeat the hidden attribute the filter sets. */
  .jump-row[hidden] { display: none; }
  .jump-empty {
    margin: 0;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--ink-faint);
  }
  @media (prefers-color-scheme: dark) {
    .jump-row:hover { background: rgba(255, 255, 255, 0.08); }
  }
  :root[data-theme="dark"] .jump-row:hover { background: rgba(255, 255, 255, 0.08); }
  :root[data-theme="light"] .jump-row:hover { background: rgba(0, 0, 0, 0.06); }
}

@layer components {
  /* ── Home round 2 (Neal's screenshot notes, Jul 16) ─────────────── */

  /* The account logo lives a cut above the three columns now. */
  /* The logo rides the grid's middle column — centered over the cards,
     not the viewport (the rails are asymmetric). Row 1 is the logo's;
     everything else lives on row 2. */
  .home-shell--bc .home-account { grid-row: 1; grid-column: 2; margin: 0 0 var(--space-2); }
  .home-shell--bc .home-bc-left { grid-row: 2; grid-column: 1; }
  .home-shell--bc .home-bc-center { grid-row: 2; grid-column: 2; }
  .home-shell--bc .home-bc-right { grid-row: 2; grid-column: 3; }
  .home-shell--bc .home-bc { padding-top: 40px; row-gap: 24px; }

  /* Quick actions hug the content column (Bespoke's alignment). */
  .home-bc-actions { align-items: flex-end; }
  .home-bc-left { text-align: right; }

  /* Around-the-lodge cards: the same card, unpainted. */
  .bc-card--plain .home-around-faces {
    display: inline-flex;
    gap: 4px;
    margin-top: 8px;
  }
  .home-bc-around { margin-top: var(--space-8); }
  .home-bc-around-h {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--ink-faint);
    margin: 0 0 var(--space-4);
  }

  /* The application footer — a quiet bar the color of the desk with a
     hairline of separation. Avatar sits in its left end, the Chat pill
     in its right; Support floats just above it as a text overlay. */
  .app-footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: var(--desk);
    border-top: 1px solid var(--hover-edge);
    z-index: 80;
  }
      .rooms-pill { bottom: 12px; right: 18px; }
}

@layer components {
  /* ── The featured card IS the door (Jul 16): a stretched link covers
     it, interactive children ride above, and hover says Open. ── */
  .home-snapshot-card--hosting { position: relative; transition: transform 140ms ease, box-shadow 140ms ease; }
  .home-snapshot-card--hosting:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.05),
      0 12px 32px rgba(0, 0, 0, 0.2),
      0 24px 52px rgba(0, 0, 0, 0.12);
  }
  .card-stretch { position: absolute; inset: 0; z-index: 1; }
  /* Links and buttons inside the card stay clickable above the door. */
  .home-snapshot-card--hosting :is(a, button, form):not(.card-stretch) { position: relative; z-index: 2; }
  .home-hosting-band { display: flex; align-items: center; justify-content: space-between; }
  .band-open-hint { opacity: 0; transition: opacity 140ms ease; font-weight: var(--weight-semibold); }
  .home-snapshot-card--hosting:hover .band-open-hint { opacity: 1; }
}

@layer components {
  /* ── THE LAND (Jul 16) — the place itself, featured on home: photo
     from the backdrop library, name, address, Maps door, and the
     getting-there notes. ── */
  .place-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0;
    background: var(--paper);
    border: 1px solid var(--hover-edge);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: var(--space-7);
  }
  .place-card-photo { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
  .place-card-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; }
  .place-card-eyebrow {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: var(--weight-bold); color: var(--ink-faint);
  }
  .place-card-name {
    font-family: var(--display);
    font-size: 21px; font-weight: var(--weight-semibold);
    color: var(--ink); margin: 0;
  }
  .place-card-address { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
  .place-card-maps {
    font-size: 13px; font-weight: var(--weight-semibold);
    color: var(--ink-soft); text-decoration: none; width: fit-content;
  }
  .place-card-maps:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .place-card-notes { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }
  @media (max-width: 640px) {
    .place-card { grid-template-columns: 1fr; }
    .place-card-photo { max-height: 160px; }
  }
}

@layer components {
  /* The place card grows a third column when its map exists. */
  .place-card:has(.place-card-map) { grid-template-columns: 200px minmax(0, 1fr) 240px; }
  .place-card-map { display: block; }
  .place-card-map img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; }
  .place-card-gallery { margin-top: 2px; }
  @media (max-width: 760px) {
    .place-card:has(.place-card-map) { grid-template-columns: 1fr; }
    .place-card-map img { max-height: 180px; }
  }

  /* ── The land, browsable — the gallery page. ── */
  .land-shell { flex-direction: column; align-items: stretch; padding: 84px 0 80px; }
  .land-gallery {
    position: relative; z-index: 1;
    width: 100%; max-width: 1080px;
    margin: 0 auto; padding: 0 24px;
  }
  .land-head { text-align: center; margin-bottom: 22px; }
  .land-title { font-family: var(--display); font-size: clamp(26px, 4vw, 36px); color: var(--ink); margin: 4px 0; }
  .land-address { font-size: 13.5px; color: var(--ink-soft); }
  .land-address a { color: inherit; font-weight: var(--weight-semibold); }
  .land-map { margin: 0 0 18px; }
  .land-map img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--hover-edge); display: block; }
  .land-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
  }
  .land-photo img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: 8px; display: block;
    transition: transform 140ms ease;
  }
  .land-photo:hover img { transform: scale(1.02); }
}

@layer components {
  /* The map's pin: the stitch centers the point exactly, so the marker
     is pure CSS at 50%/50% — a home-ink dot with a soft ring. */
  .place-card-map, .land-map { position: relative; }
  .place-card-map::after, .land-map::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #c2571f;
    border: 2px solid #fff;
    box-shadow: 0 0 0 4px rgba(194, 87, 31, 0.25), 0 1px 4px rgba(0,0,0,0.35);
    pointer-events: none;
  }
}

@layer components {
  /* ── The nav becomes a real bar (Airbnb's grammar, Jul 16): solid
     ground, hairline below, and the photo begins BENEATH it — the
     chrome never floats over the land. ── */
  .home-shell--bc .stay-nav {
    position: relative;
    background: var(--desk);
    border-bottom: 1px solid var(--hover-edge);
  }
  .stay-shell.home-shell--bc { padding-top: 0; }

  /* ── The land's teaser — full-width frame, caption riding the
     bottom edge, the whole thing a door to /land. ── */
  /* The band's height is the organizer's (--hero-height, set inline
     from the account; 340 is what it always was). A phone gets less of
     the window given over to it no matter what the desk chose. */
  .land-teaser {
    position: relative;
    display: block;
    width: 100%;
    max-height: var(--hero-height, 340px);
    overflow: hidden;
  }
  .land-teaser-photo {
    width: 100%;
    height: var(--hero-height, 340px);
    object-fit: cover;
    /* object-position is set inline — the focal point the organizer
       dragged to. Centre until someone says otherwise. */
    object-position: 50% 50%;
    display: block;
    transition: transform 400ms ease;
  }
  /* A phone gets less of the window given over to the band no matter
     what the desk chose — but it still honors the choice up to that cap.
     This used to sit at 600px and be overridden a few rules below by a
     flat `height: 200px` at 800px, which meant the organizer's height
     did nothing at all on a phone AND the framing preview promised a
     crop no phone ever showed. One rule now, at one breakpoint. (Aug 4)
     dvh, not vh: iOS measures vh against the retracted-URL-bar window,
     so 42vh is taller than the window a guest is actually looking at. */
  @media (max-width: 800px) {
    .land-teaser { max-height: min(var(--hero-height, 340px), 42dvh); }
    .land-teaser-photo { height: min(var(--hero-height, 340px), 42dvh); }
  }
  .land-teaser:hover .land-teaser-photo { transform: scale(1.015); }
  .land-teaser-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 28px 32px 14px;
    background: linear-gradient(to top, rgba(10, 14, 11, 0.65), transparent);
    color: #fff;
  }
  .land-teaser-name {
    font-family: var(--display);
    font-size: 19px;
    font-weight: var(--weight-semibold);
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  }
  .land-teaser-cta {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    opacity: 0.85;
  }
  .land-teaser:hover .land-teaser-cta { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
}

@layer components {
  /* The still teaser: no door, no zoom — it just is. */
  .land-teaser--still { cursor: default; }
  .land-teaser--still .land-teaser-photo { transition: none; }
  .land-teaser--still:hover .land-teaser-photo { transform: none; }

  /* ── Change photo — the organizer's hero door (hero-gallery, Aug 3).
     A quiet pill that appears on hover (touch screens keep it visible
     so the affordance exists at all) and opens a chooser of every
     library backdrop; picking one posts the choice, "Upload new" stocks
     the library and takes the hero in one motion. No client preview —
     the page render is the preview. ── */
  /* No photo yet. This was a flat 120px slab of --paper-warm-2, which read
     as a broken image rather than as a place waiting for one (Neal, Aug 11).
     It carries a blank slate for the organizer and a nameplate for the
     guest now, so the height comes from the content. */
  .land-teaser--bare {
    background: var(--paper-warm-2);
    border-bottom: 1px solid var(--paper-edge);
  }
  .land-teaser-slate {
    padding: 22px 20px 26px;
    max-width: 720px;
    margin: 0 auto;
  }
  /* The slate's closing line says the pill in the corner is how you swap the
     photo later. A control at opacity 0 until hover makes that sentence a
     lie, and on the state where it is the ONLY action on the band, hiding it
     is backwards. Visible whenever there is nothing to change it from. */
  .land-teaser--bare .hero-chooser-pill { opacity: 1; }

  /* The guest's band: no photo to carry the name, so the name carries
     itself. Short on purpose — this is a header, not a hero. */
  .land-nameplate {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 104px;
    padding: 18px 20px;
  }
  .land-nameplate-name {
    margin: 0;
    font-family: var(--display);
    font-size: 26px;
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  /* The weather block is built to sit on photography — a bottom-anchored
     scrim in white type. On paper it needs to be neither. */
  .land-teaser--bare .land-teaser-weather {
    position: static;
    padding: 0;
    background: none;
    color: var(--ink-soft);
  }
  .land-teaser--bare .ltw-temp { color: var(--ink); }
  @media (max-width: 600px) {
    .land-nameplate { min-height: 88px; padding: 15px 16px; }
    .land-nameplate-name { font-size: 22px; }
  }
  .hero-chooser {
    position: absolute;
    right: 16px;
    bottom: 14px;
  }
  .hero-chooser-pill {
    display: inline-block;
    list-style: none;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    color: #fff;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    padding: 8px 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms ease, background 150ms ease;
  }
  .hero-chooser-pill::-webkit-details-marker { display: none; }
  /* The bare teaser sits on paper, not photography — ink reads there. */
  .land-teaser--bare .hero-chooser-pill {
    color: var(--ink);
    border-color: var(--hover-edge);
    background: var(--paper);
  }
  .land-teaser:hover .hero-chooser-pill,
  .hero-chooser[open] .hero-chooser-pill,
  .hero-chooser-pill:focus-visible { opacity: 1; }
  .hero-chooser-pill:hover { background: var(--glass-bg-hover); }
  .land-teaser--bare .hero-chooser-pill:hover { background: var(--hover-wash); }
  @media (hover: none) {
    .hero-chooser-pill { opacity: 1; }
  }
  /* THE CHOOSER, AS A DIALOG (Neal, Aug 4) — the panel used to hang
     off the pill and open upward inside a 340px band, so ten photos
     plus the standard ran clean off the top of the window. The top
     layer has no crop and no anchor: it centres itself, scrolls its
     own body, and becomes a bottom sheet on a phone. */
  .hero-chooser-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    padding: 0;
    border: 1px solid var(--hover-edge);
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .hero-chooser-dialog::backdrop {
    background: rgba(20, 16, 10, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  /* The panel has to be exactly as tall as the dialog leaves room for,
     and scroll inside it. A percentage max-height can't do that — it
     resolves against a containing block whose own height is auto, so it
     simply doesn't apply and the panel grows past the clip. A flex
     column can: the dialog holds the max-height, the panel takes what's
     left. min-height: 0 because a flex item won't shrink below its
     content without it. */
  .hero-chooser-dialog[open] {
    display: flex;
    flex-direction: column;
  }
  .hero-chooser-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4);
  }
  .hero-chooser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--space-3);
  }
  .hero-chooser-title {
    font-family: var(--display);
    font-size: 18px;
    font-weight: var(--weight-semibold);
    margin: 0;
  }
  .hero-chooser-close {
    border: 0;
    background: transparent;
    color: var(--ink-faint);
    font-size: 16px;
    line-height: 1;
    padding: 6px;
    cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .hero-chooser-close:hover { color: var(--ink); background: var(--hover-wash); }
  /* On a phone the dialog meets the thumb: full width, along the bottom. */
  @media (max-width: 600px) {
    .hero-chooser-dialog {
      width: 100vw;
      max-width: 100vw;
      /* dvh: on iOS, 85vh is 85% of the window with the URL bar
         retracted, so the sheet's top edge — title, Day/Night switch —
         sits behind the bar with no way to scroll up to it. */
      max-height: 85dvh;
      margin: auto auto 0;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
  }
  .hero-chooser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
  }
  .hero-chooser-choice {
    appearance: none;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    position: relative;
  }
  /* A photo wide enough to qualify but saved thin enough to go soft up
     here. It is still choosable — this only says so first. (Aug 4) */
  .hero-chooser-thin {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(20, 16, 10, 0.72);
    color: #fff;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    line-height: 1.4;
  }
  .hero-chooser-choice:hover { border-color: var(--hover-edge); }
  .hero-chooser-choice--current { border-color: var(--ink); }
  .hero-chooser-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }
  /* When nothing in the library clears the banner's width bar. */
  .hero-chooser-note {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .hero-chooser-upload { margin: 0; }
  .hero-chooser-upload-label {
    display: block;
    text-align: center;
    font-size: 13px;
  }
  .hero-chooser-input { display: none; }
}

@layer components {
  /* ── AT THE PLACE THIS WEEK — the hosting-side pulse strip, in the
     home-snapshot family: paper, hairline, tracked-cap eyebrow. Three
     compact groups of faces; one quiet line when nobody's on the books. ── */
  .home-week {
    background: var(--paper);
    border: 1px solid var(--hover-edge);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
  }
  .home-week-h {
    font-size: var(--cap-md);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 var(--space-4);
  }
  .home-week-quiet { font-size: 14px; color: var(--ink-soft); margin: 0; }
  .home-week-groups {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-7);
  }
  .home-week-group { min-width: 0; }
  .home-week-label {
    display: block;
    font-size: var(--cap-sm);
    letter-spacing: var(--tracking-cap-tight);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--ink-soft);
    margin-bottom: var(--space-2);
  }
  .home-week-people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }
  .home-week-person {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--ink);
  }
  .home-week-person .avatar-sm { width: 24px; height: 24px; font-size: 10px; }
  .home-week-name { font-weight: var(--weight-semibold); }
  .home-week-day { color: var(--ink-faint); font-size: 12.5px; }
}

/* ── FINAL WORD on the phone collapse (Jul 16 night): this block ends
   the file ON PURPOSE — the grid-placement rules above are later than
   the collapse media queries, so the collapse must be re-asserted
   last. Move it and the phone regresses to squeezed columns. ── */
@media (max-width: 1040px) {
  .home-shell--bc .home-bc { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .home-shell--bc .home-account,
  .home-shell--bc .home-bc-left,
  .home-shell--bc .home-bc-center { grid-column: 1; grid-row: auto; }
  .home-shell--bc .home-bc-right { display: none; }
  .home-shell--bc .home-bc-left { text-align: center; }
  .home-shell--bc .home-bc-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
}
@media (max-width: 640px) {
  .home-shell--bc .home-bc { padding-left: 16px; padding-right: 16px; }
  .home-snapshot-card { padding-left: 18px; padding-right: 18px; }
}

@layer components {
  /* ── Phone rhythm (mobile punch-list): the card stack breathes, it
     doesn't yawn. Tightens identity → ticket → CTA cadence at phone
     widths; desktop keeps its air. ─────────────────────────────── */
  @media (max-width: 640px) {
    .home-snapshot-card { padding: var(--space-5) var(--space-4); }
    .home-snapshot-card.home-snapshot-card--hosting { padding: 0; }
    .home-snapshot-card--hosting .home-snapshot-card-body,
    .home-snapshot-card--this-week .home-snapshot-card-body { padding: var(--space-5) var(--space-4); }
    .home-snapshot-card .prep-hosts { margin-bottom: var(--space-4); }
    .home-snapshot-card .prep-identity-meta { margin-bottom: var(--space-3); }
    .home-snapshot-card .ticket { margin: var(--space-4) 0 var(--space-3); }
    .home-snapshot-foot { margin-top: var(--space-4); padding-top: var(--space-3); }
  }
}

@layer components {
  /* FRAMING THE HEADER (Neal, Aug 4) — the stage is the band itself,
     same crop rules at a smaller size, so lining a photo up here is
     lining it up there. */
  .hero-framing { margin-bottom: var(--space-4); }
  .hero-framing-title {
    font-family: var(--display);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-2);
  }
  .hero-framing-stage {
    position: relative;
    width: 100%;
    /* Height comes from the controller, which scales the band by the
       stage's share of the page width so the preview crops exactly as
       the header does. This is only the value before first paint. */
    height: 120px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--hover-wash);
    cursor: grab;
    /* The controller narrows this to the one axis the crop can actually
       move (pan-y when the drag is sideways), so a thumb swiping the
       stage still scrolls the sheet everywhere the photo can't go. */
    touch-action: none;
    user-select: none;
  }
  .hero-framing--dragging .hero-framing-stage { cursor: grabbing; }
  .hero-framing-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }
  .hero-framing-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ink-faint);
  }
  .hero-framing-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-3);
  }
  .hero-framing-label {
    font-size: 12px;
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: var(--weight-semibold);
  }
  .hero-framing-range { flex: 1; }
  .hero-framing-value {
    font-size: 12px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    min-width: 46px;
    text-align: right;
  }
  .hero-framing-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: var(--space-3);
  }
}

@layer components {
  /* "Or choose another" — the library, below the photo you already have. */
  .hero-chooser-subhead {
    font-family: var(--display);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--hover-edge);
  }
}

@layer components {
  /* DAY AND NIGHT (Neal, Aug 4) — two photos for one header. The tab
     that's showing right now wears the badge; the other is a click. */
  .hero-slot-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--hover-wash);
    border-radius: 999px;
    width: fit-content;
    margin-bottom: 8px;
  }
  .hero-slot-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--ink-soft);
    cursor: pointer;
  }
  .hero-slot-tab:hover { color: var(--ink); }
  .hero-slot-tab--on {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 2px var(--paper-shadow);
  }
  .hero-slot-now {
    font-size: 10px;
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-semibold);
  }
  .hero-slot-when {
    margin: 0 0 var(--space-3);
    font-size: 12px;
    color: var(--ink-faint);
    line-height: 1.5;
  }
  .hero-slot-tail {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .hero-slot-clear { margin: 0; }
}


@layer components {
  /* The true second line, under the verdict. Quiet — it is context, not the
     answer — and it sits close enough to the headline to read as one thought.
     (Aug 11) */
  .home-bc-weather {
    margin: 6px 0 0;
    color: var(--ink-faint);
    font-size: 15px;
    line-height: 1.5;
  }
}


@layer components {
  /* ── CONDITIONS, ON THE PICTURE OF THE PLACE (Neal, Aug 11) ────────
     The weather was a grey line under the verdict, in the column the
     doctrine reserves for what you should DO. It reads better here: the
     photo is the emotional anchor of this page, and the temperature on it
     makes the lodge feel present rather than decorative — the way a webcam
     does — while costing no vertical space at all.

     The scrim is not optional. An organizer picks and reframes this photo,
     so the text cannot depend on what happens to be behind it: a soft
     bottom-left gradient rides under the mark, dark enough to hold white
     type over a bright sky or a dark treeline. */
  .land-teaser { position: relative; }
  .land-teaser-weather {
    position: absolute;
    left: 0; bottom: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 40px 28px 18px 24px;
    color: #fff;
    background: linear-gradient(to top right,
                rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.28) 45%, transparent 78%);
    border-bottom-left-radius: inherit;
    pointer-events: none;   /* the photo below it stays the organizer's target */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  .ltw-temp {
    font-family: var(--display);
    font-size: 30px;
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .ltw-rest {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13.5px;
    line-height: 1.35;
    opacity: 0.94;
  }
  .ltw-low { opacity: 0.78; font-size: 12.5px; }

  @media (max-width: 600px) {
    .land-teaser-weather { padding: 32px 20px 14px 16px; gap: 8px; }
    .ltw-temp { font-size: 25px; }
    .ltw-rest { font-size: 12.5px; }
  }
}