/* Carso: white stone, red earth. A dark stone ground with limestone-white text, terra
   rossa as the accent, and amber for the skin-contact thread that runs through the
   evening. The Adriatic supplies the one cool note. */
html[data-theme="white-stone"] {
  --bg: #1e1b1a;
  --deep: #171413;
  --ink: #ece6dd;
  --muted: #a89d92;
  --line: #3d3733;
  --accent: #b6512f;
  --water: #6f8f96;
  --rose: #c98f3f;
  --amber: #c98f3f;
  --surface: #2a2523;
  --button: #272220;
  --hover: #342d29;
  --body: #cfc5b9;
  --land: #2e2926;
  --land-line: #7d7268;
  --primary-ink: #171413;
  --primary-hover: #cf6a45;
  --selected: #b6512f1c;
  --track: #372f2b;
  --backdrop: #0d0a09bd;
}

.carso-maps { display: grid; gap: 14px; }
.carso-maps .art { max-height: 230px; }
.stone-pair { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; margin-top: 16px; }
.stone-pair .art { max-height: 220px; }

.grape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grape-card { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.grape-card h3 { font-size: 20px; margin: 10px 0 5px; }
.grape-card p { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; }
.grape-shot { border-radius: 6px; overflow: hidden; background: #ffffff08; }
.grape-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
/* The blend gets all four of its grapes at once, quartered. */
.blend-art { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 6px; overflow: hidden; }
.blend-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.grape-solo { max-width: 420px; margin: 0 auto; }
/* Beside a cellar photograph the grape sits landscape, so the two match. */
.grape-side .grape-shot img, .grape-side .blend-art img { aspect-ratio: 4 / 3; }
.grape-side .figure-caption { margin-top: 10px; text-align: center; }

.colour-ramp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.colour-card { margin: 0; text-align: center; }
.colour-swatch { display: block; height: 96px; border-radius: 6px; border: 1px solid #ffffff1a; }
.colour-card figcaption { margin-top: 10px; font-size: 12px; line-height: 1.5; }
.colour-card strong { display: block; color: var(--ink); font-weight: 500; }
.colour-card small { color: var(--muted); }

/* Which of the two cellars tonight's glass came out of. */
.cellar-strip { display: flex; gap: 8px; margin-top: 16px; }
.cellar-strip span { flex: 1; text-align: center; padding: 9px 10px; border-top: 2px solid var(--line); font-size: 12px; color: var(--muted); }
.cellar-strip span.on { border-color: var(--accent); color: var(--accent); }

/* The thread picker: five options including "nothing", offered without irony. */
.thread-picker { border: 0; margin: 0 0 22px; padding: 0; }
.thread-picker legend { padding: 0; font: 19px Georgia, serif; color: var(--ink); margin-bottom: 8px; }
.thread-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.thread-grid label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-height: 56px; padding: 12px 15px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--button); transition: border-color .18s, background .18s, color .18s; }
.thread-grid label:hover { background: var(--hover); }
.thread-grid label.is-chosen { border-color: var(--accent); background: var(--selected); }
.thread-grid label.is-chosen strong { color: var(--accent); }
.thread-grid input { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.thread-grid strong { display: block; font-size: 14px; font-weight: 600; }
.thread-grid small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted); }

.thread-row { grid-template-columns: 1fr 76px 44px; }
.thread-move { text-align: right; font: 13px var(--font-mono, monospace); color: var(--muted); }
.thread-move.up { color: var(--accent); }
.thread-move.down { color: var(--water); }
.moved-line { margin-top: 16px; font-size: 15px; line-height: 1.6; }

@media (max-width: 800px) {
  .stone-pair, .grape-grid, .colour-ramp { grid-template-columns: 1fr 1fr; }
  .colour-swatch { height: 70px; }
  .thread-grid { grid-template-columns: 1fr; }
}