/* Alpine vs Willamette. The evening's spine is a single axis from power to perfume, so
   the axis is the palette: a dense claret at one end, a pale violet at the other, on a
   near-neutral night ground. The two regions get their own colours because the closing
   map has to show at a glance whether they separated — alpine blue for Alto Adige, Jory
   red for the Dundee Hills. */
html[data-theme="power-perfume"] {
  --bg: #1d1c22;
  --deep: #161519;
  --ink: #ece9e4;
  --muted: #a3a0aa;
  --line: #383641;
  --accent: #c2a06a;
  --water: #6f9bc4;
  --rose: #b98fa8;
  --surface: #272531;
  --button: #242229;
  --hover: #302d38;
  --body: #c8c4cd;
  --land: #2a2833;
  --land-line: #6d6878;
  --primary-ink: #161519;
  --primary-hover: #d8b985;
  --selected: #c2a06a1c;
  --track: #333039;
  --backdrop: #0b0a0dbd;

  --power: #8e3b46;
  --perfume: #9b8fc4;
  --region-alpine: #6f9bc4;
  --region-oregon: #b4542f;
}

.strip { max-height: none; }
.strip text { fill: var(--ink); }

/* Placing one wine, on that wine's own screen. */
.placement { max-width: 850px; margin: auto; padding: 20px 3.5vw 35px; }
.placement-slider { display: block; margin: 6px 0 10px; }
.placement-slider input { width: 100%; accent-color: var(--accent); height: 34px; }
.placement-status { font-size: 13px; color: var(--muted); margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pinot-lineup { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pinot-card { border-top: 3px solid var(--line); padding-top: 12px; }
.pinot-card[data-region="alpine"] { border-top-color: var(--region-alpine); }
.pinot-card[data-region="oregon"] { border-top-color: var(--region-oregon); }
.pinot-card h3 { font-size: 19px; margin: 6px 0 4px; }
.pinot-region { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.pinot-dot { display: none; }
.pinot-card dl, .wine-facts { margin: 0; display: grid; gap: 7px; }
.pinot-card dl div, .wine-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pinot-card dt, .wine-facts dt { color: var(--muted); }
.pinot-card dd, .wine-facts dd { margin: 0; text-align: right; }
.wine-facts { margin-top: 14px; font-size: 14px; }
.wine-facts div { font-size: 14px; }

/* The host's own material about Alto Adige belongs here, and nothing else does. */
.host-slot { margin-top: 18px; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 8px; background: #ffffff05; }
.host-slot p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.host-slot p:last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .pinot-lineup { grid-template-columns: 1fr 1fr; }
  .placement { padding: 20px 22px 30px; }
}