/* =========================================================================
   KAÍRU — Leather Craft
   Dark editorial build. Motion is native CSS scroll-driven animation;
   JavaScript is only used for the menu and the WhatsApp number.
   ========================================================================= */

@layer reset, base, components, layout, motion;

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: dark;

  /* tier 1 — literal (leather: near-black browns, cream, tan, cognac) */
  --ink-900: #090706;
  --ink-800: #0f0b09;
  --ink-700: #171210;
  --ink-600: #221a14;
  --cream:   #f4ece1;
  --sand:    #c7ae8d;
  --muted:   #9d876c;
  --tan:     #c89152;
  --cognac:  #a35f2a;
  --rust:    #70391a;

  /* tier 2 — semantic */
  --bg: var(--ink-900);
  --bg-raised: var(--ink-800);
  --fg: var(--cream);
  --fg-dim: var(--muted);
  --accent: var(--tan);
  --rule: color-mix(in oklab, var(--cream) 14%, transparent);

  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body: "Alice", Georgia, "Times New Roman", serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* rhythm */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --section: clamp(6rem, 14vh + 5vw, 14rem);
  --measure: 62ch;

  /* gradient interpolation guard (older browsers) */
  --in-oklab: ;
}
@supports (background: linear-gradient(in oklab, white, black)) {
  :root { --in-oklab: in oklab; }
}

/* ---------------------------------------------------------------- reset */
@layer reset {
  html { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, dl, dd, blockquote, fieldset, legend { margin: 0; }
  *, ::before, ::after { box-sizing: inherit; }

  img { display: block; max-inline-size: 100%; height: auto; }
  /* A <picture> is only a wrapper for choosing a source — it must not become
     a box, or `figure img { inline-size: 100% }` resolves against an inline
     element with no width and every photograph collapses. `display: contents`
     takes it out of layout entirely, so every existing img selector keeps
     addressing what it always did. */
  picture { display: contents; }
  a { color: inherit; }
  button { font: inherit; color: inherit; background: none; border: 0; }
  dl, dd, ol, ul { padding: 0; }
  fieldset { border: 0; padding: 0; }
}

/* ---------------------------------------------------------------- base */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
    line-height: 1.75;
    overflow-x: hidden;
    scrollbar-color: #4a3524 var(--ink-800);
    text-rendering: optimizeLegibility;
  }

  /* filmic grain — decorative only */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  @media (forced-colors: active) {
    body::after { display: none; }
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-optical-sizing: auto;
    line-height: 0.95;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  h2 { font-size: clamp(2.5rem, 1.5rem + 5.5vw, 6.5rem); }
  h3 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); }

  p { text-wrap: pretty; overflow-wrap: break-word; }

  em, i.accent { font-style: italic; color: var(--accent); }

  ::selection { background: var(--tan); color: var(--ink-900); }

  :focus-visible {
    outline: 2px solid var(--tan);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .skip {
    position: absolute;
    inset-block-start: -4rem;
    inset-inline-start: 1rem;
    z-index: 300;
    padding: 0.75rem 1.25rem;
    background: var(--tan);
    color: var(--ink-900);
    text-decoration: none;
  }
  .skip:focus { inset-block-start: 1rem; }
}

