/* Shared project-draft shell. The original Twins composition is the reference.
   Engine geometry and data marks remain governed by each project's own CSS. */
@font-face {
  font-family: Fraunces;
  src: url('/twins-source/assets/fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Source;
  src: url('/twins-source/assets/source-serif.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: Plex;
  src: url('/twins-source/assets/plex-mono.woff2') format('woff2');
  font-display: swap;
}

html:has(body.standard-page) {
  font-size: 16px;
  scroll-padding-top: 1rem;
}
body.standard-page {
  --std-cream: #f2e9ce;
  --std-green: #14532d;
  --std-rust: #9c3d1e;
  --std-sand: #d0be9e;
  --std-rule: #b8b79a;
  --std-space-xs: 8px;
  --std-space-s: 16px;
  --std-space-m: 26px;
  --std-space-l: 44px;
  --std-space-xl: 55px;
  --std-gutter: 40px;
  --cream: var(--std-cream);
  --green: var(--std-green);
  --rust: var(--std-rust);
  --accent: var(--std-rust);
  --sand: var(--std-sand);
  --font-body: Source, Georgia, serif;
  --font-display: Fraunces, Georgia, serif;
  --font-numeric: Plex, monospace;
  margin: 0;
  min-width: 0;
  background: var(--std-cream);
  color: var(--std-green);
  font: 1.1rem/1.5 Source, Georgia, serif;
  font-optical-sizing: auto;
  color-scheme: light;
}
body.standard-page *,
body.standard-page *::before,
body.standard-page *::after { box-sizing: border-box; }
body.standard-page [hidden],
body.standard-page .std-original-selection { display: none !important; }
body.standard-page .std-wrap {
  width: min(1160px, calc(100% - var(--std-gutter) * 2));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
body.standard-page > main,
body.standard-page .std-engine {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--std-cream);
  color: var(--std-green);
}
body.standard-page a { text-underline-offset: 4px; }
body.standard-page :focus-visible {
  outline: 3px solid var(--std-rust);
  outline-offset: 3px;
}

/* A plain masthead, with the same five destinations on every draft. */
body.standard-page .std-site-header {
  position: static;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--std-rule);
  background: var(--std-cream);
  color: var(--std-green);
}
body.standard-page .std-mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--std-space-s);
  min-height: 66px;
  padding-block: 0;
}
body.standard-page .std-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 9px;
  color: var(--std-green);
  font: 600 1.12rem/1.2 Fraunces, Georgia, serif;
  text-decoration: none;
  white-space: nowrap;
}
body.standard-page .std-brand img {
  display: block;
  width: 56px;
  height: 32px;
  margin: 0;
  object-fit: contain;
}
body.standard-page > .std-site-header .std-mast > nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  gap: 26px !important;
  width: auto !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
}
body.standard-page > .std-site-header .std-mast > nav a {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  color: var(--std-green);
  font: .8rem/1.4 Plex, monospace !important;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
body.standard-page .std-site-header nav a:hover { text-decoration: underline; }

/* Opening: preserve the size, ink, and italic rust emphasis of Twins. */
body.standard-page .std-intro {
  padding-block: clamp(28px, 4vw, 55px) 26px;
  background: var(--std-cream);
  color: var(--std-green);
}
body.standard-page .std-eyebrow,
body.standard-page .std-selected-row .kicker,
body.standard-page .std-notes .std-kicker {
  font: .72rem/1.4 Plex, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.standard-page .std-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
body.standard-page .std-eyebrow::before {
  content: '';
  flex: none;
  width: 32px;
  height: 2px;
  background: var(--std-rust);
}
body.standard-page .std-eyebrow :is(.line, .std-line) { display: none; }
body.standard-page .std-intro h1 {
  max-width: none;
  margin: 13px 0 10px;
  padding: 0;
  color: var(--std-green);
  font: 550 clamp(3rem, 6.7vw, 5.7rem)/1.06 Fraunces, Georgia, serif;
  font-variation-settings: 'WONK' 1, 'SOFT' 90;
  letter-spacing: -.045em;
  text-wrap: initial;
}
body.standard-page .std-intro h1 i {
  color: var(--std-rust);
  font-weight: 450;
  font-style: italic;
}
body.standard-page .std-intro > p,
body.standard-page .std-intro .std-deck {
  max-width: 75ch;
  margin: 0;
  color: var(--std-green);
  font: clamp(1.08rem, 1.65vw, 1.35rem)/1.5 Source, Georgia, serif;
}

/* Each preserved engine returns to the one shared paper gutter. */
body.standard-page .std-workspace { padding-block: 0 var(--std-space-xl); }
body.standard-page .std-workspace :is(.band, .band-inner) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: none;
  background: transparent;
  color: inherit;
}
body.standard-page .std-workspace .figure {
  width: 100%;
  max-width: none;
  margin: 0;
}
body.standard-page .std-workspace > .wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
/* The report comes first in reading order; desktop retains the original map left. */
body.standard-page[data-project='twins'] .exploregrid > .ranking {
  grid-column: 2;
  grid-row: 1;
}
body.standard-page[data-project='twins'] .exploregrid > .map {
  grid-column: 1;
  grid-row: 1;
}
body.standard-page .std-selection-area {
  margin: 0 0 20px;
  padding: 0;
  border-top: 2px solid var(--std-green);
  border-bottom: 1px solid var(--std-rule);
}
body.standard-page .std-selected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--std-space-s);
  min-width: 0;
  margin: 0;
  padding-block: 17px;
  border: 0;
}
body.standard-page .std-selected-row + .std-selected-row {
  border-top: 1px solid var(--std-rule);
}
body.standard-page .std-selected-row > div { min-width: 0; }
body.standard-page .std-selected-row .kicker { display: block; }
body.standard-page .std-selected-name {
  display: block;
  margin: 4px 0;
  color: var(--std-green);
  font: 550 1.75rem/1.06 Fraunces, Georgia, serif;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
body.standard-page .std-selected-meta {
  display: block;
  margin: 0;
  font: .8rem/1.5 Plex, monospace;
  font-variant-numeric: tabular-nums;
}
body.standard-page .std-change-player {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--std-green);
  border-radius: 4px;
  background: var(--std-green);
  color: var(--std-cream);
  font: .86rem/1.4 Plex, monospace;
  cursor: pointer;
}
body.standard-page .std-change-player svg { flex: none; width: 18px; height: 18px; }
body.standard-page .std-change-player:hover { box-shadow: inset 0 0 0 1px currentColor; }
body.standard-page .std-change-player:disabled { opacity: .65; cursor: wait; }

