/* ============================================================
   BASE — reset, element defaults, nav
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
ul { list-style: none; }

html {
  font-size: 16px;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-variant-numeric: lining-nums;   /* Cormorant numerals (the Parceh fallback) default to old-style */
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.4;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--nav-height);
  z-index: 100;
  background: transparent;
  transition:
    transform 400ms var(--ease-out),
    background var(--duration-base) var(--ease-out);
}
.nav--solid  { background: #000; }

.nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: transparent;
  pointer-events: none;
  transition: background var(--duration-base) var(--ease-out);
}
.nav--solid::after     { background: var(--color-line); }
/* Over a broken-white section */
.nav--light { background: #f2eee6; }
.nav--light::after { background: rgba(28, 21, 18, 0.14); }
.nav--light .nav__inner { color: #1c1512; }
.nav--light .nav__link { color: rgba(28, 21, 18, 0.7); }
.nav--light .nav__link:hover,
.nav--light .nav__link:focus-visible { color: #1c1512; }
.nav--menu-open::after { background: #fff; }

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: var(--container-gutter);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #fff;
  transition: color var(--duration-base) var(--ease-out);
}

.nav__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  letter-spacing: 0.18em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  color: inherit;
}
.nav__mark {
  display: block;
  width: auto;
  height: 42px;
  transition: opacity var(--duration-base) var(--ease-out);
}
.nav__logo:hover .nav__mark { opacity: 0.7; }
.nav__logo:focus-visible { outline: 1px solid var(--color-brand); outline-offset: 4px; }

/* Desktop: the menu links sit in the bar, split around the logo.
   Up to 1080px they fold back into the Menu button and overlay. */
.nav__side { display: flex; align-items: center; gap: clamp(24px, 3vw, 56px); }
.nav__side--right { justify-content: flex-end; }
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.nav__link {
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 450ms var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { color: #fff; }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__link:focus-visible { outline: none; }
/* Shop Kits: the secondary button (see .btn-oct--outline), made small for the bar */
.nav__links .nav__buy {
  --cut: 10px;
  height: 36px;
  min-width: 0;
  gap: 10px;
  padding-inline: 4px;
  border-width: 10px;
  font-size: 10.5px;
}
.nav__links .nav__buy::before, .nav__links .nav__buy::after { width: 5px; height: 5px; }
.nav--light .nav__links .nav__buy {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M14.3 .5H15.7L29.5 14.3V15.7L15.7 29.5H14.3L.5 15.7V14.3Z' fill='none' stroke='%231c1512' stroke-opacity='.7'/%3E%3C/svg%3E");
  --btn-fg: #1c1512;
  --btn-bg-hover: #1c1512;
  --btn-fg-hover: #f2eee6;
}
.nav__menu-btn { display: none; }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__menu-btn { display: inline-block; }
}

.nav__menu-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: inherit;
  letter-spacing: inherit;
}

@media (max-width: 768px) {
  .nav__logo { position: static; transform: none; }
}

/* ---------- Button: cut-corner octagon ----------
   One plate for every button: 50px tall, chamfered corners, a diamond either side
   of the label. Hover keeps the shape: the fill warms (--btn-bg-hover) and the
   diamonds slide out; a press sinks it a little. Use on <a> or <button>. */
.btn-oct {
  --cut: 14px;
  --btn-bg: #fff;
  --btn-fg: var(--color-brand-ink);
  --btn-bg-hover: var(--ox-blush, #e9d6bf);
  --btn-fg-hover: var(--btn-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 15rem;
  height: 50px;
  padding: 0 30px;
  border: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: background-color 0.5s var(--ease-btn), color 0.5s var(--ease-btn), transform 0.2s var(--ease-btn);
}
/* Secondary: the same cut-corner plate, drawn as a hairline outline. The outline is a
   9-slice border image, so the chamfers keep their size (border-width sets the cut). */
.btn-oct--outline {
  padding-inline: 12px;
  border: 14px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M14.3 .5H15.7L29.5 14.3V15.7L15.7 29.5H14.3L.5 15.7V14.3Z' fill='none' stroke='%23e9d6bf' stroke-opacity='.8'/%3E%3C/svg%3E") 14;
  --btn-bg: transparent;
  --btn-fg: var(--ox-blush, #e9d6bf);
  --btn-bg-hover: var(--ox-blush, #e9d6bf);
  --btn-fg-hover: var(--ox-deep, #3e0a0e);
}

.btn-oct::before,
.btn-oct::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
  transition: transform 0.5s cubic-bezier(0.25, 0, 0.25, 1);
}
.btn-oct:hover,
.btn-oct:focus-visible { background: var(--btn-bg-hover); color: var(--btn-fg-hover); }
.btn-oct:active { transform: scale(0.97); }
.btn-oct:hover::before,
.btn-oct:focus-visible::before { transform: translateX(-4px) rotate(45deg); }
.btn-oct:hover::after,
.btn-oct:focus-visible::after  { transform: translateX(4px) rotate(45deg); }
/* clip-path hides a normal outline, so the focus ring is drawn inside */
.btn-oct:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-brand); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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