/* =====================================================================
   THE HOLI COLLECTION — Stylesheet
   A refined editorial hospitality aesthetic.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Coco Gothic — self-hosted font family
   ---------------------------------------------------------------------
   Loaded from assets/uploads/fonts/.
   Trial files use a *_trial.ttf naming convention. When you swap in
   licensed production fonts, update the URLs (and ideally convert to
   .woff2 for a smaller payload).

   Weight map used across the site:
     200 — UltraLight   (rare, very large display moments)
     300 — Light        (default body / nav)
     400 — Regular
     700 — Bold
     800 — Heavy        (loud headings — used sparingly)
     900 — Fat          (display-only, reserved)
   --------------------------------------------------------------------- */
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-UltraLight_trial.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-UltraLightItalic_trial.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Light_trial.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-LightItalic_trial.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic_trial.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Italic_trial.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Bold_trial.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-BoldItalic_trial.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Heavy_trial.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-HeavyItalic_trial.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Fat_trial.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-FatItalic_trial.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------------------------------------
   2. Design tokens
   --------------------------------------------------------------------- */
:root {
    /* Brand colour family — built around #48362e */
    --holi-ink:        #48362e;   /* primary brand colour */
    --holi-ink-soft:   #6b554a;   /* secondary text */
    --holi-ink-muted:  #9b8a7e;   /* tertiary / meta */

    --holi-cream:      #f7f2ec;   /* warm off-white background */
    --holi-cream-deep: #ebe1d4;   /* card / section alt */
    --holi-paper:      #ffffff;
    --holi-line:       rgba(72, 54, 46, 0.12);
    --holi-line-soft:  rgba(72, 54, 46, 0.06);

    --holi-accent:     #c9a98a;   /* warm gilded tan for hovers / rules */

    /* Type */
    --holi-font-sans: 'Coco Gothic', 'Avenir Next', 'Futura', 'Helvetica Neue', system-ui, sans-serif;
    --holi-font-serif: 'Cormorant Garamond', 'Didot', 'Bodoni 72', Georgia, serif;

    /* Spatial */
    --holi-container: 1280px;
    --holi-gutter: clamp(1.25rem, 4vw, 3rem);

    /* Motion */
    --holi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------------
   3. Reset & base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--holi-font-sans);
    font-weight: 300;
    color: var(--holi-ink);
    background: var(--holi-cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--holi-ink);
    text-decoration: none;
    transition: color 220ms var(--holi-ease), opacity 220ms var(--holi-ease);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--holi-ink);
}

p { margin: 0 0 1em; }

::selection { background: var(--holi-ink); color: var(--holi-cream); }

/* Accessibility helper */
.holi-skip-link {
    position: absolute;
    top: -100px; left: 1rem;
    background: var(--holi-ink); color: var(--holi-cream);
    padding: 0.75rem 1.25rem;
    z-index: 1000;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.75rem;
}
.holi-skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------------
   4. Header & navigation
   --------------------------------------------------------------------- */
.holi-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 242, 236, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 300ms var(--holi-ease),
                background-color 300ms var(--holi-ease),
                padding 300ms var(--holi-ease);
}

.holi-header.is-scrolled {
    border-bottom-color: var(--holi-line);
    background: rgba(247, 242, 236, 0.97);
}

.holi-header__inner {
    max-width: var(--holi-container);
    margin: 0 auto;
    padding: 1.1rem var(--holi-gutter) 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    text-align: center;
    transition: padding 300ms var(--holi-ease), gap 300ms var(--holi-ease);
}

.holi-header.is-scrolled .holi-header__inner {
    padding-top: 0.7rem;
    padding-bottom: 0.6rem;
    gap: 0.55rem;
}

.holi-header__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.holi-header__logo {
    height: clamp(28px, 3.2vw, 38px);
    width: auto;
    transition: opacity 220ms var(--holi-ease), height 300ms var(--holi-ease);
}
.holi-header.is-scrolled .holi-header__logo { height: clamp(24px, 2.6vw, 30px); }
.holi-header__brand:hover .holi-header__logo { opacity: 0.75; }

/* Nav */
.holi-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.85rem, 2vw, 1.85rem);
    align-items: center;
}

