/* Jewels by Zero · Cobalt Studio homepage (10 Nov 2026)
   Colours measured from the signature studio shot (research/cobalt-site-v1/brief.md). */
:root {
  --wall: #034092;
  --wall-deep: #012a78;
  --floor: #0462c7;
  --chalk: #f2f1ee;
  --tile: #e8e7e2;
  --denim: #4f7a94;
  --ink: #0b0f1a;
  --muted: #4a5568;
  --silver: #c9d3e0;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 3.6vw, 56px);
  --head: 68px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --spring: cubic-bezier(0.2, 1.4, 0.4, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--chalk); color: var(--ink);
  font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--floor); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: var(--wall); padding: 10px 14px; }
.skip:focus { left: 8px; }
svg { flex: none; }

/* ---------------- header ---------------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50; color: #fff;
  transition: background-color 0.45s var(--ease), box-shadow 0.45s, backdrop-filter 0.45s;
}
.top[data-state="solid"] {
  background: rgba(3, 64, 146, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px -18px rgba(1, 20, 60, 0.6);
}
.top-in { display: flex; align-items: center; gap: 20px; height: var(--head); padding: 0 var(--gut); }
.top-logo { flex: none; display: block; transition: opacity 0.5s var(--ease), translate 0.5s var(--ease); }
.top-logo img { height: 30px; width: auto; }
.top[data-state="hero"] .top-logo { opacity: 0; translate: 0 -8px; pointer-events: none; }
.tabs { position: relative; display: flex; gap: 2px; margin: 0 auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  position: relative; padding: 10px 14px; text-decoration: none; white-space: nowrap;
  font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74); transition: color 0.25s;
}
.tabs a:hover, .tabs a[aria-current] { color: #fff; }
.tabs sup { font-size: 9px; letter-spacing: 0.04em; margin-left: 3px; opacity: 0.6; vertical-align: 5px; }
.tabs-ink {
  position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: #fff; border-radius: 2px;
  opacity: 0; transition: transform 0.5s var(--ease), width 0.5s var(--ease), opacity 0.3s;
}
.tabs-ink.on { opacity: 1; }
.bag-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px 8px 10px; border: 0; background: none;
  font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.bag-btn svg { width: 22px; height: 22px; }
.bag-n {
  min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 10px;
  background: rgba(255, 255, 255, 0.16); font: 700 11px/1 var(--sans); letter-spacing: 0;
  transition: background 0.3s, color 0.3s;
}
.bag-n.on { background: #fff; color: var(--wall); }

/* ---------------- hero: room -> logo -> model ---------------- */
.hero {
  --hh: clamp(620px, 100svh, 1000px);
  --fw: max(100%, calc(var(--hh) * 1.5));
  --p: 0; --mx: 0; --my: 0;
  position: relative; height: var(--hh); overflow: hidden; isolation: isolate;
  background: linear-gradient(#01256e, #01308a 55%, #0360cc);
}
.hero-frame { position: absolute; bottom: 0; left: 50%; width: var(--fw); aspect-ratio: 3 / 2; margin-left: calc(var(--fw) * -0.5); }
.hero-room, .hero-model { position: absolute; will-change: transform; }
.hero-room {
  z-index: 0; inset: 0; width: 100%; height: 100%;
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--p) * 24%), 0);
}
.hero-model {
  z-index: 2; left: 55.08%; top: 10.64%; width: 35.74%; height: auto;
  transform-origin: 50% 100%;
  transform: translate3d(calc(var(--mx) * -20px), calc(var(--p) * -6% + var(--my) * -6px), 0) scale(calc(1 + var(--p) * 0.05));
}
.hero-copy { position: absolute; left: var(--gut); top: 25%; width: min(56vw, 860px); }
.hero-logo {
  position: relative; z-index: 1; margin: 0; width: 100%;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--p) * 30% + var(--my) * 4px), 0);
  opacity: calc(1 - var(--p) * 1.3);
}
.hero-logo img { width: 100%; height: auto; opacity: 0; }
/* the locked logo, shaded as cold silver: a slow light passes across it */
.hero-metal {
  position: absolute; inset: 0;
  -webkit-mask: url("/img/studio/logo-white.webp") 0 0 / 100% 100% no-repeat; mask: url("/img/studio/logo-white.webp") 0 0 / 100% 100% no-repeat;
  background: linear-gradient(100deg, #f4f7fb 0%, #ffffff 30%, #b7c4d6 40%, #ffffff 46%, #ffffff 50%, #9fb0c8 56%, #eef2f8 66%, #ffffff 100%) 100% 0 / 320% 100%;
  filter: drop-shadow(0 18px 30px rgba(0, 12, 50, 0.35));
  animation: metal 9s 1.8s ease-in-out infinite;
}
@keyframes metal { 0%, 18% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
.hero-ui { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: clamp(22px, 3vw, 40px); }
.btn-chalk {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 26px; text-decoration: none;
  background: var(--chalk); color: var(--wall); border-radius: 2px;
  font: 700 13px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
  box-shadow: 0 16px 40px -16px rgba(0, 10, 40, 0.6);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s;
}
.btn-chalk svg, .btn-cobalt svg, .foot-sign svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.35s var(--ease); }
.btn-chalk:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 22px 44px -16px rgba(0, 10, 40, 0.7); }
.btn-chalk:hover svg, .btn-cobalt:hover svg { transform: translateX(4px); }
.btn-chalk:active { transform: scale(0.97); }
.hero-trust { margin: 0; font: 500 12px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.hero-scroll { position: absolute; z-index: 3; left: 50%; bottom: 22px; width: 1px; height: 46px; background: rgba(255, 255, 255, 0.22); overflow: hidden; opacity: calc(1 - var(--p) * 4); }
.hero-scroll i { position: absolute; inset: 0; background: #fff; animation: drip 2.4s 2.4s var(--ease) infinite; translate: 0 -100%; }
@keyframes drip { 0% { translate: 0 -100%; } 55% { translate: 0 0; } 100% { translate: 0 100%; } }
/* as you scroll, the cobalt floor drains into the chalk catalog */
.hero::after {
  content: ""; position: absolute; z-index: 4; inset: auto 0 0; height: 46%; pointer-events: none;
  background: linear-gradient(rgba(242, 241, 238, 0), var(--chalk));
  opacity: calc(var(--p) * 1.6);
}
.floor { height: clamp(70px, 9vw, 150px); background: linear-gradient(#0360cc, #5b8fd4 35%, #c9d6e8 70%, var(--chalk)); margin-top: -1px; }

/* entrance */
.hero-room { opacity: 0; scale: 1.1; transition: opacity 1.3s var(--ease), scale 2.4s var(--ease); }
.hero-model { opacity: 0; translate: 0 34px; filter: blur(6px); transition: opacity 1.1s 0.25s var(--ease), translate 1.4s 0.25s var(--ease), filter 1.1s 0.25s var(--ease); }
.hero-metal { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s 0.55s cubic-bezier(0.65, 0, 0.2, 1); }
.hero-ui { opacity: 0; translate: 0 16px; transition: opacity 0.9s 1.25s var(--ease), translate 0.9s 1.25s var(--ease); }
.top-in { opacity: 0; transition: opacity 0.8s 1s var(--ease); }
.ready .hero-room { opacity: 1; scale: 1; }
.ready .hero-model { opacity: 1; translate: 0 0; filter: none; }
.ready .hero-metal { clip-path: inset(0 -10% 0 0); }
.ready .hero-ui { opacity: 1; translate: 0 0; }
.ready .top-in { opacity: 1; }

/* ---------------- catalog ---------------- */
.catalog { background: var(--chalk); outline: none; }
.col { --cols: var(--n); padding: clamp(28px, 4vw, 56px) var(--gut) clamp(36px, 5vw, 72px); }
.col[data-col="crosses"] { padding-top: 8px; }
.col-h { display: flex; align-items: baseline; gap: 18px; margin: 0 0 clamp(14px, 1.6vw, 22px); }
.col-h h2 {
  margin: 0; font: italic 800 clamp(28px, 3.2vw, 46px)/1 var(--serif); letter-spacing: 0.01em; text-transform: uppercase; color: var(--wall);
}
.col-rule { flex: 1; height: 1px; background: currentColor; color: var(--wall); opacity: 0.45; transform: scaleX(0); transform-origin: left; transition: transform 1.3s 0.15s var(--ease); }
.col-h em { font: italic 600 15px/1 var(--serif); color: var(--denim); white-space: nowrap; }
.col.in .col-rule { transform: scaleX(1); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }

/* studio bands (W1): photo + cobalt band + chalk tiles */
.col.has-strip {
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); padding: 0; margin: 12px 0 0;
  background: var(--wall); color: #fff; min-height: clamp(420px, 38vw, 600px);
}
.col.has-strip .col-h h2 { color: #fff; }
.col.has-strip .col-rule { color: #fff; }
.col.has-strip .col-h em { color: rgba(255, 255, 255, 0.66); }
.col.has-strip .col-body { padding: clamp(28px, 3.4vw, 52px) var(--gut) clamp(28px, 3.4vw, 52px) clamp(24px, 3vw, 48px); align-self: center; }
.col[data-col="bracelets"] { --cols: 3; }
.col[data-col="chains"] .card-stage { aspect-ratio: 1.15; }
.strip { position: relative; margin: 0; overflow: hidden; background: var(--wall-deep); --sp: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(0.65, 0, 0.2, 1); }
.strip img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transform: translate3d(0, calc(var(--sp) * -7%), 0) scale(1.06); will-change: transform; }
.col.in .strip { clip-path: inset(0 0 0 0); }
/* strips that show a face keep the whole head: no parallax overscan, anchored high (founder, 10 Nov 2026) */
.col[data-col="pendants"] .strip img, .col[data-col="chains"] .strip img { inset: 0; height: 100%; transform: none; }

/* product tiles: chalk, then lift onto the cobalt floor (W3) */
.card {
  --rx: 0deg; --ry: 0deg; --lx: 30%; --ly: 20%;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 3px; background: var(--tile);
  padding: 10px 12px 14px; display: flex; flex-direction: column;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s var(--ease), box-shadow 0.5s var(--ease);
  opacity: 0; translate: 0 22px;
}
.col.in .card { opacity: 1; translate: 0 0; transition: transform 0.6s var(--ease), box-shadow 0.5s var(--ease), opacity 0.8s calc(var(--i) * 60ms + 120ms) var(--ease), translate 0.9s calc(var(--i) * 60ms + 120ms) var(--ease); }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.5s var(--ease);
  background:
    radial-gradient(120% 80% at var(--lx) -10%, rgba(120, 180, 255, 0.55), transparent 60%),
    linear-gradient(var(--wall) 0%, #0350ab 58%, var(--floor) 100%);
}
.card-hit { position: absolute; inset: 0; z-index: 1; border: 0; background: none; padding: 0; }
.card-num { font: italic 600 13px/1 var(--serif); color: var(--denim); transition: color 0.4s; }
.card-stage { position: relative; aspect-ratio: 1; display: grid; place-items: center; margin: 4px 0 8px; pointer-events: none; }
.card-stage img {
  width: 80%; height: 80%; object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(11, 15, 26, 0.16));
  transition: transform 0.7s var(--ease), filter 0.6s var(--ease);
}
.card-shadow {
  position: absolute; left: 50%; bottom: 4%; width: 54%; height: 9%; border-radius: 50%; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(0, 14, 50, 0.5), transparent); opacity: 0; scale: 1.2 1;
  transition: opacity 0.6s var(--ease), scale 0.7s var(--ease);
}
.card-sheen {
  position: absolute; left: 10%; top: 10%; width: 80%; height: 80%;
  -webkit-mask: var(--cut) center / contain no-repeat; mask: var(--cut) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  opacity: 0; mix-blend-mode: screen; transition: transform 0.7s var(--ease);
}
.card-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: auto; padding-right: 40px; }
.card-t h3 { margin: 0; font: 600 12.5px/1.25 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--wall); transition: color 0.4s; }
.card-t b { font: 600 14px/1 var(--sans); color: var(--ink); transition: color 0.4s; }
.card-t { padding-right: 40px; flex-direction: column; align-items: flex-start; gap: 5px; }
.card-add {
  position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(3, 64, 146, 0.25); background: #fff; color: var(--wall);
  transition: background 0.3s, color 0.3s, transform 0.35s var(--spring), border-color 0.3s;
}
.card-add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.35s var(--ease); }
.card-add:hover { background: var(--wall); color: #fff; border-color: var(--wall); transform: scale(1.08); }
.card-add:active { transform: scale(0.92); }
.card-add.done { background: var(--wall); color: #fff; }
.card-add.done svg { transform: rotate(45deg) scale(0); }
.card-add.done::after { content: "✓"; position: absolute; font: 700 15px/1 var(--sans); animation: pop 0.4s var(--spring); }
@keyframes pop { from { scale: 0; } }
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 0 30px 50px -28px rgba(1, 25, 80, 0.75); z-index: 2; }
  .card:hover::before { opacity: 1; }
  .card:hover .card-stage img {
    transform: translateY(-7%) scale(1.07);
    filter: drop-shadow(-1.5px -0.5px 0 rgba(230, 240, 255, 0.55)) drop-shadow(0 26px 16px rgba(0, 10, 45, 0.5));
  }
  .card:hover .card-shadow { opacity: 1; scale: 0.8 1; }
  .card:hover .card-sheen { opacity: 1; animation: sheen 1.1s 0.1s var(--ease) both; transform: translateY(-7%) scale(1.07); }
  .card:hover .card-num { color: rgba(255, 255, 255, 0.7); }
  .card:hover .card-t h3, .card:hover .card-t b { color: #fff; }
}
@keyframes sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* the museum moment (W3): one piece on the cobalt floor, full bleed */
.museum { --mp: 0; position: relative; overflow: hidden; margin-top: 12px; height: clamp(440px, 52vw, 760px); background: var(--wall); color: #fff; }
.museum-img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 30% 50%; transform: translate3d(0, calc(var(--mp) * -8%), 0) scale(1.05); will-change: transform; }
.museum::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(1, 30, 90, 0.55) 80%); pointer-events: none; }
.museum-card { position: absolute; z-index: 1; right: var(--gut); top: 50%; width: min(400px, 40%); translate: 0 -40%; opacity: 0; transition: opacity 1s 0.2s var(--ease), translate 1.1s 0.2s var(--ease); }
.museum.in .museum-card { opacity: 1; translate: 0 -50%; }
.museum-k { font: 600 11px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.museum-card h2 { margin: 12px 0 14px; font: italic 800 clamp(34px, 4vw, 60px)/0.98 var(--serif); text-transform: uppercase; }
.museum-card p { margin: 0 0 26px; color: rgba(255, 255, 255, 0.82); font-size: 15px; max-width: 34ch; }
.btn-cobalt {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; border: 0; border-radius: 2px;
  background: var(--chalk); color: var(--wall); font: 700 13px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  transition: transform 0.4s var(--ease), background 0.3s;
}
.btn-cobalt:hover { background: #fff; transform: translateY(-2px); }
.btn-cobalt:active { transform: scale(0.97); }

/* shopping notes */
.notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); padding: clamp(48px, 6vw, 88px) var(--gut); border-top: 1px solid rgba(3, 64, 146, 0.12); margin-top: 12px; }
.note { display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; row-gap: 4px; opacity: 0; translate: 0 14px; transition: opacity 0.8s var(--ease), translate 0.8s var(--ease); }
.note:nth-child(2) { transition-delay: 80ms; } .note:nth-child(3) { transition-delay: 160ms; } .note:nth-child(4) { transition-delay: 240ms; }
.notes.in .note { opacity: 1; translate: 0 0; }
.note svg { grid-row: span 2; width: 26px; height: 26px; fill: none; stroke: var(--wall); stroke-width: 1.4; }
.note b { font: 700 13px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wall); }
.note span { font-size: 14px; color: var(--muted); }
.note a { color: var(--wall); }

