/* ---------------------------------------------------------------
   Ola & Piotr — 25.09.2026
   Paleta wyciągnięta bezpośrednio z zaproszenia "save the date".
   --------------------------------------------------------------- */

:root{
  --ink:        #262a20;   /* głęboka oliwka z tła zdjęcia   */
  --ink-2:      #3d4334;
  --ink-soft:   #6c7360;
  --paper:      #f2efe6;   /* krem z karty                    */
  --paper-2:    #e4dcc8;
  --sage:       #6e7a5f;
  --gold:       #a7815c;   /* ciepły brąz z liści             */
  --gold-lt:    #daa172;
  --line:       rgba(38,42,32,.16);

  --maxw: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height:1.65;
  font-optical-sizing:auto;
}

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

a{ color:var(--ink); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:focus-visible, summary:focus-visible, .btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper); padding:.7rem 1rem;
  font-family:var(--sans);
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ============================== HERO ============================== */

/* Wąskie ekrany: całe zdjęcie u góry, treść pod spodem.
   Szerokie: zdjęcie jako tło, treść w lewej kolumnie. */
.hero{
  position:relative;
  background:var(--ink);
}

.hero__photo{
  position:relative;
  width:100%;
  aspect-ratio:1/1;              /* ilustracja z aplikacji, 1254x1254 */
  background-image:url("/slub/para.png");
  background-size:cover;
  background-position:center 30%;
}
.hero__photo::after{
  content:"";
  position:absolute; inset:auto 0 -1px 0;
  height:38%;
  background:linear-gradient(to top, var(--ink) 6%, rgba(21,24,17,0) 100%);
}

.hero__veil{ display:none; }

@media (min-width:900px){
  .hero{
    min-height:min(94svh, 48vw, 820px);
    display:flex; align-items:flex-end;
    overflow:hidden;
  }
  .hero__photo{
    position:absolute; inset:0;
    width:auto; aspect-ratio:auto;
    background-position:center 4%;
  }
  .hero__photo::after{ display:none; }
  .hero__veil{
    display:block;
    position:absolute; inset:0;
    background:
      linear-gradient(to top, rgba(21,24,17,.9) 0%, rgba(21,24,17,.5) 32%, rgba(21,24,17,0) 64%),
      linear-gradient(to bottom, rgba(21,24,17,.4) 0%, rgba(21,24,17,0) 34%),
      linear-gradient(to right, rgba(21,24,17,.82) 0%, rgba(21,24,17,.4) 44%, rgba(21,24,17,0) 76%);
  }
}

.hero__inner{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(1.5rem,5vw,3rem) var(--gap) clamp(2.2rem,5vw,3.5rem);
  color:var(--paper);
}
@media (min-width:900px){
  .hero__inner{ padding-top:clamp(3rem,7vw,5rem); }
}

.hero__names{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:clamp(.72rem,.62rem + .45vw,.95rem);
  color:var(--paper-2);
  margin:0 0 .9rem;
}
.hero__names span{ color:var(--gold-lt); letter-spacing:0; padding:0 .12em; }

.hero__date{
  font-family:var(--sans);
  font-weight:800;
  font-size:clamp(2.3rem, 1.2rem + 5.4vw, 5rem);
  line-height:.95;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
.hero__date .d{ color:var(--gold-lt); }

.hero__lead{
  font-size:clamp(1rem,.95rem + .3vw,1.2rem);
  max-width:34ch;
  margin:1.1rem 0 0;
  color:#eae6da;
}

/* odliczanie — nawiązanie do dużej liczby z karty */
.count{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.1rem,3.5vw,2.6rem);
  margin:clamp(1.6rem,4vw,2.6rem) 0 0;
  border-top:1px solid rgba(242,239,230,.28);
  padding-top:1.2rem;
  max-width:36rem;
}
.count__cell b{
  display:block;
  font-family:var(--sans);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.9rem,1.1rem + 3vw,3rem);
  line-height:1;
  color:var(--paper);
}
.count__cell span{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-lt);
  margin-top:.45rem;
}
.count__done{
  font-family:var(--sans); font-weight:600;
  color:var(--gold-lt); margin:1.6rem 0 0;
}

.hero__nav{
  display:flex; flex-wrap:wrap; gap:1.4rem;
  margin-top:clamp(1.6rem,4vw,2.4rem);
  font-family:var(--sans); font-weight:500; font-size:.9rem;
}
.hero__nav a{
  color:var(--paper); text-decoration:none;
  border-bottom:1px solid rgba(218,161,114,.75);
  padding-bottom:.2rem;
}
.hero__nav a:hover{ border-color:var(--paper); }

/* ============================ TYPOGRAFIA ========================== */

.h2{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.35rem);
  line-height:1.1;
  margin:0 0 clamp(1.4rem,3vw,2.2rem);
}

section{ padding:clamp(3.2rem,7vw,6rem) var(--gap); }
section > .h2, .plan__list, .places__grid, .faq__list, .faq__more{
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
}

/* ============================= PLAN DNIA ========================== */

.plan{ border-bottom:1px solid var(--line); }
.plan > .h2{ text-align:center; }

.plan__list{
  list-style:none; margin:0 auto; padding:0;
  display:grid; gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .plan__list{ grid-template-columns:repeat(3,1fr); } }

.plan__item{
  background:var(--paper);
  padding:clamp(1.4rem,3vw,2rem) clamp(1.1rem,2.4vw,1.8rem);
}
.plan__item--next{ background:var(--paper-2); }

