/* =========================================================
   Laura del Mar studio — estilos
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root{
  color-scheme:light;
  --bg:#f6a3c6;
  --fg:#161313;
  --ink:#161313;
  --paper:#fffcf5;
  --kraft:#d7bd92;
  --box:#d6b07c;
  --box-d:#c59d66;
  --cream:#fff4df;
  --noise: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='70'%3E%3Cpath d='M0 26 Q30 10 60 26 T120 26 V70 H0Z' fill='%23ff5c8a'/%3E%3Cpath d='M0 15 Q30 -1 60 15 T120 15' fill='none' stroke='%23ffd23f' stroke-width='6'/%3E%3Cpath d='M0 46 Q30 30 60 46 T120 46' fill='none' stroke='%23161313' stroke-width='2' stroke-dasharray='2 6' stroke-linecap='round'/%3E%3C/svg%3E");
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M12 4c.5 4.6 1.6 7 8 8-6.4 1-7.5 3.4-8 8-.5-4.6-1.6-7-8-8 6.4-1 7.5-3.4 8-8Z' fill='%23161313' fill-opacity='.16'/%3E%3Ccircle cx='34' cy='34' r='2.4' fill='%23161313' fill-opacity='.18'/%3E%3C/svg%3E");
  --yellow:#ffd23f;
  --pink:#ff8fb8;
  --lime:#b5d63f;
  --blue:#1f6bff;
  --coral:#ff7a57;
  --display:"Antonio","Oswald","Arial Narrow",sans-serif;
  --sans:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --mono:"Chivo Mono",ui-monospace,Menlo,monospace;
  --script:"Mrs Saint Delafield","Snell Roundhand",cursive;
  --gut:clamp(16px,2.6vw,38px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;scrollbar-width:none;-ms-overflow-style:none}
/* sin barras de scroll visibles (se sigue pudiendo hacer scroll) */
html::-webkit-scrollbar,body::-webkit-scrollbar,.case::-webkit-scrollbar,.pop::-webkit-scrollbar{display:none;width:0;height:0}
.case,.pop{scrollbar-width:none;-ms-overflow-style:none}
#trabajo,#sobre-mi,#contacto{scroll-margin-top:64px}
body{background:var(--bg);color:var(--fg);font:400 16.5px/1.5 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.lbl{font-family:var(--sans);font-weight:650;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}
.wrap{padding-inline:var(--gut)}
main>section,.stage-wrap{isolation:isolate}
/* mientras se hace scroll, el collage no reacciona al ratón (scroll fluido, sin saltos) */
.is-scrolling .stage .it,.is-scrolling .fl,.is-scrolling .words .w{pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:70;background:var(--bg)}
.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:radial-gradient(circle at 10px 0,var(--bg) 9.5px,transparent 10px) 0 0/20px 12px repeat-x;pointer-events:none}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:12px 10px}
.logo{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;white-space:nowrap}
.logo .ln{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1;letter-spacing:-.01em}
.logo .ln b{font-family:var(--sans);font-style:normal;font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:.84em;letter-spacing:0}
.logo .lg-s{font-family:var(--script);font-size:32px;line-height:0;display:inline-block;transform:translateY(6px) rotate(-7deg)}
.nav{display:flex;gap:12px;align-items:center}
.nav a{text-decoration:none;background:var(--c,var(--yellow));color:var(--t,var(--ink));border:1.5px solid var(--ink);padding:8px 17px 7px;border-radius:99px;font-weight:750;font-size:14px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;transform:rotate(var(--rot,0deg));box-shadow:3px 3px 0 var(--ink);transition:transform .4s var(--pop),box-shadow .3s}
.nav a:nth-child(1){--c:var(--yellow);--rot:-4deg}
.nav a:nth-child(2){--c:var(--lime);--rot:3deg}
.nav a:nth-child(3){--c:var(--blue);--t:#fff;--rot:-2deg}
@media (hover:hover){.nav a:hover{transform:rotate(0deg) translate(-2px,-3px) scale(1.06);box-shadow:5px 6px 0 var(--ink)}}
.nav a:focus-visible{transform:rotate(0deg) translate(-2px,-3px) scale(1.06);box-shadow:5px 6px 0 var(--ink)}
.menu-btn{all:unset;display:none;cursor:pointer;white-space:nowrap;background:var(--ink);color:var(--bg);border-radius:99px;padding:8px 15px 7px;font-weight:750;font-size:13px;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-3deg)}
.menu-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:700px){
  .logo .ln{font-size:23px}.logo .lg-s{font-size:26px}
  .menu-btn{display:inline-block}
  .nav{position:fixed;z-index:80;right:var(--gut);top:calc(env(safe-area-inset-top,0px) + 72px);flex-direction:column;align-items:flex-end;gap:14px;visibility:hidden;opacity:0;pointer-events:none;transform:translate3d(0,-10px,0);transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s}
  .nav.open{visibility:visible;opacity:1;pointer-events:auto;transform:translate3d(0,0,0);transition:opacity .25s,transform .3s var(--ease),visibility 0s}
  .nav a{font-size:16px;padding:11px 20px 10px}
}

