/* ============================================================
   ABOVE TURQUOISE — Maafushi, Maldives
   Photography · drone · the wardrobe · custom magnets
   ============================================================ */

:root{
  --deep:#04222b;
  --deep-2:#062b36;
  --ink:#0a1418;
  --turq:#139fb2;
  --turq-bright:#25c2d6;
  --sand:#eadfc8;
  --paper:#f6f2ea;
  --sun:#f0a24b;
  --muted:#6d7a7c;

  --pad:clamp(18px,4.5vw,64px);
  --max:1360px;

  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp:"Archivo","Manrope",sans-serif;

  --ease:cubic-bezier(.22,.61,.24,1);
}

*,*::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(--sans);font-weight:400;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,video{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:800}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
fieldset{border:0;margin:0;padding:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.label{
  font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0;
}
.display{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(30px,5.4vw,64px);line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;
}
.lede{
  margin:18px 0 0;max-width:52ch;font-size:16px;line-height:1.8;color:#3c4a4c;
  font-weight:300;
}

/* pills */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border:1px solid var(--ink);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.pill:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.pill--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.pill--solid:hover{background:var(--turq-bright);border-color:var(--turq-bright);color:#04222b}
.pill--ghost{border-color:rgba(255,255,255,.5);color:#fff}
.pill--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ─────────────── entry ─────────────── */
.entry{
  position:fixed;inset:0;z-index:200;background:transparent;
  display:grid;place-items:center;color:#eaf6f7;
  transition:opacity .9s var(--ease),visibility .9s;
}
/* the sky is its own layer so it can lift away while the drone keeps flying */
.entry__sky{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 50% 38%,rgba(120,180,196,.28),transparent 70%),
    radial-gradient(120% 90% at 50% 120%,#02141a 0%,#04161c 40%,#071f27 100%),
    linear-gradient(180deg,#0a2a33,#02141a 70%);
  transition:opacity .5s linear;
}
.entry.is-done{opacity:0;visibility:hidden;pointer-events:none}
.entry__canvas{position:absolute;inset:0;width:100%;height:100%}
.entry{
  place-items:stretch;
}
.entry__ui{
  position:absolute;z-index:2;left:var(--pad);bottom:clamp(48px,9vh,110px);
  display:grid;justify-items:start;gap:6px;text-align:left;pointer-events:none;
}
@media (max-width:720px){
  .entry__ui{left:50%;transform:translateX(-50%);justify-items:center;text-align:center;bottom:clamp(40px,8vh,80px)}
}
.entry__brand{
  margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(13px,1.6vw,16px);
  letter-spacing:.42em;text-transform:uppercase;color:rgba(234,246,247,.86);
}
.entry__place{margin:0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(234,246,247,.45)}
.entry__go{
  pointer-events:auto;margin-top:26px;
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px;border:1px solid rgba(255,255,255,.42);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s;
}
.entry__go:hover{background:#eaf6f7;color:#04222b;border-color:#eaf6f7}
.entry__skip{
  pointer-events:auto;margin-top:14px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(234,246,247,.4);
  border-bottom:1px solid rgba(234,246,247,.2);padding-bottom:2px;
}
.entry__skip:hover{color:rgba(234,246,247,.8)}

/* ─────────────── nav ─────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px var(--pad);padding-top:calc(18px + env(safe-area-inset-top));
  color:#fff;transition:background .45s var(--ease),color .45s var(--ease),
             padding .45s var(--ease),box-shadow .45s var(--ease);
}
.nav__mark{
  font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.24em;
  text-transform:uppercase;white-space:nowrap;
}
.nav__links{display:flex;gap:clamp(14px,2.4vw,30px);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.nav__links a{opacity:.8;transition:opacity .3s}
.nav__links a:hover{opacity:1}
.nav__cta{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid currentColor;padding:10px 16px;white-space:nowrap;
  transition:background .35s,color .35s;
}
.nav__cta:hover{background:#fff;color:var(--ink)}
.nav.is-solid{
  background:rgba(246,242,234,.94);backdrop-filter:blur(12px) saturate(120%);
  color:var(--ink);box-shadow:0 1px 0 rgba(10,20,24,.08);
  padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px;
}
.nav.is-solid .nav__cta:hover{background:var(--ink);color:var(--paper)}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__mark{font-size:12px;letter-spacing:.2em}
}

/* ─────────────── hero ─────────────── */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:end;
  color:#fff;overflow:hidden;isolation:isolate;
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;z-index:-2;transform:scale(1.04);
}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(3,18,23,.55) 0%,rgba(3,18,23,.12) 38%,rgba(3,18,23,.72) 100%),
    radial-gradient(90% 70% at 20% 80%,rgba(3,18,23,.5),transparent 70%);
}
.hero__inner{padding:0 var(--pad) clamp(80px,12vh,140px);max-width:min(780px,88vw)}
.hero__kicker{color:rgba(255,255,255,.66)}
.hero__title{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(44px,9.4vw,116px);line-height:.94;letter-spacing:-.03em;
  text-transform:uppercase;margin:14px 0 0;
  text-shadow:0 10px 40px rgba(0,0,0,.35);
}
.hero__lede{
  margin:20px 0 0;max-width:44ch;font-size:15.5px;line-height:1.8;
  font-weight:300;color:rgba(255,255,255,.78);
}
.hero__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__foot{
  position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));
  padding:0 var(--pad);display:flex;justify-content:space-between;gap:16px;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);
}
@media (max-width:700px){ .hero__foot span:last-child{display:none} }

