/* ==========================================================================
   Milana Aliyeva — makeup artist, Baku
   Design: "Milana - Redesign.dc.html"
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  --bone: #f2efe9;
  --bone-bright: #f7f4ee;
  --ink: #16130f;
  --noir: #100e0c;
  --noir-soft: #1b1815;
  --clay: #8a6a5c;

  --serif: "Bodoni Moda", "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad-x: clamp(20px, 5vw, 72px);
  --shell: 1560px;

  --rule-dark: rgba(22, 19, 15, 0.16);
  --rule-light: rgba(242, 239, 233, 0.16);

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

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

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button {
  font: inherit;
  color: inherit;
}

/* The UA sheet sizes h1-h3 in em and bolds them. Section labels are marked up
   as headings for structure but must inherit their type from their own class,
   so neutralise size and weight here rather than fighting it per-component. */
h1,
h2,
h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p,
figure,
blockquote {
  margin: 0;
}

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

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

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 14px 22px;
  background: var(--bone-bright);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top 0.25s ease;
}
.skip-link:focus {
  top: 16px;
}

/* --- Shared type ---------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(22, 19, 15, 0.62);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(22, 19, 15, 0.3);
  flex: none;
}
.eyebrow--light {
  color: rgba(242, 239, 233, 0.5);
}
.eyebrow--light::before {
  background: rgba(242, 239, 233, 0.52);
}
.eyebrow--bare::before {
  display: none;
}

.meta {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
}

/* Two-column "label | content" rhythm used by sections 01, 03 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.page {
  background-image: repeating-linear-gradient(
    to right,
    rgba(22, 19, 15, 0.05) 0 1px,
    transparent 1px 25%
  );
}

/* --- Motion --------------------------------------------------------------- */
@keyframes lineUp {
  from {
    transform: translateY(108%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes drawRule {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reveal-on-scroll is opt-IN: content is visible by default and only hidden
   once site.js confirms it can un-hide it again. If the script fails to load,
   or IntersectionObserver is missing, the page still reads — the old
   hide-first approach left the whole page blank in that case. */
[data-reveal] {
  transition: opacity 1.05s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 1.05s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}
.reveal-armed [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--noir);
  color: var(--bone);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 22%);
  filter: saturate(0.72) contrast(1.04);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to top,
      rgba(16, 14, 12, 0.93) 0%,
      rgba(16, 14, 12, 0.3) 48%,
      rgba(16, 14, 12, 0.66) 100%
    ),
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(16, 14, 12, 0.55) 100%);
}

/* On a tall portrait viewport the photo fits vertically, so no crop can move
   the subject's bright scarf out from under the headline block — the scrim has
   to carry it. Darken the lower half hard, keep a window open over the face. */
@media (max-aspect-ratio: 4/5), (max-width: 720px) {
  .hero__scrim {
    background: linear-gradient(
        to top,
        rgba(16, 14, 12, 0.95) 0%,
        rgba(16, 14, 12, 0.9) 30%,
        rgba(16, 14, 12, 0.58) 48%,
        rgba(16, 14, 12, 0.22) 68%,
        rgba(16, 14, 12, 0.62) 100%
      ),
      radial-gradient(130% 60% at 50% 34%, transparent 34%, rgba(16, 14, 12, 0.5) 100%);
  }
}

/* Nav */
.nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(18px, 3vw, 38px) var(--pad-x);
  animation: fadeIn 1.6s ease 0.1s both;
}

/* The wordmark and monogram are painted as CSS masks rather than <img>, so a
   single cached SVG can take the colour of whatever section it sits in via
   `currentColor` — the nav is bone on dark, and a light-section placement
   would need no second file. */
.nav__brand {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1.1vw, 15px);
  white-space: nowrap;
}
/* Horizontal lockup: the supplied logo stacks the monogram over the wordmark,
   which is far too tall for a nav bar, so they sit side by side here. The
   monogram runs about twice the wordmark's height, matching the weight it has
   in the original artwork. */