/* ---------------------------------------------------------------- shared */
@layer components {
  .eyebrow {
    font-family: var(--font-mono);
    font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.6;
  }

  .lede {
    max-inline-size: 46ch;
    font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
    color: var(--fg-dim);
  }

  .prose { max-inline-size: var(--measure); color: color-mix(in oklab, var(--cream) 82%, transparent); }
  .prose p + p { margin-block-start: 1.35em; }

  .facts {
    display: grid;
    gap: 1px;
    margin-block-start: clamp(2rem, 4vw, 3.5rem);
    background: var(--rule);
    border-block: 1px solid var(--rule);
  }
  .facts > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    padding-block: 0.9rem;
    background: var(--bg);
  }
  .facts dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .facts dd { font-size: 0.95rem; }
  /* on raised backgrounds the row fill has to match its own section */
  .on-raised .facts > div { background: var(--ink-800); }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    margin-block-start: clamp(2rem, 4vw, 3rem);
    padding: 1rem clamp(1.5rem, 3vw, 2.75rem);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1rem);
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.4s, color 0.4s, border-color 0.4s;
  }
  .btn:hover,
  .btn:focus-visible {
    background: var(--tan);
    border-color: var(--tan);
    color: var(--ink-900);
  }
  .btn--solid {
    background: var(--tan);
    border-color: var(--tan);
    color: var(--ink-900);
  }
  .btn--solid:hover,
  .btn--solid:focus-visible {
    background: var(--cream);
    border-color: var(--cream);
  }
  .btn svg { inline-size: 1.15em; block-size: 1.15em; fill: currentColor; flex: none; }

  figure {
    background: var(--ink-700);
    border-radius: clamp(0.5rem, 1vw, 1rem);
  }
  figure img {
    inline-size: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  .icon { inline-size: 1em; block-size: 1em; fill: currentColor; }
}

/* ---------------------------------------------------------------- nav */
@layer components {
  .nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.75rem) var(--gutter);
    isolation: isolate;
  }
  /* backdrop lives on its own layer so the mask never eats the link text */
  .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom var(--in-oklab),
      color-mix(in oklab, var(--ink-900) 90%, transparent),
      transparent);
    backdrop-filter: blur(7px);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
  }

  .nav__brand {
    display: grid;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem);
    line-height: 1.1;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .nav__brand span {
    font-family: var(--font-mono);
    font-size: 0.53em;
    letter-spacing: 0.3em;
    color: var(--fg-dim);
  }

  .nav__links {
    display: flex;
    gap: clamp(1rem, 2.5vw, 2.75rem);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .nav__links a {
    position: relative;
    padding-block: 0.35rem;
    text-decoration: none;
    color: color-mix(in oklab, var(--cream) 78%, transparent);
    transition: color 0.3s;
  }
  .nav__links a::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 1px;
    background: var(--tan);
    transition: inline-size 0.4s;
  }
  .nav__links a:hover,
  .nav__links a:focus-visible { color: var(--tan); }
  .nav__links a:hover::after { inline-size: 100%; }

  /* The language switch. It sits between the links and the hamburger and
     stays visible at every width — it is two two-letter links, so it costs
     almost nothing, and hiding it inside the mobile menu would bury the only
     control a visitor has over which language they are reading. */
  .lang {
    display: flex;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }
  .lang a {
    padding: 0.25rem 0.1rem;
    text-decoration: none;
    color: color-mix(in oklab, var(--cream) 48%, transparent);
    transition: color 0.3s;
  }
  .lang a:hover,
  .lang a:focus-visible { color: var(--tan); }
  .lang a[aria-current] { color: var(--cream); }
  /* a hairline between the two codes, so they read as one control */
  .lang a + a { border-inline-start: 1px solid var(--rule); padding-inline-start: 0.6rem; }

  .nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.6rem;
    cursor: pointer;
  }
  .nav__toggle span {
    inline-size: 22px;
    block-size: 1px;
    background: var(--cream);
  }

  .menu {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    /* NB: no `display` here on purpose. A closed popover relies on the UA
       `display: none`; setting it unconditionally would leave this
       full-screen panel hit-testable at opacity 0 and swallow every click
       on the page. `display` is set only in :popover-open below. */
    align-content: center;
    justify-items: center;
    gap: clamp(1.25rem, 4vh, 2.5rem);
    background: var(--ink-900);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 3.5rem);
    opacity: 0;
    transition: opacity 0.35s, overlay 0.35s allow-discrete, display 0.35s allow-discrete;
  }
  .menu:popover-open {
    display: grid;
    opacity: 1;
  }
  @starting-style { .menu:popover-open { opacity: 0; } }
  /* during the 350ms close transition the panel is still laid out: keep it
     out of hit-testing so it cannot swallow a click on its way out */
  .menu:not(:popover-open) { pointer-events: none; }
  .menu__close {
    position: absolute;
    inset-block-start: clamp(0.5rem, 2vw, 1.25rem);
    inset-inline-end: clamp(0.75rem, 4vw, 1.5rem);
    inline-size: 3rem;
    aspect-ratio: 1;
    font-family: var(--font-body);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--fg-dim);
    cursor: pointer;
    transition: color 0.3s;
  }
  .menu__close:hover,
  .menu__close:focus-visible { color: var(--tan); }

  .menu a { text-decoration: none; }
  .menu a:hover { color: var(--tan); }
  .menu::backdrop { background: var(--ink-900); }

  @media (width < 64rem) {
    .nav__links { display: none; }
    .nav__toggle { display: flex; }
  }

  /* compact header used on the inner pages */
  .nav--inner .nav__back {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cream) 78%, transparent);
    text-decoration: none;
    transition: color 0.3s;
  }
  .nav--inner .nav__back:hover { color: var(--tan); }
}