.holi-nav__link {
    position: relative;
    display: inline-block;
    padding: 0.3rem 0;
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--holi-ink);
}

.holi-nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 1px;
    background: var(--holi-ink);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 360ms var(--holi-ease);
}

.holi-nav__link:hover::after,
.holi-nav__link:focus-visible::after,
.holi-nav__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.holi-nav__link.is-active { color: var(--holi-ink); }

/* Mobile toggle */
.holi-header__toggle {
    display: none;
    width: 40px;
    height: 40px;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.holi-header__toggle-bar {
    display: block;
    width: 26px;
    height: 1px;
    background: var(--holi-ink);
    transition: transform 300ms var(--holi-ease), opacity 200ms var(--holi-ease);
}
.holi-header__toggle[aria-expanded="true"] .holi-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.holi-header__toggle[aria-expanded="true"] .holi-header__toggle-bar:nth-child(2) { opacity: 0; }
.holi-header__toggle[aria-expanded="true"] .holi-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------
   5. Layout primitives
   --------------------------------------------------------------------- */
.holi-main { min-height: 60vh; }

.holi-container {
    max-width: var(--holi-container);
    margin: 0 auto;
    padding: 0 var(--holi-gutter);
}

.holi-section { padding: clamp(4rem, 9vw, 8rem) 0; }
.holi-section--cream { background: var(--holi-cream); }
.holi-section--deep  { background: var(--holi-cream-deep); }
.holi-section--ink   { background: var(--holi-ink); color: var(--holi-cream); }
.holi-section--ink h1, .holi-section--ink h2, .holi-section--ink h3 { color: var(--holi-cream); }

/* Editorial type helpers */
.holi-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--holi-ink-soft);
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 3.25rem;
}
.holi-eyebrow::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 2.5rem; height: 1px;
    background: var(--holi-ink-soft);
}

.holi-display {
    font-family: var(--holi-font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--holi-ink);
}
.holi-display em {
    font-style: normal;
    font-family: var(--holi-font-sans);
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
   6. Hero slider (home page)
   ---------------------------------------------------------------------
   Full-bleed crossfade carousel with Ken Burns motion, dot pagination,
   arrow controls, a slide counter and a progress bar. Heights account
   for the sticky header so no content gets cropped.
   --------------------------------------------------------------------- */
.holi-slider {
    position: relative;
    width: 100%;
    /* A touch under viewport — leaves room for the brand strip and
       grid to invite the user to scroll. */
    height: 75vh;
    height: 75dvh;
    min-height: 560px;
    overflow: hidden;
    background: var(--holi-ink);
    isolation: isolate;
}

@media (min-width: 1400px) {
    .holi-slider { min-height: 680px; }
}

@media (max-width: 768px) {
    .holi-slider { min-height: 480px; }
}

.holi-slider__track {
    position: absolute;
    inset: 0;
}

/* Individual slide ------------------------------------------------- */
.holi-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1200ms var(--holi-ease),
                visibility 0s linear 1200ms;
    will-change: opacity;
}

.holi-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1200ms var(--holi-ease),
                visibility 0s linear 0s;
    z-index: 1;
}

.holi-slide__image {
    position: absolute;
    inset: -2% -2% -2% -2%;          /* slight oversize for ken-burns headroom */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.06);
    transition: transform 300ms var(--holi-ease);
}

/* Slow Ken Burns zoom while active — restart with the slide */
.holi-slide.is-active .holi-slide__image {
    animation: holi-kenburns 9000ms var(--holi-ease) forwards;
}

@keyframes holi-kenburns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}

/* Dark scrim for legibility — gradient, not flat */
.holi-slide__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(28, 20, 16, 0.10) 0%,
            rgba(28, 20, 16, 0.25) 45%,
            rgba(28, 20, 16, 0.62) 100%),
        linear-gradient(90deg,
            rgba(28, 20, 16, 0.45) 0%,
            rgba(28, 20, 16, 0.10) 55%,
            rgba(28, 20, 16, 0) 100%);
    pointer-events: none;
}

/* Text content */
.holi-slide__inner {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0 var(--holi-gutter) clamp(5rem, 11vh, 8rem);
    max-width: var(--holi-container);
    margin: 0 auto;
    color: var(--holi-cream);
    transform: translateY(20px);
    opacity: 0;
    transition: opacity 1000ms var(--holi-ease) 300ms,
                transform 1000ms var(--holi-ease) 300ms;
}