.nav__mark {
  display: block;
  width: clamp(25px, 2.3vw, 31px);
  aspect-ratio: 1440 / 1242;
  background: currentColor;
  -webkit-mask: url("/assets/img/logo-mark.svg") center / contain no-repeat;
  mask: url("/assets/img/logo-mark.svg") center / contain no-repeat;
}
.nav__wordmark {
  display: block;
  width: clamp(126px, 13vw, 172px);
  aspect-ratio: 2760 / 228;
  background: currentColor;
  -webkit-mask: url("/assets/img/logo-wordmark.svg") left center / contain no-repeat;
  mask: url("/assets/img/logo-wordmark.svg") left center / contain no-repeat;
}

.footer__mark {
  display: block;
  width: 34px;
  aspect-ratio: 1440 / 1242;
  /* The footer's own colour is already muted to .52 for the micro-type; the
     mark needs its own, brighter value or it fades to about .42 and vanishes. */
  color: rgba(242, 239, 233, 0.72);
  background: currentColor;
  -webkit-mask: url("/assets/img/logo-mark.svg") center / contain no-repeat;
  mask: url("/assets/img/logo-mark.svg") center / contain no-repeat;
}

/* Very old engines ignore mask entirely and would paint a solid block. */
@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
  .nav__mark,
  .nav__wordmark,
  .footer__mark {
    background: none;
  }
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.68);
}

/* The micro-type controls are only ~19-23px tall, under the WCAG 2.2 AA
   24x24 minimum. A transparent ::after extends the hit area without moving a
   single pixel of the design — the underline still tracks the text, not the
   target. Insets stay smaller than half the neighbouring gap so that two
   adjacent targets can never overlap and steal each other's taps. */
.nav__link,
.nav__brand,
.lang button,
.lightbox button {
  position: relative;
}
.nav__link::after,
.nav__brand::after,
.lang button::after,
.lightbox button::after {
  content: "";
  position: absolute;
}
/* nav gap is >=16px -> 4px a side is safe */
.nav__link::after,
.nav__brand::after {
  inset: -7px -4px;
}
/* lang gap is 9px -> 3px a side is safe */
.lang button::after {
  inset: -5px -3px;
}
.lightbox button::after {
  inset: -6px -5px;
}

.nav__link {
  padding: 5px 1px;
  transition: color 0.3s ease, box-shadow 0.3s ease;
}
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--bone-bright);
  box-shadow: inset 0 -1px 0 rgba(242, 239, 233, 0.55);
}

.lang {
  display: flex;
  gap: 9px;
  padding-left: clamp(6px, 1.5vw, 18px);
  border-left: 1px solid rgba(242, 239, 233, 0.22);
}
.lang button {
  background: none;
  border: 0;
  padding: 4px 2px;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: rgba(242, 239, 233, 0.55);
  cursor: pointer;
  transition: color 0.3s ease;
}
.lang button:hover {
  color: var(--bone-bright);
}
.lang button[aria-pressed="true"] {
  color: var(--bone-bright);
}

/* Burger — hidden until the mobile breakpoint */
.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.nav__burger span {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 1px;
  background: var(--bone-bright);
  transition: transform 0.4s var(--ease), opacity 0.25s ease;
}
.nav__burger span:nth-child(1) {
  top: 16px;
}
.nav__burger span:nth-child(2) {
  top: 23px;
}
body.menu-open .nav__burger span:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
body.menu-open .nav__burger span:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Hero copy */
.hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad-x) clamp(30px, 4vw, 58px);
}

.hero__grid {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 44px;
  align-items: end;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 42px);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.62);
  animation: fadeIn 1.4s ease 0.2s both;
}
.hero__kicker::before {
  content: "";
  width: clamp(28px, 4vw, 64px);
  height: 1px;
  background: rgba(242, 239, 233, 0.5);
  transform-origin: left;
  animation: drawRule 1.1s var(--ease) 0.35s both;
  flex: none;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--bone-bright);
  font-size: clamp(40px, 8.4vw, 142px);
  line-height: 0.9;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.hero__title .mask {
  display: block;
  overflow: hidden;
}
.hero__title .mask > span {
  display: block;
  padding-bottom: 0.06em;
  animation: lineUp 1.35s var(--ease) both;
}
.hero__title .mask:nth-child(1) > span {
  animation-delay: 0.15s;
}
.hero__title .mask:nth-child(2) > span {
  animation-delay: 0.3s;
}
.hero__title em {
  font-weight: 400;
}

