/* Pulls in the shared foundation (reset, loader, brand-mark, site-grid, hero
   shell) so index.html only needs to link this one stylesheet. The token
   overrides below feed straight into those base.css rules. */
@import url('base.css');

:root {
    /* base.css tokens, overridden with Spaghett's palette.

       --bg/--fg point at the named pair below rather than carrying the hex
       themselves, so a scope can swap the two over (see .site-menu). Writing
       `--bg: var(--fg)` inside one scope would be a cycle — both would
       resolve against that same scope — hence the separate source names. */
    --bg: var(--color-cream);
    /* Same colour as --bg, as channels — a gradient needs a zero-alpha stop
       of this exact colour, so keep the two in step. */
    --bg-rgb: 245, 242, 237;
    --fg: var(--color-green-dark);
    --fg-70: rgba(42, 42, 42, 0.70);
    --fg-30: rgba(42, 42, 42, 0.30);
    --fg-20: rgba(42, 42, 42, 0.20);
    --accentColor: #ff6d00;
    /* Two faces, both from the Typekit sheet in index.html. base.css also
       defines --font-text; this site does not use it, so it is deliberately
       left unset here rather than pointing at a third family. */
    --font-sans: "acumin-pro-wide", sans-serif;
    --font-display: "roca", sans-serif;    /* 300, normal */
    --font-italic: "roca", sans-serif;     /* 400, italic — the CTA voice */
    --font-form: "scribo-caps", sans-serif; /* 500 — filled into form inputs */

    /* Spaghett-specific palette (no base.css equivalent). --color-cream and
       --color-green-dark are the source of --bg/--fg above. */
    --color-cream: #f5f2ed;
    --color-green-dark: #354000;
    --color-text-light: #ffffff;
    --color-accent: #8b7355;
    --color-accent-hover: #6d5a44;
    --color-accent-orange: #ff6d00;
    --transition: all 0.3s ease;

    /* Decorative frame — img/border.svg is one 37.44x19 checkerboard tile, so
       --frame-w is its own height and must not be changed independently of
       the file. The tile carries no width/height attributes, only a viewBox,
       so its width is derived rather than left to `auto`. */
    --frame-w: 19px;
    --frame-tile: calc(var(--frame-w) * 37.44 / 19);
    --frame-gap: 10px;   /* clearance between the frame and the chrome inside it */

    /* Overrides base.css (10px) so every grid cell clears the frame */
    --grid-pad: calc(var(--frame-w) + var(--frame-gap));

    /* Top scrim. Holds flat past the brand mark and the top grid row (the
       mark is the deepest, at --grid-pad + its 44px), then fades out. */
    --top-scrim-solid: 90px;
    --top-scrim-h: 220px;

    /* Grid CTA buttons — width hugs the label, height is fixed. */
    --btn-h: 56px;
    --btn-pad-x: 34px;

    /* The dot flanking each CTA label. --cta-dot-rise lifts it to the middle
       of the capitals: flexbox centres it on the line box, whose middle sits
       below the middle of the caps because the box carries descender space
       the capitals never use. In em, so it holds at any CTA size. */
    --cta-dot: 5px;
    --cta-dot-gap: 12px;
    --cta-dot-rise: 0.15em;

    /* Menu. The button clears the brand mark on its left; --menu-dim is how
       far the page behind the panel drops rather than being covered over. */
    --menu-btn-h: 40px;
    --menu-btn-left: calc(var(--grid-pad) + 58px);
    --menu-dim: 0.2;

    /* Sheet clearance from the viewport edge. The tilt and the panel's drop
       are timing-side concerns and live in main.js. */
    --sheet-inset: 40px;

    /* Mouse trail photograph. Its width also sets how far the pointer has to
       travel between drops — main.js measures the last one rather than
       repeating this clamp, so the two cannot drift apart. */
    --trail-w: clamp(200px, 25vw, 350px);

    /* Length of the frame's vertical runs */
    --vh: 100vh;
}

/* Dynamic viewport height keeps the vertical runs honest as mobile browser
   chrome shows and hides. */
@supports (height: 100dvh) {
    :root {
        --vh: 100dvh;
    }
}