.holi-slide.is-active .holi-slide__inner {
    opacity: 1;
    transform: translateY(0);
}

.holi-slide__title {
    color: var(--holi-cream);
    max-width: 22ch;
    font-size: clamp(2.25rem, 6vw, 5.25rem);
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.holi-slide__title em {
    font-style: normal;
    font-family: var(--holi-font-sans);
    font-weight: 200;
    letter-spacing: 0.02em;
}

.holi-slide__sub {
    margin-top: 1.5rem;
    max-width: 44ch;
    color: rgba(247, 242, 236, 0.85);
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.7;
    font-weight: 300;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

.holi-slide__cta {
    margin-top: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 2.2rem;
    border: 1px solid var(--holi-cream);
    color: var(--holi-cream);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    background: rgba(247, 242, 236, 0.04);
    backdrop-filter: blur(2px);
    transition: background-color 320ms var(--holi-ease),
                color 320ms var(--holi-ease),
                gap 320ms var(--holi-ease);
}
.holi-slide__cta::after {
    content: '→';
    font-size: 0.95rem;
    letter-spacing: 0;
    transition: transform 320ms var(--holi-ease);
}
.holi-slide__cta:hover {
    background: var(--holi-cream);
    color: var(--holi-ink);
    gap: 1.5rem;
}
.holi-slide__cta:hover::after { transform: translateX(4px); }

/* Light-on-dark variant of the eyebrow */
.holi-eyebrow--light {
    color: rgba(247, 242, 236, 0.8);
}
.holi-eyebrow--light::before {
    background: rgba(247, 242, 236, 0.7);
}

/* Arrow controls --------------------------------------------------- */
.holi-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: 1px solid rgba(247, 242, 236, 0.4);
    background: rgba(28, 20, 16, 0.15);
    color: var(--holi-cream);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 280ms var(--holi-ease),
                border-color 280ms var(--holi-ease),
                transform 280ms var(--holi-ease);
}
.holi-slider__arrow:hover {
    background: var(--holi-cream);
    color: var(--holi-ink);
    border-color: var(--holi-cream);
}
.holi-slider__arrow:focus-visible {
    outline: 2px solid var(--holi-accent);
    outline-offset: 4px;
}
.holi-slider__arrow svg { width: 22px; height: 22px; }

.holi-slider__arrow--prev { left: clamp(1rem, 3vw, 2.5rem); }
.holi-slider__arrow--next { right: clamp(1rem, 3vw, 2.5rem); }

.holi-slider__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.holi-slider__arrow--next:hover { transform: translateY(-50%) translateX(3px); }

/* Dot pagination --------------------------------------------------- */
.holi-slider__dots {
    position: absolute;
    bottom: clamp(1.5rem, 3vh, 2.25rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.85rem;
    z-index: 5;
}

.holi-slider__dot {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
}
.holi-slider__dot span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(247, 242, 236, 0.35);
    transition: background-color 280ms var(--holi-ease),
                width 280ms var(--holi-ease);
}
.holi-slider__dot:hover span { background: rgba(247, 242, 236, 0.7); }
.holi-slider__dot.is-active span {
    background: var(--holi-cream);
    width: 28px;
    border-radius: 6px;
}
.holi-slider__dot:focus-visible { outline: 2px solid var(--holi-accent); outline-offset: 2px; border-radius: 50%; }

/* Slide counter ---------------------------------------------------- */
.holi-slider__counter {
    position: absolute;
    top: clamp(1.5rem, 3vh, 2.25rem);
    right: clamp(1.25rem, 3vw, 2.5rem);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--holi-cream);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    font-variant-numeric: tabular-nums;
}
.holi-slider__counter-sep {
    width: 36px;
    height: 1px;
    background: rgba(247, 242, 236, 0.45);
    display: inline-block;
}

/* Responsive tweaks ----------------------------------------------- */
@media (max-width: 768px) {
    .holi-slider__arrow { display: none; }       /* swipe-only on mobile */
    .holi-slide__inner { padding-bottom: clamp(6rem, 14vh, 9rem); }
    .holi-slide__scrim {
        background:
            linear-gradient(180deg,
                rgba(28, 20, 16, 0.18) 0%,
                rgba(28, 20, 16, 0.40) 50%,
                rgba(28, 20, 16, 0.72) 100%);
    }
    .holi-slider__counter { font-size: 0.7rem; }
    .holi-slider__counter-sep { width: 22px; }
}

