/* =============================================================
   Sabah kahva - design system
   Direction: "Black and Tan". A neutral off-white / true off-black
   canvas with the brand gold (taken from the Sabah Minas gold
   pack) as the single accent. Deliberately NOT a cream + brass
   warm-craft palette, which has become the default look for
   every artisan food brand.

   Composition notes, driven by the actual assets:
     sabah-coffee.webp  458x1024  the sharpest asset, so the pack
                                  is the hero object, not a photo
     coffee-ritual.jpg  1024x341  panoramic, used full-bleed at its
                                  natural 3:1 as a divider band
     coffee-beans.jpg   1400x788  largest photo, carries the story
                                  band behind a scrim
     coffee-moment.jpg   687x583  mid-size, sits in the product block
   No photo is stretched past its natural width.

   Radius system (one rule, applied everywhere):
     panels + cards .... var(--r-card)    14px
     buttons ........... var(--r-pill)    full pill
     inputs + chips .... var(--r-control) 10px

   Dark mode is driven by html[data-bs-theme], which theme-init.js
   sets from stored consent or prefers-color-scheme. Both modes are
   fully designed; neither is an afterthought.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
    color-scheme: light;

    --ui-bg: #f2f2f0;
    --ui-surface: #fbfbfa;
    --ui-soft: #eaeae7;
    --ui-border: #dbdbd6;
    --ui-border-strong: #c4c4bd;
    --ui-text: #16161a;
    --ui-muted: #5c5c66;

    /* Deep gold: passes AA as link text and as a button fill. */
    --ui-accent: #8a5f14;
    --ui-accent-hover: #6f4c10;
    --ui-on-accent: #ffffff;
    /* Bright brand gold: graphics, rules and large display only. */
    --ui-gold: #c8952c;
    --ui-tint: #f6efe0;

    --ui-success: #18794e;
    --ui-warning: #8a5b00;
    --ui-danger: #b42332;

    /* Ink surface: the announcement bar, the closing band and the footer.
       It is dark in BOTH modes, so dark mode never gets a near-white block
       sandwiched between dark sections. */
    --ink: #16161a;
    --ink-text: #f1f1ef;
    --ink-soft: rgb(241 241 239 / 76%);
    --ink-line: rgb(241 241 239 / 18%);

    --r-card: 14px;
    --r-control: 10px;
    --r-pill: 999px;
    --ui-radius: var(--r-control);

    --ui-shadow: 0 1px 2px rgb(22 22 26 / 5%), 0 8px 24px -12px rgb(22 22 26 / 10%);
    --ui-shadow-lift: 0 2px 4px rgb(22 22 26 / 6%), 0 18px 40px -16px rgb(22 22 26 / 18%);
    /* The pack is a cut-out object, so it needs a grounded shadow. */
    --pack-shadow: 0 40px 60px -28px rgb(22 22 26 / 45%), 0 10px 20px -12px rgb(22 22 26 / 30%);
    --glow: radial-gradient(60% 55% at 50% 45%, rgb(200 149 44 / 26%), transparent 72%);

    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --measure: 58ch;

    /* Fluid type scale. */
    --t-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem);
    --t-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
    --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.094rem);
    --t-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --t-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
    --t-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --t-3xl: clamp(2.25rem, 1.6rem + 3.1vw, 4.25rem);
    /* Editorial display, used for the hero line and the story year. */
    --t-display: clamp(2.75rem, 1.4rem + 7.2vw, 7rem);

    --step: clamp(3.5rem, 2rem + 6vw, 7.5rem);
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-bs-theme="dark"] {
    color-scheme: dark;

    --ui-bg: #121214;
    --ui-surface: #1b1b1f;
    --ui-soft: #24242a;
    --ui-border: #32323a;
    --ui-border-strong: #45454f;
    --ui-text: #f1f1ef;
    --ui-muted: #a4a4ae;

    --ui-accent: #d9a63c;
    --ui-accent-hover: #e8b94f;
    --ui-on-accent: #16161a;
    --ui-gold: #d9a63c;
    --ui-tint: #2a2318;

    --ui-success: #4ec98a;
    --ui-warning: #e0b44c;
    --ui-danger: #f08c96;

    /* Pushed below the page background so the ink band still reads as a
       deliberate anchor rather than an inversion. */
    --ink: #09090b;
    --ink-text: #f1f1ef;
    --ink-soft: rgb(241 241 239 / 72%);
    --ink-line: rgb(241 241 239 / 14%);

    --ui-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px -14px rgb(0 0 0 / 60%);
    --ui-shadow-lift: 0 2px 6px rgb(0 0 0 / 45%), 0 20px 46px -18px rgb(0 0 0 / 70%);
    --pack-shadow: 0 46px 70px -30px rgb(0 0 0 / 85%), 0 12px 24px -12px rgb(0 0 0 / 60%);
    --glow: radial-gradient(60% 55% at 50% 45%, rgb(217 166 60 / 20%), transparent 72%);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--font-sans);
    font-size: var(--t-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.022em;
    overflow-wrap: break-word;
    text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

a { color: var(--ui-accent); text-decoration: none; }
a:hover { color: var(--ui-accent-hover); }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea { color: var(--ui-text); background: var(--ui-surface); }
button, a, summary { -webkit-tap-highlight-color: transparent; }

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--ui-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

main:focus { outline: none; }

.container {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 100;
    background: var(--ui-surface);
    color: var(--ui-text);
    border: 2px solid var(--ui-accent);
    padding: 12px 20px;
    border-radius: var(--r-control);
}
.skip-link:focus { top: 12px; }

.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- 3. Primitives ---------- */
.eyebrow {
    display: block;
    margin: 0 0 1.1rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.small-label {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    white-space: nowrap;
    padding: 0.8rem 1.65rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
                color 0.2s var(--ease), transform 0.12s var(--ease);
}
.button:active { transform: translateY(1px); }

.button-primary { background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); }
.button-primary:hover {
    background: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
    color: var(--ui-on-accent);
}

.button-secondary { background: transparent; color: var(--ui-text); border-color: var(--ui-border-strong); }
.button-secondary:hover { background: var(--ui-soft); color: var(--ui-text); border-color: var(--ui-text); }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ui-accent);
}
.text-link .icon { transition: transform 0.2s var(--ease); }
.text-link:hover { color: var(--ui-accent-hover); }
.text-link:hover .icon { transform: translateX(3px); }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: var(--r-pill);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.icon-button:hover { background: var(--ui-soft); border-color: var(--ui-border-strong); }

