/* XinChào Love — shared styles for about / blog / contact / product */
:root{
  --paper:#F6EFE0; --card:#FFFCF4; --ink:#33392E; --deep:#445541; --red:#C98B7A; --blue:#8FADB8;
  --jade:#5C7057; --pink:#E3A99B; --gold:#DDB775; --sky:#DCE3E3; --mint:#DCE4D2;
  --taro:#F1DCD3; --peach:#F0E2CE; --sand:#E9DFC9; --muted:#6E7566; --shade:#DACDB1; --clay:#A55F4C;
  --airmail:repeating-linear-gradient(135deg,#D9C9AE 0 14px,var(--card) 14px 28px,#B9C6AD 28px 42px,var(--card) 42px 56px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Figtree',sans-serif;font-size:16px;line-height:1.6;}
h1,h2,h3{font-family:'Rammetto One',cursive;font-weight:400;margin:0;}
.hand{font-family:'Caveat',cursive;font-weight:700;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
ul{margin:0;padding:0;list-style:none;}
button,input,select,textarea{font:inherit;}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.muted{color:var(--muted);}

/* header / footer */
body > header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink);}
body > header::after{content:"";display:block;height:9px;background:var(--airmail);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 24px;max-width:1200px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:46px;height:46px;}
.brand span{font-family:'Rammetto One',cursive;font-size:1.2rem;line-height:1;}
nav.main-nav{display:flex;gap:4px;}
nav.main-nav a{font-weight:700;font-size:.92rem;padding:8px 16px;border-radius:30px;}
nav.main-nav a:hover{background:rgba(68,85,65,.1);}
nav.main-nav a.active{background:var(--deep);color:var(--card);}
.back{font-size:.88rem;font-weight:700;color:var(--deep);}
.nav-toggle{display:none;width:42px;height:42px;border-radius:50%;background:var(--card);border:2px solid var(--ink);align-items:center;justify-content:center;cursor:pointer;}
main{padding-bottom:260px;}
footer{position:relative;background:var(--deep);color:var(--card);padding-top:60px;}
footer::before{content:"";position:absolute;inset:0;background:url(pattern.svg) 0 0/220px 200px;opacity:.12;pointer-events:none;}
footer::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:var(--airmail);}
.mascots{position:absolute;left:0;right:0;top:0;pointer-events:none;z-index:2;}
.mascots img{position:absolute;bottom:-1px;}
.mascots .m-xin{left:max(4%,calc(50% - 560px));width:clamp(84px,13vw,150px);}
.mascots .m-chao{right:max(4%,calc(50% - 560px));width:clamp(92px,14vw,168px);}
.footer-top{position:relative;z-index:1;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;padding-bottom:36px;}
.footer-col h4{font-family:'Rammetto One',cursive;font-weight:400;font-size:1rem;color:var(--gold);margin:0 0 12px;}
.footer-col li{margin-bottom:8px;font-size:.92rem;color:#DCE4D2;}
.footer-col p{font-size:.92rem;color:#DCE4D2;margin:0 0 12px;}
.footer-bottom{position:relative;z-index:1;border-top:1.5px solid rgba(255,252,244,.22);padding:18px 0;font-size:.8rem;color:#B9C6AD;}
.footer-bottom .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--deep);color:var(--card);font-weight:800;padding:13px 26px;border-radius:40px;border:none;box-shadow:5px 5px 0 var(--red);cursor:pointer;transition:transform .12s, box-shadow .12s;}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--red);}
.btn.ghost{background:var(--card);color:var(--deep);border:2px solid var(--deep);box-shadow:none;}

/* page hero */
.page-hero{padding:40px 0 10px;}
.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
.script{font-size:clamp(1.5rem,3vw,2rem);color:var(--clay);transform:rotate(-2deg);display:inline-block;line-height:1;}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1;margin:10px 0 18px;}
.lead{font-size:1.12rem;color:var(--muted);max-width:30em;margin:0 0 12px;}
.postcard{background:var(--airmail);padding:11px;border-radius:18px;box-shadow:8px 8px 0 var(--shade);border:2px solid var(--ink);transform:rotate(.7deg);}
.art-panel{position:relative;border:2px solid var(--ink);border-radius:8px;min-height:360px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:6px;}
.art-panel .lanterns{position:absolute;left:0;top:0;width:100%;height:auto;}
.art-panel .chr{position:relative;width:min(38%,170px);margin-bottom:-2px;}
.name-tag{position:absolute;bottom:12px;background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:2px 12px;font-size:1.2rem;line-height:1.3;}

