/* Shared mechanics for the concepts, and (Oct 28) the design tokens of the final design, Gallery Wall II. */
@property --r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: var(--t-l); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }
::selection { background: var(--select, var(--c-select)); color: var(--c-night-2); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ground); color: var(--ink); }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:root {
  --serif: 'ivypresto-display', 'IvyPresto Display', 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(18px, 2.6vw, 40px);
  /* Design tokens (Oct 28 cleanup): the one palette, type ramp and radius set for Gallery Wall II. Documented in DESIGN.md. */
  --c-ink: #2a2521; --c-soft: #625951; --c-ground: #ebe6de; --c-white: #ffffff; --c-bone: #f5f0e8; --c-bone-2: #efede8;
  --c-night: #121110; --c-night-2: #1b1714; --c-umber: #24201c; --c-black: #000000;
  --c-dahlia: #e59b97; --c-select: #e5a49c; --c-error: #b4472f; --c-taupe: #b7ab9b; --c-sand: #ddd6cb;
  --c-line: rgba(42, 37, 33, .16); --c-line-soft: rgba(42, 37, 33, .1); --c-ink-35: rgba(42, 37, 33, .35);
  --c-shade-1: rgba(0, 0, 0, .35); --c-shade-2: rgba(0, 0, 0, .45); --c-shade-3: rgba(0, 0, 0, .55);
  --c-veil-0: rgba(18, 15, 12, .18); --c-veil-1: rgba(18, 15, 12, .45); --c-veil-2: rgba(18, 15, 12, .58); --c-night-veil: rgba(24, 21, 18, .96);
  --c-bone-15: rgba(245, 240, 232, .15); --c-bone-28: rgba(245, 240, 232, .28); --c-bone-70: rgba(245, 240, 232, .7);
  --c-glass: rgba(238, 233, 225, .85); --c-glass-solid: rgba(235, 230, 222, .94);
  --c-white-16: rgba(255, 255, 255, .16); --c-white-35: rgba(255, 255, 255, .35); --c-white-55: rgba(255, 255, 255, .55); --c-white-70: rgba(255, 255, 255, .7); --c-white-92: rgba(255, 255, 255, .92);
  --d-xl: clamp(54px, 5.8vw, 98px); --d-l: clamp(44px, 4.9vw, 80px); --d-m: clamp(36px, 3.6vw, 58px); --d-s: clamp(30px, 2.8vw, 46px); --d-xs: clamp(24px, 2.2vw, 36px);
  --d-menu: clamp(40px, 12vw, 64px); --d-name: 24px; --d-name-m: 19px;
  --lead-l: clamp(20px, 1.75vw, 28px); --lead-s: clamp(17px, 1.45vw, 23px);
  --t-xs: 12px; --t-s: 13px; --t-m: 14px; --t-l: 15px; --t-nav: 16px; --t-xl: 17.5px; --t-xl-m: 16.5px; --t-icon: 20px;
  --radius-xs: 2px; --radius-s: 8px; --radius-pill: 99px;
}

