/* css/features.css: styles for the sound button, the quotes page and the cookie finish. Loaded after overrides.css. */

/* ---- fortune cookie: the pieces fade away, the paper stays ---- */
#cookie.gone #ck-l,#cookie.gone #ck-r{opacity:0;transition:opacity .45s ease,transform .45s var(--ease)}
#cookie.gone .sq{opacity:0}
.ck-actions button[aria-pressed=true]{color:var(--gold)}

/* ---- sound button in the 3D viewer ---- */
.sound{position:absolute;right:1.5rem;bottom:1.1rem;z-index:6;width:3.4rem;height:3.4rem;padding:.55rem;background:none;border:0;color:var(--soft);filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));transition:color .2s,transform .25s var(--ease)}
.sound[hidden]{display:none}
.sound:hover{color:var(--gold);transform:scale(1.1) rotate(-6deg)}
.sound.playing{color:var(--gold);animation:spulse 1.2s ease-in-out infinite}
@keyframes spulse{50%{transform:scale(1.12)}}
.sicon{display:block;width:100%;height:100%;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.sicon.svg{background:none}
.sicon svg{display:block;width:100%;height:100%;fill:currentColor}
#sound-cap{position:absolute;right:1.5rem;bottom:4.8rem;z-index:6;font-size:.95rem;color:var(--soft);text-shadow:0 1px 8px #000,0 0 3px #000;opacity:0;transition:opacity .4s;pointer-events:none}
#sound-cap.show{opacity:1}

/* ---- quotes collection page ---- */
body.route-quotes #hub,body.route-quotes #app,body.route-quotes #lightbox{display:none}
#qpage{display:none;position:fixed;inset:0;overflow-y:auto;background:radial-gradient(ellipse 60% 56% at 50% 40%,#5d4519 0%,#2a1e0d 38%,#000 100%)}
body.route-quotes #qpage{display:block}
#qrail{position:fixed;left:.9rem;top:50%;transform:translateY(-50%);z-index:20;display:block;width:46px;opacity:.78;transition:opacity .3s,transform .35s var(--ease)}
#qrail:hover{opacity:1;transform:translateY(-50%) scale(1.1) rotate(-4deg)}
#qrail svg{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
#qrail::after{content:attr(data-label);position:absolute;left:calc(100% + .7rem);top:50%;transform:translateY(-50%);white-space:nowrap;padding:.2rem .6rem;background:rgba(0,0,0,.8);font-size:.85rem;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s}
#qrail:hover::after{opacity:1}
.q-wrap{max-width:1180px;margin:0 auto;padding:3.2rem 1.5rem 4rem 5.2rem}
#q-title{margin:0;font-weight:300;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.15}
#q-sub{margin:.4rem 0 0;color:var(--gold);letter-spacing:.08em}
#q-count{margin:.2rem 0 0;color:var(--soft);font-size:.9rem}
#q-note{margin:1.2rem 0 0;max-width:62ch;color:var(--soft);font-size:.9rem;line-height:1.5}
#q-empty{margin:3rem 0;max-width:42ch;line-height:1.6;color:var(--soft)}
#q-empty[hidden]{display:none}
#q-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2.4rem 1.8rem;margin-top:2rem}
.qcard{position:relative;perspective:1100px;animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
.qinner{position:relative;aspect-ratio:1/1.2;transform-style:preserve-3d;transform:rotate(var(--tilt,0deg));transition:transform .8s var(--ease);cursor:pointer;outline-offset:6px}
.qcard:hover .qinner{transform:rotate(0deg) translateY(-4px)}
.qcard.flip .qinner{transform:rotate(0deg) rotateY(180deg)}
.qface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.qfront .polaroid{display:flex;flex-direction:column;height:100%;width:100%}
.qfront .media{flex:1;aspect-ratio:auto;min-height:0}
.qback{transform:rotateY(180deg);background:#efe3cc;box-shadow:0 14px 40px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1.4rem 1.2rem;text-align:center;overflow:hidden}
.qtext{margin:0;font-family:'Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-style:normal;font-weight:600;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.18;color:#1a1206}
.qby{font-size:.78rem;line-height:1.3;color:#4a3a22}
.qstar{position:absolute;top:.55rem;right:.55rem;z-index:3;width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(0,0,0,.5);border:0;color:var(--soft);font-size:1.15rem;line-height:1;transition:color .2s,transform .25s var(--ease)}
.qstar:hover{color:var(--gold);transform:scale(1.12)}
.qstar[aria-pressed=true]{color:var(--gold)}

@media (max-width:820px){
  .sound{right:.7rem;bottom:.5rem;width:3rem;height:3rem}
  #sound-cap{right:.8rem;bottom:3.6rem}
  #qrail{left:.55rem;top:.7rem;width:34px;transform:none}
  #qrail:hover{transform:none}
  .q-wrap{padding:3.4rem 1.1rem 3rem}
  #q-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.8rem 1rem}
  .qtext{font-size:1.15rem}
}

/* ================= round 8 ================= */
/* sound button before any sounds exist (only shown to you while testing) */
.sound.ghost{opacity:.5;cursor:default}
.sound.ghost:hover{transform:none;color:var(--soft)}

/* calm mode: no bubbles, no drifting, almost no animation */
.calm-btn{position:fixed;left:1rem;bottom:1rem;z-index:25;background:none;border:0;border-bottom:1px solid var(--line);padding:.25rem .1rem;font-size:.9rem;color:var(--soft);text-shadow:0 1px 8px #000}
.calm-btn:hover{color:var(--ink)}
.calm-btn[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}
html.calm #h-bubbles{display:none}
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important;transition-delay:0s!important}

/* first page: keepsakes shelf, memory button, message on special dates */
.more{display:flex;align-items:center;gap:.4rem;margin:1rem auto 0;background:none;border:0;color:var(--soft);font-size:.9rem;transition:opacity .4s,color .2s}
.more[hidden]{display:none}
.more svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(3px)}}
.more:hover{color:var(--gold)}
.more.gone{opacity:0;pointer-events:none}
#shelf{position:relative;padding:2rem 1.5rem 7rem;text-align:center}
#shelf[hidden]{display:none}
#shelf h3{margin:0 0 1.8rem;font-weight:300;font-size:1.3rem;color:var(--soft)}
.shelf-row{display:flex;justify-content:center;flex-wrap:wrap;gap:2.2rem}
.shelf-item{display:block;width:min(190px,40vw);color:inherit;text-decoration:none;transition:transform .35s var(--ease)}
.shelf-item .polaroid{transform:rotate(var(--r,0deg))}
.shelf-item:nth-child(odd){--r:-2.5deg}
.shelf-item:nth-child(even){--r:2deg}
.shelf-item:hover{transform:translateY(-8px)}
.shelf-item:hover .polaroid{box-shadow:0 24px 54px rgba(0,0,0,.7)}
#h-memory{position:fixed;right:1.2rem;bottom:1.2rem;z-index:4;background:none;border:0;border-bottom:1px solid var(--line);padding:.25rem .1rem;font-size:.95rem;color:var(--soft)}
#h-memory:hover{color:var(--gold);border-color:var(--gold)}
#today{position:fixed;left:50%;top:1.1rem;transform:translateX(-50%);z-index:30;width:min(34rem,92vw);padding:1.1rem 1.4rem;text-align:center;background:rgba(6,4,2,.9);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#today[hidden]{display:none}
#today-title{margin:0;font-size:1.15rem;color:var(--gold)}
#today-text{margin:.5rem 0 .9rem;line-height:1.55}
.today-actions{display:flex;justify-content:center;align-items:center}
.today-actions button,.mem-actions button{background:none;border:0;padding:.2rem 0;font-size:.95rem;color:var(--soft)}
.today-actions button:hover,.mem-actions button:hover{color:var(--gold)}

/* "show me a memory" */
#memory{z-index:60;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);outline:none;padding:1.2rem;overflow-y:auto}
.mem-stage{display:flex;flex-direction:column;align-items:center;gap:1rem;margin:auto;width:min(92vw,520px)}
.mem-pol{width:100%;transform:rotate(var(--tilt,-2.5deg));transition:transform .6s var(--ease)}
.mem-pol .media{aspect-ratio:auto;background:#1a1206}
.mem-pol .media img{height:auto;max-height:60vh;width:100%;object-fit:contain;opacity:0;transition:opacity .7s ease}
.mem-pol .media img.in{opacity:1}
#mem-where{margin:0;color:var(--gold);letter-spacing:.06em;font-size:.95rem;min-height:1.3em;text-align:center}
.mem-actions{display:flex;align-items:center}

/* shared simple pages (quotes, notes, letters): the title stays put while the content scrolls */
.q-wrap{padding-top:0}
.q-head{position:sticky;top:0;z-index:5;margin:0 -1.5rem 1rem -5.2rem;padding:3rem 1.5rem 1rem 5.2rem;background:rgba(0,0,0,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#q-note{margin:0}
#q-tools{margin-top:1.6rem;max-width:720px}
#q-tools[hidden]{display:none}

/* notes from people */
#q-grid.notes{display:block;column-width:290px;column-gap:1.8rem;margin-top:1.8rem}
.note{break-inside:avoid;margin:0 0 1.8rem;padding:1.4rem 1.3rem 1.1rem;background:#efe3cc;color:#1a1206;box-shadow:0 12px 34px rgba(0,0,0,.5);transform:rotate(var(--t,0deg));animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
.note:nth-child(3n+1){--t:-.7deg}
.note:nth-child(3n+2){--t:.6deg}
.note-pol{width:72%;margin:0 auto 1rem;transform:rotate(-2deg);background:#faf3e0;padding:.45rem .45rem 1.6rem;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.note-text{margin:0;white-space:pre-line;line-height:1.6;font-size:1.05rem}
.note footer{margin-top:1rem;font-size:.9rem;color:#4a3a22;white-space:pre}

/* letters to her (private, on this device) */
.d-text{display:block;width:100%;padding:1rem 1.1rem;background:#efe3cc;color:#1a1206;border:0;font-family:'Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-style:normal;font-weight:600;font-size:1.5rem;line-height:1.3;resize:vertical;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.d-text::placeholder{color:#6b5a40}
.d-actions{display:flex;align-items:center;gap:1.4rem;margin-top:1rem;flex-wrap:wrap}
.d-actions .link{margin-top:0}
#q-grid.diary{display:block;max-width:720px;margin-top:2.2rem}
.letter{margin:0 0 1.6rem;padding:1.2rem 1.3rem;background:#efe3cc;color:#1a1206;box-shadow:0 10px 28px rgba(0,0,0,.45);animation:rise .5s var(--ease) both}
.l-date{display:block;font-size:.85rem;color:#4a3a22;letter-spacing:.04em}
.l-text{margin:.5rem 0 .6rem;white-space:pre-wrap;font-family:'Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-style:normal;font-weight:600;font-size:1.5rem;line-height:1.3}
.letter .link.l-rm{margin-top:0;color:#4a3a22;border-bottom-color:rgba(74,58,34,.35)}

@media (max-width:820px){
  .calm-btn{left:.6rem;bottom:.6rem;font-size:.8rem;background:rgba(0,0,0,.6);border:1px solid var(--line);border-radius:99px;padding:.3rem .7rem}
  #h-memory{right:50%;transform:translateX(50%);bottom:3rem}
  #shelf{padding-bottom:8rem}
  .q-head{margin:0 -1.1rem .8rem;padding:3.4rem 1.1rem .8rem}
  #q-grid.notes{column-width:240px}
  .d-text,.l-text{font-size:1.3rem}
}

/* ================= round 9 ================= */
/* bottom bar: Calm, the fortune cookie and "Show me a memory" sit close together */
#h-bar{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:4;display:flex;align-items:center;justify-content:center;gap:1.7rem;white-space:nowrap}
#h-bar .cookie-btn,#h-bar #h-memory,#h-bar .calm-btn{position:static;transform:none;left:auto;right:auto;bottom:auto;display:flex;align-items:center;gap:.55rem;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.25rem .1rem;font-size:.95rem;color:var(--soft);text-shadow:none}
#h-bar .cookie-btn:hover,#h-bar #h-memory:hover,#h-bar .calm-btn:hover{color:var(--gold);border-color:var(--gold)}
#h-bar .calm-btn[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}

/* keepsakes open in place: the polaroids make room, the shelf appears, and "Back" returns */
#shelf{position:static;width:100%;max-height:0;overflow:hidden;opacity:0;padding:0;text-align:center;transition:max-height .7s var(--ease),opacity .6s ease .1s}
#shelf[hidden]{display:none}
#hub.keeps #shelf{max-height:460px;opacity:1;padding:2.4rem 0 .2rem}
.shelf-row{gap:1.6rem}
.shelf-item{width:min(150px,28vw)}
#carousel{transition:height .7s var(--ease)}
#hub.keeps #carousel{height:clamp(170px,26vh,260px)}
.pcard{transition:width .7s var(--ease)}
#hub.keeps .pcard{width:min(clamp(120px,12vw,200px),17vh)}
#hub.keeps .hub-label{min-height:5.5rem}
.more.open path{transform:rotate(180deg);transform-origin:12px 12px}
.more svg{animation:nudgeUp 2.4s ease-in-out 3}
.more.open svg{animation:none}
@keyframes nudgeUp{50%{transform:translateY(-3px)}}
.rem{display:block;margin:1.2rem auto 0;background:none;border:0;border-bottom:1px solid var(--line);padding:.1rem 0;font-size:.85rem;color:var(--soft)}
.rem:hover{color:var(--gold);border-color:var(--gold)}

/* pages like quotes, notes and letters: the title blends into the background instead of sitting on a black bar */
#qpage{overflow-x:hidden}
.q-head{background:none;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.q-head::before{content:'';position:absolute;top:0;bottom:-1.8rem;left:-60vw;right:-60vw;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(12,8,2,.95),rgba(12,8,2,.85) 55%,rgba(12,8,2,0));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent);mask-image:linear-gradient(to bottom,#000 65%,transparent)}

/* quotes: drag to move, drop on the bin to remove */
.qcard{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#q-grid.sorting{cursor:grabbing}
.q-trash{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:.5rem;background:none;border:0;padding:.5rem .7rem;color:var(--soft);opacity:.55;transition:opacity .25s,color .25s,transform .25s var(--ease)}
.q-trash[hidden]{display:none}
.q-trash svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.q-trash span{font-size:.85rem;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .3s,opacity .3s}
.q-trash.show{opacity:1}
.q-trash.show span{max-width:10rem;opacity:1}
.q-trash.hot{color:#f0907d;transform:translateX(-50%) scale(1.25)}
#q-undo{position:fixed;left:50%;bottom:4.4rem;transform:translateX(-50%);z-index:41;display:flex;align-items:center;gap:1.2rem;max-width:92vw;padding:.6rem 1rem;background:rgba(6,4,2,.94);border:1px solid var(--line);font-size:.9rem}
#q-undo[hidden]{display:none}
#q-undo button{background:none;border:0;padding:0;color:var(--gold);font-size:.9rem;border-bottom:1px solid var(--gold)}

/* calm mode also works like a night light: softer colours, a little dimmer, a warm tint, and no decoration at the sides */
html.calm::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;-webkit-backdrop-filter:saturate(.5) brightness(.9);backdrop-filter:saturate(.5) brightness(.9);background:rgba(255,196,130,.06)}
html.calm .side{display:none}

/* 3D viewer controls: the three icons share one size and one centre line; the reset icon turns clockwise */
.vrow{gap:.4rem}
.vrow .arrow,.reset{display:grid;place-items:center;width:2.6rem;height:2.6rem;padding:0;font-size:0;line-height:0}
.vrow .arrow svg,.reset svg{display:block;width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reset svg{width:1.4rem;height:1.4rem;stroke-width:1.6;transition:transform .5s var(--ease)}
.reset:hover:not(:disabled) svg{transform:rotate(200deg)}

@media (max-width:820px){
  #h-bar{flex-wrap:wrap;gap:.5rem 1.3rem;width:94vw;bottom:.8rem}
  #h-bar .cookie-btn,#h-bar #h-memory,#h-bar .calm-btn{font-size:.85rem}
  #h-bar #h-memory{bottom:auto}
}

/* ================= round 10 ================= */
/* the first page is laid out from the top, so the title stays exactly where it is when Keepsakes opens */
.hub-card{justify-content:flex-start;padding-top:clamp(1.5rem,8vh,6rem)}
#h-title{transform:none}
#shelf-title{margin:0 0 1.2rem;font-weight:300;font-size:1.05rem;color:var(--soft)}

/* side photos: solid for longer, then a quicker fade */

/* the bin swallows what it is given */
.q-trash.eat{animation:eat .45s var(--ease)}
@keyframes eat{40%{transform:translateX(-50%) scale(1.55)}}

/* ================= round 11 ================= */
/* quotes: a faded copy follows the pointer, the real polaroid waits (dimmed) where it will land */
.qcard.holding{opacity:.38}
.qcard.holding .qinner{outline:2px dashed rgba(241,230,210,.35);outline-offset:-2px}
.qghost{position:fixed;z-index:60;margin:0;pointer-events:none;opacity:.6;animation:none;transform:rotate(3deg) scale(1.04);filter:drop-shadow(0 22px 40px rgba(0,0,0,.6))}

/* side photos: solid for a while, then fade out along a slight curve (a little more transparent towards the top and bottom) */

/* keepsakes open: bigger polaroids, the name line without its subtitle, "Drag to browse" right under the intro, the keepsakes close below */
.hub-card>*{order:5}
#h-title{order:1}#h-text{order:2}#carousel{order:4}.hub-label{order:5}#h-hint{order:6}#shelf{order:7}#h-more{order:8}
#hub.keeps #h-hint{display:none}
#hub.keeps #h-sub{display:none}
#hub.keeps #carousel{height:calc(var(--c) * .70)}
#hub.keeps .pcard{width:min(calc(var(--c) * .48),clamp(170px,17vw,300px))}
#hub.keeps .hub-label{min-height:4.2rem}
#hub.keeps .shelf-item{width:min(calc(var(--c) * .38),30vw)}

/* Kesha's visit */
#companion{position:fixed;left:clamp(6rem,9vw,9rem);bottom:0;z-index:30;display:flex;align-items:flex-end;gap:.5rem;pointer-events:none}
#companion[hidden]{display:none}
#companion button{pointer-events:auto}
#kc-svg{width:min(300px,40vw);height:auto;flex:none;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,1.35,.4,1)}
#companion.show #kc-svg{transform:none}
#companion.leave #kc-svg{transform:translateY(105%);transition:transform .7s ease-in}
.kc-bubble{position:relative;pointer-events:auto;max-width:min(24rem,52vw);margin-bottom:5rem;padding:1rem 1.2rem .9rem;background:#fff8ea;color:#1a1206;border:2.5px solid #2a1c10;border-radius:20px 20px 20px 5px;box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;transform:scale(.8) translateY(10px);transform-origin:left bottom;transition:opacity .4s ease .75s,transform .5s var(--ease) .75s}
.kc-bubble::before{content:'';position:absolute;left:-14px;bottom:18px;width:0;height:0;border-style:solid;border-width:9px 16px 9px 0;border-color:transparent #2a1c10 transparent transparent}
.kc-bubble::after{content:'';position:absolute;left:-9px;bottom:20px;width:0;height:0;border-style:solid;border-width:7px 13px 7px 0;border-color:transparent #fff8ea transparent transparent}
#companion.show .kc-bubble{opacity:1;transform:none}
#companion.leave .kc-bubble{opacity:0;transition:opacity .3s}
#kc-text{margin:0 0 .8rem;line-height:1.5;font-size:1.02rem}
.kc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 0}
.kc-actions button{background:none;border:0;padding:0;font-size:.95rem;color:#1a1206;border-bottom:1px solid rgba(26,18,6,.4)}
.kc-actions button:hover{border-bottom-color:#1a1206}
.kc-bubble .sep{margin:0 .6rem;color:#8a6a40}
#kc-ear-l{transform-box:fill-box;transform-origin:75% 100%;animation:kcear 5s ease-in-out infinite}
#kc-ear-r{transform-box:fill-box;transform-origin:25% 100%;animation:kcear 5s ease-in-out 1.7s infinite}
@keyframes kcear{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-7deg)}94%{transform:rotate(3deg)}}
#kc-eyes{transform-box:fill-box;transform-origin:center;animation:kcblink 4.2s infinite}
@keyframes kcblink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
#kc-head{transform-box:fill-box;transform-origin:50% 100%;animation:kctilt 6s ease-in-out infinite}
@keyframes kctilt{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
#kc-tongue{transform-box:fill-box;transform-origin:50% 0;animation:kctongue 1.6s ease-in-out infinite}
@keyframes kctongue{50%{transform:scaleY(1.12)}}
html.calm #companion{display:none}

@media (max-width:820px){
  #companion{left:0;right:0;flex-direction:column-reverse;align-items:center;gap:0}
  #kc-svg{width:min(240px,62vw)}
  .kc-bubble{max-width:90vw;margin-bottom:.8rem;border-radius:20px;transform-origin:center bottom}
  .kc-bubble::before,.kc-bubble::after{display:none}
}

/* ================= round 12 ================= */
#hub.keeps #h-open{display:none}

/* back to top */
.totop{position:fixed;right:1.2rem;bottom:1.2rem;z-index:35;width:2.6rem;height:2.6rem;display:grid;place-items:center;padding:0;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid var(--line);color:var(--soft);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease),visibility .3s,color .2s,border-color .2s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{color:var(--gold);border-color:var(--gold)}
.totop svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){.totop{bottom:3.4rem}}

/* the visit with your own artwork (an image instead of the built-in drawing) gets a gentle bob */
img#kc-svg{width:min(340px,44vw);height:auto;transform-origin:50% 100%}
#companion.show img#kc-svg{animation:kcbob 4s ease-in-out 1.2s infinite}     /* starts after she has slid up; turns around her bottom edge, so she never lifts off it */
@keyframes kcbob{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.8deg) scaleY(1.02)}}

/* ================= round 13 ================= */
/* first page: the content block is placed by JS (--top) and the glow follows the middle polaroid (--halo-y) */
#hub{background:radial-gradient(ellipse 60% 56% at 50% var(--halo-y,50%),#5d4519 0%,#2a1e0d 38%,#000 100%)}
.hub-card{padding-top:var(--top,clamp(1.5rem,8vh,6rem));opacity:0;transition:opacity .5s ease,padding-top .7s var(--ease)}
.hub-card.ready{opacity:1}

/* preferences, tucked into the bottom right corner */
.pref-btn{background:none;border:0;border-bottom:1px solid var(--line);padding:.25rem .3rem;color:var(--soft)}
.pref-btn svg{display:block;width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.pref-btn:hover,.pref-btn[aria-expanded=true]{color:var(--gold);border-color:var(--gold)}
#h-bar .pref-btn{position:static}
#pref{position:fixed;left:50%;transform:translateX(-50%);bottom:3.6rem;z-index:30;width:min(21rem,92vw);padding:1rem 1.2rem;background:rgba(6,4,2,.94);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#pref[hidden]{display:none}
.pref-row+.pref-row{margin-top:1rem}
.pref-row .rem{margin:0;font-size:.95rem;color:var(--ink)}
.pref-row p{margin:.35rem 0 0;font-size:.85rem;line-height:1.45;color:var(--soft)}

/* the photos at the sides: a touch softer */


@media (max-width:820px){#pref{bottom:4.8rem}}

/* ================= round 14 ================= */
#hub{--c:clamp(300px,48vh,470px)}          /* the carousel height; the keepsakes view is sized from it, so both views take the same height and stay centred */

/* special-day card: gold flourishes on the card itself, left and right */
#today{padding:1.2rem 3.4rem}
#today::before,#today::after{content:'';position:absolute;top:.7rem;bottom:.7rem;width:2.3rem;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 210%22%3E%3Cg fill=%22none%22 stroke=%22%23d9b26a%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%2213.1,40.3 12.9,40.1 12.8,39.9 12.7,39.6 12.7,39.2 12.8,38.9 13.0,38.6 13.3,38.3 13.6,38.0 14.0,37.8 14.5,37.8 15.0,37.8 15.6,38.0 16.0,38.3 16.5,38.7 16.8,39.2 17.1,39.8 17.2,40.5 17.1,41.2 16.9,41.9 16.6,42.5 16.0,43.1 15.4,43.6 14.6,43.9 13.8,44.1 12.9,44.1 12.0,43.9 11.1,43.5 10.4,42.9 9.7,42.1 9.2,41.2 9.0,40.2 8.9,39.1 9.1,38.0 9.5,36.9 10.2,36.0 11.0,35.1 12.1,34.5 13.3,34.1 14.5,33.9 15.8,34.1 17.1,34.5 18.3,35.1 19.3,36.1 20.1,37.2 20.7,38.6 21.0,40.0 21.0,40.0 21.6,41.4 22.3,42.9 22.9,44.3 23.5,45.8 24.1,47.2 24.7,48.7 25.3,50.1 25.8,51.6 26.3,53.0 26.8,54.4 27.2,55.9 27.6,57.3 27.9,58.8 28.2,60.2 28.4,61.7 28.6,63.1 28.7,64.6 28.7,66.0 28.7,67.4 28.7,68.9 28.6,70.3 28.4,71.8 28.1,73.2 27.8,74.7 27.5,76.1 27.1,77.6 26.6,79.0 26.2,80.4 25.6,81.9 25.0,83.3 24.4,84.8 23.8,86.2 23.1,87.7 22.4,89.1 21.7,90.6 21.0,92.0 20.3,93.4 19.6,94.9 18.8,96.3 18.1,97.8 17.5,99.2 16.8,100.7 16.2,102.1 15.6,103.6 15.0,105.0 14.5,106.4 14.1,107.9 13.7,109.3 13.4,110.8 13.1,112.2 13.0,113.7 12.8,115.1 12.8,116.6 12.8,118.0 12.8,119.4 12.9,120.9 13.1,122.3 13.4,123.8 13.7,125.2 14.0,126.7 14.4,128.1 14.9,129.6 15.4,131.0 15.9,132.4 16.4,133.9 17.0,135.3 17.7,136.8 18.3,138.2 19.0,139.7 19.6,141.1 20.3,142.6 21.0,144.0 21.7,145.4 22.3,146.9 23.0,148.3 23.6,149.8 24.2,151.2 24.8,152.7 25.3,154.1 25.8,155.6 26.3,157.0 26.7,158.4 27.1,159.9 27.4,161.3 27.7,162.8 27.9,164.2 28.1,165.7 28.2,167.1 28.2,168.6 28.2,170.0 28.2,170.0 28.5,171.4 29.1,172.8 29.9,173.9 30.9,174.9 32.1,175.5 33.4,175.9 34.7,176.1 36.0,175.9 37.1,175.5 38.2,174.9 39.0,174.0 39.7,173.1 40.1,172.0 40.3,170.9 40.3,169.8 40.0,168.8 39.5,167.9 38.9,167.1 38.1,166.5 37.2,166.1 36.3,165.9 35.5,165.9 34.6,166.1 33.8,166.4 33.2,166.9 32.7,167.5 32.3,168.1 32.1,168.8 32.1,169.5 32.2,170.2 32.4,170.8 32.7,171.3 33.2,171.7 33.7,172.0 34.2,172.2 34.7,172.2 35.2,172.2 35.6,172.0 36.0,171.7 36.2,171.4 36.4,171.1 36.5,170.8 36.5,170.4 36.5,170.1 36.3,169.9 36.2,169.7%22/%3E%3Cpolyline points=%2221.0,48.0 20.4,49.3 19.8,50.5 19.2,51.8 18.7,53.1 18.1,54.3 17.6,55.6 17.1,56.9 16.6,58.1 16.2,59.4 15.8,60.7 15.4,61.9 15.1,63.2 14.8,64.5 14.6,65.7 14.4,67.0 14.3,68.3 14.2,69.5 14.2,70.8 14.2,72.1 14.3,73.3 14.4,74.6 14.6,75.9 14.8,77.1 15.1,78.4 15.4,79.7 15.8,80.9 16.2,82.2 16.6,83.5 17.1,84.7 17.6,86.0 18.1,87.3 18.7,88.5 19.2,89.8 19.8,91.1 20.4,92.3 21.0,93.6 21.6,94.9 22.2,96.1 22.8,97.4 23.3,98.7 23.9,99.9 24.4,101.2 24.9,102.5 25.4,103.7 25.8,105.0 26.2,106.3 26.6,107.5 26.9,108.8 27.2,110.1 27.4,111.3 27.6,112.6 27.7,113.9 27.8,115.1 27.8,116.4 27.8,117.7 27.7,118.9 27.6,120.2 27.4,121.5 27.2,122.7 26.9,124.0 26.6,125.3 26.2,126.5 25.8,127.8 25.4,129.1 24.9,130.3 24.4,131.6 23.9,132.9 23.3,134.1 22.8,135.4 22.2,136.7 21.6,137.9 21.0,139.2 20.4,140.5 19.8,141.7 19.2,143.0 18.7,144.3 18.1,145.5 17.6,146.8 17.1,148.1 16.6,149.3 16.2,150.6 15.8,151.9 15.4,153.1 15.1,154.4 14.8,155.7 14.6,156.9 14.4,158.2 14.3,159.5 14.2,160.7 14.2,162.0%22/%3E%3Cpolygon points=%2226.3,53.0 26.1,51.9 25.8,51.0 25.5,50.1 25.1,49.4 24.7,48.7 24.2,48.1 23.7,47.6 23.2,47.1 22.6,46.8 22.0,46.5 21.3,46.4 20.6,46.3 19.9,46.4 19.1,46.5 18.2,46.7 17.4,46.9 16.5,47.3 15.5,47.8 15.5,47.8 15.7,48.9 16.0,49.8 16.3,50.6 16.7,51.4 17.1,52.1 17.5,52.7 18.0,53.2 18.6,53.7 19.1,54.0 19.8,54.2 20.4,54.4 21.1,54.4 21.9,54.4 22.7,54.3 23.5,54.1 24.4,53.9 25.3,53.5 26.3,53.0%22/%3E%3Cpolyline points=%2226.3,53.0 17.4,48.7%22/%3E%3Cpolygon points=%2226.6,79.0 26.9,80.1 27.2,81.0 27.5,81.9 27.9,82.6 28.3,83.3 28.7,83.9 29.2,84.4 29.7,84.9 30.3,85.2 30.9,85.5 31.6,85.6 32.3,85.7 33.1,85.6 33.9,85.5 34.7,85.3 35.6,85.1 36.5,84.7 37.5,84.2 37.5,84.2 37.2,83.1 37.0,82.2 36.6,81.4 36.2,80.6 35.8,79.9 35.4,79.3 34.9,78.8 34.4,78.3 33.8,78.0 33.2,77.8 32.5,77.6 31.8,77.6 31.0,77.6 30.2,77.7 29.4,77.9 28.5,78.1 27.6,78.5 26.6,79.0%22/%3E%3Cpolyline points=%2226.6,79.0 35.5,83.3%22/%3E%3Cpolygon points=%2215.0,105.0 14.8,103.9 14.5,103.0 14.2,102.1 13.8,101.4 13.4,100.7 12.9,100.1 12.4,99.6 11.9,99.1 11.3,98.8 10.7,98.5 10.0,98.4 9.3,98.3 8.6,98.4 7.8,98.5 7.0,98.7 6.1,98.9 5.2,99.3 4.2,99.8 4.2,99.8 4.4,100.9 4.7,101.8 5.0,102.6 5.4,103.4 5.8,104.1 6.2,104.7 6.7,105.2 7.3,105.7 7.8,106.0 8.5,106.2 9.1,106.4 9.8,106.4 10.6,106.4 11.4,106.3 12.2,106.1 13.1,105.9 14.0,105.5 15.0,105.0%22/%3E%3Cpolyline points=%2215.0,105.0 6.1,100.7%22/%3E%3Cpolygon points=%2214.9,129.6 15.1,130.7 15.4,131.6 15.7,132.4 16.1,133.2 16.5,133.9 16.9,134.5 17.4,135.0 17.9,135.4 18.5,135.8 19.1,136.0 19.8,136.2 20.5,136.2 21.3,136.2 22.1,136.1 22.9,135.9 23.8,135.6 24.7,135.3 25.7,134.8 25.7,134.8 25.5,133.7 25.2,132.7 24.8,131.9 24.5,131.1 24.0,130.5 23.6,129.8 23.1,129.3 22.6,128.9 22.0,128.6 21.4,128.3 20.7,128.2 20.0,128.1 19.2,128.1 18.5,128.2 17.6,128.4 16.8,128.7 15.9,129.0 14.9,129.6%22/%3E%3Cpolyline points=%2214.9,129.6 23.7,133.8%22/%3E%3Cpolygon points=%2226.3,157.0 26.1,155.9 25.8,155.0 25.5,154.1 25.1,153.4 24.7,152.7 24.2,152.1 23.7,151.6 23.2,151.1 22.6,150.8 22.0,150.5 21.3,150.4 20.6,150.3 19.9,150.4 19.1,150.5 18.2,150.7 17.4,150.9 16.5,151.3 15.5,151.8 15.5,151.8 15.7,152.9 16.0,153.8 16.3,154.6 16.7,155.4 17.1,156.1 17.5,156.7 18.0,157.2 18.6,157.7 19.1,158.0 19.8,158.2 20.4,158.4 21.1,158.4 21.9,158.4 22.7,158.3 23.5,158.1 24.4,157.9 25.3,157.5 26.3,157.0%22/%3E%3Cpolyline points=%2226.3,157.0 17.4,152.7%22/%3E%3Cpolygon points=%2223.2,18.0 23.0,18.8 22.6,19.6 21.8,20.0 21.0,20.2 20.2,20.0 19.4,19.6 19.0,18.8 18.8,18.0 19.0,17.2 19.4,16.4 20.2,16.0 21.0,15.8 21.8,16.0 22.6,16.4 23.0,17.2 23.2,18.0%22/%3E%3Cpolygon points=%2223.2,192.0 23.0,192.8 22.6,193.6 21.8,194.0 21.0,194.2 20.2,194.0 19.4,193.6 19.0,192.8 18.8,192.0 19.0,191.2 19.4,190.4 20.2,190.0 21.0,189.8 21.8,190.0 22.6,190.4 23.0,191.2 23.2,192.0%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;opacity:.75;pointer-events:none}
#today::before{left:.5rem}
#today::after{right:.5rem;transform:scaleX(-1)}

/* ================= round 15 ================= */
/* side photos: no blur. Solid for longer (more opaque), then a long, soft feather; the edge is only slightly curved */

/* the glow glides when the first page changes view (browsers without this simply jump) */
@property --halo-y{syntax:'<length-percentage>';inherits:true;initial-value:50%}
#hub{transition:--halo-y .7s var(--ease)}
#hub.nomotion,#hub.nomotion *{transition:none!important}

/* bottom bar: [memory icon] [Open a fortune cookie] [preferences icon], with the cookie always in the middle */
#h-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.6rem;width:min(94vw,28rem);white-space:nowrap}
#h-bar #h-memory{justify-self:end}
#h-bar .pref-btn{justify-self:start}
#h-bar .icon-btn{position:static;display:grid;place-items:center;padding:.25rem .3rem;background:none;border:0;border-bottom:1px solid var(--line);color:var(--soft)}
#h-bar .icon-btn svg{display:block;width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#h-bar .icon-btn:hover,#h-bar .pref-btn[aria-expanded=true]{color:var(--gold);border-color:var(--gold)}

/* Calm inside Preferences */
#pref .calm-btn{position:static;display:block;margin:0;padding:0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:.95rem;color:var(--ink);text-shadow:none}
#pref .calm-btn[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}
@media (max-width:820px){#h-bar{gap:1rem}}

/* ================= round 16 ================= */

/* bubbles: they come in where the side photos have mostly faded, so the foam reaches a little further out */
#h-bubbles{
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent calc(var(--side) * .78),#000 calc(var(--side) * .78 + 5vw),#000 calc(100% - var(--side) * .78 - 5vw),transparent calc(100% - var(--side) * .78),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,transparent calc(var(--side) * .78),#000 calc(var(--side) * .78 + 5vw),#000 calc(100% - var(--side) * .78 - 5vw),transparent calc(100% - var(--side) * .78),transparent 100%);
}

/* Kesha's speech bubble: one outline all the way round, the tail drawn with the same line width */
.kc-bubble{max-width:min(26rem,54vw);border-radius:20px;text-align:center;transform-origin:left center}
.kc-bubble::before,.kc-bubble::after{display:none}
.kc-tail{position:absolute;left:-21px;bottom:26px;width:24px;height:40px;overflow:visible;pointer-events:none}
.kc-tail path{fill:#fff8ea;stroke:#2a1c10;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:butt}
#kc-text{margin:0 0 .85rem}
#kc-by{margin:-.45rem 0 .85rem;font-size:.85rem;color:#6b5230}
.kc-actions{justify-content:center;gap:.4rem 1.1rem}
@media (max-width:820px){.kc-bubble{max-width:90vw;transform-origin:center bottom}.kc-tail{display:none}}

/* favourites: a small heart in the photo window */
.lb-fav[hidden]{display:none}
.lb-fav:hover,.lb-fav:focus-visible{opacity:.95}
.lb-fav svg{display:block;width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.lb-fav.on{opacity:1;color:var(--gold)}
.lb-fav.on svg{fill:currentColor}

/* special days: the + in Preferences and the agenda window */
.pref-line{display:flex;align-items:center;gap:.7rem}
.plus{flex:none;display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--soft);font-size:1.05rem;line-height:1}
.plus:hover{color:var(--gold);border-color:var(--gold)}
#days{z-index:60;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);outline:none;padding:1.2rem;overflow-y:auto;align-items:flex-start}
.days-card{position:relative;width:min(34rem,100%);margin:auto;padding:2rem 1.8rem 1.6rem;background:rgba(8,6,3,.96);border:1px solid var(--line);border-radius:14px;text-align:left}
.days-card .icon{position:absolute;top:.6rem;right:.8rem}
.days-card h2{margin:0 0 .4rem;font-weight:300;font-size:1.5rem;color:var(--gold)}
.days-intro{margin:0 0 1.2rem;color:var(--soft);line-height:1.55;font-size:.95rem}
.days-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.days-list li{display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px}
.days-list .d-when{flex:none;min-width:5.6rem;color:var(--gold);font-size:.95rem}
.days-list .d-what{flex:1;min-width:0}
.days-list .d-what b{display:block;font-weight:400}
.days-list .d-what small{display:block;margin-top:.1rem;color:var(--soft);opacity:.8;font-size:.82rem;line-height:1.4}
.days-list button{flex:none;padding:0;background:none;border:0;border-bottom:1px solid var(--line);color:var(--soft);font-size:.85rem}
.days-list button:hover{color:var(--gold);border-color:var(--gold)}
.days-empty{margin:0 0 1rem;color:var(--soft);opacity:.7;font-size:.9rem}
.days-form{display:grid;gap:.8rem;padding-top:1rem;border-top:1px solid var(--line)}
.days-form label{display:grid;gap:.3rem;font-size:.85rem;color:var(--soft)}
.days-form input[type=text],.days-form select,.days-form textarea{font:inherit;font-size:1rem;color:#1a1206;background:#fff8ea;border:1px solid #2a1c10;border-radius:8px;padding:.55rem .7rem}
.days-form input.bad{border-color:#b33;box-shadow:0 0 0 2px rgba(179,51,51,.35)}
.days-when{display:grid;grid-template-columns:1fr 1.6fr;gap:.8rem}
.days-form .days-check{display:flex;align-items:center;gap:.6rem}
.days-actions{display:flex;justify-content:flex-end}

/* her resting drawing */
#today-art{display:block;height:5rem;width:auto;margin:-.1rem auto .3rem}
#today-art[hidden]{display:none}

/* side photos: the strip is a little wider (15% instead of 12.5%) and the solid part is exactly as wide as before (6.25% of the screen), so the
   fade has about 40% more room. It starts softly and ends softly: no cutoff, nothing blurred. */
:root{--side:max(15vw,76px)}
.side{width:var(--side)}
.side.l{-webkit-mask-image:radial-gradient(ellipse 100% 125% at 0% 50%,#000 0,#000 41.7%,rgba(0,0,0,0.972) 47.5%,rgba(0,0,0,0.896) 53.3%,rgba(0,0,0,0.784) 59.2%,rgba(0,0,0,0.648) 65.0%,rgba(0,0,0,0.500) 70.8%,rgba(0,0,0,0.352) 76.7%,rgba(0,0,0,0.216) 82.5%,rgba(0,0,0,0.104) 88.3%,rgba(0,0,0,0.028) 94.2%,transparent 100%);mask-image:radial-gradient(ellipse 100% 125% at 0% 50%,#000 0,#000 41.7%,rgba(0,0,0,0.972) 47.5%,rgba(0,0,0,0.896) 53.3%,rgba(0,0,0,0.784) 59.2%,rgba(0,0,0,0.648) 65.0%,rgba(0,0,0,0.500) 70.8%,rgba(0,0,0,0.352) 76.7%,rgba(0,0,0,0.216) 82.5%,rgba(0,0,0,0.104) 88.3%,rgba(0,0,0,0.028) 94.2%,transparent 100%)}
.side.r{-webkit-mask-image:radial-gradient(ellipse 100% 125% at 100% 50%,#000 0,#000 41.7%,rgba(0,0,0,0.972) 47.5%,rgba(0,0,0,0.896) 53.3%,rgba(0,0,0,0.784) 59.2%,rgba(0,0,0,0.648) 65.0%,rgba(0,0,0,0.500) 70.8%,rgba(0,0,0,0.352) 76.7%,rgba(0,0,0,0.216) 82.5%,rgba(0,0,0,0.104) 88.3%,rgba(0,0,0,0.028) 94.2%,transparent 100%);mask-image:radial-gradient(ellipse 100% 125% at 100% 50%,#000 0,#000 41.7%,rgba(0,0,0,0.972) 47.5%,rgba(0,0,0,0.896) 53.3%,rgba(0,0,0,0.784) 59.2%,rgba(0,0,0,0.648) 65.0%,rgba(0,0,0,0.500) 70.8%,rgba(0,0,0,0.352) 76.7%,rgba(0,0,0,0.216) 82.5%,rgba(0,0,0,0.104) 88.3%,rgba(0,0,0,0.028) 94.2%,transparent 100%)}

/* ================= round 17 ================= */
/* the favourite heart sits on the photo, bottom right, on a soft dark disc so it reads on any picture */
.lb-fav{position:absolute;right:.9rem;bottom:.9rem;z-index:3;display:grid;place-items:center;width:2.3rem;height:2.3rem;padding:0;border:0;border-radius:50%;color:#fff;background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:.5;transition:opacity .2s,color .2s,background .2s}
.lb-fav:hover,.lb-fav:focus-visible{opacity:.95;background:rgba(0,0,0,.5)}
.lb-fav.on{opacity:1;color:var(--gold)}

/* letters page: her resting drawing, centred at the bottom of the page (at the bottom of the screen when there are only a few letters) */
.q-wrap.has-end-art{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding-bottom:1.2rem}
.q-wrap.has-end-art #q-grid.diary{margin-bottom:3rem}
.page-art{display:block;align-self:center;margin-top:auto;height:min(12rem,38vw);width:auto;max-width:90%;object-fit:contain;pointer-events:none;opacity:.95}

/* the 3D viewers: a wider, softer halo (was 60% x 56%, middle colour at 38%) */
#viewer{background:radial-gradient(ellipse calc(76% * var(--hs)) calc(70% * var(--hs)) at var(--hx) var(--hy),var(--c1) 0%,var(--c2) 44%,#000 100%)}

/* ================= round 18 ================= */
/* she stands on the left and the bubble is on her right, with the tail (left side of the bubble) pointing at her. Phones keep the stacked layout. */
@media (min-width:821px){#companion{flex-direction:row-reverse}}

/* ================= round 19 ================= */
/* fortune cookie: Keep / Close fade in as soon as the words start to appear, not after everything has settled */
#cookie.text .ck-actions{visibility:visible;opacity:1;transition:opacity .7s .35s}

/* letters page: the title, the note and the letters sit on the same centre line as her drawing */
.q-wrap.is-diary .q-head header{text-align:center}
.q-wrap.is-diary #q-note,.q-wrap.is-diary #q-tools,.q-wrap.is-diary #q-grid.diary{width:100%;max-width:720px;margin-left:auto;margin-right:auto}

/* album pages: a Home polaroid next to the title, on the right */
.album-home{position:absolute;top:1.5rem;right:1.6rem;z-index:2;display:block;width:38px;opacity:.8;transition:opacity .3s,transform .35s var(--ease)}
.album-home:hover,.album-home:focus-visible{opacity:1;transform:scale(1.1) rotate(4deg)}
.album-home svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.album-home::after{content:attr(data-label);position:absolute;right:calc(100% + .6rem);top:50%;transform:translateY(-50%);white-space:nowrap;padding:.2rem .6rem;background:rgba(0,0,0,.8);font-size:.85rem;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s}
.album-home:hover::after,.album-home:focus-visible::after{opacity:1}
#panel .panel-head header{padding-right:3.4rem}
@media (max-width:820px){.album-home{top:.8rem;right:1.2rem;width:32px}.album-home::after{display:none}}

/* album grid: one line for the caption and one for the date, so every picture starts at the same height; the full text opens with the memory */
.entry{min-width:0}
.entry .cap:empty,.entry .when:empty{display:none}
.v-grid .entry .cap,.v-grid .entry .when{line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-grid[data-cap] .entry .cap:empty,.v-grid[data-when] .entry .when:empty{display:block;min-height:1.3em}

/* favourite heart: a little bigger */
.lb-fav{width:3rem;height:3rem}
.lb-fav svg{width:1.55rem;height:1.55rem}