/* Home / hero page styles — extracted from index.html's inline <style>
   during the Eleventy migration. Tokens come from style.css. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


        html, body { height: 100%; overflow: hidden; }

        /* Slideshow */
        .hero { position: relative; width: 100%; height: 100vh; overflow: hidden; }
        .slideshow { position: absolute; inset: 0; }

        .slide {
            position: absolute; inset: 0;
            opacity: 0;
            /* Long crossfade so the hero reads as one slowly shifting colour
               field rather than a slideshow. Must stay shorter than the
               SLIDE_INTERVAL in the script below or fades will overlap.
               prefers-reduced-motion collapses this to 0.01ms further down. */
            transition: opacity 10s ease-in-out;
        }
        .slide.active { opacity: 1; }

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

        /* Placeholder gradients — replace with real photos */
        .slide-placeholder { width: 100%; height: 100%; }
        .slide-1 .slide-placeholder { background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 40%, #4A8494 100%); }
        .slide-2 .slide-placeholder { background: linear-gradient(135deg, #16323C 0%, var(--teal) 50%, var(--mint) 100%); }
        .slide-3 .slide-placeholder { background: linear-gradient(135deg, var(--teal) 0%, #6E4048 50%, var(--accent) 100%); }
        .slide-4 .slide-placeholder { background: linear-gradient(135deg, #16323C 0%, var(--teal-dark) 40%, var(--teal) 100%); }

        /* Overlay */
        .overlay { position: absolute; inset: 0; background: var(--overlay); z-index: 1; }

        /* Hero content */
        .hero-content {
            position: absolute; inset: 0; z-index: 2;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            text-align: center; padding: 1.5rem; gap: 0.75rem;
        }

        .hero-eyebrow {
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            font-size: clamp(0.7rem, 2vw, 0.95rem);
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--cream);
            opacity: 0.75;
        }

        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(3rem, 15vw, 8rem);
            font-weight: 700;
            line-height: 1;
            color: var(--cream);
            /* Offset-slab treatment borrowed from the front-window graphic:
               crisp teal edge, then the red accent slab, then the original soft glow.
               Offsets are in em so they track the clamp()ed font size.
               This is the fallback path, used only when the wordmark SVG is
               missing; the real logotype is .hero-wordmark below. */
            text-shadow:
                0.022em 0.022em 0 var(--teal-dark),
                0.055em 0.055em 0 var(--accent),
                0 2px 28px rgba(0, 0, 0, 0.45);
            letter-spacing: 0.02em;
        }

        /* Wordmark variant. Keeps .hero-title's font-size so the em-based
           shadow offsets below resolve against the same scale as the text
           fallback, but drops the text-only properties. */
        .hero-title--art {
            display: block;
            width: min(78vw, 46rem);
            line-height: 0;
            text-shadow: none;
            letter-spacing: normal;
        }

        .hero-wordmark {
            display: block;
            width: 100%;
            height: auto;

            /* Inkscape fitted the viewBox tight to the glyph outlines, with no
               padding. An SVG viewport clips to its viewBox by default, so the
               outward half of the stroke and the offset shadow were being cut
               off at the edges — worst on the é and along the baseline.
               Letting it paint outside costs nothing here: the mark is centred
               in the hero with generous space around it. */
            overflow: visible;

            /* Matches the front-window graphic's construction: a teal OUTLINE
               on the letterforms, plus a single red offset shadow.

               Not two stacked drop-shadows. CSS filters chain — each function
               operates on the previous one's output — so a second hard-edged
               drop-shadow casts from "glyph + first shadow" rather than from
               the glyph, which doubles the offset and tears a gap in the
               shadow. One shadow only; the teal comes from stroke instead.

               paint-order puts the stroke behind the fill, so only its outer
               half shows and the cream letterform stays its true weight.
               stroke-width is in viewBox units, so it scales with the mark.

               Values measured off the print proof (35x54 Biz Info PROOF 2.pdf),
               as a proportion of ONE line of letters — the proof stacks "The"
               over "Café" while this mark is a single line, so normalising
               against the whole two-line block halves everything.
               Outline 2.90% of line height, shadow 4.35% across / 6.14% down:
               a 55-degree cast, i.e. light from the upper left.

               The shadow reads as up-left on the proof because the script is
               steeply italic, so a downward offset surfaces on each stroke's
               left side. It is genuinely cast down-right.

               stroke-width is doubled relative to the visible outline, since
               paint-order hides the inner half behind the fill.

               Shipped values sit deliberately UNDER the proof: outline 2.04%
               of ink height (proof 2.90%), shadow 2.26% across / 3.26% down
               (proof 4.35% / 6.14%). The proof is 35 inches tall and read from
               a sidewalk; at hero size on a darkened ground the full weight
               reads heavy and the shadow detaches. */
            fill: var(--cream);
            stroke: var(--teal-dark);
            stroke-width: 1.5;
            /* miter, not round: at this weight a round join visibly blunts the
               script's pointed terminals, and the shadow inherits the rounding
               because it is cast from the stroked silhouette. The default
               miter-limit of 4 still bevels the most acute joins, so raise it
               until the points survive. */
            stroke-linejoin: miter;
            stroke-miterlimit: 10;
            paint-order: stroke;
            /* --coral, not --accent: the proof's brighter red. On this ground
               --accent reads as a separate dark slab rather than a shadow.

               The proof sits on flat #2C5E70, where the darker teal outline
               separates letterform from shadow. Here the gradient sits under
               --overlay and composites to roughly #1A3944 — close enough to
               the outline colour that the outline disappears into the
               background, leaving an apparent gap. Shortening the offset and
               lightening the red closes that gap. */
            filter: drop-shadow(0.036em 0.052em 0 var(--coral));
        }

        .hero-subspace {
            display: flex; gap: 0.5rem;
            padding: 0.5rem 1rem 0.5rem;
            flex-wrap: wrap; justify-content: center;
            background-color: rgba(0, 0, 0, 0.45);
            border-radius: 10px;
        }

        .hero-subtitle {
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            font-size: clamp(0.85rem, 2.5vw, 1.1rem);
            color: var(--cream);
            opacity: 0.85;
            max-width: 40ch;
            line-height: 1.65;
            margin-top: 0.25rem;
        }
        
        .filigree-subspace {
            display: block; 
            flex-direction: column;
        }

        .hero-subtitle a {
            color: var(--text-link);
        }


        /* Buttons */
        .hero-actions {
            display: flex; gap: 1rem;
            margin-top: 1rem;
            flex-wrap: wrap; justify-content: center;
        }

        .btn {
            font-family: 'Lato', sans-serif;
            font-weight: 400;
            font-size: clamp(0.8rem, 2vw, 0.9rem);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            text-decoration: none;
            padding: 0.9rem 2.4rem;
            border-radius: 2px;
            border: 2px solid transparent;
            display: inline-block; cursor: pointer;
            transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

        .btn-primary {
            background: var(--accent);
            color: var(--cream);
            border-color: var(--accent);
        }
        .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

        .btn-ghost {
            background: transparent;
            color: var(--cream);
            border-color: var(--cream);
        }
        .btn-ghost:hover { background: var(--cream); color: var(--text-dark); }

        /* Slide dots */
        .dots {
            position: absolute; bottom: 1.75rem; left: 50%;
            transform: translateX(-50%); z-index: 2;
            display: flex; gap: 0.55rem;
        }
        .dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(250, 247, 242, 0.35);
            border: none; cursor: pointer; padding: 0;
            transition: background 0.3s, transform 0.2s;
        }
        .dot.active { background: var(--cream); transform: scale(1.3); }
        .dot:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

        /* Mobile */
        @media (max-width: 480px) {
            .hero-actions { flex-direction: column; width: 100%; max-width: 280px; }
            .btn { text-align: center; width: 100%; }
        }

        /* Fixed size: SVG with only a viewBox stretches to fill its
           container, so cap it to divider proportions */
        .filigree-divider {
            width: min(340px, 70vw);
            height: auto;
            flex-shrink: 0;
        }

        /* Under-construction notice */
        .construction-banner {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 10;
            background: var(--accent-dark);
            color: var(--cream);
            text-align: center;
            font-family: 'Lato', sans-serif;
            font-weight: 400;
            font-size: 0.85rem;
            letter-spacing: 0.06em;
            padding: 0.55rem 1.5rem;
        }

        .filigree-divider .line {
            stroke-dasharray: 1;
            stroke-dashoffset: 1;
            stroke-linecap: round;
            animation: 5s ease-out forwards draw;
        }
        .filigree-divider .diamond-outer {
            stroke-dasharray: 1;
            stroke-dashoffset: 1;
            stroke-linejoin: round;
            stroke-linecap: round;
            animation: 2s ease-out forwards 0.1s drawhalf;
        }
        .filigree-divider .diamond-inner {
            stroke-dasharray: 1;
            stroke-dashoffset: 1;
            stroke-linejoin: round;
            stroke-linecap: round;
            animation: 1.6s ease-out forwards 0.1s drawhalf;
        }
        .line:nth-child(2) { animation-delay: 1.5s; }
        .line:nth-child(4) { animation-delay: 1.5s; }
        .line:nth-child(5) { animation-delay: 0.5s; }
        .line:nth-child(6) { animation-delay: 0.5s; }
        .line:nth-child(7) { animation-delay: 1s; }
        .line:nth-child(8) { animation-delay: 1s; }
        @keyframes draw {
            to {
               stroke-dashoffset: 0;
            }
        }
        @keyframes drawhalf {
            to {
               stroke-dashoffset: 0.49;
            }
        }

        /* ── Accessibility ────────────────────────────────────
           Must stay LAST: these rules have the same specificity as the
           animation rules above, and a media query adds none — so ordering
           is the only thing that lets them win. */
        @media (prefers-reduced-motion: reduce) {
            .slide { transition: opacity 0.01ms; }
            .btn, .dot { transition: none; }

            /* Show the filigree already drawn rather than animating it in.
               Offsets match each keyframe's end state (draw → 0, drawhalf → 0.49). */
            .filigree-divider .line {
                animation: none;
                stroke-dashoffset: 0;
            }
            .filigree-divider .diamond-outer,
            .filigree-divider .diamond-inner {
                animation: none;
                stroke-dashoffset: 0.49;
            }
        }