/* =====================================================================
   ARSU — Ethnic & Western Bespoke Studio
   Concept notes for whoever picks this up next:

   The existing site leads with stock photography of Western models in
   grey suits. Arsu's actual work — the sherwanis, the bandhgalas, the
   bridal lehengas, and two Kannada superstars — sits four clicks deep.
   This page inverts that: their own garments carry every screen, and
   the celebrity work is the second thing you see, not the last.

   Portrait photography drives the layout. Every source frame is
   1080x1920 or narrower, so nothing is ever stretched full-bleed across
   a desktop viewport; images live in columns and plates that are always
   narrower than the source.
   ===================================================================== */

:root {
  --ink: #12100e;
  --ink-2: #1c1916;
  --ink-3: #2a2521;
  --bone: #f4efe7;
  --bone-2: #e7dfd2;
  --gold: #c8a44d;
  --gold-lit: #e3c98a;
  /* The making + At the table were authored against --brass/--brass-soft,
     which never existed here — so the scroll-drawn line and every lit
     diamond computed to an invalid value and rendered transparent.
     Aliased rather than renamed, so either name is safe to reach for. */
  --brass: var(--gold);
  --brass-soft: var(--gold-lit);
  --maroon: #6b1f2b;
  --muted: #8a8078;

  --shell: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--ink);
  color: var(--bone);
  line-height: 1.6;
  overflow-x: clip;      /* clip, not hidden — hidden would kill position:sticky */
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; }

::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── shared ────────────────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.label {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
}
.rule { height: 1px; background: currentColor; opacity: 0.18; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
  white-space: nowrap;
}
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--gold:hover { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--dark { border-color: rgba(18,16,14,0.35); color: var(--ink); }
.btn--dark:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* scroll reveal — JS adds .in; without JS everything is simply visible */
/* 12px, not 20 — at 20 it reads as a slide. 380ms per the restrained tier. */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.in { transition: opacity .38s var(--ease), transform .38s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── header ────────────────────────────────────────────────────────── */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.stuck { background: rgba(18,16,14,0.92); backdrop-filter: blur(12px); border-bottom-color: rgba(200,164,77,0.22); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; }
.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand img { width: 2.6rem; height: 2.6rem; object-fit: contain; }
.brand__name { font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.14em; line-height: 1; }
.brand__sub { display: block; margin-top: 0.32rem; font-size: 0.52rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }

.nav { display: none; gap: 2.1rem; }
.nav a { font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; position: relative; padding-block: 0.4rem; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.hdr .btn { display: none; }
@media (min-width: 62rem) { .nav, .hdr .btn { display: inline-flex; } }

/* ── hero ──────────────────────────────────────────────────────────── */
/* Three portrait plates side by side. The source frames are all portrait,
   so this shows them at their native shape instead of cropping a letterbox
   out of the middle. Below 48rem only the centre plate is kept. */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero__plates { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; }
.hero__plate { position: relative; overflow: hidden; }
.hero__plate:not(.is-lead) { display: none; }
.hero__plate img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) saturate(0.9); }
.hero__plate + .hero__plate { border-left: 1px solid rgba(244,239,231,0.1); }
@media (min-width: 48rem) {
  .hero__plates { grid-template-columns: repeat(3, 1fr); }
  .hero__plate:not(.is-lead) { display: block; }
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,16,14,0.82) 0%, rgba(18,16,14,0.15) 34%, rgba(18,16,14,0.9) 88%);
}
.hero__in { position: relative; padding-block: 8rem 3rem; }
.hero__mark { width: 3.4rem; margin-bottom: 1.6rem; }
.hero__word {
  font-family: var(--display);
  font-size: clamp(4.2rem, 17vw, 15rem);
  line-height: 0.82;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}
