/* Homepage front door (2026-10-13, Option B): the hero's FIVE WAYS IN list, then one
   room per part of the site after the Doors. Loaded after r2-system.css; every rule is
   scoped to homepage classes. Rooms share the Doors' rail and gutters at every width. */

/* FIVE WAYS IN: under the buttons on phones and tablets, beside the hero copy on desktop. */
.homepage-ways { display: block; min-width: 0; margin-top: 28px; }
.homepage-ways .eyebrow { margin: 0 0 10px; color: var(--gold); font: 500 13px/1.5 var(--mono); letter-spacing: .14em; }
.homepage-ways ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.homepage-ways li { border-bottom: 1px solid var(--line); }
.homepage-ways a { display: grid; gap: 2px; min-height: 44px; padding: 10px 0; color: var(--paper); text-decoration: none; }
.homepage-ways strong { font: 400 20px/1.2 var(--display); }
.homepage-ways a span { color: var(--paper2); font: 400 14px/1.45 var(--sans); }
.homepage-ways a:hover strong { color: var(--gold); }
.homepage-ways a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 1000px) {
  .homepage .homepage-hero { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .homepage-ways { margin-top: 0; }
}

/* Rooms: the same rail as the Doors section. */
.homepage-room.section-shell, .homepage-room-pair { max-width: var(--r2-rail); }
@media (min-width: 1121px) {
  .homepage-room.section-shell, .homepage-room-pair { max-width: 1440px; padding-left: clamp(20px, 4vw, 64px); padding-right: clamp(20px, 4vw, 64px); }
}
.homepage-room .section-heading { padding-top: 14px; margin-bottom: 24px; }
.homepage-room .section-heading h2 { margin: 6px 0 0; color: var(--paper); font: 400 clamp(30px, 2.8vw, 42px)/1.1 var(--display); letter-spacing: -.025em; }
.homepage-room .section-heading h2.eyebrow { margin: 0; color: var(--gold); font: 650 .72rem/1.4 var(--sans); letter-spacing: .16em; }
.homepage-room-pair { display: grid; gap: 48px; }
@media (min-width: 1121px) {
  .homepage-room-pair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 4vw, 72px); align-items: start; }
}

/* The "All …" link that ends each room, and the line under the Doors. */
.homepage-room-more { margin: 18px 0 0; }
.homepage-room-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gold); font: 600 14px/1.4 var(--sans); text-decoration: none; }
.homepage-room-more a:hover { text-decoration: underline; text-underline-offset: 4px; }
.homepage-room-more a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.homepage-dossiers-more { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; margin-top: 24px; }
.homepage-dossiers-more > span { color: var(--paper2); font: 400 18px/1.5 var(--display); }

/* Cards are one link each: the title link covers the card. */
.room-card { position: relative; min-width: 0; }
.room-card-link { color: inherit; text-decoration: none; }
.room-card-link::after { content: ""; position: absolute; inset: 0; }
.room-card-link:focus-visible { outline: none; }
.room-card:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.room-meta { margin: 6px 0 0; color: var(--muted); font: 500 13px/1.4 var(--sans); }

/* Trails: art, title and stop count, then the stops in order. */
.room-trail { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px 16px; align-content: start; padding: 18px; border: 1px solid var(--line); background: var(--r2-surface); }
.room-trail:not(.has-art) { grid-template-columns: minmax(0, 1fr); }
.room-trail-art { display: block; width: 88px; height: 88px; object-fit: cover; }
.room-trail-copy { min-width: 0; align-self: center; }
.room-trail h3 { margin: 0; color: var(--paper); font: 400 clamp(22px, 1.9vw, 26px)/1.15 var(--display); letter-spacing: -.02em; overflow-wrap: break-word; }
.room-trail-stops { grid-column: 1 / -1; display: grid; gap: 6px; margin: 0; padding: 12px 0 0 1.6em; border-top: 1px solid var(--line); color: var(--paper2); font: 400 14px/1.45 var(--sans); }
.room-trail-stops li::marker { color: var(--gold); font: 600 12px var(--mono); }
.room-trail-rest { grid-column: 1 / -1; margin: 0; padding-left: 1.6em; color: var(--muted); font: 500 13px/1.4 var(--sans); }
.room-trail:hover { border-color: var(--gold); }