/* ---------------------------------------------------------------- hero
   Every source photo is portrait, so the hero frames one at close to its
   native size instead of stretching it across the viewport. */
@layer layout {
  .hero {
    position: relative;
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-content: center;
    align-items: center;
    min-block-size: 100svh;
    padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(4rem, 10vh, 7rem);
    overflow: clip;
    isolation: isolate;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(70% 55% at 78% 42% var(--in-oklab),
        color-mix(in oklab, var(--rust) 42%, transparent), transparent 72%),
      radial-gradient(55% 40% at 8% 88% var(--in-oklab),
        color-mix(in oklab, var(--cognac) 16%, transparent), transparent 70%);
  }
  @media (width >= 64rem) {
    .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  }

  .hero__eyebrow { margin-block-end: clamp(1.5rem, 4vh, 2.75rem); }

  .hero__title {
    font-size: clamp(3rem, 1.5rem + 7.5vw, 8.5rem);
    line-height: 0.92;
    letter-spacing: -0.025em;
  }
  .hero__title i {
    display: block;
    font-style: italic;
    color: color-mix(in oklab, var(--cream) 55%, var(--tan));
  }

  .hero__roles {
    margin-block-start: clamp(1.5rem, 3.5vh, 2.5rem);
    font-family: var(--font-mono);
    font-size: clamp(0.66rem, 0.58rem + 0.4vw, 0.88rem);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--sand);
  }
  .hero__roles i { color: var(--cognac); font-style: normal; }

  .hero__media {
    overflow: clip;
    border-radius: clamp(0.5rem, 1vw, 1rem);
    box-shadow: 0 2.5rem 5rem -1.5rem #000;
  }
  .hero__media img { aspect-ratio: 3 / 4; }
  @media (width < 64rem) {
    .hero__media { max-inline-size: 26rem; }
  }

  .hero__cue {
    position: absolute;
    inset-block-end: 1.75rem;
    inset-inline-end: var(--gutter);
    inline-size: 1px;
    block-size: clamp(2.5rem, 7vh, 5rem);
    background: var(--rule);
    overflow: hidden;
  }
  .hero__cue span {
    position: absolute;
    inset-inline: 0;
    block-size: 40%;
    background: var(--tan);
    animation: cue 2.4s ease-in-out infinite;
  }
  @keyframes cue {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__cue span { animation: none; inset-block-start: 0; }
  }
  @media (width < 64rem) {
    .hero__cue { display: none; }
  }
}