/* sections & cards */
.section{padding:44px 0 0;}
.section-head{max-width:700px;margin-bottom:26px;}
.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.05;margin:6px 0 10px;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:24px;box-shadow:6px 6px 0 var(--shade);}
.card:nth-child(odd){transform:rotate(-.5deg);} .card:nth-child(even){transform:rotate(.5deg);}
.card-visual{width:76px;height:76px;border:2px solid var(--ink);display:grid;place-items:center;margin-bottom:16px;background:var(--peach);}
.card:nth-child(2) .card-visual{background:var(--taro);} .card:nth-child(3) .card-visual{background:var(--sky);}
.card-visual img{width:52px;height:52px;}
.card h3{font-size:1.15rem;line-height:1.2;margin-bottom:8px;}
.card p{margin:0;font-size:.96rem;}
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start;}
.quote{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:30px;box-shadow:6px 6px 0 var(--shade);font-family:'Caveat',cursive;font-weight:700;font-size:1.9rem;line-height:1.2;transform:rotate(-.8deg);}
.quote small{display:block;font:600 .85rem 'Figtree',sans-serif;color:var(--muted);margin-top:14px;}
.timeline{display:grid;gap:16px;margin-top:12px;}
.step{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;}
.step-no{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:var(--mint);display:grid;place-items:center;font-family:'Rammetto One',cursive;color:var(--deep);}
.step h3{font-size:1.02rem;margin:0 0 4px;}
.step p{margin:0;color:var(--muted);}
.values{background:var(--deep);color:var(--card);border-radius:22px;padding:38px;border:2px solid var(--ink);}
.values h2{color:var(--card);} .values .script{color:var(--gold);}
.values .card{background:rgba(255,252,244,.08);border-color:rgba(255,252,244,.3);box-shadow:none;color:var(--card);transform:none;}
.values .card-visual{background:var(--card);border-color:var(--card);}
.values .card p{color:#DCE4D2;}
.cta{margin-top:50px;padding:32px;border-radius:14px;background:var(--mint);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shade);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.cta h2{font-size:1.6rem;margin:2px 0 6px;}

/* contact */
.form-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:44px;align-items:start;}
.contact-cards{display:grid;gap:14px;}
.contact-card{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:16px;display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;}
.contact-card .mini{width:58px;height:58px;border:2px solid var(--ink);display:grid;place-items:center;background:var(--mint);}
.contact-card:nth-child(2) .mini{background:var(--sand);} .contact-card:nth-child(3) .mini{background:var(--taro);} .contact-card:nth-child(4) .mini{background:var(--sky);}
.mini img{width:38px;height:38px;}
.contact-card strong{display:block;margin-bottom:2px;}
.contact-card span{font-size:.9rem;color:var(--muted);}
.form-card{background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:28px;box-shadow:8px 8px 0 var(--shade);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;} .field.full{grid-column:1/-1;}
label{font-size:.82rem;font-weight:800;color:var(--deep);}
input,select,textarea{width:100%;border:2px solid var(--ink);background:#FFFEF9;color:var(--ink);border-radius:12px;padding:11px 13px;outline:none;}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(92,112,87,.25);}
textarea{min-height:150px;resize:vertical;}
.check{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;color:var(--muted);margin:15px 0;font-weight:500;}
.check input{width:auto;margin-top:4px;}
.notice{display:none;margin-top:16px;padding:12px 15px;border-radius:12px;background:var(--mint);border:2px solid var(--ink);font-weight:700;}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
details{background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:14px 18px;}
summary{font-weight:800;cursor:pointer;}
details p{margin:10px 0 0;color:var(--muted);font-size:.92rem;}

/* blog */
.social-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px;}
.social-tabs button{border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:30px;padding:8px 18px;font-weight:800;cursor:pointer;}
.social-tabs button.active{background:var(--deep);color:var(--card);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post-card{background:var(--card);border:2px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:6px 6px 0 var(--shade);}
.post-media{min-height:215px;display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:2px solid var(--ink);}
.post-media.tiktok{background:var(--sky);} .post-media.instagram{background:var(--taro);} .post-media.pinterest{background:var(--sand);}
.post-media>img:not(.thumb){width:84px;height:84px;}
.post-media img.thumb{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.platform{position:absolute;top:12px;left:12px;background:var(--card);border:2px solid var(--ink);padding:2px 10px;border-radius:15px;font-size:.7rem;font-weight:800;letter-spacing:.06em;z-index:1;}
.post-body{padding:18px 20px 20px;}
.post-body h3{font-size:1.05rem;line-height:1.25;margin:0 0 7px;}
.post-body p{color:var(--muted);font-size:.9rem;margin:0 0 6px;}
.post-link{display:inline-block;margin-top:4px;color:var(--deep);font-weight:800;font-size:.88rem;}
.embed-note{margin-top:34px;padding:20px 22px;border-radius:12px;background:var(--card);border:2px dashed var(--ink);font-size:.88rem;color:var(--muted);}
.embed-note strong{color:var(--ink);}
.feed-placeholder{border:2px dashed var(--ink);border-radius:14px;padding:32px;text-align:center;background:rgba(255,252,244,.6);}
.feed-placeholder img{margin:0 auto 6px;width:64px;}

/* product */
.crumbs{padding:26px 0 0;font-size:.88rem;font-weight:700;color:var(--deep);}
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding-top:24px;}
.product-image{border:2px solid var(--ink);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14%;}
.product-image.photo{padding:0;}
.product-image img{width:100%;height:100%;}
.product-image img.photo{object-fit:cover;}
.product-info .script{margin-bottom:4px;}
.product-info h1{font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.15;margin:6px 0 14px;}
.price{font-family:'Rammetto One',cursive;font-size:1.8rem;margin:0 0 18px;}
.description{margin-bottom:26px;white-space:pre-line;}
.meta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;font-size:.84rem;color:var(--muted);font-weight:600;}
.meta-row span{background:var(--card);border:2px solid var(--ink);border-radius:30px;padding:3px 14px;}
.empty-state{text-align:center;padding:80px 20px;color:var(--muted);font-weight:600;}

@media (max-width:900px){
  nav.main-nav{display:none;} .nav-toggle{display:flex;}
  .ph-grid,.story,.form-layout,.product-grid{grid-template-columns:1fr;gap:30px;}
  .cards,.blog-grid,.faq{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .art-panel{min-height:300px;}
}
@media (max-width:560px){
  .wrap{padding:0 14px;} .header-inner{padding-left:14px;padding-right:14px;}
  .brand span{font-size:1rem;}
  .form-grid{grid-template-columns:1fr;} .field.full{grid-column:auto;}
  .footer-top{grid-template-columns:1fr;}
  .values{padding:24px 18px;} .form-card{padding:20px 16px;}
  main{padding-bottom:170px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important;}}

/* social icons */

.social-tabs[hidden]{display:none;}