/* bespoke.css · section 04, the bespoke studio. Golden hour: warm, low light from the left.
   Tokens come from style.css. The tablet itself is drawn by assets/js/tablet.js. */

.bespoke { position: relative; padding-top: var(--section); }

.bespoke__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.bespoke__copy { grid-column: 1 / span 5; padding-right: clamp(0px, 2vw, 32px); }
.bespoke__copy .h2 { margin-top: clamp(20px, 3.2vh, 34px); max-width: 10ch; }
.bespoke__copy .lede { margin-top: clamp(22px, 3.6vh, 40px); }
.bespoke__studio {
  grid-column: 6 / span 7;
  min-width: 0;
  position: sticky;
  top: clamp(84px, calc(50vh - 300px), 180px);
}

/* The stage: a sand-coloured table top in late light. One soft key from the upper left,
   the far corner falling into warm shade. No glass, no glow. */
.bespoke__frame {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-stage);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(118deg, rgb(255 250 241 / 0.75) 0%, rgb(255 250 241 / 0) 46%),
    linear-gradient(180deg, #F7ECDC 0%, #F0DEC3 58%, #E6CDA8 100%);
  box-shadow:
    inset 0 0 0 1px rgb(43 26 17 / 0.06),
    inset -60px -50px 120px -60px rgb(150 92 40 / 0.22),
    0 30px 60px -40px rgb(90 52 24 / 0.35);
}
/* Late sun through a lattice: a soft, blurred shadow falling across the table, kept clear of
   the centre where the tablet sits. Static. */
.bespoke__frame::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath fill='none' stroke='%232B1A11' stroke-width='6' d='M36 4l9.4 9.4h13.2v13.2L68 36l-9.4 9.4v13.2H45.4L36 68l-9.4-9.4H13.4V45.4L4 36l9.4-9.4V13.4h13.2z'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  transform: rotate(-24deg) skewX(-18deg) translate(-6%, -4%);
  filter: blur(4.5px);
  -webkit-mask-image: radial-gradient(70% 60% at 14% 18%, #000 0%, transparent 70%);
  mask-image: radial-gradient(70% 60% at 14% 18%, #000 0%, transparent 70%);
}
.bespoke__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}
.bespoke__tag {
  position: absolute;
  left: clamp(16px, 2vw, 24px);
  top: clamp(14px, 1.8vw, 22px);
  z-index: 2;
  color: var(--ink-2);
  gap: 0.7em;
}
.bespoke__tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--saffron);
}

/* A file dragged over the tablet */
.bespoke__dropzone {
  position: absolute;
  inset: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: calc(var(--radius-stage) - 10px);
  border: 1.5px dashed var(--saffron-ink);
  background: rgb(246 239 228 / 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-snap) var(--ease-snap);
}
.bespoke__dropzone span {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-variation-settings: "WONK" 1;
  color: var(--ink);
}
.bespoke__frame.is-dragging .bespoke__dropzone { opacity: 1; }

