/* Stylo Aunty: Aunty's Wardrobe. Light boutique, swing tags, stitched seams. */
:root{
  --paper:#FFFFFF;--ink:#33121F;--ink2:#4E2A3A;--muted:#6B4A58;--line:#F0DCE5;--line2:#E6CCD8;
  --rani:#D81E6E;--rani-ink:#B5135A;--emer:#0E7A52;--emer-ink:#0B6343;--gold:#C9A23A;--marigold:#F2A22C;
  --blush:#FDF0F5;--mint:#EAF6F0;--cream:#FFF8EF;--plum:#33121F;
  --disp:'Yeseva One',Georgia,'Times New Roman',serif;
  --body:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Caveat','Segoe Print','Comic Sans MS',cursive;
  --wrap:1240px;--r:22px;--ease:cubic-bezier(.2,.8,.2,1);--swing:cubic-bezier(.34,1.56,.64,1)
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0;text-wrap:balance;color:var(--ink)}
h2 em,h1 em{font-style:normal;color:var(--rani-ink)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
:focus-visible{outline:3px solid var(--emer);outline-offset:3px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:100;font-weight:700}
.skip:focus{top:12px}

/* tape measure scroll progress */
.tape{position:fixed;left:0;right:0;top:0;height:8px;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(51,18,31,.0) 0 9px,rgba(51,18,31,.18) 9px 10px)}
.tape-fill{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(51,18,31,.55) 9px 10px),linear-gradient(#F4C430,#F2B21C)}

/* top bar */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:22px;min-height:74px;padding-top:6px}
.brand{display:block;flex:none;border-radius:10px}
.brand img{height:48px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font-weight:700;font-size:15px;text-decoration:none;padding:9px 14px;border-radius:999px;color:var(--ink2);transition:background .2s,color .2s}
.nav a:hover{background:var(--blush);color:var(--rani-ink)}
.nav a[aria-current="page"]{background:var(--ink);color:#fff}
.top-r{display:flex;align-items:center;gap:8px}
.menu-b{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line2);background:#fff;cursor:pointer}
.menu-i{display:grid;gap:4px;width:18px;margin:auto}
.menu-i i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s}
.menu-b[aria-expanded="true"] .menu-i i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-b[aria-expanded="true"] .menu-i i:nth-child(2){opacity:0}
.menu-b[aria-expanded="true"] .menu-i i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* group launcher */
.launch{position:relative}
.launch summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 14px 8px 10px;border-radius:999px;border:1.5px solid var(--line2);font-weight:700;font-size:14px;color:var(--ink2);background:#fff}
.launch summary::-webkit-details-marker{display:none}
.launch summary:hover{border-color:var(--rani);color:var(--rani-ink)}
.dots{display:grid;grid-template-columns:repeat(2,6px);gap:3px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--rani)}
.dots i:nth-child(2),.dots i:nth-child(3){background:var(--emer)}
.launch[open] summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.launch-p{position:absolute;right:0;top:calc(100% + 10px);width:min(760px,calc(100vw - 32px));max-height:min(72vh,640px);overflow:auto;background:#fff;border:1px solid var(--line2);border-radius:18px;box-shadow:0 24px 60px rgba(51,18,31,.18);padding:20px 22px;z-index:70}
.launch-t{font-family:var(--disp);font-size:22px;margin:0 0 12px}
.launch-g{columns:3 190px;column-gap:22px}
.lg{break-inside:avoid;margin:0 0 14px}
.lg-h{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--emer-ink);margin:0 0 6px}
.lg a{display:block;padding:3px 0;font-size:14.5px;text-decoration:none;color:var(--ink2)}
.lg a:hover{color:var(--rani-ink);text-decoration:underline}
.lg a[aria-current="page"]{color:var(--rani-ink);font-weight:800}
.lg a[aria-current="page"]::after{content:" (you are here)";font-weight:500;color:var(--muted);font-size:12.5px}

