/* StudioDarts Global.
   White marble everywhere: the page sits on one marble (baked at start-up),
   the 3D pieces are drawn onto it, and the only colour that isn't stone or ink
   is the gold, which is rendered, and bole red, the clay under the leaf, for focus. */

:root {
  --marble: #f1efea;
  --tile: rgba(255, 255, 255, 0.55);
  --ink: #221b15;
  --ink-soft: #5c5249;
  --ink-faint: rgba(34, 27, 21, 0.46);
  --hair: rgba(34, 27, 21, 0.14);
  --bole: #8f3a24;
  --leaf: #7a5c22;
  --display: "Eczar", "Iowan Old Style", Georgia, serif;
  --text: "Anek Latin", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4.6vw, 72px);
  --section: clamp(88px, 11vw, 168px);
  --enter: cubic-bezier(0.2, 0, 0, 1);
}

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

html { background: var(--marble); scroll-padding-top: 76px; }

body {
  margin: 0;
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.012em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; }

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

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The marble and the 3D canvas sit behind everything. */
.marble {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--marble);
  background-size: 1024px;
}

.marble::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-image: var(--marble-image, none);
  opacity: 0;
  transition: opacity 1.2s var(--enter);
}

.marble.on::after { opacity: 1; }

.gl {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--enter);
}

.gl-ready .gl { opacity: 1; }

main, .foot { position: relative; z-index: 1; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--marble);
  font-weight: 600;
}

.skip:focus { top: 12px; }

/* Shared bits ---------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 15px 22px 14px;
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--marble);
  font: 600 1rem/1 var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s;
}

.btn:hover { background: #3a2f25; }

.tlink {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--leaf);
  text-underline-offset: 6px;
  transition: text-decoration-thickness 0.15s;
}

.tlink:hover { text-decoration-thickness: 2px; }

.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 1.8rem; }

section { padding: var(--section) var(--gutter); }

h2 { font-size: clamp(2.1rem, 4.2vw, 3.9rem); }

.view {
  position: relative;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.view.is-dragging { cursor: grabbing; }

.view-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none; /* never let the browser pick up the photo instead of turning the piece */
  -webkit-user-drag: none;
  transition: opacity 0.6s;
}

.no-gl .view-still, .js .view:not(.live) .view-still { opacity: 1; }
.no-gl .map-view { display: none; }

.view-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  pointer-events: none;
}

.no-gl .view-hint { display: none; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6rem; }

.swatches button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 9px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--tile);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color 0.18s, background-color 0.18s;
}

