@charset "UTF-8";
/* ============================================================================
   Παραδοσιακά Ζυμαρικά Άνω Ποροΐων — Design System
   ----------------------------------------------------------------------------
   Everything the client may want to re-skin lives in @layer tokens.
   Change a token, the whole site follows. Nothing below tokens hard-codes a
   colour, a font, a radius or a duration.

   Layer order fixes specificity once, so later rules never accidentally
   out-weigh earlier ones:
     tokens < reset < base < layout < components < utilities
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities;

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* --- Palette -----------------------------------------------------------
       Drawn from the subject: buffalo hide, the wetland at Lake Kerkini,
       dried reed, raw semolina, buffalo milk. Every foreground/background
       pair used in the UI is verified >= 4.5:1 (WCAG AA normal text).      */
    --c-ink:          #0E1410;   /* buffalo-hide black-green — primary ground */
    --c-ink-raised:   #161E18;   /* raised band on the dark ground            */
    --c-ink-card:     #1B241D;   /* cards, plinths                            */
    --c-kerkini:      #24382B;   /* deep wetland green — bands, wells         */
    --c-reed:         #CFA451;   /* dried reed / wheat — the accent           */
    --c-reed-bright:  #DDB96F;   /* accent, hover + focus                     */
    --c-semolina:     #E8DCC0;   /* raw grain — body text on dark             */
    --c-milk:         #F8F4EB;   /* buffalo milk — light ground, headings     */
    --c-muted-dark:   #A7A392;   /* secondary text on dark        (7.37:1)    */
    --c-clay:         #6B573B;   /* secondary text on light       (6.27:1)    */
    --c-ink-text:     #141A15;   /* body text on light           (16.10:1)    */

    /* Semantic aliases — components reference these, never raw palette. */
    --bg:             var(--c-ink);
    --bg-raised:      var(--c-ink-raised);
    --bg-card:        var(--c-ink-card);
    --fg:             var(--c-semolina);
    --fg-strong:      var(--c-milk);
    --fg-muted:       var(--c-muted-dark);
    --accent:         var(--c-reed);
    --accent-hover:   var(--c-reed-bright);
    --rule:           color-mix(in srgb, var(--c-semolina) 16%, transparent);
    --rule-strong:    color-mix(in srgb, var(--c-semolina) 30%, transparent);
    --focus:          var(--c-reed-bright);

    /* --- Type --------------------------------------------------------------
       Alegreya      display  — humanist calligraphic serif, full Greek
       Commissioner  body/UI  — variable neo-grotesque, full Greek
       JetBrains Mono spec    — the packet's printed data block             */
    --ff-display: "Alegreya", "Georgia", "Times New Roman", serif;
    --ff-body:    "Commissioner", "Helvetica Neue", Arial, sans-serif;
    --ff-spec:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --fs-display: clamp(2.75rem, 1.35rem + 5.9vw, 6rem);
    --fs-h1:      clamp(2.25rem, 1.45rem + 3.4vw, 4rem);
    --fs-h2:      clamp(1.75rem, 1.28rem + 2vw, 2.75rem);
    --fs-h3:      clamp(1.3rem, 1.15rem + 0.62vw, 1.65rem);
    --fs-h4:      clamp(1.075rem, 1.02rem + 0.24vw, 1.2rem);
    --fs-lead:    clamp(1.075rem, 1.01rem + 0.34vw, 1.3rem);
    --fs-body:    1.0625rem;
    --fs-sm:      0.9375rem;
    --fs-xs:      0.8125rem;
    --fs-spec:    0.75rem;

    --lh-tight:   1.04;
    --lh-snug:    1.22;
    --lh-body:    1.68;

    --ls-display: -0.021em;
    --ls-eyebrow: 0.16em;
    --ls-spec:    0.045em;

    /* --- Space (8px base, fluid at the section level) --------------------- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
    --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6rem;    --sp-12: 8rem;
    --sp-section: clamp(4rem, 2.4rem + 6.4vw, 8rem);

    /* --- Layout ----------------------------------------------------------- */
    --wrap:        76rem;
    --wrap-wide:   90rem;
    --wrap-prose:  44rem;
    --gutter:      clamp(1.25rem, 0.7rem + 2.6vw, 3rem);
    --header-h:    5.5rem;

    /* --- Radius, elevation, motion ---------------------------------------- */
    --r-xs: 2px;  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-pill: 999px;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.6);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.4), 0 24px 48px -16px rgb(0 0 0 / 0.7);

    --dur-fast: 140ms;
    --dur:      260ms;
    --dur-slow: 520ms;
    --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    color-scheme: dark;
  }

  /* Light surface — opt-in per section via .surface-light.
     Re-points the same semantic aliases; components need no light variants. */
  .surface-light {
    --bg:         var(--c-milk);
    --bg-raised:  #F1EBDD;
    --bg-card:    #FFFFFF;
    --fg:         var(--c-ink-text);
    --fg-strong:  var(--c-kerkini);
    --fg-muted:   var(--c-clay);
    --accent:     #8A6224;              /* reed darkened for AA on milk (5.4:1) */
    --accent-hover: #6E4D19;
    --rule:       color-mix(in srgb, var(--c-kerkini) 16%, transparent);
    --rule-strong:color-mix(in srgb, var(--c-kerkini) 32%, transparent);
    --focus:      #6E4D19;
    --shadow-card: 0 1px 2px rgb(36 56 43 / 0.08), 0 12px 28px -14px rgb(36 56 43 / 0.22);
    --shadow-lift: 0 2px 6px rgb(36 56 43 / 0.10), 0 22px 44px -18px rgb(36 56 43 / 0.30);
    color-scheme: light;
  }

  /* Deep green band — used for the buffalo-milk section and the closing CTA. */
  .surface-kerkini {
    --bg:        var(--c-kerkini);
    --bg-raised: #1D2E23;
    --bg-card:   #1D2E23;
  }
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

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

  body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

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

  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  :target { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
}