/* ---------- Navigation over imagery ---------- */
.nav { position: fixed; z-index: 40; inset: 0 0 auto; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); padding: calc(var(--pad) * .7) var(--pad); pointer-events: none; transition: color .5s var(--ease); }
.nav > * { pointer-events: auto; }
.nav-logo { position: relative; display: block; width: var(--logo-w, 190px); margin-right: auto; }
.nav-logo img { width: 100%; height: auto; transition: opacity .5s var(--ease); }
.nav-logo .logo-on-light { position: absolute; inset: 0; opacity: 0; }
.nav[data-tone="dark"] .logo-on-dark { opacity: 0; }
.nav[data-tone="dark"] .logo-on-light { opacity: 1; }
.nav[data-tone="light"] { color: var(--nav-light, var(--c-bone)); text-shadow: 0 1px 14px var(--c-shade-1); }
.nav[data-tone="light"] .nav-logo img { filter: drop-shadow(0 1px 3px var(--c-shade-2)) drop-shadow(0 0 18px var(--c-shade-1)); }
.nav[data-tone="dark"] .nav-logo img { filter: drop-shadow(0 0 14px var(--c-white-55)); }
.nav[data-tone="dark"] { color: var(--nav-dark, var(--c-umber)); }
.nav-main { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.nav-main a, .nav-shop, .nav-menu { font-size: var(--nav-size, 16px); letter-spacing: .03em; padding: 8px 0; position: relative; }
.nav-main a::after, .nav-shop::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav-main a:hover::after, .nav-main a[aria-current]::after, .nav-shop:hover::after { transform: scaleX(1); }
.nav-shop { opacity: .78; padding-left: clamp(16px, 2vw, 28px); }
.nav-shop::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: currentColor; opacity: .5; }
.nav-menu { display: none; }
@media (max-width: 760px) {
  .nav-main, .nav-shop { display: none; }
  .nav-menu { display: block; }
  .nav { --logo-w: var(--logo-w-m, 118px); }
}
.menu { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; justify-content: center; padding: 96px var(--pad) 40px; background: var(--menu-ground, var(--ground)); color: var(--menu-ink, var(--ink)); }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font-family: var(--serif); font-weight: 300; font-size: var(--d-menu); line-height: 1.08; letter-spacing: -.01em; }
.menu .menu-shop { font-family: var(--sans); font-size: var(--t-l); letter-spacing: .02em; margin-top: 28px; opacity: .8; }
html.menu-open .nav { color: var(--menu-ink, var(--ink)); }
html.menu-open .nav .logo-on-dark { opacity: var(--menu-logo-dark, 1); }
html.menu-open .nav .logo-on-light { opacity: var(--menu-logo-light, 0); }
html.menu-open { overflow: hidden; }

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 60; max-width: min(92vw, 520px); padding: 12px 16px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; font-size: var(--t-s); line-height: 1.4; background: var(--c-night-2); color: var(--c-bone); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Pictures are visible by default; on first sight they settle. */
[data-arrive] { transition: transform 1.6s var(--ease), filter 1.6s var(--ease); }
.js [data-arrive]:not(.seen) { transform: scale(1.035); filter: saturate(.85); }
@media (prefers-reduced-motion: reduce) { .js [data-arrive]:not(.seen) { transform: none; filter: none; } }

