/* ============================================
   RESPONSIVE — ALL MEDIA QUERIES
   ============================================
   Loaded after styles.css so it wins on equal specificity. Everything here
   targets the current Spaghett chrome; the previous file was inherited from
   Counter- and referenced markup this site does not have.

   Breakpoints:
     1024px — tablet / small laptop: sample-menu columns start to crowd
      900px — the main phone/tablet layout switch
      600px — narrow phones
   ============================================ */


/* ============================================
   1024px — the sample menu stops being a broadsheet
   ============================================ */
@media (max-width: 1024px) {
    /* Four course columns become two */
    .sample-menu-courses {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 22px;
    }

    .alla-carta-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Taller so the extra column-wrapping fits. Explicit heights, not auto:
       the base rule centres with inset:0 + margin:auto, which stretches an
       auto height to fill instead of fitting. max-height still caps them. */
    .menu-sheet {
        width: 88vw;
        height: 82vh;
    }

    .menu-sheet--tall {
        width: 74vw;
        height: 84vh;
    }
}


/* ============================================
   900px — phone / small tablet
   ============================================ */
@media (max-width: 900px) {

    /* Photographs are a stack on a phone rather than a trail, and a stack is
       looked at rather than glanced past — so they run larger here. Desktop
       keeps the value tuned for it in styles.css. */
    :root {
        --trail-w: min(62vw, 320px);
    }

    /* ---------- TAGLINE ----------
       Still shows during the load then fades (main.js). Narrow it and shrink
       it so it clears the menu button and address while it is up. */
    .site-tagline {
        width: min(70%, 320px);
        font-size: 1em;
    }

    /* ---------- GRID CHROME ----------
       On a phone the corners carry only the essentials; the address, email,
       hours and social links all live in the menu now (see index.html), so
       their cells are dropped here.

       Kept: the hand (brand mark), the menu button, one phone number in the
       top-right corner, and Reservations centred at the foot. */

    /* Address cell — into the menu */
    .site-grid-top-right {
        display: none;
    }

    /* Email + hours — into the menu; the cell moves up to the top-right corner
       and keeps only the phone number. */
    .site-grid-bottom-right {
        grid-row: 1;
        grid-column: 3;
        justify-content: flex-start;
    }

    .site-grid-bottom-right .grid-address {
        display: none;   /* email + the two hours lines */
    }

    /* The phone number is the only line left in that corner and it is one
       thing, so it holds its line rather than breaking over the area code. */
    .site-grid-bottom-right .grid-phone {
        white-space: nowrap;
    }

    /* Copyright + socials + extra links — into the menu */
    .site-grid-bottom-left {
        display: none;
    }

    /* One call to action: Reservations. The cell runs the full width of the
       grid now rather than sitting in the middle column, so the button
       centres on the screen instead of on a third of it — the two corner
       cells above it are the only things that still want columns. */
    .site-grid-center {
        display: flex;
        grid-column: 1 / -1;
    }

    .site-grid-center .grid-cta:last-child {
        display: none;
    }

    /* Filled rather than left open: the photograph stack runs behind this
       corner of the screen, and a dashed outline over a photograph is not a
       button any more. */
    .site-grid-center .grid-cta {
        background-color: var(--bg);
    }

    /* ---------- DEFINITION SITS AT THE TOP ----------
       Top-aligned rather than centred, which leaves the lower half of the
       screen free for the photograph stack (see MOUSE TRAIL below).

       The padding is what holds the house clear of the menu button. That
       button is fixed at top: 3.5em of its own 0.8em type — about 45px — and
       is 40px deep before its -20deg tilt widens the corner it occupies, so
       it finishes a little under 90px down. */
    .hero-definition-overlay {
        justify-content: flex-start;
        padding-top: 70px;
    }

    /* ---------- MOUSE TRAIL → A PHOTOGRAPH STACK ----------
       There is no pointer to trail on a phone, so main.js switches modes at
       this same 900px and piles the photographs up instead, one at a time,
       in the space the definition leaves below itself.

       That space is what the layer becomes: main.js writes the definition's
       lower edge into --trail-stack-top on every drop, so the area tracks the
       full story opening and a turn of the phone. The percentage is only the
       value that holds until the first measurement. Each photograph then
       centres in it — they are a stack, so they all share the one spot. */
    .mouse-trail {
        top: var(--trail-stack-top, 58%);
    }

    .mouse-trail-img {
        top: 50%;
        left: 50%;
    }

    /* ---------- DEFINITION / FULL STORY ----------
       The house is small enough here to sit right on the logo, so its gap
       goes with the size. main.js measures both before the intro and hands
       the properties back to this stylesheet afterwards, so the resting
       values it settles onto and the one the full story collapses from are
       the ones set here. */
    .definition-house {
        width: 200px;
        margin-bottom: 0;
    }

    /* The story lines (.story-line) carry the same 1.25em as the intro line
       but were never resized here, so on a phone they stayed larger than
       everything around them. Size both together, and tighten the leading so
       the opened story does not run off the screen. */
    .definition-cta {
        font-size: 0.8em;
    }

    .definition-text,
    .story-line {
        font-size: 1em;
        line-height: 1.6;
    }

    /* ---------- MENU: FILLS THE PAGE, INSIDE THE FRAME ----------
       The centred card does not suit a phone, but a true full-bleed panel
       would paint over the border and — being green — swallow the green hand
       icon in the corner. So the whole menu box is inset instead:

         · sides + bottom pulled in by the frame clearance, so the border shows
         · top pushed below the chrome row, so the hand and phone stay on the
           cream page above it

       The frame (z 10000) and hand sit below the menu (z 10002) in the stack,
       but the inset keeps the menu clear of them, so no z-index juggling is
       needed. The sheets are absolute inset:0 within this box, so they inherit
       the same clearance. */
    .site-menu {
        inset: calc(var(--grid-pad) + 58px) var(--grid-pad) var(--grid-pad);
        align-items: stretch;
        padding: 0;
        margin: 0;
    }

    .site-menu-panel {
        max-width: none;
        width: 100%;
        height: 100%;
        border: 0;
        padding: 40px 24px 32px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Inner border framed the whole screen at full-bleed — a stray line now */
    .site-menu-panel::before {
        display: none;
    }

    .site-menu-link {
        font-size: 1.6em;
    }

    /* ---------- SHEETS: FILL THE MENU BOX ----------
       100% of the inset .site-menu, not 100vw, so they stay inside the frame
       and below the chrome row with it. */
    .menu-sheet,
    .menu-sheet--tall {
        --sheet-inset: 0px;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

    .menu-sheet-inner {
        padding: 30px 22px 34px;
    }

    /* ---------- SAMPLE MENU ----------
       Header stacks, courses go single column, alla carta single column. */
    .sample-menu-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sample-menu-courses {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .alla-carta-cols {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ============================================
   600px — narrow phones
   ============================================ */
@media (max-width: 600px) {
    /* The phone sits alone in the top-right corner now; keep it compact */
    .site-grid-bottom-right {
        font-size: 0.85em;
    }

    /* Smaller still so the opened full story fits a narrow screen */
    .definition-text,
    .story-line {
        font-size: 0.9em;
        line-height: 1.55;
    }

    .site-menu-link {
        font-size: 1.35em;
    }

    /* Secondary links wrap tightly on a narrow panel */
    .site-menu-secondary {
        gap: 10px 14px;
    }

    .menu-sheet-title {
        font-size: 1.5em;
    }
}