/* champagne.direct stylesheet.
   Order: fonts, tokens, base, layout, header, tab bar, art deco controls, hero, home sections, concierge, itinerary, planner,
   explore, sheet and drawer, gate, cookie and switch, toast, articles, legal, partners and forms, footer, 404, motion, print. */
@font-face{font-family:"Playfair Display";src:url(fonts/playfair.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- tokens: dark by default, light mode on demand (header button) ---------- */
:root{
  --bg:#16130F;--surface:#1F1B16;--surface-2:#29241D;--text:#F4F1EA;--muted:#A9A195;
  --line:rgba(244,241,234,.12);--line-strong:rgba(244,241,234,.24);
  --gold:#C8A45D;--gold-ink:#D9B873;--gold-soft:rgba(200,164,93,.14);
  --green:#1E3A2F;--on-green:#F4F1EA;--cellar:#16130F;--chalk:#F4F1EA;--stone:#8A8378;
  --danger:#E8806F;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Jost","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --nav-h:64px;--head-h:60px;--ring:var(--gold-ink);
  --lozenge:polygon(50% 0,100% 50%,50% 100%,0 50%);
  --orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='12' viewBox='0 0 96 12'%3E%3Cpath d='M0 6h38M58 6h38' stroke='%23C8A45D' stroke-width='1'/%3E%3Cpath d='M48 0l5 6-5 6-5-6z' fill='%23C8A45D'/%3E%3C/svg%3E");
  --head-bg:#16130F;--hero-bg:#16130F;--hero-lede:#CFC8BB;--hero-note:#B5AEA2;--hero-chip:#E6E0D4;--hero-ask:rgba(244,241,234,.07);
  --ease-sky:cubic-bezier(.4,0,.2,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F4F1EA;--surface:#FBF9F4;--surface-2:#ECE6DA;--text:#16130F;--muted:#5E574D;
  --line:rgba(22,19,15,.13);--line-strong:rgba(22,19,15,.24);
  --gold-ink:#7A5A1E;--gold-soft:rgba(200,164,93,.16);
  --danger:#9B2C1F;--shadow:0 1px 2px rgba(22,19,15,.06),0 8px 24px rgba(22,19,15,.08);
  --head-bg:#FBF9F4;--hero-bg:#F4F1EA;--hero-lede:#4A443C;--hero-note:#5E574D;--hero-chip:#16130F;--hero-ask:#FBF9F4;
  color-scheme:light;
}
/* surfaces that stay dark in both themes: components inside read the dark values */
.gate,.cta-box,.foot,.band-green,.root-choose,:root:not([data-theme="light"]) .hero,:root:not([data-theme="light"]) .head{--text:#F4F1EA;--muted:#CFC8BB;--gold-ink:#D9B873;--line:rgba(244,241,234,.14);--line-strong:rgba(244,241,234,.42);--ring:var(--gold)}
.band-green{--muted:#C3CFC7}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 12px)}
@media (max-width:959px){html{scroll-padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 16px)}html:has(.composer){scroll-padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 96px)}html:has(.plan-jump:not([hidden])){scroll-padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 80px)}}
@media (min-width:960px){html:has(.composer){scroll-padding-bottom:110px}}
*,*::before,*::after{box-sizing:border-box;font-variant-numeric:lining-nums}
a,button,input,select,textarea,label,summary{touch-action:manipulation}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
#main:focus,h1:focus,h2:focus,.sheet:focus,.drawer-panel:focus,.gate:focus,[tabindex="-1"]:focus:not(:focus-visible){outline:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:-9999px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:200;display:inline-flex;align-items:center;min-height:44px;background:var(--gold);color:var(--cellar);padding:0 16px;font-weight:600}
.skip:focus{left:12px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.1rem,8.4vw,4.1rem)}
h2{font-size:clamp(1.55rem,5.2vw,2.45rem)}
h3{font-size:1.28rem;line-height:1.25}
p{margin:0 0 1em;text-wrap:pretty}
.muted{color:var(--muted)}
.fine{font-size:.875rem;color:var(--muted);margin:8px 0 16px}
.hint{margin:10px 0 0;font-size:.9rem;color:var(--muted)}
.closed{color:var(--danger);font-weight:500}
.warn{color:var(--gold-ink);font-weight:500}
.blk-h{margin:0 0 6px;font-size:.95rem;font-weight:600}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:960px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.narrow{max-width:720px}
main{display:block;padding-bottom:56px}
main:has(> .sec:last-child),main:has(> .chat){padding-bottom:0}
.sec{padding:56px 0}
@media (min-width:960px){.sec{padding:88px 0}}
/* one rhythm: two sections on the same background share a single gap */
.sec:not(.band-green) + .sec:not(.band-green){padding-top:0}
.sec-head{display:flex;align-items:flex-end;align-items:last baseline;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:22px}
.sec-head p{margin:0;max-width:52ch}
.sec-link{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.page-head{padding:28px 0 8px}
.page-head p{max-width:60ch;color:var(--muted)}
.page-head h1::after{content:"";display:block;width:96px;height:12px;margin-top:16px;background:var(--orn) left center/contain no-repeat}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:4px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:40;background:var(--head-bg);color:var(--text);border-bottom:1px solid rgba(200,164,93,.35);padding-top:env(safe-area-inset-top,0px)}
@media (max-height:500px){.head{position:relative}}
.head .wrap{height:var(--head-h);display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;min-width:0}
.brand svg{width:22px;height:32px;flex:none}
.wordmark{font-family:var(--serif);font-size:1.3rem;letter-spacing:-.01em;white-space:nowrap}
.wordmark b{font-weight:500}
.wordmark i{font-style:normal;color:var(--gold)}
.drawer .wordmark i,:root[data-theme="light"] .head .wordmark i{color:var(--gold-ink)}
.wordmark span{font-family:var(--sans);font-weight:400;font-size:.86em;letter-spacing:.005em}
/* narrow phones: smaller wordmark; under 360px the language link lives in the menu only (the drawer has it) */
@media (max-width:389px){.head .wordmark{font-size:1.12rem}.brand{gap:7px}.head .wrap{gap:8px}}
@media (max-width:359px){.head .lang-btn{display:none}}
.topnav{display:none;margin-left:auto;gap:2px}
.topnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.topnav a:hover{opacity:1;box-shadow:inset 0 -1px 0 var(--gold)}
.topnav a[aria-current="page"]{opacity:1;color:var(--gold-ink)}
.head-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
@media (min-width:960px){.topnav{display:flex}.head-actions{margin-left:8px}}
/* small laptops: the five links, the language and the light mode button share the bar */
@media (min-width:960px) and (max-width:1099px){.topnav a{padding:0 8px;letter-spacing:.1em}.head .lang-btn svg{display:none}.head .lang-btn{padding:0 10px}}
.icon-btn{--cut:8px;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:inherit;cursor:pointer;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.icon-btn:hover{background:var(--gold-soft)}
.icon-btn:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ring)}
.icon-btn svg{width:22px;height:22px}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.06em}
.lang-btn svg{width:17px;height:17px}
.lang-btn span{position:relative;top:1px}
.lang-btn:hover{--edge:var(--gold)}
@media (max-width:420px){.lang-btn svg{display:none}.lang-btn{padding:0 10px}}

