@charset "UTF-8";

/* ==========================================================================
   STHAN — Food Beyond Borders
   --------------------------------------------------------------------------
   1.  Reset
   2.  Variables
   3.  Base
   4.  Typography
   5.  Layout primitives (shell, panel, box)
   6.  Header
   7.  Navigation
   8.  Mobile navigation
   9.  Hero
   10. Box content (labels, headings, copy)
   11. Buttons
   12. Figures & captions
   13. Carousel
   14. Menu (Food & Drink)
   15. Article / long-form
   16. Footer
   17. Animations
   18. Responsive
   19. Accessibility & reduced motion
   ========================================================================== */


/* ==========================================================================
   1. RESET
   ========================================================================== */

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

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

img { height: auto; }

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

a { color: inherit; }


/* ==========================================================================
   2. VARIABLES
   ========================================================================== */

:root {

    /* --- Typography ------------------------------------------------------
       Gill Sans and ITC Cheltenham carry the original identity. Neither can
       be redistributed here, so the stacks below name them first (they are
       present on most Windows/macOS machines) and fall back to the closest
       widely available substitutes. Drop licensed webfonts into
       assets/fonts/ and add @font-face rules — nothing else needs changing. */

    --font-ui: "Gill Sans MT", "Gill Sans", Calibri, Optima, "Trebuchet MS", "Segoe UI", sans-serif;
    --font-body: "Gill Sans MT", "Gill Sans", Calibri, Optima, "Trebuchet MS", "Segoe UI", sans-serif;
    --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
    --font-deva: "Nirmala UI", "Lohit Devanagari", "Noto Sans Devanagari", "Mangal", sans-serif;

    /* --- Colour ---------------------------------------------------------- */

    --ink: #292929;          /* body copy, dark buttons          */
    --ink-soft: #353535;     /* rules, secondary marks           */
    --ink-mute: #6a6459;     /* captions, muted copy             */
    --bar: #323132;          /* header & footer bars             */
    --bar-deep: #292929;     /* contact strip                    */
    --bar-lift: #414141;     /* newsletter panel                 */
    --paper: #f0ece5;        /* light module base                */
    --terracotta: #a1401f;   /* brand red — module base          */
    --terracotta-ink: #a14125; /* brand red used as a text colour */
    --white: #ffffff;
    --grey-dim: #949494;
    --scrim: rgba(0, 0, 0, .32);
    --scrim-deep: rgba(0, 0, 0, .55);

    /* --- Metrics --------------------------------------------------------- */

    --header-h: 49px;
    --strip-h: 49px;
    --shell-pad: 20px;
    --frame-gap: 40px;       /* inset of the rule inside a flat module */
    --frame-pad: 40px;
    --box-min: 100vh;

    /* --- Motion ---------------------------------------------------------- */

    --ease: cubic-bezier(.22, .61, .36, 1);
    --t-fast: .2s;
    --t-slow: .6s;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

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

body {
    background: var(--ink-soft);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.35;
    overflow-x: hidden;
    padding-top: var(--header-h);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
    overflow: hidden;
}

/* Native snap on tall screens only — gentle "proximity", never forced. */
@media (min-width: 900px) and (min-height: 620px) {
    html { scroll-snap-type: y proximity; }

    .panel--snap {
        scroll-snap-align: start;
        scroll-margin-top: var(--header-h);
    }
}

::selection {
    background: var(--terracotta);
    color: var(--white);
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 700;
    line-height: 1.15;
}

p { line-height: 1.35; }

a { text-decoration: none; }

.text-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity var(--t-fast) var(--ease);
}

.text-link:hover,
.text-link:focus-visible { opacity: .6; }

/* Devanagari greeting — smaller optical size, no tracking. */
.deva {
    font-family: var(--font-deva);
    letter-spacing: 0;
    text-transform: none;
}


/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 var(--shell-pad);
    width: 100%;
}

/* --- Panel: one full-viewport composition ------------------------------- */

.panel {
    display: flex;
    min-height: calc(var(--box-min) - var(--header-h));
    position: relative;
    width: 100%;
}

.panel--hero { min-height: calc(100vh - var(--header-h)); }

