/* Nekoli — The Weekly Menu page (nekoliglamping.com/menu).
   Ported from the Claude Design page "Nekoli Menu Page". The nav, footer and tokens come from
   styles.css, which this page loads first; this file carries only what the menu adds. */
/* ── HERO ────────────────────────────────────────────────────── */
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.mhero{position:relative;min-height:72svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--green-darker)}
.mhero__media{position:absolute;inset:0}
.mhero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;animation:kenburns 26s ease-in-out infinite alternate}
.mhero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,42,30,.55) 0%,rgba(14,42,30,.25) 30%,rgba(14,42,30,.7) 60%,rgba(14,42,30,.92) 100%)}
.mhero__inner{position:relative;z-index:1;padding:clamp(120px,18vh,180px) 0 clamp(56px,8vh,96px)}
.mhero .eyebrow{color:var(--peach);text-shadow:0 1px 14px rgba(14,42,30,.7)}
.mhero h1{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:-0.015em;font-size:clamp(52px,7.5vw,112px);line-height:.95;margin:18px 0 0}
.mhero h1 .script{font-size:.62em;display:block;margin-top:.1em;color:var(--peach)}
.mhero p{max-width:560px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;margin:26px 0 0;color:rgba(255,255,255,.88)}
.mhero__meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.mhero__meta span{white-space:nowrap}

/* ── CONTROL BAR ─────────────────────────────────────────────── */
.mbar{position:sticky;top:0;z-index:50;background:rgba(250,246,236,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.mbar__row{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;padding:14px 0;flex-wrap:wrap}
.mbar__left,.mbar__right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.seg{display:inline-flex;position:relative;background:rgba(31,90,63,.08);border-radius:999px;padding:4px;gap:2px}
.seg button{appearance:none;border:0;background:transparent;font:inherit;font-weight:600;font-size:14px;color:var(--green-deep);padding:9px 18px;border-radius:999px;cursor:pointer;position:relative;z-index:1;transition:color .3s;white-space:nowrap;min-height:38px}
.seg button[aria-pressed="true"]{color:#fff}
.seg__pill{position:absolute;top:4px;bottom:4px;left:4px;width:0;background:var(--green);border-radius:999px;transition:left .38s cubic-bezier(.2,.7,.2,1),width .38s cubic-bezier(.2,.7,.2,1)}
.seg--cur button{font-size:13px;letter-spacing:.08em;padding:9px 14px}
.days{display:flex;gap:6px;flex-wrap:wrap;transition:opacity .3s,transform .3s}
.days[hidden]{display:none}
.days button{appearance:none;border:1px solid var(--rule);background:transparent;font:inherit;font-weight:600;font-size:13px;color:var(--green-deep);padding:9px 13px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,border-color .25s;min-height:38px}
.days button:hover{border-color:var(--green)}
.days button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.days button .today{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-left:7px;vertical-align:middle}
.days button[aria-pressed="true"] .today{background:#fff}
.dl{position:relative}
.dl__btn{display:inline-flex;align-items:center;gap:10px;font-family:'DM Sans';font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--green);color:#fff;border:0;padding:12px 20px;border-radius:999px;cursor:pointer;transition:background .3s,transform .3s;min-height:44px;white-space:nowrap}
.dl__btn:hover{background:var(--green-deep);transform:translateY(-2px)}
.dl__btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl__menu{position:absolute;right:0;top:calc(100% + 10px);min-width:260px;background:var(--cream-paper);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);padding:8px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .25s;z-index:5}
.dl[data-open="true"] .dl__menu{opacity:1;transform:none;pointer-events:auto}
.dl__menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;padding:12px 14px;border-radius:10px;color:var(--green-deep);font-weight:600;font-size:15px;transition:background .2s}
.dl__menu a:hover{background:rgba(31,90,63,.08)}
.dl__menu a small{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.dl__menu a.is-current small{color:var(--orange)}
.dl__menu hr{border:0;border-top:1px solid var(--rule);margin:6px 8px}

/* ── BODY ────────────────────────────────────────────────────── */
.mbody{padding:clamp(56px,8vh,110px) 0 clamp(72px,10vh,140px)}
.mgrid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start}
.mindex{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px}
.mindex a{text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:14px;padding:8px 0 8px 16px;border-left:2px solid var(--rule);transition:color .25s,border-color .25s}
.mindex a:hover,.mindex a.on{color:var(--green);border-color:var(--orange)}
.mindex__plans{margin-top:28px;padding:18px 0 0;border-top:1px solid var(--rule);font-size:13px;line-height:1.6;color:var(--ink-soft)}
.mindex__plans strong{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
@media(max-width:940px){.mgrid{grid-template-columns:minmax(0,1fr)}.mindex{display:none}}

.msec{padding:0 0 clamp(56px,7vh,96px);margin-bottom:clamp(40px,6vh,80px);border-bottom:1px solid var(--rule);scroll-margin-top:110px}
.msec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.msec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.msec__time{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--orange);letter-spacing:.06em}
.msec h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(40px,4.4vw,60px);line-height:1;margin:6px 0 0;color:var(--green-deep);letter-spacing:-0.015em}
.msec h2 em{font-weight:400;font-style:italic;color:var(--ink-soft);font-size:.5em;margin-left:.3em;letter-spacing:0}
.msec__incl{margin-top:12px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--ink-soft)}
.msec__incl .price{font-style:normal;color:var(--green-deep);font-weight:600;margin-left:.5em}
.msec__price{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600;color:var(--green-deep);font-variant-numeric:tabular-nums;white-space:nowrap}

