/* ═══════════════════════════════════════════════════════════════
   Friends Cafe YYC — Food Menu Page
   Replicates the layout of https://friendscafeyyc.ca/food-menu
   ═══════════════════════════════════════════════════════════════ */

/* Menu page wrapper — plaster-wall background defined in main.css
   (shared with .fc-home-page). */
.fc-menu-page {
    padding: 0 0 80px;
}

/* ── Hero (chalkboard panel containing title + tabs) ──────────────
   Spans the full viewport width from the bottom of the site header
   down to the top of the wooden frame on .fc-menu-groups. Uses a
   rotated landscape variant of the chalkboard image (7168×3584).
   A radial vignette stays layered on top for depth. */
.fc-menu-hero {
    /* Same chalk-drawn filter as .fc-home-events__heading on the homepage —
       embedded as a data URI so the Menu page doesn't need the inline <svg>
       defs block from front-page.php. */
    --fc-chalk-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='c' x='-5%25' y='-10%25' width='110%25' height='120%25'><feTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='3' seed='5' result='edgeNoise'/><feDisplacementMap in='SourceGraphic' in2='edgeNoise' scale='1.6' result='rough'/><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11' result='gapNoise'/><feColorMatrix in='gapNoise' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 3 -1.6' result='gapAlpha'/><feComposite in='rough' in2='gapAlpha' operator='out'/></filter></svg>#c");
    position: relative;
    text-align: center;
    margin: 0;
    padding: 52px clamp(24px, 5vw, 70px) 48px;
    background-color: #0e0b08;
    background-image:
        /* Soft center-bright vignette for depth over the chalkboard */
        radial-gradient(ellipse 120% 160% at 50% 50%,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0) 48%,
            rgba(0, 0, 0, 0.45) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow:
        inset 0 -6px 12px rgba(0, 0, 0, 0.55),
        inset 0 6px 12px rgba(0, 0, 0, 0.35);
    isolation: isolate;
    overflow: hidden;
}

/* Chalkboard image behind the title + tabs. Mirrors the homepage
   .fc-home-events::before treatment so the two chalkboard surfaces
   feel consistent. Zoomed in via background-size > cover. */
.fc-menu-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../images/chalkboard-landscape.png");
    background-size: 220%;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.7) contrast(1.55) saturate(0.85);
}

.fc-menu-hero__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3.25rem;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #f2e9dc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin: 0 0 30px;
    filter: var(--fc-chalk-filter);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.fc-menu-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.fc-menu-tab {
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Lato', 'Lora', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #f2e9dc;
    background: transparent;
    border: 2px solid rgba(242, 233, 220, 0.75);
    border-radius: 4px;
    padding: 8px 40px;
    cursor: pointer;
    transition: background-color var(--fc-transition), color var(--fc-transition), border-color var(--fc-transition);
    line-height: 1.4;
    filter: var(--fc-chalk-filter);
}

.fc-menu-tab:hover {
    background: rgba(242, 233, 220, 0.92);
    color: #1a1510;
    border-color: rgba(242, 233, 220, 0.92);
}

.fc-menu-tab.is-active {
    background: rgba(242, 233, 220, 0.92);
    color: #1a1510;
    border-color: rgba(242, 233, 220, 0.92);
}

.fc-menu-tab:focus-visible {
    outline: 2px solid rgba(242, 233, 220, 0.85);
    outline-offset: 3px;
}

/* ── Grid Container ──────────────────────────────────────────── */
.fc-menu-groups {
    /* Corkboard — warm tan base + fine cork flecks + light pockets + broad mottling.
       Scoped to the grid so the title/tabs above sit on the page background. */
    position: relative;
    background-color: #B8966B;
    background-image:
        /* Left/right vignette. */
        linear-gradient(to right,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.30) 8%,
            rgba(0, 0, 0, 0.10) 20%,
            rgba(0, 0, 0, 0) 32%,
            rgba(0, 0, 0, 0) 68%,
            rgba(0, 0, 0, 0.10) 80%,
            rgba(0, 0, 0, 0.30) 92%,
            rgba(0, 0, 0, 0.55) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.12  0 0 0 0 0.05  3 0 0 0 -1.6'/></filter><rect width='100%25' height='100%25' filter='url(%23d)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' stitchTiles='stitch' seed='17'/><feColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.80  0 0 0 0 0.58  2.2 0 0 0 -1.3'/></filter><rect width='100%25' height='100%25' filter='url(%23l)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' stitchTiles='stitch' seed='23'/><feColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.20  0 0 0 0 0.09  1 0 0 0 -0.3'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
    background-repeat: no-repeat, repeat, repeat, repeat;
    background-size: 100% 100%, 220px 220px, 220px 220px, 560px 560px;
    margin: 0 auto;
    padding: 120px 15px 60px;
    overflow: hidden;
}

