/* ==========================================================================
   Alan's Heritage — base layer
   reset → tokens → colour schemes → typography → layout → motion primitives → rte → forms → global effects
   ========================================================================== */
@layer reset, tokens, base, layout, components, sections, utilities;

/* -------------------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; min-width: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
  body { min-height: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration-skip-ink: auto; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, li, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  table { border-collapse: collapse; border-spacing: 0; }
  fieldset { border: 0; padding: 0; }
  summary { list-style: none; cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  dialog { border: 0; padding: 0; max-width: none; max-height: none; color: inherit; }
  [hidden] { display: none !important; }
  :target { scroll-margin-top: calc(var(--header-h, 80px) + 1rem); }
}

/* -------------------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    color-scheme: light;

    /* space */
    --gutter: clamp(1.25rem, 0.5rem + 3.2vw, 3.75rem);
    --section-y: calc(clamp(4.5rem, 2.4rem + 7.2vw, 9.5rem) * var(--spacing-scale, 1));
    --space-2xs: 0.375rem;
    --space-xs: 0.625rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: 5rem;

    /* shape */
    --radius-s: 4px;
    --radius-m: 10px;
    --radius-l: 18px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* type scale */
    --fs-2xs: 0.6875rem;
    --fs-xs: 0.75rem;
    --fs-s: 0.875rem;
    --fs-m: 1rem;
    --fs-l: 1.125rem;
    --fs-xl: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem);
    --fs-h4: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
    --fs-h3: clamp(1.55rem, 1.2rem + 1.4vw, 2.5rem);
    --fs-h2: clamp(2.15rem, 1.35rem + 3vw, 4.25rem);
    --fs-h1: clamp(2.8rem, 1.5rem + 5vw, 6.5rem);
    --fs-display: clamp(3.4rem, 1.4rem + 8.2vw, 10.5rem);

    /* motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-xs: 0.18s;
    --dur-s: 0.3s;
    --dur-m: 0.55s;
    --dur-l: 0.95s;
    --dur-xl: 1.5s;

    /* z-index */
    --z-header: 50;
    --z-sticky: 40;
    --z-float: 60;
    --z-drawer: 80;
    --z-overlay: 90;
    --z-intro: 200;
    --z-cursor: 300;

    --header-h: 76px;
    --announce-h: 0px;
  }

  @supports (transition-timing-function: linear(0, 1)) {
    :root {
      --ease-spring: linear(0, 0.081, 0.268, 0.493, 0.708, 0.885, 1.011, 1.087, 1.122, 1.124, 1.108, 1.081, 1.053, 1.027, 1.007, 0.994, 0.987, 0.984, 0.985, 0.988, 0.991, 0.995, 0.998, 1, 1.001, 1.002, 1.002, 1.002, 1.001, 1.001, 1.001, 1);
      --ease-bounce: linear(0, 0.072, 0.251, 0.485, 0.728, 0.944, 1.111, 1.22, 1.27, 1.27, 1.233, 1.174, 1.107, 1.043, 0.99, 0.952, 0.931, 0.924, 0.93, 0.944, 0.961, 0.98, 0.996, 1.009, 1.017, 1.02, 1.02, 1.018, 1.013, 1.008, 1.003, 0.999, 0.996, 0.995, 0.994, 0.995, 0.996, 0.997, 0.998, 1);
    }
  }

  html[data-corners='sharp'] { --radius-s: 0; --radius-m: 2px; --radius-l: 4px; --radius-xl: 6px; }
  html[data-corners='round'] { --radius-s: 8px; --radius-m: 18px; --radius-l: 28px; --radius-xl: 44px; }

  /* brand motif: the 60-ray sunburst from the logo */
  @property --sun-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  @property --shine-x { syntax: '<percentage>'; inherits: false; initial-value: -60%; }
}

