/* =========================================================================
   Capricci Noir — black & gold theme + editorial layout for the public pages.
   Loaded after styles.css / landing.css; the admin keeps the light theme.
   Delete the <link> to this file to go back to the light look.

   Motion model: landing.js writes a few custom properties from one rAF loop
     --v   on [data-fx] elements (0 entering → 0.5 centred → 1 leaving)
     --p   on #hero (0 → 1 as it scrolls away)
     --sp  on #statement (pin progress 0 → 1)
     --f / --a on gallery tiles while the gallery is pinned (signed / absolute
               distance from the screen centre, in screen widths)
   and this file turns them into transform / opacity / clip-path only.
   Under prefers-reduced-motion the JS writes none of them and everything is static.
   ========================================================================= */

:root {
  /* Black ramp (pure black base, warm raised surfaces) */
  --stone-0: #000000;
  --stone-50: #0e0d0a;
  --stone-100: #1b1914;
  --stone-200: #2c2820;
  --stone-300: #5a5242;
  --stone-600: #a89f8e;
  --stone-700: #cbc2b0;
  --ink: #f4eee3;
  --ink-soft: #cbc2b0;

  /* Gold, sampled from the logo */
  --clay: #c9a24d;
  --clay-dark: #e6c77a;
  --clay-100: rgba(201, 162, 77, 0.16);
  --gold-hi: #f3dc9a;
  --gold-deep: #8c6a24;
  --line: rgba(201, 162, 77, 0.22);
  --hair: rgba(244, 238, 227, 0.1);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.7);

  /* Layout rhythm */
  --sec: clamp(104px, 15vh, 200px);    /* vertical section padding */
  --cw: 1120px;                         /* container width (matches .container) */
  --edge: max(var(--sp-5), calc((100vw - var(--cw)) / 2 + var(--sp-5)));
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
}

