/* Layout: a tote bag spills the projects onto the page; each project then opens as its own full-bleed chapter in its own brand world. */
:root{
  --paper:#FBF8FC;      /* lilac white */
  --paper-2:#EEE6F4;    /* lavender mist */
  --lilac:#EFE7F8;      /* soft lilac band */
  --blush:#FBEEF3;      /* soft blush band */
  --plum:#6E5A92;       /* dusty lavender, text-safe */
  --plum-ink:#3A3246;   /* soft aubergine ink */
  --orchid:#E6B8CF;     /* pale pink */
  --rose:#C27A9E;       /* text-safe pink */
  --white:#FFFFFF;
  --muted:#857B92;
  --kora-bg:#F6F0E7; --kora-fg:#3F362B; --kora-gold:#94733D; --kora-muted:#857866; --kora-line:#E3D7C4;
  --porter:#5B7DD3; --asphalt:#EEF3FC; --road:#DCE4F3; --p-ink:#2C3652; --p-muted:#626C86;
  --tv-green:#4E8063; --tv-check:#A9CDB4;
  --f-display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --f-body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-pixel:"Silkscreen","Courier New",monospace;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%236E5A92' d='M2 2h2v2H2zM2 4h2v14H2zM4 4h2v2H4zM6 6h2v2H6zM8 8h2v2H8zM10 10h2v2h-2zM12 12h2v2h-2zM14 14h2v2h-2zM10 14h4v2h-4zM10 16h2v4h-2zM12 18h2v2h-2zM4 16h2v2H4zM6 14h2v2H6zM8 14h2v2H8z'/%3E%3Cpath fill='%23fff' d='M4 6h2v10H4zM6 8h2v6H6zM8 10h2v4H8zM10 12h2v2h-2z'/%3E%3C/svg%3E") 2 2, auto;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--plum-ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;cursor:var(--cur);overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:.95;margin:0;text-wrap:balance;letter-spacing:.005em}
p{margin:0}
:focus-visible{outline:3px solid var(--orchid);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.pix{font-family:var(--f-pixel);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.eyebrow{font-family:var(--f-pixel);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.btn{font:600 14px/1 var(--f-body);display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}

/* ---------- nav ---------- */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;padding:12px var(--gutter-r) 12px var(--gutter-l);display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.nav>*{pointer-events:auto}
.mono{font-family:var(--f-display);font-size:22px;letter-spacing:.02em;text-decoration:none;background:var(--plum);color:var(--white);padding:8px 12px 6px;border-radius:12px;line-height:1}
.nav ul{list-style:none;margin:0;padding:6px;display:flex;gap:2px;background:color-mix(in srgb,var(--white) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid var(--paper-2);border-radius:999px}
.nav a.l{display:block;text-decoration:none;font-weight:500;font-size:14px;padding:7px 14px;border-radius:999px;color:var(--plum)}
.nav a.l:hover,.nav a.l.on{background:var(--plum);color:var(--white)}
@media (max-width:520px){.nav a.l{padding:7px 10px;font-size:13px}.mono{font-size:18px}}

/* ---------- unpack hero: a 3D bag you unpack by scrolling ---------- */
.skip{position:absolute;left:var(--gutter-l);top:-60px;z-index:90;background:var(--plum);color:var(--white);padding:8px 14px;border-radius:8px}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 70px)}
.unpack{position:relative;height:660vh;background:#F7F1FA}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:var(--plum-ink)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.intro{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:opacity,transform}
.intro .top{position:absolute;top:clamp(88px,13vh,132px);left:0;right:0;text-align:center;font-size:clamp(44px,7.4vw,118px);line-height:.9;letter-spacing:.01em;color:var(--plum-ink);text-shadow:0 6px 30px rgba(255,255,255,.7)}
.intro .top .w{display:inline-block;margin:0 .1em}
.ready .intro .top .w{animation:rise 1s cubic-bezier(.2,.9,.2,1) both}
.ready .intro .top .w:nth-child(2){animation-delay:.08s}
.ready .intro .top .w:nth-child(3){animation-delay:.16s}
@keyframes rise{from{transform:translateY(70%) rotate(4deg);opacity:0}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bagword{display:none}
.intro .meta{position:absolute;left:var(--gutter-l);bottom:calc(26px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;justify-items:start}
.intro .meta .namepill{background:var(--orchid);color:var(--plum-ink);font-weight:600;font-size:clamp(15px,1.6vw,19px);padding:8px 18px;border-radius:999px}
.intro .meta .role{font-size:14px;color:var(--muted);max-width:34ch}
.intro .cue{position:absolute;right:var(--gutter-r);bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;color:var(--plum-ink)}
.cue .line{width:2px;height:54px;background:rgba(58,50,70,.15);position:relative;overflow:hidden;border-radius:2px}
.cue .line::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:var(--rose);animation:drip 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes drip{to{top:110%}}
.ltag{position:absolute;right:clamp(24px,7vw,120px);top:34%;width:220px;background:#fff;color:var(--plum-ink);border-radius:14px 14px 14px 46px;padding:28px 18px 16px 30px;transform:rotate(7deg);box-shadow:0 20px 40px rgba(110,90,146,0,0,.35);transform-origin:20px 20px;animation:swing 5s ease-in-out infinite}
.ltag::before{content:"";position:absolute;left:14px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--paper-2);box-shadow:0 0 0 3px var(--orchid)}
.ltag::after{content:"";position:absolute;left:19px;top:-90px;width:2px;height:106px;background:var(--orchid);transform:rotate(-24deg);transform-origin:bottom}
.ltag b{font-family:var(--f-pixel);font-weight:400;font-size:12px;letter-spacing:.1em;color:var(--plum)}
.ltag ol{list-style:none;margin:10px 0 12px;padding:0;font-size:13px;line-height:1.75;font-weight:500}
.ltag i{font-style:normal;font-family:var(--f-pixel);font-size:9.5px;color:var(--muted);border-top:1.5px dashed var(--paper-2);display:block;padding-top:8px}
@keyframes swing{0%,100%{transform:rotate(7deg)}50%{transform:rotate(3deg)}}
@media (max-width:980px){.ltag{display:none}}
@media (max-width:640px){.intro .cue .t{display:none}.intro .meta .role{font-size:12.5px;max-width:24ch}}

.cards{position:absolute;inset:0;z-index:3;pointer-events:none}
.pcard{position:absolute;left:var(--gutter-l);top:50%;transform:translateY(-50%);width:min(560px,44vw);opacity:0;pointer-events:none;--acc:#fff;will-change:opacity,transform}
.pcard.on{pointer-events:auto}
.pcard .num{position:absolute;left:-.03em;top:-.62em;z-index:-1;font-family:var(--f-display);font-size:clamp(140px,19vw,300px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(58,50,70,.16)}
.pcard .kick{font-family:var(--f-pixel);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pcard h2{font-size:clamp(76px,10.5vw,172px);line-height:.84;color:var(--plum-ink);margin-top:12px}
.pcard h2 span{color:var(--acc);-webkit-text-stroke:2px var(--plum-ink)}
.pcard p{font-size:clamp(16px,1.45vw,19px);color:#5E5469;max-width:38ch;margin-top:18px}
.pcard .go{margin-top:26px;background:var(--acc);color:var(--plum-ink);border-color:var(--acc)}
.pcard .go:hover{background:var(--plum-ink);border-color:var(--plum-ink);color:#fff}
.pcard img{display:none}
.rail{position:absolute;right:var(--gutter-r);top:50%;transform:translateY(-50%);z-index:4;list-style:none;margin:0;padding:0;display:grid;gap:16px;opacity:0}
.rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;font-family:var(--f-pixel);font-size:11px;letter-spacing:.08em;color:rgba(58,50,70,.4);transition:color .3s}
.rail button::after{content:"";width:20px;height:2px;background:currentColor;transition:width .35s}
.rail button.on{color:var(--plum-ink)}
.rail button.on::after{width:48px}
.rail button:focus-visible{outline:2px solid var(--plum-ink);outline-offset:4px}
@media (max-width:760px){
  .pcard{top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:none;left:var(--gutter-l);right:var(--gutter-r);width:auto}
  .pcard .num{font-size:120px;top:-.55em}
  .pcard h2{font-size:clamp(58px,17vw,92px)}
  .pcard p{font-size:15px;margin-top:10px}
  .pcard .go{margin-top:16px}
  .rail{top:auto;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:var(--gutter-l);right:var(--gutter-r);transform:none;display:flex;justify-content:space-between}
  .rail button .lb{display:none}
  .rail button::after{width:30px}.rail button.on::after{width:54px}
}
.loader{position:fixed;inset:0;z-index:95;background:#F7F1FA;color:var(--plum-ink);display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter-r) calc(28px + env(safe-area-inset-bottom,0px)) var(--gutter-l);transition:transform 1s cubic-bezier(.75,0,.2,1)}
.loader .n{font-family:var(--f-display);font-size:clamp(120px,24vw,340px);line-height:.8;font-variant-numeric:tabular-nums}
.loader .n small{font-size:.3em;color:var(--rose)}
.loader .l{font-family:var(--f-pixel);font-size:13px;letter-spacing:.1em;color:var(--plum);margin-top:14px}
.loader.done{transform:translateY(-101%)}

/* fallback: no WebGL or reduced motion */
.no3d .unpack{height:auto}
.no3d .pin{position:relative;height:auto;padding-block:120px 72px;background:radial-gradient(80% 60% at 50% 0%,#E6D8F1,#F7F1FA 70%)}
.no3d #gl,.no3d .rail,.no3d .ltag,.no3d .cue{display:none}
.no3d .intro{position:relative;display:grid;gap:18px;padding-inline:var(--gutter-l) var(--gutter-r)}
.no3d .intro .top{position:static}
.no3d .bagword{display:block;font-family:var(--f-display);font-size:clamp(130px,30vw,380px);line-height:.8;color:#CDB8E6;text-align:center}
.no3d .intro .meta{position:static;justify-items:center;text-align:center}
.no3d .cards{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;padding:56px var(--gutter-r) 0 var(--gutter-l);max-width:1240px;margin:0 auto}
.no3d .pcard{position:relative;inset:auto;transform:none;width:auto;opacity:1;pointer-events:auto}
.no3d .pcard .num{display:none}
.no3d .pcard h2{font-size:clamp(56px,6vw,84px)}
.no3d .pcard img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin-bottom:18px}
/* ---------- thesis + marquee ---------- */
.thesis{background:var(--lilac);color:var(--plum-ink);padding-block:clamp(56px,9vw,120px) 0;overflow:hidden}
.thesis .big{font-family:var(--f-display);font-size:clamp(40px,7.4vw,104px);line-height:.98;max-width:15ch}
.thesis .big em{font-style:normal;color:var(--rose)}
.thesis .sub{margin-top:28px;max-width:58ch;font-size:clamp(16px,1.6vw,19px);color:#5E5469}
.marquee{margin-top:clamp(48px,7vw,90px);border-top:1.5px solid rgba(110,90,146,.18);padding:18px 0;white-space:nowrap;overflow:hidden}
.marquee .track{display:inline-flex;gap:40px;animation:mq 28s linear infinite;font-family:var(--f-pixel);font-size:clamp(16px,2vw,22px);text-transform:uppercase;color:var(--plum)}
.marquee .track span::after{content:"✦";margin-left:40px;color:var(--rose)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* ---------- work index ---------- */
.index{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.sec-head h2{font-size:clamp(48px,8vw,110px);color:var(--plum)}
.sec-head p{color:var(--muted);max-width:36ch}
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--plum)}
.row a{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.1fr) 120px;gap:20px;align-items:center;padding:22px 8px;border-bottom:1.5px solid var(--paper-2);text-decoration:none;transition:background .25s,padding .25s}
.row a:hover{background:var(--white);padding-left:20px}
.row .n{font-family:var(--f-pixel);color:var(--rose);font-size:15px}
.row .t{font-family:var(--f-display);font-size:clamp(34px,5vw,64px);color:var(--plum);line-height:1}
.row .t small{display:block;font-family:var(--f-pixel);font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:6px}
.row .d{color:var(--muted);font-size:15px;min-width:0}
.row .th{width:120px;height:80px;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.row .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.row a:hover .th img{transform:scale(1.08)}
@media (max-width:760px){.row a{grid-template-columns:44px minmax(0,1fr) 84px}.row .d{display:none}.row .th{width:84px;height:64px}}

/* ---------- shared chapter ---------- */
.chap{position:relative;padding-block:clamp(72px,10vw,140px);overflow:hidden}
.chap-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(20px,3vw,40px) clamp(24px,5vw,72px);align-items:end}
.chap-top>h2{grid-column:1/-1}
.chap-top>div{grid-column:2}
@media (max-width:820px){.chap-top>div{grid-column:1}}
.chap h2.title{font-size:clamp(84px,16vw,230px);line-height:.82}
.chap .lede{font-size:clamp(17px,1.7vw,20px);max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;list-style:none;padding:0}
.tags li{font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;border:1.5px solid currentColor;opacity:.85}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 36px}
.kv h3{font-family:var(--f-pixel);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-weight:400}
.kv p{font-size:15.5px;max-width:42ch}
@media (max-width:820px){.chap-top{grid-template-columns:1fr}}

/* ---------- KORA ---------- */
#kora{background:var(--kora-bg);color:var(--kora-fg)}
#kora .gold{color:var(--kora-gold)}
#kora .title{color:var(--kora-fg)}
#kora .title span{color:var(--kora-gold)}
.award{display:inline-flex;align-items:center;gap:10px;color:var(--kora-gold);border:1.5px solid var(--kora-gold);border-radius:999px;padding:7px 14px 6px;margin-bottom:22px}
.kora-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(48px,7vw,96px);align-items:center}
.kora-grid figure{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/5;max-width:100%}
.kora-grid figure img{width:100%;height:100%;object-fit:cover}
.kora-story{display:grid;gap:30px}
.kora-story h3{font-family:var(--f-pixel);font-size:12px;letter-spacing:.08em;color:var(--kora-gold);margin-bottom:6px;font-weight:400}
.kora-story p{font-size:clamp(17px,1.6vw,20px);max-width:40ch}
.kora-story .formula{font-family:var(--f-display);font-size:clamp(30px,4vw,52px);line-height:1.05;color:var(--kora-fg)}
.formula i{font-style:normal;color:var(--kora-gold)}
.builder{margin-top:clamp(64px,8vw,110px);border:1.5px solid var(--kora-line);border-radius:28px;background:radial-gradient(90% 120% at 30% 0%,#FFFCF7 0%,#F1E8DA 70%);overflow:hidden}
.builder-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;padding:28px clamp(20px,3vw,40px) 0}
.builder-head h3{font-size:clamp(34px,4.4vw,56px)}
.builder-head p{color:var(--kora-muted);font-size:14px;max-width:40ch}
.builder-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:20px clamp(20px,3vw,40px) clamp(24px,3vw,40px)}
.stage{display:grid;gap:18px;align-content:center;min-height:300px;padding:clamp(16px,3vw,36px);border-radius:20px;background:
  radial-gradient(60% 50% at 50% 55%, rgba(201,165,90,.16), transparent 70%), #FFFDF9}
.stage svg{width:100%;height:auto;display:block}
.stage .front{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.stage .front.pop{transform:scale(1.04) rotate(-1deg)}
.summary{font-size:14px;color:var(--kora-muted);text-align:center}
.summary b{color:var(--kora-fg);font-weight:600}
.ctrls{display:grid;gap:24px;align-content:start}
.ctrls fieldset{border:0;margin:0;padding:0;min-width:0}
.ctrls legend{font-family:var(--f-pixel);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--kora-gold);margin-bottom:10px;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--kora-line);background:#FFFDF9;cursor:pointer;font-size:14px;font-weight:500;transition:border-color .2s,background .2s}
.seg label:hover{border-color:var(--kora-muted)}
.seg input:checked+label{border-color:var(--kora-gold);background:#F3E7D2;color:var(--kora-fg)}
.seg input:focus-visible+label{outline:3px solid var(--kora-gold);outline-offset:2px}
.sw{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sw.coco{background:radial-gradient(circle at 30% 30%,#8A5D3E 0 2px,transparent 3px) 0 0/7px 7px,linear-gradient(135deg,#5A3726,#3B2418)}
.sw.rice{background:radial-gradient(circle at 40% 40%,#8E7650 0 1.5px,transparent 2px) 0 0/6px 6px,linear-gradient(135deg,#DCCAA3,#BFA97F)}
.sw.char{background:linear-gradient(60deg,transparent 45%,#C9A55A 46% 50%,transparent 51%) 0 0/9px 9px,#1B1919}
.ctrls input[type=text]{width:100%;font:600 15px var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;border-radius:12px;border:1.5px solid var(--kora-line);background:#FFFDF9;color:var(--kora-fg)}
.ctrls input[type=text]:focus{outline:none;border-color:var(--kora-gold)}
.ctrls .note{font-size:12.5px;color:var(--kora-muted);margin-top:6px}
.sketches{margin-top:clamp(64px,8vw,110px)}
.sketches .h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sketches h3{font-size:clamp(34px,4.4vw,56px)}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-color:#D8C9B1 transparent}
.strip figure{flex:0 0 min(78vw,520px);scroll-snap-align:start;margin:0;border-radius:16px;overflow:hidden;background:#fff;border:1.5px solid var(--kora-line)}
.strip img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:860px){.kora-grid,.builder-body{grid-template-columns:1fr}}

/* ---------- PORTER ---------- */
#porter{background:var(--asphalt);color:var(--p-ink)}
#porter::before,#porter::after{content:"";position:absolute;top:0;bottom:0;width:46px;background:repeating-linear-gradient(to bottom,transparent 0 40px,#fff 40px 110px,transparent 110px 150px) center/4px 100% no-repeat,var(--road);opacity:.95}
#porter::before{right:clamp(8px,3vw,48px)}
#porter::after{right:calc(clamp(8px,3vw,48px) + 62px);display:none}
@media (min-width:1100px){#porter::after{display:block}}
@media (max-width:700px){#porter::before{display:none}}
#porter .title{color:var(--porter)}
#porter .wrap{position:relative;z-index:1}
@media (min-width:701px){#porter .wrap{padding-right:max(150px,env(safe-area-inset-right,0px))}}
@media (min-width:1100px){#porter .wrap{padding-right:220px}}
.method{display:inline-flex;gap:10px;align-items:center;margin-top:16px;font-size:14px;color:var(--p-muted)}
.method b{background:#D5E0F7;color:var(--p-ink);font-family:var(--f-pixel);font-weight:400;font-size:11px;padding:4px 8px;border-radius:6px}
.fixer{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:center;max-width:1080px}
.fix-tabs{display:grid;gap:10px;margin-bottom:26px}
.fix-tabs button{all:unset;cursor:pointer;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;border:2px solid transparent;font-weight:600;font-size:15px;transition:border-color .2s,transform .2s}
.fix-tabs button:hover{transform:translateX(4px)}
.fix-tabs button:focus-visible{outline:3px solid var(--porter);outline-offset:2px}
.fix-tabs button[aria-selected=true]{border-color:var(--porter);box-shadow:0 8px 20px rgba(91,125,211,.15)}
.fix-tabs .k{font-family:var(--f-pixel);font-size:12px;color:var(--porter);font-weight:400}
.sev{font-family:var(--f-pixel);font-size:11px;font-weight:400;padding:4px 8px;border-radius:6px;white-space:nowrap}
.sev.s3{background:#FCE6E6;color:#A8494A}.sev.s2{background:#FCF1D6;color:#86651C}.sev.s1{background:#E5F2E8;color:#3E7350}
.fix-detail{background:#fff;color:var(--p-ink);border:1.5px solid #D5E0F7;border-radius:18px;padding:22px 24px}
.fix-detail h4{margin:0 0 4px;font-family:var(--f-pixel);font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--porter)}
.fix-detail p{font-size:15px;color:var(--p-ink)}
.fix-detail p+h4{margin-top:16px}
.cmp-wrap{display:grid;justify-items:center;gap:14px}
.cmp{position:relative;width:min(300px,72vw);aspect-ratio:9/18.5;border-radius:38px;border:10px solid #111;background:#fff;overflow:hidden;box-shadow:0 30px 60px rgba(44,54,82,.18);--p:50%}
.cmp:has(input:focus-visible){outline:3px solid var(--porter);outline-offset:4px}
.cmp .layer{position:absolute;inset:0}
.cmp .layer img{width:100%;height:100%;object-fit:cover;object-position:top}
.cmp .after{clip-path:inset(0 0 0 var(--p))}
.cmp .blank{display:grid;place-items:center;text-align:center;padding:28px;color:#9A9AA5;font-size:13px;background:#fff}
.cmp .blank b{display:block;font-family:var(--f-pixel);font-weight:400;font-size:11px;color:#A8494A;margin-bottom:8px}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:var(--porter);pointer-events:none}
.cmp .bar::after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--porter);color:#fff;font-size:10px;letter-spacing:2px;padding:10px 8px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(91,125,211,.35)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;touch-action:pan-y}
.cmp .lab{position:absolute;top:44px;font-family:var(--f-pixel);font-size:10px;padding:4px 7px;border-radius:6px;pointer-events:none;z-index:2}
.cmp .lab.b{left:10px;background:var(--p-ink);color:#fff}.cmp .lab.a{right:10px;background:var(--porter);color:#fff}
.cmp-cap{font-size:13px;color:var(--p-muted)}
.matrix-wrap{margin-top:clamp(64px,8vw,110px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:start;max-width:1080px}
.matrix-wrap h3{font-size:clamp(34px,4.4vw,56px);color:var(--p-ink);margin-bottom:14px}
.matrix-wrap p{color:var(--p-muted);max-width:44ch}
.matrix{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:6px;font-size:13px}
.matrix .ax{font-family:var(--f-pixel);font-size:10.5px;color:var(--p-muted);display:flex;align-items:center;justify-content:center;text-align:center;padding:4px}
.matrix .cell{min-height:86px;border-radius:12px;background:#fff;padding:8px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.matrix .cell.hot{background:#E2EAFB;outline:2px dashed var(--porter);outline-offset:-2px}
.chip{background:#D5E0F7;color:var(--p-ink);border-radius:8px;padding:5px 8px;font-size:12px;font-weight:500;line-height:1.3}
.cell.hot .chip{background:var(--porter);color:#fff}
.matrix .yl{writing-mode:vertical-rl;transform:rotate(180deg)}
.impact{margin-top:clamp(56px,7vw,90px);max-width:1080px}
.impact h3{font-family:var(--f-pixel);font-size:12px;letter-spacing:.08em;font-weight:400;color:var(--p-muted);margin-bottom:16px}
.impact ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.impact li{background:#fff;border-radius:14px;padding:16px 18px;font-size:14.5px}
.impact li b{display:block;font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--porter);margin-bottom:4px;letter-spacing:.01em}
@media (max-width:860px){.fixer,.matrix-wrap{grid-template-columns:1fr}.cmp-wrap{order:-1}}

/* ---------- PUPYUM ---------- */
#pupyum{--pc:#E8C548;--pi:#3E6FA8;--pbg:#FFF9E8;--pfg:#3D3524;background:var(--pbg);color:var(--pfg);transition:background .6s,color .6s}
#pupyum .title{color:var(--pfg)}
#pupyum .title span{color:var(--pc);-webkit-text-stroke:2px var(--pfg);transition:color .6s}
.mood{margin-top:clamp(48px,7vw,90px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.mood h3{font-size:clamp(40px,5.4vw,72px);margin-bottom:12px}
.mood .q{font-size:16px;opacity:.85;margin-bottom:22px}
.moods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:440px}
.moods button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.65);border:2px solid transparent;font-weight:600;font-size:15px;transition:transform .2s,border-color .2s}
.moods button:hover{transform:translateY(-2px)}
.moods button:focus-visible{outline:3px solid var(--pfg);outline-offset:2px}
.moods button[aria-pressed=true]{border-color:var(--pfg);background:#fff}
.moods .dot{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.msg{margin-top:22px;font-size:clamp(17px,1.7vw,20px);font-weight:500;max-width:34ch;min-height:3.2em}
.pouch-stage{display:grid;place-items:center;min-height:440px;position:relative}
.pouch-stage::before{content:"";position:absolute;width:min(420px,86%);aspect-ratio:1;border-radius:50%;background:var(--pc);opacity:.35;transition:background .6s}
.pouch{position:relative;width:min(280px,70vw);aspect-ratio:3/4;background:var(--pc);border-radius:16px 16px 28px 28px;box-shadow:0 30px 50px rgba(61,53,36,.16),inset 0 -18px 30px rgba(0,0,0,.08),inset 14px 0 24px rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;overflow:hidden;transition:background .6s}
.pouch::before{content:"";position:absolute;inset:0 0 auto;height:26px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 7px);border-bottom:2px solid rgba(0,0,0,.1)}
.pouch::after{content:"";position:absolute;top:30px;left:-6px;width:12px;height:12px;border-radius:50%;background:var(--pbg);box-shadow:calc(min(280px,70vw)) 0 0 var(--pbg);transition:background .6s,box-shadow .6s}
.pouch.hop{animation:hop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-26px) rotate(-4deg)}100%{transform:translateY(0) rotate(0)}}
.pouch .logo{width:88%;margin-top:40px}
.pouch .pr{font-family:var(--f-pixel);font-size:10px;color:var(--pi);margin-top:2px;letter-spacing:.06em}
.pouch .fl{font-family:var(--f-display);color:var(--pi);text-align:center;font-size:clamp(22px,3vw,30px);line-height:1;margin-top:auto;padding:0 18px;text-transform:uppercase}
.pouch .wt{font-family:var(--f-pixel);font-size:9px;color:var(--pi);opacity:.8;margin:6px 0 4px}
.pouch .dog{width:74%;margin-bottom:-2px}
.pup-research{margin-top:clamp(64px,8vw,110px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px)}
.stat{font-family:var(--f-display);font-size:clamp(64px,9vw,128px);line-height:.9}
.stat small{font-family:var(--f-body);font-size:15px;display:block;margin-top:8px;font-weight:500;opacity:.8}
.stats{display:flex;flex-wrap:wrap;gap:24px 56px}
.chain{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:c}
.chain li{counter-increment:c;font-size:13.5px;font-weight:500;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.6)}
.chain li::before{content:counter(c) " ";font-family:var(--f-pixel);font-size:10px;opacity:.6}
.gap-card{align-self:start;background:#fff;color:var(--pfg);border-top:10px solid var(--pc);border-radius:24px;padding:clamp(24px,3vw,40px);transition:background .6s,color .6s}
.gap-card h3{font-size:clamp(34px,4vw,52px);margin-bottom:14px;color:var(--pfg);transition:color .6s}
.gap-card p{font-size:clamp(16px,1.6vw,19px)}
.pup-photos{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pup-photos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px}
.brand-kv{margin-top:clamp(48px,6vw,80px)}
@media (max-width:860px){.mood,.pup-research{grid-template-columns:1fr}.pouch-stage{min-height:380px}}

/* ---------- TAVI ---------- */
#tavi{--tc:#F6D6E0;padding-block:0;background:#F6FAF6;color:#2F4A39}
.checker{height:56px;background:repeating-conic-gradient(var(--tv-check) 0 25%,var(--tc) 0 50%) 0 0/56px 56px;transition:background-color .5s}
#tavi .inner{padding-block:clamp(64px,9vw,120px)}
#tavi .title{color:var(--tv-green);font-family:var(--f-display)}
#tavi .title span{color:var(--tc);-webkit-text-stroke:2px var(--tv-green);transition:color .5s}
.fridge{margin-top:clamp(48px,7vw,90px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.can-stage{position:relative;display:grid;place-items:center;min-height:460px;border-radius:28px;background:repeating-conic-gradient(color-mix(in srgb,var(--tc) 70%,#fff) 0 25%,#fff 0 50%) 50% 50%/56px 56px;transition:background .5s;overflow:hidden}
.can-stage img{height:min(400px,80vw);width:auto;filter:drop-shadow(0 30px 30px rgba(47,74,57,.2));transition:transform .45s cubic-bezier(.4,0,.2,1)}
.can-stage img.flip{transform:scaleX(0) translateY(-10px)}
.flavours{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.flavours button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;border:2px solid #D8E3DA;background:#fff;font-weight:600;font-size:15px;transition:border-color .2s,transform .2s}
.flavours button:hover{transform:translateY(-2px)}
.flavours button:focus-visible{outline:3px solid var(--tv-green);outline-offset:2px}
.flavours button[aria-pressed=true]{border-color:var(--tv-green)}
.flavours img{width:22px;height:40px;object-fit:contain}
.ritual{font-family:var(--f-display);font-size:clamp(40px,5vw,72px);line-height:1;color:var(--tv-green)}
.ritual em{font-style:normal;color:var(--tc);-webkit-text-stroke:1.5px var(--tv-green);transition:color .5s}
.tv-note{font-size:16px;max-width:44ch;margin-top:14px}
.tv-gap{margin-top:clamp(64px,8vw,110px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:start}
.tv-gap blockquote{margin:0;font-family:var(--f-display);font-size:clamp(30px,3.6vw,48px);line-height:1.08;color:var(--tv-green)}
.tv-gallery{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:16px}
.tv-gallery img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.tv-gallery .a{grid-row:span 2}
@media (max-width:860px){.fridge,.tv-gap{grid-template-columns:1fr}.tv-gallery{grid-template-columns:1fr}.tv-gallery .a{grid-row:auto}}


/* ---------- HRMS ---------- */
#hrms{--hb:#F3F1FC;--hi:#211C4A;--hv:#6C5CE7;--ho:#C4561C;--hp:#F8DCE8;--hm:#5F5A7E;--hl:#DDD7F7;--hy:#FBE7A6;
  background:radial-gradient(circle,rgba(108,92,231,.13) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--hb);color:var(--hi)}
#hrms .title{color:var(--hi)}
#hrms .title span{color:var(--hb);-webkit-text-stroke:2px var(--hi)}
#hrms .eyebrow{color:var(--hm)}
.hr-phases{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;list-style:none;padding:0}
.hr-phases li{font-family:var(--f-pixel);font-size:10.5px;padding:5px 9px;border-radius:7px;background:#fff;color:var(--hm);border:1.5px solid var(--hl)}
.hr-phases li.d{background:#2F7A4D;border-color:#2F7A4D;color:#fff}
.hr-phases li.n{background:var(--hv);border-color:var(--hv);color:#fff}
.tg{display:inline-block;font-family:var(--f-pixel);font-style:normal;font-size:10px;line-height:1;padding:4px 6px 3px;border-radius:5px;vertical-align:2px;margin-right:6px;font-weight:400}
.tg.e{background:#DDEFE3;color:#2F6A45}.tg.h{background:#FBEBC2;color:#7A5A12}.tg.v{background:var(--hp);color:#9A2F5E}

/* demo */
.hr-demo{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.hr-demo h3{font-size:clamp(40px,5.4vw,72px);margin-bottom:12px}
.hr-demo .q{font-size:16px;color:var(--hm);max-width:40ch}
.hr-toggle{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#fff;border:1.5px solid var(--hl);margin:22px 0 18px}
.hr-toggle button{all:unset;cursor:pointer;font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;color:var(--hm)}
.hr-toggle button[aria-pressed=true]{background:var(--hi);color:#fff}
.hr-toggle button:focus-visible{outline:3px solid var(--hv);outline-offset:2px}
.hr-app{background:#fff;border-radius:22px;border:1.5px solid var(--hl);box-shadow:0 30px 60px rgba(33,28,74,.10);padding:18px;font-size:13px;color:#2A2740}
.hr-bar{display:flex;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1.5px solid #EFEDF8;margin-bottom:14px}
.hr-bar i{width:9px;height:9px;border-radius:50%;background:#E4E1F3}
.hr-bar b{margin-left:8px;font-weight:600;font-size:13px}
.hr-bar .bell{margin-left:auto;font-size:12px;color:#9C97B5;display:flex;align-items:center;gap:6px}
.hr-bar .bell em{font-style:normal;background:var(--ho);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:600;display:none}
.way .hr-bar .bell em{display:inline-block}
.hr-cards{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
.hr-card{all:unset;box-sizing:border-box;display:block;border-radius:14px;padding:12px 14px;background:#FFF8EC;border:1.5px solid #F4E3C4;cursor:pointer;position:relative}
.hr-card.static{cursor:default;background:#FCF6F7;border-color:#F3E2E6}
.hr-card small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:#8A8599}
.hr-card strong{display:block;font-family:var(--f-display);font-weight:400;font-size:38px;line-height:1.05;color:var(--ho);margin-top:4px}
.hr-card .ex{display:none;font-size:11.5px;color:#5E5A72;line-height:1.35;margin-top:4px}
.hr-card .ex u{text-decoration:none;color:var(--hv);font-weight:600}
.way .hr-card:not(.static) .ex{display:block}
.way .hr-card:not(.static){border-color:var(--hv);box-shadow:0 0 0 3px rgba(108,92,231,.14)}
.hr-card:focus-visible{outline:3px solid var(--hv);outline-offset:2px}
.hr-card.nope{animation:nope .4s}
@keyframes nope{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.hr-card.nope{animation:none}}
.hr-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:14px}
.hr-cal span,.hr-cal button{all:unset;box-sizing:border-box;display:grid;place-items:center;gap:2px;height:46px;border-radius:9px;background:#F7F6FC;font-size:11px;color:#9C97B5;text-align:center}
.hr-cal button{cursor:pointer;color:#2A2740}
.hr-cal button b{color:#D3384A;font-weight:700;font-size:13px}
.hr-cal button:focus-visible{outline:3px solid var(--hv);outline-offset:1px}
.hr-cal button.sel{background:#EEEAFE}
.hr-out{margin-top:14px;min-height:150px;border-radius:14px;background:#F7F6FC;padding:14px 16px}
.hr-out p{font-size:13.5px}
.hr-out .mut{color:#8A8599}
.hr-days{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hr-days li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;align-items:center;background:#fff;border-radius:10px;padding:8px 10px}
.hr-days li b{font-weight:600}
.hr-days li span{color:#6E6985;font-size:12px}
.hr-fix{all:unset;cursor:pointer;font-weight:600;font-size:12px;color:#fff;background:var(--hv);padding:7px 11px;border-radius:999px;white-space:nowrap}
.hr-fix:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.hr-fix.ghost{background:transparent;color:var(--hv);border:1.5px solid var(--hv);padding:5.5px 10px}
.hr-form{display:grid;gap:8px}
.hr-form .rec{background:#fff;border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;font-size:12.5px}
.hr-form .rec dt{color:#8A8599}.hr-form .rec dd{margin:0;font-weight:500}
.hr-form label{font-size:12px;font-weight:600}
.hr-form textarea{font:13px var(--f-body);border:1.5px solid var(--hl);border-radius:10px;padding:8px 10px;resize:none;height:54px;color:var(--hi);background:#fff}
.hr-form textarea:focus{outline:none;border-color:var(--hv)}
.hr-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hr-done{display:flex;gap:10px;align-items:flex-start}
.hr-done .pend{font-size:11px;font-weight:600;background:#FFF1D6;color:#8A5A0A;border-radius:999px;padding:3px 9px;white-space:nowrap}
.hr-say{background:var(--hi);color:#fff;border-radius:22px;padding:clamp(20px,2.6vw,30px);position:sticky;top:90px}
.hr-say .k{font-family:var(--f-pixel);font-size:11px;letter-spacing:.08em;color:#B9B1F5}
.hr-say p.big{font-family:var(--f-display);font-size:clamp(28px,3vw,40px);line-height:1.05;margin-top:10px}
.hr-say p.sm{font-size:14.5px;color:#D7D3EE;margin-top:14px}
.hr-say .ill{font-size:12px;color:#9F99C6;margin-top:18px;border-top:1.5px dashed rgba(255,255,255,.18);padding-top:12px}
@media (max-width:900px){.hr-demo{grid-template-columns:1fr}.hr-say{position:static}}
@media (max-width:520px){.hr-cal{grid-template-columns:repeat(5,minmax(0,1fr))}.hr-cal .wk{display:none}.hr-card strong{font-size:30px}.hr-days li{grid-template-columns:minmax(0,1fr) auto}.hr-days li span{grid-column:1}.hr-days li .hr-fix{grid-row:1/3;grid-column:2}}

/* testers */
.hr-test{margin-top:clamp(64px,8vw,110px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,4vw,56px);align-items:start}
.hr-test h3{font-size:clamp(34px,4.4vw,56px);margin-bottom:12px}
.hr-test p{color:var(--hm);max-width:40ch}
.hr-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:s}
.hr-steps li{counter-increment:s;background:#fff;border-radius:16px;padding:16px;border:1.5px solid var(--hl);font-size:14px;color:var(--hm)}
.hr-steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ho);color:#fff;font-weight:600;font-size:14px;margin-bottom:12px}
.hr-steps li b{display:block;color:var(--hi);font-weight:600;margin-bottom:4px;line-height:1.3}
.hr-steps li:last-child{background:var(--hi);border-color:var(--hi);color:#D7D3EE}
.hr-steps li:last-child b{color:#fff}
@media (max-width:900px){.hr-test{grid-template-columns:1fr}}
@media (max-width:620px){.hr-steps{grid-template-columns:1fr 1fr}}

/* screens */
.hr-screens{margin-top:clamp(64px,8vw,110px)}
.hr-screens .h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hr-screens h3{font-size:clamp(34px,4.4vw,56px)}
.hr-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-color:var(--hl) transparent}
.hr-strip figure{flex:0 0 min(80vw,560px);scroll-snap-align:start;margin:0;border-radius:18px;overflow:hidden;background:#fff;border:1.5px solid var(--hl);display:flex;flex-direction:column}
.hr-strip .im{flex:1;display:grid;place-items:center;background:#FAFAFD;padding:14px;min-height:240px}
.hr-strip img{max-height:300px;width:auto;max-width:100%;object-fit:contain;border-radius:8px}
.hr-strip figcaption{padding:14px 16px;font-size:14px;border-top:1.5px solid #EFEDF8;color:var(--hi)}

.hr-one{margin:0;border-radius:20px;overflow:hidden;background:#fff;border:1.5px solid var(--hl);box-shadow:0 30px 60px rgba(33,28,74,.10)}
.hr-one .im{background:#FAFAFD;padding:clamp(12px,2vw,24px)}
.hr-one img{width:100%;height:auto;border-radius:10px}
.hr-one figcaption{padding:16px 20px;font-size:15px;border-top:1.5px solid #EFEDF8;color:var(--hi);max-width:80ch}
/* sticky wall */
.hr-wall{margin-top:clamp(64px,8vw,110px)}
.hr-wall>h3{font-size:clamp(34px,4.4vw,56px);margin-bottom:8px}
.hr-wall>p{color:var(--hm);max-width:56ch;margin-bottom:28px}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.col{display:grid;gap:10px;align-content:start}
.note{padding:14px 14px 16px;font-size:13.5px;line-height:1.35;font-weight:500;box-shadow:0 8px 16px rgba(33,28,74,.10);border-radius:3px 3px 3px 14px}
.col .g{color:#fff;font-weight:600;font-size:14.5px}
.col .g small{display:block;font-family:var(--f-pixel);font-weight:400;font-size:10px;letter-spacing:.08em;opacity:.8;margin-bottom:6px}
.col.v .g{background:var(--hv)}.col.o .g{background:var(--ho)}
.col .p{background:#fff;color:var(--hi)}
.col .r{background:var(--hy);color:#4A3A10;margin-top:10px}
.col .r small{display:block;font-family:var(--f-pixel);font-size:10px;letter-spacing:.08em;margin-bottom:5px;color:#8A6A1A}
.col .r b{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.05;display:block}
.col:nth-child(odd) .note:nth-child(odd),.col:nth-child(even) .note:nth-child(even){transform:rotate(-1.2deg)}
.col:nth-child(odd) .note:nth-child(even),.col:nth-child(even) .note:nth-child(odd){transform:rotate(1deg)}
@media (max-width:900px){.wall{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.wall{grid-template-columns:1fr}}

/* statement */
.hr-state{margin-top:clamp(64px,8vw,110px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.hr-state blockquote{margin:0;font-family:var(--f-display);font-size:clamp(32px,4vw,56px);line-height:1.04;color:var(--hi)}
.hr-state blockquote em{font-style:normal;color:var(--hv)}
.hr-state .hmw{margin-top:22px;font-size:clamp(16px,1.6vw,19px);color:var(--hm);max-width:46ch}
.hr-nums{display:grid;gap:12px}
.hr-nums div{background:#fff;border-radius:16px;padding:16px 18px;border:1.5px solid var(--hl);font-size:14.5px;color:var(--hm)}
.hr-nums b{display:block;font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1;color:var(--hv);margin-bottom:4px}
@media (max-width:900px){.hr-state{grid-template-columns:1fr}}

.hr-honest{margin-top:clamp(56px,7vw,90px)}
.hr-honest .kv h3{color:var(--hm)}
.hr-honest .kv p{color:var(--hi)}

/* ---------- ABOUT ---------- */
#about{background:var(--paper)}
.about-top{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.portrait{position:relative;margin:0}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:24px;border:8px solid var(--orchid);filter:grayscale(.15)}
.portrait .sticker{position:absolute;right:-10px;bottom:24px;background:var(--plum);color:var(--white);border-radius:14px;padding:10px 14px;transform:rotate(-4deg);box-shadow:0 10px 20px rgba(43,15,40,.25)}
.about-top h2{font-size:clamp(56px,8vw,110px);color:var(--plum)}
.about-top .bio{margin-top:22px;font-size:clamp(17px,1.7vw,20px);max-width:52ch}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;list-style:none;padding:0}
.tools li{background:var(--white);border:1.5px solid var(--paper-2);border-radius:10px;padding:7px 12px;font-size:13.5px;font-weight:500}
.cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);margin-top:clamp(56px,7vw,96px)}
.cols h3{font-family:var(--f-pixel);font-size:12px;letter-spacing:.08em;font-weight:400;color:var(--muted);margin-bottom:12px;text-transform:uppercase}
.xp{list-style:none;margin:0;padding:0;border-top:2px solid var(--plum)}
.xp li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1.5px solid var(--paper-2)}
.xp time{font-family:var(--f-pixel);font-size:11px;color:var(--muted);padding-top:4px;font-variant-numeric:tabular-nums}
.xp b{display:block;font-weight:600;color:var(--plum)}
.xp span{font-size:14.5px;color:var(--muted)}
.ach{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:8px}
.ach li{display:flex;justify-content:space-between;gap:12px;background:var(--white);border-radius:12px;padding:12px 14px;font-weight:500;font-size:14.5px}
.ach li i{font-style:normal;font-family:var(--f-pixel);font-size:11px;color:var(--rose);white-space:nowrap;padding-top:2px}
.edu p{font-size:14.5px;margin-bottom:10px}
.edu b{color:var(--plum)}
@media (max-width:820px){.about-top,.cols{grid-template-columns:1fr}.portrait{max-width:380px}.xp li{grid-template-columns:1fr;gap:4px}}

/* ---------- CONTACT ---------- */
#contact{background:var(--blush);color:var(--plum-ink);padding-block:clamp(80px,11vw,150px) 40px}
.c-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,380px);gap:clamp(40px,6vw,96px);align-items:center}
@media (max-width:900px){.c-grid{grid-template-columns:1fr}.receipt{justify-self:center;width:min(380px,100%)}}
.receipt{position:relative;transform:rotate(-2.5deg);filter:drop-shadow(0 22px 30px rgba(110,90,146,.22))}
.receipt.print .r-paper{animation:print 1.6s steps(24) both}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -20px 0)}}
@media (prefers-reduced-motion:reduce){.receipt.print .r-paper{animation:none}}
.r-paper{position:relative;background:#FFFEFB;color:#3A3246;padding:26px 24px 20px;font-family:var(--f-pixel);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1.5}
.r-paper::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;background:linear-gradient(135deg,#FFFEFB 33%,transparent 33%) 0 0/14px 12px repeat-x,linear-gradient(225deg,#FFFEFB 33%,transparent 33%) 0 0/14px 12px repeat-x}
.r-paper::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(43,15,40,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.r-h{text-align:center;font-family:var(--f-display);font-size:30px;letter-spacing:.06em;line-height:1}
.r-sub{text-align:center;margin-top:6px;color:#7E5A77}
.r-paper hr{border:0;border-top:1.5px dashed rgba(43,15,40,.35);margin:14px 0}
.r-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.r-row span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.r-k{margin-bottom:6px;color:#7E5A77}
#rItems{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#rItems li{display:flex;align-items:baseline;gap:8px}
#rItems li::after{content:"";order:1;flex:1;border-bottom:1.5px dotted rgba(43,15,40,.3);transform:translateY(-3px)}
#rItems .st{order:2;color:#B9A6B5;transition:color .3s}
#rItems li.seen .st{color:#2B0F28}
.r-time{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.r-time b{font-family:var(--f-display);font-weight:400;font-size:58px;line-height:.9;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--plum)}
.r-time small{color:#7E5A77;max-width:12ch}
.r-meter{position:relative;height:10px;margin:14px 0 6px;background:repeating-linear-gradient(90deg,rgba(43,15,40,.18) 0 2px,transparent 2px 6px)}
.r-meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:#CF8BC0;transition:width 1s linear}
.r-meter em{position:absolute;top:-4px;bottom:-4px;width:2px;background:#2B0F28;font-style:normal}
.r-meter em::after{content:"avg exit";position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;color:#7E5A77}
.r-verdict{margin-top:20px;text-transform:none;font-family:var(--f-body);font-size:14px;letter-spacing:0;line-height:1.45;font-weight:500;min-height:4.4em}
.r-bar{height:46px;margin-top:4px;background:repeating-linear-gradient(90deg,#2B0F28 0 2px,transparent 2px 4px,#2B0F28 4px 5px,transparent 5px 8px,#2B0F28 8px 11px,transparent 11px 12px,#2B0F28 12px 13px,transparent 13px 17px)}
.r-foot{text-align:center;margin-top:10px;color:#7E5A77;font-size:10px}
#contact h2{font-size:clamp(60px,8.6vw,150px);line-height:.86}
#contact h2 span{color:var(--rose)}
.mail{margin-top:clamp(32px,4vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.mail .addr{font-size:clamp(22px,3.6vw,46px);font-weight:600;user-select:all;-webkit-user-select:all;word-break:break-all}
.copy{background:var(--plum-ink);color:#fff;border-color:var(--plum-ink)}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.links a{color:var(--plum-ink)}
.foot{margin-top:clamp(64px,8vw,110px);padding-top:20px;border-top:1.5px solid rgba(110,90,146,.18);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px}