[hidden]{display:none!important}
/* Layout: one Bali day from sunrise surf to the last padel set — a live sky that follows Bali time, then bands that move from ocean to court to sketchbook */
:root{
  --cloud:#F6F0E7;     /* paper, Cloud-Dancer white */
  --sand:#EAD5BA;      /* wet sand */
  --cacao:#3A1913;     /* ZÓREA brown */
  --cacao-2:#5B2C21;
  --petrol:#0F3E44;    /* deep Indian Ocean */
  --glass:#A9D2CB;     /* sea glass */
  --ember:#D2643A;     /* sunset */
  --butter:#F0D68E;
  --optic:#DCEB5C;     /* padel ball */
  --wine:#8E1C2E;      /* court line: crimson burgundy */
  --wine-d:#4A0F1C;
  --blush:#F2C9B8;
  --ink:#2A130F;
  --mute:#7D5D4E;
  --line:rgba(58,25,19,.22);
  --htxt:#F6F0E7;      /* hero text, set live from the sky */
  --f-mark:"Italiana","Cormorant Garamond",Georgia,serif;
  --f-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-hand:"Reenie Beanie","Bradley Hand",cursive;
  --f-stamp:"VT323","Courier New",monospace;
  --f-ui:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cloud);color:var(--ink);font-family:var(--f-ui);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--ember);outline-offset:4px}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.eyebrow{font-family:var(--f-ui);font-weight:500;text-transform:uppercase;letter-spacing:.28em;font-size:.7rem}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;transform:translateZ(0);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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:40;padding-top:env(safe-area-inset-top,0px);color:var(--htxt);transition:background .5s,color .5s,box-shadow .5s}
.hdr.solid{background:#F4EDE3;color:var(--cacao);box-shadow:0 1px 0 var(--line)}
.hdr .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:16px}
.hdr nav{display:flex;gap:26px;align-items:center}
.hdr nav a{text-decoration:none}
.hdr nav a:hover{opacity:.6}
.hdr .r{justify-content:flex-end}
.logo{font-family:var(--f-mark);font-size:1.5rem;letter-spacing:.38em;padding-left:.38em;text-decoration:none}
.clock{display:inline-flex;gap:8px;align-items:center;opacity:.85}
.clock i{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(210,100,58,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(210,100,58,0)}100%{box-shadow:0 0 0 0 rgba(210,100,58,0)}}
.lang{display:inline-flex;border:1px solid currentColor;border-radius:99px;overflow:hidden}
.lang button{background:none;border:0;padding:5px 10px;cursor:pointer;letter-spacing:.2em;font-size:.66rem;font-weight:600}
.lang button[aria-pressed="true"]{background:currentColor}
.lang button[aria-pressed="true"] span{color:var(--cloud);mix-blend-mode:normal}
.hdr:not(.solid) .lang button[aria-pressed="true"] span{color:var(--hbg,#3A1913)}
.pill{display:inline-flex;align-items:center;gap:.6em;padding:9px 18px;border-radius:99px;border:1px solid currentColor;text-decoration:none;transition:background .3s,color .3s}
.pill:hover{background:var(--cacao);color:var(--cloud);border-color:var(--cacao)}
@media (max-width:900px){.hdr .l,.hdr .clock,.hdr .r .hide-s{display:none}.hdr .bar{grid-template-columns:auto 1fr}.hdr .r{gap:12px}}

/* ---------- hero: live Bali sky ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;color:var(--htxt);background:#14223A}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-in{position:relative;height:100%;display:grid;grid-template-rows:1fr auto auto;justify-items:center;text-align:center;padding-top:calc(90px + env(safe-area-inset-top,0px));padding-bottom:22px;transition:color .8s}
.hero-copy{align-self:center;display:grid;justify-items:center;gap:14px;margin-top:-12vh}
.giant{font-family:var(--f-mark);font-weight:400;font-size:clamp(4.2rem,17vw,15rem);line-height:.86;letter-spacing:.06em;margin:.24em 0 0;padding-left:.06em;white-space:nowrap}
.giant span{display:inline-block;animation:rise 1.4s cubic-bezier(.2,.8,.2,1) both}
.giant span:nth-child(2){animation-delay:.08s}.giant span:nth-child(3){animation-delay:.16s}.giant span:nth-child(4){animation-delay:.24s}.giant span:nth-child(5){animation-delay:.32s}
@keyframes rise{from{transform:translateY(.25em);filter:blur(10px);opacity:.2}to{transform:none;filter:none;opacity:1}}
.tag{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.25rem,2.4vw,1.7rem);margin:0}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:.7em;padding:15px 26px;border-radius:99px;text-decoration:none;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;border:1px solid currentColor;transition:transform .3s,background .3s,color .3s;cursor:pointer;background:none}
.btn:hover{transform:translateY(-2px)}
.hero .btn:not(.fill){background:rgba(28,14,12,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn.fill{background:var(--htxt);color:var(--hbg,#3A1913);border-color:var(--htxt)}
.btn.dark{background:var(--cacao);color:var(--cloud);border-color:var(--cacao)}
.btn.dark:hover{background:var(--ember);border-color:var(--ember)}
.dial{width:min(580px,100%);display:grid;gap:8px;padding:12px 18px;color:#F6F0E7;text-shadow:0 1px 6px rgba(0,0,0,.3);background:rgba(28,14,12,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:18px;border:1px solid rgba(246,240,231,.18)}
.dial-read{display:flex;justify-content:space-between;gap:12px;font-size:.78rem;letter-spacing:.06em;flex-wrap:wrap}
.dial-read b{font-weight:600;font-variant-numeric:tabular-nums}
.dial input{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:grab}
.dial input:focus{outline:none}
.dial input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(246,240,231,.7),0 0 18px 4px rgba(255,190,110,.55)}
.dial input::-webkit-slider-runnable-track{height:1px;background:currentColor;opacity:.6}
.dial input::-moz-range-track{height:1px;background:currentColor;opacity:.6}
.dial input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#FFF4D6 30%,#F2B35E 70%);margin-top:-11px;box-shadow:0 0 18px 4px rgba(255,190,110,.55);border:0}
.dial input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#FFF4D6 30%,#F2B35E 70%);box-shadow:0 0 18px 4px rgba(255,190,110,.55);border:0}
.dial-foot{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-variant-numeric:tabular-nums}
.dial-foot button{background:none;border:1px solid currentColor;border-radius:99px;padding:3px 10px;cursor:pointer;font-size:.66rem;letter-spacing:.2em}
.dial-foot button[aria-pressed="true"]{opacity:.45}

/* ---------- manifesto ---------- */
.mani{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,6vw,96px);padding-block:clamp(80px,11vw,150px);align-items:end}
.mani h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.01em;margin:0;color:var(--cacao);text-wrap:balance}
.mani h2 em{color:var(--ember);font-style:italic}
.vals{display:grid;gap:0;border-top:1px solid var(--line)}
.val{display:grid;grid-template-columns:150px 1fr;gap:20px;padding-block:20px;border-bottom:1px solid var(--line)}
.val b{font-family:var(--f-mark);font-weight:400;font-size:1.35rem;color:var(--cacao);line-height:1.2}
.val p{margin:0;color:var(--mute)}
@media (max-width:860px){.mani{grid-template-columns:1fr}.val{grid-template-columns:1fr;gap:4px}}

