/* ==========================================================================
   koishor (কৈশোর) — Lunar Reverie
   A warm, single-composition poster: one serif headline, one studio,
   one control row. Everything else is removed.
   ========================================================================== */

@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("/assets/fonts/dm-sans-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif-latin.woff2") format("woff2")}
@font-face{font-family:"Tiro Bangla";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/tiro-bangla-bengali.woff2") format("woff2");unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2")}

:root{
  color-scheme:light;
  --ink:#1c1814;
  --ink-soft:#3a322a;
  --ink-raised:#fbf6ec;
  --paper:#f3ece0;
  --muted:#6b6257;
  --faint:#6f665a;
  --accent:#a3471f;      /* text and buttons: 5.1:1 on paper */
  --rust:#b4532a;        /* decoration only */
  --error:#9b2f22;
  --hairline:rgba(28,24,20,.12);
  --wash:rgba(28,24,20,.05);
  --wash-strong:rgba(28,24,20,.10);
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --bangla:"Tiro Bangla","Noto Serif Bengali",serif;
  --ease:cubic-bezier(.2,0,0,1);
  --gutter:clamp(20px,5vw,72px);
}
.bn,[lang="bn"]{font-family:var(--bangla);letter-spacing:0;text-transform:none}
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 clamp(20px,3vh,32px);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hero-eyebrow .bn{font-size:1.3em;line-height:1}
.hero-dot{width:7px;height:7px;border-radius:50%;background:var(--rust);flex-shrink:0}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--paper);
  scroll-behavior:smooth;
  text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.01em;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button,a,input{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--paper)}

:where(button,a,input):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:inherit;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;top:12px;left:12px;z-index:30;
  background:var(--ink);color:var(--paper);
  display:inline-flex;align-items:center;
  min-height:44px;
  padding:12px 18px;border-radius:999px;
  font-size:13px;font-weight:500;
  transform:translateY(-180%);
  transition:transform .2s var(--ease);
}
.skip-link:focus-visible{transform:none}

/* ---------- shell ---------------------------------------------------------- */

.page{
  min-height:100svh;
  max-width:1680px;
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  flex-direction:column;
}

.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:64px;
  flex-shrink:0;
}

/* main is the flex child that owns the free space; the hero fills it */
main{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.wordmark{
  width:clamp(140px,12vw,176px);
  display:flex;
  align-items:center;
  line-height:0;
  flex-shrink:0;
  min-height:44px;
  padding:6px 0;
}
.wordmark svg{width:100%;height:auto;fill:currentColor;display:block}
.logo-moon{fill:var(--rust)}
.logo-rule{opacity:.3}
.masthead-actions{display:flex;align-items:center;gap:12px}
.shop-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 10px;border-radius:999px;font-size:13px;color:var(--muted);transition:color .18s var(--ease),background-color .18s var(--ease)}
.shop-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.shop-link:hover{color:var(--ink);background:var(--wash)}

.nav-cta{
  min-height:44px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.005em;
  box-shadow:inset 0 0 0 1px rgba(28,24,20,.18);
  transition:color .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease);
}
.nav-cta:hover{background:var(--wash);box-shadow:inset 0 0 0 1px rgba(28,24,20,.3)}
.nav-cta:active{transform:scale(.96)}

/* the single solid call to action: the one warm-accented surface on the page */
.primary-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  margin-top:clamp(24px,3.4vh,36px);
  padding:0 26px;
  border-radius:999px;
  background:var(--accent);
  color:var(--paper);
  font-size:14px;
  font-weight:500;
  letter-spacing:-.006em;
  box-shadow:
    0 1px 2px rgba(28,24,20,.14),
    0 10px 30px -14px rgba(28,24,20,.24),
    inset 0 0 0 1px rgba(163,71,31,.55);
  transition:background-color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);
}
.cta-arrow{
  width:15px;height:15px;
  fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s var(--ease);
}
.primary-cta:hover{
  background:#8c3c19;
  box-shadow:0 1px 2px rgba(28,24,20,.14),0 12px 34px -14px rgba(28,24,20,.28),inset 0 0 0 1px rgba(207,127,85,.8);
}
.primary-cta:hover .cta-arrow{transform:translateX(3px)}
.primary-cta:active{transform:scale(.96)}

/* ---------- hero ----------------------------------------------------------- */

.hero{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:stretch;
  gap:clamp(24px,4vw,64px);
  padding:clamp(16px,2.4vh,40px) 0;
}

.hero-text{
  min-width:0;
  align-self:center;
}