/* ---------- COLOUR INVERSION ----------
   Swaps the palette for a subtree: green becomes the background, cream the
   ink. Everything downstream reads var(--bg)/var(--fg), so backgrounds,
   borders, text and currentColor marks all follow from this one class.

   It has to re-point the tokens at the named pair rather than at each other —
   `--bg: var(--fg)` here would be a cycle, since both would resolve against
   this same scope. */
.color-invert {
    --bg: var(--color-green-dark);
    --fg: var(--color-cream);
}

html {
    scroll-behavior: auto;
}

body {
    font-family: var(--font-sans);
    color: var(--fg);
    background-color: var(--bg);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    opacity: 0.7;
}

.link-orange {
    color: var(--color-accent-orange);
}


/* === CONTAINER === */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.container-full {
    width: 100%;
    padding: 0;
}
.border-right {
    border-right: 2px dashed var(--color-green-dark) !important;
}
.border-left {
    border-left: 2px dashed var(--color-green-dark) !important;
}
/* === NAVIGATION === */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--bg);
    border-bottom: 2px dashed var(--color-green-dark);
    backdrop-filter: blur(10px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, padding 0.3s ease;
}

.menu_btn {
    background: transparent;
    letter-spacing: .5px;
    font-size: 16px;
    font-family: var(--font-sans);
    height: 70px;
    border: 0px;
    padding: 0 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.menu_btn:hover {
    background-color: var(--color-green-dark);
    color: var(--bg);
    opacity: 1;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.logo-img {
    height: 70px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-link {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-light);
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--color-accent);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.menu-toggle span {
    width: 25px;
    height: 2px;
    background-color: var(--color-text-light);
    transition: var(--transition);
}

.mobile-menu {
    position: fixed;
    top: 100px;
    right: -100%;
    width: 100%;
    height: calc(100vh - 100px);
    background-color: rgba(42, 42, 42, 0.98);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 999;
    transition: right 0.4s ease;
}

.mobile-menu.active {
    right: 0;
}

.mobile-link {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 32px;
    font-weight: 300;
    color: var(--color-text-light);
    letter-spacing: 2px;
}

/* === HERO SECTION === */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-green-dark);
}

.hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    opacity: 0;
    filter: blur(20px);
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    flex-direction: column;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(42, 42, 42, 0.3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-img {
    height: auto;
    filter: brightness(0) invert(1) blur(10px);
    z-index: 2;
    margin-bottom: 30px;
    opacity: 0;
}

.hero-btn {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 50px;
    background-color: rgba(245, 242, 237, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px dashed var(--bg);
    color: var(--bg);
    opacity: 0;
    text-decoration: none;
    transition: var(--transition);
    z-index: 2;
    border-radius: 10px;
}

.hero-btn:hover {
    color: var(--bg);
    background-color: var(--color-green-dark);
    opacity: 1;
}

.scroll-indicator {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 52px;
    z-index: 3;
    animation: float 2s ease-in-out infinite;
    opacity: 0;
}

.scroll-indicator svg {
    width: 100%;
    height: 100%;
}

@keyframes float {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

/* === WELCOME SECTION === */
.welcome {
    padding: 120px 0;
    background-color: var(--bg);
}

.welcome-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.icon-wrapper {
    max-width: 120px;
}

.about-text {
    max-width: 900px;
    margin: 0 auto;
}

.section-title {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: 0.5px;
    margin-bottom: 32px;
    color: var(--color-green-dark);
}

.about-description {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.9;
    font-weight: 400;
    color: var(--fg);
    text-align: center;
}

.hand-icon {
    width: 100%;
    filter: brightness(0) saturate(100%) invert(40%) sepia(15%) saturate(800%) hue-rotate(350deg);
}

.cta-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    font-family: var(--font-italic);
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 18px 45px;
    border: 2px dashed var(--color-green-dark);
    transition: var(--transition);
    display: inline-block;
}

.btn-primary {
    background-color: var(--color-green-dark);
    color: var(--color-text-light);
}

.btn-primary:hover {
    background-color: var(--bg);
    color: var(--color-green-dark);
    opacity: 1;
}

img.house-icon {
    max-width: 410px;
}
.btn-secondary {
    background-color: transparent;
    color: var(--color-green-dark);
}

.btn-secondary:hover {
    background-color: var(--color-green-dark);
    color: var(--color-text-light);
    opacity: 1;
}

/* === MARQUEE SECTION === */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: 50px 0;
    position: relative;
    border-bottom: 2px dashed var(--color-green-dark);
}

.marquee-content {
    display: inline-flex;
    text-transform: uppercase;
    gap: 3em;
    will-change: transform;
    align-items: center;
}

.marquee-content span {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 4.5em;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--color-green-dark);
}

