/* Home page: one evening at Sera, from aperitivo to the last coffee.
   Acts: hero (parallax) > aperitivo (in) > pasta (reveal) > the oven (in) > DINNER, the peak (pin, 3 screens)
   > the long table (parallax) > find us (in) > close. The scroll-craft engine drives every data-sc-* attribute;
   this file only lays things out. */

/* Header: fixed over the whole page. Clear over the hero photo, solid once the hero has gone.
   With a notice bar on, the header starts under it and the hero is that much shorter (site.css, nav.js). */
.site-head--home { position: fixed; top: var(--notice-off, 0px); left: 0; right: 0; transition: background-color var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out); }
html:has(.site-head--home) { scroll-padding-top: calc(var(--bar-h) + 0.5rem); }   /* links reached by Tab stay clear of the fixed header */
.site-head--home.is-solid { background: color-mix(in oklab, var(--sc-canvas) 84%, transparent); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--sc-hairline); }

/* Section headings: the poster face at section size. */
.act h2.poster { margin: 0; font-size: clamp(3.4rem, 6.2vw, 7rem); }
.act .say { margin: 1.6rem 0 0; max-width: 36ch; font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sc-ink-soft); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2rem; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }
.link-arrow span { transition: transform var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover span { transform: translateX(4px); } }

