/* core/closing/006_the_knot — comments: docs/inv06_css_notes.md (moved out for the before-tap budget, A1489) */
.cl006 {
  --cl006-pw: min(calc(100cqw - 32px), 420px);
  --cl006-u: calc(var(--cl006-pw) * .218);
  --cl006-tr: min(48vw, 200px);
  --cl006-bl: min(42vw, 172px);
  --cl006-avail: calc(var(--cl006-pw) * .66);
  --cl006-foot: calc(var(--k-s-6, 32px) + var(--k-s-8, 64px) + var(--cl006-link, 64px) + env(safe-area-inset-bottom, 0px));
  position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; touch-action: pan-y;
  margin-bottom: calc(-1 * var(--cl006-foot));
  background: var(--k-light-ground); color: var(--k-ink); text-align: center;
}
.cl006__hold {
  position: relative; height: 100vh; height: 100svh; overflow: clip;
  display: flex; align-items: flex-end; justify-content: center; container-type: inline-size;
  padding: 44px 0 calc(var(--cl006-foot) + var(--cl006-gap, 24px));
}
.cl006__box { position: relative; width: var(--cl006-pw); }
.cl006__panel { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.cl006__panel--back { z-index: 1; fill: color-mix(in srgb, var(--k-card) 50%, var(--k-paper-deep, var(--k-paper))); filter: drop-shadow(5px 8px 9px rgb(47 42 36 / .10)); }
.cl006__panel--front { z-index: 2; filter: drop-shadow(4px 7px 9px rgb(47 42 36 / .12)); }
.cl006__paper { fill: var(--k-card); }
.cl006__edge { fill: none; stroke: var(--k-foil); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.cl006__edge--in { display: none; stroke-width: 1px; opacity: .75; }
.cl006__card {
  position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--cl006-tr) * .74) 17% calc(var(--cl006-bl) * .36);
}
.cl006__line { max-width: 100%; font: 400 clamp(2.1rem, 9vw, 2.7rem)/1.2 var(--k-font-script); color: var(--c-primary); overflow-wrap: anywhere; text-wrap: balance; }
.cl006-names { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 10px; font-weight: 400; }
.cl006-name {
  display: block; max-width: 100%; text-wrap: balance; overflow-wrap: anywhere;
  font: 500 max(1.6rem, min(clamp(2rem, 8.6vw, 3rem), calc(var(--cl006-avail) / (var(--cl006-len, 8) * .66))))/1.06 var(--k-font-display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--k-ink);
}
.cl006-amp { display: block; margin: .06em 0 .02em; font: 400 1.7rem/1.1 var(--k-font-script); color: var(--c-primary); }
.cl006__bowroom { position: relative; flex: none; width: calc(var(--cl006-u) * 2.5); height: calc(var(--cl006-u) * 1.82); margin-top: 12px; }
.cl006__bow { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; filter: drop-shadow(1px 3px 3px rgb(96 74 44 / .2)); }
.cl006__ribbon { fill: none; stroke: url(#cl006-foil); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.cl006__ribbon { opacity: 0; }
.cl006__fill-l { fill: url(#cl006-loop-l); }
.cl006__fill-r { fill: url(#cl006-loop-r); }
.cl006__fill-tl { fill: url(#cl006-tail-l); }
.cl006__fill-tr { fill: url(#cl006-tail-r); }
.cl006__fill-kn { fill: url(#cl006-knot); }
.cl006__turn--l { fill: url(#cl006-turn-l); }
.cl006__turn--r { fill: url(#cl006-turn-r); }
.cl006__crease { fill: none; stroke: color-mix(in srgb, var(--k-foil) 55%, var(--c-primary-dark)); stroke-width: 2.4px; stroke-linecap: round; opacity: .38; }
.cl006-bow__light { opacity: 0; pointer-events: none; }
.cl006__foot { position: absolute; left: 0; right: 0; bottom: 0; height: var(--cl006-foot); visibility: hidden; pointer-events: none; }
.cl006__drop {
  position: absolute; z-index: 0; max-width: none; overflow: visible;
  left: calc(max(28px, 50cqw - 300px) - (50cqw - var(--cl006-pw) / 2));
  width: max(2px, calc(50cqw - var(--cl006-pw) * .2 - max(28px, 50cqw - 300px)));
  bottom: calc(100% - 44px); height: 100vh; height: 100svh;
}
.cl006__spray { z-index: 5; }
.cl006__spray--tr { width: var(--cl006-tr); right: calc(var(--cl006-tr) * -.17); top: calc(var(--cl006-tr) * -.2); }
.cl006__spray--bl { width: var(--cl006-bl); left: calc(var(--cl006-bl) * -.2); bottom: calc(var(--cl006-bl) * -.24); }
.cl006:not(.is-near) .k-spray__tint { display: none; }
.js.motion-reduce .cl006:not(.is-near) .k-spray__tint { display: block; }
.cl006.is-near .cl006__spray--tr .k-spray__tint--petal, .js.motion-reduce .cl006 .cl006__spray--tr .k-spray__tint--petal { -webkit-mask-image: url("assets/close-tr-r2-day-petal.webp"), url("assets/close-tr-r2-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/close-tr-r2-day-petal.webp"), url("assets/close-tr-r2-day.webp"); mask-composite: intersect; }
.cl006.is-near .cl006__spray--tr :is(.k-spray__tint--boost, .k-spray__tint--deep), .js.motion-reduce .cl006 .cl006__spray--tr :is(.k-spray__tint--boost, .k-spray__tint--deep) { -webkit-mask-image: url("assets/close-tr-r2-day-petal.webp"), url("assets/close-tr-r2-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/close-tr-r2-day-petal.webp"), url("assets/close-tr-r2-day.webp"); mask-composite: intersect; }
.cl006.is-near .cl006__spray--tr .k-spray__tint--leaf, .js.motion-reduce .cl006 .cl006__spray--tr .k-spray__tint--leaf { -webkit-mask-image: url("assets/close-tr-r2-day-leaf.webp"), url("assets/close-tr-r2-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/close-tr-r2-day-leaf.webp"), url("assets/close-tr-r2-day.webp"); mask-composite: intersect; }
.cl006.is-near .cl006__spray--tr .k-spray__tint--gold, .js.motion-reduce .cl006 .cl006__spray--tr .k-spray__tint--gold { -webkit-mask-image: url("assets/close-tr-r2-day-gold.webp"), url("assets/close-tr-r2-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/close-tr-r2-day-gold.webp"), url("assets/close-tr-r2-day.webp"); mask-composite: intersect; }
.cl006.is-near .cl006__spray--bl .k-spray__tint--petal, .js.motion-reduce .cl006 .cl006__spray--bl .k-spray__tint--petal { -webkit-mask-image: url("assets/close-bl-r2-day-petal.webp"), url("assets/close-bl-r2-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/close-bl-r2-day-petal.webp"), url("assets/close-bl-r2-day.webp"); mask-composite: intersect; }
.cl006.is-near .cl006__spray--bl :is(.k-spray__tint--boost, .k-spray__tint--deep), .js.motion-reduce .cl006 .cl006__spray--bl :is(.k-spray__tint--boost, .k-spray__tint--deep) { -webkit-mask-image: url("assets/close-bl-r2-day-petal.webp"), url("assets/close-bl-r2-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/close-bl-r2-day-petal.webp"), url("assets/close-bl-r2-day.webp"); mask-composite: intersect; }
.cl006.is-near .cl006__spray--bl .k-spray__tint--leaf, .js.motion-reduce .cl006 .cl006__spray--bl .k-spray__tint--leaf { -webkit-mask-image: url("assets/close-bl-r2-day-leaf.webp"), url("assets/close-bl-r2-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/close-bl-r2-day-leaf.webp"), url("assets/close-bl-r2-day.webp"); mask-composite: intersect; }
.cl006.is-near .cl006__spray--bl .k-spray__tint--gold, .js.motion-reduce .cl006 .cl006__spray--bl .k-spray__tint--gold { -webkit-mask-image: url("assets/close-bl-r2-day-gold.webp"), url("assets/close-bl-r2-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/close-bl-r2-day-gold.webp"), url("assets/close-bl-r2-day.webp"); mask-composite: intersect; }
.cl006__spray .k-spray__base { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.cl006__thread { display: none; position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.cl006.has-knot .cl006__thread { display: block; }
.cl006.has-knot .cl006__drop { visibility: hidden; }
.cl006__thread-x { position: absolute; top: 0; left: var(--k-thread-x); width: 0; height: 0; visibility: hidden; }
.cl006__stage { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
@media (min-width: 768px) {
  .cl006__ribbon { stroke-width: 1.6px; }
  .cl006 { --cl006-pw: 520px; --cl006-tr: 270px; --cl006-bl: 230px; --cl006-avail: 330px; --cl006-gap: 48px; }
  .cl006__card { padding: 190px 19% 120px; }
  .cl006__line { font-size: 3rem; }
  .cl006-amp { font-size: 2rem; }
  .cl006__edge--in { display: block; }
  .cl006__spray--tr { right: -110px; top: -70px; }
  .cl006__spray--bl { left: -100px; bottom: -70px; }
}
@media (min-width: 1200px) {
  .cl006 { --cl006-pw: 680px; --cl006-u: calc(var(--cl006-pw) * .19); --cl006-tr: 480px; --cl006-bl: 420px; --cl006-avail: 370px; --cl006-gap: 24px; }
  .cl006__card { padding: 104px 23% 52px; }
  .cl006__line { font-size: 3rem; }
  .cl006-name { font-size: max(1.6rem, min(3rem, calc(var(--cl006-avail) / (var(--cl006-len, 8) * .66)))); }
  .cl006-amp { font-size: 2rem; }
  .cl006__spray--tr { right: -352px; top: -40px; }
  .cl006__spray--bl { left: -300px; bottom: -30px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .cl006 { --cl006-tr: 420px; }
  .cl006__spray--tr { right: -300px; }
}
@media (max-height: 760px) and (min-width: 768px) {
  .cl006 { --cl006-pw: 540px; --cl006-u: calc(var(--cl006-pw) * .17); --cl006-tr: 320px; --cl006-bl: 280px; --cl006-avail: 340px; }
  .cl006__card { padding-top: 64px; padding-bottom: 36px; }
  .cl006__line { font-size: 2.4rem; }
  .cl006-name { font-size: max(1.5rem, min(2.4rem, calc(var(--cl006-avail) / (var(--cl006-len, 8) * .66)))); }
  .cl006__spray--tr { right: -215px; top: -20px; }
  .cl006__spray--bl { left: -200px; bottom: -16px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .cl006 { --cl006-tr: min(36vw, 132px); --cl006-bl: min(32vw, 118px); --cl006-u: calc(var(--cl006-pw) * .16); }
  .cl006__hold { padding-top: 36px; }
  .cl006__line { font-size: 1.75rem; }
  .cl006-name { font-size: max(1.3rem, min(1.8rem, calc(var(--cl006-avail) / (var(--cl006-len, 8) * .66)))); }
  .cl006-amp { font-size: 1.4rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .cl006 { --cl006-pw: min(520px, 76vw); --cl006-u: 40px; --cl006-tr: 170px; --cl006-bl: 150px; --cl006-avail: 300px; }
  .cl006__card { padding: 28px 22% 20px; }
  .cl006__line { font-size: 1.8rem; }
  .cl006-name { font-size: 1.5rem; }
  .cl006__spray--tr { right: -120px; top: -20px; }
  .cl006__spray--bl { left: -110px; bottom: -20px; }
}