.marquee-icon {
    height: 3.5em;
    width: auto;
    vertical-align: middle;
    display: inline-block;
}

.marquee-icon.flipped {
    transform: scaleX(-1);
}

/* === GALLERY SECTION === */
.gallery {
    background-color: var(--bg);
    border-top: 2px dashed var(--color-green-dark);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 0;
}

.gallery-item {
    padding: 30px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    border-right: 2px dashed var(--color-green-dark);
    border-bottom: 2px dashed var(--color-green-dark);
}

.gallery-item:nth-child(4n) {
    border-right: none;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

/* === FOOTER === */
.footer {
    padding-bottom: 50px;
    background-color: var(--color-green-dark);
    color: var(--color-text-light);
    position: relative;
}
.back-to-top-wrapper {
    position: absolute;
    width: 100%;
}
.back-to-top {
    width: 60px;
    height: 60px;
    background-color: var(--bg);
    border: 2px dashed var(--color-green-dark);
    color: var(--color-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto 60px;
    transition: var(--transition);
    margin-top: -30px;
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

.back-to-top:hover {
    color: var(--bg);
    background-color: var(--color-green-dark);
}

.footer-logo {
    text-align: center;
    margin-bottom: 10px;
}

.footer-logo-img {
    max-width: 450px;
    height: auto;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}
.first-column {
    padding-top: 40px;
}
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    margin-bottom: 30px;
}

.footer-heading {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.footer-column:not(.footer-links) p {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 36px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: 1px;
}

.footer-links {
    flex-direction: row;
    gap: 1em;
    font-size: 0.9em;
}

.footer-links p {
    position: relative;
    padding-right: 1em;
}

.footer-links p:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: 0;
    color: var(--color-text-light);
}

/* ============================================
   DECORATIVE SITE FRAME — img/border.svg
   ============================================
   A plain rectangle around the viewport: top and bottom runs span the full
   width and own all four corners, the side runs stop a --frame-w short at
   each end so they butt against them. Overlapping instead would land two
   different tile phases on the same corner.

   border.svg is one 37.44x19 checkerboard tile, so the vertical runs are the
   same tile given a quarter turn. With the origin at the element's top-left,
   `rotate(90deg) translateY(-1 * --frame-w)` lands a band of --frame-w
   thickness at (left, top) running downwards for `width` pixels.
   ============================================ */
.site-frame {
    position: fixed;
    inset: 0;
    /* Above the loader (9999) so the frame can draw itself while the intro is
       still on screen, but below the definition overlay (10001). */
    z-index: 10000;
    overflow: hidden;
    pointer-events: none;
}

.site-frame span {
    position: absolute;
    height: var(--frame-w);
    background-image: url('../img/border.svg');
    background-repeat: repeat-x;
    background-size: var(--frame-tile) var(--frame-w);
}

/* ---------- HORIZONTAL RUNS (these own the corners) ---------- */
.site-frame-top {
    top: 0;
    left: 0;
    right: 0;
}

.site-frame-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

/* ---------- VERTICAL RUNS (the tile, quarter-turned) ---------- */
.site-frame-left,
.site-frame-right {
    top: var(--frame-w);
    width: calc(var(--vh) - var(--frame-w) * 2);
    transform-origin: 0 0;
    transform: rotate(90deg) translateY(calc(-1 * var(--frame-w)));
}

.site-frame-left {
    left: 0;
}

.site-frame-right {
    left: calc(100% - var(--frame-w));
}

.site-frame-top,
.site-frame-right {
    -webkit-clip-path: inset(0% 0% 100% 0%);
    clip-path: inset(0% 0% 100% 0%);
}

.site-frame-bottom,
.site-frame-left {
    -webkit-clip-path: inset(100% 0% 0% 0%);
    clip-path: inset(100% 0% 0% 0%);
}

.brand-mark {
    top: var(--grid-pad);
    left: var(--grid-pad);
    z-index: 10000;
}
.site-tagline {
    position: fixed;
    top: var(--grid-pad);
    font-family: var(--font-display);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    width: 34%;
    text-align: center;
    font-size: 1.25em;
    font-weight: 300;
    line-height: 1.3;
    color: var(--fg);
    pointer-events: none;
    opacity: 0;   
}

.brand-mark img {
    width: 44px;
}

/* ============================================
   HERO DEFINITION OVERLAY
   ============================================
   base.css centres this overlay and sets pointer-events: none on it, so the
   CTA has to opt back in to be clickable.
   ============================================ */

/* MUST stay above the loader curtain (9999). The house and logo are the
   opening act — they show *on* the curtain, before it lifts. Drop this below
   9999 and they are painted behind it, so the only things visible until the
   curtain goes are the brand mark and border (both 10000), and the overlay
   then appears all at once mid-resize. base.css already sets 10001; this
   restates it because a lower value looks harmless and is not. */
.hero-definition-overlay {
    z-index: 10001;
}

.definition-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 720px;
}

/* Hidden here rather than only in main.js so it cannot flash before the
   intro runs — the overlay sits above the loader curtain. */
.definition-house {
    width: clamp(200px, 700px, 300px);
    height: auto;
    margin-bottom: 28px;
    opacity: 0;
}

/* Hidden here as well as in main.js so it cannot flash before the intro
   runs — the overlay sits above the loader curtain. */
.definition-phonetic {
    opacity: 0;
}

.definition-logo {
    width: clamp(300px, 700px, 500px);
    height: auto;
}

/* Copy is held narrower than the logo and icon above it. Hidden at rest for
   the same reason as the logo above. */
.definition-text {
    opacity: 0;
    max-width: 900px;
    margin-top: 0;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 1.25em;
    font-weight: 300;
    line-height: 1.8;
    color: var(--fg);
}

/* Collapsed to nothing until opened — the lines inside still have their real
   height, which is what main.js measures to work out how far to shift. */
.definition-story {
    width: 100%;
    max-width: 900px;
    height: 0;
    overflow: hidden;
}

.story-line {
     margin-top: 0;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 1.25em;
    font-weight: 300;
    line-height: 1.8;
    color: var(--fg);
    opacity: 0;
}

.definition-cta {
    margin-top: 20px;
    padding: 0 0 3px;
    background: none;
    border: 0;
    color: var(--fg);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.95em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;   /* the overlay itself is pointer-events: none */
    /* Lays the two dots out either side of the label */
    display: inline-flex;
    align-items: center;
    gap: var(--cta-dot-gap);
}

.definition-cta:hover {
    border-bottom-color: var(--fg);
}


.grid-cta::before,
.grid-cta::after,
.definition-cta::before,
.definition-cta::after,
.menu-btn::before,
.menu-btn::after,
.site-menu-link::before,
.site-menu-link::after {
    content: '';
    flex: 0 0 auto;
    width: var(--cta-dot);
    height: var(--cta-dot);
    border-radius: 50%;
    background-color: currentColor;
    transform: translateY(calc(-1 * var(--cta-dot-rise)));
}

/* ============================================
   TOP SCRIM
   ============================================
   Veils whatever is scrolling underneath so hero/main-content imagery never
   reads through the top grid chrome.

   Placement is all z-index: above .main-content (auto) but below .site-grid
   and .brand-mark (100) and well below .site-frame (10000), so it hides the
   content without dimming the chrome or the border sitting on top of it.
   ============================================ */
.top-scrim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--top-scrim-h);
    z-index: 50;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        var(--bg) 0,
        var(--bg) var(--top-scrim-solid),
        rgba(var(--bg-rgb), 0) 100%
    );
}