.hero__aside {
  max-width: 290px;
  padding-bottom: 12px;
  color: rgba(242, 239, 233, 0.68);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.75;
  animation: fadeIn 1.6s ease 0.75s both;
}

.link-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin-top: 26px;
  padding-bottom: 8px;
  color: var(--bone-bright);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(242, 239, 233, 0.38);
  transition: gap 0.35s ease, border-color 0.35s ease;
}
.link-arrow:hover,
.link-arrow:focus-visible {
  gap: 20px;
  border-bottom-color: var(--bone-bright);
}

.hero__facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-light);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.5);
  animation: fadeIn 1.6s ease 0.9s both;
}
.hero__facts span {
  padding: 18px 20px;
  border-left: 1px solid rgba(242, 239, 233, 0.14);
}
.hero__facts span:first-child {
  padding-left: var(--pad-x);
  border-left: 0;
}

/* ==========================================================================
   01 — Approach
   ========================================================================== */
.statement {
  padding: clamp(72px, 12vw, 180px) var(--pad-x) clamp(56px, 8vw, 120px);
}
.statement__label {
  padding-top: 16px;
}
.statement__lead {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 58px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}
.statement__lead em {
  font-weight: 400;
}
.statement__body {
  margin-top: clamp(30px, 4vw, 56px);
  max-width: 540px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(22, 19, 15, 0.62);
}
.statement__body::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 74px;
  line-height: 0.72;
  margin: 6px 14px 0 0;
  color: var(--ink);
}

/* --- Marquee -------------------------------------------------------------- */
.marquee[hidden] {
  display: none;
}
.marquee {
  overflow: hidden;
  padding: clamp(10px, 1.4vw, 18px) 0;
  border-top: 1px solid rgba(22, 19, 15, 0.14);
  border-bottom: 1px solid rgba(22, 19, 15, 0.14);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: drift 46s linear infinite;
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(22, 19, 15, 0.38);
  white-space: nowrap;
}
.marquee__group {
  display: flex;
  flex: 0 0 auto;
}
.marquee__group > span {
  flex: 0 0 auto;
  padding-right: 1.6em;
}

/* ==========================================================================
   02 — Selected work
   ========================================================================== */
.work {
  background: var(--noir);
  color: var(--bone);
  padding: clamp(64px, 10vw, 140px) var(--pad-x) clamp(64px, 10vw, 130px);
}

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: clamp(24px, 4vw, 54px);
  border-bottom: 1px solid var(--rule-light);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.52);
}
.work__hint {
  color: rgba(242, 239, 233, 0.52);
}

.work__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.work__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  width: 100%;
  padding: clamp(18px, 2.6vw, 34px) 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(242, 239, 233, 0.14);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: padding-left 0.5s var(--ease), background 0.5s ease;
}
.work__item:hover,
.work__item:focus-visible,
.work__item.is-active {
  padding-left: 20px;
  background: rgba(242, 239, 233, 0.045);
}
.work__n {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(242, 239, 233, 0.52);
}
.work__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.7vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.012em;
}
.work__cat {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.55);
}
.work__note {
  padding-top: clamp(22px, 3vw, 38px);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.52);
}

.work__preview {
  position: sticky;
  top: 56px;
}
.work__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--noir-soft);
}
.work__layer,
.work__layer picture,
.work__layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.work__layer img {
  object-fit: cover;
  object-position: var(--pos, 50% 25%);
  filter: saturate(0.78);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.work__layer.is-showing img {
  opacity: 1;
}
.work__credit {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.55);
}

/* Grid variant — the portfolio for touch devices and narrow viewports.
   Hidden by default; the media queries at the bottom swap the two layouts. */
.work__grid {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  padding-top: clamp(24px, 4vw, 54px);
}
.work__card {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.work__card figure {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--noir-soft);
  margin: 0;
}
.work__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 25%);
  filter: saturate(0.78);
  transition: transform 1.2s var(--ease);
}
.work__card:hover img {
  transform: scale(1.04);
}
.work__cardmeta {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.5);
}