.swatches button:hover { border-color: var(--ink-faint); }
.swatches button[aria-pressed="true"] { border-color: var(--ink); background: #fff; }

.sw { display: inline-block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(34, 27, 21, 0.2); }
.sw.gold { background: #d4a94e; }
.sw.silver { background: #c9c9c4; }
.sw.copper { background: #c27a55; }
.sw.champagne { background: #e2cfa3; }
.sw.antique { background: #a8823c; box-shadow: inset 0 0 0 4px #7d3424; }

/* Top line and header --------------------------------------------------- */

/* One fixed header: the top line slides away once the page moves. */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 30;
  transition: transform 0.45s var(--enter), background-color 0.3s, box-shadow 0.3s;
}

.topline {
  height: 36px;
  padding: 0 var(--gutter);
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
  font-size: 0.875rem;
  line-height: 36px;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.topline a { margin-left: 0.5em; color: var(--ink); }

.bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px var(--gutter);
}

.bar.scrolled {
  transform: translateY(-36px);
  background: rgba(241, 239, 234, 0.94);
  box-shadow: 0 1px 0 var(--hair);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 4px 10px;
  font: 600 1.5rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.mark span { font: 500 1rem/1 var(--text); color: var(--ink-soft); }

/* The logo is shown straight from the letterhead sheet the studio sent: the frame shows
   only the logo, and multiply lets the sheet's white paper disappear into the marble. */
.logo { position: relative; display: block; flex: none; width: 68px; aspect-ratio: 266 / 225; overflow: hidden; }
.logo img { position: absolute; left: -20.3%; top: -60.89%; width: 419.92%; max-width: none; height: auto; mix-blend-mode: multiply; }
.foot .logo { width: 116px; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }

.nav a {
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.nav a:hover { border-color: currentColor; }

.nav .wa {
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 2px;
}

.nav .wa:hover { background: var(--ink); color: var(--marble); }

.menu { display: none; }

/* Hero ----------------------------------------------------------------- */

.story { position: relative; height: 600vh; padding: 0; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  touch-action: pan-y;
}

.still { display: none; }

.intro, .outro, .line {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, visibility 0s linear 0.2s;
}

.stage[data-at="intro"] .intro,
.stage[data-at="done"] .outro,
.stage[data-at="carving"] [data-line="carving"],
.stage[data-at="base"] [data-line="base"],
.stage[data-at="size"] [data-line="size"],
.stage[data-at="leaf"] [data-line="leaf"],
.stage[data-at="burnish"] [data-line="burnish"] {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.55s var(--enter) 0.14s, transform 0.55s var(--enter) 0.14s, visibility 0s;
}

.intro, .outro {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  translate: 0 -46%;
  width: min(35rem, 39vw);
}

.intro h1 { font-size: clamp(2.9rem, 6vw, 6rem); line-height: 0.96; margin-bottom: 0.5em; }

/* The landing leads with the name; the line under it says what we make. */
.intro h1 .brand { font-size: clamp(3.2rem, 6.4vw, 6.6rem); letter-spacing: -0.025em; line-height: 0.92; }
.intro h1 .sub { margin-top: 0.4em; font-weight: 500; font-size: clamp(1.35rem, 1.9vw, 1.85rem); line-height: 1.2; letter-spacing: 0; color: var(--leaf); }

/* The headline rises line by line once the scene is ready. */
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ln > span { display: inline-block; }

.js .ln > span { transform: translateY(108%); transition: transform 1.1s var(--enter); }
.js .ln:nth-child(2) > span { transition-delay: 0.1s; }
.js .ln:nth-child(3) > span { transition-delay: 0.2s; }
.hero-ready .ln > span, .no-gl .ln > span { transform: none; }

.js .intro .lead, .js .intro .acts, .js .intro .cue { opacity: 0; transition: opacity 0.9s var(--enter) 0.55s; }
.hero-ready .intro .lead, .hero-ready .intro .acts, .hero-ready .intro .cue,
.no-gl .intro .lead, .no-gl .intro .acts { opacity: 1; }

.lead { max-width: 25em; font-size: 1.25rem; line-height: 1.45; color: var(--ink-soft); }
.cue { margin-top: 2.4rem; font-size: 0.9375rem; color: var(--ink-faint); }

.outro h2 { margin-bottom: 0.45em; }
.outro p { max-width: 26em; font-size: 1.1875rem; color: var(--ink-soft); }

.lines {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--gutter) + 76px);
  width: min(27rem, 34vw);
}

.line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.line b {
  display: block;
  margin-bottom: 0.3em;
  font: 600 clamp(1.9rem, 2.8vw, 2.5rem)/1.05 var(--display);
  color: var(--ink);
}

.rail-wrap {
  position: absolute;
  left: var(--gutter);
  bottom: var(--gutter);
  transition: opacity 0.3s;
}

.stage[data-at="intro"] .rail-wrap, .stage[data-at="done"] .rail-wrap { opacity: 0.5; }

.rail { display: flex; gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0 0 12px; list-style: none; counter-reset: step; }
.rail li { counter-increment: step; }

.rail button {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 32px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: 500 0.9375rem/1 var(--text);
  cursor: pointer;
  transition: color 0.2s;
}

.rail button::before { content: counter(step); font: 600 0.875rem/1 var(--display); }
.rail li.done button { color: var(--ink-soft); }
.rail button[aria-current="step"], .rail button:hover { color: var(--ink); }

.rail-track { position: relative; height: 1px; background: var(--hair); }

.rail-fill {
  position: absolute;
  inset: 0;
  background: var(--bole);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Both sit above the WhatsApp button in the corner. */
.hint {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) + 64px);
  font-size: 0.875rem;
  color: var(--ink-faint);
  transition: opacity 0.6s;
}

.hint.gone { opacity: 0; }

.tilt {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) + 64px);
  padding: 9px 14px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: var(--tile);
  font-size: 0.875rem;
}

.tilt[hidden] { display: none; }

/* About: the family, the founder, the hands --------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: center;
}

.about-copy h2 { margin-bottom: 0.5em; }
.about-copy p { max-width: 30em; font-size: 1.1875rem; color: var(--ink-soft); }
.about-copy h3 { margin: 1.8rem 0 0.5rem; font: 600 1.5rem/1.1 var(--display); color: var(--leaf); }

.about-pics { position: relative; padding-bottom: 64px; }

.shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 30px 60px -36px rgba(34, 27, 21, 0.5);
}

/* The founder's card overlaps the photo; without a portrait it is name and title alone. */
.founder {
  position: absolute;
  left: calc(-1 * clamp(0px, 3vw, 44px));
  bottom: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  width: min(380px, 78%);
  margin: 0;
  padding: 14px 20px 14px 14px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: #fbfaf7;
  box-shadow: 0 24px 48px -28px rgba(34, 27, 21, 0.45);
}

.founder img { width: 92px; height: 115px; object-fit: cover; border-radius: 2px; }
.founder b { display: block; font: 600 1.4rem/1.15 var(--display); }
.founder span { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 600; color: var(--leaf); }
.founder p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft); }
.founder.no-photo { grid-template-columns: minmax(0, 1fr); padding-left: 20px; }
.founder.no-photo img { display: none; }

