/* Bottega Bespoke design tokens. Source: docs/Bottega-Linea-Grafica-v4.pdf p24.
   Rules: oro never a background, max ~5% of a composition, never over a light photo.
   Vino max ~3%, never in the same composition as oro. Backgrounds stay negro/blanco. */
:root {
  --negro: #0b0b0c;
  --blanco: #ffffff;
  --oro: #c7a776;
  --vino: #5a1b2b; /* proposed detail color, pending Marco. Swap here if he picks verde/azul. */

  --font-logo: "Playfair Display", serif;   /* logo only, never headlines */
  --font-headline: "Prata", serif;
  --font-body: "Poppins", sans-serif;
  --font-script: "Italianno", cursive;      /* still open: Italianno / Parisienne / Pinyon Script */

  --tracking-logo: 0.2em; /* fixed, never removed */
  --tracking-caps: 0.3em;

  --text-body: clamp(0.92rem, 0.85rem + 0.35vw, 1.05rem);
  --text-headline: clamp(1.9rem, 1.2rem + 3.4vw, 4.2rem);
  --text-display: clamp(2.6rem, 1.6rem + 5.5vw, 6rem);
  --space-section: clamp(5rem, 4rem + 6vw, 11rem);

  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Native smooth scrolling stays off while Lenis drives the page. Chrome applies
   scroll-behavior to every one of Lenis's per-frame scrollTo writes, stacking a
   second animation on each frame, and the wheel goes dead. main.js adds
   .native-scroll only on the paths where Lenis is not running. */
html.native-scroll { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html.native-scroll { scroll-behavior: auto; }
}

body {
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden propagates to the viewport and turns the initial
     containing block into a scroll container, which Chrome then fights with. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--oro);
  color: var(--negro);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s var(--ease-lux);
}

.skip-link:focus-visible { top: 1rem; }

/* ---------- grain: one static tile, negro sections only ---------- */

.grained { position: relative; }

.grained::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/grain.png") repeat;
  /* The tile used to be a 16-bit grey+alpha PNG whose alpha channel was a flat
     0.22 on every pixel: 164kB of file for one constant. It is now an opaque
     8-bit grey tile at 42kB, and the alpha it used to carry is folded into this
     number (0.22 x 0.22). The composite is identical, the page is 122kB lighter. */
  opacity: 0.0484;
  pointer-events: none;
  z-index: 3;
}

/* ---------- type ---------- */

.logo {
  font-family: var(--font-logo);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-logo);
  color: var(--oro);
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  line-height: 1.4; /* wraps to the deck's two-line BOTTEGA / BESPOKE lockup on narrow screens */
  max-width: 100%;
}

.logo span { display: inline-block; } /* entrance letter reveal; tracking untouched */

.headline {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: var(--text-headline);
  line-height: 1.22;
}

.headline--display {
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.body-copy {
  margin-top: 1.5rem;
  max-width: 30rem;
  font-size: var(--text-body);
  line-height: 1.85;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

.kicker {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--oro);
  margin-bottom: 1.6rem;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.kicker__num { font-size: 0.62rem; opacity: 0.75; }

.script {
  font-family: var(--font-script);
  color: var(--oro);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1;
}

.script--plain { color: var(--blanco); } /* visit section stays free of oro so vino can live there */

.rule {
  border: none;
  border-top: 1px solid var(--oro);
  width: 4rem;
  margin: 2.2rem auto;
}

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--negro) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease-lux);
}

.site-header.is-visible { transform: translateY(0); }

.site-header__brand {
  font-family: var(--font-logo);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-logo);
  color: var(--oro);
  text-decoration: none;
  font-size: 0.82rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.site-header.has-brand .site-header__brand { opacity: 1; }

.site-header__right {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

.site-header__cta {
  color: var(--blanco);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.66rem;
  position: relative;
  padding-bottom: 0.3rem;
}

.site-header__menu {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.66rem;
  padding-bottom: 0.3rem;
  overflow: hidden;
  display: grid;
}

.site-header__menu-label {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-lux);
}

.site-header__menu-label--close { opacity: 0; transform: translateY(8px); }

.site-header__menu[aria-expanded="true"] .site-header__menu-label--open { opacity: 0; transform: translateY(-8px); }
.site-header__menu[aria-expanded="true"] .site-header__menu-label--close { opacity: 1; transform: translateY(0); }