/* ---------------- footer ---------------- */
.foot { background: var(--wall); color: #fff; padding: clamp(48px, 6vw, 80px) var(--gut) 28px; }
.foot-in { display: grid; grid-template-columns: 1.3fr 0.7fr 1fr 1.5fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.foot-brand img { width: min(230px, 60vw); height: auto; }
.foot-brand p { margin: 16px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; max-width: 30ch; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.foot-col span { display: contents; }
.foot-col b, .foot-sign b { font: 700 11px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 6px; }
.foot-col a { text-decoration: none; color: rgba(255, 255, 255, 0.9); width: fit-content; background: linear-gradient(#fff, #fff) 0 100% / 0 1px no-repeat; transition: background-size 0.35s var(--ease); }
.foot-col a:hover { background-size: 100% 1px; }
.foot-sign label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.foot-sign label span { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.sign-row { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.sign-row input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; padding: 12px 0; font: 400 16px var(--sans); }
.sign-row input::placeholder { color: rgba(255, 255, 255, 0.55); }
.sign-row input:focus { outline: none; }
.sign-row:focus-within { border-color: #fff; }
.sign-row button { border: 0; background: none; display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 0 2px 0 12px; }
.sign-row button:hover svg { transform: translateX(3px); }
.sign-msg { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.foot-base { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: clamp(36px, 5vw, 64px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 13px; color: rgba(255, 255, 255, 0.65); }
.foot-base span { margin-right: auto; }
.foot-base a { text-decoration: none; }
.foot-base a:hover { color: #fff; }

/* ---------------- floating bag (phones) ---------------- */
.bag-float {
  position: fixed; z-index: 45; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%;
  display: none; place-items: center; border: 0; background: var(--wall); color: #fff;
  box-shadow: 0 14px 30px -10px rgba(1, 25, 80, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  translate: 0 140%; transition: translate 0.5s var(--ease);
}
.bag-float svg { width: 24px; height: 24px; }
.bag-float.show { translate: 0 0; }
.bag-float-n {
  position: absolute; top: 6px; right: 5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--chalk); color: var(--wall); font: 700 11px/19px var(--sans); text-align: center; scale: 0; transition: scale 0.35s var(--spring);
}
.bag-float.has .bag-float-n { scale: 1; }

/* ---------------- the sheet: 3D turn + choose + add ---------------- */
.sheet { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: transparent; overflow: hidden; }
.sheet::backdrop { background: rgba(1, 16, 52, 0.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.sheet[open]::backdrop { animation: fade 0.4s var(--ease); }
.sheet.closing::backdrop { animation: fade 0.26s reverse both; }
@keyframes fade { from { opacity: 0; } }
.sheet-in {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(1040px, calc(100% - 48px)); height: min(640px, calc(100% - 48px));
  display: grid; grid-template-columns: 1.08fr 1fr; overflow: hidden; border-radius: 6px; background: var(--chalk);
  box-shadow: 0 50px 120px -30px rgba(0, 10, 40, 0.8);
}
.sheet[open] .sheet-in { animation: rise 0.55s var(--ease); }
.sheet.closing .sheet-in { animation: sink 0.26s ease-in both; }
@keyframes rise { from { opacity: 0; translate: -50% calc(-50% + 30px); scale: 0.97; } }
@keyframes sink { to { opacity: 0; translate: -50% calc(-50% + 20px); scale: 0.98; } }
.sheet-stage {
  position: relative; overflow: hidden; user-select: none;
  background:
    radial-gradient(70% 55% at 35% 30%, rgba(90, 150, 240, 0.4), transparent 70%),
    linear-gradient(#023486 0%, var(--wall) 50%, #0350ab 64%, var(--floor) 100%);
}
.sheet-stage.dragging .s-turn { cursor: grabbing; }
.sheet-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.obj { position: absolute; left: 50%; top: 45%; width: min(64%, 46vh, 380px); aspect-ratio: 1; translate: -50% -50%; perspective: 1000px; }
.sheet.wide .obj { width: min(74%, 50vh, 440px); }
.obj-turn { position: absolute; inset: 0; transform-style: preserve-3d; --sx: 50%; }   /* no will-change: it froze the picture at one size and blurred it when tilted */
.lyr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: translateZ(calc(var(--z) * -1.15px)); pointer-events: none; }
.lyr:not(:first-child) { filter: brightness(0.38) contrast(1.25) saturate(0.4); }
.lyr:first-child { backface-visibility: hidden; }   /* no filter on the front: a filter re-rasterises it soft */
.obj-sheen {
  position: absolute; inset: 0; transform: translateZ(0.5px); pointer-events: none;
  -webkit-mask: var(--cut) center / contain no-repeat; mask: var(--cut) center / contain no-repeat;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.28) 47%, rgba(180, 215, 255, 0.14) 53%, transparent 68%) var(--sx) 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
}
.obj-shadow { position: absolute; left: 50%; bottom: -10%; width: 62%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 10, 40, 0.6), transparent); filter: blur(4px); transform: translateX(-50%); }
.turn-hint {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: none; color: rgba(255, 255, 255, 0.78); font: 600 11px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase;
}
.turn-hint svg { width: 30px; height: 18px; }
.sheet-info { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 4vw, 52px) clamp(24px, 3.6vw, 48px); overflow-y: auto; }
.sheet-k { font: italic 600 14px/1 var(--serif); color: var(--denim); }
.sheet-info h2 { margin: 12px 0 10px; font: italic 800 clamp(28px, 3vw, 42px)/1 var(--serif); text-transform: uppercase; color: var(--wall); padding-right: 30px; }
.sheet-price { margin: 0; font: 600 24px/1 var(--sans); }
.sheet-mat { display: none; }
.sheet-price { margin-bottom: 22px; }
.opts { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.opt-h { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.opt-h span { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; color: var(--wall); }
.opt-h em { font-style: normal; color: var(--muted); }
.fact-row .opt-h { margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  min-width: 64px; padding: 11px 16px; border: 1px solid rgba(3, 64, 146, 0.28); border-radius: 2px; background: #fff;
  font: 600 13px/1 var(--sans); color: var(--ink); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.pill:hover { border-color: var(--wall); }
.pill:active { transform: scale(0.96); }
.pill[aria-pressed="true"] { background: var(--wall); border-color: var(--wall); color: #fff; }
.opt-wait { margin: 0; padding: 14px 16px; background: #fff; border-left: 2px solid var(--denim); font-size: 14px; color: var(--muted); }
.opt-wait a { color: var(--wall); }
.btn-buy {
  width: 100%; min-height: 56px; border: 0; border-radius: 2px; background: var(--wall); color: #fff;
  font: 700 14px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 16px 30px -18px rgba(1, 30, 90, 0.9); transition: background 0.3s, transform 0.25s var(--ease);
}
.btn-buy:hover { background: #0350ab; }
.btn-buy:active { transform: scale(0.98); }
.btn-buy:disabled { background: #b9bfca; box-shadow: none; cursor: not-allowed; }
.sheet-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.sheet-more { margin: auto 0 0; padding-top: 22px; font-size: 13px; color: var(--wall); }
.sheet-more a { color: inherit; text-underline-offset: 3px; }
.sheet-x { position: absolute; z-index: 3; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.92); color: var(--ink); display: grid; place-items: center; transition: transform 0.3s var(--ease); }
.sheet-x svg { width: 16px; height: 16px; }
.sheet-x:hover { transform: rotate(90deg); }
.sheet-open body { overflow: hidden; }

/* ---------------- bag drawer (markup from zero.js) ---------------- */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(1, 16, 52, 0.5); opacity: 0; transition: opacity 0.4s; }
.scrim.on { opacity: 1; }
.drawer {
  position: fixed; z-index: 81; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column;
  background: var(--chalk); translate: 100% 0; transition: translate 0.45s var(--ease); box-shadow: -30px 0 80px -30px rgba(0, 10, 40, 0.6);
}
.drawer.on { translate: 0 0; }
.drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; background: var(--wall); color: #fff; }
.drawer-h h2 { margin: 0; font: italic 800 26px/1 var(--serif); text-transform: uppercase; }
.round.x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: none; color: #fff; display: grid; place-items: center; }
.round.x svg { width: 15px; height: 15px; }
.lines { flex: 1; overflow-y: auto; padding: 8px 24px; }
.empty { color: var(--muted); padding: 30px 0; }
.bag-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(3, 64, 146, 0.12); }
.bag-line img { width: 72px; height: 72px; object-fit: contain; background: var(--tile); border-radius: 3px; padding: 6px; }
.bag-line h3 { margin: 0 0 3px; font: 600 13px/1.25 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wall); }
.bag-line p { margin: 0; font-size: 12px; color: var(--muted); }
.bag-line .p { font-weight: 600; }
.rm { border: 0; background: none; padding: 6px 0 0; font-size: 12px; color: var(--muted); text-decoration: underline; }
.drawer-f { padding: 20px 24px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(3, 64, 146, 0.12); background: #fff; }
.total { display: flex; justify-content: space-between; font: 700 17px/1 var(--sans); margin-bottom: 8px; }
.drawer .note { display: block; margin: 0 0 14px; font-size: 13px; color: var(--muted); opacity: 1; translate: none; }
.toast {
  position: fixed; z-index: 90; left: 50%; top: calc(var(--head) + 14px); translate: -50% -14px; opacity: 0;
  padding: 13px 20px; border-radius: 2px; background: var(--ink); color: #fff; font-size: 14px; pointer-events: none;
  transition: opacity 0.35s var(--ease), translate 0.45s var(--ease);
}
.toast.on { opacity: 1; translate: -50% 0; }

/* ---------------- visual consistency pass (10 Nov 2026) ----------------
   Founder: "the all white background throws me off and makes it look like too cheap".
   The whole shop now sits on the Cobalt Studio floor (a real ChatGPT photo of the empty studio floor,
   mirrored so it repeats without a seam), like the W3 layout and the locked photo templates. */
:root { --floor-top: #003d96; }
main { background: var(--floor-top, #0352b5) url("/img/studio/floor-tile-1600.webp") 50% 0 / 100% auto repeat-y; }
.hero::after { background: linear-gradient(rgba(3, 82, 181, 0), var(--floor-top, #0352b5)); }
.floor { background: linear-gradient(#0360cc, var(--floor-top, #0352b5)); }
.catalog { background: none; color: #fff; }
.col-h h2 { color: #fff; }
.col-rule { color: #fff; opacity: 0.35; }
.col-h em { color: rgba(255, 255, 255, 0.62); }
.col.has-strip { background: rgba(1, 30, 90, 0.28); }
/* tiles: no white box; every piece stands on the floor in its own pool of light */
.card { background: none; border-radius: 4px; }
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(58% 42% at 50% 60%, rgba(150, 195, 255, 0.2), transparent 72%);
}
.card::before {
  background:
    radial-gradient(90% 70% at var(--lx) 0%, rgba(160, 205, 255, 0.34), transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  border-radius: inherit;
}
.card-stage img { filter: drop-shadow(0 10px 10px rgba(0, 10, 45, 0.45)); }
/* pendants hang on the house chain (template picture 1): taller stage so the piece reads as big as the others */
.col[data-col="crosses"] .card-stage, .col[data-col="pendants"] .card-stage { aspect-ratio: 0.82; }
.col[data-col="crosses"] .card-stage img, .col[data-col="pendants"] .card-stage img { width: 100%; height: 100%; }
.col[data-col="crosses"] .card-sheen, .col[data-col="pendants"] .card-sheen { left: 0; top: 0; width: 100%; height: 100%; }
.card-shadow { opacity: 0.75; scale: 1 1; }
.card-num { color: rgba(255, 255, 255, 0.5); }
.card-t h3 { color: #fff; }
.card-t b { color: rgba(255, 255, 255, 0.82); }
.card-add { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.card-add:hover, .card-add.done { background: var(--chalk); color: var(--wall); border-color: var(--chalk); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 0 30px 50px -30px rgba(0, 10, 45, 0.8); }
  .card:hover .card-num { color: rgba(255, 255, 255, 0.8); }
}
.notes { border-top: 1px solid rgba(255, 255, 255, 0.14); color: #fff; }
.note svg { stroke: #fff; }
.note b { color: #fff; }
.note span { color: rgba(255, 255, 255, 0.74); }
.note a { color: #fff; }
/* the sheet: the three template pictures on the left, the deep studio wall on the right */
.sheet-stage { background: #034092 url("/img/studio/sheet-stage-1000.webp") 50% 50% / cover no-repeat; }
.views { position: absolute; z-index: 2; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.views[hidden], .views [hidden] { display: none; }
.views button { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: #fff; text-align: left; }
.vt {
  width: 56px; height: 56px; border-radius: 4px; overflow: hidden; background: var(--wall); flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 8px 18px -8px rgba(0, 10, 40, 0.7); transition: box-shadow 0.3s, transform 0.3s var(--ease);
}
.vt img { width: 100%; height: 100%; object-fit: cover; }
.vt-turn img { object-fit: contain; padding: 5px; }
.vt-size { background: #f4f6f9; }
.views em { font: 600 10.5px/1 var(--sans); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; translate: -4px 0; transition: opacity 0.3s, translate 0.3s var(--ease); text-shadow: 0 1px 8px rgba(0, 10, 40, 0.6); }
.views button[aria-pressed="true"] .vt { box-shadow: 0 0 0 2px #fff, 0 8px 18px -8px rgba(0, 10, 40, 0.7); }
.views button[aria-pressed="true"] em, .views button:hover em, .views button:focus-visible em { opacity: 1; translate: 0 0; }
.views button:hover .vt { transform: scale(1.05); }
.sheet-in { background: #022f80; color: #fff; }
.sheet-info {
  background: radial-gradient(90% 60% at 100% 0%, rgba(90, 150, 240, 0.22), transparent 70%), linear-gradient(#023486, #01276f);
}
.sheet-k { color: rgba(255, 255, 255, 0.6); }
.sheet-info h2 { color: #fff; }
.sheet-price { color: #fff; }
.opt-h span { color: #fff; }
.opt-h em { color: rgba(255, 255, 255, 0.66); }
.pill { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.pill:hover { border-color: #fff; }
.pill[aria-pressed="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--wall); }
.opt-wait { background: rgba(255, 255, 255, 0.08); border-left-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.8); }
.opt-wait a { color: #fff; }
.btn-buy { background: var(--chalk); color: var(--wall); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.7); }
.btn-buy:hover { background: #fff; }
.btn-buy:disabled { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.6); }
.sheet-note { color: rgba(255, 255, 255, 0.66); }
.sheet-more { color: #fff; }
@media (max-width: 760px) {
  .views { left: 12px; top: auto; bottom: 12px; flex-direction: row; gap: 8px; }
  .vt { width: 46px; height: 46px; }
  .views em { display: none; }
  .turn-hint { left: auto; right: 14px; translate: none; bottom: 42px; }
  .turn-hint span { display: none; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1240px) {
  .col[data-col="crosses"] { --cols: 4; }
  .col[data-col="rings"] { --cols: 2; }
}
@media (max-width: 1080px) {
  .tabs a { padding: 10px 9px; letter-spacing: 0.12em; }
  .foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .col.has-strip { grid-template-columns: 1fr; min-height: 0; }
  .strip { aspect-ratio: 16 / 10; }
  .col[data-col="chains"] .strip { aspect-ratio: 4 / 5; } /* Mei stands full length: tall frame on phones so most of her shows */
  /* Amara wears the Gorgon low on the tank: on phones show her whole frame so the pendant is never cropped off */
  .col[data-col="pendants"] .strip { aspect-ratio: 4 / 5; }
  .col[data-col="pendants"] .strip img { object-position: 50% 0 !important; } /* 4:5 frame = her 4:5 photo: all of it shows */
  .col.has-strip .col-body { padding: 24px var(--gut) 30px; }
  .notes { grid-template-columns: 1fr 1fr; }
  .museum { height: auto; }
  .museum-img { position: relative; inset: auto; height: auto; aspect-ratio: 3 / 2; transform: none; }
  .museum::after { display: none; }
  .museum-card { position: relative; right: auto; top: auto; width: auto; translate: 0 14px; padding: 26px var(--gut) 34px; }
  .museum.in .museum-card { translate: 0 0; }
}
@media (max-width: 760px) {
  :root { --head: 56px; }
  .top-in { flex-wrap: wrap; height: auto; min-height: var(--head); gap: 0 12px; }
  .top-logo, .bag-btn { height: var(--head); display: flex; align-items: center; }
  .top-logo img { height: 24px; }
  .bag-btn { margin-left: auto; }
  .bag-word { display: none; }
  .tabs { order: 3; width: calc(100% + 2 * var(--gut)); margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; overflow-x: auto; }
  .tabs a { padding: 10px 10px; font-size: 11px; }
  .top[data-state="hero"] .tabs { display: none; }
  .bag-float { display: grid; }

  .hero { --hh: max(560px, 100svh); --fw: calc(var(--hh) * 0.86 * 1.5); }
  .hero-frame { margin-left: calc(var(--fw) * -0.7); }
  .hero-room { -webkit-mask: linear-gradient(transparent, #000 14%); mask: linear-gradient(transparent, #000 14%); }
  .hero-copy { inset: calc(var(--head) + 6px) var(--gut) calc(26px + env(safe-area-inset-bottom)); width: auto; display: flex; flex-direction: column; }
  .hero-logo { width: min(86%, 400px); margin: 0 auto; }
  .hero-ui { margin-top: auto; align-items: center; text-align: center; gap: 12px; }
  .btn-chalk { padding: 16px 28px; }
  .hero-trust { font-size: 10.5px; color: rgba(255, 255, 255, 0.85); }
  .hero-scroll { display: none; }

  .col { --cols: 2 !important; }
  .col-h { gap: 12px; }
  .col-h em { font-size: 13px; }
  .card { padding: 9px 10px 12px; }
  .card-t h3 { font-size: 11.5px; letter-spacing: 0.05em; }
  .card-add { width: 34px; height: 34px; right: 8px; bottom: 8px; }
  .card-t { padding-right: 38px; }
  .notes { grid-template-columns: 1fr; gap: 22px; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand, .foot-sign { grid-column: 1 / -1; }
  .foot-base span { width: 100%; }

  .sheet-in {
    left: 0; right: 0; top: auto; bottom: 0; translate: none; width: 100%; height: auto; max-height: calc(100% - 28px);
    grid-template-columns: 1fr; grid-template-rows: minmax(0, 42svh) minmax(0, 1fr); border-radius: 16px 16px 0 0;
  }
  .sheet-stage { min-height: 300px; }
  .obj { width: min(62%, 30svh); top: 46%; }
  .sheet.wide .obj { width: min(76%, 34svh); }
  .sheet[open] .sheet-in { animation: up 0.5s var(--ease); }
  .sheet.closing .sheet-in { animation: down 0.26s ease-in both; }
  @keyframes up { from { translate: 0 100%; } }
  @keyframes down { to { translate: 0 100%; } }
  .sheet-info { padding: 22px var(--gut) calc(22px + env(safe-area-inset-bottom)); }
  .sheet-more { margin-top: 0; text-align: center; padding-top: 14px; }
  .sheet-mat { margin-bottom: 16px; }
}

/* ---------------- reduced motion: everything still, nothing hidden ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .hero-room, .hero-model, .hero-logo, .strip img, .museum-img { transform: none !important; }
  .hero-room, .hero-model, .hero-ui, .top-in, .card, .note, .museum-card { opacity: 1; translate: none; scale: none; filter: none; }
  .hero-metal, .strip { clip-path: none; }
  .museum-card { translate: 0 -50%; }
  .col-rule { transform: none; }
  .hero::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) { .museum-card { translate: none; } }

/* ---------------- iPhone pass (10 Nov 2026) ----------------
   Founder: a "sign up now for 10% off" pop-up on arrival; a top-left button that shows every section of the shop;
   the landing picture should sell the piece the model wears (add to bag right there); the shop broken up, not one long list. */

/* menu button (phones) */
.menu-btn { display: none; width: 44px; height: 44px; margin-left: -10px; place-items: center; border: 0; background: none; color: #fff; }
.menu-btn svg { width: 24px; height: 24px; }

/* the menu drawer */
.menu, .offer { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: transparent; overflow: hidden; color: #fff; }
.menu::backdrop, .offer::backdrop { background: rgba(1, 16, 52, 0.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.menu[open]::backdrop, .offer[open]::backdrop { animation: fade 0.35s var(--ease); }
.menu.closing::backdrop, .offer.closing::backdrop { animation: fade 0.25s reverse both; }
.menu-in {
  position: absolute; inset: 0 auto 0 0; width: min(86vw, 390px); display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 6px) 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--wall-deep) url("/img/studio/floor-tile-1600.webp") 50% 0 / 200% auto;
  box-shadow: 30px 0 60px -30px rgba(0, 8, 40, 0.8);
}
.menu[open] .menu-in { animation: menu-in 0.45s var(--ease); }
.menu.closing .menu-in { animation: menu-out 0.26s ease-in both; }
@keyframes menu-in { from { translate: -100% 0; } }
@keyframes menu-out { to { translate: -100% 0; } }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: 56px; margin-bottom: 8px; }
.menu-top img { height: 24px; width: auto; }
.menu-x, .offer-x { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; border: 0; background: none; color: #fff; }
.menu-x svg, .offer-x svg { width: 20px; height: 20px; }
.menu-cols { display: flex; flex-direction: column; }
.menu-cols a {
  display: grid; grid-template-columns: 64px 1fr 16px; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14); text-decoration: none;
}
.menu[open] .menu-cols a { animation: rise 0.5s calc(0.08s + var(--i) * 0.05s) var(--ease) both; }
@keyframes rise { from { opacity: 0; translate: -14px 0; } }
.menu-pic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(170, 210, 255, 0.32), rgba(255, 255, 255, 0.04)); }
.menu-pic img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 10, 45, 0.45)); }
.menu-t b { display: block; font: italic 700 25px/1.05 var(--serif); }
.menu-t em { display: block; margin-top: 4px; font: 500 11px/1.3 var(--sans); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); }
.menu-cols svg, .menu-all svg, .menu-offer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.menu-all {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; padding: 16px; border-radius: 999px;
  background: var(--chalk); color: var(--wall); text-decoration: none; font: 700 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.menu-offer {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.06); color: #fff; font: 500 13px/1.2 var(--sans);
}
.menu-offer b { font: italic 700 15px/1 var(--serif); }
.menu-help { display: flex; gap: 22px; margin-top: auto; padding-top: 28px; font-size: 13px; }
.menu-help a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }

/* hero: the piece the model wears */
.hero-look {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 999px; cursor: pointer;
  background: rgba(1, 30, 90, 0.38); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 16px 30px -18px rgba(0, 10, 45, 0.7);
}
.hero-look { color: #fff; }
.hero-look[hidden] { display: none; }
.offer-form { display: flex; flex-direction: column; }
.look-pic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(180, 215, 255, 0.4), rgba(255, 255, 255, 0.06)); }
.look-pic img { width: 80%; height: 80%; object-fit: contain; }
.look-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.look-t em { font: 600 9.5px/1 var(--sans); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.look-t b { color: #fff; font: 700 13px/1.15 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-t i { font: 600 12.5px/1 var(--sans); font-style: normal; color: rgba(255, 255, 255, 0.85); }
.look-add {
  flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 12px 16px; border: 0; border-radius: 999px;
  background: var(--chalk); color: var(--wall); font: 700 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 0.25s, transform 0.2s var(--ease);
}
.look-add svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.look-add:active { transform: scale(0.96); }
.look-add.done { background: #c9f2d7; }

/* the 10% pop-up */
.offer-in {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(92vw, 760px); display: grid; grid-template-columns: 0.9fr 1fr;
  border-radius: 18px; overflow: hidden; background: var(--wall-deep) url("/img/studio/floor-tile-1600.webp") 50% 0 / 220% auto;
  box-shadow: 0 40px 90px -30px rgba(0, 8, 40, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.offer[open] .offer-in { animation: offer-in 0.5s var(--ease); }
.offer.closing .offer-in { animation: fade 0.24s reverse both; }
@keyframes offer-in { from { opacity: 0; scale: 0.94; } }
.offer-pic { margin: 0; min-height: 100%; }
.offer-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; } /* top-anchored: her whole head always shows (founder, 10 Nov 2026) */
.offer-body { padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.offer-k { font: 600 11px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.offer h2 { margin: 12px 0 10px; font: italic 700 clamp(30px, 4vw, 42px)/1.02 var(--serif); }
.offer h2 em { display: block; font-size: 1.35em; }
.offer-body p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.offer-row { display: flex; flex-direction: column; gap: 10px; }
.offer-row input {
  height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08);
  color: #fff; font: 500 16px/1 var(--sans);
}
.offer-row input::placeholder { color: rgba(255, 255, 255, 0.6); }
.offer-row input:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.offer-row button {
  height: 52px; border: 0; border-radius: 12px; background: var(--chalk); color: var(--wall);
  font: 700 13px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.offer-row button:disabled { opacity: 0.6; }
.offer-body .offer-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; color: #ffd9d9; }
.offer-no { align-self: center; margin-top: 2px; padding: 8px 12px; border: 0; background: none; color: rgba(255, 255, 255, 0.62); font: 500 13px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.offer-done { display: flex; flex-direction: column; align-items: flex-start; }
.offer-done[hidden], .offer-form[hidden] { display: none; }
.offer-code {
  display: flex; align-items: baseline; gap: 14px; width: 100%; margin: 4px 0 14px; padding: 16px 18px; border-radius: 12px;
  border: 1.5px dashed rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); color: #fff;
}
.offer-code b { font: 700 26px/1 var(--sans); letter-spacing: 0.16em; }
.offer-code span { margin-left: auto; font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.offer-x { position: absolute; top: 8px; right: 14px; margin: 0; background: rgba(1, 20, 60, 0.35); border-radius: 50%; width: 38px; height: 38px; }
.offer-open, .menu-open { overflow: hidden; }

/* "See all" is a phone control */
.col-all { display: none; }

@media (max-width: 760px) {
  .menu-btn { display: grid; }
  .top-in { position: relative; }
  .top-logo { position: absolute; left: 50%; top: 0; translate: -50% 0; }
  .top[data-state="hero"] .top-logo { translate: -50% -8px; }
  .bag-btn { margin-left: auto; }

  .hero-look { width: min(100%, 360px); }
  .hero-ui .btn-chalk { width: min(100%, 360px); justify-content: center; }

  /* each collection = one swipe row; the full grid is one tap away */
  .col-all {
    display: inline-flex; flex: none; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: none;
    color: #fff; font: 600 10.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  }
  .col-h { align-items: center; }
  .col-h em { display: none; }
  .col.rowable:not(.all) .grid {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; scroll-padding: 0 var(--gut);
  }
  .col-body { min-width: 0; } /* a swipe row must never widen its column (that zoomed the whole page out) */
  .col.rowable:not(.all) .grid::-webkit-scrollbar { display: none; }
  .col.rowable:not(.all) .card { flex: 0 0 43%; scroll-snap-align: start; }
  .col.has-strip .strip { aspect-ratio: 16 / 9; }
  .col.has-strip[data-col="pendants"] .strip, .col.has-strip[data-col="chains"] .strip { aspect-ratio: 4 / 5; } /* whole Amara frame (Gorgon never cropped); Mei shown head to knee */

  /* pop-up = bottom sheet on the phone */
  .offer-in {
    left: 0; right: 0; top: auto; bottom: 0; translate: none; width: 100%; grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    border-radius: 18px 18px 0 0; max-height: calc(100% - 20px); overflow-y: auto;
  }
  .offer[open] .offer-in { animation: up 0.5s var(--ease); }
  .offer.closing .offer-in { animation: down 0.24s ease-in both; }
  .offer-pic { aspect-ratio: 4 / 3; min-height: 0; } /* was 16:9, which cut her forehead off on phones */
  .offer-body { padding: 22px var(--gut) calc(14px + env(safe-area-inset-bottom)); }
  .offer h2 { font-size: 30px; margin: 10px 0 8px; }
  .offer-body p { margin-bottom: 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu[open] .menu-in, .menu[open] .menu-cols a, .offer[open] .offer-in { animation: none; }
}

/* ---------------- chalk breaks (founder, 10 Nov 2026) ----------------
   "too much blue … bring back the white, but … without it looking cheap … some more subtle breaks".
   The page alternates: cobalt floor (hero + Crosses), chalk gallery wall (Pendants), the cobalt museum,
   chalk (Rings), cobalt (Bracelets), chalk (Chains + the shopping notes), cobalt footer.
   On chalk every piece still stands on its own small cobalt plinth, so the silver never sits on plain white
   (that was the "cheap" look); the white is the wall around the pictures, like a gallery. */
.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"], .notes {
  --ink-c: var(--wall);
  position: relative; color: var(--ink);
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(255, 255, 255, 0.75), transparent 60%),
    linear-gradient(#f4f3f0, #ecebe6);
}
.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"] { margin-top: 0; box-shadow: inset 0 1px 0 rgba(3, 64, 146, 0.1), inset 0 -1px 0 rgba(3, 64, 146, 0.1); }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .col-h h2 { color: var(--wall); }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .col-rule { color: var(--wall); opacity: 0.35; }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .col-h em { color: var(--denim); }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .col-all { color: var(--wall); border-color: rgba(3, 64, 146, 0.35); }
/* the cobalt plinth: a small piece of the studio floor under each piece */
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card { padding: 0 0 12px; }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card::after { display: none; }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card-stage {
  margin: 0 0 12px; border-radius: 3px; overflow: hidden;
  background:
    radial-gradient(70% 45% at 50% 64%, rgba(150, 195, 255, 0.28), transparent 72%),
    radial-gradient(90% 60% at 30% 0%, rgba(90, 150, 240, 0.35), transparent 70%),
    linear-gradient(#0344a0, #034092 55%, #023a86);
  box-shadow: 0 18px 30px -22px rgba(1, 30, 90, 0.7);
}
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card-num { position: absolute; z-index: 1; top: 10px; left: 12px; color: rgba(255, 255, 255, 0.6); }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card-t { padding-left: 2px; }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card-t h3 { color: var(--wall); }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card-t b { color: var(--ink); }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card-add { bottom: 6px; right: 2px; background: none; border-color: rgba(3, 64, 146, 0.32); color: var(--wall); }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) :is(.card-add:hover, .card-add.done) { background: var(--wall); border-color: var(--wall); color: #fff; }
:is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card:hover { box-shadow: none; }
  :is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card:hover .card-num { color: #fff; }
  :is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card:hover .card-t h3 { color: var(--wall); }
  :is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card:hover .card-t b { color: var(--ink); }
  :is(.col[data-col="pendants"], .col[data-col="rings"], .col[data-col="chains"]) .card:hover .card-stage { box-shadow: 0 30px 40px -24px rgba(1, 30, 90, 0.85); }
}
/* the shopping notes: chalk, joined to the Chains wall by one cobalt hairline */
.notes { margin-top: 0; border-top: 1px solid rgba(3, 64, 146, 0.16); }
.notes .note svg { stroke: var(--wall); }
.notes .note b { color: var(--wall); }
.notes .note span { color: var(--muted); }
.notes .note a { color: var(--wall); }
/* the museum and the other cobalt bands sit flush between the chalk walls */
.museum, .col.has-strip { margin-top: 0; }
.foot { background: var(--wall-deep); }

/* the piece sheet on a phone: the add button stays in reach while the sizes are chosen */
@media (max-width: 760px) {
  .sheet-info .btn-buy { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 2; flex: none; box-shadow: 0 -10px 24px -6px rgba(1, 30, 80, 0.85), 0 16px 30px -18px rgba(0, 0, 0, 0.7); }
}
@media (hover: none) { .pill:hover { border-color: rgba(255, 255, 255, 0.3); } .pill[aria-pressed="true"]:hover { border-color: var(--chalk); } }

/* ---------------- preview: ?look=worn (each card opens on the on-body shot) ---------------- */
.look-worn .card-stage { aspect-ratio: 4 / 5 !important; overflow: hidden; border-radius: 3px; }
.look-worn :is(.col[data-col="rings"], .col[data-col="bracelets"]) .card-stage { aspect-ratio: 3 / 2 !important; }
.look-worn .card-stage img { width: 100% !important; height: 100% !important; object-fit: cover; filter: none !important; }
.look-worn :is(.card-shadow, .card-sheen) { display: none; }
.look-worn .card-num { position: absolute; z-index: 1; top: 10px; left: 12px; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 10, 40, 0.6); }
@media (hover: hover) and (pointer: fine) {
  .look-worn .card:hover .card-stage img { transform: scale(1.04); filter: none !important; }
}

/* ---------------- piece sheet: swipe gallery + option pictures (founder, 10 Nov 2026) ----------------
   "I should be able to swipe on the images on the top and the first picture should be the picture of the person
   wearing it … on the phone version you can't even see the full chain in his frame".
   1 On him (follows the chosen length / width) · 2 The piece (drag to turn) · 3 True size · 4 Compare. */
.gal {
  position: absolute; inset: 0 0 34px; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y;
}
.gal::-webkit-scrollbar { display: none; }
.gal:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; container-type: size; }
.slide[hidden] { display: none; }
.slide img.pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* on-body pictures of neck pieces show the WHOLE chain and pendant: the frame is fitted, never cropped */
.s-worn { background: #023186; } /* the studio wall colour at the photo edges */
/* People are never cut off (founder, 10 Nov 2026: "when you actually click on it, you don't really see the full display
   of the people … the barbed crown ring … it's like zoomed in and you can't even see her"): every on-body and Styled
   photo is shown WHOLE (contain), and a soft blurred copy of the same photo fills the frame edges, so the slide still
   reads as one picture at any screen shape. Check: research/picture-audit/audit.py (0 flags). */
.s-worn img.pic, .s-styled img.pic { object-fit: contain; }
/* ring / bracelet On him pictures are hand-and-wrist close-ups (no face): they fill the frame, the piece stays centred */
.sheet.wide .s-worn img.pic { object-fit: cover; }
/* the frame edges take the photo's own wall colour, sampled from its left / right edges (js/studio.js edgeTint) */
.s-worn, .s-styled { background: #023186; } /* js/studio.js edgeTint paints the bands from the photo's own edge rows */
.s-size { background: #f4f6f9; }
.s-size img.pic { object-fit: contain; }
/* no maker numbers: the Size slide says so plainly (js/studio.js openSheet) */
.s-size.unmeasured img.pic { display: none; }
/* estimated size (no maker numbers yet): a plain label on the picture, so it is never taken as measured */
.s-size .est { position: absolute; z-index: 1; left: 12px; bottom: 44px; margin: 0; padding: 7px 11px; border-radius: 99px;
  background: rgba(255, 236, 179, 0.97); color: #5c3c00; font: 500 11px/1 var(--sans); letter-spacing: 0.04em; white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 8px rgba(11, 15, 26, 0.12); }
.s-size .est b { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-right: 4px; }
.s-size .est[hidden] { display: none; }
.size-note { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 32px; text-align: center; color: var(--muted); font: 400 14px/1.5 var(--sans); }
.size-note[hidden] { display: none; }
.size-note img { width: auto; max-width: 46%; max-height: 44%; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 10px 18px rgba(11, 15, 26, 0.16)); }
.size-note p { margin: 0; max-width: 34ch; }
.size-note .sn-h { color: var(--ink); font: 600 12px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.size-note .sn-k { color: var(--wall); font-weight: 600; }
.s-styled { background: #023186; }
.s-turn { cursor: grab; }
.s-turn .obj { touch-action: pan-y; width: min(64%, 76cqh, 380px); }
.sheet.wide .s-turn .obj { width: min(74%, 80cqh, 440px); }
.shown {
  position: absolute; z-index: 1; right: 12px; top: 12px; padding: 7px 12px; border-radius: 99px;
  background: rgba(2, 24, 70, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff;
  font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.s-size .shown { background: rgba(3, 64, 146, 0.9); }
.shown[hidden] { display: none; }
/* compare: every length (or width) side by side */
.s-cmp { background: #023186; display: flex; flex-direction: column; justify-content: center; padding: 56px 14px 40px; }
.cmp { display: flex; flex-direction: column; gap: 10px; height: 100%; justify-content: center; }
.cmp-h { margin: 0; text-align: center; color: rgba(255, 255, 255, 0.75); font: 600 11px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.cmp-row { display: flex; gap: 6px; justify-content: center; min-height: 0; flex: 0 1 auto; }
.cmp-cell { position: relative; flex: 1 1 0; max-width: 34%; min-width: 0; padding: 0; border: 0; background: none; color: #fff; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cmp[data-n="4"] .cmp-cell { max-width: 25%; }
.cmp-cell img { width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: contain; background: #022a74; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); transition: box-shadow 0.25s; }
.sheet.wide .cmp-cell img { --ar: 3 / 2; }
.cmp-cell span { font: 600 11px/1 var(--sans); letter-spacing: 0.08em; }
.cmp-cell[aria-pressed="true"] img { box-shadow: 0 0 0 2px #fff; }
/* wide (ring / bracelet) pictures: 4 go 2 x 2, 3 stay in one row so none is cut off below the frame */
.sheet.wide .cmp[data-n="4"] .cmp-row { flex-wrap: wrap; }
.sheet.wide .cmp[data-n="4"] .cmp-cell { flex: 0 0 calc(50% - 3px); max-width: calc(50% - 3px); }
/* phones with two choice rows (Wraith: width + 4 lengths) have a short picture: the 2 x 2 grid cut its bottom row, so the
   four sit in one row there instead (research/picture-audit/audit.py flagged it, 10 Nov 2026) */
@media (max-width: 760px) {
  .sheet.wide.two-opts .cmp[data-n="4"] .cmp-row { flex-wrap: nowrap; }
  .sheet.wide.two-opts .cmp[data-n="4"] .cmp-cell { flex: 1 1 0; max-width: 25%; }
}
.vt-cmp img { object-fit: cover; }
/* dots + arrows */
/* No strip at all (founder, 11 Nov 2026: "It looks like you chose two different colors and pasted it on top … the dot
   strip, the person's body can go underneath it … across the app"): every slide fills the whole stage and the dots float
   on the picture itself. White dots with a soft shadow on photos; cobalt dots on the light True size slide (.light). */
.gal { inset: 0; }
.dots { position: absolute; z-index: 2; left: 50%; bottom: 8px; translate: -50% 0; display: flex; gap: 2px; }
.dots[hidden] { display: none; }
.dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.dots button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.62); box-shadow: 0 0 0 1px rgba(0, 12, 40, 0.28), 0 1px 5px rgba(0, 12, 40, 0.45); transition: background 0.25s, width 0.25s var(--ease); }
.dots button[aria-current="true"]::after { width: 18px; border-radius: 4px; background: #fff; }
.sheet-stage.light .dots button::after { background: rgba(3, 64, 146, 0.28); box-shadow: none; }
.sheet-stage.light .dots button[aria-current="true"]::after { background: #034092; }
.gal-arrow {
  position: absolute; z-index: 2; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.9); color: var(--ink); display: none; place-items: center; opacity: 0; transition: opacity 0.25s;
}
.gal-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gal-prev { left: 84px; } .gal-next { right: 14px; }
@media (hover: hover) and (pointer: fine) {
  .gal-arrow { display: grid; }
  .sheet-stage:hover .gal-arrow { opacity: 1; }
  .gal-arrow:focus-visible { opacity: 1; }
  .s-worn, .s-size, .s-cmp, .s-styled { cursor: ew-resize; }
}
.turn-hint { bottom: 42px; }
/* phone: the dots replace the thumbnails; the picture is tall enough to show the whole chain */
@media (max-width: 760px) {
  .views { display: none; }
  .sheet-in { grid-template-rows: auto minmax(0, 1fr); }
  .sheet-stage { min-height: 0; }
  .sheet-stage { height: calc(max(266px, 67vw) + 34px); }
  .sheet.tall .sheet-stage { height: min(52svh, calc(125vw + 34px)); }
  .sheet.tall.two-opts .sheet-stage { height: min(44svh, calc(125vw + 34px)); } /* whole photo + the choices still in view above the add button */
  .shown { left: 12px; right: auto; }
  .s-cmp { padding: 40px 10px 12px; }
}
@media (min-width: 761px) { .s-cmp { padding-left: 88px; padding-right: 20px; } } /* clear of the thumbnail column */
.sheet-stage[data-view="cmp"] .views em { display: none; }

/* Phone: chains read like the pendants (founder, 10 Nov 2026: "on the phone … I can't really see the detail for the chains").
   The tile zooms in on the bottom of the loop (pendant, centrepiece, front links); the stage clips the top of the chain. */
@media (max-width: 760px) {
  .col[data-col="chains"] .card-stage img { width: 100%; height: 100%; scale: 1.45; transform-origin: 50% 100%; }
}

/* Real three.js model (site/js/piece3d.js): the canvas sits over the layered-photo turn and replaces it once loaded */
.obj-3d { position: absolute; inset: -14%; width: 128%; height: 128%; touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity .45s ease; }
.obj-3d.grab { cursor: grabbing; }
.obj.is-3d .obj-3d { opacity: 1; }
.obj.is-3d .obj-turn { opacity: 0; transition: opacity .3s ease; }