/* sondhi-a "The dry-down": the six sections of the Sondhi board, direction A, as twelve hours of wear. A sticky mono time stamp runs 0:00 to 12:00 with the
   scroll, and the palette moves from pale light to rose to amber-wood through CSS variables: each section has its own pair of palettes (data-t is where it
   sits on the clock), --m is how far through that pair it has gone (the script writes it from the scroll; the value written here is the section's static
   one, which is all that reduced motion shows). Scoped under .dir-sondhi-a, class prefix dso-. Markup: src/_includes/e2/theme/dir/sondhi-a/*.njk,
   behaviour: e2-dir-sondhi-a.js. Scroll-driven motion is transform / opacity / clip-path / custom properties only; 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. */

@property --lx { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ly { syntax: '<length>'; inherits: true; initial-value: 0px; }

.dir-sondhi-a {
  --umber: #2B1F18; --amber: #C77A2E; --gold: #E0B872; --cream: #F1E7D8; --smoke: #8A7D72; --rose: #B9655E; --tile: #3A2B22;
  --paper: #FBF5EA; --paper-2: #F3E9D8;
  --f-disp: 'Libre Caslon Display', 'Iowan Old Style', Georgia, serif; --f-ui: Figtree, system-ui, -apple-system, sans-serif; --f-hand: Caveat, 'Segoe Print', 'Bradley Hand', cursive;
  --dso-pad: clamp(20px, 3.4vw, 48px); --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: var(--f-ui);
}
.dir-sondhi-a img { display: block; }
/* On the real /sondhi page the direction is two <div class="dir dir-sondhi-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-sondhi-a { display: contents; }

/* ---------- the clock: a fixed mono time stamp, on while the direction is in view ----------
   A slim vertical pill (about 40px wide) in the right-hand margin, under the header: the time, a rule that fills downwards, the end of the day. The cards
   keep their words well inside their own edges, so it stands in the margin and never on the text (the wide pill it replaces sat on the intro lines). */
.dir-sondhi-a .dso-clock {
  position: fixed; z-index: 30; top: calc(var(--header-h, 68px) + 14px); right: 6px; width: 40px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 9px; border-radius: 99px; pointer-events: none;
  color: var(--cream); background: color-mix(in srgb, var(--umber) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(241, 231, 216, .22), 0 14px 26px -14px rgba(0, 0, 0, .7); font: 500 11px/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  opacity: 0; translate: 0 -8px; transition: opacity .3s ease, translate .4s var(--ease);
}
.dir-sondhi-a .dso-clock.is-on { opacity: 1; translate: 0 0; }
.dso-clock__t { text-align: center; color: var(--gold); }
.dso-clock__rule { position: relative; width: 2px; height: 48px; border-radius: 2px; background: rgba(241, 231, 216, .24); overflow: hidden; }
.dso-clock__rule i { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(var(--h, 0)); background: var(--gold); }
.dso-clock__e { font-size: 9px; color: rgba(241, 231, 216, .62); }

/* ---------- the shared frame of a section: a card on the clock, its palette from --bg-a to --bg-b ---------- */
.dir-sondhi-a .dso-sec {
  --m: 0; --bg: color-mix(in srgb, var(--bg-a) calc((1 - var(--m)) * 100%), var(--bg-b));
  position: relative; gap: 0; border-radius: 28px; overflow: clip; color: var(--fg); background: var(--bg); font-family: var(--f-ui);
}
.dir-sondhi-a .dso-sec[data-t="0"] { --bg-a: #F7EFE3; --bg-b: #EDD9CE; --fg: #2B1F18; --mut: #5A463A; --acc: #8A4420; --line: rgba(43, 31, 24, .2); --m: 0; }
.dir-sondhi-a .dso-sec[data-t="2"] { --bg-a: #EDD9CE; --bg-b: #D8A99E; --fg: #2B1F18; --mut: #4A3028; --acc: #6E2622; --line: rgba(43, 31, 24, .22); --m: 1; }
.dir-sondhi-a .dso-sec[data-t="5"] { --bg-a: #6B3E35; --bg-b: #3A2B22; --fg: #F1E7D8; --mut: #E3D3C1; --acc: #E8C27F; --line: rgba(241, 231, 216, .22); --m: .5; }
.dir-sondhi-a .dso-sec[data-t="8"] { --bg-a: #3A2B22; --bg-b: #2E2119; --fg: #F1E7D8; --mut: #D3C4B2; --acc: #E0B872; --line: rgba(241, 231, 216, .2); --m: .5; }
.dir-sondhi-a .dso-sec[data-t="10"] { --bg-a: #2E2119; --bg-b: #281C15; --fg: #F1E7D8; --mut: #D3C4B2; --acc: #E0B872; --line: rgba(241, 231, 216, .2); --m: .5; }
.dir-sondhi-a .dso-sec[data-t="12"] { --bg-a: #261A13; --bg-b: #1C130E; --fg: #F1E7D8; --mut: #D3C4B2; --acc: #E0B872; --line: rgba(241, 231, 216, .2); --m: .5; }
.dir-sondhi-a .dso-sec :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.dir-sondhi-a .dso-sec .th-hd { gap: 18px 56px; align-items: flex-end; }
.dir-sondhi-a .dso-sec .th-hd__eyebrow { color: var(--mut); font-size: 12px; letter-spacing: .1em; }
.dir-sondhi-a .dso-sec .th-hd__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(44px, 6.2vw, 88px); line-height: .98; letter-spacing: -.02em; color: var(--fg); text-wrap: balance; }
.dir-sondhi-a .dso-sec .th-hd__aside { max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--mut); }
.dir-sondhi-a .dso-sec .dso-stamp { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dir-sondhi-a .dso-stamp b { font-weight: 500; font-size: 22px; letter-spacing: .02em; color: var(--acc); font-variant-numeric: tabular-nums; }
.dir-sondhi-a .dso-brief, .dir-sondhi-a .dso-define, .dir-sondhi-a .dso-design, .dir-sondhi-a .dso-opt, .dir-sondhi-a .dso-tests { padding: var(--dso-pad); display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 48px); }

/* =====================================================================================================================
   01 Discover · 0:00: a dawn still of the deg, the formula card on the bench, three vials
   ===================================================================================================================== */
.dso-bench { position: relative; isolation: isolate; border-radius: 20px; overflow: hidden; padding: clamp(28px, 4.4vw, 64px) clamp(16px, 4vw, 64px); background: #1b120d; display: flex; justify-content: flex-start; }
.dso-bench__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.dso-bench::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(27, 18, 13, .78), rgba(27, 18, 13, .1) 70%), linear-gradient(0deg, rgba(27, 18, 13, .5), transparent 40%); }

.dso-fc {
  --p: 1; position: relative; width: min(100%, 680px); padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px) clamp(24px, 3vw, 38px) clamp(46px, 4.4vw, 64px); rotate: -.7deg; color: #2B1F18; font-family: var(--f-ui);
  background: linear-gradient(90deg, transparent 0, transparent clamp(38px, 3.6vw, 52px), rgba(185, 101, 94, .5) clamp(38px, 3.6vw, 52px), rgba(185, 101, 94, .5) calc(clamp(38px, 3.6vw, 52px) + 1px), transparent calc(clamp(38px, 3.6vw, 52px) + 1px)),
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(80, 110, 150, .22) 33px 34px), var(--paper);
  box-shadow: 0 30px 48px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(43, 31, 24, .12);
}
.th-js .dso-fc { --p: 0; }
.dso-fc__tape { position: absolute; top: -12px; width: 82px; height: 26px; background: rgba(224, 184, 114, .62); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset; }
.dso-fc__tape--l { left: 22px; rotate: -5deg; } .dso-fc__tape--r { right: 26px; rotate: 4deg; }
.dso-fc__top { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid #2B1F18; font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.dso-fc__no { color: #8A4420; font-variant-numeric: tabular-nums; }
.dso-fc__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 18px; padding: 14px 0; border-top: 1px solid rgba(43, 31, 24, .16); }
.dso-fc__row:first-of-type { border-top: 0; padding-top: 0; }
.dso-fc__k { margin: 0; padding-top: 6px; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #5A463A; }
.dso-fc__goal { margin: 0; font-family: var(--f-disp); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.22; letter-spacing: -.01em; text-wrap: pretty; }
.dso-fc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dso-fc__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.5; color: #3a2f27; }
.dso-fc__n { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; font: 500 12px/1 var(--mono); color: var(--paper); background: #8A4420; }
/* the card is typed line by line as it comes into view: each row (the goal, then each constraint) has its own --l and wipes in over the page's --p */
.th-js .dso-fc__goal, .th-js .dso-fc__list li { --r: clamp(0, calc(var(--p) * 5 - var(--l, 0) * .9), 1); clip-path: inset(0 calc((1 - var(--r)) * 100%) 0 0); opacity: calc(.2 + var(--r) * .8); }

.dso-pvs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(14px, 2.4vw, 36px); padding-bottom: 6px; }
.dso-pvs__lab { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dso-pv { --lvl: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.th-js .dso-pvs { --p: 0; }
.th-js .dso-pv { --lvl: clamp(.06, calc(var(--p) * 3.6 - var(--i) * .7), 1); }
.dso-pv__btn { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 6px; align-items: start; width: 100%; min-height: 300px; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-bottom: 10px solid #4A3326; border-radius: 4px; box-shadow: 0 10px 0 -4px rgba(43, 31, 24, .25); }
/* the vial: a cap, a neck, a glass with the oil in it (the persona's own colour, cloudy for the doubt, clear for the move) */
.dso-pv__glass { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 10px; width: 96px; }
.dso-pv__cap { display: block; width: 38px; height: 34px; border-radius: 5px 5px 2px 2px; background: linear-gradient(90deg, #2a1d15, #5a3f2e 40%, #2a1d15); box-shadow: inset 0 -5px 0 #C77A2E, 0 1px 0 rgba(255, 255, 255, .15) inset; }
.dso-pv__neck { display: block; width: 26px; height: 18px; background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 1.5px rgba(43, 31, 24, .5); }
.dso-pv__body { position: relative; display: block; width: 74px; height: 190px; border-radius: 10px 10px 20px 20px; overflow: hidden; background: rgba(255, 255, 255, .34); box-shadow: inset 0 0 0 1.5px rgba(43, 31, 24, .55); }
.dso-pv__oil { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lvl) * 76%); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 70%, #2B1F18)); transition: height .2s linear, opacity .35s ease, filter .35s ease; opacity: .62; filter: saturate(.6); }
.dso-pv__btn[aria-pressed="true"] .dso-pv__oil { opacity: 1; filter: none; }
.dso-pv__shine { position: absolute; left: 10px; top: 10px; bottom: 20px; width: 9px; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .08)); }
.dso-pv__tag { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 34px 0 0; padding: 20px 16px 18px 22px; border-radius: 4px 14px 14px 4px; rotate: 2.2deg; color: #2B1F18; background: var(--paper); box-shadow: 0 16px 24px -14px rgba(43, 31, 24, .6), 0 0 0 1px rgba(43, 31, 24, .12); transform-origin: 0 20px; transition: rotate .45s var(--ease); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.dso-pv__tag::before { content: ""; position: absolute; left: 8px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg, #ccc); box-shadow: inset 0 0 0 1.5px rgba(43, 31, 24, .45); }
.dso-pv__string { position: absolute; left: -48px; top: 17px; width: 62px; height: 2px; background: #8A4420; rotate: -4deg; transform-origin: 100% 50%; }
.dso-pv__btn[aria-pressed="true"] .dso-pv__tag { rotate: -1.4deg; }
.dso-pv__name { font: 500 29px/1.05 var(--f-hand); letter-spacing: 0; padding-left: 6px; }
.dso-pv__say { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.dso-pv__say--doubt { font: 500 24px/1.18 var(--f-hand); }
.dso-pv__say--move { font-size: 15px; font-weight: 500; display: none; }
.dso-pv__btn[aria-pressed="true"] .dso-pv__say--doubt { display: none; }
.dso-pv__btn[aria-pressed="true"] .dso-pv__say--move { display: flex; }
.dso-pv__k { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8A4420; }
.dso-pv__say--doubt .dso-pv__k { font-family: var(--mono); }
.dso-pv__btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 6px; }
.dso-pv__need { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--mut); }
.dso-pv__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(43, 31, 24, .4); }

/* =====================================================================================================================
   02 Define · 0:15 to 2:00: the blotters. Five strips in a rack, lowered one after another into their dishes as the pinned run is scrolled.
   Each strip has --d (how far down it is), --w (how wet), --k (how inked its name is), --a (how much of the answer is in), written by the script;
   the finished state (here, and in every still mode) is lifted, wet, inked, answered.
   ===================================================================================================================== */
.dso-drawer { position: relative; margin: 0; height: clamp(150px, 16vw, 230px); border-radius: 18px; overflow: hidden; background: #3A2B22; }
.dso-drawer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.dso-drawer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 31, 24, .2), rgba(43, 31, 24, .55)); }

.dso-bk { --p: 1; --pm: 1; --sh: clamp(560px, calc(100vh - 150px), 700px); }
.dso-bk__stage { position: relative; }
.dso-bs { list-style: none; margin: 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(10px, 1.6vw, 24px); position: relative; }
/* the rack: a bar of wood across the top, the strips tucked behind its lip */
.dso-bs::before { content: ""; position: absolute; z-index: 3; left: -10px; right: -10px; top: 0; height: 30px; border-radius: 6px; background: linear-gradient(180deg, #8B5A3C, #5F3B27 55%, #4A2D1E); box-shadow: 0 8px 14px -6px rgba(43, 31, 24, .6), inset 0 1px 0 rgba(255, 255, 255, .22); }
.dso-bl {
  --d: 0; --w: 1; --k: 1; --a: 1; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding-top: 6px; gap: 10px;
}
.dso-bl__time { position: absolute; z-index: 4; top: -26px; margin: 0; padding: 0 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; color: #F1E7D8; font-variant-numeric: tabular-nums; }
.dso-bl { --dh: 46px; --dw: clamp(120px, 12.4vw, 156px); --sw: clamp(104px, 11vw, 140px); }
.dso-bl__rig { position: relative; width: 100%; height: clamp(250px, 34vh, 330px); display: flex; justify-content: center; }
/* the strip hangs in a sleeve that ends at the middle of the dish: what goes lower than that is in the oil */
.dso-bl__sleeve { position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: calc(var(--dh) / 2); overflow: hidden; display: flex; justify-content: center; }
.dso-bl__strip {
  position: absolute; top: 0; width: var(--sw); height: calc(100% - 74px); display: flex; flex-direction: column; align-items: center; padding-top: 38px;
  translate: 0 calc(var(--d) * 94px); color: #2B1F18; background: linear-gradient(90deg, rgba(43, 31, 24, .07), transparent 14% 86%, rgba(43, 31, 24, .09)), repeating-linear-gradient(180deg, transparent 0 7px, rgba(43, 31, 24, .02) 7px 8px), var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 50% 100%, 0 calc(100% - 26px)); will-change: translate;
}
.dso-bl__strip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: rgba(43, 31, 24, .1); }
.dso-bl__name { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 400 clamp(22px, 2.1vw, 28px)/1 var(--f-disp); letter-spacing: -.005em; text-align: center;
  color: color-mix(in srgb, #2B1F18 calc(var(--k) * 100%), transparent); -webkit-text-stroke: 1px color-mix(in srgb, #2B1F18 70%, transparent); paint-order: stroke fill; }
.dso-bl__no { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: #8A4420; -webkit-text-stroke: 0; }
/* the oil climbing the paper from the cut end */
.dso-bl__tip { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--w) * 56%); background: linear-gradient(0deg, #B9651F 0, #C77A2E 30%, rgba(224, 184, 114, .75) 70%, rgba(224, 184, 114, 0)); -webkit-mask-image: linear-gradient(0deg, #000 70%, transparent); mask-image: linear-gradient(0deg, #000 70%, transparent); mix-blend-mode: multiply; }
/* the dish: a pool of oil in a copper ring, seen from a little above; the front half is drawn over the strip so its tip goes in */
.dso-bl__dish, .dso-bl__front { position: absolute; bottom: 0; left: 50%; width: var(--dw); margin-left: calc(var(--dw) / -2); height: var(--dh); border-radius: 50%;
  background: linear-gradient(180deg, #E9B458 0, #D18A33 34%, #B36A22 62%, #7A4519 100%); box-shadow: 0 0 0 4px #B07343, 0 0 0 5px #5a3520; }
.dso-bl__dish { z-index: 1; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .45)); }
.dso-bl__dish::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(30% + var(--d) * 26%); height: calc(26% + var(--d) * 14%); translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(255, 233, 190, calc(.5 * var(--d))); }
.dso-bl__front { z-index: 3; height: calc(var(--dh) / 2); border-radius: 0 0 50% 50% / 0 0 100% 100%; background-size: 100% var(--dh); background-position: 0 100%; box-shadow: 0 4px 0 1px #B07343, 0 5px 0 2px #5a3520; }
.dso-bl__say { width: 100%; display: flex; flex-direction: column; gap: 14px; padding-top: 8px; font-size: 15px; line-height: 1.45; }
.dso-bl__k { display: block; margin-bottom: 4px; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.dso-bl__doubt { margin: 0; font-family: var(--f-disp); font-size: 19px; line-height: 1.28; color: var(--fg); }
.dso-bl__move { margin: 0; color: var(--fg); opacity: calc(.25 + var(--a) * .75); translate: 0 calc((1 - var(--a)) * 10px); }
.dso-bl__move .dso-bl__k { color: var(--mut); }
.dso-bl__doubt .dso-bl__k { color: var(--mut); }

/* pinned: one strip goes down after another over about 1.2 screens */
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) and (min-height: 600px) {
  .th-js .dso-bk { --p: 0; --pm: 0; height: calc(var(--sh) + 120vh); }
  .th-js .dso-bk__stage { position: sticky; top: 84px; min-height: var(--sh); display: flex; align-items: center; }
  .th-js .dso-bk__stage > .dso-bs { width: 100%; }
  .th-js .dso-bl { --d: 0; --w: 0; --k: 0; --a: 0; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) and (min-height: 600px) and (max-height: 860px) {
  .th-js .dso-bl__rig { height: 232px; }
  .th-js .dso-bl__say { font-size: 14px; gap: 10px; }
  .th-js .dso-bl__doubt { font-size: 17px; line-height: 1.22; }
}

/* narrower: a column of strips, each lying beside its words */
@media (max-width: 1099px) {
  .dso-bs { grid-template-columns: minmax(0, 1fr); gap: 34px 0; padding-top: 38px; }
  .dso-bs::before { height: 24px; }
  .dso-bl { display: grid; grid-template-columns: clamp(112px, 24vw, 168px) minmax(0, 1fr); column-gap: clamp(16px, 4vw, 40px); align-items: start; padding-top: 0; }
  .dso-bl__time { grid-column: 1 / -1; position: static; padding: 0; margin-bottom: -4px; color: var(--acc); }
  .dso-bl__rig { grid-row: 2 / span 2; height: 250px; }
  .dso-bl__say { grid-column: 2; padding-top: 0; }
}
@media (max-width: 699px) {
  .dso-bs { padding-top: 0; }
  .dso-bs::before { display: none; }
  .dso-bl { --dw: 108px; --dh: 38px; --sw: 92px; }
  .dso-bl__rig { height: 224px; }
  .dso-bl__strip { padding-top: 22px; }
  .dso-bl__name { font-size: 22px; }
  .dso-bl__doubt { font-size: 18px; }
}

/* =====================================================================================================================
   03 Design · the organ: ten bottles on two shelves, a light passing along them. Each bottle's --u (how full, how inked) comes from the furthest the
   run has reached (--pm on the scrub): the finished state is every bottle full and inked; the pinned run is gated on html.th-js.
   ===================================================================================================================== */
.dso-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dso-og { --p: 1; --pm: 1; --sh: clamp(520px, calc(100vh - 170px), 640px); }
.dso-og__stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(18px, 2.4vw, 36px); align-items: stretch; padding: clamp(18px, 2.6vw, 36px); border-radius: 22px; overflow: clip; background: #24180f; box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .85), 0 0 0 1px rgba(241, 231, 216, .12); }
.dso-og__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: .5; }
.dso-og__stage::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(36, 24, 15, .78), rgba(36, 24, 15, .5) 40%, rgba(36, 24, 15, .88)); }
/* the light: a warm pool that follows the bottle that is being read */
.dso-og__light { position: absolute; z-index: -1; inset: 0; pointer-events: none; --lx: 20%; --ly: 30%; background: radial-gradient(circle 360px at var(--lx) var(--ly), rgba(255, 214, 140, .3), rgba(255, 214, 140, .08) 55%, transparent 74%); transition: --lx .6s var(--ease), --ly .6s var(--ease); }
.dso-og__organ { display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 3vw, 40px); min-width: 0; }
.dso-tier { list-style: none; margin: 0; padding: 0 0 16px; position: relative; display: flex; justify-content: space-around; align-items: flex-end; gap: 6px; }
.dso-tier--1 { width: 92%; margin-inline: auto; }
.dso-tier::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 16px; border-radius: 3px; background: linear-gradient(180deg, #9A6544, #6a4129 45%, #4a2d1e); box-shadow: 0 14px 20px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .3); }
.dso-bt { --u: clamp(0, calc(var(--pm) * (var(--n) + 1) - var(--i) - .5), 1); --ue: calc(var(--u) * var(--u) * (3 - 2 * var(--u))); position: relative; flex: 1 1 0; min-width: 0; max-width: 196px; display: flex; justify-content: center; margin-bottom: 8px; z-index: 1; }
.dso-bt__btn { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 44px; transition: filter .3s ease, translate .3s var(--ease); }
.dso-bt__svg { display: block; width: 100%; max-width: 150px; height: auto; overflow: visible; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .5)); }
.dso-tier--1 .dso-bt__svg { max-width: 128px; }
.dso-bt__glass { fill: rgba(241, 231, 216, .1); stroke: rgba(241, 231, 216, .6); stroke-width: 1.6; }
.dso-bt__cap { fill: #2f2017; stroke: rgba(224, 184, 114, .7); stroke-width: 1.2; }
.dso-bt__oil { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(calc((1 - var(--ue) * .68) * 100%)); filter: hue-rotate(var(--hue, 0deg)); }
.dso-bt__label { position: absolute; left: 50%; bottom: 8%; width: calc(100% + 2px); max-width: 172px; translate: -50% 0; display: flex; flex-direction: column; gap: 3px; padding: 7px 7px 6px; color: #2B1F18; text-align: left; background: var(--paper); border-radius: 3px; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .65), 0 0 0 1px rgba(43, 31, 24, .18); }
.dso-bt__no { font: 500 10px/1 var(--mono); letter-spacing: .1em; color: #8A4420; }
.dso-bt__nm { font: 400 15px/1.08 var(--f-disp); letter-spacing: -.005em; text-wrap: balance; }
.dso-lab.th-browser { display: block; border-radius: 2px; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(43, 31, 24, .16); }
.dso-lab .th-viewport { display: block; background: var(--paper-2); }
.dso-lab .th-artboard { display: block; }
.dso-lab img, .dso-pl img { position: absolute; left: 0; top: 0; width: 1440px; max-width: none; height: auto; }
.dso-lab__ink, .dso-pl__ink { clip-path: inset(0 calc((1 - var(--ue, 1)) * 100%) 0 0); }
.dso-bt.is-cur .dso-bt__svg { filter: drop-shadow(0 0 22px rgba(224, 184, 114, .5)) drop-shadow(0 12px 10px rgba(0, 0, 0, .5)); }
.dso-bt.is-cur .dso-bt__glass { stroke: #E0B872; stroke-width: 2; }
@media (hover: hover) { .dso-bt__btn:hover { translate: 0 -4px; } }
.dso-bt__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 6px; }

/* the plate: the bottle in the light, read out, with its section laid larger beside the wire */
.dso-og__plate { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 20px; border-radius: 6px 6px 16px 6px; color: #2B1F18; background: var(--paper); align-self: center; box-shadow: 0 30px 44px -26px rgba(0, 0, 0, .9), 0 0 0 1px rgba(43, 31, 24, .14); }
.dso-og__count { margin: 0; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8A4420; font-variant-numeric: tabular-nums; }
.dso-pl.th-browser { display: block; border-radius: 3px; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(43, 31, 24, .18); }
.dso-pl .th-viewport { display: none; background: var(--paper-2); }
.dso-pl .th-viewport.is-cur { display: block; }
.dso-og__cur { margin: 0; font: 400 clamp(28px, 2.6vw, 36px)/1.05 var(--f-disp); letter-spacing: -.01em; }
.dso-og__note { margin: 0; font-size: 15.5px; line-height: 1.5; color: #3a2f27; min-height: 4.6em; text-wrap: pretty; }

/* pinned: the light moves with the scroll over about 1.2 screens */
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) and (min-height: 600px) {
  .th-js .dso-og { --p: 0; --pm: 0; height: calc(var(--sh) + 120vh); }
  .th-js .dso-og__stage { position: sticky; top: 84px; height: var(--sh); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) and (min-height: 600px) and (max-height: 860px) {
  .th-js .dso-og__stage { padding-block: 16px; }
  .th-js .dso-og__organ { gap: 18px; }
  .th-js .dso-og__note { font-size: 14.5px; min-height: 4em; }
}
@media (max-width: 1099px) {
  .dso-og__stage { grid-template-columns: minmax(0, 1fr); }
  .dso-og__plate { display: none; }
}

/* phone: ten rows, a bottle and its label side by side, inked as each comes into view */
@media (max-width: 699px) {
  .dso-og__stage { padding: 14px; gap: 0; }
  .dso-og__organ { gap: 0; }
  .dso-tier { flex-direction: column; align-items: stretch; width: 100% !important; padding: 0; gap: 0; }
  .dso-tier::after { display: none; }
  .dso-bt { max-width: none; margin: 0; border-top: 1px solid rgba(241, 231, 216, .16); --u: 1; --ue: 1; }
  .dso-bt__btn { flex-direction: row; align-items: center; gap: 14px; padding: 12px 0; min-height: 96px; text-align: left; }
  .dso-bt__svg { width: 56px; flex: none; }
  .dso-bt__label { position: static; translate: none; flex: 1; width: auto; min-width: 0; }
  .dso-bt__nm { font-size: 17px; }
  .th-js .dso-bt { --u: 0; --ue: 0; }
  .th-js .dso-bt.is-in { --u: 1; --ue: 1; }
  .th-js .dso-bt__oil { transition: transform .7s var(--ease); }
  .th-js .dso-lab__ink { transition: clip-path .7s var(--ease); }
}

/* =====================================================================================================================
   04 Optimise · 8:00, the base: the buy box with a blotter down its edge, six drops of oil for pins, the formula sheet beside it
   ===================================================================================================================== */
.dso-opt__grid { display: grid; grid-template-columns: minmax(0, 644px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.dso-bx { --p: 1; display: flex; flex-direction: column; gap: 12px; }
.th-js .dso-bx { --p: 0; }
.dso-bx__lab { display: flex; justify-content: space-between; margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dso-bx__lab span:first-child { color: var(--acc); font-variant-numeric: tabular-nums; }
.dso-bx__br.th-browser { border-radius: 18px; background: #2B1F18; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8), 0 0 0 1px rgba(241, 231, 216, .16); }
.dso-bx__vp { background: #2B1F18; touch-action: pan-y; }
.dso-bx .th-artboard { height: calc(var(--ah, 900) * 1px); }
.dso-bx__row { position: absolute; width: 524px; max-width: none; height: auto; }
.dso-blot { position: absolute; z-index: 2; top: 0; bottom: 0; right: 0; background: linear-gradient(90deg, rgba(43, 31, 24, .28), transparent 9%), repeating-linear-gradient(180deg, transparent 0 11px, rgba(43, 31, 24, .03) 11px 12px), var(--paper); box-shadow: -10px 0 18px -10px rgba(0, 0, 0, .8); }
.dso-blot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: radial-gradient(circle at 0 7px, #2B1F18 0 4px, transparent 5px) 0 0 / 7px 14px repeat-y; }
.dso-hl { position: absolute; z-index: 3; border-radius: 4px; box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(224, 184, 114, .22); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.dso-hl.is-on { opacity: 1; }
.dso-drop { position: absolute; z-index: 5; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dso-drop__stain { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 52% 48% 56% 44% / 46% 54% 46% 54%; rotate: calc(var(--j) * 61deg); pointer-events: none;
  background: radial-gradient(circle at 44% 38%, #F6D58C 0 9%, #E3A241 28%, #C97A25 55%, #A4601C 66%, rgba(138, 74, 20, .0) 72%), radial-gradient(circle, rgba(199, 122, 46, .35), transparent 70%);
  scale: calc(1 + (1 - var(--p)) * .16); filter: saturate(calc(1.3 - var(--p) * .5)) brightness(calc(1.1 - var(--p) * .14)); transition: scale .25s var(--ease), box-shadow .2s ease; }
.dso-drop__stain::after { content: ""; position: absolute; left: 24%; top: 18%; width: 22%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, .85); filter: blur(1px); opacity: calc(.85 - var(--p) * .85); }
.dso-drop__n { position: relative; font: 400 22px/1 var(--f-disp); color: #2B1F18; }
.dso-drop:hover .dso-drop__stain { scale: 1.08; }
.dso-drop.is-on .dso-drop__stain { box-shadow: 0 0 0 2px var(--umber), 0 0 0 4px var(--gold); }
.dso-drop:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.dso-bx__hint { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); text-align: center; }

.dso-fs { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); min-width: 0; }
.dso-mac { position: relative; margin: 0; width: min(100%, 300px); padding: 10px 10px 38px; rotate: -1.6deg; background: var(--paper); box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(43, 31, 24, .12); }
.dso-mac__vid { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #2B1F18; }
.dso-pause { position: absolute; right: 18px; bottom: 48px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(241, 231, 216, .6); background: rgba(43, 31, 24, .66); color: var(--cream); cursor: pointer; }
.dso-pause[hidden] { display: none; }
.dso-pause__play { display: none; }
.dso-pause[aria-pressed="true"] .dso-pause__pause { display: none; }
.dso-pause[aria-pressed="true"] .dso-pause__play { display: block; }
.dso-dec { list-style: none; margin: 0; padding: 8px clamp(18px, 2.4vw, 30px) 10px clamp(40px, 4vw, 54px); display: flex; flex-direction: column; color: #2B1F18; border-radius: 4px 4px 16px 4px;
  background: linear-gradient(90deg, transparent 0, transparent clamp(32px, 3.2vw, 44px), rgba(185, 101, 94, .5) clamp(32px, 3.2vw, 44px), rgba(185, 101, 94, .5) calc(clamp(32px, 3.2vw, 44px) + 1px), transparent calc(clamp(32px, 3.2vw, 44px) + 1px)), var(--paper); box-shadow: 0 30px 44px -26px rgba(0, 0, 0, .9), 0 0 0 1px rgba(43, 31, 24, .14); }
.dso-dec__li { border-top: 1px solid rgba(43, 31, 24, .16); }
.dso-dec__li:first-child { border-top: 0; }
.dso-dec__h { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.dso-dec__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 400 18px/1 var(--f-disp); box-shadow: inset 0 0 0 1.5px #2B1F18; transition: background-color .2s ease, color .2s ease; }
.dso-dec__t { font-family: var(--f-disp); font-weight: 400; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.15; letter-spacing: -.01em; }
.dso-dec__li.is-on .dso-dec__n { color: var(--paper); background: #8A4420; box-shadow: none; }
.dso-dec__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.dso-dec__body > p { min-height: 0; overflow: hidden; margin: 0; padding: 0 4px 0 50px; font-size: 16.5px; line-height: 1.55; color: #3a2f27; text-wrap: pretty; }
.dso-dec__li.is-on .dso-dec__body { grid-template-rows: 1fr; }
.dso-dec__li.is-on .dso-dec__body > p { padding-bottom: 20px; }
.dir-sondhi-a .dso-opt .dso-dec :focus-visible { outline-color: #8A4420; }

@media (max-width: 959px) {
  .dso-opt__grid { grid-template-columns: minmax(0, 1fr); }
  .dso-bx { width: min(100%, 644px); margin-inline: auto; }
  .dso-mac { rotate: -1deg; }
}

/* =====================================================================================================================
   Tokens · 10:00: the blotter rack
   ===================================================================================================================== */
.dir-sondhi-a .dso-rack { --th-ink: var(--cream); --th-line: rgba(241, 231, 216, .2); --th-spring: cubic-bezier(.3, 1.4, .5, 1); padding: var(--dso-pad); display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.dso-rack__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dso-rack__cap { margin: 0; font-family: var(--f-disp); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.015em; }
.dso-rack__sub, .dso-rack__lab { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dso-rack__sub b { margin-right: 8px; font-weight: 500; color: var(--acc); font-variant-numeric: tabular-nums; }
.dso-rack__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.dso-rack__colours { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dso-rail { position: relative; z-index: 2; height: 24px; margin-bottom: -26px; border-radius: 6px; background: linear-gradient(180deg, #8B5A3C, #5F3B27 55%, #4A2D1E); box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .22); }
.dso-sw.th-sw { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 10px; padding-top: 4px; }
.dso-sw .th-swatch { position: relative; align-items: center; text-align: center; min-height: 236px; padding: 38px 6px 0; gap: 3px; color: #2B1F18; isolation: isolate; }
.dso-sw .th-swatch::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(43, 31, 24, .08), transparent 14% 86%, rgba(43, 31, 24, .1)), var(--paper); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 50% 100%, 0 calc(100% - 24px)); }
.dso-sw .th-swatch__chip { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 50%; aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none; display: grid; place-items: center; padding-top: 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 50% 100%, 0 calc(100% - 24px)); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); mask-image: linear-gradient(180deg, transparent 0, #000 40%); transition: transform .25s var(--th-spring), height .3s var(--ease); }
.dso-sw .th-swatch__chip svg { box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .55); }
.dso-sw .th-swatch__name { font: 400 20px/1.1 var(--f-disp); color: #2B1F18; }
.dso-sw .th-swatch__hex { font: 500 11.5px/1.3 var(--mono); letter-spacing: .02em; color: #4a3b30; }
@media (hover: hover) { .dso-sw .th-swatch:hover .th-swatch__chip { transform: none; height: 58%; } .dso-sw .th-swatch:hover { translate: 0 -4px; } }
.dso-sw .th-swatch { transition: translate .25s var(--th-spring); filter: drop-shadow(0 0 .7px rgba(241, 231, 216, .55)); }

.dso-labels { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dso-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dso-tag { position: relative; display: flex; flex-direction: column; gap: 6px; margin-left: 28px; padding: 14px 18px 14px 26px; color: #2B1F18; background: var(--paper); border-radius: 3px 12px 12px 3px; box-shadow: 0 14px 22px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(43, 31, 24, .12); rotate: calc((var(--i) - 1) * .9deg); }
.dso-tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(43, 31, 24, .45); }
.dso-tag__string { position: absolute; left: -30px; top: 50%; width: 42px; height: 2px; margin-top: -1px; background: #B07343; }
.dso-tag__meta { font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #4a3b30; }
.dso-tag__sample { margin: 0; font-size: 24px; line-height: 1.15; color: #2B1F18; overflow-wrap: anywhere; }

.dso-caps { display: flex; flex-direction: column; gap: 16px; }
.dso-caps__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(14px, 2vw, 28px); align-items: start; }
.dso-capi { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dso-cap { position: relative; display: grid; place-items: center; width: 92px; height: 92px; padding: 0; margin: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--gold); font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; touch-action: manipulation;
  background: radial-gradient(circle at 50% 50%, #3a2b22 0 56%, transparent 57%), repeating-conic-gradient(#5a3e2c 0 5deg, #2f2017 5deg 10deg); box-shadow: 0 0 0 3px #1f150f, 0 14px 18px -10px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(224, 184, 114, .5); transition: rotate .45s var(--ease), box-shadow .2s ease; }
.dso-cap span { position: relative; }
.dso-cap[aria-expanded="true"] { rotate: 140deg; box-shadow: 0 0 0 3px #1f150f, 0 14px 18px -10px rgba(0, 0, 0, .8), inset 0 0 0 2px var(--gold); }
.dso-cap[aria-expanded="true"] span { rotate: -140deg; }
.dso-cap span { transition: rotate .45s var(--ease); }
.dso-capi__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--ease), visibility 0s linear .4s; }
.dso-capi.is-open .dso-capi__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--ease), visibility 0s; }
.dso-capi__in { min-height: 0; overflow: hidden; }
.dso-capi__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 20px 20px; border-radius: 14px; background: #3A2B22; box-shadow: inset 0 0 0 1px rgba(241, 231, 216, .16); }
.dso-b { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font: 500 15px/1 var(--f-ui); letter-spacing: .02em; border-radius: 0; }
.dso-b--fill { color: #2B1F18; background: var(--gold); }
.dso-b--line { color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); }
.dso-chip { min-width: 44px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 0; font: 500 15px/1 var(--f-ui); color: var(--cream); background: transparent; box-shadow: inset 0 0 0 1px rgba(241, 231, 216, .4); cursor: pointer; touch-action: manipulation; }
.dso-chip[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }
.dso-chip__p { margin-left: 8px; color: var(--mut); font-weight: 400; }
.dso-price { font: 400 40px/1 var(--f-disp); color: var(--gold); letter-spacing: -.01em; }
.dso-price__note { font-size: 15px; color: var(--mut); }
.dso-rack .th-toast { position: absolute; z-index: 5; font-family: var(--f-ui); background: var(--cream); color: #2B1F18; }

/* =====================================================================================================================
   Tests · 12:00: three wear tests
   ===================================================================================================================== */
.dso-tests { isolation: isolate; }
.dso-tests::before { content: ""; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 56%; background: url(/assets/img/case/sondhi/dir/a/smoke-sm.webp) 50% 40% / cover no-repeat; opacity: .26; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); pointer-events: none; }
.dir-sondhi-a .dso-wears { 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-sondhi-a .th-test.dso-wt { display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; border-radius: 6px 6px 22px 6px; color: #2B1F18; background: var(--paper); box-shadow: 0 30px 44px -26px rgba(0, 0, 0, .85), 0 0 0 1px rgba(43, 31, 24, .14); overflow: hidden; }
.dir-sondhi-a .th-test.dso-wt:hover { background: var(--paper); }
.dso-wt__swatch { position: relative; display: grid; place-items: center; height: 92px; }
.dso-wt__swatch--1 { background: radial-gradient(120% 140% at 20% 0, #EBC8AC, #D4A483 60%, #B97F5E); }
.dso-wt__swatch--2 { background: repeating-linear-gradient(45deg, rgba(43, 31, 24, .14) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(43, 31, 24, .14) 0 2px, transparent 2px 5px), #A89B8C; }
.dso-wt__swatch--3 { background: repeating-linear-gradient(180deg, transparent 0 11px, rgba(43, 31, 24, .05) 11px 12px), #F3E9D8; }
.dso-wt__drop { position: relative; width: 38px; height: 36px; border-radius: 52% 48% 56% 44% / 46% 54% 46% 54%; background: radial-gradient(circle at 44% 38%, rgba(246, 213, 140, .95) 0 12%, rgba(201, 122, 37, .85) 40%, rgba(164, 96, 28, .45) 66%, transparent 72%); box-shadow: 0 0 0 7px rgba(199, 122, 46, .16); }
.dso-wt__swatch--2 .dso-wt__drop { mix-blend-mode: multiply; width: 46px; height: 44px; }
.dso-wt__no { margin: 0; padding: 18px clamp(22px, 2.4vw, 30px) 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #5A463A; }
.dso-wt__rows { flex: 1; margin: 0; padding: 6px clamp(22px, 2.4vw, 30px) clamp(20px, 2.4vw, 28px); }
.dso-wt__row { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid rgba(43, 31, 24, .12); }
.dso-wt__row:first-child { border-top: 0; }
.dir-sondhi-a .dso-wt dt { font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8A4420; }
.dir-sondhi-a .dso-wt__row--why dt { color: #5A463A; }
.dir-sondhi-a .dso-wt dd { margin: 0; text-wrap: pretty; }
.dso-wt__row dd { font-family: var(--f-disp); font-weight: 400; font-size: clamp(20px, 1.7vw, 23px); line-height: 1.28; letter-spacing: -.01em; }
.dso-wt__row--why dd { font-family: var(--f-ui); font-size: 16px; line-height: 1.5; color: #4a3b30; letter-spacing: 0; }
.dso-wt__foot { min-height: 116px; display: grid; grid-template-columns: 1fr 1fr; margin: 0; background: var(--paper-2); border-top: 1px solid rgba(43, 31, 24, .1); }
.dso-wt__foot > div { display: flex; flex-direction: column; gap: 6px; padding: 16px clamp(22px, 2.4vw, 30px) 20px; }
.dso-wt__foot > div + div { border-left: 1px solid rgba(43, 31, 24, .1); }
.dso-wt__foot dd { font-size: 15px; line-height: 1.4; color: #2B1F18; }

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

/* ---------- widths ---------- */
@media (max-width: 1099px) {
  .dso-sw.th-sw { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .dso-rack__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 959px) {
  .dso-fc__row { grid-template-columns: minmax(0, 1fr); }
  .dso-pvs { grid-template-columns: minmax(0, 1fr); }
  .dso-pv__btn { min-height: 270px; }
  .dso-caps__row { grid-template-columns: minmax(0, 1fr); }
  .dir-sondhi-a .dso-wears { grid-template-columns: minmax(0, 1fr); }
  .dso-tests::before { width: 100%; opacity: .14; }
}
@media (max-width: 699px) {
  /* a phone: just the time, in the 18px the cards leave at the screen's edge (their words stop 20px inside it), right under the header */
  .dir-sondhi-a .dso-clock { top: calc(var(--header-h, 56px) + 6px); right: 2px; width: 36px; padding: 5px 0; font-size: 9.5px; }
  .dso-clock__rule, .dso-clock__e { display: none; }
  .dir-sondhi-a .dso-sec .dso-stamp { align-items: flex-start; }
  .dso-drop__stain { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .dso-bt__btn .dso-bt__note { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: #3a2f27; }
  .dso-bench { padding: 20px 10px; }
  .dso-fc { rotate: 0deg; padding-left: 44px; }
  .dso-pvs__lab { display: none; }
  .dso-pv__btn { grid-template-columns: 78px minmax(0, 1fr); min-height: 258px; }
  .dso-pv__glass { width: 78px; }
  .dso-pv__body { width: 62px; height: 168px; }
  .dso-pv__string { left: -40px; width: 52px; }
  .dso-pv__name { font-size: 27px; }
  .dso-sw.th-sw { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px 8px; }
  .dso-sw .th-swatch { min-height: 208px; }
  .dso-rail { margin-bottom: -26px; }
  .dso-wt__foot { grid-template-columns: 1fr; }
  .dso-wt__foot > div + div { border-left: 0; border-top: 1px solid rgba(43, 31, 24, .1); }
  .dso-dec__body > p { padding-left: 50px; }
}

/* =====================================================================================================================
   Calm: reduced motion, or a screen under 600px tall. Every finished state, static: the card printed, the vials full, the strips lifted and wet, the
   organ full and inked, the drops dry, nothing pinned, nothing animating, no clock.
   ===================================================================================================================== */
@media (prefers-reduced-motion: reduce), (max-height: 599px) {
  .dir-sondhi-a [data-dir-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .dir-sondhi-a *, .dir-sondhi-a *::before, .dir-sondhi-a *::after { animation: none !important; }
  .dir-sondhi-a .dso-clock { display: none; }
  .dso-dec__body, .dso-capi__panel, .dso-hl, .dso-cap, .dso-cap span, .dso-pv__tag, .dso-pv__oil, .dso-drop__stain, .dso-og__light, .dso-bt__btn { transition: none !important; }
  .dso-og__light { --lx: 18%; --ly: 28%; }
  .dso-bt__btn:hover { translate: none; }
  .dso-bt { --u: 1 !important; --ue: 1 !important; }
  .dso-bt__oil, .dso-lab__ink { transition: none !important; }
}
@media (max-height: 599px) and (min-width: 700px) {
  .dso-og__stage, .dso-bk__stage { position: static !important; height: auto !important; }
  .dso-og, .dso-bk { height: auto !important; }
}