/* vaudrey-a "The bench lamp": the six sections of the Vaudrey case, direction A. The page is one walnut bench under one lamp. A warm pool of light (fixed,
   decorative) travels down the screen as you scroll and the objects it passes come up out of the dark: 01 the letter on ivory stationery and the register entries
   in a leather ledger, 02 the counter running to 1,200 hours beside five hand-finishing macros, 03 the ten parts of the storefront laid in a velvet tray, 04 the
   caseback with six rubies that are the six decisions, then the dial book (the tokens) and the first register year (the tests).
   Scoped under .dir-vaudrey-a, class prefix dva-. Markup: src/_includes/e2/theme/dir/vaudrey-a/*.njk, behaviour: e2-dir-vaudrey-a.js. Scroll-driven motion is
   transform / opacity / clip-path / brightness only, driven by custom properties (--p, --lit) 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, with the lamp off. */

.dir-vaudrey-a {
  --bench: #0b0a09; --bench2: #15110d; --ivory: #F4F0E8; --grey: #8C877E; --navy: #141B2B; --gold: #B8975A; --goldl: #dcc08a; --goldd: #8a6a33;
  --hair: #E4DFD5; --enamel: #FBFAF7; --ruby: #b4243f; --leather: #2a1510; --mut: #b4ab9b; --line: rgba(244, 240, 232, .16);
  --f-disp: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; --f-ui: Jost, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dva-pad: clamp(20px, 3.4vw, 48px); --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: var(--f-ui);
}
.dir-vaudrey-a img { display: block; }
/* On the real /vaudrey page the direction is two <div class="dir dir-vaudrey-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-vaudrey-a { display: contents; }

/* ---------- the shared frame of a section: the bench ---------- */
.dir-vaudrey-a .dva-sec {
  position: relative; gap: clamp(28px, 3.4vw, 48px); border-radius: 28px; overflow: clip; color: var(--ivory); font-family: var(--f-ui); padding: var(--dva-pad);
  background: radial-gradient(80% 55% at 18% 0%, #1c1610, var(--bench) 72%), var(--bench); box-shadow: inset 0 0 0 1px rgba(184, 151, 90, .24);
}
.dir-vaudrey-a .dva-sec :focus-visible { outline: 2px solid var(--goldl); outline-offset: 3px; }
.dir-vaudrey-a .dva-sec .th-hd { gap: 18px 56px; position: relative; z-index: 1; }
.dir-vaudrey-a .dva-sec .th-hd__eyebrow { color: var(--goldl); font-family: var(--f-ui); font-size: 12px; font-weight: 500; letter-spacing: .18em; }
.dir-vaudrey-a .dva-sec .th-hd__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -.02em; color: var(--ivory); text-wrap: balance; }
.dir-vaudrey-a .dva-sec .th-hd__aside { max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--mut); }
.dva-lab { margin: 0; font: 500 12px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--goldl); }

/* =====================================================================================================================
   The lamp: a warm pool, fixed to the screen, that the script moves down it (and a little across it) as the page scrolls. The objects it passes carry --lit
   (0 to 1, written by the script) and dim by their own --dim: nothing is ever fully dark, because a dark thing cannot be read.
   ===================================================================================================================== */
.dva-lamp { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .6s ease; }
.dva-lamp.is-on { opacity: 1; }
.dva-lamp__pool {
  position: absolute; left: 0; top: 0; width: 78vmax; height: 78vmax; margin: -39vmax 0 0 -39vmax; will-change: transform;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .24), rgba(255, 196, 120, .11) 38%, rgba(255, 190, 100, .02) 66%, rgba(255, 190, 100, 0));
}
.dva-obj { --lit: 1; }
.th-js .dva-obj.is-live { filter: brightness(calc(1 - (1 - var(--lit)) * var(--dim, .55))); will-change: filter; }

/* =====================================================================================================================
   01 Discover: the letter and the ledger
   ===================================================================================================================== */
