/* mashmoom-a "Unwrapped": the six sections of the Mashmoom case, direction A. The page opens like a wrapped bouquet. Every section is a sheet of unbleached paper sealed by a folded flap, a V of
   paper that lifts (a clip-path, driven by the scroll) as the sheet comes up the screen, and one satin ribbon runs down the left margin, drawn as you scroll, to turn across the Tests and tie a bow:
   01 the order slip pinned to the bench and three handwritten gift cards that turn over, 02 the cold room (five buckets behind a fogged glass door, wiped clear one by one), 03 the hand-tie (ten stems
   gathered into a spiral bunch), 04 the pins (six pearl pins through the wrapped bouquet, one for each decision), then the paper drawer (the tokens) and three deliveries (the tests).
   Scoped under .dir-mashmoom-a, class prefix dmm-. Markup: src/_includes/e2/theme/dir/mashmoom-a/*.njk, behaviour: e2-dir-mashmoom-a.js. Scroll-driven motion is transform / opacity / clip-path only,
   driven by custom properties (--f, --w, --c, --b) 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: the flaps open, the ribbon drawn and tied, the fog wiped, the bunch tied, the pins in.
   Numbers are never set in the display face: Italiana's digits read badly (a "10" looks like "1o"), so it carries words only and every figure is in Manrope. */

.dir-mashmoom-a {
  --ivory: #F6F1EA; --paper: #EFE7DA; --paper2: #E6DBC9; --kraft: #D5C6AA; --date: #8C6A4A; --dated: #6f5239; --rose: #D9B8AE; --ink: #231C17; --sage: #9AA38F; --sage2: #7a876c; --hair: #E7DFD4;
  --mut: #5d5248; --line: rgba(35, 28, 23, .16); --line2: rgba(35, 28, 23, .34);
  --f-disp: Italiana, 'Bodoni 72', Didot, Georgia, serif; --f-ui: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hand: 'Homemade Apple', 'Bradley Hand', cursive; --f-handar: 'Aref Ruqaa', 'Amiri', serif;
  --dmm-pad: clamp(20px, 3.4vw, 48px); --ease: cubic-bezier(.2, .8, .2, 1);
  --dmm-gut: calc((100vw - min(100vw - 2 * var(--pad, 24px), var(--max, 1320px))) / 2);
  font-family: var(--f-ui);
}
.dir-mashmoom-a img { display: block; }
/* On the real /mashmoom page the direction is two <div class="dir dir-mashmoom-a"> wrappers (layouts/case-study-e2.njk) inside .e2-cs__body > .e2-wrap. The first is the root: a column with the same gap the
   wrap gives its children, and the positioning context of the ribbon. The second (the tests) and the tokens' own wrapper add no box. */
div.dir-mashmoom-a[data-dir-root] { position: relative; display: flex; flex-direction: column; gap: clamp(64px, 8vw, 120px); }
div.dir-mashmoom-a:not([data-dir-root]) { display: contents; }

/* ---------- the shared frame of a section: a sheet of unbleached paper ---------- */
.dir-mashmoom-a .dmm-sec {
  position: relative; border-radius: 22px; overflow: clip; color: var(--ink); font-family: var(--f-ui);
  padding: calc(clamp(56px, 6.4vw, 92px) + 24px) var(--dmm-pad) calc(var(--dmm-pad) + 8px); gap: clamp(28px, 3.4vw, 48px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #F3ECE0, var(--paper) 38%, #EAE1D1);
  box-shadow: inset 0 0 0 1px rgba(35, 28, 23, .1), 0 44px 80px -54px #000;
}
.dir-mashmoom-a .dmm-sec :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dir-mashmoom-a .dmm-sec .th-hd { gap: 18px 56px; position: relative; z-index: 1; }
.dir-mashmoom-a .dmm-sec .th-hd__eyebrow { color: var(--dated); font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: .2em; }
.dir-mashmoom-a .dmm-sec .th-hd__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(46px, 6vw, 86px); line-height: 1; letter-spacing: .004em; color: var(--ink); text-wrap: balance; }
.dir-mashmoom-a .dmm-sec .th-hd__aside { max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--mut); }
.dmm-lab { margin: 0; font: 600 12px/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--dated); }

/* the folded flap that seals a sheet: a V of darker paper across its top edge. --f is how closed it is (1 sealed, 0 open); the script writes it from the scroll, and it is open without the script. */
.dmm-fold { --f: 0; position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: clamp(56px, 6.4vw, 92px); border-radius: 22px 22px 0 0; overflow: hidden; pointer-events: none; }
.dmm-fold i, .dmm-fold b { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% calc(var(--f) * 100%)); }
.dmm-fold i { translate: 0 6px; background: rgba(35, 28, 23, .26); }
.dmm-fold b { background: linear-gradient(100deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 38%, rgba(60, 40, 20, .1) 70%), linear-gradient(180deg, #dccfb7, var(--kraft)); }
.th-js .dmm-fold { --f: 1; }

/* =====================================================================================================================
   The ribbon: one satin ribbon down the left margin, drawn by the script to the height of the page (a path with pathLength 1, stroke-dashoffset by --r).
   ===================================================================================================================== */
.dmm-ribbon { --r: 1; position: absolute; z-index: 20; left: calc(var(--dmm-gut) / -2 - 13px); top: 0; bottom: 0; width: 26px; pointer-events: none; }
.dmm-ribbon__svg { display: block; width: 26px; height: 100%; overflow: visible; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .5)); }
.dmm-ribbon__path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.th-js .dmm-ribbon__path { stroke-dashoffset: calc(1 - var(--r)); }
@media (max-width: 699px) { .dmm-ribbon { left: calc(var(--dmm-gut) / -2 - 9px); width: 18px; } .dmm-ribbon__svg { width: 18px; } }

/* =====================================================================================================================
   01 Discover: the order slip and three gift cards
   ===================================================================================================================== */
