/* Journal page — Sections 1–3 */
section{ overflow-x:clip; }
section img{ display:block; width:100%; max-width:350px; margin-inline:auto; }

/* ====== SECTION 1: Journal Hero ====== */
.journal-hero{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(1000px 360px at 10% -10%, rgba(255,106,40,.10), transparent 60%),
    radial-gradient(900px 320px at 110% -20%, rgba(240,58,23,.08), transparent 60%),
    var(--bg);
}
.jh-drizzle{
  position:absolute; inset:-8% -8% auto -8%; height:56%;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 9px);
  animation: jhRain 9s linear infinite; mix-blend-mode:screen; filter:blur(.6px);
}
@keyframes jhRain{ 0%{ transform:translateY(0) } 100%{ transform:translateY(-40px) } }

.jh-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center }
.jh-title{ font-family:"Oswald",sans-serif; margin:.2rem 0 .4rem; font-size:clamp(1.6rem,2.4vw,2.3rem) }
.jh-lead{ color:var(--muted); margin:0 0 12px }
.jh-points{ margin:8px 0 0; padding-left:18px }
.jh-points li{ list-style:"🔥  "; padding-inline-start:6px }
.jh-mosaic{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.jh-mosaic figure{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.25) }
.jh-mosaic figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }
.tilt{ transform:perspective(900px) rotateX(0) rotateY(0); transition:transform .25s ease }
.tilt:hover{ transform:perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-2px) }
@media (max-width:1000px){ .jh-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 2: Seekh Run (scroll-snap ribbon) ====== */
.seekh-run{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(880px 320px at -10% 5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.sr-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.sr-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.sr-lead{ color:var(--muted); margin:0 0 12px }

.sr-ribbon{
  display:flex; gap:14px; overflow-x:auto; padding:8px 4px 4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
  border-radius:14px;
}
.sr-step{
  scroll-snap-align:center; flex:0 0 260px;
  background:rgba(255,255,255,.03); border-radius:14px; padding:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.25)
}
.sr-side{ display:grid; gap:12px; align-content:start }
.sr-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.sr-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .sr-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 3: Field Notes (progress rail + gallery) ====== */
.field-notes{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(900px 340px at 100% -5%, rgba(240,58,23,.07), transparent 60%),
    var(--bg);
}
.fn-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.fn-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.fn-lead{ color:var(--muted); margin:0 0 12px }

.fn-stage{ position:relative; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:14px; box-shadow:0 12px 28px rgba(0,0,0,.24) }
.fn-rail{ position:relative; height:8px; border-radius:999px; background:rgba(255,255,255,.12) }
.fn-dot{
  position:absolute; left:0%; top:50%; width:14px; height:14px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 10px rgba(255,255,255,.25);
}
.fn-marks{ display:flex; justify-content:space-between; margin:8px 2px 0; padding:0; list-style:none; color:var(--muted); font-size:.92rem }

.fn-gallery{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px }
.fn-gallery figure{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.fn-gallery figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){
  .fn-grid{ grid-template-columns:1fr; gap:22px }
  .fn-gallery{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){ .fn-gallery{ grid-template-columns:1fr; } }
/* ====== SECTION 4: Monsoon Toolkit ====== */
.rain-toolkit{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(880px 320px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.rt-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.rt-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.rt-lead{ color:var(--muted); margin:0 0 12px }

.rt-chips{ display:grid; gap:10px }
.rt-chip{
  position:relative; width:100%; text-align:left; cursor:pointer; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04); color:var(--ink); border-radius:12px; padding:10px 12px;
  font-weight:800; letter-spacing:.2px; transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.rt-chip:hover{ transform:translateY(-1px) }
.rt-chip .rt-note{
  display:block; color:var(--muted); font-weight:600; line-height:1.45;
  max-height:0; overflow:hidden; transition:max-height .3s ease, opacity .25s ease; opacity:0;
  margin-top:6px;
}
.rt-chip.is-open{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.28) }
.rt-chip.is-open .rt-note{ max-height:120px; opacity:1 }

.rt-side{ display:grid; gap:12px; align-content:start }
.rt-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.rt-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .rt-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 5: Spice Smoke Trails ====== */
.spice-trails{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(900px 340px at -10% 10%, rgba(240,58,23,.07), transparent 60%),
    var(--bg);
}
.st-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.st-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.st-lead{ color:var(--muted); margin:0 0 12px }

.st-band{ border-radius:14px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); box-shadow:0 10px 24px rgba(0,0,0,.22) }
.st-marquee{
  --speed: 40s;
  display:flex; gap:28px; list-style:none; margin:0; padding:10px 14px;
  white-space:nowrap; animation: stSlide var(--speed) linear infinite;
}
.st-marquee li{ font-weight:800; opacity:.9; letter-spacing:.2px }
.st-band:hover .st-marquee{ animation-play-state: paused; }
@keyframes stSlide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.st-side{ display:grid; gap:12px; align-content:start }
.st-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.st-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .st-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 6: Tikka Clock ====== */
.tikka-clock{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(920px 360px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.tc-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.tc-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.tc-lead{ color:var(--muted); margin:0 0 12px }

.tc-steps{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:8px }
.tc-step{ padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12) }
.tc-step.is-on{ border-color:rgba(255,209,102,.45); box-shadow:0 0 0 2px rgba(255,209,102,.24) inset }

.tc-stage{
  position:relative; aspect-ratio:1/1; max-width:360px; margin-inline:auto;
  border-radius:18px; background:#130f0d; box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.tc-dial{
  position:absolute; inset:12% 12%; border-radius:50%;
  background:
    conic-gradient(#ff6a28 0 120deg, #ffd166 0 240deg, #9dc0ff 0 360deg);
}
.tc-needle{
  position:absolute; left:50%; top:50%; width:4px; height:42%;
  background:#fff; border-radius:3px; transform-origin:50% 100%;
  transform: translate(-50%,-100%) rotate(0deg);
  animation: tcSpin 18s linear infinite;
  box-shadow:0 0 10px rgba(255,255,255,.25);
}
.tc-needle::after{
  content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%; background:#fff;
}
@keyframes tcSpin{ to{ rotate:360deg } }

.tc-side{ display:grid; gap:12px; align-content:start }
.tc-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.tc-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .tc-grid{ grid-template-columns:1fr; gap:22px } }
/* ====== SECTION 7: Layout Deck ====== */
.layout-deck{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(940px 360px at -10% 10%, rgba(240,58,23,.07), transparent 60%),
    var(--bg);
}
.ld-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.ld-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.ld-lead{ color:var(--muted); margin:0 0 12px }

.ld-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 10px }
.ld-tab{
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:var(--ink);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:800; letter-spacing:.3px;
  transition:transform .15s ease, background .2s ease, border-color .2s ease
}
.ld-tab:hover{ transform:translateY(-1px) }
.ld-tab.is-active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b0806; border-color:transparent }

.ld-notes{ margin:10px 0 0; padding-left:18px }
.ld-notes li{ list-style:"🔥  "; padding-inline-start:6px }
.ld-notes span{ display:inline-block; transition:opacity .25s ease, transform .25s ease }

.ld-stage{
  position:relative; aspect-ratio:1/1; max-width:360px; margin-inline:auto;
  border-radius:18px; background:#130f0d; box-shadow:0 14px 32px rgba(0,0,0,.28); overflow:hidden;
}
.ld-grate{
  position:absolute; inset:10% 10%; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px);
  filter:contrast(110%);
}
.ld-coals{ position:absolute; inset:10% 10%; border-radius:50%; mix-blend-mode:screen; }
.ld-stage[data-state="twozone"] .ld-coals{
  background:
    radial-gradient(60% 80% at 75% 50%, transparent 60%, rgba(255,106,40,.28) 61% 100%),
    radial-gradient(60% 80% at 25% 50%, rgba(255,209,102,.25), transparent 62%);
}
.ld-stage[data-state="ring"] .ld-coals{
  background:
    radial-gradient(closest-side, transparent 62%, rgba(255,209,102,.30) 64% 70%, transparent 72%),
    radial-gradient(closest-side, transparent 72%, rgba(255,106,40,.30) 74% 80%, transparent 82%);
}
.ld-stage[data-state="snake"] .ld-coals{
  background:
    conic-gradient(from 310deg, rgba(255,106,40,.34) 0 60deg, transparent 60deg 360deg),
    radial-gradient(closest-side, transparent 62%, rgba(255,209,102,.18) 64% 74%, transparent 76%);
}

.ld-side{ display:grid; gap:12px; align-content:start }
.ld-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.ld-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .ld-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 8: Pantry Rescue (flip tiles) ====== */
.pantry-rescue{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(960px 380px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.pr-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.pr-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.pr-lead{ color:var(--muted); margin:0 0 12px }

.pr-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px }
.pr-tile{
  position:relative; min-height:120px; padding:12px; border-radius:14px; color:var(--ink);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  transform-style:preserve-3d; transition:transform .5s ease, border-color .2s ease;
  cursor:default;
}
.pr-tile:hover{ transform:rotateY(-8deg) translateY(-2px); border-color:rgba(255,255,255,.22) }
.pr-tile h3{ margin:.1rem 0 .3rem }
.pr-tile .front{ margin:0; color:var(--muted) }
.pr-tile .back{
  position:absolute; inset:12px; border-radius:10px; padding:8px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  transform:translateZ(30px); opacity:0; transition:opacity .25s ease;
}
.pr-tile:hover .back{ opacity:1 }

.pr-side{ display:grid; gap:12px; align-content:start }
.pr-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.pr-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){
  .pr-grid{ grid-template-columns:1fr; gap:22px }
  .pr-tiles{ grid-template-columns:1fr; }
}

/* ====== SECTION 9: Night Reel (auto scroll-snap) ====== */
.night-reel{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(980px 400px at -10% 10%, rgba(240,58,23,.07), transparent 60%),
    var(--bg);
}
.nr-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.nr-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.nr-lead{ color:var(--muted); margin:0 0 12px }

.nr-reel{
  display:flex; gap:14px; overflow-x:auto; padding:8px 4px 4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
  border-radius:14px;
}
.nr-reel figure{
  scroll-snap-align:center; flex:0 0 280px; margin:0;
  background:rgba(255,255,255,.03); border-radius:14px; padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.25)
}
.nr-reel figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .nr-grid{ grid-template-columns:1fr; gap:22px } }
/* ====== SECTION 10: Myth Lab ====== */
.myth-lab{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(980px 400px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.ml-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.ml-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.ml-lead{ color:var(--muted); margin:0 0 12px }

.ml-deck{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.ml-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px; position:relative;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ml-card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.22) }
.ml-tag{ margin:.2rem 0 .3rem }
.ml-myth{ margin:0 0 .6rem; color:var(--muted) }
.ml-toggle{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:var(--ink);
  font-weight:800; cursor:pointer; transition:transform .15s ease, background .2s ease;
}
.ml-toggle:hover{ transform:translateY(-1px) }
.ml-fact{
  margin-top:10px; border-radius:12px; padding:10px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .25s ease;
}
.ml-card.is-open{ box-shadow:0 0 0 2px rgba(255,209,102,.25) inset }
.ml-card.is-open .ml-fact{ max-height:160px; opacity:1 }

.ml-side{ display:grid; gap:12px; align-content:start }
.ml-cardimg{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.ml-cardimg figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){
  .ml-grid{ grid-template-columns:1fr; gap:22px }
  .ml-deck{ grid-template-columns:1fr; }
}

/* ====== SECTION 11: Wind Compass ====== */
.wind-compass{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(1000px 420px at -10% 10%, rgba(240,58,23,.07), transparent 60%),
    var(--bg);
}
.wc-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.wc-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.wc-lead{ color:var(--muted); margin:0 0 12px }

.wc-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 10px }
.wc-tab{
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:var(--ink);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:800; letter-spacing:.3px;
  transition:transform .15s ease, background .2s ease, border-color .2s ease
}
.wc-tab:hover{ transform:translateY(-1px) }
.wc-tab.is-active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b0806; border-color:transparent }

