/* Flavour Science section: three moving slides on the two spices in the house broth (cinnamon, then black pepper,
   each with where it grows and where it is cooked: cinnamon in Vietnamese pho, pepper in Korean cooking; then the
   periodic table of spices and why the pair works). Round 7, 30 Oct 2026.
   Everything is scoped to .section-flavour. The HTML is the finished frame of every slide, stacked; js/broth-scenes.js
   turns the stack into a slideshow (.fs-js) that starts by itself when about a third of it is in view and keeps going
   round, with a pause button and tap-to-jump progress bars. With reduced motion (.fs-calm) the slides still change by
   themselves but each appears finished and they cross-fade. No JavaScript keeps the stacked finished slides. Remove
   this file, the script and the section's markup to take the slides out. */
@font-face{font-family:'Playfair Display Pen';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/playfair-display-v40-latin-700italic.woff2') format('woff2')}
.section-dark.section-flavour{--fs-forest:#1F3A28;--fs-ivory:#EEE4D1;--fs-ivory2:#F6F1E8;--fs-gold:#C4A265;--fs-paper:#FAF9F6;--fs-esp:#2E1D10;--fs-esp2:#3A2618;--fs-mute:rgba(46,29,16,.66);--fs-hair:rgba(46,29,16,.16);--fs-pen:#3A2618;--fs-ease:cubic-bezier(.25,1,.5,1);--fs-travel:cubic-bezier(.16,1,.3,1);background:var(--fs-forest);color:var(--fs-ivory)}
.section-flavour em{font-family:'Playfair Display Pen','Playfair Display',Georgia,serif;font-variation-settings:normal}
.section-flavour .section-head .num{color:rgba(246,241,232,.62) !important}
.section-flavour .section-head h2{color:var(--fs-ivory) !important}
.section-flavour .section-head h2 em{color:var(--fs-gold) !important}
.section-flavour .fs-pic{display:block;max-width:560px;margin:0 auto}
.section-flavour .fs-photo{display:block;width:100%;height:auto;object-fit:cover;border-radius:14px}
@media (min-width:800px){.section-flavour .science-grid.fs-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin:0 auto}}
.section-flavour .fs-cta{display:flex;justify-content:center;margin-top:48px}
.section-flavour .fs-cta .fs-btn{align-self:auto;margin-top:0}
.section-flavour .science-col h3 em{color:var(--fs-gold)}
/* This section sets its own light-on-forest text, so it reads the same whatever the site's .section-dark rules
   say (the green recolour makes .section-dark light with dark text). The gold accent words match the board. */
.section-flavour .science-col .sci-icon{color:var(--fs-gold)}
.section-flavour .science-col .num{color:rgba(246,241,232,.55)}
.section-flavour .science-col h3{color:var(--fs-ivory)}
.section-flavour .science-col p{color:rgba(246,241,232,.75)}
.section-flavour .fs-hk em{color:var(--fs-gold)}
.section-flavour .fs-kick{margin:0;display:flex;align-items:center;gap:7.5px;gap:2.2cqw;min-height:32px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.3px;font-size:max(10px,3cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--fs-gold)}
.section-flavour .fs-kick .fs-sep{opacity:.6}
.section-flavour .fs-tick{width:18.5px;width:5.4cqw;height:15.0px;height:4.4cqw;overflow:visible;flex:none}
.section-flavour .fs-tick path{fill:none;stroke:var(--fs-gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.section-flavour .fs-rp{position:relative;margin:-6px -6px -6px auto;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:rgba(246,241,232,.82);display:grid;place-items:center;cursor:pointer;padding:0;transition:opacity .3s var(--fs-ease)}
.section-flavour .fs-rp::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(246,241,232,.45)}
.section-flavour .fs-rp svg{width:15px;height:15px}
.section-flavour .fs-rp:focus-visible{outline:2px solid var(--fs-gold);outline-offset:-2px}
.section-flavour .fs-hk{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:22.6px;font-size:6.6cqw;line-height:1.2;letter-spacing:-.01em;color:var(--fs-ivory2)}
.section-flavour .fs-u{position:relative;display:inline-block}
.section-flavour .fs-ul{position:absolute;left:-2%;width:104%;bottom:-.2em;height:.32em;overflow:visible;pointer-events:none}
.section-flavour .fs-ul path{fill:none;stroke:var(--fs-gold);stroke-width:2.2;stroke-linecap:round}
.section-flavour .fs-card{position:relative;background:var(--fs-paper);border-radius:12.3px;border-radius:3.6cqw;padding:10.3px;padding:3cqw;box-shadow:0 1px 0 rgba(0,0,0,.06),0 14px 30px rgba(0,0,0,.24);color:var(--fs-esp)}
.section-flavour .fs-cr{margin:0;font-size:12.0px;font-size:max(12px,3cqw);line-height:1.45;color:rgba(246,241,232,.62)}
.section-flavour .fs-tb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--fs-hair);border-left:1px solid var(--fs-hair)}
.section-flavour .fs-t{position:relative;box-sizing:border-box;aspect-ratio:1/1;border-right:1px solid var(--fs-hair);border-bottom:1px solid var(--fs-hair);padding:5.1px 5.5px;padding:1.5cqw 1.6cqw;display:flex;flex-direction:column;justify-content:space-between;color:var(--fs-mute)}
.section-flavour .fs-t b{position:relative;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:9.2px;font-size:max(9px,2.7cqw);letter-spacing:.06em}
.section-flavour .fs-t .fs-gn{position:relative;font-size:10.4px;font-size:max(10px,3.05cqw);line-height:1.15;font-weight:500}
.section-flavour .fs-t.fs-hit{color:var(--fs-esp);z-index:2}
.section-flavour .fs-t.fs-hit .fs-gn{font-weight:600}
.section-flavour .fs-lit{position:absolute;inset:0;background:var(--fs-gold)}
.section-flavour .fs-wn{position:relative;display:flex;flex-direction:column;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;font-size:14.0px;font-size:4.1cqw;line-height:1.04;letter-spacing:-.005em;color:var(--fs-esp)}
.section-flavour .fs-wl{display:block;white-space:nowrap}
.section-flavour .fs-ring{position:absolute;inset:-3.8px;inset:-1.1cqw;width:calc(100% + 7.5px);width:calc(100% + 2.2cqw);height:calc(100% + 7.5px);height:calc(100% + 2.2cqw);overflow:visible;pointer-events:none}
.section-flavour .fs-ring path{fill:none;stroke:var(--fs-pen);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.section-flavour .fs-res{margin:0;align-self:center;background:var(--fs-gold);color:var(--fs-esp);border-radius:999px;padding:8.9px 17.1px;padding:2.6cqw 5cqw;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:17.1px;font-size:5cqw;line-height:1.15;text-align:center}
.section-flavour .fs-res em{font-style:italic}
.section-flavour .fs-btn{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--fs-ivory);color:var(--fs-esp);font-weight:600;font-size:15px;text-decoration:none;margin-top:3.4px;margin-top:1cqw}
.section-flavour .fs-ring path,.section-flavour .fs-ul path,.section-flavour .fs-tick path{stroke-dasharray:1 1.02;stroke-dashoffset:0}
@keyframes fsLitIn{from{opacity:0;transform:scale(.84)}}
@keyframes fsInkIn{from{color:var(--fs-mute)}}
@keyframes fsWrite{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
@keyframes fsDraw{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes fsRise{from{opacity:0;transform:translateY(6px)}}
@keyframes fsFade{from{opacity:0}}
@keyframes fsPop{from{opacity:0;transform:scale(.86)}}
.section-flavour .fs-wn,.section-flavour .fs-hk em,.section-flavour .fs-res em,.section-flavour .section-head h2 em,.section-flavour .science-col h3 em{font-family:'Playfair Display Pen','Playfair Display',Georgia,serif;font-style:italic}
.section-flavour .fs-show{max-width:480px;margin:40px auto 64px;container-type:inline-size;min-width:0}
.section-flavour .fs-bar{display:none}
.section-flavour .fs-show.fs-js .fs-bar{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.section-flavour .fs-segs{flex:1;display:flex;gap:6px;min-width:0}
.section-flavour .fs-seg{flex:1;min-width:0;height:44px;border:0;margin:0;padding:0;background:transparent;cursor:pointer;display:flex;align-items:center}
.section-flavour .fs-seg i{position:relative;display:block;width:100%;height:3px;border-radius:2px;background:rgba(246,241,232,.26);overflow:hidden}
.section-flavour .fs-seg i::after{content:"";position:absolute;inset:0;background:var(--fs-gold);transform:scaleX(0);transform-origin:left center}
.section-flavour .fs-seg.fs-done i::after{transform:none}
.section-flavour .fs-seg.fs-now i::after{animation:fsBar var(--fs-len,4000ms) linear forwards}
.section-flavour .fs-seg:focus-visible{outline:2px solid var(--fs-gold);outline-offset:2px;border-radius:4px}
@keyframes fsBar{to{transform:none}}
.section-flavour .fs-bar .fs-rp{margin:0 -6px 0 0}
.section-flavour .fs-rp svg{display:none}
.section-flavour .fs-rp[data-fs-icon=pause] .fs-ip,.section-flavour .fs-rp[data-fs-icon=play] .fs-iy{display:block}
.section-flavour .fs-track{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.section-flavour .fs-show.fs-js .fs-track{gap:0}
.section-flavour .fs-slide{display:flex;flex-direction:column;gap:12.3px;gap:3.6cqw;min-width:0}
.section-flavour .fs-show.fs-js .fs-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .2s var(--fs-ease) .3s,visibility 0s linear .5s}
.section-flavour .fs-show.fs-js .fs-slide.fs-cur{opacity:1;visibility:visible;z-index:1;animation:fsIn .5s var(--fs-travel);transition:opacity .3s var(--fs-ease),visibility 0s}
.section-flavour .fs-slide.fs-out .fs-kick,.section-flavour .fs-slide.fs-out .fs-hk,.section-flavour .fs-slide.fs-out .fs-card>*,.section-flavour .fs-slide.fs-out .fs-res,.section-flavour .fs-slide.fs-out .fs-cr{opacity:0;transition:opacity .22s var(--fs-ease)}
@keyframes fsIn{from{transform:translateX(14px)}}
.section-flavour .fs-show.fs-calm .fs-slide.fs-cur{animation:none}
.section-flavour .fs-show.fs-paused *,.section-flavour .fs-show.fs-paused *::after{animation-play-state:paused !important}
.section-flavour .fs-kick span:last-of-type{min-width:0}
.section-flavour .fs-sp{padding:14px;padding:4cqw;display:flex;flex-direction:column;gap:12px;gap:3.4cqw}
.section-flavour .fs-sp-top{display:grid;grid-template-columns:40% minmax(0,1fr);gap:14px;gap:4cqw;align-items:center}
.section-flavour .fs-el{position:relative;box-sizing:border-box;aspect-ratio:1/1;border:1.5px solid rgba(46,29,16,.42);padding:8px;padding:2.3cqw;display:flex;flex-direction:column;justify-content:space-between;color:var(--fs-esp);min-width:0}
.section-flavour .fs-el b{position:relative;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:11px;font-size:max(10px,3.2cqw);letter-spacing:.06em}
.section-flavour .fs-el .fs-wn{font-size:21px;font-size:6.2cqw;line-height:1.02}
.section-flavour .fs-el .fs-gn{position:relative;font-size:12px;font-size:max(12px,3.3cqw);line-height:1.15;font-weight:600}
.section-flavour .fs-ok{margin:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-size:max(10px,2.8cqw);letter-spacing:.12em;text-transform:uppercase;color:#7A5F22}
.section-flavour .fs-ot{margin:6px 0 0;font-size:14px;font-size:max(14px,4cqw);line-height:1.4;color:var(--fs-esp);text-wrap:pretty}
.section-flavour .fs-nw{white-space:nowrap}
.section-flavour .fs-map{display:block;width:100%;height:auto;overflow:visible}
.section-flavour .fs-map .fs-d,.section-flavour .fs-map .fs-z{fill:none;stroke:rgba(46,29,16,.2);stroke-width:var(--fs-dot);stroke-linecap:round}
.section-flavour .fs-map .fs-z{stroke:var(--fs-gold)}
.section-flavour .fs-map .fs-ml{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:19px;letter-spacing:2.4px;fill:#5E4A1E;paint-order:stroke;stroke:var(--fs-paper);stroke-width:7px;stroke-linejoin:round}
.section-flavour .fs-map .fs-pin path{fill:var(--fs-gold);stroke:var(--fs-pen);stroke-width:2.6}
.section-flavour .fs-map .fs-pin circle{fill:var(--fs-pen)}
.section-flavour .fs-map .fs-pr{fill:none;stroke:var(--fs-pen);stroke-width:2.2;opacity:0}
.section-flavour .fs-map .fs-tr{fill:var(--fs-pen)}
.section-flavour .fs-map .fs-mk circle{fill:var(--fs-paper);stroke:var(--fs-pen);stroke-width:2.8}
.section-flavour .fs-map .fs-mk circle+circle{fill:var(--fs-pen);stroke:none}
.section-flavour .fs-use{border-top:1px solid var(--fs-hair);padding-top:10px;padding-top:2.8cqw}
.section-flavour .fs-use .fs-ot{margin-top:4px}
.section-flavour .fs-mi{display:inline-block;box-sizing:border-box;width:1.1em;height:1.1em;margin:0 .55em 0 0;vertical-align:-.2em;border-radius:50%;border:1.5px solid var(--fs-pen);background:radial-gradient(circle,var(--fs-pen) 0 1.5px,var(--fs-paper) 2px)}
.section-flavour .fs-tt{margin:0 0 8px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-size:max(10px,2.8cqw);letter-spacing:.12em;text-transform:uppercase;color:#7A5F22}
.section-flavour .fs-tw{position:relative}
.section-flavour .fs-link{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.section-flavour .fs-link path{fill:none;stroke:var(--fs-pen);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 1.02;stroke-dashoffset:0}
.section-flavour .fs-t.fs-hit .fs-wn{font-size:13px;font-size:max(12px,3.9cqw)}
.section-flavour .fs-t:not(.fs-hit)>*{opacity:.55}
.section-flavour .fs-slide.fs-run .fs-t:not(.fs-hit)>*{animation:fsDim .6s var(--fs-ease) backwards;animation-delay:var(--fs-dim)}
@keyframes fsDim{from{opacity:1}}
.section-flavour .fs-slide .fs-res{border-radius:12px;border-radius:3.6cqw;font-size:15.6px;font-size:4.6cqw;line-height:1.25}
@keyframes fsDrop{0%{opacity:0;transform:translateY(-22px)}70%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes fsRipple{0%{opacity:0;transform:scale(.35)}10%{opacity:.85}100%{opacity:0;transform:scale(2.4)}}
@keyframes fsDot{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.45)}100%{opacity:1;transform:none}}
@keyframes fsMk{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.16)}100%{opacity:1;transform:none}}
.section-flavour .fs-slide.fs-pre .fs-kick,.section-flavour .fs-slide.fs-pre .fs-hk,.section-flavour .fs-slide.fs-pre .fs-el,.section-flavour .fs-slide.fs-pre .fs-ok,.section-flavour .fs-slide.fs-pre .fs-ot,.section-flavour .fs-slide.fs-pre .fs-gn,.section-flavour .fs-slide.fs-pre .fs-d,.section-flavour .fs-slide.fs-pre .fs-z,.section-flavour .fs-slide.fs-pre .fs-ml,.section-flavour .fs-slide.fs-pre .fs-pin,.section-flavour .fs-slide.fs-pre .fs-tr,.section-flavour .fs-slide.fs-pre .fs-mk,.section-flavour .fs-slide.fs-pre .fs-tt,.section-flavour .fs-slide.fs-pre .fs-t,.section-flavour .fs-slide.fs-pre .fs-res,.section-flavour .fs-slide.fs-pre .fs-cr{opacity:0}
.section-flavour .fs-slide.fs-pre .fs-lit{opacity:0}
.section-flavour .fs-slide.fs-pre .fs-hit,.section-flavour .fs-slide.fs-pre .fs-hit .fs-gn{color:var(--fs-mute)}
.section-flavour .fs-slide.fs-pre .fs-wl{clip-path:inset(-20% 100% -20% 0)}
.section-flavour .fs-slide.fs-pre .fs-ring path,.section-flavour .fs-slide.fs-pre .fs-ul path,.section-flavour .fs-slide.fs-pre .fs-tick path,.section-flavour .fs-slide.fs-pre .fs-link path{stroke-dashoffset:1;opacity:0}
.section-flavour .fs-slide.fs-run .fs-kick,.section-flavour .fs-slide.fs-run .fs-ok,.section-flavour .fs-slide.fs-run .fs-gn,.section-flavour .fs-slide.fs-run .fs-ml,.section-flavour .fs-slide.fs-run .fs-tt,.section-flavour .fs-slide.fs-run .fs-cr{animation:fsFade .4s var(--fs-ease) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-hk,.section-flavour .fs-slide.fs-run .fs-ot{animation:fsRise .5s var(--fs-travel) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-el,.section-flavour .fs-slide.fs-run .fs-t{animation:fsPop .42s var(--fs-travel) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-t.fs-hit{animation:fsPop .42s var(--fs-travel) backwards,fsInkIn .32s var(--fs-ease) backwards;animation-delay:var(--fs-at),var(--fs-hit)}
.section-flavour .fs-slide.fs-run .fs-lit{animation:fsLitIn .36s var(--fs-ease) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-wl{animation:fsWrite var(--fs-dur,.5s) cubic-bezier(.45,.05,.55,.95) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-d{animation:fsFade .34s var(--fs-ease) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-z{animation:fsFade .6s var(--fs-ease) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-pin{animation:fsDrop .5s var(--fs-travel) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-tr{animation:fsDot .3s var(--fs-ease) backwards;animation-delay:var(--fs-at);transform-box:fill-box;transform-origin:center}
.section-flavour .fs-slide.fs-run .fs-mk{animation:fsMk .5s var(--fs-ease) backwards;animation-delay:var(--fs-at);transform-box:fill-box;transform-origin:center}
.section-flavour .fs-slide.fs-run .fs-pr{animation:fsRipple 1.1s var(--fs-ease) backwards;animation-delay:var(--fs-at);transform-box:fill-box;transform-origin:center}
.section-flavour .fs-slide.fs-run .fs-ring path,.section-flavour .fs-slide.fs-run .fs-ul path,.section-flavour .fs-slide.fs-run .fs-link path{animation:fsDraw var(--fs-dur,.7s) cubic-bezier(.45,.05,.4,1) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-tick path{animation:fsDraw .32s var(--fs-ease) backwards;animation-delay:var(--fs-at)}
.section-flavour .fs-slide.fs-run .fs-res{animation:fsPop .34s var(--fs-travel) backwards;animation-delay:var(--fs-at)}
/* on laptops the slides size to the screen height too, so a whole slide (map and caption) fits under the fixed menu bar
   without scrolling: the show is about 1.55 x its width + 90 px tall; 24 px spare; never narrower than the phone show */
@media (min-width:960px){.section-flavour .fs-show{max-width:520px;max-width:min(520px,max(320px,calc((100vh - var(--nav-h,96px) - 114px) / 1.55)))}}