/* ---------- Design tokens ---------- */
:root{
  --emerald-deep:   #071f18;
  --emerald:        #0b3d2e;
  --emerald-light:  #164936;
  --maroon-deep:    #300a12;
  --maroon:         #5c1626;
  --gold:           #d4af7a;
  --gold-soft:      #f0d9a8;
  --gold-deep:      #a97c3f;
  --ivory:          #f7f1e4;
  --ivory-dim:      rgba(247,241,228,0.7);
  --terracotta:     #c77b58;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ height:100%; }

body{
  min-height:100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23f7f1e4' stroke-width='0.6' opacity='0.05'%3E%3Cpath d='M28 2 L50 28 L28 54 L6 28 Z'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 90% 60% at 50% -5%, var(--maroon) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--emerald-light) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 15% 100%, var(--maroon-deep) 0%, transparent 55%),
    linear-gradient(160deg, var(--emerald) 0%, var(--emerald-deep) 75%);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.icon-defs{ display:none; }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Film grain + floating motes ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.05; 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.motes{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.motes::before, .motes::after{
  content:"";
  position:absolute;
  width:220%; height:220%;
  left:-60%; top:-60%;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, var(--gold) 0%, transparent 60%),
    radial-gradient(1px 1px at 30% 70%, var(--gold-soft) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 40%, var(--gold) 0%, transparent 60%),
    radial-gradient(1px 1px at 80% 80%, var(--gold-soft) 0%, transparent 60%),
    radial-gradient(1px 1px at 45% 15%, var(--gold) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 30%, var(--gold-soft) 0%, transparent 60%);
  background-repeat:repeat;
  background-size:400px 400px;
  opacity:0.35;
  animation:drift 70s linear infinite;
}
.motes::after{ animation-duration:110s; animation-direction:reverse; opacity:0.2; }

@keyframes drift{
  from{ transform:translate(0,0); }
  to{ transform:translate(-200px,-260px); }
}

/* ---------- Zari border (metallic embroidered band) ---------- */
.zari-border{
  position:relative;
  z-index:3;
  width:100%;
  height:22px;
  flex:none;
  background:linear-gradient(180deg, var(--maroon) 0%, var(--maroon-deep) 100%);
}
.zari-border svg{ width:100%; height:100%; display:block; }

/* ---------- Selvedge ticker (fabric-bolt edge) ---------- */
.selvedge{
  position:relative;
  z-index:3;
  width:100%;
  overflow:hidden;
  background:rgba(4,18,14,0.55);
  border-bottom:1px dashed rgba(212,175,122,0.3);
  white-space:nowrap;
}
.selvedge__track{
  display:inline-flex;
  align-items:center;
  padding:8px 0;
  animation:scroll-left 32s linear infinite;
  will-change:transform;
}
.selvedge__track span{
  font-family:var(--sans);
  font-size:0.62rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold-soft);
  opacity:0.75;
  padding:0 16px;
}
.selvedge__track i{
  width:4px; height:4px; border-radius:50%;
  background:var(--terracotta);
  opacity:0.7;
  flex:none;
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Corner ornaments (paisley + tailor's-tape ticks) ---------- */
.ornament{
  position:fixed;
  width:min(28vw, 220px);
  height:min(28vw, 220px);
  color:var(--gold);
  opacity:0.35;
  fill:none;
  stroke:currentColor;
  stroke-width:0.75;
  z-index:1;
  pointer-events:none;
}
.ornament--tl{ top:0; left:0; }
.ornament--br{ bottom:0; right:0; }
.tape-ticks line{ stroke:currentColor; stroke-width:0.6; }
@media (max-width:600px){
  .ornament{ width:32vw; height:32vw; opacity:0.22; }
}

/* ---------- Grand paisley watermarks (zardozi-style artwork) ---------- */
.paisley-art{
  position:fixed;
  z-index:0;
  pointer-events:none;
  opacity:0.09;
  color:var(--gold);
}
.paisley-art--a{
  width:min(46vw, 460px);
  height:auto;
  left:-8vw;
  bottom:-6vh;
  transform:rotate(-8deg);
}
.paisley-art--b{
  width:min(46vw, 460px);
  height:auto;
  right:-10vw;
  top:-8vh;
  transform:rotate(178deg);
}
@media (max-width:700px){
  .paisley-art{ opacity:0.06; }
}

/* ---------- Royal crest / monogram seal ---------- */
.crest{
  width:clamp(64px, 10vw, 92px);
  height:clamp(64px, 10vw, 92px);
  color:var(--gold);
  position:relative;
}
.crest .crest__ring{ fill:none; stroke:currentColor; }
.crest .crest__beads{
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-dasharray:0.5 6.5; stroke-linecap:round;
}
.crest .crest__letter{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:34px;
  text-anchor:middle;
}
.crest .crest__flourish{ fill:none; stroke:currentColor; stroke-width:0.8; opacity:0.85; }

.sequins{
  position:relative;
  width:100%;
  max-width:220px;
  height:0;
  margin:0 auto;
}
.sequin{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--gold-soft);
  box-shadow:0 0 4px 1px rgba(240,217,168,0.8);
  animation:twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle{
  0%, 100%{ opacity:0.15; transform:scale(0.6); }
  50%{ opacity:1; transform:scale(1.15); }
}

/* ---------- Layout ---------- */
.stage{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6vh 6vw 6vh;
  gap:clamp(14px, 2.4vh, 26px);
}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--gold-soft);
}
.icon-thread{
  width:16px; height:16px;
  color:var(--gold);
  opacity:0.8;
}
.icon-thread--flip{ transform:scaleX(-1); }

/* ---------- Stitched divider ---------- */
.stitch-rule{
  width:200px;
  max-width:60vw;
  height:10px;
  color:var(--gold);
  opacity:0.6;
}
.stitch-rule path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-dasharray:4 5;
  stroke-dashoffset:120;
  animation:stitch-draw 1.6s ease-out forwards;
  animation-delay:0.6s;
}
@keyframes stitch-draw{
  to{ stroke-dashoffset:0; }
}

