/* ==========================================================================
   Syntropise · The Cabinet · It’ll never mean as much to them
   An essay you can handle, with a heavy ring of keys at its centre.
   Ink and coral on paper, a touch out of register. Everything is ky-.
   ========================================================================== */

.ky-hero,.ky-sec{--sheet:#fbf9f4;--typed:'Courier Prime',ui-monospace,Menlo,monospace}
.ky-sec{overflow-x:clip}
.ky-sec+.ky-sec{padding-top:clamp(40px,5vw,80px)}

/* ---------- shared bits ---------- */
.ky-carry[hidden],.ky-keep[hidden]{display:none!important}
.ky-head{max-width:820px;margin-bottom:clamp(28px,3.6vw,52px)}
.ky-no{margin:0 0 8px;font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1;color:var(--coral-ink);letter-spacing:.02em}
.ky-head .h2{margin-top:0}
.ky-instr{margin-top:14px;max-width:44ch;font-size:1rem;line-height:1.45;color:var(--ink-2)}
.ky-instr span{display:inline}
.ky-beat{font-size:clamp(1.22rem,1.75vw,1.6rem);line-height:1.34;letter-spacing:-.01em;max-width:30ch;font-weight:420}
.ky-beat+.ky-beat{margin-top:clamp(8px,1vw,14px)}
.ky-strong{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.04;letter-spacing:-.012em;max-width:22ch}
.ky-big{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3.5rem);line-height:1;letter-spacing:-.015em;max-width:19ch;text-wrap:balance}
.ky-gap{margin-top:clamp(30px,3.6vw,52px)!important}
.ky-hl{background:linear-gradient(transparent 58%,rgba(245,140,138,.55) 58%,rgba(245,140,138,.55) 92%,transparent 92%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ky-t{transition:color .4s}
.ky-t.ky-reink{animation:kyReink 1.3s var(--ease)}
@keyframes kyReink{0%{color:var(--coral-ink);text-shadow:var(--mx) var(--my) 0 rgba(245,140,138,.85)}70%{color:var(--coral-ink);text-shadow:var(--mx) var(--my) 0 rgba(245,140,138,.85)}100%{text-shadow:0 0 0 rgba(245,140,138,0)}}
.ky-obj{display:inline-block;margin-top:6px;font-size:.92rem;font-weight:580;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--coral-2);padding-bottom:1px;transition:border-color .3s}
.ky-obj:hover{border-color:var(--ink)}

/* entrances */
html.js .ky-rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.js .ky-rv.ky-in{opacity:1;transform:none}

/* ==== THE TAGS AND KEYS (shared by the opening and the ring) =========== */
.ky-kart,.ky-tagw{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.ky-tagw{filter:drop-shadow(3px 3px 0 #f58c8a)}
.ky-kart svg{position:absolute;display:block;max-width:none;overflow:visible}
.ky-kart .ky-iron{fill:#ece5d8;stroke:#141311;stroke-width:2.2;stroke-linejoin:round}
.ky-kart .ky-hatch{fill:url(#hatchL);opacity:.62;pointer-events:none}
.ky-kart .ky-shine{fill:none;stroke:#fbf9f4;stroke-width:1.4;stroke-linecap:round;opacity:.9}
.ky-kart .ky-hit{fill:transparent;pointer-events:all}
.ky-tag{position:absolute;left:0;top:0;transform:translate(-50%,calc(var(--hole,11px) * -1));display:grid;place-items:center;
  width:var(--tw,82px);min-height:calc(var(--tw,82px) * .92);padding:24px 8px 12px;background:var(--sheet);background-image:var(--grain);
  border:2px solid var(--ink);
  clip-path:polygon(22% 0,78% 0,100% 15%,100% 100%,0 100%,0 15%);border-radius:0 0 3px 3px;
  font-family:var(--display);font-weight:700;font-size:var(--tf,.86rem);line-height:1.05;letter-spacing:-.005em;text-align:center;color:var(--ink);text-wrap:balance}
/* the clip-path eats the slanted border and the shadow, so redraw them inside */
.ky-tag::before{content:"";position:absolute;inset:-2px;pointer-events:none;background:
  linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--ink) calc(50% - 1.2px),var(--ink) calc(50% + 1.2px),transparent calc(50% + 1.2px)) 0 0/22% 15% no-repeat,
  linear-gradient(to bottom left,transparent calc(50% - 1.2px),var(--ink) calc(50% - 1.2px),var(--ink) calc(50% + 1.2px),transparent calc(50% + 1.2px)) 100% 0/22% 15% no-repeat}
.ky-tag-hole{position:absolute;left:50%;top:5px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 3px var(--coral-l),0 0 0 4.5px var(--ink)}
.ky-tag-t{position:relative;display:block}

/* ==== OPENING ========================================================== */
.ky-hero{min-height:min(var(--vh,100svh),900px);display:grid;align-items:center;padding:calc(var(--nav-h) + 30px) 0 40px;overflow-x:clip}
.ky-hero-in{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:clamp(20px,4vw,70px);align-items:center}
.ky-title{margin:22px 0 26px;font-size:clamp(3rem,6.6vw,6.4rem);line-height:.93;letter-spacing:-.02em;max-width:11.5ch;text-wrap:balance}
.ky-dek{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.22;letter-spacing:-.01em;color:var(--ink-2);max-width:24ch}
.ky-hero-art{position:relative;height:clamp(400px,66vh,640px);-webkit-tap-highlight-color:transparent}
.ky-hero-svg{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:2}
.ky-kart-hero{z-index:1;cursor:pointer}
.ky-tagw-hero{z-index:3;cursor:pointer}
.ky-tagw-hero{filter:drop-shadow(4px 4px 0 #f58c8a)}
.ky-tagw-hero .ky-tag,.ky-tag-shade .ky-tag{--tw:calc(118px * var(--ks,1.6) / 1.6);--tf:clamp(1rem,1.5vw,1.2rem);--hole:12px;padding:30px 12px 18px}
.ky-kart-shade{z-index:0;pointer-events:none;opacity:.55}
.ky-kart-shade *{fill:url(#dots)!important;stroke:none!important}
.ky-kart-shade .ky-hit,.ky-kart-shade .ky-shine{display:none}
.ky-tag-shade{z-index:0;filter:none;pointer-events:none;opacity:.55}
.ky-tag-shade .ky-tag{border-color:transparent;background:radial-gradient(circle,#f58c8a 1.05px,transparent 1.35px) 0 0/4.2px 4.2px;color:transparent}
.ky-tag-shade .ky-tag::before{display:none}
.ky-str{fill:none;stroke:#141311;stroke-width:1.6;stroke-linecap:round}

/* ==== I. WHAT HAVE YOU BUILT? ========================================== */
.ky-built .ky-beat{max-width:34ch}
.ky-ask{margin-top:clamp(40px,5vw,72px)!important}
.ky-choices{max-width:1040px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(22px,2.6vw,34px)}
.ky-choice{position:relative;display:grid;justify-items:start;align-content:space-between;gap:20px;min-height:150px;padding:18px 18px 18px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--coral-2);text-align:left;transition:transform .4s var(--spring),box-shadow .25s,background .3s,color .3s;-webkit-tap-highlight-color:transparent}
.ky-choice::after{content:"";position:absolute;right:14px;top:14px;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);transition:background .3s,box-shadow .3s}
.ky-ch-ic{width:46px;height:46px}
.ky-ch-ic svg{width:100%;height:100%;overflow:visible}
.ky-ic{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ky-ic-c{fill:url(#gc);transform:translate(2.5px,2px);opacity:.85}
.ky-ch-t{font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,1.5vw,1.36rem);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
@media (hover:hover) and (pointer:fine){.ky-choice:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:5px 7px 0 var(--coral-2)}}
.ky-choice[aria-pressed="true"]{background:var(--ink);color:var(--paper);transform:rotate(-1deg)}
.ky-choice[aria-pressed="true"] .ky-ic{stroke:var(--paper)}
.ky-choice[aria-pressed="true"]::after{background:var(--grain-c),var(--coral-2);box-shadow:inset 0 0 0 3px var(--ink)}
.ky-choice.ky-thump{animation:kyThump .5s cubic-bezier(.2,.9,.25,1.25)}
@keyframes kyThump{0%{transform:rotate(-1deg) scale(1.08)}45%{transform:rotate(-1deg) scale(.95)}100%{transform:rotate(-1deg) scale(1)}}
.ky-turn{margin-top:clamp(44px,5vw,76px)}
.ky-turn .ky-big{margin-top:clamp(26px,3vw,40px);max-width:17ch}

/* ==== II. WE HEAR THIS A LOT =========================================== */
.ky-heard-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:start}
.ky-slip{position:sticky;top:calc(var(--nav-h) + 40px);padding:clamp(28px,3.6vw,48px) clamp(24px,3.4vw,48px);background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--coral-2);transform:rotate(-1.2deg)}
html.js .ky-slip.ky-rv:not(.ky-in){transform:translateY(18px) rotate(-3deg)}
.ky-slip::before{content:"";position:absolute;top:-10px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink),1px 2px 0 rgba(20,19,17,.35)}
.ky-quote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,4.1vw,3.7rem);line-height:.98;letter-spacing:-.015em}
.ky-quote q{quotes:"\201C" "\201D"}
.ky-quote q::before{content:open-quote;margin-left:-.4em;color:var(--coral-ink)}
.ky-quote q::after{color:var(--coral-ink)}
.ky-heard-copy{padding-top:8px}
.ky-heard-copy .ky-strong{margin:clamp(30px,3.6vw,48px) 0 clamp(16px,2vw,24px)}
.ky-weights{list-style:none;margin:16px 0 0;padding:0;display:grid}
.ky-weights li{position:relative;padding:12px 0 12px 40px;border-top:1.5px solid rgba(20,19,17,.8);font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.22}
.ky-weights li:last-child{border-bottom:1.5px solid rgba(20,19,17,.8)}
.ky-weights li::before{content:"";position:absolute;left:2px;top:18px;width:22px;height:16px;border:2px solid var(--ink);border-radius:3px 3px 5px 5px;background:var(--grain-c),var(--coral-2);box-shadow:2px 2px 0 rgba(20,19,17,.25)}
.ky-weights li::after{content:"";position:absolute;left:9px;top:11px;width:8px;height:7px;border:2px solid var(--ink);border-bottom:0;border-radius:5px 5px 0 0}
.ky-ask-s{margin-top:clamp(26px,3vw,40px);font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1.2;letter-spacing:-.01em;max-width:22ch;color:var(--coral-ink)}

/* ==== III. THREE HALF-SENTENCES ======================================== */
.ky-half-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2vw,24px);max-width:900px}
.ky-half{position:relative;display:block;width:100%;padding:clamp(22px,2.8vw,34px) clamp(22px,3vw,40px) clamp(22px,2.8vw,34px);background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);text-align:left;transition:transform .45s var(--spring),box-shadow .3s;-webkit-tap-highlight-color:transparent}
.ky-half-list li:nth-child(1) .ky-half{transform:rotate(-.6deg)}
.ky-half-list li:nth-child(2) .ky-half{transform:rotate(.5deg);margin-left:clamp(0px,4vw,60px);width:calc(100% - clamp(0px,4vw,60px))}
.ky-half-list li:nth-child(3) .ky-half{transform:rotate(-.3deg)}
.ky-half-a{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.04;letter-spacing:-.012em;max-width:24ch}
.ky-half-b{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-weight:440;font-size:clamp(1.45rem,2.6vw,2.25rem);line-height:1.15;letter-spacing:-.01em;color:var(--coral-ink);text-shadow:var(--mx) var(--my) 0 rgba(245,140,138,.8);max-width:30ch;transform-origin:12% 60%}
.ky-half-cue{position:absolute;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,22px);display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border:2px solid var(--ink);border-radius:99px;background:var(--paper);box-shadow:2px 2px 0 var(--coral-2);font-family:var(--sans);font-size:.8rem;font-weight:620;letter-spacing:.02em;transition:opacity .3s,transform .3s var(--spring)}
.ky-half-cue::before{content:"";width:14px;height:14px;border-radius:3px;border:2px solid var(--ink);background:var(--grain-c),var(--coral-2);transform:rotate(-8deg)}
html.js .ky-half:not(.ky-done) .ky-half-b{visibility:hidden;height:0;margin:0;overflow:hidden}
html.js .ky-half:not(.ky-done){padding-right:clamp(130px,14vw,170px)}
html:not(.js) .ky-half-cue,.ky-half.ky-done .ky-half-cue{display:none}
@media (hover:hover) and (pointer:fine){.ky-half:not(.ky-done):hover{transform:translate(-2px,-3px) rotate(0deg)!important;box-shadow:7px 8px 0 var(--ink)}.ky-half:not(.ky-done):hover .ky-half-cue{transform:scale(1.06)}}
.ky-half:not(.ky-done):active{transform:translate(3px,3px)!important;box-shadow:2px 2px 0 var(--ink)}
.ky-half.ky-done{cursor:default}
.ky-half.ky-thump .ky-half-b{animation:kyStampIn .55s cubic-bezier(.2,.9,.25,1.25) .08s both}
.ky-half.ky-thump{animation:kyShake .4s var(--ease) .16s}
@keyframes kyStampIn{0%{opacity:0;transform:scale(1.45) rotate(-2deg);filter:blur(1.5px)}55%{opacity:1;transform:scale(.97) rotate(-.4deg);filter:none}100%{opacity:1;transform:none}}
@keyframes kyShake{30%{translate:0 3px}100%{translate:0 0}}
.ky-notice{margin-top:clamp(34px,4vw,56px)}
.ky-notice .ky-beat{margin-top:10px;font-family:var(--serif);font-style:italic;color:var(--ink-2)}
html.js .ky-notice{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
html.js .ky-notice.ky-on{opacity:1;transform:none}

/* ==== IV. THE QUESTION ================================================= */
.ky-q{padding-top:clamp(70px,9vw,140px)!important;padding-bottom:clamp(70px,9vw,140px)}
.ky-the-q{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,6vw,5.6rem);line-height:.96;letter-spacing:-.02em;max-width:17ch;text-wrap:balance}
.ky-the-q .ky-t{color:var(--coral-ink)}
.ky-answers{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:clamp(30px,4vw,52px)}
.ky-ans{min-height:56px;padding:10px 26px;border:2.5px solid var(--ink);border-radius:99px;background:var(--paper);box-shadow:4px 4px 0 var(--coral-2);font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.01em;transition:transform .14s var(--ease),box-shadow .14s,background .3s,color .3s}
.ky-ans:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--coral-2)}
.ky-ans:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--coral-2)}
.ky-ans[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.ky-neither{flex:0 0 100%;margin-top:2px;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--ink-2)}
.ky-replies{display:grid;margin-top:clamp(26px,3vw,40px);max-width:760px}
.ky-reply{grid-area:1/1;position:relative;padding:clamp(22px,3vw,34px) clamp(22px,3vw,38px) clamp(24px,3vw,36px);background:var(--sheet);background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(245,140,138,.3) 33px 34px),var(--grain);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);font-family:var(--typed);font-size:clamp(1rem,1.2vw,1.12rem);line-height:34px;transform:rotate(.5deg)}
.ky-reply p+p{margin-top:0}
.ky-reply-k{display:inline-block;margin-bottom:6px!important;padding:2px 10px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:.72rem;font-weight:660;letter-spacing:.16em;text-transform:uppercase;line-height:1.8}
.ky-reply-strong{color:var(--coral-ink);font-weight:700}
html.js .ky-replies:not(.ky-has){display:none}
html.js .ky-reply{visibility:hidden;opacity:0}
html.js .ky-reply.ky-on{visibility:visible;opacity:1}
html.js .ky-reply.ky-land{animation:kyLand .6s cubic-bezier(.22,1,.36,1)}
@keyframes kyLand{0%{opacity:0;transform:translateY(-22px) rotate(-2deg)}70%{opacity:1;transform:translateY(3px) rotate(.8deg)}100%{transform:rotate(.5deg)}}
html:not(.js) .ky-reply+.ky-reply{grid-area:auto;margin-top:22px}
html:not(.js) .ky-reply{grid-area:auto}

