/* ─────────────────────────────────────────────────────────────
   SCRIPT-TEST — Pinyon Script som accent.
   Laddas ENDAST av index-script.html, ovanpå styles.css.
   Originalet (index.html + styles.css) är orört.

   Idiom från referenserna: serif-VERSALER + ETT script-ord.
   Vi skriptar därför bara utvalda accenter — inte brödtext.
   ───────────────────────────────────────────────────────────── */

:root { --script: "Pinyon Script", "TheBrachen", cursive; }

/* ── Filmkorn över HELA sidan (även digitala delar) ──
   Fixed overlay med SVG-brus (monokromt). pointer-events:none
   så klick/scroll går rakt igenom. ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.12;
  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* ── Edge-to-edge på mobil: fullskärms-block följer hela den
   dynamiska viewporten (bakom adressfält/hemindikator), och
   sidan får gå ut i safe zones (viewport-fit=cover i <head>). ── */
@supports (height: 100dvh) {
  @media (max-width: 760px) {
    .hero,
    .hero--kuvert,
    .sec--blommor,
    .osa--curtain,
    #detaljer,
    .vinyl__sticky {
      min-height: 100dvh;
    }
  }
}

/* ── SVG-spriten (not-symbolerna) tog upp plats som ett tomt block
   överst på sidan → vit remsa ovanför hero-bilden. Göm den utan
   display:none så att <use>-referenserna fortfarande fungerar. ── */
.svg-sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

/* ── Hero: "Amanda &" i versaler, "Richard" i script ──
   (som "See Studio" / Maison "Laurent"). Script har låg x-höjd,
   så den sätts större och utan versaler för att väga upp raden. */
