/* box.css · section 05, your box. Owned with assets/js/box.js.
   Seen from above in golden-hour light from the upper left: every shadow falls down and right. */

@property --slot { syntax: "<length>"; inherits: true; initial-value: 100px; }
@property --rim { syntax: "<length>"; inherits: true; initial-value: 20px; }

.boxer { position: relative; padding-block: var(--section) calc(var(--section) * 0.85); }

/* ---------------------------------------------------------------- head */
.boxer__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: clamp(18px, 3vh, 30px);
  align-items: end;
}
.boxer__head .label { grid-column: 1 / -1; }
.boxer__head .h2 { grid-column: 1 / span 7; max-width: 11ch; }
.boxer__head .lede { grid-column: 9 / span 4; padding-bottom: 0.4em; }

.boxer__grid {
  margin-top: clamp(44px, 8vh, 96px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.boxer__scene {
  grid-column: 1 / span 7;
  position: sticky;
  top: clamp(84px, calc(50vh - 330px), 170px);
  z-index: 2;
}
.boxer__panel { grid-column: 9 / span 4; }

/* ---------------------------------------------------------------- the table */
.boxer__table {
  position: relative;
  aspect-ratio: 6 / 5;
  border-radius: var(--radius-stage);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  background:
    radial-gradient(75% 65% at 18% 14%, rgb(255 247 232 / 0.95) 0%, rgb(255 247 232 / 0) 62%),
    linear-gradient(158deg, #F3E2C7 0%, #EAD0AC 52%, #DDBE94 100%);
  box-shadow:
    inset 0 0 0 1px rgb(43 26 17 / 0.06),
    inset -90px -70px 150px -70px rgb(150 92 40 / 0.26),
    0 30px 60px -40px rgb(90 52 24 / 0.35);
}
/* The table's grain: fine and warm, like a plaster top in late sun */
.boxer__table::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.48 0 0 0 0 0.34 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* A palm frond's shadow, falling across the table and the box */
.boxer__frond {
  position: absolute;
  right: -9%;
  top: -12%;
  z-index: 6;
  width: 64%;
  height: auto;
  opacity: 0.13;
  filter: blur(5px);
  mix-blend-mode: multiply;
  pointer-events: none;
  transform-origin: 100% 0;
  will-change: transform;
  animation: frondSway 9s var(--ease-flow) infinite alternate;
  animation-play-state: paused;
}
.boxer.is-near .boxer__frond { animation-play-state: running; }
@keyframes frondSway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.4deg) translateY(4px); } }

.boxer__tag {
  position: absolute;
  left: clamp(16px, 2vw, 24px);
  top: clamp(14px, 1.8vw, 22px);
  z-index: 7;
  color: var(--ink-2);
  gap: 0;
  font-variant-numeric: tabular-nums;
}
.boxer__tag::before {
  content: "";
  width: 6px; height: 6px;
  margin-right: 0.7em;
  border-radius: 50%;
  background: var(--saffron);
}
.boxer__close {
  position: absolute;
  right: clamp(12px, 1.6vw, 20px);
  top: clamp(10px, 1.4vw, 16px);
  z-index: 7;
}
.boxer__sample {
  position: absolute;
  left: clamp(16px, 2vw, 24px);
  bottom: clamp(12px, 1.8vw, 20px);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
}
.boxer__sample[hidden] { display: none; }
.boxer__sample-btn {
  font-family: var(--f-ui); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.boxer__msg {
  margin-top: 14px;
  min-height: 1.6em;
  font-family: var(--f-display);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
  transition: color var(--t-snap) var(--ease-snap);
}
.boxer__msg.is-hint { font-style: italic; color: var(--ink-2); }

/* ---------------------------------------------------------------- the box */
.bx {
  --slot: 100px;
  --rim: 20px;
  --box: #EFE7DA;
  --box-tex: none;
  --tray: #F6F0E6;
  --tray-tex: none;
  --cup-a: #EADFCD;
  --cup-b: #F4ECE0;
  --cup-base: #EFE6D7;
  --divider: rgb(120 88 58 / 0.22);
  --divider-hi: rgb(255 255 255 / 0.65);
  --foil: linear-gradient(112deg, #9E7130 0%, #EFD28B 26%, #B5873A 46%, #F7E3AA 62%, #A6772E 82%, #E3C37A 100%);
  --ink-mark: #8A6A4A;
  --rb: #D9822B; --rb-hi: #F2B068; --rb-lo: #A85E17;
  position: relative;
  z-index: 1;
  width: calc(var(--slot) * 3 + var(--rim) * 2);
  height: calc(var(--slot) * 3 + var(--rim) * 2);
  border-radius: 5px;
  container-type: size;
  transition: width 800ms var(--ease-set), height 800ms var(--ease-set), --slot 800ms var(--ease-set), --rim 800ms var(--ease-set);
  box-shadow:
    0 1px 1px rgb(60 30 12 / 0.22),
    5px 8px 12px -4px rgb(80 44 18 / 0.3),
    34px 44px 60px -22px rgb(90 50 20 / 0.42);
}
.bx__base {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--box-tex), var(--box);
  background-size: auto;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 0.4), inset -1px -1px 0 rgb(0 0 0 / 0.1);
}
/* The tray: a card insert with raised dividers, sitting inside the walls */
.bx__tray {
  position: absolute;
  inset: var(--rim);
  z-index: 1;
  border-radius: 2px;
  background:
    linear-gradient(90deg, var(--divider-hi) 0 1px, var(--divider) 1px 2.5px, transparent 2.5px) calc(var(--slot) - 1px) 0 / var(--slot) 100% repeat-x,
    linear-gradient(180deg, var(--divider-hi) 0 1px, var(--divider) 1px 2.5px, transparent 2.5px) 0 calc(var(--slot) - 1px) / 100% var(--slot) repeat-y,
    var(--tray-tex),
    var(--tray);
  box-shadow:
    inset 4px 5px 9px rgb(50 25 10 / 0.26),
    inset 0 0 0 1px rgb(50 25 10 / 0.14),
    inset -1px -1px 0 rgb(255 255 255 / 0.3);
}