/* ==========================================================================
   Interlude
   ========================================================================== */
.interlude {
  position: relative;
  min-height: clamp(320px, 46vw, 600px);
  display: grid;
  place-items: center;
  padding: clamp(56px, 8vw, 110px) var(--pad-x);
  background-color: var(--noir);
  overflow: hidden;
}
.interlude__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.interlude__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: saturate(0.7);
}
.interlude::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(16, 14, 12, 0.62);
}
.interlude__quote {
  position: relative;
  z-index: 2;
  max-width: 820px;
  text-align: center;
  color: var(--bone-bright);
}
.interlude__quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 3.2vw, 50px);
  line-height: 1.24;
  letter-spacing: -0.01em;
}
.interlude__quote footer {
  margin-top: clamp(20px, 2.6vw, 34px);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.55);
}

/* ==========================================================================
   03 — Services
   ========================================================================== */
.services {
  padding: clamp(72px, 12vw, 170px) var(--pad-x);
}
.services__intro p {
  margin-top: 22px;
  max-width: 280px;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(22, 19, 15, 0.62);
}
.services__list {
  border-top: 1px solid var(--rule-dark);
}
.service {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1.05fr) auto;
  gap: clamp(14px, 2vw, 32px);
  align-items: start;
  padding: clamp(22px, 3vw, 42px) 6px;
  border-bottom: 1px solid var(--rule-dark);
  transition: padding-left 0.5s var(--ease), background 0.5s ease;
}
.service:hover {
  padding-left: 20px;
  background: rgba(22, 19, 15, 0.03);
}
.service__n {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(22, 19, 15, 0.62);
  padding-top: 9px;
}
.service__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 2.3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.service__desc {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(22, 19, 15, 0.62);
}
.service__price {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(22, 19, 15, 0.62);
  padding-top: 10px;
  white-space: nowrap;
}

/* ==========================================================================
   04 — The artist
   ========================================================================== */
.artist {
  padding: 0 0 clamp(72px, 12vw, 170px);
}
.artist__grid {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
}
.artist__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e6e1d8;
  margin: 0;
}
.artist__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 22%);
  filter: saturate(0.8);
}
.artist__figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 14px 18px;
  background: var(--bone);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(22, 19, 15, 0.62);
}
.artist__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin-top: clamp(22px, 3vw, 40px);
}
.artist__body {
  margin-top: clamp(26px, 3.4vw, 46px);
  max-width: 470px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(22, 19, 15, 0.62);
}
.artist__stats[hidden] {
  display: none;
}
.artist__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(30px, 4vw, 56px);
  border-top: 1px solid var(--rule-dark);
}
.artist__stats div {
  padding: 24px 16px 0;
  border-left: 1px solid var(--rule-dark);
}
.artist__stats div:first-child {
  padding-left: 0;
  border-left: 0;
}
.artist__stats dt {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}
.artist__stats dd {
  margin: 10px 0 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(22, 19, 15, 0.62);
}

/* ==========================================================================
   Before / after
   ========================================================================== */
.transform {
  padding: 0 var(--pad-x) clamp(72px, 12vw, 160px);
}
.transform__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--rule-dark);
  padding-top: clamp(28px, 4vw, 58px);
}
.transform__head p {
  max-width: 420px;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(22, 19, 15, 0.62);
}
.transform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  margin-top: clamp(28px, 4vw, 56px);
}