/* Wooden frame rails — top (::before) and bottom (::after) of the corkboard.
   Different seeds on each rail so they look like two separate cuts of wood. */
.fc-menu-groups::before,
.fc-menu-groups::after {
    content: '';
    position: absolute;
    left: -14px;
    right: -14px;
    height: 38px;
    background-color: #5a3310;
    background-repeat: no-repeat, repeat-x, repeat-x, repeat-x, repeat, repeat-x;
    background-size: 100% 100%, 540px 100%, 680px 100%, 860px 100%, 320px 38px, 1200px 100%;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.fc-menu-groups::before {
    top: -14px;
    background-image:
        /* 3D lighting — top highlight to bottom shadow. */
        linear-gradient(to bottom,
            rgba(255, 222, 178, 0.28) 0%,
            rgba(255, 198, 148, 0.10) 12%,
            rgba(0, 0, 0, 0) 38%,
            rgba(0, 0, 0, 0.26) 82%,
            rgba(0, 0, 0, 0.58) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='540' height='38' preserveAspectRatio='none'><filter id='gr'><feTurbulence type='turbulence' baseFrequency='0.004 7' numOctaves='2' stitchTiles='stitch' seed='13'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.02  0 0 0 0 0.01  0 0 0 0.72 0'/></filter><rect width='100%25' height='100%25' filter='url(%23gr)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='680' height='38' preserveAspectRatio='none'><filter id='g2'><feTurbulence type='turbulence' baseFrequency='0.005 5.2' numOctaves='2' stitchTiles='stitch' seed='27'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.05  0 0 0 0 0.01  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g2)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='860' height='38' preserveAspectRatio='none'><filter id='lg'><feTurbulence type='fractalNoise' baseFrequency='0.004 3.2' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.72  0 0 0 0 0.48  0 0 0 0 0.22  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23lg)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='38' preserveAspectRatio='none'><filter id='fn'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='31'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.05  0 0 0 0 0.01  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23fn)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='38' preserveAspectRatio='none'><filter id='pl'><feTurbulence type='fractalNoise' baseFrequency='0.002 0.8' numOctaves='3' stitchTiles='stitch' seed='23'/><feColorMatrix values='0 0 0 0 0.50  0 0 0 0 0.28  0 0 0 0 0.10  0 0 0 0.38 0'/></filter><rect width='100%25' height='100%25' filter='url(%23pl)'/></svg>");
}

.fc-menu-groups::after {
    bottom: -14px;
    background-image:
        linear-gradient(to bottom,
            rgba(255, 222, 178, 0.28) 0%,
            rgba(255, 198, 148, 0.10) 12%,
            rgba(0, 0, 0, 0) 38%,
            rgba(0, 0, 0, 0.26) 82%,
            rgba(0, 0, 0, 0.58) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='540' height='38' preserveAspectRatio='none'><filter id='gr'><feTurbulence type='turbulence' baseFrequency='0.004 7' numOctaves='2' stitchTiles='stitch' seed='41'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.02  0 0 0 0 0.01  0 0 0 0.72 0'/></filter><rect width='100%25' height='100%25' filter='url(%23gr)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='680' height='38' preserveAspectRatio='none'><filter id='g2'><feTurbulence type='turbulence' baseFrequency='0.005 5.2' numOctaves='2' stitchTiles='stitch' seed='53'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.05  0 0 0 0 0.01  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g2)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='860' height='38' preserveAspectRatio='none'><filter id='lg'><feTurbulence type='fractalNoise' baseFrequency='0.004 3.2' numOctaves='2' stitchTiles='stitch' seed='19'/><feColorMatrix values='0 0 0 0 0.72  0 0 0 0 0.48  0 0 0 0 0.22  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23lg)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='38' preserveAspectRatio='none'><filter id='fn'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='43'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.05  0 0 0 0 0.01  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23fn)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='38' preserveAspectRatio='none'><filter id='pl'><feTurbulence type='fractalNoise' baseFrequency='0.002 0.8' numOctaves='3' stitchTiles='stitch' seed='37'/><feColorMatrix values='0 0 0 0 0.50  0 0 0 0 0.28  0 0 0 0 0.10  0 0 0 0.38 0'/></filter><rect width='100%25' height='100%25' filter='url(%23pl)'/></svg>");
}

