/* site-544: the c1 "Ce soir" look extended to every page. style.css is c1's file unchanged; this file only adds
   the multi-page pieces (phone menu, page heads, booking panel, forms, the tastings glass, footer). Same tokens. */

/* header: phone menu button + panel */
.menu-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid rgba(212,176,98,.45);border-radius:999px;background:transparent;color:var(--cream);font:600 .85rem var(--sans);cursor:pointer}
.menu-btn svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round}
.menu-btn[aria-expanded="true"]{background:rgba(212,176,98,.14);color:var(--gold)}
.top .top-book{margin-left:auto}
.mnav{position:fixed;left:0;right:0;top:60px;z-index:45;max-height:calc(100svh - 60px);overflow-y:auto;background:var(--night-2);border-bottom:1px solid rgba(212,176,98,.3);box-shadow:0 20px 40px rgba(0,0,0,.5);padding:8px var(--gut) 24px}
.mnav[hidden]{display:none}
.mnav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.mnav li a{display:block;padding:13px 0;border-bottom:1px solid var(--line);color:var(--cream);text-decoration:none;font-family:var(--serif);font-size:1.15rem}
.mnav li a[aria-current]{color:var(--gold)}
.mnav .mnav-k{grid-column:1/-1;font:600 .68rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding:18px 0 2px}
.topnav a[aria-current]{color:var(--gold);opacity:1}
@media (min-width:1000px){.menu-btn{display:none}.topnav{gap:18px}}

/* page head (every page but home): short on phones so the content is reachable fast */
.phead{position:relative;min-height:38svh;display:grid;align-items:end;overflow:hidden;border-bottom:1px solid var(--line)}
.phead.plain{min-height:0}
.phead .hero-ph img{filter:brightness(.5) saturate(1.05)}
.phead-in{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:56px var(--gut) 26px}
.phead h1{font-size:clamp(2.3rem,9.5vw,4.6rem)}
.phead .lede{margin:0}
.crumbs{font-size:.8rem;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--muted)}
@media (min-width:720px){.phead{min-height:44vh}.phead.plain{min-height:0}.phead-in{padding:80px var(--gut) 40px}}

/* generic sections */
.sec{padding:52px 0 36px;border-bottom:1px solid var(--line)}
.sec>.copy.wide+.copy.wide{margin-top:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.lead-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.cards{display:grid;gap:12px;max-width:var(--max);margin:22px auto 0;padding:0 var(--gut)}
.cardlink{display:grid;gap:0;background:var(--night-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--cream)}
.cardlink img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cardlink div{padding:16px 18px 18px}
.cardlink h3{margin:0 0 .25em}
.cardlink p{margin:0;color:#e3d6cd;font-size:.93rem}
.cardlink:hover{border-color:var(--gold);color:var(--cream)}
.cardlink:hover h3{color:var(--gold)}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:repeat(3,1fr)}}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:var(--max);margin:22px auto 0;padding:0 var(--gut)}
.facts div{background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.facts b{display:block;font:400 1.9rem/1 var(--serif);color:var(--gold)}
.facts span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (min-width:720px){.facts{grid-template-columns:repeat(4,1fr)}}
.data-msg{max-width:var(--max);margin:16px auto;padding:14px var(--gut);color:var(--cream)}
.data-msg p{margin:0;padding:14px 16px;border:1px dashed rgba(212,176,98,.5);border-radius:12px;background:rgba(91,22,38,.25)}

/* forms (all UI only: they post nowhere) */
.form{max-width:760px;margin:26px auto 0;margin-inline:max(var(--gut),calc((100% - 760px) / 2));padding:20px;background:var(--wine);border-radius:18px}
.form h2,.form h3{margin-top:0}
.form p{color:#f1e2d8;font-size:.92rem}
.form label,.fld{display:grid;gap:4px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#f1e2d8;margin-bottom:10px}
.form input,.form select,.form textarea{font:400 1rem var(--sans);color:var(--night);background:var(--cream);border:0;border-radius:10px;padding:12px;min-height:46px;width:100%}
.form textarea{min-height:96px}
.form input[type=checkbox],.form input[type=radio]{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--gold);flex:none}
.form .chk{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--cream);margin:0;padding:10px 0;border-bottom:1px solid rgba(251,243,232,.14)}
.form .chk span{flex:1}
.form .chk b{color:var(--gold);font-weight:600}
.form .btn{margin-top:6px}
.form-msg{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--night);border:1px solid rgba(212,176,98,.5);color:var(--cream);font-size:.93rem}
.form-msg[hidden]{display:none}
.form-msg strong{color:var(--gold)}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.legend{font:600 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:16px 0 4px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}

