/* Theme case studies: the industry interaction "In the hand" (signature type "turned"). Markup: src/_includes/e2/theme/sig-turned.njk; behaviour:
   e2-theme-turned.js. Nothing here is brand-specific: the wrapper's inline style carries the theme (--th-from / --th-to / --th-ink / --th-accent from stage,
   --th-f-head / ui / prod from tokens.fonts, --tn-r from tokens.button.radius).
   The look: a watchmaker's bench under one lamp. The stage is near-black; the watch and the loupe's photograph sit in the lamp's pool; the register is a sheet of
   ivory stationery laid on the bench. Hairlines, square controls, the heading face for the sentences, tabular figures for every number. The navy fill of the
   ONE button is used by nothing else; everything that can be pressed is an outline, and the pressed one is outlined in gold (on the bench) or ink (on the sheet).
   Every control is at least 44 x 44px. Without the script the section shows the finished default (rose gold on slate, front, the first reference). */

.th-turnedwrap {
  --tn-out: cubic-bezier(.2, .8, .2, 1);
  --tn-bench: #0a0907; --tn-bench2: #14110d;
  --tn-gold: #c9a863; --tn-goldd: #8a6a33;
  --tn-ivory: #F4F0E8; --tn-paper: #FBFAF7; --tn-hair: #E4DFD5;
  --tn-mut: #b3ab9d;                      /* warm grey, lifted until it reads on the bench (7:1) */
  --tn-line: rgba(244, 240, 232, .16); --tn-line2: rgba(244, 240, 232, .34);
  --tn-sheet-mut: #5d584f;                /* on the ivory sheet (6:1) */
  display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px);
}
.th-turnedwrap .th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.th-turned :is(button, input) { font: inherit; color: inherit; }
.th-turned__stage :focus-visible { outline: 2px solid var(--tn-gold); outline-offset: 3px; }
.th-turned__step--reg :focus-visible, .th-turned__foot :focus-visible { outline-color: var(--th-ink); }

/* ---------- the stage ---------- */
.th-turned__stage {
  position: relative; isolation: clip; border-radius: 28px; padding: clamp(18px, 3.4vw, 48px); color: var(--tn-ivory);
  background: radial-gradient(70% 55% at 22% 0%, #1d1710, var(--tn-bench) 68%), var(--tn-bench);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 99, .22);
  font-family: var(--th-f-ui); font-size: 15px; line-height: 1.4;
}
.th-turned__lampglow { position: absolute; z-index: -1; left: 6%; top: -30%; width: 60%; height: 90%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 205, 140, .14), transparent); }
.th-turned__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 28px clamp(24px, 2.6vw, 40px); align-items: start; }
.th-turned__col3 { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; min-width: 0; }
.th-turned__promisebox { grid-column: 1 / span 2; grid-row: 2; align-self: end; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--tn-line2); }
.th-turned__step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.th-turned__h {
  display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--tn-gold);
  font: 400 clamp(24px, 2.1vw, 30px)/1.1 var(--th-f-head); letter-spacing: -.005em; color: var(--tn-ivory);
}
.th-turned__n {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; box-shadow: inset 0 0 0 1px currentColor; color: var(--tn-gold);
  font: 500 12px/1 var(--th-f-ui); font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* ---------- 1 Turn it: the turntable ---------- */
.th-turned__pad {
  --deg: 0;
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #cfc4b3; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(201, 168, 99, .5), 0 40px 70px -30px rgba(0, 0, 0, .9), 0 0 90px -20px rgba(255, 196, 120, .28);
}
.th-turned__pad.is-drag { cursor: grabbing; }
.th-turned__pad:focus-visible { outline: 2px solid var(--tn-gold); outline-offset: 5px; }
.th-turned__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; pointer-events: none; }
.th-turned__frame:first-child { opacity: 1; }
.th-turned__rim { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px 6px rgba(10, 9, 7, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); z-index: 5; }
.th-turned__ruler { position: relative; height: 34px; margin: 2px 6px 0; border-top: 1px solid var(--tn-line2);
  background: repeating-linear-gradient(90deg, var(--tn-line2) 0 1px, transparent 1px calc(100% / 12)); background-size: 100% 7px; background-repeat: no-repeat; }