/* ---------- Inquiry form ---------- */
.ask { display: grid; gap: 22px; }
.ask-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ask-row--end { align-items: end; grid-template-columns: 1fr auto; }
.field { display: grid; gap: 6px; font-size: var(--t-xs); letter-spacing: .02em; }
.field span { opacity: .78; }
.field input, .field textarea, .field select { width: 100%; font: inherit; font-size: var(--t-nav); letter-spacing: 0; color: inherit; background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 8px 0 9px; resize: vertical; }
.field input::placeholder { color: inherit; opacity: .45; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-width: 2px; padding-bottom: 8px; }
.field.bad input, .field.bad textarea { border-bottom-color: var(--alert, var(--c-error)); }
.ask-kind { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ask-kind legend { font-size: var(--t-xs); letter-spacing: .02em; opacity: .78; margin-bottom: 10px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 7px 13px 8px; font-size: var(--t-s); border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: var(--radius-pill); transition: background .3s, color .3s, border-color .3s; }
.chip input:checked + span { color: var(--chip-on, var(--ground)); background: var(--chip-bg, currentColor); border-color: transparent; }
.chip input:focus-visible + span { outline: 1.5px solid currentColor; outline-offset: 3px; }
.send { font-size: var(--t-m); letter-spacing: .03em; padding: 12px 26px 13px; border: 1px solid currentColor; border-radius: var(--radius-pill); transition: background .35s var(--ease), color .35s var(--ease); }
.send:hover { color: var(--ground); background: var(--ink); }
.ask-note { font-size: var(--t-s); min-height: 1.4em; opacity: .85; }
.ask-note.bad { color: var(--alert, var(--c-error)); opacity: 1; }
@media (max-width: 560px) { .ask-row { grid-template-columns: 1fr; } .ask-row--end { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Line → photograph → materials ---------- */
.rv { position: relative; overflow: hidden; color: var(--rv-label, currentColor); }
.rv-stage { position: absolute; inset: 0; overflow: hidden; background: var(--rv-ground, var(--c-bone-2)); }
.rv-photo, .rv-lines { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.rv-lines {
  --r: 0%;
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), var(--c-black) var(--r), transparent calc(var(--r) + 16%));
  mask-image: radial-gradient(circle at var(--cx) var(--cy), var(--c-black) var(--r), transparent calc(var(--r) + 16%));
  transition: --r 2.4s cubic-bezier(.33, .08, .2, 1), opacity 1.1s var(--ease);
}
.rv--light .rv-lines { mix-blend-mode: multiply; }
.rv--dark .rv-lines { mix-blend-mode: screen; }
.rv.rv-drawn .rv-lines { --r: 150%; }
.rv-photo {
  --p: 0%; opacity: 0; filter: blur(10px) saturate(0) contrast(.9);
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), var(--c-black) var(--p), transparent calc(var(--p) + 30%));
  mask-image: radial-gradient(circle at var(--cx) var(--cy), var(--c-black) var(--p), transparent calc(var(--p) + 30%));
  transition: opacity 1.4s var(--ease), filter 2.6s var(--ease), --p 2.2s cubic-bezier(.3, .1, .2, 1);
}
.rv[data-state="1"] .rv-photo, .rv[data-state="2"] .rv-photo { opacity: 1; filter: none; --p: 170%; }
.rv[data-state="1"] .rv-lines { opacity: 0; transition-delay: 0s, .9s; }
.rv[data-state="2"] .rv-lines { opacity: var(--rv-lines-in-materials, 0); }
.rv--dark[data-state="2"] .rv-photo { filter: brightness(.58) saturate(.9); }
.rv-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rv-leaders path { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); vector-effect: non-scaling-stroke; }
.rv-leaders circle { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.rv-labels li { position: absolute; transform: translate(0, -50%); white-space: nowrap; opacity: 0; transition: opacity .7s var(--ease) .35s; font-family: var(--rv-label-font, var(--serif)); font-style: var(--rv-label-style, italic); font-size: var(--rv-label-size, 19px); line-height: 1; letter-spacing: .005em; }
.rv-labels li[data-align="right"] { transform: translate(-100%, -50%); }
.rv[data-state="2"] .rv-leaders path { stroke-dashoffset: 0; }
.rv[data-state="2"] .rv-leaders circle { opacity: 1; transform: scale(1); }
.rv[data-state="2"] .rv-labels li { opacity: 1; }
.rv[data-state="2"] .rv-leaders path:nth-of-type(2), .rv[data-state="2"] .rv-labels li:nth-child(2) { transition-delay: .12s; }
.rv[data-state="2"] .rv-leaders path:nth-of-type(3), .rv[data-state="2"] .rv-labels li:nth-child(3) { transition-delay: .24s; }
.rv[data-state="2"] .rv-leaders path:nth-of-type(4), .rv[data-state="2"] .rv-labels li:nth-child(4) { transition-delay: .36s; }
.rv[data-state="2"] .rv-leaders path:nth-of-type(5), .rv[data-state="2"] .rv-labels li:nth-child(5) { transition-delay: .48s; }
.rv[data-state="2"] .rv-leaders path:nth-of-type(6), .rv[data-state="2"] .rv-labels li:nth-child(6) { transition-delay: .6s; }
.rv.rv-instant *, .rv.rv-instant { transition: none !important; }
.rv-ui { position: absolute; z-index: 3; left: var(--pad); bottom: calc(var(--pad) * .8); right: var(--pad); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; color: var(--rv-ui, currentColor); font-size: var(--t-s); letter-spacing: .02em; }
.rv-states { display: flex; gap: 16px; }
.rv-states button { padding: 6px 0; opacity: .7; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.rv-states button:hover { opacity: 1; }
.rv-states button[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; }
.rv-replay { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 50%; opacity: .8; }
.rv-replay:hover { opacity: 1; }
.rv-title { position: absolute; z-index: 4; right: var(--pad); bottom: calc(var(--pad) * 1.1); max-width: 30ch; text-align: right; color: var(--rv-title, var(--c-umber)); pointer-events: none; transition: color .8s var(--ease); }
@media (max-width: 760px) { .rv-title { left: var(--pad); right: var(--pad); top: 76px; bottom: auto; text-align: left; color: var(--c-bone) !important; text-shadow: 0 1px 14px var(--c-shade-3); } }
.rv-note { flex-basis: 100%; font-size: var(--t-xs); opacity: .75; max-width: 46ch; }
@media (max-width: 720px) { .rv { --rv-label-size: 15px; } .rv-states { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .rv * { transition-duration: .01s !important; transition-delay: 0s !important; } }