.grp{margin-top:36px;display:flex;align-items:center;gap:16px;font-weight:700;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--green)}
.grp::after{content:"";flex:1;height:1px;background:var(--orange);opacity:.45}
.dish{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 28px;padding:20px 0;border-bottom:1px solid var(--rule)}
.dish:last-child{border-bottom:0}
.dish__name{grid-column:1;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(23px,2vw,27px);color:var(--green-deep);line-height:1.15}
.dish__desc{grid-column:1;font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:62ch;text-wrap:pretty}
.dish__desc .opt{color:var(--orange);font-weight:700;padding:0 .4em}
.dish__price{grid-column:2;grid-row:1 / span 2;align-self:start;font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:var(--green-deep);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px}
.fav{display:inline-block;vertical-align:middle;margin-left:10px;background:var(--orange);color:#fff;font-family:'DM Sans';font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:5px;transform:translateY(-3px)}
.veg{color:var(--green);font-weight:700;font-size:.62em;margin-left:.35em;vertical-align:middle;font-family:'DM Sans'}
.grp__foot{font-size:14.5px;font-style:italic;color:var(--ink-soft);padding:14px 0 0}
.panel{margin-top:40px;background:var(--cream-paper);border-top:2px solid var(--green);padding:26px clamp(20px,3vw,36px) 10px;border-radius:0 0 18px 18px}
.panel__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--green)}
.panel__head .script{font-size:26px;letter-spacing:0;text-transform:none}
.every{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding-top:22px;border-top:2px solid var(--green)}
.every strong{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--green)}
.every span{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.every span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}