/* drawn underline for header links + menu trigger */
.site-header__cta::after,
.site-header__menu::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.75rem;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--blanco) 55%, transparent);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.35s var(--ease-lux);
}

@media (hover: hover) and (pointer: fine) {
  .site-header__cta:hover::after,
  .site-header__cta:focus-visible::after,
  .site-header__menu:hover::after,
  .site-header__menu:focus-visible::after { transform: scaleX(1); }
}

/* ---------- touch targets ----------
   These controls are set in small caps, so their boxes came out 16-20px tall:
   under the 24px minimum, and a genuine miss on a phone. Each one grows by
   padding and gives the growth straight back as negative margin, so the hit
   area gets bigger and the layout, the type and the underline do not move. */

.site-header__cta,
.site-header__menu {
  padding-block: 0.75rem 1.05rem;
  margin-block: -0.75rem;
}

.site-footer__links a,
.site-footer__contact a {
  display: inline-block;
  padding-block: 0.35rem;
  margin-block: -0.35rem;
}

.quotes__dot { margin-block: -0.375rem; }  /* see the height below */

/* ---------- overlay menu ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  height: 100dvh;
  background: var(--negro);
  border-bottom: 1px solid var(--oro);
  transform: translateY(-100%);
  visibility: hidden;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 3rem;
  padding: clamp(5rem, 14svh, 8rem) clamp(1.5rem, 6vw, 6rem) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu {
  transition: transform 0.55s var(--ease-lux), visibility 0s linear 0.55s;
}

.menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.65s var(--ease-lux);
}

.no-motion .menu { transition: none; }
.no-motion .menu .menu__link, .no-motion .menu .menu__rail { opacity: 1 !important; transform: none !important; }

@media (min-width: 900px) {
  .menu {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
  }
}

.menu__list { list-style: none; }

.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  text-decoration: none;
  color: var(--blanco);
  font-family: var(--font-headline);
  font-size: min(3.4rem, 7.5svh);
  line-height: 1.15;
  padding: 0.25rem 0;
  position: relative;
  transition: transform 0.35s var(--ease-lux), opacity 0.3s ease;
}

@media (max-width: 899px) {
  .menu__link { font-size: min(2.2rem, 6.5svh); }
}

.menu__num {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-caps);
  color: var(--oro);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.menu__arrow { font-size: 1.1rem; margin-left: 0.6rem; color: color-mix(in srgb, var(--blanco) 55%, transparent); }

@media (hover: hover) and (pointer: fine) {
  .menu__list:hover .menu__link:not(:hover) { opacity: 0.35; }
  .menu__link:hover { transform: translateX(0.4rem); }
  .menu__link:hover .menu__num { opacity: 1; }
}

.menu__link:focus-visible { outline: 1px solid color-mix(in srgb, var(--blanco) 60%, transparent); outline-offset: 4px; }

.menu__rail {
  display: grid;
  gap: 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 2;
  color: color-mix(in srgb, var(--blanco) 55%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--blanco) 14%, transparent);
  padding-top: 2rem;
}

@media (min-width: 900px) {
  .menu__rail { border-top: none; padding-top: 0; }
}

.menu__rail a {
  color: color-mix(in srgb, var(--blanco) 80%, transparent);
  text-decoration: none;
}

.menu__rail a:hover, .menu__rail a:focus-visible { color: var(--blanco); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* negro veil so the gold lockup never sits on a light frame (deck rule 2) */
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--negro) 55%, transparent) 0%, color-mix(in srgb, var(--negro) 78%, transparent) 70%, color-mix(in srgb, var(--negro) 90%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--negro) 65%, transparent), transparent 30%, transparent 70%, color-mix(in srgb, var(--negro) 80%, transparent));
}

.hero__inner { position: relative; z-index: 4; }

.hero__kicker {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--blanco) 55%, transparent);
}

.hero .rule { margin: 1.8rem auto; }

.hero .script { margin-top: 1.4rem; }

.hero__line {
  margin-top: 2.2rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.7rem;
  color: var(--blanco);
}

.hero__scrollcue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.55rem;
  color: color-mix(in srgb, var(--blanco) 45%, transparent);
  z-index: 4;
}

.hero__scrollline {
  display: block;
  width: 1px;
  height: 3rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--oro) 25%, transparent);
}

