/* ==========================================================================
   Lux Barber Studio — ddna design system, adapted
   "warm museum vitrine on raw linen"
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Colors — the five warm neutrals. No accent color exists in this system. */
  --color-stone-charcoal: #444242;
  --color-linen-cream:    #efe3dc;
  --color-warm-sand:      #dacabf;
  --color-dust:           #938a83;
  --color-mortar:         #595552;

  /* Surfaces */
  --surface-canvas: var(--color-warm-sand);
  --surface-raised: var(--color-linen-cream);
  --surface-invert: var(--color-stone-charcoal);

  /* Type families */
  --font-basis:   'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-favorit: 'Familjen Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (design system) */
  --text-caption:  10px;  --leading-caption:  1;    --tracking-caption:  0.099em;
  --text-body-sm:  14px;  --leading-body-sm:  1.5;  --tracking-body-sm:  0.066em;
  --text-body-lg:  17px;  --leading-body-lg:  1.5;  --tracking-body-lg:  0.066em;
  --text-heading:  30px;  --leading-heading:  1.3;

  /* ADAPTATION — one added token. The ddna hero carries scale through a 3D orb
     composition; Lux has no such artifact, so the wordmark must carry it.
     Weight stays 400, tracking discipline unchanged. Nothing else was added. */
  --text-display: clamp(4.25rem, 21vw, 15rem);

  /* Spacing */
  --spacing-20: 20px;
  --spacing-25: 25px;
  --spacing-33: 33px;
  --spacing-45: 45px;
  --spacing-50: 50px;
  --spacing-100: 100px;
  --spacing-135: 135px;

  /* Layout */
  --section-gap: clamp(64px, 11vw, 100px);
  --gutter:      clamp(24px, 5vw, 50px);
  --rail-gap:    var(--spacing-25);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset -------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-stone-charcoal);
  font-family: var(--font-basis);
  font-weight: 400;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, p, figure, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--color-stone-charcoal);
  outline-offset: 4px;
}

::selection { background: var(--color-stone-charcoal); color: var(--color-linen-cream); }

/* Raw-linen grain. Tonal only — no blur, no shadow, no elevation. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* --- Type utilities ----------------------------------------------------- */

.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.display {
  font-family: var(--font-favorit);
  font-weight: 400;
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: 0;
}

.statement {
  font-family: var(--font-favorit);
  font-weight: 400;
  font-size: clamp(20px, 3.4vw, var(--text-heading));
  line-height: 2;
  letter-spacing: 0;
}

.lede {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
  color: var(--color-mortar);
}

.muted { color: var(--color-mortar); }

/* --- Text link with arrow — the only affordance in this system ---------- */

.link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-stone-charcoal);
  padding-bottom: 3px;
  transition: color 0.35s var(--ease);
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.link:hover::after,
.link:focus-visible::after { transform: scaleX(1); }

.link .arrow {
  display: inline-block;
  transition: transform 0.45s var(--ease);
}
.link:hover .arrow { transform: translateX(4px); }
.link--down:hover .arrow { transform: translateY(4px); }

.link--lg {
  font-family: var(--font-favorit);
  font-size: clamp(26px, 6vw, 46px);
  line-height: 1.3;
  letter-spacing: 0;
  gap: 0.4em;
  padding-bottom: 6px;
}

/* --- Navigation --------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-25);
  padding: var(--spacing-25) var(--gutter);
  background: transparent;
  transition: background-color 0.4s var(--ease), padding 0.4s var(--ease);
}
.nav.is-stuck {
  background: var(--surface-canvas);
  padding-top: 16px;
  padding-bottom: 16px;
}

/* While the nav floats over the inverted hero it inverts too. */
.nav--over-hero { color: var(--color-linen-cream); }
.nav--over-hero .link { color: var(--color-linen-cream); }
.nav--over-hero .nav__lang button { color: rgba(239, 227, 220, 0.62); }
.nav--over-hero .nav__lang button[aria-pressed="true"] { color: var(--color-linen-cream); }
.nav--over-hero:focus-within :focus-visible,
.nav--over-hero :focus-visible { outline-color: var(--color-linen-cream); }

.nav__mark {
  font-family: var(--font-favorit);
  font-size: 22px;
  letter-spacing: 0.24em;
  line-height: 1;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 33px);
}
.nav__menu a { position: relative; padding-bottom: 2px; }
.nav__menu a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__menu a:hover::after,
.nav__menu a:focus-visible::after { transform: scaleX(1); }