/* ---------- Wordmark ---------- */
.wordmark{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(2.15rem, 9.5vw, 5.6rem);
  word-break:break-word;
  line-height:1.05;
  background:linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-soft) 25%, var(--gold) 45%, var(--ivory) 58%, var(--gold) 78%, var(--gold-soft) 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 9s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* ---------- Tagline ---------- */
.tagline{
  max-width:520px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.05rem, 2.2vw, 1.3rem);
  line-height:1.6;
  color:var(--ivory-dim);
}
.tagline em{
  color:var(--gold-soft);
  font-style:italic;
}

/* ---------- Countdown ---------- */
.countdown{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 2vw, 20px);
  margin-top:6px;
  max-width:100%;
}
.countdown__unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:58px;
  padding:16px 6px 14px;
  border:1px solid rgba(212,175,122,0.35);
  background:rgba(247,241,228,0.04);
  backdrop-filter:blur(6px);
  /* pinking-shears zigzag edge, like a raw-cut fabric swatch */
  clip-path:polygon(
    0% 3%, 16.67% 0%, 33.33% 5%, 50% 1%, 66.67% 5%, 83.33% 0%, 100% 3%,
    100% 97%, 83.33% 100%, 66.67% 95%, 50% 99%, 33.33% 95%, 16.67% 100%, 0% 97%
  );
}
.countdown__num{
  font-family:var(--serif);
  font-size:clamp(1.4rem, 3.4vw, 2rem);
  font-weight:500;
  color:var(--ivory);
  font-variant-numeric:tabular-nums;
}
.countdown__label{
  font-size:0.6rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold-soft);
  opacity:0.8;
}
.countdown__sep{
  color:var(--gold);
  opacity:0.5;
  font-size:1.2rem;
  transform:translateY(-6px);
}
@media (max-width:480px){
  .countdown{ gap:8px; }
  .countdown__unit{ min-width:48px; padding:9px 4px 8px; }
}

