/* =====================================================================
   EMERALD DREAM — collection page. Loads after tokens/base/site.
   Concept: Aurelia's brand holds the bookends (ink header + footer,
   cognac CTA, gold glasses); everything between is the collection's
   world — deep-emerald bands, sage-washed daylight sections, emerald
   chrome, gold as the connective hairline.
   ===================================================================== */
:root{
  --emerald:#175244;
  --emerald-deep:#0E3A30;
  --emerald-night:#0B2F27;
  --emerald-soft:rgba(23,82,68,.12);
  --sage-page:#EFF2E6;      /* daylight sections, emerald-washed cream */
  --sage-surface:#F5F7EC;
  --dream-cream:#F6F3EA;    /* button fill on dark emerald */
  --on-emerald:#EAF0E6;     /* body text on dark emerald */
  --on-emerald-muted:#BCCFC2;
}

/* Eyebrows inside the dream default to emerald; gold variant stays gold */
body.dream .eyebrow{color:var(--emerald)}
body.dream .eyebrow--gold{color:var(--gold)}

/* ---- Buttons ---- */
.btn--emerald{background:var(--emerald);color:#fff;box-shadow:0 6px 18px rgba(14,58,48,.28)}
.btn--emerald:hover{background:var(--emerald-deep);color:#fff;transform:translateY(-2px)}
.btn--cream{background:var(--dream-cream);color:var(--emerald-deep);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.btn--cream:hover{background:#fff;color:var(--emerald-night);transform:translateY(-2px)}
body.dream .hero .btn:focus-visible,body.dream #register .btn:focus-visible{outline-color:var(--gold)}

/* ---- Hero: the dream, at night-pool depth ---- */
body.dream .hero{background:radial-gradient(80% 90% at 82% 0%,color-mix(in srgb,var(--emerald) 75%,#2A6B57),var(--emerald-deep) 55%,var(--emerald-night) 100%);color:var(--on-emerald)}
body.dream .hero::before{background:radial-gradient(46% 40% at 88% 4%,rgba(199,162,74,.22),transparent 62%),
  radial-gradient(52% 44% at 6% 104%,rgba(199,162,74,.10),transparent 58%)}
body.dream .hero h1{color:#fff}
body.dream .hero .hero__sub{color:var(--on-emerald-muted)}
.dream-title-accent{color:var(--gold);font-style:italic}
.dream-honest{margin-top:var(--space-5);font-size:var(--fs-small);color:var(--on-emerald-muted);border-left:3px solid var(--gold-hair);padding-left:var(--space-3);max-width:44ch}
.dream-hero .portrait{max-width:400px;border-color:rgba(199,162,74,.55)}

/* ---- Daylight sections: sage-washed cream ---- */
body.dream .section--surface{background:var(--sage-page)}
body.dream .chip{background:var(--sage-surface)}
body.dream .chip__dot{background:var(--emerald)}
body.dream .faq{border-top-color:rgba(23,82,68,.18)}
body.dream .faq__item{border-bottom-color:rgba(23,82,68,.18)}
body.dream .faq__q .icon::before,body.dream .faq__q .icon::after{background:var(--emerald)}

/* ---- Lookbook ---- */
.look{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(2rem,4vw,3.5rem)}
.look+.look{border-top:1px solid rgba(23,82,68,.16)}
.look:nth-of-type(even) .look__media{order:2}
@media (max-width:820px){
  .look{grid-template-columns:1fr;gap:var(--space-5)}
  .look:nth-of-type(even) .look__media{order:0}
}
.look__media{margin:0;position:relative;border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--gold-hair);box-shadow:var(--shadow-md);background:var(--bg-page)}
.look__media::after{content:"";position:absolute;inset:0;border-radius:var(--radius-card);
  box-shadow:inset 0 0 0 1px rgba(199,162,74,.30);pointer-events:none}
.look__media img{width:100%;aspect-ratio:3/4;object-fit:cover}
.look__num{font-family:var(--font-display);font-style:italic;font-size:1.1rem;color:var(--emerald);letter-spacing:.08em;display:block;margin-bottom:var(--space-2)}
.look__info h3{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem);margin-bottom:var(--space-3)}
.look__info p{color:var(--text-muted)}
.look__info .chip-row{margin-top:var(--space-4)}
.look__want{margin-top:var(--space-5)}

/* ---- Register: a deep-emerald band holding a cream card, dressed with
       the collection's guipure spray curling in from the corners ---- */
body.dream #register{background:linear-gradient(180deg,var(--emerald-deep),var(--emerald-night));color:var(--on-emerald);position:relative;overflow:hidden}
body.dream #register>.container{position:relative;z-index:1}
body.dream #register::before,body.dream #register::after{content:"";position:absolute;z-index:0;pointer-events:none;opacity:.85}
body.dream #register::before{background:url("/assets/img/dream/floral-spray-a.svg") no-repeat center/contain;
  aspect-ratio:520/420;width:min(480px,50vw);left:-70px;top:-26px;rotate:5deg;animation:swayA 26s ease-in-out infinite alternate}
body.dream #register::after{background:url("/assets/img/dream/floral-spray-b.svg") no-repeat center/contain;
  aspect-ratio:560/380;width:min(540px,54vw);right:-90px;bottom:-26px;rotate:-2deg;animation:swayB 30s ease-in-out -14s infinite alternate}
@media (max-width:880px){
  body.dream #register::before{width:250px;left:-70px;top:-30px;opacity:.4}
  body.dream #register::after{width:250px;right:-70px;bottom:-26px;opacity:.4}
}
body.dream #register .section-head h2{color:#fff}
body.dream #register .section-head .lead{color:var(--on-emerald-muted)}
body.dream #register .form-success h3{color:#fff}
body.dream #register .form-success p{color:var(--on-emerald-muted)}

/* ---- Cut picker (emerald chrome, inside the cream card) ---- */
.cutset{border:0;padding:0;margin:0}
.cutset legend{font-weight:700;font-size:var(--fs-small);color:var(--text-strong);margin-bottom:var(--space-3)}
.cutset__hint{font-weight:500;color:var(--text-muted);margin-left:.5em}
.cutpicks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
@media (max-width:720px){.cutpicks{grid-template-columns:repeat(2,1fr)}}
.cutpick{position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;
  border:2px solid var(--border-hair);background:#fff;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.cutpick:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cutpick input{position:absolute;opacity:0;pointer-events:none}
.cutpick img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 14%}
.cutpick__name{display:block;padding:.55rem .6rem .65rem;font-size:.85rem;font-weight:700;color:var(--text-strong);text-align:center;line-height:1.2}
.cutpick__check{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--emerald);color:#fff;font-size:.85rem;font-weight:700;opacity:0;transform:scale(.6);transition:var(--dur) var(--ease)}
.cutpick:has(input:checked){border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-soft)}
.cutpick:has(input:checked) .cutpick__check{opacity:1;transform:scale(1)}
.cutpick:has(input:focus-visible){outline:3px solid var(--emerald);outline-offset:3px}
.cutset .field__err{margin-top:var(--space-3)}
.cutset.field--error .field__err{display:block}

/* ---- Pill radios ---- */
.field__label-text{font-weight:700;font-size:var(--fs-small);color:var(--text-strong)}
.field__label-text .opt{font-weight:500;color:var(--text-muted)}
.pillset{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:.2rem}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:inline-block;padding:.55em 1.05em;border-radius:var(--radius-pill);border:1.5px solid var(--border-hair);
  background:#fff;font-size:var(--fs-small);font-weight:600;color:var(--text-body);transition:var(--dur) var(--ease)}
.pill:hover span{border-color:var(--emerald)}
.pill:has(input:checked) span{background:var(--emerald);border-color:var(--emerald);color:#fff}
.pill:has(input:focus-visible) span{outline:3px solid var(--emerald);outline-offset:2px}

/* ---- Form card ---- */
.dream-form{background:var(--dream-cream);border:1px solid rgba(199,162,74,.4);border-radius:var(--radius-card);
  padding:clamp(1.25rem,3vw,2.5rem);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.dream-form .field input,.dream-form .field select{background:#fff}
.dream-form .field input:focus,.dream-form .field select:focus{border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-soft)}
.req{color:var(--emerald)}
body.dream #register .dream-form .field label,body.dream #register .cutset legend,body.dream #register .field__label-text{color:var(--text-strong)}
.consent__label{display:flex;gap:var(--space-3);align-items:flex-start;font-weight:500;font-size:var(--fs-small);color:var(--text-body);cursor:pointer}
.consent__label input{margin-top:.28em;width:17px;height:17px;accent-color:var(--emerald);flex:none}
.dream-privacy{margin-top:var(--space-3);text-align:center;font-size:.85rem;color:var(--text-muted)}
.hp{position:absolute!important;left:-9999px!important;top:auto!important;height:1px;width:1px;overflow:hidden}
.form-banner{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb,var(--brand-cognac) 45%,transparent);background:color-mix(in srgb,var(--brand-cognac) 8%,transparent);
  color:var(--brand-cognac-dark);font-weight:600;font-size:var(--fs-small)}
.form-success .eyebrow{margin-bottom:var(--space-2)}
.form-success h3{font-size:var(--fs-h2)}
.form-success p{margin-inline:auto}
#submit-btn[disabled]{opacity:.6;cursor:wait;transform:none}

/* ---- Story: the dream continues (emerald night, gold voice) ---- */
body.dream #story.section--onyx{background:linear-gradient(180deg,var(--emerald-night),var(--emerald-deep))}
body.dream #story .lead{color:var(--on-emerald)}
body.dream #story p{color:var(--on-emerald-muted)}
body.dream #story .lead{color:var(--on-emerald)}

/* ---- Appliqué woven through the page ---- */
body.dream .hero{overflow:hidden}
body.dream .hero::after{content:"";position:absolute;z-index:0;pointer-events:none;
  background:url("/assets/img/dream/floral-spray-a.svg") no-repeat center/contain;
  aspect-ratio:520/420;width:min(430px,46vw);left:-90px;bottom:-60px;opacity:.5;transform:rotate(3deg)}
.look+.look{position:relative}
.look+.look::before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:160px;aspect-ratio:240/80;background:url("/assets/img/dream/floral-sprig.svg") no-repeat center/contain;pointer-events:none}
body.dream #story{position:relative;overflow:hidden}
body.dream #story>.container{position:relative;z-index:1}
body.dream #story::after{content:"";position:absolute;z-index:0;pointer-events:none;
  background:url("/assets/img/dream/floral-spray-b.svg") no-repeat center/contain;
  aspect-ratio:560/380;width:min(480px,50vw);left:-100px;bottom:-40px;opacity:.5;transform:scaleX(-1) rotate(3deg)}
body.dream #faq .section-head::after{content:"";display:block;width:160px;aspect-ratio:240/80;
  background:url("/assets/img/dream/floral-sprig.svg") no-repeat left center/contain;margin-top:var(--space-4)}
@media (max-width:880px){
  body.dream .hero::after{width:250px;opacity:.35;left:-70px;bottom:-40px}
  body.dream #story::after{width:260px;opacity:.35;left:-70px}
}

/* ---- Living vines threading behind the form card ---- */
.vine{position:absolute;z-index:0;pointer-events:none;aspect-ratio:220/900;
  background:url("/assets/img/dream/floral-vine.svg") no-repeat center/contain}
body.dream #register .vine--r{width:min(210px,20vw);left:50%;margin-left:246px;top:3%;rotate:2deg;
  animation:swayVR 24s ease-in-out infinite alternate}
body.dream #register .vine--l{width:min(190px,18vw);right:50%;margin-right:242px;bottom:-4%;
  transform:scaleX(-1);rotate:-2deg;animation:swayVL 28s ease-in-out -12s infinite alternate}
@keyframes swayA{from{rotate:3.8deg}to{rotate:6.2deg}}
@keyframes swayB{from{rotate:-3.2deg}to{rotate:-0.8deg}}
@keyframes swayVR{from{rotate:0.8deg}to{rotate:3.2deg}}
@keyframes swayVL{from{rotate:-3.2deg}to{rotate:-0.8deg}}
@media (prefers-reduced-motion:reduce){
  body.dream #register::before,body.dream #register::after,.vine{animation:none}
}
@media (max-width:760px){.vine{display:none}}

/* :has() fallback — older browsers still get a visible checked state */
@supports not (selector(:has(*))){
  .cutpick input:checked~.cutpick__check{opacity:1;transform:scale(1)}
  .pill input:checked+span{background:var(--emerald);border-color:var(--emerald);color:#fff}
}