.nav__lang {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-mortar);
}
.nav__lang button {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 1px;
  font: inherit;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-mortar);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.nav__lang button[aria-pressed="true"] { color: var(--color-stone-charcoal); }
.nav__lang span { font-size: var(--text-caption); }

/* The three section links live in the flex row via display:contents, and
   collapse out of it entirely on narrow screens so the nav never overflows. */
.nav__links { display: contents; }

@media (max-width: 780px) {
  .nav__links { display: none; }
}

/* --- Hero --------------------------------------------------------------- */

/* The hero is the page's single contrast moment: Stone Charcoal, the inverted
   step of the surface stack. Every other band sits on Warm Sand. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--spacing-100) + 24px) var(--gutter) var(--spacing-45);
  overflow: hidden;
  background: #282422;
  color: var(--color-linen-cream);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(1.07);
  opacity: 0;
  animation: heroSettle 2600ms var(--ease) 120ms forwards;
}
/* Tonal veil. A gradient, not a blur — the lamp in the photograph supplies
   the only light behind the wordmark. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(40, 36, 34, 0.78) 0%,
    rgba(40, 36, 34, 0.46) 34%,
    rgba(40, 36, 34, 0.42) 64%,
    rgba(40, 36, 34, 0.88) 100%
  );
}

@keyframes heroSettle {
  from { transform: scale(1.07); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.hero__inner {
  position: relative;
  z-index: 1;
  align-self: center;
  text-align: center;
}

.hero__eyebrow {
  color: var(--color-warm-sand);
  max-width: 34rem;
  margin-inline: auto;
  line-height: 1.8;
  margin-bottom: var(--spacing-33);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 400ms forwards;
}

/* SIGNATURE — lux is light.
   The wordmark performs its own name: each letter warms out of the dark
   ground, through Dust, into Linen Cream, one after the other. Tonal only —
   no glow, no shadow, nothing the system forbids. */
.wordmark {
  font-family: var(--font-favorit);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: 0.9;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  display: flex;
  justify-content: center;
  margin: 0;
}
.wordmark span {
  display: inline-block;
  color: #4a4441;
  animation: illuminate 1500ms var(--ease) forwards;
}
.wordmark span:nth-child(1) { animation-delay: 620ms; }
.wordmark span:nth-child(2) { animation-delay: 900ms; }
.wordmark span:nth-child(3) { animation-delay: 1180ms; }

@keyframes illuminate {
  0%   { color: #4a4441; }
  40%  { color: var(--color-dust); }
  100% { color: var(--color-linen-cream); }
}

.hero__tagline {
  margin-top: var(--spacing-25);
  color: var(--color-warm-sand);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1500ms forwards;
}

.hero__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-20);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1800ms forwards;
}
.hero__foot .link { color: var(--color-linen-cream); }
.hero__hours { color: var(--color-warm-sand); text-align: right; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Section rhythm ----------------------------------------------------- */

.band {
  padding: var(--section-gap) var(--gutter);
}
.band--flush { padding-left: 0; padding-right: 0; }

.band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-25);
  margin-bottom: var(--spacing-45);
}
.band--flush .band__head { padding: 0 var(--gutter); }
.band__head .caption { color: var(--color-mortar); }

.statement-band {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.statement-band .lede { margin-top: var(--spacing-33); }

/* --- Services — the vitrine -------------------------------------------- */

.vitrine { display: grid; gap: var(--section-gap); }

.specimen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 60px);
}
.specimen__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.specimen__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Image Label — flat chip, top-left, 10px / 0.099em, 0 radius.
   ADAPTATION: the ddna label is Linen Cream because it sits on jewelry shot
   against dark material. Lux photography is graded with a cream highlight end,
   where a cream chip disappears — so the label takes the system's own inverted
   surface instead. Same component, readable on every frame. */
.chip {
  position: absolute;
  top: 0; left: 0;
  background: var(--surface-invert);
  color: var(--color-linen-cream);
  padding: 14px var(--spacing-25);
  z-index: 1;
}