.hero__scrollseg {
  display: block;
  width: 1px;
  height: 1rem;
  background: var(--oro);
}

/* ---------- morph ---------- */

.morph { position: relative; }

.morph__pin {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 8vh, 6rem) 1.25rem;
}

.morph__stage {
  position: relative;
  width: min(66vh, 88vw, 34rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* desktop: the morph becomes a wide cinematic band */
@media (min-width: 900px) {
  .morph__stage {
    width: min(80vw, 66rem);
    aspect-ratio: 16 / 10;
    max-height: 72vh;
  }
  /* same room, same camera, same light, and the sign lands on the same pixels:
     one crop serves both, so the only thing the wipe changes is the form and
     what it wears, a man's build and suit becoming a woman's */
  .morph__img { object-position: center top; }
}

.morph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.morph__img--him { position: absolute; }

.morph__reveal {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.morph__img--her { opacity: 0; will-change: opacity; }

.morph__seam {
  /* Gold as a thin travelling line: linea fina, never a background. The band
     around the hairline is not decoration. The two forms are a man's and a
     woman's, so their silhouettes genuinely differ, and the cut edge would
     otherwise show a hard step where the shoulders and the head do not line up.
     The light passing over the seam covers that step while it crosses. */
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  margin-left: -2rem;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--oro) 16%, transparent) 42%,
    var(--oro) 50%,
    var(--oro) calc(50% + 1px),
    color-mix(in srgb, var(--oro) 16%, transparent) 58%,
    transparent 100%
  );
  opacity: 0;
  will-change: transform, opacity;
}

.morph__caption {
  position: absolute;
  bottom: 1.2rem;
  z-index: 4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--blanco) 85%, transparent);
  text-shadow: 0 1px 14px color-mix(in srgb, var(--negro) 85%, transparent);
}

.morph__caption--him { left: 1.4rem; }
.morph__caption--her { right: 1.4rem; opacity: 0; }

.morph__close {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 1.25rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.morph__close .body-copy { margin-inline: auto; }

/* static fallback when motion is reduced or JS is absent */
.no-motion .morph__pin { min-height: 0; }
.no-motion .morph__reveal { position: relative; clip-path: none; }
.no-motion .morph__img--her { opacity: 1; position: relative; }
.no-motion .morph__img--her-bw { display: none; }
.no-motion .morph__stage {
  width: min(92vw, 44rem);
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  overflow: visible;
}
.no-motion .morph__img--him { position: relative; height: auto; }
.no-motion .morph__seam { display: none; }
.no-motion .morph__caption { position: static; opacity: 1; margin-top: 1rem; }
.no-motion .morph__close { position: static; opacity: 1; margin-top: 2.5rem; pointer-events: auto; }

/* ---------- range (light panel) ---------- */

.panel--light {
  background: var(--blanco);
  color: var(--negro);
}

/* oro on white: deepen toward negro for contrast */
.panel--light .kicker { color: color-mix(in srgb, var(--oro) 62%, var(--negro)); }

.range { padding: var(--space-section) clamp(1.25rem, 6vw, 6rem); }

.range__head { max-width: 44rem; }

.range__grid {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

.tile { grid-column: span 12; overflow: hidden; }

.tile img {
  width: 100%;
  transition: transform 0.8s var(--ease-lux);
}

.tile figcaption {
  margin-top: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--negro) 62%, transparent);
  transition: color 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover img { transform: scale(1.04); }
  .tile:hover figcaption { color: var(--negro); }
}

/* organized editorial grid: one aligned row of three portraits,
   then a square and a wide band sharing a baseline */
@media (min-width: 720px) {
  .tile--tall   { grid-column: 1 / span 4; }
  .tile--mid    { grid-column: 5 / span 4; }
  .tile--offset { grid-column: 9 / span 4; }
  .tile--small  { grid-column: 1 / span 4; margin-top: 3rem; }
  .tile--wide   { grid-column: 5 / span 8; margin-top: 3rem; }
  .tile img { width: 100%; height: auto; }
  .tile--tall img, .tile--mid img, .tile--offset img { aspect-ratio: 3 / 4; object-fit: cover; }
  .tile--small img { aspect-ratio: 1 / 1; object-fit: cover; }
  .tile--wide img { aspect-ratio: 2.07 / 1; object-fit: cover; } /* matches the square tile's rendered height across the 12-col gap */
}

