/* ==========================================================================
   Nicole & Jesper, Idöborg.
   Designspråk efter OBSESD Weddings (Filip Felbar): benvitt papper,
   högkontrastserif i displayformat, små svarta etiketter, utspridda
   fotoplattor och mjuka suddiga toningar.
   Grafisk profil från save the date-kortet: blått #344564, Marcellus
   för all text, handritad namnlogga och konturbild av brudparet.
   ========================================================================== */

:root{
  --bone:  #FBFAF2;
  --paper: #F6F2E8;
  --ink:   #344564;
  --deep:  #26334A;
  --mute:  rgba(52,69,100,.64);
  --line:  rgba(52,69,100,.17);
  --line-2:rgba(251,250,242,.18);

  --serif: "Marcellus", "Times New Roman", serif;
  --sans:  "Marcellus", Georgia, serif;

  --pad: 20px;
  --tap: 54px;
  --maxw: 1320px;
  --read: 640px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5; font-weight:400;
  letter-spacing:0; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:400; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.read{ max-width:var(--read); margin:0 auto; }

/* ---------- Typroller ---------------------------------------------------- */
.word{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(40px,11.5vw,176px); line-height:.94; letter-spacing:.01em;
  text-align:center; text-transform:uppercase;
}
.say{
  font-family:var(--serif);
  font-size:clamp(23px,4.6vw,46px); line-height:1.2; letter-spacing:0;
  text-align:center; text-wrap:balance;
}
.head{
  font-family:var(--serif);
  font-size:clamp(24px,3.6vw,36px); line-height:1.15; letter-spacing:0;
}
.body{ color:var(--mute); font-size:15px; line-height:1.55; }
.tag{
  font-family:var(--sans); font-size:10.5px; 
  text-transform:uppercase; letter-spacing:.08em; color:var(--mute);
}

/* ---------- Laddare ------------------------------------------------------ */
#load{
  position:fixed; inset:0; z-index:200; background:var(--bone);
  display:flex; align-items:center; justify-content:center;
}
#load .lname{ width:min(62vw,340px); height:auto; opacity:.9; }
#load .n{ position:absolute; bottom:8vh; left:0; right:0; text-align:center; font-family:var(--serif); font-size:clamp(34px,8vw,64px); line-height:1; margin:0; }
#load .n sup{ font-family:var(--sans); font-size:14px;  vertical-align:super; margin-left:4px; }
#load.done{ transform:translateY(-101%); transition:transform 1s var(--ease); }

/* ---------- Sidhuvud ----------------------------------------------------- */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) var(--pad) 14px;
  mix-blend-mode:normal;
}
.bar::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, var(--bone) 30%, rgba(251,250,242,0));
  opacity:0; transition:opacity .4s var(--ease);
}
.bar.stuck::before{ opacity:1; }
.bar .mark img{ height:28px; width:auto; display:block; }
.bar .mark{ transition:opacity .5s var(--ease); }
body:has(.opening) .bar:not(.show-mark) .mark{ opacity:0; pointer-events:none; }
.bar .lft{ font-family:var(--sans); font-size:13px; background:none; border:0; color:var(--ink); cursor:pointer; padding:8px 0; letter-spacing:.06em; text-transform:uppercase; }

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--bone);
  font-family:var(--sans); font-size:10.5px; 
  text-transform:uppercase; letter-spacing:.08em;
  padding:9px 14px; border:1px solid var(--ink); cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.pill:hover{ background:transparent; color:var(--ink); }