/* Reduced motion: still cross-fade (necessary for usability) but kill the zoom */
@media (prefers-reduced-motion: reduce) {
    .holi-slide.is-active .holi-slide__image { animation: none; transform: scale(1); }
    .holi-slide__image { transform: scale(1); }
}

/* ---------------------------------------------------------------------
   6b. Legacy hero (kept available, no longer used by index)
   --------------------------------------------------------------------- */
.holi-hero {
    position: relative;
    min-height: clamp(560px, 88vh, 880px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--holi-cream-deep);
}

.holi-hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(201, 169, 138, 0.55), transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(72, 54, 46, 0.18), transparent 65%),
        linear-gradient(180deg, var(--holi-cream) 0%, var(--holi-cream-deep) 100%);
}

.holi-hero__bg::after {
    /* subtle film-grain */
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.21 0 0 0 0 0.18 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.45;
    pointer-events: none;
}

.holi-hero__inner {
    position: relative;
    max-width: var(--holi-container);
    margin: 0 auto;
    padding: 6rem var(--holi-gutter) 5rem;
    width: 100%;
}

.holi-hero__title {
    max-width: 18ch;
    margin: 0;
}

.holi-hero__sub {
    margin-top: 2rem;
    max-width: 46ch;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    color: var(--holi-ink-soft);
    font-weight: 300;
    line-height: 1.7;
}

.holi-hero__cta {
    margin-top: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 2.25rem;
    border: 1px solid var(--holi-ink);
    color: var(--holi-ink);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    transition: background-color 320ms var(--holi-ease),
                color 320ms var(--holi-ease),
                gap 320ms var(--holi-ease);
}
.holi-hero__cta:hover {
    background: var(--holi-ink);
    color: var(--holi-cream);
    gap: 1.5rem;
}
.holi-hero__cta::after {
    content: '→';
    font-size: 0.95rem;
    letter-spacing: 0;
    transition: transform 320ms var(--holi-ease);
}
.holi-hero__cta:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   7. Brand logo strip
   ---------------------------------------------------------------------
   Three restaurant marks on a single line. Generous whitespace, optical
   alignment via flex centring, subtle hover lift. The logos arrive as
   mixed-format PNGs so we constrain them by height (not width) which
   gives the row a consistent optical baseline regardless of each
   logo's aspect ratio.
   --------------------------------------------------------------------- */
.holi-brands {
    background: var(--holi-cream);
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
}

/* Hairline dividers above and below — keeps the strip self-contained */
.holi-brands::before,
.holi-brands::after {
    content: '';
    position: absolute;
    left: var(--holi-gutter);
    right: var(--holi-gutter);
    height: 1px;
    background: var(--holi-line);
}
.holi-brands::before { top: 0; }
.holi-brands::after  { bottom: 0; }