.specimen__body {
  max-width: 30rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.specimen__price {
  font-family: var(--font-favorit);
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.2;
  display: block;
}
.specimen__note {
  margin-top: var(--spacing-20);
  max-width: 40ch;
  color: var(--color-mortar);
}
.specimen__meta {
  margin-top: var(--spacing-25);
  color: var(--color-mortar);
}

/* Odd specimens bleed to the left edge, even ones to the right. Both children
   are pinned to row 1 — without it, an explicit grid-column on the second
   child pushes it onto a new row. */
.specimen > * { grid-row: 1; }
.specimen:nth-child(odd)  .specimen__figure { grid-column: 1; }
.specimen:nth-child(odd)  .specimen__body   { grid-column: 2; }
.specimen:nth-child(even) .specimen__figure { grid-column: 2; }
.specimen:nth-child(even) .specimen__body   { grid-column: 1; }
.specimen:nth-child(even) .chip { left: auto; right: 0; }

.services-note {
  margin-top: var(--section-gap);
  padding: 0 var(--gutter);
  max-width: 58ch;
}

@media (max-width: 860px) {
  .specimen { grid-template-columns: 1fr; gap: var(--spacing-25); }
  .specimen__figure { aspect-ratio: 3 / 2; }
  .specimen:nth-child(odd)  .specimen__figure,
  .specimen:nth-child(even) .specimen__figure { grid-column: 1; grid-row: 1; }
  .specimen:nth-child(odd)  .specimen__body,
  .specimen:nth-child(even) .specimen__body { grid-column: 1; grid-row: 2; margin-inline: 0; }
  .specimen:nth-child(even) .chip { right: auto; left: 0; }
}

/* --- The work — horizontal vitrine rail -------------------------------- */

.rail {
  display: flex;
  gap: var(--rail-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Without matching scroll-padding, snap aligns item 1 to the padding edge
     and the rail opens already scrolled by one gutter. */
  scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter) var(--spacing-20);
  scrollbar-width: thin;
  scrollbar-color: var(--color-dust) transparent;
}
.rail::-webkit-scrollbar { height: 1px; }
.rail::-webkit-scrollbar-thumb { background: var(--color-dust); }
.rail::-webkit-scrollbar-track { background: rgba(147, 138, 131, 0.3); }

.rail__item {
  position: relative;
  flex: 0 0 clamp(240px, 30vw, 380px);
  scroll-snap-align: start;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.rail__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.rail__item:hover img { transform: scale(1.03); }

.rail__hint {
  margin-top: var(--spacing-20);
  padding: 0 var(--gutter);
  color: var(--color-mortar);
}

/* --- Studio ------------------------------------------------------------- */

.studio {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}
.studio__figure { position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; }
.studio__figure img { width: 100%; height: 100%; object-fit: cover; }

.studio__block + .studio__block { margin-top: var(--spacing-45); }
.studio__block h3 { margin-bottom: var(--spacing-20); color: var(--color-mortar); }
.studio__block p  { max-width: 44ch; }

.hours { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--spacing-25); max-width: 26rem; }
.hours dt { color: var(--color-mortar); }
.hours dd { text-align: right; font-variant-numeric: tabular-nums; }
.hours .is-closed { color: var(--color-mortar); }

@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; }
}

/* --- Booking ------------------------------------------------------------ */

.booking { text-align: center; }
.booking__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-33);
  margin-top: var(--spacing-45);
}
.booking__alt {
  margin-top: var(--section-gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-20) var(--spacing-45);
  color: var(--color-mortar);
}

/* --- Footer ------------------------------------------------------------- */

.footer {
  background: var(--surface-raised);
  padding: var(--spacing-50) var(--gutter);
}
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-45);
  justify-content: space-between;
}
.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col .caption { color: var(--color-mortar); margin-bottom: 6px; }
.footer__bottom {
  margin-top: var(--spacing-50);
  padding-top: var(--spacing-25);
  border-top: 1px solid var(--color-dust);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-20);
  color: var(--color-mortar);
}

/* --- Mobile booking band (Linen Cream surface, not a button) ------------ */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-20);
  padding: 15px var(--gutter);
  background: var(--surface-raised);
  border-top: 1px solid var(--color-dust);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.dock.is-visible { transform: translateY(0); }

@media (max-width: 780px) {
  .dock { display: flex; }
  body { padding-bottom: 58px; }
}

/* --- Scroll reveal ------------------------------------------------------ */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .hero__media img,
  .hero__eyebrow,
  .hero__tagline,
  .hero__foot { opacity: 1; transform: none; }
  .wordmark span { color: var(--color-linen-cream); }
  .js .reveal { opacity: 1; transform: none; }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .nav, .dock, .grain, .rail { display: none; }
  body { background: #fff; color: #000; }
}