/* Why us ----------------------------------------------------------------------- */

.why h2 { max-width: 14em; margin-bottom: clamp(28px, 4vw, 52px); }

.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: reason;
}

.reasons li { counter-increment: reason; padding-top: 16px; border-top: 1px solid var(--ink); color: var(--ink-soft); }
.reasons li::before { content: counter(reason, decimal-leading-zero); display: block; margin-bottom: 14px; font: 600 1rem/1 var(--display); color: var(--leaf); }
.reasons b { display: block; margin-bottom: 6px; font: 600 1.4rem/1.15 var(--display); color: var(--ink); }

/* Collaborate -------------------------------------------------------------------- */

.sectors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sectors li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 18px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(251, 250, 247, 0.82);
}

.sectors b { font: 600 1.3rem/1.15 var(--display); color: var(--ink); }
.sectors span { color: var(--ink-soft); }
.sectors em { margin-top: auto; padding-top: 10px; font-size: 0.875rem; color: var(--leaf); }
.collab .acts { margin-top: clamp(28px, 3.5vw, 44px); }

/* WhatsApp, always one tap away ---------------------------------------------------- */

.chat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--marble);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 18px 36px -20px rgba(34, 27, 21, 0.65);
  transition: transform 0.3s var(--enter), background-color 0.25s, opacity 0.4s;
}

.chat:hover { background: #3a2f25; transform: translateY(-2px); }
.chat svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Trust ---------------------------------------------------------------- */

.trust-head, .crafts-head, .studios-head, .work-head, .collab-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.trust-head p, .crafts-head p, .studios-head p, .collab-head p { max-width: 30em; font-size: 1.1875rem; color: var(--ink-soft); }

.clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--hair);
  background: var(--hair);
}

.clients li {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 10px;
  padding: 26px 16px 16px;
  background: rgba(244, 242, 238, 0.86);
  transition: background-color 0.25s;
}

.clients img {
  align-self: center;
  max-width: 72%;
  max-height: 64px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.74;
  transition: filter 0.35s, opacity 0.35s, transform 0.35s var(--enter);
}

.clients img.photo { max-height: 70px; border-radius: 2px; }

.clients li:hover { background: rgba(255, 255, 255, 0.94); }
.clients li:hover img { filter: none; opacity: 1; transform: translateY(-2px); }

