/* ============================================================
   Li'ili'i Links — Permanent Jewelry
   Palette taken from the brand: blush table cloth, cream banner,
   warm gold metal, near-black wordmark.
   ============================================================ */

:root{
  --cream:    #fbf7f2;
  --cream-2:  #f4ece2;
  --shell:    #fffdfa;
  --ink:      #2a2321;
  --ink-soft: #5c514b;
  --muted:    #94867d;

  --blush:    #e4a48c;
  --blush-dk: #c07a5e;
  --blush-lt: #f6ddd0;

  --gold:     #b1904f;
  --gold-lt:  #e0c69a;

  --cocoa:    #3a2c26;
  --cocoa-dk: #2a1f1a;

  --line:     rgba(42,35,33,.13);

  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-sans:  "Jost", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --pad:  clamp(1.25rem, 5vw, 3rem);
  --sect: clamp(4.5rem, 10vw, 8rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-sans);
  font-weight:300;
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,iframe{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--f-serif);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.005em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(3.1rem,1.7rem + 6vw,6.5rem); }
h2{ font-size:clamp(2.15rem,1.4rem + 3vw,3.7rem); }
h3{
  font-family:var(--f-sans); font-weight:400;
  font-size:clamp(1.1rem,1.05rem + .35vw,1.3rem);
  letter-spacing:.01em;
}
em{ font-style:italic; color:var(--blush-dk); }
p{ margin:0 0 1.15em; }
a{ color:var(--blush-dk); text-decoration-color:var(--blush-lt); text-underline-offset:.22em; }
a:hover{ color:var(--ink); }
strong,b{ font-weight:500; }

.wrap{ width:min(1180px,100% - var(--pad)*2); margin-inline:auto; }
.wrap--narrow{ width:min(760px,100% - var(--pad)*2); }
.center{ text-align:center; }
.muted{ color:var(--muted); }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--cocoa); color:#fff; padding:.75rem 1.25rem; }
.skip:focus{ left:.5rem; top:.5rem; }
:where(a,button,summary):focus-visible{ outline:2px solid var(--blush-dk); outline-offset:3px; border-radius:2px; }

.eyebrow{
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--blush-dk); font-weight:400; margin:0 0 1.2em;
}
.lede{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); color:var(--ink-soft); max-width:54ch; }
.lede--center{ margin-inline:auto; }
.note{ text-align:center; color:var(--muted); font-size:.95rem; font-style:italic; margin:2.75rem auto 0; max-width:60ch; }
.note--left{ text-align:left; margin-left:0; }
.signature{ font-family:var(--f-serif); font-style:italic; font-size:1.35rem; color:var(--blush-dk); }

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 2rem;
  background:var(--cocoa); color:#fdf9f4;
  font-family:var(--f-sans); font-size:.78rem; font-weight:400;
  letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--cocoa); border-radius:999px;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.btn:hover{ background:var(--cocoa-dk); border-color:var(--cocoa-dk); color:#fff; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--light{ background:var(--blush); border-color:var(--blush); color:var(--cocoa-dk); }
.btn--light:hover{ background:var(--blush-lt); border-color:var(--blush-lt); color:var(--cocoa-dk); }
.btn--ghost-light{ color:#f7ebe2; border-color:rgba(247,235,226,.42); }
.btn--ghost-light:hover{ color:#fff; border-color:#fff; }
.btn--sm{ padding:.6rem 1.35rem; font-size:.7rem; }

.cta-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.25rem; }
.cta-row--center{ justify-content:center; }

/* ── Brand mark ────────────────────────────────────────── */
.brand{
  display:inline-flex; align-items:center; gap:.7rem;
  text-decoration:none; color:inherit; line-height:1;
}
.brand__mark{ width:2.05rem; height:1.6rem; flex:none; color:currentColor; }
.brand__type{ display:flex; flex-direction:column; gap:.22rem; }
.brand__name{ font-family:var(--f-serif); font-size:1.5rem; letter-spacing:.01em; position:relative; }
.brand__name .spark{ font-style:normal; font-size:.42em; vertical-align:.9em; margin-left:.1em; color:var(--blush-dk); }
.brand__sub{ font-size:.62rem; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); padding-left:.1em; }

/* ── Nav ───────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  padding-block:1rem;
  transition:background .35s, box-shadow .35s, padding .35s;
}
.nav.is-stuck{
  background:rgba(251,247,242,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding-block:.5rem;
}

/* At the top the bar sits transparent over the dark hero, so everything in it
   flips to light — plus a soft scrim, so legibility doesn't depend on whatever
   happens to be in that corner of the hero photo. */
.nav::before{
  content:""; position:absolute; inset:0 0 auto; z-index:-1;
  height:calc(100% + 3.5rem);   /* runs past the bar so the fade never shows as an edge */
  background:linear-gradient(to bottom,
    rgba(30,20,16,.72) 0%,
    rgba(30,20,16,.58) 45%,
    rgba(30,20,16,0) 100%);
  opacity:1; transition:opacity .35s;
  pointer-events:none;
}
.nav.is-stuck::before{ opacity:0; }

.nav__in{ display:flex; align-items:center; gap:2rem; }
.nav__links{ display:flex; gap:1.8rem; margin-left:auto; }
.nav__links a{
  color:var(--ink); text-decoration:none; font-size:.75rem;
  letter-spacing:.15em; text-transform:uppercase; position:relative; padding-block:.2rem;
  transition:color .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--blush-dk); transition:width .3s;
}
.nav__links a:hover::after{ width:100%; }