.holi-brands__intro {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.holi-brands__intro .holi-eyebrow {
    padding-left: 0;
    margin-bottom: 1rem;
}
.holi-brands__intro .holi-eyebrow::before { display: none; }

.holi-brands__caption {
    font-family: var(--holi-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    color: var(--holi-ink);
    margin: 0;
    line-height: 1.4;
}

.holi-brands__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.holi-brands__item {
    flex: 1 1 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Each cell gets a consistent vertical envelope so all three logos
       sit on the same optical baseline regardless of source aspect ratio. */
    min-height: 120px;
}

.holi-brands__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    transition: transform 420ms var(--holi-ease),
                opacity 320ms var(--holi-ease);
    opacity: 0.85;
}
.holi-brands__link:hover {
    opacity: 1;
    transform: translateY(-4px);
}
.holi-brands__link:focus-visible {
    outline: 2px solid var(--holi-accent);
    outline-offset: 8px;
    opacity: 1;
}

.holi-brands__logo {
    /* Cap height so a tall logo and a wide logo read as the same size.
       Width auto-derives. */
    height: clamp(48px, 6.5vw, 78px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 640px) {
    .holi-brands__row {
        flex-direction: column;
        gap: 2.5rem;
    }
    .holi-brands__item { min-height: 0; }
}

/* ---------------------------------------------------------------------
   7b. Venues grid (2 × 3 tile layout below the brand strip)
   ---------------------------------------------------------------------
   Each tile is a landscape rectangle. The image lives inside the tile
   with a slow scale on hover, and a near-white scrim slides in over
   the top carrying the venue name in centered, all-caps display type.
   --------------------------------------------------------------------- */
.holi-venues {
    background: var(--holi-cream);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.holi-venues__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

.holi-venues__item {
    position: relative;
    overflow: hidden;
}

.holi-venues__link {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;          /* landscape rectangle, matches reference */
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    isolation: isolate;
}

.holi-venues__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.01);
    transition: transform 900ms var(--holi-ease);
    will-change: transform;
}

/* Slow zoom on hover */
.holi-venues__link:hover .holi-venues__image,
.holi-venues__link:focus-visible .holi-venues__image {
    transform: scale(1.06);
}

.holi-venues__overlay {
    position: absolute;
    inset: 0;
    background: rgba(247, 242, 236, 0.7);    /* 70% white-cream overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 480ms var(--holi-ease);
    z-index: 1;
}

.holi-venues__link:hover .holi-venues__overlay,
.holi-venues__link:focus-visible .holi-venues__overlay {
    opacity: 1;
}

.holi-venues__label {
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.6vw, 1.5rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--holi-ink);
    transform: translateY(8px);
    transition: transform 520ms var(--holi-ease) 60ms;
    line-height: 1.3;
    max-width: 16ch;
}

.holi-venues__link:hover .holi-venues__label,
.holi-venues__link:focus-visible .holi-venues__label {
    transform: translateY(0);
}

.holi-venues__link:focus-visible {
    outline: 2px solid var(--holi-accent);
    outline-offset: 4px;
}

/* Responsive: 2 cols on tablet, 1 col on phone */
@media (max-width: 960px) {
    .holi-venues__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .holi-venues__grid { grid-template-columns: 1fr; gap: 0.75rem; }
    /* On small screens, show the label permanently with a softer
       scrim so the user understands what each image is. */
    .holi-venues__overlay {
        opacity: 1;
        background: linear-gradient(180deg,
            rgba(28, 20, 16, 0) 50%,
            rgba(28, 20, 16, 0.65) 100%);
        align-items: flex-end;
        padding: 1.25rem 1.5rem 1.5rem;
    }
    .holi-venues__label {
        color: var(--holi-cream);
        transform: none;
        font-size: 0.85rem;
        letter-spacing: 0.2em;
    }
}

/* ---------------------------------------------------------------------
   8. Intro / story block
   --------------------------------------------------------------------- */
.holi-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.holi-intro__copy p {
    font-size: clamp(1rem, 1.05vw, 1.1rem);
    color: var(--holi-ink-soft);
    line-height: 1.85;
}
.holi-intro__copy p + p { margin-top: 1.25rem; }

.holi-intro__copy p:first-of-type::first-letter {
    font-family: var(--holi-font-serif);
    font-style: italic;
    font-size: 4.2em;
    float: left;
    line-height: 0.88;
    margin: 0.05em 0.12em 0 -0.05em;
    color: var(--holi-ink);
}

/* ---------------------------------------------------------------------
   9. Restaurant cards (a teaser grid for the home page)
   --------------------------------------------------------------------- */
.holi-collection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3.5rem;
}

.holi-card {
    position: relative;
    background: var(--holi-paper);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--holi-line-soft);
    transition: transform 500ms var(--holi-ease), box-shadow 500ms var(--holi-ease);
}
.holi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -30px rgba(72, 54, 46, 0.35);
}

.holi-card__media {
    aspect-ratio: 4 / 5;
    background: var(--holi-cream-deep);
    background-size: cover;
    background-position: center;
    transition: transform 800ms var(--holi-ease);
}
.holi-card:hover .holi-card__media { transform: scale(1.04); }

.holi-card__body { padding: 1.75rem 1.75rem 2rem; }

.holi-card__kicker {
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--holi-ink-muted);
}