html { background: #000; color-scheme: dark; }
body { background: #000; }
::selection { background: var(--clay); color: #000; }
h1, h2, h3 { font-weight: 500; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--clay-dark); outline-offset: 3px; border-radius: 4px;
}

/* ---------- Chrome ---------- */
.site-header { background: rgba(0, 0, 0, 0.72); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid transparent; transition: border-color 400ms var(--ease-out), background-color 400ms var(--ease-out); }
.site-header.scrolled { box-shadow: none; border-bottom-color: var(--line); }
.site-header .nav-links a { letter-spacing: 0.01em; transition: color 200ms var(--ease-out); }
.site-footer { background: #000; border-top: 1px solid var(--line); }
.lang-toggle { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.lang-toggle [data-code].on { background: var(--clay); color: #000; }

/* Gold buttons take black text (white on gold fails contrast) */
.btn-primary, .slot-btn.selected, .step.active .dot, .admin-nav a.active { color: #000; }
.btn { border-radius: 999px; letter-spacing: 0.01em; }
.btn-primary { background: linear-gradient(180deg, #e6c77a, #c9a24d 55%, #8c6a24 140%); box-shadow: 0 0 0 1px rgba(243, 220, 154, 0.3) inset, 0 10px 30px -12px rgba(201, 162, 77, 0.55); }
.btn-primary:hover { background: linear-gradient(180deg, #f3dc9a, #e6c77a 55%, #c9a24d 140%); }
.btn-secondary { border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: rgba(201, 162, 77, 0.08); border-color: var(--clay); }
.btn-ghost { color: var(--clay-dark); padding-left: 0; padding-right: 0; border-radius: 0; background: none; position: relative; }
.btn-ghost::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0.35); transform-origin: left; transition: transform 500ms var(--ease-lux); }
.btn-ghost:hover { background: none; }
.btn-ghost:hover::after { transform: scaleX(1); }

/* Surfaces that were white */
.card, .pick-card, .slot-btn, input, textarea, select,
.review-card, .review-nav button, .visit-map-label,
.ig-profile-fallback {
  background: var(--stone-50); color: var(--ink); border-color: var(--stone-200);
}
input::placeholder, textarea::placeholder { color: var(--stone-600); }
.pick-card:hover, .card-interactive:hover { border-color: var(--line); }

/* Section labels: a small script accent instead of all-caps eyebrows */
.eyebrow {
  font-family: "Parisienne", "Snell Roundhand", cursive; font-size: 1.65rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.1; color: var(--clay); margin-bottom: var(--sp-3);
}
body.landing .eyebrow::before { content: none; }
.big-head { font-weight: 500; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.025em; }

/* ---------- Hero ---------- */
.l-hero { background: #000; padding: var(--sp-7) 0 var(--sp-9); }
.l-hero .container { min-height: calc(100svh - 88px - 140px); }
.blob, .hero-sparkles { display: none; }
.hero-light {
  position: absolute; z-index: 0; pointer-events: none; width: 70vmax; height: 70vmax; right: -18vmax; top: -16vmax;
  background: radial-gradient(closest-side, rgba(201, 162, 77, 0.2), rgba(201, 162, 77, 0.06) 55%, transparent);
  opacity: calc(1 - var(--p, 0) * 0.9); translate: 0 calc(var(--p, 0) * 18vh);
  animation: breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe { from { scale: 0.92; } to { scale: 1.06; } }
.hero-eyebrow { text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 0.9rem; color: var(--stone-600); }
.hero-eyebrow::before { width: 28px; height: 1px; border-radius: 0; background: var(--clay); }
.wm-name { color: var(--ink); font-weight: 500; }
.wm-by { background-image: linear-gradient(100deg, #8c6a24 0%, #c9a24d 35%, #f3dc9a 50%, #c9a24d 65%, #8c6a24 100%); }
.wm-kind { color: var(--clay); }
.hero-tagline { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.l-hero .lede { color: var(--stone-600); }

/* Hero visual: her recent sets fanned like a hand of cards (overlap kept to the corners, so no nail is hidden).
   Each photo is a square crop (assets/hero/) that holds every nail in the shot, so the frame is a plain
   rounded square: no shaped mask, no cover-cropping.
   .hero-set is a size container, so the fan scales with its column (cqi), not the viewport.
   Slots 0/1/2 are on show; "wait" sits offstage right; "out" leaves to the left.
   landing.js only rewrites data-slot; the movement is plain CSS transitions. */
.hero-set { margin: 0; width: 100%; max-width: 680px; justify-self: end; container-type: inline-size; }
.set-fan { display: block; position: relative; aspect-ratio: 100 / 54; border-radius: 8px;
  opacity: 0; translate: 0 24px; transition: opacity 900ms var(--ease-out) 200ms, translate 1200ms var(--ease-lux) 200ms; }
.l-hero.ready .set-fan { opacity: 1; translate: none; }
.nail {
  --x: 72cqi; --y: 18cqi; --w: 30cqi; --r: 12deg; --dir: 1;
  position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; rotate: var(--r);
  border-radius: 14px; overflow: hidden; background: var(--stone-100);
  opacity: 0; z-index: 0; transform-origin: 50% 100%;
  box-shadow: 0 34px 60px -24px #000, 0 0 48px -12px color-mix(in srgb, var(--clay) 40%, transparent);
  transition-property: left, top, width, rotate, opacity, filter, scale;
  transition-duration: 1100ms; transition-timing-function: var(--ease-lux);
}
.nail img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Hairline gold rim */
.nail::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clay-dark) 45%, transparent); }
.nail[data-slot="0"] { --x: -1cqi; --y: 15cqi; --w: 30cqi; --r: -6deg; --dir: -1; opacity: 1; z-index: 1; filter: brightness(0.7); }
.nail[data-slot="1"] { --x: 30cqi; --y: 3cqi; --w: 40cqi; --r: 0deg; --dir: 0; opacity: 1; z-index: 3; }
.nail[data-slot="2"] { --x: 71cqi; --y: 17cqi; --w: 30cqi; --r: 6deg; --dir: 1; opacity: 1; z-index: 2; filter: brightness(0.7); }
.nail[data-slot="out"] { --x: -4cqi; --y: 22cqi; --r: -12deg; --dir: -1; }
/* Before the intro hands over, the set sits closed behind the centre photo, then fans open. */
.l-hero:not(.ready) .nail { --x: 35cqi; --y: 6cqi; --r: 0deg; }
@media (hover: hover) {
  .nail:hover { scale: 1.04; filter: none; transition-duration: 500ms; }
  .set-fan:has(.nail:hover) .nail:not(:hover) { filter: brightness(0.45); }
}
.set-caption { margin-top: var(--sp-4); text-align: center; font-family: "Parisienne", "Snell Roundhand", cursive; font-size: 1.6rem; line-height: 1.1; color: var(--clay); }

/* As the hero scrolls away the fan opens wider (scroll-driven, no JS). Browsers without
   scroll timelines skip it; the whole set still drifts via --p below. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
    .nail { animation: fanOpen linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  }
}
@keyframes fanOpen { to { transform: translate(calc(var(--dir) * 6cqi), -3cqi) rotate(calc(var(--dir) * 5deg)); } }
@media (max-width: 900px) { .hero-set { justify-self: center; max-width: 520px; } }

/* Phones: no fan. The sets sit in a calm swipeable row, one large square at a time with the next
   peeking in. Nothing moves on its own (landing.js doesn't cycle here) and nothing is scroll-linked. */
@media (max-width: 700px) {
  .l-hero .hero-set { max-width: none; justify-self: stretch; transform: none; }
  .set-fan { display: flex; gap: var(--sp-3); aspect-ratio: auto; border-radius: 0; translate: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5); scroll-padding: 0 var(--sp-5); }
  .set-fan::-webkit-scrollbar { display: none; }
  .l-hero .nail, .l-hero:not(.ready) .nail { position: relative; left: auto; top: auto; flex: 0 0 82%; width: auto; rotate: none;
    opacity: 1; filter: none; scale: none; transition: none; scroll-snap-align: start; box-shadow: 0 24px 48px -28px #000; }
}
/* Scroll-linked hero exit: copy lifts and fades faster than the card (depth) */
.l-hero .container > div:first-child { opacity: calc(1 - var(--p, 0) * 1.4); transform: translateY(calc(var(--p, 0) * -70px)); }
.hero-set { transform: translateY(calc(var(--p, 0) * 90px)) scale(calc(1 - var(--p, 0) * 0.1)); transform-origin: 50% 0; }
.scroll-cue { color: var(--stone-600); opacity: calc(1 - var(--p, 0) * 4); }

/* ---------- Marquee: a quiet typographic band ---------- */
.marquee { background: #000; color: var(--ink-soft); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); transform: none; margin: 0; box-shadow: none; padding: 30px 0; }
.marquee-item { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 500; }
.marquee-item i { color: var(--clay); opacity: 1; }
.marquee-item::after { color: var(--clay); opacity: 0.5; font-size: 0.5em; }

/* ---------- Statement (signature moment 1): pinned, words light up, gold light swells ---------- */
.l-statement { height: 300vh; position: relative; background: #000; }
.statement-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 0 var(--sp-5); overflow: clip; }
.statement-pin::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 162, 77, 0.22), rgba(140, 106, 36, 0.06) 60%, transparent);
  opacity: var(--sp, 0); transform: scale(calc(0.6 + var(--sp, 0) * 0.6));
}
.statement-text {
  position: relative; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 6vw, 5.6rem); line-height: 1.04;
  letter-spacing: -0.025em; max-width: 17ch; margin: 0; color: #2e2a22; text-wrap: balance; text-align: center;
  transform: scale(calc(0.94 + var(--sp, 0) * 0.08)) translateY(calc((0.5 - var(--sp, 0.5)) * 6vh));
}
.statement-text span { transition: color 600ms var(--ease-out), text-shadow 600ms var(--ease-out); }
.statement-text span.lit { color: var(--ink); }
.statement-text span.lit:last-child, .statement-text span.lit:nth-last-child(2) { color: var(--clay-dark); text-shadow: 0 0 40px rgba(201, 162, 77, 0.45); font-style: italic; }

/* ---------- Services: an editorial price list ---------- */
.l-services { padding: var(--sec) 0; }
.l-services .section-head { align-items: flex-end; margin-bottom: var(--sp-7); }
.svc-list { border-top: 1px solid var(--hair); margin-top: 0; }
.svc-row { grid-template-columns: 72px 1.25fr 1.35fr auto; gap: var(--sp-6); padding: var(--sp-7) 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.svc-row::before { content: none; }
.svc-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--clay), var(--gold-hi), var(--clay)); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-lux); }
.svc-row:hover::after, .svc-row:focus-visible::after { transform: scaleX(1); }
.svc-row:hover > * { color: inherit; }
.svc-row:hover .svc-name { transform: translateX(14px); color: var(--ink); }
.svc-row:focus-visible { outline-offset: 6px; }
.svc-num { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--stone-600); transition: color 400ms var(--ease-out); }
.svc-row:hover .svc-num { color: var(--clay); }
.svc-name { font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.svc-name small { font-size: 0.82rem; color: var(--stone-600); margin-top: 10px; letter-spacing: 0.01em; }
.svc-row:hover .svc-name small { color: var(--stone-600); }
.svc-desc { color: var(--stone-600); font-size: 0.95rem; max-width: 38ch; }
.svc-price { font-size: 1rem; }
.svc-mask { display: block; overflow: hidden; font-style: normal; padding-bottom: 0.06em; }
.svc-mask b { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; color: var(--clay-dark); }
.svc-price > span { margin-top: 6px; color: var(--stone-600); }

/* ---------- Process: sticky heading, steps on a gold thread ---------- */
.l-process { background: var(--stone-50); padding: var(--sec) 0; }
.process-wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-9); align-items: start; }
.process-head { position: sticky; top: calc(88px + 10vh); }
.process-grid { grid-template-columns: 1fr; gap: clamp(64px, 12vh, 120px); margin-top: 0; padding-left: 64px; }
.process-line { display: block; top: 0.6em; bottom: 0; left: 0; right: auto; width: 1px; height: auto; background: var(--stone-200); overflow: visible; }
.process-line::after { transform: scaleY(var(--p, 0)); transform-origin: top; background: linear-gradient(var(--gold-deep), var(--clay) 70%, var(--gold-hi)); box-shadow: 0 0 12px rgba(201, 162, 77, 0.6); transition: none; }
.process-step::before { content: ""; position: absolute; left: -68px; top: 2.1rem; width: 9px; height: 9px; border-radius: 50%; background: var(--stone-200); transition: background-color 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.process-step.lit::before { background: var(--gold-hi); box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.15), 0 0 18px var(--clay); }
.process-dot, .process-step.lit .process-dot {
  width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; border: 0; display: block; transform: none;
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--clay); margin-bottom: var(--sp-3);
}
.process-step.lit .process-dot { color: var(--clay); }
.process-step h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.process-step p { max-width: 40ch; color: var(--stone-600); }

/* ---------- Work (signature moment 2): pinned horizontal gallery on wide screens ---------- */
.l-work { background: #000; border: 0; padding: var(--sec) 0; overflow: clip; }
.l-work .section-head { margin-bottom: var(--sp-7); }
/* Source photos are ~480–640px wide: tiles never render wider than 340px and are never scaled above 1. */
.l-work .work-grid { grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; gap: var(--sp-6); margin: 0 auto; padding: 0 var(--sp-5); max-width: none; align-items: start; }
.l-work .work-grid > :nth-child(3n+2) { margin-top: var(--sp-8); }
.photo-tile { border-radius: 4px; overflow: hidden; background: var(--stone-100); }
.photo-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.photo-tile img, .photo-tile:hover img { transform: none; }
.photo-tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transition: opacity 400ms var(--ease-out); pointer-events: none; }
.photo-tile:hover::after { opacity: 1; }
.lightbox img { max-width: min(92vw, 100%); width: auto; height: auto; }
.photo-tile:focus-visible { outline-offset: 4px; }
.work-foot { display: none; }

.l-work.h-on { padding: 0; }
.l-work.h-on .work-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
  display: flex; flex-direction: column; justify-content: center; padding-top: 88px;
}
.l-work.h-on .section-head { margin-bottom: clamp(24px, 5vh, 56px); width: 100%; }
.l-work.h-on .work-grid {
  display: flex; align-items: flex-start; gap: clamp(24px, 3vw, 56px); width: max-content; max-width: none;
  margin: 0; padding: 0 var(--edge); will-change: transform;
}
.l-work.h-on .work-grid > * { flex: none; height: 100%; width: auto; margin: 0; aspect-ratio: 4 / 5; }
.l-work.h-on .work-grid > :nth-child(even) { height: 80%; align-self: flex-end; }
/* Cards settle to full size and brightness as they reach the centre (scale tops out at 1.0) */
.l-work.h-on [data-fx="tile"][style] { clip-path: none; opacity: calc(1 - min(var(--a, 0), 1) * 0.55);
  transform: translateY(calc(var(--f, 0) * 24px)) scale(calc(1 - min(var(--a, 0), 1) * 0.08)); }