/* Content that must scroll (menus, articles) — height follows the copy. */
.panel--flow { min-height: 0; }

.panel__col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

/* Selectors are class-qualified so they win over `.box { flex: 1 1 auto }`
   further down — a split column must halve exactly, not size to its copy. */
.panel__col--split > .box,
.panel__col--split > .panel__row {
    flex: 1 1 0;
    min-height: 0;
}

.panel__row {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
}

.panel__row > .box,
.panel__row > .panel__col {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}

/* --- Box: a single module ------------------------------------------------ */

.box {
    background-color: var(--paper);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--ink);
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Image modules come in two flavours:
   • type over photography — the picture is decorative, so it is set with
     `--bg`. NOTE: the url() is substituted here, inside this stylesheet, so
     the path must be written relative to assets/css/ — i.e. ../images/…
   • the picture *is* the content — those carry a real <img class="box__media">
     instead, which gives us alt text and lazy loading, and need no --bg. */
.box--image {
    background-color: var(--ink);
    background-image: var(--bg, none);
}

.box--paper {
    background-color: var(--paper);
    background-image: url("../images/backgrounds/box-image-inner1.jpg");
}

.box--terracotta {
    background-color: var(--terracotta);
    background-image: url("../images/sections/box-image2.jpg");
    color: var(--white);
}

.box--ink {
    background-color: var(--ink);
    background-image: none;
    color: var(--white);
}

.box--light { color: var(--white); }

/* Darkening scrim so type stays legible over photography. */
.box--scrim::after {
    background: var(--scrim);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

.box--scrim-deep::after { background: var(--scrim-deep); }

/* Frame: the 20% / 60% / 20% rhythm every module in the reference uses. */
.box__frame {
    display: grid;
    grid-template-rows: 20% 1fr 20%;
    height: 100%;
    padding: var(--frame-pad);
    position: relative;
    width: 100%;
    z-index: 1;
}

/* Flat colour modules carry a hairline rule inset from the edge. */
.box--paper > .box__frame,
.box--terracotta > .box__frame,
.box--ink > .box__frame {
    border: 1px solid currentColor;
    height: auto;
    inset: var(--frame-gap);
    opacity: 1;
    position: absolute;
    width: auto;
}

.box--paper > .box__frame { border-color: rgba(41, 41, 41, .35); }
.box--terracotta > .box__frame,
.box--ink > .box__frame { border-color: rgba(255, 255, 255, .45); }

.box--no-rule > .box__frame { border: 0; }

.box__top {
    align-self: start;
    padding-top: 4px;
    text-align: center;
}

.box__body {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 0;
    padding: 0 clamp(16px, 5vw, 80px);
    text-align: center;
}

.box__center { width: 100%; }

.box__foot {
    align-self: end;
    padding-bottom: 4px;
    text-align: center;
}

/* Free-flowing variant: content decides the height (menus, long articles). */
.box--flow { display: block; }

.box--flow > .box__frame {
    display: block;
    grid-template-rows: none;
    height: auto;
    padding: clamp(48px, 7vw, 96px) clamp(20px, 6vw, 110px);
    position: relative;
    inset: auto;
    width: auto;
}

/* Flat flow modules keep the signature hairline — it just travels with the
   copy instead of being pinned to the module edges. */
.box--flow.box--paper > .box__frame,
.box--flow.box--terracotta > .box__frame,
.box--flow.box--ink > .box__frame {
    inset: auto;
    margin: var(--frame-gap);
    padding: clamp(44px, 5vw, 76px) clamp(22px, 5vw, 80px);
    position: relative;
    width: auto;
}


/* ==========================================================================
   6. HEADER
   ========================================================================== */

.site-header {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 900;
}

.header-bar {
    background: var(--bar);
    color: var(--white);
    height: var(--header-h);
}

.header-bar__inner {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
}

.brand {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}

.brand img {
    height: 30px;
    width: auto;
}

/* Contact strip — collapses to nothing, expands to a 49px band. */
.contact-strip {
    background: var(--bar-deep);
    box-shadow: inset 0 6px 6px -6px rgba(0, 0, 0, .5),
                inset 0 -6px 6px -6px rgba(0, 0, 0, .5);
    color: var(--white);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-fast) var(--ease);
}