/* -------------------------------------------------------------------------- colour schemes */
@layer tokens {
  :root,
  [data-scheme='paper'] {
    --bg: var(--c-paper);
    --bg-alt: var(--c-sand);
    --fg: var(--c-bark);
    --fg-soft: color-mix(in oklab, var(--c-bark) 74%, var(--c-paper));
    --line: color-mix(in oklab, var(--c-bark) 15%, transparent);
    --card: #fffdf9;
    --accent: var(--c-gold);
    --accent-fg: var(--c-ink);
    --accent-text: #84520a;      /* gold is too pale for small text on light surfaces (WCAG AA) */
    --accent-display: #a56f14;   /* …and for large display words */
    --link: var(--c-maroon);
    --btn-bg: var(--c-ink);
    --btn-fg: var(--c-cream);
  }
  [data-scheme='cream'] {
    --bg: var(--c-cream);
    --bg-alt: var(--c-sand);
    --fg: var(--c-bark);
    --fg-soft: color-mix(in oklab, var(--c-bark) 74%, var(--c-cream));
    --line: color-mix(in oklab, var(--c-bark) 16%, transparent);
    --card: var(--c-paper);
    --accent: var(--c-gold);
    --accent-fg: var(--c-ink);
    --accent-text: #84520a;      /* gold is too pale for small text on light surfaces (WCAG AA) */
    --accent-display: #a56f14;   /* …and for large display words */
    --link: var(--c-maroon);
    --btn-bg: var(--c-ink);
    --btn-fg: var(--c-cream);
  }
  [data-scheme='sand'] {
    --bg: var(--c-sand);
    --bg-alt: var(--c-cream);
    --fg: var(--c-bark);
    --fg-soft: color-mix(in oklab, var(--c-bark) 76%, var(--c-sand));
    --line: color-mix(in oklab, var(--c-bark) 18%, transparent);
    --card: var(--c-paper);
    --accent: var(--c-maroon);
    --accent-fg: var(--c-cream);
    --accent-text: var(--accent);
    --accent-display: var(--accent);
    --link: var(--c-maroon);
    --btn-bg: var(--c-ink);
    --btn-fg: var(--c-cream);
  }
  [data-scheme='dark'] {
    --bg: var(--c-ink);
    --bg-alt: var(--c-cocoa);
    --fg: var(--c-cream);
    --fg-soft: color-mix(in oklab, var(--c-cream) 72%, var(--c-ink));
    --line: color-mix(in oklab, var(--c-cream) 14%, transparent);
    --card: var(--c-cocoa);
    --accent: var(--c-gold);
    --accent-fg: var(--c-ink);
    --accent-text: var(--accent);
    --accent-display: var(--accent);
    --link: var(--c-honey);
    --btn-bg: var(--c-gold);
    --btn-fg: var(--c-ink);
    color-scheme: dark;
  }
  [data-scheme='cocoa'] {
    --bg: var(--c-cocoa);
    --bg-alt: var(--c-ink);
    --fg: var(--c-cream);
    --fg-soft: color-mix(in oklab, var(--c-cream) 72%, var(--c-cocoa));
    --line: color-mix(in oklab, var(--c-cream) 15%, transparent);
    --card: color-mix(in oklab, var(--c-cocoa) 80%, black);
    --accent: var(--c-honey);
    --accent-fg: var(--c-ink);
    --accent-text: var(--accent);
    --accent-display: var(--accent);
    --link: var(--c-honey);
    --btn-bg: var(--c-gold);
    --btn-fg: var(--c-ink);
    color-scheme: dark;
  }
  [data-scheme='crimson'] {
    --bg: var(--c-crimson);
    --bg-alt: color-mix(in oklab, var(--c-crimson) 80%, black);
    --fg: var(--c-cream);
    --fg-soft: color-mix(in oklab, var(--c-cream) 82%, var(--c-crimson));
    --line: color-mix(in oklab, var(--c-cream) 25%, transparent);
    --card: color-mix(in oklab, var(--c-crimson) 86%, black);
    --accent: var(--c-honey);
    --accent-fg: var(--c-ink);
    --accent-text: var(--accent);
    --accent-display: var(--accent);
    --link: var(--c-honey);
    --btn-bg: var(--c-cream);
    --btn-fg: var(--c-ink);
    color-scheme: dark;
  }
  [data-scheme='gold'] {
    --bg: var(--c-gold);
    --bg-alt: var(--c-honey);
    --fg: var(--c-ink);
    --fg-soft: color-mix(in oklab, var(--c-ink) 80%, var(--c-gold));
    --line: color-mix(in oklab, var(--c-ink) 22%, transparent);
    --card: var(--c-honey);
    --accent: var(--c-ink);
    --accent-fg: var(--c-cream);
    --accent-text: var(--accent);
    --accent-display: var(--accent);
    --link: var(--c-ink);
    --btn-bg: var(--c-ink);
    --btn-fg: var(--c-cream);
  }
  [data-scheme] { background: var(--bg); color: var(--fg); }
}