.l-work.h-on .photo-tile img, .l-work.h-on [data-fx="tile"][style] img { height: 100%; aspect-ratio: auto; transition: none; transform: none; }
.l-work.h-on .work-foot { display: block; width: 100%; margin-top: clamp(24px, 4vh, 48px); }
.work-progress { height: 1px; background: var(--stone-200); }
.work-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px rgba(201, 162, 77, 0.6); }

/* ---------- About ---------- */
.l-about { background: var(--stone-50); padding: var(--sec) 0; }
.about-grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 128px); }
.about-portrait { background: radial-gradient(80% 70% at 50% 40%, #1b1810, #000); border: 1px solid var(--line); box-shadow: 0 40px 120px -40px rgba(201, 162, 77, 0.25); }
.about-name { font-size: clamp(4rem, 9vw, 8rem); line-height: 0.9; letter-spacing: -0.035em; font-weight: 500; margin: 0 0 var(--sp-5); }
/* Her own two-paragraph bio: reading size, not display size */
.about-text { font-family: var(--font-display); font-size: clamp(1.15rem, 1.35vw, 1.32rem); line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.about-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); margin: var(--sp-6) 0 var(--sp-7); max-width: 460px; }
.about-badges span { background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 12px 0; font-size: 0.92rem; font-weight: 400; color: var(--stone-700); }

/* ---------- Visit ---------- */
.l-visit { padding: var(--sec) 0 calc(var(--sec) * 0.6); }
.visit-address { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; margin: var(--sp-5) 0 var(--sp-2); }
.visit-map { border: 1px solid var(--line); border-radius: 8px; }
.visit-map svg rect { fill: #0e0d0a; }
.visit-map svg path[stroke="#fff"] { stroke: #1f1c16; }
.visit-map-label { border: 1px solid var(--line); box-shadow: none; }

/* ---------- Closing CTA ---------- */
.l-cta {
  max-width: none; margin: 0 var(--sp-5); border-radius: 8px; padding: clamp(112px, 20vh, 220px) var(--sp-6);
  background: #0a0907; border: 1px solid var(--line); animation: none; isolation: isolate;
}
.l-cta::before {
  content: ""; position: absolute; inset: -30% 10% 30%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 162, 77, 0.32), transparent);
  opacity: var(--in, 1);
}
.l-cta h2 { font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.l-cta p { color: var(--ink-soft); }
.l-cta .btn-light { background: var(--clay); color: #000; }
.sparkle { display: none; }
.float-book { color: #000; }

/* ---------- Scroll-linked motion ----------
   [style] keeps these inert until JS sets --v, and outranks the older .reveal.in rules. */
[data-fx][style] { --in: clamp(0, calc(var(--v) * 3.2), 1); }

[data-fx="rise"][style] { opacity: var(--in); transform: translateY(calc((1 - var(--in)) * 56px)); transition: none; }
/* Headings rise out of a mask, line by line */
[data-fx="mask"][style] { opacity: 1; transition: none;
  clip-path: inset(-0.3em -0.3em calc((1 - var(--in)) * 100% - 0.3em) -0.3em);
  transform: translateY(calc((1 - var(--in)) * 0.45em)); }
/* Prices slide up out of their own mask after the row arrives */
[data-fx][style] .svc-mask b { transform: translateY(calc((1 - clamp(0, calc(var(--v) * 3.2 - 0.35), 1)) * 110%)); }

[data-fx="tile"][style] {
  opacity: 1; transition: none;
  clip-path: inset(calc((1 - var(--in)) * 100%) 0 0 0);
  transform: translateY(calc((0.5 - var(--v)) * var(--drift, 30px)));
}
.work-grid > [data-fx="tile"]:nth-child(3n+2) { --drift: -70px; }
.work-grid > [data-fx="tile"]:nth-child(3n) { --drift: 50px; }
[data-fx="tile"][style] img { transform: none; transition: none; }

/* Portrait opens from a narrow arch to full, image drifts inside */
[data-fx="portrait"][style] { opacity: 1; transform: none; transition: none;
  clip-path: inset(calc((1 - var(--in)) * 14%) calc((1 - var(--in)) * 16%) round 200px 200px var(--r-xl) var(--r-xl)); }
[data-fx="portrait"][style] img { transform: translateY(calc((var(--v) - 0.5) * -50px)) scale(1.08); } /* keep the overscan small */

[data-fx="grow"][style] { opacity: 1; transform: scale(calc(0.9 + var(--in) * 0.1)); transition: none; }
[data-fx="map"][style] { opacity: var(--in); transform: perspective(900px) rotateX(calc((1 - var(--in)) * 18deg)) scale(calc(0.92 + var(--in) * 0.08)); transition: none; }

/* Phones: photos stay still. No clip/drift on gallery tiles, no arch-open or parallax on the portrait;
   the portrait only fades in once (.reveal-scale without the scale). */
@media (max-width: 700px) {
  [data-fx="tile"][style], [data-fx="portrait"][style] { clip-path: none; transform: none; }
  [data-fx="tile"][style] img, [data-fx="portrait"][style] img { transform: none; }
  .about-portrait.reveal-scale { transform: none; }
}

/* ---------- Tablets & phones ---------- */
@media (max-width: 900px) {
  .process-wrap { grid-template-columns: 1fr; gap: var(--sp-7); }
  .process-head { position: static; }
  .process-grid { padding-left: 40px; }
  .process-line { display: block; }
  .process-step::before { left: -44px; }
  .about-grid { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 36px 1fr auto; gap: var(--sp-2) var(--sp-4); padding: var(--sp-6) 0; }
  .svc-num { grid-area: 1 / 1; } .svc-name { grid-area: 1 / 2; } .svc-price { grid-area: 1 / 3; }
  .svc-desc { display: block; grid-area: 2 / 2 / 3 / 4; font-size: 0.9rem; }
  .l-work .work-grid { grid-template-columns: 1fr 1fr; max-width: none; gap: var(--sp-3); }
  .l-work .work-grid > :nth-child(n) { margin-top: 0; }
  .l-work .work-grid > :nth-child(2n) { margin-top: var(--sp-7); }
  .work-grid > [data-fx="tile"]:nth-child(n) { --drift: 0px; }
  .work-grid > [data-fx="tile"]:nth-child(2n) { --drift: -40px; }
}
@media (max-width: 700px) {
  :root { --sec: 96px; }
  .l-statement { height: 220vh; }
  .l-hero .container { gap: var(--sp-6); }
  .l-hero { padding-top: var(--sp-5); }
  .statement-text { font-size: clamp(2rem, 9.4vw, 3rem); }
  .svc-mask b { font-size: 1.7rem; }
  .svc-name { font-size: 1.75rem; }
  .about-name { font-size: clamp(3.6rem, 20vw, 5rem); }
  .about-badges { grid-template-columns: 1fr; }
  .visit-address { font-size: 2rem; }
}
@media (max-width: 480px) {
  .l-cta { margin-left: var(--sp-3); margin-right: var(--sp-3); padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .l-services .section-head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-light { animation: none; translate: none; opacity: 1; }
  .statement-text span { color: var(--ink); }
  .statement-text { transform: none; }
  .statement-pin::before { opacity: 0.6; transform: none; }
  .l-statement { height: auto; padding: var(--sec) 0; }
  .statement-pin { position: static; height: auto; }
  .l-hero .container > div:first-child, .hero-set, .scroll-cue { opacity: 1; transform: none; }
  .process-head { position: static; }
  .process-step .process-dot { color: var(--clay); }
}

/* ---------- Large screens: use the width instead of a phone-like column ---------- */
@media (min-width: 1280px) {
  :root { --cw: 1240px; }
  .container, .l-cta { max-width: 1240px; }
  .l-cta { margin: 0 auto; }
  .l-hero .container { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); }
}
@media (min-width: 1680px) {
  :root { --cw: 1480px; }
  .container, .l-cta { max-width: 1480px; }
  .container { padding: 0 48px; }
  body { font-size: 17px; }
  .wm-name { font-size: clamp(6rem, 7vw, 9.5rem); }
  .wm-by { font-size: clamp(4.4rem, 4.8vw, 6.4rem); }
  .hero-tagline { font-size: 2.3rem; }
  .l-hero .lede { font-size: 1.2rem; max-width: 52ch; }
  .big-head { font-size: clamp(3.4rem, 3.8vw, 5rem); }
  .svc-name { font-size: 3.3rem; }
  .statement-text { font-size: clamp(5rem, 5.4vw, 6.6rem); }
  .site-header .nav-links a { font-size: 1rem; }
}

/* Gallery tiles capped at 290px (photos are 1085-1600px, sharp on high-DPI screens). */
#work .work-grid { grid-template-columns: repeat(3, minmax(0, 290px)); justify-content: center; gap: var(--sp-4); max-width: calc(3 * 290px + 2 * var(--sp-4)); margin-left: auto; margin-right: auto; }
#work .photo-tile { max-width: 290px; }
@media (max-width: 700px) { #work .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
/* Pinned horizontal gallery (wide screens): same ≤290px cards, laid out as a sideways rail */
#work.h-on .work-grid { max-width: none; height: min(362px, 50vh); gap: clamp(28px, 3vw, 56px); }
#work.h-on .photo-tile { max-width: 290px; }


/* ---------- 3D logo: layered "coin" used by the opening intro ---------- */
.coin { position: relative; width: 100%; aspect-ratio: 1440 / 560; transform-style: preserve-3d; }
.coin img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.coin-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.coin-sheen {
  position: absolute; inset: 0; pointer-events: none; transform: translateZ(0.5px); backface-visibility: hidden;
  -webkit-mask: url(/assets/brand/capricci-logo.png) center / contain no-repeat; mask: url(/assets/brand/capricci-logo.png) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 244, 210, 0.95) 50%, transparent 65%);
  background-size: 300% 100%; background-position: 150% 0; animation: sheen 6s ease-in-out 1.2s infinite;
}
@keyframes sheen { 0% { background-position: 150% 0; } 35%, 100% { background-position: -50% 0; } }

/* Opening intro overlay (only on the homepage) */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #000;
  animation: introFailsafe 0s linear 6s forwards; }
.intro::before { content: ""; position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 77, 0.22), transparent 65%); filter: blur(10px); }
.intro-fade { perspective: 1400px; position: relative; }
.intro .coin { width: min(78vw, 760px); will-change: transform; }
html.intro-on, html.intro-on body { overflow: hidden; }
/* The intro coin lands exactly on the hero logo; the real logo appears as the overlay is removed. */
html.intro-on .wm-logo { visibility: hidden; }
/* Keep the scrollbar's space while the intro locks scrolling, so the logo doesn't shift at the handoff. */
html:has(body.landing) { scrollbar-gutter: stable; }
@keyframes introFailsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  .coin-sheen { animation: none; display: none; }
}

/* Hero wordmark: her real logo (the intro coin flies onto it). */
.wm-logo { display: block; width: min(100%, 560px); height: auto; filter: drop-shadow(0 0 24px rgba(201, 162, 77, 0.22)); }
@media (max-width: 700px) { .wm-logo { width: min(100%, 360px); } }