/* ==========================================================================
   't Stadhuis van Raverschoot – poster theme
   Everything is fluid (vw / % / clamp). One breakpoint (900px) stacks the cards.
   The bow position drives the ribbon bands via custom properties.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap");

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree-500.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
}
/* Card titles. Latin subset of Snell Roundhand Regular (Linotype), converted to WOFF2. */
@font-face {
    font-family: "Snell Roundhand";
    src: url("../fonts/snell-roundhand.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --red: #880f0f;
    --red-dark: #5f0a0a;
    --paper: #faf7f0;
    --paper-shade: #e6dfcd;
    --green: #a9c4a5;
    --ink: #7a1414;

    --font-title: "UnifrakturMaguntia", cursive;
    --font-card-title: "Snell Roundhand", "Apple Chancery", cursive;
    --font-body: "Figtree", "Segoe UI", Helvetica, Arial, sans-serif;

    /* Body copy: 0.78vw ≈ 15px on a 1920 screen, never below 11px. */
    --fs-body: clamp(11px, 0.78vw, 17px);
    --fs-menu: clamp(10.5px, 0.72vw, 16px);
    --fs-title: clamp(24px, 2vw, 42px);
    --fs-brand: clamp(26px, 2.7vw, 58px);
    --lh-body: 1.95;

    /* Bow (ribbon crop is 720x800 → height = width * 1.111). All in vw so the bands can be derived. */
    --bow-x: 18vw;
    --bow-y: -1vw;
    --bow-w: 29vw;
    --bow-h: calc(var(--bow-w) * 1.1111);
    --band-h: calc(var(--bow-w) * 0.044);
    --band-v: calc(var(--bow-w) * 0.04);

    /* Shared with the reservation popup. */
    --rv-red: var(--red);
    --rv-paper: var(--paper);
    --rv-font-title: var(--font-title);
    --rv-font-body: var(--font-body);

    /*
       How far the poster is pushed down so that it ends on the bottom edge of
       the window. main.js sets it whenever the window is taller than the poster;
       without JavaScript it stays 0 and the poster simply sits at the top.
    */
    --vshift: 0px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 0.45s;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
html {
    background: var(--green) url("../img/pattern.jpg") repeat 0 0;
    background-image: url("../img/pattern.webp");
    background-size: 20vw auto;
}
body {
    margin: 0;
    background: transparent;
    color: var(--red);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}
picture {
    display: block;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
h1,
h2,
h3,
p {
    margin: 0;
}
a {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Stage + poster
   -------------------------------------------------------------------------- */
.stage {
    position: relative;
    min-height: 100vh;
    /*
       Clip both axes. The cards are rotated, so their bounding boxes stick out
       past the poster; without a vertical clip those few pixels made the page
       scroll further than the poster and left a plain green strip under it.
    */
    overflow: clip;
    background: var(--green) url("../img/pattern.jpg") repeat 0 0;
    background-image: url("../img/pattern.webp");
    background-size: 20vw auto;
}
.poster {
    position: relative;
    display: flow-root; /* stop the cards' top margin collapsing through */
    min-height: 56.25vw;
    transform: translateY(var(--vshift));
    /* padding-bottom: 0.5vw; */
}

/*
   Nothing here is transitioned. The layout change at the 900px breakpoint is
   instant on purpose: animating it made the ribbon strips, the bow and the cards
   visibly travel apart on their own before arriving at their new places.
*/

/* --------------------------------------------------------------------------
   Ribbon bands (behind the cards, joined to the bow image's own tails)
   -------------------------------------------------------------------------- */
/*
   Only a horizontal ribbon: the two tails are real strips cut from the ribbon
   image (horizontal-ribbon.png, ribbon-h-left / ribbon-h-right). Each strip is
   anchored at the end that touches the bow and only repeats when the page is
   wider than the strip. All numbers are fractions of the bow crop
   (720 x 800 px, cut at x 480–1200 / y 116–916 of horizontal-ribbon.png):
   horizontal strips = y 331–406 → top 0.2986, height 0.1042 of --bow-w.
*/
.ribbon {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.ribbon__seg {
    position: absolute;
    display: block;
    background-color: transparent;
    filter: drop-shadow(0 0.3vw 0.6vw rgba(20, 30, 10, 0.22));
}
.ribbon--h {
    left: 0;
    right: 0;
    top: 0;
    height: 0;
}
.ribbon--h .ribbon__seg {
    top: calc(var(--bow-y) + var(--bow-w) * 0.2986);
    height: calc(var(--bow-w) * 0.1042);
    background-repeat: repeat-x;
    background-size: auto 100%;
}
.ribbon--h .ribbon__seg--a {
    left: 0;
    width: calc(var(--bow-x) + var(--bow-w) * 0.02);
    background-position: right center;
    background-image: url("../img/ribbon-h-left.png");
    background-image: image-set(
        url("../img/ribbon-h-left.webp") type("image/webp"),
        url("../img/ribbon-h-left.png") type("image/png")
    );
}
.ribbon--h .ribbon__seg--b {
    left: calc(var(--bow-x) + var(--bow-w) * 0.98);
    right: 0;
    background-position: left center;
    background-image: url("../img/ribbon-h-right.png");
    background-image: image-set(
        url("../img/ribbon-h-right.webp") type("image/webp"),
        url("../img/ribbon-h-right.png") type("image/png")
    );
}

/* --------------------------------------------------------------------------
   Brand (top right) and bow / gift tag
   -------------------------------------------------------------------------- */
.brand {
    position: absolute;
    z-index: 3;
    left: 65%;
    width: 44%; /* wide enough to keep the title on one line down to 900px */
    top: 1vw;
    text-align: center;
}
.brand__logo {
    width: 70%;
}
.brand__town {
    margin-top: 0.35em;
    font-size: calc(var(--fs-body) * 1.25);
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.bow {
    position: absolute;
    z-index: 4;
    left: var(--bow-x);
    top: var(--bow-y);
    width: var(--bow-w);
    pointer-events: none;
    filter: drop-shadow(0 0.4vw 0.6vw rgba(20, 30, 10, 0.18));
}
.bow__img {
    width: 100%;
}
/*
   The bow's right tail (x 74–100%, y 29–35.5% of the bow crop) is cut out of the
   bow on top and shown again by .bow-tail behind the cards, so the tail runs
   under the menu card while the loops and the tag stay on top of it.
*/
.bow .bow__img {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 29%,
        74% 29%,
        74% 35.5%,
        100% 35.5%,
        100% 100%,
        0 100%
    );
}
.bow-tail {
    position: absolute;
    z-index: 1;
    left: var(--bow-x);
    top: var(--bow-y);
    width: var(--bow-w);
    pointer-events: none;
    filter: drop-shadow(0 0.4vw 0.6vw rgba(20, 30, 10, 0.18));
}
.bow-tail .bow__img {
    clip-path: inset(29% 0 64.5% 74%);
}
.bow__logo,
.bow__tag {
    position: absolute;
    white-space: nowrap;
    text-align: center;
    transform: translate(-50%, -20%) rotate(-23deg);
    transform-origin: center;
    color: var(--red);
    pointer-events: none;
}
/* Crest on the upper part of the gift tag, tilted with the tag. */
.bow__logo {
    left: 53%;
    top: 49%;
    width: 35%;
}
.bow__tag {
    left: 62%;
    top: 72%;
    font-size: calc(var(--bow-w) * 0.033);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}
.decor--star-anise {
    right: 0;
    top: 0;
    width: 25%;
    transform: rotate(-8deg);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
/*
   Five-column grid: card | gap | card | gap | card. The gaps are columns so each
   gap can have its own width: the vertical ribbon runs in the first gap and the
   gift tag hangs over the left edge of the menu card without covering its text.
   No z-index on .cards: the cards stack directly against the ribbon (z 1), so
   card 1 (z 0) sits under the ribbon while cards 2 and 3 (z 2) sit over it.
*/
.cards {
    position: relative;
    display: grid;
    grid-template-columns: 23.5% 16.75% 31% 2.5% 23.5%;
    column-gap: 0;
    align-items: start;
    padding: 0 2% 0 1%;
}
.card--popup {
    grid-column: 1;
}
.card--menu {
    grid-column: 3;
}
.card--kerstmarkt {
    grid-column: 5;
}
.card {
    --rot: 0deg;
    position: relative;
    z-index: 2;
    transform: rotate(var(--rot));
    transform-origin: 50% 50%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.17em;
}
.card__paper {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(
            120% 80% at 30% 10%,
            rgba(255, 255, 255, 0.55),
            transparent 60%
        ),
        radial-gradient(
            90% 70% at 80% 90%,
            rgba(150, 130, 90, 0.12),
            transparent 60%
        ),
        var(--paper);
    box-shadow:
        0 0.15vw 0.2vw rgba(60, 50, 20, 0.12),
        0 1vw 2.4vw rgba(30, 50, 25, 0.32),
        inset 0 0 3vw rgba(120, 100, 60, 0.1);
    border-radius: 0.15vw;
}
.card__content {
    position: relative;
    z-index: 2;
}
/*
   The tilt, the vertical offset and the stacking belong to the place on the
   poster, not to the card: swapping the two outer cards therefore swaps these
   values as well. Padding and height stay with the card, because the Kerstmarkt
   card needs room at the bottom for the drawing of the building.
*/
.card--kerstmarkt {
    /* right-hand place: leans away from the menu card, same easing as before */
    --rot: -10deg;
    --rot: calc(
        -1 * clamp(5deg, atan2(87.5px + (100vw - 900px) * 0.148, 1000px), 10deg)
    );
    margin-top: 8.5vw;
    min-height: 36vw;
    padding: clamp(30px, 5.2vw, 110px) clamp(12px, 1.4vw, 32px)
        clamp(80px, 11vw, 220px);
}
.card--menu {
    /*
       Cards 2 and 3 lean towards each other, so on narrower screens their top
       corners would overlap the menu text. The tilt therefore eases from 8deg
       (1500px and up) to 3deg (900px) – continuously, via atan2(), so nothing
       jumps while resizing. The plain value is the fallback for old browsers.
    */
    --rot: 8deg;
    --rot: clamp(3deg, atan2(52.4px + (100vw - 900px) * 0.1468, 1000px), 8deg);
    margin-top: 4vw;
    min-height: 50vw;
    padding: clamp(28px, 3.4vw, 80px) clamp(16px, 3.2vw, 70px)
        clamp(30px, 2.6vw, 60px);
}
.card--popup {
    /* left-hand place: nearly straight, and the ribbon runs over it */
    --rot: -4deg;
    z-index: 0;
    margin-top: 4vw;
    min-height: 36vw;
    padding: clamp(30px, 7vw, 120px) clamp(12px, 1.5vw, 34px)
        clamp(40px, 5vw, 110px);
}

.card--takeaway {
    /* left-hand place: nearly straight, similar to the popup card */
    position: relative;
    left: -1.3vw;
    --rot: -1deg;
    z-index: 1;
    margin-top: 30vw;
    /* min-height: 36vw; */
    padding: 26px 20px;
}

.card--takeaway .card__content .lines {
    font-size: var(--fs-menu);
}

.card__title {
    /*
       Snell Roundhand has a small x-height (0.36 em against about 0.5 for
       Figtree), so it is set 1.35x larger to keep the same visual weight. A
       script face has only one weight and needs no extra tracking.
    */
    --fs-card-title: calc(var(--fs-title) * 1.35);
    font-family: var(--font-card-title);
    font-weight: 400;
    font-synthesis: none;
    font-size: var(--fs-card-title);
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
    margin-bottom: 0.55em;
}
.card__title--menu {
    font-size: calc(var(--fs-card-title) * 1.1);
    margin-bottom: 0.3em;
}
.card--kerstmarkt .card__title {
    font-size: calc(var(--fs-card-title) * 0.88);
}
.card__subtitle {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: calc(var(--fs-title) * 0.72);
    letter-spacing: 0.05em;
    text-transform: none;
    margin-top: 1.6em;
    margin-bottom: 0.4em;
}
.lines {
    margin: 0 0 1.6em;
}
.lines:last-child {
    margin-bottom: 0;
}
.menu {
    font-size: var(--fs-menu);
}
.menu__course {
    margin-bottom: 1.25em;
}
.price {
    margin-top: 1.8em;
}
.card__email {
    text-decoration: none;
}
.card__email:hover,
.card__email:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.card__action {
    margin-top: 1.4em;
}

.btn-reserveer {
    display: inline-block;
    font: inherit;
    font-size: calc(var(--fs-body) * 1.05);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--red);
    background: #fbf8f0;
    border: 0;
    border-radius: 0.15vw;
    padding: 0.55em 1.5em 0.5em 1.7em;
    cursor: pointer;
    box-shadow:
        0 0.15vw 0.35vw rgba(60, 40, 20, 0.28),
        0 0.5vw 1vw rgba(30, 50, 25, 0.18);
    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        background 0.2s;
}
.btn-reserveer:hover,
.btn-reserveer:focus-visible {
    background: #fff;
    transform: rotate(-3deg) translateY(-2px) scale(1.03);
    box-shadow:
        0 0.25vw 0.5vw rgba(60, 40, 20, 0.3),
        0 0.8vw 1.4vw rgba(30, 50, 25, 0.22);
    outline: none;
}
.btn-reserveer:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

.card__building {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 5%;
    width: 90%;
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Decorations – anchored to the element they belong to (% of that element)
   -------------------------------------------------------------------------- */
.decor {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 0.25vw 0.45vw rgba(20, 30, 10, 0.16));
}
.decor--behind {
    z-index: -1;
}

/* card 1 */
.decor--holly-1 {
    right: 0;
    transform: translateX(100%);
    width: 32%;
}
.decor--holly-4 {
    right: -14%;
    top: 27%;
    width: 20%;
    transform: rotate(35deg);
}

/* card 2 */
.decor--holly-2 {
    right: 0;
    top: 0;
    width: 30%;
    transform: rotate(-30deg);
}
.decor--cranberries-3 {
    left: -4%;
    top: 53%;
    width: 30%;
}
.decor--cranberry-single-a {
    right: 0%;
    top: 63%;
    width: 15%;
}
.decor--cloves-1 {
    right: -10%;
    top: 44%;
    width: 25%;
}
.decor--holly-4b {
    left: 0%;
    top: 47%;
    width: 17%;
    transform: translateX(-100%);
}
.decor--orange {
    right: -34%;
    bottom: 0;
    width: 34%;
    z-index: 5;
}

/* card 3 */
.decor--holly-3 {
    right: -20%;
    top: -14%;
    width: 50%;
}
.decor--cranberry-single-b {
    left: 8%;
    top: -5%;
    width: 20%;
}
.decor--kernels {
    right: -15%;
    top: 43.5%;
    width: 33%;
}
.decor--cloves-2 {
    left: 7%;
    top: 89%;
    width: 25%;
    transform: rotate(20deg);
}

/* stage level */
.decor--stage {
    z-index: 6;
}
.decor--napkin {
    bottom: -5%;
    width: 25%;
}
.decor--extra {
    right: 2%;
    bottom: 1vw;
    width: 18%;
}
.decor--cranberry {
    right: 0;
    bottom: 0%;
    width: 10%;
}

.decor--cinnamon {
    right: -2%;
    top: 33%;
    width: 8%;
    /* transform: rotate(6deg); */
}

/*
   Below ~1500px the clamped minimum font size would make the date lines wrap,
   so the tracking eases from .17em (1500px) to .13em (1000px) – continuously,
   not at a breakpoint, so the text never reflows with a jump while resizing.
*/
@media (min-width: 900.01px) {
    .card {
        letter-spacing: clamp(
            0.13em,
            0.17em - (1500px - 100vw) * 0.00088,
            0.17em
        );
    }
}

/* --------------------------------------------------------------------------
   Mobile / narrow: cards stack, bow moves under the title, ribbon follows.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    :root {
        --bow-x: -15vw;
        --bow-y: 13vw;
        --bow-w: 80vw;
        --fs-body: clamp(11px, 3.2vw, 14px);
        --fs-menu: clamp(10.5px, 3vw, 13.5px);
        --fs-title: clamp(28px, 8vw, 40px);
        --fs-brand: clamp(30px, 9vw, 44px);
    }
    .stage {
        background-size: 56vw auto;
    }
    .poster {
        min-height: 0;
        /* padding-bottom: 46vw; */
    }
    /* Title to the right of the vertical ribbon, right-aligned, layered above it. */
    .brand {
        position: static;
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 10vw;
    }
    .brand__town {
        font-size: calc(var(--fs-body) * 1.15);
    }

    .bow {
        filter: drop-shadow(0 1vw 1.6vw rgba(20, 30, 10, 0.2));
        z-index: 1;
    }
    .decor--star-anise {
        display: none;
    }

    .cards {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9vw;
        /*
           Bottom padding = the slack the last card's tilt adds below its own
           bottom edge (half its width x sin(2deg)). Without it the stage clip
           would shave that corner off at the end of the page.
        */
        padding: 0 0 1.6vw;
        margin-top: calc(var(--bow-y) + var(--bow-h) * 0.5);
    }
    .card {
        width: 88%;
        min-height: 0;
        margin-top: 0;
        letter-spacing: 0.12em;
    }
    /* Stacked, every card sits on top of the ribbon. */
    .card {
        z-index: 0;
    }
    .card--kerstmarkt {
        --rot: 0deg;
        padding: 9vw 5vw 40vw; /* room for the building sketch under the address */
        margin-bottom: 100px;
    }
    .card__building {
        width: 84%;
        bottom: 3%;
    }
    .card--menu {
        --rot: 0deg;
        padding: 8vw 5vw 12vw;
    }

    .card--menu .menu {
        font-size: 0.6rem;
    }
    .card--popup {
        --rot: 0deg;
        padding: 9vw 5vw 10vw;
    }
    /* "Winter pop-up" is already on the gift tag above this card. */
    .card__title-lead {
        display: none;
    }

    .card--takeaway {
        --rot: 0deg;
        position: static;
    }

    .card__paper {
        box-shadow:
            0 0.4vw 0.6vw rgba(60, 50, 20, 0.12),
            0 2.5vw 5vw rgba(30, 50, 25, 0.3),
            inset 0 0 6vw rgba(120, 100, 60, 0.1);
    }
    .decor {
        filter: drop-shadow(0 0.6vw 1vw rgba(20, 30, 10, 0.16));
    }
    .decor--cinnamon {
        display: none;
    }
    /* .decor--holly-1 {
        left: 0;
        top: -7%;
        width: 30%;
    } */
    /* .decor--holly-4 {
        right: -10%;
        top: 30%;
        width: 18%;
    }
    .decor--holly-2 {
        left: 68%;
        top: -4%;
        width: 16%;
    }
    .decor--cranberry-single-a {
        left: 12%;
        top: 60%;
        width: 6%;
    }
    .decor--cloves-1 {
        right: -8%;
        top: 30%;
        width: 18%;
    }
    .decor--holly-4b {
        left: -11%;
        bottom: 8%;
        width: 16%;
    }
    .decor--cranberry {
        left: -6%;
        bottom: 0;
        width: 24%;
        right: auto;
    }
    .decor--orange {
        right: 0;
        bottom: 0;
        width: 30%;
        transform: translateX(100%);
    }
    
    .decor--holly-3 {
        right: -10%;
        top: -10%;
        width: 40%;
    }
    .decor--kernels {
        right: -6%;
        top: 55%;
        width: 26%;
    }
    .decor--cloves-2 {
        left: 6%;
        top: 74%;
        width: 14%;
    } */

    /*.decor--napkin {
        right: -17%;
        /* flip  
        transform: scaleX(-1);
        bottom: -2.5%;
        width: 66%;
    }*/

    .decor--napkin {
        bottom: 0;
        width: 66%;
    }

    .decor--cranberry-single-b {
        left: 0%;
        top: 8%;
    }

    .decor--cranberries-3 {
        left: -6%;
        top: 52%;
    }

    .lines {
        margin: 0 0 0.6em;
    }

    .lines--email {
        margin-top: 2rem;
    }

    .decor--extra {
        right: 2%;
        bottom: 3vw;
        width: 30%;
    }

    .btn-reserveer {
        font-size: calc(var(--fs-body) * 1.1);
        padding: 0.7em 1.8em 0.65em 2em;
        border-radius: 2px;
    }
    .card__paper {
        border-radius: 2px;
    }
    .brand__logo {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .cards {
        gap: 12vw;
    }
    .card {
        width: 88%;
    }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}