@media (max-width: 900px) {
    /* responsive.css drops the top-centre cell to the foot of a taller first
       row (padding-bottom: 80px), so the flat part has to reach further. */
    :root {
        --top-scrim-solid: 175px;
        --top-scrim-h: 320px;
    }
}

/* ============================================
   GRID CTA BUTTONS
   ============================================
   Dashed rectangles: the width hugs the label, only the height is fixed.
   A dot sits either side of the label — see CTA DOTS above.
   ============================================ */
.grid-cta {
    font-family: var(--font-italic);
    font-style: italic;
    position: relative;
    box-sizing: border-box;
    height: var(--btn-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cta-dot-gap);
    padding: 0 var(--btn-pad-x);
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-align: center;
    color: var(--fg);
    border: 2px dashed var(--color-green-dark) !important;
    padding-top: 5px;
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* Inverted on hover. The fill is a background-colour, so it paints behind
   every edge layer and leaves the dash reading over the top. */
.grid-cta:hover,
.grid-cta:focus-visible {
    background-color: var(--fg);
    color: var(--bg);
    opacity: 1;   /* base.css fades links to 0.6 on hover */
}


/* ============================================
   MENU
   ============================================
   The button is fixed rather than a grid cell: it has to outrank the panel it
   opens so it can serve as the close control, and a cell could not do that
   from inside .site-grid.
   ============================================ */
.menu-btn {
    position: fixed;
    top: 3.5em;
    left: 4em;
    z-index: 10003;   
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cta-dot-gap);
    height: var(--menu-btn-h);
    padding: 0 20px;
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 400;
    font-size: 0.8em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fg);
    background-color: var(--bg);
    border: 2px dashed var(--color-green-dark);
    cursor: pointer;
    opacity: 0;   /* main.js brings it in with the rest of the chrome */
    transition: background-color 0.3s ease, color 0.3s ease;
    transform: rotate(-20deg);
}

