/* ------------------------------------------------------------------
   Zak Stevens — Sculpture
   Design system: warm marble-white ground, warm ink, one accent (gold
   drawn from the kintsugi-style fillings). Hairlines are the only
   ornament. Square edges. No shadows on chrome.
   ------------------------------------------------------------------ */

:root {
  --paper: #f3f0ea;
  --paper-2: #ebe7df;
  --ink: #1c1b18;
  --ink-2: #4c4a45;
  --stone: #8b8882;
  --line: #d6d1c7;
  --gold: #b5903a;
  --gold-2: #d7b566;
  --night: #131210;
  --night-2: #1d1b18;
  --night-ink: #efeae0;
  --night-stone: #8f8a80;
  --night-line: #2c2924;

  /* One typeface: Plus Jakarta Sans, Medium (500) throughout.
     --display drives headings, titles and prices; --sans drives body and UI.
     Point either at another family to change it site-wide. */
  --display: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight: 500;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: var(--weight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight); }
button { font: inherit; }
::selection { background: rgba(181, 144, 58, .25); }

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

/* ---------- type ---------- */
.serif { font-family: var(--display); }
.display {
  font-family: var(--display);
  font-weight: var(--weight);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.display em { font-style: italic; }
.h-xl { font-size: clamp(46px, 7.6vw, 118px); }
.h-lg { font-size: clamp(38px, 5vw, 76px); }
.h-md { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.035em; }
.h-sm { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.03em; }

.lede {
  font-family: var(--display);
  font-size: clamp(19px, 1.65vw, 24px);
  line-height: 1.38;
  letter-spacing: -.02em;
}
.body-lg { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.65; }
.muted { color: var(--stone); }

.label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}
.label--ink { color: var(--ink); }
.label--gold { color: var(--gold); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.section { padding-block: clamp(72px, 10vw, 160px); }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }
.dark { background: var(--night); color: var(--night-ink); }
.dark .label { color: var(--night-stone); }
.dark .muted { color: var(--night-stone); }
.dark .rule { border-color: var(--night-line); }

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  color: var(--ink);
  transition: transform .45s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck { background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.site-head.is-hidden { transform: translateY(-101%); }
body.dark .site-head { color: var(--night-ink); }
body.dark .site-head.is-stuck { background: color-mix(in srgb, var(--night) 92%, transparent); border-bottom-color: var(--night-line); }
.brand { font-family: var(--display); font-size: 18px; letter-spacing: -.02em; line-height: 1; }
.brand small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; opacity: .8; }
.nav { display: flex; gap: clamp(18px, 2.4vw, 36px); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.nav a { position: relative; padding-block: 4px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav-toggle { display: none; background: none; border: 0; color: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 0; cursor: pointer; }

@media (max-width: 760px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .site-head.is-open, body.dark .site-head.is-open { color: var(--ink); background: var(--paper); flex-wrap: wrap; height: 100dvh; align-content: flex-start; transform: none; }
  .site-head.is-open .nav { display: flex; flex-direction: column; width: 100%; gap: 0; margin-top: 48px; }
  .site-head.is-open .nav a { font-family: var(--display); font-size: 32px; text-transform: none; letter-spacing: -.035em; padding: 14px 0; border-top: 1px solid var(--line); }
  .site-head.is-open .nav a::after { display: none; }
}

/* ---------- hero (home) ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: repeat(12, 1fr);
  align-items: end; padding: 0 var(--gutter) clamp(28px, 4vw, 56px);
  overflow: hidden;
}
.hero__stage {
  position: absolute; inset: 0;
  display: block;
}
.hero__stage canvas { width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.hero__stage canvas:active { cursor: grabbing; }
.hero__copy { position: relative; grid-column: 1 / span 12; z-index: 2; pointer-events: none; }
.hero__copy > * { pointer-events: auto; }
.hero__title { margin-top: 14px; max-width: 8ch; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-end; justify-content: space-between;
  margin-top: clamp(24px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--line);
}
.hero__meta dl { display: grid; grid-template-columns: repeat(3, auto); gap: 0 clamp(24px, 3vw, 56px); margin: 0; }
.hero__meta dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-bottom: 6px; }
.hero__meta dd { margin: 0; font-family: var(--display); font-size: 18px; line-height: 1.1; letter-spacing: -.02em; }
.hero__hint { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); display: flex; align-items: center; gap: 12px; }
.hero__hint::before { content: ""; width: 1px; height: 56px; background: var(--line); }
@media (max-width: 900px) {
  /* stacked: the 3D stage on top, the copy beneath it (no overlap) */
  .hero { display: block; min-height: 0; padding-top: 64px; }
  .hero__stage { position: relative; inset: auto; height: 60svh; min-height: 380px; margin-inline: calc(var(--gutter) * -1); }
  .hero__hint { display: none; }
  .hero__title { margin-top: 10px; }
  .hero__meta { margin-top: 20px; }
  .hero__meta dl { grid-template-columns: repeat(2, auto); gap: 14px 28px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--gold { border-color: var(--gold); color: var(--gold); }
.btn--gold:hover { background: var(--gold); color: var(--ink); }
.btn .arr { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.dark .btn { border-color: var(--night-ink); color: var(--night-ink); }
.dark .btn:hover { background: var(--night-ink); color: var(--night); }
.dark .btn--gold { border-color: var(--gold-2); color: var(--gold-2); }
.dark .btn--gold:hover { background: var(--gold-2); color: var(--night); }
.link { border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .2s; }
.link:hover { color: var(--gold); }

/* ---------- work index / grid ---------- */
.work-list { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(48px, 6vw, 96px); }
.work { display: block; }
.work__media { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 4 / 5; }
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.work:hover .work__media img { transform: scale(1.025); }
.work__media--wide { aspect-ratio: 3 / 2; }
.work__media--square { aspect-ratio: 1; }
.work__cap { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 14px; }
.work__title { font-family: var(--display); font-size: clamp(18px, 1.45vw, 22px); line-height: 1.2; letter-spacing: -.025em; }
.work__title em { font-style: italic; }
.work__sub { font-size: 12px; letter-spacing: .06em; color: var(--stone); margin-top: 4px; }
.work__price { font-family: var(--display); font-size: 16px; white-space: nowrap; letter-spacing: -.01em; }
.span-4 { grid-column-end: span 4; } .span-5 { grid-column-end: span 5; } .span-6 { grid-column-end: span 6; }
.span-7 { grid-column-end: span 7; } .span-8 { grid-column-end: span 8; } .span-12 { grid-column-end: span 12; }
.start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; }
@media (max-width: 900px) {
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column-end: span 6; }
  .start-2, .start-3, .start-7, .start-8, .start-9 { grid-column-start: auto; }
  .work[style] { margin-top: 0 !important; }
}
@media (max-width: 600px) {
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column-end: span 12; }
}

/* ---------- section head ---------- */
.sec-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; align-items: end; margin-bottom: clamp(32px, 4vw, 64px); }
.sec-head .label { grid-column: 1 / span 3; }
.sec-head .display { grid-column: 4 / span 8; }
.sec-head .sec-aside { grid-column: 9 / span 4; justify-self: end; }
@media (max-width: 900px) {
  .sec-head { row-gap: 14px; }
  .sec-head .label, .sec-head .display, .sec-head .sec-aside { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- viewer (detail page) ---------- */
.viewer {
  position: relative; background: var(--paper-2);
  aspect-ratio: 4 / 5; overflow: hidden;
}
.viewer--tall { aspect-ratio: 3 / 4; }
.viewer canvas { width: 100%; height: 100%; touch-action: none; cursor: grab; }
.viewer canvas:active { cursor: grabbing; }
.viewer__ui { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.viewer__ui > * { pointer-events: auto; }
.viewer__hint { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.viewer__views { display: flex; gap: 6px; }
.viewer__views button { background: transparent; border: 1px solid var(--line); color: var(--ink-2); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; cursor: pointer; transition: border-color .2s, color .2s; }
.viewer__views button:hover, .viewer__views button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.viewer--night { background: var(--night-2); }
.viewer--night .viewer__hint { color: var(--night-stone); }
.viewer--night .viewer__views button { border-color: var(--night-line); color: var(--night-stone); }
.viewer--night .viewer__views button:hover, .viewer--night .viewer__views button[aria-pressed="true"] { border-color: var(--night-ink); color: var(--night-ink); }

@media (max-width: 600px) {
  .viewer__ui { left: 10px; right: 10px; bottom: 10px; }
  .viewer__ui .viewer__hint:not(:only-child) { display: none; }
  .viewer__views { width: 100%; gap: 4px; }
  .viewer__views button { flex: 1; padding: 10px 2px; min-height: 40px; background: color-mix(in srgb, var(--paper-2) 80%, transparent); }
}

/* ---------- piece page ---------- */
.piece { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.piece__stage { grid-column: 1 / span 7; position: sticky; top: 16px; }
.piece__stage .viewer { aspect-ratio: auto; height: min(calc(100svh - 96px), 920px); min-height: 480px; }
.piece__side { grid-column: 9 / span 4; padding-top: clamp(24px, 4vw, 56px); }
@media (max-width: 900px) {
  .piece__stage { grid-column: 1 / -1; position: relative; top: 0; }
  .piece__stage .viewer { height: min(78svh, 720px); }
  .piece__side { grid-column: 1 / -1; padding-top: 32px; }
}
.spec { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); padding-top: 3px; }
.spec dd { margin: 0; }
.price { font-family: var(--display); font-size: clamp(30px, 2.6vw, 38px); line-height: 1; letter-spacing: -.035em; }
.price small { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-left: 10px; vertical-align: middle; }
.story { font-family: var(--display); font-size: clamp(20px, 1.85vw, 27px); line-height: 1.32; letter-spacing: -.025em; text-wrap: pretty; }
.story em { font-style: italic; color: var(--gold); }
.note { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.note--placeholder { border: 1px dashed var(--gold); padding: 12px 14px; color: var(--gold); }

/* ---------- photo gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; background: var(--paper-2); }
.gallery figcaption { font-size: 12px; letter-spacing: .04em; color: var(--stone); margin-top: 10px; }
.g-3 { grid-column-end: span 3; } .g-4 { grid-column-end: span 4; } .g-5 { grid-column-end: span 5; } .g-6 { grid-column-end: span 6; } .g-7 { grid-column-end: span 7; } .g-8 { grid-column-end: span 8; }
.g-s2 { grid-column-start: 2; } .g-s3 { grid-column-start: 3; } .g-s4 { grid-column-start: 4; } .g-s7 { grid-column-start: 7; } .g-s8 { grid-column-start: 8; } .g-s9 { grid-column-start: 9; }
.g-mt { margin-top: clamp(48px, 8vw, 140px); }
@media (max-width: 900px) {
  .g-3, .g-4, .g-5, .g-6, .g-7, .g-8 { grid-column-end: span 6; }
  .g-s2, .g-s3, .g-s4, .g-s7, .g-s8, .g-s9 { grid-column-start: auto; }
  .g-mt { margin-top: 0; }
}
@media (max-width: 600px) {
  .g-3, .g-4 { grid-column-end: span 6; }
  .g-5, .g-6, .g-7, .g-8 { grid-column-end: span 12; }
}

/* ---------- figures (small works) ---------- */
.figure-row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: 48px; align-items: start; }
.figure-card { grid-column: span 4; }
.figure-card .viewer { aspect-ratio: 4 / 5; }
.figure-card__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .figure-card { grid-column: span 6; } }
@media (max-width: 600px) { .figure-card { grid-column: span 12; } }

/* ---------- about ---------- */
.bio { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; }
.bio__portrait { grid-column: 1 / span 5; }
.bio__text { grid-column: 7 / span 6; }
.bio__text p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; }
.bio__text p + p { margin-top: 1.2em; }
.bio__text p.lede { font-size: clamp(20px, 1.85vw, 27px); line-height: 1.32; margin-bottom: 1.2em; }
@media (max-width: 900px) { .bio__portrait, .bio__text { grid-column: 1 / -1; } }

.creds { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: 0; border-top: 1px solid var(--line); }
.cred { grid-column: span 4; padding: 28px 0 36px; border-bottom: 1px solid var(--line); }
.cred h3 { font-family: var(--display); font-size: 21px; line-height: 1.2; letter-spacing: -.025em; margin: 10px 0 12px; }
.cred p { font-size: 15px; color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .cred { grid-column: span 6; } }
@media (max-width: 600px) { .cred { grid-column: span 12; } }

.cv { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cv li { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cv li span:first-child { color: var(--stone); font-variant-numeric: tabular-nums; }
.cv em.serif { font-size: 1em; margin-right: 2px; }
.cv li.placeholder { color: var(--gold); border-bottom-style: dashed; }

/* ---------- studio strip ---------- */
.strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.5vw, 24px); align-items: end; }
.strip figure { margin: 0; }
.strip figcaption { font-size: 12px; letter-spacing: .04em; color: var(--night-stone); margin-top: 10px; }
.strip img { width: 100%; height: auto; }

/* ---------- contact / finale ---------- */
.finale { padding-block: clamp(80px, 12vw, 200px); }
.finale .display { max-width: 12ch; }
.finale__row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: 40px; align-items: end; margin-top: clamp(32px, 5vw, 72px); }
.finale__row > .col-a { grid-column: 1 / span 6; }
.finale__row > .col-b { grid-column: 8 / span 5; }
@media (max-width: 900px) { .finale__row > .col-a, .finale__row > .col-b { grid-column: 1 / -1; } }
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--night-line); font-size: 15px; }
.contact-list li:last-child { border-bottom: 1px solid var(--night-line); }
.contact-list li span:first-child { color: var(--night-stone); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding-top: 4px; }
.contact-list a { border-bottom: 1px solid var(--night-line); transition: border-color .2s, color .2s; }
.contact-list a:hover { color: var(--gold-2); border-color: var(--gold-2); }