/* The short-reads slot (Notes today). */
.room-shorts-list { margin: 0; padding: 0; list-style: none; }
.room-short { padding: 16px 0; border-top: 1px solid var(--line); }
.room-short:first-child { padding-top: 0; border-top: 0; }
.room-short h3 { margin: 0; color: var(--paper); font: 400 clamp(21px, 1.8vw, 25px)/1.2 var(--display); letter-spacing: -.015em; }
.room-short:hover h3 { color: var(--gold); }
.room-short-line { margin: 8px 0 0; color: var(--paper2); font: 400 15px/1.52 var(--sans); }
.room-short .room-meta { margin-top: 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .03em; }
.room-short-image { display: block; width: 100%; height: auto; margin-bottom: 12px; }

/* Videos in the slot: a 9:16 still beside the title, its Dossier and its permalinks.
   Each item holds several links, so no single link covers it. */
.room-video { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; align-items: start; }
.room-video-poster { display: block; width: 90px; height: 160px; object-fit: cover; border: 1px solid var(--line); background: var(--r2-surface); }
.room-video-copy { min-width: 0; }
.room-video h3 { overflow-wrap: break-word; }
.room-video:hover h3 { color: var(--paper); }
.room-video-dossier { margin: 8px 0 0; color: var(--paper2); font: 400 15px/1.5 var(--sans); }
.room-video-links { display: flex; flex-wrap: wrap; column-gap: 18px; margin: 4px 0 0; padding: 0; list-style: none; }
.room-video-dossier a, .room-video-links a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.room-video-links a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 600 14px/1.4 var(--sans); text-decoration: none; }
.room-video-dossier a:hover, .room-video-links a:hover { color: var(--paper); }
.room-video-dossier a:focus-visible, .room-video-links a:focus-visible, .homepage-shorts .homepage-room-more a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.room-video .room-meta { margin-top: 2px; }
.room-video-credit { margin: 4px 0 0; color: var(--muted); font: 400 12px/1.4 var(--sans); }

/* Open Channels: each row in the reader's voice, with its first work. */
.room-channels { margin: 0; padding: 0; list-style: none; }
.room-channels li + li { border-top: 1px solid var(--line); }
.room-channels a { display: grid; gap: 2px; min-height: 44px; padding: 12px 0; color: var(--paper); text-decoration: none; }
.room-channels li:first-child a { padding-top: 0; }
.room-channel-row { font: 400 20px/1.25 var(--display); }
.room-channel-work { color: var(--muted); font: 500 13px/1.4 var(--sans); }
.room-channels a:hover .room-channel-row { color: var(--gold); }
.room-channels a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Encounters: the featured three. */
.room-encounter { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); background: var(--r2-surface); }
.room-kicker { margin: 0; color: var(--gold); font: 600 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.room-encounter h3 { margin: 0; color: var(--paper); font: 400 clamp(23px, 2vw, 28px)/1.13 var(--display); letter-spacing: -.02em; overflow-wrap: break-word; }
.room-encounter-invitation { margin: 0; color: var(--paper2); font: 400 15px/1.52 var(--sans); }
.room-encounter-credit { margin: 0; color: var(--muted); font: 400 13px/1.45 var(--sans); }
.room-encounter .room-meta { margin-top: auto; padding-top: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .03em; }
.room-encounter:hover { border-color: var(--gold); }

@media (max-width: 899px) {
  .room-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 760px) {
  .homepage-ways { margin-top: 24px; }
  .homepage-room-pair { gap: 32px; }
  .homepage-room .section-heading { margin-bottom: 20px; }
  .homepage-room .section-heading h2 { font-size: clamp(27px, 7.4vw, 34px); }
  .homepage-dossiers-more > span { font-size: 17px; }
  .room-trail { grid-template-columns: 72px minmax(0, 1fr); padding: 16px; }
  .room-trail-art { width: 72px; height: 72px; }
  .room-encounter { padding: 16px; }
}