.menu-btn:hover,
.menu-btn:focus-visible {
    background-color: var(--fg);
    color: var(--bg);
    opacity: 1;
}

.site-menu {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(var(--grid-pad) + 30px);
    opacity: 0;
    margin-left: 3.5em;
    margin-top: .5em;
}

.site-menu[hidden] {
    display: none;
}

/* Double rule: the outer border is the element's own, the inner one is drawn
   by ::before sitting a few pixels inside it. */
.site-menu-panel {
    position: relative;
    width: 100%;
    max-width: 760px;
    padding: 70px 60px 44px;
    background-color: var(--bg);
    border: 1px solid var(--fg);
    text-align: center;
}

.site-menu-panel::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid var(--fg);
    pointer-events: none;
}

.site-menu-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.site-menu-link {
    /* buttons now, not links: they open a sheet rather than navigate */
    display: inline-flex;
    align-items: center;
    gap: var(--cta-dot-gap);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;

    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: 2em;
    line-height: 1.2;
    color: var(--fg);
}

.site-menu-hours {
    margin-top: 40px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--fg);
}

/* ---------- SECONDARY ROW ---------- */
.site-menu-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 46px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg);
}

/* Separator lives on the link so it travels with it when the row wraps */
.site-menu-secondary a,
.site-menu-secondary button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    /* the Contact trigger is a <button>; strip it back to look like the links */
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.site-menu-secondary > :not(:last-child)::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    transform: translateY(calc(-1 * var(--cta-dot-rise)));
}

/* ---------- PAGE BEHIND THE PANEL ----------
   The dimming itself is a GSAP tween, not a rule here: main.js has already
   written inline opacities onto these during the intro, and inline styles
   would win over anything declared in the stylesheet. All that is left for
   CSS is taking the faded page out of the click path. */
body.menu-open .site-grid,
body.menu-open .hero-definition-overlay,
body.menu-open .site-tagline,
body.menu-open .main-content,
body.menu-open .definition-cta {
    pointer-events: none;
}


/* ============================================
   MENU SHEETS
   ============================================
   A sheet of paper laid over the menu: light stock against the green panel,
   the border strip along its top edge, a shadow underneath, and a small
   random tilt so it never lands twice the same way.

   Centred with inset + auto margins rather than a translate, deliberately —
   main.js owns the transform for the tilt and the drop, and a centring
   translate here would be overwritten by it.
   ============================================ */