.clients span { font-size: 0.8125rem; line-height: 1.3; color: var(--ink-soft); text-align: center; }

.honest { margin-top: clamp(56px, 7vw, 96px); }
.honest h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 1.6rem; }

.pledges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pledges li { padding-top: 16px; border-top: 1px solid var(--ink); color: var(--ink-soft); }
.pledges b { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 600; }

/* Finish lab ------------------------------------------------------------ */

.finish {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(32px, 5vw, 88px);
  align-items: center;
}

.finish-copy p { max-width: 28em; margin-top: 1rem; font-size: 1.1875rem; color: var(--ink-soft); }
.finish-copy .finish-desc { min-height: 3em; margin: 1.1rem 0 1.4rem; font-size: 1.0625rem; color: var(--ink); }
.finish-view { aspect-ratio: 1; width: 100%; max-height: 78vh; justify-self: center; }

/* Crafts ---------------------------------------------------------------- */

.crafts-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
}

.craft-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }

.craft-list li { border-bottom: 1px solid var(--hair); }

.craft-list button {
  display: block;
  width: 100%;
  padding: 22px 0 20px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.craft-list .name {
  display: block;
  font: 600 clamp(1.7rem, 3vw, 2.6rem)/1.05 var(--display);
  color: var(--ink-faint);
  transition: color 0.3s, transform 0.5s var(--enter);
}

.craft-list li.on .name, .craft-list button:hover .name { color: var(--ink); }
.craft-list li.on .name { transform: translateX(10px); }

.craft-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--enter);
}

.craft-list li.on .craft-more { grid-template-rows: 1fr; }
.craft-more > div { overflow: hidden; padding-left: 10px; }
.craft-more p { padding-top: 4px; font-size: 1.125rem; color: var(--ink-soft); }
.craft-more .tags { padding-top: 2px; font-size: 0.9375rem; color: var(--ink-faint); }
.craft-more .tlink { display: inline-block; margin: 12px 0 22px; }
.craft-more .thumbs { display: none; }

/* Two photos per craft, held in a little 3D stack that turns with the pointer. */
.craft-stage {
  position: sticky;
  top: 14vh;
  height: min(72vh, 640px);
  perspective: 1400px;
}

.craft-card {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 30px 60px -30px rgba(34, 27, 21, 0.45);
  opacity: 0;
  transform: translate3d(0, 24px, -60px) rotateY(-14deg);
  transition: opacity 0.6s var(--enter), transform 0.9s var(--enter);
}

.craft-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.craft-card.a { left: 0; top: 0; width: 72%; height: 78%; }
.craft-card.b { right: 0; bottom: 0; width: 52%; height: 50%; }

.craft-card.on {
  opacity: 1;
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0) rotateY(calc(var(--px, 0) * 5deg)) rotateX(calc(var(--py, 0) * -4deg));
}

.craft-card.b.on { transform: translate3d(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 14px), 40px) rotateY(calc(var(--px, 0) * 7deg)) rotateX(calc(var(--py, 0) * -5deg)); transition-delay: 0.08s; }

/* Sculpture -------------------------------------------------------------- */

.sculpture {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px clamp(32px, 5vw, 88px);
  align-items: center;
}

.sculpture-view { height: min(86vh, 820px); width: 100%; }
.sculpture-copy > p { max-width: 28em; margin-top: 1rem; font-size: 1.1875rem; color: var(--ink-soft); }

.original { display: flex; align-items: end; gap: 16px; margin: 28px 0 22px; }
.original img { width: 104px; border-radius: 2px; }
.original figcaption { max-width: 14em; font-size: 0.9375rem; color: var(--ink-soft); }

/* Houston --------------------------------------------------------------- */

.houston {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 40px clamp(32px, 5vw, 88px);
  align-items: start;
}

.houston-copy { position: sticky; top: 22vh; }
.houston-copy p { max-width: 28em; margin: 1rem 0 1.4rem; font-size: 1.1875rem; color: var(--ink-soft); }

.collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 5.2vw;
  gap: clamp(10px, 1.4vw, 20px);
}

.collage figure { margin: 0; overflow: hidden; border-radius: 2px; will-change: transform; }
.collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collage .c1 { grid-column: 1 / 7; grid-row: 1 / 9; }
.collage .c2 { grid-column: 7 / 12; grid-row: 2 / 8; }
.collage .c3 { grid-column: 3 / 9; grid-row: 9 / 13; }
.collage .c4 { grid-column: 9 / 13; grid-row: 8 / 14; }
.collage .c5 { grid-column: 1 / 5; grid-row: 13 / 18; }

/* Gallery ---------------------------------------------------------------- */

.work-head { align-items: end; }

.filters { display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: flex-end; }

.filters button {
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  cursor: pointer;
}

.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); border-color: var(--bole); }

.grid {
  columns: 4 240px;
  column-gap: clamp(12px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid li { break-inside: avoid; margin-bottom: clamp(18px, 2.2vw, 30px); }
.grid li[hidden] { display: none; }

.grid button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
  perspective: 900px;
}

.grid .frame {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: #e2ded6;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--enter), box-shadow 0.5s var(--enter);
}

.grid button:hover .frame { box-shadow: 0 24px 48px -26px rgba(34, 27, 21, 0.5); }
.grid img { display: block; width: 100%; transition: transform 0.8s var(--enter); }
.grid button:hover img { transform: scale(1.035); }
.grid .t { display: block; margin-top: 10px; font: 600 1.125rem/1.2 var(--display); }
.grid .c { display: block; font-size: 0.875rem; color: var(--ink-soft); }

/* The first twenty pieces show until asked for the rest (ten on phones). */
.grid.short li:nth-child(n + 21) { display: none; }

.more {
  display: block;
  margin: 8px auto 0;
  padding: 13px 20px 12px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--tile);
  font-weight: 600;
  cursor: pointer;
}

.more[hidden] { display: none; }

/* Each photo develops from the bottom up the first time it is seen. */
.js:not(.reduce) .grid li { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--enter); }
.js:not(.reduce) .grid li.in { clip-path: inset(0 0 -40px 0); }

/* Studios and map ---------------------------------------------------------- */

.map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 8.4fr) minmax(0, 3.6fr);
  gap: 32px clamp(24px, 3vw, 48px);
  align-items: center;
}

.map-view { aspect-ratio: 16 / 10; width: 100%; overflow: hidden; }

.map-labels { position: absolute; inset: 0; pointer-events: none; }

.pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}

.pin span {
  position: absolute;
  left: 0;
  bottom: 6px;
  translate: -50% 0;
  padding: 5px 10px 4px;
  border-radius: 2px;
  background: rgba(251, 250, 247, 0.9);
  box-shadow: 0 0 0 1px var(--hair);
  font: 500 0.875rem/1 var(--text);
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

/* Neighbouring places put their labels on different sides of the pin. */
.pin[data-side="below"] span { bottom: auto; top: 16px; }
.pin[data-side="left"] span { bottom: -4px; translate: calc(-100% - 12px) 0; }
.pin[aria-pressed="true"] span { background: var(--ink); color: var(--marble); }
.pin:focus-visible { outline: 0; }
.pin:focus-visible span { outline: 2px solid var(--bole); outline-offset: 2px; }

.map-card { min-height: 12.5rem; }
.map-card .type { font-size: 0.9375rem; color: var(--ink-soft); }
.map-card h3 { margin: 0.2em 0 0.4em; font-size: clamp(2rem, 3vw, 2.8rem); }
.map-card p { color: var(--ink-soft); margin-bottom: 0.9rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; }

.chips button {
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--tile);
  font-size: 0.9375rem;
  cursor: pointer;
}