/* ---------------------------------------------------------------- manifesto */
@layer layout {
  .manifesto {
    padding: clamp(6rem, 18vh, 12rem) var(--gutter);
    text-align: center;
  }
  .manifesto p {
    max-inline-size: 26ch;
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 1rem + 3.9vw, 4.25rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  .marquee {
    overflow: clip;
    padding-block: clamp(1rem, 2vw, 1.75rem);
    border-block: 1px solid var(--rule);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
  .marquee__track {
    display: flex;
    inline-size: max-content;
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 0.6rem + 0.4vw, 0.9rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fg-dim);
    animation: slide 42s linear infinite;
  }
  .marquee__track span { padding-inline-end: 1.5rem; }
  @keyframes slide { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
  }
}

/* ---------------------------------------------------------------- collection */
@layer layout {
  .collection {
    padding: var(--section) var(--gutter);
  }
  .collection__head {
    max-inline-size: 48rem;
    margin-block-end: clamp(3rem, 7vw, 6rem);
  }
  .collection__head h2 { margin-block: 1rem 1.75rem; }

  .collection__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .cat {
    display: grid;
    gap: 1rem;
    text-decoration: none;
  }
  .cat figure { overflow: clip; }
  .cat img {
    aspect-ratio: 3 / 4;
    transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.9s;
    filter: saturate(0.9) brightness(0.9);
  }
  .cat:hover img,
  .cat:focus-visible img { scale: 1.05; filter: saturate(1.05) brightness(1); }
  .cat__name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
  }
  .cat__name span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--fg-dim);
    transition: color 0.3s;
  }
  .cat:hover .cat__name span { color: var(--tan); }
}

/* ---------------------------------------------------------------- features */
@layer layout {
  .feature {
    display: grid;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
    padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  }
  @media (width >= 64rem) {
    .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .feature--flip .feature__text { order: 2; }
    .feature__text {
      position: sticky;
      inset-block-start: clamp(6rem, 14vh, 10rem);
    }
  }
  .feature__text h2 { margin-block: 1rem clamp(1.5rem, 3vw, 2.25rem); }
  .feature__text p:not(.eyebrow) {
    max-inline-size: 46ch;
    color: color-mix(in oklab, var(--cream) 82%, transparent);
  }
  .feature__text p + p { margin-block-start: 1.2em; }

  .feature__media {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }
  .feature__media img { aspect-ratio: 3 / 4; }
  .feature__media figure { overflow: clip; }

  /* two photos offset against each other, gallery-wall style */
  .feature__media--pair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature__media--pair figure:first-child { grid-column: 1 / -1; }
  .feature__media--pair figure:last-child {
    grid-column: 2 / -1;
    margin-block-start: clamp(-3rem, -6vw, -1.5rem);
  }
  @media (width >= 48rem) {
    .feature__media--pair { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .feature__media--pair figure:first-child { grid-column: 1 / 5; }
    .feature__media--pair figure:last-child {
      grid-column: 3 / -1;
      margin-block-start: clamp(-6rem, -8vw, -3rem);
    }
    .feature__media--pair figure:last-child img { aspect-ratio: 1; }
  }
}

/* ---------------------------------------------------------------- saddlery */
@layer layout {
  .bleed {
    padding-block: clamp(4rem, 10vw, 8rem);
    background:
      radial-gradient(85% 55% at 50% 0% var(--in-oklab),
        color-mix(in oklab, var(--rust) 30%, transparent), transparent 72%),
      var(--ink-800);
  }
  .bleed__head {
    max-inline-size: 48rem;
    padding-inline: var(--gutter);
    margin-block-end: clamp(2.5rem, 5vw, 4rem);
  }
  .bleed__head h2 { margin-block: 1rem 1.5rem; }
  .bleed__head p:not(.eyebrow) { color: var(--fg-dim); max-inline-size: 48ch; }
  .bleed__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    padding-inline: clamp(0.75rem, 1.5vw, 1.25rem);
  }
  .bleed__grid figure { overflow: clip; }
  .bleed__grid img { aspect-ratio: 3 / 4; }
}

