/* ==========================================================================
   LE BENIC — base
   Tokens, reset, typography primitives, global texture.
   ========================================================================== */

:root {
  /* Earth */
  --ink: #0b0a09;          /* volcanic black   */
  --charcoal: #141311;
  --volcanic: #2a211b;     /* volcanic brown   */
  --stone: #3b3a36;        /* wet stone        */
  --moss: #434d2e;
  --heather: #5f4759;
  --skin: #c49b80;
  --label: #221b1d;        /* bottle label / next ground */

  /* Light */
  --bone: #e9e1d5;
  --bone-72: rgba(233, 225, 213, 0.72);
  --bone-48: rgba(233, 225, 213, 0.48);
  --bone-20: rgba(233, 225, 213, 0.2);

  /* Type */
  --serif: "Instrument Serif", "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  /* Header */
  --header-bg: #080808;
  --header-h: 62px;
  --header-edge: 10px;   /* tonal release band below the header, before the image */
  --header-ivory: #ece4d6;
  --font-wordmark: "Instrument Serif", "Times New Roman", serif;
  --font-nav: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Space & motion */
  --gutter: clamp(20px, 3.2vw, 56px);
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
img, video, canvas, svg { display: block; max-width: 100%; }

:focus-visible { outline: 1px solid var(--bone-72); outline-offset: 4px; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bone-72);
}

/* --------------------------------------------------------------------------
   Shop button — one quiet, editorial capsule for the whole site.
   Near-black ground, warm ivory type in the navigation face, a hairline edge.

   Comet edge: the side the button arrives from (.cta--from-left / --from-right)
   dissolves softly — the hairline fades out and a short, dark, diffused trail
   extends behind it. The leading side stays crisp. The trail is two custom
   properties, animated long and present while the button glides in, then
   settling to almost nothing at rest:
     --tail    length of the trail beyond the capsule
     --tail-o  its strength (0–1)
   The label is never inside the soft layers, so it is always sharp.

   Hover: the edge warms, the ground lifts a step, the label moves 3px.
   -------------------------------------------------------------------------- */
.cta {
  --tail: 12px;
  --tail-o: 0.4;
  --edge: rgb(236 228 214 / 0.3);
  --ground: #0a0a09;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: 16px 32px 15px 33px;
  border-radius: 999px;
  color: var(--header-ivory);
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the capsule: ground + hairline, fading out toward the trailing side */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ground);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: background-color 0.9s var(--ease-cine), box-shadow 0.9s var(--ease-cine);
}
.cta--from-left::before  { -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.42) 0, #000 34px); mask-image: linear-gradient(to right, rgb(0 0 0 / 0.42) 0, #000 34px); }
.cta--from-right::before { -webkit-mask-image: linear-gradient(to left, rgb(0 0 0 / 0.42) 0, #000 34px); mask-image: linear-gradient(to left, rgb(0 0 0 / 0.42) 0, #000 34px); }
/* the trail: a soft, dark, slightly warm haze continuing the capsule backward */
.cta::after {
  content: "";
  position: absolute;
  top: 14%;
  bottom: 14%;
  z-index: -2;
  width: calc(var(--tail) + 34px);
  border-radius: 999px;
  opacity: var(--tail-o);
  filter: blur(5px);
  pointer-events: none;
}
.cta--from-left::after {
  right: calc(100% - 34px);
  background: linear-gradient(to left, rgb(10 10 9 / 0.9), rgb(10 10 9 / 0.35) 55%, rgb(10 10 9 / 0)),
              linear-gradient(to left, rgb(236 228 214 / 0.08), rgb(236 228 214 / 0) 70%);
}
.cta--from-right::after {
  left: calc(100% - 34px);
  background: linear-gradient(to right, rgb(10 10 9 / 0.9), rgb(10 10 9 / 0.35) 55%, rgb(10 10 9 / 0)),
              linear-gradient(to right, rgb(236 228 214 / 0.08), rgb(236 228 214 / 0) 70%);
}
.cta__label {
  display: inline-block;
  margin-right: -0.34em; /* optically recentre the tracked caps */
  transition: translate 0.9s var(--ease-cine);
}
.cta:hover { --ground: #121210; --edge: rgb(236 228 214 / 0.58); }
.cta:hover .cta__label { translate: 3px 0; }
.cta:focus-visible { outline-offset: 5px; }
.cta-mask { display: inline-block; }

@media (max-width: 760px) {
  .cta { padding: 14px 24px 13px 25px; font-size: 10.5px; letter-spacing: 0.3em; }
  .cta__label { margin-right: -0.3em; }
}

/* Line mask reveal primitive: <span class="line"><span>text</span></span> */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: inline-block; will-change: transform; }

/* Non-English visit: translatable text waits a moment for its dictionary (i18n.js) */
.i18n-pending [data-i18n],
.i18n-pending [data-i18n-rich],
.i18n-pending [data-i18n-words] { visibility: hidden; }

@media (max-width: 760px) {
  :root { --header-h: 52px; --header-edge: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}