/* =====================================================================
   Diana & Kacper — strona ślubna
   Układ: desktop ≥ 1100 px · tablet 601–1099 px · telefon ≤ 600 px
   ===================================================================== */

/* ------------------------------- Fonty ------------------------------- */
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/geist-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/geist-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/geist-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/geist-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ------------------------------ Zmienne ------------------------------ */
:root {
  --ink: #33270f;
  --line: #755e00;
  --cream: #eee7db;
  --field: #f4ede1;
  --yellow: #f7e474;
  --pale: #fcf297;

  --pad: 52px;          /* margines boczny strony */
  --gap: 52px;          /* odstęp pionowy między sekcjami */
  --inner: 80px;        /* wewnętrzny margines ramek */
  --stroke: 1.5px;

  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-sub: 22px;
  --fs-display: 88px;
  --fs-hero: 96px;
  --fs-date: 20px;
  --btn-h: 40px;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ------------------------------- Baza -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 500 var(--fs-body)/1.2 var(--sans);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, dl, dd, ul, address { margin: 0; padding: 0; font: inherit; font-style: normal; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[id] { scroll-margin-top: 24px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--ink); color: var(--cream); border-radius: 8px; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* Tło: kremowe u góry, płynnie przechodzi w żółte (jak w projekcie). */
.page {
  position: relative;
  background: linear-gradient(180deg, rgba(247, 228, 116, 0) 24.5%, var(--yellow) 75%) var(--cream);
  overflow-x: clip;
}

/* ----------------------------- Przyciski ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 4px 12px 4px 24px;
  border: var(--stroke) solid var(--ink); border-radius: 8px; background: transparent;
  line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn svg { flex: none; transition: transform .25s var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--field); }
.btn:hover .chev { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--square { border-radius: 0; }
.btn--cta { width: 210px; min-height: 44px; padding: 6px 16px; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ----------------------------- Nagłówek ------------------------------ */
.site-header { position: relative; }
.site-header__inner {
  display: grid; grid-template-columns: 210px 1fr 210px; align-items: center;
  max-width: 1440px; margin: 0 auto; padding: var(--pad);
}
.logo { font: 400 40px/31.2px var(--serif); justify-self: start; }
.nav { display: flex; justify-content: center; gap: 32px; line-height: 31.2px; }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: var(--stroke);
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav__cta { display: none; }
.site-header__actions { display: flex; justify-content: flex-end; gap: 12px; }
.burger {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0;
  border: var(--stroke) solid var(--ink); background: none; color: var(--ink); cursor: pointer;
}
.burger svg { width: 18px; height: 14px; }   /* ikona ma stały rozmiar, zmienia się tylko ramka */
.birds { position: absolute; pointer-events: none; mix-blend-mode: multiply; max-width: none; }
.birds--header, .birds--footer, .birds--mobile-church { display: none; }

/* ------------------------------- Hero -------------------------------- */
.hero { position: relative; padding-bottom: 80px; overflow-x: clip; }
.hero__stage {
  container-type: inline-size;
  position: relative; max-width: 1440px; height: 700px; margin: 0 auto; padding-top: 118px;
}
.hero__art { position: absolute; max-width: none; pointer-events: none; }
.hero__art--church { width: 625px; top: 204px; left: calc(9.08cqw - 477.7px); }
.hero__art--house  { width: 872px; top: 306px; left: calc(81.55cqw - 63.3px); }
.birds--top   { width: 111px; top: 45px;  left: 462px; }
.birds--left  { width: 287px; top: 90px;  left: 15px; }
.birds--right { width: 287px; top: 190px; right: 105px; transform: scaleX(-1); }

.hero__title { position: relative; width: fit-content; margin: 0 auto; text-align: center; }
.hero__date { font-size: var(--fs-date); line-height: 56.8px; text-transform: none; }
h1 { font: 400 var(--fs-hero)/.976 var(--serif); }
.hero__lead {
  position: relative; width: min(1072px, 100% - 208px); margin: 65px auto 0;
  font-size: var(--fs-lead); line-height: 1.28; text-align: center; text-wrap: pretty;
}

/* Portrety — odklejają się po najechaniu kursorem, tak jak znaczki. */
.portrait { position: absolute; width: 176px; }
.portrait--him { left: calc(50% - 390px); top: 187px; }
.portrait--her { left: calc(50% + 191px); top: -27px; }

.countdown {
  width: fit-content; margin: 52px auto 0; padding: 8px;
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
}
.countdown__inner {
  display: flex; gap: 10px; padding: 5px 12px;
  box-shadow: inset 0 0 0 var(--stroke) var(--ink); border-radius: 4px;
}
.countdown__value { font-variant-numeric: tabular-nums; min-width: 99px; }
.hero__mobile-art { display: none; }

/* ------------------------------ Sekcje ------------------------------- */
.section { max-width: 1440px; margin: var(--gap) auto 0; padding: 0 var(--pad); }
#historia { margin-top: 0; }

.frame { position: relative; }
/* Linie rysowane „do środka" (jak w Figmie), żeby nie zmieniały wymiarów. */
.frame--double { padding: 8px; box-shadow: inset 0 0 0 var(--stroke) var(--line); }
.frame--double > .frame__body { box-shadow: inset 0 0 0 var(--stroke) var(--line); border-radius: 8px; }
.frame--single { box-shadow: inset 0 0 0 var(--stroke) var(--line); }
.frame--card { background: var(--yellow); }
.frame--pale { background: var(--pale); }
.frame + .frame { margin-top: var(--gap); }

.frame__body {
  display: flex; flex-direction: column; align-items: center; gap: 80px;
  padding: 80px var(--inner);
}
.frame__body--story { gap: 40px; }
.frame__body--compact { gap: 40px; padding-inline: var(--pad); }
.frame__body--wide { padding: 80px; }

.display { font: 400 var(--fs-display)/.976 var(--serif); text-align: center; text-wrap: balance; }
.display--xl { font-size: var(--fs-hero); }
.display--with-stamp { position: relative; width: fit-content; max-width: 100%; }
.eyebrow { text-align: center; }
.copy { text-align: center; }
.br-desktop { display: none; }
@media (min-width: 1100px) { .br-desktop { display: inline; } }
.copy--left { text-align: left; line-height: 1.3125; }
.subhead { font-size: var(--fs-sub); line-height: 1.3; }
.chapter { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }

/* ---------------------------- Harmonogram ---------------------------- */
.schedule { display: flex; flex-direction: column; gap: 24px; width: 100%; line-height: 1.3125; }
.schedule__row { display: grid; grid-template-columns: 184px 1fr; gap: 24px; }
.schedule__row dd { display: flex; flex-direction: column; gap: 12px; }
.schedule__row dd strong { font-weight: 500; }
.schedule__row dd span { opacity: .7; }

/* ------------------------- Karty z adresem --------------------------- */
.place { overflow: hidden; }
.frame__body--place { align-items: flex-start; padding: 52px; gap: 0; }
.place__info { position: relative; z-index: 2; width: min(568px, 100%); }
.stamps { position: relative; display: flex; align-items: flex-start; gap: 8px; height: 119px; }
.place--venue .stamps { height: 108px; }
.postmark { position: absolute; width: 100px; max-width: none; pointer-events: none; }
.postmark--church { left: 101px; top: 76px; transform: rotate(-5.4deg); }
.postmark--venue  { left: 302px; top: -10px; transform: rotate(-5.4deg); }
.address { display: flex; flex-direction: column; gap: 6.5px; margin-top: 25px; line-height: 1.3125; }
.address span { padding-bottom: 8px; border-bottom: var(--stroke) solid var(--line); }
.place .btn { margin-top: 24px; min-width: 268px; }
.place__art { position: absolute; max-width: none; pointer-events: none; }
.place__art--church { width: 625px; top: 77px;  left: max(475px, calc(100% - 569px)); }
.place__couple      { position: absolute; width: 62px; top: 322px; left: max(376px, calc(100% - 668px)); transform: scaleX(-1); }
.place__art--venue  { width: 946px; top: 63px;  left: max(376px, calc(100% - 640px)); }
.venue-mobile-art { display: none; }

/* ---------------------- Znaczki i odklejanie ------------------------- */
/* Znaczek (i portret na górze strony) odkleja się na płasko jak naklejka:
   róg podąża za kursorem (script.js). Spód jest gładki, bez nadruku. */
.stamp { position: relative; display: inline-block; flex: none; cursor: default; touch-action: manipulation; }
.stamp img { display: block; }
.peel__flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  visibility: hidden; pointer-events: none; transform-origin: 0 0;
  filter: url(#peel-back);          /* cały obrazek w jednym kolorze */
}
.is-peeling > .peel__flap { visibility: visible; }
.stamp--historia { position: absolute; right: -43px; top: -51px; width: 124px; }
.stamp--contact { position: absolute; left: 22px; top: 42px; width: 131px; }

/* ------------------------------ Prezenty ----------------------------- */
.section--gifts { padding-block: var(--gap); }
.gifts__title { font-size: var(--fs-lead); text-align: center; }
.gifts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; }
.gift { display: flex; align-items: center; gap: 8px; padding: 8px; box-shadow: inset 0 0 0 var(--stroke) var(--line); }
.gift img { flex: none; width: 80px; height: 80px; }
.gift p { padding: 0 24px; }

/* ----------------------------- Polaroidy ----------------------------- */
.polaroids {
  display: flex; justify-content: center; align-items: center;
  padding-top: var(--gap); min-height: 605px; overflow: hidden;
}
.section--gifts + .polaroids { margin-top: calc(var(--gap) * -1); }
.polaroid {
  --rot: 0deg; --hover: -3deg; --scroll: 0deg; --shift: 0px;
  display: flex; flex-direction: column;
  --size: 516px;
  flex: none; width: var(--size); height: var(--size); margin: 0 -9px; padding: 8px 8px 0;   /* zawsze kwadrat */
  background: var(--yellow); border-radius: 8px;
  transform: translateY(var(--shift)) rotate(calc(var(--rot) + var(--scroll)));
  transition: transform .6s var(--ease);
  will-change: transform;
}
.polaroids[data-tone="white"] .polaroid { background: #fff; }
.polaroid--cw  { --rot: 4.3deg;  --hover: -3.4deg; margin: 0 9.5px; }
.polaroid--ccw { --rot: -2.4deg; --hover: 3.2deg;  margin: 0 1.5px; }
.polaroid:hover {
  transform: translateY(-8px) rotate(calc(var(--rot) + var(--hover)));
  z-index: 2;
}
.polaroid__photo {
  position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 4px;
  background: var(--ink); isolation: isolate;
}
.polaroid__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Brązowy filtr jak w projekcie (kolor + przyciemnienie). Po najechaniu kursorem
   płynnie znika i zdjęcie jest kolorowe; po zjechaniu wraca. */
.polaroid__photo::before, .polaroid__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  transition: opacity .6s var(--ease);
}
.polaroid__photo::before { background: var(--ink); mix-blend-mode: color; }
.polaroid__photo::after  { background: rgba(51, 39, 15, .5); mix-blend-mode: multiply; }
.polaroid__photo.is-color::before, .polaroid__photo.is-color::after { opacity: 0; }
@media (hover: hover) {
  .polaroid:hover .polaroid__photo::before, .polaroid:hover .polaroid__photo::after { opacity: 0; }
}
.polaroid__caption {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 16px 24px 24px; line-height: 1.3125;
}

/* ------------- Ramki z adresem i kontaktem: delikatny ruch ------------ */
[data-float] {
  --f-rot: 0deg; --f-shift: 0px; --f-hover: -.5deg;
  transform: translateY(var(--f-shift)) rotate(var(--f-rot));
  transition: transform .6s var(--ease);
}
.place--venue { --f-hover: .5deg; }
#kontakt [data-float] { --f-hover: -.35deg; }
@media (hover: hover) {
  [data-float]:hover { transform: translateY(-5px) rotate(var(--f-hover)); }
}

/* ---------------------------- Multimedia ----------------------------- */
.media { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; width: 100%; align-items: start; }
.media__col { display: flex; flex-direction: column; gap: 80px; min-width: 0; }
.media__block { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.upload { gap: 24px; align-items: flex-start; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 210px; padding: 16px; text-align: center;
  border: 1px dashed var(--ink); border-radius: 8px; cursor: pointer;
  transition: background-color .25s var(--ease);
}
.dropzone:hover, .dropzone.is-over { background: rgba(244, 237, 225, .55); }
.dropzone:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.dropzone__hint { font-size: 12px; opacity: 0; transition: opacity .25s; }
.dropzone:hover .dropzone__hint, .dropzone:focus-within .dropzone__hint, .dropzone.is-over .dropzone__hint { opacity: .7; }
.upload__list { display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 12px; }
.upload__list:empty { display: none; }
.upload__list li { display: flex; justify-content: space-between; gap: 12px; }
.upload__list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__list li.is-error { color: #8a1c00; }
.upload__list button { border: 0; background: none; padding: 0 4px; cursor: pointer; }
.upload__note { font-size: 12px; opacity: .7; line-height: 1.35; margin-top: -8px; }
.upload__note:empty { display: none; }
.upload__note a { text-decoration: underline; }

.fields { display: grid; gap: 24px; width: 100%; }
.fields--pair { grid-template-columns: 1fr 1fr; }
.field { display: block; min-width: 0; }
.field input, .field select {
  width: 100%; height: var(--btn-h); padding: 4px 12px;
  border: var(--stroke) solid transparent; border-radius: 8px; background: var(--field);
  outline: none; transition: border-color .2s;
}
.field input::placeholder { color: var(--ink); opacity: .55; }
.field input:focus-visible, .field select:focus-visible { border-color: var(--ink); }
.field input.is-invalid { border-color: #8a1c00; }
.field select {
  appearance: none; -webkit-appearance: none; padding: 4px 44px 4px 24px;
  border-color: var(--ink); background-color: transparent; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M4 7l6 6 6-6' stroke='%2333270f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.form-status { min-height: 1.3em; font-size: 12px; line-height: 1.35; text-align: center; }
.form-status:empty { display: none; }
.form-status.is-error { color: #8a1c00; }

/* ------------------------ Potwierdź przybycie ------------------------ */
.chapter--tight { gap: 40px; }
.rsvp { display: flex; flex-direction: column; align-items: center; width: 100%; }
.rsvp__rows { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.rsvp__row {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 0; padding: 0; border: 0; min-width: 0;
  animation: row-in .45s var(--ease);
}
@keyframes row-in { from { opacity: 0; transform: translateY(-8px); } }
.rsvp__remove {
  position: absolute; right: -52px; top: 0; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 8px;
}
.rsvp__remove[hidden], .rsvp__add[hidden] { display: none; }
.rsvp__remove:hover { background: rgba(51, 39, 15, .1); }
.rsvp__add { margin-top: 40px; }
.rsvp__submit { margin-top: 80px; }
.rsvp .form-status { margin-top: 20px; }

/* -------------------------------- FAQ -------------------------------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 52px; width: 100%; align-items: start; }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  font-size: var(--fs-lead); cursor: pointer; list-style: none;
  padding-block: 6px; margin-block: -6px;      /* większe pole dotyku bez zmiany układu */
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon {
  flex: none; width: 20px; height: 20px; margin-top: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.29 10.8h-7.41l.1 7.42H9.05l.14-7.42H1.67V9.08h7.49l.07-7.41h1.61l.04 7.41h7.41v1.72Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.29 10.8h-7.41l.1 7.42H9.05l.14-7.42H1.67V9.08h7.49l.07-7.41h1.61l.04 7.41h7.41v1.72Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .35s var(--ease);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item p { margin-top: 16px; opacity: .7; line-height: 1.3125; animation: faq-in .35s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ------------------------------ Kontakt ------------------------------ */
.contact { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; width: 100%; }
.contact__person { display: flex; flex-direction: column; gap: 10px; }
.contact__person p { font-size: var(--fs-lead); line-height: 23px; opacity: .7; overflow-wrap: anywhere; }
.contact__person a:hover { text-decoration: underline; }
.contact__person--him { text-align: right; }
.contact__oval { position: relative; width: 176px; }
.contact__oval--her { margin-left: 24px; }
.contact__oval--him { margin-left: 58px; margin-right: 24px; }

/* ----------------------------- Krzyżówka ----------------------------- */
/* Sekcja jest ukryta; odkrywa ją kliknięcie portretu pana młodego w „Kontakcie". */
#cw-trigger { cursor: pointer; }
.section--cw[hidden] { display: none; }
.section--cw { animation: cw-in .7s var(--ease); }
@keyframes cw-in { from { opacity: 0; transform: translateY(24px); } }

.cw { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; width: 100%; align-items: start; }
.cw__clues { display: flex; flex-direction: column; gap: 52px; min-width: 0; }
.cw__group { display: flex; flex-direction: column; gap: 24px; }
.cw__list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cw__clue {
  display: grid; grid-template-columns: 28px 1fr; gap: 16px; width: 100%; padding: 0;
  border: 0; background: none; text-align: left; cursor: pointer; line-height: 1.2;
}
.cw__clue:hover, .cw__clue.is-active { text-decoration: underline; text-underline-offset: 3px; }
.cw__clue.is-solved { opacity: .55; }

.cw__board { display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: 0; }
.cw__grid {
  --cols: 9; --cell: 46px;
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell);
  padding: 0 var(--stroke) var(--stroke) 0;          /* miejsce na wspólne krawędzie pól */
}
.cw__cell {
  position: relative; margin: 0 calc(var(--stroke) * -1) calc(var(--stroke) * -1) 0;   /* pola dzielą krawędź */
  background: var(--field); border: var(--stroke) solid var(--ink);
  transition: background-color .25s var(--ease);
}
.cw__cell.is-word { background: #fbf6ec; }
.cw__cell.is-ok  { background: var(--pale); }        /* dobra litera: jasnożółte tło */
.cw__cell.is-bad { background: #f6c4b8; }            /* zła litera: jasnoczerwone tło */
.cw__grid.is-done .cw__cell { background: #cfe8b4; }  /* całość rozwiązana: jasnozielone tło */
.cw__cell:focus-within { z-index: 1; outline: 2px solid var(--ink); outline-offset: -1px; }
.cw__num { position: absolute; left: 4px; top: 3px; font-size: 11px; line-height: 1; pointer-events: none; }
.cw__cell input {
  width: 100%; height: 100%; padding: 6px 0 0; border: 0; border-radius: 0; outline: none; background: transparent;
  font: 500 calc(var(--cell) * .46)/1 var(--sans); text-align: center; text-transform: uppercase; color: var(--ink);
  caret-color: transparent; cursor: pointer;
}
.cw__status { display: none; }

/* ------------------------------- Stopka ------------------------------ */
.site-footer { position: relative; }
.site-footer__inner {
  display: flex; justify-content: space-between; gap: 24px;
  max-width: 1440px; margin: 0 auto; padding: var(--pad) calc(var(--pad) + 8px);
  font-size: var(--fs-date); line-height: 56.8px;
}
.site-footer__end { font-weight: 700; }

/* ============================ TABLET ================================= */
@media (max-width: 1099px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .burger { display: grid; }
  .nav {
    position: absolute; right: var(--pad); top: calc(var(--pad) + 52px); z-index: 30;
    flex-direction: column; gap: 0; min-width: 266px; padding: 8px;
    background: var(--field); border: var(--stroke) solid var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav a { padding: 6px 16px; }
  .nav a::after { display: none; }
  .nav a:hover, .nav a:focus-visible { background: var(--ink); color: var(--field); }

  .portrait, .birds--right, .stamp--historia { display: none; }
  .hero__stage { padding-top: 95px; }
  .hero__art--house { top: 304px; }
  .hero__lead { width: min(560px, 100% - 48px); margin-top: 42px; }
  .hero__title { width: auto; }

  .gifts { grid-template-columns: 1fr; }
  .media { grid-template-columns: 1fr; gap: 52px; }
  .media__col { gap: 52px; }
  .upload { gap: 24px; }
  .rsvp__rows { gap: 24px; }
  .rsvp__row { grid-template-columns: 1fr; gap: 12px; }
  .field select { padding-left: 12px; }   /* pola jedno pod drugim: tekst w jednej linii z imieniem i nazwiskiem */
  .faq { grid-template-columns: 1fr; }
  .cw { grid-template-columns: 1fr; }

  .place__info { width: 272px; }
  .contact { display: flex; flex-wrap: wrap; row-gap: 40px; }
  .contact__oval { margin: 0; }
  .contact__person { flex: 0 0 calc(100% - 176px); min-width: 0; }
  .contact__person--her { padding-right: 24px; }
  .contact__person--him { padding-left: 24px; }
}

/* ============================ TELEFON ================================ */
@media (max-width: 600px) {
  :root {
    --pad: 24px; --inner: 40px;
    --fs-body: 12px; --fs-lead: 14px; --fs-sub: 14px;
    --fs-display: 44px; --fs-hero: 54px; --fs-date: 16px; --btn-h: 32px;
  }
  .site-header__inner { padding: 40px var(--pad) 0; grid-template-columns: 1fr; }
  .logo, .btn--cta { display: none; }
  .burger { width: 32px; height: 32px; }
  .nav { top: 80px; right: var(--pad); left: var(--pad); min-width: 0; }
  .nav a { padding: 10px 16px; font-size: 14px; }
  .nav .nav__cta {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    margin: 12px 8px 8px; padding: 6px 16px;
    border: var(--stroke) solid var(--ink); border-radius: 8px;
  }
  .birds--header { display: block; width: 287px; left: -45px; top: 15px; }

  .hero__stage { height: auto; padding: 40px 40px 52px; }
  .hero__art, .birds--top, .birds--left { display: none; }
  .hero__lead { width: 100%; margin-top: 40px; line-height: 1.3; }
  .countdown { margin-top: 0; }
  .countdown__value { min-width: 73px; }
  .hero__mobile-art {
    display: block; position: relative; height: 303px; margin: 0 0 0 var(--pad); overflow: hidden;   /* rysunek dochodzi do krawędzi ekranu */
  }
  .hero__mobile-church { position: absolute; left: 110px; top: 0; width: 625px; max-width: none; }
  .hero__mobile-couple { position: absolute; left: 24px; top: 246px; width: 62px; transform: scaleX(-1); }
  .birds--mobile-church { display: block; width: 111px; left: 12px; top: 107px; }

  .btn { padding: 4px 6px 4px 12px; }
  .frame__body--wide { padding: 80px 40px; }
  .frame__body--compact { padding-inline: 40px; }
  .copy--left, .schedule, .address, .polaroid__caption, .faq__item p { line-height: 1.33; }

  .schedule__row { grid-template-columns: 1fr; gap: 24px; }
  .schedule__row--head { gap: 24px; }

  .frame__body--place { padding: 40px; }                 /* na telefonie 40 zamiast 52 */
  .place__info { width: 100%; }
  .stamps .stamp:nth-of-type(n+3) { display: none; }     /* na telefonie tylko dwa znaczki */
  .postmark--church { left: 62px; top: 72px; }
  .postmark--venue  { left: 150px; top: -12px; }
  .place .btn { min-width: 0; }
  .place__art, .place__couple { display: none; }
  .venue-mobile-art {
    display: block; position: relative; height: 317px; margin: 54px calc(var(--pad) * -1) 0 0; overflow: hidden;   /* do krawędzi ekranu */
  }
  .venue-mobile-art img { position: absolute; left: 24px; top: 0; width: 946px; max-width: none; }

  .gift p { padding: 0 16px; }

  /* Polaroidy jedno pod drugim; poruszają się lekko przy przewijaniu. */
  .polaroids { flex-direction: column; gap: 14px; min-height: 0; overflow: visible; }
  .polaroid { --size: min(391px, 100vw - 21px); margin: 0 !important; transition-duration: .25s; }
  [data-float] { transition-duration: .25s; }
  .polaroid:nth-child(1) { --rot: -2.4deg; }
  .polaroid:nth-child(2) { --rot: 4.3deg; }
  .polaroid:nth-child(3) { --rot: 0deg; }
  .polaroid__caption { padding: 12px 18px 18px; }

  .fields--pair { gap: 24px; }
  .rsvp__remove { right: -36px; width: 32px; height: 32px; }
  .faq__item summary { gap: 24px; }
  .cw__clues { gap: 40px; }
  .cw__group { gap: 20px; }
  .cw__list { gap: 12px; }
  .cw__clue { grid-template-columns: 22px 1fr; gap: 10px; }
  /* Siatka wypełnia szerokość treści (9 pól), więc pola skalują się z ekranem. */
  .cw__board { width: 100%; }
  .cw__grid { --cell: calc((min(100vw, 600px) - 128px - 1.5px) / 9); }
  .cw__cell { border-width: 1px; margin: 0 -1px -1px 0; }
  .cw__num { left: 3px; top: 2px; font-size: 8px; }
  .cw__cell input { padding-top: 5px; }

  .contact { flex-direction: column; flex-wrap: nowrap; align-items: center; row-gap: 24px; text-align: center; }
  .contact__person { flex: none; width: 100%; padding: 0; }
  .contact__oval--her { order: 1; }
  .contact__person--her { order: 2; margin-bottom: 28px; }
  .contact__oval--him { order: 3; }
  .contact__person--him { order: 4; text-align: center; }
  .contact__person p { line-height: 18px; }

  .site-footer { padding-top: 40px; }
  .birds--footer { display: block; position: static; width: 287px; margin: 0 auto; }
  .site-footer { padding-bottom: 40px; }
  .site-footer__inner { display: none; }                 /* bez napisów „I żyli…” i „Koniec” */
}

/* Urządzenia dotykowe: bez efektu „hover" na polaroidach (ruch daje przewijanie). */
@media (hover: none) {
  .polaroid:hover { transform: translateY(var(--shift)) rotate(calc(var(--rot) + var(--scroll))); }
}

/* Ograniczenie ruchu na życzenie użytkownika (ustawienia systemu). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .polaroid:hover { transform: rotate(var(--rot)); }
  [data-float]:hover { transform: none; }
}