/* Mobile catalog of the 28 October lunch. Same identity as the guest booklet (wine red for Féry, vine green for Jacob,
   straw and garnet for the wines), laid out for a phone held in one hand. The story sections reuse the booklet's markup,
   so its class names are restyled here for a single column. Light paper by choice, like the printed booklet. */
:root{
  --paper:#ffffff; --bg:#f6f3ef; --ink:#211d1e; --muted:#6a6260; --line:#e3ddd6; --band:#f6f3ef;
  --fery:#8a1f3b; --fery-soft:#f7e8ec; --jacob:#356335; --jacob-soft:#e6efe1;
  --white:#b3850f; --white-dk:#7d5c08; --white-soft:#f9f1db; --red:#7a1a32; --red-soft:#f5e3e8;
  --oak:#9c6b3c; --foudre:#c49a6c; --amph:#b56b4e;
  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --tabh:58px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.75;padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 12px)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd,blockquote{margin:0}
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
ruby{ruby-position:over} rt{font-size:58%;opacity:.8}

/* top bar and tab bar */
.bar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2)}
.bar .wrap{display:flex;align-items:center;gap:10px;height:48px;font-size:14px}
.bar a.back{display:flex;align-items:center;gap:2px;text-decoration:none;color:var(--fery);font-weight:700;min-height:44px}
.bar .ttl{margin-left:auto;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs ul{list-style:none;margin:0 auto;padding:0;max-width:560px;display:grid;grid-template-columns:repeat(3,1fr);height:var(--tabh)}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:100%;text-decoration:none;font-size:11.5px;color:var(--muted)}
.tabs a[aria-current="page"]{color:var(--fery);font-weight:700}
.tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* top page */
.hero img{width:100%;aspect-ratio:4/3;object-fit:cover}
.intro{padding:18px 0 6px}
.intro .pre{font-size:13px;color:var(--muted);letter-spacing:.08em}
.intro h1{font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1.25;margin-top:4px}
.intro .sub{font-family:var(--f-display);color:var(--fery);font-size:15px;margin-top:2px}
.intro .lead{font-size:15px;margin-top:10px}
.sec-h{font-family:var(--f-display);font-weight:800;font-size:21px;margin:26px 0 10px;display:flex;align-items:baseline;gap:10px}
.sec-h small{font-family:var(--f-body);font-weight:400;font-size:12.5px;color:var(--muted)}
.welcome{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:10px}
.welcome span{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.1em}
.wines{list-style:none;padding:0;display:grid;gap:10px}
.wines a{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:12px 12px 12px 10px;text-decoration:none;border:1px solid var(--line);min-height:44px}
.wines a:active{background:var(--band)}
.num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:20px}
.w .num{background:var(--white)} .r .num{background:var(--red)}
.wines .nm{font-family:var(--f-display);font-weight:800;font-size:16px;line-height:1.45;word-break:auto-phrase}
.wines .ct{font-size:12.5px;line-height:1.5;margin-top:2px}
.w .ct{color:var(--white-dk)} .r .ct{color:var(--red)}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:3px}
.badges i{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:5px;border:1px solid var(--ink);line-height:1.6}
.badges .c.w{background:var(--white);border-color:var(--white);color:#fff} .badges .c.r{background:var(--red);border-color:var(--red);color:#fff}
.wines .chev{color:var(--muted);font-size:18px}
.wines a.has-memo .nm::after{content:" ✎";color:var(--fery);font-family:var(--f-body);font-size:13px}
.links{display:grid;gap:10px}
.links a{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;border:1px solid var(--line);padding:12px 14px;text-decoration:none;min-height:56px}
.links b{font-family:var(--f-display);font-size:17px;font-weight:800}
.links small{display:block;color:var(--muted);font-size:12.5px}
.links .chev{margin-left:auto;color:var(--muted)}
#memos{background:#fff;border-radius:12px;border:1px solid var(--line);padding:14px;margin-top:10px}
#memos ul{list-style:none;padding:0;display:grid;gap:10px;margin:8px 0 12px}
#memos li a{font-weight:700;color:var(--fery);text-decoration:none;font-size:14px}
#memos li p{white-space:pre-wrap;font-size:14px;line-height:1.6}
button{font:inherit;font-size:15px;padding:10px 16px;border-radius:10px;border:1px solid var(--fery);background:#fff;color:var(--fery);font-weight:700;min-height:44px}
.foot{font-size:12.5px;color:var(--muted);padding:22px 0 8px;line-height:1.7}
.foot b{color:var(--ink)}

/* wine page */
.wh{padding:16px 0 10px}
.wh h1{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.35;margin-top:6px;word-break:auto-phrase;text-wrap:balance}
.wh h1 span{display:block;font-size:19px}
.wh .fr{font-size:13px;color:var(--muted);margin-top:2px}
.wh .catch{font-family:var(--f-display);font-weight:800;font-size:16px;line-height:1.55;padding:9px 12px;border-radius:10px;margin-top:10px;word-break:auto-phrase;text-wrap:balance}
.w .catch{background:var(--white-soft);color:var(--white-dk)} .r .catch{background:var(--red-soft);color:var(--red)}
.top2{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;align-items:start;margin:4px 0 6px}
.top2 .lab{border-radius:10px;overflow:hidden;aspect-ratio:1/1;box-shadow:0 1px 6px rgba(30,20,20,.18)}
.top2 .lab img{width:100%;height:100%;object-fit:cover}
.kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.kpi div{background:#fff;border-radius:10px;padding:6px 10px;border:1px solid var(--line)}
.kpi b{font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.2}
.kpi b small{font-size:12px;margin-left:2px}
.kpi > div > span{display:block;font-size:11.5px;color:var(--muted);line-height:1.3;white-space:nowrap}
.kpi .vt b{color:var(--fery)}
.card{background:#fff;border-radius:12px;border:1px solid var(--line);padding:14px;margin-top:12px}
.card > h2{font-family:var(--f-display);font-weight:800;font-size:18px;margin-bottom:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card > h2 small{font-family:var(--f-body);font-weight:400;font-size:12px;color:var(--muted)}
.tx{font-size:15px;line-height:1.8}
/* process strip from the booklet, turned into a vertical list */
.proc{display:flex !important;flex-direction:column;gap:6px}
.ps{display:grid;grid-template-columns:38px 7.5em minmax(0,1fr);gap:10px;align-items:center;border-radius:10px;padding:6px 10px}
.proc.w .ps{background:var(--white-soft)} .proc.r .ps{background:var(--red-soft)}
.ps b{font-size:14.5px}
.ps em{font-style:normal;font-size:13.5px;color:var(--muted);line-height:1.45}
.pi{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff}
.ic{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.proc.w .ic,.flow.w .ic{stroke:var(--white-dk)} .proc.r .ic,.flow.r .ic{stroke:var(--red)}
.pa{display:none}
.procb{display:flex !important;flex-wrap:wrap;gap:6px;margin-top:8px}
.pb2{border:0;height:auto;margin:0}
.pb2 span{display:inline-block;font-size:12.5px;font-weight:700;background:var(--band);border-radius:6px;padding:2px 8px}
.comp{margin-top:12px}
.comp .cl{font-size:12.5px;color:var(--muted);font-weight:700}
.cbar{display:flex;height:26px;border-radius:6px;overflow:hidden;margin-top:4px}
.cbar i{display:flex;align-items:center;padding:0 6px;color:#fff;font-style:normal;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden}
.k0{background:var(--oak)} .k1{background:var(--foudre)} .k2{background:var(--amph)}
.clg{font-size:12.5px;color:var(--muted);margin-top:4px}
.clg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 8px;vertical-align:-1px}
.map{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.cap{font-size:12px;color:var(--muted);margin-top:4px}
.plots{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.plots span{font-size:13.5px;padding:3px 10px;border-radius:7px}
.w .plots span{background:var(--white-soft);border:1px solid var(--white)} .r .plots span{background:var(--red-soft);border:1px solid var(--red)}
.plots em{font-style:normal;font-weight:700;margin-left:4px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;border-top:1px solid var(--line);padding-top:8px;margin-top:10px}
.facts dt{font-size:11.5px;color:var(--muted);font-weight:700} .facts dd{font-size:14.5px;font-weight:700;line-height:1.45}
.rvlead{font-size:13px;color:var(--muted);margin-bottom:6px}
.rvlead b{display:inline-block;color:#fff;border-radius:6px;padding:1px 8px;margin-right:6px;font-size:12.5px}
.w .rvlead b{background:var(--white-dk)} .r .rvlead b{background:var(--red)}
.rv{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.rv:first-of-type{border-top:0;margin-top:0;padding-top:0}
.rvh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rvh b{font-size:15.5px}
.rvh span{font-size:12px;color:var(--muted)}
.rvh em{margin-left:auto;font-style:normal;font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1}
.w .rvh em{color:var(--white)} .r .rvh em{color:var(--red)}
.rvh em small{font-family:var(--f-body);font-size:12px;color:var(--muted);font-weight:400}
.stg{display:inline-block;font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 7px;margin:6px 0 2px}
.rv .ja{font-size:15px;line-height:1.8;margin-top:4px}
details{margin-top:6px}
summary{font-size:13px;color:var(--fery);font-weight:700;cursor:pointer;min-height:32px;display:flex;align-items:center}
details p{font-size:14px;line-height:1.65;color:var(--muted)}
.memo textarea{width:100%;min-height:120px;font:inherit;font-size:16px;line-height:1.7;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fffdf9;resize:vertical}
.memo .st{font-size:12px;color:var(--muted);margin-top:4px;min-height:1.2em}
.memo .hint{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pn a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-decoration:none;font-size:13px;line-height:1.45;min-height:56px}
.pn a.next{text-align:right}
.pn b{display:block;font-size:12px;color:var(--fery)}
.pn .none{visibility:hidden}

/* producer and vineyard pages: the booklet's story sections in one column */
.story-sec{margin-top:26px;scroll-margin-top:56px}
.toc{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.toc a{font-size:13px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;min-height:36px;display:inline-flex;align-items:center}
.story-sec > h2.sh{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.35;word-break:auto-phrase;text-wrap:balance;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:12px}
.lede{font-size:15.5px;line-height:1.85;margin-bottom:12px}
figcaption{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
figure img{width:100%;object-fit:cover;border-radius:10px}
.hero2,.strip3,.vstrip3,.cellar,.pair-ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.hero2 figure:first-child,.vstrip3 figure:first-child{grid-column:1/-1}
.hero2 img,.strip3 img,.vstrip3 img,.cellar img{aspect-ratio:4/3}
.cellar.three-ph figure:first-child{grid-column:1/-1}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.kpis > div{background:#fff;border-radius:10px;border:1px solid var(--line);padding:8px 12px}
.kpis b{display:block;font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1.1;color:var(--fery)}
.kpis b small{font-size:14px;margin-left:2px}
.kpis span{font-size:12.5px;color:var(--muted);line-height:1.5}
.three,.two-c{display:grid;gap:8px;margin:10px 0}
.three .card,.two-c .card{margin:0}
.three h3,.two-c h3{font-size:15px;font-weight:700;margin-bottom:2px}
.three p,.two-c p{font-size:14px;line-height:1.7}
.river{display:grid;gap:8px}
.rvr{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;border-radius:10px;padding:10px 12px;border:1px solid var(--line);background:#fff}
.rvr > b{font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.2}
.rvr h3{font-size:15px;font-weight:700;line-height:1.5}
.rvr p{font-size:13.5px;color:var(--muted);line-height:1.65;margin-top:2px}
.rvr.j{background:var(--jacob-soft);border-color:var(--jacob)} .rvr.j > b{color:var(--jacob)}
.rvr.both,.rvr.merge{background:linear-gradient(90deg,var(--jacob-soft),var(--fery-soft))}
.rvr.split,.rvr.merge{border:1.5px solid var(--ink)}
.lanes{display:grid;gap:8px}
.lane{border-radius:10px;padding:10px 12px}
.lane h3{font-size:15px;font-weight:700;margin-bottom:4px}
.lane.f{background:var(--fery-soft);border:1px solid var(--fery)} .lane.f h3{color:var(--fery)}
.lane.j{background:var(--jacob-soft);border:1px solid var(--jacob)} .lane.j h3{color:var(--jacob)}
.lane ul{list-style:none;padding:0;display:grid;gap:3px;font-size:14px}
.lane li{display:grid;grid-template-columns:3.4em 1fr;gap:6px}
.lane li b{font-family:var(--f-display);font-weight:800}
.duo{display:grid;gap:22px}
.pc{display:grid;gap:8px;border-top:3px solid var(--fery);padding-top:10px}
.pc-photo{border-radius:10px;overflow:hidden;aspect-ratio:3/2}
.pc-photo img{width:100%;height:100%;object-fit:cover;border-radius:0}
.role{font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.pname{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.3}
.pname small{display:block;font-family:var(--f-body);font-weight:400;font-size:13px;color:var(--muted)}
.vsteps{list-style:none;padding:0;display:grid}
.vsteps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;position:relative;padding-bottom:10px}
.vsteps li::before{content:"";position:absolute;left:13px;top:28px;bottom:0;border-left:1.5px solid #c47a8c}
.vsteps li:last-child::before{display:none}
.vsteps .n{width:26px;height:26px;border-radius:50%;background:var(--fery);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-size:13px;font-weight:800}
.vsteps h3{font-size:15px;font-weight:700;line-height:1.5}
.vsteps p{font-size:13.5px;color:var(--muted);line-height:1.6}
.story{font-size:15px;line-height:1.9}
.quote{font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.7;border-left:3px solid var(--fery);padding-left:12px;margin:6px 0}
.quote small{display:block;font-family:var(--f-body);font-weight:400;font-size:12px;color:var(--muted);margin-top:4px}
.quote.wide{border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 4px;text-align:center;margin-top:18px}
.lstory{display:grid;grid-template-columns:96px 22px minmax(0,1fr);gap:8px;align-items:stretch}
.bottle{display:flex;align-items:center;justify-content:center}
.bottle img{max-height:420px;width:auto;border-radius:0}
.lscale{display:grid;grid-template-rows:auto 1fr auto 1fr auto;justify-items:center;padding:8px 0}
.lscale span{font-family:var(--f-display);font-weight:800;font-size:14px}
.lscale i{width:1px;background:var(--ink)}
.lscale b{writing-mode:vertical-rl;font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.2em;padding:4px 0}
.lmap svg{width:100%;height:auto}
.m-on{font:700 13px var(--f-body);fill:var(--ink)} .m-off{font:400 11.5px var(--f-body);fill:var(--muted)}
.m-w{font:400 12px var(--f-body);fill:var(--ink)} .m-no{font:800 9.5px var(--f-display);fill:#fff}
.ltext{grid-column:1/-1;background:var(--ink);color:#fff;border-radius:12px;display:block;overflow:hidden}
.lneck{display:none}
.lin{padding:16px 16px 14px;display:grid;gap:10px}
.kick{font-size:12px;letter-spacing:.2em;color:#d9c79a}
.lh{font-family:var(--f-display);font-weight:800;font-size:21px;line-height:1.5}
.lh br{display:none}
.lbody{font-size:14.5px;line-height:1.85;color:#e9e4e0}
.lfacts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #6b6466;border-bottom:1px solid #6b6466;padding:8px 0}
.lfacts dt{font-size:11.5px;color:#b9b1b3} .lfacts dd{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.1}
.lfacts dd small{font-size:12px;margin-left:1px}
.lnote{font-size:11.5px;color:#b9b1b3}
.mrow{display:grid;gap:10px}
.ticks{list-style:none;padding:0;display:grid;gap:6px;font-size:14.5px}
.ticks li{display:grid;gap:0;border-bottom:1px solid var(--line);padding-bottom:6px}
.ticks b{color:var(--fery)}
.mphoto img{aspect-ratio:3/2}
.h2{font-family:var(--f-display);font-weight:800;font-size:17px;margin:16px 0 8px}
.h2.w{color:var(--white-dk)} .h2.r{color:var(--red)}
.flow{display:grid;gap:6px}
.flow .fs{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:10px;align-items:center;border-radius:10px;padding:8px 10px}
.flow .fs .pi{grid-row:1/3}
.flow .fs b{font-size:14.5px;line-height:1.4}
.flow .fs em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.45}
.flow.w .fs{background:var(--white-soft)} .flow.r .fs{background:var(--red-soft)}
.far{display:none}
.note{font-size:13px;color:var(--muted);line-height:1.7;margin-top:8px}
.people{display:grid;gap:10px}
.pbig{border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.pbig img{width:100%;height:100%;object-fit:cover;border-radius:0}
.pinfo{display:grid;gap:4px}
.team{display:grid;gap:10px;margin:14px 0}
.tm{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;border-top:1px solid var(--line);padding-top:10px}
.tm figure{width:64px;height:64px;border-radius:50%;overflow:hidden}
.tm figure img{width:100%;height:100%;object-fit:cover;border-radius:0}
.tm .ph-none{display:grid;place-items:center;background:var(--fery-soft);color:var(--fery);font-family:var(--f-display);font-size:22px;font-weight:800}
.tm h3{font-family:var(--f-display);font-size:17px;font-weight:800}
.tm p{font-size:13.5px;line-height:1.65}
/* family, drawn for the phone */
.fam{display:grid;gap:6px}
.gen{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:start}
.gen > b{font-family:var(--f-display);font-weight:800;font-size:14px;line-height:1.3;padding-top:8px}
.gen > b small{display:block;font-family:var(--f-body);font-weight:400;font-size:11px;color:var(--muted)}
.gcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.gcols.one{grid-template-columns:1fr}
.pp{border-radius:10px;padding:8px 10px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.5}
.pp.f{border:2px solid var(--fery)} .pp.j{border:2px solid var(--jacob)} .pp.fs{background:var(--fery-soft);border:1px solid var(--fery)}
.pp b{display:block;font-size:14.5px}
.pp.f b{color:var(--fery)} .pp.j b{color:var(--jacob)} .pp.fs b{color:var(--fery)}
.pp small{display:block;color:var(--muted);font-size:12px}
.pp .face{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--fery);float:right;margin:0 0 4px 6px}
.lanelab{margin-left:52px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-size:12px;font-weight:700;text-align:center}
.lanelab span:first-child{color:var(--fery)} .lanelab span:last-child{color:var(--jacob)}
.split88{margin-left:52px;text-align:center;font-size:12.5px;color:var(--muted)}
.split88 b{font-family:var(--f-display);font-size:16px;color:var(--ink);margin-right:4px}
.reunion{background:var(--ink);color:#fff;border-radius:999px;text-align:center;font-weight:700;font-size:14px;padding:8px 12px;margin-top:4px}
.vlist{list-style:none;padding:0;display:grid;gap:6px;margin-top:10px}
.vlist a{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;text-decoration:none;font-size:14px;min-height:48px}
.vlist .num{width:30px;height:30px;font-size:15px;flex:none}
.vlist small{display:block;color:var(--muted);font-size:12px}

/* ===================================================================================================================
   Motion (2026-10-22): full-bleed hero, things rising into view as you scroll (stagger), photos unveiled, figures that
   count up, rings that draw, a reading-progress line, swipe between wines, page transitions where the wine number
   flies from the list into its page, a sticky chapter bar that follows the reading, tap-to-zoom.
   Final values are in the markup; every hidden starting state is behind .js (set in <head>) and no-preference,
   so without JavaScript, or with "reduce motion" on, the page is simply static.
   =================================================================================================================== */

/* reading progress */
.prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;pointer-events:none}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--fery),#c0587a);transform-origin:left;transform:scaleX(var(--p,0))}

/* home: hero under a transparent bar that turns solid once you scroll */
body.home .bar{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;transition:background .35s,border-color .35s,box-shadow .35s}
body.home .bar .wrap > span:first-child{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.35);transition:color .35s}
body.home .bar .ttl{color:rgba(255,255,255,.85)}
body.home .bar.solid{background:rgba(255,255,255,.94);border-bottom-color:var(--line);box-shadow:0 2px 14px rgba(30,20,20,.06)}
body.home .bar.solid .wrap > span:first-child{color:var(--fery)!important;text-shadow:none}
body.home .bar.solid .ttl{color:var(--muted)}
.hero{position:relative;height:86svh;min-height:500px;max-height:900px;overflow:hidden;background:#1d1716;color:#fff}
.hero-img{position:absolute;inset:-4% 0;will-change:transform}
.hero-img img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,14,14,.5) 0%,rgba(20,14,14,0) 18%,rgba(20,14,14,0) 34%,rgba(20,14,14,.55) 62%,rgba(20,14,14,.88) 100%)}
.hero-txt{position:absolute;left:0;right:0;bottom:78px;z-index:2}
.hero .pre{font-size:12.5px;letter-spacing:.14em;color:#e9d9b0}
.htitle{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,8.4vw,46px);line-height:1.18;margin-top:8px;letter-spacing:.01em;white-space:nowrap;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.htitle span{display:inline-block}
.hero .sub{font-family:var(--f-display);font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.9);margin-top:8px}
.cue{position:absolute;z-index:2;left:50%;bottom:14px;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;color:rgba(255,255,255,.85);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;text-decoration:none}
.cue i{display:block;width:1px;height:34px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:#fff}
.intro{padding-top:22px}

/* list of the nine: a colour edge and a press effect */
.wines a{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.wines a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.wines li.w a::before{background:var(--white)} .wines li.r a::before{background:var(--red)}
.wines a:active,.links a:active,.vlist a:active,.pn a:active{transform:scale(.975)}

/* wine page header: tinted band, giant number behind */
.wh{position:relative;margin:0 -16px;padding:18px 16px 14px;overflow:hidden;isolation:isolate}
main.w .wh{background:linear-gradient(165deg,var(--white-soft) 0%,rgba(249,241,219,0) 75%)}
main.r .wh{background:linear-gradient(165deg,var(--red-soft) 0%,rgba(245,227,232,0) 75%)}
.wm{position:absolute;z-index:-1;right:-8px;top:-22px;font-family:var(--f-display);font-weight:800;font-size:150px;line-height:1;opacity:.12;pointer-events:none;letter-spacing:-.02em}
main.w .wm{color:var(--white)} main.r .wm{color:var(--red)}
.whn{display:flex;align-items:center;gap:10px}
.whn .num{width:38px;height:38px;font-size:19px;flex:none}
.whn .badges{margin:0}
.swipe{display:flex;justify-content:center;align-items:center;gap:12px;font-size:12px;color:var(--muted);margin:0 0 8px;height:18px}
@media (hover:hover){.swipe{display:none}}
.kpi .rg{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:6px;align-items:center}
.kpi .rg .ring{grid-row:1/3;width:30px;height:30px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring .trk{stroke:var(--line)}
.ring .val{stroke-dasharray:100;stroke-dashoffset:var(--o,100);stroke-linecap:round}
main.w .ring .val{stroke:var(--white)} main.r .ring .val{stroke:var(--red)}
.kpi .mini{display:block;height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:4px}
.kpi .mini i{display:block;height:100%;background:var(--jacob);border-radius:2px}
.proc{position:relative}
.proc::before{content:"";position:absolute;z-index:1;left:27px;top:20px;bottom:20px;width:2px;border-radius:2px;transform-origin:top}
.proc.w::before{background:var(--white)} .proc.r::before{background:var(--red)}
.proc .pi{position:relative;z-index:2}
.cbar{transform-origin:left}
[data-zoom],.story-sec figure img{cursor:zoom-in}
.map{position:relative}
.map::after{content:"タップで拡大";position:absolute;right:8px;bottom:8px;font-size:11px;background:rgba(33,29,30,.72);color:#fff;border-radius:999px;padding:2px 9px}
.memo textarea{transition:border-color .25s,box-shadow .25s}
.memo textarea:focus{outline:none;border-color:var(--fery);box-shadow:0 0 0 3px rgba(138,31,59,.12)}
main.w .memo textarea:focus{border-color:var(--white-dk);box-shadow:0 0 0 3px rgba(179,133,15,.15)}
main.go-next,main.go-prev{transition:transform .22s ease,opacity .22s ease;opacity:.35}
main.go-next{transform:translateX(-36px)} main.go-prev{transform:translateX(36px)}

/* producer page: the chapter bar sticks under the top bar and follows the reading */
body.producer .toc{position:sticky;top:48px;z-index:4;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:10px 16px;background:rgba(246,243,239,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.producer .toc::-webkit-scrollbar{display:none}
body.producer .toc a{white-space:nowrap;flex:none;transition:background .25s,color .25s,border-color .25s}
body.producer .toc a.on{background:var(--fery);border-color:var(--fery);color:#fff}
body.producer .story-sec{scroll-margin-top:108px}
.story-sec > h2.sh{position:relative;border-bottom-color:transparent}
.story-sec > h2.sh::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink);transform-origin:left}

/* tabs: a small bar over the current page */
.tabs a{position:relative}
.tabs a[aria-current="page"]::before{content:"";position:absolute;top:0;left:32%;right:32%;height:3px;border-radius:0 0 3px 3px;background:var(--fery)}

/* tap-to-zoom */
.lb{position:fixed;inset:0;z-index:60;background:rgba(15,10,10,.94);display:grid;place-items:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .3s}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:100%;max-height:calc(100svh - 32px);object-fit:contain;border-radius:6px;transform:scale(.94);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lb.on img{transform:none}
.lb button{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;padding:0;min-height:0}
.lb p{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:12px}

/* ----- everything that moves ----- */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}

  /* page transitions (Chrome, Safari 18.2+); the wine number morphs from the list into its page */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .25s ease both}
  ::view-transition-new(root){animation:vt-in .45s cubic-bezier(.2,.8,.2,1) both}
  ::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  .tabs{view-transition-name:tabs}

  /* hero entrance */
  .hero-img img{animation:kenburns 9s cubic-bezier(.2,.6,.2,1) both}
  .hero .pre{animation:fadeup .9s .25s both}
  .htitle span{animation:charup 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.4s + var(--i) * .065s)}
  .hero .sub{animation:fadeup .9s 1.15s both}
  .cue{animation:cuein 1s 1.6s both}
  .cue i::after{animation:drip 1.9s ease-in-out 2.2s infinite}

  /* wine page entrance */
  .wm{animation:wmin 1.3s cubic-bezier(.2,.8,.2,1) both}
  .whn,.wh h1,.wh .fr,.wh .catch{animation:fadeup .8s cubic-bezier(.2,.8,.2,1) both}
  .wh h1{animation-delay:.08s} .wh .fr{animation-delay:.16s} .wh .catch{animation-delay:.24s}
  .top2 .lab{animation:labin 1s .3s cubic-bezier(.2,.8,.2,1) both}
  .swipe{animation:hint 5s 1.4s ease both}
  .swipe span{display:inline-block;animation:nudge 1.3s ease-in-out infinite}
  .swipe span:last-child{animation-direction:reverse}

  /* rising into view: containers whose children come one after another, and single blocks */
  .js :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts):not(.in-view) > *{opacity:0;transform:translateY(22px)}
  .js .river:not(.in-view) > *,.js .vsteps:not(.in-view) > *{transform:translateX(-24px)}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts) > *{transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(2){transition-delay:.07s}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(3){transition-delay:.14s}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(4){transition-delay:.21s}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(5){transition-delay:.28s}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(6){transition-delay:.35s}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(7){transition-delay:.42s}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(8){transition-delay:.49s}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(9){transition-delay:.56s}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(10){transition-delay:.63s}
  :is(.wines,.links,.kpi,.proc,.river,.lane ul,.vsteps,.ticks,.flow,.team,.fam,.facts,.three,.kpis,.vlist,.plots,.strip3,.cellar,.vstrip3,.hero2,.lfacts).in-view > :nth-child(n+11){transition-delay:.7s}
  .js :is(.sec-h,.welcome,.intro,.card,.lede,.story,.quote,.pinfo,.ltext,.mrow,.h2,.pn,#memos,.foot,.lanelab,.split88,.reunion,.rvlead,.rv,.toc):not(.in-view){opacity:0;transform:translateY(26px)}
  :is(.sec-h,.welcome,.intro,.card,.lede,.story,.quote,.pinfo,.ltext,.mrow,.h2,.pn,#memos,.foot,.lanelab,.split88,.reunion,.rvlead,.rv,.toc){transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}

  /* photos unveiled from the bottom, with a slow settle */
  .js :is(.map,.story-sec figure,.pc-photo,.pbig):not(.in-view){clip-path:inset(100% 0 0 0)}
  :is(.map,.story-sec figure,.pc-photo,.pbig){transition:clip-path 1.15s cubic-bezier(.65,0,.35,1),opacity .75s,transform .75s}
  :is(.map,.story-sec figure,.pc-photo,.pbig) img{transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
  .js :is(.map,.story-sec figure,.pc-photo,.pbig):not(.in-view) img{transform:scale(1.12)}

  /* figures: rings draw, the ageing bar fills, the timeline spine grows, the oak/foudre/amphora bar extends, headings underline */
  .ring .val{transition:stroke-dashoffset 1.5s cubic-bezier(.2,.8,.2,1) .2s}
  .js .kpi:not(.in-view) .ring .val{stroke-dashoffset:100}
  .kpi .mini i{transition:width 1.3s cubic-bezier(.2,.8,.2,1) .25s}
  .js .kpi:not(.in-view) .mini i{width:0!important}
  .proc::before{transition:transform 1.8s cubic-bezier(.45,.05,.25,1) .1s}
  .js .proc:not(.in-view)::before{transform:scaleY(0)}
  .cbar{transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
  .js .comp:not(.in-view) .cbar{transform:scaleX(0)}
  .story-sec > h2.sh::after{transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .15s}
  .js .story-sec > h2.sh:not(.in-view)::after{transform:scaleX(0)}

  /* the north–south map: the spine draws, villages light up one after another */
  .js .lmap svg path{stroke-dasharray:1200;stroke-dashoffset:1200}
  .js .lmap.in-view svg path{animation:draw 1.6s cubic-bezier(.45,.05,.25,1) forwards}
  .js .lmap:not(.in-view) svg :is(circle,text){opacity:0}
  .lmap svg circle{transform-box:fill-box;transform-origin:center}
  .js .lmap.in-view svg circle{animation:pop .6s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.3s + var(--i,0) * 70ms)}
  .js .lmap.in-view svg text{animation:fadein .7s both;animation-delay:calc(.4s + var(--i,0) * 70ms)}

  @keyframes kenburns{from{transform:scale(1.16)}to{transform:scale(1)}}
  @keyframes fadeup{from{opacity:0;transform:translateY(14px)}}
  @keyframes fadein{from{opacity:0}}
  @keyframes charup{from{opacity:0;transform:translateY(.55em);filter:blur(8px)}}
  @keyframes cuein{from{opacity:0;transform:translate(-50%,10px)}}
  @keyframes drip{to{top:100%}}
  @keyframes wmin{from{opacity:0;transform:translateX(40px)}}
  @keyframes labin{from{opacity:0;transform:translateY(18px) rotate(-4deg) scale(.96)}}
  @keyframes hint{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
  @keyframes pop{from{opacity:0;transform:scale(0)}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
}
/* photos start slightly zoomed: keep that inside their frames */
.story-sec figure,.map,.pc-photo,.pbig{overflow:hidden}
.story-sec figure figcaption{overflow:visible}