/* ALARÉ — resets, state, keyframes, breakpoints.
   Composition lives inline on the elements. */

:root{
  --ivory:#F4F1EA;
  --limestone:#E3DCD1;
  --charcoal:#1E1C1A;
  --ink:#0B0B0A;
  --bronze:#A8865C;
  --serif:"Bodoni Moda","Times New Roman",Times,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{margin:0;padding:0}
body{
  background:#0B0B0A;
  color:#F4F1EA;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip; /* clip, not hidden: hidden makes body a scroll container and breaks position:sticky */
}
img{display:block;max-width:100%}
figure{margin:0}
h1,h2,h3,p{margin:0}
a{color:#A8865C;text-decoration:none;transition:opacity .45s ease}
a:hover{color:#A8865C;opacity:.62}
::selection{background:#A8865C;color:#F4F1EA}

/* Bodoni is a display face — let the variable optical size do its work */
[data-serif]{font-family:"Bodoni Moda","Times New Roman",Times,serif;font-optical-sizing:auto;font-weight:400;font-style:normal}

/* ── reveals: opacity, and a very slow settle on photography. never translate-up ── */
[data-reveal]{
  opacity:0;
  transition:opacity 1.35s cubic-bezier(.22,1,.36,1),
             transform 2.4s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
[data-reveal][data-scale]{transform:scale(1.035)}
[data-reveal][data-in]{opacity:1;transform:none}

/* ── opening ── */
@keyframes alare-open-img{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes alare-open-soft{from{opacity:0}to{opacity:1}}
[data-open-img]{animation:alare-open-img 3000ms cubic-bezier(.16,1,.3,1) both}
[data-open-a]{animation:alare-open-soft 1700ms ease 320ms both}
[data-open-b]{animation:alare-open-soft 1700ms ease 880ms both}
[data-open-c]{animation:alare-open-soft 1700ms ease 1340ms both}

/* ── responsive: bleeds take the full measure, paired images stack ── */
@media (max-width:1024px){
  [data-m="full"]{grid-column:1/-1 !important}
  [data-m="wide"]{grid-column:1/-1 !important}
  [data-m="detail"]{grid-column:2/span 9 !important;margin-top:clamp(56px,9vh,110px) !important}
  [data-m="type"]{grid-column:1/-1 !important}
  [data-xfade]{height:170vh !important}
}
/* ══════════════════════════════════════════════════════════════════
   PHONE — art-directed for portrait, not a narrowed desktop.
   Every crop, height and interval below was chosen at 390×844.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:640px){

  /* ── opening ─────────────────────────────────────────────────── */
  /* the frame sits slightly higher than desktop: face in the upper third,
     the dark silk of the dress carrying the type at the bottom */
  [data-open-img]{object-position:50% 24% !important}

  [data-mob="hero-block"]{
    width:calc(100vw - 40px) !important;
    bottom:calc(34px + env(safe-area-inset-bottom,0px)) !important;
  }
  [data-open-a]{width:172px !important}
  [data-open-b]{font-size:21px !important;margin-top:30px !important;letter-spacing:.008em !important}
  [data-open-c]{font-size:11.5px !important;margin-top:18px !important;letter-spacing:.1em !important;color:rgba(244,241,234,.86) !important}

  /* the persistent mark clears the notch and the browser chrome */
  [data-mark]{
    top:calc(15px + env(safe-area-inset-top,0px)) !important;
    width:104px !important;
  }

  /* ── Istanbul ────────────────────────────────────────────────── */
  [data-mob="istanbul-sec"]{padding-top:76px !important}
  [data-m="detail"]{grid-column:1/-1 !important;margin-top:0 !important}

  /* portrait: full bleed. 62%/44% keeps the profile, the earring, and both
     hands with the ring and cuff inside the frame */
  [data-m="full"] [data-mob="portrait"]{
    height:600px !important;height:76svh !important;
    object-position:62% 44% !important;
  }

  /* the ring on the ledge: inset and held to the right edge */
  [data-mob="window-fig"]{
    margin-top:64px !important;
    padding-right:20px !important;
    padding-left:0 !important;
    width:84% !important;
    margin-left:auto !important;
  }

  /* the statement reads left on a phone — the desktop right-alignment
     belonged to the 12-column grid, not to the line */
  [data-mob="form-line"]{
    margin-top:96px !important;
    padding:0 20px !important;
    text-align:left !important;
    font-size:42px !important;
    line-height:1.04 !important;
  }

  /* terrace: full bleed, the Bosphorus and the skyline held above the balustrade */
  [data-mob="terrace-fig"]{margin-top:96px !important}
  [data-mob="terrace"]{
    height:560px !important;height:72svh !important;
    object-position:52% 22% !important;
  }

  /* the necklace is the product hero — full width, generous height */
  [data-mob="necklace-fig"]{margin-top:104px !important}
  [data-mob="necklace"]{
    height:620px !important;height:78svh !important;
    object-position:50% 42% !important;
  }

  /* earrings: inset the other way, so the two details balance across the scroll */
  [data-mob="earrings-fig"]{
    margin:88px 0 104px !important;
    padding-right:0 !important;
    padding-left:20px !important;
    width:88% !important;
    margin-right:auto !important;
  }

  /* ── atelier ─────────────────────────────────────────────────── */
  [data-mob="atelier"]{
    height:540px !important;height:70svh !important;
    object-position:56% 48% !important;
  }
  [data-mob="precision"]{
    right:20px !important;
    bottom:36px !important;
    font-size:26px !important;
  }

  /* ── Istanbul → New York ─────────────────────────────────────── */
  /* short enough to complete in two unhurried swipes */
  [data-xfade]{height:155svh !important}
  [data-mob="place"]{font-size:40px !important;letter-spacing:.045em !important}

  /* ── the address ─────────────────────────────────────────────── */
  /* 62%/52% is the only crop that holds the full ALARÉ signage and the
     window card together on a phone; the frame is shorter than the other
     bleeds so both stay legible */
  [data-mob="store"]{
    height:560px !important;height:69svh !important;
    object-position:62% 52% !important;
  }

  /* ── close ───────────────────────────────────────────────────── */
  [data-mob="footer"]{
    padding:92px 20px calc(40px + env(safe-area-inset-bottom,0px)) !important;
  }
  [data-mob="close-a"]{font-size:34px !important}
  [data-mob="close-b"]{font-size:17px !important;margin-top:26px !important}
  [data-mob="close-c"]{font-size:11px !important;margin-top:20px !important;letter-spacing:.13em !important}
  [data-mob="lockup"]{margin-top:92px !important}
  [data-mob="lockup"] img{width:116px !important}
}

/* smaller phones — 375 and below */
@media (max-width:385px){
  [data-open-a]{width:158px !important}
  [data-open-b]{font-size:19.5px !important;margin-top:26px !important}
  [data-open-c]{font-size:11px !important;letter-spacing:.085em !important}
  [data-mob="form-line"]{font-size:38px !important;margin-top:88px !important}
  [data-mob="place"]{font-size:36px !important;letter-spacing:.04em !important}
  [data-mob="precision"]{font-size:23px !important}
  [data-mob="close-a"]{font-size:31px !important}
  [data-mob="close-b"]{font-size:16px !important}
  [data-mob="window-fig"]{width:86% !important}
  [data-mob="earrings-fig"]{width:90% !important}
}

/* short viewports (landscape phones, low desktop windows) */
@media (max-height:560px){
  [data-open-a]{width:clamp(118px,12vw,170px) !important}
}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  [data-open-img],[data-open-a],[data-open-b],[data-open-c]{animation:none !important}
}