/* Feiqi's own page: peach blossoms, paper wish tags, a silver bell and one warm tail.
   Scoped to the home page (#main, site header and footer); the adventure world keeps its own look. */
:root { --peach:#efb3bf; --peach-deep:#d98d9e; --blush:#f8e3e5; --cream:#fffaf5; --gold:#c4a06a; --gold-soft:#ead9bd; --tag-ink:#8b4c60; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
#main svg:not([viewBox]) { overflow:visible; }

/* Header and footer */
.site-header .header-note svg { position:absolute; left:0; top:1px; width:17px; height:17px; }
.site-header .header-note small { font:11px var(--serif); letter-spacing:.5px; color:#b08d8f; }
.site-footer > p { font:13px var(--serif); letter-spacing:.5px; color:#9c7f80; }

/* Paper wish tag used as every section label (replaces the old numbered English eyebrows) */
#main .eyebrow:has(.section-tag) { font:inherit; letter-spacing:0; margin-bottom:22px; }
.section-tag { position:relative; display:inline-flex; align-items:center; padding:5px 15px 5px 26px; font:16px/1.4 var(--serif); color:var(--tag-ink); background:linear-gradient(#fff7f3,#fbe9e7); border:1px solid #e9c7ca; border-radius:4px 13px 13px 4px; box-shadow:2px 3px 0 #efd9d8; transform:rotate(-2.5deg); transform-origin:left center; }
.section-tag::before { content:""; position:absolute; left:9px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1px #dcb2ba; }
.section-tag::after { content:""; position:absolute; left:-17px; top:-9px; width:30px; height:18px; border:1.5px solid #d68fa0; border-color:#d68fa0 transparent transparent #d68fa0; border-radius:60% 0 0 0; transform:rotate(-14deg); }

/* Hero */
.hero .journal-edition { font:15px var(--serif); letter-spacing:.12em; color:#ad8584; }
.hero .journal-edition i { font-style:normal; color:var(--gold); }
#main .hero-hello { font:18px var(--serif); letter-spacing:.06em; color:var(--rose); gap:10px; margin-bottom:16px; }
.hello-peach { width:22px; height:22px; flex:none; animation:peach-sway 6s ease-in-out infinite; }
.hero-name > span:last-child { font-family:"Feiqi Hand", var(--sans); font-style:normal; letter-spacing:.08em; }
.hero-description { font-size:15px; line-height:2.05; }
#main .hero-footnote { font:13px var(--serif); letter-spacing:.04em; color:#9b8079; gap:9px; }
.hero-footnote strong { font-weight:500; color:var(--rose); font-size:17px; margin-inline:2px; border-bottom:1px dashed var(--gold); }
.hero-footnote .status-dot { background:var(--peach-deep); box-shadow:0 0 0 4px #f6dde2; }
.hero-art-v2 .art-caption { font:13px var(--serif); letter-spacing:.2em; color:#b48c94; }
.hero-art .art-spark { width:34px; height:34px; --petal:#f2bcc6; }
.hero-art .spark-two { width:24px; height:24px; --petal:#f6cdd3; }
.hero-art .art-spark { animation:peach-sway 7s ease-in-out infinite; }
.hero-art .spark-two { animation-delay:-3s; }

.mood-sticker .mood-icon { width:26px; height:26px; flex:none; transform-origin:50% 12%; }
.mood-sticker:hover .mood-icon, .mood-sticker:focus-visible .mood-icon { animation:bell-ring .7s ease-in-out; }
.mood-sticker .mood-label { font:12px var(--serif); letter-spacing:.08em; color:#b28a8f; }

.pat-button { position:absolute; z-index:4; right:-24px; bottom:92px; display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border:1px solid #e3bcc5; border-radius:999px; background:#fff7f5; color:var(--rose); font:15px var(--serif); box-shadow:3px 4px 0 #f1dcdd; transform:rotate(4deg); transition:background .2s, transform .2s; }
.pat-button:hover { background:#fbe6ea; transform:rotate(1deg) translateY(-1px); }
.pat-bubble { position:absolute; z-index:5; top:58px; left:-58px; max-width:210px; margin:0; padding:11px 15px; border:1.5px solid #e2bcc4; border-radius:18px 18px 18px 5px; background:#fff; color:#6b4452; font:16px/1.55 var(--serif); box-shadow:0 10px 26px #b3767f1f; text-wrap:balance; transform-origin:12% 100%; animation:bubble-pop .35s cubic-bezier(.3,1.6,.6,1); }
.pat-bubble:empty { opacity:0; pointer-events:none; animation:none; }
.shy-steam { position:absolute; z-index:4; top:52px; left:50%; width:90px; height:60px; margin-left:-45px; pointer-events:none; }
.shy-steam i { position:absolute; bottom:0; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 22%,#f7cdd6 75%); box-shadow:0 0 0 1.5px #e8a9b7, 0 3px 8px #d98d9e40; opacity:0; }
.shy-steam i:nth-child(1) { left:14px; }
.shy-steam i:nth-child(2) { left:38px; width:22px; height:22px; }
.shy-steam i:nth-child(3) { left:64px; width:15px; height:15px; }
.hero-art.is-shy .shy-steam i { animation:steam-up 1.5s ease-out forwards; }
.hero-art.is-shy .shy-steam i:nth-child(2) { animation-delay:.18s; }
.hero-art.is-shy .shy-steam i:nth-child(3) { animation-delay:.34s; }
.hero-art.is-shy .garden-art { animation:shy-wiggle .55s ease-in-out 2; }

/* Likes strip */
.interest-strip .strip-label { font:15px var(--serif); letter-spacing:.1em; color:var(--rose); }
.interest-strip > span:not(.strip-label) { font-size:13px; color:#7f6b68; }
.interest-strip > span > svg { width:22px; height:22px; flex:none; }
.interest-strip .scroll-cue { align-items:center; font:14px var(--serif); color:#a07f84; }
.tail-cue { width:46px; height:32px; transform-origin:8% 90%; transition:transform .3s; }
.scroll-cue:hover .tail-cue, .scroll-cue:focus-visible .tail-cue { animation:tail-wag .9s ease-in-out 2; }

/* About */
.about-heading .section-subtitle { font:17px/1.9 var(--serif); color:#9a7b7d; }
.about-body .about-lead { font:21px/1.9 var(--serif); color:#5b4248; }
.about-body p:not(.about-lead) { font-size:14px; line-height:2.05; color:#6f6260; }
.interest-tags span { background:#f8e6e6; color:#9b6474; border:1px solid #efd0d4; border-radius:999px; padding-inline:13px; }
.interest-tags span:last-child { background:#f3ece2; color:#97806f; border-color:#e6d8c6; }

.photo-slot { position:relative; width:min(250px,100%); margin:34px 0 0 6px; padding:12px 12px 14px; background:#fff; box-shadow:0 12px 28px #9a6b6f1c, 0 1px 0 #ead9d6; transform:rotate(-3deg); }
.photo-slot::before { content:""; position:absolute; top:-11px; left:50%; width:86px; height:22px; margin-left:-43px; background:#f3d9c9cc; transform:rotate(3deg); }
.photo-slot-frame { display:grid; place-content:center; justify-items:center; gap:6px; aspect-ratio:4/5; border:1.5px dashed #e3bcc5; background:repeating-linear-gradient(135deg,#fdf5f4 0 11px,#fbeeee 11px 22px); color:#b77d8d; text-align:center; }
.photo-slot-frame svg { width:30px; height:30px; margin-bottom:4px; }
.photo-slot-frame span { font:16px var(--serif); }
.photo-slot-frame small { font-size:11px; color:#b8999d; }
.photo-slot figcaption { margin-top:11px; text-align:center; font:15px var(--serif); color:#8f6b72; }

.little-note.flower-tag { position:relative; margin-top:64px; padding:46px 24px 26px; min-height:0; background:linear-gradient(175deg,#fffaf6,#fbeeea); border:1px solid #ebcfd0; border-radius:12px 12px 8px 8px; box-shadow:5px 7px 0 #efdcda88; transform:rotate(3deg); }
.flower-tag .tag-hole { position:absolute; top:16px; left:50%; width:13px; height:13px; margin-left:-6.5px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1.5px #dcafb8; }
.flower-tag .tag-string { position:absolute; top:-46px; left:50%; width:30px; height:66px; margin-left:-2px; border-left:1.6px solid #d68fa0; border-radius:0 0 0 70%; transform:rotate(-6deg); }
.flower-tag .note-kicker { font:14px var(--serif); letter-spacing:.12em; color:#b98591; text-align:center; }
.flower-tag .note-writing { font:20px/1.75 var(--serif); color:#5d4249; }
.flower-tag .note-writing em { color:var(--rose); font-style:normal; }
.flower-tag .note-signature { font:15px var(--serif); color:#a7818a; }
.note-peach { position:absolute; right:16px; bottom:14px; width:30px; height:30px; transform:rotate(18deg); }

/* Drawer heading and footnote; the drawer itself is styled at the end of this file. */
.projects-heading .handwritten { font:20px var(--serif); color:#b0848d; }
.projects-disclaimer { display:flex; align-items:center; gap:7px; font:14px var(--serif); }
.projects-disclaimer svg { width:18px; height:18px; flex:none; }

/* Wardrobe */
.look-edition { font:13px var(--serif); letter-spacing:.14em; color:#b08b92; }
.look-button small { font-size:11px; }

/* Wish-tag draw */
.path-symbol { font:22px var(--serif); color:var(--rose); background:#fff7f4; }
.idea-desk { position:relative; border-radius:14px 14px 9px 9px; }
.desk-string { position:absolute; top:-34px; left:50%; width:26px; height:52px; border-left:1.6px solid #d68fa0; border-radius:0 0 0 70%; transform:rotate(-5deg); }
.desk-string::after { content:""; position:absolute; left:-8px; bottom:-2px; width:13px; height:13px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1.5px #dcafb8; }
.idea-desk .desk-heading { font:16px var(--serif); letter-spacing:.14em; color:#a5707f; }
.idea-desk .desk-heading svg { width:22px; height:22px; }
#idea-time { font:14px var(--serif); letter-spacing:.06em; color:var(--gold); }

/* Interlude, world card, goodbye */
.in-between .interlude-star { width:46px; height:46px; margin-inline:auto; transform:rotate(12deg); }
.in-between .interlude-english { font:15px var(--serif); letter-spacing:.06em; color:#a5818a; }
.invitation-seal small { font:11px var(--serif); letter-spacing:.2em; }
.contact-links > a > svg, .contact-links > button > svg { width:26px; height:26px; flex:none; }

@keyframes peach-sway { 0%, 100% { transform:rotate(-8deg); } 50% { transform:rotate(10deg) translateY(-2px); } }
@keyframes bell-ring { 0%, 100% { transform:rotate(0); } 20% { transform:rotate(14deg); } 45% { transform:rotate(-11deg); } 70% { transform:rotate(6deg); } }
@keyframes tail-wag { 0%, 100% { transform:rotate(0); } 30% { transform:rotate(-14deg); } 65% { transform:rotate(9deg); } }
@keyframes bubble-pop { from { opacity:0; transform:scale(.6) translateY(8px); } to { opacity:1; transform:none; } }
@keyframes steam-up { 0% { opacity:0; transform:translateY(10px) scale(.6); } 25% { opacity:1; } 100% { opacity:0; transform:translateY(-42px) scale(1.35); } }
@keyframes shy-wiggle { 0%, 100% { transform:rotate(0); } 30% { transform:rotate(-1.4deg); } 70% { transform:rotate(1.4deg); } }

@media (max-width: 1080px) {
  .pat-bubble { left:-24px; }
  .photo-slot { width:min(230px,100%); }
}
@media (max-width: 700px) {
  .section-tag { font-size:15px; }
  #main .hero h1 { font-size:clamp(36px,10.6vw,52px); }
  .hero-description { font-size:14px; }
  .about-body p:not(.about-lead) { font-size:13.5px; }
  #main .hero-footnote { font-size:12px; flex-wrap:wrap; }
  .pat-button { right:-8px; bottom:84px; font-size:14px; padding:8px 13px; }
  .pat-bubble { top:44px; left:-6px; max-width:min(240px,72vw); font-size:15px; }
  .about-body .about-lead { font-size:19px; }
  .photo-slot { margin:22px auto 0; width:min(240px,80%); }
  .little-note.flower-tag { margin-top:58px; }
  .interest-strip > span:not(.strip-label) { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hello-peach, .hero-art .art-spark, .mood-sticker .mood-icon, .tail-cue, .bell-big, .hero-art.is-shy .garden-art, .pat-bubble { animation:none !important; }
  .hero-art.is-shy .shy-steam i { animation:none; opacity:1; transform:translateY(-14px); }
}
@media (forced-colors: active) {
  .section-tag, .pat-button, .pat-bubble, .little-note.flower-tag { border:1px solid CanvasText; }
}


/* Completed homepage illustration slots. Sticker is decorative; live text carries the response. */
.photo-slot img { display:block; width:100%; height:auto; border-radius:2px; }
.pat-sticker { position:absolute; z-index:5; width:108px; height:108px; object-fit:contain; top:138px; left:-42px; pointer-events:none; filter:drop-shadow(0 5px 9px #a9718026); }
.pat-sticker[hidden] { display:none; }
@media (max-width:1080px) { .pat-sticker { left:-12px; } }
@media (max-width:700px) { .pat-sticker { width:88px; height:88px; top:126px; left:0; } }

@media (max-width:700px) { #projects .project-filters { flex-wrap:wrap; } #projects .project-filters .filter { white-space:nowrap; } }

/* The drawer: one open drawer, twelve felt compartments, each keepsake drawn as a small object.
   Filters fade the other compartments instead of removing them, so the drawer keeps its shape. */
#projects .drawer-cabinet { position:relative; margin-top:30px; filter:drop-shadow(0 22px 30px #8d655324); }
#projects .drawer-tray { list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; border:12px solid #ead6c4; border-bottom:0; border-radius:16px 16px 0 0; background:linear-gradient(#e6cfbc,#ead6c4); }
#projects .drawer-tray .project-card, #projects .drawer-tray .project-card:hover { position:relative; display:block; grid-column:auto; min-width:0; overflow:visible; border:0; border-radius:8px; background:radial-gradient(ellipse at 50% 32%,#fcf1ee,#f3dfdb 78%); box-shadow:inset 0 11px 14px -9px #8a5a5a45, inset 0 0 0 1px #e2c4bf; transform:none; transition:opacity .35s, filter .35s; }
#projects .drawer-item { width:100%; height:100%; min-height:212px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 12px; border:0; border-radius:8px; background:transparent; color:inherit; text-align:center; cursor:pointer; }
#projects .drawer-thing { display:block; flex:none; width:min(148px,92%); transform:rotate(var(--tilt,-3deg)); transition:transform .45s cubic-bezier(.3,1.5,.5,1), filter .3s; filter:drop-shadow(0 4px 3px #7b4a4a30); }
#projects .drawer-thing svg { display:block; width:100%; height:auto; aspect-ratio:6/5; overflow:visible; }
#projects .drawer-name { margin-top:4px; font:17px/1.35 var(--serif); color:#5d4249; text-wrap:balance; transition:color .2s; }
#projects .drawer-hint { max-width:17em; font-size:12px; line-height:1.65; color:#9a7f80; }
#projects .drawer-item:hover .drawer-thing, #projects .drawer-item:focus-visible .drawer-thing { transform:translateY(-10px) rotate(0) scale(1.07); filter:drop-shadow(0 15px 10px #7b4a4a33); }
#projects .drawer-item:active .drawer-thing { transform:translateY(-4px) rotate(0) scale(1.02); transition-duration:.12s; }
#projects .drawer-item:hover .drawer-name, #projects .drawer-item:focus-visible .drawer-name { color:var(--rose); }
#projects .drawer-item:focus-visible { outline:2px solid var(--rose); outline-offset:-7px; }
#projects .drawer-item:hover { color:inherit; text-decoration:none; }
#projects .drawer-tray .project-card:nth-child(1) { --tilt:-5deg; } #projects .drawer-tray .project-card:nth-child(2) { --tilt:4deg; }
#projects .drawer-tray .project-card:nth-child(3) { --tilt:-2deg; } #projects .drawer-tray .project-card:nth-child(4) { --tilt:6deg; }
#projects .drawer-tray .project-card:nth-child(5) { --tilt:3deg; } #projects .drawer-tray .project-card:nth-child(6) { --tilt:-6deg; }
#projects .drawer-tray .project-card:nth-child(7) { --tilt:5deg; } #projects .drawer-tray .project-card:nth-child(8) { --tilt:-3deg; }
#projects .drawer-tray .project-card:nth-child(9) { --tilt:-7deg; } #projects .drawer-tray .project-card:nth-child(10) { --tilt:4deg; }
#projects .drawer-tray .project-card:nth-child(11) { --tilt:-4deg; } #projects .drawer-tray .project-card:nth-child(12) { --tilt:3deg; }
#projects .drawer-tray .project-card[data-match="false"] { opacity:.36; filter:saturate(.45); }
#projects .drawer-tray .project-card[data-match="false"] .drawer-thing { transform:rotate(var(--tilt)) scale(.93); }
#projects .drawer-tray:not([data-filter="all"]) .project-card[data-match="true"] .drawer-thing { transform:translateY(-7px) rotate(0) scale(1.04); }
#projects .drawer-front { position:relative; display:flex; align-items:center; justify-content:center; height:66px; border-radius:0 0 16px 16px; background:linear-gradient(#f2e1d1,#e4c9b3); box-shadow:inset 0 3px 0 #f9eee3, inset 0 -4px 0 #d6b8a0; }
#projects .drawer-front::before, #projects .drawer-front::after { content:""; position:absolute; top:50%; width:24px; height:24px; margin-top:-12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff4da,#dbb77e 58%,#b48a52); box-shadow:0 3px 5px #8d655345, inset 0 -2px 2px #9c74403a; }
#projects .drawer-front::before { left:22%; } #projects .drawer-front::after { right:22%; }
#projects .drawer-label { padding:5px 18px; border:2px solid #c9a46a; border-radius:4px; background:#fffaf3; font:15px/1.4 var(--serif); letter-spacing:.06em; color:#8a5a66; box-shadow:inset 0 0 0 2px #fffaf3, inset 0 0 0 3px #ecdcb9, 0 2px 0 #c9a46a55; }

/* Story card for one keepsake: its drawing on top, then leaf through the drawer with prev/next. */
#project-dialog .dialog-thing { width:150px; margin:4px auto 2px; filter:drop-shadow(0 8px 8px #7b4a4a2e); }
#project-dialog .dialog-thing:empty { display:none; }
#project-dialog .dialog-thing svg { display:block; width:100%; height:auto; aspect-ratio:6/5; overflow:visible; transform:rotate(-3deg); animation:thing-in .4s cubic-bezier(.3,1.4,.5,1); }
#project-dialog .dialog-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; padding-top:16px; border-top:1px dashed #e2cbc6; }
#project-dialog .dialog-step { min-height:42px; padding:8px 15px; border:1px solid #e0c3c9; border-radius:999px; background:#fff7f4; color:var(--rose); font:14px var(--serif); transition:background .2s; }
#project-dialog .dialog-step:hover { background:#fbe6ea; }
#project-dialog .dialog-count { font:12px var(--mono); letter-spacing:.12em; color:#b09389; }
#project-dialog .dialog-done { margin-top:16px; }
@keyframes thing-in { from { opacity:0; transform:translateY(8px) rotate(-8deg) scale(.92); } to { opacity:1; transform:rotate(-3deg); } }

@media (max-width: 1000px) {
  #projects .drawer-tray { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  #projects .drawer-cabinet { margin-top:14px; }
  #projects .filter-status { margin:10px 2px 0; text-align:right; }
  #projects .drawer-tray { gap:7px; padding:8px; border-width:8px; border-radius:12px 12px 0 0; }
  #projects .drawer-item { min-height:142px; padding:12px 4px 11px; gap:3px; }
  #projects .drawer-thing { width:min(96px,96%); }
  #projects .drawer-name { font-size:13px; line-height:1.3; }
  #projects .drawer-hint { display:none; }
  #projects .drawer-front { height:50px; border-radius:0 0 12px 12px; }
  #projects .drawer-front::before, #projects .drawer-front::after { width:18px; height:18px; margin-top:-9px; }
  #projects .drawer-front::before { left:9%; } #projects .drawer-front::after { right:9%; }
  #projects .drawer-label { font-size:13px; padding:4px 12px; }
  #project-dialog .dialog-thing { width:118px; }
  #project-dialog .dialog-step { padding-inline:12px; font-size:13px; }
}
@media (prefers-reduced-motion: reduce) {
  #projects .drawer-thing, #projects .drawer-tray .project-card { transition:none; }
  #project-dialog .dialog-thing svg { animation:none; }
}
@media (forced-colors: active) {
  #projects .drawer-tray .project-card { border:1px solid CanvasText; }
}