.menu-sheet {
    /* Back to the light palette; .site-menu inverted it for the panel */
    --bg: var(--color-cream);
    --fg: var(--color-green-dark);

    position: absolute;
    inset: 0;
    margin: auto;
    box-sizing: border-box;

    width: 70vw;
    height: 40vw;
    max-width: calc(100vw - var(--sheet-inset) * 2);
    max-height: calc(var(--vh) - var(--sheet-inset) * 2);

    padding-top: var(--frame-w);   /* clears the strip along the top */
    background-color: var(--bg);
    background-image: url('../img/border.svg');
    background-repeat: repeat-x;
    background-position: left top;
    background-size: var(--frame-tile) var(--frame-w);
    box-shadow: 0 0 5px 1px rgba(53, 64, 0, 0.28);
    color: var(--fg);
    opacity: 0;   /* main.js deals the sheet in */
}

.menu-sheet[hidden] {
    display: none;
}

/* About and FAQ stand taller than they are wide */
.menu-sheet--tall {
    width: 42vw;
    height: 58vw;
}

.menu-sheet-inner {
    height: 100%;
    overflow-y: auto;
    padding: 34px 46px 40px;
    text-align: left;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--color-green-dark) var(--bg);
}

/* WebKit — solid green thumb on a background-coloured track, nothing else */
.menu-sheet-inner::-webkit-scrollbar,
.menu-sheet-inner::-webkit-scrollbar-corner {
    width: 8px;
    background: var(--bg);
    border-radius: 0;
}

.menu-sheet-inner::-webkit-scrollbar-track {
    background: var(--bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.menu-sheet-inner::-webkit-scrollbar-thumb {
    background: var(--color-green-dark);
    border: 0;
    border-radius: 0;
}

.menu-sheet-close {
    position: absolute;
    top: calc(var(--frame-w) + 10px);
    right: 14px;
    z-index: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.menu-sheet-close:hover {
    opacity: 1;
}

/* ============================================
   SAMPLE MENU (inside the wide sheet)
   ============================================ */
.sample-menu-head {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;
}

/* The two boxes flanking Prix Fixe */
.menu-box {
    border: 1px solid var(--fg);
    background-color: var(--bg);
    padding: 10px 14px 12px;
    text-align: center;
}
.sample-note {
    color: var(--fg);
}
/* A filled bar, reversed out of whichever box it sits in: the tokens are read
   the other way round here, so it flips again inside a .color-invert box.
   Negative margins take it out to the box's inner edges. */
.menu-box-title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: 1.05em;
    line-height: 1.35;
    margin: -10px -14px 8px;
    padding: 4px 14px 5px;
}
.menu-sheet--tall p {
    margin-bottom: 10px;
    line-height: 1.5;
}
.menu-box p,
.focaccia-add {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.focaccia-add {
    font-style: italic;
}

.prix-fixe {
    text-align: center;
}
.prix-fixe-title {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 400;
    font-size: 1.9em;
    line-height: 1.1;
}
.font-italic {
        font-family: var(--font-italic) !important;
}
.prix-fixe p {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    margin: 2px 0 0;
}

.prix-fixe-note {
    font-style: italic;
}

/* ---------- COURSES ---------- */
.sample-menu-courses {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 26px;
}

.course-title {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 400;
    font-size: 1.35em;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 14px;
}

.dish {
    position: relative;
    margin-bottom: 12px;
}

.dish-line {
    margin: 0;
    line-height: 1.2;
}

.dish-name {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
}

.dish-detail {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 400;
}

.dish-sub {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    margin: 0;
}
.dish.is-veg::before,
.veg-key {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
}

.dish.is-veg::before {
    position: absolute;
    left: -11px;
    top: 5px;
}

/* ---------- ALLA CARTA ---------- */
.alla-carta {
    border-top: 1px solid var(--fg-20);
    padding-top: 18px;
    margin-bottom: 22px;
}

.alla-carta-note {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    text-align: center;
    margin: -8px 0 16px;
}

.alla-carta-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* ---------- FOOT ---------- */
.sample-menu-foot {
    border-top: 1px solid var(--fg-20);
    padding-top: 14px;
    text-align: center;
}

.sample-menu-foot p {
    font-family: var(--font-sans);
    font-weight: 400;
    margin: 0 0 5px;
}

.foot-rule {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.foot-veg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 9.5px;
}

.foot-fine {
    font-size: 8.5px;
    line-height: 1.5;
    opacity: 0.7;
}

/* The note under the menu, in the italic face */
.sample-menu-copy {
    text-align: center;
    padding-bottom: 0px;
    border-bottom: 1px solid var(--fg-20);
    margin-bottom: 19px;
}

.sample-menu-copy p {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.7;
}

/* ---------- SHEET TYPE ---------- */
.menu-sheet-title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: 1.9em;
    line-height: 1.2;
    margin-bottom: 18px;
}

.menu-sheet-lede {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 26px;
}

.menu-sheet-inner {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 5px;
}

.menu-sheet-note {
    opacity: 0.75;
}

.menu-sheet-courses {
    list-style: none;
    margin-bottom: 26px;
}

.menu-sheet-courses li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fg-20);
}