/* -------------------------------------------------------------------------- base typography */
@layer base {
  html { font-size: var(--base-size, 16px); scrollbar-gutter: stable; scroll-padding-top: calc(var(--header-h) + 1rem); }
  body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-synthesis: none;
    background: var(--bg);
    color: var(--fg);
    overflow-x: clip;
  }
  ::selection { background: var(--c-gold); color: var(--c-ink); }

  .h-display, .h1, .h2, .h3, .h4, h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 400);
    font-variation-settings: 'SOFT' var(--heading-soft, 40);
    font-optical-sizing: auto;
    line-height: 1.04;
    letter-spacing: -0.022em;
    text-wrap: balance;
    transition: font-variation-settings var(--dur-m) var(--ease-out), font-weight var(--dur-m) var(--ease-out);
  }
  .h-display { font-size: var(--fs-display); line-height: 0.94; letter-spacing: -0.035em; }
  .h1, h1 { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.03em; }
  .h2, h2 { font-size: var(--fs-h2); line-height: 1.02; }
  .h3, h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.018em; }
  .h4, h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; line-height: 1.15; letter-spacing: -0.012em; font-variation-settings: 'SOFT' var(--heading-soft, 40); }

  /* emphasis inside headings: soft, golden, unslanted */
  .h-display em, .h1 em, .h2 em, .h3 em, h1 em, h2 em, h3 em, .accent-word {
    font-style: normal;
    color: var(--accent-display);
    font-variation-settings: 'SOFT' 100;
    font-weight: calc(var(--heading-weight, 400) + 100);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--accent-text);
  }
  .eyebrow::before {
    content: '';
    width: 0.8em;
    height: 0.8em;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    flex: none;
  }
  .eyebrow--plain::before { display: none; }

  .lead { font-size: var(--fs-xl); line-height: 1.5; color: var(--fg-soft); text-wrap: pretty; max-width: 46ch; }
  .small { font-size: var(--fs-s); }
  .muted { color: var(--fg-soft); }
  .tnum { font-variant-numeric: tabular-nums lining-nums; }
  p { text-wrap: pretty; }

  a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
  .link {
    color: var(--link);
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
    transition: background-size var(--dur-m) var(--ease-out), color var(--dur-s);
    &:hover { background-size: 0% 1px; background-position: 100% 100%; }
  }

  :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 3px; }
  [data-scheme='dark'] :focus-visible, [data-scheme='cocoa'] :focus-visible { outline-color: var(--c-honey); }

  /* Lenis */
  html.lenis, html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }
  .lenis.lenis-scrolling iframe { pointer-events: none; }
}