/* A place in the box: a pleated paper cup, and a piece in it */
.bx-slot {
  position: absolute;
  width: var(--slot);
  height: var(--slot);
  border-radius: 50%;
  transition: left 800ms var(--ease-set), top 800ms var(--ease-set);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bx-slot:focus-visible { outline: none; }
.bx-slot:focus-visible .bx-cup { box-shadow: 0 0 0 2px var(--saffron-ink); }
.bx-cup {
  position: absolute;
  inset: 8%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--cup-base) 0 56%, rgb(0 0 0 / 0.06) 58%, transparent 61%),
    repeating-conic-gradient(from 3deg, var(--cup-a) 0deg 5deg, var(--cup-b) 5deg 10deg);
  box-shadow: 1px 2px 3px rgb(60 30 10 / 0.18), inset 0 0 0 1px rgb(80 50 25 / 0.08);
  transition: box-shadow var(--t-snap) var(--ease-snap), transform var(--t-base) var(--ease-set);
}
/* Light from the upper left across each cup */
.bx-cup::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0) 45%, rgb(60 30 10 / 0.12) 100%);
}
.bx-slot:not(.is-filled):hover .bx-cup { box-shadow: 0 0 0 1.5px var(--saffron), 1px 2px 3px rgb(60 30 10 / 0.18); }
.bx-slot.is-target .bx-cup { box-shadow: 0 0 0 2px var(--saffron); transform: scale(1.05); }
.bx-pc__shadow, .bx-pc__img, .bx-pc__stamp { position: absolute; max-width: none; pointer-events: none; user-select: none; }
.bx-pc__shadow {
  z-index: 1;
  width: 200%; height: 200%;
  left: -50%; top: -50%;
  mix-blend-mode: multiply;
}
.bx-pc__img {
  z-index: 2;
  width: 130%; height: 130%;
  left: -15%; top: -15%;
  transition: transform var(--t-base) var(--ease-set);
}
.bx-slot.is-filled:hover .bx-pc__img { transform: translate(-1.5%, -2.5%) scale(1.03); }
.bx-slot.is-lifted .bx-pc__img, .bx-slot.is-lifted .bx-pc__stamp { opacity: 0.25; }
.bx-slot.is-lifted .bx-pc__shadow { opacity: 0; }
/* Your logo, printed in cocoa butter on each piece */
.bx-pc__stamp {
  z-index: 3;
  left: 50%; top: 50%;
  width: 38%; height: 38%;
  transform: translate(-50%, -50%);
  background: linear-gradient(130deg, #F6DE9E 0%, #C99A45 45%, #F1D28E 70%, #B9883A 100%);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  opacity: 0;
  transition: opacity 700ms var(--ease-flow);
}
.bx.is-stamped .bx-pc__stamp { opacity: 0.94; }
.bx-slot[data-p="2"] .bx-pc__stamp { width: 34%; height: 34%; }
.bx-slot[data-p="3"] .bx-pc__stamp { width: 30%; height: 30%; left: 48%; top: 48%; }

/* The lid */
.bx__lid {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: inherit;
  overflow: hidden;
  background: var(--box-tex), var(--box);
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 0.45), inset -1px -1px 0 rgb(0 0 0 / 0.12);
  opacity: 0;
  visibility: hidden;
}
.bx.is-closed .bx__lid { opacity: 1; visibility: visible; }
/* A blind-debossed frame line, just inside the edge */
.bx__lid::before {
  content: "";
  position: absolute;
  inset: max(8px, 3.4cqmin);
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgb(0 0 0 / 0.12), inset -1px -1px 0 rgb(255 255 255 / 0.4), 1px 1px 0 rgb(255 255 255 / 0.35), -1px -1px 0 rgb(0 0 0 / 0.08);
  pointer-events: none;
}
.bx__glint {
  position: absolute;
  inset: -10% auto -10% 0;
  width: 28%;
  background: linear-gradient(90deg, rgb(255 250 235 / 0) 0%, rgb(255 250 235 / 0.42) 50%, rgb(255 250 235 / 0) 100%);
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
}
.bx__label { display: none; }
.bx__mark {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.6cqmin;
  max-width: 58cqw;
  text-align: center;
  transform: translate(-6cqw, -4cqh);
}
.bx__ar, .bx__word, .bx__words, .bx__line {
  background: var(--foil);
  background-size: 220% 100%;
  background-position: 30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0.5px 0.7px 0 rgb(60 30 10 / 0.28)) drop-shadow(-0.4px -0.4px 0 rgb(255 255 255 / 0.35));
}
.bx__ar { font-family: var(--f-ar); font-size: 9cqmin; line-height: 1; }
.bx__word {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 350;
  font-size: 15cqmin;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: "WONK" 1;
  padding: 0 0.06em 0.06em;
}
.bx__line {
  margin-top: 1.4cqmin;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: max(6px, 2.3cqmin);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.bx__words {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(5cqmin, calc(150cqmin / var(--len, 8)), 13cqmin);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-variation-settings: "WONK" 1;
  text-wrap: balance;
  overflow-wrap: anywhere;
  padding: 0.05em 0.08em 0.1em;
}
.bx__words:lang(ar) { font-family: var(--f-ar); font-style: normal; font-weight: 700; }
.bx__logo {
  display: block;
  width: 44cqw;
  height: 38cqh;
  background: var(--foil);
  background-size: 220% 100%;
  background-position: 30% 0;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  filter: drop-shadow(0.5px 0.7px 0 rgb(60 30 10 / 0.3));
}

/* The ribbon: one band each way, crossing off centre, and a flat bow */
.bx__ribbon {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  --rw: max(9px, 6.2cqmin);
}
.bx.is-closed .bx__ribbon { opacity: 1; visibility: visible; }
.bx[data-ribbon="none"] .bx__ribbon { display: none; }
.bx__band {
  position: absolute;
  background: linear-gradient(90deg, var(--rb-lo) 0%, var(--rb) 16%, var(--rb-hi) 44%, var(--rb) 62%, var(--rb-lo) 100%);
  box-shadow: 1px 2px 3px rgb(60 30 10 / 0.25);
}
.bx__band--v { top: -1px; bottom: -1px; left: 78%; width: var(--rw); margin-left: calc(var(--rw) / -2); transform-origin: 50% 0; }
.bx__band--h {
  left: -1px; right: -1px; top: 72%; height: var(--rw); margin-top: calc(var(--rw) / -2); transform-origin: 0 50%;
  background: linear-gradient(180deg, var(--rb-lo) 0%, var(--rb) 16%, var(--rb-hi) 44%, var(--rb) 62%, var(--rb-lo) 100%);
}
.bx__bow {
  position: absolute;
  left: 78%;
  top: 72%;
  width: max(48px, 32cqmin);
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
  filter: drop-shadow(2px 3px 2.5px rgb(60 30 10 / 0.32));
}
.bx__bow-loop, .bx__bow-tail, .bx__bow-knot { fill: var(--rb); }
.bx__bow-tail { fill: var(--rb-lo); }
.bx__bow-knot { fill: var(--rb-hi); stroke: var(--rb-lo); stroke-width: 0.6; }
.bx__bow-sheen { fill: rgb(255 255 255 / 0.32); }
.bx__bow-loop { stroke: var(--rb-lo); stroke-width: 0.8; }

.bx[data-ribbon="ivory"] { --rb: #EFE4D2; --rb-hi: #FFFBF3; --rb-lo: #CDBDA4; }
.bx[data-ribbon="rose"] { --rb: #C98C8A; --rb-hi: #E8B5B0; --rb-lo: #9E6261; }

/* ---------------------------------------------------------------- finishes */
.bx[data-finish="linen"] {
  --box: #EEE5D7;
  --box-tex:
    repeating-linear-gradient(0deg, rgb(120 92 64 / 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(120 92 64 / 0.045) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, rgb(255 255 255 / 0.35) 0%, rgb(255 255 255 / 0) 50%, rgb(90 60 30 / 0.06) 100%);
}
.bx[data-finish="rose"] {
  --box: #E3BFAE;
  --box-tex:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgb(255 240 232 / 0.4) 0%, rgb(255 240 232 / 0) 50%, rgb(110 50 40 / 0.1) 100%);
  --tray: #F1DED3;
  --cup-a: #E5C6B8; --cup-b: #F0D9CD; --cup-base: #EACFC2;
  --foil: linear-gradient(112deg, #8E5236 0%, #E9B597 26%, #A9684A 46%, #F3CDB4 62%, #94553A 82%, #DDA585 100%);
}
.bx[data-finish="khoos"] {
  --box: #D6B888;
  --box-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cdefs%3E%3ClinearGradient id='h' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23E6CC9C'/%3E%3Cstop offset='.5' stop-color='%23D3B27D'/%3E%3Cstop offset='1' stop-color='%23B8955F'/%3E%3C/linearGradient%3E%3ClinearGradient id='v' x2='1'%3E%3Cstop offset='0' stop-color='%23E2C695'/%3E%3Cstop offset='.5' stop-color='%23CFAE78'/%3E%3Cstop offset='1' stop-color='%23B28F59'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Crect width='12' height='4' fill='url(%23h)'/%3E%3Crect y='4' width='12' height='4' fill='url(%23h)'/%3E%3Crect y='8' width='12' height='4' fill='url(%23h)'/%3E%3Crect x='12' y='12' width='12' height='4' fill='url(%23h)'/%3E%3Crect x='12' y='16' width='12' height='4' fill='url(%23h)'/%3E%3Crect x='12' y='20' width='12' height='4' fill='url(%23h)'/%3E%3Crect x='12' width='4' height='12' fill='url(%23v)'/%3E%3Crect x='16' width='4' height='12' fill='url(%23v)'/%3E%3Crect x='20' width='4' height='12' fill='url(%23v)'/%3E%3Crect y='12' width='4' height='12' fill='url(%23v)'/%3E%3Crect x='4' y='12' width='4' height='12' fill='url(%23v)'/%3E%3Crect x='8' y='12' width='4' height='12' fill='url(%23v)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, rgb(255 240 210 / 0.3) 0%, rgb(255 240 210 / 0) 50%, rgb(80 50 20 / 0.12) 100%);
  --tray: #EADBC0;
  --cup-a: #6B4630; --cup-b: #7E563D; --cup-base: #735039;
  --divider: rgb(110 76 40 / 0.28);
  --foil: linear-gradient(112deg, #6E3F14 0%, #B97A3A 30%, #7C4719 52%, #C48A4C 70%, #6A3B12 100%);
}
.bx[data-finish="khoos"] .bx__base, .bx[data-finish="khoos"] .bx__lid { background-size: 14px 14px, auto, auto; }
/* On woven palm, the mark sits on an ivory label */
.bx[data-finish="khoos"] .bx__label {
  display: block;
  position: absolute;
  left: calc(44% - 23cqw);
  top: 46%;
  width: 46cqw;
  height: 40cqh;
  transform: translateY(-50%);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgb(120 92 64 / 0.05) 0 1px, transparent 1px 3px),
    #F2EADC;
  box-shadow: 1px 2px 3px rgb(60 30 10 / 0.3), inset 0 0 0 1px rgb(120 92 64 / 0.12);
}
.bx[data-finish="khoos"] .bx__mark { max-width: 40cqw; }
.bx[data-finish="khoos"] .bx__logo { width: 36cqw; height: 30cqh; }
.bx[data-finish="khoos"] .bx__word { font-size: 12cqmin; }
.bx[data-finish="khoos"] .bx__words { font-size: clamp(4.4cqmin, calc(120cqmin / var(--len, 8)), 11cqmin); }
.bx[data-finish="lacquer"] {
  --box: #3B2117;
  --box-tex:
    radial-gradient(120% 90% at 18% 10%, rgb(255 225 190 / 0.16) 0%, rgb(255 225 190 / 0) 45%),
    linear-gradient(135deg, rgb(255 230 200 / 0.06) 0%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.25) 100%);
  --tray: #C9A35E;
  --tray-tex: linear-gradient(135deg, rgb(255 240 200 / 0.4) 0%, rgb(255 240 200 / 0) 40%, rgb(255 240 200 / 0.18) 62%, rgb(90 60 20 / 0.25) 100%);
  --cup-a: #2B170F; --cup-b: #3A2116; --cup-base: #321C12;
  --divider: rgb(80 50 15 / 0.35);
  --divider-hi: rgb(255 240 200 / 0.55);
}

/* ---------------------------------------------------------------- the panel */
.boxer__step { padding: clamp(18px, 2.8vh, 26px) 0; border-top: 1px solid var(--line-2); }
.boxer__step:first-child { border-top: 0; padding-top: 0; }
.boxer__legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1.6vw, 1.55rem);
  font-weight: 350;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.boxer__legend + * { clear: both; }
.boxer__no {
  min-width: 26px;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--saffron-ink);
}
.boxer__note { margin-top: 12px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); }
.boxer__note-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.boxer__help { margin: -4px 0 14px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.boxer__help-fine { display: none; }
.is-fine .boxer__help-fine { display: inline; }
.is-fine .boxer__help-touch { display: none; }

/* Sizes: four cards, each with its grid of places */
.boxer__sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.boxer__size { position: relative; }
.boxer__size input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.boxer__size-in {
  display: grid;
  justify-items: start;
  gap: 4px;
  height: 100%;
  padding: 14px 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  transition: background var(--t-snap) var(--ease-snap), color var(--t-snap) var(--ease-snap), border-color var(--t-snap) var(--ease-snap);
}
.boxer__size:hover .boxer__size-in { border-color: var(--ink); }
.boxer__size input:checked + .boxer__size-in { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.boxer__size input:focus-visible + .boxer__size-in { outline: 1.5px solid var(--saffron-ink); outline-offset: 3px; }
.boxer__size-grid { height: 30px; display: flex; align-items: center; }
.boxer__size-grid svg { fill: currentColor; opacity: 0.55; }
.boxer__size input:checked + .boxer__size-in .boxer__size-grid svg { fill: var(--saffron-hi); opacity: 1; }
.boxer__size-n { font-family: var(--f-display); font-size: 1.7rem; font-weight: 350; line-height: 1; letter-spacing: -0.02em; }
.boxer__size-name { font-size: 0.74rem; line-height: 1.3; color: inherit; opacity: 0.72; }

/* The pieces */
.boxer__palette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bx-pick {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  padding: 4px 2px 10px;
  border-radius: 18px;
  border: 1px solid transparent;
  touch-action: manipulation;
  transition: background var(--t-snap) var(--ease-snap), border-color var(--t-snap) var(--ease-snap);
}
.bx-pick:hover { background: rgb(255 250 242 / 0.6); border-color: var(--line); }
.bx-pick.is-active { border-color: var(--line-2); }
.bx-pick__img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}
/* Before the piece is drawn, a quiet disc in its shell colour */
.bx-pick__img::before {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: var(--shell);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--shell) 70%, #fff) 0%, var(--shell) 55%);
  opacity: 0.5;
  transition: opacity var(--t-base) var(--ease-flow);
}
.bx-pick.is-ready .bx-pick__img::before { opacity: 0; }
.bx-pick__img img {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 600ms var(--ease-flow), transform var(--t-base) var(--ease-set);
  filter: drop-shadow(2px 3px 3px rgb(60 30 10 / 0.25));
}
.bx-pick.is-ready .bx-pick__img img { opacity: 1; }
.bx-pick:hover .bx-pick__img img { transform: translate(-2%, -4%) scale(1.06); }
.bx-pick:active .bx-pick__img img { transform: scale(0.96); }
.bx-pick__name { font-family: var(--f-display); font-size: 0.98rem; line-height: 1.1; color: var(--ink); }
.bx-pick__n {
  position: absolute;
  right: 6px; top: 6px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  transform: scale(0);
  transition: transform var(--t-base) var(--ease-set);
}
.bx-pick.has-some .bx-pick__n { transform: none; }
.boxer__tools { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 10px; }