.ba {
  margin: 0;
}
.ba__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #e6e1d8;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.ba__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 28%);
  filter: saturate(0.82);
  pointer-events: none;
}
.ba__after {
  clip-path: inset(0 0 0 var(--split, 50%));
}
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 50%);
  width: 1px;
  background: rgba(247, 244, 238, 0.9);
  pointer-events: none;
}
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(247, 244, 238, 0.9);
  border-radius: 50%;
  background: rgba(16, 14, 12, 0.28);
  backdrop-filter: blur(2px);
}
.ba__tag {
  position: absolute;
  bottom: 12px;
  padding: 7px 12px;
  background: rgba(16, 14, 12, 0.6);
  color: var(--bone-bright);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba__tag--before {
  left: 12px;
}
.ba__tag--after {
  right: 12px;
}
.ba__frame:has(.ba__range:focus-visible) {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.ba figcaption {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(22, 19, 15, 0.62);
}

/* ==========================================================================
   05 — Booking
   ========================================================================== */
.contact {
  background: var(--noir);
  color: var(--bone);
  padding: clamp(72px, 11vw, 150px) var(--pad-x) clamp(30px, 4vw, 48px);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: start;
}
.contact__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.028em;
  margin-top: clamp(22px, 3vw, 38px);
}
.contact__title em {
  font-weight: 400;
}
.contact__details {
  margin-top: clamp(30px, 4vw, 52px);
  display: grid;
  gap: 10px;
  font-weight: 300;
  font-size: 15px;
  color: rgba(242, 239, 233, 0.66);
}
.contact__mail {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 28px);
  color: var(--bone-bright);
  border-bottom: 1px solid rgba(242, 239, 233, 0.3);
  width: fit-content;
  padding-bottom: 6px;
  transition: border-color 0.3s ease;
}
.contact__mail:hover {
  border-bottom-color: var(--bone-bright);
}
.contact__reply {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.52);
  margin-top: 12px;
}

/* `.form` sets display, which beats the UA's `[hidden] { display: none }`.
   Without this the success panel appears *below* a still-visible form. */
.form[hidden] {
  display: none;
}
.form {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  padding-top: 8px;
}
.form label {
  display: grid;
  gap: 9px;
}
.form label > span {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.55);
}
.form input,
.form select,
.form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242, 239, 233, 0.42);
  border-radius: 0;
  padding: 9px 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  outline: none;
  color: var(--bone-bright);
  transition: border-color 0.3s ease;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-bottom-color: var(--bone-bright);
}
.form input[type="date"] {
  color-scheme: dark;
}
.form textarea {
  resize: none;
}
.form select option {
  color: var(--ink);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}
.form__submit {
  justify-self: start;
  margin-top: 6px;
  background: transparent;
  border: 1px solid rgba(242, 239, 233, 0.52);
  border-radius: 0;
  padding: 18px 36px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.form__submit:hover:not(:disabled) {
  background: var(--bone-bright);
  color: var(--noir);
  border-color: var(--bone-bright);
}
.form__submit:disabled {
  opacity: 0.5;
  cursor: progress;
}
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__error {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #e0a08c;
}
/* Neutral sibling of .form__error: the mailto handoff is information, not a
   failure, so it must not be styled as one. */
.form__note {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(242, 239, 233, 0.66);
}
.form__note a {
  border-bottom: 1px solid rgba(242, 239, 233, 0.42);
}

.form-sent {
  padding-top: 8px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.3;
}
.form-sent span {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(242, 239, 233, 0.55);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: clamp(48px, 8vw, 110px);
  padding-top: 22px;
  border-top: 1px solid var(--rule-light);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.52);
}
.footer a:hover {
  color: var(--bone-bright);
}
.footer__mark + span {
  margin-right: auto;
  padding-left: 14px;
}
.footer .lang {
  border-left: 0;
  padding-left: 0;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(11, 10, 9, 0.97);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--bone);
  animation: fadeIn 0.5s ease both;
}
.lightbox[hidden] {
  display: none;
}
.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px clamp(20px, 4vw, 44px);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.55);
}
.lightbox__stage {
  position: relative;
  min-height: 0;
  padding: 0 clamp(20px, 4vw, 44px);
}
/* Each slide is a <picture> wrapper so the WebP <source> is honoured; the
   wrapper carries the positioning and the fade, the <img> just fits inside. */
.lightbox__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.lightbox__slide.is-showing {
  opacity: 1;
}
.lightbox__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__bar--foot {
  padding-bottom: 30px;
  color: rgba(242, 239, 233, 0.5);
}
.lightbox button {
  background: none;
  border: 0;
  padding: 6px 2px;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 0.3s ease;
}
.lightbox button:hover {
  color: var(--bone-bright);
}
.lightbox__nav {
  display: flex;
  gap: 24px;
}

