/* Patang Co · concept store by Brand Evolution */
:root{
  --paper:#FFF8EC;
  --paper-2:#FBEBD0;
  --sky:#BEE6F7;
  --navy:#14213D;
  --navy-2:#24345E;
  --red:#E8304A;
  --red-dk:#C21F38;
  --saffron:#FFB400;
  --teal:#1A9E8F;
  --ink:#14213D;
  --muted:#4F5874;
  --line:rgba(20,33,61,.14);
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --body:"Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --cs-bg:var(--paper);--cs-fg:var(--ink);--cs-muted:var(--muted);--cs-line:var(--line);
  --cs-accent:var(--red);--cs-accent-fg:#FFF8EC;--cs-card:#E3F2F8;--cs-display:var(--display);--cs-radius:14px;
  --cs-heart-bg:rgba(255,248,236,.9);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden}
svg{display:block}
a{color:inherit}
p,h1,h2,h3{margin:0}
em{font-style:normal;color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 14px}
.skip:focus{left:8px}
button,input,select{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;font-weight:700;font-size:15.5px;text-decoration:none;border:0;border-radius:12px;cursor:pointer;transition:transform .35s var(--ease),background .3s,box-shadow .3s,color .3s}
.btn-solid{background:var(--red);color:#FFF8EC;box-shadow:0 4px 0 var(--red-dk)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--red-dk)}
.btn-solid:active{transform:translateY(2px);box-shadow:0 1px 0 var(--red-dk)}
.btn-line{background:rgba(255,248,236,.6);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}

/* NAV: glass tinted to what is beneath */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--gutter);color:var(--ink);transition:background .35s,box-shadow .35s,padding .35s,color .35s}
.nav.solid{background:rgba(232,246,252,.8);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 rgba(20,33,61,.1);padding-top:10px;padding-bottom:10px}
.nav.solid.on-paper{background:rgba(255,248,236,.84)}
.nav.solid.on-dark{background:rgba(20,33,61,.82);color:var(--paper);box-shadow:0 1px 0 rgba(255,248,236,.14)}
.nav.on-dark .icon-btn:hover{background:rgba(255,248,236,.14)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.02em}
.brand b{color:var(--red);margin-left:2px}
.brand svg{width:30px;height:30px;color:var(--red)}
.nav nav{display:flex;gap:26px;font-size:15px;font-weight:600}
.nav nav a{text-decoration:none;opacity:.85}
.nav nav a:hover{opacity:1}
.nav-icons{display:flex;gap:6px}
.icon-btn{position:relative;width:44px;height:44px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.icon-btn:hover{background:var(--line)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.count{position:absolute;right:2px;top:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1}
.count.zero{display:none}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:104px var(--gutter) 150px;overflow:hidden;background:linear-gradient(180deg,#9ED8F5 0%,#D9F0FA 55%,#FFF1D6 100%)}
.sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(16px,3vw,48px);max-width:1360px;margin:0 auto;min-height:calc(100vh - 254px);align-items:stretch}
.hero-copy{align-self:center}
.issue{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-2);margin-bottom:18px}
.issue span{color:var(--red);margin-right:8px}
.hero h1{animation:rise .8s var(--ease) both}
.h1-big{display:block;font-family:var(--display);font-weight:900;font-size:clamp(44px,6vw,90px);line-height:.88;letter-spacing:-.045em}
.h1-big i{font-style:normal;color:var(--red)}
.h1-line{display:block;font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,30px);line-height:1.2;letter-spacing:-.01em;margin-top:16px}
.lede{font-size:clamp(17px,1.35vw,19px);color:#2F3A58;max-width:46ch;margin-top:18px;animation:rise .8s var(--ease) .1s both}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .hero-actions{animation:rise .8s var(--ease) .2s both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-size:14px;animation:rise .8s var(--ease) .3s both}
.wind,.mini-cd{display:flex;align-items:center;gap:8px;background:rgba(255,248,236,.72);padding:8px 14px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wind b,.mini-cd b{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}
.wind-hint{color:var(--muted);font-size:12.5px}
.wind-ic{width:18px;height:10px;border-top:2px solid var(--teal);border-bottom:2px solid var(--teal);border-radius:0 8px 8px 0}
.sky-slot{position:relative;min-height:340px}
.sky-fallback{position:absolute;inset:0;width:100%;height:100%}
.sky-live .sky-fallback{display:none}

/* section heads */
section{scroll-margin-top:70px}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,40px);align-items:start;max-width:1320px;margin:0 auto 38px}
.num{font-family:var(--display);font-weight:900;font-size:clamp(36px,4.6vw,64px);line-height:.9;color:var(--red)}
.num.light{color:var(--saffron)}
h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.6vw,62px);line-height:1.02;letter-spacing:-.035em}
.sec-sub{color:var(--muted);max-width:60ch;margin-top:12px}
.sec-sub.light{color:#C9D2EA}
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].in,.rv-all [data-reveal]{opacity:1;transform:none}