.contact-strip[hidden] {
    display: block;
    max-height: 0;
}

.contact-strip.is-open { max-height: var(--strip-h); }

.contact-strip .nav {
    height: var(--strip-h);
}


/* ==========================================================================
   7. NAVIGATION
   ========================================================================== */

.nav {
    align-items: center;
    display: flex;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.nav--right { justify-content: flex-end; }

.nav > li { position: relative; }

.nav a,
.nav button {
    color: var(--white);
    display: block;
    letter-spacing: inherit;
    line-height: 1;
    padding: 16px 14px;
    position: relative;
    text-transform: inherit;
    transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav a:hover,
.nav button:hover,
.nav a:focus-visible,
.nav button:focus-visible { opacity: .62; }

/* The reference marks the active item with a small ellipsis beneath it. */
.nav .is-current > a::after,
.nav a[aria-current="page"]::after {
    content: "···";
    display: block;
    font-size: 10px;
    left: 0;
    letter-spacing: .14em;
    line-height: 1;
    position: absolute;
    right: 0;
    text-align: center;
    top: 26px;
}

.contact-strip .nav a { font-size: 10px; }

.nav-toggle-contact[aria-expanded="true"] { opacity: .62; }

.primary-nav { display: block; }


/* ==========================================================================
   8. MOBILE NAVIGATION
   ========================================================================== */

.menu-toggle {
    align-items: center;
    color: var(--white);
    display: none;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: .18em;
    padding: 12px 0 12px 12px;
    text-transform: uppercase;
}

.menu-toggle__bars {
    display: block;
    height: 10px;
    position: relative;
    width: 22px;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
    background: currentColor;
    content: "";
    height: 1.5px;
    left: 0;
    position: absolute;
    transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
    width: 100%;
}

.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { bottom: 0; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
    transform: translateY(4.25px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
    transform: translateY(-4.25px) rotate(-45deg);
}

.mobile-nav {
    background: var(--bar);
    bottom: 0;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    opacity: 0;
    overflow-y: auto;
    padding: 40px var(--shell-pad) 56px;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: var(--header-h);
    transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast);
    visibility: hidden;
    z-index: 850;
}

.mobile-nav[hidden] { display: flex; }

.mobile-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.mobile-nav__list {
    margin: 0 auto;
    max-width: 420px;
    width: 100%;
}

.mobile-nav__list a {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    display: block;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2em;
    padding: 18px 4px;
    text-transform: uppercase;
}

.mobile-nav__list a[aria-current="page"] { color: #e2a68e; }

.mobile-nav__meta {
    color: var(--grey-dim);
    font-size: 12px;
    letter-spacing: .1em;
    line-height: 1.8;
    margin: 32px auto 0;
    max-width: 420px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.mobile-nav__meta a { border-bottom: 1px solid currentColor; }


/* ==========================================================================
   9. HERO
   ========================================================================== */

.hero {
    background-color: var(--terracotta);
    background-image: var(--bg);
    background-position: center;
    background-size: cover;
    color: var(--white);
}

.hero .box__frame { padding: clamp(24px, 4vw, 48px); }

.hero__logo {
    margin: 0 auto;
    width: clamp(200px, 30vw, 380px);
}

.hero__mark {
    display: block;
    height: auto;
    width: 100%;
}

/* "All Welcome" + the pulsing chevron at the foot of the hero. */
.scroll-cue {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    padding-bottom: 34px;
    position: relative;
    text-transform: uppercase;
}

.scroll-cue__chevron {
    animation: cue-pulse 2s var(--ease) infinite;
    bottom: 2px;
    display: block;
    height: 18px;
    left: 50%;
    margin-left: -9px;
    position: absolute;
    width: 18px;
}

.scroll-cue__chevron::before,
.scroll-cue__chevron::after {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: "";
    height: 8px;
    left: 4px;
    position: absolute;
    transform: rotate(45deg);
    width: 8px;
}

.scroll-cue__chevron::before { top: 0; }
.scroll-cue__chevron::after { top: 7px; }


/* ==========================================================================
   10. BOX CONTENT
   ========================================================================== */

/* --- Small centred label with a rule either side ------------------------- */

.label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
    padding: 0 22px;
    position: relative;
    text-transform: uppercase;
}

.label::before,
.label::after {
    background: currentColor;
    content: "";
    height: 1.5px;
    position: absolute;
    top: 50%;
    width: 11px;
}

.label::before { left: 0; }
.label::after { right: 0; }

.label--light { color: var(--white); }
.label--dark { color: var(--ink-soft); }

/* --- Headings inside modules -------------------------------------------- */

/* Gill Sans, uppercase, tracked — the workhorse module heading. */
.box-title {
    font-family: var(--font-ui);
    font-size: clamp(20px, 2.1vw, 26px);
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* The oversized statement heading ("All day, every day"). */
.box-title--xl {
    font-size: clamp(38px, 5.2vw, 75px);
    letter-spacing: .03em;
    line-height: 1.08;
}

.box-title--lg {
    font-size: clamp(26px, 3vw, 40px);
    letter-spacing: .05em;
}

/* Cheltenham-style serif italic — dish names, story titles, features. */
.box-title--serif {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.2vw, 40px);
    font-style: italic;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    text-transform: none;
}

.box-title--serif-sm { font-size: clamp(24px, 2.6vw, 36px); }

.box-subtitle {
    font-family: var(--font-ui);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.55;
    margin-top: 16px;
    text-transform: uppercase;
}

.box-copy {
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 46ch;
}

.box-copy + .box-copy { margin-top: 14px; }

.box-copy--wide { max-width: 62ch; }

/* Vertical rhythm inside a module's centre cell. */
.box__center > * + * { margin-top: 20px; }
.box__center > .label + * { margin-top: 22px; }

.accent { color: var(--terracotta-ink); }

.box--light .accent,
.box--terracotta .accent,
.box--ink .accent { color: #f0c3ae; }

/* Partial wordmark used in the welcome module. */
.crest {
    margin: 0 auto 4px;
    width: clamp(70px, 8vw, 104px);
}

/* Module-level link that behaves like a heading (the reference stacks
   a title over a "–READ MORE–" line). */
.box-link {
    display: inline-block;
    transition: opacity var(--t-fast) var(--ease);
}

.box-link:hover,
.box-link:focus-visible { opacity: .68; }

.box-more {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    padding: 0 20px;
    position: relative;
    text-transform: uppercase;
    transition: opacity var(--t-fast) var(--ease);
}

.box-more::before,
.box-more::after {
    background: currentColor;
    content: "";
    height: 1.5px;
    position: absolute;
    top: 50%;
    width: 10px;
}

.box-more::before { left: 0; }
.box-more::after { right: 0; }

.box-more:hover,
.box-more:focus-visible { opacity: .68; }


/* ==========================================================================
   11. BUTTONS
   ========================================================================== */

.button {
    background: var(--ink);
    border: 1px solid var(--white);
    color: var(--white);
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px;
    font-style: italic;
    letter-spacing: .09em;
    line-height: 1;
    padding: 9px 17px;
    position: relative;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}

.button:hover,
.button:focus-visible {
    background: var(--white);
    border-color: var(--white);
    color: var(--ink);
}

/* On paper: outline only, fills with ink on hover. */
.button--ink {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}

.button--ink:hover,
.button--ink:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

.button--light {
    background: transparent;
    border-color: rgba(255, 255, 255, .7);
    color: var(--white);
}

.button--light:hover,
.button--light:focus-visible {
    background: var(--white);
    color: var(--bar);
}

.button__icon {
    display: inline-block;
    margin-right: 8px;
    vertical-align: -2px;
    width: 14px;
}


/* ==========================================================================
   12. FIGURES & CAPTIONS
   ========================================================================== */

.box__media {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.box__media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.box__caption {
    background: rgba(0, 0, 0, .8);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 13px;
    font-style: italic;
    left: 0;
    letter-spacing: .06em;
    line-height: 1.45;
    padding: 15px 26px;
    position: absolute;
    top: 0;
    width: min(70%, 420px);
    z-index: 2;
}


/* ==========================================================================
   13. CAROUSEL
   ========================================================================== */

.carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.carousel__track {
    display: flex;
    transition: transform var(--t-slow) var(--ease);
    width: 100%;
}

.carousel__slide {
    display: flex;
    flex: 0 0 100%;
    min-width: 0;
}

/* The slide is a flex item in a full-height chain, so the panel stretches to
   fill it — it must not re-assert its own 100vh minimum on top of that. */
.carousel__slide > .panel { min-height: 0; }

.carousel__btn {
    align-items: center;
    background: rgba(41, 41, 41, .7);
    border: 1px solid rgba(255, 255, 255, .55);
    color: var(--white);
    display: flex;
    height: 44px;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color var(--t-fast) var(--ease);
    width: 34px;
    z-index: 6;
}

.carousel__btn:hover,
.carousel__btn:focus-visible { background: var(--ink); }

.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }

.carousel__btn svg { width: 12px; }

.carousel__dots {
    bottom: 18px;
    display: flex;
    gap: 9px;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 6;
}

.carousel__dot {
    background: transparent;
    border: 1px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, .6);
    height: 9px;
    padding: 0;
    transition: background-color var(--t-fast) var(--ease);
    width: 9px;
}

.carousel__dot[aria-selected="true"] { background: var(--white); }


/* ==========================================================================
   14. MENU (FOOD & DRINK)
   ========================================================================== */

.menu-wrap {
    margin: 0 auto;
    max-width: 1180px;
}

.menu-intro {
    margin: 0 auto clamp(48px, 6vw, 80px);
    max-width: 60ch;
    text-align: center;
}

.menu-intro .box-copy {
    margin-top: 14px;
    max-width: none;
}

.menu-intro .menu-section__title { margin-top: 18px; }

.menu-section + .menu-section { margin-top: clamp(52px, 6vw, 86px); }

.menu-section__head {
    border-bottom: 1px solid rgba(41, 41, 41, .28);
    margin-bottom: clamp(28px, 3vw, 40px);
    padding-bottom: 14px;
    text-align: center;
}

.menu-section__title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 34px);
    font-style: italic;
    font-weight: 700;
    letter-spacing: .02em;
}

.menu-section__note {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    margin-top: 10px;
    text-transform: uppercase;
}

.menu-grid {
    column-gap: clamp(36px, 5vw, 76px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(24px, 3vw, 34px);
}

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

.menu-item__name {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.menu-item__price {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 15px;
    font-style: italic;
}

.menu-item__desc {
    color: var(--ink-mute);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 7px;
    max-width: 44ch;
}

.menu-foot {
    border-top: 1px solid rgba(41, 41, 41, .28);
    margin-top: clamp(48px, 5vw, 72px);
    padding-top: clamp(28px, 3vw, 40px);
    text-align: center;
}

.menu-foot p + p { margin-top: 22px; }


/* ==========================================================================
   15. ARTICLE / LONG-FORM
   ========================================================================== */

.article {
    margin: 0 auto;
    max-width: 62ch;
    text-align: left;
}

.article__eyebrow {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.article__title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 34px);
    font-style: italic;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.25;
    margin-top: 14px;
}

.article__body { margin-top: 22px; }

/* Sub-heading inside long-form copy (privacy policy, notes). */
.article__subhead {
    font-family: var(--font-display);
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .02em;
    margin-top: 28px;
}

.article__body p {
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.62;
}

.article__body p + p { margin-top: 15px; }

.article__body a {
    border-bottom: 1px solid currentColor;
}

.article__foot {
    border-top: 1px solid rgba(41, 41, 41, .25);
    margin-top: 28px;
    padding-top: 18px;
}

.box--terracotta .article__foot,
.box--ink .article__foot { border-top-color: rgba(255, 255, 255, .3); }

/* Contact-style stacked information block. */
.info-block { text-align: center; }

.info-block__title {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.4vw, 46px);
    font-style: italic;
    font-weight: 700;
}

.info-block dl { margin-top: 26px; }

.info-block dt {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.info-block dd {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 6px;
}

.info-block dd + dt { margin-top: 22px; }

.info-block dd a { border-bottom: 1px solid currentColor; }


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer {
    background: var(--bar);
    color: var(--white);
    position: relative;
    z-index: 10;
}

.footer-bar__inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: var(--header-h);
}

.footer-nav {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.footer-nav a,
.footer-nav button {
    color: var(--white);
    display: block;
    padding: 16px 14px 16px 0;
    transition: opacity var(--t-fast) var(--ease);
}

.footer-nav a:hover,
.footer-nav button:hover,
.footer-nav a:focus-visible,
.footer-nav button:focus-visible { opacity: .62; }

.footer-social {
    align-items: center;
    display: flex;
    gap: 4px;
}

.footer-social__label {
    color: var(--grey-dim);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    margin-right: 10px;
    text-transform: uppercase;
}

.footer-social a {
    display: block;
    padding: 10px;
    transition: opacity var(--t-fast) var(--ease);
}

.footer-social svg { width: 17px; }

.footer-social a:hover,
.footer-social a:focus-visible { opacity: .6; }

.newsletter-panel {
    background: var(--bar-lift);
    box-shadow: inset 0 6px 6px -6px rgba(0, 0, 0, .5);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-fast) var(--ease);
}

.newsletter-panel[hidden] {
    display: block;
    max-height: 0;
}

.newsletter-panel.is-open { max-height: 260px; }

.newsletter-panel__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: space-between;
    padding-bottom: 26px;
    padding-top: 26px;
}