/* -------------------------------------------------------------------------- layout */
@layer layout {
  .page-width { width: min(100% - 2 * var(--gutter), var(--page-width, 1440px)); margin-inline: auto; }
  .page-width--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
  .page-width--wide { width: min(100% - 2 * var(--gutter), 1760px); margin-inline: auto; }
  .full-bleed { width: 100%; }

  .section { position: relative; padding-block: var(--section-y); }
  .section--flush-top { padding-top: 0; }
  .section--flush-bottom { padding-bottom: 0; }
  .section--tight { padding-block: calc(var(--section-y) * 0.55); }

  .stack > * + * { margin-top: var(--stack, var(--space-s)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-s)); }
  .grid { display: grid; gap: var(--grid-gap, var(--space-m)); }
  .center { text-align: center; margin-inline: auto; }

  .section-head { display: grid; gap: var(--space-s); margin-bottom: clamp(2rem, 1rem + 4vw, 4.5rem); }
  .section-head--split { grid-template-columns: 1fr auto; align-items: end; gap: var(--space-m) var(--space-xl); }
  .section-head--center { text-align: center; justify-items: center; }
  .section-head__title { max-width: 18ch; }
  .section-head--center .section-head__title { max-width: 22ch; }
  @media (max-width: 749px) { .section-head--split { grid-template-columns: 1fr; } }

  /* jagged "crust" edges between sections — a torn-pastry mask drawn from an inline SVG */
  .crust-top::before, .crust-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(16px, 2.2vw, 30px);
    background: inherit;
    pointer-events: none;
    z-index: 2;
    --crust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30V15L17.8 4.6L46.0 17.1L64.8 9.0L85.1 20.2L105.0 3.5L135.2 22.6L159.9 4.4L181.5 21.1L209.3 6.3L237.4 18.4L264.6 6.5L290.7 21.9L311.9 3.9L338.3 21.2L359.6 3.1L388.5 19.4L412.9 7.2L438.0 16.0L464.8 4.3L492.9 14.3L522.3 6.7L548.6 21.2L565.7 6.1L586.0 18.4L609.6 5.3L630.3 15.1L648.2 9.0L669.3 19.1L689.8 6.9L718.0 18.1L738.5 4.2L757.5 20.7L778.7 4.2L803.9 22.0L832.7 4.2L855.8 22.2L874.3 8.9L900.0 15.0V30Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--crust) 0 0 / 900px 100% repeat-x;
    mask: var(--crust) 0 0 / 900px 100% repeat-x;
  }
  .crust-top::before { top: calc(-1 * clamp(15px, 2.2vw, 29px)); transform: scaleY(1); }
  .crust-bottom::after { bottom: calc(-1 * clamp(15px, 2.2vw, 29px)); transform: scaleY(-1); }
}

/* -------------------------------------------------------------------------- utilities */
@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link {
    position: fixed; top: 0.75rem; left: 0.75rem; z-index: calc(var(--z-cursor) + 10);
    padding: 0.75rem 1.1rem; background: var(--c-gold); color: var(--c-ink); font-weight: 600; border-radius: var(--radius-s);
    transform: translateY(-200%);
    &:focus { transform: none; }
  }
  .no-scroll { overflow: hidden; }
  .nowrap { white-space: nowrap; }
  .text-center { text-align: center; }
  .hide-mobile { @media (max-width: 749px) { display: none !important; } }
  .hide-desktop { @media (min-width: 750px) { display: none !important; } }
  .aspect-square { aspect-ratio: 1; }
  .aspect-portrait { aspect-ratio: 4 / 5; }
  .aspect-landscape { aspect-ratio: 3 / 2; }
  .media-cover { width: 100%; height: 100%; object-fit: cover; }
}

/* -------------------------------------------------------------------------- reveal & motion primitives */
@layer base {
  /* anything marked [data-reveal] fades/slides in when it enters the viewport (theme.js adds .is-in) */
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
    transition: opacity 0.95s var(--ease-out), transform 1.15s var(--ease-out), filter 1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms + var(--reveal-delay, 0ms));
    will-change: opacity, transform;
  }
  .js [data-reveal='fade'] { transform: none; }
  .js [data-reveal='scale'] { transform: scale(0.94); }
  .js [data-reveal='left'] { transform: translate3d(-2.5rem, 0, 0); }
  .js [data-reveal='right'] { transform: translate3d(2.5rem, 0, 0); }
  .js [data-reveal='blur'] { transform: translate3d(0, 1rem, 0); filter: blur(10px); }
  .js [data-reveal='mask'] { transform: none; opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal='mask-x'] { transform: none; opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); will-change: auto; }

  .reveal-all [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }

  /* split headings: theme.js wraps every word in a mask so each line rises together (stagger by line, then by word) */
  .sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; padding-right: 0.04em; margin-right: -0.04em; }
  .sw__i { display: inline-block; transform: translate3d(0, 112%, 0); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--l, 0) * 110ms + var(--w, 0) * 30ms + var(--reveal-delay, 0ms)); will-change: transform; }
  .is-in .sw__i, .sw.is-in .sw__i { transform: none; }
  .reveal-all .sw__i { transform: none !important; }

  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal], .js [data-reveal='mask'], .js [data-reveal='mask-x'] { opacity: 1; transform: none; clip-path: none; filter: none; transition: none; }
    .sw__i { transform: none; transition: none; }
  }
  html[data-motion='reduce'] .js [data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; transition: none; }
}