/* ─────────────── shoots ─────────────── */
.shoots{padding:clamp(64px,9vw,120px) 0;background:var(--paper)}
.shoot-grid{
  list-style:none;margin:clamp(30px,5vw,56px) 0 0;padding:0;
  display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr;
}
.shoot-grid > li{
  border-top:1px solid rgba(10,20,24,.16);padding-top:18px;
}
.shoot-grid__n{
  font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--turq);
}
.shoot-grid h3{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(18px,2.4vw,24px);letter-spacing:-.01em;margin:10px 0 10px;
}
.shoot-grid p{margin:0;font-size:15px;line-height:1.75;color:#3c4a4c;max-width:40ch;font-weight:300}
.shoot-grid__meta{margin-top:14px !important;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (min-width:820px){ .shoot-grid{grid-template-columns:repeat(3,1fr)} }

/* ─────────────── wardrobe (cream rail) ─────────────── */
.wardrobe{
  background:#f4efe3;color:#1a2426;
  padding:clamp(56px,8vw,104px) 0 clamp(40px,6vw,72px);
  border-top:1px solid rgba(10,20,24,.08);border-bottom:1px solid rgba(10,20,24,.08);
}
.wardrobe__head{max-width:min(680px,calc(100% - 0px));text-align:center;margin:0 auto clamp(18px,3vw,34px)}
.wardrobe__head .lede{margin-left:auto;margin-right:auto;text-align:center}

.rail-stage{
  position:relative;--railtop:clamp(58px,8svh,86px);
  height:clamp(500px,74svh,760px);
  cursor:grab;touch-action:pan-y;outline:none;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
.rail-stage.is-dragging{cursor:grabbing}
.rail-stage:focus-visible{outline:1px dashed rgba(10,20,24,.35);outline-offset:-10px}
.rail-stage__glow{
  position:absolute;left:50%;top:6%;width:min(760px,90vw);height:70%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 40%,rgba(255,255,255,.85),transparent 72%);
  pointer-events:none;
}
.rail-line{
  position:absolute;left:0;right:0;top:var(--railtop);height:3px;
  background:linear-gradient(90deg,rgba(60,54,42,0),rgba(60,54,42,.22) 12%,rgba(96,90,74,.55) 50%,rgba(60,54,42,.22) 88%,rgba(60,54,42,0));
  box-shadow:0 1px 0 rgba(255,255,255,.9),0 3px 6px rgba(90,70,45,.16);
}
.rail-track{
  position:absolute;left:0;top:0;height:100%;margin:0;padding:0;list-style:none;
  display:flex;align-items:flex-start;gap:clamp(10px,2.6vw,40px);will-change:transform;
}
.garment{
  position:relative;flex:0 0 auto;width:clamp(150px,16.5vw,210px);
  padding-top:var(--railtop);transform-origin:50% 0;will-change:transform,opacity;
}
.garment__hang{
  position:relative;display:flow-root;transform-origin:50% 0;
  animation:sway 7s ease-in-out infinite;
}
@keyframes sway{0%,100%{transform:rotate(-.85deg)}50%{transform:rotate(.85deg)}}
.garment__hanger{
  position:absolute;left:50%;top:0;width:66%;height:auto;
  transform:translate(-50%,-13.3%);z-index:0;pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(90,70,45,.25));
}
.garment__img{
  position:relative;display:block;width:100%;height:auto;margin-top:2%;
  z-index:1;filter:none;pointer-events:none;
}
.garment__hit{position:absolute;inset:0;display:block}
.rail-foot{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;gap:18px;padding:0 var(--pad);
}
.rail-hint{color:rgba(10,20,24,.42);transition:opacity .5s var(--ease)}
.rail-hint.is-hidden{opacity:0}
.rail-name{color:#2c312f;letter-spacing:.24em}
.rail-count{margin:0;font-size:11px;letter-spacing:.18em;color:#3a403e;font-variant-numeric:tabular-nums}
.rail-count i{font-style:normal;color:rgba(10,20,24,.35)}
.rail-dots{position:absolute;left:0;right:0;bottom:clamp(46px,7vw,64px);display:flex;justify-content:center;gap:9px}
.rail-dots .dot{width:22px;height:2px;padding:0;background:rgba(10,20,24,.16);transition:background .4s,width .4s}
.rail-dots .dot[aria-selected="true"]{background:rgba(10,20,24,.78);width:34px}

/* dress sheet */
.sheet{position:fixed;inset:0;z-index:150}
.sheet[hidden]{display:none}
.sheet__veil{position:absolute;inset:0;background:rgba(4,20,26,.6);backdrop-filter:blur(4px);opacity:0;transition:opacity .45s var(--ease)}
.sheet.is-open .sheet__veil{opacity:1}
.sheet__panel{
  position:absolute;top:0;right:0;height:100%;width:min(520px,100%);
  background:var(--paper);color:var(--ink);overflow:auto;display:block;
  transform:translateX(102%);transition:transform .55s var(--ease);
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
}
.sheet.is-open .sheet__panel{transform:none}
.sheet__close{
  position:absolute;top:14px;right:16px;z-index:2;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:9px 13px;border-radius:999px;
  background:rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.sheet__media{position:relative;background:#fff;height:clamp(240px,40vh,400px);overflow:hidden}
.sheet__img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain}
.sheet__body{padding:clamp(20px,4vw,32px)}
.sheet__body h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(22px,4vw,30px);margin:8px 0 6px}
.sheet__copy{margin:10px 0 18px;font-size:14px;line-height:1.75;color:#3c4a4c;max-width:42ch}
.sheet__meta{margin:0 0 18px;display:grid;gap:8px;border-top:1px solid rgba(10,20,24,.12);padding-top:14px}
.sheet__meta div{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:13px}
.sheet__meta dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sheet__meta dd{margin:0;text-align:right;color:#2e3432}
@media (max-width:720px){
  .sheet__panel{top:auto;bottom:0;left:0;width:100%;height:92%;transform:translateY(102%);border-radius:6px 6px 0 0}
  .sheet.is-open .sheet__panel{transform:none}
}

/* ─────────────── magnets ─────────────── */
.magnets{background:var(--deep);color:#eaf6f7;padding:clamp(60px,9vw,120px) 0}
.magnets .label{color:rgba(234,246,247,.45)}
.magnets .display{color:#f4fbfc}
.magnets .lede{color:rgba(234,246,247,.66)}
.magnets__grid{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){ .magnets__grid{grid-template-columns:1fr 1fr} }

.drop{
  display:flex;align-items:center;gap:14px;margin:26px 0 18px;padding:20px 22px;
  border:1px dashed rgba(234,246,247,.32);cursor:pointer;
  transition:border-color .35s,background .35s;
}
.drop:hover{border-color:rgba(234,246,247,.7);background:rgba(255,255,255,.04)}
.drop__icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(234,246,247,.28);border-radius:50%}
.drop__text{font-size:13.5px;color:rgba(234,246,247,.72)}
.drop__text b{color:#fff;font-weight:600}

.magnets__shape{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.shape{
  padding:9px 14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(234,246,247,.22);color:rgba(234,246,247,.7);
  transition:background .3s,color .3s,border-color .3s;
}
.shape.is-on{background:#eaf6f7;color:var(--deep);border-color:#eaf6f7}
.magnets__note{font-size:12.5px;color:rgba(234,246,247,.5);margin:0 0 18px;min-height:16px}

.magnets__stage{display:grid;place-items:center;perspective:1100px}
.magnet{
  position:relative;width:min(340px,76vw);aspect-ratio:1/1;
  transform-style:preserve-3d;transition:transform .12s linear;
  will-change:transform;
}
.magnet__face{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 8px,rgba(255,255,255,0) 8px 16px),
    linear-gradient(150deg,#0d3944,#082a33);
  box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);
  display:grid;place-items:center;
  background-size:cover;background-position:center;
}
.magnet__empty{
  font-family:var(--disp);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(234,246,247,.35);
}
.magnet__edge{
  position:absolute;inset:-9px;border-radius:20px;
  border:9px solid rgba(255,255,255,.9);
  box-shadow:inset 0 0 22px rgba(0,0,0,.35),0 18px 30px rgba(0,0,0,.4);
  transform:translateZ(-8px);pointer-events:none;
}
.magnet[data-shape="round"] .magnet__face{border-radius:50%}
.magnet[data-shape="round"] .magnet__edge{border-radius:50%}
.magnet[data-shape="strip"]{aspect-ratio:100/60}
.magnets__hint{margin-top:22px;color:rgba(234,246,247,.34);text-align:center}

/* ─────────────── machines ─────────────── */
.machines{background:var(--paper);padding:clamp(60px,9vw,120px) 0 clamp(50px,7vw,90px)}
.machines__head{max-width:640px}
.shelf{margin-top:clamp(26px,4vw,46px);overflow:hidden;cursor:grab;touch-action:pan-y;outline:none}
.shelf:active{cursor:grabbing}
.shelf__track{
  display:flex;align-items:flex-end;gap:clamp(16px,3vw,44px);
  margin:0;padding:0 var(--pad);list-style:none;will-change:transform;
}
.machine{
  flex:0 0 auto;width:clamp(190px,22vw,280px);text-align:center;
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.machine__plate{
  position:relative;display:grid;place-items:end center;height:clamp(170px,20vw,260px);
  background:linear-gradient(180deg,#fff,#efe8da);
  border:1px solid rgba(10,20,24,.08);
  padding:18px;
}
.machine__plate img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(20,30,30,.18))}
.machine__name{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(13px,1.5vw,16px);letter-spacing:.02em;margin:14px 0 2px;
}
.machine__kind{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.machine.is-on .machine__plate{border-color:rgba(19,159,178,.6);box-shadow:0 18px 40px rgba(6,43,54,.16)}
.machine.is-on{transform:translateY(-8px)}

.spec-card{
  margin-top:clamp(26px,4vw,44px);border-top:1px solid rgba(10,20,24,.14);padding-top:20px;
  display:grid;gap:10px;
}
.spec-card__body h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(20px,3vw,28px);margin:8px 0 0}
.spec-card__line{margin:10px 0 16px;font-size:14.5px;color:#3c4a4c;max-width:56ch;font-weight:300}
.spec-card__list{display:grid;gap:0;margin:0;max-width:620px}
.spec-card__list div{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:9px 0;border-bottom:1px solid rgba(10,20,24,.1)}
.spec-card__list dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.spec-card__list dd{margin:0;text-align:right;font-size:13.5px;color:#2e3432}

/* ─────────────── in action ─────────────── */
.action{background:var(--deep);color:#eaf6f7;padding:clamp(60px,9vw,120px) 0 clamp(50px,7vw,90px)}
.action .label{color:rgba(234,246,247,.45)}
.action .display{color:#f4fbfc}
.action .lede{color:rgba(234,246,247,.62)}
.action__head{max-width:600px}
.clips{
  list-style:none;margin:clamp(26px,4vw,44px) 0 0;padding:0 var(--pad);
  display:grid;gap:10px;grid-template-columns:repeat(2,1fr);max-width:var(--max);margin-inline:auto;
}
.clip{position:relative;overflow:hidden;background:#02141a;aspect-ratio:9/16}
.clip video{width:100%;height:100%;object-fit:cover}
.clip__tag{
  position:absolute;left:10px;bottom:9px;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
@media (min-width:900px){ .clips{grid-template-columns:repeat(4,1fr)} }

/* ─────────────── about ─────────────── */
.about{padding:clamp(60px,9vw,120px) 0;background:var(--paper)}
.about__grid{display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr}
@media (min-width:900px){ .about__grid{grid-template-columns:.8fr 1.2fr} }
.about__text p{margin:0 0 16px;font-size:16px;line-height:1.85;color:#3c4a4c;max-width:56ch;font-weight:300}
.about__sig{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--turq)}

/* ─────────────── contact ─────────────── */
.contact{background:var(--deep-2);color:#eaf6f7;padding:clamp(60px,9vw,120px) 0}
.contact .label{color:rgba(234,246,247,.7)}
.contact .display{color:#f4fbfc}
.contact .lede{color:rgba(234,246,247,.82)}
.contact__grid{display:grid;gap:clamp(28px,5vw,70px);grid-template-columns:1fr}
@media (min-width:900px){ .contact__grid{grid-template-columns:.9fr 1.1fr} }
.contact__meta{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.contact__meta li{font-size:13.5px;color:rgba(234,246,247,.9);display:grid;grid-template-columns:110px 1fr;gap:10px}
.contact__meta span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,246,247,.6);padding-top:3px}
.contact__meta a{border-bottom:1px solid rgba(234,246,247,.6)}

.form{display:grid;gap:16px}
.form__row{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:620px){ .form__row{grid-template-columns:1fr 1fr} }
.field{display:grid;gap:7px}
.field > span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,246,247,.72)}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(234,246,247,.42);
  color:#fff;font-family:var(--sans);font-size:15px;padding:10px 0;outline:none;
  transition:border-color .3s;
}
.field input:focus,.field textarea:focus{border-color:var(--turq-bright);box-shadow:0 1px 0 var(--turq-bright)}
.field input::placeholder,.field textarea::placeholder{color:rgba(234,246,247,.45)}
.field textarea{resize:vertical;min-height:clamp(150px,22vh,220px);font-size:16.5px;line-height:1.6;font-weight:500;padding:12px 0}

/* the notes field is the one people actually write in — give it weight */
.field--wide > span{
  font-size:11px;font-weight:800;letter-spacing:.18em;
  color:rgba(234,246,247,.95);
}
.field--wide textarea{
  border:1px solid rgba(234,246,247,.34);
  background:rgba(255,255,255,.035);
  padding:16px 18px;
  border-radius:2px;
  border-bottom-color:rgba(234,246,247,.34);
}
.field--wide textarea:focus{
  border-color:var(--turq-bright);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(37,194,214,.35);
}
.field--wide textarea::placeholder{
  font-weight:600;font-size:15px;color:rgba(234,246,247,.6);
}
.form__chips{display:flex;flex-wrap:wrap;gap:8px}
.form__chips legend{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,246,247,.45);margin-bottom:10px}
.form__chips label{position:relative;cursor:pointer}
.form__chips input{position:absolute;opacity:0;pointer-events:none}
.form__chips span{
  display:inline-block;padding:10px 15px;border:1px solid rgba(234,246,247,.42);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,246,247,.92);
  transition:background .3s,color .3s,border-color .3s;
}
.form__chips input:checked + span{background:#eaf6f7;color:var(--deep);border-color:#eaf6f7}
.form__status{margin:10px 0 0;font-size:12px;color:var(--turq-bright);min-height:18px}

/* ─────────────── footer ─────────────── */
.foot{background:var(--deep);color:rgba(234,246,247,.68);padding:24px 0 calc(24px + env(safe-area-inset-bottom))}
.foot__row{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.foot__links{display:flex;gap:18px}
.foot__links a:hover{color:#eaf6f7}
.foot__credit{max-width:44ch;line-height:1.7;letter-spacing:.08em;text-transform:none;font-size:10px;color:rgba(234,246,247,.5)}

/* ─────────────── reveal ─────────────── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .garment__hang{animation:none}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none}
  .entry{display:none}
  body.is-locked{overflow:auto}
}


/* ─────────────── the carved wall behind the dresses ─────────────── */
/* the relief is the backdrop of the rail itself — the wall the Libaas hang
   against — not the whole section */
.rail-stage{
  isolation:isolate;
}
.rail-stage::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background:url("../img/door/panel.webp?v=2") center center / cover no-repeat;
  opacity:1;
  filter:contrast(1.08) saturate(.85) brightness(1.02);
  pointer-events:none;
}
/* a soft cream wash so the dresses and the rail stay the subject */
.rail-stage::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(58% 52% at 50% 46%, rgba(246,241,231,.20), rgba(246,241,231,.66) 80%),
    linear-gradient(180deg, rgba(246,241,231,.16), rgba(246,241,231,.40));
  pointer-events:none;
}