/* ---------- story ---------- */

.story {
  padding: var(--space-section) clamp(1.25rem, 6vw, 6rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

@media (min-width: 900px) {
  .story { grid-template-columns: 1fr 0.85fr; }
  .story__figure { max-width: 30rem; justify-self: end; }
}

.story__figure img { width: 100%; }

.founders {
  list-style: none;
  margin-top: 2.6rem;
  display: grid;
  gap: 1.8rem;
}

.founders__item {
  border-top: 1px solid color-mix(in srgb, var(--blanco) 14%, transparent);
  padding-top: 1.4rem;
  display: grid;
  grid-template-columns: 5rem 1fr;
  column-gap: 1.4rem;
}

.founders__name {
  font-family: var(--font-headline);
  color: var(--oro);
  font-size: 1.05rem;
}

.founders__text {
  font-size: 0.88rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--blanco) 72%, transparent);
}

.story__copy > .body-copy:last-child { margin-top: 2.6rem; }

/* ---------- mission ---------- */

.mission {
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-section) clamp(1.25rem, 8vw, 10rem);
}

.mission .headline--display { max-width: 18ch; }

.mission__body {
  margin-top: 2.6rem;
  max-width: 34rem;
  font-size: var(--text-body);
  line-height: 1.9;
  color: color-mix(in srgb, var(--blanco) 80%, transparent);
}

.mission__line { display: block; }

/* ---------- experience ---------- */

.experience {
  padding: var(--space-section) clamp(1.25rem, 6vw, 6rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

@media (min-width: 900px) {
  .experience { grid-template-columns: 1.1fr 0.9fr; }
}

.steps {
  list-style: none;
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}

.steps__item {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--blanco) 14%, transparent);
  padding-top: 1.4rem;
}

.steps__num {
  grid-row: 1 / span 2;
  font-family: var(--font-headline);
  color: var(--oro);
  font-size: 1.4rem;
}

.steps__title {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.05rem;
}

.steps__text {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--blanco) 68%, transparent);
}

.experience__figure img { width: 100%; }

/* ---------- on your terms ---------- */

.terms {
  padding: var(--space-section) clamp(1.25rem, 6vw, 6rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

@media (min-width: 900px) {
  .terms { grid-template-columns: 1.1fr 0.9fr; }
}

.terms__list {
  list-style: none;
  margin-top: 2.4rem;
  display: grid;
}

.terms__item {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--blanco) 14%, transparent);
  padding: 1.3rem 0;
  opacity: 0.55;
  transition: opacity 0.35s ease;
}

.terms__item.is-active { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .terms__item:hover { opacity: 1; }
}

.terms__item:focus-visible {
  opacity: 1;
  outline: 1px solid color-mix(in srgb, var(--blanco) 60%, transparent);
  outline-offset: 4px;
}

.terms__num {
  grid-row: 1 / span 2;
  font-family: var(--font-headline);
  color: var(--oro);
  font-size: 1.4rem;
}

.terms__name {
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  line-height: 1.2;
  position: relative;
  justify-self: start;
}

.terms__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 100%;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-lux);
}

.terms__item.is-active .terms__name::after { transform: scaleX(1); }

.terms__desc {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--blanco) 68%, transparent);
}

.terms__plate {
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 3 / 4;
  border: 1px solid color-mix(in srgb, var(--blanco) 14%, transparent);
  justify-self: center;
}

@media (min-width: 900px) { .terms__plate { justify-self: end; } }

.terms__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s var(--ease-lux), transform 0.5s var(--ease-lux);
}

.terms__img.is-active { opacity: 1; transform: scale(1); }

.terms__caption {
  position: absolute;
  left: 0;
  bottom: -2.2rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--blanco) 55%, transparent);
}

/* ---------- fabrics ---------- */

.fabrics {
  padding: var(--space-section) clamp(1.25rem, 6vw, 6rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

@media (min-width: 900px) {
  .fabrics { grid-template-columns: 1.1fr 0.9fr; }
  .fabrics__figure { max-width: 28rem; justify-self: end; }
}

.fabrics__mills {
  list-style: none;
  margin-top: 2.4rem;
  max-width: 26rem;
}

.fabrics__mills li {
  font-family: var(--font-headline);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.7rem);
  line-height: 1.3;
  padding: 0.85rem 0;
  border-top: 1px solid color-mix(in srgb, var(--negro) 14%, transparent);
}

.fabrics__mills li:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--negro) 14%, transparent);
}