/* ---------- 4. Shell ---------- */
.announcement {
    background: var(--ink);
    color: var(--ink-soft);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.announcement .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.55rem;
}
.announcement span:last-child { color: var(--ui-gold); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--ui-bg) 86%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ui-border);
}
@supports not (backdrop-filter: blur(4px)) {
    .site-header { background: var(--ui-bg); }
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0; color: inherit; }
.brand img { width: 96px; height: 30px; object-fit: contain; }
.brand span {
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ui-muted);
    padding-left: 0.7rem;
    border-left: 1px solid var(--ui-border);
}
/* The supplied wordmark artwork is white, so it needs inverting on light. */
html:not([data-bs-theme="dark"]) .brand img { filter: invert(1) brightness(0.12); }

.main-nav { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.main-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ui-muted);
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.main-nav a:hover { color: var(--ui-text); background: var(--ui-soft); }
.main-nav a.active { color: var(--ui-text); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.menu-toggle, .main-nav .mobile-contact, .theme-sun { display: none; }
html[data-bs-theme="dark"] .theme-sun { display: block; }
html[data-bs-theme="dark"] .theme-moon { display: none; }

.site-footer {
    background: var(--ink);
    color: var(--ink-soft);
    border-top: 1px solid var(--ink-line);
}
.site-footer .brand span {
    color: inherit;
    border-color: var(--ink-line);
}
html:not([data-bs-theme="dark"]) .site-footer .brand img { filter: none; }

.footer-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2.5rem var(--gutter);
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.footer-about > p { margin-top: 1.1rem; max-width: 34ch; }
.footer-main h2 {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ui-gold);
    margin-bottom: 1rem;
}
.footer-main nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.footer-main nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    font-size: var(--t-sm);
    color: inherit;
}
.footer-main nav a:hover { color: var(--ui-gold); }
.footer-main nav .icon { width: 0.9em; height: 0.9em; }

