/* cais-a "The dial": the six sections of the Cais case, direction A. The page is a watch. A small dial, fixed in the corner, sweeps from 10:10 to 4:00 as you
   read; 01 is the specification (a tech sheet, three photographed wrists), 02 the depth gauge (0 to 200 m), 03 the exploded view (ten layers put together caseback
   first), 04 the lume (the buy box on a dark stage, six pins glowing), then the bezel insert (the tokens) and three weeks on the wrist (the tests).
   Scoped under .dir-cais-a, class prefix dca-. Markup: src/_includes/e2/theme/dir/cais-a/*.njk, behaviour: e2-dir-cais-a.js. Scroll-driven motion is
   transform / opacity / clip-path only, driven by custom properties (--p) the script writes; the before-states live under html.th-js (set by e2-theme.js unless
   reduced motion), and a calm block at the end (reduced motion, or a screen under 600px tall) shows every finished state, static. */

.dir-cais-a {
  --white: #F8F7F3; --cobalt: #1F3F8F; --grey: #8C8A84; --ink: #161718; --tilec: #DCE4EE; --brass: #B8935A; --brass-d: #8a6a33;
  --night: #0a101b; --navy: #0E1B3D; --lume: #C9E4A0; --steel: #AEB6BC;
  --f-disp: Spectral, 'Iowan Old Style', Georgia, serif; --f-ui: 'Public Sans', system-ui, -apple-system, sans-serif;
  --dca-pad: clamp(20px, 3.4vw, 48px); --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: var(--f-ui);
}
.dir-cais-a img { display: block; }
/* On the real /cais page the direction is two <div class="dir dir-cais-a"> wrappers (layouts/case-study-e2.njk) inside .e2-cs__body > .e2-wrap: they carry the tokens and fonts down but add no box. */
div.dir-cais-a { display: contents; }

/* ---------- the shared frame of a section ---------- */
.dir-cais-a .dca-sec { --fg: var(--ink); --mut: #484b50; --line: rgba(22, 23, 24, .16); position: relative; gap: 0; border-radius: 28px; overflow: clip; color: var(--fg); background: var(--white); font-family: var(--f-ui); padding: var(--dca-pad); }
.dir-cais-a .dca-tile { --mut: #3d4652; background: var(--tilec); }
.dir-cais-a .dca-dark { --fg: #F8F7F3; --mut: #b6bfcd; --line: rgba(248, 247, 243, .16); background: var(--night); }
.dir-cais-a .dca-sec :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.dir-cais-a .dca-dark :focus-visible { outline-color: var(--lume); }
.dir-cais-a .dca-sec .th-hd { gap: 18px 56px; }
.dir-cais-a .dca-sec .th-hd__eyebrow { color: var(--mut); font-size: 12px; letter-spacing: .1em; }
.dir-cais-a .dca-sec .th-hd__title { font-family: var(--f-disp); font-weight: 300; font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.025em; color: var(--fg); text-wrap: balance; }
.dir-cais-a .dca-sec .th-hd__aside { max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--mut); }
.dir-cais-a .dca-brief, .dir-cais-a .dca-define, .dir-cais-a .dca-design, .dir-cais-a .dca-opt, .dir-cais-a .dca-bezel, .dir-cais-a .dca-tests { gap: clamp(28px, 3.4vw, 48px); }
.dca-lab { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

/* =====================================================================================================================
   The dial: fixed in the bottom corner while 01 to 04 are on screen. The hands are SVG transforms the script writes (10:10 to 4:00).
   ===================================================================================================================== */
.dca-dial {
  position: fixed; z-index: 30; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 3vh, 28px); width: clamp(84px, 7.5vw, 116px); display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; user-select: none; opacity: 0; translate: 0 14px; transition: opacity .35s ease, translate .5s var(--ease, ease);
}
.dca-dial.is-on { opacity: 1; translate: 0 0; }
.dca-dial__svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(5, 12, 24, .45)); }
.dca-dial__t { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 0; padding: 3px 8px 4px; border-radius: 3px; background: rgba(10, 16, 27, .88); color: #F8F7F3; font: 500 11px/1.25 var(--mono, ui-monospace, monospace); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.dca-dial__t b { font-weight: 500; font-size: 13px; letter-spacing: .04em; }
.dca-dial__t span { color: #C9E4A0; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }

/* =====================================================================================================================
   01 Discover: the specification
   ===================================================================================================================== */
.dca-sheet { --p: 1; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 28px clamp(28px, 4.4vw, 72px); align-items: start; }
.th-js .dca-sheet { --p: 0; }
.dca-spec { margin: 0; display: flex; flex-direction: column; }
.dca-spec__row {
  --q: clamp(0, calc(var(--p) * 5 - var(--i) * .6), 1);
  position: relative; display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 6px 20px; padding: 16px 0 18px; opacity: calc(.18 + var(--q) * .82);
}
.dca-spec__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform: scaleX(var(--q)); transform-origin: 0 50%; }
.dca-spec__row:last-child { padding-bottom: 6px; }
.dca-spec dt { padding-top: .5em; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.dca-spec dd { margin: 0; font-family: var(--f-disp); font-weight: 300; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.26; letter-spacing: -.012em; text-wrap: pretty; }
.dca-spec__row--goal dd { font-size: clamp(25px, 2.4vw, 34px); line-height: 1.16; letter-spacing: -.02em; }
.dca-fig { --q: clamp(0, calc(var(--p) * 2.4), 1); position: relative; margin: 0; align-self: stretch; display: flex; flex-direction: column; }
.dca-fig__frame { position: relative; flex: 1 1 auto; min-height: 340px; background: var(--navy); clip-path: inset(0 calc((1 - var(--q)) * 100%) 0 0); }
.dca-fig__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.dca-fig__marks { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); color: rgba(248, 247, 243, .85); }
.dca-fig__ruler--x {
  display: block; height: 11px; margin-top: 8px; opacity: var(--q);
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 60px);
  background-size: 100% 6px, 100% 11px; background-repeat: no-repeat; background-position: 0 0, 0 0;
}
.dca-fig__ruler--y { display: none; }