.fabrics__figure img { width: 100%; }

/* ---------- craft interlude ---------- */

.interlude {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: end center;
  text-align: center;
  min-height: 84svh;
  padding: var(--space-section) 1.25rem clamp(3rem, 8vh, 5rem);
}

.interlude__figure {
  position: absolute;
  inset: 0;
}

.interlude__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.32;
  will-change: transform;
}

.interlude__quote { position: relative; max-width: 48rem; }

.interlude__quote .script { margin-bottom: 1.4rem; }

.interlude__quote .body-copy { margin-inline: auto; max-width: 36rem; }

/* ---------- lifestyle strip ---------- */

.lifestyle {
  padding: var(--space-section) 0;
  overflow: hidden;
}

.lifestyle__head {
  padding: 0 clamp(1.25rem, 6vw, 6rem);
  max-width: 62rem;
}

.lifestyle__head .headline { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem); }

.strip { margin-top: clamp(2rem, 4vw, 3.4rem); }

.strip__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 clamp(1.25rem, 6vw, 6rem);
}

/* mobile + no-motion: native swipe with snap */
.strip--snap .strip__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.strip--snap .strip__track::-webkit-scrollbar { display: none; }

.strip--snap .panel { scroll-snap-align: center; }

.panel {
  flex: 0 0 auto;
  overflow: hidden;
}

.panel img { transition: transform 0.8s var(--ease-lux); }

@media (hover: hover) and (pointer: fine) {
  .panel:hover img { transform: scale(1.04); }
}

.panel--tall img { height: min(48vh, 27rem); width: auto; }
.panel--wide img { height: min(36vh, 20rem); width: auto; }
.panel--plate img { height: min(30vh, 17rem); width: auto; border: 1px solid color-mix(in srgb, var(--blanco) 14%, transparent); }

/* pinned mode: compact vertical rhythm so head, panels and progress share one viewport */
.lifestyle.is-pinned { padding: clamp(2.5rem, 5vh, 4rem) 0; }

@media (max-width: 899px) {
  .panel--tall img, .panel--wide img { height: auto; width: 78vw; }
  .panel--plate img { height: auto; width: 60vw; }
}

.panel figcaption {
  margin-top: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--blanco) 55%, transparent);
}

.panel--end {
  display: grid;
  place-items: center;
  text-align: center;
  min-width: min(70vw, 34rem);
}

.panel--end .rule { margin: 0 auto 2rem; }

.panel__endline {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem);
  line-height: 1.3;
}

.strip__progress {
  display: none;
  align-items: center;
  gap: 1.4rem;
  padding: 2.4rem clamp(1.25rem, 6vw, 6rem) 0;
}

.strip--pinned ~ .strip__progress,
.lifestyle.is-pinned .strip__progress { display: flex; }

.strip__count {
  font-size: 0.62rem;
  letter-spacing: var(--tracking-caps);
  color: var(--oro);
  min-width: 4.5rem;
}

.strip__bar {
  display: block;
  width: min(30vw, 16rem);
  height: 1px;
  background: color-mix(in srgb, var(--blanco) 14%, transparent);
}

.strip__barfill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- quotes ---------- */

.quotes {
  padding: var(--space-section) clamp(1.25rem, 6vw, 6rem);
  display: grid;
  justify-items: center;
  text-align: center;
}

.quotes__headline { max-width: 24ch; }

.quotes__list {
  list-style: none;
  max-width: 40rem;
  display: grid;
  gap: 2.6rem;
  margin-top: 2.6rem;
  position: relative;
  width: 100%;
}

/* rotating mode (JS applies) */
.quotes__list.is-rotating { display: block; }

.quotes__list.is-rotating .quotes__item {
  position: absolute;
  inset: 0;
  border-top: none;
  padding-top: 0;
  opacity: 0;
  display: grid;
  align-content: center;
}

.quotes__list.is-rotating .quotes__item.is-current { opacity: 1; }

.quotes__item {
  border-top: 1px solid color-mix(in srgb, var(--blanco) 12%, transparent);
  padding-top: 2.4rem;
}