.pill--light{ background:transparent; color:var(--ink); }
.pill--light:hover{ background:var(--ink); color:var(--bone); }
.pill--big{ font-size:12px; padding:16px 30px; min-height:var(--tap); }
.pill--onink{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.pill--onink:hover{ background:transparent; color:var(--bone); }

/* ---------- Meny --------------------------------------------------------- */
#menu{
  position:fixed; inset:0; z-index:99; background:var(--bone);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
  pointer-events:none;
}
#menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
#menu a{
  font-family:var(--serif); font-size:clamp(38px,11vw,84px); line-height:1.12;
  display:block; opacity:.35; transition:opacity .4s var(--ease);
}
#menu a:hover,#menu a[aria-current]{ opacity:1; }
#menu .foot{ position:absolute; left:var(--pad); right:var(--pad); bottom:34px; display:flex; justify-content:space-between; }

/* ---------- Öppning: konturbild + namnlogga, som save the date-kortet ------ */
.opening{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(84px + env(safe-area-inset-top)) var(--pad) 56px;
}
.opening .couple{ width:min(60vw,300px); height:auto; }
.opening h1{ margin:clamp(6px,1.6vw,16px) 0 0; line-height:0; }
.opening .names{ width:min(82vw,500px); height:auto; }
.opening .when{ margin:clamp(18px,3vw,30px) 0 0; font-size:14px; letter-spacing:.16em; text-transform:uppercase; }
.opening .where{ margin:8px 0 0; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }

/* ---------- Hero --------------------------------------------------------- */
.hero{ position:relative; padding:clamp(150px,22vw,250px) 0 0; text-align:center; }
.stage{ position:relative; }
/* Ordet ligger överst, fotot bakom. Bokstäverna får aldrig hamna under bilden. */
.stage .word{ position:relative; z-index:3; }
/* Wrappern håller centreringen, kortet inuti är fritt för parallaxen. */
.hero .card-pos{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(34vw,300px); z-index:1;
}
.hero .card{
  position:relative; width:100%; aspect-ratio:3/4;
  overflow:hidden; background:var(--paper);
}
/* Tunn pappersslöja så den svarta serifen håller sig läsbar mot mörka foton. */
.hero .card::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(251,250,242,.30) 0%,
    rgba(251,250,242,.14) 42%,
    rgba(251,250,242,.30) 100%);
}
.hero .card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; filter:blur(16px); transform:scale(1.06);
  transition:opacity 1.5s var(--ease), filter 1.5s var(--ease), transform 2.4s var(--ease);
}
.hero .card img.on{ opacity:1; filter:blur(0); transform:scale(1); }
.hero .meta{
  display:flex; justify-content:center; gap:9px; flex-wrap:wrap; align-items:center;
  margin-top:26px; position:relative; z-index:3;
}
.hero .meta span{ font-family:var(--sans); font-size:12.5px; }
.hero .meta i{ font-style:normal; color:var(--mute); opacity:.5; }
/* Bara heron med fotokortet behöver plats under ordet. */
.hero:has(.card) .meta{ margin-top:clamp(130px,21vw,240px); }

/* ---------- Sektioner ---------------------------------------------------- */
section{ padding:clamp(70px,13vw,150px) 0; }
.rule{ height:1px; background:var(--line); }

/* Utspridd fotokollage, signaturen */
.scatter{ position:relative; display:grid; grid-template-columns:repeat(12,1fr); gap:10px; margin-top:clamp(40px,8vw,90px); }
.scatter figure{ margin:0; overflow:hidden; background:var(--paper); }
.scatter img{ width:100%; height:100%; object-fit:cover; }
.scatter .a{ grid-column:1/8;  aspect-ratio:3/4; }
.scatter .b{ grid-column:8/13; aspect-ratio:4/5; margin-top:clamp(40px,12vw,140px); }
.scatter .c{ grid-column:2/12; aspect-ratio:16/10; margin-top:clamp(20px,5vw,60px); }

/* Full bredd, mörk platta */
.band{ background:var(--deep); color:var(--bone); padding:0; position:relative; }
.band img{ width:100%; height:min(74vh,660px); object-fit:cover; }
.band figcaption{
  position:absolute; left:var(--pad); bottom:22px;
  font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(251,250,242,.72);
}