/* Standard control materials, while retaining each engine's control layout. */
body.standard-page .std-workspace select,
body.standard-page .std-workspace input:is([type='search'], [type='text'], [type='number']) {
  min-width: 0;
  max-width: 100%;
  min-height: 48px !important;
  padding: 10px 12px;
  border: 1px solid var(--std-green);
  border-radius: 3px;
  background: var(--std-cream);
  color: var(--std-green);
  font: 400 1rem/1.4 Source, Georgia, serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.standard-page .std-workspace :is(.mb-controls, .player-controls, .fan-controls, .tennis-controls, .shared-controls, .std-context-controls) label:not(:has(input[type='checkbox'], input[type='radio'], input[type='range'])),
body.standard-page .std-workspace :is(.mb-controls, .player-controls, .fan-controls, .tennis-controls, .shared-controls, .std-context-controls) legend {
  font: 400 .72rem/1.4 Plex, monospace !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
body.standard-page .std-workspace input:is([type='radio'], [type='checkbox'], [type='range']) {
  accent-color: var(--std-green);
}
body.standard-page .std-workspace :is(.view-controls, .shared-controls) label:has(input[type='radio']) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: .85rem/1.4 Plex, monospace;
}
body.standard-page .std-workspace button[role='tab'],
body.standard-page .std-workspace .view-controls label {
  min-height: 44px !important;
  border: 1px solid var(--std-green);
  border-radius: 4px;
  font: 400 .85rem/1.4 Plex, monospace !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.standard-page .std-workspace .std-context-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px 30px;
  width: 100%;
  margin: 16px 0 20px;
  padding: 16px 0;
  border: 0;
  border-block: 1px solid var(--std-rule);
  background: transparent;
}
body.standard-page .std-workspace .std-context-controls > .view-controls {
  grid-column: 1;
  grid-row: 1 / 3;
  margin: 0;
}
body.standard-page .std-workspace .std-context-controls .view-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.standard-page .std-workspace .std-context-controls > .guide-step {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font: 400 .72rem/1.4 Plex, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.standard-page .std-workspace .std-context-controls > :not(.view-controls, .guide-step) {
  grid-column: 2;
  grid-row: 2;
}
body.standard-page .std-workspace .std-court-with-top-controls {
  grid-template-columns: minmax(0, 1fr) !important;
}
body.standard-page .std-workspace .std-court-with-top-controls > .court-panel {
  grid-column: 1 / -1;
}
body.standard-page .std-reading {
  margin: 16px 0 20px;
  padding: 0;
  border: 0;
  border-block: 1px solid var(--std-rule);
  background: transparent;
}
body.standard-page .std-workspace .std-reading > summary {
  display: list-item !important;
  min-height: 44px !important;
  padding: 10px 0 !important;
  color: var(--std-green);
  font: 400 .86rem/1.5 Plex, monospace !important;
  cursor: pointer;
}
body.standard-page .std-reading > :not(summary) { margin-block: 8px 16px; }

/* The same document sequence follows every engine. */
body.standard-page .std-method {
  margin: 0;
  padding: 0;
  background: var(--std-green);
  color: var(--std-cream);
}
body.standard-page .std-notes {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 30px;
  padding-block: var(--std-space-l);
}
body.standard-page .std-engine > .std-reference {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--std-cream);
  color: var(--std-green);
}
body.standard-page .std-engine > .std-reference .std-notes {
  border-bottom: 1px solid var(--std-rule);
}
body.standard-page .std-notes > :is(div, section),
body.standard-page :is(.std-notes-copy, .std-note-copy) { min-width: 0; }
body.standard-page .std-notes h2 {
  max-width: none;
  margin: 8px 0 0;
  padding: 0;
  color: inherit;
  font: 550 clamp(1.65rem, 3vw, 2.5rem)/1.06 Fraunces, Georgia, serif !important;
  font-variation-settings: 'WONK' 1, 'SOFT' 90;
  letter-spacing: -.045em;
}
body.standard-page :is(.std-notes-copy, .std-note-copy) h3 {
  margin: 20px 0 8px;
  color: inherit;
  font: 550 1.35rem/1.15 Fraunces, Georgia, serif;
  font-variation-settings: 'WONK' 0, 'SOFT' 0;
  letter-spacing: -.025em;
}
body.standard-page :is(.std-notes-copy, .std-note-copy) :is(p, ul, ol, dl, dd) {
  max-width: none;
  color: inherit;
  font: 400 1.1rem/1.5 Source, Georgia, serif !important;
}
body.standard-page :is(.std-notes-copy, .std-note-copy) p { margin: 0; }
body.standard-page :is(.std-notes-copy, .std-note-copy) p + p { margin-top: 12px; }
body.standard-page :is(.std-notes-copy, .std-note-copy) :is(ul, ol) { margin-block: 12px; padding-left: 1.3em; }
body.standard-page :is(.std-notes-copy, .std-note-copy) li + li { margin-top: 8px; }
body.standard-page :is(.std-notes-copy, .std-note-copy) :is(a, button.term, .definition-trigger) { color: inherit; }
body.standard-page .std-method :focus-visible { outline-color: var(--std-cream); }
body.standard-page .std-disclosure {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid currentColor;
  background: transparent;
  color: inherit;
}
body.standard-page .std-notes .std-disclosure > summary {
  display: list-item !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  color: inherit;
  font: 400 .86rem/1.5 Plex, monospace !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
body.standard-page .std-disclosure > :not(summary) { margin-block: 12px; }
body.standard-page :is(.std-notes-copy, .std-note-copy) dt {
  margin: 16px 0 4px;
  color: inherit;
  font: 550 1.3rem/1.2 Fraunces, Georgia, serif;
}
body.standard-page :is(.std-notes-copy, .std-note-copy) dt:first-child { margin-top: 0; }
body.standard-page :is(.std-notes-copy, .std-note-copy) dd { margin: 0; }
body.standard-page :is(.std-notes-copy, .std-note-copy) :is(pre, .table-scroll, .table-wrap) { max-width: 100%; overflow-x: auto; }
body.standard-page :is(.std-site-footer, .std-footer) {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--std-cream);
  color: var(--std-green);
}
body.standard-page :is(.std-site-footer, .std-footer) .std-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 26px;
  color: var(--std-green);
  font: .82rem/1.5 Plex, monospace;
}
body.standard-page :is(.std-site-footer, .std-footer) a { color: inherit; }