.dva-bench { --p: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.dva-letter {
  position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3.2vw, 46px) clamp(22px, 3.2vw, 46px) 30px; color: var(--navy); rotate: -.4deg;
  background: linear-gradient(180deg, #f7f3ea, #F4F0E8 40%, #efe9dc), var(--ivory); border-radius: 2px;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 60px rgba(150, 120, 70, .10), 0 34px 60px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(20, 27, 43, .1);
}
.dva-letter::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(184, 151, 90, .45); pointer-events: none; }
.dva-letter__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 18px; }
.dva-letter__id { flex: 1; min-width: 0; padding-top: 6px; }
.dva-letter__mark { margin: 0; font: 400 clamp(16px, 1.6vw, 21px)/1.3 var(--f-disp); letter-spacing: .3em; text-transform: uppercase; color: var(--navy); }
.dva-letter__rule { display: block; width: 100%; height: 1px; margin-top: 14px; background: linear-gradient(90deg, var(--gold), rgba(184, 151, 90, .15)); }
.dva-letter__photo { position: relative; flex: none; width: min(40%, 220px); margin: -2px 6px 0 0; padding: 5px 5px 16px; background: #fff; rotate: 2.4deg; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(20, 27, 43, .12); }
.dva-letter__photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.dva-letter__clip { position: absolute; left: 50%; top: -9px; width: 14px; height: 30px; margin-left: -7px; border-radius: 7px; border: 2px solid #9aa0a6; border-bottom-color: transparent; }
.dva-letter__body { position: relative; padding-top: 10px; }
.dva-ln { --q: 1; position: relative; margin: 0 0 18px; clip-path: inset(0 0 calc((1 - var(--q)) * 100%) 0); text-wrap: pretty; }
.th-js .dva-ln { --q: 0; }
.dva-ln--goal { font: italic 400 clamp(24px, 2.3vw, 33px)/1.2 var(--f-disp); letter-spacing: -.01em; padding-bottom: 6px; }
.dva-ln--c { padding-left: 42px; font: 400 17px/1.55 var(--f-ui); color: #28304a; }
.dva-ln__no { position: absolute; left: 0; top: -.1em; font: italic 400 22px/1.4 var(--f-disp); color: var(--goldd); }
.dva-letter__sign { height: 56px; margin-top: 4px; }
.dva-letter__sign i { display: block; width: 168px; height: 52px; opacity: .8; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 52'%3E%3Cpath d='M6 40 C 18 8, 34 4, 30 30 S 44 44, 58 20 S 76 10, 80 32 S 106 44, 120 16 S 144 34, 162 24' fill='none' stroke='%23141B2B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }

.dva-ledger { position: relative; }
.dva-ledger__cover {
  position: relative; padding: 18px 18px 20px 34px; border-radius: 6px 16px 16px 6px; color: var(--ivory);
  background: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(135deg, #3d2016, #26110b 55%, #331a10);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 10px 0 18px -8px rgba(0, 0, 0, .7), 0 34px 60px -30px rgba(0, 0, 0, .95);
}
.dva-ledger__cover::before { content: ""; position: absolute; inset: 7px 7px 7px 20px; border: 1.5px dashed rgba(184, 151, 90, .55); border-radius: 3px 11px 11px 3px; pointer-events: none; }
.dva-ledger__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 8px 14px; }
.dva-ledger__title { margin: 0; font: italic 400 clamp(24px, 2.2vw, 30px)/1.1 var(--f-disp); color: var(--goldl); text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.dva-legend { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 11px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.dva-legend i { flex: 0 0 44px; height: 1px; background: linear-gradient(90deg, #9a2c3e, var(--goldl)); }
.dva-legend span:last-child { color: var(--goldl); }
.dva-entries { list-style: none; margin: 0; padding: 0 4px 0 4px; display: flex; flex-direction: column; gap: 12px; }
.dva-entry { margin: 0; }
.dva-entry__btn {
  position: relative; display: grid; grid-template-columns: minmax(84px, 112px) minmax(0, 1fr); gap: 4px 18px; align-items: start; width: 100%; margin: 0; padding: 14px 52px 14px 14px; border: 0; border-radius: 2px; cursor: pointer; text-align: left;
  color: var(--navy); font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(20, 27, 43, .11) 27px 28px), linear-gradient(180deg, #f6f2e9, #eee8da);
  box-shadow: 0 10px 16px -10px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(20, 27, 43, .08); transition: transform .25s var(--ease), box-shadow .25s ease;
}
@media (hover: hover) { .dva-entry__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 20px -10px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(184, 151, 90, .7); } }
.dva-entry__ph { position: relative; display: block; aspect-ratio: 4 / 5; padding: 4px; background: #fff; rotate: -1.4deg; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); }
.dva-entry__ph::before { content: ""; position: absolute; left: 50%; top: -7px; width: 38px; height: 14px; margin-left: -19px; background: rgba(184, 151, 90, .6); rotate: 3deg; }
.dva-entry__ph img { width: 100%; height: 100%; object-fit: cover; }
.dva-entry__txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dva-entry__who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.dva-entry__no { font: 500 11px/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--goldd); }
.dva-entry__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(20, 27, 43, .45); }
.dva-entry__who b { font: 400 clamp(19px, 1.6vw, 22px)/1.15 var(--f-disp); }
.dva-entry__need { font-size: 14.5px; line-height: 1.4; color: #4a5068; }
.dva-entry__k { display: block; font: 500 10.5px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--goldd); }
.dva-entry__doubt { display: block; }
.dva-entry__q {
  display: inline; font: italic 400 clamp(18px, 1.5vw, 20px)/1.32 var(--f-disp); color: #1d2a55; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--ruby), var(--ruby)) 0 58% / 0% 2px no-repeat; transition: background-size .45s var(--ease), color .3s ease;
}
.dva-entry__btn[aria-pressed="true"] .dva-entry__q { background-size: 100% 2px; color: #70758a; }
.dva-entry__move { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--ease), visibility 0s linear .4s; }
.dva-entry__mv { min-height: 0; overflow: hidden; display: block; }
.dva-entry__btn[aria-pressed="true"] .dva-entry__move { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--ease), visibility 0s; }
.dva-entry__a { display: block; margin-top: 8px; padding: 6px 0 4px 12px; border-left: 2px solid var(--gold); font: 500 15px/1.45 var(--f-ui); color: var(--navy); text-wrap: pretty; }
.dva-entry__turn { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--goldd); box-shadow: inset 0 0 0 1px rgba(138, 106, 51, .55); transition: background-color .3s ease, color .3s ease; }
.dva-entry__turn svg { opacity: 0; transition: opacity .25s ease; }
.dva-entry__btn[aria-pressed="true"] .dva-entry__turn { background: var(--goldd); color: #fff; }
.dva-entry__btn[aria-pressed="true"] .dva-entry__turn svg { opacity: 1; }
.dva-ledger__ribbon { position: absolute; right: 38px; bottom: -22px; width: 14px; height: 54px; background: linear-gradient(90deg, #7d1428, #a41d38 50%, #6d1020); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }

/* =====================================================================================================================
   02 Define: 1,200 hours. The counter and the bench camera are pinned beside five macros; each macro is lit as the counter passes its hours.
   ===================================================================================================================== */
.dir-vaudrey-a .dva-define { gap: clamp(28px, 3.4vw, 48px); }
.dva-define__bench { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 340px; object-fit: cover; object-position: 50% 62%; opacity: .34; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent); mask-image: linear-gradient(180deg, #000 10%, transparent); }
.dva-key { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 12px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.dir-vaudrey-a .dva-define .th-hd__aside.dva-key { max-width: none; color: var(--goldl); }
.dva-key i { flex: 0 0 72px; height: 1px; background: linear-gradient(90deg, var(--goldl), rgba(220, 192, 138, .2)); }

.dva-hours { --p: 1; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.dva-hours__side { position: sticky; top: calc(var(--header-h, 68px) + 20px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dva-hours__count { position: relative; overflow: hidden; padding: 26px 20px 20px; border-radius: 4px; background: linear-gradient(160deg, #1d1710, #0b0907); box-shadow: inset 0 0 0 1px rgba(184, 151, 90, .55), inset 0 0 0 6px #0b0907, inset 0 0 0 7px rgba(184, 151, 90, .28), 0 30px 50px -34px #000; }
.dva-hours__balance { position: absolute; right: -24%; top: -30%; width: 86%; height: auto; aspect-ratio: 1; opacity: .26; rotate: calc(var(--p) * 300deg); pointer-events: none; }
.dva-hours__win { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 18px; color: var(--ivory); }
.dva-hours__win b { font: 500 clamp(54px, 5.6vw, 84px)/1 var(--f-disp); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 0 24px rgba(255, 206, 140, .35); }
.dva-hours__win span { font: italic 400 28px/1 var(--f-disp); color: var(--goldl); }
.dva-hours__gauge { position: relative; display: block; height: 2px; margin: 0 6px 10px; background: rgba(244, 240, 232, .22); }
.dva-hours__fill { position: absolute; left: 0; top: -1px; height: 4px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p)); background: linear-gradient(90deg, var(--gold), var(--goldl)); box-shadow: 0 0 10px rgba(220, 192, 138, .6); }
.dva-hours__gauge em { position: absolute; left: calc(var(--at) * 100%); top: -6px; width: 1px; height: 14px; background: rgba(244, 240, 232, .55); }
.dva-cam { margin: 0; }
.dva-cam__frame { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #0b0907; box-shadow: 0 0 0 1px rgba(184, 151, 90, .45), 0 30px 50px -34px #000; }
.dva-cam__still, .dva-cam__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dva-cam__vid { opacity: 0; transition: opacity .9s ease-in-out; }
.dva-cam.is-playing .dva-cam__vid, .dva-cam__frame.is-playing .dva-cam__vid { opacity: 1; }
.dva-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(11, 9, 7, .8); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(220, 192, 138, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dva-pause[hidden] { display: none; }
.dva-pause__play { display: none; }
.dva-pause[aria-pressed="true"] .dva-pause__pause { display: none; }
.dva-pause[aria-pressed="true"] .dva-pause__play { display: block; }

.dva-plates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.dva-plate { --on: 1; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px clamp(20px, 2.6vw, 36px); align-items: center; min-width: 0; }
.th-js .dva-plate { --on: 0; }
.th-js .dva-plate.is-lit { --on: 1; }
.dva-plate__ph { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: #0b0907; box-shadow: 0 0 0 1px rgba(184, 151, 90, calc(.18 + var(--on) * .4)), 0 30px 46px -30px rgba(0, 0, 0, .95), 0 0 calc(var(--on) * 60px) -10px rgba(255, 196, 120, .35); transition: box-shadow .7s ease; }
.dva-plate__ph img { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(.3 + var(--on) * .7)) saturate(calc(.55 + var(--on) * .45)); transition: filter .8s ease; }
.dva-plate__fin { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding: 36px 14px 12px; background: linear-gradient(0deg, rgba(8, 6, 4, .88), transparent); font: 500 11px/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); }
.dva-plate__fin b { font: 400 18px/1 var(--f-disp); letter-spacing: 0; color: var(--goldl); font-variant-numeric: lining-nums tabular-nums; }
.dva-plate__card { min-width: 0; opacity: calc(.46 + var(--on) * .54); transition: opacity .7s ease; }
.dva-plate__who { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 11px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.dva-plate__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
.dva-plate__name { margin: 0 0 14px; font: 400 clamp(32px, 3vw, 44px)/1 var(--f-disp); letter-spacing: -.015em; }
.dva-plate__no { display: inline-block; margin-right: 12px; font: 500 12px/1 var(--f-ui); letter-spacing: .14em; color: var(--goldl); vertical-align: .6em; }
.dva-plate__k { display: block; margin-bottom: 4px; font: 500 11px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--goldl); }
.dva-plate__doubt { margin: 0 0 14px; font: italic 400 clamp(19px, 1.7vw, 23px)/1.3 var(--f-disp); color: var(--ivory); text-wrap: pretty; }
.dva-plate__move { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; color: #d8d0c0; text-wrap: pretty; }

/* =====================================================================================================================
   03 Design: the parts tray. Base rules are the FINISHED state (reduced motion, a short screen, no script): the ten compartments in a grid, each with its
   number, part, name and note, all inked. Everything that moves sits in the live block and the phone block, gated on html.th-js and the same media conditions
   the script uses.
   ===================================================================================================================== */
.dva-tray { --p: 1; --n: 10; position: relative; z-index: 1; }
.dva-tray__stage { display: block; }
.dva-tray__bar { display: none; }
.dva-tray__frame { position: relative; padding: 14px; border-radius: 10px; background: linear-gradient(145deg, #55321c, #2b170b 58%, #402414); box-shadow: inset 0 0 0 1px rgba(255, 224, 170, .18), inset 0 2px 0 rgba(255, 224, 170, .18), 0 40px 70px -40px #000; }
.dva-tray__felt { position: absolute; left: 14px; top: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: cover; filter: blur(18px) brightness(.9) saturate(1.1); transform: scale(1.12); border-radius: 5px; box-shadow: inset 0 0 44px #000; pointer-events: none; }
.dva-tray__frame { overflow: hidden; }
.dva-tray__box { position: relative; list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dva-well { --l: 1; --ik: 1; margin: 0; min-width: 0; display: flex; }
.dva-well__btn {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 30px 12px 14px; border: 0; border-radius: 8px; cursor: pointer; text-align: left; color: var(--ivory); font: inherit;
  background: rgba(4, 12, 8, .66); box-shadow: inset 0 4px 14px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(184, 151, 90, .3), 0 1px 0 rgba(255, 236, 190, .12);
  transition: box-shadow .3s ease, background-color .3s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .dva-well__btn:hover { background: rgba(10, 24, 16, .6); box-shadow: inset 0 4px 14px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(220, 192, 138, .7), 0 1px 0 rgba(255, 236, 190, .12); } }
.dva-well__no { position: absolute; left: 12px; top: 10px; font: 500 11px/1 var(--f-ui); letter-spacing: .14em; color: var(--goldl); font-variant-numeric: tabular-nums; }
.dir-vaudrey-a .dva-well__vp { display: block; width: 100%; background: #14100b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 20px -10px rgba(0, 0, 0, .9); opacity: calc(.18 + var(--l) * .82); }
.dir-vaudrey-a .dva-well__vp .th-artboard, .dir-vaudrey-a .dva-well__vp .th-s { display: block; }
.dva-well__wire { position: absolute; left: 0; top: 0; display: block; width: 1440px; max-width: none; height: 100%; filter: invert(1) brightness(1.3); opacity: .8; }
.dva-well__ink { position: relative; display: block; clip-path: inset(0 0 calc((1 - var(--ik)) * 100%) 0); }
.dva-well__edge { display: none; position: absolute; left: 0; right: 0; top: calc(var(--ik) * 100%); height: 2px; margin-top: -1px; background: var(--goldl); box-shadow: 0 0 12px 2px rgba(220, 192, 138, .75); opacity: calc(clamp(0, var(--ik) * 40, 1) * clamp(0, (1 - var(--ik)) * 40, 1)); pointer-events: none; }
.dva-well__cap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dva-well__nm { display: flex; flex-direction: column; gap: 2px; }
.dva-well__nm b { font: 400 18px/1.15 var(--f-disp); letter-spacing: -.005em; }
.dva-well__nm em { font: 500 10.5px/1.2 var(--f-ui); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--goldl); }
.dva-well__note { font-size: 13px; line-height: 1.45; color: var(--mut); text-wrap: pretty; }

@media (max-width: 1099px) { .dva-tray__box { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .dva-tray__box { grid-template-columns: minmax(0, 1fr); padding: 8px; } .dva-tray__frame { padding: 8px; } .dva-tray__felt { left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); } }

/* ---- phone and tablet: the compartments ink as they come into view ---- */
@media (max-width: 899px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .th-js .dva-well:not(.is-in) { --l: .3; --ik: 0; }
  .th-js .dva-well__ink { transition: clip-path 1s var(--ease); }
  .th-js .dva-well__vp { transition: opacity .6s ease; }
  .th-js .dva-well__edge { display: block; transition: top 1s var(--ease), opacity .3s ease; }
}

/* ---- live: pinned, lit one by one, scroll-driven ---- */
@media (min-width: 900px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .th-js .dva-tray { --p: 0; --c: calc(var(--pm, var(--p)) * 9.9); height: calc(760px + 105vh); }
  .th-js .dva-tray__stage { position: sticky; top: calc(var(--header-h, 68px) + 14px); }
  .th-js .dva-tray__bar { display: flex; align-items: baseline; gap: 18px; margin: 0 0 14px; min-height: 66px; }
  .th-js .dva-tray__bar b { flex: none; font: 500 12px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--goldl); font-variant-numeric: tabular-nums; }
  .th-js .dva-tray__bar span { font: italic 400 clamp(19px, 1.8vw, 24px)/1.28 var(--f-disp); color: var(--ivory); text-wrap: pretty; }
  .th-js .dva-tray__bar small { display: block; margin-bottom: 4px; font: 500 11px/1.3 var(--f-ui); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--goldl); }
  .th-js .dva-well {
    /* --c is how many parts the lamp has reached (0 to 9.9): part j is lit over c = j - .45 to j and inks over j - .385 to j + .385, so at progress 0 the first part is
       lit and half inked, and the bar reads Part 1 of 10 */
    --l: clamp(0, calc((var(--c) - var(--i)) * 2.2 + 1), 1); --ik: clamp(0, calc((var(--c) - var(--i)) * 1.3 + .5), 1);
  }
  .th-js .dva-well__btn { justify-content: space-between; align-items: stretch; height: clamp(224px, 30vh, 270px); padding: 30px 12px 12px; }
  .th-js .dva-well__vp { margin: auto 0; }
  .th-js .dva-well__note { display: none; }
  .th-js .dva-well.is-cur .dva-well__btn { box-shadow: inset 0 4px 14px rgba(0, 0, 0, .75), inset 0 0 0 2px var(--goldl), 0 0 34px 2px rgba(255, 200, 120, .3); }
  .th-js .dva-well__edge { display: block; }
}

/* =====================================================================================================================
   04 Optimise: the jewels. The buy box lies in the dark; the caseback beside it carries six rubies that are the six decisions.
   ===================================================================================================================== */
.dva-opt__grid { position: relative; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; z-index: 1; }
.dva-stage { position: relative; padding: 14px; border-radius: 4px; background: #060504; box-shadow: inset 0 0 0 1px rgba(184, 151, 90, .3); }
.dir-vaudrey-a .dva-stage .th-browser { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.dir-vaudrey-a .dva-stage .th-viewport { background: transparent; overflow: visible; }
.dir-vaudrey-a .dva-stage .th-artboard { --k: tan(atan2(100cqw, 620px)); width: 620px; overflow: visible; }
.dva-row { position: absolute; display: block; width: 524px; max-width: none; height: auto; filter: brightness(.5) saturate(.7); transition: filter .35s ease, box-shadow .35s ease; }
.dva-row.is-lit { filter: none; box-shadow: 0 0 0 1px var(--goldl), 0 0 44px 6px rgba(255, 196, 120, .3); }
.dva-hl { position: absolute; z-index: 1; border-radius: 2px; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.dva-hl.is-on { opacity: 1; box-shadow: 0 0 0 1px rgba(220, 192, 138, .75), 0 0 34px 2px rgba(255, 196, 120, .2); }
.dva-wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.dva-wire path { stroke: var(--goldl); stroke-width: 1.5; stroke-dasharray: 4 5; filter: drop-shadow(0 0 4px rgba(255, 196, 120, .8)); }

.dva-opt__side { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); min-width: 0; }
.dva-macro { margin: 0; width: min(100%, 470px); align-self: center; }
.dva-macro__frame { position: relative; width: 100%; aspect-ratio: 1; background: #0b0907; box-shadow: 0 0 0 1px rgba(184, 151, 90, .5), 0 34px 54px -34px #000; }
.dva-macro__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); }
.dva-pin {
  --p: 1; position: absolute; z-index: 3; width: 44px; height: 44px; margin: 0; padding: 0; translate: -50% -50%; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font: 500 15px/1 var(--f-ui); font-variant-numeric: tabular-nums;
  background: radial-gradient(circle at 36% 30%, #ffb3c1 0, #d63a58 36%, #8a1830 78%, #5a0c1d); text-shadow: 0 1px 2px rgba(60, 0, 15, .8);
  box-shadow: 0 0 0 2px rgba(10, 6, 4, .9), 0 0 0 3px rgba(220, 192, 138, .8), 0 0 14px 3px rgba(214, 48, 79, .5);
  opacity: calc(.66 + clamp(0, calc(var(--p) * 9 - var(--i)), 1) * .34); transition: box-shadow .3s ease, scale .2s ease, opacity .3s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dva-pin::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: conic-gradient(from 20deg, rgba(255, 255, 255, .22), transparent 25%, rgba(255, 255, 255, .16) 50%, transparent 75%, rgba(255, 255, 255, .22)); pointer-events: none; }
.dva-pin > span { position: relative; z-index: 1; display: block; }
@media (hover: hover) { .dva-pin:hover { scale: 1.08; } }
.dva-pin:active { scale: .94; transition-duration: .08s; }
.dva-pin.is-on { opacity: 1; box-shadow: 0 0 0 2px rgba(10, 6, 4, .9), 0 0 0 4px var(--goldl), 0 0 30px 8px rgba(255, 90, 120, .6); }
@media (prefers-reduced-motion: no-preference) {
  .th-js .dva-pin:not(.is-on):not(:hover) { animation: dva-glow 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
}
@keyframes dva-glow { 50% { box-shadow: 0 0 0 2px rgba(10, 6, 4, .9), 0 0 0 3px rgba(220, 192, 138, .8), 0 0 24px 7px rgba(214, 48, 79, .7); } }

.dva-dec { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dva-dec__li { border-top: 1px solid var(--line); }
.dva-dec__li:last-child { border-bottom: 1px solid var(--line); }
.dva-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: #d4ccbc; text-align: left; cursor: pointer; font: inherit;
  transition: color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .dva-dec__h:hover { color: #fff; } }
.dva-dec__n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(220, 192, 138, .7); color: var(--goldl); font: 500 13px/1 var(--f-ui); transition: background-color .25s ease, color .25s ease; }
.dva-dec__t { font: 400 21px/1.2 var(--f-disp); letter-spacing: -.005em; }
.dva-dec__li.is-on .dva-dec__h { color: #fff; }
.dva-dec__li.is-on .dva-dec__n { background: var(--ruby); color: #fff; box-shadow: inset 0 0 0 1px var(--goldl); }
.dva-dec__body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s; }
.dva-dec__li.is-on .dva-dec__body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s var(--ease), visibility 0s; }
.dva-dec__body > p { min-height: 0; overflow: hidden; margin: 0; padding-left: 44px; font-size: 16px; line-height: 1.55; color: #cfc7b7; text-wrap: pretty; }
.dva-dec__li.is-on .dva-dec__body > p { padding-bottom: 18px; }

/* =====================================================================================================================
   Tokens: the dial book
   ===================================================================================================================== */
.dir-vaudrey-a .dva-book { background: linear-gradient(180deg, #14110d, #0b0a09); --th-f-ui: Jost, system-ui, sans-serif; }
.dva-bk__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dva-bk__cap { margin: 0; font: 500 12px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.dva-bk__sub { font: italic 400 24px/1.2 var(--f-disp); color: var(--ivory); }
.dva-spread { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; border-radius: 6px 14px 14px 6px; background: linear-gradient(135deg, #3d2016, #26110b 55%, #331a10); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 34px 60px -34px #000; }
.dva-spread::before { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 40px; margin-left: -20px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(60, 40, 20, .35) 46%, rgba(30, 18, 8, .55) 50%, rgba(60, 40, 20, .35) 54%, transparent); }
.dva-spread__ribbon { position: absolute; left: 50%; bottom: -26px; z-index: 3; width: 14px; height: 60px; margin-left: 38px; background: linear-gradient(90deg, #7d1428, #a41d38 50%, #6d1020); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.dva-page { position: relative; padding: clamp(20px, 2.6vw, 34px); background: linear-gradient(180deg, #f6f2e8, #ece6d6); color: var(--navy); }
.dva-page--l { border-radius: 3px 0 0 3px; box-shadow: inset -22px 0 26px -22px rgba(60, 40, 10, .45); }
.dva-page--r { border-radius: 0 3px 3px 0; box-shadow: inset 22px 0 26px -22px rgba(60, 40, 10, .45); }
.dva-page .dva-lab { color: var(--goldd); }
.dva-discs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dva-discs__li { min-width: 0; }
.dva-disc {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 44px; margin: 0; padding: 8px 4px 10px; border: 0; border-radius: 4px; cursor: pointer; text-align: center; background: transparent; color: var(--navy);
  font: inherit; transition: background-color .2s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .dva-disc:hover { background: rgba(184, 151, 90, .14); } .dva-disc:hover .dva-disc__dial { scale: 1.05; } }
.dva-disc:active { transform: scale(.97); transition-duration: .08s; }
.dva-disc__dial {
  position: relative; display: grid; place-items: center; width: clamp(84px, 8.6vw, 112px); aspect-ratio: 1; border-radius: 50%; transition: scale .3s var(--ease); color: var(--ic, #141B2B);
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 70% 82%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 45%), var(--sw);
  box-shadow: 0 0 0 3px #d5c7a4, 0 0 0 4px rgba(60, 40, 10, .6), inset 0 0 0 1px rgba(0, 0, 0, .18), 0 12px 16px -8px rgba(30, 20, 0, .55);
}
.dva-disc__dial::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: repeating-conic-gradient(from -1deg, currentColor 0 2deg, transparent 2deg 6deg); opacity: .5; -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%); mask: radial-gradient(closest-side, transparent 86%, #000 88%); }
.dva-disc__h { position: absolute; left: 50%; bottom: 50%; width: 3px; border-radius: 2px; background: currentColor; transform-origin: 50% 100%; }
.dva-disc__h--hr { height: 22%; margin-left: -1.5px; rotate: -60deg; }
.dva-disc__h--mn { height: 33%; width: 2px; margin-left: -1px; rotate: 60deg; }
.dva-disc__pin { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: currentColor; }
.dva-disc__ok { position: absolute; inset: 0; margin: auto; opacity: 0; scale: .5; transition: opacity .2s ease, scale .3s var(--ease); filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6)); }
.dva-disc.is-copied .dva-disc__ok { opacity: 1; scale: 1; }
.dva-disc.is-copied .dva-disc__h, .dva-disc.is-copied .dva-disc__pin { opacity: 0; }
.dva-disc__name { font: 400 clamp(17px, 1.5vw, 20px)/1.15 var(--f-disp); }
.dva-disc__hex { font: 500 12px/1.3 var(--f-ui); letter-spacing: .06em; color: #5d584f; font-variant-numeric: tabular-nums; }
.dva-book .th-toast { position: absolute; z-index: 5; font-family: var(--f-ui); box-shadow: 0 0 0 1px rgba(220, 192, 138, .6), 0 12px 22px -10px rgba(0, 0, 0, .7); }

.dva-bk__row { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: 18px; }
.dva-print { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 26%, #2a3556, #141B2B 62%, #0c111d); box-shadow: 0 0 0 1px rgba(220, 192, 138, .55), 0 0 0 9px #0b0a09, 0 0 0 10px rgba(184, 151, 90, .45), 0 34px 54px -30px #000; }
.dva-print__ring { position: absolute; inset: 5%; border-radius: 50%; background: repeating-conic-gradient(from -.4deg, rgba(220, 192, 138, .7) 0 .8deg, transparent .8deg 6deg); -webkit-mask: radial-gradient(closest-side, transparent 94%, #000 95.5%); mask: radial-gradient(closest-side, transparent 94%, #000 95.5%); }
.dva-print__in { position: relative; width: 66%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--ivory); }
.dva-type { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dva-type__meta { margin: 0; font: 500 9.5px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--goldl); }
.dva-type__sample { margin: 0; line-height: 1.12; }
.dva-type--0 .dva-type__sample { font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -.01em; }
.dva-type--1 .dva-type__sample, .dva-type--2 .dva-type__sample { font-size: 13px; letter-spacing: .03em; }
.dva-type--2 .dva-type__sample { font-variant-numeric: tabular-nums; }

.dva-flank { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dva-drawer { display: flex; flex-direction: column; }
.dva-drawer__h {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0; padding: 0 22px 0 18px; border: 0; border-radius: 3px; cursor: pointer;
  font: 500 12px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); background: rgba(244, 240, 232, .05); box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .18);
  transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; text-align: left;
}
.dva-drawer__h > span { flex: 1; }
@media (hover: hover) { .dva-drawer__h:hover { background: rgba(244, 240, 232, .1); } }
/* the buckle: a gold frame with its tongue */
.dva-buckle { flex: none; position: relative; width: 26px; height: 18px; border: 2px solid var(--goldl); border-radius: 3px; }
.dva-buckle::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--goldl); }
/* the crown: a knurled rose-gold cylinder, pulled out a little while the drawer is open */
.dva-drawer__knob {
  flex: none; width: 34px; height: 22px; border-radius: 4px 8px 8px 4px; transition: translate .3s var(--ease);
  background: repeating-linear-gradient(90deg, rgba(60, 20, 0, .35) 0 1px, transparent 1px 3px), linear-gradient(180deg, #f0cdb0, #b9805c 50%, #e3b794);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.dva-drawer__h[aria-expanded="true"] .dva-drawer__knob { translate: 8px 0; }
.dva-drawer__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--ease), visibility 0s linear .4s; }
.dva-drawer.is-open .dva-drawer__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--ease), visibility 0s; }
.dva-drawer__in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.dva-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(244, 240, 232, .04); box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .1); }
.dva-b { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; font: 500 14px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; border-radius: 0; }
.dva-b--fill { color: var(--ivory); background: var(--navy); box-shadow: 0 0 0 1px rgba(220, 192, 138, .5); }
.dva-b--line { color: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--goldl); }
.dva-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: var(--ivory); background: transparent; box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .4); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dva-chip[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--goldl); }
.dva-chip__p { margin-left: 8px; color: var(--mut); font-weight: 400; font-variant-numeric: tabular-nums; }
.dva-chip__sw { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.dva-price { font: 400 32px/1 var(--f-disp); font-variant-numeric: lining-nums tabular-nums; }
.dva-price__note { font-size: 15px; color: var(--mut); }

/* =====================================================================================================================
   Tests: the first register year
   ===================================================================================================================== */
.dir-vaudrey-a .dva-tests { background: radial-gradient(80% 55% at 82% 0%, #1c1610, var(--bench) 72%), var(--bench); }
.dir-vaudrey-a .dva-quarters { 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-vaudrey-a .th-test.dva-q {
  display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; border-radius: 2px; color: var(--navy); overflow: hidden;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(20, 27, 43, .06) 31px 32px), linear-gradient(180deg, #f6f2e9, #eee8da);
  box-shadow: 0 0 0 1px rgba(184, 151, 90, .5), 0 26px 38px -26px rgba(0, 0, 0, .95);
}
.dir-vaudrey-a .th-test.dva-q:hover { background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(20, 27, 43, .06) 31px 32px), linear-gradient(180deg, #f6f2e9, #eee8da); }
.dva-q__top { display: flex; flex-direction: column; gap: 14px; padding: 20px clamp(20px, 2.2vw, 28px) 4px; }
.dva-q__win { display: flex; align-items: center; gap: 12px; margin: 0; }
.dva-q__label { font: 500 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--goldd); }
.dva-q__n { font: italic 400 40px/1 var(--f-disp); color: var(--navy); font-variant-numeric: lining-nums; }
.dva-q__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; list-style: none; margin: 0; padding: 0; }
.dva-q__months li { display: grid; place-items: center; height: 24px; background: rgba(20, 27, 43, .08); font: 500 10px/1 var(--f-ui); color: rgba(20, 27, 43, .55); }
.dva-q__months li.is-past { background: var(--navy); color: rgba(244, 240, 232, .8); }
.dva-q__months li.is-now { background: var(--gold); color: var(--navy); box-shadow: 0 0 0 1px var(--goldd); }
.dva-q__rows { flex: 1; margin: 0; padding: 6px clamp(20px, 2.2vw, 28px) clamp(18px, 2.2vw, 26px); }
.dva-q__row { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid rgba(20, 27, 43, .14); }
.dva-q__row:first-child { border-top: 0; }
.dir-vaudrey-a .dva-q dt { font: 500 12px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--goldd); }
.dir-vaudrey-a .dva-q__row--why dt { color: #4a5068; }
.dir-vaudrey-a .dva-q dd { margin: 0; text-wrap: pretty; }
.dva-q__row dd { font: 400 clamp(20px, 1.7vw, 23px)/1.28 var(--f-disp); letter-spacing: -.005em; }
.dva-q__row--why dd { font-family: var(--f-ui); font-size: 16px; line-height: 1.5; color: #3d4560; letter-spacing: 0; }
.dva-q__foot { min-height: 116px; display: grid; grid-template-columns: 1fr 1fr; margin: 0; background: var(--navy); color: var(--ivory); }
.dva-q__foot > div { display: flex; flex-direction: column; gap: 6px; padding: 16px clamp(20px, 2.2vw, 28px) 20px; }
.dva-q__foot > div + div { border-left: 1px solid rgba(244, 240, 232, .18); }
.dir-vaudrey-a .dva-q__foot dt { color: var(--goldl); }
.dva-q__foot dd { font-size: 15px; line-height: 1.4; }

/* ---------- reveals ---------- */
.th-js .dir-vaudrey-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-vaudrey-a [data-dir-reveal].dva-in:not(.th-test) { opacity: 1; translate: 0 0; }

/* =====================================================================================================================
   Widths
   ===================================================================================================================== */
@media (max-width: 1099px) {
  .dva-bench { grid-template-columns: minmax(0, 1fr); }
  .dva-bk__row { grid-template-columns: minmax(0, 1fr); }
  .dva-print { width: min(100%, 400px); margin-inline: auto; }
  .dva-plate { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
}
@media (max-width: 959px) {
  .dva-opt__grid { grid-template-columns: minmax(0, 1fr); }
  .dva-stage { width: min(100%, 560px); margin-inline: auto; }
  .dva-wire { display: none; }
  .dir-vaudrey-a .dva-quarters { grid-template-columns: 1fr; }
  .dva-hours { grid-template-columns: minmax(0, 1fr); }
  .dva-hours__side { position: sticky; top: var(--header-h, 68px); z-index: 4; flex-direction: row; align-items: center; gap: 14px; padding: 8px 0; background: linear-gradient(180deg, var(--bench) 70%, transparent); }
  .dva-hours__count { flex: 1; padding: 12px 14px 10px; }
  .dva-hours__win { margin-bottom: 10px; }
  .dva-hours__win b { font-size: 40px; }
  .dva-hours__win span { font-size: 20px; }
  .dva-cam { flex: none; width: 104px; }
  .dva-cam__frame { width: 104px; }
}
@media (max-width: 699px) {
  .dva-spread { grid-template-columns: minmax(0, 1fr); }
  .dva-spread::before { display: none; }
  .dva-spread__ribbon { display: none; }
  .dva-page--l, .dva-page--r { border-radius: 3px; box-shadow: none; }
  .dva-page--l { margin-bottom: 8px; }
  .dva-discs { gap: 4px; }
  .dva-disc__dial { width: 76px; }
  .dva-disc__name { font-size: 16px; }
  .dva-disc__hex { font-size: 11px; }
  .dva-legend { display: none; }
  .dva-entry__btn { grid-template-columns: minmax(72px, 88px) minmax(0, 1fr); padding: 12px 46px 12px 12px; gap: 4px 14px; }
  .dva-ledger__cover { padding: 14px 12px 18px 22px; }
  .dva-ledger__cover::before { left: 14px; }
  .dva-letter__photo { display: none; }
  .dva-ln--c { padding-left: 34px; }
  .dva-plate { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dva-plate__ph { aspect-ratio: 16 / 10; }
  .dva-plate__ph img { object-position: 50% 45%; }
  .dva-plates { gap: 30px; }
  .dva-cam { display: none; }
  .dva-hours__side { padding: 6px 0; }
  .dva-tray__box { gap: 8px; }
  .dva-print__meta, .dva-type__meta { display: none; }
  .dva-type--1 .dva-type__sample, .dva-type--2 .dva-type__sample { font-size: 11px; }
  .dva-print__in { width: 72%; gap: 8px; }
  .dva-type--0 .dva-type__sample { font-size: 22px; }
  .dva-dec__body > p { padding-left: 44px; }
  .dva-q__foot { grid-template-columns: 1fr; }
  .dva-q__foot > div + div { border-left: 0; border-top: 1px solid rgba(244, 240, 232, .18); }
  .dva-macro { width: min(100%, 420px); }
  .dva-lamp__pool { width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; }
}

/* =====================================================================================================================
   Calm: reduced motion, or a screen under 600px tall. Every finished state, static, the lamp off: the letter is written, every object lit, every macro lit, the
   ten parts in a grid, the jewels lit, nothing is pinned, nothing animates.
   ===================================================================================================================== */
@media (prefers-reduced-motion: reduce), (max-height: 599px) {
  .dir-vaudrey-a [data-dir-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .dir-vaudrey-a *, .dir-vaudrey-a *::before, .dir-vaudrey-a *::after { animation: none !important; }
  .dva-lamp { display: none; }
  .dir-vaudrey-a .dva-ln, .dir-vaudrey-a .dva-plate, .dir-vaudrey-a .dva-well, .dir-vaudrey-a .dva-hours, .dir-vaudrey-a .dva-tray, .dir-vaudrey-a .dva-bench { --q: 1; --on: 1; --l: 1; --ik: 1; --p: 1; }
  .dva-entry__btn, .dva-entry__q, .dva-entry__move, .dva-entry__turn, .dva-plate__ph, .dva-plate__ph img, .dva-plate__card, .dva-well__btn, .dva-well__vp, .dva-well__ink, .dva-row, .dva-hl, .dva-pin,
  .dva-dec__body, .dva-drawer__panel, .dva-drawer__knob, .dva-disc, .dva-disc__dial, .dva-disc__ok, .dva-cam__vid { transition: none !important; }
  .dva-hours__balance { rotate: none; }
  .dva-hours__side { position: static; }
  .dva-hours { grid-template-columns: minmax(0, 1fr); }
  .dva-hours__side { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; background: none; padding: 0; }
  .dva-cam { display: block; width: 150px; }
  .dva-cam__frame { width: 150px; }
  .dva-plates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .dva-plate { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; }
  .dva-plate__name { font-size: 26px; margin-bottom: 10px; }
  .dva-plate__doubt { font-size: 17px; }
  .dva-plate__move { font-size: 14px; }
  .dva-plate__ph { aspect-ratio: 1; }
}
@media ((prefers-reduced-motion: reduce), (max-height: 599px)) and (max-width: 1099px) {
  .dva-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media ((prefers-reduced-motion: reduce), (max-height: 599px)) and (max-width: 699px) {
  .dva-plates { grid-template-columns: minmax(0, 1fr); }
  .dva-hours__side { grid-template-columns: minmax(0, 1fr); }
  .dva-cam { display: none; }
}

/* the signature (shared sig-turned.njk) sits inside the direction's root: its header wears the direction's type */
.dir-vaudrey-a .th-turnedwrap .th-hd__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.dir-vaudrey-a .th-turnedwrap .th-hd__eyebrow { color: var(--goldl); font-family: var(--f-ui); font-size: 12px; letter-spacing: .18em; }
.dir-vaudrey-a .th-turnedwrap .th-hd__aside { font-size: 17px; line-height: 1.55; max-width: 46ch; color: var(--mut); }

/* The hero's cut-outs on a phone: the stage is tight, and the shared positions put the watch head across the film's left edge and the bracelet across the
   caption row. Here they rest in the free strip under the browser frame, clear of the film, the caption row and the pause button. */
@media (max-width: 699px) {
  .th-hero__scene > .th-float:nth-child(1) { left: 6%; top: 82%; }
  .th-hero__scene > .th-float:nth-child(3) { left: 32%; top: 85%; }
  .th-hero__scene > .th-float:nth-child(2) { left: 50%; top: 84%; }
}