.quotes__text {
  font-size: 1rem;
  line-height: 1.95;
  color: color-mix(in srgb, var(--blanco) 82%, transparent);
}

.quotes__name {
  margin-top: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.6rem;
  color: var(--oro);
}

.quotes__dots {
  display: flex;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

.quotes__dot {
  width: 1.5rem;
  height: 1.75rem;   /* 28px of touch target; the gold rule stays centred in it */
  position: relative;
}

.quotes__dot::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--oro);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.quotes__dot.is-current::after, .quotes__dot:hover::after, .quotes__dot:focus-visible::after { opacity: 1; }

/* ---------- journal ---------- */

.journal {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 6vw, 6rem);
  border-top: 1px solid color-mix(in srgb, var(--blanco) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--blanco) 10%, transparent);
  display: grid;
  gap: 1rem;
}

.journal .kicker { margin-bottom: 0; }

.journal__link {
  color: var(--blanco);
  text-decoration: none;
  font-family: var(--font-headline);
  font-size: clamp(1.2rem, 0.9rem + 1.6vw, 2rem);
  line-height: 1.35;
  max-width: 34ch;
  position: relative;
  justify-self: start;
}

.journal__arrow { font-size: 0.9em; margin-left: 0.5rem; color: color-mix(in srgb, var(--blanco) 55%, transparent); }

.journal__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--blanco) 40%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-lux);
}

@media (hover: hover) and (pointer: fine) {
  .journal__link:hover::after, .journal__link:focus-visible::after { transform: scaleX(1); }
}

/* ---------- visit (vino lives here; no oro in this composition) ---------- */

.visit {
  min-height: 92svh;
  display: grid;
  gap: clamp(3rem, 6vw, 6rem);
  align-content: center;
  padding: var(--space-section) clamp(1.25rem, 6vw, 6rem);
}

@media (min-width: 900px) {
  .visit { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}

.visit__address {
  font-style: normal;
  margin-top: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  line-height: 2.1;
}

.visit__address a {
  color: color-mix(in srgb, var(--blanco) 70%, transparent);
  text-decoration: none;
  transition: color 0.3s ease;
}

.visit__address a:hover, .visit__address a:focus-visible { color: var(--blanco); }

.visit__hours {
  margin-top: 1.2rem;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--blanco) 60%, transparent);
}

.visit__contact {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
  color: color-mix(in srgb, var(--blanco) 45%, transparent);
}

.visit__contact a {
  color: color-mix(in srgb, var(--blanco) 80%, transparent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blanco) 25%, transparent);
  padding-bottom: 0.15rem;
  transition: border-color 0.3s ease;
}

.visit__contact a:hover,
.visit__contact a:focus-visible { border-color: var(--blanco); }

.cta {
  display: inline-block;
  margin-top: 3rem;
  padding: 1rem 2.6rem;
  background: var(--vino);
  color: var(--blanco);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  transition: background 0.3s ease;
  will-change: transform;
}

.cta:hover,
.cta:focus-visible {
  background: color-mix(in srgb, var(--vino) 84%, var(--blanco));
}

/* form */

.visit__form { max-width: 26rem; }

.visit__form-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--blanco) 55%, transparent);
  margin-bottom: 2rem;
}

.field { margin-bottom: 2.2rem; position: relative; }

.field__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--blanco) 60%, transparent);
  margin-bottom: 0.7rem;
  transition: color 0.3s ease;
}

.field:focus-within .field__label { color: var(--blanco); }

.field__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blanco) 25%, transparent);
  color: var(--blanco);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  border-radius: 0;
}

.field__input:focus { outline: none; }

.field__input--select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, color-mix(in srgb, var(--blanco) 60%, transparent) 50%),
                    linear-gradient(-45deg, transparent 49%, color-mix(in srgb, var(--blanco) 60%, transparent) 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.field__input--select option { background: var(--negro); }

textarea.field__input { resize: none; }

/* drawn focus rule */
.field::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--blanco);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-lux);
}

.field:focus-within::after { transform: scaleX(1); }

.field.has-error::after { transform: scaleX(1); }

.field__error {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--blanco) 85%, transparent);
}