/* One searchable native dialog, and one matching vocabulary-help dialog. */
body.standard-page :is(.std-picker, .std-definition) {
  width: min(460px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: 85dvh;
  margin: auto;
  padding: 24px;
  overflow: auto;
  border: 2px solid var(--std-green);
  border-radius: 0;
  background: var(--std-cream);
  color: var(--std-green);
  font: 1.1rem/1.5 Source, Georgia, serif;
}
body.standard-page :is(.std-picker, .std-definition)::backdrop { background: #09291999; }
body.standard-page :is(.std-picker, .std-definition) .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
}
body.standard-page :is(.std-picker, .std-definition) h2 {
  min-width: 0;
  margin: 0;
  color: var(--std-green);
  font: 550 clamp(1.65rem, 3vw, 2.5rem)/1.06 Fraunces, Georgia, serif;
  letter-spacing: -.045em;
}
body.standard-page .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--std-rule);
  border-radius: 50%;
  background: transparent;
  color: var(--std-green);
  font: 1.7rem/1 system-ui, sans-serif;
  cursor: pointer;
}
body.standard-page .std-picker label { display: block; margin-bottom: 4px; }
body.standard-page #std-picker-search {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--std-green);
  border-radius: 3px;
  background: #fff9e7;
  color: var(--std-green);
  font: 1rem/1.5 Source, Georgia, serif;
}
body.standard-page #std-picker-status {
  margin: 8px 0;
  font: .8rem/1.5 Plex, monospace;
}
body.standard-page #std-picker-results { max-height: 42dvh; margin: 0; padding: 0; overflow-y: auto; }
body.standard-page [data-std-option] {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 9px;
  border: 0;
  border-top: 1px solid var(--std-rule);
  border-radius: 0;
  background: transparent;
  color: var(--std-green);
  font: 1.1rem/1.4 Source, Georgia, serif;
  text-align: left;
  cursor: pointer;
}
body.standard-page [data-std-option]:hover { background: var(--std-sand); }
body.standard-page [data-std-option] > :first-child { display: block; }
body.standard-page [data-std-option] > :nth-child(2) { display: block; margin-top: 3px; font: .75rem/1.5 Plex, monospace; }
body.standard-page .std-definition > p { margin: 0; }
body.standard-page .std-definition > a { display: inline-block; margin-top: 14px; color: inherit; }