/* ---------- bottom tab bar (phones) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);border-top:1px solid rgba(200,164,93,.45);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.tabbar ul{list-style:none;margin:0 auto;padding:0 4px;height:var(--nav-h);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:560px}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;padding-top:2px;text-decoration:none;font-size:.8rem;line-height:1.35;color:var(--muted);min-width:0}
.tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar svg{width:22px;height:22px;flex:none}
.tabbar a:hover{color:var(--text)}
.tabbar a[aria-current="page"]{color:var(--gold-ink);font-weight:500}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:2px;left:50%;width:6px;height:8px;margin-left:-3px;background:var(--gold);clip-path:var(--lozenge)}
.tabbar a:focus-visible{outline-offset:-4px}
@media (min-width:960px){.tabbar{display:none}}
@media (max-height:500px) and (max-width:959px){:root{--nav-h:48px}.tabbar a{flex-direction:row;gap:8px;padding-top:0}.tabbar a[aria-current="page"]::before{top:2px}}

/* ---------- art deco controls: a clipped chamfer and a 1px ring drawn by ::before (no border, so the corners stay clean) ---------- */
.btn,.chip,.seg label,.day-tabs button,.legal-nav a,.lang-btn,.search,.ask,.sel,.fbox,.notice,.tips,.motion-sw,.plan-jump{--cut:7px;--bw:1px;--edge:var(--line-strong);--k:calc(var(--cut) + .4142*var(--bw));position:relative;border:0;border-radius:0;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.btn::before,.chip::before,.seg label::before,.day-tabs button::before,.legal-nav a::before,.lang-btn::before,.search::before,.ask::before,.sel::before,.fbox::before,.notice::before,.tips::before,.motion-sw::before{content:"";position:absolute;inset:-1px;z-index:1;pointer-events:none;background:var(--edge);
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,
    calc(var(--k) + 1px) calc(var(--bw) + 1px),calc(var(--bw) + 1px) calc(var(--k) + 1px),calc(var(--bw) + 1px) calc(100% - var(--k) - 1px),calc(var(--k) + 1px) calc(100% - var(--bw) - 1px),calc(100% - var(--k) - 1px) calc(100% - var(--bw) - 1px),calc(100% - var(--bw) - 1px) calc(100% - var(--k) - 1px),calc(100% - var(--bw) - 1px) calc(var(--k) + 1px),calc(100% - var(--k) - 1px) calc(var(--bw) + 1px),calc(var(--k) + 1px) calc(var(--bw) + 1px))}

.btn{--cut:9px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:.58em 1.4em .49em 1.5em;background:transparent;color:var(--text);cursor:pointer;text-decoration:none;
  font:600 .875rem/1.25 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-align:center;text-wrap:balance;transition:background-color .2s,color .2s}
.btn:hover{background:var(--gold-soft)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{background:var(--gold);color:var(--cellar);--edge:transparent}
.btn-gold:hover{background:#D9B873}
.btn-sm{--cut:7px;min-height:44px;padding:.15em 1.1em 0;font-size:.8rem;letter-spacing:.08em}
.btn-block{width:100%}
.link{color:var(--gold-ink);text-underline-offset:3px}
.linklike{display:inline;background:none;border:0;padding:0;color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;text-align:left}

.chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 2px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:4px 16px 3px;background:transparent;color:inherit;font-size:.95rem;line-height:1.25;cursor:pointer;text-decoration:none;text-align:left}
.chip:hover{--edge:var(--gold)}

.seg{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0;min-width:0}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg label{display:inline-flex;align-items:center;min-height:44px;padding:4px 16px 3px;cursor:pointer;font-size:.95rem;line-height:1.25;user-select:none}
.seg label:hover{--edge:var(--gold)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:600;margin-bottom:10px;font-size:1rem;padding:0}

.day-tabs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));max-width:calc(var(--n,3) * 132px);gap:6px;margin:4px 0 14px}
.day-tabs button{--cut:6px;min-height:44px;padding:4px 8px 3px;background:none;cursor:pointer;font-size:.95rem;font-weight:500;text-align:center}
.legal-nav{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 14px}
.legal-nav a{--cut:6px;display:inline-flex;align-items:center;min-height:44px;padding:4px 14px 3px;text-decoration:none;font-size:.9rem}

