/* Purrennial Pet — the bridge between Thai pet food and China and Southeast Asia.
   Ported from docs/design/purrennial_pet.html: the pouch-and-label world of the
   pack — wine frame, cream panels, peach product bands, rounded panels stacked
   like packs on a shelf. The CSP allows no inline styles, so everything the
   prototype set with style="" lives here as a class. */

:root{
  --frame:#3A0C19; --wine:#7A1B2F; --wine-deep:#5C1222; --berry:#A8324A; --peach:#ED9D77; --peach-soft:#F6D5C2; --sand:#E9C7B0;
  --panel:#FBF4EA; --panel-2:#FFFFFF; --ink:#2B1D20; --ink-2:#74605E; --line:#E6D6C8; --cream:#FBF4EA; --on-wine:#FBF4EA; --on-wine-2:#F2CDBB;
  --accent:var(--wine); --err:#A8324A;
  --display:"DM Serif Display", "IBM Plex Sans Thai", "Noto Sans SC", Georgia, serif;
  --body:"Instrument Sans", "Anuphan", "Noto Sans SC", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --wordmark:"DM Serif Display", Georgia, serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --panel:#241518; --panel-2:#2E1B1F; --ink:#F7ECE4; --ink-2:#C7AFA8; --line:#3F2A2F; --peach-soft:#4A2A31; --sand:#5A3A3A; --accent:var(--peach); --err:#ED9D77; } }
:root[data-theme="dark"]{ --panel:#241518; --panel-2:#2E1B1F; --ink:#F7ECE4; --ink-2:#C7AFA8; --line:#3F2A2F; --peach-soft:#4A2A31; --sand:#5A3A3A; --accent:var(--peach); --err:#ED9D77; }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px); -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--frame); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55;
  padding:8px; padding-top:calc(env(safe-area-inset-top,0px) + 8px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
  padding-left:max(8px,env(safe-area-inset-left,0px)); padding-right:max(8px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:3px solid var(--peach); outline-offset:3px}
h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:-0.01em; margin:0; line-height:1.02}
p{margin:0}
ol,ul{margin:0; padding:0; list-style:none}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.skip{position:absolute; left:-999px; top:8px; z-index:50; background:var(--peach); color:#2B1D20; padding:8px 14px; border-radius:10px; text-decoration:none; font-weight:600}
.skip:focus{left:16px}

.p{border-radius:28px; margin-bottom:8px; overflow:hidden; position:relative}
.light{background:var(--panel); color:var(--ink)}
.dark{background:var(--wine-deep); color:var(--on-wine)}
.inner{max-width:1200px; margin:0 auto; padding:72px 40px}
.pill{display:inline-flex; align-items:center; gap:8px; border-radius:999px; font:600 15px/1 var(--body); padding:14px 22px; text-decoration:none; border:none; cursor:pointer; transition:transform .15s, filter .15s}
.pill:hover{filter:brightness(1.06)}
.pill:active{transform:translateY(1px)}
.pill[disabled]{opacity:.7; cursor:progress}
.pill.wine{background:var(--wine); color:var(--on-wine)}
.pill.peach{background:var(--peach); color:#2B1D20}
.pill.cream{background:#FBF4EA; color:#2B1D20}
.pill.ghost{background:transparent; color:var(--on-wine); box-shadow:inset 0 0 0 1.5px rgba(251,244,234,.6)}
.small-caps{font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.muted{color:var(--ink-2)}

/* nav */
nav.top{position:sticky; top:calc(env(safe-area-inset-top,0px) + 8px); z-index:20; background:var(--wine); color:var(--on-wine); border-radius:18px; margin-bottom:8px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:12px 22px}
nav.top ul{display:flex; gap:22px; font-size:13px; font-weight:600; letter-spacing:.06em}
nav.top ul a{text-decoration:none}
nav.top ul a:hover{text-decoration:underline; text-underline-offset:4px}
.word{font-family:var(--wordmark); font-weight:400; font-size:30px; letter-spacing:-0.025em; line-height:.8; text-decoration:none; white-space:nowrap; color:var(--on-wine)}
nav.top .right{justify-self:end; display:flex; align-items:center; gap:8px}
nav.top .pill{padding:9px 16px; font-size:14px; white-space:nowrap}
.langs{display:flex; gap:6px}
.lang{color:var(--on-wine); border:1.5px solid rgba(251,244,234,.6); border-radius:999px; font:600 13px/1 var(--body); padding:8px 11px; text-decoration:none; white-space:nowrap}
.lang:hover{background:rgba(251,244,234,.12)}
@media (max-width:820px){ nav.top ul{display:none} nav.top{grid-template-columns:auto 1fr; padding:10px 14px} }
@media (max-width:420px){ nav.top .pill{padding:9px 12px; font-size:13px} .lang{padding:8px 9px} .word{font-size:24px} }

/* hero */
.hero{background:var(--wine-deep); color:var(--on-wine); min-height:600px; display:flex; flex-direction:column; justify-content:space-between}
.hero .top{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; padding:64px 48px 0; position:relative; z-index:2}
.hero h1{font-size:clamp(34px,4.2vw,58px); text-align:right; text-wrap:balance}
.hero .side{max-width:380px; padding-top:10px}
.hero .side p{color:var(--on-wine-2); margin-bottom:22px}
.hero .ctas{display:flex; gap:10px; flex-wrap:wrap}
.giant{font-family:var(--wordmark); font-weight:400; letter-spacing:-0.03em; line-height:.8; font-size:clamp(64px,21.5vw,330px); text-align:center; white-space:nowrap; color:var(--on-wine); padding:40px 24px 0; margin-bottom:-0.08em; position:relative; z-index:1; user-select:none}
.floaters{position:absolute; inset:0; pointer-events:none; z-index:1}
.fl{position:absolute; height:auto; animation:bob 6s ease-in-out infinite}
.f1{width:130px; left:6%; top:50%; --r0:8deg; --r:6deg}
.f2{width:34px; left:80%; top:48%; --r0:-24deg; --r:-10deg; animation-delay:-2s}
.f3{width:30px; left:88%; top:30%; --r0:18deg; --r:12deg; animation-delay:-4s}
@keyframes bob{0%,100%{transform:rotate(var(--r0,0deg))} 50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
@media (max-width:820px){ .hero{min-height:0} .hero .top{grid-template-columns:1fr; gap:20px; padding:40px 24px 0} .hero h1{text-align:left} .floaters{display:none} .giant{font-size:19vw; padding:32px 12px 0} }

/* ticker */
.ticker{background:var(--panel); border-radius:999px; overflow:hidden; white-space:nowrap; padding:10px 0; margin-bottom:8px; color:var(--ink); display:flex}
.ticker div{display:inline-flex; flex:none; gap:40px; padding-right:40px; animation:tick 46s linear infinite; font-size:14px}
.ticker b{font-weight:600}
@keyframes tick{to{transform:translateX(-100%)}}

/* wine manifesto (also the thank-you / 404 panel) */
.manifesto{background:var(--wine); color:var(--on-wine); text-align:center; display:grid; place-items:center; padding:80px 24px}
.manifesto h1,.manifesto h2{font-size:clamp(36px,4.6vw,60px); max-width:16ch; margin:16px auto 20px}
.manifesto p.sub{max-width:52ch; margin:0 auto 28px; color:var(--on-wine-2)}
.chiprow{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:40px}
.tagchip{background:#FBF4EA; color:#2B1D20; border-radius:8px; padding:9px 14px; font-size:13px; font-weight:600; letter-spacing:.04em; text-decoration:none; display:flex; gap:8px; align-items:center}
.tagchip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--peach)}
a.tagchip:hover{background:#fff}

/* capabilities */
.cap .inner,.arm .inner{padding:64px 40px}
.cap-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:36px}
.cap-head h2{font-size:clamp(38px,5vw,64px); color:var(--accent)}
.cap-head .num{font-weight:700; color:var(--peach); font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; display:block}
.cap-head .by{display:inline-block; background:var(--wine); color:var(--on-wine); border-radius:6px; padding:2px 8px; margin-left:8px; text-transform:none; letter-spacing:0}
.cap-head .pitch{font-family:var(--display); font-size:26px; line-height:1.2; margin-bottom:10px}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:thin}
.step{scroll-snap-align:start; min-width:0}
.tile{aspect-ratio:1/1; border-radius:22px; display:flex; align-items:flex-end; padding:20px; font-family:var(--wordmark); font-size:72px; line-height:.8}
.t1{background:var(--wine); color:var(--on-wine)} .t2{background:var(--peach); color:#2B1D20} .t3{background:var(--sand); color:var(--ink)} .t4{background:var(--frame); color:var(--on-wine)} .t5{background:var(--berry); color:var(--on-wine)}
.step-label{display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:10px}
.step-label b{font-weight:600}
.step-label span.plus{width:36px; height:36px; border-radius:10px; background:var(--panel-2); display:grid; place-items:center; font-weight:600; flex:none}
.step p{font-size:15px; color:var(--ink-2); margin-top:6px}
.skills{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line)}
.skills li{background:var(--panel-2); border-radius:14px; padding:12px 16px; font-size:15px; min-width:0}
.skills b{display:block; font-weight:600}
.skills span{color:var(--ink-2)}
@media (max-width:820px){ .cap-head{grid-template-columns:1fr; gap:16px} .cap .inner,.arm .inner{padding:48px 22px} .tile{font-size:56px} }

/* content arm, run by Naria AI */
.arm{background:var(--wine-deep); color:var(--on-wine)}
.arm .cap-head h2{color:var(--on-wine)}
.arm .cap-head .by{background:var(--peach); color:#2B1D20}
.arm .muted{color:var(--on-wine-2)}
.loop{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-size:14px; font-weight:600; margin-bottom:28px}
.loop li{background:rgba(251,244,234,.1); border:1px solid rgba(251,244,234,.25); border-radius:999px; padding:8px 14px; color:var(--on-wine)}
.loop li.arrow{background:none; border:none; padding:0; color:var(--peach)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.cards article{background:rgba(251,244,234,.06); border:1px solid rgba(251,244,234,.14); border-radius:22px; padding:22px; min-width:0; display:grid; gap:12px; align-content:start}
.cards .tile{aspect-ratio:auto; height:84px; width:84px; font-size:48px; padding:12px; border-radius:16px}
.cards .t1{background:var(--peach); color:#2B1D20}
.cards .t2{background:#E9C7B0; color:#2B1D20}
.cards h3{font-size:26px; line-height:1.1}
.cards p{color:var(--on-wine-2); font-size:15px}
.cards ul{display:grid; gap:8px; font-size:14.5px}
.cards li{padding-left:16px; position:relative}
.cards li::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--peach)}
.arm .note{font-size:13px; font-weight:400; color:var(--on-wine-2); margin-top:18px}
@media (max-width:860px){ .cards{grid-template-columns:1fr} }

/* floating treats */
.treats{min-height:560px; display:grid; place-items:center; text-align:center; padding:48px 24px}
.treats h2{font-size:clamp(44px,6vw,84px); position:relative; z-index:2; line-height:.98; color:var(--accent)}
.treat{position:absolute; line-height:0}
.treat svg{width:100%; height:auto}
.t-s1{width:40px; left:12%; top:14%; transform:rotate(-8deg)}
.t-s2{width:40px; left:32%; top:62%; transform:rotate(38deg); filter:blur(2px)}
.t-s3{width:40px; right:22%; top:10%; transform:rotate(24deg)}
.t-s4{width:40px; right:6%; top:44%; transform:rotate(-30deg); filter:blur(1.5px)}
.t-pouch{width:120px; right:8%; bottom:12%; transform:rotate(-12deg)}
.t-can{width:110px; left:8%; bottom:10%; transform:rotate(8deg); filter:blur(1.5px)}
@media (max-width:820px){ .treats{min-height:420px} .t-s2,.t-s4{display:none} .t-pouch{width:80px} .t-can{width:74px} }

/* work grid */
.work .inner{padding:48px 24px}
.work-head{display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:16px; margin-bottom:28px; padding:0 8px}
.work-head h2{font-size:clamp(34px,4vw,50px)}
.work-head p{color:var(--on-wine-2); font-size:15px}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.cell{border-radius:20px; min-height:360px; padding:24px; position:relative; overflow:hidden; min-width:0}
.cell.title{background:var(--wine); color:var(--on-wine); display:flex; align-items:flex-end}
.cell.title h3{font-size:60px; writing-mode:vertical-rl; transform:rotate(180deg); line-height:.9}
.cell.case{background:#FBF4EA; color:#2B1D20}
.cell.case h3{font-size:24px; line-height:1.1; margin-bottom:10px}
.cell.case .tags{font-size:12px; font-weight:600; letter-spacing:.05em; color:#7A1B2F; margin-bottom:14px}
.cell.case dl{margin:0; font-size:14px; line-height:1.45}
.cell.case dt{font-weight:600; margin-top:8px}
.cell.case dd{margin:0; color:#74605E}
.pending{background:#F6D5C2; color:#5C1222; padding:1px 6px; border-radius:4px; font-weight:600}
.cell.art{display:grid; place-items:center}
.cell.art.o{background:var(--berry); fill:#E9C7B0} .cell.art.s{background:#E9C7B0} .cell.art.r{background:var(--peach); fill:#FBF4EA}
.cell.art svg{width:70%; height:auto}
.cell.cta{background:#FBF4EA; color:#2B1D20; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:24px}
.cell.cta h3{font-size:34px}
@media (max-width:980px){ .grid{grid-template-columns:1fr 1fr} .cell.title h3{writing-mode:horizontal-tb; transform:none; font-size:48px} .cell{min-height:260px} }
@media (max-width:560px){ .grid{grid-template-columns:1fr} .cell{min-height:0} .cell.title{min-height:160px} .cell.art{min-height:200px} }

/* vision timeline */
.vision .inner{text-align:center}
.vision .kicker{color:var(--peach); margin-bottom:16px}
.vision h2{font-size:clamp(42px,6vw,84px); max-width:14ch; margin:0 auto 24px; color:var(--accent)}
.vision .lede{max-width:58ch; margin:0 auto; color:var(--ink-2); font-size:18px}
.name{display:inline-flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin:28px auto 0; padding:14px 22px; border:1px solid var(--line); border-radius:999px; font-size:15px}
.name b{font-family:var(--wordmark); font-weight:400; font-size:20px; color:var(--peach)}
.stage{display:grid; grid-template-columns:1fr auto 1fr; gap:32px; align-items:center; margin:48px auto 36px; max-width:980px; text-align:left}
.stage .year{font-family:var(--display); font-size:34px; text-align:right}
.stage .card{width:260px; max-width:100%; aspect-ratio:1/1; border-radius:18px; display:grid; place-items:center; transform:rotate(-3deg); transition:background .3s; box-shadow:0 0 0 8px var(--panel-2); fill:#FBF4EA}
.stage .card svg{width:70%; height:auto}
.tone-wine{background:var(--wine)} .tone-peach{background:var(--peach)} .tone-sand{background:var(--sand)} .tone-berry{background:var(--berry)}
.stage h3{font-size:28px; margin-bottom:8px}
.stage p{color:var(--ink-2); max-width:30ch}
.timeline{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:32px; margin:0; background:repeating-linear-gradient(90deg, var(--ink-2) 0 1px, transparent 1px 24px) center/100% 12px no-repeat; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:34px; height:34px; border-radius:50% 50% 8px 8px; background:var(--wine); border:none}
input[type=range]::-moz-range-thumb{width:34px; height:34px; border-radius:50% 50% 8px 8px; background:var(--wine); border:none}
.founder{display:flex; gap:18px; align-items:center; justify-content:center; margin-top:56px; text-align:left; flex-wrap:wrap}
.founder .av{width:64px; height:64px; border-radius:50%; background:var(--wine); color:var(--on-wine); display:grid; place-items:center; font-family:var(--wordmark); font-size:28px; flex:none}
.founder p{max-width:56ch; font-size:15px; color:var(--ink-2)}
.founder b{color:var(--ink); font-size:17px}
@media (max-width:820px){ .stage{grid-template-columns:1fr; justify-items:center; text-align:center; gap:20px} .stage .year{text-align:center} .stage .card{width:200px} }

/* join */
.jr{background:var(--wine); color:var(--on-wine); padding:44px 40px}
.who{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.jr h2{font-size:clamp(32px,3.6vw,46px); margin:14px 0 12px}
.jr > p{margin-bottom:24px; opacity:.85; max-width:60ch}
form.lead{display:grid; gap:12px; max-width:720px}
form.lead .two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
form.lead label{font-size:13px; font-weight:600; display:grid; gap:6px}
form.lead input:not([type=checkbox]),form.lead textarea{font:16px var(--body); padding:13px 16px; border:1.5px solid rgba(251,244,234,.35); border-radius:14px; background:rgba(251,244,234,.14); color:var(--on-wine); width:100%; min-width:0}
form.lead input::placeholder,form.lead textarea::placeholder{color:rgba(251,244,234,.65)}
form.lead textarea{resize:vertical}
form.lead [aria-invalid=true]{border-color:#FBF4EA; box-shadow:0 0 0 2px #FBF4EA}
fieldset{border:none; padding:0; margin:0; min-width:0}
legend{font-size:13px; font-weight:600; margin-bottom:8px; padding:0}
.checks{display:flex; flex-wrap:wrap; gap:8px}
form.lead .checks label{font-weight:500; display:flex; align-items:center; gap:8px; border-radius:999px; padding:8px 14px; background:rgba(251,244,234,.14); color:var(--on-wine); cursor:pointer; font-size:14px}
.checks input{accent-color:var(--peach); width:16px; height:16px; margin:0}
.send{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px}
.send small{font-size:13px; opacity:.75}
.note{font-size:14px; min-height:20px; font-weight:600}
.jr .note.err{color:#FBF4EA; text-decoration:underline; text-underline-offset:3px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:900px){ .jr{padding:36px 22px} }
@media (max-width:480px){ form.lead .two{grid-template-columns:1fr} }

/* footer */
footer{background:var(--wine); color:var(--on-wine); border-radius:28px; border-top-left-radius:50% 220px; overflow:hidden; padding:110px 48px 0}
.foot{display:grid; grid-template-columns:1.3fr 1fr 1.1fr; gap:32px; max-width:1100px; margin-left:auto}
.foot h3{font-size:26px; line-height:1.15}
.foot .small-caps{margin-bottom:12px; display:block; color:var(--on-wine-2)}
.foot ul{font-size:14px; line-height:2}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .v{user-select:all}
.qr{width:120px; border-radius:14px; background:#FFFFFF; padding:8px; margin-top:10px}
.qr img{display:block; width:100%; height:auto}
.legal{font-size:13px; color:var(--on-wine-2); margin-top:14px; line-height:1.6}
.footword{font-family:var(--wordmark); font-weight:400; letter-spacing:-0.03em; line-height:.8; font-size:clamp(60px,20vw,300px); text-align:right; white-space:nowrap; margin-top:40px; margin-bottom:-0.08em; color:var(--on-wine); user-select:none}
@media (max-width:820px){ footer{border-top-left-radius:28px; padding:48px 24px 0} .foot{grid-template-columns:1fr} .footword{font-size:18vw; text-align:center} }

/* Thai: its own faces, taller lines for stacked vowels and tone marks, no tracking */
:lang(th) body{font-family:"Anuphan", "IBM Plex Sans Thai", var(--body); line-height:1.75}
:lang(th) h1,:lang(th) h2,:lang(th) h3,:lang(th) .pitch,:lang(th) .stage .year{font-family:"IBM Plex Sans Thai", sans-serif; font-weight:600; line-height:1.3; letter-spacing:0}
:lang(th) .small-caps,:lang(th) nav.top ul,:lang(th) .tagchip,:lang(th) .tags,:lang(th) .who,:lang(th) .timeline,:lang(th) .cap-head .num{letter-spacing:0}
:lang(th) .cell.title h3{line-height:1.2}

/* Chinese: a CJK face for headings, no negative tracking, a little more leading */
:lang(zh) body{font-family:"Noto Sans SC", var(--body)}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) .pitch{font-family:"Noto Sans SC", sans-serif; font-weight:700; line-height:1.25; letter-spacing:0}
:lang(zh) .small-caps,:lang(zh) nav.top ul,:lang(zh) .tagchip,:lang(zh) .tags,:lang(zh) .who,:lang(zh) .timeline,:lang(zh) .cap-head .num{letter-spacing:0}
:lang(zh) .cell.title h3{line-height:1.1; letter-spacing:.08em}
/* CJK reads top to bottom in vertical mode; the 180° turn is only for Latin. */
@media (min-width:981px){ :lang(zh) .cell.title{align-items:flex-start} :lang(zh) .cell.title h3{transform:none} }

/* thank-you / 404 */
.msg{min-height:60vh}