/* Pulp & Paw Studio portal: "sunlit paper studio" (Figma: Pulp & Paw — Visual Upgrade v1).
   Brand: orange #D35F1B, teal #139497, cream #E4CAB6, cocoa #3E2A1A, ivory #F6E7E2. Raw orange/teal are accents only (fail AA as text).
   Text colours checked for WCAG AA: cocoa 11.2:1, muted #6B5444 5.9:1, link #0E6F71 4.9:1 on ivory; white on #B5501A 5.1:1. */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-700.woff2) format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-var.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
:root{
  --orange:#D35F1B;--orange-btn:#B5501A;--orange-btn-d:#8F3F12;--orange-ink:#A84A15;
  --teal:#139497;--teal-ink:#0E6F71;--teal-ink-d:#0A5658;
  --cream:#E4CAB6;--cream-l:#F1E1D4;--cocoa:#3E2A1A;--muted:#6B5444;--ivory:#F6E7E2;--card:#FBF3EF;
  --ok:#0B5E60;--ok-bg:#DDF1F0;--r:28px;--line:2.5px solid var(--cocoa);--sh:6px 6px 0 var(--cocoa);--sh-s:4px 4px 0 var(--cocoa);
  --cjk:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei";
  --font:"Nunito","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,var(--cjk),sans-serif;
  --font-d:"Fraunces",Georgia,"Times New Roman",var(--cjk),serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:17px/1.65 var(--font);color:var(--cocoa);background-color:var(--ivory);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .065 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(1200px 700px at 85% -10%,rgba(255,250,240,.75),rgba(255,250,240,0) 70%);background-attachment:scroll}