.bespoke__caption {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.bespoke__caption-k {
  margin-right: 0.7em;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--saffron-ink);
}
.bespoke__caption-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Fallback tablet, shown only if WebGL is unavailable */
.bespoke__fallback {
  --bar: #2C160C; --bar-hi: #4A2717; --bar-lo: #1E0E07; --letter: #22100A;
  position: absolute;
  left: 50%; top: 52%;
  width: 64%;
  aspect-ratio: 3.2 / 1.9;
  transform: translate(-50%, -50%) perspective(900px) rotateX(38deg) rotateZ(-4deg);
  border-radius: 12px;
  display: none;
  place-items: center;
  background:
    linear-gradient(160deg, rgb(255 220 180 / 0.14) 0%, rgb(255 220 180 / 0) 38%),
    linear-gradient(160deg, var(--bar-hi) 0%, var(--bar) 55%, var(--bar-lo) 100%);
  box-shadow: 0 34px 40px -22px rgb(42 21 11 / 0.55), inset 0 1px 0 rgb(255 225 190 / 0.18);
}
.bespoke__fallback[data-choc="milk"] { --bar: #5E3219; --bar-hi: #7A4526; --bar-lo: #44230F; --letter: #3E1E0C; }
.bespoke__fallback[data-choc="white"] { --bar: #E6D3B1; --bar-hi: #F4E7CE; --bar-lo: #CDB48C; --letter: #B89B6E; }
.bespoke__fallback::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgb(255 214 170 / 0.12), inset 0 1px 0 3px rgb(0 0 0 / 0.25);
}
.bespoke__fallback span {
  grid-area: 1 / 1;
  max-width: 80%;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 4.4vw, 3.4rem);
  line-height: 1;
  color: var(--letter);
  text-align: center;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgb(255 205 160 / 0.22), 0 -1px 0 rgb(0 0 0 / 0.55);
}
.bespoke__fallback i {
  grid-area: 1 / 1;
  display: none;
  width: 56%;
  max-height: 46%;
  background: var(--letter);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgb(255 205 160 / 0.25));
}
.bespoke__fallback[data-finish="gilded"] span,
.bespoke__fallback[data-finish="gilded"] i { color: #D7A84C; background-color: #D7A84C; }
.bespoke__fallback.is-logo span { display: none; }
.bespoke__fallback.is-logo i { display: block; }
.bespoke__fallback span:lang(ar), .bespoke__fallback span[dir="rtl"] { font-family: var(--f-ar); font-style: normal; font-weight: 700; }
.bespoke__frame.is-fallback .bespoke__canvas { visibility: hidden; }
.bespoke__frame.is-fallback .bespoke__fallback { display: grid; }

/* ---------------------------------------------------------------- the panel */
.bespoke__panel { margin-top: clamp(34px, 5.6vh, 56px); }

/* Words or logo: two tabs, one ink pill that slides between them */
.studio-tabs {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: rgb(255 250 242 / 0.55);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.studio-tabs__tab {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
  transition: color var(--t-base) var(--ease-set);
}
.studio-tabs__tab:hover { color: var(--ink); }
.studio-tabs__tab.is-active { color: var(--ivory); }
.studio-tabs__tab:focus-visible { outline-offset: 2px; border-radius: 999px; }
.studio-tabs__pill {
  position: absolute;
  z-index: 0;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--ink);
  transition: transform var(--t-base) var(--ease-set);
}
.studio-tabs[data-mode="logo"] .studio-tabs__pill { transform: translateX(100%); }

.bespoke__pane { margin-top: 20px; }
.bespoke__pane[hidden] { display: none; }

/* The words: one pill field, unmistakably a place to type */
.bespoke__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 0 22px 0 20px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgb(255 251 245 / 0.72);
  transition: border-color var(--t-snap) var(--ease-snap), background var(--t-snap) var(--ease-snap), box-shadow var(--t-base) var(--ease-set);
  cursor: text;
}
.bespoke__field:hover { border-color: var(--ink-3); }
.bespoke__field:focus-within {
  border-color: var(--ink);
  background: #FFFCF7;
  box-shadow: 0 18px 36px -24px rgb(90 52 24 / 0.45);
}
.bespoke__pen { flex: none; fill: none; stroke: var(--saffron-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bespoke__field input {
  flex: 1;
  width: 0;
  min-width: 0;
  padding: 10px 0;
  background: transparent;
  border: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(1.3rem, 1.75vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  caret-color: var(--saffron);
}
.bespoke__field input::placeholder { color: var(--ink-3); opacity: 0.8; }
.bespoke__field input:dir(rtl) { font-family: var(--f-ar); font-style: normal; font-weight: 400; }
.bespoke__field input:focus, .bespoke__field input:focus-visible { outline: none; }
.bespoke__count {
  flex: none;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.bespoke__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* The logo: a drop area that reads as one */
.bespoke__drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: clamp(22px, 3.4vh, 30px) 20px;
  border-radius: 22px;
  border: 1.5px dashed var(--line-2);
  background: rgb(255 251 245 / 0.5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-snap) var(--ease-snap), background var(--t-snap) var(--ease-snap);
}
.bespoke__drop:hover, .bespoke__drop.is-dragging { border-color: var(--saffron-ink); background: rgb(255 246 232 / 0.85); }
.bespoke__drop:focus-within { outline: 1.5px solid var(--saffron-ink); outline-offset: 3px; }
.bespoke__drop-icon {
  margin-bottom: 6px;
  fill: none; stroke: var(--saffron-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-base) var(--ease-set);
}
.bespoke__drop:hover .bespoke__drop-icon, .bespoke__drop.is-dragging .bespoke__drop-icon { transform: translateY(-3px); }
.bespoke__drop-title {
  font-family: var(--f-display);
  font-size: 1.32rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bespoke__drop-sub { font-size: 0.86rem; color: var(--ink-2); }
.bespoke__logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
}
.bespoke__logo-status { flex: 1 1 200px; font-size: 0.84rem; line-height: 1.45; color: var(--ink-2); }

/* Chocolate and finish: two rows, read like a spec */
.bespoke__opts {
  display: grid;
  gap: 12px;
  margin-top: clamp(26px, 4vh, 36px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--line);
}
.bespoke__opt { display: flex; align-items: center; gap: 12px; }
.bespoke__opt legend { float: left; flex: none; width: 112px; padding: 0; }
.bespoke__opt legend + .seg { flex: 1; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-family: var(--f-ui);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  transition: background var(--t-snap) var(--ease-snap), color var(--t-snap) var(--ease-snap), border-color var(--t-snap) var(--ease-snap);
}
.seg label:hover span { border-color: var(--ink); }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.seg input:focus-visible + span { outline: 1.5px solid var(--saffron-ink); outline-offset: 3px; }
.seg__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(43 26 17 / 0.18);
}
.seg input:checked + span .seg__dot { box-shadow: 0 0 0 1.5px rgb(246 239 228 / 0.55); }

/* A narrower column: each choice gets its own full row under its name */
@media (max-width: 1180px) and (min-width: 901px) {
  .bespoke__opts { gap: 16px; }
  .bespoke__opt { display: block; }
  .bespoke__opt legend { float: none; width: auto; margin-bottom: 10px; }
}

@media (max-width: 900px) {
  .bespoke__grid { grid-template-columns: minmax(0, 1fr); }
  /* Phones: the tablet comes before the controls, so you see what you type */
  .bespoke__copy { display: contents; }
  .bespoke__copy > * { grid-column: 1 / -1; }
  .bespoke__copy .label { order: 0; }
  .bespoke__copy .h2 { order: 1; }
  .bespoke__copy .lede { order: 2; }
  .bespoke__studio { order: 3; grid-column: 1 / -1; position: relative; top: auto; margin-top: clamp(32px, 5vh, 48px); }
  .bespoke__panel { order: 4; margin-top: 26px; }
}
@media (max-width: 560px) {
  .bespoke__frame { aspect-ratio: 4 / 3.1; border-radius: 22px; }
  .bespoke__chips .chip { min-height: 44px; }
  .studio-tabs { display: grid; }
  .bespoke__field { min-height: 60px; padding: 0 18px 0 16px; }
  .bespoke__opts { gap: 18px; }
  .bespoke__opt { display: block; }
  .bespoke__opt legend { float: none; width: auto; margin-bottom: 10px; }
  .seg span { min-height: 44px; }
}