/* 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 (formerly the desk): a receipt, a stack of wish tags, a silver bell */
.projects-heading .handwritten { font:20px var(--serif); color:#b0848d; }
.visual-receipt { background:radial-gradient(circle at 78% 22%,#fbe6e6,transparent 45%),#f6e7e5; }
.visual-tags { background:radial-gradient(circle at 25% 80%,#eef0e3,transparent 50%),#e9ecdf; }
.visual-bell { background:radial-gradient(circle at 50% 30%,#f2ecf7,transparent 55%),#ebe5f0; }
.project-visual .visual-label { font:13px var(--serif); letter-spacing:.08em; color:#a07a82; }
.visual-tags .visual-label { color:#7c876b; }
.visual-bell .visual-label { color:#8a7896; }
.receipt { position:relative; display:grid; gap:7px; width:158px; padding:18px 16px 26px; background:#fffdf9; color:#6d5a5a; font:10px/1.4 var(--mono); box-shadow:0 8px 18px #8a5f5f1f; transform:rotate(-5deg); }
.receipt::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px; background:linear-gradient(-45deg,transparent 33%,#fffdf9 33% 66%,transparent 66%) 0 0/12px 16px, linear-gradient(45deg,transparent 33%,#fffdf9 33% 66%,transparent 66%) 0 0/12px 16px; }
.receipt b { text-align:center; font:15px var(--serif); color:#7a5560; margin-bottom:4px; }
.receipt span { display:flex; justify-content:space-between; }
.receipt i { font-style:normal; }
.receipt .receipt-rule { border-top:1px dashed #d6c3be; margin:3px 0; }
.receipt small { text-align:center; margin-top:4px; color:#b08a90; }
.coffee-ring { position:absolute; left:calc(50% + 34px); top:46%; width:70px; height:70px; border-radius:50%; border:5px solid #b98c6c2e; box-shadow:inset 0 0 0 2px #b98c6c14; transform:rotate(20deg) scaleX(1.08); pointer-events:none; }
.drawer-pencil { position:absolute; right:18px; top:24px; font:16px var(--serif); color:var(--rose); transform:rotate(9deg); }
.tag-stack { position:relative; width:150px; height:178px; }
.paper-tag { position:absolute; inset:0 18px 0 18px; border-radius:10px 10px 6px 6px; border:1px solid #dcd2bf; background:#f9efe1; box-shadow:0 6px 14px #6f7a5a18; }
.paper-tag::before { content:""; position:absolute; top:13px; left:50%; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:#e9ecdf; box-shadow:inset 0 0 0 1.4px #cdbfa6; }
.tag-back { transform:rotate(-12deg) translateX(-14px); }
.tag-mid { background:#fdf0f1; transform:rotate(7deg) translateX(12px); }
.tag-front { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding-top:18px; background:#fffcf7; transform:rotate(-2deg); }
.tag-front::after { content:""; position:absolute; top:-30px; left:50%; width:22px; height:48px; border-left:1.6px solid #c9566f; border-radius:0 0 0 80%; transform:rotate(-8deg); }
.tag-front b { font:17px/1.5 var(--serif); font-weight:400; color:#6e5050; }
.tag-front svg { width:24px; height:24px; margin-top:8px; }
.bell-hang { position:relative; display:grid; justify-items:center; padding-top:4px; }
.bell-ribbon { width:4px; height:56px; background:linear-gradient(#e8a7b4,#d98d9e); border-radius:2px; }
.bell-ribbon::before, .bell-ribbon::after { content:""; position:absolute; top:44px; width:26px; height:16px; border:3px solid #df99a8; border-radius:50%; }
.bell-ribbon::before { left:calc(50% - 27px); transform:rotate(-12deg); }
.bell-ribbon::after { left:calc(50% + 1px); transform:rotate(12deg); }
.bell-big { width:96px; height:96px; margin-top:-6px; transform-origin:50% 8%; --bell:#efedf3; --bell-line:#9c8698; }
.project-card:hover .bell-big { animation:bell-ring .9s ease-in-out; }
.bell-sound { position:absolute; top:76px; left:calc(50% + 52px); font:18px var(--serif); color:#a48bb0; transform:rotate(12deg); }
.bell-sound.two { top:104px; left:auto; right:calc(50% + 50px); font-size:15px; transform:rotate(-14deg); }
.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; } }

/* A bigger drawer: twelve keepsakes, with familiar paper and fabric textures. */
#projects .drawer-visual { background:radial-gradient(circle at 25% 25%,#fff8f0,transparent 65%),#eee4dc; }
#projects .drawer-object { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:172px; min-height:148px; padding:20px 14px; background:#fffaf1; border:1px solid #d9c8b8; box-shadow:6px 9px 0 #ab8d7917; transform:rotate(-5deg); color:#8c675e; text-align:center; }
#projects .object-kind { font:12px var(--serif); letter-spacing:.2em; border-bottom:1px dashed #d8b7ad; padding-bottom:8px; width:100%; }
#projects .drawer-object b { font:16px/1.6 var(--serif); font-weight:400; }
#projects .drawer-object small { font:10px var(--serif); color:#ad9390; }
#projects .object-doodle { font:29px var(--serif); color:#c7899d; }
#projects .drawer-ticket .drawer-object, #projects .drawer-cinema .drawer-object { min-height:112px; width:205px; border-block:4px double #c6a48e; background:#f9e8d5; transform:rotate(7deg); }
#projects .drawer-bookmark .drawer-object { width:95px; min-height:196px; border-radius:8px 8px 2px 2px; background:#edf0df; color:#718060; transform:rotate(11deg); }
#projects .drawer-sketch .drawer-object { background:repeating-linear-gradient(#fffaf4 0 23px,#ddcfc133 23px 24px); transform:rotate(4deg); }
#projects .drawer-sketch .object-doodle { width:53px; height:39px; border:2px solid #bd8795; border-top-style:dashed; border-radius:3px 3px 19px 19px; font-size:0; }
#projects .drawer-sketch .object-doodle::after { content:""; display:block; margin-left:49px; width:21px; height:26px; border:2px solid #bd8795; border-radius:0 50% 50% 0; }
#projects .drawer-ribbon .drawer-object { background:#f9e5e9; border:7px double #e9b7c4; border-radius:45% 12% 45% 12%; transform:rotate(-8deg); }
#projects .drawer-recipe .drawer-object { background:#fff3db; transform:rotate(-2deg); }
#projects .drawer-postcard .drawer-object { width:206px; min-height:135px; background:linear-gradient(170deg,#f3d9dd 0%,#fff1d9 58%,#c9bbbc 59%,#b9a9ac 74%,#fff8ed 75%); transform:rotate(5deg); }
#projects .drawer-umbrella .drawer-object { width:110px; min-height:191px; border-radius:50px 50px 15px 15px; background:repeating-linear-gradient(90deg,#f3dce1 0 12px,#ecd0d7 12px 24px); }
#projects .drawer-keyring .drawer-object { width:155px; min-height:155px; border-radius:48%; background:#f4ddd7; border:3px double #d7a391; transform:rotate(6deg); }
@media (max-width:700px) { #projects .project-filters { flex-wrap:wrap; } #projects .project-filters .filter { white-space:nowrap; } }
/* Twelve items fill an even grid; remove the old three-card last-item feature layout. */
#projects .project-card:last-child { grid-column:auto; display:block; }
#projects .project-card:last-child[hidden] { display:none; }
#projects .project-card:last-child .project-visual { min-height:0; border-right:0; border-bottom:1px solid #e8ddd5; height:244px; }
@media(max-width:1080px){#projects .project-card:last-child .project-visual{height:224px;}}
@media(max-width:900px){#projects .project-card:last-child .project-visual{height:240px;}}
@media(max-width:640px){#projects .project-card:last-child .project-visual{height:257px;}}