/* Swatches in the finish and ribbon choices */
.swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(43 26 17 / 0.18);
}
.swatch--linen { background: repeating-linear-gradient(90deg, rgb(120 92 64 / 0.12) 0 1px, transparent 1px 3px), #EEE5D7; }
.swatch--rose { background: #E3BFAE; }
.swatch--khoos { background: repeating-linear-gradient(45deg, #E2C695 0 3px, #B8955F 3px 5px); }
.swatch--lacquer { background: radial-gradient(circle at 35% 30%, #6A4232, #2F1A11); }
.swatch--rb { background: var(--rb); }
.swatch--rb { background: linear-gradient(90deg, color-mix(in srgb, var(--rb) 75%, #000) 0, var(--rb) 30%, color-mix(in srgb, var(--rb) 60%, #fff) 50%, var(--rb) 70%, color-mix(in srgb, var(--rb) 75%, #000) 100%); }
.seg input:checked + span .swatch { box-shadow: 0 0 0 1.5px rgb(246 239 228 / 0.6); }

.boxer__check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
}
.boxer__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.boxer__check-box {
  position: relative;
  width: 40px; height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgb(255 251 245 / 0.6);
  transition: background var(--t-snap) var(--ease-snap), border-color var(--t-snap) var(--ease-snap);
}
.boxer__check-box::after {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform var(--t-base) var(--ease-set), background var(--t-snap) var(--ease-snap);
}
.boxer__check input:checked + .boxer__check-box { background: var(--ink); border-color: var(--ink); }
.boxer__check input:checked + .boxer__check-box::after { transform: translateX(16px); background: var(--saffron); }
.boxer__check input:focus-visible + .boxer__check-box { outline: 1.5px solid var(--saffron-ink); outline-offset: 3px; }

.boxer__end { padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid var(--line-2); }
.boxer__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-bottom: 22px;
  font-family: var(--f-display);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink);
}
.boxer__summary span:not(:last-child)::after { content: "·"; margin: 0 0.55em; color: var(--saffron-ink); }
.boxer__sum-k { font-style: italic; }

/* While a piece is carried */
.bx-ghost {
  position: fixed;
  z-index: 250;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(10px 16px 10px rgb(60 30 10 / 0.3));
  transition: opacity var(--t-snap) var(--ease-snap);
}
.bx-ghost img { width: 100%; height: 100%; }
.bx-ghost.is-out { opacity: 0.45; }
.is-dragging-piece, .is-dragging-piece * { cursor: grabbing !important; }
.is-dragging-piece .cursor { opacity: 0 !important; }
.bx-flyer {
  position: fixed;
  z-index: 250;
  pointer-events: none;
  filter: drop-shadow(8px 12px 8px rgb(60 30 10 / 0.28));
}

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 1180px) {
  .boxer__scene { grid-column: 1 / span 7; }
  .boxer__panel { grid-column: 8 / span 5; }
}
@media (max-width: 900px) {
  .boxer__head .h2, .boxer__head .lede { grid-column: 1 / -1; }
  .boxer__grid { grid-template-columns: minmax(0, 1fr); }
  .boxer__scene, .boxer__panel { grid-column: 1 / -1; }
  /* The box stays in view while you fill it */
  .boxer__scene {
    top: 0;
    margin-inline: calc(-1 * var(--gutter));
    padding: 10px var(--gutter) 0;
    background: var(--ground);
    box-shadow: 0 14px 18px -12px rgb(60 30 10 / 0.12);
    transition: top var(--t-base) var(--ease-flow);
  }
  /* When the nav slides back in, the pinned box moves down to make room */
  body:has(.nav:not(.is-hidden)) .boxer__scene { top: var(--nav-h, 72px); }
  .boxer__table { aspect-ratio: 6 / 5; border-radius: 22px; }
  .boxer__msg { margin-top: 8px; padding-bottom: 8px; font-size: 0.94rem; line-height: 1.35; min-height: 2.7em; }
  .boxer__panel { margin-top: 28px; }
}
@media (max-width: 560px) {
  .boxer__table { aspect-ratio: 6 / 5; }
  .boxer__sizes { gap: 6px; }
  .boxer__size-in { padding: 12px 8px 10px; border-radius: 16px; }
  .boxer__size-name { font-size: 0.66rem; }
  .boxer__palette { gap: 4px; }
  .bx-pick__name { font-size: 0.82rem; }
  .bx-pick__n { right: 2px; top: 2px; }
  .boxer__close { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .boxer__frond { animation: none; }
}
.reduced .boxer__frond { animation: none; }