.newsletter-panel__copy {
    color: var(--grey-dim);
    font-size: 14px;
    line-height: 1.55;
    max-width: 52ch;
}

.footer-base {
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: var(--grey-dim);
}

.footer-base__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    padding-bottom: 20px;
    padding-top: 20px;
}

.footer-base p {
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.footer-base a { border-bottom: 1px solid rgba(255, 255, 255, .4); }


/* ==========================================================================
   17. ANIMATIONS
   ========================================================================== */

@keyframes cue-pulse {
    0%, 100% { opacity: .45; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(4px); }
}

/* Scroll reveal — JS adds .is-visible when a module enters the viewport. */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Slow drift on photographic modules; stops on hover of nothing — purely
   a settling gesture as the panel comes into view. */
.box--image.reveal.is-visible { transition-duration: .9s; }

/* Without JS everything must still be visible and reachable: the two
   disclosure panels sit open and their toggles step out of the way. */
.no-js .reveal {
    opacity: 1;
    transform: none;
}

.no-js .contact-strip { max-height: var(--strip-h); }

.no-js .newsletter-panel { max-height: 340px; }

.no-js .nav-toggle-contact,
.no-js .newsletter-toggle { display: none; }


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

/* --- Large desktop ------------------------------------------------------- */

@media (min-width: 1440px) {
    :root {
        --frame-pad: 56px;
        --frame-gap: 48px;
        --shell-pad: 32px;
    }
}

/* --- Below 1200px: tighten the frame ------------------------------------- */

@media (max-width: 1200px) {
    :root {
        --frame-pad: 32px;
        --frame-gap: 28px;
    }

    .nav a,
    .nav button { padding: 16px 10px; }
}

/* --- Tablet landscape ---------------------------------------------------- */

@media (max-width: 1024px) {
    .nav { font-size: 10px; letter-spacing: .14em; }

    .nav a,
    .nav button { padding: 16px 8px; }

    .box__caption {
        font-size: 12px;
        padding: 12px 18px;
        width: min(85%, 380px);
    }
}

/* --- Stack point: the composition becomes a vertical sequence ------------ */

@media (max-width: 900px) {

    .primary-nav { display: none; }

    .menu-toggle { display: flex; }

    .contact-strip { display: none !important; }

    .panel,
    .panel__row {
        display: block;
        min-height: 0;
    }

    .panel--hero {
        display: flex;
        min-height: calc(100vh - var(--header-h));
    }

    .panel__col { display: block; }

    /* Each module becomes its own generous, intentional block rather than a
       squeezed half of a two-up. */
    .box {
        display: block;
        min-height: 0;
    }

    .box--image,
    .box--scrim,
    .box--scrim-deep {
        min-height: 72vw;
    }

    .box__frame {
        display: block;
        grid-template-rows: none;
        height: auto;
        min-height: inherit;
        padding: clamp(44px, 9vw, 68px) clamp(22px, 7vw, 56px);
    }

    .box--paper > .box__frame,
    .box--terracotta > .box__frame,
    .box--ink > .box__frame {
        inset: auto;
        margin: 18px;
        position: relative;
        width: auto;
    }

    .box--image > .box__frame {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 72vw;
    }

    .box__top,
    .box__body,
    .box__foot { padding-left: 0; padding-right: 0; }

    .box__body { padding-top: 26px; }

    .box__foot { padding-top: 30px; }

    .box--image .box__top,
    .box--image .box__body,
    .box--image .box__foot { width: 100%; }

    .panel--hero .box__frame {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 0;
    }

    .carousel__track {
        display: block;
        transform: none !important;
    }

    .carousel__slide { display: block; }

    .carousel__btn,
    .carousel__dots { display: none; }

    .menu-grid { grid-template-columns: minmax(0, 1fr); }

    .footer-bar__inner {
        flex-direction: column;
        gap: 4px;
        padding-bottom: 16px;
        padding-top: 12px;
    }

    .footer-nav { justify-content: center; }

    .footer-nav a,
    .footer-nav button { padding: 10px 12px; }

    .footer-base__inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* --- Tablet portrait ----------------------------------------------------- */

@media (max-width: 768px) {
    .box--image,
    .box--scrim,
    .box--scrim-deep,
    .box--image > .box__frame { min-height: 78vw; }

    .box__caption {
        font-size: 11px;
        letter-spacing: .04em;
        padding: 11px 16px;
        width: 100%;
    }

    .newsletter-panel.is-open { max-height: 340px; }

    .newsletter-panel__inner {
        flex-direction: column;
        text-align: center;
    }
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 600px) {
    :root { --shell-pad: 16px; }

    body { font-size: 15px; }

    .box--paper > .box__frame,
    .box--terracotta > .box__frame,
    .box--ink > .box__frame { margin: 12px; }

    .box__frame { padding: 46px 24px; }

    .box--image,
    .box--scrim,
    .box--scrim-deep,
    .box--image > .box__frame { min-height: 92vw; }

    .box-copy { max-width: none; }

    .article { max-width: none; }

    .brand img { height: 26px; }

    .info-block dd { font-size: 14px; }
}

/* --- Small mobile -------------------------------------------------------- */

@media (max-width: 420px) {
    .box__frame { padding: 40px 18px; }

    .label { font-size: 11px; letter-spacing: .15em; }

    .button { font-size: 13px; padding: 9px 14px; }

    .menu-toggle { font-size: 10px; gap: 8px; }

    .mobile-nav__list a { font-size: 14px; padding: 16px 2px; }

    .footer-social__label { display: none; }
}

@media (max-width: 340px) {
    .box__frame { padding: 34px 14px; }

    .brand img { height: 22px; }

    .menu-toggle__text { display: none; }
}

/* --- Short viewports: never trap the hero -------------------------------- */

@media (max-height: 560px) and (min-width: 901px) {
    .panel,
    .panel--hero { min-height: 560px; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
    .site-header,
    .mobile-nav,
    .carousel__btn,
    .carousel__dots,
    .newsletter-panel { display: none !important; }

    body { padding-top: 0; }

    .box { background-image: none !important; color: #000; }
}


/* ==========================================================================
   19. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */

.skip-link {
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    left: 8px;
    letter-spacing: .16em;
    padding: 10px 16px;
    position: fixed;
    text-transform: uppercase;
    top: -80px;
    transition: top var(--t-fast) var(--ease);
    z-index: 1000;
}

.skip-link:focus { top: 8px; }

:focus-visible {
    outline: 2px solid #f0c3ae;
    outline-offset: 2px;
}

.box--paper :focus-visible,
.menu-wrap :focus-visible { outline-color: var(--terracotta-ink); }

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; scroll-snap-type: none; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .scroll-cue__chevron { animation: none; opacity: .8; }
}