.th-turned__ruler::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 7px; background: var(--tn-line2); }
.th-turned__mark { position: absolute; top: -5px; left: calc(var(--deg, 0) / 360 * 100%); width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-top: 10px solid var(--tn-gold); border-bottom: 0; }
.th-turned__rl { position: absolute; top: 11px; font: 500 11px/1 var(--th-f-ui); letter-spacing: .06em; color: var(--tn-mut); font-variant-numeric: tabular-nums; translate: -50% 0; }
.th-turned__rl--0 { left: 0; translate: 0 0; } .th-turned__rl--90 { left: 25%; } .th-turned__rl--180 { left: 50%; } .th-turned__rl--270 { left: 75%; }
.th-turned__angle { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0; }
.th-turned__deg { font: 400 22px/1.1 var(--th-f-head); font-variant-numeric: lining-nums tabular-nums; color: var(--tn-ivory); }
.th-turned__hint { font-size: 13px; color: var(--tn-mut); }
.th-turned__note { margin: 0; min-height: 0; font-size: 13px; line-height: 1.45; color: var(--tn-mut); text-wrap: pretty; }
.th-turned__note[hidden] { display: none; }
.th-turned__row { display: grid; gap: 10px; }
.th-turned__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.th-turned__chip {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 14px; border: 0; border-radius: var(--tn-r); cursor: pointer; text-align: center;
  background: transparent; color: var(--tn-ivory); box-shadow: inset 0 0 0 1px var(--tn-line2); font: 500 14px/1.2 var(--th-f-ui); letter-spacing: .04em;
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-turned__chip:hover { box-shadow: inset 0 0 0 1px var(--tn-gold); } }
.th-turned__chip:active { transform: scale(.98); transition-duration: .08s; }
.th-turned__chip[aria-pressed="true"], .th-turned__chip[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1.5px var(--tn-gold); background: rgba(201, 168, 99, .12); }
.th-turned__disc { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(0, 0, 0, .4); }
.th-turned__disc--slate { background: radial-gradient(circle at 35% 30%, #6c7580, #3a424c 60%, #232830); }
.th-turned__disc--ivory { background: radial-gradient(circle at 35% 30%, #fffdf6, #efe7d3 65%, #d8cdb2); }

/* ---------- 2 Under the loupe ---------- */
.th-turned__loupe {
  --lx: .5; --ly: .4;
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #111; cursor: none; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(201, 168, 99, .5), 0 40px 70px -30px rgba(0, 0, 0, .9);
}
.th-turned__loupe:focus-visible { outline: 2px solid var(--tn-gold); outline-offset: 5px; }
.th-turned__lbase { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: brightness(.62) saturate(.9); }
.th-turned__lbase[hidden] { display: none; }
/* the points a read is attached to: a small ring, so the shopper knows there is something to find */
.th-turned__pt { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 1px solid rgba(244, 240, 232, .8); pointer-events: none; opacity: .75; }
.th-turned__pt[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .th-turned__pt { animation: th-tn-ping 3.2s ease-out infinite; } .th-turned__pt:nth-of-type(2) { animation-delay: -1s; } .th-turned__pt:nth-of-type(3) { animation-delay: -2s; } }
@keyframes th-tn-ping { 0% { box-shadow: 0 0 0 0 rgba(244, 240, 232, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(244, 240, 232, 0); } }
.th-turned__lens {
  --d: clamp(110px, 44cqw, 190px); --z: 2.4;
  position: absolute; z-index: 3; left: calc(var(--lx) * 100%); top: calc(var(--ly) * 100%); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; pointer-events: none;
  background-repeat: no-repeat; background-size: calc(100cqw * var(--z)) calc(100cqw * var(--z));
  background-position: calc(var(--d) / 2 - var(--lx) * 100cqw * var(--z)) calc(var(--d) / 2 - var(--ly) * 100cqw * var(--z));
  box-shadow: 0 0 0 3px #1b150e, 0 0 0 5px var(--tn-gold), 0 22px 30px -6px rgba(0, 0, 0, .75), inset 0 0 22px rgba(0, 0, 0, .45);
}
.th-turned__lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .26), transparent 38%); }
.th-turned__loupe:not(:hover):not(:focus-visible) .th-turned__lens { transition: left .25s var(--tn-out), top .25s var(--tn-out); }
.th-turned__read {
  margin: 0; min-height: 3.1em; padding: 12px 0 0; border-top: 1px solid var(--tn-line2); font: 400 clamp(19px, 1.7vw, 23px)/1.25 var(--th-f-head); letter-spacing: -.005em; color: var(--tn-ivory); text-wrap: balance;
}
.th-turned__read[data-state="hint"] { color: var(--tn-mut); font-style: italic; }

/* ---------- 3 The register: a sheet of ivory stationery ---------- */
.th-turned__step--reg {
  gap: 16px; padding: clamp(18px, 2vw, 26px); background: var(--tn-ivory); color: var(--th-ink); border-radius: 3px 3px 0 0;
  box-shadow: 1px 0 0 rgba(201, 168, 99, .5), -1px 0 0 rgba(201, 168, 99, .5), 0 -1px 0 rgba(201, 168, 99, .5), 0 40px 70px -34px rgba(0, 0, 0, .9);
  --tn-line: rgba(20, 27, 43, .16); --tn-line2: rgba(20, 27, 43, .34); --tn-mut: var(--tn-sheet-mut);
}
.th-turned__step--reg .th-turned__h { color: var(--th-ink); border-bottom-color: var(--th-ink); }
.th-turned__step--reg .th-turned__n { color: var(--th-ink); }
.th-turned__group { min-width: 0; }
.th-turned__refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.th-turned__ref, .th-turned__metal, .th-turned__strap {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 56px; margin: 0; padding: 8px 10px; border: 0; border-radius: var(--tn-r); cursor: pointer; text-align: left;
  background: var(--tn-paper); color: var(--th-ink); box-shadow: inset 0 0 0 1px var(--tn-line2); transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-width: 0;
}
.th-turned__ref[hidden], .th-turned__metal[hidden] { display: none; }
@media (hover: hover) { .th-turned__ref:hover, .th-turned__metal:hover, .th-turned__strap:hover { box-shadow: inset 0 0 0 1px var(--th-ink); } }
.th-turned__ref:active, .th-turned__metal:active, .th-turned__strap:active { transform: scale(.98); transition-duration: .08s; }
.th-turned__ref[aria-pressed="true"], .th-turned__metal[aria-pressed="true"], .th-turned__strap[aria-pressed="true"],
.th-turned__ref[aria-pressed="true"]:hover, .th-turned__metal[aria-pressed="true"]:hover, .th-turned__strap[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--th-ink); background: #fff; }
.th-turned__rn, .th-turned__mn, .th-turned__sn { font: 400 17px/1.1 var(--th-f-head); overflow-wrap: anywhere; }
.th-turned__rp, .th-turned__mp, .th-turned__sp { font: 500 12.5px/1.2 var(--th-f-prod); color: var(--tn-sheet-mut); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.th-turned__metals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.th-turned__metals:has(> :only-child:not([hidden])) { grid-template-columns: 1fr; }
.th-turned__straps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.th-turned__strap { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.th-turned__sw { grid-row: 1 / 3; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 0, 0, .25); }
.th-turned__sw--brown { background: #5a3a24; } .th-turned__sw--navy { background: #1f2a44; } .th-turned__sw--black { background: #14141a; } .th-turned__sw--bracelet { background: linear-gradient(135deg, #e3e7e9, #8d969b 50%, #c6cccf); }
.th-turned__sn, .th-turned__sp { grid-column: 2; }
.th-turned__field { display: flex; flex-direction: column; gap: 6px; }
.th-turned__flabel { font: 500 11px/1.4 var(--th-f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--tn-sheet-mut); }
.th-turned__inirow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.th-turned__input {
  display: block; width: 100%; min-width: 0; height: 56px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--tn-r); background: #fff; color: var(--th-ink);
  box-shadow: inset 0 0 0 1px var(--tn-line2); font: 400 22px/1 var(--th-f-head); font-variant-numeric: lining-nums; transition: box-shadow .15s ease;
}
.th-turned .th-turned__input { font-size: 16px; }   /* under 16px iOS Safari zooms the page when the field takes focus */
.th-turned__input::placeholder { color: #8a857b; opacity: 1; }
@media (hover: hover) { .th-turned__input:hover { box-shadow: inset 0 0 0 1px var(--th-ink); } }
.th-turned__input:focus-visible { outline: 2px solid var(--th-ink); outline-offset: 2px; }
/* the caseback plate: brushed rose gold, the initials cut into it */
.th-turned__plate {
  position: relative; display: grid; place-items: center; min-height: 56px; margin: 0; overflow: hidden; border-radius: 28px / 50%;
  background: linear-gradient(135deg, #e8c2a6, #c48f6c 45%, #e3b896 70%, #b97f5d); box-shadow: inset 0 0 0 1px rgba(80, 40, 20, .4), inset 0 2px 6px rgba(255, 255, 255, .45);
}
.th-turned__plate::before { content: ""; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 3px); }
.th-turned__engrave { position: relative; max-width: 100%; padding: 0 12px; font: italic 400 24px/1 var(--th-f-head); color: #7a4a30; text-shadow: 0 1px 0 rgba(255, 235, 215, .75), 0 -1px 0 rgba(70, 30, 10, .35); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.th-turned__plate[data-state="empty"]::after { content: ""; position: relative; width: 38%; height: 1px; background: rgba(90, 50, 30, .45); }
.th-turned__norm { min-height: 2.6em; font-size: 12.5px; line-height: 1.3; color: var(--tn-sheet-mut); overflow-wrap: anywhere; }
.th-turned__norm[data-state="ok"] { color: var(--th-ink); font-weight: 500; }
.th-turned__place { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--th-ink); font: italic 400 clamp(19px, 1.6vw, 22px)/1.25 var(--th-f-head); text-wrap: pretty; font-variant-numeric: lining-nums; }
.th-turned__sum { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--tn-sheet-mut); text-wrap: pretty; }
.th-turned__under { margin: 0; font: 500 14px/1.4 var(--th-f-prod); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.th-turned__missing { margin: 0; padding: 8px 12px; border-left: 3px solid #8a857b; background: rgba(20, 27, 43, .05); font: 500 14px/1.35 var(--th-f-ui); color: var(--tn-sheet-mut); }
.th-turned__missing[hidden] { display: none; }
.th-turned__missing.is-nudge { border-left-color: var(--th-ink); color: var(--th-ink); }   /* pressed too early: stronger, still not an error colour */
@media (prefers-reduced-motion: no-preference) { .th-turned__missing.is-nudge { animation: th-tn-nudge .5s var(--tn-out); } }
@keyframes th-tn-nudge { 0% { translate: 0 0; } 25% { translate: -5px 0; } 55% { translate: 4px 0; } 100% { translate: 0 0; } }

/* ---------- The foot: the one filled button, then the rules ---------- */
.th-turned__foot { position: relative; padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px); background: var(--tn-ivory); border-radius: 0 0 3px 3px; box-shadow: 1px 0 0 rgba(201, 168, 99, .5), -1px 0 0 rgba(201, 168, 99, .5), 0 1px 0 rgba(201, 168, 99, .5), 0 40px 60px -34px rgba(0, 0, 0, .9); }
.th-turned__cta {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-radius: var(--tn-r); cursor: pointer;
  background: var(--th-ink); color: var(--tn-ivory); font: 500 12.5px/1.25 var(--th-f-ui); letter-spacing: .05em; text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-turned__ctal { text-align: center; font-variant-numeric: tabular-nums; text-wrap: balance; }
@media (hover: hover) { .th-turned__cta:hover { background: #26304a; } }
.th-turned__cta:active { transform: scale(.985); transition-duration: .08s; }
.th-turned__check { display: none; margin-right: 10px; }
.th-turned__cta.is-done, .th-turned__cta.is-done:hover { background: #2c5a41; }
.th-turned__cta.is-done .th-turned__check { display: block; animation: th-tn-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes th-tn-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.th-turned__rules { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 14px; }
.th-turned__alt {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 0; padding: 0 22px; border: 0; border-radius: var(--tn-r); cursor: pointer;
  background: transparent; color: var(--tn-ivory); box-shadow: inset 0 0 0 1px var(--tn-gold); font: 500 13.5px/1.25 var(--th-f-ui); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-turned__alt:hover { background: rgba(201, 168, 99, .12); } }
.th-turned__alt.is-done { box-shadow: inset 0 0 0 1.5px var(--tn-gold); background: rgba(201, 168, 99, .12); }
.th-turned__promise { margin: 0; font: italic 400 clamp(22px, 2.2vw, 32px)/1.2 var(--th-f-head); color: var(--tn-ivory); text-wrap: balance; max-width: 30ch; }
.th-turned__service { margin: 0; font-size: 13.5px; color: var(--tn-mut); }

/* ---------- Narrower ---------- */
@media (max-width: 1099px) {
  .th-turned__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-turned__grid { grid-template-rows: none; }
  .th-turned__col3 { grid-column: 1 / -1; grid-row: auto; }
  .th-turned__promisebox { grid-column: 1 / -1; grid-row: auto; }
  .th-turned__step--reg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; align-items: start; }
  .th-turned__step--reg > .th-turned__h, .th-turned__step--reg > .th-turned__place, .th-turned__step--reg > .th-turned__sum, .th-turned__step--reg > .th-turned__under,
  .th-turned__step--reg > .th-turned__missing, .th-turned__step--reg > .th-turned__field { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .th-turned__stage { padding: 16px 14px 12px; border-radius: 24px; }
  .th-turned__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .th-turned__col3 { display: contents; }
  .th-turned__step--reg { display: flex; align-items: stretch; border-radius: 3px; }
  .th-turned__h { font-size: 24px; }
  .th-turned__refs { grid-template-columns: minmax(0, 1fr); }
  .th-turned__inirow { grid-template-columns: minmax(0, 1fr); }
  .th-turned__foot {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; padding: 8px; border-radius: var(--tn-r);
    background: var(--tn-ivory);   /* an opaque ivory backing: the navy button has an edge over the dark page */
    box-shadow: 0 0 0 1px rgba(201, 168, 99, .6), 0 18px 30px -18px rgba(0, 0, 0, .8);
    transition: opacity .2s ease, visibility 0s;
  }
  /* the bar appears when the register step comes into view (the script sets data-show); before that it keeps its place in the layout and shows nothing */
  .th-turned.is-gated .th-turned__foot:not([data-show="1"]) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s .2s; }
  body:has(.vsw) .th-turned__foot { bottom: 88px; }
  .th-turned__cta { min-height: 52px; padding: 6px 14px; font-size: 12.5px; line-height: 1.3; letter-spacing: .06em; }
  .th-turned__alt { min-width: 100%; }
  /* Focus Not Obscured (WCAG 2.4.11): whatever takes focus stops above the sticky row (its bottom offset + 68px + 16px) */
  .th-turned__stage { --tn-clear: calc(max(12px, env(safe-area-inset-bottom)) + 68px + 16px); }
  body:has(.vsw) .th-turned__stage { --tn-clear: calc(88px + 68px + 16px); }
  .th-turned__chip, .th-turned__ref, .th-turned__metal, .th-turned__strap, .th-turned__pad, .th-turned__loupe, .th-turned__alt { scroll-margin-bottom: var(--tn-clear); }
  .th-turned__input { scroll-margin-bottom: calc(var(--tn-clear) + 56px); }
}
@media (max-width: 359px) {
  .th-turned__stage { padding-inline: 10px; }
  .th-turned__straps { grid-template-columns: minmax(0, 1fr); }
  .th-turned__metals { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Reduced motion: nothing eases; every state shows at once ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-turned *, .th-turned *::before, .th-turned *::after { animation: none !important; transition: none !important; }
}