.fc-menu-grid {
    display: none;
    position: relative;
    max-width: 1170px;
    margin: 0 auto;
}

.fc-menu-grid.is-active {
    display: block;
}

.fc-menu-grid-sizer,
.fc-menu-grid-item {
    width: calc(50% - 40px);
}

.fc-menu-grid-item {
    margin-bottom: 100px;
}

/* ── Category Card (aged parchment) ──────────────────────────── */
:root {
    --fc-paper-bg:      #F8EED4;
    --fc-paper-divider: rgba(60, 36, 10, 0.18);
}

.fc-menu-card {
    position: relative;
    isolation: isolate;
    padding: 0 18px 4px;
    border-radius: 6px;
}

/* Paper substrate: background, texture, shadow, and rough deckle edges
   live on ::before so the SVG displacement filter doesn't distort text.
   The negative inset gives the displacement filter extra pixels to chew
   on so the texture still fully covers the card after pixels are shifted. */
.fc-menu-card::before {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: -1;
    background-color: var(--fc-paper-bg);
    background-image:
        /* Subtle top vignette. */
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0.08) 10%,
            rgba(0, 0, 0, 0) 28%),
        /* Concentrated age spots — amber pooling in corners and across the sheet. */
        radial-gradient(ellipse 55% 40% at 18% 15%,  rgba(120, 75, 25, 0.30), transparent 65%),
        radial-gradient(ellipse 45% 35% at 82% 72%,  rgba(110, 65, 20, 0.26), transparent 65%),
        radial-gradient(ellipse 40% 30% at 64% 28%,  rgba( 95, 55, 15, 0.20), transparent 65%),
        radial-gradient(ellipse 50% 35% at 10% 88%,  rgba(100, 60, 18, 0.24), transparent 65%),
        /* Mid-scale mottling — irregular foxing blotches. */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' stitchTiles='stitch' seed='11'/><feColorMatrix values='0 0 0 0 0.40  0 0 0 0 0.22  0 0 0 0 0.05  0 0 0 0.50 0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>"),
        /* Horizontal paper grain — wider tile stretches the noise along the x axis. */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.17  0 0 0 0 0.04  0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 780px 520px, 380px 240px;
    border-radius: 6px;
    box-shadow:
        0 1px 2px rgba(40, 24, 9, 0.10),
        0 6px 18px rgba(40, 24, 9, 0.16),
        0 14px 28px rgba(40, 24, 9, 0.08);
    filter: url(#fc-paper-edge);
}