@media (max-width: 760px) {
  body.standard-page[data-project='twins'] .exploregrid > .ranking {
    grid-column: 1;
    grid-row: 1;
  }
  body.standard-page[data-project='twins'] .exploregrid > .map {
    grid-column: 1;
    grid-row: 2;
  }
  body.standard-page { --std-gutter: 18px; }
  body.standard-page .std-mast {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 12px;
  }
  body.standard-page .std-brand { gap: 8px; font-size: 1rem; }
  body.standard-page .std-brand img { width: 38px; height: 28px; }
  body.standard-page > .std-site-header .std-mast > nav {
    justify-content: space-between;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto;
  }
  body.standard-page > .std-site-header .std-mast > nav a {
    font-size: .75rem !important;
    letter-spacing: -.01em;
  }
  body.standard-page .std-intro { padding-block: 28px 16px; }
  body.standard-page .std-intro h1 { font-size: clamp(2.65rem, 10vw, 4rem); }
  body.standard-page .std-notes { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 30px; }
  body.standard-page .std-selection-area { margin-bottom: 8px; }
  body.standard-page .std-selected-row { align-items: flex-start; }
  body.standard-page .std-workspace { padding-bottom: 36px; }
  body.standard-page .std-workspace .std-context-controls { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.standard-page .std-workspace .std-context-controls > :is(.view-controls, .guide-step),
  body.standard-page .std-workspace .std-context-controls > :not(.view-controls, .guide-step) {
    grid-column: 1;
    grid-row: auto;
  }
  body.standard-page .std-workspace .std-context-controls .view-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 470px) {
  body.standard-page .std-intro { padding-top: 17px; }
  body.standard-page .std-eyebrow,
  body.standard-page .std-selected-row .kicker { font-size: .66rem; }
  body.standard-page .std-selected-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  body.standard-page .std-selected-name { font-size: 1.4rem; margin-bottom: 0; }
  body.standard-page .std-change-player { padding: 8px 10px; }
  body.standard-page :is(.std-site-footer, .std-footer) .std-wrap { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  body.standard-page { scroll-behavior: auto; }
}

/* Technical subheadings inherit the method band's reversed foreground. */
body.standard-page :is(.std-notes-copy, .std-note-copy) :is(h4, h5, h6) {
  margin: 20px 0 8px;
  color: inherit;
  font: 550 1.15rem/1.2 Fraunces, Georgia, serif;
  font-variation-settings: 'WONK' 0, 'SOFT' 0;
}

/* Secondary actions use the same outlined control as the original Twins tool. */
body.standard-page .std-workspace :is(.mb-controls, .player-controls, .fan-controls, .tennis-controls, .shared-controls, .std-context-controls) button:not(.term, .definition-trigger, .std-change-player, [role='tab'], [aria-pressed]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--std-green);
  border-radius: 4px;
  background: transparent;
  color: var(--std-green);
  font: 400 .86rem/1.4 Plex, monospace !important;
  letter-spacing: 0;
  text-transform: none;
}