/* "Vessel spectrum". A neutral basalt shell so the four vessel colours carry the
   identity: steel, a quarter of a barrel, new oak, clay. One rule per line, matching
   style.css, so two people editing different rules do not conflict. */
html[data-theme="vessel-spectrum"]{color-scheme:dark;--bg:#1c1e21;--deep:#141619;--ink:#f1ede4;--muted:#a6a8ab;--line:#383a3f;--accent:#e2b979;--water:#5f9ab6;--sea:#5f9ab6;--rose:#c4664a;--surface:#232629;--button:#272a2e;--hover:#33373c;--body:#cdc9c1;--land:#2b2f33;--land-line:#5b6067;--primary-ink:#1c1e21;--primary-hover:#eecf9c;--selected:#e2b97914;--track:#2f3237;--backdrop:#0c0d0fcc}
/* The four vessels. These are first-class tokens, not decoration: the strip, the rank
   rows, the summary table and the diagrams all read from them. */
html[data-theme="vessel-spectrum"]{--steel:#9db6c2;--part-oak:#cfa163;--new-oak:#a56a2e;--clay:#c4664a}
/* Drawing colours for the aspa card, the baskets and the drying terraces. */
html[data-theme="vessel-spectrum"]{--sea-wash:#1a2226;--ash:#6f7479;--pumice:#b4aa9c;--lava:#4a4744;--sand:#8d8579;--vine:#8a7c5f;--fruit:#cdbd86;--fruit-line:#9c8d5e;--root:#7d6a4c}

[data-theme="vessel-spectrum"] .chapter{gap:4vw;grid-template-columns:minmax(290px,.85fr) minmax(0,1.5fr);padding-top:38px;padding-bottom:36px}
[data-theme="vessel-spectrum"] h1{font-size:clamp(38px,4.2vw,62px);max-width:560px}
[data-theme="vessel-spectrum"] .story-body{font-size:17px;line-height:1.7}
[data-theme="vessel-spectrum"] .visual{background:var(--surface);padding:22px;border-radius:4px}
[data-theme="vessel-spectrum"] .visual svg{max-height:440px}
[data-theme="vessel-spectrum"] .land{fill:var(--land);stroke:var(--land-line);stroke-width:1.5}

/* The spectrum strip: the spine of the evening, on every wine screen. */
.vessel-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0 0}
.vessel-stop{border:0;border-bottom:2px solid var(--line);border-radius:0;padding:8px 2px 6px;background:transparent;font-size:12px;color:var(--muted);display:grid;justify-items:center;gap:2px;min-height:44px;cursor:pointer}
.vessel-stop[aria-pressed=true]{border-color:var(--stop);background:var(--selected);color:var(--ink)}
.vessel-stop svg{height:74px;width:100%}
.vessel-strip.compact .vessel-stop svg{height:46px}
.stop-index{font-size:11px;letter-spacing:.09em;color:var(--stop)}
.stop-name{line-height:1.3}
.vessel-detail{font-size:13px;line-height:1.6;min-height:40px;color:var(--body);margin-top:8px}

/* Screen 5: the four drawn at one scale, so the size difference is information. */
.vessel-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.vessel-card{margin:0;border-bottom:3px solid var(--stop);padding-bottom:10px}
.vessel-card svg{height:170px;width:100%}
.vessel-card figcaption{font-size:12.5px;line-height:1.55;color:var(--body);margin-top:8px}
.vessel-card figcaption strong{display:block;color:var(--ink);font-size:13.5px;margin-bottom:3px}
.vessel-card.on figcaption strong{color:var(--stop)}

.wine-hero{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,1.5fr);gap:20px;align-items:center}
.wine-hero svg{height:180px;width:100%}
.wine-hero h2{font-size:34px;margin:0}
.wine-method{font-size:14px;line-height:1.7;color:var(--body);margin-top:8px}

.vessel-workbench{max-width:1100px;margin:0 auto;padding:20px 3.5vw 35px}
.vessel-workbench>p{line-height:1.6;color:var(--body);font-size:14px}
.vessel-workbench h2{font-size:30px;margin:0 0 6px}
.vessel-workbench h3{font-size:19px;margin:22px 0 6px}

/* The oak dial. Three stops, because "how much oak do you like" is the thing people
   carry out of the room, and a continuous slider would invite a non-answer. */
.oak-dial,.amphora-bet{border:1px solid var(--line);border-radius:4px;padding:18px;margin:18px 0}
.oak-dial legend,.amphora-bet legend{font-size:15px;line-height:1.5;padding:0 6px;color:var(--ink)}
.dial-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.dial-stop{position:relative;display:grid;justify-items:center;gap:6px;padding:14px 6px;border:1px solid var(--line);border-radius:4px;cursor:pointer;text-align:center;min-height:44px}
.dial-stop input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.dial-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted)}
.dial-stop.on{border-color:var(--accent);background:var(--selected)}
.dial-stop.on .dial-dot{border-color:var(--accent);background:var(--accent)}
.dial-label{font-size:15px;color:var(--ink)}
.dial-stop small{font-size:12px;line-height:1.45;color:var(--muted)}
.dial-stop input:focus-visible+.dial-dot{outline:2px solid var(--accent);outline-offset:3px}
.dial-hint{font-size:13px;color:var(--muted);margin:10px 0 0}
.bet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.bet-option{position:relative;padding:16px;border:1px solid var(--line);border-radius:4px;cursor:pointer;font-size:14.5px;line-height:1.5;min-height:44px;display:flex;align-items:center}
.bet-option input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bet-option.on{border-color:var(--accent);background:var(--selected)}
.bet-option input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.oak-dial[disabled],.amphora-bet[disabled]{opacity:.62}