@media (hover:hover){.li:hover{transform:rotate(0deg) translate(-2px,-3px) scale(1.05);box-shadow:5px 6px 0 var(--ink)}}
/* ---------- intro lockup ---------- */
.intro{text-align:center;padding-block:clamp(44px,6vw,80px) 0;position:relative;z-index:2}
.lockup{position:relative;display:inline-block;max-width:100%}
.who{position:relative;margin:0;font-size:clamp(52px,9.4vw,150px);line-height:.9;letter-spacing:-.02em;text-wrap:balance}
.who .a{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:-.03em}
.who .b{font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase}
.who .studio{position:absolute;right:-.15em;bottom:-.62em;font-family:var(--script);font-weight:400;font-size:.62em;line-height:1;letter-spacing:0;transform:rotate(-7deg);white-space:nowrap}
.scrib{display:block;width:58%;height:auto;margin:.02em auto 0 0;overflow:visible}
.scrib path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:0;animation:draw 1.6s .5s var(--ease) backwards}
@keyframes draw{from{stroke-dashoffset:900}}
.tagpill{position:absolute;right:-.3em;top:-2.5em;display:inline-flex;align-items:center;gap:.7em;background:var(--ink);color:#f1efe9;border-radius:99px;padding:.55em 1.1em;transform:rotate(7deg);box-shadow:0 10px 20px -12px rgba(0,0,0,.5);font-size:clamp(11px,1vw,14px);white-space:nowrap}
.tagpill small{font-family:var(--mono);font-size:.72em;letter-spacing:.1em;opacity:.75}
.tagpill b{font-family:var(--mono);font-weight:400;letter-spacing:.16em}
.role{margin:clamp(40px,4.6vw,66px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;font-weight:600;font-size:clamp(13px,1.2vw,15.5px);letter-spacing:.05em;text-transform:uppercase}
.role i{font-family:var(--serif);font-style:normal;font-size:1.3em}
@media (max-width:560px){.intro{padding-top:74px}.tagpill{right:0;top:-2.7em}.bubble{padding:10px 16px 12px}.bubble .t{font-size:19px}.bubble .s{font-size:22px;margin-top:6px}.who .studio{right:0;bottom:-.7em}}

/* ---------- collage stage ---------- */
.stage-wrap{position:relative;overflow:hidden;padding-inline:var(--gut)}
.stage{position:relative;width:100%;min-height:60vh}
.band{position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);white-space:nowrap;overflow:hidden;pointer-events:none;z-index:0}
.band .track{display:inline-flex;animation:marq 110s linear infinite}
.band.rev .track{animation-direction:reverse;animation-duration:95s}
.band.rev span{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;font-size:clamp(64px,10vw,170px);line-height:1.2;letter-spacing:-.02em}
.band span{font-family:var(--display);font-weight:100;text-transform:uppercase;font-size:clamp(84px,15vw,250px);line-height:1.18;letter-spacing:-.005em;padding-right:.35em}

.it,.fl{position:absolute;left:0;top:0;padding:0;margin:0;border:0;background:none;transform:translate3d(var(--dx,0px),calc(var(--py,0px) + var(--dy,0px)),0) rotate(var(--r,0deg));touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.it{cursor:pointer}
.it .card,.fl .card{position:relative;display:block;width:100%;height:100%;animation:drop .9s var(--ease) backwards;animation-delay:var(--d,0s);transition:transform .45s var(--ease)}
.it img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.duo .pa,.duo .pb{position:absolute;display:block;box-shadow:0 1px 0 rgba(0,0,0,.06),0 14px 28px -14px rgba(0,0,0,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.duo .pa{transform:rotate(var(--ra,0deg));z-index:1}
.duo .pb{transform:rotate(var(--rb,0deg));z-index:2}
.duo:hover .pa,.duo:focus-visible .pa{transform:rotate(calc(var(--r,0deg) * -1)) scale(1.03)}
.duo:hover .pb,.duo:focus-visible .pb{transform:translate(7%,5%) rotate(calc(var(--rb,0deg) * 1.5)) scale(1.04);box-shadow:0 30px 50px -22px rgba(0,0,0,.55)}
.it:focus-visible{outline:none}
.it:focus-visible .card{outline:2px solid var(--ink);outline-offset:8px}
.st{z-index:1000!important}
.htag{position:absolute;left:0;top:0;z-index:3000;display:inline-flex;gap:8px;align-items:baseline;background:var(--pb,var(--ink));color:var(--pf,#fff);border:1.5px solid var(--ink);padding:5px 12px;border-radius:99px;font-family:var(--sans);font-weight:750;font-size:13.5px;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;opacity:0;transform:translateY(6px) rotate(-3deg);box-shadow:3px 3px 0 var(--ink);transition:opacity .2s,transform .3s var(--ease);pointer-events:none}
.htag small{font-weight:500;font-size:11px;letter-spacing:.04em;opacity:.85}
.htag.on{opacity:1;transform:translateY(0) rotate(-3deg)}
.it .tag{display:none;position:absolute;left:-8px;bottom:-16px;z-index:3;display:inline-flex;gap:8px;align-items:baseline;background:var(--pb,var(--ink));color:var(--pf,#fff);border:1.5px solid var(--ink);padding:5px 12px;border-radius:99px;font-family:var(--sans);font-weight:750;font-size:13.5px;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;opacity:0;transform:translateY(6px) rotate(-3deg);box-shadow:3px 3px 0 var(--ink);transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
.it .tag small{font-weight:500;font-size:11px;letter-spacing:.04em;opacity:.85}
.dragging{transition:none!important;cursor:grabbing!important}
@keyframes drop{from{opacity:0;transform:translateY(-40px) rotate(8deg) scale(.9)}to{opacity:1;transform:none}}

/* placeholder project cards */
.duo .pa,.duo .pb,.peek .pk{container-type:inline-size}
.phc{position:relative;width:100%;height:100%;overflow:hidden;background:var(--pc);color:var(--pf);display:flex;flex-direction:column;justify-content:space-between;padding:7cqw 8cqw;text-align:left;background-image:radial-gradient(circle at 78% 26%,rgba(255,255,255,.38) 0 17%,transparent 17.5%),repeating-linear-gradient(-45deg,transparent 0 12px,rgba(0,0,0,.05) 12px 24px)}
.phc b{font-family:var(--display);font-weight:100;font-size:46cqw;line-height:.85;letter-spacing:-.02em}
.phc em{font-family:var(--script);font-style:normal;font-size:13cqw;line-height:.9;transform:rotate(-6deg);transform-origin:left}
.phc small{align-self:flex-start;border:1.5px solid currentColor;border-radius:99px;padding:.35em .9em;font-weight:700;font-size:max(10px,5.4cqw);letter-spacing:.05em;text-transform:uppercase}
.phc.alt{background:var(--paper);color:var(--ink);align-items:center;justify-content:center;gap:4cqw;background-image:repeating-linear-gradient(0deg,transparent 0 14px,rgba(0,0,0,.05) 14px 15px)}
.phc.alt b{font-family:var(--serif);font-size:40cqw;color:var(--pc);-webkit-text-stroke:1px var(--ink)}
.phc.alt em{font-size:20cqw;transform:rotate(-8deg)}

/* ---------- stickers ---------- */
.st,.fl{cursor:grab}
.st:hover .card,.fl:hover .card{transform:rotate(calc(var(--r,0deg) * -1)) scale(1.06)}
.fl{z-index:5}
.shadow{filter:drop-shadow(0 12px 14px rgba(0,0,0,.22))}
.badge{width:100%;height:100%;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;position:relative;box-shadow:0 12px 24px -14px rgba(0,0,0,.5)}
.badge svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.badge svg.ring text{font-family:var(--mono);font-size:10.4px;letter-spacing:.2em;fill:var(--ink);text-transform:uppercase}
.badge .arr{width:38%;height:auto}
.badge.coral{background:var(--coral)}
.look{transition:transform .35s var(--ease);transform-origin:50% 50%}
.burst,.flower,.smile,.heart,.spark{width:100%;height:100%;position:relative;display:grid;place-items:center;color:var(--ink)}
.burst svg,.flower svg,.smile svg,.heart svg,.spark svg{position:absolute;inset:0;width:100%;height:100%}
.burst span{position:relative;font-family:var(--script);font-size:30cqw;line-height:1;transform:rotate(-8deg)}
.flower svg{animation:spin 30s linear infinite}
.stamp{width:100%;height:100%;padding:6cqw;background:radial-gradient(circle at 5px 5px,transparent 3.6px,var(--coral) 4px) -5px -5px/10px 10px}
.stamp .in{width:100%;height:100%;background:var(--coral);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1.5px solid rgba(22,19,19,.55);text-align:center;padding:8px}
.stamp small{font-weight:700;font-size:8cqw;letter-spacing:.14em;text-transform:uppercase}
.stamp strong{font-weight:800;font-variation-settings:"wdth" 75;font-size:21cqw;line-height:.9;text-transform:uppercase}
.stamp em{font-family:var(--serif);font-size:13cqw}
.stamp .in{padding:5cqw!important;gap:1cqw!important}
.st .card,.fl .card{container-type:inline-size}
.ticket{width:100%;height:100%;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;padding:8cqw 8cqw 17cqw;text-align:center;clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,84% 92%,76% 100%,68% 92%,60% 100%,52% 92%,44% 100%,36% 92%,28% 100%,20% 92%,12% 100%,4% 92%,0 100%)}
.ticket small{font-weight:700;font-size:8cqw;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ticket strong{font-weight:800;font-variation-settings:"wdth" 75;font-size:30cqw;line-height:.95;border-block:1.5px dashed currentColor;padding-block:3cqw;width:100%}
.doodle{width:100%;height:100%;position:relative;color:var(--ink)}
.doodle span{position:absolute;left:0;top:0;font-family:var(--script);font-size:clamp(40px,3.6vw,56px);line-height:1;transform:rotate(-8deg);white-space:nowrap}
.doodle svg{position:absolute;right:4%;bottom:0;width:52%;height:auto;overflow:visible}
.doodle path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.hint{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px 0}

/* ---------- project index: one per line ---------- */
.index{position:relative;padding-block:clamp(60px,9vw,130px) clamp(40px,6vw,80px)}
.index-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:clamp(18px,3vw,34px)}
.index-head h2{margin:0;font-family:var(--display);font-weight:100;text-transform:uppercase;font-size:clamp(56px,8vw,120px);line-height:.95}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.fchip{all:unset;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:99px;padding:6px 13px 5px;transition:background-color .25s,color .25s}
.fchip:hover,.fchip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.fchip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.words{list-style:none;margin:0;padding:0;font-family:var(--display);font-weight:200;text-transform:uppercase;font-size:clamp(46px,8.4vw,142px);line-height:1.02;letter-spacing:-.005em}
.words li{padding-block:clamp(6px,.9vw,14px)}
.w{all:unset;cursor:pointer;display:inline;position:relative;transition:opacity .35s}
.w.dim{opacity:.16}
.w.ph .nm{opacity:.5}
.w sup{font-family:var(--sans);font-weight:650;font-size:max(11px,.11em);letter-spacing:.05em;text-transform:uppercase;vertical-align:1.9em;margin-left:.3em}
.w .nm{background-image:linear-gradient(currentColor,currentColor);background-size:0 .06em;background-repeat:no-repeat;background-position:0 92%;transition:background-size .5s var(--ease)}
.w:hover .nm,.w:focus-visible .nm{background-size:100% .06em}
.w:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.tail{white-space:nowrap}
.sep{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;font-size:.6em;vertical-align:.25em;padding-inline:.18em;opacity:.8}
@media (max-width:640px){.w sup{display:none}}
.peek{position:fixed;left:0;top:0;width:clamp(220px,22vw,340px);z-index:60;pointer-events:none;opacity:0;transition:opacity .25s;transform:translate3d(-50%,-50%,0)}
.peek .pk{position:relative;transform:rotate(-5deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.peek .pk>*{display:none;width:100%;height:auto}
.peek .pk>.phc{aspect-ratio:.78;height:auto}
.peek .pk>.on{display:flex}
.peek .pk>img.on{display:block}
.peek.on{opacity:1}
@media (hover:none),(pointer:coarse){.peek{display:none}}

/* ---------- about: printed box (dieline + 3D mockup) ---------- */
.about{position:relative;padding-block:clamp(40px,6vw,90px)}
.about-top{display:flex;justify-content:space-between;align-items:center;gap:10px 40px;flex-wrap:wrap}
.about-top h2{font-family:var(--display);font-weight:100;text-transform:uppercase;font-size:clamp(70px,13vw,220px);line-height:.92;margin:0}
.about-top h2 em{font-family:var(--serif);font-weight:400;text-transform:none;font-size:.62em;letter-spacing:-.02em}
.mock{position:relative;display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:clamp(0px,5vw,90px)}
.mock-note{font-family:var(--script);font-size:clamp(34px,3vw,46px);line-height:1;transform:rotate(-8deg);white-space:nowrap;align-self:flex-start;margin-top:10px}
.mock-arrow{width:64px;height:auto;overflow:visible;align-self:flex-start;margin-top:40px}
.mock-arrow path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.scene{--w:150px;--h:200px;--d:90px;position:relative;width:var(--w);height:var(--h);perspective:900px;margin:40px 50px 50px}
.scene::after{content:"";position:absolute;left:50%;bottom:-54px;width:220px;height:34px;margin-left:-110px;background:radial-gradient(ellipse at center,rgba(22,19,19,.35),transparent 68%)}
.cube{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(-32deg);animation:turn 18s linear infinite}
@keyframes turn{from{transform:rotateX(-16deg) rotateY(-32deg)}to{transform:rotateX(-16deg) rotateY(328deg)}}
.fc{container-type:size;position:absolute;left:50%;top:50%;overflow:hidden;background-color:var(--box);background-image:var(--wave),var(--pat),var(--noise);background-size:60px 35px,30px 30px,160px 160px;background-repeat:repeat-x,repeat,repeat;background-position:left bottom,0 0,0 0;color:var(--ink);outline:1.5px solid var(--ink);outline-offset:-1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.c-front,.c-back{width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2)}
.c-front{transform:translateZ(calc(var(--d) / 2))}
.c-back{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.c-right,.c-left{width:var(--d);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--d) / -2)}
.c-right{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.c-left{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.c-top,.c-bottom{width:var(--w);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--w) / -2)}
.c-top{transform:rotateX(90deg) translateZ(calc(var(--h) / 2));background-color:var(--box-d);background-image:var(--pat),var(--noise);background-size:30px 30px,160px 160px}
.c-bottom{transform:rotateX(-90deg) translateZ(calc(var(--h) / 2));background-color:var(--box-d);background-image:var(--noise)}
.c-front{justify-content:space-evenly;padding:5% 6% 24%;gap:0}
.c-right::after,.c-left::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.16);pointer-events:none}
.cf-brand{font-family:var(--serif);font-style:italic;font-size:10cqh;line-height:.95;white-space:nowrap}
.cf-brand b{display:block;font-family:var(--sans);font-style:normal;font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:9cqh}
.cf-win{flex:none;width:32cqh;height:32cqh;border-radius:50%;overflow:hidden;filter:grayscale(1);outline:1.5px dashed var(--ink);outline-offset:3px}
.cf-win img{width:100%;height:100%;object-fit:cover}
.cf-studio{font-family:var(--script);font-size:12cqh;line-height:.7;white-space:nowrap}
.cf-ed{background:var(--yellow);color:var(--ink);border:1px solid var(--ink);border-radius:99px;padding:.8cqh 2.4cqh .5cqh;font-weight:750;font-size:4.2cqh;white-space:nowrap;letter-spacing:.06em;text-transform:uppercase}
.mini-lab{width:80%;background:#fffdf7;color:var(--ink);border:1.5px solid var(--ink);padding:5cqw;display:flex;flex-direction:column;gap:3cqw;text-align:left;margin-bottom:12cqh}
.mini-lab b{font-weight:800;font-variation-settings:"wdth" 75;font-size:10cqw;overflow-wrap:anywhere;line-height:1;text-transform:uppercase;border-bottom:3px solid var(--ink);padding-bottom:3px}
.mini-lab i{display:block;height:2px;background:var(--ink);opacity:.5}
.mini-lab i:nth-child(odd){width:70%}
.mini-lab svg{width:100%;height:auto;margin-top:4px}
.c-left{flex-direction:row;gap:6cqw}
.cl-txt{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:800;font-variation-settings:"wdth" 75;font-size:5.6cqh;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.c-top svg{width:34px;height:34px}
.cut{display:flex;align-items:center;gap:10px;margin:clamp(18px,3vw,34px) 0 0;font-family:var(--script);font-size:clamp(30px,2.6vw,40px);line-height:1}
.cut svg{width:24px;height:24px;flex:none}
.ic{width:1em;height:1em;flex:none}
.cut::after{content:"";flex:1;max-width:260px;border-top:2px dashed var(--ink)}
.sheet{position:relative;padding:34px 36px 48px}
.reg{position:absolute;width:24px;height:24px}
.reg circle,.reg path{fill:none;stroke:var(--ink);stroke-width:1.4}
.r1{left:0;top:0}.r2{right:0;top:0}.r3{left:0;bottom:18px}.r4{right:0;bottom:18px}
.slug{position:absolute;left:36px;right:36px;bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.cmyk{display:inline-flex;border:1px solid var(--ink)}
.cmyk i{width:18px;height:12px;display:block}
.cmyk i:nth-child(1){background:#ff5c8a}.cmyk i:nth-child(2){background:#ffd23f}.cmyk i:nth-child(3){background:#161313}.cmyk i:nth-child(4){background:#fffdf7}
.box{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 30px;grid-template-rows:48px auto 48px;grid-template-areas:"ta tb tc ." "a b c g" "ba bb bc .";transform:rotate(-.6deg);filter:drop-shadow(8px 8px 0 rgba(22,19,19,.9))}
/* flaps: the outline is the cut line; they tuck under the panel so the join shows the dashed fold */
.flap{position:relative;filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))}
.flap i{position:absolute;inset:0;background-color:var(--box-d);background-image:var(--pat),var(--noise);background-size:46px 46px,160px 160px}
.f-ta{grid-area:ta;margin:0 7% -4px}.f-ta i{border-radius:50% 50% 0 0/100% 100% 0 0}
.f-tb{grid-area:tb;margin-bottom:-4px}.f-tc{grid-area:tc;margin-bottom:-4px}
.f-tb i,.f-tc i{clip-path:polygon(0 100%,14% 18%,86% 18%,100% 100%)}
.f-ba{grid-area:ba;margin-top:-4px}.f-ba i{clip-path:polygon(0 0,100% 0,90% 100%,10% 100%)}
.f-bb{grid-area:bb;margin-top:-4px}.f-bc{grid-area:bc;margin-top:-4px}
.f-bb i,.f-bc i{clip-path:polygon(0 0,100% 0,86% 72%,14% 72%)}
.f-g{grid-area:g;margin-left:-4px}
.f-g i{clip-path:polygon(0 0,100% 9%,100% 91%,0 100%);background:#e9dcc6 repeating-linear-gradient(45deg,transparent 0 6px,rgba(0,0,0,.08) 6px 8px);display:grid;place-items:center}
.f-g span{writing-mode:vertical-rl;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink);opacity:.7}
.pn{position:relative;z-index:1;min-width:0;border-block:2px dashed var(--ink);background-color:var(--box);background-image:var(--wave),var(--pat),var(--noise);background-size:120px 70px,46px 46px,160px 160px;background-repeat:repeat-x,repeat,repeat;background-position:left bottom,0 0,0 0;color:var(--ink)}
.p-a{grid-area:a;border-left:2px solid var(--ink);padding:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px) 92px;display:flex;flex-direction:column;gap:18px}
.p-b{grid-area:b;border-left:2px dashed var(--ink)}
.p-c{grid-area:c;border-left:2px dashed var(--ink);border-right:2px dashed var(--ink)}
.p-b,.p-c{padding:16px 16px 92px}
.pa-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mini{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1;white-space:nowrap}
.mini b{font-family:var(--sans);font-style:normal;font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:.84em}
.mini i{font-family:var(--script);font-style:normal;font-size:1.2em;margin-left:4px}
.ed{background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);border-radius:99px;padding:4px 11px 3px;font-weight:750;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transform:rotate(3deg)}
.win{position:relative;width:min(320px,86%);aspect-ratio:1;margin-inline:auto}
.win .ph{position:absolute;inset:15%;border-radius:50%;overflow:hidden;filter:grayscale(1);outline:2px dashed var(--ink);outline-offset:5px}
.win .ph img{width:100%;height:100%;object-fit:cover}
.win svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:spin 36s linear infinite}
.win svg .rb{font-weight:700}
.win svg text{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink)}
.win::before{content:"";position:absolute;inset:13%;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 2px var(--ink)}
.p-a .lead{font-family:var(--serif);font-size:clamp(30px,2.8vw,42px);line-height:1.02;margin:0;letter-spacing:-.015em;text-wrap:balance}
.flabel{background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;font-size:15.5px;box-shadow:4px 4px 0 var(--ink)}
.flabel p{margin:0}
.q{align-self:flex-start;margin:0;background:var(--yellow);color:var(--ink);padding:10px 16px;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.15;transform:rotate(-2deg);max-width:34ch;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.syms{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px;border-top:2px dashed var(--ink)}
.syms span{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);background:rgba(255,244,223,.35);padding:4px 10px 3px;font-weight:750;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
.syms svg{width:16px;height:16px}
.nlabel{background:#fffdf7;color:var(--ink);border:2px solid var(--ink);padding:14px 14px 12px;box-shadow:4px 4px 0 var(--ink)}
.lab h3{font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(32px,2.8vw,44px);line-height:.88;text-transform:uppercase;margin:0;letter-spacing:-.01em}
.lab .serv{font-size:14px;line-height:1.3;padding-block:8px 8px;border-bottom:11px solid var(--ink)}
.lab .sec{display:flex;justify-content:space-between;gap:10px;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;padding-block:8px 5px;border-bottom:1.5px solid var(--ink)}
.lab .rw{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:6px;border-bottom:1px solid var(--ink)}
.lab .rw.k strong{font-weight:800;font-size:16px;text-transform:uppercase;font-variation-settings:"wdth" 80}
.lab .rw strong{display:block;font-weight:700;font-size:14.5px;line-height:1.2}
.lab .rw small{display:block;font-size:13px;opacity:.78;line-height:1.25}
.lab .val{font-weight:600;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.lab .thick{border-bottom:6px solid var(--ink)}
.lab .fine{font-size:12.5px;line-height:1.4;padding-top:10px;margin:0}
.dots{display:inline-flex;gap:4px}
.dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor}
.dots i.f{background:currentColor}
.barcode{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1.5px dashed var(--ink)}
.barcode svg{width:140px;height:auto}
.barcode span{font-family:var(--script);font-size:30px;line-height:.8;transform:rotate(-6deg)}
@media (max-width:999px){
  /* the dieline turns vertical: panels stacked, flaps on the sides, glue tab at the bottom */
  .box{max-width:600px;margin-inline:auto;grid-template-columns:30px minmax(0,1fr) 30px;grid-template-rows:auto auto auto 30px;grid-template-areas:"ta a ba" "tb b bb" "tc c bc" ". g .";transform:none}
  .f-ta{margin:7% -4px 7% 0}.f-ta i{border-radius:100% 0 0 100%/50% 0 0 50%}
  .f-tb,.f-tc{margin:0 -4px 0 0}
  .f-tb i,.f-tc i{clip-path:polygon(100% 0,20% 12%,20% 88%,100% 100%)}
  .f-ba{margin:0 0 0 -4px}.f-ba i{clip-path:polygon(0 0,100% 9%,100% 91%,0 100%)}
  .f-bb,.f-bc{margin:0 0 0 -4px}
  .f-bb i,.f-bc i{clip-path:polygon(0 0,74% 12%,74% 88%,0 100%)}
  .f-g{margin:-4px 0 0}
  .f-g i{clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
  .f-g span{writing-mode:horizontal-tb}
  .p-a,.p-b,.p-c{border:2px dashed var(--ink);border-top:0}
  .p-a{border-top:2px solid var(--ink)}
}
@media (max-width:680px){
  .box{grid-template-columns:22px minmax(0,1fr) 22px;filter:drop-shadow(5px 5px 0 rgba(22,19,19,.9))}
  .sheet{padding:26px 10px 44px}
  .slug{left:10px;right:10px;font-size:10px}
  .r2,.r3,.r4{display:none}
  .fl:not(.flow){display:none}
  .mock{margin-inline:auto;flex-direction:column;gap:0}
  .mock-note{align-self:center;margin-top:0}
  .mock-arrow{display:none}
  .scene{--w:120px;--h:160px;--d:72px;margin:34px 40px 46px}
}

/* ---------- contact ---------- */
.ticker{border-block:2px solid var(--ink);overflow:hidden;white-space:nowrap;padding-block:10px;margin-top:clamp(50px,8vw,110px)}
.ticker .track{display:inline-flex;animation:marq 70s linear infinite}
.ticker span{font-family:var(--sans);font-weight:700;font-size:clamp(15px,1.5vw,20px);text-transform:uppercase;padding-right:1.2em;line-height:1.3}
.contact{position:relative;padding-block:clamp(28px,4vw,50px) clamp(24px,3vw,40px)}
.contact .big{font-family:var(--display);font-weight:100;text-transform:uppercase;font-size:clamp(64px,13vw,220px);line-height:.9;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:0 .15em}
.contact .big svg{width:.7em;height:.5em;flex:none}
.mail{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:clamp(18px,3vw,34px)}
.mail .addr{font-family:var(--serif);font-size:clamp(26px,8.4vw,84px);line-height:1;letter-spacing:-.02em;word-break:break-all}
.plain{text-decoration:none;color:inherit}
.plain:hover .addr,.plain:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.chip{all:unset;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:99px;padding:7px 15px 6px;transition:background-color .25s,color .25s}
.chip:hover,.chip:focus-visible{background:var(--ink);color:var(--bg)}
.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:18px;margin-top:clamp(40px,6vw,80px)}
.foot .phone{justify-self:start;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.foot .phone b{font-weight:600;font-size:18px}
.li{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--blue);color:#fff;border:1.5px solid var(--ink);border-radius:99px;padding:10px 20px 9px;font-weight:800;font-size:16px;letter-spacing:.03em;text-transform:uppercase;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink);transition:transform .4s var(--pop),box-shadow .3s}
.li:focus-visible{transform:rotate(0deg) translate(-2px,-3px) scale(1.05);box-shadow:5px 6px 0 var(--ink)}
.foot .c{justify-self:end;font-weight:650;text-transform:uppercase}
.c-slot{display:none}
@media (max-width:680px){
  /* phones: each contact sticker takes a free spot in the layout */
  .c-slot{display:block;flex:none}
  .fl.flow{position:relative;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important}
  #slot-pointer{margin-left:auto;margin-right:6px}
  #slot-pointer .look{transform:rotate(180deg)}
  #slot-stamp{grid-area:stamp;align-self:center;justify-self:end;margin-right:10px}
}
.gracias{font-family:var(--script);font-size:clamp(60px,8vw,120px);line-height:.9;text-align:center;margin-top:clamp(20px,3vw,40px)}
@media (max-width:680px){.foot{grid-template-columns:1fr auto;grid-template-areas:"phone stamp" "li c";row-gap:44px;column-gap:12px}.foot .phone{grid-area:phone}.foot .li{grid-area:li;justify-self:start}.foot .c{grid-area:c;justify-self:end;text-align:right;max-width:14ch}.gracias{margin-top:48px}}

/* ---------- case overlay ---------- */
.case{position:fixed;inset:0;z-index:90;background:var(--cbg,#111);color:var(--cfg,#fff);overflow-y:auto;overscroll-behavior:contain;transform:translateY(102%);transition:transform .75s var(--ease),visibility 0s .75s;visibility:hidden}
.case.open{transform:none;visibility:visible;transition:transform .75s var(--ease),visibility 0s}
.case-bar{position:sticky;top:0;z-index:3;background:var(--cbg,#111);padding-top:env(safe-area-inset-top,0px)}
.case-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
.case .chip:hover,.case .chip:focus-visible{background:var(--cfg);color:var(--cbg)}
.case-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:end;padding-block:clamp(20px,4vw,60px) clamp(30px,4vw,56px)}
.case-head h2{font-family:var(--display);font-weight:100;text-transform:uppercase;font-size:clamp(64px,12vw,200px);line-height:.86;margin:0;text-wrap:balance}
.case-kicker{font-family:var(--script);font-size:clamp(34px,3.4vw,52px);line-height:1;display:inline-block;transform:rotate(-6deg);margin-bottom:6px}
.case-head .sub{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.case-head .sub span{border:1.5px solid currentColor;border-radius:99px;padding:5px 13px 4px;font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.case-head .sub span.cl{background:var(--cac);color:var(--cacfg);border-color:var(--cac);transform:rotate(-2deg)}
.case-desc{font-family:var(--serif);font-size:clamp(24px,2.3vw,34px);line-height:1.14;letter-spacing:-.005em;margin:0 0 26px;text-wrap:pretty}
.facts{margin:0;border-top:1.5px dashed currentColor}
.fact{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:16px;align-items:center;padding-block:12px;border-bottom:1.5px dashed currentColor}
.fact dt{justify-self:start;background:var(--cac);color:var(--cacfg);border-radius:99px;padding:5px 11px;font-weight:750;font-variation-settings:"wdth" 80;font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fact:nth-child(odd) dt{transform:rotate(-2.5deg)}
.fact:nth-child(even) dt{transform:rotate(2deg)}
.fact dd{margin:0;font-weight:500;font-size:17px;line-height:1.3}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,28px);padding-bottom:clamp(40px,6vw,80px);align-items:start}
.gallery figure{margin:0;grid-column:span 2}
.gallery figure.h{grid-column:span 1}
.gallery figure.h.lo{margin-top:clamp(20px,6vw,90px)}
.gallery figure.h.rl{transform:rotate(-1.2deg)}
.gallery figure.h.rr{transform:rotate(1.4deg)}
.gallery figure.n{width:88%}
.gallery figure.rt{justify-self:end}
.gallery figure.solo{width:56%}
.gallery img{width:100%;height:auto;box-shadow:0 20px 40px -26px rgba(0,0,0,.6)}
.gallery .phf{aspect-ratio:16/10;display:grid;place-items:center;border:2px dashed currentColor;background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(0,0,0,.06) 14px 28px);font-family:var(--script);font-size:clamp(40px,5vw,72px)}
.case-next{border-top:2px solid currentColor;padding-block:clamp(30px,5vw,60px)}
.case-next button{all:unset;cursor:pointer;display:block;width:100%}
.case-next strong{display:block;font-family:var(--display);font-weight:100;text-transform:uppercase;font-size:clamp(52px,10vw,160px);line-height:.95;transition:transform .45s var(--ease)}
.case-next button:hover strong,.case-next button:focus-visible strong{transform:translateX(18px)}
@media (max-width:820px){.case-head{grid-template-columns:1fr}.gallery figure.n,.gallery figure.solo{width:100%}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}.gallery figure,.gallery figure.h{grid-column:span 1}.gallery figure.h.lo{margin-top:0}}
body.lock{overflow:hidden}

/* ---------- contact bubble ---------- */
.hey{--hb:var(--ink);--hf:var(--bg);position:fixed;right:calc(var(--gut) + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:96}
.bubble{all:unset;cursor:pointer;position:relative;display:block;background:var(--hb);color:var(--hf);padding:14px 22px 16px;border-radius:30px 30px 6px 30px;transform:rotate(-5deg);box-shadow:0 16px 30px -12px rgba(0,0,0,.5);transition:transform .45s var(--ease),opacity .35s,scale .35s var(--ease);animation:nudge 6s 3s ease-in-out infinite}
.bubble::after{content:"";position:absolute;right:-1px;bottom:-14px;width:24px;height:18px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%)}
.bubble .t{display:block;font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(22px,2vw,28px);line-height:.9;text-transform:uppercase;letter-spacing:-.005em}
.bubble .s{display:block;font-family:var(--script);font-size:clamp(26px,2.2vw,32px);line-height:.55;margin-top:10px;text-align:right}
.bubble .dot{position:absolute;left:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--yellow);border:2px solid var(--hb)}
.bubble .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--yellow);animation:ping 2.2s ease-out infinite}
.bubble:hover,.bubble:focus-visible,.bubble[aria-expanded="true"]{transform:rotate(0deg) scale(1.05);animation:none}
.bubble:focus-visible{outline:2px solid var(--hb);outline-offset:6px}
.hey.away .bubble{opacity:0;scale:.5;pointer-events:none}
@keyframes nudge{0%,86%,100%{rotate:0deg}90%{rotate:-7deg}94%{rotate:5deg}}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.pop{position:absolute;right:0;bottom:calc(100% + 26px);width:min(370px,calc(100vw - 32px));max-height:calc(100vh - 150px);overflow:auto;background:var(--paper);color:var(--ink);padding:26px 24px 22px;border:2px solid var(--ink);transform:rotate(-1.2deg);transform-origin:bottom right;box-shadow:7px 7px 0 var(--ink);animation:popin .45s var(--ease)}
@keyframes popin{from{opacity:0;transform:translateY(16px) rotate(2deg) scale(.94)}}
.pop-x{all:unset;cursor:pointer;position:absolute;right:12px;top:10px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:16px}
.pop-x:hover,.pop-x:focus-visible{background:var(--ink);color:var(--paper)}
.pop-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.pop-head img{width:58px;height:58px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex:none}
.pop-head strong{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:28px;line-height:1}
.pop-head strong b{font-family:var(--sans);font-style:normal;font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:.84em}
.pop-head span{display:block;font-size:13.5px;opacity:.75;margin-top:4px}
.pop-lead{font-family:var(--serif);font-size:27px;line-height:1.05;margin:0 0 16px}
.pop-row{display:flex;flex-direction:column;gap:6px;padding-block:12px;border-top:1.5px dashed currentColor}
.pop-row .lbl{font-size:11px;opacity:.7}
.pop-row .v{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pop-row b{font-weight:600;font-size:16.5px;word-break:break-all}
.pop .chip{padding:5px 11px;font-size:11px;flex:none;text-decoration:none}
.pop .chip:hover,.pop .chip:focus-visible{background:var(--ink);color:var(--paper)}
.pop-go{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:12px 16px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:750;text-transform:uppercase;font-size:13.5px;letter-spacing:.04em;border-radius:99px}
.pop-go:hover{background:var(--blue)}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;z-index:99;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--sans);font-weight:750;font-size:12px;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;transform:translate3d(-200px,-200px,0);opacity:0;transition:opacity .12s linear}
.cur.on{opacity:1}
@media (hover:none),(pointer:coarse){.cur{display:none}}
@media (hover:hover) and (pointer:fine){.it:not(.st){cursor:none}}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;opacity:0;transition:opacity .3s,transform .3s;z-index:100;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}