h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(72px,10.4vw,168px);
  line-height:.86;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
h1 em{
  font-style:italic;
  color:var(--accent);
  display:inline-block;
  padding-right:.06em;
  letter-spacing:-.038em;
}

.hero-lede{
  margin:clamp(20px,3vh,34px) 0 0;
  max-width:32ch;
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.55;
  letter-spacing:-.012em;
  color:var(--muted);
  text-wrap:pretty;
}

/* ---------- the stage ------------------------------------------------------ */

.study{margin:0;min-width:0;min-height:0;display:flex}
.study-stage{
  position:relative;
  isolation:isolate;
  flex:1;
  min-height:0;
  display:grid;
  place-items:center;
}
.stage-glow{
  position:absolute;
  inset:-6% -4%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(40% 40% at 54% 52%,rgba(236,220,184,.85),rgba(236,220,184,.35) 52%,transparent 74%),
    radial-gradient(70% 62% at 52% 58%,rgba(217,160,58,.08),transparent 78%);
}
/* absolutely positioned so the SVG never drives the grid row's height */
.garment-art{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  /* the artwork is decorative: it must never swallow a tap meant for a
     control, and nothing binds a pointer listener to it */
  pointer-events:none;
}

/* artwork internals that the rig drives */
.art-moving{transform:translate(0,0);transition:opacity .2s var(--ease)}
.garment-art[data-layer-motion="true"] .art-moving{will-change:transform}
.garment-art[data-focused="true"] .art-moving{opacity:.22}
.garment-art[data-focused="true"] .art-moving[data-highlighted="true"]{opacity:1}
.garment-art[data-exploded="true"] .layer-shadow{opacity:0}
.garment-art[data-exploded="true"] #press-carriage,
.garment-art[data-exploded="true"] #press-lift{opacity:.12}
#press-carriage,#press-lift{transition:opacity .3s var(--ease)}
.art-frame{stroke:#aca99c;stroke-width:.7;fill:none}
.art-ink{stroke-linejoin:round;stroke-linecap:round}
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  html:not([data-studio-ready]) #ink-reveal-rect{height:0}
}

.construction-marker circle{fill:var(--paper);stroke:var(--accent);stroke-width:1}
.construction-marker text{fill:var(--ink);font:10px var(--sans);text-anchor:middle;dominant-baseline:central}
.construction-marker line{stroke:rgba(163,71,31,.55);stroke-width:.8;stroke-dasharray:2 3}

/* ---------- studio --------------------------------------------------------- */

.studio{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:clamp(10px,1.2vh,14px) 0 clamp(8px,1.1vh,12px);
  border-top:1px solid var(--hairline);
}

/* One band under the toolbar. It holds either the status line or the
   construction controls, and it is sized for the taller of the two so
   switching between them never moves the artwork. */
.studio-meta{
  position:relative;
  display:grid;
  align-items:center;
  min-height:40px;
}
.studio-meta > *{grid-area:1/1;min-width:0}

.studio-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.segmented{
  display:inline-flex;
  gap:2px;
  padding:4px;
  border-radius:999px;
  background:rgba(28,24,20,.055);
  box-shadow:inset 0 0 0 1px rgba(28,24,20,.09);
}
.segmented button{
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  letter-spacing:-.005em;
  color:var(--muted);
  transition:color .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.segmented button:hover{color:var(--ink);background:rgba(28,24,20,.05)}
.segmented button[aria-pressed="true"]{
  background:var(--ink);
  color:var(--paper);
  box-shadow:0 1px 2px rgba(28,24,20,.14);
}

.studio-actions{display:flex;align-items:center;gap:10px}

.ghost-button,.primary-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:0 20px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:color .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease);
}
.ghost-button{
  color:var(--ink);
  background:rgba(28,24,20,.07);
  box-shadow:inset 0 0 0 1px rgba(28,24,20,.14);
}
.ghost-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:.85}
.ghost-button:hover{background:rgba(28,24,20,.12);box-shadow:inset 0 0 0 1px rgba(28,24,20,.24)}
.ghost-button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:0 1px 2px rgba(28,24,20,.14)}
.ghost-button[aria-pressed="true"] svg{opacity:1}
.ghost-button:active{transform:scale(.96)}