.chips button[aria-pressed="true"] { border-color: var(--ink); background: #fff; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--ink-soft); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; }
.legend .gold { background: #c9a04a; }
.legend .champagne { background: #dcc89c; }
.legend .copper { background: #b9714c; }

.studio-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 36px;
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0;
  list-style: none;
}

.studio-list li { padding-top: 16px; border-top: 1px solid var(--ink); }
.studio-list h3 { font-size: 1.75rem; margin-bottom: 8px; }
.studio-list h3 em { display: block; margin-top: 6px; font: italic 500 0.9375rem/1.2 var(--text); color: var(--leaf); }
.studio-list address { font-style: normal; color: var(--ink-soft); margin-bottom: 8px; }

/* Process ---------------------------------------------------------------- */

.process h2 { margin-bottom: clamp(32px, 4vw, 56px); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li { counter-increment: step; padding-top: 16px; border-top: 1px solid var(--ink); color: var(--ink-soft); }
.steps li::before { content: counter(step); display: block; margin-bottom: 18px; font: 600 2.6rem/1 var(--display); color: var(--leaf); }
.steps b { display: block; margin-bottom: 6px; font: 600 1.5rem/1.1 var(--display); color: var(--ink); }

/* Contact ---------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(32px, 5vw, 88px);
  align-items: start;
}

.contact-copy { position: sticky; top: 18vh; }
.contact-copy > p { max-width: 26em; margin: 1rem 0 2rem; font-size: 1.1875rem; color: var(--ink-soft); }

.details { margin: 0; }
.details div { padding: 12px 0; border-top: 1px solid var(--hair); }
.details dt { font-size: 0.875rem; color: var(--ink-soft); }
.details dd { margin: 2px 0 0; }

.form {
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(251, 250, 247, 0.82);
}

.form h3 { font-size: 1.8rem; margin-bottom: 1.4rem; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.fields .full { grid-column: 1 / -1; }

.field label, legend { display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.9375rem; }
.req, .opt { margin-left: 6px; font-weight: 400; font-size: 0.8125rem; color: var(--ink-soft); }

input, select, textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(34, 27, 21, 0.26);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem/1.4 var(--text);
}

input:focus, select:focus, textarea:focus { outline: 2px solid var(--bole); outline-offset: 0; border-color: transparent; }
[aria-invalid="true"] { border-color: var(--bole); }
.err { min-height: 0; margin-top: 5px; font-size: 0.875rem; color: var(--bole); }
.err:empty { display: none; }

fieldset { margin: 0; padding: 0; border: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }

.checks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
  cursor: pointer;
}

.checks input { width: auto; margin: 0; accent-color: var(--ink); }
.checks label:has(input:checked) { border-color: var(--ink); }
.note { font-size: 0.9375rem; color: var(--ink-soft); }

.ready { padding-top: 22px; border-top: 1px solid var(--hair); }
.ready h4 { font-size: 1.5rem; margin-bottom: 4px; }
.summary { max-height: 220px; overflow: auto; margin: 14px 0 0; padding: 14px; border: 1px solid var(--hair); background: #fff; font: 400 0.9rem/1.5 var(--text); white-space: pre-wrap; }

/* Footer ------------------------------------------------------------------ */

.foot { padding: var(--section) var(--gutter) 32px; border-top: 1px solid var(--hair); }

.foot-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: clamp(48px, 6vw, 80px); }
.foot-cta { font: 600 clamp(2.2rem, 5vw, 4.6rem)/1 var(--display); letter-spacing: -0.015em; max-width: 12em; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 0; border-top: 1px solid var(--ink); }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot-row nav a { text-decoration: none; font-weight: 500; }
.foot-row nav a:hover { text-decoration: underline; }
.foot-studios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 36px; padding: 10px 0 30px; color: var(--ink-soft); }
.foot-studios b { display: block; font: 600 1.3rem/1.2 var(--display); color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 0.875rem; color: var(--ink-soft); }
.sona-restore { padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; cursor: pointer; }

/* Sona, the flake of gold leaf --------------------------------------------- */

.sona { position: fixed; left: 18px; bottom: 18px; z-index: 40; transition: opacity 0.4s, transform 0.4s var(--enter); }

/* Sona waits until the hero has played. */
.in-hero .sona { opacity: 0; transform: translateY(12px); pointer-events: none; }

.sona-flake {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: rgba(251, 250, 247, 0.92);
  cursor: pointer;
  perspective: 120px;
}

.sona-flake span {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: #cfa249;
  box-shadow: inset 0 0 0 1px rgba(122, 92, 34, 0.45);
  animation: flutter 4.2s ease-in-out infinite;
}

@keyframes flutter {
  0%, 100% { transform: rotateX(18deg) rotateY(-24deg) rotateZ(8deg); }
  35% { transform: rotateX(-26deg) rotateY(16deg) rotateZ(-6deg) translateY(-2px); }
  70% { transform: rotateX(10deg) rotateY(34deg) rotateZ(12deg) translateY(1px); }
}

.sona-bubble {
  position: absolute;
  left: 0;
  bottom: 64px;
  width: min(330px, calc(100vw - 36px));
  padding: 16px 18px 14px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: #fbfaf7;
  box-shadow: 0 24px 48px -28px rgba(34, 27, 21, 0.45);
  transform-origin: 26px 100%;
  animation: bubble 0.4s var(--enter);
}

@keyframes bubble { from { opacity: 0; transform: translateY(8px) scale(0.96); } }

.sona-name { font-size: 0.8125rem; color: var(--leaf); font-weight: 600; }
.sona-text { margin: 4px 0 12px; }
.sona-acts { display: flex; gap: 18px; }
.sona-acts button { padding: 0; border: 0; background: none; font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* Lightbox ------------------------------------------------------------------ */

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(241, 239, 234, 0.97);
}

.lightbox::backdrop { background: rgba(34, 27, 21, 0.3); }

.lightbox figure { display: grid; place-items: center; height: 100%; margin: 0; padding: 72px 76px 96px; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 190px); object-fit: contain; border-radius: 2px; box-shadow: 0 30px 70px -30px rgba(34, 27, 21, 0.5); }
.lightbox figcaption { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; }
.lightbox figcaption b { display: block; font: 600 1.3rem/1.2 var(--display); }
.lightbox figcaption span { color: var(--ink-soft); font-size: 0.9375rem; }

.lb-btn { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--hair); border-radius: 50%; background: #fbfaf7; cursor: pointer; }
.lb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { right: 20px; top: 20px; }
.lb-prev { left: 18px; top: 50%; translate: 0 -50%; }
.lb-next { right: 18px; top: 50%; translate: 0 -50%; }

/* Tablets and phones ---------------------------------------------------------- */

@media (max-width: 1020px) {
  .pledges, .steps, .reasons, .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about { grid-template-columns: 1fr; }
  .about-pics { max-width: 640px; }
  .founder { left: 0; }
  .map-wrap { grid-template-columns: 1fr; }
  .map-card { min-height: 0; }
}

@media (max-aspect-ratio: 9/10), (max-width: 760px) {
  .intro, .outro {
    top: auto;
    bottom: calc(var(--gutter) + 64px);
    right: var(--gutter);
    translate: none;
    width: auto;
  }

  .intro h1 { font-size: clamp(2.6rem, 11vw, 4.2rem); }
  .intro h1 .brand { font-size: clamp(3rem, 14vw, 5.2rem); }
  .intro h1 .sub { font-size: clamp(1.15rem, 4.6vw, 1.5rem); }
  .lead { font-size: 1.125rem; }
  .cue { margin-top: 1.2rem; }
  .lines { right: var(--gutter); bottom: calc(var(--gutter) + 64px); width: auto; }
  .line { font-size: 1.125rem; }
  .rail-wrap { right: var(--gutter); }
  .rail { justify-content: space-between; gap: 6px; }
  .rail button { min-width: 36px; min-height: 40px; font-size: 1rem; }
  .rail button span { display: none; }
  .rail button[aria-current="step"] span { display: inline; }
  .hint, .tilt { top: 108px; bottom: auto; left: var(--gutter); right: auto; }
  .logo { width: 52px; }
  .stage[data-at="intro"] .hint { opacity: 0; }

  /* A thumb scrolls less far than a wheel: the story plays in about four screens. */
  .story { height: 420vh; }
}

@media (max-width: 760px) {
  .topline { font-size: 0.8125rem; }
  .menu {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid var(--ink);
    border-radius: 2px;
    background: none;
    font-weight: 500;
    cursor: pointer;
  }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--gutter) 18px;
    background: rgba(241, 239, 234, 0.98);
    box-shadow: 0 1px 0 var(--hair);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
  }

  .bar.open .nav { visibility: visible; opacity: 1; transform: none; transition: opacity 0.25s var(--enter), transform 0.25s var(--enter); }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 1.0625rem; }
  .nav .wa { margin-top: 12px; text-align: center; }
  .bar { background: rgba(241, 239, 234, 0.94); }

  .trust-head, .crafts-head, .studios-head, .work-head, .collab-head, .finish, .sculpture, .houston, .contact, .crafts-body { grid-template-columns: 1fr; }
  .filters { justify-content: flex-start; }
  .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clients li { gap: 6px; padding: 16px 6px 10px; }
  .clients img { max-height: 40px; max-width: 80%; }
  .clients span { font-size: 0.6875rem; }
  .clients li:last-child:nth-child(3n + 2) { grid-column: span 2; }

  /* Two columns of work, ten at first, so the gallery is a couple of screens, not twenty. */
  .grid { columns: 2; column-gap: 10px; }
  .grid li { margin-bottom: 16px; }
  .grid .t { margin-top: 7px; font-size: 1rem; }
  .grid .c { font-size: 0.8125rem; }
  .grid.short li:nth-child(n + 11) { display: none; }
  .more { display: block; }
  .pledges, .steps, .studio-list, .foot-studios, .reasons, .sectors { grid-template-columns: 1fr; }
  .reasons { gap: 26px; }
  .about-pics { padding-bottom: 0; }
  .founder { position: relative; width: auto; margin: -36px 12px 0; }
  .finish-view { max-height: none; }
  .sculpture-view { height: 72vh; order: -1; }
  .craft-stage { display: none; }
  .craft-more .thumbs { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; margin: 14px 0 4px; }
  .craft-more .thumbs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
  .houston-copy, .contact-copy { position: static; }
  .collage { grid-auto-rows: 11vw; }
  .map-view { aspect-ratio: 4 / 3; }
  .fields { grid-template-columns: 1fr; }
  .lightbox figure { padding: 64px 12px 110px; }
  .lb-prev, .lb-next { top: auto; bottom: 22px; translate: none; }
  .lightbox figcaption { bottom: 30px; padding: 0 72px; }
  .sona { left: 12px; bottom: 12px; }
  .sona-flake { width: 44px; height: 44px; }
  .sona-flake span { width: 17px; height: 17px; }
  .sona-bubble { bottom: 54px; }
  .chat { right: 12px; bottom: 12px; padding: 11px 15px 11px 12px; font-size: 0.875rem; }
}

/* On phones the story's own WhatsApp button and step rail own the bottom of the hero. */
@media (max-aspect-ratio: 9/10), (max-width: 760px) {
  .in-hero .chat { opacity: 0; transform: translateY(12px); pointer-events: none; }
}

/* No WebGL: photographs stand in for the 3D pieces. ----------------------------- */

.no-gl .story, .reduce .story { height: 100vh; height: 100svh; }

.no-gl .still {
  display: block;
  position: absolute;
  inset: 0 0 0 42%;
  background: url("../img/work/houston-gilded-doors.jpg") 50% 30% / cover no-repeat;
}

.no-gl .lines, .no-gl .outro, .no-gl .rail-wrap, .no-gl .hint, .no-gl .cue,
.reduce .lines, .reduce .outro, .reduce .rail-wrap, .reduce .cue { display: none; }

@media (max-aspect-ratio: 9/10), (max-width: 760px) {
  .no-gl .still { inset: 0 0 45% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

.debug *, .debug *::before, .debug *::after { transition: none !important; animation: none !important; }