/* ---- Hero: the pour ---- */
.hero { position: relative; height: calc(100svh - var(--notice-h, 0px)); min-height: 640px; overflow: clip; color: var(--sc-ink); }
.hero__photo { position: absolute; inset: -60px 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.hero__scrim { position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(180deg, rgb(12 11 9 / 0.6) 0%, rgb(12 11 9 / 0) 16%),
    radial-gradient(70rem 42rem at calc(var(--sc-gutter) - var(--edge)) 0%, rgb(12 11 9 / 0.78), rgb(12 11 9 / 0) 70%),   /* the top-left corner, or past 1920px, as far in as the words move */
    linear-gradient(0deg, rgb(12 11 9 / 0.8) 0%, rgb(12 11 9 / 0.45) 12%, rgb(12 11 9 / 0) 32%); }   /* the bottom keeps the hours line readable over the pizza */
.hero__copy { position: absolute; z-index: 2; left: var(--sc-gutter); top: clamp(7rem, 15vh, 9rem); width: min(52rem, 50vw); }
.hero h1 { margin: 0; font-size: clamp(5rem, 9.6vw, 10.5rem); }
.hero__lede { margin: 1.6rem 0 0; max-width: 36ch; font-size: 1.15rem; line-height: 1.6; color: #d6cfc2; }
.hero .ctas { display: flex; gap: 0.75rem; margin-top: 2rem; }
.hero .hours-now { position: absolute; z-index: 2; left: var(--sc-gutter); bottom: 2.25rem; margin: 0; color: #e6e0d4; }

/* ---- Shared section frame ---- */
.act { position: relative; padding: var(--sc-section) var(--sc-gutter); }
.act__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }

/* ---- 18:00 Aperitivo: two photos overlapping, the back one drifting slower ---- */
.act--aperitivo .copy { grid-column: 1 / span 5; }
.act--aperitivo .media { grid-column: 7 / span 6; position: relative; height: min(78vh, 46rem); }
.act--aperitivo figure { position: absolute; margin: 0; }
.act--aperitivo figure img { width: 100%; height: 100%; object-fit: cover; }
.act--aperitivo .ph-back { top: 0; right: 0; width: 62%; aspect-ratio: 4 / 5; }
.act--aperitivo .ph-front { left: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5; box-shadow: 0 0 0 10px var(--ground, var(--sc-canvas)), var(--sc-e3); }
.act--aperitivo .ph-front img { object-position: 50% 42%; }

/* ---- 19:30 Pasta: the bright morning photo wipes in, words on the dark side ---- */
.act--pasta { padding: 0; }
.act--pasta .act__body { min-height: 100svh; column-gap: 0; }
.pasta__photo { grid-column: 1 / span 6; align-self: stretch; position: relative; margin: 0; min-height: 100svh; }
.pasta__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.act--pasta .copy { grid-column: 8 / span 5; padding: var(--sc-section) var(--sc-gutter) var(--sc-section) 0; }

/* ---- 20:30 The oven: a tall photo and the six dishes people come back for ---- */
.act--oven .oven__photo { grid-column: 1 / span 5; margin: 0; }
.act--oven .oven__photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 55%; }
.act--oven .copy { grid-column: 7 / span 6; }
.signature { display: grid; gap: 1.05rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.signature li { display: flex; align-items: baseline; gap: 0.9rem; }
.signature b { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.05; letter-spacing: 0.005em; }
.signature i { flex: 1; min-width: 2rem; border-bottom: 1px dotted var(--sc-hairline-strong); transform: translateY(-0.35em); }
.signature span { font-weight: 600; font-size: 1.2rem; color: var(--sc-accent); font-variant-numeric: tabular-nums; }

/* ---- 21:30 Dinner, the peak: the screen goes dark, then the table lights up from the middle ---- */
.dinner__stage { background: #070605; }
.dinner__photo { position: absolute; inset: 0; margin: 0; }
.dinner__photo img { position: absolute; inset: 0; width: 136%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(calc(1.1 - 0.1 * var(--sc-p, 0))); transform-origin: 60% 40%; }   /* 136% wide: the glasses sit right of the words */
.dinner__scrim { position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(90deg, rgb(7 6 5 / 0.92) 0%, rgb(7 6 5 / 0.82) 28%, rgb(7 6 5 / 0.35) 48%, rgb(7 6 5 / 0) 62%),
    linear-gradient(0deg, rgb(7 6 5 / 0.5) 0%, rgb(7 6 5 / 0) 35%); }
.dinner__hush { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; margin: 0; text-align: center; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.95rem; color: var(--sc-ink-soft); }
.dinner__copy { position: absolute; z-index: 2; left: var(--sc-gutter); bottom: clamp(3rem, 10vh, 6rem); width: min(46rem, 44vw); }
.dinner__copy h2.poster { font-size: clamp(3.6rem, 6.2vw, 7.2rem); }
.dinner__more { margin-top: 1.5rem; }
.dinner__more p { margin: 0; max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.55; color: #d6cfc2; }
.dinner__more .btn { margin-top: 1.75rem; }

/* ---- The long table: one wide photo that drifts behind the words ---- */
.act--table { height: 92svh; min-height: 560px; padding: 0; overflow: clip; }
.table__photo { position: absolute; inset: -80px 0; margin: 0; }
.table__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.table__scrim { position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(90deg, rgb(10 9 7 / 0.92) 0%, rgb(10 9 7 / 0.8) 30%, rgb(10 9 7 / 0.3) 52%, rgb(10 9 7 / 0) 66%),
    linear-gradient(180deg, rgb(10 9 7 / 0.4), rgb(10 9 7 / 0) 25%); }
.table__copy { position: absolute; z-index: 2; left: var(--sc-gutter); bottom: clamp(3rem, 9vh, 5.5rem); width: min(44rem, 44vw); }
.table__copy h2.poster { font-size: clamp(3.2rem, 5.4vw, 6rem); }
.table__copy .say { color: #d6cfc2; }
.table__copy .btn { margin-top: 2rem; }

/* ---- Find us: address and the week's hours ---- */
.act--visit .copy { grid-column: 1 / span 6; align-self: start; }
.act--visit .ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2.25rem; }
.act--visit .hours { grid-column: 8 / span 5; align-self: start; padding-top: 0.75rem; }
.hours__note { margin: 1rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ---- Close: the page arrives and stops ---- */
.act--close { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: var(--sc-section); text-align: center; }
.act--close h2.poster { font-size: clamp(4.4rem, 10vw, 11rem); }
.close__cta { display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; }
.close__cta p { margin: 0; color: var(--sc-ink-soft); }

/* The evening clock by the logo: the time of the act you're in (home.js). */
.evening-clock { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; opacity: 0; transform: translateY(4px); transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out); }
.evening-clock.is-on { opacity: 1; transform: none; }
.evening-clock b { font-weight: 800; font-stretch: 75%; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.evening-clock span { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--sc-ink-soft); }

/* ---- Tablet (1099px and narrower): side-by-side acts stack; words over photos take the full width ---- */
@media (max-width: 1099px) {
  .hero h1 { font-size: clamp(4.4rem, 8vw, 10.5rem); }   /* on a tablet on its side the headline must end before the hand */
  .evening-clock span { display: none; }      /* the time alone, so the header fits */
  .act--aperitivo .copy, .act--aperitivo .media, .act--visit .copy, .act--visit .hours { grid-column: 1 / -1; }
  .act--aperitivo .media { height: min(70vh, 44rem); margin-top: 3rem; }
  .act--pasta .act__body { min-height: 0; }
  .pasta__photo { grid-column: 1 / -1; min-height: 70svh; }
  .act--pasta .copy { grid-column: 1 / -1; padding: var(--sc-section) var(--sc-gutter); }
  .act--oven .oven__photo { grid-column: 1 / span 5; }
  .act--oven .copy { grid-column: 6 / span 7; }
  .act--visit .hours { max-width: 36rem; margin-top: 3rem; }
}

/* ---- Tall screens (phones, and tablets held upright): words over photos move to a dark band at the
   bottom. A tall screen crops the photos so their bright parts (the hand and the oil, the glasses,
   the plates) sit right behind the words: measured 1.2:1 to 1.9:1 at 820x1180 and 390x844.
   Tablets on their side keep the desktop composition, which passes. ---- */
@media (max-width: 640px), (max-width: 1099px) and (orientation: portrait) {
  .hero__scrim { background:
      linear-gradient(180deg, rgb(12 11 9 / 0.6) 0%, rgb(12 11 9 / 0) 14%),
      linear-gradient(0deg, rgb(12 11 9 / 0.97) 0%, rgb(12 11 9 / 0.92) 42%, rgb(12 11 9 / 0.45) 58%, rgb(12 11 9 / 0) 70%); }
  .hero__copy { top: auto; bottom: clamp(5rem, 9vh, 7rem); width: auto; right: var(--sc-gutter); max-width: 40rem; }
}
/* The dinner and the long table need the band below 1280px even on wide screens: their small text
   reaches past the dark left side into the photo (3.5:1 and 2.7:1 at 1024x768, 4.1:1 and 3.7:1 at 1180x820). */
@media (max-width: 1279px) {
  .dinner__copy, .table__copy { width: auto; right: var(--sc-gutter); max-width: 40rem; }
  .dinner__photo img { width: 100%; object-position: 62% 30%; }
  .dinner__scrim { background: linear-gradient(0deg, rgb(7 6 5 / 0.95) 0%, rgb(7 6 5 / 0.86) 38%, rgb(7 6 5 / 0.35) 62%, rgb(7 6 5 / 0) 78%); }
  .table__photo img { object-position: 42% 50%; }
  .table__scrim { background: linear-gradient(0deg, rgb(10 9 7 / 0.95) 0%, rgb(10 9 7 / 0.85) 40%, rgb(10 9 7 / 0.3) 64%, rgb(10 9 7 / 0) 80%); }
}

/* A phone on its side: the hero is the screen (it was 640px tall on a 390px screen, so its buttons
   were cut off), and its words size to the height. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero__copy { top: calc(var(--bar-h) + 0.75rem); width: min(40rem, 62vw); }
  .hero h1 { font-size: clamp(2.6rem, 12.5vh, 4rem); }
  .hero__lede { margin-top: 0.75rem; max-width: 52ch; font-size: 1rem; line-height: 1.5; }
  .hero .ctas { margin-top: 1rem; }
  .hero .ctas .btn { height: 2.75rem; }
  .hero .hours-now { bottom: 1rem; }
}

/* Short screens (a phone on its side): the words fill most of the height, so the band covers more
   and the headlines shrink (the dinner headline was 2.3:1 at 844x390). */
@media (max-height: 500px) and (max-width: 1279px) {
  .dinner__copy h2.poster, .table__copy h2.poster { font-size: clamp(2.2rem, 5.2vw, 3.2rem); }
  .dinner__copy, .table__copy { bottom: 1.5rem; }
  .dinner__scrim { background: linear-gradient(0deg, rgb(7 6 5 / 0.95) 0%, rgb(7 6 5 / 0.9) 62%, rgb(7 6 5 / 0.5) 84%, rgb(7 6 5 / 0.2) 100%); }
  .table__scrim { background: linear-gradient(0deg, rgb(10 9 7 / 0.95) 0%, rgb(10 9 7 / 0.88) 62%, rgb(10 9 7 / 0.45) 84%, rgb(10 9 7 / 0.2) 100%); }
}

/* ---- Phone (640px and narrower) ---- */
@media (max-width: 640px) {
  .site-head--home { padding-inline: var(--sc-gutter); }
  .evening-clock span { display: none; }      /* the time alone: the course name doesn't fit beside the logo */

  /* The words and the hours line stack from the bottom, above the quick bar, so a long hours line
     ("Closed for today · Open Tuesday from 17:30" wraps to two lines) pushes the words up instead of
     running into the buttons. */
  .hero { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--sc-gutter) calc(3.5rem + 1.25rem); }
  .hero__copy, .hero .hours-now { position: relative; inset: auto; }
  .hero .hours-now { margin-top: 1.4rem; }
  /* The dark band starts just above the words, wherever they end up (a small phone, a notice bar,
     a two-line hours line all move them), instead of at a fixed share of the photo. */
  .hero__scrim { background: linear-gradient(180deg, rgb(12 11 9 / 0.6) 0%, rgb(12 11 9 / 0) 14%); }
  .hero__copy::before { content: ""; position: absolute; z-index: -1; inset: -7rem calc(-1 * var(--sc-gutter)) -30rem; pointer-events: none;
    background: linear-gradient(180deg, rgb(12 11 9 / 0) 0, rgb(12 11 9 / 0.5) 3.5rem, rgb(12 11 9 / 0.92) 7rem, rgb(12 11 9 / 0.97) 100%); }
  .hero h1 { font-size: clamp(3.4rem, 15.5vw, 5rem); }
  .hero__lede { margin-top: 1rem; font-size: 1.05rem; }
  .hero .ctas { flex-wrap: wrap; margin-top: 1.5rem; }
  .hero .ctas .btn { flex: 1 1 auto; padding-inline: 1rem; }

  .act__body { grid-template-columns: minmax(0, 1fr); column-gap: 0; }   /* one column: at 280px the twelve columns' gaps alone were wider than the screen */
  .act h2.poster { font-size: clamp(2.8rem, 13vw, 4rem); }
  .act--aperitivo .media { height: 118vw; }
  .act--aperitivo .ph-back { width: 74%; }
  .act--aperitivo .ph-front { width: 56%; box-shadow: 0 0 0 7px var(--ground, var(--sc-canvas)), var(--sc-e3); }
  .pasta__photo { min-height: 62svh; }
  .act--oven .oven__photo, .act--oven .copy { grid-column: 1 / -1; }
  .act--oven .oven__photo img { aspect-ratio: 4 / 3; object-position: 50% 58%; }
  .act--oven .copy { margin-top: 2.5rem; }
  .signature b { font-size: 1.45rem; }
  .signature span { font-size: 1.05rem; }

  .dinner__copy, .table__copy { bottom: calc(3.5rem + 2rem); }   /* above the quick bar */
  .dinner__copy h2.poster, .table__copy h2.poster { font-size: clamp(2.8rem, 12.5vw, 4rem); }
  .dinner__more p { font-size: 1.05rem; }
  .act--table { height: 100svh; }

  .act--close h2.poster { font-size: clamp(3.4rem, 15vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .dinner__photo img { transform: none; }
  /* No circle reveal here, so the photo fades in over the same stretch instead (the dark pause stays dark). */
  .dinner__photo { opacity: clamp(0, calc((var(--sc-p, 1) - 0.28) * 3.4), 1); }
  .evening-clock { transition: none; }
}