.primary-button{
  color:var(--paper);
  background:var(--ink);
  box-shadow:0 1px 2px rgba(28,24,20,.14),0 8px 22px -14px rgba(28,24,20,.24);
}
.primary-button svg{width:11px;height:11px;fill:currentColor;flex-shrink:0}
.primary-button:hover{background:var(--ink-soft)}
.primary-button:active{transform:scale(.96)}
.primary-button[aria-busy="true"]{background:rgba(28,24,20,.16);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(28,24,20,.2)}
.primary-button[aria-busy="true"] .play-icon{opacity:.5}

.status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:12px;
  letter-spacing:-.004em;
  color:var(--faint);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.studio-meta[data-open="true"] .status{
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
}
.status-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

/* ---------- construction --------------------------------------------------- */

.construction-panel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 24px;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.construction-panel[data-open="true"]{
  opacity:1;
  transform:none;
  pointer-events:auto;
  visibility:visible;
}
.panel-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;width:100%}

.part-choices{display:flex;flex-wrap:wrap;gap:8px}
.part-choices button{
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  letter-spacing:-.005em;
  color:var(--muted);
  background:rgba(28,24,20,.05);
  box-shadow:inset 0 0 0 1px rgba(28,24,20,.10);
  transition:color .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease);
}
.part-choices button:hover{color:var(--ink);background:rgba(28,24,20,.10);box-shadow:inset 0 0 0 1px rgba(28,24,20,.2)}
.part-choices button[aria-pressed="true"]{
  color:var(--paper);
  background:var(--ink);
  box-shadow:0 1px 2px rgba(28,24,20,.14);
}
.part-choices button:active{transform:scale(.96)}
.part-description{
  margin:0;
  font-size:13px;
  color:var(--muted);
  flex:1 1 240px;
  min-width:0;
  text-align:right;
  text-wrap:pretty;
}

/* ---------- footer --------------------------------------------------------- */

.footer{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:60px;
  border-top:1px solid var(--hairline);
  font-size:12px;
  letter-spacing:-.004em;
  color:var(--faint);
}
.footer-note{color:var(--faint)}

.noscript-note{
  margin:0 auto;
  max-width:520px;
  padding:16px var(--gutter) 40px;
  font-size:13px;
  color:var(--muted);
}

/* ---------- dialog --------------------------------------------------------- */

.waitlist-dialog{
  padding:0;
  width:min(452px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  border:0;
  border-radius:24px;
  background:var(--ink-raised);
  color:var(--ink);
  overflow:auto;
  overscroll-behavior:contain;
  box-shadow:0 0 0 1px rgba(28,24,20,.10),0 40px 100px -20px rgba(28,24,20,.26);
}
.waitlist-dialog::backdrop{background:rgba(28,24,20,.4);backdrop-filter:blur(14px)}
.waitlist-dialog[open]{animation:dialog-in .32s var(--ease) both}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}

.dialog-inner{padding:14px 32px 30px}
.dialog-top{display:flex;justify-content:flex-end}
.dialog-close{
  width:44px;height:44px;
  margin-right:-12px;
  display:grid;place-items:center;
  border-radius:999px;
  color:var(--faint);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.dialog-close:hover{color:var(--ink);background:var(--wash)}
.dialog-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

.dialog-inner h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(40px,7vw,52px);
  line-height:.95;
  letter-spacing:-.03em;
  margin:6px 0 16px;
}
.dialog-inner h2 em{font-style:italic}
#waitlist-description{
  margin:0 0 24px;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  text-wrap:pretty;
}

#waitlist-form label{
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--faint);
  margin-bottom:8px;
}
#email{
  width:100%;
  min-height:48px;
  padding:0 15px;
  border-radius:12px;
  border:1px solid rgba(28,24,20,.14);
  background:rgba(28,24,20,.04);
  color:var(--ink);
  font-size:16px;
  outline-offset:2px;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
#email::placeholder{color:var(--faint)}
#email:hover{border-color:rgba(28,24,20,.22)}
#email:focus{border-color:rgba(28,24,20,.34);background:rgba(28,24,20,.06)}
#email[aria-invalid="true"]{border-color:var(--error)}

.submit-button{
  width:100%;
  min-height:50px;
  margin-top:10px;
  padding:0 18px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--ink);
  color:var(--paper);
  font-size:14px;
  font-weight:500;
  transition:background-color .18s var(--ease),transform .12s var(--ease);
}
.submit-button:not(:disabled):hover{background:var(--ink-soft)}
.submit-button:not(:disabled):active{transform:scale(.96)}
.submit-button:disabled{cursor:default;opacity:.6}
.submit-button[data-state="loading"]{opacity:.7}