/* ==========================================================================
   3. BASE
   ========================================================================== */
@layer base {
  html { background: var(--c-ink); }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    font-weight: 380;
    line-height: var(--lh-body);
    font-optical-sizing: auto;
  }

  h1, h2, h3, h4 {
    font-family: var(--ff-display);
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    color: var(--fg-strong);
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-h4); font-family: var(--ff-body); font-weight: 600;
       letter-spacing: 0; }

  p { text-wrap: pretty; }

  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  a:hover { color: var(--accent-hover); }

  strong, b { font-weight: 600; color: var(--fg-strong); }

  hr { border: 0; border-top: 1px solid var(--rule); }

  /* One visible focus treatment, everywhere, keyboard-only. */
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  ::selection { background: var(--accent); color: var(--c-ink); }

  ::placeholder { color: var(--fg-muted); opacity: 1; }
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
@layer layout {
  .wrap {
    width: min(100% - var(--gutter) * 2, var(--wrap));
    margin-inline: auto;
  }
  .wrap-wide { width: min(100% - var(--gutter) * 2, var(--wrap-wide)); margin-inline: auto; }
  .wrap-prose { width: min(100% - var(--gutter) * 2, var(--wrap-prose)); margin-inline: auto; }

  .section {
    background: var(--bg);
    color: var(--fg);
    padding-block: var(--sp-section);
    position: relative;
  }
  .section-tight { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }

  /* Section head: mono eyebrow, display heading, optional lead. */
  .section-head { max-width: 52rem; margin-bottom: var(--sp-8); }
  .section-head.is-centered { margin-inline: auto; text-align: center; }

  .eyebrow {
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-4);
  }

  .lead {
    font-size: var(--fs-lead);
    line-height: 1.58;
    color: var(--fg);
    max-width: 42rem;
  }
  .is-centered .lead { margin-inline: auto; }

  .stack > * + * { margin-top: var(--sp-4); }
  .stack-lg > * + * { margin-top: var(--sp-6); }

  .grid { display: grid; gap: var(--sp-6); }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

  /* Editorial split: text column + figure, reversible. */
  .split {
    display: grid;
    gap: clamp(var(--sp-6), 4vw, var(--sp-9));
    align-items: center;
  }
  @media (min-width: 56rem) {
    .split { grid-template-columns: 1fr 1fr; }
    .split-6-5 { grid-template-columns: 6fr 5fr; }
    .split-5-6 { grid-template-columns: 5fr 6fr; }
    .split .is-first { order: -1; }
  }
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */
@layer components {

  /* --- Skip link -------------------------------------------------------- */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--sp-4);
    inset-block-start: var(--sp-4);
    z-index: 200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--c-reed);
    color: var(--c-ink);
    font-weight: 600;
    border-radius: var(--r-sm);
    transform: translateY(calc(-100% - var(--sp-6)));
    transition: transform var(--dur) var(--ease);
  }
  .skip-link:focus-visible { transform: translateY(0); }

  /* --- Header ----------------------------------------------------------- */
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                backdrop-filter var(--dur) var(--ease);
  }
  .site-header.is-stuck {
    background: color-mix(in srgb, var(--c-ink) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom-color: var(--rule);
  }
  /* Inner pages start below the header rather than under a transparent one. */
  .site-header.is-solid {
    background: var(--c-ink);
    border-bottom-color: var(--rule);
  }

  .header-inner {
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    color: var(--c-milk);
    flex: none;
    margin-inline-end: auto;
  }
  .brand:hover { color: var(--c-milk); }
  .brand img { inline-size: 4rem; block-size: auto; flex: none; }
  @media (max-width: 30rem) { .brand img { inline-size: 3.25rem; } }
  .brand-text { display: grid; line-height: 1.15; }
  .brand-name {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
  }
  .brand-sub {
    font-family: var(--ff-spec);
    font-size: 0.625rem;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-reed);
  }
  @media (max-width: 26rem) { .brand-sub { display: none; } }

  /* --- Primary nav ------------------------------------------------------ */
  .nav { display: none; }
  .nav-list { display: flex; align-items: center; gap: clamp(var(--sp-4), 1.6vw, var(--sp-6)); }
  .nav-link {
    position: relative;
    display: block;
    padding-block: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-semolina);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
  }
  .nav-link::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    block-size: 1px;
    background: var(--c-reed);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .nav-link:hover { color: var(--c-milk); }
  .nav-link:hover::after,
  .nav-link[aria-current="page"]::after { transform: scaleX(1); }
  .nav-link[aria-current="page"] { color: var(--c-reed); }

  /* --- Language switch -------------------------------------------------- */
  .lang-switch {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 3px;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    flex: none;
  }
  .lang-switch a {
    display: block;
    padding: 0.28rem 0.62rem;
    border-radius: var(--r-pill);
    font-family: var(--ff-spec);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--c-muted-dark);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .lang-switch a:hover { color: var(--c-milk); }
  .lang-switch a[aria-current="true"] { background: var(--c-reed); color: var(--c-ink); }

  /* --- Nav toggle + drawer (mobile) ------------------------------------- */
  .nav-toggle {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    color: var(--c-semolina);
    cursor: pointer;
    flex: none;
  }
  .nav-toggle:hover { border-color: var(--rule-strong); color: var(--c-milk); }
  .nav-toggle span {
    position: relative;
    inline-size: 1.05rem;
    block-size: 1px;
    background: currentColor;
    transition: background var(--dur-fast) var(--ease);
  }
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 1px;
    background: currentColor;
    transition: transform var(--dur) var(--ease);
  }
  .nav-toggle span::before { inset-block-start: -5px; }
  .nav-toggle span::after  { inset-block-start: 5px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

  .nav-drawer {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 99;
    background: var(--c-ink);
    padding: var(--sp-7) var(--gutter) var(--sp-9);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    align-content: start;
    gap: var(--sp-2);
  }
  .nav-drawer[hidden] { display: none; }
  .nav-drawer a {
    display: block;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--ff-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-milk);
    text-decoration: none;
  }
  .nav-drawer a[aria-current="page"] { color: var(--c-reed); }
  .nav-drawer .drawer-meta {
    margin-top: var(--sp-6);
    font-size: var(--fs-sm);
    color: var(--c-muted-dark);
    display: grid;
    gap: var(--sp-2);
  }
  .nav-drawer .drawer-meta a {
    all: unset;
    color: var(--c-semolina);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  body.nav-open { overflow: hidden; }

  /* Desktop swap. Declared after .nav-toggle / .nav-drawer so it wins on
     source order — both sit in @layer components at equal specificity. */
  @media (min-width: 62rem) {
    .nav { display: block; }
    .nav-toggle { display: none; }
    .nav-drawer { display: none; }
  }

  /* --- Buttons ---------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    min-height: 2.875rem;
    padding: 0.7rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
  }
  .btn:active { transform: translateY(1px); }

  .btn-primary { background: var(--c-reed); color: var(--c-ink); }
  .btn-primary:hover { background: var(--c-reed-bright); color: var(--c-ink); }

  .btn-ghost {
    border-color: var(--rule-strong);
    color: var(--fg-strong);
    background: transparent;
  }
  .btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

  .btn svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }

  /* Text link with a moving underline. */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    color: var(--accent);
  }
  .link-arrow svg { transition: transform var(--dur) var(--ease); }
  .link-arrow:hover svg { transform: translateX(4px); }

  /* --- Hero ------------------------------------------------------------- */
  .hero {
    position: relative;
    background: var(--c-ink);
    padding-top: calc(var(--header-h) + clamp(3rem, 1rem + 8vw, 7rem));
    overflow: hidden;
  }
  /* A slow wash of wetland green behind the type; no image, no gradient mesh. */
  .hero::before {
    content: "";
    position: absolute;
    inset-block-start: -30%;
    inset-inline-start: 50%;
    inline-size: min(120rem, 160%);
    aspect-ratio: 2 / 1;
    translate: -50% 0;
    background: radial-gradient(ellipse at 50% 40%,
                color-mix(in srgb, var(--c-kerkini) 92%, transparent) 0%,
                transparent 62%);
    pointer-events: none;
  }
  .hero > * { position: relative; }

  .hero-title {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    max-width: 16ch;
  }
  .hero-title em {
    font-style: normal;
    color: var(--c-reed);
  }
  .hero-lead {
    margin-top: var(--sp-5);
    font-size: var(--fs-lead);
    line-height: 1.56;
    max-width: 38rem;
    color: var(--c-semolina);
  }
  .hero-actions { margin-top: var(--sp-7); }

  /* The shelf: every product the workshop makes, bleeding off both edges. */
  .pack-shelf {
    margin-top: clamp(var(--sp-8), 5vw, var(--sp-11));
    padding-bottom: var(--sp-6);
    position: relative;
  }
  .pack-track {
    display: flex;
    align-items: flex-end;
    gap: clamp(var(--sp-4), 2vw, var(--sp-7));
    padding-inline: var(--gutter);
    will-change: transform;
  }
  .pack-track img {
    block-size: clamp(8rem, 5rem + 12vw, 15rem);
    inline-size: auto;
    flex: none;
    filter: drop-shadow(0 18px 26px rgb(0 0 0 / 0.55));
  }
  /* Fade the shelf into the page edges so the bleed reads as intentional. */
  .pack-shelf-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    overflow: hidden;
  }

  /* --- Page header (inner pages) ---------------------------------------- */
  .page-head {
    background: var(--c-ink);
    padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 5.5rem));
    padding-bottom: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
    border-bottom: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
  }
  .page-head::before {
    content: "";
    position: absolute;
    inset-block-start: -60%;
    inset-inline-start: 50%;
    inline-size: min(90rem, 150%);
    aspect-ratio: 2.4 / 1;
    translate: -50% 0;
    background: radial-gradient(ellipse at 50% 50%,
                color-mix(in srgb, var(--c-kerkini) 78%, transparent) 0%, transparent 64%);
    pointer-events: none;
  }
  .page-head > * { position: relative; }
  .page-head h1 { max-width: 20ch; }
  .page-head .lead { margin-top: var(--sp-5); }

  /* --- Breadcrumb ------------------------------------------------------- */
  .breadcrumb {
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-spec);
    color: var(--c-muted-dark);
    margin-bottom: var(--sp-5);
  }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; }
  .breadcrumb li + li::before { content: "/"; margin-inline-end: var(--sp-2); opacity: 0.5; }
  .breadcrumb a { color: var(--c-muted-dark); text-decoration: none; }
  .breadcrumb a:hover { color: var(--c-reed); text-decoration: underline; }

  /* --- Product card ----------------------------------------------------
     The signature: the pack floats on a dark plinth, and the mono strip
     beneath repeats the data block actually printed on the packet.      */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: clamp(var(--sp-4), 2vw, var(--sp-6));
  }

  .product-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
  }
  .product-card:hover,
  .product-card:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }

  .product-figure {
    position: relative;
    display: grid;
    place-items: end center;
    padding: var(--sp-6) var(--sp-5) var(--sp-4);
    min-block-size: 13.5rem;
    background:
      radial-gradient(ellipse at 50% 118%,
        color-mix(in srgb, var(--c-kerkini) 60%, transparent) 0%, transparent 68%);
  }
  .product-figure img {
    block-size: clamp(8.5rem, 7rem + 6vw, 11rem);
    inline-size: auto;
    filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.5));
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .product-card:hover .product-figure img { transform: translateY(-6px) scale(1.03); }

  .product-body {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex: 1;
  }
  .product-name {
    font-family: var(--ff-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.24;
    color: var(--fg-strong);
    letter-spacing: -0.012em;
  }
  .product-note {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--fg-muted);
    margin-top: calc(var(--sp-1) * -1);
  }

  /* The spec strip — the packet's printed data, set in the utility face. */
  .spec {
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    font-weight: 400;
    letter-spacing: var(--ls-spec);
    color: var(--fg-muted);
    list-style: none;
    padding-inline: 0;
  }
  .spec li { display: flex; align-items: center; gap: var(--sp-2); }
  .spec li + li::before {
    content: "";
    inline-size: 3px; block-size: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 70%, transparent);
    flex: none;
  }
  .spec .spec-time { color: var(--accent); font-weight: 500; }

  /* --- Filters ---------------------------------------------------------- */
  .filters {
    display: grid;
    gap: var(--sp-4);
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-7);
    border-bottom: 1px solid var(--rule);
  }
  .filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }
  .filter-label {
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--fg-muted);
    flex: none;
  }
  @media (min-width: 40rem) {
    .filter-label { inline-size: 6.5rem; }
  }
  .chip {
    min-height: 2.375rem;
    padding: 0.42rem 0.95rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--fg);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
  }
  .chip:hover { border-color: var(--accent); color: var(--accent); }
  .chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--c-ink);
  }
  .filter-count {
    justify-self: end;
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-spec);
    color: var(--fg-muted);
    margin-top: calc(var(--sp-1) * -1);
  }
  .product-card[hidden] { display: none; }

  .empty-state {
    padding: var(--sp-9) var(--sp-5);
    text-align: center;
    color: var(--fg-muted);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--r-md);
  }
  .empty-state[hidden] { display: none; }

  /* --- Figures / photography -------------------------------------------- */
  .figure {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--rule);
  }
  .figure img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .figure figcaption {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--rule);
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-spec);
    color: var(--fg-muted);
  }
  .figure-tall img { aspect-ratio: 3 / 4; }
  .figure-wide img { aspect-ratio: 16 / 10; }

  /* --- Pillar card ------------------------------------------------------ */
  .pillar {
    padding: var(--sp-6);
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    height: 100%;
  }
  .pillar h3 { font-size: var(--fs-h3); }
  .pillar p { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.62; }
  .pillar .spec { border-top-color: var(--rule); }

  /* --- Milk comparison --------------------------------------------------
     One measured claim per row, drawn from a zero baseline that is cow's
     milk. Marked up as a real table, so it reads without CSS or JS.     */
  .compare {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--bg-card);
    padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  }
  .compare-caption {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    text-align: start;
    margin-bottom: var(--sp-6);
    line-height: 1.55;
    max-width: 38ch;
  }
  .compare-list { display: grid; gap: var(--sp-5); list-style: none; padding: 0; }

  .compare-row-label {
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--fg);
    margin-bottom: var(--sp-2);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
  }
  .compare-value {
    font-family: var(--ff-spec);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .compare-track {
    display: block;                 /* a <span> needs this before block-size applies */
    position: relative;
    block-size: 8px;
    background: color-mix(in srgb, var(--fg) 10%, transparent);
    border-radius: var(--r-pill);
    overflow: hidden;
  }
  .compare-bar {
    display: block;
    block-size: 100%;
    inline-size: var(--val, 0%);
    background: var(--accent);
    border-radius: var(--r-pill);
  }
  .compare-baseline {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-spec);
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .compare-baseline::before {
    content: "";
    display: block;
    inline-size: var(--sp-6); block-size: 8px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--fg) 10%, transparent);
    flex: none;
  }

  /* --- Press card ------------------------------------------------------- */
  .press-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .press-card img { inline-size: 100%; aspect-ratio: 750 / 530; object-fit: contain; background: #fff; }
  .press-body { padding: var(--sp-5); display: grid; gap: var(--sp-2); }
  .press-title { font-family: var(--ff-display); font-size: var(--fs-h3); color: var(--fg-strong); }
  .press-meta {
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-spec);
    color: var(--fg-muted);
  }

  /* --- Facts list (contact / workshop) ---------------------------------- */
  .facts { display: grid; gap: var(--sp-5); }
  .fact { display: grid; gap: var(--sp-1); }
  .fact dt {
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
  }
  .fact dd { margin: 0; font-size: var(--fs-lead); color: var(--fg-strong); line-height: 1.45; }
  .fact dd a { color: var(--fg-strong); text-decoration-color: var(--rule-strong); }
  .fact dd a:hover { color: var(--accent); }
  .fact small { display: block; font-size: var(--fs-sm); color: var(--fg-muted); margin-top: var(--sp-1); }

  /* --- FAQ -------------------------------------------------------------- */
  .faq { display: grid; gap: 0; border-top: 1px solid var(--rule); }
  .faq-item { border-bottom: 1px solid var(--rule); }
  .faq-item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--fg-strong);
    letter-spacing: -0.012em;
    line-height: 1.3;
    transition: color var(--dur-fast) var(--ease);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: var(--accent); }
  .faq-item summary::after {
    content: "";
    flex: none;
    inline-size: 0.95rem;
    block-size: 0.95rem;
    margin-top: 0.4em;
    background: currentColor;
    /* plus sign */
    clip-path: polygon(44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%,
                       56% 100%, 44% 100%, 44% 56%, 0 56%, 0 44%, 44% 44%);
    transition: transform var(--dur) var(--ease);
  }
  .faq-item[open] summary::after { transform: rotate(135deg); }
  .faq-answer { padding-bottom: var(--sp-5); max-width: 46rem; color: var(--fg-muted); }
  .faq-answer > * + * { margin-top: var(--sp-3); }

  /* --- Contact cards ----------------------------------------------------
     The whole card is the link. There is no contact form: on a static site
     the phone and the inbox are the real channels, so they get the weight. */
  .contact-cards {
    display: grid;
    gap: clamp(var(--sp-4), 2.4vw, var(--sp-6));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .contact-card {
    display: grid;
    gap: var(--sp-2);
    align-content: start;
    padding: clamp(var(--sp-6), 3.2vw, var(--sp-8));
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
  }
  .contact-card:hover,
  .contact-card:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    color: inherit;
  }

  .contact-card-icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-bottom: var(--sp-3);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
  }
  .contact-card-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }

  .contact-card-label {
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
  }
  .contact-card-value {
    font-family: var(--ff-display);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--fg-strong);
    overflow-wrap: anywhere;
  }
  .contact-card-note { font-size: var(--fs-sm); color: var(--fg-muted); }
  .contact-card-cue {
    margin-top: var(--sp-4);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent);
  }
  .contact-card-cue svg { transition: transform var(--dur) var(--ease); }
  .contact-card:hover .contact-card-cue svg { transform: translateX(4px); }

  /* --- Prose (legal pages) ---------------------------------------------- */
  .prose { max-width: var(--wrap-prose); }
  .prose > * + * { margin-top: var(--sp-4); }
  .prose h2 { margin-top: var(--sp-8); font-size: var(--fs-h3); }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 {
    margin-top: var(--sp-6);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: var(--fs-h4);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-eyebrow);
  }
  .prose ul { padding-inline-start: 1.15em; display: grid; gap: var(--sp-2); }
  .prose li::marker { color: var(--accent); }
  .prose .updated {
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-spec);
    color: var(--fg-muted);
  }

  /* --- Link list -------------------------------------------------------- */
  .link-list { display: grid; gap: var(--sp-3); list-style: none; padding: 0; }
  .link-list li {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--rule);
    font-size: var(--fs-sm);
  }
  .link-list a { font-weight: 500; text-decoration: none; }
  .link-list a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .link-list span { color: var(--fg-muted); }

  /* --- Callout ---------------------------------------------------------- */
  .callout {
    padding: clamp(var(--sp-6), 4vw, var(--sp-9));
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    text-align: center;
  }
  .callout h2 { max-width: 22ch; margin-inline: auto; }
  .callout .lead { margin-top: var(--sp-4); margin-inline: auto; }
  .callout .btn-group { margin-top: var(--sp-7); justify-content: center; }

  /* --- Footer ----------------------------------------------------------- */
  .site-footer {
    background: var(--c-ink);
    color: var(--c-semolina);
    border-top: 1px solid var(--rule);
    padding-block: var(--sp-9) var(--sp-6);
  }
  .footer-grid {
    display: grid;
    gap: var(--sp-8);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
  .footer-col h2 {
    font-family: var(--ff-spec);
    font-size: var(--fs-spec);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-reed);
    margin-bottom: var(--sp-4);
  }
  .footer-col ul { display: grid; gap: var(--sp-2); list-style: none; padding: 0; }
  .footer-col a { color: var(--c-semolina); text-decoration: none; font-size: var(--fs-sm); }
  .footer-col a:hover { color: var(--c-reed); text-decoration: underline; text-underline-offset: 0.2em; }
  .footer-col p { font-size: var(--fs-sm); color: var(--c-muted-dark); line-height: 1.6; }

  .footer-brand { display: grid; gap: var(--sp-4); }
  .footer-brand img { inline-size: 8rem; }

  .footer-espa {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
  }
  .footer-espa img {
    max-inline-size: 26rem;
    inline-size: 100%;
    border-radius: var(--r-xs);
    background: #fff;
  }
  .footer-espa p { font-size: var(--fs-xs); color: var(--c-muted-dark); max-width: 30rem; }

  .footer-legal {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: var(--c-muted-dark);
  }
  .footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
  .footer-legal a { color: var(--c-muted-dark); text-decoration: none; }
  .footer-legal a:hover { color: var(--c-reed); text-decoration: underline; }

  .footer-credit {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
    font-size: var(--fs-xs);
    color: var(--c-muted-dark);
  }
  .footer-credit a {
    color: var(--c-semolina);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--c-reed) 45%, transparent);
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .footer-credit a:hover { color: var(--c-reed); border-bottom-color: var(--c-reed); }
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .text-center { text-align: center; }
  .mt-0 { margin-top: 0; }
  .mt-6 { margin-top: var(--sp-6); }
  .mt-8 { margin-top: var(--sp-8); }
  .full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
  .no-wrap { white-space: nowrap; }
}