.origin-note { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-size: var(--t-xs); }
.origin-note .icon { color: var(--ui-gold); width: 1em; height: 1em; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--ink-line);
    font-size: var(--t-xs);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.footer-bottom nav a, .footer-bottom nav button {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--t-xs);
    color: inherit;
}
.footer-bottom nav a:hover, .footer-bottom nav button:hover { color: var(--ui-gold); }

.back-to-top {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ink-line);
    border-radius: var(--r-pill);
    color: inherit;
}
.back-to-top:hover { color: var(--ui-gold); border-color: var(--ui-gold); }

/* =============================================================
   5. Page composition
   Six sections, six layout families:
     1 hero ......... editorial type + the pack as a lit object
     2 band ......... full-bleed panoramic strip
     3 product ...... photo and a numeric pack-size table
     4 process ...... three hairline columns, no boxes
     5 story ........ full-bleed photo with the year as display type
     6 closing ...... large contact rows on the ink surface
   ============================================================= */

/* 5.1 Hero */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(1.5rem, 0.5rem + 4vw, 4rem);
    min-height: min(86dvh, 820px);
    padding-block: clamp(2rem, 1rem + 3vw, 4rem) var(--step);
}
.hero-copy { position: relative; z-index: 1; }
.hero-title {
    font-size: var(--t-display);
    line-height: 0.96;
    letter-spacing: -0.04em;
    font-weight: 600;
    max-width: 14ch;
}
.hero-title span { display: block; color: var(--ui-accent); }
.hero-lead {
    margin-top: 1.75rem;
    max-width: 34ch;
    font-size: var(--t-lg);
    color: var(--ui-muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

/* The pack is the sharpest asset in the project, so it carries the hero.
   The glow is a lit-object effect, not decoration. */
.hero-pack {
    position: relative;
    margin: 0;
    justify-self: center;
    display: grid;
    place-items: center;
    isolation: isolate;
}
.hero-pack::before {
    content: "";
    position: absolute;
    inset: -14% -22%;
    z-index: -1;
    background: var(--glow);
    pointer-events: none;
}
.hero-pack img {
    width: clamp(150px, 22vw, 240px);
    filter: drop-shadow(0 30px 36px rgb(22 22 26 / 34%));
}
.hero-pack figcaption {
    display: grid;
    gap: 0.1rem;
    margin-top: 1rem;
    text-align: center;
}
.hero-pack figcaption strong { font-size: var(--t-sm); font-weight: 600; }
.hero-pack figcaption span { font-size: var(--t-xs); color: var(--ui-muted); }

/* 5.2 Roastery. The illustration is 1448px native and is never shown wider
   than 724px, so a 2x display still gets real pixels rather than an upscale. */
.roastery { padding-block: var(--step); }
.roastery-figure { margin: 0 auto; max-width: 724px; }
.roastery-figure img {
    width: 100%;
    aspect-ratio: 1448 / 1086;
    border-radius: var(--r-card);
    background: var(--ui-soft);
}
.roastery-figure figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    margin-top: 0.9rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--ui-gold);
    font-size: var(--t-xs);
}
.roastery-figure figcaption strong { font-weight: 600; }
.roastery-figure figcaption span { color: var(--ui-muted); }
.roastery-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    max-width: 960px;
    margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0;
}
.roastery-text h2 { font-size: var(--t-2xl); letter-spacing: -0.03em; }
.roastery-text p { color: var(--ui-muted); }
.roastery-text p + p { margin-top: 1rem; }