.holi-card__title {
    font-family: var(--holi-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.85rem;
    margin: 0.4rem 0 0.6rem;
}

.holi-card__excerpt { color: var(--holi-ink-soft); font-size: 0.95rem; }

/* ---------------------------------------------------------------------
   9b. Restaurant detail page
   ---------------------------------------------------------------------
   Used by pages/restaurants/*.php — a centered logo + opening line with
   a hairline rule beneath, then a two-column story: bold sans display
   tagline on the left, long-form body copy + outline CTA on the right.
   --------------------------------------------------------------------- */
.holi-rest-intro {
    background: var(--holi-cream);
    padding: clamp(3rem, 6vw, 5rem) 0 0;
}

.holi-rest-intro__logo-wrap {
    text-align: center;
}

.holi-rest-intro__logo {
    height: clamp(60px, 8vw, 110px);
    width: auto;
    max-width: 60%;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}

.holi-rest-intro__opened {
    margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
    max-width: 64ch;
    text-align: center;
    color: var(--holi-ink);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    font-weight: 300;
}

.holi-rest-intro__rule {
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    height: 1px;
    background: var(--holi-line);
}

.holi-rest-story {
    background: var(--holi-cream);
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6rem);
}

.holi-rest-story__grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.holi-rest-story__tagline {
    margin: 0;
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.2vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--holi-ink);
    max-width: 18ch;
}

.holi-rest-story__copy p {
    margin: 0 0 1.4em;
    color: var(--holi-ink-soft);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.85;
    font-weight: 300;
}
.holi-rest-story__copy p:last-of-type { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }

.holi-rest-story__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 2rem;
    border: 1px solid var(--holi-line);
    background: var(--holi-cream-deep);
    color: var(--holi-ink);
    font-family: var(--holi-font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    transition: background-color 320ms var(--holi-ease),
                color 320ms var(--holi-ease),
                border-color 320ms var(--holi-ease),
                gap 320ms var(--holi-ease);
}
.holi-rest-story__cta::after {
    content: '↗';
    font-size: 1rem;
    letter-spacing: 0;
    transition: transform 320ms var(--holi-ease);
}
.holi-rest-story__cta:hover {
    background: var(--holi-ink);
    color: var(--holi-cream);
    border-color: var(--holi-ink);
    gap: 1.25rem;
}
.holi-rest-story__cta:hover::after { transform: translate(3px, -3px); }

@media (max-width: 860px) {
    .holi-rest-story__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .holi-rest-story__tagline { max-width: none; }
}

/* Trial Coco Gothic ships with strikethrough placeholders in place of
   digit glyphs. This helper opts numerical runs out of Coco Gothic so
   years and similar values stay readable until the licensed font is
   installed. Swap to `inherit` once production fonts are in place. */
.holi-num {
    font-family: 'Avenir Next', 'Futura', 'Helvetica Neue', system-ui, sans-serif;
    font-feature-settings: "lnum" 1;     /* lining (not old-style) numerals */
    font-variant-numeric: lining-nums;
}

/* ---------------------------------------------------------------------
   9c. Restaurant gallery (mixed-width rows)
   ---------------------------------------------------------------------
   Each row carries a `.holi-rest-gallery__row--cols-N` modifier (N=2..6)
   so per-row column counts can vary without touching CSS. Cells share
   a fixed aspect ratio for visual rhythm regardless of source image.
   --------------------------------------------------------------------- */
.holi-rest-gallery {
    background: var(--holi-cream);
    padding: 0 0 clamp(4rem, 7vw, 6rem);
}

.holi-rest-gallery__row {
    display: grid;
    gap: 0;
    margin-bottom: 0;
}

.holi-rest-gallery__row--cols-2 { grid-template-columns: repeat(2, 1fr); }
.holi-rest-gallery__row--cols-3 { grid-template-columns: repeat(3, 1fr); }
.holi-rest-gallery__row--cols-4 { grid-template-columns: repeat(4, 1fr); }

.holi-rest-gallery__cell {
    margin: 0;
    overflow: hidden;
    position: relative;
    background: var(--holi-cream-deep);
}

.holi-rest-gallery__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 900ms var(--holi-ease);
    will-change: transform;
}
.holi-rest-gallery__cell:hover .holi-rest-gallery__image {
    transform: scale(1.04);
}