.plan__when{ margin:0 0 .55rem; }
.plan__when b{
  font-family:var(--sans); font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.6rem,1.1rem + 1.6vw,2.1rem);
  line-height:1; display:block; color:var(--ink);
}
.plan__when span{
  display:block; margin-top:.35rem;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.plan__item h3{
  font-family:var(--sans); font-weight:600; font-size:1.12rem;
  margin:0 0 .25rem; letter-spacing:-.005em;
}
.plan__where{ margin:0; color:var(--ink-soft); font-size:.97rem; }

/* ============================= MIEJSCA ============================ */

.places{ background:var(--paper); }
.h2--wide{ max-width:var(--maxw); }

.places__grid{
  display:grid;
  gap:clamp(2.2rem,4vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .places__grid{ grid-template-columns:1fr 1fr; gap:clamp(2rem,3.5vw,3.5rem); }
}

.place{
  display:flex; flex-direction:column;
  border-top:3px solid var(--sage);
  padding-top:1.5rem;
}
.place--alt{ border-top-color:var(--gold); }

.place__day{
  margin:0 0 .7rem;
  font-family:var(--sans); font-weight:600;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage);
}
.place--alt .place__day{ color:var(--gold); }

.place__title{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);
  line-height:1.04; letter-spacing:-.02em;
  margin:0 0 .7rem;
}
.place__venue{
  margin:0; font-size:1.12rem; font-weight:600;
}
.place__addr{ margin:.15rem 0 0; color:var(--ink-soft); }
.place__time{
  margin:.7rem 0 0;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
}

.place__map{
  margin:1.5rem 0 0;
  border:1px solid var(--line);
  background:var(--paper-2);
  aspect-ratio:16/10;
}
.place__map iframe{ width:100%; height:100%; border:0; }

.place__actions{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin:1rem 0 0;
}

.btn{
  display:inline-block;
  font-family:var(--sans); font-weight:600; font-size:.88rem;
  text-decoration:none;
  padding:.68rem 1.05rem;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink);
  transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:var(--ink-2); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }

.how__h{
  font-family:var(--sans); font-weight:600;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:2rem 0 .9rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}

.how{ margin:0; }
.how dt{
  font-family:var(--sans); font-weight:600; font-size:1rem;
  margin:0 0 .2rem;
}
.how dd{
  margin:0 0 1.1rem;
  color:#3f463a;
  max-width:52ch;
}
.how dd:last-child{ margin-bottom:0; }

/* ============================= HISTORIA =========================== */

.story{
  background:var(--ink);
  color:var(--paper);
  display:grid;
  gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:860px){
  .story{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    max-width:none;
  }
}
.story__text{ max-width:60ch; margin-left:auto; }
.story .h2{ color:var(--paper); }
.story p{ color:#ddd8c9; }
.story p + p{ margin-top:1.1rem; }

.story__fig{ margin:0; max-width:34rem; }
.story__fig img{
  width:100%; height:auto;
  filter:saturate(.94);
}

/* =============================== FAQ ============================== */

.faq{ background:var(--paper-2); }

.faq__list{
  border-top:1px solid var(--line);
}
.faq details{
  border-bottom:1px solid var(--line);
}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:1.05rem 2.5rem 1.05rem 0;
  position:relative;
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(1rem,.95rem + .25vw,1.1rem);
  line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  position:absolute; right:.4rem; top:1.5rem;
  width:11px; height:11px;
  border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.75rem; }
.faq summary:hover{ color:var(--gold); }

.faq__a{ padding:0 2.5rem 1.3rem 0; }
.faq__a p{ margin:0; max-width:66ch; color:#3f463a; }

.faq__more{
  margin:2rem auto 0;
  color:var(--ink-soft);
  font-style:italic;
}

/* ============================== STOPKA ============================ */

.foot{
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  padding:clamp(2.6rem,6vw,4rem) var(--gap);
}
.foot__names{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);
  letter-spacing:-.02em;
  margin:0;
}
.foot__meta{
  margin:.6rem 0 0;
  font-family:var(--sans); font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lt);
}
.foot__link{ margin:1.4rem 0 0; font-size:.95rem; }
.foot__link a{ color:#ddd8c9; }
.foot__admin{ margin:2rem 0 0; font-family:var(--sans); font-size:.82rem; }
.foot__admin a{
  display:inline-block;
  color:var(--paper);
  text-decoration:none;
  border:1px solid rgba(242,239,230,.46);
  padding:.55rem .85rem;
}
.foot__admin a:hover{ border-color:var(--gold-lt); color:var(--gold-lt); }


/* ====================== ZAMIAST KWIATOW ======================= */

.karma{
  background:var(--ink);
  color:var(--paper);
  padding-top:clamp(2.6rem,6vw,4.5rem);
  padding-bottom:clamp(2.6rem,6vw,4.5rem);
}
.karma__box{
  max-width:46rem;
  margin:0 auto;
  text-align:center;
}
.karma__h{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(1.35rem,1.05rem + 1.4vw,2.05rem);
  line-height:1.12; letter-spacing:-.02em;
  margin:.9rem 0 .8rem;
  text-wrap:balance;
}
.karma p{ margin:0; color:#ddd8c9; }
.karma strong{ color:var(--gold-lt); font-weight:600; }
.karma .sprig{ color:var(--gold-lt); }

/* ========================= OZDOBNIK =========================== */

.sprig{
  display:block;
  width:clamp(9rem,22vw,13rem);
  height:auto;
  margin:0 auto;
  color:var(--gold);
}
.sprig-wrap{
  max-width:var(--maxw);
  margin:0 auto clamp(1.1rem,2.5vw,1.8rem);
}
.sprig-wrap .sprig{ margin-left:0; }
@media (max-width:700px){
  .sprig-wrap .sprig{ margin-left:auto; }
}