.submit-icon{position:relative;width:20px;height:20px;flex-shrink:0}
.submit-icon svg{
  position:absolute;inset:0;width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease),opacity .3s var(--ease),filter .3s var(--ease);
}
.check-icon{opacity:0;transform:scale(.25);filter:blur(4px)}
.submit-button[data-state="success"] .check-icon{opacity:1;transform:scale(1);filter:blur(0)}
.submit-button[data-state="success"] .arrow-icon{opacity:0;transform:scale(.25);filter:blur(4px)}

.form-status{
  min-height:20px;
  margin:12px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.form-status[data-kind="error"]{color:var(--error)}
.email-note{margin:8px 0 0;font-size:12px;color:var(--faint)}

body.dialog-open{overflow:hidden}

/* ---------- responsive ----------------------------------------------------- */

@media(max-width:1023px){
  .hero{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:clamp(18px,3.4vh,34px);
    padding-top:clamp(22px,4vh,44px);
    padding-bottom:clamp(10px,1.6vh,24px);
  }
  .hero-text{align-self:start;padding-bottom:clamp(0px,.8vh,10px)}
  h1{font-size:clamp(68px,13.5vw,132px)}
  .hero-lede{margin-top:clamp(14px,2.4vh,24px);max-width:34ch}
  .primary-cta{margin-top:clamp(22px,3.2vh,30px)}
  .study{flex:none}
  .study-stage{
    aspect-ratio:1.2;
    width:calc(100% + clamp(16px,6vw,64px));
    margin-left:calc(clamp(16px,6vw,64px) / -2);
    overflow:hidden;
  }
  .garment-art{position:absolute;inset:0;height:100%}
  .studio-bar{gap:10px}
}

@media(max-width:760px){
  :root{--gutter:clamp(20px,5.5vw,28px)}
  .masthead{min-height:64px;gap:12px}
  .masthead-actions{gap:4px}
  .shop-link{font-size:12px;padding:0 7px;gap:4px}
  .nav-cta{min-height:44px;padding:0 18px;font-size:12px}
  h1{font-size:clamp(62px,17vw,104px);line-height:.88}
  .hero{
    min-height:calc(100svh - 64px);
    grid-template-rows:auto 1fr;
    padding-top:clamp(26px,4.2vh,42px);
    gap:clamp(20px,3.6vh,32px);
  }
  .primary-cta{margin-top:clamp(20px,3vh,28px)}
  .study{align-self:stretch}
  .study-stage{aspect-ratio:1.08}

  /* On phones the page scrolls, so the band does not need to reserve the
     panel's height: collapse it and grow it on open. No dead space. */
  .studio-meta{display:block;min-height:0}
  .construction-panel{
    display:block;
    max-height:0;
    overflow:hidden;
    margin-top:0;
    transition:max-height .32s var(--ease),opacity .24s var(--ease),transform .24s var(--ease),margin-top .32s var(--ease);
  }
  .construction-panel[data-open="true"]{max-height:340px;margin-top:14px}
  .studio-meta[data-open="true"] .status{opacity:0;height:0;overflow:hidden;margin:0;transform:none}

  .studio-bar{flex-direction:column;align-items:stretch;gap:10px}
  .segmented{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .segmented button{min-height:44px;padding:0 8px;font-size:12.5px}
  .studio-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ghost-button,.primary-button{width:100%;padding:0 12px}
  .ghost-button{background:var(--wash)}
  .footer{min-height:56px;font-size:11.5px}
  .dialog-inner{padding:10px 24px 26px}
  .part-choices{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .part-choices button{min-height:44px}
  .part-description{flex:1 1 100%}
}

@media(max-width:380px){
  h1{font-size:clamp(56px,16.5vw,76px)}
  .segmented button{font-size:11.5px;padding:0 4px}
  .ghost-button,.primary-button{font-size:12px;gap:7px}
  .primary-button svg{width:10px;height:10px}
}

/* short desktop viewports: keep the poster on one screen */
@media(min-width:1024px) and (max-height:820px){
  .masthead{min-height:64px}
  h1{font-size:clamp(64px,8.6vw,124px)}
  .hero{padding:clamp(12px,2.5vh,28px) 0}
  .hero-lede{margin-top:clamp(14px,2.2vh,22px)}
  .studio{padding-top:clamp(10px,1.6vh,16px)}
  .footer{min-height:52px}
}

@media(min-width:1024px) and (max-height:700px){
  .segmented button{min-height:40px}
  .ghost-button,.primary-button{min-height:40px}
  .status{display:none}
}

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