/* SHOP */
.shop{padding:100px var(--gutter);max-width:1420px;margin:0 auto}
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center;max-width:1320px;margin:0 auto 10px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.sort{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.sort select{padding:9px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper)}
.count-note{max-width:1320px;margin:0 auto 18px;font-size:13px;color:var(--muted);font-weight:600}
.shop .cs-grid{max-width:1320px;margin:0 auto}
.cs-art .kt{will-change:transform}
.fk-wind{animation:wind 1s linear infinite;animation-play-state:paused}
.cs-card:hover .fk-wind,.cs-qv-art .fk-wind{animation-play-state:running}
@keyframes wind{from{transform:translateY(0)}to{transform:translateY(12px)}}
.combo-strip{max-width:1320px;margin:40px auto 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:var(--paper-2);border-radius:18px;padding:20px 24px}
.combo-strip p{max-width:60ch}

/* COUNTDOWN */
.countdown{position:relative;overflow:hidden;color:var(--paper);background:linear-gradient(180deg,#1B2450 0%,#4B3470 55%,#E5825B 100%);padding:110px var(--gutter) 150px}
.cd-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);max-width:1320px;margin:0 auto;align-items:stretch}
.cd-copy h2{margin-top:10px}
.cd-copy h2 em{color:#FFC94D}
.cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:30px;max-width:520px}
.cd>div{background:rgba(20,33,61,.62);border-radius:16px;padding:14px 8px 10px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,248,236,.14);overflow:hidden}
.cd-n{display:block;font-family:var(--display);font-weight:900;font-size:clamp(30px,4.4vw,56px);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cd-n.tick{animation:tick .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes tick{from{transform:translateY(-55%);opacity:0}to{transform:none;opacity:1}}
.cd-l{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#C9D2EA}
.cutoffs{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:8px;max-width:520px}
.cutoffs li{background:rgba(20,33,61,.55);border-radius:12px;padding:10px 14px;font-size:15px}
.cutoffs b{color:#FFC94D;margin-right:8px;font-family:var(--display);font-weight:700;font-size:14px}
.countdown :focus-visible,.foot :focus-visible{outline-color:#FFC94D}

/* CRAFT */
.craft{padding:100px var(--gutter);background:var(--paper)}
.craft-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);max-width:1320px;margin:0 auto;align-items:start}
.reel{position:sticky;top:90px;background:linear-gradient(180deg,#D9F0FA,#FFF1D6);border-radius:24px;overflow:hidden}
.reel svg{width:100%;height:auto}
.reel-t{font-family:var(--display);font-weight:700;font-size:20px;fill:var(--navy)}
.craft-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.craft-steps li{background:#fff;border-radius:18px;padding:22px 24px;box-shadow:0 1px 0 var(--line),0 12px 30px rgba(20,33,61,.06)}
.step-no{display:block;font-family:var(--display);font-weight:900;color:var(--red);font-size:14px}
.craft-steps h3{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;margin:4px 0 6px}
.craft-steps p{color:var(--muted)}

/* RULES */
.rules{padding:100px var(--gutter);background:var(--paper-2)}
.rule-cards{list-style:none;margin:0 auto;padding:0;max-width:1320px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rule{background:var(--paper);border-radius:18px;padding:24px;transition:transform .4s var(--ease),box-shadow .4s}
.rule:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 18px 40px rgba(20,33,61,.12)}
.rule svg{width:52px;height:52px;margin-bottom:14px}
.r-ic{fill:var(--red);transform-origin:32px 32px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.rule:nth-child(2) .r-ic{fill:var(--teal)}
.rule:nth-child(3) .r-ic{fill:var(--saffron)}
.rule:nth-child(4) .r-ic{fill:var(--navy-2)}
.rule:hover .r-ic{transform:rotate(-12deg) scale(1.08)}
.rule h3{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.rule p{color:var(--muted);font-size:15.5px}

/* VISIT */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);padding:100px var(--gutter);max-width:1320px;margin:0 auto;align-items:center}
.visit .num{margin-bottom:12px}
.visit-card{background:#E3F2F8;border-radius:22px;padding:clamp(20px,3vw,36px)}
.visit-card address{font-style:normal;font-family:var(--display);font-weight:500;font-size:20px;line-height:1.35}
.hours{margin:20px 0 0;display:grid;gap:8px}
.hours div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:8px}
.hours dt{font-weight:700}
.hours dd{margin:0;color:var(--muted);text-align:right}

/* FOOTER */
.foot{background:var(--navy);color:var(--paper);padding:70px var(--gutter) 90px;overflow:hidden}
.foot-big{font-family:var(--display);font-weight:900;font-size:clamp(40px,9vw,140px);line-height:.9;letter-spacing:-.05em;white-space:nowrap}
.foot-big i{font-style:normal;color:var(--saffron)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-top:30px;color:#C9D2EA}
.foot-row nav{display:flex;flex-wrap:wrap;gap:18px;font-weight:600}
.foot-row a{text-decoration:none}
.foot-row a:hover{color:#fff;text-decoration:underline}
.concept-badge{position:fixed;left:14px;bottom:14px;z-index:60;font-size:12px;font-weight:700;text-decoration:none;background:rgba(20,33,61,.9);color:var(--paper);padding:8px 12px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.concept-badge:hover{background:var(--red)}

@media (max-width:1000px){
  .nav nav{display:none}
  .hero-grid,.cd-grid,.craft-grid,.visit{grid-template-columns:1fr}
  .hero-grid{min-height:0}
  .sky-slot{min-height:330px}
  .reel{position:relative;top:0}
  .rule-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .countdown{padding-bottom:130px}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero{padding-top:90px;padding-bottom:130px}
  .sec-head{grid-template-columns:1fr;gap:6px}
  .rule-cards{grid-template-columns:1fr}
  .wind-hint{display:none}
  .cd{gap:6px}
  .sky-slot{min-height:300px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.001ms!important}
}
@media (max-width:560px){.h1-big{font-size:12.2vw}}

/* real sky photos behind the kite canvases (img/sky-*.webp, see img/drawings.json); kites are product-photo cut-outs */
.sky-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
.sky-veil{position:absolute;inset:0;pointer-events:none}
.hero .sky-veil{background:linear-gradient(90deg,rgba(240,248,252,.62) 0%,rgba(240,248,252,.35) 40%,rgba(240,248,252,0) 62%)}
.countdown .sky-veil{background:linear-gradient(90deg,rgba(20,18,48,.6) 0%,rgba(20,18,48,.3) 45%,rgba(20,18,48,0) 65%),linear-gradient(0deg,rgba(14,16,40,.55),rgba(14,16,40,0) 30%)}
img.sky-fallback{object-fit:contain;padding:8% 22%;box-sizing:border-box}
.reel{background:#CFE6F5 url(img/sky-day.webp) 50% 100%/cover}