/* ---------------------------------------------------------------- commissions */
@layer layout {
  .commissions {
    padding: var(--section) var(--gutter);
    background:
      radial-gradient(65% 45% at 85% 100% var(--in-oklab),
        color-mix(in oklab, var(--cognac) 20%, transparent), transparent 70%),
      var(--ink-800);
  }
  .commissions__head {
    max-inline-size: 48rem;
    margin-block-end: clamp(3rem, 7vw, 5.5rem);
  }
  .commissions__head h2 { margin-block: 1rem 1.5rem; }
  .commissions__head p:not(.eyebrow) { color: var(--fg-dim); max-inline-size: 50ch; }

  .commissions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  }
  .commission figure {
    margin-block-end: 1.25rem;
    overflow: clip;
    background: var(--ink-700);
  }
  .commission img {
    aspect-ratio: 3 / 4;
    filter: saturate(0.95);
  }
  .commission h3 {
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.65rem);
    line-height: 1.15;
  }
  .commission p {
    margin-block-start: 0.6rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--fg-dim);
    max-inline-size: 38ch;
  }
}

/* ---------------------------------------------------------------- workshop */
@layer layout {
  .workshop {
    display: grid;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
    padding: var(--section) var(--gutter);
  }
  @media (width >= 64rem) {
    .workshop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .workshop__media {
      position: sticky;
      inset-block-start: clamp(5rem, 12vh, 9rem);
    }
  }
  .workshop__media { overflow: clip; border-radius: clamp(0.5rem, 1vw, 1rem); }
  .workshop__media img { aspect-ratio: 2 / 3; }
  .workshop h2 { margin-block: 1rem clamp(2rem, 4vw, 3rem); }

  .steps {
    display: grid;
    gap: 1px;
    margin-block-start: clamp(2.5rem, 5vw, 4rem);
    background: var(--rule);
    border-block: 1px solid var(--rule);
    list-style: none;
  }
  .steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem clamp(1.25rem, 3vw, 2.5rem);
    padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--bg);
  }
  .steps b {
    grid-row: span 2;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent);
    padding-block-start: 0.45em;
  }
  .steps h3 {
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.65rem);
    line-height: 1.2;
  }
  .steps p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--fg-dim);
    max-inline-size: 44ch;
  }
}

/* ---------------------------------------------------------------- gallery */
@layer layout {
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 0.9rem);
    padding: var(--section) clamp(0.5rem, 1vw, 0.9rem);
  }
  .gallery figure { overflow: clip; }
  .gallery img { aspect-ratio: 4 / 5; }
  @media (width >= 56rem) {
    .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
    /* the lead tile spans two rows, so let the photo fill whatever height
       those rows resolve to instead of forcing its own ratio */
    .gallery figure:first-child img { aspect-ratio: auto; block-size: 100%; }
  }
}

/* ---------------------------------------------------------------- contact */
@layer layout {
  .contact {
    padding: var(--section) var(--gutter);
    text-align: center;
    background:
      radial-gradient(60% 50% at 50% 100% var(--in-oklab),
        color-mix(in oklab, var(--cognac) 26%, transparent), transparent 70%),
      var(--bg);
  }
  .contact h2 { margin-block: 1.25rem 2rem; }
  .contact .lede { margin-inline: auto; }
  .contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  .foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem var(--gutter);
    border-block-start: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .foot nav { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }
  .foot a { text-decoration: none; transition: color 0.3s; }
  .foot a:hover { color: var(--tan); }
}