.nav__toggle{ display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:.5rem; width:2.6rem; }
.nav__toggle span{ display:block; height:1px; background:var(--ink); margin:6px 0; transition:transform .3s, opacity .3s, background .35s; }

/* ── Light treatment while the bar is over the hero ────── */
.nav:not(.is-stuck){ color:#f9f1e9; }
.nav:not(.is-stuck) .brand{ color:#f9f1e9; }
.nav:not(.is-stuck) .brand__sub{ color:rgba(249,241,233,.72); }
.nav:not(.is-stuck) .brand__name .spark{ color:var(--blush-lt); }
.nav:not(.is-stuck) .nav__links a{ color:#f9f1e9; }
.nav:not(.is-stuck) .nav__links a::after{ background:var(--blush-lt); }
.nav:not(.is-stuck) .nav__toggle span{ background:#f9f1e9; }
.nav:not(.is-stuck) .btn--sm{
  background:transparent; color:#f9f1e9; border-color:rgba(249,241,233,.5);
}
.nav:not(.is-stuck) .btn--sm:hover{ background:rgba(249,241,233,.14); color:#fff; border-color:#fff; }

/* Once the mobile menu is open the bar has its own cream panel, so go dark
   again even though the page may still be scrolled to the top. */
.nav.is-open{ color:var(--ink); }
.nav.is-open::before{ opacity:0; }
.nav.is-open .brand{ color:var(--ink); }
.nav.is-open .brand__sub{ color:var(--muted); }
.nav.is-open .brand__name .spark{ color:var(--blush-dk); }
.nav.is-open .nav__toggle span{ background:var(--ink); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column;
  background:rgba(251,247,242,.98); backdrop-filter:blur(14px);
  padding:.75rem var(--pad) 1.75rem; border-top:1px solid var(--line);
}
.nav__mobile a{
  color:var(--ink); text-decoration:none; padding:.8rem 0;
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line);
}

@media (max-width:960px){
  .nav__links,.nav .btn--sm{ display:none; }
  .nav__toggle{ display:block; }
  .nav__mobile:not([hidden]){ display:flex; }
  .nav.is-open{ background:rgba(251,247,242,.98); backdrop-filter:blur(14px); }
}

/* ── Hero ──────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-block:9rem 5rem; overflow:hidden;
  background:var(--cocoa-dk);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(32,22,18,.86) 0%, rgba(32,22,18,.62) 44%, rgba(32,22,18,.18) 100%),
    linear-gradient(to top, rgba(32,22,18,.72), transparent 55%);
}
.hero__in{ position:relative; z-index:1; color:#f9f1e9; }
.hero .eyebrow{ color:var(--blush-lt); }
.hero h1{ max-width:8ch; text-shadow:0 2px 40px rgba(0,0,0,.3); }

/* The hero photo has the two bracelets starting at ~42% of the frame, so the
   text column is kept narrow enough to leave them uncovered. */
.hero .lede{ color:rgba(249,241,233,.85); max-width:32ch; }
.hero .cta-row{ max-width:32ch; }
.hero .btn{ background:var(--blush); border-color:var(--blush); color:var(--cocoa-dk); }
.hero .btn:hover{ background:var(--blush-lt); border-color:var(--blush-lt); }
.hero .btn--ghost{ background:transparent; color:#f9f1e9; border-color:rgba(249,241,233,.42); }
.hero .btn--ghost:hover{ color:#fff; border-color:#fff; }

.facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:clamp(1.75rem,5vw,3.5rem);
  margin:3.25rem 0 0; padding:1.75rem 0 0;
  border-top:1px solid rgba(249,241,233,.2);
}
.facts li{ display:flex; flex-direction:column; }
.facts strong{ font-family:var(--f-serif); font-size:2rem; font-weight:300; color:var(--blush-lt); line-height:1; }
.facts strong em{ font-size:.44em; font-style:normal; color:inherit; margin-left:.15em; letter-spacing:.05em; }
.facts span{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(249,241,233,.62); margin-top:.55rem; }

/* On phones the photo is cropped to a tall sliver and the text spans the full
   width, so drop the copy to the bottom and let the jewelry breathe above it. */
@media (max-width:760px){
  .hero{ align-items:flex-end; padding-block:7rem 4.5rem; }
  .hero h1,.hero .lede,.hero .cta-row{ max-width:none; }
  .hero__media img{ object-position:58% center; }
  .hero__media::after{
    background:linear-gradient(to top, rgba(32,22,18,.92) 0%, rgba(32,22,18,.72) 45%, rgba(32,22,18,.35) 100%);
  }
  .facts{ margin-top:2.25rem; padding-top:1.25rem; gap:1.5rem 2rem; }
}

.hero__scroll{ position:absolute; left:50%; bottom:2rem; z-index:1; width:1px; height:52px; background:rgba(249,241,233,.25); overflow:hidden; }
.hero__scroll span{ position:absolute; inset:0; background:var(--blush-lt); animation:scrolldot 2.4s ease-in-out infinite; }
@keyframes scrolldot{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); } }

/* ── Marquee ───────────────────────────────────────────── */
.marquee{ background:var(--blush); color:var(--cocoa-dk); padding:.85rem 0; overflow:hidden; white-space:nowrap; }
.marquee__track{
  display:inline-flex; align-items:center; gap:1.5rem; padding-left:1.5rem;
  font-family:var(--f-serif); font-size:1.15rem; font-style:italic;
  animation:slide 52s linear infinite;
}
.marquee__track i{ font-style:normal; font-size:.62rem; opacity:.55; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ── Sections ──────────────────────────────────────────── */
.section{ padding-block:var(--sect); }
.section--tint{ background:var(--cream-2); }
.section__head{ text-align:center; max-width:64ch; margin:0 auto clamp(3rem,6vw,4.5rem); }

.grid2{ display:grid; gap:clamp(2.5rem,6vw,5rem); grid-template-columns:1fr 1fr; align-items:center; }
.grid2--wide{ grid-template-columns:1.15fr 1fr; align-items:start; }
@media (max-width:880px){
  .grid2{ grid-template-columns:1fr; }
  .grid2--flip > *:first-child{ order:2; }
}

/* ── Frames ────────────────────────────────────────────── */
.frame{ margin:0; position:relative; background:var(--cream-2); }
.frame img{ width:100%; height:auto; border-radius:2px; }
.frame__video{
  width:100%; height:auto; display:block; border-radius:2px;
  aspect-ratio:4/5; object-fit:cover; background:var(--cream-2);
}
.frame figcaption{
  margin-top:.9rem; font-size:.85rem; font-style:italic;
  color:var(--muted); text-align:center;
}
.frame--sticky img{ position:sticky; top:6rem; }

.pair{ display:grid; gap:clamp(1rem,3vw,2rem); grid-template-columns:1fr 1fr; }
@media (max-width:660px){ .pair{ grid-template-columns:1fr; } }

/* ── Steps ─────────────────────────────────────────────── */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:2.25rem; }
.steps li{ padding-top:1.6rem; border-top:1px solid var(--line); }
.steps__n{ display:block; font-family:var(--f-serif); font-size:2.3rem; color:var(--blush); line-height:1; margin-bottom:.6rem; }
.steps h3{ margin-bottom:.4rem; }
.steps p{ color:var(--ink-soft); font-size:.98rem; margin:0; max-width:46ch; }

/* ── Charm list ────────────────────────────────────────── */
.charmlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.charmlist li{
  padding:.95rem 0; border-bottom:1px solid var(--line);
  color:var(--ink-soft); font-size:.98rem; line-height:1.6;
}
.charmlist b{
  display:inline-block; min-width:9.5rem; margin-right:.5rem;
  font-family:var(--f-serif); font-size:1.2rem; font-weight:400;
  font-style:italic; color:var(--ink);
}
@media (max-width:520px){
  .charmlist b{ display:block; min-width:0; margin:0 0 .15rem; }
}

/* ── Gallery ───────────────────────────────────────────── */
.gallery{
  display:grid; gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
  margin-bottom:3rem;
}
.tile{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px; background:var(--cream-2); display:block; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.tile:hover img{ transform:scale(1.055); }

/* ── Hours / address / map ─────────────────────────────── */
.hours{ margin:2rem 0; border-top:1px solid var(--line); }
.hours__row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.hours__day{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.hours__time{ font-family:var(--f-serif); font-size:1.55rem; color:var(--ink); }
.addr{ font-size:1rem; line-height:1.8; color:var(--ink-soft); }

.map-wrap{ margin-top:clamp(3rem,6vw,4.5rem); aspect-ratio:16/7; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.map-wrap iframe{ width:100%; height:100%; border:0; filter:saturate(.72) contrast(.96); }
@media (max-width:660px){ .map-wrap{ aspect-ratio:4/3; } }

/* ── FAQ ───────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.4rem 2.5rem 1.4rem 0;
  position:relative; font-size:1.05rem; color:var(--ink); transition:color .25s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--blush-dk); }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1px solid var(--blush-dk); border-bottom:1px solid var(--blush-dk);
  transform:rotate(45deg); transition:transform .3s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq details p{ margin:0 0 1.5rem; color:var(--ink-soft); max-width:62ch; padding-right:2rem; }

/* ── CTA ───────────────────────────────────────────────── */
.cta{
  background:
    radial-gradient(110% 130% at 20% 0%, #4a352c 0%, transparent 62%),
    linear-gradient(155deg,#3a2c26,#241a16);
  color:#f7ebe2; padding-block:clamp(4.5rem,9vw,7rem); text-align:center;
}
.cta .eyebrow{ color:var(--blush); }
.cta h2{ color:#faf1e9; font-style:italic; font-size:clamp(1.7rem,1.1rem + 2.4vw,2.9rem); }
.cta .lede{ color:rgba(247,235,226,.76); }

/* ── Footer ────────────────────────────────────────────── */
.foot{ background:var(--cocoa-dk); color:rgba(247,235,226,.72); padding-block:3.5rem; }
.foot__in{ display:grid; gap:2.25rem; grid-template-columns:1fr auto 1fr; align-items:center; }
.foot .brand{ color:#faf1e9; }
.foot .brand__sub{ color:rgba(247,235,226,.5); }
.foot .brand__name .spark{ color:var(--blush); }
.foot__tag{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; margin:.85rem 0 0; color:rgba(247,235,226,.5); }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.3rem; justify-content:center; max-width:30rem; }
.foot__nav a{ color:rgba(247,235,226,.8); text-decoration:none; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.foot__nav a:hover{ color:var(--blush); }
.foot__legal{ margin:0; font-size:.76rem; line-height:1.9; text-align:right; color:rgba(247,235,226,.5); }
@media (max-width:880px){
  .foot__in{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .foot__legal{ text-align:center; }
}

/* ── Reveal on scroll ──────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__scroll{ display:none; }
}