/* ==== V. THE KEYS ====================================================== */
.ky-keys-head{max-width:none;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:8px clamp(24px,4vw,64px);align-items:end}
.ky-keys-head .ky-no,.ky-keys-head .h2{grid-column:1}
.ky-keys-head .ky-instr{grid-column:2;grid-row:1/3;align-self:end;margin:0;font-size:1.06rem}
.ky-keys-head .ky-instr span{display:block}
.ky-keys-head .ky-instr span:first-child{font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.1;color:var(--ink);margin-bottom:6px}
.ky-stage{position:relative;margin-top:clamp(10px,2vw,24px);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.ky-stage.ky-live{min-height:420px}
.ky-back,.ky-front{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.ky-back{z-index:1}
.ky-front{z-index:35}
.ky-keylist{list-style:none;margin:0;padding:0}
html:not(.js) .ky-keylist,.ky-stage:not(.ky-live) .ky-keylist{display:flex;flex-wrap:wrap;gap:12px}
html:not(.js) .ky-keylist li{padding:10px 16px;border:2px solid var(--ink);background:var(--sheet);font-family:var(--display);font-weight:700;box-shadow:3px 3px 0 var(--coral-2)}
.ky-key{position:absolute;left:0;top:0;width:0;height:0;padding:0;outline:none!important;touch-action:none}
.ky-key .ky-kart,.ky-key .ky-tagw{cursor:grab;touch-action:none}
.ky-key.ky-held .ky-kart,.ky-key.ky-held .ky-tagw{cursor:grabbing}
.ky-key .ky-tag{--tw:var(--tagw,84px);--tf:var(--tagf,.86rem);transition:background .3s,color .3s,box-shadow .3s}
.ky-key:focus-visible .ky-tagw{filter:drop-shadow(3px 0 0 #141311) drop-shadow(-3px 0 0 #141311) drop-shadow(0 3px 0 #141311) drop-shadow(0 -3px 0 #141311) drop-shadow(4px 4px 0 #f58c8a)}
.ky-key:focus-visible .ky-tag{background:var(--grain-c),#fde9e3;border-width:3px}
.ky-key.ky-given .ky-tag{background:var(--grain-c),var(--coral-l)}
.ky-key.ky-given .ky-tagw{filter:drop-shadow(3px 3px 0 #141311)}
.ky-key.ky-held .ky-tagw{filter:drop-shadow(6px 9px 0 rgba(20,19,17,.25))}
@media (hover:hover) and (pointer:fine){.ky-key:hover .ky-tag{background:var(--grain-c),#fde9e3}.ky-key.ky-given:hover .ky-tag{background:var(--grain-c),#fbcbc4}}
.ky-plate-l,.ky-hand-l{position:absolute;left:0;top:0;z-index:5;pointer-events:none;white-space:nowrap}
.ky-plate-l{transform-origin:0 0;translate:-50% -100%;padding:5px 14px 5px;background:var(--ink);color:var(--paper);font-size:.7rem;font-weight:660;letter-spacing:.17em;text-transform:uppercase;border-radius:3px;box-shadow:2px 2px 0 var(--coral-2)}
.ky-plate-l::before,.ky-plate-l::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--coral-l)}
.ky-plate-l::before{left:5px}.ky-plate-l::after{right:5px}
.ky-hand-l{translate:-50% 0;rotate:-3deg;padding:5px 12px;border:2px solid var(--ink);background:var(--sheet);font-family:var(--serif);font-style:italic;font-size:1.02rem;box-shadow:2px 2px 0 var(--coral-2)}
.ky-hand path{vector-effect:non-scaling-stroke}

.ky-keys-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:8px;min-height:46px}
.ky-count{font-size:.95rem;color:var(--ink-2);font-variant-numeric:tabular-nums;min-height:1.4em}
.ky-count:empty{display:none}
.ky-said{list-style:none;margin:clamp(18px,2.4vw,30px) 0 0;padding:0;display:grid;gap:12px;max-width:820px;counter-reset:ky}
.ky-said li{position:relative;padding:14px 18px 15px 56px;border:2px solid var(--ink);background:var(--sheet);background-image:var(--grain);box-shadow:3px 3px 0 var(--coral-2);transition:opacity .5s,transform .5s var(--spring),box-shadow .3s}
.ky-said li p{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.24;letter-spacing:-.005em}
.ky-said li::before{content:"";position:absolute;left:16px;top:17px;width:24px;height:12px;border:2px solid var(--ink);border-radius:7px;background:var(--grain-c),var(--coral-2)}
.ky-said li::after{content:"";position:absolute;left:22px;top:21px;width:4px;height:4px;border-radius:50%;background:var(--ink)}
html.js .ky-said li:not(.ky-seen){display:none}
html.js .ky-said li.ky-seen:not(.ky-cur){opacity:.5;box-shadow:none}
.ky-said li.ky-cur{box-shadow:5px 5px 0 var(--coral-2);transform:translateX(-4px)}
.ky-said li.ky-new{animation:kyLand .6s cubic-bezier(.22,1,.36,1)}
.ky-keys-close{margin-top:clamp(50px,6vw,90px)}
.ky-keys-close .ky-big{max-width:20ch}
.ky-keys-close .ky-beat{margin-top:16px;font-family:var(--serif);font-style:italic;color:var(--coral-ink)}

/* ==== VI. STEP BACK ==================================================== */
.ky-ceil-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:start}
.ky-ceil-copy .ky-big{margin-top:clamp(24px,3vw,40px);font-size:clamp(1.8rem,3.2vw,2.8rem);max-width:20ch}
.ky-web{position:sticky;top:calc(var(--nav-h) + 30px);margin:0;padding:clamp(14px,2vw,22px);background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--coral-2);transform:rotate(.6deg)}
.ky-web-art{aspect-ratio:420/400}
.ky-web-svg{width:100%;height:100%;overflow:visible}
.ky-wl{fill:none;stroke:#141311;stroke-width:1.8;stroke-linecap:round}
.ky-wl-c{fill:none;stroke:#f58c8a;stroke-width:1.8;stroke-linecap:round;transform:translate(2.5px,2px);opacity:.85}
.ky-wl.ky-ch{stroke-dasharray:1 1;stroke-dashoffset:1}
.ky-wf{fill:none;stroke:#f58c8a;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:2 16;animation:kyFlow 1.6s linear infinite}
@keyframes kyFlow{to{stroke-dashoffset:-18}}
.ky-paused .ky-wf{animation-play-state:paused}
.ky-pp-c{fill:#f58c8a}
.ky-pp-b,.ky-pp-h{fill:#fbf9f4;stroke:#141311;stroke-width:2.2;transition:fill .6s}
.ky-back-on .ky-pp-b,.ky-back-on .ky-pp-h{fill:#f9b7b2;transition-delay:var(--d)}
.ky-you-t{font-family:var(--sans);font-size:12px;font-weight:680;letter-spacing:.18em;text-transform:uppercase;fill:#141311;stroke:#fbf9f4;stroke-width:5px;paint-order:stroke;stroke-linejoin:round}
.ky-web-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;border-top:1.5px dashed rgba(20,19,17,.3)}
.ky-switch{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:4px 18px 4px 6px;border:2px solid var(--ink);border-radius:99px;background:var(--paper);box-shadow:3px 3px 0 var(--coral-2);font-weight:620;font-size:.98rem;transition:background .3s,color .3s,transform .14s}
.ky-switch:active{transform:translate(3px,3px);box-shadow:none}
.ky-switch-track{position:relative;width:52px;height:30px;border-radius:99px;border:2px solid var(--ink);background:var(--paper-2);transition:background .3s}
.ky-switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform .45s var(--spring),background .3s}
.ky-switch[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.ky-switch[aria-checked="true"] .ky-switch-track{background:var(--grain-c),var(--coral-2);border-color:var(--paper)}
.ky-switch[aria-checked="true"] .ky-switch-track i{transform:translateX(22px);background:var(--sheet);box-shadow:inset 0 0 0 2px var(--ink)}

/* ==== VII. COMMITMENT AND OPENNESS ===================================== */
.ky-both-in{display:grid;grid-template-columns:minmax(0,1fr) clamp(160px,20vw,250px);gap:clamp(24px,5vw,90px);align-items:end}
.ky-cans{list-style:none;margin:0;padding:0;display:grid;gap:clamp(34px,5vw,64px)}
.ky-can{max-width:720px}
.ky-can-a{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.9vw,2.6rem);line-height:1.04;letter-spacing:-.012em}
.ky-can-b{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.2;color:var(--coral-ink)}
html.js .ky-can .ky-can-a,html.js .ky-can .ky-can-b{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.js .ky-can.ky-in .ky-can-a{opacity:1;transform:none}
html.js .ky-can.ky-in .ky-can-b{opacity:1;transform:none;transition-delay:.55s}
.ky-sprout{position:sticky;bottom:40px;align-self:end}
.ky-sprout svg{width:100%;height:auto;overflow:visible}
.ky-stem,.ky-stem-c{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.ky-stem{stroke:#141311}.ky-stem-c{stroke:#f58c8a}
.ky-sprout[data-g="1"] .ky-stem,.ky-sprout[data-g="1"] .ky-stem-c{stroke-dashoffset:.66}
.ky-sprout[data-g="2"] .ky-stem,.ky-sprout[data-g="2"] .ky-stem-c{stroke-dashoffset:.36}
.ky-sprout[data-g="3"] .ky-stem,.ky-sprout[data-g="3"] .ky-stem-c,.ky-sprout[data-g="4"] .ky-stem,.ky-sprout[data-g="4"] .ky-stem-c{stroke-dashoffset:.06}
.ky-leaf-in{transform:scale(0);transition:transform .9s var(--spring) .6s}
.ky-leaf-p{fill:#fbf9f4;stroke:#141311;stroke-width:2.2;stroke-linejoin:round}
.ky-vein{fill:none;stroke:#141311;stroke-width:1.3;opacity:.55}
.ky-sprout[data-g="1"] .ky-leaf1 .ky-leaf-in,.ky-sprout[data-g="2"] :is(.ky-leaf1,.ky-leaf2) .ky-leaf-in,.ky-sprout:is([data-g="3"],[data-g="4"]) .ky-leaf-in{transform:none}
.ky-bud{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transition:opacity .6s .8s}
.ky-bud-p{fill:#f9b7b2;stroke:#141311;stroke-width:2}
.ky-sprout[data-g="3"] .ky-bud{opacity:1}
.ky-flower-in{transform:scale(0) rotate(-40deg);transition:transform 1.4s var(--spring) .3s}
.ky-petal{fill:#fbf9f4;stroke:#141311;stroke-width:2}
.ky-pot{fill:#fbf9f4;stroke:#141311;stroke-width:2.4;stroke-linejoin:round}
.ky-centre{fill:#141311}
.ky-sprout[data-g="4"] .ky-flower-in{transform:none}
.ky-sprout[data-g="4"] .ky-bud{opacity:0;transition-delay:0s}
.ky-living{margin-top:clamp(56px,7vw,110px);font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.2vw,3.7rem);line-height:1.02;letter-spacing:-.015em;max-width:22ch;text-wrap:balance}
.ky-living-a,.ky-living-b{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ky-living-a{background:repeating-linear-gradient(-45deg,rgba(20,19,17,.28) 0 1.5px,transparent 1.5px 6px) no-repeat 0 90%/0% 38%;transition:background-size 1.2s var(--ease) .5s}
.ky-living-b{color:var(--coral-ink);text-shadow:var(--mx) var(--my) 0 rgba(245,140,138,.7)}
html:not(.js) .ky-living-a,.ky-living.ky-in .ky-living-a{background-size:100% 38%}

/* ==== VIII. THE TWO CARDS ============================================== */
.ky-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,46px);max-width:1120px;cursor:default}
.ky-card{position:relative;padding:clamp(22px,3vw,34px) clamp(20px,2.8vw,36px) clamp(26px,3vw,38px);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);font-family:var(--typed);transition:transform .7s var(--spring)}
.ky-card-a{background:var(--sheet);background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(20,19,17,.13) 37px 38px),var(--grain);transform:rotate(-.8deg)}
.ky-card-b{background:var(--grain-c),var(--coral-l);background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(161,63,57,.2) 37px 38px),var(--grain-c);transform:rotate(.7deg) translateY(18px)}
.ky-card::before{content:"";position:absolute;top:-10px;left:28px;width:15px;height:15px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink),1px 2px 0 rgba(20,19,17,.35)}
.ky-card-b::before{background:var(--sheet)}
.ky-card-h{margin-bottom:14px;font-family:var(--sans);font-size:.74rem;font-weight:680;letter-spacing:.17em;text-transform:uppercase}
.ky-card-l{list-style:none;margin:0;padding:0}
.ky-card-l li{position:relative;padding:5px 0 5px 26px;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:28px;min-height:38px}
.ky-card-l li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:2px;background:var(--ink)}
.ky-card-b .ky-card-l li::before{background:var(--coral-ink)}
.ky-ghost{visibility:hidden}
html.js .ky-cards:not(.ky-go) .ky-card-l li::before{opacity:0}
.ky-card-l li:not(.ky-typing):not(.ky-done)::before{opacity:.25}
.ky-card-l li.ky-typing .ky-typed>span:first-child::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--ink);animation:kyCaret .8s steps(1) infinite}
@keyframes kyCaret{50%{opacity:0}}

.ky-qs-after{margin-top:clamp(56px,7vw,100px);max-width:760px}

/* ==== IX. THE TAG YOU WRITE ON ========================================= */
.ky-yours-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.ky-yours-copy .ky-strong{margin-top:clamp(18px,2.4vw,30px)}
.ky-yours-copy q{quotes:"\201C" "\201D"}
.ky-bigtag-w{filter:drop-shadow(8px 8px 0 #f58c8a);transform:rotate(-.7deg)}
html.js .ky-bigtag-w.ky-rv:not(.ky-in){transform:translateY(18px) rotate(-2deg)}
.ky-bigtag{position:relative;padding:clamp(26px,3vw,40px) clamp(24px,3vw,40px) clamp(24px,3vw,34px) clamp(70px,8vw,100px);background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);
  clip-path:polygon(clamp(34px,4vw,48px) 0,100% 0,100% 100%,clamp(34px,4vw,48px) 100%,0 calc(100% - clamp(34px,4vw,48px)),0 clamp(34px,4vw,48px))}
.ky-bigtag::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom right,transparent calc(50% - 1.3px),var(--ink) calc(50% - 1.3px),var(--ink) calc(50% + 1.3px),transparent calc(50% + 1.3px)) 0 0/clamp(34px,4vw,48px) clamp(34px,4vw,48px) no-repeat,
  linear-gradient(to top right,transparent calc(50% - 1.3px),var(--ink) calc(50% - 1.3px),var(--ink) calc(50% + 1.3px),transparent calc(50% + 1.3px)) 0 100%/clamp(34px,4vw,48px) clamp(34px,4vw,48px) no-repeat}
.ky-bigtag-hole{position:absolute;left:clamp(22px,2.6vw,34px);top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 5px var(--coral-l),0 0 0 7px var(--ink)}
.ky-write{display:grid;gap:8px}
.ky-write+.ky-write{margin-top:clamp(20px,2.4vw,30px)}
.ky-write-q{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.08;letter-spacing:-.01em}
.ky-write textarea{display:block;width:100%;min-height:76px;resize:none;overflow:hidden;padding:4px 2px;border:0;background:repeating-linear-gradient(180deg,transparent 0 37px,rgba(20,19,17,.42) 37px 38px);background-attachment:local;font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:38px;color:var(--coral-ink);caret-color:var(--coral-ink)}
.ky-write textarea:focus{outline:none;background:repeating-linear-gradient(180deg,transparent 0 36px,var(--ink) 36px 38px);background-attachment:local}
.ky-stays{margin-top:18px;font-size:.84rem;color:var(--ink-2)}

/* ==== X. CLOSE ========================================================= */
.ky-close-h{max-width:16ch}
.ky-close-copy{margin-top:clamp(30px,4vw,54px);max-width:640px}
.ky-close-copy .ky-beat{max-width:34ch}
.ky-close-copy .ky-beat+p:not(.ky-beat){margin-top:18px}
.ky-close-copy .ky-strong{margin-bottom:14px}
.ky-leave{margin-top:clamp(50px,6vw,90px);font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem);color:var(--ink-2)}
.ky-last{margin-top:10px;font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,5.2vw,4.8rem);line-height:.98;letter-spacing:-.02em;max-width:18ch;text-wrap:balance}

.ky-doors{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:clamp(26px,5vw,80px);margin-top:clamp(56px,7vw,100px)}
.ky-door-unit{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end}
.ky-door{position:relative;display:block;aspect-ratio:3/4;color:var(--ink);text-decoration:none;perspective:1400px;-webkit-tap-highlight-color:transparent}
.ky-door-frame{position:absolute;inset:0;border:2.5px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;background:radial-gradient(ellipse 80% 70% at 30% 90%,#fffbea 0,#fff1cf 32%,#fbd6bb 62%,rgba(245,140,138,.95) 100%);overflow:hidden;box-shadow:7px 7px 0 var(--ink)}
.ky-door-frame::after{content:"";position:absolute;left:-30px;right:-30px;bottom:-2px;height:14px;background:var(--grain-c),var(--coral-l);border-top:2.5px solid var(--ink)}
.ky-door-leaf{position:absolute;z-index:1;inset:8px 8px 0;transform-style:preserve-3d;border:2.5px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0;background:var(--grain-c),var(--coral-2);transform-origin:100% 50%;transition:transform 1s cubic-bezier(.3,1.25,.42,1) .25s;box-shadow:inset 8px 0 0 -4px rgba(20,19,17,.12)}
.ky-door-you .ky-door-leaf{background:var(--grain-c),var(--coral-l)}
.ky-door-leaf .ky-panel{position:absolute;left:12%;right:12%;border:2px solid var(--ink);background:rgba(20,19,17,.06)}
.ky-panel.p1{top:8%;height:38%}
.ky-panel.p2{bottom:6%;height:30%}
.ky-plate{position:absolute;left:7%;top:68%;width:22px;height:46px;margin-top:-23px;border:2.5px solid var(--ink);border-radius:11px;background:var(--sheet);box-shadow:2px 2px 0 var(--ink)}
.ky-hole{position:absolute;left:50%;top:13px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ink)}
.ky-hole::after{content:"";position:absolute;left:1.5px;top:5px;width:5px;height:10px;background:var(--ink);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
.ky-dkey{position:absolute;left:calc(7% + 11px);top:68%;width:46px;height:18px;margin:-12px 0 0 -52px;opacity:0;transform:translateX(-14px);transform-origin:50% 50%;transition:opacity .2s,transform .35s var(--ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 18'%3E%3Cpath d='M2 9a7 7 0 1 0 14 0a7 7 0 1 0-14 0zM6 9a3 3 0 1 1 6 0a3 3 0 1 1-6 0z' fill='%23fbf9f4' stroke='%23141311' stroke-width='1.8' fill-rule='evenodd'/%3E%3Cpath d='M16 7.5h28v3H16zM34 10.5h3v4h-3zM40 10.5h3v5h-3z' fill='%23fbf9f4' stroke='%23141311' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center/contain}
.ky-door-sign{position:absolute;z-index:3;left:14%;right:14%;top:28%;display:grid;gap:10px;padding:18px 18px 18px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(20,19,17,.4);transform:rotate(1.2deg);transition:transform .9s cubic-bezier(.3,1.25,.42,1) .25s}
.ky-door-you .ky-door-sign{transform:rotate(-1deg)}
.ky-door-sign::before{content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink),1px 2px 0 rgba(20,19,17,.35)}
.ky-door-h{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1}
.ky-door-go{justify-self:start;font-weight:620;font-size:.98rem;border-bottom:2px solid var(--coral-2);padding-bottom:1px}
.ky-door:hover .ky-dkey,.ky-door:focus-visible .ky-dkey{opacity:1;transform:translateX(0);animation:kyTurn .5s var(--ease) .32s both}
@keyframes kyTurn{0%{scale:1 1}60%{scale:1 .2}100%{scale:1 .38}}
.ky-door:hover .ky-door-leaf,.ky-door:focus-visible .ky-door-leaf{transform:rotateY(-26deg)}
.ky-door:hover .ky-door-go,.ky-door:focus-visible .ky-door-go{border-color:var(--ink)}
.ky-door:focus-visible{outline:none}
.ky-door:focus-visible .ky-door-frame{outline:3px solid var(--ink);outline-offset:5px}
.ky-bell{display:grid;justify-items:center;gap:6px;padding:8px 2px;margin-bottom:22px;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent}
.ky-bell-plate{position:relative;display:grid;place-items:center;width:46px;height:64px;border:2.5px solid var(--ink);border-radius:23px;background:var(--sheet);background-image:var(--grain);box-shadow:3px 3px 0 var(--ink);transition:transform .2s var(--ease)}
.ky-bell-plate i{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--ink);background:var(--grain-c),var(--coral-2);box-shadow:inset 0 -3px 0 rgba(20,19,17,.25);transition:transform .14s var(--ease)}
.ky-bell:hover .ky-bell-plate{transform:rotate(-6deg)}
.ky-bell:active .ky-bell-plate i,.ky-bell.ky-rung .ky-bell-plate i{transform:scale(.82)}
.ky-bell.ky-rung .ky-bell-plate{animation:kyRing .5s var(--ease)}
@keyframes kyRing{20%{transform:rotate(9deg)}45%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}100%{transform:none}}
.ky-bell-t{font-size:.66rem;font-weight:660;letter-spacing:.2em;text-transform:uppercase}

.ky-free{margin-top:clamp(40px,5vw,64px);display:grid;gap:16px;justify-items:start}
.ky-free-t{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.08;letter-spacing:-.01em;max-width:30ch}
.ky-free-a{color:inherit;text-decoration:none;background:linear-gradient(transparent 62%,rgba(245,140,138,.7) 62%,rgba(245,140,138,.7) 94%,transparent 94%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ky-free-a:hover{background:linear-gradient(transparent 0,rgba(245,140,138,.7) 0,rgba(245,140,138,.7) 94%,transparent 94%)}
.ky-carry{position:relative;max-width:560px;padding:12px 18px 13px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--coral-2);transform:rotate(-.8deg)}
.ky-carry::before{content:"";position:absolute;top:-8px;left:22px;width:12px;height:12px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink)}
.ky-carry-k{font-size:.66rem;font-weight:660;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink)}
.ky-carry-t{margin-top:4px;font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.32;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ==== RESPONSIVE ======================================================= */
@media (max-width:980px){
  .ky-hero{min-height:0}
  .ky-hero-in{grid-template-columns:minmax(0,1fr) minmax(200px,.6fr)}
  .ky-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ky-heard-in,.ky-ceil-in,.ky-yours-in{grid-template-columns:1fr}
  .ky-slip{position:relative;top:auto}
  .ky-web{position:relative;top:auto;max-width:560px}
  .ky-keys-head{grid-template-columns:1fr}
  .ky-keys-head .ky-instr{grid-column:1;grid-row:auto;margin-top:10px}
}
@media (max-width:760px){
  .ky-hero{padding-top:calc(var(--nav-h) + 6px);padding-bottom:10px}
  .ky-hero-in{grid-template-columns:1fr}
  .ky-hero-art{height:330px;margin-top:-8px}
  .ky-cards{grid-template-columns:1fr}
  .ky-card-b{transform:rotate(.6deg)}
  .ky-both-in{grid-template-columns:minmax(0,1fr) 96px;gap:14px}
  .ky-doors{grid-template-columns:1fr}
  .ky-door{max-width:400px}
  .ky-half-list li:nth-child(2) .ky-half{margin-left:0;width:100%}
  html.js .ky-half:not(.ky-done){padding-right:clamp(22px,3vw,40px);padding-bottom:70px}
  .ky-said li{padding-left:52px}
  .ky-tagw-hero .ky-tag{--tf:1rem}
}
@media (max-width:520px){
  .ky-title{font-size:clamp(2.7rem,13vw,3.6rem)}
  .ky-choice{min-height:128px;padding:14px;gap:14px}
  .ky-choice::after{right:10px;top:10px;width:17px;height:17px}
  .ky-ch-ic{width:38px;height:38px}
  .ky-ch-t{font-size:1.08rem}
  .ky-big{font-size:clamp(1.8rem,8.4vw,2.4rem)}
  .ky-slip{box-shadow:5px 5px 0 var(--coral-2)}
  .ky-half{box-shadow:4px 4px 0 var(--ink)}
  .ky-bigtag{padding-left:58px;box-shadow:5px 5px 0 var(--coral-2)}
  .ky-door-unit{grid-template-columns:minmax(0,1fr) 54px;gap:10px}
  .ky-door-sign{left:10%;right:10%;padding:15px 14px}
  .ky-reply{line-height:30px;background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(245,140,138,.3) 29px 30px),var(--grain)}
  .ky-both-in{grid-template-columns:1fr}
  .ky-sprout{position:relative;bottom:auto;width:130px;justify-self:end;margin-top:-30px}
}

/* ==== REDUCED MOTION =================================================== */
@media (prefers-reduced-motion:reduce){
  html.js .ky-rv,html.js .ky-notice{opacity:1;transform:none}
  html.js .ky-can .ky-can-a,html.js .ky-can .ky-can-b{opacity:1;transform:none}
  .ky-wf,.ky-card-l li.ky-typing .ky-typed>span:first-child::after{animation:none}
  .ky-stem,.ky-stem-c,.ky-leaf-in,.ky-flower-in,.ky-bud,.ky-door-leaf,.ky-door-sign,.ky-dkey{transition:none}
}

/* ==== PRINT ============================================================ */
@media print{.ky-back,.ky-front,.ky-hero-art,.ky-half-cue,.ky-keep{display:none!important}html.js .ky-half:not(.ky-done) .ky-half-b{visibility:visible;height:auto}html.js .ky-said li:not(.ky-seen){display:block}}
html.js .ky-slip.ky-rv.ky-in{transform:rotate(-1.2deg)}
html.js .ky-bigtag-w.ky-rv.ky-in{transform:rotate(-.7deg)}
html:not(.js) .ky-keep{display:none}