/* tea */
.teagrid{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.teagrid div{background:var(--cream-paper);padding:18px 18px 20px;transition:background .3s}
.teagrid div.on{background:var(--green);color:#fff}
.teagrid b{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.teagrid div.on b{color:var(--peach)}
.teagrid span{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500;line-height:1.2}
.teanote{margin-top:22px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--ink-soft)}

/* dinner */
.dinnergrid{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.dcard{background:var(--cream-paper);border:1px solid var(--rule);border-radius:20px;padding:28px 26px 26px;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.dcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.dcard.on{background:var(--green-deep);color:#fff;border-color:transparent}
.dcard__day{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:36px;line-height:1;color:var(--green-deep)}
.dcard.on .dcard__day{color:#fff}
.dcard__theme{font-family:'Caveat',cursive;font-weight:600;font-size:26px;color:var(--orange);margin-top:6px;line-height:1}
.dcard.on .dcard__theme{color:var(--peach)}
.dcard__price{margin-top:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dcard.on .dcard__price{color:rgba(255,255,255,.7)}
.dcard__time{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--orange);margin-top:6px}
.course{padding:16px 0 0;margin-top:16px;border-top:1px solid var(--rule)}
.dcard.on .course{border-color:rgba(255,255,255,.14)}
.course__label{font-size:10.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}
.dcard.on .course__label{color:var(--peach)}
.course__dish{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:21px;line-height:1.15;margin-top:5px;color:var(--green-deep)}
.dcard.on .course__dish{color:#fff}
.course__dish .veg{color:var(--green)}
.dcard.on .course__dish .veg{color:var(--peach)}
.course__tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:.8em;color:var(--orange);margin-left:.4em}
.course__desc{font-size:14px;line-height:1.55;color:var(--ink-soft);margin-top:5px;text-wrap:pretty}
.dcard.on .course__desc{color:rgba(255,255,255,.78)}
.course__veg{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin-top:7px}
.course__veg b{color:var(--green);font-weight:700}
.dcard.on .course__veg{color:rgba(255,255,255,.72)}
.dcard.on .course__veg b{color:var(--peach)}
.dcard.on .course__veg .veg,.tcourses .course__veg .veg,.dcard.on .course__dish .veg{color:var(--peach)}
.course__add{margin-top:7px;display:flex;align-items:baseline;gap:8px;font-size:13.5px;color:var(--ink-soft)}
.course__add b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--orange);padding:3px 7px;border-radius:5px}
.dcard.on .course__add{color:rgba(255,255,255,.72)}

/* drinks + closing */
.drinklines{margin-top:28px;display:grid;gap:16px;max-width:70ch}
.drinklines p{margin:0;font-size:16px;line-height:1.65;color:var(--ink)}
.drinklines p b{color:var(--green)}
.linkbtn{display:inline-flex;align-items:center;gap:10px;margin-top:26px;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);padding:12px 0;border-bottom:2px solid var(--orange);transition:color .3s}
.linkbtn:hover{color:var(--orange)}
.closing{margin-top:clamp(56px,8vh,96px);text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(21px,2vw,26px);line-height:1.5;color:var(--green-deep);max-width:56ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
.closing img{width:54px;margin:0 auto 22px;opacity:.85}

/* today view — one of the two is shown, chosen on <body data-view>. The platform's React port
   renders only one and never needed this; a static page renders both and hides one. */
.today{display:none}
body[data-view="today"] .today{display:block}
body[data-view="today"] .full{display:none}
/* The section index carries .full too — it belongs to the full view — but hiding it must not
   empty its grid column and drop the content into 200px. The grid collapses to one column instead. */
body[data-view="today"] .mgrid{grid-template-columns:minmax(0,1fr)}

.today__head{text-align:center;max-width:720px;margin:0 auto clamp(40px,6vh,72px)}
.today__head .eyebrow{color:var(--orange)}
.today__head h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(48px,6vw,84px);line-height:.98;margin:14px 0 0;color:var(--green-deep);letter-spacing:-0.015em}
.today__head .script{font-size:clamp(30px,3.4vw,46px);display:block;margin-top:10px}
.today__head p{font-size:17px;line-height:1.6;color:var(--ink-soft);margin:20px 0 0}
.today__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px;align-items:start}
.tcard{background:var(--cream-paper);border:1px solid var(--rule);border-radius:22px;padding:30px clamp(22px,2.6vw,36px) 28px}
.tcard--dinner{background:var(--green-deep);color:#fff;border-color:transparent;grid-column:1 / -1}
.tcard__time{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:var(--orange);letter-spacing:.06em}
.tcard--dinner .tcard__time{color:var(--peach)}
.tcard h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(34px,3vw,44px);line-height:1;margin:6px 0 0;color:var(--green-deep)}
.tcard--dinner h3{color:#fff}
.tcard h3 .script{font-size:.7em;margin-left:.3em}
.tcard__incl{margin-top:10px;font-size:14px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.tcard--dinner .tcard__incl{color:rgba(255,255,255,.7)}
.tcard__incl .price{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--green-deep);font-variant-numeric:tabular-nums}
.tcard--dinner .tcard__incl .price{color:#fff}
.tcard .dish{padding:14px 0}
.tcard .dish__name{font-size:21px}
.tcard .dish__desc{font-size:14.5px}
.tcard .dish__price{font-size:21px}
.tcard .grp{margin-top:22px;font-size:11px}
.tcard .grp__foot{font-size:13.5px}
.tcard .every{margin-top:22px;padding-top:16px;gap:8px 20px}
.tcard .every span{font-size:18px}
.tcard .panel{margin-top:24px;padding:20px 22px 6px;border-radius:0 0 14px 14px;background:rgba(31,90,63,.05)}
.tcourses{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 32px}
.tcourses .course{border-top:1px solid rgba(255,255,255,.14)}
.tcourses .course__label{color:var(--peach)}
.tcourses .course__dish{color:#fff;font-size:24px}
.tcourses .course__dish .veg{color:var(--peach)}
.tcourses .course__desc{color:rgba(255,255,255,.78);font-size:15px}
.tcourses .course__veg{color:rgba(255,255,255,.72)}
.tcourses .course__veg b{color:var(--peach)}
.tcourses .course__add{color:rgba(255,255,255,.72)}
.tcourses .course__foot{grid-column:1 / -1;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:rgba(255,255,255,.8)}
.tea-today{margin-top:22px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tea-today .big{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,2.6vw,38px);font-weight:500;color:var(--green-deep);line-height:1.05}
.tea-today .script{font-size:24px}

.fade{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── PHONE ───────────────────────────────────────────────────── */
@media(max-width:640px){
  .mbar__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:8px 0;align-items:center}
  .mbar__left{display:contents}
  .mbar__right{grid-column:2;grid-row:1;gap:8px;flex-wrap:nowrap}
  #segView{grid-column:1;grid-row:1}
  .days{grid-column:1 / -1;grid-row:2;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -5vw;padding:0 5vw 2px;gap:5px}
  .days::-webkit-scrollbar{display:none}
  .days button{padding:6px 11px;font-size:12px;min-height:32px;flex:none}
  .seg{padding:3px}
  .seg__pill{top:3px;bottom:3px}
  .seg button{padding:6px 10px;font-size:12px;min-height:30px}
  .seg--cur button{padding:6px 9px;letter-spacing:.04em}
  .dl__btn{padding:0;width:36px;height:36px;min-height:36px;justify-content:center}
  .dl__btn span{display:none}
  .dl__menu{right:0;left:auto}
  .mhero{min-height:auto}
  .mhero__inner{padding:96px 0 34px}
  .mhero h1{font-size:44px}
  .mhero h1 .script{font-size:.6em}
  .mhero p{font-size:15px;margin-top:16px}
  .mhero__meta{margin-top:20px;gap:6px 18px;font-size:11px}
  .mbody{padding-top:32px}
  .today__head{margin-bottom:28px}
  .today__head h2{font-size:40px}
  .today__head .script{font-size:26px}
  .tcard{padding:22px 18px 20px;border-radius:16px}
  .dish{grid-template-columns:minmax(0,1fr)}
  .dish__price{grid-row:auto;grid-column:1;padding-top:0;font-size:20px}
}
@media(max-width:400px){.seg button{padding:6px 8px;font-size:11.5px}.seg--cur button{padding:6px 7px}}