/* 5.3 Product block */
.product { padding-block: var(--step); }
.product-layout {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.product-media { margin: 0; min-width: 0; max-width: 560px; }
.product-media img {
    width: 100%;
    aspect-ratio: 700 / 394;
    object-fit: cover;
    border-radius: var(--r-card);
}
.product-copy { min-width: 0; }
.product-name {
    font-size: var(--t-2xl);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.product-copy > p {
    margin-top: 1.1rem;
    max-width: var(--measure);
    color: var(--ui-muted);
    font-size: var(--t-lg);
}

/* Pack sizes as a numeric table rather than a row of chips. */
.pack-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 2.25rem;
    border-top: 1px solid var(--ui-border);
}
.pack-item {
    padding: 1.1rem 0.5rem 0 0;
    border-bottom: 0;
}
.pack-item + .pack-item { border-left: 1px solid var(--ui-border); padding-left: 1rem; }
.pack-item b {
    display: block;
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
}
.pack-item span { font-size: var(--t-xs); color: var(--ui-muted); letter-spacing: 0.08em; text-transform: uppercase; }

/* Sits directly under the numeric pack table and explains who each size
   is for, so the numbers are not left to speak alone. */
.pack-note {
    margin-top: 0.9rem;
    font-size: var(--t-sm);
    color: var(--ui-muted);
    max-width: 46ch;
}

.product-notes { display: grid; gap: 0.1rem; margin-top: 2rem; }
.product-notes > div {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--ui-border);
    font-size: var(--t-sm);
    font-weight: 500;
}
.product-notes .icon { color: var(--ui-gold); width: 1.3em; height: 1.3em; }
.product-cta { margin-top: 1.75rem; }

/* 5.4 Process: three hairline columns, no card boxes */
.process { padding-block: var(--step); background: var(--ui-surface); border-block: 1px solid var(--ui-border); }
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.process-step { min-width: 0; padding-top: 1.5rem; border-top: 2px solid var(--ui-gold); }
.step-num {
    display: block;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ui-accent);
    margin-bottom: 0.9rem;
}
.process-step h3 { font-size: var(--t-xl); letter-spacing: -0.03em; }
.process-step p { margin-top: 0.7rem; color: var(--ui-muted); font-size: var(--t-sm); }

/* 5.5 Story: a type-only ink band. Deliberately carries no photograph, so
   there is no low-resolution image being stretched across the viewport. */
.story { position: relative; background: var(--ink); color: var(--ink-soft); }
.story-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 1rem + 4vw, 5rem);
    padding-block: clamp(4rem, 2rem + 8vw, 9rem);
}
.story-year {
    font-size: var(--t-display);
    line-height: 0.82;
    letter-spacing: -0.05em;
    font-weight: 600;
    color: var(--ui-gold);
    font-variant-numeric: tabular-nums;
}
.story-year span { display: block; font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1rem; font-weight: 600; }
.story-copy { display: grid; gap: 1.1rem; max-width: 52ch; }
.story-copy h2 { font-size: var(--t-2xl); letter-spacing: -0.03em; color: #ffffff; }
.story-copy p { color: var(--ink-soft); }
.story-copy .lead { font-size: var(--t-lg); color: #f1f1ec; }

/* 5.6 Closing: contact as large rows on the canvas. The story band above and
   the footer below are both ink, so this stays light to break them apart. */
.closing { padding-block: var(--step); }
.closing h2 { font-size: var(--t-2xl); letter-spacing: -0.03em; max-width: 20ch; }
.closing > .container > p {
    margin-top: 1rem;
    max-width: 46ch;
    color: var(--ui-muted);
}
.closing-rows { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.closing-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--ui-border);
    color: inherit;
}
.closing-row:last-child { border-bottom: 1px solid var(--ui-border); }
.closing-row small {
    flex: 0 0 9rem;
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ui-accent);
}
.closing-row strong {
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.closing-row .icon { margin-left: auto; width: 1.4em; height: 1.4em; transition: transform 0.2s var(--ease); }
.closing-row:hover strong { color: var(--ui-accent); }
.closing-row:hover .icon { transform: translate(3px, -3px); }

.error-reference { margin-top: 1.5rem; color: var(--ui-muted); font-size: var(--t-xs); overflow-wrap: anywhere; }

/* ---------- 6. Motion ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
    /* Hero entrance: sequenced so the eye lands on the headline first. */
    .hero-copy > *, .hero-pack { animation: rise 0.85s var(--ease) both; }
    .hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
    .hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
    .hero-copy > *:nth-child(3) { animation-delay: 0.19s; }
    .hero-copy > *:nth-child(4) { animation-delay: 0.26s; }
    .hero-pack { animation-delay: 0.1s; animation-duration: 1.1s; }

    @keyframes rise {
        from { opacity: 0; transform: translateY(22px); }
        to { opacity: 1; transform: none; }
    }

    /* The roastery artwork settles as the section arrives. Native scroll-driven
       animation, so there is no scroll handler and no library. Translation only,
       never scale, because scaling would resample the artwork and soften it. */
    @supports (animation-timeline: view()) {
        .roastery-figure {
            animation: settle linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 45%;
        }
        @keyframes settle {
            from { opacity: 0.55; transform: translateY(28px); }
            to { opacity: 1; transform: none; }
        }
    }
}