.dmm-bench { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; padding: clamp(24px, 3.4vw, 44px); border-radius: 12px; overflow: hidden; isolation: isolate; background: #d9d3c8; box-shadow: inset 0 0 0 1px rgba(35, 28, 23, .12); }
.dmm-bench__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; filter: saturate(.8); }
.dmm-bench::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(246, 241, 234, .78), rgba(246, 241, 234, .55) 55%, rgba(246, 241, 234, .7)); }
.dmm-slip {
  --slip: #FBF8F2; position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 40px) 18px; rotate: -.7deg; color: var(--ink);
  background: var(--slip); border-radius: 3px 3px 0 0; box-shadow: 0 30px 44px -26px rgba(35, 28, 23, .7), 0 0 0 1px rgba(35, 28, 23, .1);
}
.dmm-slip__pin { position: absolute; z-index: 2; left: 52%; top: -34px; width: 104px; height: auto; rotate: 30deg; filter: drop-shadow(0 6px 4px rgba(35, 28, 23, .35)); pointer-events: none; }
.dmm-slip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed var(--line2); }
.dmm-slip__brand { margin: 0; font: 600 12px/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--dated); }
.dmm-slip__label { margin: 0; font: 400 clamp(22px, 2vw, 28px)/1.1 var(--f-disp); color: var(--ink); }
.dmm-slip__goal { margin: 0; font: 400 clamp(25px, 2.5vw, 34px)/1.22 var(--f-disp); color: var(--ink); text-wrap: pretty; }
.dmm-slip__lines { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dmm-slip__line { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding-top: 12px; border-top: 1px solid var(--line); font: 400 16px/1.5 var(--f-ui); color: #3b3129; }
.dmm-slip__no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dated); font: 600 12px/1 var(--f-ui); color: var(--dated); font-variant-numeric: tabular-nums; }
.dmm-slip__tear { height: 14px; margin: 14px -22px -2px; background: radial-gradient(circle at 50% 100%, transparent 5.5px, var(--slip) 6.2px) 0 0 / 15px 14px repeat-x; }
@media (min-width: 700px) { .dmm-slip__tear { margin-inline: calc(-1 * clamp(22px, 3vw, 40px)); } }