/* ---------------------------------------------------------------- product page */
@layer layout {
  .product {
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
    padding: clamp(7rem, 16vh, 11rem) var(--gutter) var(--section);
  }
  @media (width >= 64rem) {
    .product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
    .product__copy {
      position: sticky;
      inset-block-start: clamp(6rem, 14vh, 10rem);
    }
  }
  .product__media { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
  .product__media figure { overflow: clip; }
  .product__media img { aspect-ratio: 3 / 4; }

  .product__copy h1 {
    margin-block: 1rem 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.02em;
  }
  .product__copy .lede { margin-block-end: 1.75rem; }
  .product__copy > p { max-inline-size: 46ch; color: color-mix(in oklab, var(--cream) 82%, transparent); }

  .field { margin-block-start: clamp(2rem, 4vw, 2.75rem); }
  .field > legend,
  .field > .field__label {
    display: block;
    margin-block-end: 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .swatches { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .swatches label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.1rem 0.6rem 0.7rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
  }
  .swatches label:hover { border-color: var(--sand); }
  .swatches input { position: absolute; opacity: 0; pointer-events: none; }
  .swatches input:checked + .dot {
    box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 3px var(--tan);
  }
  .swatches input:focus-visible + .dot {
    outline: 2px solid var(--tan);
    outline-offset: 3px;
  }
  .dot {
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border-radius: 999px;
    flex: none;
  }
  .dot--black { background: #1b1613; }
  .dot--wine { background: #6b2434; }
  .dot--blue { background: #3f556b; }
  .dot--olive { background: #8a8560; }

  select {
    inline-size: 100%;
    max-inline-size: 22rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
    background: var(--ink-800);
    color: var(--fg);
    font: inherit;
    font-size: 0.95rem;
  }

  details {
    border-block-end: 1px solid var(--rule);
  }
  details:first-of-type { border-block-start: 1px solid var(--rule); }
  details summary {
    padding-block: 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  details summary::-webkit-details-marker { display: none; }
  details summary::after { content: "+"; color: var(--accent); }
  details[open] summary::after { content: "−"; }
  details p {
    padding-block-end: 1.25rem;
    font-size: 0.95rem;
    color: var(--fg-dim);
    max-inline-size: 46ch;
  }
  .details-group { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
}

/* ---------------------------------------------------------------- inner hero */
@layer layout {
  .page-hero {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
    padding: clamp(8rem, 20vh, 13rem) var(--gutter) clamp(2rem, 5vw, 4rem);
  }
  @media (width >= 64rem) {
    .page-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  }
  .page-hero h1 {
    margin-block: 1rem 0;
    font-size: clamp(2.75rem, 1.5rem + 6vw, 7rem);
  }
  .page-hero .lede { margin-block-start: 1.75rem; }
  .page-hero figure { overflow: clip; }
  .page-hero img { aspect-ratio: 3 / 4; }

  /* The 404 carries no photograph, so it drops the second column and gets
     enough bottom padding to stand as a page on its own. */
  .page-hero--solo {
    align-items: center;
    min-block-size: 70svh;
    padding-block-end: clamp(6rem, 16vh, 11rem);
  }
  @media (width >= 64rem) {
    .page-hero--solo { grid-template-columns: minmax(0, 1fr); }
  }
  .page-hero--solo .contact__actions { margin-block-start: clamp(2rem, 4vw, 3rem); }
}

/* ---------------------------------------------------------------- motion
   Progressive enhancement: without scroll-driven animation support, or with
   reduced motion, everything is simply already in place. */
@layer motion {
  @keyframes reveal {
    from { opacity: 0; translate: 0 2.5rem; }
  }
  @keyframes heroLift {
    to { translate: 0 -5vh; opacity: 0; }
  }
  @keyframes heroSink {
    to { translate: 0 8vh; opacity: 0.2; }
  }
  /* scale, not translate: a cover-fitted photo translated off-centre
     exposes a bare edge, whereas scaling always fills its frame */
  @keyframes slowZoom {
    from { scale: 1; }
    to   { scale: 1.08; }
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @media (prefers-reduced-motion: no-preference) {

      .reveal {
        animation: reveal 1s cubic-bezier(0.2, 0.7, 0.3, 1) both;
        animation-timeline: view();
        animation-range: entry 8% cover 32%;
      }

      .hero__body {
        animation: heroLift linear both;
        animation-timeline: scroll(root block);
        animation-range: 10svh 90svh;
      }
      .hero__media {
        animation: heroSink linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 95svh;
      }

      /* slow push-in on the large standing images */
      .workshop__media img,
      .bleed__grid img,
      .page-hero img {
        animation: slowZoom linear both;
        animation-timeline: view();
        animation-range: cover;
      }
    }
  }
}