/* R2 shared visual contract. The older stylesheets remain in place while page
   lanes adopt these tokens and components one surface at a time. */
:root {
  --bg: #090b0b;
  --ink: #090b0b;
  --paper: #f0eadf;
  --paper2: #d0c7ba;
  --muted: #b8afa2;
  --muted2: #a99f91;
  --gold: #d6b77e;
  --cream: #f7f0e3;
  --line: rgba(240,234,223,.2);
  --line-strong: rgba(240,234,223,.36);
  --display: Georgia, 'Times New Roman', serif;
  --serif: var(--display);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Consolas, monospace;
  --r2-surface: #121614;
  --r2-surface-raised: #1a1e1a;
  --r2-rail: 1320px;
  --r2-reading: 72ch;
  --r2-space-1: 8px;
  --r2-space-2: 16px;
  --r2-space-3: 24px;
  --r2-space-4: 40px;
  --r2-space-5: 64px;
  --r2-space-6: 96px;
}

html { scroll-padding-top: 88px; }
body { color: var(--paper); background: var(--bg); }
.site-header { background: rgba(9,11,11,.97); border-bottom-color: var(--line); }
.site-header .site-brand { color: var(--paper); }
.site-header .brand-mark { border-color: var(--gold); }
.site-header .brand-mark span { border-color: var(--gold); }
.site-header a:not(.site-brand) { color: var(--paper2); font: 500 14px/1.35 var(--sans); }
.site-header a:hover, .site-header a:focus-visible,
.site-header a[aria-current="page"] { color: var(--paper); }
.site-header a[aria-current="page"] { box-shadow: inset 0 -2px var(--gold); }
.site-mobile-menu summary { min-height: 48px; color: var(--paper); font: 600 14px/1.35 var(--sans); }
.site-mobile-panel { background: var(--r2-surface); border-color: var(--line-strong); }
.site-mobile-panel a { width: 100%; }
.site-footer { color: var(--muted); border-color: var(--line); }
.site-footer a { color: var(--paper2); font-size: 14px; }
.site-header :focus-visible, .site-footer :focus-visible,
.r2-control:focus-visible, .r2-card:focus-visible,
.door-card:focus-visible, .elsewhere-card:focus-visible,
.source-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.r2-control { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 12px 20px; border: 1px solid var(--gold); border-radius: 999px;
  font: 600 14px/1.35 var(--sans); text-decoration: none; cursor: pointer; }
