/* Layout "evening" (venue.json layout: "evening"): a homepage without photos. Structure first, then the motion.
   Colours and fonts come from the venue (venue.json theme, media/venue.css). Every effect sits behind
   prefers-reduced-motion and @supports: without them the page is the same, just still. */

/* sections crop their content without becoming scroll boxes, so sticky parts (moments, menu bar) can hold still */
.sec{overflow:clip}

/* preview banner (venue.json preview: true) */
.preview{position:fixed;inset:0 0 auto;z-index:60;height:30px;margin:0;padding:0 14px;background:var(--peach);color:var(--ink);font:500 .72rem/30px var(--sans);letter-spacing:.02em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview~.top{top:30px}.preview~main .hero-in{padding-top:150px}

/* hero: the logo, a soft light that follows the pointer, a grain, a scroll cue */
.e-hero{background:radial-gradient(60% 50% at var(--mx,50%) var(--my,38%),rgba(255,255,255,.07),transparent 70%),radial-gradient(70% 55% at 50% 38%,color-mix(in srgb,var(--deep) 80%,#fff) 0,var(--deep) 70%) var(--deep)}
.e-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.13;pointer-events:none;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.e-cue{position:absolute;left:50%;bottom:118px;width:1px;height:54px;background:linear-gradient(currentColor,transparent);opacity:.5;overflow:hidden}

/* band: the venue's words, large, moving with the scroll */
.e-band{overflow:hidden;background:var(--deep);color:var(--peach);padding:clamp(22px,4vw,44px) 0;border-block:1px solid color-mix(in srgb,var(--peach) 30%,transparent)}
.e-band p{white-space:nowrap;font:500 clamp(2.6rem,8vw,7rem)/1 var(--serif);text-transform:uppercase;letter-spacing:.02em;margin:0}
.e-band span{margin-right:.45em}
.e-band span:nth-child(even){font:italic 400 .8em/1 var(--serif-i);text-transform:none;color:transparent;-webkit-text-stroke:1px var(--peach)}

/* three moments: cards in a row; on wide screens they stack in one by one while the section holds still */
.mo-l{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin-top:2.6rem}
.mo{border:1px solid var(--line);padding:30px 28px 32px;background:var(--white);position:relative}
.mo-ic{width:52px;height:52px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1.4rem}
.mo .kicker{margin-bottom:.5rem}.mo h3{font-size:2.1rem;margin-bottom:.7rem}.mo p:last-child{color:var(--muted)}
.moments .mo:nth-child(2){background:var(--ink);color:#f2efea;border-color:var(--ink)}.moments .mo:nth-child(2) h3{color:#fff}
.moments .mo:nth-child(2) .mo-ic{stroke:var(--peach)}.moments .mo:nth-child(2) .kicker{color:var(--peach)}.moments .mo:nth-child(2) p:last-child{color:rgba(242,239,234,.75)}

/* featured menu section (venue.json featured), with its name as a large outline behind */
.plateau{position:relative;overflow:clip}
.e-ghost{position:absolute;left:0;top:50%;margin:0;white-space:nowrap;pointer-events:none;font:500 clamp(7rem,22vw,20rem)/1 var(--serif);text-transform:uppercase;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--peach) 22%,transparent);translate:0 -50%}
.pl-g{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,6vw,90px);align-items:start}
.pl-g .muted{margin:1rem 0 1.8rem;color:rgba(242,239,234,.72)}
.pl-l{list-style:none;padding:0;counter-reset:pl;display:grid;gap:0}
.pl-l li{counter-increment:pl;display:grid;grid-template-columns:3.2rem 1fr;gap:4px 14px;padding:20px 0;border-top:1px solid color-mix(in srgb,var(--peach) 30%,transparent)}
.pl-l li:last-child{border-bottom:1px solid color-mix(in srgb,var(--peach) 30%,transparent)}
.pl-l li::before{content:counter(pl,decimal-leading-zero);grid-row:span 2;font:300 2.2rem/1 var(--serif);color:var(--peach)}
.pl-l h3{font-size:1.45rem;color:#fff}.pl-l p{font-size:.92rem;color:rgba(242,239,234,.72);margin:0}

/* menu: the jump bar stays under the header while the menu scrolls, and marks the section in view */
.menu-jump{position:sticky;top:var(--jump-top,64px);z-index:5;display:flex;gap:8px;overflow-x:auto;padding:10px 0 12px;margin:0 0 1.6rem;scrollbar-width:none;background:var(--deep)}
.menu-jump::-webkit-scrollbar{display:none}
.menu-jump a{flex:0 0 auto;font:400 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#f2efea;border:1px solid rgba(242,239,234,.3);padding:10px 14px;border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.menu-jump a:hover{border-color:var(--peach);color:var(--peach)}
.menu-jump a[aria-current="true"]{background:var(--peach);border-color:var(--peach);color:var(--ink)}
.preview~main .menu-jump{--jump-top:94px}
.menu-col{scroll-margin-top:150px}

/* Instagram link band */
.ig-band{display:flex;justify-content:space-between;align-items:center;gap:28px 60px;flex-wrap:wrap}
.ig-band>div:first-child{max-width:40em}.ig-band .muted{margin-top:.2rem}
.ig-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

@media (max-width:900px){
  .mo-l,.pl-g{grid-template-columns:1fr}
  .preview~main .hero-in{padding-top:130px}
  .e-cue{display:none}
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:no-preference){
  /* reveals: rise out of a soft blur instead of a plain fade */
  /* (not in the menu: a guest arriving from the table QR code reads it at once) */
  main>.sec:not(.menu) .reveal{filter:blur(5px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter .9s}
  main>.sec:not(.menu) .reveal.in{filter:none}
  .pl-l li.reveal:nth-child(2),.mo-l .reveal:nth-child(2),.ethos-l .reveal:nth-child(2){transition-delay:.12s}
  .pl-l li.reveal:nth-child(3),.mo-l .reveal:nth-child(3),.ethos-l .reveal:nth-child(3){transition-delay:.24s}
  .pl-l li.reveal:nth-child(4){transition-delay:.36s}

  /* hero: the logo comes out of a soft focus and opens from the middle */
  .e-hero h1 .lg{animation:e-in 1.8s cubic-bezier(.2,.7,.2,1) both}
  .e-hero .hero-tag{animation:e-tag 1.8s .35s cubic-bezier(.2,.7,.2,1) both}
  .e-hero .now,.e-hero .status{animation:e-up 1.2s .8s cubic-bezier(.2,.7,.2,1) both}
  .e-cue::after{content:"";position:absolute;inset:0;background:var(--peach);animation:e-cue 2.4s 2s cubic-bezier(.6,0,.2,1) infinite}
  @keyframes e-in{from{opacity:0;filter:blur(14px);clip-path:inset(0 50% 0 50%);scale:1.06}to{opacity:1;filter:none;clip-path:inset(0 -2% 0 -2%);scale:1}}
  @keyframes e-tag{from{opacity:0;letter-spacing:.9em}to{opacity:1}}
  @keyframes e-up{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
  @keyframes e-cue{0%{translate:0 -100%}60%,100%{translate:0 100%}}
  .e-band p{animation:e-drift 38s linear infinite}
  @keyframes e-drift{to{transform:translateX(-50%)}}

  @supports (animation-timeline: scroll()){
    /* hero: the logo grows a little and fades as the page moves on; the light dims */
    .e-hero h1 .lg-w{animation:e-out linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    @keyframes e-out{to{scale:1.18;opacity:0;filter:blur(4px)}}
    /* band: moves with the scroll (both ways), instead of on its own */
    .e-band p{animation:e-glide linear both;animation-timeline:view()}
    @keyframes e-glide{from{transform:translateX(6%)}to{transform:translateX(-40%)}}
    /* headings: words light up one by one */
    .wr .w{animation:e-word linear both;animation-timeline:view();animation-range:entry 90% cover 40%}
    @keyframes e-word{from{opacity:.14}to{opacity:1}}
    /* featured section: the outline word slides across behind the list */
    .e-ghost{animation:e-ghost linear both;animation-timeline:view()}
    @keyframes e-ghost{from{transform:translateX(20%)}to{transform:translateX(-45%)}}
    /* lines draw in */
    .ethos-l li{background:linear-gradient(currentColor,currentColor) top left/0 2px no-repeat;border-top-color:transparent!important;animation:e-line linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
    @keyframes e-line{to{background-size:100% 2px}}
    .menu-col h3{background:linear-gradient(currentColor,currentColor) bottom left/0 1px no-repeat;border-bottom-color:transparent!important;animation:e-line1 linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
    @keyframes e-line1{to{background-size:100% 1px}}
    /* moments, wide screens: the section holds still and the three cards come in one after another */
    @media (min-width:901px) and (min-height:640px){
      .e-stack{height:240vh;padding-block:0;view-timeline:--mo block}
      .e-stack>.wrap{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding-block:150px 40px}
      .e-stack .mo-l{perspective:1200px}
      .e-stack .mo{opacity:1;filter:none;transform:none;transition:none;animation:e-card linear both;animation-timeline:--mo}
      .e-stack .mo:nth-child(1){animation-range:entry 50% contain 12%}
      .e-stack .mo:nth-child(2){animation-range:contain 10% contain 42%}
      .e-stack .mo:nth-child(3){animation-range:contain 35% contain 70%}
      @keyframes e-card{from{opacity:0;transform:translateY(55vh) rotateX(14deg)}to{opacity:1;transform:none}}
    }
  }
}

/* ---------------------------------------------------------------- the wine (sections.fridge) and the featured photo */
/* The venue's own photos: the fridge wall next to the facts, the owners' line and a band of the bottles they open;
   one big photo opening the featured section. A note in marker (Caveat, SIL OFL) on the fridge photo. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/caveat-600-latin.woff2') format('woff2')}
.cantina{position:relative;overflow:clip;padding-bottom:0}
.ca-g{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.ca-ph{position:relative;margin:0}
.ca-ph img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.ca-ph::after{content:"";position:absolute;inset:0;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(216,181,122,.25);pointer-events:none}
.ca-tag{position:absolute;right:-1.2rem;bottom:-1.6rem;margin:0;padding:.2em .6em;background:var(--peach);color:var(--ink);font:600 clamp(1.4rem,2.4vw,1.9rem)/1 'Caveat',cursive;rotate:-5deg;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.ca-txt .muted{margin:1rem 0 0;color:rgba(242,239,234,.75);max-width:38rem}
.ca-facts{list-style:none;padding:0;margin:clamp(28px,4vw,44px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-top:1px solid color-mix(in srgb,var(--peach) 35%,transparent)}
.ca-facts li{padding-top:18px}
.ca-facts b{display:block;font:500 clamp(1.7rem,3vw,2.6rem)/1 var(--serif);text-transform:uppercase;color:var(--peach);letter-spacing:.01em}
.ca-facts span{display:block;margin-top:.5rem;font-size:.88rem;line-height:1.45;color:rgba(242,239,234,.72)}
.ca-q{margin:clamp(28px,4vw,48px) 0 0;padding:0;border:0;display:grid;gap:16px}
.ca-q p{margin:0;font:italic 400 clamp(1.4rem,2.4vw,2rem)/1.25 var(--serif-i);color:#fff}
.ca-who{margin:0;display:flex;align-items:center;gap:12px;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--peach)}
.ca-who img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.ca-band{margin-top:clamp(56px,8vw,110px)}
.ca-band span{font-size:clamp(1.6rem,4vw,3.2rem)}
/* the featured section opens on one big photo */
.plateau.has-ph{padding-top:0}
.pl-ph{position:relative;margin:0 auto clamp(48px,7vw,96px);max-width:1180px;height:min(76vh,720px);overflow:hidden}
.pl-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.pl-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,var(--deep));pointer-events:none}
.pl-split{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,90px);align-items:start}
.pl-split .muted{margin:1rem 0 1.8rem;color:rgba(242,239,234,.72)}
.pl-ph-t{position:sticky;top:96px;margin:0;border-radius:4px;overflow:hidden;aspect-ratio:4/5;max-height:calc(100vh - 128px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pl-ph-t img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media (max-width:900px){.pl-split{grid-template-columns:1fr}.pl-ph-t{position:relative;top:0;max-width:520px;width:100%;justify-self:center}}
.pl-gal{list-style:none;margin:clamp(48px,7vw,96px) auto 0;padding:0 clamp(16px,4vw,48px);max-width:1400px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pl-gal li{overflow:hidden;border-radius:3px;aspect-ratio:4/5}
.pl-gal li:nth-child(even){translate:0 28px}
.pl-gal img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .8s cubic-bezier(.2,.7,.2,1)}
.pl-gal li:hover img{scale:1.06}
.plateau.has-ph{padding-bottom:clamp(80px,10vw,140px)}
@media (max-width:900px){
  .pl-gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px}
  .pl-gal li{flex:0 0 68%;scroll-snap-align:center}.pl-gal li:nth-child(even){translate:none}
  .ca-g{grid-template-columns:1fr}
  .ca-ph{max-width:460px}
  .ca-tag{right:.6rem}
  .ca-facts{grid-template-columns:1fr;gap:0}
  .ca-facts li{display:grid;grid-template-columns:7.5rem 1fr;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(242,239,234,.12)}
  .ca-facts span{margin:0}
  .pl-ph{height:62vh}
}
@media (prefers-reduced-motion:no-preference){
  .ca-tag{transition:rotate .6s cubic-bezier(.2,.7,.2,1) .6s,scale .6s cubic-bezier(.2,.7,.2,1) .6s}
  .ca-ph.reveal:not(.in) .ca-tag{rotate:-25deg;scale:.6}
  .ca-facts li.reveal:nth-child(2){transition-delay:.12s}.ca-facts li.reveal:nth-child(3){transition-delay:.24s}
  @supports (animation-timeline: view()){
    /* the featured photo settles as it scrolls in; the fridge photo drifts a little */
    .pl-ph img{animation:e-settle linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
    @keyframes e-settle{from{scale:1.18;filter:brightness(.6)}to{scale:1;filter:none}}
    .ca-ph img{animation:e-lift linear both;animation-timeline:view()}
    @keyframes e-lift{from{translate:0 40px}to{translate:0 -40px}}
  }
}

/* media.room: the venue's own photos of the room and the terrace, a row under the intro (first photo larger) */
.e-room{background:var(--sand);padding:0 clamp(16px,4vw,48px) clamp(56px,8vw,110px)}
.e-room-l{list-style:none;margin:0 auto;padding:0;max-width:1400px;display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:clamp(150px,19vw,280px);gap:12px}
.e-room-l li{overflow:hidden;border-radius:3px}
.e-room-l li:first-child{grid-row:span 2}
.e-room-l img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .8s cubic-bezier(.2,.7,.2,1)}
.e-room-l li:hover img{scale:1.05}
@media (max-width:700px){.e-room-l{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(120px,36vw,220px)}.e-room-l li:first-child{grid-column:span 2;grid-row:span 1}}
@media (prefers-reduced-motion:reduce){.e-room-l img{transition:none}.e-room-l li:hover img{scale:1}}
/* every row full, whatever the number of photos (the user, 31 Oct 2026: "always fill full rows"): the big photo takes two
   rows of three columns, so 5 and 8 fit; otherwise the last photos widen. :where() keeps it at zero specificity, so a
   venue that draws its own grid (Agorà's four columns, Piazza Crova 3's strip) keeps it. */
@media (min-width:701px){
  :where(.e-room-l li:only-child){grid-column:1/-1}
  :where(.e-room-l li:first-child:nth-last-child(2) + li){grid-column:span 2;grid-row:span 2}
  :where(.e-room-l li:first-child:nth-last-child(3) ~ li){grid-column:span 2}
  :where(.e-room-l li:first-child:nth-last-child(4) ~ li:last-child){grid-column:span 2}
  :where(.e-room-l li:nth-child(3n+6):last-child){grid-column:1/-1}
  :where(.e-room-l li:nth-child(3n+7):last-child){grid-column:span 2}
}
@media (max-width:700px){:where(.e-room-l li:nth-child(2n):last-child){grid-column:1/-1}}
/* phones, two photos: side by side and taller, not two thin strips (the first photo's full width is for three or more) */
@media (max-width:700px){.e-room-l li:first-child:nth-last-child(2),.e-room-l li:first-child:nth-last-child(2) + li{grid-column:auto}
  .e-room-l:has(> li:first-child:nth-last-child(2)){grid-auto-rows:clamp(200px,62vw,340px)}}

/* the floating booking bar (phones) stays out of the way while the hero is on screen (app.js adds fab-wait / past-hero) */
.fab-wait .fab{transition:translate .35s ease,opacity .35s ease}
.fab-wait:not(.past-hero) .fab{opacity:0;translate:0 140%;pointer-events:none}
@media (prefers-reduced-motion:reduce){.fab-wait .fab{transition:none}}

/* media.hero.bg: a photo behind the hero, darkened so the logo and the text read */
.e-hero.has-bg{background:var(--deep)}
.e-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.e-hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.e-hero-film>picture{position:absolute;inset:0}.e-hero-film .hero-video{background:transparent}   /* media.hero.video: the film over its first frame */
.e-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.35) 35%,rgba(0,0,0,.55) 70%,color-mix(in srgb,var(--deep) 92%,transparent) 100%)}
.e-hero.has-bg::before{display:none}

/* hero_card (venue.json, build.py hero_card): the opening is the menu of the month as a printed card. Base layout only;
   the venue's media/venue.css sets its paper, type and rules. Nothing here applies without .has-card. */
.has-card .hero-in{display:grid;justify-items:center;gap:0}
.has-card .hc{position:relative;width:min(560px,100%);margin:1.6rem auto 1.4rem;padding:clamp(1.6rem,4vw,2.6rem) clamp(1.2rem,4vw,2.8rem);
  background:var(--white);color:var(--ink);text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.has-card .hc-k{font:600 .72rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;margin:0}
.has-card .hc-d{font-style:italic;margin:.35rem 0 1rem;color:var(--muted)}
.has-card .hc-l{list-style:none;margin:0;padding:0;display:grid;gap:1.3rem}
.has-card .hc-n{margin:0 0 .4rem;font-weight:600}
.has-card .hc-c{display:block;line-height:1.45}
.has-card .hc-p{margin:.45rem 0 0;font-weight:600}
.has-card .hc-more{margin:1.2rem 0 0}
@media (min-width:1000px){
  .has-card .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:4rem;align-items:center;justify-items:start;text-align:left;max-width:1180px}
  .has-card .hero-in>*{grid-column:1}
  .has-card .hc{grid-column:2;grid-row:1/span 8;margin:0}
}