/* Programmet */
.days{ display:flex; gap:0; border-top:1px solid var(--line); margin-top:clamp(34px,6vw,64px); }
.day{
  flex:1; min-height:var(--tap); padding:16px 8px; background:none; cursor:pointer;
  border:0; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  font-family:var(--serif); font-size:19px; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.day:last-child{ border-right:0; }
.day small{ font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--mute); }
.day[aria-selected="true"]{ background:var(--ink); color:var(--bone); }
.day[aria-selected="true"] small{ color:rgba(251,250,242,.62); }

.ledger{ list-style:none; margin:0; padding:0; }
.ledger li{
  display:flex; gap:18px; align-items:baseline;
  padding:17px 2px; border-bottom:1px solid var(--line);
}
.ledger .t{ flex:0 0 68px; font-family:var(--sans); font-size:12px; color:var(--mute); font-variant-numeric:tabular-nums; }
.ledger .v{ flex:1; font-family:var(--serif); font-size:clamp(19px,2.4vw,26px); line-height:1.2; }
.ledger .k{ flex:0 0 130px; font-family:var(--sans); font-size:12px; color:var(--mute); }

/* Karta */
.map-grid{ display:grid; gap:clamp(34px,5vw,64px); margin-top:clamp(30px,5vw,56px); align-items:start; }
.map{ position:relative; }
.map img{ width:100%; height:auto; }
/* Blå = samlingspunkt, ljus = boende. Samma nyckel som i Idoborg karta.pdf. */
.pin,.dot{
  min-width:var(--pin); height:var(--pin); padding:0 6px; border-radius:calc(var(--pin) / 2);
  background:var(--ink); color:var(--bone); border:0; box-shadow:0 0 0 1.5px var(--bone);
  font-family:var(--sans); font-size:11px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.pin.bo,.dot.bo{ background:var(--bone); color:var(--ink); box-shadow:0 0 0 1.5px var(--ink); }
.pin{ --pin:22px; position:absolute; transform:translate(-50%,-50%); cursor:pointer; }
.pin::before{ content:""; position:absolute; inset:-8px; }
.pin[aria-pressed="true"]{ z-index:2; }
.pin[aria-pressed="true"]::after{
  content:attr(data-name); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  white-space:nowrap; background:var(--bone); color:var(--ink); padding:7px 11px; font-size:13px;
}
.spots{ display:grid; gap:36px; }
.spots h3{ font-family:var(--serif); font-size:clamp(22px,2.4vw,28px); padding-bottom:12px; border-bottom:1px solid var(--line); }
.spots ul{ list-style:none; margin:0; padding:0; }
.spots li{ display:flex; align-items:flex-start; gap:14px; padding:13px 2px; border-bottom:1px solid var(--line); font-family:var(--serif); font-size:19px; line-height:1.3; }
.spots .dot{ --pin:22px; flex:0 0 auto; margin-top:1px; }
.spots small{ display:block; font-size:14px; color:var(--mute); margin-top:3px; }

/* ---------- Formulär ----------------------------------------------------- */
.field{ margin-bottom:26px; }
.field > label,.field > .lbl{
  display:block; font-family:var(--sans); font-size:11px; 
  text-transform:uppercase; letter-spacing:.08em; color:var(--mute); margin-bottom:10px;
}
input[type=text],input[type=email],textarea,select{
  width:100%; min-height:var(--tap); padding:12px 0;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  background:none; color:var(--ink);
  font-family:var(--serif); font-size:22px; letter-spacing:-.01em; appearance:none;
}
textarea{ min-height:96px; resize:vertical; line-height:1.35; }
input:focus,textarea:focus,select:focus{ outline:0; border-bottom-color:var(--ink); }
select{ background:none; }

.pick{ display:flex; gap:10px; }
.pick label{
  flex:1; min-height:var(--tap); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); cursor:pointer; font-family:var(--serif); font-size:21px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips label{
  min-height:42px; display:inline-flex; align-items:center; padding:9px 15px;
  border:1px solid var(--line); cursor:pointer;
  font-family:var(--sans); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pick input,.chips input{ position:absolute; opacity:0; pointer-events:none; }
.pick label:has(input:checked),.chips label:has(input:checked){ background:var(--ink); border-color:var(--ink); color:var(--bone); }

.msg{ padding:16px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); margin-bottom:26px; display:none; font-family:var(--serif); font-size:21px; }
.msg.show{ display:block; }
.msg--err{ color:#8C2F22; border-color:#8C2F22; }

/* ---------- Galleri ------------------------------------------------------ */
.tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:clamp(30px,5vw,56px); }
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.grid figure{ margin:0; aspect-ratio:3/4; overflow:hidden; background:var(--paper); }
.grid img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter 1.2s var(--ease); }
.grid button{ all:unset; display:block; cursor:pointer; width:100%; height:100%; }
.grid figure:hover img{ transform:scale(1.035); }