.r2-control-primary { color: var(--bg); background: var(--gold); }
.r2-control-primary:hover { background: #e4c68f; border-color: #e4c68f; }
.r2-control-secondary { color: var(--paper); background: transparent; border-color: var(--line-strong); }
.r2-control-secondary:hover { border-color: var(--gold); background: rgba(214,183,126,.08); }
.r2-card { border: 1px solid var(--line); background: var(--r2-surface); color: var(--paper); text-decoration: none; }
.r2-card:hover { border-color: var(--gold); }
.r2-card h2, .r2-card h3 { overflow-wrap: break-word; }
.r2-kicker { color: var(--gold); font: 600 13px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.r2-meta { color: var(--muted); font: 500 13px/1.5 var(--sans); }

/* First complete R2 demonstration: an invitation followed immediately by
   the three existing Doors and the uninterrupted Elsewhere collection. */
.homepage-hero { grid-template-columns: minmax(0,1fr); max-width: var(--r2-rail); padding: 24px clamp(20px,4vw,64px) 14px; gap: 0; }
.homepage-hero-copy { max-width: 940px; }
.homepage-hero-eyebrow { margin-bottom: 10px; font-size: 13px; }
.homepage-hero h1 { font-size: clamp(42px,4.8vw,66px); line-height: 1.02; }
.homepage-hero-dek { max-width: 72ch; margin-top: 12px; font-size: clamp(17px,1.3vw,19px); line-height: 1.5; }
.homepage-hero-actions { margin-top: 16px; }
.homepage-hero-primary { min-height: 48px; }
.homepage-hero-secondary { min-height: 48px; }
#ideasView, #elsewhereView { max-width: var(--r2-rail); }
#ideasView { padding-top: 22px; padding-bottom: 24px; }
#ideasView .section-heading { padding-top: 14px; margin-bottom: 16px; }
#ideasView .section-heading h2 { font-size: clamp(30px,2.8vw,42px); }
#ideasView .section-note { color: var(--paper2); font-size: 14px; line-height: 1.5; }
.featured-grid { gap: 16px; }
.door-card, .door-card.secondary { min-height: 440px; border-color: var(--line); }
.door-card:hover { border-color: var(--gold); }
.door-card .door-heading { padding: 16px 24px 8px; }
.door-card h3 { font-size: clamp(29px,2.7vw,40px); line-height: 1.09; margin: 12px 0 0; overflow-wrap: break-word; }
.door-card .door-copy { padding: 16px 24px 24px; }
.door-card .door-copy p { color: var(--paper2); font-size: 16px; line-height: 1.52; }
.door-card .read, .elsewhere-card .read { font: 600 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--gold); }
.door-card .read { display: inline-flex; min-height: 32px; align-items: center; }
#elsewhereView { padding-top: 8px; }
.elsewhere-head { margin: 0 0 18px; }
.elsewhere-head p:last-child { color: var(--paper2); font-size: 14px; }
.elsewhere-grid { gap: 12px; }
.elsewhere-card { min-height: 218px; padding: 20px; background: var(--r2-surface); border-color: var(--line); }
.elsewhere-card h3 { font-size: clamp(23px,2vw,29px); line-height: 1.13; margin: 14px 0 10px; overflow-wrap: break-word; }
/* Category and Added date always stack, so titles in a row start at the same height. */
.elsewhere-card .elsewhere-card-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
.elsewhere-card p { color: var(--paper2); font-size: 15px; line-height: 1.52; }
.elsewhere-card:hover { border-color: var(--gold); }
.category, .eyebrow { color: var(--gold); }
.category { font-size: 12px; line-height: 1.4; letter-spacing: .08em; }
.surface-badge { display: block; margin: 0 0 8px; color: var(--gold); font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.door-top { justify-content: flex-start; }
.door-top .surface-badge { display: inline; margin: 0; }
.destination-links { max-width: var(--r2-rail); border-color: var(--line); }
.destination-links-grid a { color: var(--paper); border-color: var(--line); }
.destination-links-grid span { color: var(--paper2); font-size: 14px; }

/* Homepage desktop balance (Option 2): above the 1120 nav breakpoint, every
   homepage band shares one 1440 rail and the header's gutter, so the column
   edges meet the brand mark and the end of the nav. Tablet and phone keep
   their own edges. Scoped to homepage selectors; shared --r2-rail is untouched. */
@media (min-width: 1121px) {
  .homepage-hero, .invitation-band, #ideasView, #elsewhereView, .destination-links {
    max-width: 1440px;
    padding-left: clamp(20px,4vw,64px);
    padding-right: clamp(20px,4vw,64px);
  }
  /* Its top hairline is a border on the section itself, so the rail moves to
     margin here and the rule ends on the column edges. */
  .destination-links {
    width: calc(100% - 2 * clamp(20px,4vw,64px));
    max-width: calc(1440px - 2 * clamp(20px,4vw,64px));
    padding-left: 0;
    padding-right: 0;
  }
  .destination-links-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

/* Shared reading affordances, without changing any article copy or evidence. */
.dossier-section p, .note-body p { max-width: var(--r2-reading); }
.evidence-definitions summary { min-height: 48px; }
.source-row { min-height: 48px; color: var(--paper); }
.source-row .year, .source-row span { color: var(--muted); }
.source-row .source-access-note { display: block; margin-top: 8px; color: var(--paper2); font: 400 13px/1.5 var(--sans); }
.empty, .error { color: var(--paper2); }

@media (min-width: 1600px) {
  .homepage-hero { padding-top: 32px; }
  .door-card, .door-card.secondary { min-height: 485px; }
}
@media (max-width: 1050px) {
  .featured-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .door-card:first-child { grid-column: auto; }
  .door-card, .door-card.secondary { min-height: 440px; }
  .door-card .door-heading, .door-card .door-copy { padding-inline: 18px; }
  .door-card h3 { font-size: clamp(26px,3vw,34px); }
}
@media (min-width: 761px) and (max-width: 849px) {
  .featured-grid.has-three-pilot-art { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .featured-grid.has-three-pilot-art .door-card:last-child { grid-column: auto; width: auto; justify-self: stretch; }
  .featured-grid .door-card .door-heading, .featured-grid .door-card .door-copy { padding-inline: 16px; }
  .featured-grid .door-card h3 { font-size: 25px; }
}
@media (max-width: 760px) {
  .homepage-hero { position: relative; padding: 24px 20px 16px; gap: 0; }
  .homepage-hero h1 { font-size: clamp(39px,10vw,56px); }
  .homepage-hero-dek { margin-top: 14px; font-size: 17px; line-height: 1.48; }
  .homepage-hero-actions { margin-top: 16px; gap: 8px 14px; }
  #ideasView { padding: 16px 20px 20px; }
  #ideasView .section-heading { padding-top: 15px; margin-bottom: 15px; gap: 8px; }
  #ideasView .section-note { max-width: 45ch; }
  .featured-grid, .featured-grid.has-three-pilot-art { grid-template-columns: 1fr; gap: 12px; }
  .door-card, .door-card.secondary { min-height: 0 !important; }
  .door-card:first-child { grid-column: auto; }
  .featured-grid.has-three-pilot-art .door-card:last-child { grid-column: auto; width: auto; justify-self: stretch; }
  .featured-grid .door-card.has-pilot-art { display: grid; grid-template-columns: 106px minmax(0,1fr); grid-template-rows: auto auto; }
  .featured-grid .door-card.has-pilot-art .door-art { grid-column: 1; grid-row: 1; width: 90px; height: 90px; margin: 16px 0 0 16px; }
  .featured-grid .door-card.has-pilot-art .door-heading { grid-column: 2; grid-row: 1; padding: 16px 16px 0 10px; }
  .featured-grid .door-card.has-pilot-art .door-copy { grid-column: 1 / -1; grid-row: 2; padding: 8px 16px 16px; }
  .featured-grid .door-card h3 { font-size: clamp(24px,6.4vw,30px); margin: 7px 0 0; }
  .featured-grid .door-card .door-copy p { font-size: 15px; line-height: 1.48; }
  .featured-grid .door-card .read { padding-top: 8px; }
  #elsewhereView { padding: 4px 20px 48px; }
  .elsewhere-grid { grid-template-columns: 1fr; }
  .elsewhere-card { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .door-card, .elsewhere-card, .r2-control { transition: none !important; transform: none !important; }
}

/* Pattern shelves (2026-09-30 direction): a vertical stack, never a rail. */
#elsewhereGrid[data-shelved] { display: block; }
.pattern-shelf { margin: 0 0 40px; }
.pattern-shelf-head { max-width: 72ch; margin: 0 0 16px; }
.pattern-shelf-head h3 { margin: 0; color: var(--paper); font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--serif); letter-spacing: -.02em; }
.pattern-mechanism { margin: 8px 0 0; color: var(--paper2); font: 400 17px/1.5 var(--serif); }
.pattern-breaks { margin: 6px 0 0; color: var(--muted, #aaa296); font: 400 15px/1.5 var(--serif); }
.pattern-breaks span { color: var(--gold); font: 600 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-right: 6px; }
.pattern-shelf .elsewhere-card h4 { font: 350 clamp(23px,2vw,29px)/1.13 var(--display); letter-spacing: -.025em; margin: 14px 0 10px; overflow-wrap: break-word; }
.pattern-more { margin-top: 12px; }
.pattern-more summary { cursor: pointer; color: var(--gold); font: 600 14px/1.4 var(--sans); min-height: 44px; display: inline-flex; align-items: center; }
.pattern-more > .shelf-grid { margin-top: 12px; }
@media (max-width: 760px) { .pattern-shelf { margin-bottom: 32px; } .pattern-mechanism { font-size: 16px; } }

/* Homepage discovery: finite, fully visible entries and a compact route band.
   Scope these rules to the homepage so the reading surfaces keep their rhythm. */
.homepage .homepage-hero { padding-bottom: 0; }
.homepage main > .section-shell {
  margin: 48px auto 0;
  padding-block: 0;
}
.homepage #ideasView, .homepage #elsewhereView { padding-block: 0; }
.homepage #ideasView .section-heading { margin-bottom: 24px; }
.homepage #elsewhereView { margin-bottom: 48px; }
.homepage #elsewhereView .elsewhere-head { margin-bottom: 24px; }
.homepage .pattern-shelf { margin: 0 0 40px; }
.homepage .pattern-shelf:last-child { margin-bottom: 0; }
.homepage .pattern-shelf-head { margin-bottom: 24px; }
.homepage #elsewhereView .elsewhere-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  align-items: start;
}
.homepage #elsewhereView .elsewhere-card {
  min-height: 0;
  min-width: 0;
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  justify-content: flex-start;
  text-decoration: none;
}
.homepage #elsewhereView .elsewhere-card:hover { border-top-color: var(--gold); }
.homepage #elsewhereView .elsewhere-card h3,
.homepage #elsewhereView .elsewhere-card h4 { margin: 8px 0 10px; }
.homepage #elsewhereView .elsewhere-card p { margin: 0; }
.homepage #elsewhereView .elsewhere-card .read { margin-top: 14px; }
.homepage .destination-links {
  width: 100%;
  max-width: var(--r2-rail);
  padding-inline: clamp(24px, 5vw, 72px);
  border: 0;
}
.homepage .destination-links > .eyebrow {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.homepage .destination-links-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px;
  margin-top: 20px;
}
.homepage .destination-links-grid a { min-height: 0; padding: 0; border: 0; gap: 8px; }
.homepage .destination-links-grid a:hover strong { color: var(--gold); }
.homepage .destination-links-grid a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (min-width: 1121px) {
  .homepage .destination-links { max-width: 1440px; padding-inline: clamp(20px, 4vw, 64px); }
}
@media (max-width: 950px) {
  .homepage .destination-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .homepage main > .section-shell { margin-top: 32px; padding-inline: 20px; }
  /* Beat design-batch-1.css's mobile #ideasView important padding too. */
  .homepage #ideasView { padding: 0 20px !important; }
  .homepage #ideasView .section-heading,
  .homepage #elsewhereView .elsewhere-head,
  .homepage .pattern-shelf-head { margin-bottom: 20px; }
  .homepage #elsewhereView .elsewhere-grid { grid-template-columns: 1fr; }
  .homepage .destination-links-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* mobile.css applies important padding/margins to every section-shell, also
   on coarse-pointer tablets. Override exactly that legacy scope only at home. */
@media (max-width: 700px), (max-device-width: 700px), (max-width: 1050px) and (pointer: coarse) {
  .homepage main > .section-shell { padding: 0 20px !important; margin: 32px auto 0 !important; }
  .homepage main > #elsewhereView { margin-bottom: 48px !important; }
}