/* form */
.form { display: grid; gap: 0; }
.form label { display: block; }
.form .label { margin-bottom: 6px; }
.form input, .form textarea, .form select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: inherit;
  padding: 12px 0 14px; font: inherit; font-size: 17px; border-radius: 0; margin-bottom: 26px; outline: none;
}
.form input:focus, .form textarea:focus, .form select:focus { border-bottom-color: var(--gold); }
.form textarea { min-height: 120px; resize: vertical; }
.dark .form input, .dark .form textarea, .dark .form select { border-bottom-color: var(--night-line); }
.form select option { color: #000; }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding: 24px 0 32px; font-size: 12px; letter-spacing: .06em; color: var(--night-stone); border-top: 1px solid var(--night-line); }
.foot nav { display: flex; gap: 20px; }
.foot a:hover { color: var(--night-ink); }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
/* hero copy never waits for scripts */
.js .hero__copy .rv { opacity: 1; transform: none; transition: none; animation: heroIn .9s var(--ease) both; }
.js .hero__copy .rv-d1 { animation-delay: .1s; } .js .hero__copy .rv-d2 { animation-delay: .22s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .hero__copy .rv { opacity: 1; transform: none; transition: none; animation: none; }
  .work__media img, .btn .arr { transition: none; }
}

/* page top spacer for pages without hero */
.page-top { padding-top: clamp(120px, 16vw, 200px); }

/* small utility */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-6 { margin-top: 64px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 40px; }
.maxw-40 { max-width: 40ch; } .maxw-52 { max-width: 52ch; } .maxw-64 { max-width: 64ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Photography leads the mobile experience. */
.hero {display:flex;flex-direction:column;padding-top:108px;min-height:0;gap:28px;overflow:visible}
.hero__copy{display:contents}
.hero__copy>.label{order:0;margin:0}
.hero__title{order:1;max-width:11ch;font-size:clamp(44px,10vw,76px);margin:0}
.hero__stage.hero__photo{order:2;position:relative;inset:auto;width:100%;height:56svh;min-height:360px;margin:0;background:#171815}
.hero__photo>img{width:100%;height:100%;object-fit:contain}
.photo-caption{position:absolute;bottom:16px;left:20px;color:#f3f0ea;font-size:14px;padding:10px 0}
.hero__meta{order:3;width:100%;margin-top:0}
.hero__meta dl{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:16px}
.hero__meta dd{font-size:16px}
@media(min-width:901px){.hero{display:grid;grid-template-columns:1fr 1fr;gap:24px 6vw;min-height:94svh;padding-top:120px}.hero__copy{display:block;grid-column:1;grid-row:1}.hero__title{font-size:clamp(64px,7vw,112px);margin:22px 0 64px}.hero__stage.hero__photo{grid-column:2;grid-row:1;height:78svh;min-height:600px;max-height:1000px}.hero__meta{display:block}.hero__meta dl{margin-bottom:28px}.hero__copy>.label{font-size:12px}}

/* Mobile is the default composition; larger screens progressively expand it. */
:root{--stone:#68645c;--night-stone:#b0aaa0;--gold:#87651f}
html{scroll-padding-top:96px}body{overflow-x:clip}.menu-open{overflow:hidden}.label{font-size:12px;line-height:1.6}.brand small{font-size:11px}.btn{font-size:12px;min-height:48px;justify-content:center;text-align:center;line-height:1.5}.work__sub{font-size:14px;letter-spacing:0;line-height:1.5}.note,figcaption{font-size:14px!important;line-height:1.6}.muted{color:var(--stone)}.dark .muted{color:var(--night-stone)}.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.actions>*{min-width:0}.actions .note{flex-basis:100%}.site-head{padding-top:max(18px,env(safe-area-inset-top));background:var(--paper)}body.dark .site-head{background:var(--night)}.brand{min-height:44px;display:flex;flex-direction:column;justify-content:center}.nav-toggle{display:block;min-width:60px;min-height:44px;font-size:14px}.nav{display:none}.nav a{min-height:44px;align-content:center}.site-head.is-open,body.dark .site-head.is-open{color:var(--ink);background:var(--paper);flex-wrap:wrap;height:100dvh;align-content:flex-start;overflow-y:auto}.site-head.is-open .nav{display:flex;flex-direction:column;width:100%;gap:0;margin-top:32px}.site-head.is-open .nav a{font-size:clamp(23px,6vw,32px);text-transform:none;letter-spacing:-.03em;padding:15px 0;border-top:1px solid var(--line)}.site-head.is-open .nav a::after{display:none}.skip-link{position:fixed;top:-80px;left:16px;z-index:100;padding:12px;background:var(--paper);border:1px solid var(--ink)}.skip-link:focus{top:12px}.hero{padding-bottom:48px;gap:20px}.hero__title{font-size:clamp(40px,10.8vw,76px)}.hero__stage.hero__photo{height:52svh;min-height:340px}.hero__meta dl{gap:12px}.hero__meta dt{font-size:12px;letter-spacing:.08em}.hero__meta dd{font-size:14px;line-height:1.5}.photo-caption{background:#171815bf;padding:8px 12px;bottom:12px;left:12px}.hero__meta .actions{margin-top:24px}.work--offset{margin-top:0}.work__cap{gap:12px}.work__price{font-size:16px}.work__sub{margin-bottom:0}.commission-link{font-size:14px;display:inline-block;margin-top:16px}.studio-teaser{display:grid;gap:28px}.studio-teaser>div{max-width:38ch}.studio-teaser img{width:100%}.contact-email{font-size:clamp(18px,2vw,26px);letter-spacing:-.03em;overflow-wrap:anywhere;border-bottom:1px solid currentColor;display:inline-block;padding:8px 0}.foot{padding:24px var(--gutter) max(28px,env(safe-area-inset-bottom));font-size:14px}.foot nav{flex-wrap:wrap;gap:12px 24px}.foot nav a{padding:8px 0}.finale{padding-block:72px}.page-top{padding-top:120px}.piece-heading{margin-bottom:32px}.piece{display:block}.piece__stage{position:relative;top:0;min-width:0}.piece__side{padding-top:36px;min-width:0}.piece__side .btn{max-width:100%}.piece__side .price small{display:block;margin:16px 0 0;font-size:13px}.spec>div{grid-template-columns:minmax(90px,30%) 1fr;gap:12px}.spec dt{font-size:12px;letter-spacing:.08em}.spec dd{min-width:0}.model-note{margin:16px 0 0;color:var(--stone)}.sculpture-viewer{min-width:0}.model-stage{position:relative;background:#e9e6df;height:58svh;min-height:360px;max-height:720px;overflow:hidden}.model-poster{width:100%;height:100%;object-fit:contain;background:#171815}.model-stage canvas{display:none;width:100%;height:100%;touch-action:pan-y pinch-zoom;cursor:grab}.model-stage canvas:active{cursor:grabbing}.model-open,.model-photo{position:absolute;bottom:16px;left:16px;padding:12px 18px;min-height:48px;border:1px solid #f3f0ea99;background:#171815e6;color:#f3f0ea;font:inherit;font-size:14px;cursor:pointer}.model-photo{display:none;background:#f3f0eae6;color:#1c1b18;border-color:#c1bcb2}.model-tools{display:none;gap:12px;flex-wrap:wrap;padding-top:12px;align-items:center}.model-views{display:flex;flex-wrap:wrap;gap:6px}.model-tools button{min-height:44px;background:transparent;color:var(--ink);border:1px solid #b9b3a7;padding:8px 12px;font:inherit;font-size:13px;cursor:pointer}.model-tools button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.model-zoom{display:flex;gap:6px}.model-zoom button{font-size:21px;min-width:44px}.viewer-status{margin:12px 0 0;font-size:13px;color:var(--stone);line-height:1.6}.is-model .model-poster,.is-model .model-open{display:none}.is-model canvas,.is-model .model-photo{display:block}.is-model .model-tools{display:flex}.is-model .model-stage{background:radial-gradient(ellipse at 50% 40%,#f6f3ed,#e6e1d7)}.gallery--curated{row-gap:40px}.gallery--curated>figure{grid-column:1/-1!important;margin-top:0}.bio__portrait{margin:0}.bio__portrait img{width:100%}.bio figcaption{color:var(--stone);margin-top:12px}.cred h2{margin:12px 0}.cred p{font-size:16px}.contact-main{padding-bottom:80px}.contact-grid{display:grid;gap:40px}.form input,.form textarea,.form select{font-size:16px;min-height:48px}.form :focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}.form select{padding-right:24px}.dark .form input,.dark .form textarea,.dark .form select{border-color:#666058}.form .label{color:var(--night-stone);font-size:13px}.email-draft{margin-top:28px}.email-draft[hidden]{display:none}.email-draft label{font-size:14px}.email-draft textarea{font-size:14px}.grid>*{min-width:0}.bio,.creds{display:block}.creds{border-top:1px solid var(--line)}.section{padding-block:64px}.gallery .g-mt{margin-top:0}.gallery{row-gap:28px}.dark .gallery figcaption{color:var(--night-stone)}
@media(min-width:600px){.hero{gap:28px}.hero__meta dd{font-size:16px}.model-stage{height:64svh;max-height:800px}.gallery--curated{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.gallery--curated>figure{grid-column:auto!important}.gallery--curated>figure:nth-child(even){margin-top:64px}.model-tools{justify-content:space-between}.section{padding-block:88px}.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.cred{grid-column:auto}.cred p{font-size:16px}}
@media(min-width:901px){.nav-toggle{display:none}.nav{display:flex;font-size:12px;gap:clamp(16px,2.2vw,32px);letter-spacing:.06em}.hero{padding-top:112px;gap:32px 5vw;padding-bottom:48px}.hero__title{font-size:clamp(64px,7.6vw,118px);margin:24px 0 56px}.hero__stage.hero__photo{height:78svh;max-height:960px;min-height:600px}.hero__meta dl{margin:0;gap:20px}.hero__meta .actions{margin-top:32px}.work--offset{margin-top:140px}.piece{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:7%}.piece__stage{grid-column:1;position:sticky;top:96px}.piece__side{grid-column:2;padding-top:20px}.model-stage{height:72svh;min-height:550px;max-height:860px}.page-top{padding-top:160px}.piece-heading{margin-bottom:48px}.studio-teaser{grid-template-columns:7fr 4fr;gap:8%;align-items:center}.section{padding-block:120px}.finale{padding-block:120px}.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:10%}.bio{display:grid}.creds{gap:40px}.bio__portrait{grid-column:1/span 5}.bio__text{grid-column:7/span 6}.gallery--curated{column-gap:8%}.gallery--curated>figure:nth-child(even){margin-top:120px}.gallery .g-mt{margin-top:90px}.piece__side .price small{display:inline-block;margin:0 0 0 16px}.contact-main{padding-bottom:120px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.hero{align-items:stretch}@media(min-width:901px){.hero{align-items:center}}
@media(max-width:600px){.sec-head,.finale__row{grid-template-columns:minmax(0,1fr);column-gap:0}.sec-head>*,.finale__row>*{grid-column:1/-1!important}.finale__row>*{min-width:0}.finale .btn{max-width:100%}}

/* ---------- home hero: live 3D in place of the still ---------- */
.hero__photo .sculpture-viewer--hero{height:100%}
.hero__photo .sculpture-viewer--hero .model-stage{height:100%;min-height:0;max-height:none;background:#171815}
.hero__photo .sculpture-viewer--hero.is-model .model-stage{background:radial-gradient(ellipse at 50% 46%,#34352f 0%,#1b1c19 58%,#121310 100%)}
.hero__photo .sculpture-viewer--hero .model-tools,
.hero__photo .sculpture-viewer--hero .viewer-status,
.hero__photo .sculpture-viewer--hero .model-open,
.hero__photo .sculpture-viewer--hero .model-photo{display:none!important}
.hero__photo .photo-caption{pointer-events:none;z-index:2}
/* a heading that must stay on one line */
.h-oneline{white-space:nowrap}
@media (max-width:420px){.h-oneline{font-size:clamp(34px,10.5vw,44px)}}

/* ---------- headlines run on one line wherever the column allows ---------- */
.finale .display{max-width:none}
/* ---------- commissions: a gallery of other pieces, no prices ---------- */
.shop-intro{max-width:46ch;margin:0 0 clamp(32px,4vw,56px)}
.shop{margin-bottom:clamp(72px,9vw,140px)}
.shop-grid .work__title{font-size:clamp(18px,1.45vw,22px)}
.shop-grid .commission-link{margin-top:12px}
@media (min-width:901px){.sec-head .display,.finale .display{white-space:nowrap}}

/* ---------- about: chapters and the making-of steps ---------- */
.chapter{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px);row-gap:32px;align-items:end;margin-bottom:clamp(40px,6vw,88px)}
.chapter__text{grid-column:1/span 6}
.chapter__text p{font-size:clamp(17px,1.25vw,19px);line-height:1.65;max-width:52ch}
.chapter__text p.lede{font-size:clamp(20px,1.85vw,27px);line-height:1.32;margin-bottom:1em}
.chapter__lead{grid-column:8/span 4;margin:0}
.chapter__lead img,.steps img{width:100%;height:auto}
.chapter__lead figcaption{font-size:12px;letter-spacing:.04em;color:var(--night-stone);margin-top:10px}
.chapter__gallery figcaption{color:var(--night-stone)}
.chapter__intro{max-width:44ch;margin:0 0 clamp(40px,5vw,72px);grid-column:1/-1}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(40px,5vw,72px)}
.step figure{margin:0}
.step figcaption{padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}
.step__n{display:block;font-size:11px;letter-spacing:.14em;color:var(--gold);margin-bottom:8px}
.step__title{font-family:var(--display);font-size:clamp(18px,1.45vw,22px);line-height:1.2;letter-spacing:-.025em;margin:0 0 8px;font-weight:var(--weight)}
.step figcaption p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}
@media (max-width:900px){.chapter__text,.chapter__lead{grid-column:1/-1}.chapter__lead{max-width:420px}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- home hero, bare: white sculpture on the page, grounded by its shadow ---------- */
.hero__stage.hero__photo.hero__photo--bare{background:transparent}
.hero__photo--bare .sculpture-viewer--hero .model-stage,
.hero__photo--bare .sculpture-viewer--hero.is-model .model-stage{background:transparent}
.hero__photo--bare .sculpture-viewer--hero .model-poster{opacity:0;background:transparent}
.hero__photo--bare .sculpture-viewer--hero.is-fallback .model-poster{opacity:1;background:#171815}
.hero__photo--bare .sculpture-viewer--hero.is-model canvas{animation:heroModelIn 1s var(--ease) both}
@keyframes heroModelIn{from{opacity:0}to{opacity:1}}
.hero__photo--bare .photo-caption{background:transparent;color:var(--stone);font-size:12px;letter-spacing:.12em;text-transform:uppercase;left:50%;transform:translateX(-50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hero__photo--bare .sculpture-viewer--hero.is-model canvas{animation:none}}

/* hero hint: bottom-left of the stage, clear of the plinth */
.hero__photo--bare .photo-caption{left:0;transform:none;bottom:4px}

/* ---------- main piece: two photographs as the hero, 3D behind a button ---------- */
@media (min-width:901px){.piece--duo .piece__stage{grid-column:1/span 8}.piece--duo .piece__side{grid-column:9/span 4}}
.model-stage.model-stage--duo{height:auto;min-height:0;max-height:none;aspect-ratio:3/2;background:transparent}
.model-poster.model-poster--duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,16px);width:100%;height:100%;background:transparent}
.model-poster--duo figure{margin:0;min-width:0;height:100%;overflow:hidden;background:var(--paper-2)}
.model-poster--duo img{width:100%;height:100%;object-fit:cover;display:block}
.is-model .model-poster.model-poster--duo{display:none}
@media (max-width:900px){.is-model .model-stage.model-stage--duo{aspect-ratio:4/5}}

/* ---------- main piece: the two photographs take two thirds of the row ---------- */
@media (min-width:901px){
  .piece.piece--duo{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:5%}
  .piece--duo .piece__stage{grid-column:1}
  .piece--duo .piece__side{grid-column:2}
}
/* ---------- gallery: product cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(48px,6vw,88px)}
.product .work__media{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.product .work__media img{width:100%;height:100%;object-fit:cover}
.product .work__title{font-size:clamp(19px,1.5vw,23px)}
.product .work__price{font-size:clamp(17px,1.3vw,20px)}
.btn--unavailable{margin-top:18px;width:100%;justify-content:center;border-color:var(--line);color:var(--stone);background:transparent;cursor:default;pointer-events:none}
@media (max-width:900px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.product-grid{grid-template-columns:1fr}}

/* ---------- the 3D note and status only appear once the 3D view is open ---------- */
.sculpture-viewer:not(.is-model) .viewer-status{display:none}
.piece__stage .model-note{display:none}
.piece__stage .sculpture-viewer.is-model ~ .model-note{display:block}
/* ---------- gallery: four across on wide screens; "Request price" link ---------- */
@media (min-width:1100px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.work__price--ask{font-size:14px;letter-spacing:.02em;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:1px}
.work__price--ask:hover{color:var(--gold)}
/* ---------- about: a chapter that is text only ---------- */
.chapter--text .chapter__text{grid-column:1/span 8}
@media (max-width:900px){.chapter--text .chapter__text{grid-column:1/-1}}

/* gallery without an intro: a little more air under the heading */
.shop{margin-top:clamp(8px,2vw,24px)}

/* gallery cards: equal height, buttons aligned along the bottom */
.product{display:flex;flex-direction:column;height:100%}
.product .work__cap{margin-bottom:18px}
.product .btn--unavailable{margin-top:auto}

/* about: the workshop and the making-of are one light section */
.chapter__gallery--light figcaption{color:var(--stone)}
.steps-wrap{margin-top:clamp(56px,7vw,112px)}

/* about: workshop photo essay */
.essay{row-gap:clamp(40px,6vw,96px);align-items:center}
.essay figcaption{color:var(--stone)}
.essay__text{align-self:center}
.essay__text p{font-size:clamp(16px,1.2vw,18px);line-height:1.65;margin:0}
.essay__text p.lede{font-size:clamp(22px,2.1vw,32px);line-height:1.2;letter-spacing:-.03em;margin:0 0 .6em}
@media (max-width:900px){.essay__text{grid-column:1/-1!important}}

/* gallery: three pieces, three across */
@media (min-width:1100px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- home hero: drag hint and 3D disclaimer, under the model ---------- */
.hero-notes{display:none;position:absolute;left:0;right:0;bottom:0;margin:0;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none;z-index:2;font-size:11px;line-height:1.4;color:var(--stone)}
.sculpture-viewer--hero.is-model ~ .hero-notes{display:flex}
.hero-notes__hint{letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.hero-notes__disclaimer{letter-spacing:.02em;text-align:right}
@media (max-width:520px){.hero-notes{flex-direction:column;align-items:flex-start;gap:4px}.hero-notes__disclaimer{text-align:left}}

/* phones: the model sits above its notes instead of behind them */
@media (max-width:900px){.hero__photo--bare .sculpture-viewer--hero{height:calc(100% - 44px)}}

/* gallery with two pieces: the pair sits under the heading column, not stretched edge to edge */
@media (min-width:901px){
  .shop{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px}
  .shop .product-grid{grid-column:4 / span 8;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* contact: email and phone stacked */
.contact-lines{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.contact-phone{white-space:nowrap}

/* home hero: a quiet label while the model downloads */
.hero__photo--bare .sculpture-viewer--hero:not(.is-model):not(.is-fallback) .model-stage::after{content:"Loading the sculpture";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);white-space:nowrap}

/* home hero: the cast shadow fades out before it reaches the edge of the canvas */
.hero__photo--bare .sculpture-viewer--hero canvas{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 88%,transparent 100%)}

/* social links (2026-09-27) */
.social-links{display:flex;gap:22px;margin-top:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}.social-links a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}.social-links a:hover,.social-links a:focus-visible{border-bottom-color:currentColor}.finale .social-links{opacity:.8}