.hero__tag {
  font-size: clamp(0.7rem, 1.5vw, 0.9rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__line { max-width: 34rem; margin-top: 2.2rem; font-size: 1.05rem; color: rgba(244,239,231,0.82); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
.hero__foot {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem;
  margin-top: 3rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(244,239,231,0.16);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244,239,231,0.55);
}

/* ── marquee ───────────────────────────────────────────────────────── */
.strip { border-block: 1px solid rgba(200,164,77,0.28); background: var(--ink-2); overflow: hidden; }
.strip__track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.strip__track:hover { animation-play-state: paused; }
.strip__group { display: flex; align-items: center; }
.strip__group span {
  padding: 1.05rem 2rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(244,239,231,0.62);
  white-space: nowrap;
}
.strip__group span::after { content: "·"; margin-left: 2rem; color: var(--gold); font-style: normal; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* ── section furniture ─────────────────────────────────────────────── */
.sec { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }
.sec--bone { background: var(--bone); color: var(--ink); }
.sec--ink2 { background: var(--ink-2); }
.sec__head { display: grid; gap: 1.6rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sec__num { font-family: var(--display); font-size: 0.9rem; color: var(--gold); }
.sec__title { font-size: clamp(2.3rem, 5.4vw, 4.4rem); max-width: 18ch; }
.sec__intro { max-width: 46ch; font-size: 1.03rem; opacity: 0.75; }
@media (min-width: 60rem) {
  .sec__head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: end; gap: 3rem; }
}

/* ── commissions: a roster ─────────────────────────────────────────── */
/* Two equal cards forced the weakest photograph on the site — a phone
   snapshot of Yash — to 638px wide, which is exactly why it read as
   "suddenly big". At 150px its flaws disappear and the NAME carries the
   weight instead, which is how a luxury client list should work anyway.
   Rows take a photo when one exists and the monogram when one doesn't,
   so the section grows as Arsu sends more. */
.roster { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(200,164,77,0.45); }
.roster__row {
  display: grid;
  gap: 1rem 1.6rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid rgba(244,239,231,0.14);
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 46rem) {
  .roster__row { grid-template-columns: 9.5rem minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2.6rem; align-items: center; padding: 2.4rem 0; }
}
.roster__thumb {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1; background: var(--ink-3);
  border: 1px solid rgba(200,164,77,0.28);
}
.roster__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.1s var(--ease); }
.roster__row:hover .roster__thumb img { transform: scale(1.05); }
/* the fallback tile when there is no photograph */
.roster__thumb--mark { display: grid; place-content: center; background:
  radial-gradient(120% 100% at 50% 0%, rgba(200,164,77,0.13), transparent 66%), var(--ink-3); }
.roster__thumb--mark img { width: 46%; height: auto; object-fit: contain; opacity: 0.62; }
.roster__who { display: grid; gap: 0.45rem; }
.roster__name { margin: 0; font-weight: 400; font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; }
.roster__what { font-size: 0.98rem; line-height: 1.75; color: rgba(244,239,231,0.66); max-width: 46ch; }
.roster__foot { margin-top: 1.6rem; font-size: 0.82rem; color: rgba(244,239,231,0.6); }

/* ── atelier ───────────────────────────────────────────────────────── */
.atelier { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .atelier { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.craft__img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bone-2); }
.craft__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.craft:hover .craft__img img { transform: scale(1.05); }
.craft__no { position: absolute; top: 1rem; left: 1.1rem; font-family: var(--display); font-size: 0.85rem; color: var(--bone); mix-blend-mode: difference; }
.craft__name { font-family: var(--display); font-size: 1.75rem; margin-top: 1.3rem; }
.craft__list { list-style: none; padding: 0; margin-top: 1rem; border-top: 1px solid rgba(18,16,14,0.16); }
.craft__list li { padding: 0.62rem 0; border-bottom: 1px solid rgba(18,16,14,0.1); font-size: 0.94rem; opacity: 0.78; }

/* ── at the table: a cutting-table layout ──────────────────────────── */
/* Four pattern pieces nested at angles the way a cutter lays them out to
   waste as little cloth as possible — never in a row, never aligned to
   one another, never all the same width. A basting thread is tacked
   between them in working order and pulled through by scroll.

   The stage's aspect-ratio matches the SVG viewBox (1000x1480) exactly,
   so the SVG scales uniformly — the needle is never stretched, and each
   card's left/top percentage lands on the viewBox coordinate of its knot.
   Change one and you must change the other. */
.tbl { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }

.tbl__pieces { list-style: none; margin: 0; padding: 0; }

/* the chalked-out piece */
.piece {
  position: relative;
  padding: 1.9rem 1.7rem 1.9rem 2.2rem;
  background:
    linear-gradient(180deg, rgba(244, 239, 231, 0.045), rgba(244, 239, 231, 0.015));
  border: 1px dashed rgba(200, 164, 77, 0.32);   /* the cutting line */
  transition: border-color 0.6s var(--ease), background-color 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}
.piece.cut {
  border-color: rgba(200, 164, 77, 0.7);
  box-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.9);
}

/* the seam allowance — a second, solid line inset from the cutting line */
.piece::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(244, 239, 231, 0.07);
  pointer-events: none;
}