/* shared bits */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--emer-ink);margin:0 0 14px}
.tagsvg{width:18px;height:18px;color:var(--rani)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 15.5px/1 var(--body);padding:15px 24px;border-radius:999px;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .25s var(--swing),background .2s,color .2s,border-color .2s}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-p{background:var(--rani);color:#fff}
.btn-p:hover{background:var(--rani-ink);transform:translateY(-2px)}
.btn-s{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-s:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn.sm{padding:11px 16px;font-size:14px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.bubble{position:relative;display:inline-block;font:700 26px/1.15 var(--hand);color:var(--ink);background:#fff;border:2.5px solid var(--rani);border-radius:26px;padding:12px 20px 14px;margin:0}
.bubble::after{content:"";position:absolute;left:34px;bottom:-14px;width:22px;height:22px;background:#fff;border-right:2.5px solid var(--rani);border-bottom:2.5px solid var(--rani);transform:skewX(-28deg) rotate(45deg) scale(.8)}
.sec{padding:110px 0}
.shead{max-width:760px;margin:0 0 50px}
.shead h2{font-size:clamp(34px,2rem + 2.4vw,62px)}
.shead p:last-child{font-size:18.5px;color:var(--muted);margin:20px 0 0;max-width:60ch}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.chip{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--emer-ink);background:var(--mint);border-radius:999px;padding:5px 12px;text-decoration:none}

/* play control */
.ctl{position:absolute;right:16px;bottom:16px;z-index:5;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.ctl svg{width:20px;height:20px;fill:currentColor}
.ctl .pl{display:none}
.ctl.paused .pz{display:none}.ctl.paused .pl{display:block}
.ctl[hidden]{display:none}

/* hero: trial room */
.hero{padding:56px 0 0;background:linear-gradient(180deg,var(--blush),#fff 70%);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-bottom:70px}
.hero h1{font-size:clamp(44px,2rem + 4.6vw,96px);line-height:.98}
.hero h1 em{display:inline-block;color:var(--rani);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5h6M10 5h6M20 5h6M30 5h6' stroke='%230E7A52' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0/40px 10px}
.hero .sub{font-size:20px;color:var(--ink2);max-width:46ch;margin:28px 0 30px}
.hero-t{position:relative}
.b-hero{margin-top:36px;transform:rotate(-2deg)}
.trial{position:relative;aspect-ratio:4/5;max-height:640px;margin:0 auto;width:100%;max-width:520px}
.arch{position:absolute;inset:26px 22px 0;border-radius:260px 260px 26px 26px;overflow:hidden;background:var(--plum);box-shadow:0 0 0 10px #fff,0 0 0 12px var(--line2),0 40px 80px rgba(51,18,31,.22)}
.arch img,.arch video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arch video{opacity:0;transition:opacity .8s}
.arch video.on{opacity:1}
.tint{position:absolute;inset:0;background:linear-gradient(160deg,rgba(216,30,110,.38),rgba(14,122,82,.28));mix-blend-mode:multiply;pointer-events:none}
.kb{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-2%,-3%)}}
.rod{position:absolute;left:0;right:0;top:8px;height:8px;border-radius:8px;background:linear-gradient(#D9B779,#9C7A2E);z-index:4}
.curtain{position:absolute;top:12px;bottom:-4px;width:52%;z-index:3;pointer-events:none;transition:transform 1.6s var(--ease);
  background:repeating-linear-gradient(90deg,#B5135A 0 14px,#D81E6E 14px 26px,#9E0F4E 26px 34px);box-shadow:inset 0 -30px 40px rgba(51,18,31,.25)}
.curtain.l{left:0;transform-origin:0 0;border-radius:0 0 0 18px}
.curtain.r{right:0;transform-origin:100% 0;border-radius:0 0 18px 0}
.trial.open .curtain.l{transform:scaleX(.13)}
.trial.open .curtain.r{transform:scaleX(.13)}
.trial-sign{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:5;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:2px 12px;font:700 20px/1.2 var(--hand);white-space:nowrap}
.ribbon{background:var(--ink);color:#fff;overflow:hidden;border-top:3px dashed rgba(255,255,255,.35);border-bottom:3px dashed rgba(255,255,255,.35);padding:12px 0}
.ribbon-in{display:flex;gap:28px;width:max-content;animation:ribbon 44s linear infinite;font-family:var(--disp);font-size:22px;white-space:nowrap}
.ribbon i{font-style:normal;color:var(--marigold)}
@keyframes ribbon{to{transform:translateX(-50%)}}

/* hanger rail */
.railsec{background:#fff}
.rail{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;padding-top:18px}
.rail-bar{position:absolute;left:-10px;right:-10px;top:18px;height:10px;border-radius:10px;background:linear-gradient(#C9C2C6,#8E8489);box-shadow:0 3px 6px rgba(0,0,0,.12)}
.hanger{position:relative;display:block;text-decoration:none;transform-origin:50% 2px;padding-top:0;border-radius:14px}
.hanger svg{width:100%;height:auto;margin-top:-6px}
.hanger:hover,.hanger:focus-visible{animation:swing 1.4s var(--ease)}
@keyframes swing{0%{transform:rotate(0)}18%{transform:rotate(9deg)}38%{transform:rotate(-6deg)}58%{transform:rotate(3.5deg)}78%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
.h-tag{position:relative;display:block;margin:-8px auto 0;width:max-content;max-width:100%;background:var(--cream);border:1.5px solid var(--line2);border-radius:6px 6px 6px 6px;padding:8px 12px 8px 22px;text-align:left;transform:rotate(-3deg)}
.h-tag::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;border:1.5px solid var(--line2)}
.h-tag b{display:block;font-size:14px;line-height:1.2;color:var(--ink)}
.h-tag small{color:var(--muted);font-size:12.5px;font-weight:600}
.hanger:hover .h-tag b,.hanger:focus-visible .h-tag b{color:var(--rani-ink)}

/* wardrobe builder */
.wardrobe{background:linear-gradient(180deg,#fff,var(--cream) 30%,var(--cream) 80%,#fff)}
.shead h2 em{display:block}
.wd{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.stage{position:sticky;top:96px}
.mirror{position:relative;background:radial-gradient(120% 80% at 50% 0%,#fff 0,var(--blush) 60%,#F8DCE8 100%);border-radius:220px 220px 28px 28px;padding:52px 28px 34px;border:10px solid #fff;box-shadow:0 0 0 2px var(--line2),0 30px 60px rgba(51,18,31,.12)}
.bulbs{position:absolute;inset:-6px;border-radius:inherit;pointer-events:none;background:radial-gradient(circle,#F4C430 0 3px,transparent 4px) 0 0/34px 34px;-webkit-mask:linear-gradient(#000,#000) top/100% 14px no-repeat;mask:linear-gradient(#000,#000) top/100% 14px no-repeat;opacity:.0}
.fig{width:100%;max-width:330px;height:auto;margin:0 auto;overflow:visible}
.fig .cl{stroke:rgba(51,18,31,.32);stroke-width:1.2;stroke-linejoin:round}
.fig .fold{fill:none;stroke:rgba(51,18,31,.22);stroke-width:1.4;stroke-linecap:round}
.fig .floor{fill:rgba(51,18,31,.1)}
.fig [data-part]{transform-box:view-box;transform-origin:130px 110px}
.fig .pop{animation:pop .5s var(--swing)}
@keyframes pop{from{transform:scaleY(.94);opacity:.4}to{transform:none;opacity:1}}
.stage-l{position:absolute;left:50%;top:14px;transform:translateX(-50%);font:700 22px/1 var(--hand);color:var(--rani-ink);margin:0}
.loud{display:flex;align-items:center;gap:12px;margin:18px 4px 0}
.loud-l{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tape-m{flex:1;height:18px;border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(51,18,31,.35) 7px 8px),#FFF3C9;border:1px solid #E8C866;overflow:hidden}
.tape-m i{display:block;height:100%;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(51,18,31,.45) 7px 8px),linear-gradient(90deg,var(--emer),var(--marigold),var(--rani));transition:width .5s var(--ease)}
.loud b{font:700 24px/1 var(--hand);min-width:110px;color:var(--rani-ink)}
.stage-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.stage-act .btn{padding:11px 16px;font-size:14px;border-width:1.5px}
.said{min-height:1.6em;margin:10px 0 0;font-size:14.5px;color:var(--emer-ink);font-weight:600}
.ctrls{background:#fff;border:1px solid var(--line2);border-radius:var(--r);padding:22px;box-shadow:0 18px 50px rgba(51,18,31,.07)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;background:var(--blush);border-radius:16px;margin-bottom:20px}
.tabs button{flex:1 1 auto;font:700 14.5px/1 var(--body);border:0;background:transparent;color:var(--ink2);padding:12px 12px;border-radius:12px;cursor:pointer}
.tabs button[aria-selected="true"]{background:#fff;color:var(--rani-ink);box-shadow:0 3px 10px rgba(51,18,31,.1)}
.pan{min-height:300px}
.opts,.sws{border:0;margin:0 0 18px;padding:0;min-width:0}
legend{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding:0}
legend output{letter-spacing:0;text-transform:none;font:700 21px/1 var(--hand);color:var(--rani-ink);margin-left:6px}
.opt-row{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input,.sw input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-block;padding:10px 15px;border-radius:999px;border:1.5px solid var(--line2);font-weight:700;font-size:14.5px;color:var(--ink2);cursor:pointer;transition:all .2s}
.opt.sm span{padding:7px 12px;font-size:13.5px}
.opt span:hover{border-color:var(--rani)}
.opt input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.opt input:focus-visible+span,.sw input:focus-visible+span{outline:3px solid var(--emer);outline-offset:3px}
.sw-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px;max-width:520px}
.sw{position:relative;display:block}
.sw span{display:block;aspect-ratio:1;border-radius:50% 50% 50% 8px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(51,18,31,.18);cursor:pointer;transition:transform .25s var(--swing)}
.sw span:hover{transform:scale(1.1) rotate(-6deg)}
.sw input:checked+span{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink);transform:scale(1.04)}
.verdict{position:relative;margin-top:8px;background:var(--plum);color:#F7E7EE;border-radius:24px 24px 24px 6px;padding:22px 24px 18px}
.verdict::before{content:"";position:absolute;left:28px;top:-12px;width:24px;height:24px;background:var(--plum);transform:rotate(45deg);border-radius:4px}
.v-h{display:flex;align-items:center;gap:12px;font:700 32px/1.05 var(--hand);color:#fff;margin:0 0 12px}
.v-face{flex:none;width:46px;height:46px;border-radius:50%;background:#fff url("/assets/icon-192.png") center/86% no-repeat;box-shadow:0 0 0 3px var(--rani)}
.verdict ul{display:grid;gap:10px}
.verdict li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.55}
.verdict li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--marigold)}
.verdict li.warn::before{background:var(--rani)}
.verdict a{display:inline-block;margin-top:2px;color:#fff;font-weight:700;text-decoration-color:var(--marigold);text-underline-offset:3px}
.v-note{font-size:13px;color:#E8CFDA;margin:14px 0 0}
.rail-saved{margin-top:40px}
.rail-h{font-family:var(--disp);font-size:26px}
.rail-h span{font:500 14px var(--body);color:var(--muted)}
.rail-row{position:relative;display:flex;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:8px solid #B9B0B4;border-radius:4px}
.saved{position:relative;width:120px;background:#fff;border:1.5px solid var(--line2);border-radius:14px;padding:8px 8px 6px;cursor:pointer;text-align:center;font:600 12.5px/1.3 var(--body);color:var(--ink2)}
.saved svg{width:100%;height:auto}
.saved:hover{border-color:var(--rani)}
.saved .x{position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-weight:800;cursor:pointer;line-height:26px;padding:0}

/* straight talk */
.talk{background:var(--blush)}
.talk-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.talk-t h2{font-size:clamp(34px,2rem + 2.4vw,60px)}
.talk-t h2 em{display:block}
.talk-t>p:not(.eyebrow){font-size:18.5px;color:var(--muted);margin:20px 0 26px}
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchips-h{width:100%;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.qchip{font:600 14.5px/1.3 var(--body);text-align:left;border:1.5px solid var(--line2);background:#fff;color:var(--ink2);border-radius:18px 18px 18px 4px;padding:10px 14px;cursor:pointer;transition:transform .25s var(--swing),border-color .2s}
.qchip:hover{border-color:var(--rani);transform:translateY(-2px)}
.qchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chat{background:#fff;border-radius:28px;box-shadow:0 24px 60px rgba(51,18,31,.12);overflow:hidden;border:1px solid var(--line2)}
.chat-top{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line)}
.chat-av{width:40px;height:40px;border-radius:50%;background:var(--blush) url("/assets/icon-192.png") center/90% no-repeat;box-shadow:0 0 0 2px var(--rani)}
.chat-top b{font-size:16px}
.chat-top small{margin-left:auto;color:var(--muted);font-size:12.5px}
.thread{padding:22px 20px 26px;display:grid;gap:18px;max-height:560px;overflow:auto;scroll-behavior:smooth}
.thread .ex{display:grid;gap:10px}
.q{justify-self:end;max-width:82%;background:var(--mint);color:var(--ink);border-radius:20px 20px 4px 20px;padding:12px 16px;margin:0;font-weight:600}
.a{justify-self:start;max-width:88%;background:var(--plum);color:#F7E7EE;border-radius:20px 20px 20px 4px;padding:14px 18px}
.a p{margin:0 0 8px;font-size:16px}
.a a{color:#fff;font-weight:700;font-size:14.5px;display:inline-flex;gap:6px;align-items:center;text-decoration-color:var(--marigold);text-underline-offset:3px}
.a a svg{width:16px;height:16px;flex:none}
.typing{justify-self:start;background:var(--plum);border-radius:20px 20px 20px 4px;padding:14px 18px;display:flex;gap:5px}
.typing i{width:8px;height:8px;border-radius:50%;background:#F7E7EE;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ex.new .q,.ex.new .a{animation:bub .45s var(--swing) both}
.ex.new .a{animation-delay:.05s}
@keyframes bub{from{transform:scale(.6) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.js .thread .ex[hidden]{display:none}

/* cards and lookbook */
.lookbook{background:#fff}
.looks{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line2);border-radius:18px;overflow:hidden;transition:transform .45s var(--swing),box-shadow .3s}
.card:hover{transform:translateY(-6px) rotate(0)!important;box-shadow:0 22px 40px rgba(51,18,31,.14)}
.card .ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--blush)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover img{transform:scale(1.05)}
.cbody{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.cbody .chip{align-self:flex-start}
.cbody b{font-family:var(--disp);font-weight:400;font-size:22px;line-height:1.18;color:var(--ink)}
.card:hover .cbody b{color:var(--rani-ink)}
.cbody .ex{font-size:14.5px;color:var(--muted);line-height:1.5}
.credit{margin-top:auto;padding-top:8px;border-top:1px dashed var(--line2);font-size:11.5px;color:var(--muted);line-height:1.45}
.js .looks .card.in.tilt0{transform:rotate(-1.2deg)}.looks .card.in.tilt1{transform:rotate(.8deg) translateY(14px)}.looks .card.in.tilt2{transform:rotate(-.4deg)}

/* tailoring */
.tailor{background:var(--mint)}
.tailor-in{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;align-items:center}
.tailor-t h2{font-size:clamp(34px,2rem + 2.2vw,56px)}
.tailor-t h2 em{display:block;color:var(--emer-ink)}
.tailor-t>p:not(.eyebrow){font-size:18px;color:var(--ink2);margin:18px 0 22px}
.seam{position:relative;grid-row:span 2;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--plum);clip-path:inset(0 calc(50% - var(--o,50%)) 0 calc(50% - var(--o,50%)) round 22px)}
.seam img,.seam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seam video{opacity:0;transition:opacity .8s}.seam video.on{opacity:1}
.stitch{position:absolute;inset:14px;border:2.5px dashed rgba(255,255,255,.75);border-radius:14px;pointer-events:none}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}}
.ticket{background:#fff;border-radius:16px;border:1.5px solid #CFE6DA;padding:8px 18px;margin:0 0 10px;counter-reset:t}
.ticket li+li{border-top:1px dashed #CFE6DA}
.ticket a{display:flex;align-items:baseline;gap:10px;padding:11px 0;text-decoration:none}
.ticket .no{font:700 20px/1 var(--hand);color:var(--rani-ink);flex:none;width:28px}
.ticket .tt{font-weight:700;font-size:15.5px;color:var(--ink)}
.ticket .dots{flex:1;border-bottom:2px dotted #A9CDB9;transform:translateY(-4px);min-width:16px}
.ticket .cm{flex:none;font-size:13px;font-weight:700;color:var(--emer-ink)}
.ticket a:hover .tt{color:var(--rani-ink);text-decoration:underline}
.ticket-n{font-size:13px;color:var(--emer-ink);margin:0 0 22px}
.split{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;background:var(--plum)}
.split img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .9s var(--ease)}
.split::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(14,122,82,.55),rgba(216,30,110,.55));mix-blend-mode:screen;transition:opacity .9s var(--ease);pointer-events:none}
.split:hover img,.split:focus-visible img{filter:none}
.split:hover::after,.split:focus-visible::after{opacity:0}
.scale{position:absolute;left:0;right:0;top:0;height:22px;z-index:2;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(51,18,31,.7) 9px 10px) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,transparent 0 49px,rgba(51,18,31,.8) 49px 50px) 0 0/100% 18px no-repeat,#F4C430}
.split figcaption{position:absolute;left:14px;bottom:12px;z-index:2;background:rgba(255,255,255,.92);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--ink)}

/* swatch book */
.swatchsec{background:#fff}
.swatch-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:46px}
.swatch-top .shead{margin:0}
.bolts{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;background:var(--cream)}
.bolts img{width:100%;height:100%;object-fit:cover}
.halftone{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(216,30,110,.9) 0 2.4px,transparent 2.8px) 0 0/10px 10px,radial-gradient(circle,rgba(14,122,82,.75) 0 1.6px,transparent 2px) 5px 5px/10px 10px;mix-blend-mode:multiply;transition:opacity .8s var(--ease),transform 1.2s var(--ease);opacity:.85}
.bolts:hover .halftone,.bolts:focus-visible .halftone{opacity:0;transform:scale(1.4)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.swatch{position:relative;display:block;text-decoration:none;min-height:230px;perspective:900px}
.cloth,.sw-t{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .8s var(--ease)}
.cloth{background:radial-gradient(circle,rgba(255,255,255,.28) 0 1.5px,transparent 2px) 0 0/12px 12px,linear-gradient(135deg,rgba(255,255,255,.22),transparent 45%,rgba(0,0,0,.14)),var(--c);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;box-shadow:0 10px 24px rgba(51,18,31,.14)}
.sw-t{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18px;background:#fff;border:1.5px solid var(--line2);transform:rotateY(180deg)}
.sw-t b{font-family:var(--disp);font-weight:400;font-size:22px;line-height:1.1}
.sw-t span{font-size:14px;line-height:1.5;color:var(--muted)}
.cloth .lab{position:absolute;left:14px;top:16px;background:#fff;border-radius:4px;padding:5px 11px;font-weight:800;font-size:14.5px;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.swatch:hover .cloth,.swatch:focus-visible .cloth{transform:rotateY(-180deg)}
.swatch:hover .sw-t,.swatch:focus-visible .sw-t{transform:rotateY(0)}

/* jewellery and budget */
.duo{background:var(--cream)}
.duo-in{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.box{background:#fff;border:1px solid var(--line2);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.box figure{margin:0}
.box-t{padding:28px 30px 30px}
.box-t h2{font-size:clamp(30px,1.6rem + 1.6vw,44px);margin-bottom:18px}
.list li+li{border-top:1px solid var(--line)}
.list a{display:block;padding:11px 0;font-weight:600;text-decoration:none;color:var(--ink2)}
.list a:hover{color:var(--rani-ink)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:800;color:var(--rani-ink);text-decoration:none}
.more svg{width:17px;height:17px}
.sheen{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--plum)}
.sheen img{width:100%;height:100%;object-fit:cover;transition:filter 1.4s var(--ease),transform 1.4s var(--ease)}
.js .sheen img{filter:blur(10px) saturate(.8);transform:scale(1.08)}
.js .sheen.in img{filter:none;transform:none}
.glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,240,190,.55) 46%,rgba(255,255,255,.8) 50%,rgba(255,240,190,.55) 54%,transparent 70%);transform:translateX(-120%);animation:glint 5.5s var(--ease) infinite 1s}
@keyframes glint{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.porthole{position:relative;margin:28px auto 0!important;width:min(340px,80%);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 10px var(--mint),0 0 0 12px #BFE0CF}
.porthole img{position:absolute;left:-15%;top:-15%;width:130%;height:130%;max-width:none;object-fit:cover;will-change:transform}

/* band */
.band{position:relative;background:var(--plum);color:#F7E7EE;border-radius:36px;padding:80px 60px;margin:0 0 110px;overflow:hidden;text-align:center}
.band::before{content:"";position:absolute;inset:14px;border:2.5px dashed rgba(247,231,238,.35);border-radius:26px;pointer-events:none}
.band h2{color:#fff;font-size:clamp(34px,2rem + 2.6vw,64px);max-width:16ch;margin:18px auto 18px}
.band h2 em{color:var(--marigold)}
.band>p{max-width:58ch;margin:0 auto 30px;font-size:18px;color:#F7E7EE}
.band .cta{justify-content:center}
.btn-s.on-dark{background:transparent;color:#fff;border-color:#fff}
.btn-s.on-dark:hover{background:#fff;color:var(--ink)}
.band .b-band{transform:rotate(-3deg);position:relative;z-index:1;color:var(--ink);margin:0}

/* inner pages */
.phead{background:linear-gradient(180deg,var(--blush),#fff);padding:64px 0 44px;border-bottom:1px solid var(--line)}
.phead-in{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.phead h1{font-size:clamp(40px,2rem + 3.4vw,80px)}
.b-page{margin-top:22px;transform:rotate(-2deg);font-size:24px}
.lede{font-size:19px;color:var(--ink2);max-width:62ch;margin:18px 0 0}
.swing{flex:none;position:relative;width:170px;height:200px;transform-origin:50% 0;animation:swing 3.4s var(--ease) .4s}
.swing::before{content:"";position:absolute;left:50%;top:0;width:2px;height:60px;background:var(--muted)}
.swing-tag{position:absolute;left:10px;right:10px;top:56px;bottom:0;background:var(--rani);color:#fff;border-radius:16px 16px 10px 10px;clip-path:polygon(25% 0,75% 0,100% 18%,100% 100%,0 100%,0 18%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px 18px}
.swing-tag::before{content:"";position:absolute;left:50%;top:14px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#fff}
.swing-tag b{font-family:var(--disp);font-weight:400;font-size:28px;line-height:1}
.swing-tag small{font-size:12px;opacity:.95;margin-top:6px}
.doc{max-width:760px;padding:50px 0 100px;font-size:18px}
.doc h3{font-family:var(--disp);font-size:28px;margin:34px 0 10px;color:var(--ink)}
.doc a{color:var(--rani-ink);font-weight:700}

/* library */
.lib-head{padding-bottom:30px}
.finder{margin-top:30px;display:grid;gap:16px}
.search{display:flex;align-items:center;gap:10px;max-width:640px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:6px 8px 6px 18px}
.search svg{width:22px;height:22px;flex:none;color:var(--rani)}
.search input{flex:1;min-width:0;border:0;background:transparent;font:500 17px var(--body);color:var(--ink);padding:10px 4px;outline:none}
.search:focus-within{box-shadow:0 0 0 4px rgba(14,122,82,.3)}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{font:700 14px/1 var(--body);padding:10px 14px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;color:var(--ink2);cursor:pointer}
.fchip span{font-weight:600;color:var(--muted);margin-left:4px}
.fchip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.fchip[aria-pressed="true"] span{color:#F7E7EE}
.fcount{font-size:14.5px;color:var(--emer-ink);font-weight:700;margin:0}
.lib{padding:30px 28px 90px}
.lgrp{padding-top:30px;scroll-margin-top:100px}
.lgrp h2{font-size:clamp(28px,1.6rem + 1.4vw,40px);margin-bottom:18px;display:flex;align-items:baseline;gap:12px}
.lgrp h2 span{font:700 15px var(--body);color:var(--muted)}
.lcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.lcards li{display:flex}
.lcards li[hidden],.lgrp[hidden]{display:none}
.lcards .card{width:100%}
.lcards .cbody b{font-size:19px}
.lcards .card .ph{aspect-ratio:16/9}
.empty{font-size:18px;color:var(--muted);padding:30px 0}
.credits{margin-top:50px;font-size:13px;color:var(--muted);border-top:1px dashed var(--line2);padding-top:18px}
.credits summary{cursor:pointer;font-weight:700}
.credits ul{list-style:disc;margin:10px 0 0 20px}

/* posts */
.crumbs{display:flex;gap:8px;font-size:14px;font-weight:600;padding:26px 0 0;color:var(--muted)}
.crumbs a{text-decoration:none;color:var(--rani-ink)}
.post-in{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;padding:24px 0 30px}
.pg h1{font-size:clamp(36px,1.8rem + 2.8vw,64px);margin:16px 0 10px}
.pmeta{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.pfig{margin:26px 0 30px}
.pfig img{width:100%;max-height:640px;object-fit:cover;border-radius:22px;background:var(--blush)}
.pfig figcaption{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.prose{max-width:68ch;font-size:19px;line-height:1.75}
.prose p:first-child::first-letter{font-family:var(--disp);float:left;font-size:4.2em;line-height:.86;margin:6px 12px 0 0;color:var(--rani)}
.back a{font-weight:800;color:var(--rani-ink)}
.side{position:sticky;top:100px;align-self:start}
.stag{position:relative;background:var(--cream);border:1.5px solid var(--line2);border-radius:14px;padding:40px 22px 22px;clip-path:polygon(18% 0,82% 0,100% 10%,100% 100%,0 100%,0 10%)}
.hole{position:absolute;left:50%;top:14px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2)}
.stag-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--muted);margin:0 0 2px}
.stag-c,.stag-v{font-weight:700;margin:0 0 14px}
.stag-c a{color:var(--rani-ink)}
.side-h{font-family:var(--disp);font-size:22px;margin:28px 0 8px}
.side-l li+li{border-top:1px solid var(--line)}
.side-l a{display:block;padding:10px 0;font-weight:600;font-size:15px;text-decoration:none;color:var(--ink2)}
.side-l a:hover{color:var(--rani-ink)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:10px 0 90px}
.pn a{display:block;text-decoration:none;border:1.5px solid var(--line2);border-radius:18px;padding:18px 20px;background:#fff;transition:border-color .2s,transform .3s var(--swing)}
.pn a:hover{border-color:var(--rani);transform:translateY(-3px)}
.pn small{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--emer-ink)}
.pn b{font-family:var(--disp);font-weight:400;font-size:20px;line-height:1.2}
.pn .nx{text-align:right}

/* share bar (lifted markup, restyled) */
.sb{margin:34px 0 0;padding:18px 0;border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sb-t{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.sb-l{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sb-l a,.sb-l button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 10px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;color:var(--ink);cursor:pointer;font:700 13.5px var(--body);text-decoration:none}
.sb-l a:hover,.sb-l button:hover{border-color:var(--rani);color:var(--rani-ink)}
.sb-l svg{width:17px;height:17px;fill:currentColor}
#sb-said{font-size:13px;color:var(--emer-ink);font-weight:700}
.sb-note{width:100%;font-size:12.5px;color:var(--muted);margin:4px 0 0}
.printnote{display:none}

/* footer */
.foot{background:var(--blush);border-top:1px solid var(--line);padding:70px 0 30px;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:6px;background:repeating-linear-gradient(90deg,var(--rani) 0 18px,transparent 18px 26px,var(--emer) 26px 44px,transparent 44px 52px)}
.f-in{display:grid;grid-template-columns:1.1fr 1.9fr;gap:50px}
.flogo{display:inline-block;border-radius:12px}
.flogo img{width:150px;height:auto}
.f-tag{font:700 28px/1.1 var(--hand);color:var(--rani-ink);margin:14px 0 6px}
.f-brand p:last-child{color:var(--muted);max-width:36ch}
.f-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.f-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--emer-ink);margin:0 0 12px}
.f-cols li{margin:0 0 8px}
.f-cols a{text-decoration:none;color:var(--ink2);font-weight:600;font-size:15px}
.f-cols a:hover{color:var(--rani-ink);text-decoration:underline}
.f-base{border-top:1px dashed var(--line2);margin-top:40px;padding-top:20px;font-size:13.5px;color:var(--muted)}
.f-base p{margin:0 0 4px}

/* responsive */
@media (max-width:1100px){
  .rail{grid-template-columns:repeat(4,1fr);row-gap:24px}
  .rail-bar{display:none}
  .hanger::before{content:"";position:absolute;left:-6px;right:-6px;top:10px;height:8px;border-radius:8px;background:linear-gradient(#C9C2C6,#8E8489)}
  .swatches{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero-in,.wd,.talk-in,.tailor-in,.swatch-top,.duo-in,.f-in{grid-template-columns:minmax(0,1fr)}
  .stage{position:relative;top:0}
  .seam{grid-row:auto;aspect-ratio:4/3}
  .post-in{grid-template-columns:1fr;gap:30px}
  .side{position:relative;top:0}
  .looks{grid-template-columns:repeat(2,1fr)}
  .trial{max-width:440px}
}
@media (max-width:860px){
  .menu-b{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:2px;background:#fff;border-bottom:1px solid var(--line2);padding:12px 20px 18px;box-shadow:0 20px 40px rgba(51,18,31,.12)}
  .nav.open{display:flex}
  .nav a{padding:13px 14px;font-size:17px}
  .top-r{margin-left:auto}
  .launch-p{position:fixed;left:16px;right:16px;top:84px;width:auto}
  .launch-g{columns:2 140px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .wrap{padding:0 16px}
  .lib{padding:20px 16px 70px}
  .sec{padding:76px 0}
  .brand img{height:40px}
  .launch .lt{display:none}
  .launch summary{padding:10px}
  .hero{padding-top:34px}
  .hero-in{gap:40px;padding-bottom:50px}
  .hero .sub{font-size:18px}
  .bubble{font-size:22px}
  .rail{grid-template-columns:repeat(2,1fr)}
  .looks,.swatches{grid-template-columns:1fr}
  .swatch{min-height:190px}
  .looks .card.in.tilt1{transform:rotate(.8deg)}
  .tabs button{padding:10px 9px;font-size:13.5px}
  .ctrls{padding:14px}
  .mirror{padding:46px 14px 24px;border-width:6px}
  .fig{max-width:236px}
  .band{padding:56px 22px;border-radius:26px;margin-bottom:76px}
  .phead-in{flex-direction:column;align-items:flex-start}
  .swing{width:130px;height:150px;align-self:flex-end;margin-top:-30px}
  .swing-tag b{font-size:22px}
  .f-cols{grid-template-columns:1fr 1fr}
  .pn{grid-template-columns:1fr}
  .pn .nx{text-align:left}
  .prose{font-size:18px}
  .box-t{padding:22px 20px 24px}
  .chat-top small{display:none}
  .q,.a{max-width:94%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .trial .curtain{display:none}
  .seam{clip-path:none}
  .js .sheen img{filter:none;transform:none}
}
@media print{
  .top,.tape,.foot,.sb,.side,.pn,.crumbs,.skip{display:none!important}
  .printnote{display:block;font-size:12px;color:#555}
  .post-in{display:block}
  body{font-size:12pt}
}