/* rules box (events) */
.rules{max-width:var(--max);margin:22px auto 0;padding:0 var(--gut);display:grid;gap:12px}
.rule{border:1px solid rgba(212,176,98,.45);border-radius:16px;padding:18px;background:rgba(91,22,38,.35)}
.rule h3{margin:0 0 .3em;color:var(--gold)}
.rule p{margin:.2em 0;color:#e3d6cd}
.rule b{color:var(--cream)}
@media (min-width:720px){.rules{grid-template-columns:repeat(3,1fr)}}

/* faq */
.faq{max-width:860px;margin:18px auto 0;padding:0 var(--gut)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;font-family:var(--serif);font-size:1.15rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:300 1.6rem var(--sans);color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 16px;color:#e3d6cd}

/* tastings: list cards link to the detail page */
.t-name a{color:var(--cream);text-decoration:none}
.t-name a:hover{color:var(--gold)}
.t-name a::after{content:"";position:absolute;inset:0}
.t-card{position:relative}
.t-card .btn,.t-card .t-sold{position:relative;z-index:1}

/* tastings top: the glass that fills as you scroll (from c5 "Le Verre", in wine red and gold) */
.tz{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-areas:"copy glass" "body body";column-gap:6px}
.tz-copy{grid-area:copy;padding:26px 0 18px var(--gut);min-width:0}
.tz-copy h1{font-size:clamp(2.1rem,9vw,4.4rem);margin-bottom:.3em}
.tz-copy h1 span{font-size:.42em}
.tz-copy .lede{font-size:1rem;margin:0 0 14px}
.tz-glass{grid-area:glass;padding:22px var(--gut) 0 0;display:flex;justify-content:center}
.tz-glass-in{text-align:center}
.tz-glass svg{width:76px;height:auto;overflow:visible;display:block;margin:0 auto}
.tz-cap{margin:6px 0 0;font:600 .62rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tz-body{grid-area:body;min-width:0}
.g-outline{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.g-shine{fill:none;stroke:rgba(251,243,232,.55);stroke-width:2.2;stroke-linecap:round}
.g-wine{fill:url(#gWine)}
.g-surface{fill:#a8334c;opacity:.9}
.g-level{transform:translateY(12px);will-change:transform}
.tz-hero-bg{position:absolute;top:0;left:calc(50% - 50vw);right:calc(50% - 50vw);height:min(560px,70svh);pointer-events:none;background:radial-gradient(70% 90% at 75% 0%,rgba(91,22,38,.6),transparent 75%)}
.tz>*:not(.tz-hero-bg){position:relative}
.jump{display:inline-flex;align-items:center;gap:8px}
.jump svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#list{scroll-margin-top:72px}
@media (min-width:1000px){
  .tz{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"copy glass" "body glass";column-gap:24px}
  .tz-copy{padding:70px 0 26px var(--gut)}
  .tz-glass{padding:0 var(--gut) 0 0;align-items:flex-start}
  .tz-glass-in{position:sticky;top:150px;padding-top:70px}
  .tz-glass svg{width:150px}
  .tz-cap{font-size:.7rem}
  .tz .t-head,.tz .t-month,.tz .tastings,.tz .t-foot,.tz .facts{padding-right:0}
}
/* the fill: CSS scroll timeline where supported (transform only), JS rAF fallback otherwise, static and full with reduced motion */
@keyframes gfill{from{transform:translateY(98px)}to{transform:translateY(8px)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: scroll()){
    html.g-css .g-level{animation:gfill linear both;animation-timeline:scroll(root block);animation-range:0 60svh}
    @media (min-width:1000px){html.g-css .g-level{animation-range:0 100%}}
  }
}
/* B 11/4 (Alex: keep the glass on the side, just let them see the pour): under 1000 px the glass stays in its side column, now pinned
   just below the 60 px header and 30 px hour strip while the intro scrolls past, and it fills over exactly that stretch (js/site.js
   sets --gfill from the column's own position). Same layout, no extra scrolling. */
@media (max-width:999.98px){
  .tz-glass-in{position:sticky;top:98px;padding-top:28px;align-self:flex-start}
}

/* tasting detail + booking panel */
.td{max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;gap:26px}
.td-main .facts{padding:0;margin:18px 0 0}
.td-ph{margin:0;border-radius:16px;overflow:hidden}
.td-ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bk{background:var(--wine);border-radius:18px;padding:20px;scroll-margin-top:80px}
.bk h2{font-size:1.8rem;margin:0 0 .2em}
.bk .fld{margin-bottom:10px}
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--gold);font:500 1.4rem var(--sans);cursor:pointer}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output{font:500 1.6rem var(--serif);min-width:2ch;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{margin:0;text-transform:none;letter-spacing:0;font-size:.95rem}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(251,243,232,.35);color:var(--cream);cursor:pointer}
.chips input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--night);font-weight:600}
.chips input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.sum{margin:16px 0 4px;border-top:1px solid rgba(251,243,232,.25)}
.sum div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.93rem;color:#f1e2d8;font-variant-numeric:tabular-nums}
.sum .tot{border-top:1px solid rgba(251,243,232,.25);margin-top:4px;padding-top:10px;font:600 1.05rem var(--sans);color:var(--cream)}
.policy{font-size:.82rem!important;color:#e9d6cb!important}
.bk .btn{width:100%}
.member-row{margin-top:12px;font-size:.9rem;color:#f1e2d8}
.member-row a{color:var(--gold)}
@media (min-width:1000px){.td{grid-template-columns:1.2fr 1fr;align-items:start}.bk{position:sticky;top:84px}}

/* club page */
.club-forms{display:grid;gap:16px;max-width:var(--max);margin:26px auto 0;padding:0 var(--gut)}
.club-forms .form{margin:0;max-width:none}
@media (min-width:900px){.club-forms{grid-template-columns:1fr 1fr;align-items:start}}
.how{counter-reset:how;list-style:none;margin:20px auto 0;padding:0 var(--gut);max-width:var(--max);display:grid;gap:12px}
.how li{counter-increment:how;background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:16px 16px 16px 56px;position:relative;color:#e3d6cd;font-size:.95rem}
.how li::before{content:counter(how);position:absolute;left:16px;top:14px;font:500 1.6rem/1 var(--serif);color:var(--gold)}
.how b{color:var(--cream)}
@media (min-width:720px){.how{grid-template-columns:repeat(3,1fr)}}

/* menu page bits */
.menu-jump{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--max);margin:18px auto 0;padding:0 var(--gut)}
.menu-jump a{font-size:.85rem;text-decoration:none;color:var(--cream);border:1px solid var(--line);border-radius:999px;padding:8px 12px}
.menu-jump a:hover{border-color:var(--gold);color:var(--gold)}
.menu-col{scroll-margin-top:80px}

/* slot placeholder (content not verified yet) */
.slot{max-width:var(--max);margin:22px auto 0;margin-inline:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)));padding:18px;border:2px dashed rgba(212,176,98,.6);border-radius:14px;color:var(--muted);font-size:.92rem}
.slot b{color:var(--gold);display:block;font:600 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}

/* footer */
.sfoot{border-top:1px solid var(--line);padding:44px 0 28px;color:var(--muted);font-size:.9rem}
.sfoot-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;gap:28px}
.sfoot img{width:130px;margin-bottom:10px}
.sfoot h2{font:600 .72rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.sfoot p{margin:0 0 8px}
.sfoot a{color:var(--cream)}
.sfoot ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.sfoot ul a{text-decoration:none}
.sfoot ul a:hover{color:var(--gold)}
.sfoot .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sfoot .btn{min-height:44px;font-size:.88rem;padding:0 16px}
.sfoot .news-f{margin:10px 0 0;max-width:none;grid-template-columns:1fr}
.sfoot .fine{padding:0;margin:26px auto 0;text-align:center;max-width:var(--max)}
@media (min-width:720px){.sfoot-in{grid-template-columns:1.2fr 1fr 1fr}.sfoot .news-f{grid-template-columns:1fr auto}}
.news-f .form-msg{grid-column:1/-1;text-align:left}
.cardlink-t{display:block;text-decoration:none;color:var(--cream)}
.cardlink-t:hover{border-color:var(--gold);color:var(--cream)}
.fl h3{font-size:1.2rem;margin:0}
.btg h3{font-size:1.1rem;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:6px;margin:14px 0 4px}
html.g-js .g-level{transform:translateY(calc(98px - 90px * var(--gfill, 1)))}
body[data-page="home"] .sfoot-news>h2:first-child,body[data-page="home"] .sfoot-news>h2:first-child+p,body[data-page="home"] .sfoot-news>form{display:none}
body[data-page="home"] .sfoot-news>h2[style]{margin-top:0!important}
[hidden]{display:none!important}
.bk.form{margin:0;max-width:none;margin-inline:0}
@media (max-width:999px){.td-ph img{aspect-ratio:16/9}}
.form .legend,.form p.legend{font-size:.72rem;color:var(--gold)}


/* staging marker: only when js/config.js says mode "test" (backend.js adds html.aq-test and the corner Test pill). Never over the header. */
.aq-tag{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:150;font:600 11px/1.3 var(--sans);color:#1b0a10;max-width:min(320px,calc(100vw - 24px))}
@media (min-width:900px){.aq-tag{bottom:16px}}
.aq-tag-b{border:0;border-radius:999px;padding:4px 10px;background:#f2c94c;color:#1b0a10;font:700 11px/1.2 var(--sans);letter-spacing:.08em;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.aq-tag-p{margin-bottom:6px;padding:10px 12px;border-radius:12px;background:#f8e7ad;box-shadow:0 6px 20px rgba(0,0,0,.4);position:absolute;bottom:100%;left:0;width:min(300px,calc(100vw - 24px))}
.aq-tag-p p{margin:0 0 6px}
.aq-tag-p ul{margin:0;padding-left:16px}
.aq-tag-p a{color:#6b1e2e;text-decoration:underline}
.t-test{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#f2c94c;color:#1b0a10;font:700 .68rem/1.4 var(--sans);letter-spacing:.1em;vertical-align:middle}

/* req 544 audit (11/3): the mockup's hour pill on each page head, and its footer (sfoot styles above stay unused) */
.page-hour{margin:0 0 16px}
.tz-copy .page-hour{margin-bottom:14px}

/* Vos Sommeliers (B 11/4): heading, the three names, then who leads */
.somm .somm-h{font:500 1.15rem/1.3 var(--serif);color:var(--gold);margin:0 0 4px;letter-spacing:.01em}
.somm .somm-names{font-family:var(--serif);font-style:italic;color:var(--cream);margin:0 0 6px}
.somm .somm-led{margin:0;font-size:.9rem;color:#e3d6cd}

/* home accordion (B 11/4): closed by default, phone first, quick open that respects reduced motion */
.acc{max-width:var(--max);margin:26px auto 0;padding:0 var(--gut)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item:first-child{border-top:1px solid var(--line)}
.acc-h{margin:0;font-size:inherit}
.acc-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:12px 2px;cursor:pointer;
  font:500 1.25rem/1.25 var(--serif);color:var(--gold);-webkit-tap-highlight-color:transparent}
.acc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.acc-btn>span:first-child{flex:1}
.acc-btn small{font:400 .78rem/1.2 var(--sans);color:var(--muted)}
.acc-ic{width:14px;height:14px;position:relative;flex:none}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--gold);border-radius:1px}
.acc-ic::after{transform:rotate(90deg)}
.acc-btn[aria-expanded="true"] .acc-ic::after{transform:rotate(0)}
.acc-panel{padding:2px 0 18px}
.acc-panel .flights,.acc-panel .btg,.acc-panel .menu{padding:0;margin:0}
.acc-note{margin:0 0 10px;font-size:.86rem;color:var(--muted)}
.acc-note:empty{display:none}
.acc-more{max-width:var(--max);margin:18px auto 0;padding:0 var(--gut)}
@media (prefers-reduced-motion:no-preference){
  .acc-ic::after{transition:transform .2s ease}
  .acc-panel:not([hidden]){animation:accOpen .2s ease-out}
}
@keyframes accOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* omakase (B 11/4): Gilded Lily's photo (their ink #0c0b09 and gold) fading into our wine dark, a French and Japanese bridge.
   Phone: their counter on top, fading down into ours. Wide: theirs on the right, ours on the left under the text. */
.gl-phead{min-height:62svh;background:#0c0b09}
.gl-bridge img{object-position:center 38%;filter:brightness(.66) saturate(1.05)}
.gl-bridge::after{background:
  linear-gradient(180deg,rgba(12,11,9,.1) 0%,rgba(12,11,9,.45) 42%,rgba(27,10,16,.88) 74%,var(--night) 96%),
  linear-gradient(90deg,rgba(91,22,38,.5) 0%,rgba(12,11,9,0) 60%)}
.gl-phead .eyebrow{color:#e6c873}
@media (min-width:900px){
  .gl-phead{min-height:60vh}
  .gl-bridge img{position:absolute;right:0;top:0;width:62%;object-position:center 45%}
  .gl-bridge::after{background:
    linear-gradient(90deg,var(--night) 0%,var(--night) 36%,rgba(27,10,16,.82) 48%,rgba(12,11,9,.3) 72%,rgba(12,11,9,.45) 100%),
    linear-gradient(180deg,rgba(12,11,9,0) 62%,var(--night) 100%)}
}