.hero__names .hero__line2 {
  font-family: var(--script);
  text-transform: none;
  font-size: 1.24em;
  line-height: 0.86;
  letter-spacing: 0;
  padding-left: 0.28em;
  margin-top: 0.06em;
  color: var(--fg);
}
/* Låt "&" i rad 1 följa med som liten script-accent */
.hero__names .amp {
  font-family: var(--script);
  font-size: 1.05em;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════
   OSA ÖVER GARDINBILDEN — innehållet ligger på bilden, vit text.
   background cover = bilden zoomas för att fylla hela sektionen.
   ═══════════════════════════════════════════════════════════════ */
/* Gardinen ligger i ett eget lager med låst höjd (--curtain-h sätts i
   main.js = sektionens höjd med flikarna stängda). Annars zoomar cover om
   bilden när en flik fälls ut och sektionen växer. Utfällt: bilden står
   still upptill och tonar ut i mörkgrönt under. */
.osa--curtain {
  position: relative;
  background: #182018;
}
.osa--curtain::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--curtain-h, 100%);
  background:
    linear-gradient(rgba(22, 30, 24, 0.18), rgba(22, 30, 24, 0.24)),
    url("../assets/herobilder/gardin-hjarta.jpg") center / cover no-repeat;
}
.osa--curtain:has(.fold[open])::before {
  background:
    linear-gradient(to bottom, transparent 55%, #182018),
    linear-gradient(rgba(22, 30, 24, 0.18), rgba(22, 30, 24, 0.24)),
    url("../assets/herobilder/gardin-hjarta.jpg") center / cover no-repeat;
}
.osa--curtain .section__grid { position: relative; z-index: 1; }
.osa--curtain .index { color: rgba(255, 255, 255, 0.65); }
.osa--curtain .index::after { background: rgba(255, 255, 255, 0.35); }
.osa--curtain .label,
.osa--curtain .field label,
.osa--curtain .field__label { color: rgba(255, 255, 255, 0.82); }
.osa--curtain .display,
.osa--curtain .prose,
.osa--curtain .prose strong,
.osa--curtain .choice__opt,
.osa--curtain .fold__summary { color: #fff; }
.osa--curtain .prose strong { font-weight: 500; }
.osa--curtain .footnote,
.osa--curtain .fold__intro { color: rgba(255, 255, 255, 0.75); }

/* Formulär ljust */
.osa--curtain .rsvp input[type="text"],
.osa--curtain .rsvp input[type="email"],
.osa--curtain .rsvp select,
.osa--curtain .rsvp textarea {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
.osa--curtain .rsvp input::placeholder,
.osa--curtain .rsvp textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
.osa--curtain .rsvp input:focus,
.osa--curtain .rsvp select:focus,
.osa--curtain .rsvp textarea:focus { border-bottom-color: #fff; }
.osa--curtain .rsvp select { color: #fff; }
.osa--curtain .rsvp select option { color: #1c261f; }   /* dropdown-lista på vitt */
.osa--curtain .choice__opt input { accent-color: #fff; }
.osa--curtain .rsvp__ifyes { border-color: rgba(255, 255, 255, 0.3); }

/* Nedfällbara + knapp */
.osa--curtain .fold { border-color: rgba(255, 255, 255, 0.3); }
.osa--curtain .fold__mark::before,
.osa--curtain .fold__mark::after { background: #fff; }
.osa--curtain .btn { background: #fff; color: #1c261f; border-color: #fff; }
.osa--curtain .btn:hover { background: transparent; color: #fff; }


/* ═══════════════════════════════════════════════════════════════
   HERO PÅ KUVERTET + INTRO PÅ BLOMMORNA.
   Ljusa bilder → mörk text kvar, bara en svag ljus slöja för läsbarhet.
   background cover = bilden zoomas för att fylla sektionen.
   ═══════════════════════════════════════════════════════════════ */
.hero--kuvert {
  background:
    linear-gradient(rgba(255, 253, 248, 0.30), rgba(255, 253, 248, 0.34)),
    url("../assets/herobilder/kuvert.jpg") center / cover no-repeat;
}
/* Mobil: stående kuvert-version, fyller hela viewporten */
@media (max-width: 760px) {
  .hero--kuvert {
    background-image:
      linear-gradient(rgba(255, 253, 248, 0.30), rgba(255, 253, 248, 0.34)),
      url("../assets/herobilder/kuvert-mobile.jpg");
    min-height: 100svh;
  }
}
.sec--blommor {
  background:
    linear-gradient(rgba(255, 253, 248, 0.44), rgba(255, 253, 248, 0.44)),
    url("../assets/herobilder/blommor.jpg") center / cover no-repeat;
}
/* Mobil: stående blomster-version, fyller hela viewporten */
@media (max-width: 760px) {
  .sec--blommor {
    background-image:
      linear-gradient(rgba(255, 253, 248, 0.44), rgba(255, 253, 248, 0.44)),
      url("../assets/herobilder/blommor-mobile.jpg");
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TIDSLINJEN PÅ OLJEMÅLNINGEN (schema-sektionen).
   Ljus/mellanljus målning → mörk text kvar, cream-slöja för läsbarhet.
   Lägg filen på: assets/herobilder/tradgard-oil.jpg
   ═══════════════════════════════════════════════════════════════ */
/* Solid mörkgrönt (samma som OSA-toningen, 07 och footern) — lugn bakgrund
   bakom tidslinjens alla detaljer. Målningen ligger kvar i assets om vi vill tillbaka. */
.sec--tradgard { background: #182018; }
/* Vit text i tidslinjen */
.sec--tradgard .index { color: rgba(255, 255, 255, 0.7); }
.sec--tradgard .index::after { background: rgba(255, 255, 255, 0.4); }
.sec--tradgard .label { color: rgba(255, 255, 255, 0.85); }
.sec--tradgard .display,
.sec--tradgard .moment__time,
.sec--tradgard .moment__body h3 { color: #fff; }
.sec--tradgard .moment__body p { color: rgba(255, 255, 255, 0.85); }
.sec--tradgard .moments::before { background: rgba(255, 255, 255, 0.35); }
.sec--tradgard .moment__dot { background: #182018; border-color: rgba(255, 255, 255, 0.6); }
.sec--tradgard .moment__dot span { background: #fff; }
.sec--tradgard .moment--after .moment__dot span { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }


/* ═══════════════════════════════════════════════════════════════
   OSA-STÄMPELN — ersätter text-knappen i högra hörnet.
   ═══════════════════════════════════════════════════════════════ */
.osa-corner--stamp {
  border: 0;
  background: none;
  backdrop-filter: none;
  padding: 0;
  width: clamp(72px, 9vw, 116px);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.osa-corner--stamp img { display: block; width: 100%; height: auto; }
.osa-corner--stamp:hover { background: none; transform: rotate(1.5deg) scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .osa-corner--stamp { transition: none; }
  .osa-corner--stamp:hover { transform: none; }
}


/* ── Välkomst-headline: rena serifer (inga stilistiska glyfer) ── */
.welcome__lead { font-feature-settings: normal; }

/* ── Mobil-radbrytning (döljs på desktop) ── */
.br-mobile { display: none; }
@media (max-width: 760px) { .br-mobile { display: inline; } }

/* ── OSA fyller hela viewporten på mobil ── */
@media (max-width: 760px) { .osa--curtain { min-height: 100svh; } }

/* ═══════════════════════════════════════════════════════════════
   DETALJER — tre-kolumns text (rent digitalt block).
   ═══════════════════════════════════════════════════════════════ */
.detailcols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
.detailcol__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem;
  font-feature-settings: normal;
}
.detailcol p {
  font-size: 0.95rem;
  line-height: 1.62;
  max-width: 30ch;
  color: var(--fg);
}
.detailcol .tlink { font-size: 0.95rem; }
@media (max-width: 720px) {
  .detailcols { grid-template-columns: 1fr; gap: clamp(1.75rem, 6vw, 2.5rem); }
  .detailcol p { max-width: 42ch; }
}
/* Detaljer = hel viewport-sektion, innehållet vertikalt centrerat */
#detaljer { min-height: 100svh; display: flex; align-items: center; }
#detaljer .section__grid { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   VINYL-SEKTION — scroll-scrubbad skiva som glider ur fodralet.
   CSS-transform (translateX + rotate) driven av --p (0→1) från JS.
   Matt, taktil, tryckt känsla — ingen glossig 3D.
   ═══════════════════════════════════════════════════════════════ */
.vinyl { position: relative; height: 240vh; }
.vinyl__sticky {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(3rem, 8vh, 6rem) var(--pad);
  text-align: center;
}
.vinyl__eyebrow { margin: 0; }
.vinyl__title { margin: 0; }

.vinyl__stage {
  position: relative;
  width: min(92vw, 600px);
  height: min(52vw, 316px);
  margin: clamp(0.5rem, 2vw, 1.5rem) 0;
}

/* Fodralet — gräddvitt papper, embossad kant */
.sleeve {
  position: absolute; left: 0; top: 0;
  width: min(52vw, 316px); height: 100%;
  z-index: 3;
  background: #f4f1ea;
  border: 1px solid var(--hair);
  box-shadow: inset 0 0 0 6px #fbf9f4, inset 0 0 0 7px var(--hair);
  display: grid; place-items: center;
}
.sleeve::after {   /* antydd öppning till höger */
  content: ""; position: absolute; top: 8%; right: -1px; height: 84%; width: 10px;
  background: linear-gradient(90deg, rgba(30,27,24,0.10), transparent);
}
.sleeve__mark {
  font-family: var(--script); font-size: clamp(1.6rem, 5vw, 2.6rem);
  color: #cfc9bd;
}

/* Skivan — ligger bakom fodralet, glider ut åt höger */
.record {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;               /* cirkel = stagehöjd */
  aspect-ratio: 1 / 1; width: auto;
  z-index: 2;
  transform: translateX(calc(var(--p, 0) * 90%));
  will-change: transform;
}
.record__disc {
  width: 100%; height: 100%; border-radius: 50%;
  transform: rotate(calc(var(--p, 0) * 360deg));
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #12160f 0 1.5px, #1c221a 1.5px 3.5px);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.35);
  display: grid; place-items: center;
  position: relative;
}
.record__disc.is-spinning { animation: vinyl-spin 1.9s linear infinite; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }

.record__label {
  width: 38%; height: 38%; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #f6f3ec, #e7e1d5);
  display: grid; place-items: center; align-content: center;
  gap: 0.05em; text-align: center; color: #2d3a2b;
  box-shadow: inset 0 0 0 1px rgba(45,58,43,0.18);
}
.record__side {
  font-family: var(--display); font-size: 0.62em; letter-spacing: 0.05em;
  line-height: 1; opacity: 0.75;
}
.record__names { font-family: var(--script); font-size: 1.05em; line-height: 1; }
.record__date {
  font-family: var(--display); font-size: 0.34em; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.65;
}
.record__hole {
  position: absolute; width: 3.5%; height: 3.5%; border-radius: 50%;
  background: #0c0f0a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

/* Skivan under uppspelning: mjuk flip vid B-byte */
.record.is-flipping .record__disc { animation: vinyl-flip 0.7s cubic-bezier(.5,0,.2,1); }
@keyframes vinyl-flip { 0%{transform:rotateY(0)} 100%{transform:rotateY(360deg)} }

/* Play-knapp — centrerad UNDER skivan, tonar in när skivan är ute */
.vinyl__play {
  transform: scale(0.7);
  width: clamp(52px, 12vw, 74px); height: clamp(52px, 12vw, 74px);
  border-radius: 50%; border: 0; cursor: pointer;
  background: #2d3a2b; color: #f4f1ea;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  z-index: 4;
}
.vinyl__play svg { width: 42%; height: 42%; display: block; }
.vinyl.is-ready .vinyl__play { opacity: 1; transform: scale(1); pointer-events: auto; }
.vinyl__play:hover { background: #26311f; }

/* Vänd-till-B prompt */
.vinyl__flip {
  border: 1px solid var(--fg); background: rgba(255,253,248,0.6);
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg);
  padding: 0.7rem 1.3rem; cursor: pointer; border-radius: 999px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .5s ease, transform .5s ease, background .3s ease;
}
.vinyl__flip em { font-family: var(--script); font-style: normal; text-transform: none; font-size: 1.5em; }
.vinyl.is-playing .vinyl__flip { opacity: 1; transform: none; pointer-events: auto; }
.vinyl__flip:hover { background: var(--fg); color: var(--bg); }

/* Spotify-rad under skivan — dold tills uppspelning startat, tonar in */
.vinyl__spotify {
  width: min(88vw, 400px);
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}
.vinyl.is-playing .vinyl__spotify { opacity: 1; pointer-events: auto; }
.vinyl__spotify iframe { display: block; border-radius: 12px; }

/* Mobil: mindre skiva (rullade annars utanför skärmen) + kortare scrub */
@media (max-width: 760px) {
  .vinyl { height: 170vh; }
  .vinyl__stage { width: 94vw; height: min(44vw, 280px); }
  .sleeve { width: min(44vw, 280px); }
}

.vinyl__hint {
  animation: seqpulse 2.4s ease-in-out infinite;
}
.vinyl.is-ready .vinyl__hint, .vinyl.is-playing .vinyl__hint { opacity: 0; visibility: hidden; }

/* Persistent mute — fast i hörnet, dyker upp när ljud startat */
.vinyl__mute {
  position: fixed; z-index: 120;
  left: clamp(1.1rem, 4vw, 2.2rem); bottom: clamp(1.1rem, 4vw, 2.2rem);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--fg); background: rgba(255,253,248,0.82);
  backdrop-filter: blur(5px); cursor: pointer; color: var(--fg);
  display: grid; place-items: center;
  opacity: 0; transform: scale(0.85); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, background .3s ease;
}
.vinyl__mute.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.vinyl__mute svg { width: 20px; height: 20px; }
.vinyl__mute:hover { background: var(--fg); color: var(--bg); }

/* Reduced motion: skivan redan ute, play synlig, ingen scrub/spin */
@media (prefers-reduced-motion: reduce) {
  .vinyl { height: auto; }
  .vinyl__sticky { position: static; }
  .record { transform: translateX(90%); }
  .record__disc { transform: none; }
  .record__disc.is-spinning { animation: none; }
  .vinyl__play { opacity: 1; transform: scale(1); pointer-events: auto; }
  .vinyl__hint { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ÖNSKA EN LÅT (Spotify) — frontend-widget. Backend krävs (se README).
   ═══════════════════════════════════════════════════════════════ */
.songreq { max-width: 620px; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.songreq__lead { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--fg); max-width: 46ch; }
.songreq__form { display: flex; gap: 0.75rem; margin-top: 1.6rem; align-items: flex-end; }
.songreq__form input {
  flex: 1; min-width: 0; background: transparent; border: 0;
  border-bottom: 1px solid var(--hair); color: var(--fg);
  font-family: var(--sans); font-size: 1.05rem; padding: 0.6rem 0;
  transition: border-color .25s ease;
}
.songreq__form input:focus { outline: 0; border-color: var(--fg); }
.songreq__form input::placeholder { color: var(--dim); opacity: 0.7; }
.songreq__form .btn { flex-shrink: 0; padding: 0.85rem 1.9rem; }

.songreq__results { list-style: none; margin-top: 1.75rem; }
.songreq__result {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 0; border-top: 1px solid var(--hair);
}
.songreq__cover {
  width: 52px; height: 52px; flex-shrink: 0; object-fit: cover;
  background: #ece7dd; box-shadow: 0 2px 8px rgba(30,27,24,0.12);
}
.songreq__meta { flex: 1; min-width: 0; }
.songreq__title { font-size: 1rem; line-height: 1.2; }
.songreq__artist { font-size: 0.86rem; color: var(--dim); margin-top: 0.15rem; }
.songreq__add {
  flex-shrink: 0; border: 1px solid var(--fg); background: transparent;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg);
  padding: 0.6rem 1rem; cursor: pointer; border-radius: 999px;
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.songreq__add:hover { background: var(--fg); color: var(--bg); }
.songreq__add[disabled] { opacity: 0.5; cursor: default; }
.songreq__add.is-added { background: var(--accent); border-color: var(--accent); color: #fff; }

.songreq__status { margin-top: 1.2rem; font-size: 0.95rem; min-height: 1.3em; }
.songreq__status.err { color: #b0553f; }
.songreq__status.ok { color: var(--accent); }
.songreq__note { margin-top: 1.75rem; font-size: 0.82rem; font-style: italic; color: var(--dim); }
.songreq__heart { color: var(--accent); font-style: normal; }

/* ── 07 · Önskelåtar på gardinens mörkgröna — OSA, 07 och footern flyter ihop ── */
.sec--skog { background: #182018; }
.sec--skog .index { color: rgba(255, 255, 255, 0.6); }
.sec--skog .index::after { background: rgba(255, 255, 255, 0.3); }
.sec--skog .label { color: rgba(255, 255, 255, 0.82); }
.sec--skog .display { color: #fff; }
.sec--skog .songreq__lead { color: rgba(255, 255, 255, 0.9); }
.sec--skog .songreq__form input {
  border-bottom-color: rgba(255, 255, 255, 0.35); color: #fff;
}
.sec--skog .songreq__form input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; }
.sec--skog .songreq__form input:focus { border-color: #fff; }
.sec--skog .songreq__form .btn { background: #fff; color: #1f2717; border-color: #fff; }
.sec--skog .songreq__form .btn:hover { background: transparent; color: #fff; }
.sec--skog .songreq__result { border-top-color: rgba(255, 255, 255, 0.18); }
.sec--skog .songreq__title { color: #fff; }
.sec--skog .songreq__artist { color: rgba(255, 255, 255, 0.6); }
.sec--skog .songreq__add { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.sec--skog .songreq__add:hover { background: #fff; color: #1f2717; }
.sec--skog .songreq__note { color: rgba(255, 255, 255, 0.6); }
.sec--skog .songreq__heart { color: #a9c07e; }

/* ═══════════════════════════════════════════════════════════════
   AVSLUTANDE FOOTER — mossgrön, G-klav + liten hälsning.
   ═══════════════════════════════════════════════════════════════ */
.closing--moss {
  background: #182018;                 /* samma mörkgröna som gardinens toning (OSA) och sektion 07 */
  padding: clamp(3rem, 8vw, 5.5rem) var(--pad);
}
.closing--moss .closing__clef {
  height: clamp(72px, 11vw, 140px);
  color: #e8e4d8; opacity: 0.92;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.closing--moss .closing__quote {
  color: #f4f1ea;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  max-width: 28ch;
}

/* ═══════════════════════════════════════════════════════════════
   ÖNSKELISTAN (onskelista.html) — gift registry
   ═══════════════════════════════════════════════════════════════ */
.registry {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--pad) clamp(4rem, 10vw, 7rem);
}
.registry__head { text-align: center; }
.registry__title { margin-top: 0.6rem; }
.registry__lead {
  margin: 1.2rem auto 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
}
.registry__back {
  display: inline-block; margin-top: 1.4rem;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); border-bottom: 1px solid var(--hair); padding-bottom: 2px;
}
.registry__back:hover { color: var(--fg); }

/* Två val */
.regchoice {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.regchoice__card {
  border: 1px solid var(--hair);
  background: #faf8f3;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem);
  cursor: pointer; text-align: center;
  display: grid; gap: 0.9rem;
  transition: border-color .3s ease, background .3s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.regchoice__card:hover { border-color: var(--fg); transform: translateY(-2px); }
.regchoice__card.is-active { border-color: var(--fg); background: #f4f1ea; }
.regchoice__big {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  letter-spacing: 0.02em; line-height: 1.15; color: var(--fg);
}
.regchoice__sub { font-size: 0.9rem; color: var(--dim); line-height: 1.5; max-width: 30ch; margin: 0 auto; }
@media (max-width: 640px) { .regchoice { grid-template-columns: 1fr; } }

/* Produktgrid */
.regview { margin-top: clamp(2.5rem, 6vw, 4rem); }
.reggrid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
@media (max-width: 900px) { .reggrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reggrid { grid-template-columns: 1fr; } }

.regcard { display: flex; flex-direction: column; }
.regcard__imgwrap {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #fff;
  display: grid; place-items: center;
  padding: clamp(1.5rem, 12%, 3.5rem);   /* luft runt produkten */
}
.regcard__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.regcard__ribbon {
  position: absolute; inset: auto 0 0 0;
  background: rgba(51, 61, 43, 0.92); color: #f4f1ea;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  text-align: center; padding: 0.55rem 0;
  opacity: 0; transition: opacity .4s ease;
}
.regcard.is-reserved .regcard__ribbon { opacity: 1; }
.regcard.is-reserved .regcard__img { filter: grayscale(0.9) opacity(0.55); }

.regcard__title {
  font-family: var(--display); font-weight: 400;
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.03em;
  margin-top: 1.1rem; font-feature-settings: normal;
}
.regcard__note { font-size: 0.9rem; color: var(--dim); margin-top: 0.35rem; line-height: 1.5; }
.regcard__meta { display: flex; gap: 1rem; align-items: baseline; margin-top: 0.5rem; }
.regcard__price { font-size: 0.85rem; color: var(--dim); }
.regcard__link { font-size: 0.9rem; }

.regcard__actions { margin-top: 0.9rem; }
.regcard__btn {
  border: 1px solid var(--fg); background: transparent; color: var(--fg);
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.65rem 1.4rem; cursor: pointer; border-radius: 999px;
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.regcard__btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.regcard__btn:disabled { cursor: default; border-color: var(--accent); color: var(--accent); }

.regcard__confirm {
  border-top: 1px solid var(--hair); padding-top: 0.9rem; display: grid; gap: 0.7rem;
}
.regcard__confirm[hidden], .regcard__btn[hidden] { display: none; }
.regcard__q { font-size: 0.92rem; }
.regcard__q em { font-style: italic; }
.regcard__name {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hair);
  font-family: var(--sans); font-size: 0.92rem; color: var(--fg); padding: 0.4rem 0;
}
.regcard__name:focus { outline: 0; border-color: var(--fg); }
.regcard__row { display: flex; gap: 0.6rem; }
.regcard__yes, .regcard__no {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.6rem 1.1rem; cursor: pointer; border-radius: 999px;
}
.regcard__yes { border: 1px solid var(--fg); background: var(--fg); color: var(--bg); }
.regcard__yes:hover:not(:disabled) { opacity: 0.85; }
.regcard__no { border: 1px solid var(--hair); background: transparent; color: var(--dim); }

.registry__status { margin-top: 1.6rem; font-size: 0.95rem; min-height: 1.3em; text-align: center; }
.registry__status.ok { color: var(--accent); }
.registry__status.err { color: #b0553f; }

/* Smekmånads-vyn */
.reghoney { text-align: center; }
.reghoney__text { max-width: 44ch; margin: 0 auto; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.65; }
.reghoney__box {
  margin: 2.25rem auto 0; max-width: 340px;
  border: 1px solid var(--hair); background: #faf8f3;
  padding: 2rem 1.5rem; display: grid; gap: 0.5rem;
}
.reghoney__number { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: 0.06em; }
.reghoney__note { font-size: 0.85rem; color: var(--dim); font-style: italic; }

/* ── Script-accentord var som helst (t.ex. i välkomstraden) ── */
.scriptword {
  font-family: var(--script);
  text-transform: none;
  font-size: 1.18em;
  letter-spacing: 0;
  padding: 0 0.06em;
}

/* ── Stora sektionsrubriker (.display) → helt i Pinyon script ──
   Script har låg x-höjd, så större storlek + gemener (ej versaler). */
.display--script {
  font-family: var(--script);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.0;
  font-size: clamp(2.7rem, 6.8vw, 5.2rem);
  margin-top: 1.2rem;
}

/* ── Signaturen under välkomsttexten → helt i script ── */
.sign {
  font-family: var(--script);
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
}
.sign .rswash { font-family: inherit; }

/* ── Etikett "Vi gifter oss" byts INTE — versal-etiketterna
   är sidans rytm. Script hålls till namn + signatur. ── */

/* ── Avslutande citat: låt "sista dansen" vara kvar i kursiv
   Garamond (script på långa rader blir svårläst). ── */


/* ═══════════════════════════════════════════════════════════════
   GIFTS-BLOCK — som BEE STUDIO-kortet.
   Serif-versaler + script-accent, inramad bild, sidoetiketter.
   ═══════════════════════════════════════════════════════════════ */
.giftblock { text-align: center; position: relative; }
/* Sektionssiffra + etikett som flyter i hörnet på full-bleed-block (gåvor) */
.index--float {
  position: absolute; z-index: 3; margin: 0;
  top: clamp(1.4rem, 5vw, 2.8rem);
  left: var(--pad);
  text-align: left;
}
.index--float .index::after { display: none; }   /* ingen hårlinje på bilden */
.index--float .label { margin-top: 0.6rem; }
.giftblock__inner { max-width: 760px; margin: 0 auto; }

.giftline {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(1.7rem, 4.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.giftline .scriptword {
  font-family: var(--script);
  text-transform: none;
  font-size: 1.18em;
  letter-spacing: 0;
  padding: 0 0.06em;
}
.giftline--top { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.giftline--bot { margin-top: clamp(1.6rem, 4vw, 2.6rem); }

/* Ramen — dubbel passe-partout med mjuk skugga */
.giftframe {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.75rem, 4vw, 2.75rem);
}
.giftframe__label { white-space: nowrap; }
.giftframe__label--l { justify-self: end; }
.giftframe__label--r { justify-self: start; }

.giftframe__mat {
  padding: clamp(12px, 2.6vw, 26px);
  background: #faf8f3;
  border: 1px solid var(--hair);
  box-shadow: 0 12px 38px rgba(30, 27, 24, 0.10);
}
.giftframe__photo {
  width: clamp(190px, 34vw, 250px);
  aspect-ratio: 4 / 5;
  border: 6px solid #fff;
  outline: 1px solid var(--hair);
  background: #ece7dd;   /* platshållare — byt mot <img> */
  display: grid;
  place-items: center;
  overflow: hidden;
}
.giftframe__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.giftframe__ph {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
}
.gift__note { margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 42ch; color: var(--dim); }
.gift__note .tlink { color: var(--fg); }

@media (max-width: 560px) {
  .giftframe { gap: 0.5rem; }
  .giftframe__label { font-size: 9px; }
}


/* ═══════════════════════════════════════════════════════════════
   SCROLL-KUVERT — bildsekvens scrubbat på scroll (Apple-stil).
   Sektionens höjd = scroll-längden. Canvas är "sticky".
   ═══════════════════════════════════════════════════════════════ */
.seq { position: relative; height: 320vh; }
.seq__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
}
.seq__canvas {
  width: min(78vw, 620px);
  aspect-ratio: 4 / 3;
  display: block;
}
.seq__hint {
  position: absolute;
  bottom: clamp(2rem, 7vh, 4.5rem);
  left: 50%; transform: translateX(-50%);
  animation: seqpulse 2.4s ease-in-out infinite;
}
@keyframes seqpulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .seq__hint { animation: none; } }


/* ═══════════════════════════════════════════════════════════════
   BILDER — band (full bredd, beskuret) + hela bilder (ram-motiv).
   ═══════════════════════════════════════════════════════════════ */

/* Full-bleed band, beskuret — fyller hela blocket (kuvert, gardin, blommor). */
.imgband { display: block; width: 100%; overflow: hidden; }
.imgband img {
  display: block; width: 100%;
  height: clamp(340px, 54vw, 700px);
  object-fit: cover;
}

/* Full-bleed hel bild — ram-motiv som ska synas i sin helhet, kant i kant. */
.imgfull { display: block; width: 100%; }
.imgfull img { display: block; width: 100%; height: auto; }

/* Gåvor: full-bleed ram-bild med text PÅ bilden — en rad ÖVER, en UNDER ramen. */
.giftimg { position: relative; display: block; width: 100%; }
.giftimg img { display: block; width: 100%; height: auto; }
.giftimg__line {
  position: absolute; left: 0; right: 0;
  text-align: center; padding: 0 1rem;
}
.giftimg__line--top { top: 19%; }
.giftimg__line--bot { bottom: 11%; }
.giftimg__line .giftline {
  font-size: clamp(1.45rem, 3.8vw, 3rem);
  line-height: 1.1; margin: 0;
}
.giftimg__note {
  margin: 0.9em auto 0;
  max-width: 48ch;
  font-size: clamp(0.98rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--dim);
}
.giftimg__note .tlink { color: var(--fg); font-size: 1em; }
@media (max-width: 760px) {
  .giftimg__line--top { top: 23%; }
  .giftimg__line--bot { bottom: 9%; }
  .giftimg__note { max-width: 30ch; }
}