/* ==========================================================================
   Floating WhatsApp button + grain
   ========================================================================== */
/* Deliberately not WhatsApp green: on this palette it would read as a widget
   bolted on. Dark disc, bone glyph — the mark is recognisable by shape. */
.wa-fab {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: 20;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  box-shadow: 0 6px 26px rgba(16, 14, 12, 0.34);
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s var(--ease);
}
.wa-fab[hidden] {
  display: none;
}
.wa-fab:hover,
.wa-fab:focus-visible {
  background: var(--clay);
  color: var(--bone-bright);
  transform: translateY(-2px);
}
.wa-fab__icon {
  width: 26px;
  height: 26px;
  fill: currentColor;
}


.grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet — collapse the two-column editorial splits */
@media (max-width: 1000px) {
  .split,
  .work__layout,
  .artist__grid,
  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .artist__grid {
    gap: clamp(28px, 6vw, 48px);
  }
  .artist__figure {
    max-width: 520px;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .hero__aside {
    max-width: 420px;
  }

  .service {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    row-gap: 10px;
  }
  .service__desc {
    grid-column: 2 / -1;
  }
  .service__price {
    padding-top: 0;
    align-self: start;
  }

  /* The sticky hover preview has no meaning without a pointer — show the grid */
  .work__layout {
    display: none;
  }
  .work__grid {
    display: grid;
  }
}

/* Any coarse/no-hover pointer gets the grid regardless of width */
@media (hover: none) {
  .work__layout {
    display: none;
  }
  .work__grid {
    display: grid;
  }
  .work__hint {
    display: none;
  }
}

/* Phone */
@media (max-width: 720px) {
  .nav__burger {
    display: block;
  }

  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: clamp(72px, 16vh, 120px) var(--pad-x) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--noir);
    font-size: 13px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
  }
  body.menu-open .nav__menu {
    opacity: 1;
    visibility: visible;
  }
  @media (max-height: 460px) {
    .nav__menu {
      justify-content: flex-start;
    }
    .nav__menu .nav__link {
      font-size: 22px;
      padding: 8px 0;
    }
  }
  .nav__menu .nav__link {
    font-family: var(--serif);
    font-size: 30px;
    letter-spacing: 0.01em;
    text-transform: none;
    padding: 12px 0;
    color: var(--bone-bright);
  }
  .nav__menu .lang {
    margin-top: 26px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule-light);
    padding-top: 22px;
    width: 100%;
    gap: 18px;
  }

  .hero__facts {
    grid-template-columns: 1fr 1fr;
  }
  .hero__facts span {
    padding: 13px 16px;
    font-size: 9px;
    letter-spacing: 0.18em;
  }
  .hero__facts span:nth-child(1),
  .hero__facts span:nth-child(2) {
    border-bottom: 1px solid rgba(242, 239, 233, 0.14);
  }
  .hero__facts span:nth-child(1),
  .hero__facts span:nth-child(3) {
    padding-left: var(--pad-x);
    border-left: 0;
  }

  .statement__body::first-letter {
    font-size: 58px;
  }

  .form__row {
    grid-template-columns: 1fr;
  }
  .form__submit {
    justify-self: stretch;
    text-align: center;
  }

  .footer {
    justify-content: flex-start;
    gap: 14px;
  }

  .interlude {
    background-attachment: scroll;
  }

  .lightbox__bar {
    padding: 16px var(--pad-x);
    font-size: 9px;
  }
  .lightbox__nav {
    gap: 18px;
  }
}

/* Give the portfolio grid two real columns on small phones rather than one huge card */
@media (max-width: 560px) {
  .work__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .work__cardmeta {
    font-size: 9px;
    letter-spacing: 0.12em;
    flex-direction: column;
    gap: 3px;
  }
  .transform__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Accessibility -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .marquee__track {
    animation: none;
  }
}

@media print {
  .grain,
  .wa-fab,
  .lightbox,
  .nav__burger {
    display: none !important;
  }
}