.dca-wrists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(14px, 2vw, 28px); }
.dca-legend { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dca-legend i { flex: 0 0 72px; height: 2px; background: linear-gradient(90deg, var(--ink), var(--cobalt)); }
.dca-legend span:last-child { color: var(--cobalt); }
.dca-w { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dca-w__btn {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 11; margin: 0; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer; text-align: left; color: #fff; background: var(--navy);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dca-w__ph { position: absolute; inset: 0; }
.dca-w__ph img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
@media (hover: hover) { .dca-w__btn:hover .dca-w__ph img { scale: 1.03; } }
.dca-w__size { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: 2px; background: rgba(10, 16, 27, .78); color: #F8F7F3; font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dca-w__turn { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(10, 16, 27, .78); color: #F8F7F3; transition: rotate .4s var(--ease); }
.dca-w__btn[aria-pressed="true"] .dca-w__turn { rotate: 180deg; }
.dca-w__say { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 70px 18px 18px; transition: opacity .3s ease, translate .4s var(--ease), visibility 0s linear 0s; }
.dca-w__k { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dca-w__say--doubt { background: linear-gradient(0deg, rgba(8, 13, 22, .94) 18%, rgba(8, 13, 22, 0)); }
.dca-w__say--doubt .dca-w__k { color: var(--lume); }
.dca-w__q { font-family: var(--f-disp); font-style: italic; font-weight: 300; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2; text-wrap: balance; }
.dca-w__say--move { top: 22%; padding: 18px 18px 16px; justify-content: flex-end; background: #F8F7F3; color: var(--ink); }
.dca-w__say--move .dca-w__k { color: var(--cobalt); }
.dca-w__a { font-size: 15px; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.dca-w__btn[aria-pressed="false"] .dca-w__say--move { opacity: 0; translate: 0 16px; visibility: hidden; transition: opacity .25s ease, translate .3s var(--ease), visibility 0s linear .3s; }
.dca-w__btn[aria-pressed="true"] .dca-w__say--doubt { opacity: 0; translate: 0 -8px; visibility: hidden; transition: opacity .25s ease, translate .3s var(--ease), visibility 0s linear .3s; }
.dca-w__cap { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 6px 10px; align-items: baseline; font-size: 15px; line-height: 1.5; color: var(--mut); }
.dca-w__cap b { font-family: var(--f-disp); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--ink); }
.dca-w__cap > span:last-child { grid-column: 2; }
.dca-w__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(22, 23, 24, .35); }

/* =====================================================================================================================
   02 Define: the depth gauge. A dark tube runs down the middle; a lume marker descends it; five portholes (0 to 200 m) carry the stages.
   ===================================================================================================================== */
.dir-cais-a .dca-define { background: linear-gradient(180deg, #EEF2F7 0, #DCE4EE 20%, #93AACF 38%, #3B5EA6 56%, #17306e 74%, #0A1530 100%); --mut: #3a4350; }
.dca-key { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dir-cais-a .dca-define .th-hd__aside.dca-key { max-width: none; color: var(--ink); }
.dca-key i { flex: 0 0 72px; height: 2px; background: linear-gradient(90deg, var(--ink), var(--navy)); }

.dca-dive { --p: 1; position: relative; list-style: none; margin: 0; padding: 0 0 78px; display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); grid-auto-rows: minmax(136px, auto); }
.th-js .dca-dive { --p: 0; }
.dca-dive::before { content: ""; position: absolute; left: 50%; top: 22px; bottom: 56px; width: 46px; margin-left: -23px; border-radius: 23px; background: linear-gradient(90deg, #060d1c, #16284c 45%, #060d1c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 1px rgba(5, 10, 24, .5); }
.dca-dive::after {
  content: ""; position: absolute; left: 50%; top: 27px; bottom: 61px; width: 36px; margin-left: -18px; border-radius: 18px; transform-origin: 50% 0; transform: scaleY(var(--p));
  background: linear-gradient(180deg, #6da0ea, #3d6ccc 45%, #C9E4A0); opacity: .92;
}
.dca-dive__diver { position: absolute; z-index: 3; left: 50%; top: calc(36px + (100% - 114px) * var(--p)); width: 30px; height: 30px; margin: -15px 0 0 -15px; list-style: none; pointer-events: none; }
.dca-dive__diver i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fbffee, #C9E4A0 58%, #8fb86a); box-shadow: 0 0 0 4px rgba(10, 21, 48, .85), 0 0 22px 6px rgba(201, 228, 160, .55); }
.dca-dv { display: contents; }
.dca-dv__port {
  grid-column: 2; grid-row: calc(var(--i) + 1); justify-self: center; align-self: start; z-index: 2; margin-top: 4px; display: grid; place-content: center; justify-items: center; gap: 0; width: 70px; height: 70px; border-radius: 50%;
  color: #dfe7f3; background: radial-gradient(circle at 36% 30%, #1d3260, #07101f 70%);
  box-shadow: 0 0 0 3px #a9b1b6, 0 0 0 5px #3a4249, 0 12px 20px -8px rgba(0, 0, 0, .6); transition: color .3s ease, box-shadow .4s ease;
}
.dca-dv__port b { font: 500 20px/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dca-dv__port i { font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-top: 2px; }
.dca-dv__port.is-reached, .dca-dv.is-reached .dca-dv__port { color: var(--lume); box-shadow: 0 0 0 3px var(--lume), 0 0 0 5px #3a4249, 0 0 26px 3px rgba(201, 228, 160, .45); }
.dca-dv__card {
  position: relative; grid-row: calc(var(--i) + 1) / span 2; align-self: start; margin-top: 8px; width: 100%; max-width: 520px; padding: 22px 26px 24px; border-radius: 3px;
  background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--ln), 0 26px 40px -26px rgba(2, 8, 24, .7);
}
.dca-dv--l .dca-dv__card { grid-column: 1; justify-self: end; margin-right: 22px; }
.dca-dv--r .dca-dv__card { grid-column: 3; justify-self: start; margin-left: 22px; }
.dca-dv__card::after { content: ""; position: absolute; top: 31px; width: 26px; height: 6px; background: var(--bg); }
.dca-dv--l .dca-dv__card::after { left: 100%; }
.dca-dv--r .dca-dv__card::after { right: 100%; }
.dca-dv__who { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dca-dv__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.dca-dv__name { margin: 0 0 14px; font-family: var(--f-disp); font-weight: 300; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; letter-spacing: -.02em; }
.dca-dv__no { display: inline-block; margin-right: 12px; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--mut); vertical-align: .55em; }
.dca-dv__k { display: block; margin-bottom: 4px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dca-dv__doubt { margin: 0 0 14px; font-family: var(--f-disp); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.28; text-wrap: pretty; }
.dca-dv__move { margin: 0; padding-top: 12px; border-top: 1px solid var(--ln); font-size: 15px; line-height: 1.5; text-wrap: pretty; }

/* =====================================================================================================================
   03 Design: exploded. Base rules are the FINISHED, FLAT state (reduced motion, phone, short screen, no script): the ten layers in a grid, each with its
   number, part, name and note. Everything that moves sits in the live block, gated on html.th-js and the same three media conditions the script uses.
   ===================================================================================================================== */
.dca-x { --p: 1; --n: 10; }
.dca-x__stage { display: block; }
.dir-cais-a .dca-x__side, .dir-cais-a .dca-x__axis, .dir-cais-a .dca-x__caseback, .dir-cais-a .dca-x__note { display: none; }
.dca-x__view { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 18px; align-items: start; }
.dca-x__stack { display: contents; }
.dca-plate { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dca-plate__art { position: relative; border-radius: 3px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(22, 23, 24, .16), 0 16px 26px -18px rgba(14, 27, 61, .55); }
.dca-plate__vp { box-shadow: none; }
.dir-cais-a .dca-plate__wire, .dir-cais-a .dca-plate__edge { display: none; }
.dca-plate__cap { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.dca-plate__no { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.dca-plate__nm { font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1.15; letter-spacing: -.01em; }
.dca-plate__note { font-size: 13.5px; line-height: 1.45; color: var(--mut); text-wrap: pretty; }

@media (max-width: 1099px) { .dca-x__view { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .dca-x__view { grid-template-columns: minmax(0, 1fr); } }

/* ---- live: pinned, 3D, scroll-driven ---- */
@media (min-width: 900px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .th-js .dca-x { --p: 0; --sh: clamp(540px, calc(100vh - 190px), 740px); --pw: clamp(300px, 36vw, 540px); height: calc(var(--sh) + 105vh); }
  .th-js .dca-x__stage {
    position: sticky; top: calc(var(--header-h, 68px) + 14px); height: var(--sh); display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); overflow: clip; isolation: isolate; border-radius: 18px;
    color: #F8F7F3; background: radial-gradient(90% 80% at 70% 40%, #1a2c57, #0b1530 70%); box-shadow: 0 40px 70px -40px rgba(5, 12, 36, .9), 0 0 0 1px rgba(255, 255, 255, .08);
  }
  .th-js .dca-x__side { display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 22px 24px; border-right: 1px solid rgba(248, 247, 243, .12); }
  .th-js .dca-x__count { margin: 0 0 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lume); font-variant-numeric: tabular-nums; }
  .th-js .dca-x__list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 48px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .th-js .dca-xl { position: relative; min-width: 0; }
  .th-js .dca-xl__btn {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: center; width: 100%; height: 100%; min-height: 44px; margin: 0; padding: 0 6px; border: 0; border-top: 1px solid rgba(248, 247, 243, .1); border-radius: 0; background: transparent; color: #cfd8e6; text-align: left; cursor: pointer;
    font: inherit; transition: color .2s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .th-js .dca-xl:nth-child(5n + 1) .dca-xl__btn { border-top-color: transparent; }
  .th-js .dca-xl__no { font-size: 0; color: #8da0c4; }
  .th-js .dca-xl__no::before { content: attr(data-live); font: 500 12px/1 var(--mono); letter-spacing: .04em; }
  .th-js .dca-xl__nm { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
  .th-js .dca-xl__nm b { font: 500 13.5px/1.2 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .th-js .dca-xl__nm em { font: 500 10px/1.2 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #8da0c4; }
  @media (hover: hover) { .th-js .dca-xl__btn:hover { color: #fff; background: rgba(248, 247, 243, .06); } }
  .th-js .dca-xl.is-cur .dca-xl__btn { color: #fff; background: rgba(201, 228, 160, .1); box-shadow: inset 2px 0 0 var(--lume); }
  .th-js .dca-xl.is-cur .dca-xl__no, .th-js .dca-xl.is-cur .dca-xl__nm em { color: var(--lume); }
  .th-js .dca-xl.is-done .dca-xl__no { color: var(--lume); }
  .th-js .dca-xl__note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  .th-js .dca-x__note {
    display: block; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(248, 247, 243, .14); font-family: var(--f-disp); font-weight: 300; font-size: 22px; line-height: 1.28; letter-spacing: -.005em; color: #F8F7F3; text-wrap: pretty;
  }
  .th-js .dca-x__note small { display: block; margin-bottom: 8px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lume); }

  .th-js .dca-x__view { position: relative; display: block; perspective: 1900px; perspective-origin: 50% 30%; overflow: hidden; }
  .th-js .dca-x__axis { display: block; position: absolute; z-index: 0; left: 50%; top: 2%; bottom: 4%; width: 0; border-left: 1px dashed rgba(201, 228, 160, .45); }
  .th-js .dca-x__stack {
    position: absolute; display: block; left: 50%; top: 50%; width: var(--pw); height: calc(var(--pw) * .44); margin: calc(var(--pw) * -.19) 0 0 calc(var(--pw) * -.5);
    transform-style: preserve-3d; transform: rotateX(60deg) rotateZ(-34deg) translateZ(-190px);
  }
  .th-js .dca-x__caseback {
    --l: 1;   /* the caseback is already on the bench when the pin starts: the stage never opens on an empty panel */
    display: block; position: absolute; left: 50%; top: 50%; width: 76%; height: auto; margin: 0; translate: -50% -50%; opacity: var(--l);
    transform: translateZ(calc(-46px + (1 - var(--l) * var(--l) * (3 - 2 * var(--l))) * 460px)); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .5));
  }
  .th-js .dca-plate {
    /* --c is how many layers the story has reached (0 to 9.9): plate j (counted from the caseback) lands over c = j - .45 to j and inks over j - .385 to j + .385,
       so at progress 0 the first layer is on the bench and already inking, and the label reads Layer 1 of 10 */
    --c: calc(var(--pm, var(--p)) * 9.9);
    --l: clamp(0, calc((var(--c) - var(--j)) * 2.2 + 1), 1);
    --e: calc(var(--l) * var(--l) * (3 - 2 * var(--l)));
    --ik: clamp(0, calc((var(--c) - var(--j)) * 1.3 + .5), 1);
    position: absolute; left: 0; top: 0; width: 100%; display: block; transform-style: preserve-3d; opacity: clamp(0, calc(var(--l) * 6), 1);
    transform: translateZ(calc(var(--j) * 46px + (1 - var(--e)) * 520px));
  }
  .th-js .dca-plate__art { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(201, 228, 160, .38), 0 30px 36px -24px rgba(0, 0, 0, .8); transition: box-shadow .25s ease; }
  .th-js .dca-plate.is-cur .dca-plate__art { box-shadow: 0 0 0 2px var(--lume), 0 0 34px 2px rgba(201, 228, 160, .35), 0 30px 36px -24px rgba(0, 0, 0, .8); }
  .th-js .dca-plate__vp { background: transparent; }
  .th-js .dca-plate__wire { display: block; position: absolute; left: 0; top: 0; width: 1440px; max-width: none; height: 100%; filter: invert(1) brightness(1.4); opacity: .85; }
  .th-js .dca-plate__ink { position: relative; clip-path: inset(calc((1 - var(--ik)) * 100%) 0 0 0); }
  .th-js .dca-plate__edge { display: block; position: absolute; left: 0; right: 0; top: calc(var(--ik) * 100%); height: 2px; margin-top: -1px; background: var(--lume); box-shadow: 0 0 12px 2px rgba(201, 228, 160, .7); opacity: calc(clamp(0, var(--ik) * 40, 1) * clamp(0, (1 - var(--ik)) * 40, 1)); }
  .th-js .dca-plate__cap { display: none; }
}

/* =====================================================================================================================
   04 Optimise: lume. A dark stage, the buy box dim, six pins glowing; Lights brings the room up.
   ===================================================================================================================== */
.dir-cais-a .dca-opt { background: radial-gradient(70% 60% at 20% 0%, #15233f, var(--night) 70%); }
.dca-opt__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.dca-stage { --p: 1; position: relative; padding: 14px 14px 18px; border-radius: 6px; background: #04070d; box-shadow: inset 0 0 0 1px rgba(201, 228, 160, .16); transition: background-color .35s ease, box-shadow .35s ease; }
.dca-opt.is-lit .dca-stage { background: var(--tilec); box-shadow: inset 0 0 0 1px rgba(22, 23, 24, .14); }
.dca-lights {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 10px auto; padding: 0 16px 0 12px; border: 0; border-radius: 3px; cursor: pointer; background: rgba(248, 247, 243, .06); color: #F8F7F3;
  box-shadow: inset 0 0 0 1px rgba(201, 228, 160, .4); font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dca-lights__bulb { width: 14px; height: 14px; border-radius: 50%; background: #2d3a24; box-shadow: inset 0 0 0 1px rgba(201, 228, 160, .5); transition: background-color .25s ease, box-shadow .25s ease; }
.dca-lights[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.dca-lights[aria-pressed="true"] .dca-lights__bulb { background: #fff4c4; box-shadow: 0 0 0 2px #E8B63A, 0 0 14px 3px rgba(232, 182, 58, .6); }
.dca-lights__st { display: grid; min-width: 22px; text-align: left; color: var(--lume); }
.dca-lights[aria-pressed="true"] .dca-lights__st { color: #fff; }
.dca-lights__st > span { grid-area: 1 / 1; }
.dca-lights[aria-pressed="true"] .dca-lights__off, .dca-lights[aria-pressed="false"] .dca-lights__on { visibility: hidden; }
.dir-cais-a .dca-stage .th-browser { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.dir-cais-a .dca-stage .th-viewport { background: transparent; overflow: visible; }
.dir-cais-a .dca-stage .th-artboard { --k: tan(atan2(100cqw, 620px)); width: 620px; overflow: visible; }
.dca-row { position: absolute; display: block; width: 524px; max-width: none; height: auto; filter: brightness(.34) saturate(.5); transition: filter .35s ease, box-shadow .35s ease; }
.dca-opt.is-lit .dca-row { filter: none; }
.dca-row.is-lit { filter: none; box-shadow: 0 0 0 1px var(--lume), 0 0 40px 6px rgba(201, 228, 160, .32); }
.dca-opt.is-lit .dca-row.is-lit { box-shadow: 0 0 0 2px var(--cobalt); }
.dca-hl { position: absolute; z-index: 1; border-radius: 2px; box-shadow: 0 0 0 1px rgba(201, 228, 160, .0); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.dca-hl.is-on { opacity: 1; box-shadow: 0 0 0 1px rgba(201, 228, 160, .55), 0 0 30px 2px rgba(201, 228, 160, .2); }
.dca-opt.is-lit .dca-hl.is-on { box-shadow: 0 0 0 2px var(--cobalt); }

.dca-pin {
  position: absolute; z-index: 3; width: 44px; height: 44px; margin: 0; padding: 0; translate: -50% -50%; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 38% 32%, #f2fce2, var(--lume) 60%, #86b062); color: #0b1408; font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px #04070d, 0 0 18px 3px rgba(201, 228, 160, .5);
  opacity: calc(.62 + clamp(0, calc(var(--p) * 9 - var(--i)), 1) * .38);
  transition: box-shadow .3s ease, background-color .25s ease, scale .2s ease, opacity .3s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dca-pin > span { display: block; }
@media (hover: hover) { .dca-pin:hover { scale: 1.08; } }
.dca-pin:active { scale: .94; transition-duration: .08s; }
.dca-pin.is-on { opacity: 1; box-shadow: 0 0 0 3px #04070d, 0 0 0 5px var(--lume), 0 0 34px 8px rgba(201, 228, 160, .7); }
.dca-opt.is-lit .dca-pin { background: var(--ink); color: #fff; box-shadow: 0 0 0 3px var(--tilec); opacity: 1; }
.dca-opt.is-lit .dca-pin.is-on { background: var(--cobalt); box-shadow: 0 0 0 3px var(--tilec), 0 0 0 5px var(--cobalt); }
@media (prefers-reduced-motion: no-preference) {
  .th-js .dca-pin:not(.is-on):not(:hover) { animation: dca-breathe 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
  .th-js .dca-opt.is-lit .dca-pin { animation: none; }
}
@keyframes dca-breathe { 50% { box-shadow: 0 0 0 3px #04070d, 0 0 26px 7px rgba(201, 228, 160, .72); } }

.dca-opt__side { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); min-width: 0; }
.dca-lume { margin: 0; }
.dca-lume__frame { position: relative; width: min(100%, 440px); aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: #0b0f14; box-shadow: 0 0 0 1px rgba(201, 228, 160, .22), 0 30px 50px -34px rgba(0, 0, 0, .9); }
.dca-lume__still, .dca-lume__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dca-lume__vid { opacity: 0; transition: opacity .9s ease-in-out; }
.dca-lume.is-playing .dca-lume__vid { opacity: 1; }
.dca-pause {
  position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(10, 16, 27, .82); color: #F8F7F3; box-shadow: inset 0 0 0 1px rgba(248, 247, 243, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dca-pause[hidden] { display: none; }
.dca-pause__play { display: none; }
.dca-pause[aria-pressed="true"] .dca-pause__pause { display: none; }
.dca-pause[aria-pressed="true"] .dca-pause__play { display: block; }

.dca-dec { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dca-dec__li { border-top: 1px solid rgba(248, 247, 243, .14); }
.dca-dec__li:last-child { border-bottom: 1px solid rgba(248, 247, 243, .14); }
.dca-dec__h {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0; padding: 6px 4px; border: 0; border-radius: 0; background: transparent; color: #cdd5e2; text-align: left; cursor: pointer; font: inherit;
  transition: color .2s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .dca-dec__h:hover { color: #fff; } }
.dca-dec__n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(201, 228, 160, .55); color: var(--lume); font: 500 13px/1 var(--mono); transition: background-color .25s ease, color .25s ease; }
.dca-dec__t { font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.dca-dec__li.is-on .dca-dec__h { color: #fff; }
.dca-dec__li.is-on .dca-dec__n { background: var(--lume); color: #0b1408; }
.dca-dec__body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s; }
.dca-dec__li.is-on .dca-dec__body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s var(--ease), visibility 0s; }
.dca-dec__body > p { min-height: 0; overflow: hidden; margin: 0; padding-left: 44px; font-size: 16px; line-height: 1.55; color: #c3ccdb; text-wrap: pretty; }
.dca-dec__li.is-on .dca-dec__body > p { padding-bottom: 18px; }

/* =====================================================================================================================
   Tokens: the bezel insert
   ===================================================================================================================== */
.dir-cais-a .dca-bezel { background: linear-gradient(180deg, #14181d, #0c0f13); --th-f-ui: 'Public Sans', system-ui, sans-serif; }
.dca-bz__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dca-bz__cap { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dca-bz__sub { font-family: var(--f-disp); font-style: italic; font-weight: 300; font-size: 22px; color: #F8F7F3; }
.dca-bz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 500px) minmax(0, 1fr); grid-template-rows: repeat(3, auto); align-items: center; gap: 18px clamp(20px, 3vw, 44px); }
.dca-bz__lab { display: none; }
.dca-bz__ring { position: relative; grid-column: 2; grid-row: 1 / span 3; width: 100%; aspect-ratio: 1; }
.dca-bz__svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }
.dca-arc { transition: stroke-width .22s var(--ease); }
.dca-bz__dial { position: absolute; left: 50%; top: 50%; width: 62%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: #efe6cb; }
.dca-print { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dca-print__meta { margin: 0; font: 500 9.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lume); opacity: .85; }
.dca-print__sample { margin: 0; line-height: 1.12; }
.dca-print--0 .dca-print__sample { font-size: clamp(34px, 3.6vw, 48px); letter-spacing: -.02em; }
.dca-print--1 .dca-print__sample, .dca-print--2 .dca-print__sample { font-size: 13.5px; letter-spacing: .02em; }
.dca-print--2 .dca-print__sample { font-variant-numeric: tabular-nums; }
.dca-pills { display: contents; list-style: none; margin: 0; padding: 0; }
.dca-pills__li { min-width: 0; }
.dca-pills__li:nth-child(1) { grid-column: 3; grid-row: 1; }
.dca-pills__li:nth-child(2) { grid-column: 3; grid-row: 2; }
.dca-pills__li:nth-child(3) { grid-column: 3; grid-row: 3; }
.dca-pills__li:nth-child(4) { grid-column: 1; grid-row: 3; }
.dca-pills__li:nth-child(5) { grid-column: 1; grid-row: 2; }
.dca-pills__li:nth-child(6) { grid-column: 1; grid-row: 1; }
.dca-pill {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; width: 100%; min-height: 68px; margin: 0; padding: 10px 18px 10px 10px;
  border: 0; border-radius: 3px; cursor: pointer; text-align: left; background: rgba(248, 247, 243, .05); color: #F8F7F3; box-shadow: inset 0 0 0 1px rgba(248, 247, 243, .16);
  transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .dca-pill:hover { background: rgba(248, 247, 243, .1); box-shadow: inset 0 0 0 1px rgba(248, 247, 243, .4); } }
.dca-pill:active { transform: scale(.985); transition-duration: .08s; }
.dca-pill__chip { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 1px rgba(0, 0, 0, .3); }
.dca-pill__chip { color: var(--ic, #fff); }
.dca-pill__ok { display: none; }
.dca-pill.is-copied .dca-pill__copy { display: none; }
.dca-pill.is-copied .dca-pill__ok { display: block; }
.dca-pill__name { align-self: end; font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1.1; }
.dca-pill__hex { align-self: start; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: #c2cad8; }
.dca-pills__li:nth-child(n + 4) .dca-pill { grid-template-columns: minmax(0, 1fr) 48px; padding: 10px 10px 10px 18px; text-align: right; }
.dca-pills__li:nth-child(n + 4) .dca-pill__chip { grid-column: 2; }
.dca-pills__li:nth-child(n + 4) .dca-pill__name, .dca-pills__li:nth-child(n + 4) .dca-pill__hex { grid-column: 1; }
.dca-bezel:has(.dca-pill[data-k="0"]:is(:hover, :focus-visible)) .dca-arc[data-k="0"],
.dca-bezel:has(.dca-pill[data-k="1"]:is(:hover, :focus-visible)) .dca-arc[data-k="1"],
.dca-bezel:has(.dca-pill[data-k="2"]:is(:hover, :focus-visible)) .dca-arc[data-k="2"],
.dca-bezel:has(.dca-pill[data-k="3"]:is(:hover, :focus-visible)) .dca-arc[data-k="3"],
.dca-bezel:has(.dca-pill[data-k="4"]:is(:hover, :focus-visible)) .dca-arc[data-k="4"],
.dca-bezel:has(.dca-pill[data-k="5"]:is(:hover, :focus-visible)) .dca-arc[data-k="5"] { stroke-width: 37; }
.dca-bezel .th-toast { position: absolute; z-index: 5; font-family: var(--f-ui); box-shadow: 0 0 0 1px rgba(248, 247, 243, .3), 0 12px 22px -10px rgba(0, 0, 0, .6); }

.dca-flank { display: flex; flex-direction: column; gap: 12px; }
.dca-drawer { display: flex; flex-direction: column; }
.dca-drawer__h {
  position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; margin: 0; padding: 0 22px; border: 0; border-radius: 3px; cursor: pointer;
  font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #F8F7F3; background: rgba(248, 247, 243, .05); box-shadow: inset 0 0 0 1px rgba(248, 247, 243, .16);
  transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .dca-drawer__h:hover { background: rgba(248, 247, 243, .1); } }
/* the crown: a knurled steel cylinder, pulled out a little while the drawer is open */
.dca-drawer__knob {
  flex: none; width: 34px; height: 22px; border-radius: 4px 7px 7px 4px; transition: translate .3s var(--ease);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px), linear-gradient(180deg, #e3e7e9, #8d969b 50%, #c6cccf);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.dca-drawer__h[aria-expanded="true"] .dca-drawer__knob { translate: 8px 0; }
.dca-drawer__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--ease), visibility 0s linear .4s; }
.dca-drawer.is-open .dca-drawer__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--ease), visibility 0s; }
.dca-drawer__in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.dca-drawer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 22px 20px; margin: 8px 0 0; border-radius: 3px; background: rgba(248, 247, 243, .04); box-shadow: inset 0 0 0 1px rgba(248, 247, 243, .1); }
.dca-b { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; font: 500 15px/1 var(--f-ui); letter-spacing: .02em; border-radius: 0; }
.dca-b--fill { color: #fff; background: var(--cobalt); }
.dca-b--line { color: #F8F7F3; box-shadow: inset 0 0 0 1.5px #F8F7F3; }
.dca-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 0; font: 500 15px/1 var(--f-ui); color: #F8F7F3; background: transparent; box-shadow: inset 0 0 0 1px rgba(248, 247, 243, .4); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dca-chip[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--lume); }
.dca-chip__p { margin-left: 8px; color: #b6bfcd; font-weight: 400; }
.dca-chip__sw { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.dca-price { font: 500 30px/1 var(--f-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dca-price__note { font-size: 15px; color: #b6bfcd; }

/* =====================================================================================================================
   Tests: three weeks on the wrist
   ===================================================================================================================== */
.dir-cais-a .dca-tests { background: var(--white); }
.dir-cais-a .dca-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: clamp(14px, 1.8vw, 24px); }
.dir-cais-a .th-test.dca-wk { display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; border-radius: 3px; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(22, 23, 24, .14), 0 26px 38px -30px rgba(14, 27, 61, .5); overflow: hidden; }
.dir-cais-a .th-test.dca-wk:hover { background: #fff; }
.dca-wk__top { display: flex; align-items: center; gap: 14px 18px; padding: 20px clamp(20px, 2.2vw, 28px) 4px; }
.dca-wk__win { flex: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 6px 6px 12px; border-radius: 3px; background: var(--ink); color: #F8F7F3; }
.dca-wk__label { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.dca-wk__n { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 2px; background: #efe6cb; color: var(--ink); font: 300 28px/1 var(--f-disp); font-variant-numeric: lining-nums tabular-nums; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
.dca-wk__days { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 2px; list-style: none; margin: 0; padding: 0; }
.dca-wk__days li { height: 18px; background: rgba(22, 23, 24, .12); }
.dca-wk__days li.is-on { background: var(--cobalt); }
.dca-wk__days li:nth-child(7n) { margin-right: 3px; }
.dca-wk__rows { flex: 1; margin: 0; padding: 6px clamp(20px, 2.2vw, 28px) clamp(18px, 2.2vw, 26px); }
.dca-wk__row { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid rgba(22, 23, 24, .12); }
.dca-wk__row:first-child { border-top: 0; }
.dir-cais-a .dca-wk dt { font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.dir-cais-a .dca-wk__row--why dt { color: #484b50; }
.dir-cais-a .dca-wk dd { margin: 0; text-wrap: pretty; }
.dca-wk__row dd { font-family: var(--f-disp); font-weight: 400; font-size: clamp(20px, 1.7vw, 23px); line-height: 1.28; letter-spacing: -.01em; }
.dca-wk__row--why dd { font-family: var(--f-ui); font-size: 16px; line-height: 1.5; color: #484b50; letter-spacing: 0; }
.dca-wk__foot { min-height: 116px; display: grid; grid-template-columns: 1fr 1fr; margin: 0; background: var(--tilec); border-top: 1px solid rgba(22, 23, 24, .1); }
.dca-wk__foot > div { display: flex; flex-direction: column; gap: 6px; padding: 16px clamp(20px, 2.2vw, 28px) 20px; }
.dca-wk__foot > div + div { border-left: 1px solid rgba(22, 23, 24, .1); }
.dca-wk__foot dd { font-size: 15px; line-height: 1.4; color: var(--ink); }

/* ---------- reveals ---------- */
.th-js .dir-cais-a [data-dir-reveal]:not(.th-test) { opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.th-js .dir-cais-a [data-dir-reveal].dca-in:not(.th-test) { opacity: 1; translate: 0 0; }

/* =====================================================================================================================
   Widths
   ===================================================================================================================== */
@media (max-width: 1099px) {
  .dca-bz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dca-bz__ring { grid-column: 1 / -1; grid-row: 1; width: min(100%, 460px); margin-inline: auto; }
  .dca-bz__lab { display: block; grid-column: 1 / -1; grid-row: 2; }
  .dca-pills__li:nth-child(n) { grid-column: auto; grid-row: auto; }
  .dca-pills__li:nth-child(n + 4) .dca-pill { grid-template-columns: 48px minmax(0, 1fr); padding: 10px 18px 10px 10px; text-align: left; }
  .dca-pills__li:nth-child(n + 4) .dca-pill__chip { grid-column: 1; }
  .dca-pills__li:nth-child(n + 4) .dca-pill__name, .dca-pills__li:nth-child(n + 4) .dca-pill__hex { grid-column: 2; }
}
@media (max-width: 959px) {
  .dca-sheet { grid-template-columns: minmax(0, 1fr); }
  .dca-fig__frame { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
  .dca-opt__grid { grid-template-columns: minmax(0, 1fr); }
  .dca-stage { width: min(100%, 640px); margin-inline: auto; }
  .dir-cais-a .dca-weeks { grid-template-columns: 1fr; }
  .dca-wk__days { max-width: 360px; }
}
@media (max-width: 699px) {
  .dca-wrists { grid-template-columns: 1fr; }
  .dca-legend { display: none; }
  .dca-spec__row { grid-template-columns: 1fr; }
  .dca-w__btn { aspect-ratio: 1 / 1; }
  .dca-w__say--move { top: 30%; }
  /* a phone has no margin to spare: the dial is a small face in the 18px that the page's cards leave at the right edge (their text ends 20px inside the card),
     above the sticky Reserve bar (12px + 68px tall), with no time chip, so it never sits on the words or the bar */
  .dca-dial { right: 2px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 68px + 16px); width: 34px; }
  .dca-dial__t { display: none; }
  body:has(.vsw) .dca-dial { bottom: calc(88px + 68px + 16px); }

  .dca-dive { grid-template-columns: 62px minmax(0, 1fr); padding-bottom: 40px; }
  .dca-dive::before { left: 31px; width: 32px; margin-left: -16px; border-radius: 16px; top: 18px; bottom: 30px; }
  .dca-dive::after { left: 31px; width: 24px; margin-left: -12px; border-radius: 12px; top: 22px; bottom: 34px; }
  .dca-dive__diver { left: 31px; width: 22px; height: 22px; margin: -11px 0 0 -11px; top: calc(30px + (100% - 66px) * var(--p)); }
  .dca-dv__port { grid-column: 1; width: 54px; height: 54px; margin-top: 12px; }
  .dca-dv__port b { font-size: 15px; }
  .dca-dv__port i { font-size: 8px; }
  .dca-dv { display: contents; }
  .dca-dv--l .dca-dv__card, .dca-dv--r .dca-dv__card { grid-column: 2; grid-row: calc(var(--i) + 1); justify-self: stretch; max-width: none; margin: 8px 0 22px 14px; padding: 18px 18px 20px; }
  .dca-dv--l .dca-dv__card::after, .dca-dv--r .dca-dv__card::after { left: auto; right: 100%; width: 14px; top: 35px; }
  .dca-dive { grid-auto-rows: auto; }
  .dca-dv__name { font-size: 30px; }

  .dca-bz { grid-template-columns: minmax(0, 1fr); }
  .dca-bz__ring { width: min(100%, 380px); }
  .dca-print__meta { display: none; }
  .dca-print--0 .dca-print__sample { font-size: 30px; }
  .dca-print--1 .dca-print__sample, .dca-print--2 .dca-print__sample { font-size: 11px; }
  .dca-bz__dial { width: 66%; gap: 8px; }
  .dca-pill { min-height: 60px; }
  .dca-pill__name { font-size: 19px; }

  .dca-opt__grid { gap: 28px; }
  .dca-dec__body > p { padding-left: 44px; }
  .dca-wk__foot { grid-template-columns: 1fr; }
  .dca-wk__foot > div + div { border-left: 0; border-top: 1px solid rgba(22, 23, 24, .1); }
  .dca-wk__top { flex-wrap: wrap; }
  .dca-wk__days { flex-basis: 100%; max-width: none; }
}

/* =====================================================================================================================
   Calm: reduced motion, or a screen under 600px tall. Every finished state, static: the sheet is drawn, the wrists show their doubt, the gauge is full,
   the layers sit in a grid, the pins are lit, nothing is pinned, nothing animates.
   ===================================================================================================================== */
@media (prefers-reduced-motion: reduce), (max-height: 599px) {
  .dir-cais-a [data-dir-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .dir-cais-a *, .dir-cais-a *::before, .dir-cais-a *::after { animation: none !important; }
  .dca-spec__row { --q: 1; opacity: 1; }
  .dca-fig { --q: 1; }
  .dca-sheet, .dca-dive, .dca-x { --p: 1; }
  .dca-dive__diver { opacity: 1; }
  .dca-w__btn, .dca-w__say, .dca-w__ph img, .dca-w__turn, .dca-stage, .dca-row, .dca-pin, .dca-lights, .dca-dec__body, .dca-drawer__panel, .dca-drawer__knob, .dca-arc, .dca-dv__port, .dca-hl { transition: none !important; }
  .dca-dial { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dca-dial { display: none; }
}

/* the signature (shared sig-wrist.njk) sits inside the direction's root: its header wears the direction's type */
.dir-cais-a .th-wristwrap .th-hd__title { font-family: var(--f-disp); font-weight: 300; font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
.dir-cais-a .th-wristwrap .th-hd__eyebrow { font-size: 12px; letter-spacing: .1em; }
.dir-cais-a .th-wristwrap .th-hd__aside { font-size: 17px; line-height: 1.55; max-width: 46ch; }