/* ==========================================================================
   7. MOTION
   --------------------------------------------------------------------------
   Elements only start hidden when JS is confirmed running (html.js) and the
   visitor has not asked for reduced motion. If GSAP never loads, site.js
   removes html.js as a failsafe and everything is simply visible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim] { opacity: 0; }
  .js [data-anim="rise"]   { transform: translateY(24px); }
  .js [data-anim="mask"] > * { opacity: 0; }
  .js .pack-track > *      { opacity: 0; transform: translateY(40px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .compare-bar { inline-size: var(--val, 0%) !important; }
}

/* ==========================================================================
   8. FORCED COLORS / PRINT
   ========================================================================== */
@media (forced-colors: active) {
  .btn, .chip, .product-card, .figure, .compare, .pillar, .press-card {
    border: 1px solid CanvasText;
  }
  .compare-bar { background: CanvasText; }
  .nav-link[aria-current="page"]::after { background: CanvasText; }
}

@media print {
  .site-header, .nav-drawer, .skip-link, .filters, .pack-shelf,
  .footer-espa, .hero::before { display: none !important; }
  :root { --bg: #fff; --fg: #000; --fg-strong: #000; --fg-muted: #333; }
  body { background: #fff; color: #000; }
  /* Anything still waiting on a scroll trigger must print. */
  .js [data-anim], .js [data-anim] > *, .js .pack-track > *, .js .product-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .faq-answer { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .section { padding-block: 1.5rem; }
}