/* ---- SMS consent ----
   Carrier registration (A2P 10DLC) will not approve appointment texting unless
   the consent is collected at the point the number is given, unchecked, and
   optional. So this is a real checkbox with the full disclosure next to it, not
   a line of fine print under the button. Styled as a rule of text rather than a
   form control, because it sits at the end of a page that has no chrome. */
.field--check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.05rem 0.85rem;
  align-items: start;
  margin-bottom: 2rem;
}
.field--check::after { display: none; }

.field__check {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0.2rem 0 0;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--blanco) 35%, transparent);
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.field__check:hover { border-color: color-mix(in srgb, var(--oro) 80%, transparent); }
.field__check:checked {
  border-color: var(--oro);
  /* A drawn stroke rather than a glyph: the tick has to be a thin gold line,
     not a filled block, or it reads as a casino sign at 15 pixels. Two CSS
     gradients cross into an X here, so it is an SVG path. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.7 9 10 3.2' fill='none' stroke='%23C7A776' stroke-width='1.3' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size: 74% 74%;
  background-position: center;
  background-repeat: no-repeat;
}
.field__check:focus-visible { outline: 1px solid var(--oro); outline-offset: 3px; }

.field__check-label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--blanco) 78%, transparent);
  cursor: pointer;
  margin: 0;
}
.field__fine {
  grid-column: 2;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.68rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--blanco) 45%, transparent);
  margin: 0.6rem 0 0;
}
.field__fine a {
  color: color-mix(in srgb, var(--oro) 90%, transparent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--oro) 35%, transparent);
}
.field__fine a:hover { border-bottom-color: var(--oro); }

.visit__send {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  color: var(--blanco);
  padding-bottom: 0.35rem;
  position: relative;
}

.visit__send::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--blanco) 55%, transparent);
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform 0.35s var(--ease-lux);
}

.visit__send:hover::after, .visit__send:focus-visible::after { transform: scaleX(1); }

.visit__success {
  font-size: 0.9rem;
  line-height: 1.9;
  color: color-mix(in srgb, var(--blanco) 85%, transparent);
}

.visit__success a { color: var(--blanco); }

/* ---------- footer ---------- */

.site-footer {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 6vw, 6rem) 2.4rem;
  border-top: 1px solid color-mix(in srgb, var(--blanco) 10%, transparent);
}

.site-footer__grid {
  display: grid;
  gap: 2.6rem;
}

@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.2fr 1fr 1.2fr; }
}

.site-footer__lockup {
  font-family: var(--font-logo);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-logo);
  color: var(--oro);
  font-size: 0.82rem;
}

.site-footer__tag {
  margin-top: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 0.6rem;
  color: color-mix(in srgb, var(--blanco) 42%, transparent);
}

.site-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 2rem;
  align-content: start;
}

.site-footer__links a,
.site-footer__contact a {
  color: color-mix(in srgb, var(--blanco) 60%, transparent);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.9;
  transition: color 0.3s ease;
}

.site-footer__links a:hover, .site-footer__links a:focus-visible,
.site-footer__contact a:hover, .site-footer__contact a:focus-visible { color: var(--blanco); }

.site-footer__contact { display: grid; gap: 0.5rem; align-content: start; }

.site-footer__legal {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--blanco) 42%, transparent);
}

/* Privacy and Terms live on this line. They are required to be reachable from
   every page (carrier registration checks for it), so they sit in the copyright
   rule rather than in the quick links, where they would compete with the work. */
.site-footer__legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blanco) 20%, transparent);
  padding-bottom: 0.15rem;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--oro); border-bottom-color: var(--oro); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__menu-label, .menu__link, .tile img, .panel img,
  .terms__img, .terms__name::after, .field::after, .visit__send::after,
  .journal__link::after, .site-header__cta::after, .site-header__menu::after {
    transition: none !important;
  }
}

.no-motion .hero__scrollseg { display: none; }

/* ---------------------------------------------------- contact form, sending */

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visit__failure {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #e0a0a0;
  margin: 0.9rem 0 0;
}

.visit__send[disabled] { opacity: 0.5; cursor: progress; }

/* The journal band now carries the two most recent entries plus a way in. */
.journal__all {
  justify-self: start;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--oro);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.3rem;
  margin-top: 0.4rem;
  transition: border-color 380ms var(--ease-lux);
}
.journal__all:hover,
.journal__all:focus-visible { border-bottom-color: var(--oro); }