/* ---------- two worlds ---------- */
.worlds{display:grid;grid-template-columns:1fr 1fr}
.world{position:relative;min-height:clamp(520px,64vw,760px);overflow:hidden;text-decoration:none;display:grid;align-content:space-between;padding:clamp(28px,4vw,56px);isolation:isolate;min-width:0}
.world h3{font-family:var(--f-mark);font-weight:400;font-size:clamp(4.4rem,11vw,9.5rem);line-height:.85;margin:0;letter-spacing:.02em}
.world p{margin:10px 0 0;max-width:30ch;font-size:1.02rem}
.world .go{display:inline-flex;gap:10px;align-items:center;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;margin-top:22px}
.world .go::after{content:"→";transition:transform .3s}
.world:hover .go::after{transform:translateX(6px)}
.w-swim{background:linear-gradient(170deg,#CFE6DF 0%,var(--glass) 55%,#7FB6B0 100%);color:var(--petrol)}
.w-court{background:linear-gradient(170deg,#F7E6DA 0%,#EECBB9 55%,#E4B7A2 100%);color:var(--wine-d)}
.w-art{position:absolute;inset:0;z-index:-1;display:grid;place-items:start end;padding:clamp(48px,7%,90px) clamp(20px,7%,80px) 0 0}
.w-swim svg.flat{width:min(46%,310px);transform:rotate(-6deg) translateY(4%);transition:transform 1s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 30px 40px rgba(15,62,68,.25))}
.w-swim:hover svg.flat{transform:rotate(-2deg) translateY(2%) scale(1.03)}
.waves{position:absolute;inset:auto 0 0 0;height:34%;opacity:.55}
.waves path{animation:wave 9s ease-in-out infinite alternate}
.waves path:nth-child(2){animation-duration:12s}
@keyframes wave{to{transform:translateX(-60px)}}
@media (max-width:760px){.worlds{grid-template-columns:1fr}}

/* ---------- sketchbook / configurator ---------- */
.sketch{background:var(--sand);padding-block:clamp(80px,10vw,140px)}
.sk-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.sk-head h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:.95;margin:10px 0 0;color:var(--cacao);text-wrap:balance}
.sk-head h2 em{color:var(--ember)}
.sk-head p{margin:0;max-width:40ch;color:var(--mute)}
.sk{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.paper{position:relative;background-color:#FBF7F0;background-image:radial-gradient(rgba(58,25,19,.16) 1px,transparent 1.2px);background-size:22px 22px;border-radius:4px;box-shadow:0 1px 0 rgba(58,25,19,.08),0 40px 60px -30px rgba(58,25,19,.35);aspect-ratio:4/5;display:grid;place-items:center;transform:rotate(-1.2deg);min-width:0}
.paper::before{content:"";position:absolute;top:-12px;left:50%;width:120px;height:26px;transform:translateX(-50%) rotate(2deg);background:rgba(240,214,142,.75)}
.paper .pg{position:absolute;right:18px;bottom:14px;font-family:var(--f-serif);font-style:italic;color:var(--mute)}
.paper .sig{position:absolute;left:20px;top:18px;font-family:var(--f-serif);font-style:italic;color:var(--mute);font-size:1.05rem}
#flat{width:86%;height:auto;overflow:visible}
.flat-svg{overflow:visible}
.flat-svg .fab{fill:var(--fab);transition:fill .6s}
.flat-svg .trim{fill:none;stroke:var(--trim);stroke-width:3.2;stroke-linejoin:round;transition:stroke .6s}
.flat-svg .ln{fill:none;stroke:var(--ink);stroke-width:.9;stroke-linejoin:round;stroke-linecap:round}
.flat-svg .tie{fill:none;stroke:var(--trim);stroke-width:2.2;stroke-linecap:round;transition:stroke .6s}
.flat-svg .note{font-family:var(--f-serif);font-style:italic;font-size:11px;fill:var(--mute)}
.flat-svg .lead{stroke:var(--mute);stroke-width:.6;stroke-dasharray:2 2;fill:none}
.flat-svg .draw{stroke-dasharray:1;stroke-dashoffset:0}
#flat.anim .draw{animation:draw 1.6s cubic-bezier(.4,0,.2,1) both}
#flat.anim .fab{animation:fillin 1.2s .7s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fillin{from{fill-opacity:0}to{fill-opacity:1}}
.cfg{display:grid;gap:26px;min-width:0}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs button{border:1px solid var(--cacao);background:none;border-radius:99px;padding:9px 16px;cursor:pointer;color:var(--cacao);font-size:.82rem}
.tabs button[aria-pressed="true"]{background:var(--cacao);color:var(--cloud)}
.cfg h3{font-family:var(--f-mark);font-weight:400;font-size:clamp(2rem,3.6vw,2.8rem);margin:0;color:var(--cacao);line-height:1}
.cfg .desc{margin:10px 0 0;color:var(--ink);max-width:46ch}
.lbl{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.78rem;color:var(--mute)}
.lbl b{color:var(--cacao);font-weight:500}
.sw{display:flex;gap:12px;flex-wrap:wrap}
.sw button{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(58,25,19,.18);position:relative;transition:transform .25s}
.sw button:hover{transform:scale(1.08)}
.sw button[aria-pressed="true"]::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--cacao)}
.sz{display:flex;gap:8px;flex-wrap:wrap}
.sz button{min-width:50px;padding:10px 0;border:1px solid var(--line);background:rgba(255,255,255,.35);border-radius:6px;cursor:pointer;color:var(--cacao);font-weight:500;font-variant-numeric:tabular-nums}
.sz button[aria-pressed="true"]{border-color:var(--cacao);background:var(--cacao);color:var(--cloud)}
.dm{background:var(--cloud);border-radius:18px 18px 18px 4px;padding:16px 18px;font-size:.95rem;color:var(--ink);position:relative;box-shadow:0 10px 30px -18px rgba(58,25,19,.4);user-select:text}
.dm small{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hint{font-size:.8rem;color:var(--mute)}
@media (max-width:860px){.sk{grid-template-columns:1fr}.paper{transform:none}}

/* ---------- court ---------- */
.court{background:radial-gradient(120% 90% at 85% 40%,#6A1426,var(--wine-d) 70%);color:var(--cloud);padding-block:clamp(80px,10vw,140px);overflow:hidden}
.ct{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,90px);align-items:center}
.ct h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(2.8rem,6vw,5rem);line-height:.95;margin:12px 0 22px;text-wrap:balance}
.ct h2 em{color:var(--blush)}
.ct p{margin:0 0 26px;max-width:42ch;opacity:.85}
.ct .eyebrow{color:var(--blush)}
@media (max-width:860px){.ct{grid-template-columns:1fr}}

/* ---------- find us ---------- */
.find{padding-block:clamp(80px,10vw,140px)}
.find h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:.95;margin:10px 0 48px;color:var(--cacao)}
.spots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.spot{border:1px solid var(--line);border-radius:22px;padding:28px;display:grid;gap:14px;align-content:start;background:#FBF7F0;transition:transform .4s,box-shadow .4s;min-width:0}
.spot:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(58,25,19,.35)}
.spot h3{font-family:var(--f-serif);font-weight:500;font-size:1.8rem;line-height:1.05;margin:0;color:var(--cacao)}
.spot p{margin:0;color:var(--mute)}
.spot a{color:var(--cacao);font-weight:500;overflow-wrap:anywhere}
.sunset{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--cacao);font-variant-numeric:tabular-nums}
.sunset::before{content:"";width:22px;height:11px;border-radius:22px 22px 0 0;background:linear-gradient(var(--butter),var(--ember));box-shadow:0 1px 0 var(--cacao)}
.spot.dark{background:var(--ember);border-color:var(--ember);color:var(--cloud)}
.spot.dark h3,.spot.dark a,.spot.dark p{color:var(--cloud)}
@media (max-width:900px){.spots{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--cacao);color:var(--sand);overflow:hidden}
.ft{display:grid;justify-items:center;text-align:center;gap:26px;padding-block:90px 40px}
.mono{width:120px;height:120px;border-radius:50%;background:var(--sand);color:#9A6A3F;display:grid;place-items:center;position:relative}
.mono span{font-family:var(--f-mark);font-size:68px;line-height:1;position:absolute;top:18px}
.mono span:first-child{left:26px}
.mono span:nth-child(2){left:44px;top:30px}
.mono small{position:absolute;bottom:18px;font-size:.5rem;letter-spacing:.4em;padding-left:.4em}
.ft .big{font-family:var(--f-mark);font-size:clamp(3.6rem,15vw,12rem);line-height:.8;letter-spacing:.08em;color:var(--sand);opacity:.95;margin-top:10px;white-space:nowrap}
.ft small{opacity:.6;letter-spacing:.06em}
.ft nav{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.ft nav a{text-decoration:none;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem}


/* ---------- analog: light leaks, date stamp, film, pencil ---------- */
.leak{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(60% 50% at 0% 20%,rgba(255,120,40,.35),transparent 60%),radial-gradient(40% 60% at 100% 90%,rgba(255,60,60,.18),transparent 70%);animation:leak 9s ease-in-out infinite alternate}
@keyframes leak{to{opacity:.45}}
.vign{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(10,5,3,.45))}
.stamp{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:118px;font-family:var(--f-stamp);font-size:1.6rem;color:#FF8A2B;text-shadow:0 0 6px rgba(255,120,30,.8),0 0 1px #FFB070;letter-spacing:.08em;opacity:.9;pointer-events:none}
@media (max-width:640px){.stamp{bottom:auto;top:calc(76px + env(safe-area-inset-top,0px));font-size:1.3rem}}
.hand{font-family:var(--f-hand);font-weight:400;letter-spacing:0;text-transform:none}
.scrib{position:relative;display:inline-block;white-space:nowrap}
.scrib svg{position:absolute;left:-10%;top:-18%;width:120%;height:140%;overflow:visible;pointer-events:none}
.scrib svg path{fill:none;stroke:var(--ember);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .scrib svg path{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s .3s cubic-bezier(.6,0,.2,1)}
.js .in .scrib svg path{stroke-dashoffset:0}
.margin-note{font-family:var(--f-hand);font-size:1.6rem;color:var(--ember);transform:rotate(-4deg);display:inline-block;line-height:1}

.roll{background:#1B1310;color:#E9D3B6;padding-block:56px 64px;overflow:hidden}
.roll-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.roll-head h2{font-family:var(--f-serif);font-weight:400;font-style:italic;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0}
.roll-head .hand{font-size:1.5rem;color:#FF8A2B}
.strip-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.strip-scroll::-webkit-scrollbar{display:none}
.strip{display:inline-flex;gap:0;background:#0E0907;padding:30px 14px;position:relative;transform:rotate(-1.2deg);margin-block:14px;box-shadow:0 30px 40px -20px rgba(0,0,0,.6)}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 9px,#E9D3B6 9px 19px,transparent 19px 28px);opacity:.85;-webkit-mask:linear-gradient(#000,#000);border-radius:2px}
.strip::before{top:9px}.strip::after{bottom:9px}
.fr{position:relative;width:clamp(200px,26vw,300px);aspect-ratio:3/2;margin-inline:8px;overflow:hidden;flex:none;border-radius:2px}
.fr .sc{position:absolute;inset:0}
.fr::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.45)),linear-gradient(rgba(255,170,90,.12),rgba(120,40,20,.12));mix-blend-mode:multiply;pointer-events:none}
.fr .grn{position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fr figcaption{position:absolute;left:10px;bottom:6px;font-family:var(--f-stamp);font-size:1.05rem;color:#FF9A3C;text-shadow:0 0 4px rgba(255,120,30,.7);z-index:2}
.fr .no{position:absolute;top:-22px;left:4px;font-family:var(--f-stamp);font-size:.95rem;color:#E9A25A;opacity:.85;white-space:nowrap}
.fr{overflow:visible}.fr .sc,.fr::after,.fr .grn{border-radius:2px;overflow:hidden}
.roll .foot{margin-top:18px;font-size:.8rem;opacity:.6}

.flat-svg .note{font-family:var(--f-hand);font-style:normal;font-size:15px;fill:#8A5A44}
.flat-svg .pencil{filter:url(#rough)}
.paper .sig{font-family:var(--f-hand);font-style:normal;font-size:1.7rem;color:var(--ember)}
.paper .pg{font-family:var(--f-hand);font-style:normal;font-size:1.3rem}
.paper .smudge{position:absolute;inset:0;pointer-events:none;background:radial-gradient(30% 20% at 80% 85%,rgba(58,25,19,.06),transparent),radial-gradient(25% 15% at 15% 10%,rgba(58,25,19,.05),transparent)}

/* gentle lift — content is visible at rest */
.js .rv{transform:translateY(16px);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- content from the admin panel ---------- */
.cfg .price{margin:8px 0 0;font-family:var(--f-stamp);font-size:1.5rem;color:var(--ember);letter-spacing:.04em}
.cfg .price .so{font-family:var(--f-ui);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cacao);border:1px solid var(--cacao);border-radius:99px;padding:3px 10px;margin-left:10px;vertical-align:4px}
#pphoto{position:absolute;inset:7% 8% 12%;width:84%;height:81%;object-fit:cover;background:#fff;padding:10px 10px 38px;box-shadow:0 20px 40px -20px rgba(58,25,19,.5);transform:rotate(1.5deg);filter:sepia(.18) contrast(1.05) saturate(1.05)}
.view{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;border:1px solid var(--cacao);border-radius:99px;overflow:hidden;background:#FBF7F0;z-index:2}
.view button{border:0;background:none;padding:5px 14px;cursor:pointer;font-family:var(--f-hand);font-size:1.25rem;color:var(--cacao)}
.view button[aria-pressed="true"]{background:var(--cacao);color:var(--cloud)}
.fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.22) contrast(1.08) saturate(1.1)}
a.fr{display:block;text-decoration:none;color:inherit}

/* ---------- studio wall ---------- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:54px clamp(24px,3.4vw,44px);align-items:start;padding-top:16px}
.pin{display:block;width:100%;margin:0;min-width:0;position:relative;transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;font:inherit;color:inherit;text-align:left}
.tape{position:absolute;top:-13px;left:50%;width:100px;height:26px;transform:translateX(-50%) rotate(var(--tr,-3deg));background:rgba(240,214,142,.78);box-shadow:0 1px 2px rgba(58,25,19,.1);z-index:2;-webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent calc(100% - 2px))}
.tape.blue{background:rgba(169,210,203,.8)}
.tape.pink{background:rgba(232,150,160,.7)}
.pola{background:#FFFDF9;padding:14px 14px 16px;border:0;cursor:pointer;box-shadow:0 22px 34px -22px rgba(58,25,19,.55),0 1px 0 rgba(58,25,19,.06)}
.pola:hover,.pola:focus-visible{transform:rotate(0deg) translateY(-6px) scale(1.02);box-shadow:0 34px 44px -24px rgba(58,25,19,.55)}
.pola .pic{display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;background-color:#F6EFE4;background-image:radial-gradient(rgba(58,25,19,.13) 1px,transparent 1.2px);background-size:18px 18px}
.pola .pic img{width:100%;height:100%;object-fit:cover;filter:sepia(.16) contrast(1.05)}
.pola .pic svg{width:78%;height:auto}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px;font-family:var(--f-hand);font-size:1.75rem;line-height:1;color:var(--cacao)}
.cap b{font-family:var(--f-serif);font-weight:500;font-size:1.15rem;color:var(--ember);white-space:nowrap}
.cap small{display:block;font-family:var(--f-ui);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.sold{position:absolute;top:26%;left:50%;transform:translateX(-50%) rotate(-14deg);border:2px solid var(--ember);color:var(--ember);font-family:var(--f-stamp);font-size:1.8rem;letter-spacing:.12em;padding:2px 14px;text-transform:uppercase;background:rgba(255,253,249,.6);mix-blend-mode:multiply}
.sheet{margin-top:6px;background-color:#FBF7F0;background-image:radial-gradient(rgba(58,25,19,.15) 1px,transparent 1.2px);background-size:20px 20px;padding:26px 18px 18px;box-shadow:0 18px 30px -22px rgba(58,25,19,.45)}
.sheet svg,.sheet img{width:100%;height:auto;display:block}
.sheet img{mix-blend-mode:multiply}
.sheet figcaption{font-family:var(--f-hand);font-size:1.7rem;line-height:1.05;color:var(--cacao);margin-top:8px;display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.soon{font-family:var(--f-stamp);font-size:1.05rem;color:var(--cloud);background:var(--ember);padding:1px 8px;transform:rotate(2deg);display:inline-block}
.lined{background:#FFFDF8;background-image:linear-gradient(90deg,transparent 34px,rgba(210,100,58,.45) 34px 35px,transparent 35px),repeating-linear-gradient(transparent 0 29px,rgba(70,120,160,.22) 29px 30px);padding:30px 22px 22px 50px;box-shadow:0 18px 30px -22px rgba(58,25,19,.45)}
.lined h3{font-family:var(--f-hand);font-weight:400;font-size:2.2rem;line-height:1;margin:0 0 6px;color:var(--cacao)}
.lined p{margin:0 0 12px;font-size:.84rem;color:var(--mute);line-height:30px}
.meas{display:grid;gap:8px}
.meas label{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:10px;font-family:var(--f-hand);font-size:1.5rem;color:var(--cacao)}
.meas input{width:100%;min-width:0;border:0;border-bottom:1.5px solid var(--cacao);background:transparent;font-family:var(--f-stamp);font-size:1.4rem;color:var(--ember);padding:2px 4px}
.meas input:focus{outline:none;border-bottom-color:var(--ember)}
.meas span{font-size:.8rem;font-family:var(--f-ui);color:var(--mute)}
.sres{margin-top:16px;min-height:62px}
.sres .big{font-family:var(--f-mark);font-size:3rem;line-height:1;color:var(--cacao);display:inline-block;border:2px solid var(--ember);border-radius:50%;padding:6px 14px 2px;transform:rotate(-6deg)}
.sres p{margin:8px 0 0;font-size:.82rem;line-height:1.5;color:var(--ink)}
.chart{width:100%;border-collapse:collapse;margin-top:12px;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--mute)}
.chart th,.chart td{padding:3px 4px;text-align:left;border-bottom:1px dashed var(--line)}
.chart th{font-weight:500;color:var(--cacao)}
.sticky{background:linear-gradient(180deg,#F6DF8E,#F0D27A);padding:30px 24px 28px;box-shadow:0 22px 30px -20px rgba(58,25,19,.5);font-family:var(--f-hand);font-size:1.9rem;line-height:1.15;color:#3A1913}
.sticky .from{display:block;text-align:right;margin-top:12px}
.sticky .heart{color:var(--ember)}
.pin.rv{transition:transform .9s cubic-bezier(.2,.8,.2,1)}

/* ---------- product dialog ---------- */
.pd{border:0;padding:clamp(20px,3vw,40px);width:min(1080px,calc(100% - 24px));max-height:calc(100% - 24px);background:var(--sand);color:var(--ink);border-radius:6px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.pd::backdrop{background:rgba(27,19,16,.55);backdrop-filter:blur(4px)}
.pd .paper{transform:rotate(-1deg)}
.pd-x{position:absolute;top:10px;right:14px;width:42px;height:42px;border-radius:50%;border:1px solid var(--cacao);background:var(--cloud);font-size:1.5rem;line-height:1;cursor:pointer;color:var(--cacao);z-index:3}
@media (max-width:860px){.pd .paper{aspect-ratio:1/1}.pd .sk{gap:22px}}
.kraft{background:#C9A57E;background-image:radial-gradient(rgba(58,25,19,.12) 1px,transparent 1.4px);background-size:7px 7px;padding:30px 24px 24px;text-decoration:none;font-family:var(--f-hand);font-size:1.75rem;line-height:1.1;color:var(--cacao);box-shadow:0 18px 30px -22px rgba(58,25,19,.5);display:grid;gap:14px}
.kraft b{font-family:var(--f-mark);font-weight:400;font-size:1.25rem;letter-spacing:.08em;color:var(--cloud);background:var(--cacao);justify-self:start;padding:2px 10px}
.kraft:hover{transform:rotate(0deg) translateY(-4px)}

/* ---------- pencil sketches ---------- */
.flat-svg .guide{fill:none;stroke:#3A302B;stroke-width:.5;stroke-dasharray:3 6;opacity:.22}
.flat-svg .wash{filter:url(#wc)}
.flat-svg .fab{fill:var(--fab);opacity:1}
.flat-svg .hatch{opacity:.3}
.flat-svg .hatch path{fill:url(#hatch)}
.flat-svg .trim{fill:none;stroke:var(--trim);stroke-width:2.2;stroke-linejoin:round;opacity:.95}
.flat-svg .tie{fill:none;stroke:var(--trim);stroke-width:1.6;stroke-linecap:round;filter:url(#rough)}
.flat-svg .gr{fill:none;stroke:#3A302B;stroke-width:.95;stroke-linecap:round;stroke-linejoin:round;filter:url(#rough)}
.flat-svg .gr.ghost{opacity:.32;stroke-width:.7;filter:url(#rough2);transform:translate(1px,.8px)}
.flat-svg .draw{stroke-dasharray:1;stroke-dashoffset:0}

/* ---------- court line ---------- */
.w-court svg.flat{width:min(46%,310px);transform:rotate(5deg) translateY(4%);transition:transform 1s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 30px 40px rgba(74,15,28,.28))}
.w-court .eyebrow{color:var(--wine)}
.sunball{position:absolute;width:min(70%,460px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,240,220,.85) 0 38%,rgba(255,226,200,.35) 60%,transparent 70%);top:8%;right:-6%}
.w-court:hover svg.flat{transform:rotate(1deg) translateY(2%) scale(1.03)}
.ct-sheet{max-width:420px;justify-self:center}
.court .btn{color:var(--cloud)}
.court .btn:hover{background:var(--cloud);color:var(--wine-d)}

.w-court .sunball{top:2%;right:-12%}

/* ---------- section anchors ---------- */
/* the magnet itself lives in js/site.js; this keeps #links clear of the fixed header */
html{scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}

/* ---------- one section = one screen under the header ---------- */
:root{--hh:68px}
.mani,.roll,.court,.find{min-height:calc(100svh - var(--hh));box-sizing:border-box}
.mani{align-content:center;align-items:center}
.roll{display:grid;align-content:center}
.court{display:grid;align-content:center}
.find{display:grid;align-content:center}
.worlds{min-height:calc(100svh - var(--hh))}
.world{min-height:calc(100svh - var(--hh))!important}
.w-swim svg.flat,.w-court svg.flat{max-height:52vh;width:auto;height:52vh}
@media (max-width:760px){
  .w-swim svg.flat,.w-court svg.flat{height:40vh}
}
@media (max-height:700px){
  .w-swim svg.flat,.w-court svg.flat{height:44vh}
  .world h3{font-size:clamp(3.6rem,9vw,7rem)}
}
.sketch{scroll-margin-top:var(--hh)}
.court{padding-block:clamp(28px,5vh,72px)}
.ct-sheet{width:min(420px,calc((100svh - var(--hh) - 170px)*.7));max-width:100%}
@media (max-width:860px){.ct-sheet{width:min(360px,100%)}}

/* the big wordmark is on the hero, so the small one waits until the page scrolls on */
.hdr .logo{transition:opacity .5s ease,transform .5s ease}
.hdr:not(.solid) .logo{opacity:0;transform:translateY(-6px);pointer-events:none}

/* ---------- studio wall as one horizontal board, one screen high ---------- */
.sketch{min-height:calc(100svh - var(--hh));box-sizing:border-box;display:grid;align-content:center;padding-block:clamp(24px,4vh,64px);overflow:hidden;
  --ch:clamp(300px,calc(100svh - var(--hh) - 300px),560px)}
.sk-head{margin-bottom:clamp(8px,2vh,24px)}
.sk-head h2{font-size:clamp(2.2rem,4.6vw,4rem)}
.sk-side{display:grid;gap:8px;max-width:40ch}
.sk-side p{margin:0;color:var(--mute)}
.wall-hint{font-size:1.5rem;color:var(--ember)}
.wall{display:flex!important;grid-template-columns:none!important;gap:clamp(24px,3vw,44px)!important;align-items:flex-start!important;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;
  margin-inline:calc(50% - 50vw);padding:34px max(20px,calc(50vw - 600px)) 34px;scroll-snap-type:x proximity}
.wall::-webkit-scrollbar{display:none}
.wall.dragging{cursor:grabbing}
.wall.dragging *{pointer-events:none}
.wall>.pin{flex:0 0 auto;scroll-snap-align:center}
.wall>.pola,.wall>.sheet{width:calc((var(--ch) - 100px)*.8)}
.wall>.sheet{width:calc((var(--ch) - 80px)*.75)}
.wall>.lined{width:300px;max-height:var(--ch);overflow:auto}
.wall>.sticky,.wall>.kraft{width:260px}
.chart-wrap{margin-top:8px}
.chart-wrap summary{cursor:pointer;font-family:var(--f-hand);font-size:1.4rem;color:var(--cacao);list-style:none}
.chart-wrap summary::after{content:" ▾"}
.chart-wrap[open] summary::after{content:" ▴"}
.chart-wrap summary::-webkit-details-marker{display:none}
.lined .sres{min-height:48px}

/* ---------- last screen: where to find + compact footer together ---------- */
.find{min-height:0!important;padding-block:clamp(40px,7vh,90px) clamp(28px,5vh,60px)!important}
.find h2{margin-bottom:clamp(20px,4vh,48px)}
.ft{padding-block:clamp(32px,6vh,64px) 28px;gap:18px}
.ft .mono{width:84px;height:84px}
.ft .mono span{font-size:48px;top:12px}
.ft .mono span:first-child{left:17px}
.ft .mono span:nth-child(2){left:30px;top:21px}
.ft .mono small{bottom:12px;font-size:.42rem}
.ft .big{font-size:clamp(2.6rem,8vw,6rem);opacity:.5}
.sketch{grid-template-columns:minmax(0,1fr)}
.sketch>.wrap{min-width:0;width:100%;box-sizing:border-box}
.ft .big{display:none}
@media (max-width:760px){
  .sketch{--ch:clamp(250px,calc(100svh - var(--hh) - 370px),460px)}
  .sk-side p{font-size:.9rem}
  .wall{padding-block:26px 24px}
}

.sk-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.ig-link{font-size:.9rem;color:var(--cacao);text-decoration:none;border-bottom:1px solid rgba(58,25,19,.35);padding-bottom:2px}
.ig-link b{font-family:var(--f-mark);font-weight:400;letter-spacing:.06em;color:var(--ember)}
.ig-link:hover{border-bottom-color:var(--ember)}
.strip-scroll{overflow-y:hidden;overscroll-behavior-x:contain}
.wall{overscroll-behavior-x:contain}

/* ---------- where to find: its own screen again; footer: the closing screen ---------- */
.find{min-height:calc(100svh - var(--hh))!important;padding-block:clamp(40px,7vh,90px)!important}
footer{min-height:calc(100svh - var(--hh));display:grid;align-content:center;
  background:radial-gradient(90% 70% at 50% 40%,#4E231B 0%,var(--cacao) 70%)}
.ft{padding-block:clamp(40px,8vh,90px);gap:clamp(16px,3vh,28px)}
.ft .mono{width:clamp(110px,16vh,160px);height:clamp(110px,16vh,160px)}
.ft .mono span{font-size:clamp(64px,9.5vh,92px);top:14%}
.ft .mono span:first-child{left:22%}
.ft .mono span:nth-child(2){left:36%;top:24%}
.ft .mono small{bottom:13%;font-size:.5rem}
.ft-line{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.9rem);margin:0;color:var(--sand)}
.ft-ig{font-family:var(--f-mark);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.12em;color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(234,213,186,.4);padding-bottom:4px}
.ft-ig:hover{border-bottom-color:var(--sand)}

/* sketches carry pencil and watercolour filters: keep them as ready-made layers while scrolling */
.flat-svg,.wall>.pin,.ct-sheet{will-change:transform;backface-visibility:hidden}

/* closing screen: the big wordmark returns along the bottom */
footer{align-content:stretch}
.ft{min-height:calc(100svh - var(--hh));box-sizing:border-box;grid-template-rows:1fr auto auto auto auto auto auto;align-content:end;padding-block:clamp(28px,5vh,60px) 0}
.ft .mono{width:clamp(90px,13vh,150px);height:clamp(90px,13vh,150px)}
.ft .mono span{font-size:clamp(52px,7.8vh,86px)}
.ft .big{display:block;font-family:var(--f-mark);font-size:min(17vw,25vh);line-height:.78;letter-spacing:.08em;padding-left:.08em;color:var(--sand);opacity:.95;margin-top:clamp(10px,3vh,40px);white-space:nowrap;transform:translateY(.08em)}
.ft{display:flex!important;flex-direction:column;align-items:center}
.ft .mono{margin-top:auto}
.ft .big{margin-top:auto}
.ft small{margin-bottom:clamp(8px,2vh,24px)}
.ft .big{transform:none;line-height:.92;margin-bottom:clamp(4px,1.5vh,16px)}
.ft .mono span{font-size:clamp(44px,6.6vh,76px);top:10%}
.ft .mono span:first-child{left:24%}
.ft .mono span:nth-child(2){left:38%;top:19%}
.ft .mono small{bottom:11%}