/* ---------- Waitlist form ---------- */
.waitlist{
  display:flex;
  align-items:stretch;
  gap:10px;
  margin-top:10px;
  width:100%;
  max-width:420px;
}
.waitlist input[type="email"]{
  flex:1;
  min-width:0;
  padding:14px 18px;
  font-family:var(--sans);
  font-size:0.95rem;
  color:var(--ivory);
  background:rgba(247,241,228,0.06);
  border:1px solid rgba(212,175,122,0.35);
  border-radius:999px;
  outline:none;
  transition:border-color 0.25s ease, background 0.25s ease;
}
.waitlist input[type="email"]::placeholder{ color:rgba(247,241,228,0.45); }
.waitlist input[type="email"]:focus{
  border-color:var(--gold);
  background:rgba(247,241,228,0.1);
}
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.waitlist button{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 22px;
  font-family:var(--sans);
  font-size:0.85rem;
  letter-spacing:0.06em;
  color:var(--emerald-deep);
  background:linear-gradient(100deg, var(--gold-soft), var(--gold));
  border:none;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.waitlist button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(212,175,122,0.35);
}
.waitlist button:active{ transform:translateY(0); }
.waitlist button:disabled{ opacity:0.6; cursor:default; transform:none; box-shadow:none; }
.btn-arrow{ transition:transform 0.2s ease; }
.waitlist button:hover .btn-arrow{ transform:translateX(3px); }

@media (max-width:480px){
  .waitlist{ flex-direction:column; }
  .waitlist button{ justify-content:center; }
}

.waitlist__msg{
  min-height:1.2em;
  font-size:0.85rem;
  color:var(--gold-soft);
  letter-spacing:0.02em;
}
.waitlist__msg.is-error{ color:#e0a08a; }

/* ---------- Shade card (raw material swatches) ---------- */
.swatchcard{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  list-style:none;
  margin-top:4px;
  padding:14px 18px;
  border-top:1px dashed rgba(212,175,122,0.3);
  border-bottom:1px dashed rgba(212,175,122,0.3);
}
.swatchcard li{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:0.62rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ivory-dim);
}
.swatchcard__chip{
  width:12px; height:12px;
  border-radius:50%;
  background:var(--sw);
  border:1px solid rgba(247,241,228,0.4);
  box-shadow:0 0 0 1px rgba(0,0,0,0.2);
  flex:none;
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:22px 6vw 28px;
  font-size:0.75rem;
  letter-spacing:0.04em;
  color:rgba(247,241,228,0.5);
}
.site-footer a{
  color:var(--gold-soft);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease;
}
.site-footer a:hover{ border-color:var(--gold-soft); }
.site-footer .dot{ opacity:0.4; }

/* ---------- Reveal-on-load animation ---------- */
.reveal{
  opacity:0;
  transform:translateY(10px);
  animation:rise 0.6s cubic-bezier(0.19,1,0.22,1) forwards;
  animation-delay:calc(var(--d, 0) * 0.06s + 0.05s);
}
@keyframes rise{
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- Mobile tuning ---------- */
@media (max-width:600px){
  .stage{ padding:5vh 5.5vw 5vh; gap:clamp(12px, 2vh, 20px); }

  .zari-border{ height:16px; }

  .selvedge__track{ padding:6px 0; }
  .selvedge__track span{ font-size:0.56rem; letter-spacing:0.2em; padding:0 11px; }

  .crest{ width:56px; height:56px; }
  .sequins{ max-width:150px; }
  .sequin{ width:2.5px; height:2.5px; }

  .eyebrow{ font-size:0.65rem; letter-spacing:0.26em; gap:9px; }
  .icon-thread{ width:13px; height:13px; }

  .swatchcard{ gap:11px 14px; padding:12px 10px; }
  .swatchcard li{ font-size:0.56rem; letter-spacing:0.1em; }
  .swatchcard__chip{ width:10px; height:10px; }

  .site-footer{ font-size:0.68rem; padding:18px 6vw 24px; }
}

@media (max-width:360px){
  .wordmark{ font-size:2rem; }
  .sequins{ max-width:120px; }
  .crest{ width:50px; height:50px; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
  .wordmark{ animation:none; }
  .motes::before, .motes::after{ animation:none; }
  .selvedge__track{ animation:none; }
  .stitch-rule path{ animation:none; stroke-dashoffset:0; }
  .sequin{ animation:none; opacity:0.7; }
}