/* Responsive: 3-up collapses to 2 on tablet and 1 on phone; 2-up
   stays 2-up on tablet then collapses to 1 on phone. */
@media (max-width: 860px) {
    .holi-rest-gallery__row--cols-3 { grid-template-columns: repeat(2, 1fr); }
    .holi-rest-gallery__row--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .holi-rest-gallery__row--cols-2,
    .holi-rest-gallery__row--cols-3,
    .holi-rest-gallery__row--cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   10. Footer
   ---------------------------------------------------------------------
   Light cream background, dark brown ink. Three vertical stacks of
   link + social icon, separated from the signup line above by a single
   hairline rule that runs nearly edge to edge.
   --------------------------------------------------------------------- */
.holi-footer {
    background: var(--holi-cream);
    color: var(--holi-ink);
    margin-top: 0;
}

/* 1 ─ Sign-up line --------------------------------------------------- */
.holi-footer__signup {
    padding: clamp(1rem, 2vw, 1.75rem) var(--holi-gutter) clamp(1.5rem, 2.5vw, 2.25rem);
    text-align: center;
}

.holi-footer__signup-line {
    margin: 0;
    font-family: var(--holi-font-sans);
    font-weight: 300;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: var(--holi-ink);
    letter-spacing: 0.02em;
}

/* 2 ─ Divider rule --------------------------------------------------- */
.holi-footer__rule {
    height: 1px;
    background: var(--holi-line);
    max-width: calc(var(--holi-container) + (var(--holi-gutter) * 2));
    margin: 0 auto;
}

/* 3 ─ Three-column link block --------------------------------------- */
.holi-footer__inner {
    max-width: var(--holi-container);
    margin: 0 auto;
    padding: clamp(2.25rem, 4vw, 3.25rem) var(--holi-gutter) clamp(2.5rem, 4vw, 3.5rem);
}

.holi-footer__columns {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
}

.holi-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.holi-footer__link {
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--holi-ink);
    position: relative;
    padding-bottom: 0.25rem;
    transition: color 240ms var(--holi-ease);
}
.holi-footer__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--holi-ink);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 360ms var(--holi-ease);
}
.holi-footer__link:hover::after,
.holi-footer__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* 4 ─ Social icons --------------------------------------------------- */
.holi-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--holi-ink);
    transition: color 240ms var(--holi-ease), transform 320ms var(--holi-ease);
}
.holi-footer__social:hover,
.holi-footer__social:focus-visible {
    color: var(--holi-accent);
    transform: translateY(-2px);
}
.holi-footer__social svg {
    width: 100%;
    height: 100%;
    display: block;
}
.holi-footer__social:focus-visible {
    outline: 2px solid var(--holi-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

/* 5 ─ Base bar (very subtle) ---------------------------------------- */
.holi-footer__base {
    border-top: 1px solid var(--holi-line-soft);
    padding: 1.25rem var(--holi-gutter);
    max-width: var(--holi-container);
    margin: 0 auto;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--holi-ink-muted);
}
.holi-footer__base p { margin: 0; }

/* Responsive --------------------------------------------------------- */
@media (max-width: 720px) {
    .holi-footer__columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ---------------------------------------------------------------------
   11. Reveal-on-scroll
   --------------------------------------------------------------------- */
[data-holi-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms var(--holi-ease), transform 900ms var(--holi-ease);
    transition-delay: var(--holi-delay, 0ms);
}
[data-holi-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    [data-holi-reveal] { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   12. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .holi-intro__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Toggle button — absolutely positioned so it doesn't push the centered logo off-axis */
    .holi-header__inner { position: relative; }
    .holi-header__toggle {
        display: inline-flex;
        position: absolute;
        top: 50%;
        right: var(--holi-gutter);
        transform: translateY(-50%);
    }

    .holi-nav {
        position: fixed;
        inset: 0;
        background: var(--holi-cream);
        padding: 6rem var(--holi-gutter) 3rem;
        transform: translateY(-101%);
        transition: transform 500ms var(--holi-ease);
        z-index: 90;
        overflow-y: auto;
    }
    .holi-nav.is-open { transform: translateY(0); }

    .holi-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .holi-nav__link {
        font-size: 1.05rem;
        letter-spacing: 0.18em;
    }

    body.is-locked { overflow: hidden; }
}