/* the grain line: a double-headed arrow, always parallel to the selvedge */
.piece::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.6rem;
  bottom: 2.6rem;
  width: 1px;
  background:
    linear-gradient(180deg, transparent 0 5px, rgba(200,164,77,0.45) 5px calc(100% - 5px), transparent calc(100% - 5px)),
    /* arrow heads */
    conic-gradient(from 135deg at 50% 5px, rgba(200,164,77,0.45) 0 90deg, transparent 0) no-repeat,
    conic-gradient(from -45deg at 50% calc(100% - 5px), rgba(200,164,77,0.45) 0 90deg, transparent 0) no-repeat;
  background-size: 1px 100%, 7px 12px, 7px 12px;
  background-position: 0 0, -3px 0, -3px 100%;
  pointer-events: none;
}

.piece__mark {
  position: relative;
  font-size: 0.63rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.62);          /* 6:1 before it is reached */
  transition: color 0.6s var(--ease);
}
.piece__mark span { color: rgba(244, 239, 231, 0.56); letter-spacing: 0.2em; }  /* 5.1:1 */
.piece.cut .piece__mark { color: var(--gold-lit); }
.piece__t {
  margin-top: 0.7rem;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.35vw, 2.05rem);
  line-height: 1.1;
}
.piece__p {
  margin-top: 0.85rem;
  font-size: 0.97rem;
  line-height: 1.75;
  color: rgba(244, 239, 231, 0.72);
}

/* the basting thread */
.tbl__baste { display: none; }
.tbl__needle { opacity: 0; transition: opacity 0.35s var(--ease); }
.tbl__tacks g { opacity: 0; transition: opacity 0.5s var(--ease); }
.tbl.t1 .tbl__tacks g:nth-child(1),
.tbl.t2 .tbl__tacks g:nth-child(2),
.tbl.t3 .tbl__tacks g:nth-child(3),
.tbl.t4 .tbl__tacks g:nth-child(4) { opacity: 1; }
.tbl.is-sewing .tbl__needle { opacity: 1; }
#bastePull { filter: drop-shadow(0 0 4px rgba(200, 164, 77, 0.4)); }

/* ── narrow: the pieces stack, the thread runs down the margin ─────── */
/* Absolute placement below this width would put two pattern pieces on
   top of each other, so the cutting table only exists where there is
   cloth to lay it on. */