/* one "selected" look everywhere: gold fill, cellar text, a darker ring so the state reads at 3:1 */
.seg input:checked+label,.day-tabs button[aria-selected="true"],.legal-nav a[aria-current="page"]{background:var(--gold);color:var(--cellar);font-weight:500;--edge:var(--gold-ink)}
/* keyboard focus comes last so it wins over the selected ring */
.btn:focus-visible,.chip:focus-visible,.day-tabs button:focus-visible,.legal-nav a:focus-visible,.lang-btn:focus-visible,.motion-sw:focus-visible,.seg input:focus-visible+label{outline:0;--bw:3px;--edge:var(--ring)}
.btn-gold:focus-visible{--edge:var(--cellar)}
.seg input:checked:focus-visible+label,.day-tabs button[aria-selected="true"]:focus-visible,.legal-nav a[aria-current="page"]:focus-visible{--edge:var(--text)}
.search:focus-within,.ask:focus-within,.sel:focus-within,.fbox:focus-within{--bw:2px;--edge:var(--ring)}
.hero .btn-gold:focus-visible,.gate .btn-gold:focus-visible,.cta-box .btn-gold:focus-visible{--edge:#F4F1EA}

/* ---------- hero: dawn over the Montagne de Reims ---------- */
.hero{position:relative;background:var(--hero-bg);color:var(--text);overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:2;padding-top:24px;padding-bottom:40px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.hero-copy{position:relative;z-index:2;max-width:620px;min-width:0}
.hero h1{font-weight:400;font-size:clamp(1.85rem,8.4vw,3.5rem)}
.hero-lede{font-size:1.1rem;color:var(--hero-lede);max-width:36ch}
.hero-note{font-size:.9rem;color:var(--hero-note);margin:12px 0 0;max-width:46ch}
.hero-art{pointer-events:none}
.hero-svg{display:block}
.hero-svg text{font-family:var(--sans);font-size:15px}
.anim-btn{--cut:8px;pointer-events:auto;position:absolute;z-index:4;right:10px;bottom:10px;width:44px;height:44px;display:grid;place-items:center;border:0;background:rgba(22,19,15,.66);color:#F4F1EA;cursor:pointer;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.anim-btn svg{width:18px;height:18px;grid-area:1/1}
.anim-btn svg:last-child,html.calm .anim-btn svg:first-child{display:none}
html.calm .anim-btn svg:last-child{display:block}
.anim-btn:hover{background:rgba(22,19,15,.88)}
.anim-btn:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--gold)}
@media (max-width:959px){
  .hero-art{position:relative;height:clamp(170px,calc(100svh - 450px),max(300px,56.25vw));overflow:hidden}
  .hero-art .hero-svg{position:absolute;right:0;bottom:0;width:max(100%,533px);height:auto}
  .hero-svg text{font-size:34px}
}
@media (min-width:600px) and (max-width:959px){.hero-svg text{font-size:24px}}
@media (min-width:960px){
  .hero-art{position:absolute;inset:0;z-index:0}
  .hero-art .hero-svg{position:absolute;inset:0;width:100%;height:100%}
  .hero::after,.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
  .hero::after{background:linear-gradient(90deg,rgba(22,19,15,.95) 0%,rgba(22,19,15,.84) 30%,rgba(22,19,15,.3) 50%,rgba(22,19,15,0) 62%)}
  .hero::before{background:linear-gradient(90deg,rgba(244,241,234,.96) 0%,rgba(244,241,234,.92) 34%,rgba(244,241,234,.64) 52%,rgba(244,241,234,0) 68%);opacity:0}
  :root[data-theme="light"] .hero::after{opacity:0}
  :root[data-theme="light"] .hero::before{opacity:1}
  .hero .wrap{grid-template-columns:minmax(0,580px);min-height:700px;align-content:center;padding-top:72px;padding-bottom:80px}
}
@media (min-width:960px) and (max-width:1199px){.hero .wrap{grid-template-columns:minmax(0,470px)}.hero-art .hero-svg{left:12%;width:88%;top:auto;height:600px}.hero-svg text{font-size:17px}.hero h1{font-size:3rem}}
.hero .h-bub{opacity:.45}
.hero .h-pin,.hero .h-lbl text{transform-box:fill-box;transform-origin:center}

/* the question box */
.ask{--cut:14px;margin-top:22px;background:var(--surface);padding:8px;display:flex;align-items:flex-end;gap:8px}
.hero .ask{background:var(--hero-ask)}
.ask textarea{flex:1;min-width:0;background:none;border:0;resize:none;padding:10px 12px;color:var(--text);font-size:1.0625rem;line-height:1.45;max-height:140px;outline:none}
.ask textarea::placeholder{color:var(--muted);opacity:1}
.ask .send{--cut:9px;flex:none;width:48px;height:48px;border:0;background:var(--gold);color:var(--cellar);display:grid;place-items:center;cursor:pointer;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.ask .send:hover{background:#D9B873}
.ask .send:focus-visible{outline:0;background:#D9B873;box-shadow:inset 0 0 0 3px var(--cellar)}
.ask .send svg{width:20px;height:20px}
.hero .chips{max-width:560px}
.hero .chip{color:var(--hero-chip)}

/* ---------- home: how it works ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;align-content:start;padding:18px 0;border-top:1px solid var(--line)}
.steps li::before{--cut:9px;content:counter(s);width:44px;height:44px;padding-bottom:2px;display:grid;place-items:center;background:var(--gold);color:var(--cellar);font-family:var(--serif);font-size:1.2rem;font-weight:600;font-variant-numeric:lining-nums;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.steps h3{margin:.3em 0 .25em}
.steps p{margin:0;color:var(--muted)}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:28px}.steps li{grid-template-columns:1fr}}
.steps-grid{display:grid;gap:26px}
.steps-cta{margin:0}
@media (min-width:960px){
  .steps-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:64px;align-items:start}
  .steps-grid .steps{grid-template-columns:1fr;gap:0}
  .steps-grid .steps li{grid-template-columns:44px 1fr}
  .steps-grid .demo{grid-row:1/span 2;grid-column:2;margin-top:9px}
  .steps-cta{grid-column:1}
}

/* stepped frames ("gradins") */
.gradin,.card,.offer,.plan-form,.plan-out,.perks,.guide-row,.exc,.essentiel,.cta-box,.terroir,.hero-img,.pro-art{--step:8px;--bw:1px;--edge:var(--line-strong);position:relative;border:0;border-radius:0;
  clip-path:polygon(0 calc(2*var(--step)),var(--step) calc(2*var(--step)),var(--step) var(--step),calc(2*var(--step)) var(--step),calc(2*var(--step)) 0,calc(100% - 2*var(--step)) 0,calc(100% - 2*var(--step)) var(--step),calc(100% - var(--step)) var(--step),calc(100% - var(--step)) calc(2*var(--step)),100% calc(2*var(--step)),100% 100%,0 100%)}
.gradin::before,.card::before,.offer::before,.plan-form::before,.plan-out::before,.perks::before,.guide-row::before,.exc::before,.essentiel::before,.cta-box::before{content:"";position:absolute;inset:-1px;z-index:3;pointer-events:none;background:var(--edge);
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,
    calc(var(--bw) + 1px) calc(2*var(--step) + var(--bw) + 1px),calc(var(--bw) + 1px) calc(100% - var(--bw) - 1px),calc(100% - var(--bw) - 1px) calc(100% - var(--bw) - 1px),calc(100% - var(--bw) - 1px) calc(2*var(--step) + var(--bw) + 1px),calc(100% - var(--step) - var(--bw) - 1px) calc(2*var(--step) + var(--bw) + 1px),calc(100% - var(--step) - var(--bw) - 1px) calc(var(--step) + var(--bw) + 1px),calc(100% - 2*var(--step) - var(--bw) - 1px) calc(var(--step) + var(--bw) + 1px),calc(100% - 2*var(--step) - var(--bw) - 1px) calc(var(--bw) + 1px),calc(2*var(--step) + var(--bw) + 1px) calc(var(--bw) + 1px),calc(2*var(--step) + var(--bw) + 1px) calc(var(--step) + var(--bw) + 1px),calc(var(--step) + var(--bw) + 1px) calc(var(--step) + var(--bw) + 1px),calc(var(--step) + var(--bw) + 1px) calc(2*var(--step) + var(--bw) + 1px),calc(var(--bw) + 1px) calc(2*var(--step) + var(--bw) + 1px))}
.perks,.plan-form,.plan-out,.terroir,.hero-img,.pro-art{--step:10px}
.guide-row{--step:5px}
.card.spon,.offer.feat,.essentiel{--edge:var(--gold)}
.cta-box{--edge:rgba(200,164,93,.55)}
.card:hover,.guide-row:hover,a.demo:hover{--edge:var(--gold)}
.card:focus-visible,.guide-row:focus-visible,a.demo:focus-visible{outline:0;--bw:3px;--edge:var(--ring)}

/* the itinerary composing itself (a link to the same plan in the planner) */
.demo{display:block;max-width:520px;padding:22px 20px 16px;background:var(--surface);color:inherit;text-decoration:none}
.demo-in{display:block}
.demo-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:10px}
.demo-title{font-family:var(--serif);font-size:1.22rem;line-height:1.2}
.demo-day{font-size:.85rem;color:var(--muted)}
.demo .day-name{display:block}
.demo-tl{list-style:none;margin:0;padding:0;position:relative}
.demo-tl::before{content:"";position:absolute;left:calc(3.6rem + 15.5px);top:12px;bottom:12px;width:1px;background:var(--line-strong);transform-origin:top}
.demo-tl li{display:grid;grid-template-columns:3.6rem 12px 1fr;gap:10px;padding:7px 0;align-items:start}
.demo-t{font-size:.9rem;color:var(--gold-ink);padding-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-tl .dot{position:relative;z-index:1;width:10px;height:15px;margin:4px 0 0 1px;background:var(--gold);clip-path:var(--lozenge)}
.demo-txt{font-weight:500;line-height:1.35}
.demo-txt .tag{vertical-align:2px;margin-left:4px}
.demo-more{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.demo-more svg{width:16px;height:16px}

/* four terroirs */
.terroirs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.terroir{display:flex;flex-direction:column;justify-content:flex-end;min-height:200px;padding:14px;overflow:hidden;color:var(--chalk);text-decoration:none;background:var(--cellar)}
.terroir img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s}
.terroir::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,19,15,0) 25%,rgba(22,19,15,.75) 58%,rgba(22,19,15,.93))}
.terroir h3,.terroir p{text-shadow:0 1px 10px rgba(22,19,15,.75)}
.terroir>*:not(img){position:relative;z-index:2}
.terroir h3{margin:0 0 4px;font-size:1.12rem;line-height:1.2}
.terroir p{margin:0;font-size:.95rem;color:#DDD6CA}
.terroir:hover img{transform:scale(1.04)}
.terroir:focus-visible{outline:0}
.terroir:focus-visible::after{box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 5px var(--cellar)}
@media (max-width:559px){.terroir p{display:none}}
@media (min-width:560px){.terroir{min-height:260px;padding:18px}}
@media (min-width:760px){.terroirs{grid-template-columns:repeat(4,1fr);gap:14px}.terroir{min-height:320px;padding:20px}.terroir h3{font-size:1.28rem}}

/* from vine to bubble */
.vigs{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.vigs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.vigs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vig{margin:0}
.vig-art{aspect-ratio:5/3;background:#16130F}
.vig-art svg{display:block;width:100%;height:100%}
.vig-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url(img/grain.png),linear-gradient(rgba(22,19,15,.24),rgba(22,19,15,.24));background-size:128px,auto}
:root[data-theme="light"] .vig-art::after{background:url(img/grain.png);background-size:128px;opacity:.7}
.vig figcaption h3{font-size:1.2rem;margin:14px 0 4px}
.vig figcaption p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55}
.sf-foot{margin:26px 0 0}
.sf-src{margin:14px 0 0}
.motion-sw{--cut:6px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:1px 12px 0 14px;background:none;cursor:pointer;font-size:.9rem;color:var(--muted)}
.motion-sw i{position:relative;width:34px;height:18px;background:var(--line-strong);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.motion-sw i::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;background:var(--surface);clip-path:var(--lozenge);transition:transform .2s}
.motion-sw[aria-checked="true"] i{background:var(--gold)}
.motion-sw[aria-checked="true"] i::after{transform:translateX(16px);background:var(--cellar)}
.motion-sw:hover{--edge:var(--gold);color:var(--text)}

/* guides */
.guide-list{display:grid;gap:12px}
@media (min-width:760px){.guide-list{grid-template-columns:1fr 1fr}}
.guide-row{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:10px;text-decoration:none;background:var(--surface)}
.guide-row img{width:92px;height:92px;object-fit:cover;background:var(--surface-2)}
.guide-row h2,.guide-row h3{font-size:1.12rem;line-height:1.25;margin:0 0 4px}
.guide-row p{margin:0;font-size:.95rem;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* perks */
.perks-lede{max-width:56ch}
.perks{display:grid;gap:18px;background:var(--surface);padding:24px}
.perk{display:grid;grid-template-columns:36px 1fr;gap:12px}
.perk svg{width:28px;height:28px;stroke:var(--gold-ink)}
.perk h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;margin:.1em 0 .2em}
.perk p{margin:0;font-size:.97rem;color:var(--muted)}
@media (min-width:760px){.perks{grid-template-columns:repeat(3,1fr);padding:32px}}

/* businesses band */
.band-green{background:var(--green);color:var(--on-green)}
.split{display:grid;gap:28px;align-items:center}
.pro-art{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#16130F}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr;gap:56px}}

/* FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;min-height:44px;position:relative;font-weight:500;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:1.5px solid var(--gold-ink);border-bottom:1.5px solid var(--gold-ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq summary:hover{color:var(--gold-ink)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{color:var(--muted);padding-right:24px}

/* ---------- concierge ---------- */
.chat{display:flex;flex-direction:column;min-height:calc(100svh - var(--head-h) - var(--nav-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
@media (min-width:960px){.chat{min-height:calc(100svh - var(--head-h) - 40px)}}
.chat-top{padding:14px 0 12px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}
.avatar{--cut:9px;width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--cellar);
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.avatar .sym,.avatar svg{width:16px;height:24px}
.chat-top h1{font-size:1.3rem;margin:0}
.chat-top p{margin:2px 0 0;font-size:.9rem;line-height:1.4;color:var(--muted)}
.ai-flag{margin-left:auto;font-size:.8rem;color:var(--muted);white-space:normal}
.ai-flag.off{opacity:.65}
.log{flex:1;padding:18px 0 12px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:88%;padding:12px 16px;line-height:1.5;scroll-margin-top:calc(var(--head-h) + 16px)}
.msg p:last-child{margin-bottom:0}
.msg.me{align-self:flex-end;background:var(--surface-2)}
.msg.bot{align-self:flex-start;max-width:100%;background:var(--surface);border:1px solid var(--line)}
.msg .chips{padding-top:10px}
.msg .src{font-size:.85rem;color:var(--muted);margin-top:10px}
.msg .src-list{margin:10px 0 0;padding:0;list-style:none;font-size:.9rem;display:flex;flex-wrap:wrap;gap:8px}
.msg .src-list a{--cut:5px;display:inline-flex;align-items:center;min-height:36px;padding:2px 12px;text-decoration:none;color:var(--gold-ink);background:var(--gold-soft);
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.msg .src-list a:hover{text-decoration:underline}
.more-link{margin:10px 0 0}
.more-link a{display:inline-flex;align-items:center;min-height:44px}
.typing{display:inline-flex;gap:5px;padding:16px}
.typing i{width:7px;height:7px;border-radius:9px;background:var(--gold)}
.composer{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));z-index:5;padding:10px 0 12px;background:linear-gradient(180deg,transparent,var(--bg) 12px)}
@media (min-width:960px){.composer{bottom:16px}}
.composer .ask{margin:0}

/* ---------- itinerary ---------- */
.itin{margin-top:6px}
.day-panel{min-width:0}
.day-name{margin:0 0 6px;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:calc(3.6rem + 15.5px);top:8px;bottom:8px;width:1px;background:var(--line-strong)}
.tl li{display:grid;grid-template-columns:3.6rem 12px minmax(0,1fr);gap:10px;padding:8px 0;align-items:start}
.tl time{font-size:.9rem;color:var(--gold-ink);padding-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl .dot{position:relative;z-index:1;width:10px;height:15px;margin:4px 0 0 1px;background:var(--gold);clip-path:var(--lozenge)}
.tl strong{display:block;font-weight:500}
.tl-place{display:inline-block;padding:10px 0;margin:-10px 0;font-weight:500}
.tl small{display:block;color:var(--muted);font-size:.92rem;line-height:1.45}
.tl small.closed{color:var(--danger);font-weight:500}
.tl small.warn{color:var(--gold-ink);font-weight:500}
.tl .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tl .acts .link{display:inline-flex;align-items:center;min-height:44px}
.tag{--cut:5px;display:inline-flex;align-items:center;gap:4px;padding:4px 9px 3px;background:var(--gold-soft);color:var(--gold-ink);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.tag abbr{text-decoration:none}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.notice,.tips{--cut:10px;--edge:color-mix(in srgb,var(--gold) 60%,transparent);background:var(--gold-soft)}
.notice{margin:14px 0;padding:12px 16px;font-size:.97rem;line-height:1.5}
.notice strong{display:block;margin-bottom:2px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.tips{margin-top:14px;padding:14px 16px}
.tips ul,.essentiel ul{list-style:none;margin:0;padding-left:0}
.tips ul{font-size:.95rem}
.tips li,.essentiel li{position:relative;padding-left:20px;margin:4px 0}
.tips li::before,.essentiel li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:12px;background:var(--gold);clip-path:var(--lozenge)}
.exc{margin-top:14px;padding:18px 18px 16px;background:var(--surface)}
.exc p{font-size:.97rem;margin:0 0 12px}
.exc .blk-h{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.aff-flag{position:relative;margin:10px 0 0;padding-left:16px;font-size:.875rem;line-height:1.45;color:var(--muted)}
.aff-flag::before{content:"";position:absolute;left:0;top:.45em;width:6px;height:10px;background:var(--gold);clip-path:var(--lozenge)}

/* ---------- planner ---------- */
.plan-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.plan-form{display:grid;gap:22px;background:var(--surface);padding:20px}
.plan-out{background:var(--surface);padding:20px}
.plan-out-head{display:flex;justify-content:space-between;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-bottom:6px}
.plan-out-head h2{margin:0;font-size:1.4rem}
html:not(.js) [data-act]{display:none!important}
@media (min-width:720px){.plan-form{grid-template-columns:1fr 1fr;column-gap:28px}.plan-form fieldset:last-child{grid-column:1/-1}}
@media (min-width:960px){.plan-grid{grid-template-columns:420px minmax(0,1fr);align-items:start}.plan-form{grid-template-columns:1fr}.plan-out{position:sticky;top:calc(var(--head-h) + 20px)}}
.plan-jump{--cut:9px;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 12px);z-index:44;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 20px;
  background:var(--gold);color:var(--cellar);text-decoration:none;font-size:.875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow);white-space:nowrap}
.plan-jump svg{width:18px;height:18px}
body:has(#planf :focus-visible) .plan-jump{visibility:hidden}
.plan-jump:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--cellar)}
@media (min-width:960px){.plan-jump{display:none!important}}

/* ---------- explore ---------- */
.ex-filters{display:grid;gap:12px;margin-bottom:6px}
.search{--cut:12px;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--surface);min-height:52px}
.search svg{width:20px;height:20px;flex:none;stroke:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;padding:12px 0;font-size:1.0625rem}
.search input::placeholder{color:var(--muted);opacity:1}
.ex-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.sel{display:flex;align-items:center;gap:10px;flex:1 1 260px;max-width:420px;min-height:50px;padding:0 0 0 16px;background:var(--surface)}
.sel span{flex:none;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sel select,.fsel select{flex:1;min-width:0;width:100%;height:48px;border:0;background-color:transparent;padding:0 40px 0 0;font-size:1.0625rem;color:var(--text);-webkit-appearance:none;appearance:none;cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C8A45D' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.sel select option,.fsel select option{color:#16130F;background-color:#FBF9F4}
.ex-count{margin:0;font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cards{display:grid;gap:12px;margin-top:16px}
.cards-1{grid-template-columns:1fr!important;margin-top:10px}
@media (min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.cards{grid-template-columns:1fr 1fr 1fr}}
.card{width:100%;display:flex;flex-direction:column;gap:8px;padding:16px;text-align:left;background:var(--surface);color:inherit;cursor:pointer;border:0}
.card .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card .ttl{font-family:var(--serif);font-size:1.18rem;line-height:1.25}
.card .dsc{font-size:.97rem;color:var(--muted);line-height:1.45}
.card .meta{margin-top:auto;font-size:.9rem;color:var(--muted)}
.empty{padding:40px 0;text-align:center;color:var(--muted)}
.ex-more{margin:18px 0 0;text-align:center}

/* ---------- sheet and drawer ---------- */
.overlay{position:fixed;inset:0;z-index:90;background:rgba(10,8,6,.55);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{width:100%;max-width:640px;max-height:88vh;max-height:88svh;overflow:auto;overscroll-behavior:contain;background:var(--surface);color:var(--text);border-top:2px solid var(--gold);
  padding:0 max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.sheet-top{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:center;min-height:52px;margin:0 -20px 4px;padding:0 8px;background:var(--surface)}
.sheet .grab{width:96px;height:12px;background:var(--orn) center/contain no-repeat}
.sheet-x{--cut:8px;position:absolute;right:6px;top:4px;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.sheet-x:hover{color:var(--text);background:var(--gold-soft)}
.sheet-x:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ring)}
.sheet-x svg{width:20px;height:20px}
.sheet h2{font-size:1.6rem}
@media (min-width:760px){.overlay{align-items:center}.sheet{border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-top:2px solid var(--gold);padding:0 28px 24px}.sheet-top{margin:0 -28px 4px}}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:0;font-size:.97rem;margin:18px 0 6px;border-bottom:1px solid var(--line)}
.facts dt,.facts dd{padding:10px 0;border-top:1px solid var(--line)}
.facts dt{padding-top:13px;padding-right:16px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.facts dd{margin:0}
.facts dd small{display:block;margin-top:2px;color:var(--muted);font-size:.92rem}
.acts-col{display:grid;gap:10px;margin:16px 0 6px}
.sub-links{display:flex;flex-wrap:wrap;gap:0 22px;margin:12px 0 4px;font-size:.97rem}
.sub-links a{display:inline-flex;align-items:center;min-height:44px}
.sheet-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sheet-btns .full{grid-column:1/-1}
.drawer{position:fixed;inset:0;z-index:95;background:rgba(10,8,6,.5);animation:fade .2s}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(86vw,360px);overflow:auto;overscroll-behavior:contain;background:var(--surface);
  padding:calc(12px + env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) 22px}
.drawer-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.drawer-links{list-style:none;padding:0;margin:4px 0 18px}
.drawer-links a,.drawer-links button{display:flex;align-items:center;width:100%;min-height:48px;padding:0;text-align:left;text-decoration:none;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;font-size:1.05rem;color:inherit}
.drawer-links a:hover,.drawer-links button:hover{color:var(--gold-ink)}
.drawer-panel h2{font:600 .8rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 10px}
.drawer-health{font-size:.875rem;margin-top:8px}
.drawer .pref{border-top:0}

/* ---------- age gate ---------- */
html.gated body::after{content:"";position:fixed;inset:0;z-index:119;background:#16130F;animation:gfail 0s 6s forwards}
@keyframes gfail{to{visibility:hidden}}
.gate{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background:var(--cellar);color:var(--chalk);
  padding:calc(24px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
.gate::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 38%,rgba(200,164,93,.5) 0 .5deg,transparent .5deg 6deg);-webkit-mask:radial-gradient(circle at 50% 38%,#000 0,transparent 62%);mask:radial-gradient(circle at 50% 38%,#000 0,transparent 62%);opacity:.3}
.gate-box{position:relative;z-index:1;margin:auto;max-width:440px;text-align:center}
.gate .sym{width:38px;height:56px;margin:0 auto 18px;display:block}
.gate h2{font-size:clamp(1.7rem,6vw,2.3rem);font-weight:400}
.gate p{color:#CFC8BB}
.gate .btns{display:grid;gap:10px;margin:24px 0 16px}
.gate small{display:block;color:#B5AEA2;font-size:.875rem;line-height:1.55}

/* ---------- cookie banner, preferences, switch ---------- */
.cookie{position:fixed;left:12px;right:12px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 12px);z-index:100;max-width:560px;margin:0 auto;padding:18px;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-top:2px solid var(--gold);box-shadow:var(--shadow)}
@media (min-width:960px){.cookie{bottom:20px;left:20px;right:auto}}
.cookie h2{font-family:var(--sans);font-size:1.05rem;font-weight:600;margin:0 0 6px}
.cookie p{font-size:.92rem;color:var(--muted);margin:0 0 14px}
.cookie .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cookie .btns .full{grid-column:1/-1}
.pref{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.pref p{margin:2px 0 0;font-size:.92rem;color:var(--muted)}
.switch{position:relative;width:56px;height:44px;flex:none}
.switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;z-index:1}
.switch span{position:absolute;left:2px;right:2px;top:8px;bottom:8px;background:var(--line-strong);transition:background-color .2s;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.switch span::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;background:var(--surface);transition:transform .2s;clip-path:var(--lozenge)}
.switch input:checked+span{background:var(--gold)}
.switch input:checked+span::after{transform:translateX(24px);background:var(--cellar)}
.switch input:disabled+span{opacity:.5}
.switch input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--ring)}

/* ---------- toast: under the header so it never covers the composer or the tab bar ---------- */
.toasts{position:fixed;z-index:130;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 10px);display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 12px;pointer-events:none}
.toast{position:relative;pointer-events:auto;display:flex;align-items:flex-start;gap:12px;width:100%;max-width:440px;padding:14px 6px 14px 14px;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);box-shadow:var(--shadow);transition:opacity .18s,transform .18s}
.toast::before{content:"";position:absolute;inset:3px;border:1px solid var(--gold);opacity:.4;pointer-events:none}
.toast.out{opacity:0;transform:translateY(-8px)}
.toast-ico{--cut:8px;flex:none;width:36px;height:36px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-ink);
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.toast-ico svg{width:20px;height:20px}
.toast-warn .toast-ico{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.toast-tx{flex:1;min-width:0;padding-top:1px}
.toast-tx strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.05rem;line-height:1.3;margin-bottom:2px}
.toast-tx span{display:block;font-size:.97rem;line-height:1.45;text-wrap:balance}
.toast-tx strong+span{color:var(--muted)}
.toast-a{margin-top:10px;min-height:44px;padding:0 18px;border:0;background:var(--gold);color:var(--cellar);font-weight:600;font-size:.95rem;cursor:pointer}
.toast-x{flex:none;width:44px;height:44px;margin:-4px 0;display:grid;place-items:center;background:none;border:0;color:var(--muted);cursor:pointer}
.toast-x svg{width:18px;height:18px}
.toast-x:hover{color:var(--text);background:var(--gold-soft)}

/* ---------- articles ---------- */
.article{padding-bottom:40px}
.article .page-head{padding-bottom:0}
.article .hero-img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;margin:8px 0 26px;background:var(--surface-2)}
.article h2{font-size:clamp(1.35rem,4.2vw,1.8rem);margin-top:1.6em}
.article p,.article li{font-size:1.1rem;line-height:1.7}
.article ul,.article ol{padding-left:1.2em}
.article li{margin:.35em 0}
.byline{font-size:.97rem;color:var(--muted);margin:0 0 6px}
.byline a{color:var(--gold-ink)}
.essentiel{margin:6px 0 20px;padding:18px 20px;background:var(--gold-soft)}
.essentiel h2{font-family:var(--sans);font-size:1rem;font-weight:600;margin:0 0 8px}
.article .essentiel li{font-size:1.02rem;line-height:1.55}
.updated{font-size:.9rem;color:var(--muted)}
.tbl{overflow-x:auto;margin:14px 0 20px;border:1px solid var(--line)}
.tbl table{border-collapse:collapse;width:100%;font-size:.97rem}
.tbl table:has(th:nth-child(4)){min-width:560px}
.tbl th,.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{font-weight:600;background:var(--surface-2)}
.tbl tr:last-child td{border-bottom:0}
@media (max-width:639px){
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  .tbl:has(table.stack){border:0;overflow:visible}
  .tbl table.stack:has(th:nth-child(4)){min-width:0}
  table.stack tr{padding:12px 14px;border:1px solid var(--line);margin-bottom:10px;background:var(--surface)}
  table.stack td{border:0;padding:3px 0}
  table.stack td::before{content:attr(data-label);display:block;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
  table.stack td:first-child{font-weight:600;font-family:var(--serif);font-size:1.08rem}
  table.stack td:first-child::before{display:none}
}
.cta-box{margin:30px 0;padding:22px;background:var(--cellar);color:var(--chalk)}
.cta-box h2{margin-top:0;font-size:1.45rem}
.article .cta-box p{font-size:1rem;color:#CFC8BB}
.sources{margin-top:30px;border-top:1px solid var(--line);padding-top:10px}
.sources ol{padding-left:1.2em}
.article .sources li{font-size:.97rem;line-height:1.5;margin:.2em 0}
.sources a{display:inline-block;padding:10px 0;color:var(--gold-ink);text-underline-offset:3px;word-break:break-word}
.related{margin-top:10px}
.related .guide-list{grid-template-columns:1fr}
.article .related h2,.article .sources h2{margin-top:1.2em}
.article .guide-row p{font-size:.95rem;line-height:1.45}
.health-inline{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:28px}

/* ---------- legal and about ---------- */
.legal h2{font-size:1.35rem;margin-top:1.8em}
.legal p,.legal li{font-size:1rem;line-height:1.7}
.legal .linklike{display:inline-block;padding:10px 0;margin:-10px 0}
.legal .ph,.about .ph{background:var(--gold-soft);color:var(--gold-ink);padding:0 4px}
.courtesy{font-size:.95rem;background:var(--gold-soft);padding:10px 14px}
.about .lede{font-family:var(--serif);font-size:1.25rem;line-height:1.55}
.about code{font-size:.9em;background:var(--surface-2);padding:1px 6px}

/* ---------- about: what champagne.direct is (landing page). One bold element: the label, the site described the way a bottle describes itself ---------- */
.ab-hero{padding:24px 0 8px}
.ab-hero>.wrap{display:grid;gap:34px}
.ab-hero h1{font-size:clamp(2.2rem,8.2vw,3.75rem);margin:0 0 .4em}
.ab-hero h1::after{content:"";display:block;width:96px;height:12px;margin-top:18px;background:var(--orn) left center/contain no-repeat}
.ab-def{font-family:var(--serif);font-size:clamp(1.16rem,3.9vw,1.4rem);line-height:1.55;max-width:33em;margin:0}
.ab-cta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
@media (max-width:559px){.ab-cta .btn{width:100%}}
@media (min-width:960px){.ab-hero{padding:56px 0 16px}.ab-hero>.wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:64px;align-items:center}}
.ab-label{--step:10px;--edge:var(--gold);width:100%;max-width:500px;justify-self:center;padding:28px 22px 18px;background:var(--surface)}
.ab-label-top{text-align:center}
.ab-label-top .sym{display:block;width:26px;height:38px;margin:0 auto 12px}
.ab-label h2{font-size:clamp(1.35rem,4.6vw,1.6rem);margin:0}
.ab-label h2 .wordmark{font-size:1em}
:root[data-theme="light"] .ab-label .wordmark i{color:var(--gold-ink)}
.ab-label-sub{margin:6px 0 0;font-family:var(--serif);font-style:italic;font-size:1.04rem;color:var(--muted)}
.ab-label dl{margin:18px 0 0}
.ab-label dl>div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.ab-label dt{font-size:.9rem;color:var(--muted)}
.ab-label dd{margin:0;font-size:1rem;line-height:1.45;font-weight:500}
@media (min-width:420px){.ab-label{padding:32px 28px 20px}.ab-label dl>div{grid-template-columns:7.6em minmax(0,1fr);column-gap:14px;align-items:baseline}}
.ab-label-date{margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted);text-align:center}
.ab-tools{list-style:none;margin:0;padding:0;display:grid;border-bottom:1px solid var(--line)}
.ab-tools li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:22px 0 16px;border-top:1px solid var(--line)}
.ab-tools li>svg{width:28px;height:28px;margin-top:3px;color:var(--gold-ink)}
.ab-tools h3{margin:0 0 .3em}
.ab-tools p{margin:0;color:var(--muted)}
.ab-ex{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
@media (min-width:760px){.ab-tools{grid-template-columns:1fr 1fr;column-gap:56px}}
.ab-trust{display:grid;gap:26px;margin-top:6px}
@media (min-width:760px){.ab-trust{grid-template-columns:1fr 1fr;gap:32px 56px}}
.ab-trust h3{display:flex;align-items:baseline;gap:12px;margin:0 0 .35em;font-family:var(--sans);font-size:1.1rem;font-weight:600;line-height:1.35;letter-spacing:0}
.ab-trust h3::before{content:"";flex:none;width:10px;height:14px;background:var(--gold);clip-path:var(--lozenge);transform:translateY(1px)}
.ab-trust p{margin:0;padding-left:22px;color:var(--muted)}
.ab-who{display:grid;gap:34px;margin-top:6px}
@media (min-width:860px){.ab-who{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}}
.ab-who-art{--step:8px;width:100%;aspect-ratio:16/7;object-fit:cover;margin-bottom:16px;background:var(--surface-2);
  clip-path:polygon(0 calc(2*var(--step)),var(--step) calc(2*var(--step)),var(--step) var(--step),calc(2*var(--step)) var(--step),calc(2*var(--step)) 0,calc(100% - 2*var(--step)) 0,calc(100% - 2*var(--step)) var(--step),calc(100% - var(--step)) var(--step),calc(100% - var(--step)) calc(2*var(--step)),100% calc(2*var(--step)),100% 100%,0 100%)}
.ab-who h3{margin:0 0 .3em}
.ab-who p{margin:0 0 10px;color:var(--muted)}
.ab-links{list-style:none;margin:0;padding:0}
.ab-links li{border-top:1px solid var(--line)}
.ab-links a{display:flex;align-items:center;min-height:44px;padding:8px 0;line-height:1.35}
.ab-method{display:grid;gap:4px 56px}
@media (min-width:760px){.ab-method{grid-template-columns:1fr 1fr}}
.ab-method h3{font-size:1.2rem;margin:1.1em 0 .4em}
.ab-method p,.ab-method li{font-size:1rem;line-height:1.65;color:var(--muted)}
.ab-method ul{margin:0 0 1em;padding-left:1.15em}
.ab-method li+li{margin-top:6px}
.ab-method .linklike{display:inline-block;padding:10px 0;margin:-10px 0}

/* ---------- partners and forms ---------- */
.offers{display:grid;gap:14px}
@media (min-width:860px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--surface)}
.offer h2{font-size:1.35rem;margin:0}
.offer .muted{margin:0}
.offer ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:.97rem}
.offer .price{margin:auto 0 0;font-size:.92rem;color:var(--muted)}
.offer .btn{align-self:flex-start}
.pform-sec{padding-left:0;padding-right:0}
.form{display:grid;gap:16px}
.form>p{margin:0}
.form>.btn{margin-top:8px}
.field label{display:block;font-size:.97rem;font-weight:500;margin-bottom:6px}
.fbox{--cut:8px;display:block;background:var(--surface)}
.fbox input,.fbox textarea{display:block;width:100%;min-height:50px;padding:12px 14px;border:0;background:transparent;color:var(--text);font-size:1.0625rem;outline:0}
.fbox textarea{min-height:120px;resize:vertical}
.fsel{padding-left:14px}
.fbox:has([aria-invalid="true"]){--edge:var(--danger)}
.ferr,.err{color:var(--danger);font-size:.92rem;margin:6px 0 0}
.err:empty{display:none}

/* ---------- footer ---------- */
.foot{background:var(--cellar);color:#CFC8BB;border-top:1px solid rgba(200,164,93,.4);padding:0 0 calc(var(--nav-h) + 40px);font-size:.97rem}
@media (min-width:960px){.foot{padding-bottom:44px}}
.foot-sky{padding-top:30px;margin-bottom:24px;opacity:.75;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.foot-sky svg{display:block;width:100%;height:56px}
@media (min-width:960px){.foot-sky svg{height:84px}}
.foot .wordmark{color:var(--chalk)}
.foot-grid{display:grid;gap:22px;margin:20px 0}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;align-items:baseline}}
.foot h2{font-family:var(--sans);font-size:.97rem;font-weight:600;color:var(--chalk);margin:0 0 4px;letter-spacing:.01em}
.foot ul{list-style:none;padding:0;margin:0}
.foot a{color:#CFC8BB;text-decoration:none}
.foot li a,.foot .linklike,.foot-grid p a{display:inline-flex;align-items:center;min-height:44px;color:#CFC8BB;text-decoration:none}
.foot a:hover,.foot .linklike:hover{color:var(--gold)}
.foot .aff-note{margin:16px 0 0;font-size:.9rem;color:#B5AEA2}
.foot .health{border-top:1px solid rgba(244,241,234,.12);padding-top:18px;margin-top:8px;font-size:.92rem}
.copy{font-size:.875rem;color:#A9A195;margin:0}

/* ---------- 404 and language chooser ---------- */
.nf .ask{margin:8px 0 18px}
.nf-home{margin:0 0 28px}
.nf h2{font-size:1.35rem}
.root-choose{background:var(--cellar);color:var(--chalk);min-height:100vh}
.root-main{padding:80px 20px;text-align:center}
.root-main .sym{width:44px;height:64px;margin:0 auto 16px;display:block}
.root-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- motion: one orchestrated moment (hero), quiet loops elsewhere, all pausable ---------- */
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
@keyframes slide{from{transform:translateX(30px);opacity:.5}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes toastin{from{transform:translateY(-14px);opacity:0}}
@keyframes hSun{from{transform:translateY(60px)}}
@keyframes hFadeIn{from{opacity:.2}}
@keyframes hRays{from{opacity:0;transform:scale(.55)}}
@keyframes hDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hPop{from{opacity:0;transform:translateY(8px) scale(.5)}}
@keyframes hBeamIn{from{opacity:0}}
@keyframes hBeam{0%,100%{transform:scaleX(1)}25%{transform:scaleX(.05)}50%{transform:scaleX(-.8)}75%{transform:scaleX(-.05)}}
@keyframes hTw{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes hBub{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}80%{opacity:.45}100%{transform:translate(var(--x),-330px);opacity:0}}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}}
@keyframes bubbleUp{0%,100%{transform:translateY(3px);opacity:.35}50%{transform:translateY(-4px);opacity:1}}
@keyframes v1Sheen{from{transform:translateX(0)}to{transform:translateX(620px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes v2Glow{from{opacity:.45}to{opacity:1}}
@keyframes v3Tilt{0%,8%{transform:rotate(0)}20%,33%{transform:rotate(var(--a1))}45%,58%{transform:rotate(var(--a2))}70%,92%{transform:rotate(var(--a3))}100%{transform:rotate(0)}}
@keyframes v4Rise{0%{transform:translateY(0);opacity:0}15%{opacity:.95}85%{opacity:.8}100%{transform:translateY(var(--h,-40px));opacity:0}}
.v4-b{opacity:0}
.v3-b{transform-box:fill-box;transform-origin:var(--o,0 50%)}
@media (prefers-reduced-motion:no-preference){
  .sheet,.cookie{animation:up .28s cubic-bezier(.2,.8,.2,1)}
  .drawer-panel{animation:slide .25s cubic-bezier(.2,.8,.2,1)}
  .msg{animation:pop .25s ease-out}
  .toast{animation:toastin .3s cubic-bezier(.2,.8,.2,1)}
  .btn:active{transform:scale(.98)}
  html:not(.calm) .hero .h-sun{animation:hSun 3s cubic-bezier(.2,.65,.25,1) both}
  html:not(.calm) .hero .h-glow{animation:hFadeIn 3s ease-out both}
  html:not(.calm) .hero .h-rays{transform-origin:1180px 652px;animation:hRays 3s .15s cubic-bezier(.2,.65,.25,1) both}
  html:not(.calm) .hero .h-arcs path{stroke-dasharray:1;animation:hDraw 1.6s .7s ease-out both}
  html:not(.calm) .hero .h-route{stroke-dasharray:1;animation:hDraw 2.4s 1.3s cubic-bezier(.55,.1,.3,1) both}
  html:not(.calm) .hero .h-pin,html:not(.calm) .hero .h-lbl text{animation:hPop .6s cubic-bezier(.3,1.4,.5,1) both}
  html:not(.calm) .hero .h-pin1,html:not(.calm) .hero .h-lbl .h-l1{animation-delay:1.25s}
  html:not(.calm) .hero .h-pin2,html:not(.calm) .hero .h-lbl .h-l2{animation-delay:2.15s}
  html:not(.calm) .hero .h-pin3,html:not(.calm) .hero .h-lbl .h-l3{animation-delay:3.3s}
  html:not(.calm) .hero .h-beam{transform-origin:1040px 512px;animation:hBeamIn 1.2s 2.4s both,hBeam 11s 3.6s ease-in-out infinite}
  html:not(.calm) .hero .h-star{animation:hTw 5s var(--d) ease-in-out infinite}
  html:not(.calm) .hero .h-bub{animation:hBub 15s var(--d) linear infinite both}
  html.gated .hero *{animation-play-state:paused!important}
  .hero.off *{animation-play-state:paused!important}
  html.js:not(.calm) .demo:not(.play) .demo-tl li{opacity:0}
  html.js:not(.calm) .demo:not(.play) .demo-tl::before{transform:scaleY(0)}
  html:not(.calm) .demo.play .demo-tl::before{animation:growY 1.9s .1s cubic-bezier(.4,.1,.2,1) both}
  html:not(.calm) .demo.play .demo-tl li{animation:rowIn .5s calc(.25s + var(--i) * .32s) cubic-bezier(.2,.7,.3,1) both}
  html:not(.calm) .plan-out .tl li{animation:rowIn .35s calc(var(--i,0) * 45ms) cubic-bezier(.2,.7,.3,1) both}
  html:not(.calm) .typing i{animation:bubbleUp 1.1s ease-in-out infinite}
  html:not(.calm) .typing i:nth-child(3){animation-delay:.15s}
  html:not(.calm) .typing i:nth-child(4){animation-delay:.3s}
  html:not(.calm) .vig.in .v1-sheen{animation:v1Sheen 7s ease-in-out infinite}
  html:not(.calm) .vig.in .v1-rays{transform-origin:306px 64px;animation:spin 60s linear infinite}
  html:not(.calm) .vig.in .v2-glow{animation:v2Glow 3.4s var(--d) ease-in-out infinite alternate}
  html:not(.calm) .vig.in .v3-b{animation:v3Tilt 9s var(--d,0s) ease-in-out infinite}
  html:not(.calm) .vig.in .v4-b{animation:v4Rise 2.8s var(--d) linear infinite}
}
@media (prefers-reduced-motion:reduce){[data-act="calm"]{display:none}}

/* ---------- light mode: the button is a sun on the horizon; it rises when light mode is on ---------- */
.theme-btn .tg{width:24px;height:24px}
.theme-btn .tg-sun{color:var(--gold-ink);transition:transform .9s cubic-bezier(.3,.1,.2,1)}
.theme-btn .tg-h{opacity:0;transition:opacity .25s}
.theme-btn .tg-st{transition:opacity .5s .3s}
.theme-btn[aria-pressed="true"] .tg-st{opacity:0;transition:opacity .3s}
.theme-btn[aria-pressed="true"] .tg-sun{transform:translateY(-5.4px)}
.theme-btn[aria-pressed="true"] .tg-h{opacity:1;transition:opacity .4s .55s}

/* hero: night in dark mode, morning in light mode. Switching plays a sunrise or a sunset;
   the transitions exist only while html.sky is set, so hover and focus stay instant. */
:root[data-theme="light"] .hero-svg .h-sky-day{opacity:1}
.hero-svg .h-sky-day,.hero-svg .h-day{opacity:0}
:root[data-theme="light"] .hero-svg .h-day{opacity:var(--o,.6)}
:root[data-theme="light"] .hero-svg .h-sunpos{transform:translateY(-168px)}
:root[data-theme="light"] .hero-svg .h-stars,:root[data-theme="light"] .hero-svg .h-night{opacity:0}
:root[data-theme="light"] .hero-svg .h-lbl{fill:#16130F;stroke:#F4F1EA}
:root[data-theme="light"] .hero-svg .h-route{stroke:#9A6F28}
:root[data-theme="light"] .hero-svg .h-bubs{stroke:#B08A45}
:root[data-theme="light"] .hero-svg .h-city{fill:#8E8389}
:root[data-theme="light"] .hero-svg .h-cath{fill:#7E7480}
:root[data-theme="light"] .hero-svg .h-vil{fill:#9A8E7C}
:root[data-theme="light"] .hero-svg .h-trees{fill:#9C9A78}
:root[data-theme="light"] .hero-svg .h-lh{fill:#34383A}
:root[data-theme="light"] .hero-svg .h-raysc,:root[data-theme="light"] .hero-svg .h-arcs{stroke:#C8A45D}
html.sky .hero{transition:background-color 2.2s var(--ease-sky)}
/* text flips when the background crosses mid-grey, so it never fades into it */
html.sky .hero-copy,html.sky .hero-copy *,html.sky .hero-copy ::placeholder{transition:color 0s .82s}
html.sky[data-theme="light"] .hero-copy,html.sky[data-theme="light"] .hero-copy *,html.sky[data-theme="light"] .hero-copy ::placeholder{transition:color 0s .72s}
@media (min-width:960px){html.sky .hero-copy,html.sky .hero-copy *,html.sky .hero-copy ::placeholder{transition:color 0s .75s}html.sky[data-theme="light"] .hero-copy,html.sky[data-theme="light"] .hero-copy *,html.sky[data-theme="light"] .hero-copy ::placeholder{transition:color 0s .79s}}
html.sky .hero .ask,html.sky .hero .ask::before,html.sky .hero .chip::before{transition:background-color 2.2s var(--ease-sky)}
html.sky .hero::before,html.sky .hero::after,html.sky .hero-svg .h-sky-day,html.sky .hero-svg .h-day{transition:opacity 2.2s var(--ease-sky)}
html.sky .hero-svg .h-sunpos{transition:transform 2.6s cubic-bezier(.45,0,.2,1)}
html.sky .hero-svg .h-lbl,html.sky .hero-svg .h-route,html.sky .hero-svg .h-bubs,html.sky .hero-svg .h-city,html.sky .hero-svg .h-cath,html.sky .hero-svg .h-vil,html.sky .hero-svg .h-trees,html.sky .hero-svg .h-lh,html.sky .hero-svg .h-raysc,html.sky .hero-svg .h-arcs{transition:fill 2.2s var(--ease-sky),stroke 2.2s var(--ease-sky)}
html.sky .hero-svg .h-stars{transition:opacity 1.6s ease 1s}
html.sky .hero-svg .h-night{transition:opacity 1.2s ease 1.2s}
html.sky[data-theme="light"] .hero-svg .h-stars{transition:opacity .8s ease}
html.sky[data-theme="light"] .hero-svg .h-night{transition:opacity .9s ease .3s}

/* the rest of the page: with View Transitions, light rises from the bottom (sunrise) or night falls from the top (sunset) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-sky="rise"]::view-transition-new(root){
  -webkit-mask:linear-gradient(to top,#000 0 45.05%,transparent 54.95% 100%) 0 0/100% 222% no-repeat;
  mask:linear-gradient(to top,#000 0 45.05%,transparent 54.95% 100%) 0 0/100% 222% no-repeat;
  animation:vtRise 1.6s cubic-bezier(.45,.05,.25,1) both,vtDawn 2s ease-out both}
html[data-sky="rise"]::view-transition-old(root){animation:vtGlow 1.6s ease-in both}
html[data-sky="set"]::view-transition-old(root){z-index:2;
  -webkit-mask:linear-gradient(to bottom,transparent 0 45.05%,#000 54.95% 100%) 0 100%/100% 222% no-repeat;
  mask:linear-gradient(to bottom,transparent 0 45.05%,#000 54.95% 100%) 0 100%/100% 222% no-repeat;
  animation:vtSet 1.7s cubic-bezier(.45,.05,.25,1) both,vtDusk 1.7s ease-in both}
html[data-sky="set"]::view-transition-new(root){animation:vtNight 1.7s ease-out both}
@keyframes vtRise{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:0 100%;mask-position:0 100%}}
@keyframes vtSet{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes vtDawn{from{filter:sepia(.5) saturate(1.6) hue-rotate(-12deg) brightness(1.04)}to{filter:none}}
@keyframes vtGlow{to{filter:sepia(.3) saturate(1.3) brightness(1.18)}}
@keyframes vtDusk{to{filter:sepia(.55) saturate(1.8) hue-rotate(-18deg) brightness(.8)}}
@keyframes vtNight{from{filter:brightness(.75) saturate(.85)}to{filter:none}}
/* browsers without View Transitions: colours fade instead */
html.theming body *:not(svg *):not(.hero):not(.hero *),html.theming body *:not(svg *):not(.hero):not(.hero *)::before,html.theming body *:not(svg *):not(.hero):not(.hero *)::after{transition:background-color 1s ease,color 1s ease,border-color 1s ease,box-shadow 1s ease!important}
/* reduced motion or paused animations: the theme changes at once */
@media (prefers-reduced-motion:reduce){.theme-btn *{transition:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
html.calm .theme-btn *{transition:none!important}

/* ---------- print ---------- */
@media print{
  :root,:root[data-theme]{--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F2EEE6;--text:#16130F;--muted:#4A443C;--line:rgba(22,19,15,.18);--line-strong:rgba(22,19,15,.3);--gold-ink:#6B4E18;color-scheme:light}
  body{background:#fff;color:#16130F}
  .head,.tabbar,.foot,.cta-box,.composer,.gate,.cookie,.toasts,.plan-jump,.anim-btn,.motion-sw,.hero-art,.skip,.day-tabs,.plan-form,[data-act],.acts,.ask,.chips{display:none!important}
  .day-panel[hidden]{display:block!important}
  .day-panel{break-inside:avoid;margin-top:12px}
  @page{margin:14mm 12mm}
  main,main>.wrap,.plan-out{padding:0}
  .plan-out{clip-path:none!important;background:none}
  .plan-out::before{display:none!important}
  .hero{background:none;color:#16130F}
  .hero .wrap{padding:0}
  .hero-lede,.hero-note{color:#5E574D}
  html.gated body::after{display:none}
}