.course-name {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: 1.25em;
}

.course-note {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    opacity: 0.7;
    text-align: right;
}

/* ---------- FAQ ACCORDION ----------
   One answer open at a time, so the sheet never needs to grow past its fixed
   height. main.js drives it off the markup rather than a fixed list, so
   adding or removing an item needs no code change. */
.faq-item + .faq-item {
    border-top: 1px solid var(--fg-20);
}

.faq-item h3 {
    margin: 0;
}

.faq-q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: 0;
    color: var(--fg);
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: 1.15em;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.faq-q:hover {
    opacity: 0.7;
}

/* Same +/x marker the grid's expand toggle uses */
.faq-q::after {
    content: '+';
    flex: 0 0 auto;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}

.faq-q.is-open::after {
    transform: rotate(45deg);
}

/* Collapsed until main.js opens it — including the first, which it opens
   without animating each time the sheet is dealt. */
.faq-a {
    height: 0;
    overflow: hidden;
}

.faq-a p:last-child {
    margin-bottom: 18px;
}


/* ============================================
   CONTACT FORM (inside the contact sheet)
   ============================================
   Each field is a label over a single underlined line. No functionality yet.
   ============================================ */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    text-align: left;
    margin-bottom: 30px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-field label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg);
    opacity: 0.8;
}

/* Single line: bottom rule only, transparent field, filled in scribo-caps */
.form-field input,
.form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 0 6px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--fg-30);
    border-radius: 0;
    color: var(--fg);
    font-family: var(--font-form);
    font-weight: 500;
    font-style: normal;
    font-size: 2em;
    line-height: 1;
    transition: border-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-field textarea {
    resize: vertical;
    min-height: 2.4em;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-bottom-color: var(--fg);
}

/* Submit — the CTA look, on its own line */
.contact-submit {
    align-self: flex-start;
    margin-top: 4px;
    padding: 10px 30px;
    background: none;
    border: 2px dashed var(--color-green-dark);
    color: var(--fg);
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 400;
    font-size: 0.9em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-submit:hover {
    background-color: var(--fg);
    color: var(--bg);
}

.contact-details {
    border-top: 1px solid var(--fg-20);
    padding-top: 18px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--fg);
}

.contact-details p {
    margin: 0 0 4px;
}

/* ============================================
   MOUSE TRAIL
   ============================================
   A viewport-sized backdrop that main.js drops photographs onto as the
   pointer crosses the page. Fixed, so the drops stay where they were laid
   rather than scrolling away mid-fall, and pointer-events: none throughout,
   so nothing here can take a hover or a click from the page.

   z-index 0 is what puts it behind the site. Every piece of chrome is well
   above it already (scrim 50, grid 100, frame 10000, menu 10002), and
   .main-content is lifted to 1 below so the page it backs is over it for
   certain rather than by painting order. Nothing below 0 — that falls behind
   the page background instead of in front of it.
   ============================================ */
.main-content {
    position: relative;
    z-index: 1;
}

.mouse-trail {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Sized by width alone — these are mixed crops, and letting the height
   follow keeps every one of them in its own proportion. main.js centres it
   on the pointer with xPercent/yPercent, so the transform is left free. */
.mouse-trail-img {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--trail-w);
    height: auto;
    opacity: 0;
    will-change: transform, opacity;
}