@media (max-width: 63.99rem) {
  .tbl__pieces { display: grid; gap: 1.6rem; }

  /* No room for a wandering thread here, so each piece keeps its tack —
     the same cross-stitch that holds it to the table above, tying as the
     piece is reached. The scroll link survives the layout change. */
  .piece__mark::before {
    content: "";
    position: absolute;
    left: -6px;
    top: -6px;
    width: 13px;
    height: 13px;
    background:
      linear-gradient(45deg, transparent 44%, var(--gold) 44% 56%, transparent 56%),
      linear-gradient(-45deg, transparent 44%, var(--gold) 44% 56%, transparent 56%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .piece.cut .piece__mark::before { opacity: 0.9; transform: none; }
  .piece:nth-child(even) { margin-left: 1.4rem; }
  .piece:nth-child(odd) { margin-right: 1.4rem; }
  .piece:nth-child(1) { transform: rotate(-0.4deg); }
  .piece:nth-child(2) { transform: rotate(0.5deg); }
  .piece:nth-child(3) { transform: rotate(-0.3deg); }
  .piece:nth-child(4) { transform: rotate(0.4deg); }
}

/* ── the table proper ──────────────────────────────────────────────── */
@media (min-width: 64rem) {
  .tbl {
    aspect-ratio: 1000 / 1340;   /* must match the SVG viewBox */
    /* a faint chalked grid, the way a cutting table is ruled */
    background-image:
      linear-gradient(90deg, rgba(244, 239, 231, 0.028) 1px, transparent 1px),
      linear-gradient(180deg, rgba(244, 239, 231, 0.028) 1px, transparent 1px);
    background-size: 5% 5%;
  }
  .tbl__baste { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .tbl__pieces { position: absolute; inset: 0; }

  .piece { position: absolute; padding: 2.1rem 2rem 2.1rem 2.5rem; }

  /* Nested, not aligned. Every width, angle and offset is different on
     purpose — four identical cards on a grid is the thing this replaces. */
  .piece--1 { left: 6%;  top: 1.8%;  width: 35%; transform: rotate(-1.1deg); }
  .piece--2 { left: 52%; top: 22.4%; width: 36%; transform: rotate(0.8deg); }
  .piece--3 { left: 14%; top: 51.5%; width: 34%; transform: rotate(-0.6deg); }
  .piece--4 { left: 57%; top: 75.4%; width: 36%; transform: rotate(1.2deg); }

  /* The tailor's notch — where two pieces are meant to meet. Sits on the
     edge of each piece that faces the thread. */
  .piece--1 .piece__mark::after,
  .piece--3 .piece__mark::after,
  .piece--2 .piece__mark::before,
  .piece--4 .piece__mark::before {
    content: "";
    position: absolute;
    top: -1px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid var(--ink);
    filter: drop-shadow(0 -1px 0 rgba(200, 164, 77, 0.4));
  }
  .piece--1 .piece__mark::after, .piece--3 .piece__mark::after { right: 16%; }
  .piece--2 .piece__mark::before, .piece--4 .piece__mark::before { left: 16%; }
}

@media (prefers-reduced-motion: reduce) {
  .tbl__needle { display: none; }
  .piece { border-color: rgba(200, 164, 77, 0.55); }
}

/* ── the making: a line drawn by scroll ────────────────────────────── */
/* The gold rule fills to match scroll position and each stage lights as it
   is reached. Motion follows the restrained tier — ~380ms, 12px offsets —
   so stages fade up rather than sliding around. */
.track { list-style: none; padding: 0; margin: 0; position: relative; }
.track::before,
.track__fill {
  content: ""; position: absolute; left: 0.5rem; top: 0.9rem; bottom: 0.9rem; width: 1px;
}
.track::before { background: rgba(244,239,231,0.16); }
.track__fill {
  background: linear-gradient(180deg, var(--brass-soft), var(--brass));
  transform-origin: top; transform: scaleY(var(--fill, 0));
  transition: transform .12s linear;
}
@media (min-width: 56rem) { .track::before, .track__fill { left: 0.5rem; } }

/* Only the MARKER dims, never the text. Fading the whole step to 0.34
   dropped the body copy to 1.95:1 — you should not have to scroll before
   you can read the process. The lit state is carried by the numeral
   turning gold and the diamond filling, which needs no contrast budget. */
.track__step { position: relative; padding: 0 0 2.3rem 2.6rem; }
.track__step:last-child { padding-bottom: 0; }
.track__step::before {
  content: ""; position: absolute; left: 0; top: 0.85rem;
  width: 1.05rem; height: 1.05rem;
  border: 1px solid rgba(244,239,231,0.3); background: var(--ink-2);
  transform: rotate(45deg) scale(0.72);
  transition: border-color .5s var(--ease), background-color .5s var(--ease), transform .5s var(--ease);
}
.track__step.lit::before { border-color: var(--brass); background: var(--brass); transform: rotate(45deg) scale(1); }
@media (min-width: 56rem) {
  .track__step { display: grid; grid-template-columns: 4rem 14rem minmax(0, 1fr); gap: 2.4rem; align-items: baseline; padding-left: 2.6rem; }
}
.track__n {
  font-family: var(--display); font-size: 1.05rem;
  color: rgba(244, 239, 231, 0.62);          /* 6:1 — readable before it lights */
  transition: color .5s var(--ease);
}
.track__step.lit .track__n { color: var(--brass-soft); }
.track__t { font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2rem); }
.track__p { font-size: 0.98rem; line-height: 1.75; color: rgba(244,239,231,0.66); max-width: 50ch; }

/* ── lookbook ──────────────────────────────────────────────────────── */
.look { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 46rem) { .look { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 72rem) { .look { grid-template-columns: repeat(6, 1fr); } }
.look figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink-3); margin: 0; }
.look img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94); transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.look figure:hover img { transform: scale(1.06); filter: saturate(1.1); }
.look figcaption {
  position: absolute; inset: auto 0 0; padding: 2.4rem 0.9rem 0.85rem;
  background: linear-gradient(180deg, transparent, rgba(18,16,14,0.9));
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.look figure:hover figcaption, .look figure:focus-within figcaption { opacity: 1; }
/* tall feature tiles break the grid's rhythm so it doesn't read as a contact sheet */
@media (min-width: 46rem) { .look figure.tall { grid-row: span 2; aspect-ratio: 3 / 8.2; } }

/* ── quote ─────────────────────────────────────────────────────────── */
.quote { max-width: 52rem; margin-inline: auto; text-align: center; }
.quote blockquote { font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.28; font-style: italic; }
.quote cite { display: block; margin-top: 1.8rem; font-style: normal; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }

/* ── visit ─────────────────────────────────────────────────────────── */
.visit { display: grid; gap: 3rem; }
@media (min-width: 60rem) { .visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4.5rem; align-items: start; } }
.dl { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
.dl > div { border-top: 1px solid rgba(18,16,14,0.16); padding-top: 1rem; }
.dl dt { font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--maroon); }
.dl dd { margin: 0.55rem 0 0; font-size: 1.06rem; }
.dl a:hover { color: var(--maroon); }
.map { aspect-ratio: 4 / 3; border: 1px solid rgba(18,16,14,0.2); filter: grayscale(1) contrast(1.05); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── footer ────────────────────────────────────────────────────────── */
.ftr { background: var(--ink); padding-block: 4rem 2.2rem; border-top: 1px solid rgba(200,164,77,0.22); }
.ftr__grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.ftr .ftr__h { font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); font-weight: 400; font-family: var(--sans); }
.ftr ul { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: 0.55rem; }
.ftr li a { font-size: 0.95rem; color: rgba(244,239,231,0.72); }
.ftr li a:hover { color: var(--bone); }
.ftr__base {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(244,239,231,0.12);
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
  font-size: 0.72rem; color: rgba(244,239,231,0.62);
}

/* ── floating whatsapp ─────────────────────────────────────────────── */
.wa {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  background: #1f7a53; color: #fff;
  font-size: 0.78rem; letter-spacing: 0.1em;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.6);
  transition: transform 0.3s var(--ease);
}
.wa:hover { transform: translateY(-2px); }
.wa svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
@media (max-width: 30rem) { .wa span { display: none; } .wa { padding: 0.95rem; border-radius: 999px; } }

/* Typographic plate used where Arsu has no usable photograph of a commission.
   Reads as a deliberate editorial choice rather than a missing image. */
.proof__img--plate {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.55rem;
  padding: 2rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200,164,77,0.14), transparent 62%),
    var(--ink-3);
  border-bottom: 1px solid rgba(200,164,77,0.2);
}
.proof__img--plate .proof__wm {
  width: 4.4rem;
  height: auto;
  object-fit: contain;
  margin: 0 auto 1rem;
  opacity: 0.55;
}
.proof__plate-kicker { font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.proof__plate-line { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; }
.proof__plate-sub { font-size: 0.76rem; letter-spacing: 0.14em; color: rgba(244,239,231,0.5); }