.drop{
  display:block; border:1px dashed var(--line); background:var(--paper);
  padding:44px 20px; text-align:center; cursor:pointer;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.drop:hover{ border-color:var(--ink); }
.drop strong{ display:block; font-family:var(--serif); font-size:26px; font-weight:400; }
.queue{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.queue li{ display:flex; align-items:center; gap:14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.queue img{ width:46px; height:60px; object-fit:cover; flex:none; }
.queue .rm{ margin-left:auto; border:0; background:none; color:var(--mute); cursor:pointer; font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.bar-p{ height:1px; background:var(--line); margin-top:20px; }
.bar-p i{ display:block; height:100%; background:var(--ink); width:0; transition:width .4s var(--ease); }

.lightbox{ position:fixed; inset:0; z-index:150; background:rgba(23,25,27,.96); display:none; align-items:center; justify-content:center; padding:18px; }
.lightbox.show{ display:flex; }
.lightbox img{ max-width:100%; max-height:86vh; }
.lightbox .x{ position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px; }

/* ---------- QR ----------------------------------------------------------- */
.qr{ text-align:center; padding:40px 0; border-bottom:1px solid var(--line); }
.qr svg{ width:190px; height:190px; margin:0 auto 18px; }
.qr .u{ font-family:var(--sans); font-size:12px; color:var(--mute); word-break:break-all; margin:6px 0 16px; }

/* ---------- Rörelse ------------------------------------------------------ */
[data-fade]{ opacity:0; }
[data-blur]{ opacity:0; filter:blur(14px); transform:scale(1.04); }
.line-mask{
  overflow:hidden; display:block;
  /* Luft i masken så prickarna över Ö och stapelbokstävernas
     nedre delar inte klipps bort. */
  padding:.16em 0 .20em; margin:-.16em 0 -.20em;
}
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (prefers-reduced-motion:reduce){
  [data-fade],[data-blur]{ opacity:1 !important; filter:none !important; transform:none !important; }
  #load{ display:none; }
  *{ transition-duration:.01ms !important; }
}

/* ---------- Dator -------------------------------------------------------- */
@media (min-width:760px){
  :root{ --pad:34px; }
  body{ font-size:17px; }
  .hero{ padding-top:min(34vh,270px); }
  .hero .card-pos{ width:min(24vw,330px); }
  .scatter .a{ grid-column:2/7; }
  .scatter .b{ grid-column:8/12; }
  .scatter .c{ grid-column:4/9; }
  .map-grid{ grid-template-columns:7fr 5fr; }
  .pin{ --pin:27px; font-size:12px; }
  .grid{ grid-template-columns:repeat(4,1fr); }
  .ledger .v{ font-size:clamp(22px,2.2vw,30px); }
  #menu a{ font-size:clamp(48px,7vw,96px); }
}

@media print{ .bar,#menu,#load,.pill{ display:none !important; } body{ background:#fff; } }