/* -------------------------------------------------------------------------- rich text (page, legal, blog, product descriptions) */
@layer base {
  .rte { font-size: 1.0625rem; line-height: 1.75; color: var(--fg-soft); }
  .rte > * + * { margin-top: 1.15em; }
  .rte h1, .rte h2, .rte h3, .rte h4, .rte h5 { color: var(--fg); margin-top: 2em; }
  .rte h2 { font-size: var(--fs-h3); }
  .rte h3 { font-size: var(--fs-h4); font-family: var(--font-display); }
  .rte h4, .rte h5 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
  .rte h4 strong, .rte h3 strong, .rte h2 strong { font-weight: inherit; }
  .rte :is(h1, h2, h3, h4, h5):first-child { margin-top: 0; }
  .rte ul, .rte ol { padding-left: 1.25em; }
  .rte li + li { margin-top: 0.45em; }
  .rte li::marker { color: var(--accent); }
  .rte li > h4, .rte li > p { margin: 0; }
  .rte a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .rte strong { color: var(--fg); font-weight: 600; }
  .rte blockquote { padding: 0.25em 0 0.25em 1.4em; border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: var(--fs-xl); color: var(--fg); line-height: 1.4; }
  .rte :is(h1, h2, h3) em { color: inherit; font-style: italic; font-weight: inherit; font-variation-settings: normal; }   /* pasted emphasis stays plain, the golden em style is for our own headings */
  .rte hr { border: 0; height: 1px; background: var(--line); margin-block: 2.5em; }
  .rte img { height: auto !important; max-width: 100% !important; float: none !important; margin-inline: 0 !important; border-radius: var(--radius-m); }
  .rte img[src*='wp-content'] { display: none; }     /* leftovers hot-linked from the old WordPress site */
  .rte table { width: 100% !important; table-layout: auto; font-size: var(--fs-s); }
  .rte td, .rte th { width: auto !important; height: auto !important; padding: 0.7em 0.9em; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .rte th { color: var(--fg); font-weight: 600; }
  .rte [style*='text-align'] { text-align: inherit !important; }
  .rte p:empty, .rte p:has(> br:only-child) { display: none; }
  @media (max-width: 749px) { .rte table { display: block; overflow-x: auto; } }
}

/* -------------------------------------------------------------------------- forms */
@layer base {
  .field { position: relative; display: block; }
  .field__label {
    position: absolute; left: 1.1rem; top: 1.05rem; z-index: 1; pointer-events: none; color: var(--fg-soft);
    font-size: var(--fs-s); line-height: 1.2; transform-origin: 0 0;
    transition: transform var(--dur-s) var(--ease-out), color var(--dur-s);
  }
  .input, .textarea, .select {
    width: 100%; padding: 1.55rem 1.1rem 0.6rem; background: color-mix(in oklab, var(--fg) 4%, transparent); color: var(--fg);
    border: 1px solid var(--line); border-radius: var(--radius-m); font-size: var(--fs-m); line-height: 1.4; appearance: none;
    transition: border-color var(--dur-s), background var(--dur-s), box-shadow var(--dur-s);
    &::placeholder { color: transparent; }
    &:hover { border-color: color-mix(in oklab, var(--fg) 34%, transparent); }
    &:focus { outline: 0; border-color: var(--accent); background: color-mix(in oklab, var(--fg) 6%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }
  }
  .textarea { min-height: 9rem; resize: vertical; field-sizing: content; }
  .field:focus-within .field__label, .input:not(:placeholder-shown) ~ .field__label, .textarea:not(:placeholder-shown) ~ .field__label {
    transform: translateY(-0.55rem) scale(0.78); color: var(--accent);
  }
  .field--error .input, .field--error .textarea { border-color: #e0584b; }
  .field__error { margin-top: 0.4rem; font-size: var(--fs-xs); color: #f08a7e; }
  .form-message { padding: 0.9rem 1.1rem; border-radius: var(--radius-m); font-size: var(--fs-s); border: 1px solid var(--line); background: color-mix(in oklab, var(--accent) 10%, transparent); }
  .form-message--error { border-color: #e0584b; background: color-mix(in oklab, #e0584b 12%, transparent); }
  .form-message--success { border-color: var(--c-leaf); background: color-mix(in oklab, var(--c-leaf) 16%, transparent); }
}

/* -------------------------------------------------------------------------- global effects */
@layer components {
  /* film grain */
  .grain {
    position: fixed; inset: -50%; z-index: 55; pointer-events: none; opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1.1s steps(6) infinite;
  }
  @keyframes grain {
    0% { transform: translate(0, 0); } 17% { transform: translate(-4%, 3%); } 34% { transform: translate(3%, -5%); }
    51% { transform: translate(-6%, -2%); } 68% { transform: translate(5%, 4%); } 85% { transform: translate(-2%, 6%); } 100% { transform: translate(0, 0); }
  }
  html[data-motion='reduce'] .grain, html[data-save-data] .grain { animation: none; }
  @media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

  /* scroll progress (CSS scroll-driven where supported, JS sets --p otherwise) */
  .scroll-progress {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: calc(var(--z-header) + 5); pointer-events: none;
    transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, var(--c-maroon), var(--c-gold) 55%, var(--c-honey));
  }
  @supports (animation-timeline: scroll()) {
    .scroll-progress { transform: scaleX(0); animation: progress-grow linear both; animation-timeline: scroll(root block); }
    @keyframes progress-grow { to { transform: scaleX(1); } }
  }

  /* custom cursor */
  .cursor { position: fixed; inset: 0 auto auto 0; z-index: var(--z-cursor); pointer-events: none; opacity: 0; transition: opacity var(--dur-s); }
  html.has-cursor .cursor { opacity: 1; }
  .cursor__dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c-gold); transition: transform var(--dur-s) var(--ease-out), opacity var(--dur-s); }
  .cursor__ring {
    position: absolute; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--c-gold) 70%, transparent);
    transition: width var(--dur-m) var(--ease-out), height var(--dur-m) var(--ease-out), margin var(--dur-m) var(--ease-out), background var(--dur-s), border-color var(--dur-s), backdrop-filter var(--dur-s);
  }
  .cursor__label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-s), transform var(--dur-s) var(--ease-out); white-space: nowrap; }
  .cursor.is-link .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in oklab, var(--c-gold) 22%, transparent); backdrop-filter: blur(2px); }
  .cursor.is-label .cursor__ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--c-gold); border-color: transparent; }
  .cursor.is-label .cursor__label { opacity: 1; transform: none; }
  .cursor.is-label .cursor__dot, .cursor.is-hidden .cursor__dot { opacity: 0; }
  .cursor.is-down .cursor__ring { transform: scale(0.88); }
  .cursor.is-hidden { opacity: 0 !important; }
  @media (hover: none), (pointer: coarse) { .cursor { display: none; } }
}

/* -------------------------------------------------------------------------- page transitions (View Transitions API) */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.42s var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: vt-in 0.75s var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.995); filter: blur(5px); } }
  @keyframes vt-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
  ::view-transition-group(product-hero) { animation-duration: 0.8s; animation-timing-function: var(--ease-out); }
  ::view-transition-old(product-hero), ::view-transition-new(product-hero) { height: 100%; object-fit: cover; }
  ::view-transition-group(site-header) { animation-duration: 0.6s; }
}