/* Gamay's own palette and components. Sets the shared tokens from style.css plus the
   chapter tokens the diagrams use, so the drawings retune with the palette.

   Granite & Claret: a near-neutral granite ground with claret carrying the identity —
   the same claret the homepage gives chapter one. Chosen from three rendered options;
   the other two (Pierre Bleue, Cuvage) are in commit 73718c4 if they are ever wanted. */
html[data-theme="granite-claret"]{color-scheme:dark;--bg:#1b191d;--deep:#151317;--ink:#efe9e8;--muted:#aaa1a2;--line:#3f3940;--accent:#cf7c88;--water:#8fb2bf;--rose:#cf7c88;--surface:#262229;--button:#2b262e;--hover:#3a3440;--body:#ccc3c4;--land:#2e2932;--land-line:#6f6572;--primary-ink:#1b191d;--primary-hover:#e39ba5;--selected:#cf7c8814;--track:#393340;--backdrop:#0c0a0dc4;--grape:#6d3d4d;--grape-line:#a9697a;--juice:#9c5462;--wine:#8e4553;--cap:#402530;--stone:#2b2630;--stone-line:#6d6472;--granite:#b08a6a;--blue:#5f7d8c;--piedmont:#8a7f72}



/* Shared chapter layout. The stylesheet only loads on this chapter's page. */
.visual svg{max-height:430px}
.photo{border-radius:3px}

/* The cru ribbon */
.cru-ours{fill:var(--cap);stroke:var(--stone-line)}
.cru-other{fill:var(--stone);stroke:var(--line)}

/* The vat */
.cuve-wall{fill:none;stroke:var(--stone-line);stroke-width:2.5}
.berry{fill:var(--grape);stroke:var(--grape-line);stroke-width:1}
.cuve-juice{fill:var(--juice)}
.cuve-wine{fill:var(--wine)}
.cuve-cap{fill:var(--cap);stroke:var(--grape-line);stroke-width:1.5}
.cuve-cap-berry{fill:var(--grape);stroke:var(--grape-line);stroke-width:1.4}
.cuve-bubble{fill:var(--water);opacity:0}
.cuve-lens{fill:none;stroke:var(--accent);stroke-width:2}
.cuve-lens-line{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 5;opacity:.7}
.cuve-skin{fill:var(--grape);stroke:var(--grape-line);stroke-width:3}
.cuve-flesh{fill:var(--juice);opacity:.55}
.cuve-spark{fill:var(--accent)}
.cuve-bleed{fill:none;stroke:var(--grape-line);stroke-width:8;opacity:.45}
.cuve-press path{fill:var(--stone-line)}
.cuve-run{fill:none;stroke:var(--wine);stroke-width:5;stroke-linecap:round;stroke-dasharray:12 10}
.cuve-pump{fill:none;stroke:var(--water);stroke-width:3;stroke-dasharray:14 9}
.cuve-drop{fill:var(--water)}
.cuve-lees{fill:var(--accent);opacity:.7}

/* Entrance animations run towards the element's natural position, so the static frame is
   already correct when motion is turned off. */
.cuve-bunch{animation:cuve-drop .55s cubic-bezier(.3,1.4,.6,1) backwards;animation-delay:calc(var(--i) * 55ms)}
@keyframes cuve-drop{from{transform:translateY(-330px);opacity:0}}
.cuve-juice,.cuve-wine{transform-box:fill-box;transform-origin:50% 100%;animation:cuve-rise .9s ease-out backwards}
@keyframes cuve-rise{from{transform:scaleY(0)}}
.cuve-cap{transform-box:fill-box;transform-origin:50% 100%;animation:cuve-cap-up 1s .35s ease-out backwards}
@keyframes cuve-cap-up{from{transform:translateY(120px);opacity:0}}
.cuve-cap-berry{animation:cuve-fade .5s ease-out backwards;animation-delay:calc(700ms + var(--i) * 40ms)}
@keyframes cuve-fade{from{opacity:0}}
.cuve-bubble{animation:cuve-fizz 2.6s linear infinite;animation-delay:calc(var(--i) * 150ms)}
@keyframes cuve-fizz{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-205px);opacity:0}}
.cuve-zoom{transform-box:fill-box;transform-origin:50% 50%;animation:cuve-zoom-in .5s ease-out backwards}
@keyframes cuve-zoom-in{from{transform:scale(.72);opacity:0}}
.cuve-spark{animation:cuve-spark 1.7s ease-in-out infinite;animation-delay:calc(var(--i) * 180ms)}
@keyframes cuve-spark{0%,100%{opacity:.15;transform:translateY(0)}50%{opacity:1;transform:translateY(-7px)}}
.cuve-bleed{transform-box:fill-box;transform-origin:50% 50%;animation:cuve-bleed 3.2s ease-in-out infinite}
@keyframes cuve-bleed{0%,100%{transform:scale(1);opacity:.15}50%{transform:scale(.74);opacity:.6}}
.cuve-press{animation:cuve-press 1.1s .5s cubic-bezier(.4,0,.6,1) backwards}
@keyframes cuve-press{from{transform:translateY(-82px)}}
.cuve-run{animation:cuve-flow 1.1s linear infinite}
.cuve-pump{animation:cuve-flow 1.4s linear infinite}
@keyframes cuve-flow{to{stroke-dashoffset:-44}}
.cuve-drop{animation:cuve-drip 2.2s linear infinite;animation-delay:calc(var(--i) * 360ms);opacity:0}
@keyframes cuve-drip{0%{transform:translate(0,0);opacity:0}10%{opacity:1}55%{transform:translate(-120px,36px);opacity:1}100%{transform:translate(-120px,60px);opacity:0}}
.cuve-lees{animation:cuve-settle 1.6s .4s ease-in backwards}
@keyframes cuve-settle{from{transform:translateY(-140px);opacity:.15}}