.wc-notes{ margin:10px 0 0; padding-left:18px }
.wc-notes li{ list-style:"🔥  "; padding-inline-start:6px }
.wc-notes span{ display:inline-block; transition:opacity .25s ease, transform .25s ease }

.wc-stage{
  position:relative; aspect-ratio:1/1; max-width:360px; margin-inline:auto;
  border-radius:18px; background:#130f0d; box-shadow:0 14px 32px rgba(0,0,0,.28);
  --ang: 0deg;
}
.wc-dial{ position:absolute; inset:12% 12%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.05), rgba(255,255,255,.02)) }
.wc-rose{
  position:absolute; inset:10%; border-radius:50%;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,.08) 0 2deg, transparent 2deg 30deg);
  mask:radial-gradient(closest-side, transparent 56%, #000 57%);
}
.wc-needle{
  position:absolute; left:50%; top:50%; width:4px; height:44%;
  background:#fff; border-radius:3px; transform-origin:50% 100%;
  transform: translate(-50%,-100%) rotate(var(--ang));
  box-shadow:0 0 10px rgba(255,255,255,.25);
}
.wc-needle::after{
  content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%; background:#fff;
}

.wc-side{ display:grid; gap:12px; align-content:start }
.wc-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.wc-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

.wc-stage[data-state="north"]     { --ang:   0deg }
.wc-stage[data-state="seabreeze"] { --ang:  70deg }
.wc-stage[data-state="monsoon"]   { --ang: 140deg }