.lang-zh{line-height:1.8}
a{color:var(--teal-ink);text-decoration-thickness:2px;text-underline-offset:3px}a:hover{color:var(--teal-ink-d)}
:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--card);padding:.5rem;z-index:9;border:var(--line);border-radius:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
h1,h2,h3{color:var(--cocoa);font-weight:800}
.display,h1,h2{font-family:var(--font-d);font-weight:700;letter-spacing:-.02em}
.lang-zh .display,.lang-zh h1,.lang-zh h2{letter-spacing:0}
img{max-width:100%;height:auto}
h1{font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.08;margin:.3rem 0 .8rem}
h2{font-size:clamp(1.5rem,3.2vw,2rem);line-height:1.15;margin:2.2rem 0 .6rem}
h3{font-size:1.2rem;margin:.2rem 0 .4rem;line-height:1.3}
.lead{font-size:1.15rem;max-width:44rem;color:var(--muted)}
.eyebrow,.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:900;color:#9A4314;margin:0}
.small{font-size:.875rem}.muted{color:var(--muted)}
/* Header: sticker pill */
.site-header{position:sticky;top:0;z-index:20;padding:14px 0 0}
.nav-pill{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;min-height:68px;padding:10px 12px 10px 22px;background:var(--card);border:var(--line);border-radius:36px;box-shadow:var(--sh-s)}
.brand{display:flex;align-items:center;text-decoration:none}
.lockup-head{display:block;width:190px;height:30px}
.site-header nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.site-header nav a{display:block;padding:8px 14px;border-radius:999px;border:2px solid transparent;text-decoration:none;color:var(--cocoa);font-size:15px;font-weight:800;white-space:nowrap}
.site-header nav a:hover{background:var(--cream-l);color:var(--cocoa)}
.site-header nav a[aria-current=page]{background:var(--cream)}
.site-header nav a.lang-switch{border-color:var(--teal-ink);color:var(--teal-ink);margin-left:4px}
.site-header nav a.lang-switch:hover{background:var(--ok-bg)}
@media (max-width:599px){.site-header nav li.anchor{display:none}}
@media (max-width:959px){
  .site-header{padding-top:10px}
  .nav-pill{border-radius:26px;padding:10px 12px 8px 16px}
  .site-header nav{width:100%;overflow-x:auto;scrollbar-width:none;margin:0 -4px}.site-header nav ul{justify-content:space-between}
  .site-header nav::-webkit-scrollbar{display:none}
  .site-header nav a{padding:6px 11px;font-size:14px}
  .lockup-head{width:160px;height:25px}
}
main{padding-bottom:3rem;min-height:60vh}
/* Buttons: sticker press */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;margin:.3rem .5rem .3rem 0;border-radius:999px;border:var(--line);background:var(--orange-btn);color:#fff;font:inherit;font-weight:800;font-size:16px;line-height:1.2;text-decoration:none;box-shadow:var(--sh-s);transition:transform .12s,box-shadow .12s,background-color .12s}
.btn:hover{color:#fff;background:var(--orange-btn-d)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--cocoa)}
.btn-ghost{background:var(--card);color:var(--cocoa)}.btn-ghost:hover{background:#fff;color:var(--cocoa)}
.ico-arrow{flex:none;width:18px;height:18px}
@media (hover:hover){.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--cocoa)}}
/* Cards, tags, chips */
.card{background:var(--card);border:var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh);position:relative;transition:transform .18s,box-shadow .18s}
.tag{display:inline-flex;align-items:center;gap:6px;margin:0 0 .6rem;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.t-or{background:#F6D9C5;color:#8F3F12}.t-teal{background:#D3ECEA;color:var(--teal-ink-d)}.t-live{background:var(--ivory);color:var(--teal-ink-d);border:2px solid var(--cocoa)}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid var(--cocoa);flex:none}
.dot-or{background:var(--orange)}.dot-cr{background:var(--cream)}.dot-live{background:var(--teal);border-color:var(--teal-ink-d)}
.chip{display:inline-block;line-height:1.4;padding:6px 14px 6px 10px;border:2px solid var(--cocoa);border-radius:20px;background:var(--card);font-weight:800;font-size:14px;margin:0 0 18px;box-shadow:2px 2px 0 var(--cocoa)}
.chip-paw{color:var(--orange);width:18px;height:18px;vertical-align:-4px;margin-right:6px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:.8rem 0 0;padding:0}
.chips li{padding:3px 12px;border:2px solid var(--cocoa);border-radius:999px;font-size:13.5px;font-weight:800;background:var(--ivory)}
/* Hero */
.hero{position:relative;padding:36px 0 8px;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1fr;gap:8px 24px;align-items:center}
.hero-text{position:relative;z-index:2}
.hero h1{font-size:clamp(2.75rem,1.1rem + 6vw,5.25rem);line-height:1;letter-spacing:-.035em;margin:0 0 20px}
.lang-zh .hero h1{letter-spacing:0;line-height:1.12}
.hl{font-style:normal;color:var(--orange-btn);position:relative;display:inline-block;white-space:nowrap}
.squiggle{position:absolute;left:2%;right:-4%;bottom:-.14em;width:104%;height:.26em}
.hero .lead{font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.6;max-width:34rem;margin:0 0 8px}
.cta{margin:18px 0 0}
.hero-art{position:relative;width:min(100%,560px);aspect-ratio:560/600;justify-self:center;margin-top:8px;--px:0;--py:0}
.hero-art>*{position:absolute}
.disc{left:-6%;top:-6%;width:112%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,#F3DCCB 0 58%,rgba(243,220,203,0) 72%)}
.par{transform:translate3d(calc(var(--px)*10px),calc(var(--py)*6px),0);will-change:transform}
.par-slice{left:10.7%;top:2%;width:78.6%;transform:translate3d(calc(var(--px)*4px),calc(var(--py)*4px),0)}
.slice-svg{display:block;width:100%;height:auto}
.par-pom{left:5%;bottom:4%;width:50.4%;z-index:2}
.par-pea{left:55%;bottom:4%;width:34.3%;z-index:3;transform:translate3d(calc(var(--px)*14px),calc(var(--py)*8px),0)}
.dog{display:block;width:100%;height:auto;cursor:pointer;transform-origin:50% 100%;filter:drop-shadow(5px 6px 0 rgba(62,42,26,.18))}
.ground{left:3%;right:3%;bottom:2.5%;height:6%;border-radius:50%;background:rgba(228,202,182,.85)}
.leaf{width:30px;height:45px;z-index:1}
.l1{left:3%;top:9%}.l2{right:2%;top:3%;width:22px;height:33px}.l3{right:-1%;top:58%;width:26px;height:39px;z-index:4}.l4{left:44%;top:-2%;width:18px;height:27px}
.label{display:flex;align-items:center;gap:8px;margin:0;padding:7px 12px;background:var(--card);border:2px solid var(--cocoa);border-radius:14px;box-shadow:3px 3px 0 var(--cocoa);font-size:14px;font-weight:700;white-space:nowrap;z-index:5;transform-origin:0 50%}
.label b{font-weight:900}
.label-pom{left:-2%;top:66%}.label-pea{right:-1%;top:34%}
.trail-wrap{position:relative;height:96px;overflow:hidden}
.trail{position:absolute;left:0;top:0;width:560px;height:auto;max-width:none}
.pw{opacity:0}.pw-b{color:var(--orange)}.pw-s{color:var(--cream)}
@media (min-width:960px){
  .hero{padding:44px 0 0}
  .hero-inner{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"t a" "w a";gap:0 32px}
  .hero-text{grid-area:t;padding-top:40px}.hero-art{grid-area:a;margin:0}.trail-wrap{grid-area:w;align-self:end;height:130px}
  .trail{width:640px}
}
@media (max-width:959px){.hero-art{width:min(100%,400px)}.label{font-size:12px;padding:5px 9px;border-radius:11px}.label-pom{top:70%}.label-pea{top:30%}.trail-wrap{order:3;height:70px}.trail{width:400px}}
@media (max-width:420px){.label .rest{display:none}}
/* Marquee band */
.marquee{background:var(--cocoa);color:var(--ivory);overflow:hidden;border-block:var(--line);margin:8px 0 0}
.marquee-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex:none}
.marquee-list li{font-family:var(--font-d);font-weight:700;font-size:clamp(18px,2vw,24px);padding:14px 0;white-space:nowrap;display:flex;align-items:center}
.marquee-list li::after{content:"";width:22px;height:22px;margin:0 26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 94C31 94 19 85 19 72C19 58 34 47 50 47C66 47 81 58 81 72C81 85 69 94 50 94ZM12.7 39.8A10 13 -22 1 1 31.3 32.2A10 13 -22 1 1 12.7 39.8ZM39 20A11 14 0 1 1 61 20A11 14 0 1 1 39 20ZM68.7 32.2A10 13 22 1 1 87.3 39.8A10 13 22 1 1 68.7 32.2Z' fill='%23D35F1B' stroke='%23F6E7E2' stroke-width='6'/%3E%3C/svg%3E") center/contain no-repeat}
/* Sections */
.band{padding:56px 0 8px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 40px;margin-bottom:28px}
.sec-head h2{font-size:clamp(2.25rem,1.2rem + 3.6vw,4rem);line-height:1.02;margin:.35rem 0 0}
.section-lead{color:var(--muted);margin:0;max-width:26rem;font-size:16px}
.logo-note{display:flex;gap:14px;align-items:center}
.note-icon{width:56px;height:56px;flex:none;display:block}
.section-lead>picture{flex:none;display:block}
/* Products */
.products{display:grid;gap:24px;grid-template-columns:1fr}
.product.live{background:var(--teal-ink);color:#fff;display:grid;gap:20px;overflow:hidden;padding:30px}
.product.live h3{color:#fff;font-size:clamp(2rem,1.4rem + 2vw,2.6rem);line-height:1.05;margin:.2rem 0 .7rem}
.product.live p{margin:.4rem 0}
.product.live .url{color:#E3F3F2;margin-top:.6rem}
.product-link{margin:1.1rem 0 .2rem}
.mini{position:relative;align-self:center;justify-self:center;width:min(100%,280px);background:var(--card);color:var(--cocoa);border:var(--line);border-radius:22px;box-shadow:var(--sh);padding:18px 18px 20px;transform:rotate(3deg)}
.mini-h{font-family:var(--font-d);font-weight:700;font-size:21px;line-height:1.15;margin:.5rem 0 .7rem!important}
.mini-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.mini-chips li{font-size:12.5px;font-weight:900;padding:2px 10px;border-radius:999px;background:#D3ECEA;color:var(--teal-ink-d)}
.mini-chips li:nth-child(2){background:#F6D9C5;color:#8F3F12}
.mini-paw{position:absolute;right:14px;bottom:12px;color:var(--orange);width:26px;height:26px}
.soon-col{display:grid;gap:24px}
.product.soon{display:flex;gap:16px;align-items:flex-start;box-shadow:none;border:2.5px dashed #B99883;background:rgba(251,243,239,.7);padding:22px}
.product.soon h3{font-size:1.55rem;margin:.1rem 0 .3rem}
.product.soon .ico{flex:none;margin-top:4px}
@media (min-width:760px){.product.live{grid-template-columns:1.25fr .9fr}}
@media (min-width:960px){.products{grid-template-columns:1.62fr 1fr}}
@media (hover:hover){.product.live:hover,.sister:hover{transform:translateY(-4px);box-shadow:9px 9px 0 var(--cocoa)}}
/* Sisters */
.sisters{display:grid;gap:24px;grid-template-columns:1fr;align-items:end}
.sister{display:flex;gap:22px;align-items:center}
.sister h3{font-family:var(--font-d);font-weight:700;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem);margin:0 0 .4rem}
.sister h3 .alt{font-family:var(--font);font-weight:800;font-size:.7em}
.sister p{margin:0}
.round{flex:none;display:block;width:200px;height:200px;border-radius:50%;border:var(--line);box-shadow:var(--sh-s)}
.peach .round{width:150px;height:150px}
@media (min-width:960px){.sisters{grid-template-columns:1.25fr 1fr}.sisters{align-items:start}.pomelo{padding:32px}.peach{margin-top:56px}}
@media (max-width:620px){.sister{flex-direction:column;align-items:flex-start;gap:14px}.round,.peach .round{width:120px;height:120px}}
/* Contact band */
.contact-band{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;background:#E9CFBC;padding:40px 44px;overflow:hidden}
.contact-band h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.2rem);line-height:1.04;margin:.4rem 0 .6rem}
.contact-band p{margin:0;max-width:34rem}
.contact-band .kicker{color:var(--orange-btn-d)}.contact-band a:not(.btn){color:var(--teal-ink-d)}
.contact-cta .email{margin:.6rem 0 0;font-weight:800;overflow-wrap:anywhere}
.contact-cta .email a{color:var(--teal-ink-d)}
.cb-paw,.cb-paw2{position:absolute;color:var(--orange-btn);width:34px;height:34px;right:36%;top:18px;transform:rotate(18deg)}
.cb-paw2{color:var(--card);width:20px;height:20px;right:33%;top:52px}
@media (max-width:620px){.contact-band{padding:28px 22px}.cb-paw,.cb-paw2{display:none}}
/* Reveal (added by motion.js only to headings still below the fold) */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
/* Prose pages */
.page{padding-top:2.5rem}
.prose{max-width:780px}
.prose h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem);line-height:1.05}
.prose h2{font-size:clamp(1.45rem,1.1rem + 1.2vw,1.9rem)}
.prose li{margin:.3rem 0}
.prose li::marker{color:var(--orange)}
.sheet{margin:1.5rem 0;padding:0}
.sheet img{display:block;width:100%;border-radius:22px;border:var(--line);box-shadow:var(--sh-s)}
.sheet figcaption{margin-top:.6rem}
.contact-card{margin:1.5rem 0}
.contact-card .email{font-size:clamp(1.15rem,4.5vw,1.6rem);font-weight:800;margin:.2rem 0;overflow-wrap:anywhere}
hr{border:0;border-top:2.5px dashed #C9A58C;margin:2rem 0}
/* Footer */
.site-footer{border-top:var(--line);background:rgba(251,243,239,.6);padding:30px 0 36px;margin-top:2rem;font-size:15px}
.foot-grid{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:flex-start}
.footer-brand .lockup{display:block;width:240px;height:38px}
.made{margin:.7rem 0 0;font-weight:800}
.slogan{margin:.1rem 0 0;color:var(--orange-ink);font-family:var(--font-d);font-style:italic;font-weight:700}
.lang-zh .slogan{font-style:normal}
.foot-meta{text-align:right}.foot-meta p{margin:.2rem 0}
.foot-links a{font-weight:700}
@media (max-width:700px){.foot-meta{text-align:left}}
/* Motion: "Two sisters walk in" (~2.5 s entrance, then a calm idle loop). transform/opacity only. */
@keyframes sliceIn{from{opacity:0;transform:scale(.86) rotate(-24deg)}to{opacity:1;transform:none}}
@keyframes drift{to{transform:rotate(360deg)}}
@keyframes rise{0%{opacity:0;transform:translateY(48px)}70%{opacity:1}100%{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes float{from{transform:translateY(-8px) rotate(-6deg)}to{transform:translateY(8px) rotate(6deg)}}
@keyframes walk{0%{opacity:0}2%{opacity:1}50%{opacity:1}58%{opacity:0}100%{opacity:0}}
@keyframes boop{0%,100%{transform:scale(1)}40%{transform:scale(1.04,.97)}70%{transform:scale(.99,1.02)}}
@keyframes marq{to{transform:translateX(-50%)}}
.slice-in{animation:sliceIn .7s cubic-bezier(.2,.9,.25,1.15) both}
.slice-svg{animation:drift 120s linear 2s infinite}
.hero-text>*{animation:up .6s cubic-bezier(.2,.7,.2,1) both}
.hero-text>:nth-child(2){animation-delay:.08s}.hero-text>:nth-child(3){animation-delay:.16s}.hero-text>:nth-child(4){animation-delay:.24s}
.pom-in{animation:rise .7s cubic-bezier(.3,1.35,.5,1) .4s both}
.pea-in{animation:rise .7s cubic-bezier(.3,1.35,.5,1) .55s both}
.label{animation:pop .3s ease-out 1.1s both}.label-pea{animation-delay:1.2s}
.leaf{animation:float 7s ease-in-out 2s infinite alternate both}
.l2{animation-duration:8.5s;animation-delay:2.6s}.l3{animation-duration:6s;animation-delay:2.2s}.l4{animation-duration:9s;animation-delay:3s}
.pw{animation:walk 12s ease-out infinite both}
.trail g:nth-child(1) .pw{animation-delay:.90s}.trail g:nth-child(2) .pw{animation-delay:1.01s}.trail g:nth-child(3) .pw{animation-delay:1.12s}.trail g:nth-child(4) .pw{animation-delay:1.23s}
.trail g:nth-child(5) .pw{animation-delay:1.34s}.trail g:nth-child(6) .pw{animation-delay:1.45s}.trail g:nth-child(7) .pw{animation-delay:1.56s}.trail g:nth-child(8) .pw{animation-delay:1.67s}
.trail g:nth-child(9) .pw{animation-delay:1.78s}.trail g:nth-child(10) .pw{animation-delay:1.89s}.trail g:nth-child(11) .pw{animation-delay:2.00s}.trail g:nth-child(12) .pw{animation-delay:2.11s}
.trail g:nth-child(13) .pw{animation-delay:2.22s}.trail g:nth-child(14) .pw{animation-delay:2.33s}.trail g:nth-child(15) .pw{animation-delay:2.44s}.trail g:nth-child(16) .pw{animation-delay:2.55s}
.dog.boop{animation:boop .38s ease-out}
.hero.paused *,.hero.paused{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pw{opacity:1}.par{transform:none!important}
  .marquee-track{width:auto}.marquee-list{flex-wrap:wrap;justify-content:center;padding:4px 16px}.marquee-list.dup{display:none}
  .marquee-list li{padding:8px 0}
}