.dmm-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; perspective: 1400px; }
.dmm-cardli { margin: 0; }
.dmm-card {
  position: relative; display: grid; width: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; text-align: left; color: var(--ink); background: none; font: inherit;
  transform-style: preserve-3d; transition: transform .36s var(--ease); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  rotate: calc((var(--i, 0) - 1) * 1.1deg);
}
@media (hover: hover) { .dmm-card:hover { translate: 0 -2px; } }
.dmm-card[aria-pressed="true"] { transform: rotateY(180deg); }
.dmm-card__face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 56px 20px 22px; border-radius: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(180deg, #FDFAF3, #F6F0E3); box-shadow: 0 16px 22px -16px rgba(35, 28, 23, .65), inset 0 0 0 1px rgba(35, 28, 23, .09);
  transition: visibility 0s linear .18s;
}
.dmm-card__face::before { content: ""; position: absolute; left: 50%; top: -9px; width: 64px; height: 18px; margin-left: -32px; background: color-mix(in srgb, var(--c) 70%, #fff); opacity: .85; rotate: -2deg; }
.dmm-card__face--back { transform: rotateY(180deg); justify-content: center; visibility: hidden; padding-left: 28px; background: linear-gradient(180deg, #F6EFE1, #EFE6D4); }
.dmm-card[aria-pressed="true"] .dmm-card__face--back { visibility: visible; transition: visibility 0s; }
.dmm-card[aria-pressed="true"] .dmm-card__face--front { visibility: hidden; }
.dmm-card__who { display: flex; align-items: center; gap: 10px; }
.dmm-card__dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(35, 28, 23, .4); }
.dmm-card__who b { font: 400 clamp(21px, 1.9vw, 27px)/1.15 var(--f-disp); text-wrap: balance; }
.dmm-card__need { font-size: 14.5px; line-height: 1.45; color: #4d4237; }
.dmm-card__k { display: block; margin-bottom: 4px; font: 600 10.5px/1.3 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--dated); }
.dmm-card__q { display: block; font: 400 15.5px/1.7 var(--f-hand); color: #3b2b1e; }
.dmm-card__a { display: block; font: 400 16px/1.55 var(--f-ui); color: var(--ink); text-wrap: pretty; }
.dmm-card__turn { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--dated); box-shadow: inset 0 0 0 1px var(--dated); }
@media (max-width: 1099px) { .dmm-bench { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) {
  .dmm-slip__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dmm-bench { padding: 18px 14px 20px; }
  .dmm-card__face { padding: 20px 48px 18px 18px; }
  .dmm-slip__pin { left: 58%; width: 84px; top: -28px; }
}

/* =====================================================================================================================
   02 Define: the cold room
   ===================================================================================================================== */
.dmm-door { --w: 1; position: relative; padding: 56px 20px 22px 54px; border-radius: 14px; background: linear-gradient(145deg, #d9dddd, #b2b9bb 38%, #cdd2d3 70%, #a9b0b2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 30px 44px -30px rgba(35, 28, 23, .7); }
.dmm-door__plaque { position: absolute; left: 54px; right: 20px; top: 16px; margin: 0; font: 600 12px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #3d4749; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.dmm-door__handle { position: absolute; left: 20px; top: 22%; bottom: 22%; width: 12px; border-radius: 6px; background: linear-gradient(90deg, #7f8789, #f1f4f4 45%, #7f8789); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.dmm-buckets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; background: #0e1112; padding: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.dmm-bucket { --w: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.th-js .dmm-bucket { --w: 0; }
.dmm-bucket__ph { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: #1a1613; border-radius: 2px; }
.dmm-bucket__ph img { width: 100%; height: 100%; object-fit: cover; }
.dmm-fog {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 22% 30%, rgba(255, 255, 255, .8) 0 1.5px, transparent 2.5px) 0 0 / 37px 43px, radial-gradient(circle at 68% 62%, rgba(255, 255, 255, .65) 0 1.2px, transparent 2.2px) 0 0 / 29px 33px,
    linear-gradient(180deg, rgba(233, 240, 242, .9), rgba(212, 223, 228, .86));
  -webkit-mask-image: linear-gradient(108deg, transparent calc(var(--w) * 150% - 50%), #000 calc(var(--w) * 150%)); mask-image: linear-gradient(108deg, transparent calc(var(--w) * 150% - 50%), #000 calc(var(--w) * 150%));
}
.dmm-fog--b { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(200, 214, 220, .3)); -webkit-mask-image: linear-gradient(98deg, transparent calc(var(--w) * 150% - 20%), #000 calc(var(--w) * 150% + 10%)); mask-image: linear-gradient(98deg, transparent calc(var(--w) * 150% - 20%), #000 calc(var(--w) * 150% + 10%)); }
.th-js .dmm-bucket__ph img { filter: blur(calc((1 - var(--w)) * 6px)) saturate(calc(.7 + var(--w) * .3)); }
.dmm-tag {
  position: relative; margin: 20px 6px 0; padding: 22px 14px 16px; border-radius: 3px 3px 10px 10px; color: var(--ink); background: linear-gradient(180deg, #FBF6EA, #F3EBDA);
  box-shadow: 0 14px 18px -12px rgba(0, 0, 0, .85); display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45;
}
.dmm-tag::before { content: ""; position: absolute; left: 50%; top: -20px; width: 1px; height: 24px; background: #cbb89a; }
.dmm-tag::after { content: ""; position: absolute; left: 50%; top: 6px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #0e1112; box-shadow: 0 0 0 1.5px #b9a37f; }
.th-js .dmm-bucket .dmm-tag { opacity: calc(.35 + var(--w) * .65); }
.dmm-tag__string { display: none; }
.dmm-tag__who { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 11px/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dmm-tag__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(35, 28, 23, .4); }
.dmm-tag__name { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 400 clamp(24px, 2vw, 30px)/1.05 var(--f-disp); }
.dmm-tag__no { font: 600 12px/1 var(--f-ui); letter-spacing: .06em; color: var(--dated); font-variant-numeric: tabular-nums; }
.dmm-tag__k { display: block; margin-bottom: 3px; font: 600 10.5px/1.3 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--dated); }
.dmm-tag__doubt { margin: 0; font: 400 14px/1.65 var(--f-hand); color: #3b2b1e; }
.dmm-tag__doubt .dmm-tag__k { font-family: var(--f-ui); }
.dmm-tag__move { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--f-ui); color: #33291f; }
@media (max-width: 1199px) { .dmm-buckets { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; } }
@media (max-width: 699px) {
  .dmm-door { padding: 54px 12px 14px 38px; }
  .dmm-door__plaque { left: 38px; right: 12px; letter-spacing: .1em; }
  .dmm-door__handle { left: 12px; width: 10px; }
  .dmm-buckets { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dmm-bucket__ph { aspect-ratio: 16 / 10; }
  .dmm-bucket__ph img { object-position: 50% 40%; }
  .dmm-tag { margin: 18px 6px 4px; }
}

/* =====================================================================================================================
   03 Design: the hand-tie
   ===================================================================================================================== */
.dmm-tie { --p: 1; --c: 10; --n: 10; position: relative; z-index: 1; }
.dmm-tie__stage { display: block; }
.dmm-tie__pin { display: contents; }
.dmm-tie__bar { display: none; }
.dmm-tie__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.dmm-tie__bench { position: relative; padding: 14px 14px 10px; border-radius: 12px; overflow: hidden; background: radial-gradient(90% 70% at 30% 20%, #fbf8f2, #ece5d8 70%), #ece5d8; box-shadow: inset 0 0 0 1px rgba(35, 28, 23, .14), inset 0 -30px 50px -30px rgba(35, 28, 23, .22); }
.dmm-bench-tex { position: absolute; inset: 0; }
.dmm-bunch { display: block; width: 100%; height: auto; overflow: visible; }
.dmm-stem__p { fill: none; stroke: var(--sage2); stroke-width: 4.6; stroke-linecap: round; }
.dmm-stem__sh { fill: none; stroke: rgba(35, 28, 23, .16); stroke-width: 6; stroke-linecap: round; transform: translate(2px, 5px); }
.dmm-stemg.is-cur .dmm-stem__p { stroke: var(--dated); }
.dmm-head--sprig circle { fill: #a9b49c; stroke: #7a876c; stroke-width: 1; }
.dmm-head--sprig .dmm-bud { fill: #fbf8f2; stroke: #cfc6b4; }
.dmm-tagg rect { fill: #FBF6EA; stroke: rgba(35, 28, 23, .35); stroke-width: 1; }
.dmm-tagg text { font: 600 12.5px var(--f-ui); fill: var(--ink); font-variant-numeric: tabular-nums; }
.dmm-tagg__str { stroke: rgba(35, 28, 23, .4); stroke-width: 1; fill: none; }
.dmm-tagg__hole { fill: #d9cdb7; stroke: rgba(35, 28, 23, .3); }
.dmm-tagg { opacity: 0; }
.dmm-stemg.is-cur .dmm-tagg rect { stroke: var(--dated); stroke-width: 1.6; }
.dmm-props image { opacity: .96; }
.dmm-props__sc { transform-origin: 574px 492px; rotate: -14deg; }
.dmm-tiebow { opacity: 1; transform-box: fill-box; }
.dmm-tiebow__loop { fill: url(#dmm-satin2); stroke: rgba(35, 28, 23, .35); stroke-width: .8; }
.dmm-tiebow__tail { fill: #8C6A4A; stroke: rgba(35, 28, 23, .3); stroke-width: .8; }
.dmm-tiebow__band { fill: #7d5d41; }
.dmm-tiebow__knot { fill: #b28d66; stroke: rgba(35, 28, 23, .4); stroke-width: .8; }
.dmm-ticks { list-style: none; display: none; margin: 8px 0 0; padding: 0; gap: 4px; justify-content: center; }
.dmm-tick {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--ink); font: 600 14px/1 var(--f-ui); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--line2); transition: box-shadow .2s ease, background-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .dmm-tick:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.dmm-tick.is-cur, .dmm-tick[aria-current="true"] { background: var(--ink); color: var(--ivory); box-shadow: none; }

.dmm-stems { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dmm-stem { --ik: 1; position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 12px 14px; border-radius: 4px; background: linear-gradient(180deg, #FBF7EE, #F3EBDB); box-shadow: 0 14px 20px -16px rgba(35, 28, 23, .7), inset 0 0 0 1px rgba(35, 28, 23, .09); }
.dmm-stem::before { content: ""; position: absolute; left: 18px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #d9cdb7; box-shadow: inset 0 0 0 1.5px rgba(35, 28, 23, .35); }
.dmm-stem__no { position: absolute; z-index: 2; right: 12px; top: 8px; font: 600 12px/1 var(--f-ui); letter-spacing: .08em; color: var(--dated); font-variant-numeric: tabular-nums; }
.dir-mashmoom-a .dmm-stem .th-browser { border-radius: 2px; box-shadow: 0 0 0 1px rgba(35, 28, 23, .14); background: #fff; }
.dir-mashmoom-a .dmm-stem .th-browser__bar { display: none; }
.dmm-stem__vp { position: relative; }
.dmm-stem__wire { position: absolute; left: 0; top: 0; }
.dmm-stem__ink { position: absolute; left: 0; top: 0; clip-path: inset(0 calc((1 - var(--ik)) * 100%) 0 0); }
.dmm-stem__edge { position: absolute; top: 0; bottom: 0; left: calc(var(--ik) * 100%); width: 2px; margin-left: -1px; background: var(--date); opacity: calc(1 - var(--ik) * var(--ik) * var(--ik)); pointer-events: none; display: none; }
.dmm-stem__cap { display: flex; flex-direction: column; gap: 6px; }
.dmm-stem__nm { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.dmm-stem__nm b { font: 600 14.5px/1.3 var(--f-ui); }
.dmm-stem__nm em { font: 400 20px/1.1 var(--f-disp); font-style: normal; color: var(--dated); }
.dmm-stem__note { font-size: 13.5px; line-height: 1.45; color: var(--mut); }

/* the page map: the home page as a narrow strip, with the stem in hand's section lit (live only) */
.dmm-tie__right { display: block; min-width: 0; }
.dmm-map { display: none; }
/* still / list layouts: the finished bunch, the ten stems in a grid (wide) or a list (narrow) */
@media (min-width: 1100px) {
  .dmm-tie__bench { width: 100%; max-width: 560px; margin: 0 auto; }
  .dmm-bunch { max-width: 430px; margin: 0 auto; }
  .dmm-stems { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .dmm-stem__note { font-size: 12.5px; }
}
@media (max-width: 699px) {
  .dmm-stems { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* phone and tablet (motion allowed): the bunch sticks under the header and is gathered as the ten stems go past; each stem inks as it comes into view. It sticks inside a zone
   (.dmm-tie__pin) that the script sizes to at most 2.4 screens (--zone) and lifts the list clear of the bench's own room (--bh): a long list never pins it for longer than that. */
@media (max-width: 1099px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .th-js .dmm-tie__grid { position: relative; }
  .th-js .dmm-tie__pin { display: block; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: var(--zone, 2000px); pointer-events: none; }
  .th-js .dmm-tie__bench { position: sticky; top: calc(var(--header-h, 68px) + 8px); z-index: 3; pointer-events: auto; }
  .th-js .dmm-tie__right { padding-top: calc(var(--bh, 300px) + 16px); }
  .th-js .dmm-bunch { max-height: min(34vh, 300px); }
  .th-js .dmm-tie__grid { gap: 16px; }
  .th-js .dmm-stem:not(.is-in) { --ik: 0; }
  .th-js .dmm-stem__ink { transition: clip-path 1s var(--ease); }
  .th-js .dmm-stem__edge { display: block; transition: left 1s var(--ease), opacity .3s ease; }
}
/* live (wide): pinned, one stem in hand at a time, scroll-driven */
@media (min-width: 1100px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .th-js .dmm-tie { --p: 0; --c: 0; height: calc(700px + 110vh); }
  .th-js .dmm-tie__stage { position: sticky; top: calc(var(--header-h, 68px) + 14px); }
  .th-js .dmm-tie__bar { display: flex; align-items: baseline; gap: 18px; margin: 0 0 14px; min-height: 62px; }
  .th-js .dmm-tie__bar b { flex: none; font: 600 12px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--dated); font-variant-numeric: tabular-nums; }
  .th-js .dmm-tie__bar span { font: 400 clamp(17px, 1.5vw, 20px)/1.45 var(--f-ui); color: var(--ink); text-wrap: pretty; }
  .th-js .dmm-tie__bar small { display: block; margin-bottom: 4px; font: 600 11px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--dated); }
  .th-js .dmm-tie__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; }
  .th-js .dmm-tie__bench { max-width: none; margin: 0; }
  .th-js .dmm-bunch { max-width: none; max-height: calc(100vh - 260px); margin: 0 auto; }
  .th-js .dmm-ticks { display: flex; flex-wrap: nowrap; }
  .th-js .dmm-tie__right { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; }
  .th-js .dmm-map { --ms: .0775; display: block; position: relative; width: 112px; height: calc(var(--pageh) * var(--ms) * 1px); margin: 0; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(35, 28, 23, .16), 0 18px 26px -18px rgba(35, 28, 23, .7); }
  .th-js .dmm-map__page { position: absolute; inset: 0; overflow: hidden; border-radius: 2px; opacity: .55; filter: saturate(.7); }
  .th-js .dmm-map__page img { position: absolute; left: 0; max-width: none; width: 100%; top: calc(var(--y) * var(--ms) * 1px); height: calc(var(--h) * var(--ms) * 1px); }
  .th-js .dmm-map__hl { position: absolute; left: -5px; right: -5px; top: calc(var(--hy, 0) * var(--ms) * 1px - 3px); height: calc(var(--hh, 40) * var(--ms) * 1px + 6px); min-height: 8px; border-radius: 2px; box-shadow: 0 0 0 2px var(--date), 0 0 0 5px rgba(140, 106, 74, .22); background: rgba(255, 255, 255, .22); transition: top .35s var(--ease), height .35s var(--ease); }
  .th-js .dmm-stems { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; position: relative; align-items: center; }
  .th-js .dmm-stem { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity .35s ease; --ik: clamp(0, calc(var(--c) - var(--i) + .12), 1); padding: 14px 16px 16px; }
  .th-js .dmm-stem.is-cur { opacity: 1; pointer-events: auto; }
  .th-js .dmm-stem__edge { display: block; }
  .th-js .dmm-stem__nm b { font-size: 16px; }
  .th-js .dmm-stem__nm em { font-size: 26px; }
  .th-js .dmm-stem__note { font-size: 15px; }
  .th-js .dmm-stem__vp { max-height: calc(100vh - 360px); }
}

/* =====================================================================================================================
   04 Optimise: the pins
   ===================================================================================================================== */
.dmm-opt__intro { position: relative; z-index: 1; max-width: 70ch; margin: 0; font-size: 16px; line-height: 1.55; color: var(--mut); }
.dmm-opt__intro b { color: var(--ink); font-weight: 600; }
.dmm-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; }
.dmm-stage { position: relative; padding: 14px; border-radius: 6px; background: linear-gradient(180deg, #e8dfce, #e0d5c2); box-shadow: inset 0 0 0 1px rgba(35, 28, 23, .14), inset 0 10px 24px -14px rgba(35, 28, 23, .3); }
.dir-mashmoom-a .dmm-stage .th-browser { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.dir-mashmoom-a .dmm-stage .th-browser__bar { display: none; }
.dir-mashmoom-a .dmm-stage .th-viewport { background: transparent; overflow: visible; }
.dir-mashmoom-a .dmm-stage .th-artboard { --k: tan(atan2(100cqw, 620px)); width: 620px; overflow: visible; }
.dmm-stage__vp { aspect-ratio: 620 / var(--dh0); }
/* on a phone the miniature is the name and price block alone; the six decisions are in the list above it */
@media (max-width: 699px) {
  .dmm-stage__vp { aspect-ratio: 620 / var(--d1); }
  .dmm-row:not([data-r="1"]), .dmm-hl { display: none; }
}
.dmm-row { position: absolute; display: block; width: 524px; max-width: none; height: auto; opacity: .5; filter: saturate(.55); transition: opacity .35s ease, filter .35s ease, box-shadow .35s ease; }
.dmm-row.is-lit { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--date), 0 18px 34px -16px rgba(35, 28, 23, .6); }
/* the rows that hold buttons (the sizes, row 2, and the filled button with its two, row 6) are never dimmed: a faded button reads as one that cannot be pressed */
.dmm-row[data-r="2"], .dmm-row[data-r="6"] { opacity: 1; filter: none; }
.dmm-hl { position: absolute; z-index: 1; border-radius: 2px; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.dmm-hl.is-on { opacity: 1; box-shadow: 0 0 0 1px rgba(140, 106, 74, .7); }
.dmm-wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.dmm-wire path { stroke: var(--date); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }

.dmm-opt__side { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); min-width: 0; }
.dir-mashmoom-a .dmm-bouquet { --p: 1; margin: 0 auto; width: min(100%, 380px); padding: 22px 26px 18px; border-radius: 6px; background: linear-gradient(180deg, #FBF7EE, #F1E8D8); box-shadow: 0 28px 44px -30px rgba(35, 28, 23, .75), inset 0 0 0 1px rgba(35, 28, 23, .1); }
.dmm-bouquet__frame { position: relative; width: 100%; aspect-ratio: 779 / 1000; }
.dir-mashmoom-a .dmm-bouquet { overflow: hidden; }
.dmm-bouquet__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 18px 14px rgba(35, 28, 23, .28)); }
.dmm-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; background: transparent; color: var(--ink); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  opacity: calc(.78 + clamp(0, calc(var(--p) * 7 - var(--i)), 1) * .22); transition: opacity .3s ease;
}
.dmm-pin::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(35, 28, 23, .38); transition: box-shadow .25s ease, inset .25s ease; }
.dir-mashmoom-a .dmm-pin__img { position: absolute; left: calc(50% - 100.6px); top: calc(50% - 8.8px); width: 112px; height: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(35, 28, 23, .4)); transition: transform .25s var(--ease); transform-origin: 90% 9%; }
.dmm-pin__n { position: absolute; left: calc(50% + 9px); top: calc(50% - 32px); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--ivory); font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums; pointer-events: none; }
@media (hover: hover) { .dmm-pin:hover .dmm-pin__img { transform: rotate(-6deg) scale(1.05); } .dmm-pin:hover::before { box-shadow: 0 0 0 2px rgba(140, 106, 74, .6); } }
.dmm-pin:active .dmm-pin__img { transform: scale(.95); transition-duration: .08s; }
.dmm-pin.is-on { opacity: 1; }
.dmm-pin.is-on::before { inset: 4px; box-shadow: 0 0 0 2.5px var(--date), 0 0 18px 4px rgba(140, 106, 74, .4); }
.dmm-pin.is-on .dmm-pin__n { background: var(--date); }

.dmm-dec { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dmm-dec__li { border-top: 1px solid var(--line2); }
.dmm-dec__li:last-child { border-bottom: 1px solid var(--line2); }
.dmm-dec__h { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0; padding: 8px 4px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dmm-dec__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dated); font: 600 13px/1 var(--f-ui); color: var(--dated); font-variant-numeric: tabular-nums; transition: background-color .2s ease, color .2s ease; }
.dmm-dec__t { font: 400 clamp(21px, 1.8vw, 26px)/1.15 var(--f-disp); }
.dmm-dec__li.is-on .dmm-dec__n { background: var(--date); color: var(--ivory); box-shadow: none; }
.dmm-dec__body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s; }
.dmm-dec__body > p { min-height: 0; overflow: hidden; margin: 0; padding: 0 0 0 44px; font-size: 15.5px; line-height: 1.55; color: #3b3129; }
.dmm-dec__li.is-on .dmm-dec__body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s var(--ease), visibility 0s; }
.dmm-dec__li.is-on .dmm-dec__body > p { padding-bottom: 16px; }
@media (max-width: 959px) {
  .dmm-opt__grid { grid-template-columns: minmax(0, 1fr); }
  .dmm-wire { display: none; }
  .dmm-stage { order: 2; }
  .dmm-opt__side { order: 1; }
}
@media (max-width: 699px) { .dmm-bouquet { padding: 16px 18px 14px; } .dmm-dec__body > p { padding-left: 4px; } }

/* =====================================================================================================================
   Tokens: the paper drawer
   ===================================================================================================================== */
.dmm-drawerbox { position: relative; display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); padding-top: calc(var(--dmm-pad) + 8px); }
.dir-mashmoom-a .dmm-drawerbox { padding-top: calc(var(--dmm-pad) + 8px); }
.dmm-bk__bar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); }
.dmm-bk__cap { margin: 0; font: 600 12px/1.4 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--dated); }
.dmm-bk__sub { font: 400 clamp(26px, 2.6vw, 38px)/1.1 var(--f-disp); }
.dmm-bk__lead { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--mut); }
.dmm-drawer { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 6px; background: linear-gradient(180deg, #d8cbb1, #cdbea2); box-shadow: inset 0 8px 16px -8px rgba(35, 28, 23, .4), inset 0 0 0 1px rgba(35, 28, 23, .18); }
.dmm-papers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dmm-papers__li { margin: 0; rotate: var(--tilt, 0deg); }
.dmm-paper {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: 100%; min-height: 128px; margin: 0; padding: 14px 16px; border: 0; border-radius: 2px; cursor: pointer; text-align: left;
  background: var(--sw); color: var(--ic); font: inherit; box-shadow: 0 10px 14px -10px rgba(35, 28, 23, .7), inset 0 0 0 1px rgba(35, 28, 23, .16);
  transition: transform .25s var(--ease), box-shadow .25s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .dmm-paper:hover { transform: translateY(-3px); box-shadow: 0 16px 20px -10px rgba(35, 28, 23, .75), inset 0 0 0 1px rgba(35, 28, 23, .3); } }
.dmm-paper__fold { position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: linear-gradient(225deg, #d8cbb1 50%, rgba(255, 255, 255, .5) 50%, rgba(0, 0, 0, .14)); box-shadow: -2px 2px 4px rgba(35, 28, 23, .2); }
.dmm-paper__ok { position: absolute; right: 12px; bottom: 12px; opacity: 0; scale: .5; transition: opacity .2s ease, scale .3s var(--ease); }
.dmm-paper.is-copied .dmm-paper__ok { opacity: 1; scale: 1; }
.dmm-paper__name { font: 600 15px/1.25 var(--f-ui); }
.dmm-paper__hex { font: 500 13px/1.25 var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: .06em; opacity: .85; }
.dmm-paper.is-dark .dmm-paper__hex { opacity: 1; }
.dmm-bk__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.dmm-typecard { position: relative; width: min(100%, 520px); aspect-ratio: 473 / 374; margin: 0 auto; filter: drop-shadow(0 16px 14px rgba(35, 28, 23, .28)); }
.dmm-typecard__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dmm-typecard__in { position: absolute; inset: 17% 12% 16% 12%; display: flex; flex-direction: column; justify-content: space-between; rotate: -6.6deg; color: #2b2119; }
.dmm-type { min-width: 0; }
.dmm-type__meta { margin: 0 0 2px; font: 600 10px/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dated); }
.dmm-type__sample { margin: 0; line-height: 1.1; overflow-wrap: anywhere; }
.dmm-type--0 .dmm-type__sample { font-size: clamp(22px, 2.5vw, 36px); }
.dmm-type--1 .dmm-type__sample { font-size: clamp(15px, 1.6vw, 22px); font-weight: 500; font-variant-numeric: tabular-nums; }
.dmm-type--2 .dmm-type__sample { font-size: clamp(28px, 3vw, 44px); text-align: left; }
.dmm-flank { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dmm-spool { border-top: 1px solid var(--line2); }
.dmm-spool:last-child { border-bottom: 1px solid var(--line2); }
.dmm-spool__h { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; margin: 0; padding: 6px 4px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); font: 400 clamp(22px, 1.9vw, 27px)/1.1 var(--f-disp); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dmm-spool__ic { flex: none; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(35, 28, 23, .3)); transition: rotate .36s var(--ease); }
.dmm-spool.is-open .dmm-spool__ic { rotate: 90deg; }
.dmm-spool__h > span { flex: 1; }
.dmm-spool__knob { flex: none; position: relative; width: 20px; height: 20px; }
.dmm-spool__knob::before, .dmm-spool__knob::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; background: var(--ink); transition: rotate .3s var(--ease); }
.dmm-spool__knob::after { rotate: 90deg; }
.dmm-spool.is-open .dmm-spool__knob::after { rotate: 0deg; }
.dmm-spool__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .36s var(--ease), visibility 0s linear .36s; }
.dmm-spool.is-open .dmm-spool__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .36s var(--ease), visibility 0s; }
.dmm-spool__in { min-height: 0; overflow: hidden; }
.dmm-spool__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 4px 4px 16px; }
.dmm-b { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; font: 600 15px/1.2 var(--f-ui); letter-spacing: .02em; text-align: center; }
.dmm-b--fill { background: color-mix(in srgb, #8C6A4A 86%, #231C17); color: var(--ivory); }
.dmm-b--line { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.dmm-chip { min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 0; cursor: pointer; background: transparent; color: var(--ink); font: 500 14.5px/1.2 var(--f-ui); box-shadow: inset 0 0 0 1px var(--line2); font-variant-numeric: tabular-nums; transition: box-shadow .2s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dmm-chip[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); background: rgba(255, 255, 255, .55); }
.dmm-chip--soft[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--sage2); }
.dmm-price { font: 600 28px/1.1 var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dmm-price__note { font-size: 14px; color: var(--mut); }
.dmm-drawerbox .th-toast { position: absolute; z-index: 5; font-family: var(--f-ui); background: var(--ink); color: var(--ivory); box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .55); }
@media (max-width: 1099px) { .dmm-bk__row { grid-template-columns: minmax(0, 1fr); } .dmm-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .dmm-papers { gap: 12px; } .dmm-paper { min-height: 112px; padding: 12px; } .dmm-drawer { padding: 12px; }
  .dmm-typecard__in { inset: 15% 10% 14% 10%; }
  .dmm-type__meta { font-size: 8.5px; letter-spacing: .1em; }
  .dmm-type--0 .dmm-type__sample { font-size: 18px; }
  .dmm-type--1 .dmm-type__sample { font-size: 14px; }
  .dmm-type--2 .dmm-type__sample { font-size: 26px; }
}

/* =====================================================================================================================
   Tests: three deliveries, and the ribbon tied off
   ===================================================================================================================== */
.dir-mashmoom-a .dmm-tests { overflow: visible; padding-top: calc(var(--dmm-pad) + 56px); }
.dmm-band { --b: 1; --bow: 1; position: absolute; z-index: 6; left: calc(var(--dmm-gut) / -2 - 6px); right: 0; top: 29px; height: 14px; pointer-events: none; }
.dmm-band__ribbon { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--b)); background: linear-gradient(180deg, #6f5239, #c9a47a 42%, #d4b48c 52%, #8C6A4A 70%, #6f5239); box-shadow: 0 3px 5px -2px rgba(0, 0, 0, .45); border-radius: 7px 0 0 7px; }
.dmm-band__bow { position: absolute; left: calc(50% + var(--dmm-gut) / 4); top: -40px; width: 156px; height: auto; margin-left: -78px; transform-origin: 50% 46%; transform: scale(var(--bow)); opacity: var(--bow); filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); overflow: visible; }
.dmm-bow__loop { fill: url(#dmm-satin2); stroke: rgba(35, 28, 23, .35); stroke-width: 1; }
.dmm-bow__tail { fill: #8C6A4A; stroke: rgba(35, 28, 23, .3); stroke-width: 1; }
.dmm-bow__fold { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.4; stroke-linecap: round; }
.dmm-bow__knot { fill: #b28d66; stroke: rgba(35, 28, 23, .4); stroke-width: 1; }
.dmm-tests__sub { position: relative; z-index: 1; max-width: 70ch; margin: 0; font-size: 16px; line-height: 1.55; color: var(--mut); }
.dmm-tests__sub b { color: var(--ink); font-weight: 600; }
.dmm-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; position: relative; z-index: 1; }
.dmm-note { --slip: #FBF8F2; position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 22px 8px; border-radius: 3px 3px 0 0; background: var(--slip); box-shadow: 0 24px 36px -26px rgba(35, 28, 23, .75), 0 0 0 1px rgba(35, 28, 23, .1); rotate: calc((var(--i) - 1) * .8deg); }
.dmm-note::after { content: ""; position: relative; display: block; height: 14px; margin: auto -22px -1px; background: radial-gradient(circle at 50% 100%, transparent 5.5px, var(--slip) 6.2px) 0 0 / 15px 14px repeat-x; }
.dmm-note__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--line2); }
.dmm-note__tab { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; font: 600 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--dated); font-variant-numeric: tabular-nums; }
.dmm-note__n { font: 600 22px/1 var(--f-ui); letter-spacing: 0; color: var(--ink); }
.dmm-note__of { letter-spacing: .1em; }
.dmm-note__code { flex: 0 0 74px; height: 22px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: .72; }
.dmm-note__rows { margin: 0; display: flex; flex-direction: column; }
.dmm-note__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dmm-note__row:first-child { padding-top: 0; }
.dmm-note__row dt { margin: 0; padding-top: 3px; font: 600 11px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--dated); }
.dmm-note__row dd { margin: 0; font: 400 15.5px/1.5 var(--f-ui); color: #2f261f; text-wrap: pretty; }
.dmm-note__row--why { border-bottom: 0; }
.dmm-note__foot { margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px 0 4px; border-top: 1px solid var(--line2); }
.dmm-note__foot > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; }
.dmm-note__foot dt { margin: 0; font: 600 11px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--dated); padding-top: 2px; }
.dmm-note__foot dd { margin: 0; font: 500 14px/1.45 var(--f-ui); color: #2f261f; }
@media (max-width: 1099px) { .dmm-notes { grid-template-columns: minmax(0, 1fr); gap: 22px; } .dmm-note { rotate: none; } }
@media (max-width: 699px) {
  .dmm-note__row, .dmm-note__foot > div { grid-template-columns: minmax(0, 1fr); }
  .dmm-band__bow { width: 120px; margin-left: -60px; top: -30px; }
}

/* reveals: a sheet's parts come up as they come into view (before-states only with the script and motion) */
.th-js .dir-mashmoom-a [data-dir-reveal]:not(.dmm-in) { opacity: 0; translate: 0 26px; }
.th-js .dir-mashmoom-a [data-dir-reveal].dmm-in { transition: opacity .6s ease calc(var(--i, 0) * 90ms), translate .8s var(--ease) calc(var(--i, 0) * 90ms); }

/* the signature (shared sig-bloom.njk) sits inside the direction's root: its header wears the direction's type, and its stage is the same paper */
.dir-mashmoom-a .th-bloomwrap .th-hd__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(46px, 6vw, 86px); line-height: 1; letter-spacing: .004em; text-wrap: balance; color: var(--ink); }
.dir-mashmoom-a .th-bloomwrap .th-hd__eyebrow { color: var(--dated); font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: .2em; }
.dir-mashmoom-a .th-bloomwrap .th-hd__aside { font-size: 17px; line-height: 1.55; max-width: 46ch; color: var(--mut); }
.dir-mashmoom-a .th-bloom { position: relative; border-radius: 22px; padding: calc(var(--dmm-pad)) var(--dmm-pad) calc(var(--dmm-pad) + 8px); gap: clamp(28px, 3.4vw, 48px); color: var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #F3ECE0, var(--paper) 38%, #EAE1D1);
  box-shadow: inset 0 0 0 1px rgba(35, 28, 23, .1), 0 44px 80px -54px #000; }
.dir-mashmoom-a .th-bloom__stage { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.dir-mashmoom-a .th-bloom__stage :focus-visible { outline-color: var(--ink); }
@media (max-width: 699px) { .dir-mashmoom-a .th-bloom { padding: 16px 14px 14px; border-radius: 18px; } }

/* The hero's cut-outs on a phone: the stage is tight, and the shared positions put them across the film's edges. Here they rest clear of the film and the pause button. */
@media (max-width: 699px) {
  .th-hero__scene > .th-float:nth-child(1) { left: 4%; top: 80%; }
  .th-hero__scene > .th-float:nth-child(2) { left: 84%; top: 82%; }
  .th-hero__scene > .th-float:nth-child(3) { display: none; }
  .th-hero__scene > .th-float:nth-child(4) { left: 66%; top: 80%; }
  .th-hero__scene > .th-float:nth-child(5) { display: none; }
}

/* =====================================================================================================================
   Calm: reduced motion, or a screen under 600px tall. Every finished state, static: the flaps open, the ribbon drawn and tied, the fog wiped, every card on its front, the bunch tied with its ten
   stems in a grid, the pins in, nothing pinned, nothing animates.
   ===================================================================================================================== */
@media (prefers-reduced-motion: reduce), (max-height: 599px) {
  .dir-mashmoom-a [data-dir-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .dir-mashmoom-a *, .dir-mashmoom-a *::before, .dir-mashmoom-a *::after { animation: none !important; }
  .dmm-fold { display: none; }
  .dir-mashmoom-a .dmm-brief, .dir-mashmoom-a .dmm-define, .dir-mashmoom-a .dmm-design, .dir-mashmoom-a .dmm-opt { padding-top: calc(var(--dmm-pad) + 12px); }
  .dmm-ribbon { --r: 1; }
  .dmm-bucket, .dmm-door { --w: 1; }
  .dir-mashmoom-a .dmm-tie, .dir-mashmoom-a .dmm-stem, .dir-mashmoom-a .dmm-pin, .dir-mashmoom-a .dmm-bouquet { --p: 1; --ik: 1; --c: 10; }
  .dmm-card, .dmm-card__face, .dmm-row, .dmm-hl, .dmm-pin, .dmm-pin__img, .dmm-pin::before, .dmm-dec__body, .dmm-dec__n, .dmm-spool__panel, .dmm-spool__ic, .dmm-spool__knob::before, .dmm-spool__knob::after,
  .dmm-paper, .dmm-paper__ok, .dmm-tick, .dmm-stem, .dmm-stem__ink, .dmm-stem__edge { transition: none !important; }
  .dmm-band { --b: 1; --bow: 1; }
}
@media (max-height: 599px) and (min-width: 1100px) {
  .dmm-stems { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 02's camera: the time-lapse of the bouquet opening over seven days, in an aluminium frame at the head of the section. It plays while it is on screen; its pause button is 44px. */
.dmm-define .th-hd { align-items: flex-end; }
.dmm-define .th-hd__aside { flex: 1 1 260px; }
.dmm-cam { margin: 0; flex: none; width: clamp(150px, 15vw, 206px); }
.dmm-cam__frame { position: relative; aspect-ratio: 1; padding: 8px; border-radius: 4px; background: linear-gradient(145deg, #d9dddd, #a9b0b2 60%, #c5cbcc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 24px 34px -24px rgba(35, 28, 23, .8); }
.dmm-cam__still, .dmm-cam__vid { position: absolute; left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; background: #1a1613; }
.dmm-cam__vid { opacity: 0; transition: opacity .6s ease; }
.dmm-cam__frame.is-playing .dmm-cam__vid { opacity: 1; }
.dmm-pause { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(35, 28, 23, .74); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dmm-pause[hidden] { display: none; }
.dmm-pause__play { display: none; }
.dmm-pause[aria-pressed="true"] .dmm-pause__pause { display: none; }
.dmm-pause[aria-pressed="true"] .dmm-pause__play { display: block; }
/* on a phone the film takes the column (up to 360px, the one 480px film still sharp), so the 44px pause button sits on the frame's corner, over the empty wall, not over the vase */
@media (max-width: 699px) { .dmm-cam { width: min(100%, 360px); } }