/* ---------- 7. Responsive ---------- */
@media (max-width: 1080px) {
    .hero { grid-template-columns: 1.15fr 0.85fr; min-height: 0; }
    .product-layout { grid-template-columns: 1fr 1fr; }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .site-header { position: relative; }
    .menu-toggle { display: inline-flex; }
    .header-contact { display: none; }
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        margin-top: 0.5rem;
        padding: 0.75rem;
        background: var(--ui-surface);
        border: 1px solid var(--ui-border);
        border-radius: var(--r-card);
        box-shadow: var(--ui-shadow-lift);
        z-index: 45;
    }
    .main-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; }
    .main-nav a { border-radius: var(--r-control); }
    .main-nav a.active { background: var(--ui-soft); }
    .main-nav .mobile-contact { display: inline-flex; }

    .hero { grid-template-columns: 1fr; gap: 2.5rem; text-align: left; }
    .hero-pack { justify-self: start; }
    .hero-pack figcaption { text-align: left; }
    .hero-title { max-width: 18ch; }
    .product-layout { grid-template-columns: 1fr; }
    .product-media { order: -1; }
    .process-grid { grid-template-columns: 1fr; gap: 0; }
    .process-step { border-top-width: 1px; margin-top: 1.25rem; }
    .process-step:first-child { border-top-width: 2px; margin-top: 0; }
    .story-inner { grid-template-columns: 1fr; }
    .roastery-text { grid-template-columns: 1fr; }
    .footer-bottom nav { margin-left: 0; }
    .back-to-top { margin-left: auto; }
}

@media (max-width: 620px) {
    .hero-title { max-width: 100%; letter-spacing: -0.035em; }
    .hero-lead { max-width: 100%; }
    .hero-actions > .button { width: 100%; }
    .pack-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pack-item:nth-child(odd) { border-left: 0; padding-left: 0; }
    .pack-item:nth-child(n + 3) { border-top: 1px solid var(--ui-border); padding-top: 1.1rem; }
    .closing-row { flex-wrap: wrap; gap: 0.35rem 1rem; }
    .closing-row small { flex-basis: 100%; }
    .closing-row .icon { margin-left: auto; }
    .footer-main { grid-template-columns: 1fr; }
    .announcement span:last-child { display: none; }
    input, select, textarea { font-size: 16px; }
}

/* ---------- 8. No-JS and print ---------- */
/* The public navigation remains available without JavaScript. */
.no-js .theme-toggle, .no-js .menu-toggle { display: none; }
.no-js .privacy-actions, .no-js .privacy-option input { display: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .no-js .header-inner { flex-wrap: wrap; padding-block: 0.75rem; }
    .no-js .main-nav {
        display: flex;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        order: 3;
        flex-basis: 100%;
        gap: 0.25rem;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }
}

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

@media print {
    .site-header, .announcement, .site-footer, .skip-link { display: none; }
    body { background: #ffffff; color: #000000; }
    .story, .closing { background: #ffffff; color: #000000; }
    .story-copy :is(h2, p), .story-year, .closing :is(h2, p), .closing-row strong { color: #000000; }
    .container { width: 100%; padding: 0; }
    a { text-decoration: underline; }
    [data-reveal] { opacity: 1; transform: none; }
}