.rank-item{border-left:3px solid var(--stop)}
.rank-label small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.drag-handle{cursor:grab;min-width:44px;min-height:44px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--muted)}
.activity-status{font-size:12.5px;color:var(--muted);line-height:1.5}

.reveal-block{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.reveal-block p{font-size:14px;line-height:1.7;color:var(--body)}
.verdict{font-size:17px!important;color:var(--ink)!important;line-height:1.6!important}
.verdict strong{color:var(--accent)}
.split-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,2fr) 34px;gap:10px;align-items:center;font-size:13.5px;margin:7px 0}
.split-bar{display:block;height:9px;background:var(--track);border-radius:5px;overflow:hidden}
.split-bar>span{display:block;height:100%;background:var(--accent)}

.row-index{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--stop);color:var(--deep);font-size:12px;margin-right:9px;vertical-align:middle}

.appendix{display:grid;gap:16px}
.appendix article{border-left:2px solid var(--line);padding-left:14px}
.appendix h3{font-size:15px;margin:0 0 4px;line-height:1.45}
.appendix h3 a{color:var(--accent)}
.appendix p{font-size:12.5px;line-height:1.65;color:var(--muted);margin:0}

/* Photographs. Caption only: every credit lives on the appendix screen. */
.shot{margin:0 0 16px}
.shot img{display:block;width:100%;height:230px;object-fit:cover;border-radius:3px}
.shot figcaption{font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:7px}
.shot.hero img{height:250px}
/* The close-up and the field sit side by side: stacked, they make the visual column so
   tall that the story text floats to the bottom of the row. */
.kouloura-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.kouloura-photos .shot img{height:210px}
/* app.js puts the screen's visual name on #main, so a screen carrying four blocks can
   cap its own drawings without the story column sinking to the bottom of the row. */
#main[data-visual="kouloura"] .art{max-height:290px}
.shot.wide img{height:200px}
.aspa-pair{display:grid;grid-template-columns:minmax(150px,.6fr) minmax(0,1.6fr);gap:18px;align-items:start}
.aspa-pair .shot img{height:250px}
.appendix-head{font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:22px 0 4px}
.appendix-head:first-child{margin-top:0}
.appendix h4{font-size:15px;margin:0 0 4px;line-height:1.45}
.appendix h4 a{color:var(--accent)}

/* The grape itself. The prose beside it already carries the numbers. */
.grape-portrait{max-width:520px;margin:0 auto}
.grape-portrait .shot img{height:330px}

@media (max-width:900px){
 [data-theme="vessel-spectrum"] .chapter{grid-template-columns:1fr}
 .vessel-line{grid-template-columns:1fr 1fr;gap:16px}
 .wine-hero{grid-template-columns:1fr;text-align:left}
 .wine-hero svg{height:130px}
}
@media (max-width:560px){
 .vessel-line{grid-template-columns:1fr 1fr;gap:12px}
 .vessel-card svg{height:120px}
 .vessel-strip{gap:4px}
 .vessel-stop{font-size:10.5px;padding:6px 1px 5px}
 .vessel-stop svg{height:44px}
 .vessel-strip.compact .vessel-stop svg{height:32px}
 .dial-track{grid-template-columns:1fr}
 .dial-stop{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:12px;align-items:center}
 .dial-stop .dial-label{grid-column:2}
 .dial-stop small{grid-column:2}
 .dial-dot{grid-row:1/3}
 .bet-grid{grid-template-columns:1fr}
 .split-row{grid-template-columns:minmax(96px,1fr) minmax(0,1.4fr) 26px;font-size:12.5px}
 .vessel-workbench h2{font-size:25px}
 .oak-dial,.amphora-bet{padding:14px}
 .appendix p{font-size:12px}
}

@media (max-width:900px){
 .aspa-pair{grid-template-columns:1fr}
}
@media (max-width:560px){
 .kouloura-photos{grid-template-columns:1fr;gap:10px}
 .shot img,.shot.hero img,.shot.wide img,.aspa-pair .shot img,.grape-portrait .shot img{height:190px}
 .appendix h4{font-size:14px}
}