/* Vary the frayed-edge filter across cards so they don't all tear identically. */
.fc-menu-grid-item:nth-child(4n+2) .fc-menu-card::before { filter: url(#fc-paper-edge-2); }
.fc-menu-grid-item:nth-child(4n+3) .fc-menu-card::before { filter: url(#fc-paper-edge-3); }
.fc-menu-grid-item:nth-child(4n+4) .fc-menu-card::before { filter: url(#fc-paper-edge-4); }

/* Thumbtack — angled perspective view: domed head up top, metal shaft
   tilted into the paper below. Rendered as an inline SVG so the 3D
   geometry (elliptical dome + tapered shaft + ground shadow) is exact. */
.fc-menu-card::after {
    content: '';
    position: absolute;
    top: -22px;
    left: calc(50% - 22px);
    width: 44px;
    aspect-ratio: 300 / 282;
    background: url("../images/thumbtack.png") no-repeat center / contain;
    transform-origin: 50% 70%;
    z-index: 2;
    pointer-events: none;
    filter: saturate(0.60) drop-shadow(0 2px 3px rgba(20, 8, 4, 0.35)) drop-shadow(0 4px 8px rgba(20, 8, 4, 0.25));
}

/* Coffee-ring stain — rendered only for cards flagged with coffee_ring.
   Positioned so the clipped bottom-left third of the image sits in the
   card's top-right corner. z-index: -1 places it above the parchment
   ::before but below the text content. */
.fc-menu-card__stain {
    position: absolute;
    top: -270px;
    right: -190px;
    width: 480px;
    height: 480px;
    background: url("../images/coffee_ring.png") no-repeat center / contain;
    clip-path: inset(50% 160px 0 0);
    pointer-events: none;
    opacity: 0.25;
    z-index: 1;
}

/* Grilled Panini: slightly more transparent than base to reduce visual weight. */
.fc-menu-grid-item[data-category="grilled-panini"] .fc-menu-card__stain {
    opacity: 0.18;
}

/* Baked Goods variant: full ring, centered and nudged right, rotated 90°. */
.fc-menu-grid-item[data-category="baked-goods"] .fc-menu-card__stain {
    top: 50%;
    right: auto;
    left: calc(50% + 40px);
    width: 340px;
    height: 340px;
    transform: translate(-50%, -50%) rotate(90deg);
    clip-path: none;
    opacity: 0.18;
}

/* Soup variant: grease splatter bleeding in from the right, clipped at the
   paper edge texture. */
.fc-menu-grid-item[data-category="soup"] .fc-menu-card__stain {
    background-image: url("../images/grease-stain.png");
    top: 50%;
    right: -120px;
    left: auto;
    width: 380px;
    height: 256px;
    transform: translateY(-50%);
    clip-path: inset(0 100px 0 0);
    opacity: 0.38;
}

/* Wine variant: full glass-ring centered, nudged slightly below center. */
.fc-menu-grid-item[data-category="wine"] .fc-menu-card__stain {
    background-image: url("../images/wine-stain.png");
    top: calc(50% + 22px);
    right: auto;
    left: 50%;
    /* Cap dimensions to the card's content box (minus 10px each side) so the
       stain never spills outside the card. background-size: contain keeps
       the ring round even when the container becomes non-square. */
    width: min(285px, calc(100% - 20px));
    height: min(285px, calc(100% - 20px));
    transform: translate(-50%, -50%);
    clip-path: none;
    opacity: 0.32;
}

/* Varied rotation — sells the "laid-down note" feel. 6-item cycle
   avoids an obvious alternating pattern. */
.fc-menu-grid-item:nth-child(6n+1) .fc-menu-card { transform: rotate(0.4deg); }
.fc-menu-grid-item:nth-child(6n+2) .fc-menu-card { transform: rotate(-0.4deg); }
.fc-menu-grid-item:nth-child(6n+3) .fc-menu-card { transform: rotate(0.2deg); }
.fc-menu-grid-item:nth-child(6n+4) .fc-menu-card { transform: rotate(-0.3deg); }
.fc-menu-grid-item:nth-child(6n+5) .fc-menu-card { transform: rotate(0.4deg); }
.fc-menu-grid-item:nth-child(6n+6) .fc-menu-card { transform: rotate(-0.3deg); }

.fc-menu-card__title {
    font-family: 'Yanone Kaffeesatz', 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--fc-brown);
    text-transform: uppercase;
    text-align: left;
    margin: -24px 0 8px;
    letter-spacing: 0.01em;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.fc-menu-card__subtitle {
    font-family: 'Lato', 'Lora', sans-serif;
    font-size: 0.9375rem;
    color: var(--fc-brown);
    text-align: center;
    margin: 0 0 6px;
    line-height: 1.35;
}

.fc-menu-card__items {
    margin-top: 4px;
}

/* ── Menu Item ───────────────────────────────────────────────── */
/* Hand-drawn wiggly divider — a straight stroke pushed through SVG
   turbulence + displacement so the line reads as ink-drawn. */
.fc-menu-item {
    padding: 8px 0;
    border-bottom: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='12' viewBox='0 0 480 12' preserveAspectRatio='none'><filter id='r' x='-2%25' y='-50%25' width='104%25' height='200%25'><feTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='2' seed='5' stitchTiles='stitch' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='3.5'/></filter><line x1='0' y1='8' x2='480' y2='8' stroke='%23281809' stroke-opacity='0.55' stroke-width='1.3' filter='url(%23r)'/></svg>");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 480px 12px;
}

.fc-menu-item:last-child {
    background-image: none;
}

.fc-menu-item__photo {
    position: relative;
    width: 85%;
    margin: 18px auto;
    border-radius: 0;
    aspect-ratio: 3 / 2;
    background: #f1ebe1;
    box-shadow:
        0 3px 3px rgba(40, 24, 9, 0.32),
        0 10px 10px rgba(40, 24, 9, 0.32),
        0 22px 22px rgba(40, 24, 9, 0.24),
        0 38px 40px rgba(40, 24, 9, 0.14);
}

/* Subtle top vignette on the photo — darkens the upper portion. */
.fc-menu-item__photo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0.14) 40%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Tape strip pinning the photo to the corkboard. */
.fc-menu-item__photo::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 30%;
    width: 40%;
    aspect-ratio: 1633 / 383;
    background: url("../images/tape.png") no-repeat center / contain;
    transform: rotate(-5deg);
    z-index: 2;
    pointer-events: none;
}

/* Varied tilts + mirror flips on half the pieces for natural inconsistency. */
.fc-menu-item:nth-child(6n+1) .fc-menu-item__photo::before { transform: rotate(-7deg); }
.fc-menu-item:nth-child(6n+2) .fc-menu-item__photo::before { transform: rotate(4deg) scaleX(-1); }
.fc-menu-item:nth-child(6n+3) .fc-menu-item__photo::before { transform: rotate(-2deg); }
.fc-menu-item:nth-child(6n+4) .fc-menu-item__photo::before { transform: rotate(9deg) scaleX(-1); }
.fc-menu-item:nth-child(6n+5) .fc-menu-item__photo::before { transform: rotate(6deg); }
.fc-menu-item:nth-child(6n+6) .fc-menu-item__photo::before { transform: rotate(-11deg) scaleX(-1); }

/* Image tilts — opposite sign of parent box tilt to look pinned at a contrasting angle. */
.fc-menu-grid-item:nth-child(6n+1) .fc-menu-item__photo { transform: rotate(-2.4deg); }
.fc-menu-grid-item:nth-child(6n+2) .fc-menu-item__photo { transform: rotate(2.4deg); }
.fc-menu-grid-item:nth-child(6n+3) .fc-menu-item__photo { transform: rotate(-1.2deg); }
.fc-menu-grid-item:nth-child(6n+4) .fc-menu-item__photo { transform: rotate(1.8deg); }
.fc-menu-grid-item:nth-child(6n+5) .fc-menu-item__photo { transform: rotate(-2.4deg); }
.fc-menu-grid-item:nth-child(6n+6) .fc-menu-item__photo { transform: rotate(1.8deg); }

.fc-menu-item__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fc-menu-item__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.fc-menu-item__name {
    font-family: 'Caveat', 'Lato', cursive;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fc-brown);
    margin: 0;
    line-height: 1.2;
    flex: 1;
}

.fc-menu-item__price {
    font-family: 'Caveat', 'Lato', cursive;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fc-brown);
    white-space: nowrap;
    line-height: 1.2;
}

.fc-menu-item__desc {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fc-brown);
    margin: 2px 0 0;
    line-height: 1.35;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fc-menu-hero {
        padding: 40px 16px 20px;
    }

    .fc-menu-hero__title {
        font-size: 2.5rem;
    }

    .fc-menu-tab {
        padding: 8px 22px;
        font-size: 1rem;
    }

    .fc-menu-groups {
        padding: 0 12px;
    }

    .fc-menu-grid-sizer,
    .fc-menu-grid-item {
        width: 100%;
    }

    .fc-menu-card {
        padding: 0 14px 4px;
    }

    .fc-menu-card__title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .fc-menu-hero__title {
        font-size: 2rem;
        letter-spacing: 0;
    }
}