/* core/opening/026_thread_buttons — comments: docs/inv06_css_notes.md (moved out for the before-tap budget, A1489) */
.op026 {
  --op026-vh: 1vh; --op026-k: 1.5; --op026-bd: 36px; --op026-bw: 92px; --op026-f: .46;
  --op026-pw: calc(100vw - 12px); --op026-px: 6px; --op026-pt: 6px;
  --op026-ph: max(calc(100 * var(--op026-vh) - 12px), calc(113vw + 510px));
  --op026-fold: calc(var(--op026-pt) + var(--op026-ph) * var(--op026-f));
  --op026-foil: var(--k-foil, #C49F63);
  position: fixed; inset: 0; z-index: 100; overflow: hidden; touch-action: none; overscroll-behavior: contain;
  color: var(--k-ink, #2F2A24); text-align: center;
}
@supports (height: 1svh) { .op026 { --op026-vh: 1svh; } }
@media (min-width: 768px) {
  .op026 {
    --op026-k: 1.8; --op026-bd: 43px; --op026-bw: 120px; --op026-f: .52; --op026-ay: .865;
    --op026-pw: 600px; --op026-px: calc(50vw - 300px);
    --op026-ph: max(min(1060px, calc(100 * var(--op026-vh) - 112px)), 1020px);
    --op026-pt: max(56px, calc((100 * var(--op026-vh) - var(--op026-ph)) / 2));
  }
}
@media (min-width: 1200px) {
  .op026 {
    --op026-k: 1.75; --op026-bd: 42px; --op026-bw: 120px; --op026-f: .46; --op026-ay: .855;
    --op026-pw: min(720px, 52vw); --op026-px: calc(50vw - min(720px, 52vw) / 2);
    --op026-ph: max(calc(100 * var(--op026-vh) - 80px), 800px);
    --op026-pt: max(40px, calc((100 * var(--op026-vh) - var(--op026-ph)) / 2));
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .op026 {
    --op026-k: 1; --op026-bd: 24px; --op026-bw: 64px; --op026-f: .3;
    --op026-pw: min(560px, 80vw); --op026-px: calc(50vw - min(560px, 80vw) / 2); --op026-pt: 16px; --op026-ph: 600px;
  }
}
@media (max-height: 700px) { .op026 .op026-tail { display: none; } }
.op026 .op026-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.op026__ground { position: absolute; inset: 0; background: var(--k-paper, #F6F1E7); }
.op026__ground::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: rgb(59 51 43);
  -webkit-mask: var(--k-grain, linear-gradient(transparent, transparent)); mask: var(--k-grain, linear-gradient(transparent, transparent));
}
.op026__papers { position: absolute; z-index: 1; left: var(--op026-px); top: var(--op026-pt); width: var(--op026-pw); height: var(--op026-ph); }
.op026__back, .op026-part__art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.op026__back--2 { fill: color-mix(in srgb, var(--k-paper-deep, #EEE7DA) 80%, #D9CFBE); filter: drop-shadow(6px 9px 10px rgb(47 42 36 / .10)); }
.op026__back--1 { fill: color-mix(in srgb, var(--k-card, #FBF8F1) 35%, var(--k-paper-deep, #EEE7DA)); filter: drop-shadow(5px 8px 9px rgb(47 42 36 / .10)); }
@media (max-width: 767px) {
  .op026__back { -webkit-mask-image: linear-gradient(#000 calc(100% - 120px), transparent); mask-image: linear-gradient(#000 calc(100% - 120px), transparent); }
}
.op026-part { position: absolute; inset: 0; will-change: transform; }
.op026-part--body { z-index: 2; filter: drop-shadow(4px 7px 9px rgb(47 42 36 / .12)); }
.op026-part--flap { z-index: 3; filter: drop-shadow(0 4px 5px rgb(60 45 20 / .16)) drop-shadow(0 9px 14px rgb(60 45 20 / .12)); }
.op026-card__paper { fill: url(#op026-wrap); }
.op026-card__linen { fill: url(#op026-linen-p); }
@media (min-width: 768px) { .op026-card__linen { fill: url(#op026-linen-t); } }
@media (min-width: 1200px) { .op026-card__linen { fill: url(#op026-linen-d); } }
@media (max-height: 500px) and (orientation: landscape) { .op026-card__linen { fill: url(#op026-linen-l); } }
.op026-card__edge { fill: none; stroke: var(--op026-foil); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.op026-card__edge--in { display: none; stroke-width: 1px; opacity: .75; }
@media (min-width: 768px) { .op026-card__edge--in { display: inline; } }
.op026-part--flap .op026-part__g { clip-path: url(#op026-flap-p); }
.op026-part--body .op026-part__g { clip-path: url(#op026-body-p); }
.op026-lip, .op026-lip-hi { display: none; fill: none; vector-effect: non-scaling-stroke; }
.op026-lip { stroke: var(--op026-foil); stroke-width: 1.5px; }
.op026-lip-hi { stroke: rgb(255 255 255 / .55); stroke-width: 3.2px; }
.op026-lip--p, .op026-lip-hi--p { display: inline; }
@media (min-width: 768px) and (max-width: 1199px) {
  .op026-part--flap .op026-part__g { clip-path: url(#op026-flap-t); }
  .op026-part--body .op026-part__g { clip-path: url(#op026-body-t); }
  .op026-lip--p, .op026-lip-hi--p { display: none; }
  .op026-lip--t, .op026-lip-hi--t { display: inline; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .op026-part--flap .op026-part__g { clip-path: url(#op026-flap-l); }
  .op026-part--body .op026-part__g { clip-path: url(#op026-body-l); }
  .op026-lip--p, .op026-lip--t, .op026-lip-hi--p, .op026-lip-hi--t { display: none; }
  .op026-lip--l, .op026-lip-hi--l { display: inline; }
}
.op026__words {
  position: absolute; z-index: 6; left: 50%; top: calc(var(--op026-pt) + var(--op026-ph) * var(--op026-f) * .47);
  width: calc(var(--op026-pw) * .78); transform: translate(-50%, -50%); --op026-avail: calc(var(--op026-pw) * .62);
}
.op026__names {
  margin: 0; text-wrap: balance; overflow-wrap: break-word; color: var(--k-ink, #2F2A24);
  font: 500 max(1.6rem, min(clamp(2.1rem, 9vw, 3.1rem), calc(var(--op026-avail) / (var(--op026-len, 6) * .78))))/1.06 var(--k-font-display, serif);
  letter-spacing: .14em; text-transform: uppercase;
}
.op026__amp { display: inline-block; margin: .06em 0 .02em; font: 400 1.05em/1 var(--k-font-script, cursive); letter-spacing: 0; text-transform: none; color: var(--c-primary, #84632A); }
.op026__rule { display: block; width: 64px; height: 10px; margin: 16px auto 0; overflow: visible; }
.op026__rule-l { fill: none; stroke: var(--op026-foil); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: .85; }
.op026__heart { fill: var(--op026-foil); }
.op026__date { margin: 12px 0 0; font: 500 .78rem/1.5 var(--k-font-body, serif); letter-spacing: .2em; text-transform: uppercase; color: var(--k-ink-soft, #5A5048); }
@media (min-width: 768px) { .op026__date { font-size: .9rem; } }
.op026__fasten { position: absolute; z-index: 7; left: 50%; top: var(--op026-fold); width: 0; height: 0; }
.op026-ride { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.op026-ride--bud { z-index: 1; }
.op026-ride--t, .op026-ride--b { z-index: 3; }
.op026-budwrap { position: absolute; left: calc(var(--op026-bw) * .398); top: calc(var(--op026-bw) * .07); width: 0; height: 0; }
.op026 .op026__bud { width: var(--op026-bw); left: calc(var(--op026-bw) / -2); top: calc(var(--op026-bw) * -.4375); rotate: 90deg; }
.op026 .op026__bud .k-spray__base { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.op026-thread, .op026-tail {
  position: absolute; z-index: 2; left: calc(-60px * var(--op026-k)); top: calc(-50px * var(--op026-k));
  width: calc(120px * var(--op026-k)); height: calc(210px * var(--op026-k)); max-width: none; overflow: visible; pointer-events: none;
}
.op026-tail { will-change: transform; transform-origin: 53.33% 38.1%; }
.op026-thread path, .op026-tail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.op026-turn path:not(.op026-cord__tw) { stroke-dasharray: 1; stroke-dashoffset: 0; }
.op026-cord__sh { stroke: rgb(60 45 25 / .28); stroke-width: 2.1; transform: translate(.6px, 1.2px); filter: url(#op026-soft); }
.op026-cord__ud { stroke: color-mix(in srgb, var(--op026-foil) 55%, #3A2A14); stroke-width: 1.7; opacity: .5; transform: translate(.3px, .4px); }
.op026-cord__bd { stroke: var(--op026-foil); stroke-width: 1.7; }
.op026-cord__tw { stroke: color-mix(in srgb, var(--op026-foil) 45%, #3A2A14); stroke-width: 1.4; stroke-linecap: butt; stroke-dasharray: .5 .7; opacity: .38; }
.op026-cord__hi { stroke: color-mix(in srgb, var(--op026-foil) 35%, #FFF6E2); stroke-width: .7; transform: translate(-.35px, -.4px); }
.op026-tail__fray { fill: none; stroke: var(--op026-foil); stroke-width: .6; stroke-linecap: round; }
.op026-tail__knot { fill: var(--op026-foil); }
.op026-btn {
  position: absolute; left: calc(var(--op026-bd) / -2); width: var(--op026-bd); height: var(--op026-bd); border-radius: 50%;
  background:
    radial-gradient(circle at 37% 50%, #5A4A38 0 7%, rgb(90 74 56 / 0) 8.6%),
    radial-gradient(circle at 63% 50%, #5A4A38 0 7%, rgb(90 74 56 / 0) 8.6%),
    radial-gradient(circle at 34% 30%, #FFFFFF 0 8%, #F6F1EA 22%, #E6DED3 58%, #CFC4B6 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), inset 0 -2px 3px rgb(60 45 25 / .18), inset 0 2px 2px rgb(255 255 255 / .8),
    0 0 0 1px color-mix(in srgb, var(--op026-foil) 70%, transparent);
  filter: drop-shadow(0 1.5px 1.2px rgb(60 45 25 / .30)) drop-shadow(0 4px 6px rgb(60 45 25 / .12));
}
.op026-btn--t { top: calc(-20px * var(--op026-k) - var(--op026-bd) / 2); }
.op026-btn--b { top: calc(20px * var(--op026-k) - var(--op026-bd) / 2); }
.op026-btn::before { content: ""; position: absolute; inset: 19%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(60 45 25 / .10), 0 .5px 0 rgb(255 255 255 / .6); }
.op026-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: soft-light;
  background: conic-gradient(from 210deg, rgb(255 214 228 / .32), rgb(214 236 255 / .30), rgb(222 255 232 / .26), rgb(255 238 206 / .32), rgb(255 214 228 / .32));
}
.op026__actions {
  position: absolute; z-index: 8; left: 50%; bottom: calc(max(64px, 12 * var(--op026-vh)) + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%);
}
@media (min-width: 768px) and (min-height: 501px) {
  .op026__actions { bottom: auto; top: calc(var(--op026-pt) + var(--op026-ph) * var(--op026-ay)); transform: translate(-50%, -50%); }
}
.op026__hint { margin: 10px 0 0; font: 500 .8rem/1.4 var(--k-font-body, serif); color: var(--k-ink-soft, #5A5048); }
.op026-knot-hit {
  position: absolute; z-index: 9; left: 50%; top: var(--op026-fold); width: 112px; height: 112px;
  margin: -56px 0 0 -56px; border-radius: 50%; -webkit-tap-highlight-color: transparent;
}
/*TINT>*/
.op026 .k-spray {
  position: absolute; isolation: isolate; max-width: none; pointer-events: none;
  filter: drop-shadow(2px 6px 9px rgb(96 74 44 / .11));
}
.op026 .k-spray__base { display: block; width: 100%; height: auto; max-width: none; }
.op026 .k-spray__tint {
  position: absolute; inset: 0; mix-blend-mode: color; background: transparent;
  -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.op026 .k-spray__tint--deep { mix-blend-mode: color-burn; }
.op026 .k-spray__tint--boost { mix-blend-mode: multiply; }
@supports (color: oklab(from red l a b / clamp(0, (max(l - .5, .5 - l) - .006) * 15, .92))) and (color: color(from red srgb calc(min(1, (r * .3 + g * .59 + b * .11) / (.875 - .125 * clamp(0, (.70 - (r * .3 + g * .59 + b * .11)) * 4, 1)))) g b / clamp(0, (.62 - r) * 4, 1))) {
  .op026 .k-spray__tint--petal { background: oklab(from var(--c-bloom, #F2E4CC) l a b / clamp(0, (max(l - .9237, .9237 - l) + max(a - .0054, .0054 - a) + max(b - .0349, .0349 - b) - .006) * 15, .92)); }
  .op026 .k-spray__tint--leaf { background: oklab(from var(--c-secondary) l a b / clamp(0, (max(l - .5483, .5483 - l) + max(a + .0212, -.0212 - a) + max(b - .0385, .0385 - b) - .006) * 15, .92)); }
  .op026 .k-spray__tint--gold { background: transparent; }
  .op026 .k-spray__tint--deep { background: color(from var(--c-bloom, #F2E4CC) srgb .5 .5 .5 / clamp(0, (.70 - (r * .3 + g * .59 + b * .11)) * 4, 1)); }
  .op026 .k-spray__tint--boost { background: color(from var(--c-bloom, #F2E4CC) srgb calc(min(1, (r * .3 + g * .59 + b * .11) / (.875 - .125 * clamp(0, (.70 - (r * .3 + g * .59 + b * .11)) * 4, 1)))) calc(min(1, (r * .3 + g * .59 + b * .11) / (.875 - .125 * clamp(0, (.70 - (r * .3 + g * .59 + b * .11)) * 4, 1)))) calc(min(1, (r * .3 + g * .59 + b * .11) / (.875 - .125 * clamp(0, (.70 - (r * .3 + g * .59 + b * .11)) * 4, 1)))) / clamp(0, ((.875 - .125 * clamp(0, (.70 - (r * .3 + g * .59 + b * .11)) * 4, 1)) - (r * .3 + g * .59 + b * .11)) * 20, 1)); }
}
/*<TINT*/
.op026 .op026__bud :is(.k-spray__tint--petal, .k-spray__tint--boost, .k-spray__tint--deep) { -webkit-mask-image: url("assets/bud-a-day-petal.webp"), url("assets/bud-a-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/bud-a-day-petal.webp"), url("assets/bud-a-day.webp"); mask-composite: intersect; }
.op026 .op026__bud .k-spray__tint--leaf { -webkit-mask-image: url("assets/bud-a-day-leaf.webp"), url("assets/bud-a-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/bud-a-day-leaf.webp"), url("assets/bud-a-day.webp"); mask-composite: intersect; }
.op026 .op026__bud .k-spray__tint--gold { -webkit-mask-image: url("assets/bud-a-day-gold.webp"), url("assets/bud-a-day.webp"); -webkit-mask-composite: source-in; mask-image: url("assets/bud-a-day-gold.webp"), url("assets/bud-a-day.webp"); mask-composite: intersect; }
html:not(.motion-reduce) .op026-tail { animation: op026-sway 5.5s ease-in-out infinite alternate; }
@keyframes op026-sway { from { rotate: -2deg; } to { rotate: 2deg; } }
.op026.is-opening { pointer-events: none; animation: op026-out 350ms ease 1650ms forwards; }
.op026.is-opening .op026__actions { opacity: 0; translate: 0 6px; transition: opacity 200ms ease, translate 200ms ease; }
.op026.is-opening .op026-turn--3 path:not(.op026-cord__tw) { animation: op026-unwind 300ms cubic-bezier(.45,0,.55,1) 0ms both; }
.op026.is-opening .op026-turn--2 path:not(.op026-cord__tw) { animation: op026-unwind 300ms cubic-bezier(.45,0,.55,1) 170ms both; }
.op026.is-opening .op026-turn--1 path:not(.op026-cord__tw) { animation: op026-unwind 300ms cubic-bezier(.45,0,.55,1) 340ms both; }
.op026.is-opening .op026-turn--3 .op026-cord__tw { animation: op026-fade 90ms linear 0ms both; }
.op026.is-opening .op026-turn--2 .op026-cord__tw { animation: op026-fade 90ms linear 170ms both; }
.op026.is-opening .op026-turn--1 .op026-cord__tw { animation: op026-fade 90ms linear 340ms both; }
.op026.is-opening .op026-btn--t { animation: op026-twist-t 760ms cubic-bezier(.3,.7,.4,1) both; }
.op026.is-opening .op026-btn--b { animation: op026-twist-b 760ms cubic-bezier(.3,.7,.4,1) both; }
.op026.is-opening .op026-tail { animation: op026-drop 780ms cubic-bezier(.5,0,.75,0) 120ms both; }
.op026.is-opening .op026-budwrap { animation: op026-letgo 320ms cubic-bezier(.3,.7,.4,1) 380ms both; }
.op026.is-opening .op026-part--flap { animation: op026-lift 1060ms linear 640ms both; }
.op026.is-opening .op026-part--body { animation: op026-sink 1060ms linear 640ms both; }
.op026.is-opening .op026__words { animation: op026-lift 1060ms linear 640ms both, op026-fade 320ms ease 680ms both; }
.op026.is-opening .op026-ride--t { animation: op026-lift 1060ms linear 640ms both, op026-fade 300ms ease 780ms both; }
.op026.is-opening .op026-ride--b, .op026.is-opening .op026-ride--bud { animation: op026-sink 1060ms linear 640ms both, op026-fade 300ms ease 780ms both; }
.op026.is-opening .op026__ground, .op026.is-opening .op026__back { animation: op026-fade 600ms ease 900ms both; }
@keyframes op026-unwind { 0% { stroke-dashoffset: 0; opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes op026-twist-t { 0% { rotate: 0deg; } 84% { rotate: -16deg; } 100% { rotate: -12deg; } }
@keyframes op026-twist-b { 0% { rotate: 0deg; } 84% { rotate: 16deg; } 100% { rotate: 12deg; } }
@keyframes op026-drop { 0% { translate: 0 0; rotate: 0deg; opacity: 1; } 36% { opacity: 1; } 100% { translate: 0 30vh; rotate: 14deg; opacity: 0; } }
@keyframes op026-letgo { to { rotate: 6deg; translate: 3px 4px; } }
@keyframes op026-lift {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  15% { translate: 0 -6px; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  30% { opacity: 1; }
  62% { opacity: 0; }
  100% { translate: 0 calc(-22 * var(--op026-vh)); opacity: 0; }
}
@keyframes op026-sink {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  15% { translate: 0 6px; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  30% { opacity: 1; }
  62% { opacity: 0; }
  100% { translate: 0 calc(22 * var(--op026-vh)); opacity: 0; }
}
@keyframes op026-fade { to { opacity: 0; } }
@keyframes op026-out { to { opacity: 0; } }
html.motion-reduce .op026.is-opening { animation: op026-out .4s ease forwards; }
html.motion-reduce .op026 *, html.motion-reduce .op026 *::before, html.motion-reduce .op026 *::after { animation: none !important; transition: none !important; }
html.motion-reduce .op026.is-opening .op026__actions { opacity: 1; translate: none; }