/* The hill */
.hill{fill:var(--stone);stroke:var(--stone-line);stroke-width:2}

/* Morgon: two lines that disagree */
.morgon-ground{fill:var(--stone)}
.morgon-granite{fill:var(--granite);opacity:.32}
.morgon-rock-line{fill:none;stroke:var(--water);stroke-width:3;stroke-dasharray:8 7}
.morgon-name-line{fill:none;stroke:var(--ink);stroke-width:3}
.line-key{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.line-key li{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.45;color:var(--muted)}
.line-key strong{display:block;font-weight:400;color:var(--ink);font-size:13px}
.line-key i{flex:0 0 30px;height:0;border-top:3px solid}
.line-key .key-name{border-color:var(--ink)}
.line-key .key-rock{border-top-style:dashed;border-color:var(--water)}
.soil-bar{display:flex;height:16px;border-radius:3px;overflow:hidden;margin:18px 0 10px}
.soil-bar span{display:block}
.soil-granite{background:var(--granite)}
.soil-blue{background:var(--blue)}
.soil-piedmont{background:var(--piedmont)}
.soil-key{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0;font-size:12px;color:var(--muted)}
.soil-key li{display:flex;align-items:center;gap:7px}
.soil-key i{width:11px;height:11px;border-radius:2px;display:block}

/* The appendix */

.cuve-legend{font-size:14px;line-height:1.65;color:var(--body);margin:14px 0 0;min-height:46px}

@media(max-width:800px){
 .visual svg{max-height:340px}
 /* A 700-unit drawing scales to under half size here, which left 13-unit text at about
    six pixels. Bump only this chapter's own diagrams; the shared maps are laid out for
    the smaller type. */
 .gamay-art .muted{font-size:20px}
 .gamay-art .label{font-size:24px}
 .cuve-legend{font-size:13px}
 .soil-key{font-size:11px;gap:4px 12px}
 .line-key{grid-template-columns:1fr;gap:8px}
 .cuve-lens,.cuve-lens-line{display:none}
}
@media(prefers-reduced-motion:reduce){.cuve-bubble,.cuve-drop{opacity:.7}}