@media (max-width:980px){ .wc-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 12: Paneer Photo Essay ====== */
.paneer-essay{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(1020px 440px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.pe-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.pe-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.pe-lead{ color:var(--muted); margin:0 0 12px }

.pe-gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.kb{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25); overflow:hidden }
.kb img{ transform:scale(1); transition:transform 8s linear; }
.kb:hover img{ transform:scale(1.12) }
.kb figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){
  .pe-grid{ grid-template-columns:1fr; gap:22px }
  .pe-gallery{ grid-template-columns:1fr 1fr }
}
@media (max-width:560px){ .pe-gallery{ grid-template-columns:1fr } }
/* ====== SECTION 13: Etiquette (flip tiles) ====== */
.etiquette{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(1040px 460px at -10% 10%, rgba(255,106,40,.08), transparent 60%),
    var(--bg);
}
.et-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.et-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.et-lead{ color:var(--muted); margin:0 0 12px }

.et-board{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.et-tile{
  position:relative; min-height:130px; border-radius:16px; perspective:1000px;
  cursor:pointer; outline:0;
}
.et-face{
  position:absolute; inset:0; padding:12px; border-radius:16px;
  display:grid; align-content:start; gap:6px; backface-visibility:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.04));
  transition: transform .5s ease, border-color .2s ease;
}
.et-do h3{ margin:.2rem 0 0; color:#0b0806; }
.et-do{ background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0b0806; border-color:transparent }
.et-dont{ transform:rotateY(180deg); }
.et-tile.is-flipped .et-do{ transform:rotateY(180deg) }
.et-tile.is-flipped .et-dont{ transform:rotateY(360deg) }

.et-side{ display:grid; gap:12px; align-content:start }
.et-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.et-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){
  .et-grid{ grid-template-columns:1fr; gap:22px }
  .et-board{ grid-template-columns:1fr; }
}

