:root {
    --bg: #f1f0ec;
    --red: #7a0808;

    /* Logo sized proportionally to viewport (Figma 2: 78 x 118 on a
       1920 canvas = ~4.06% / ~6.15% of viewport width), with a min floor
       so it stays legible on very narrow screens. */
    --logo-w: clamp(42px, 4.062vw, 78px);
    --logo-h: clamp(63px, 6.146vw, 118px);
    --logo-x: clamp(18px, 2.083vw, 40px);
    --logo-y: clamp(14px, 1.406vw, 27px);

    --nav-size: 25px;
    --nav-gap: 0px;
    --nav-x: 40px;
    --nav-y: 32px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--red);
    font-family: 'Freckle Face', cursive;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ─────── Fixed chrome (logo + nav) ─────── */
/* Anchored to viewport corners at real pixel sizes — position stays
   consistent across every viewport. */

.logo {
    position: fixed;
    top: var(--logo-y);
    left: var(--logo-x);
    width: var(--logo-w);
    height: var(--logo-h);
    display: block;
    z-index: 10;
}
.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.top-nav {
    position: fixed;
    top: var(--nav-y);
    right: var(--nav-x);
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
    z-index: 10;
}
.top-nav a {
    font-family: 'Freckle Face', cursive;
    font-weight: 400;
    font-size: var(--nav-size);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--red);
    text-decoration: none;
    text-align: center;
}

/* Fixed-width nav boxes apply on desktop only, so spacing matches Figma
   exactly at 1920. On tablet/mobile, items size to their text content
   so they don't overflow the viewport. */
@media (min-width: 901px) {
    .top-nav a { width: 142px; }
    .top-nav a[href="#contact"] { width: 132px; }
}

/* ─────── Hero section ─────── */

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Background photo — matches the Figma crop (175.5% height, -36.1% top).
   Centered in the viewport so it looks balanced at any width. */
.hero-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    aspect-ratio: 1409 / 1080;
    opacity: 0.8;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.hero-image img {
    position: absolute;
    top: -36.1%;
    left: 0;
    width: 100%;
    height: 175.5%;
    object-fit: cover;
    display: block;
}

/* Title + tagline composition.
   The title is truly centered in the viewport (matching the Figma frame
   center) and the tagline is pinned to the right edge of the title so it
   doesn't pull the title off-center. */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 24px;
}

.title {
    position: relative;
    font-family: 'Freckle Face', cursive;
    font-weight: 400;
    /* 200px at 1920-wide viewport, scales fluidly */
    font-size: clamp(56px, 10.4vw, 200px);
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: var(--red);
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.tagline {
    position: absolute;
    left: 100%;
    /* Figma places the tagline center 54px below the title center at a 200px
       title. That works out to ~14% up from the bottom of the title line-box,
       which scales correctly with the fluid title size. */
    bottom: 14%;
    margin-left: clamp(2px, 0.3vw, 8px);
    font-family: 'Freckle Face', cursive;
    font-size: clamp(7px, 1.05vw, 20px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--red);
    white-space: nowrap;
}

/* ─────── Tablet ─────── */
@media (max-width: 900px) {
    :root {
        --nav-size: 22px;
        --nav-gap: 40px;
        --nav-x: 28px;
        --nav-y: 26px;
    }
}

/* ─────── Mobile ─────── */
@media (max-width: 560px) {
    :root {
        --nav-size: 16px;
        --nav-gap: 18px;
        --nav-x: 18px;
        --nav-y: 22px;
    }

    .title {
        /* Larger relative to narrow viewports so it reads as the hero */
        font-size: clamp(44px, 16vw, 120px);
    }

    /* On narrow screens, drop the tagline below the centered title
       instead of letting it hang off-screen to the right. */
    .tagline {
        position: static;
        display: block;
        margin: 4px 0 0;
        font-size: clamp(8px, 2.4vw, 14px);
    }

    /* On very narrow viewports the portrait photo looks better cropped wider */
    .hero-image {
        left: 50%;
        height: 100%;
        aspect-ratio: auto;
        width: 100%;
        transform: translateX(-50%);
    }
    .hero-image img {
        top: 0;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
    }
}

/* ─────── Ultra-narrow (phones in portrait < 380) ─────── */
@media (max-width: 380px) {
    .title { font-size: 52px; }
    .tagline { font-size: 10px; }
    :root {
        --nav-gap: 14px;
        --nav-size: 14px;
    }
}