/* ====== SECTION 14: Weekend Menu Strip ====== */
.weekend-menu{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(1060px 480px at 100% -5%, rgba(240,58,23,.07), transparent 60%),
    var(--bg-2);
}
.wm-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.wm-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.wm-lead{ color:var(--muted); margin:0 0 12px }

.wm-strip{
  display:flex; gap:12px; overflow-x:auto; padding:8px 4px 4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
  border-radius:14px;
}
.wm-tile{
  scroll-snap-align:center; flex:0 0 240px; border-radius:12px; padding:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  font-weight:800; letter-spacing:.2px;
}
.wm-tile p{ margin:.2rem 0 0; color:var(--muted) }
.wm-tile.is-on{ border-color:rgba(255,209,102,.5); box-shadow:0 0 0 2px rgba(255,209,102,.25) inset }
.wm-side{ display:grid; gap:12px; align-content:start }
.wm-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.wm-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .wm-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 15: Winter Rooftop (slow pan) ====== */
.winter-rooftop{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(1080px 500px at -10% 10%, rgba(255,106,40,.08), transparent 60%),
    var(--bg);
}
.wr-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.wr-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.wr-lead{ color:var(--muted); margin:0 0 12px }

.wr-gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.wr{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25); overflow:hidden }
.wr img{ transform:scale(1.02); transition:transform 9s linear }
.wr:hover img{ transform:scale(1.14) }
.wr figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){
  .wr-grid{ grid-template-columns:1fr; gap:22px }
  .wr-gallery{ grid-template-columns:1fr 1fr }
}
@media (max-width:560px){ .wr-gallery{ grid-template-columns:1fr } }