/* ==========================================================================
   Małżeństwo czy Szaleństwo..?
   Randki dla osób 55+ / dating for people 55 and over

   Palette: raspberry primary, teal secondary, marigold highlight, violet
   support. The name is a joke with a raised eyebrow, so the colour should
   have a pulse — but the audience is 55+, so body text stays dark on light
   and the vivid colours do their work in blocks, buttons and accents.

   Neutrals are biased toward the raspberry (a blush-warm white, a plum-black)
   rather than a stock grey, so the whole page reads as one family.
   ========================================================================== */

:root {
  font-size: 18px;

  /* --- brand --- */
  --berry: #e01b62;
  --berry-deep: #a9134a;
  --berry-tint: #ffe6ef;
  --on-berry: #ffffff;

  --teal: #0e9c9a;
  --teal-deep: #06706f;
  --teal-tint: #dbf5f4;
  --on-teal: #ffffff;

  --marigold: #ffb400;
  --marigold-deep: #a86f00;
  --marigold-tint: #fff2d4;
  --on-marigold: #3a2600;

  --violet: #7a3bc4;
  --violet-deep: #5b2795;
  --violet-tint: #f0e5fb;
  --on-violet: #ffffff;

  /* --- neutrals, biased warm/plum --- */
  --ground: #fff7f4;
  --ground-deep: #ffeee9;
  --paper: #ffffff;
  --ink: #2b1a2c;
  --ink-soft: #5f4a60;
  --line: #ecd9dd;

  --online: #17914c;
  --danger: #c01621;
  --danger-bg: #fff0f0;

  /* The black half of the brand mark. Lightens in dark mode so the male
     symbol's outline doesn't vanish against the ground; the letters inside
     stay dark, because the discs are white in both themes. */
  --mark-ink: #12100f;

  --band-ink: #ffffff;
  --band-soft: #ffd7e5;
  --foot: #241326;
  --foot-ink: #e2d6e3;
  --foot-line: #3f2a41;
  --foot-mute: #ac96ad;

  --shadow: 0 2px 4px rgba(43, 26, 44, .06), 0 10px 28px rgba(43, 26, 44, .09);
  --shadow-lift: 0 4px 10px rgba(43, 26, 44, .1), 0 20px 46px rgba(224, 27, 98, .16);

  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 74rem;

  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

/* Dark theme: a deep plum ground, not a neutral charcoal, so the raspberry
   still belongs. Vivid hues are lightened and their text colours flipped so
   contrast survives. Tokens only — components are never styled in here. */
@media (prefers-color-scheme: dark) {
  :root {
    --berry: #ff5b8d;        --berry-deep: #ff89ac;
    --berry-tint: #3b1226;   --on-berry: #2a0413;
    --teal: #2fc9c6;         --teal-deep: #63dedb;
    --teal-tint: #0b2f2f;    --on-teal: #032222;
    --marigold: #ffc244;     --marigold-deep: #ffd579;
    --marigold-tint: #33260a; --on-marigold: #2b1c00;
    --violet: #b382f0;       --violet-deep: #cba6f7;
    --violet-tint: #291a3d;  --on-violet: #1d0938;

    --ground: #1a1019;       --ground-deep: #23151f;
    --paper: #261826;
    --ink: #f8ecf3;          --ink-soft: #c2acbf;
    --line: #43303f;

    --online: #4cc47f;
    --danger: #ff8d86;       --danger-bg: #37191a;
    --mark-ink: #f3ede3;

    --band-ink: #ffffff;     --band-soft: #f3cfdd;
    --foot: #120a13;         --foot-ink: #d7c8d6;
    --foot-line: #332034;    --foot-mute: #948094;

    --shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 10px 28px rgba(0, 0, 0, .5);
    --shadow-lift: 0 4px 10px rgba(0, 0, 0, .5), 0 20px 46px rgba(0, 0, 0, .6);
  }
}

/* The viewer's own toggle must beat the OS preference in both directions. */
:root[data-theme="dark"] {
  --berry: #ff5b8d;        --berry-deep: #ff89ac;
  --berry-tint: #3b1226;   --on-berry: #2a0413;
  --teal: #2fc9c6;         --teal-deep: #63dedb;
  --teal-tint: #0b2f2f;    --on-teal: #032222;
  --marigold: #ffc244;     --marigold-deep: #ffd579;
  --marigold-tint: #33260a; --on-marigold: #2b1c00;
  --violet: #b382f0;       --violet-deep: #cba6f7;
  --violet-tint: #291a3d;  --on-violet: #1d0938;
  --ground: #1a1019;       --ground-deep: #23151f;
  --paper: #261826;
  --ink: #f8ecf3;          --ink-soft: #c2acbf;
  --line: #43303f;
  --online: #4cc47f;
  --danger: #ff8d86;       --danger-bg: #37191a;
  --mark-ink: #f3ede3;
  --band-ink: #ffffff;     --band-soft: #f3cfdd;
  --foot: #120a13;         --foot-ink: #d7c8d6;
  --foot-line: #332034;    --foot-mute: #948094;
  --shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 10px 28px rgba(0, 0, 0, .5);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, .5), 0 20px 46px rgba(0, 0, 0, .6);
}
:root[data-theme="light"] {
  --berry: #e01b62;        --berry-deep: #a9134a;
  --berry-tint: #ffe6ef;   --on-berry: #ffffff;
  --teal: #0e9c9a;         --teal-deep: #06706f;
  --teal-tint: #dbf5f4;    --on-teal: #ffffff;
  --marigold: #ffb400;     --marigold-deep: #a86f00;
  --marigold-tint: #fff2d4; --on-marigold: #3a2600;
  --violet: #7a3bc4;       --violet-deep: #5b2795;
  --violet-tint: #f0e5fb;  --on-violet: #ffffff;
  --ground: #fff7f4;       --ground-deep: #ffeee9;
  --paper: #ffffff;
  --ink: #2b1a2c;          --ink-soft: #5f4a60;
  --line: #ecd9dd;
  --online: #17914c;
  --danger: #c01621;       --danger-bg: #fff0f0;
  --mark-ink: #12100f;
  --band-ink: #ffffff;     --band-soft: #ffd7e5;
  --foot: #241326;         --foot-ink: #e2d6e3;
  --foot-line: #3f2a41;    --foot-mute: #ac96ad;
  --shadow: 0 2px 4px rgba(43, 26, 44, .06), 0 10px 28px rgba(43, 26, 44, .09);
  --shadow-lift: 0 4px 10px rgba(43, 26, 44, .1), 0 20px 46px rgba(224, 27, 98, .16);
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.16;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.32rem; }
p { margin: 0 0 1rem; }
a { color: var(--berry-deep); }
img { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--berry); color: var(--on-berry); padding: .8rem 1.2rem; }
.skip-link:focus { left: 0; }

/* ---------- The notice above everything -------------------------------- */

/* Sits above the header and scrolls away with the page, deliberately: it is
   read on arrival, and a second sticky strip under the sticky bar would eat
   a third of a phone screen for the whole visit. Marigold because it is
   asking for attention rather than reporting a failure — the berry is what
   this file uses when something is wrong. */
.demo-bar {
  background: var(--marigold); color: var(--on-marigold);
  font-size: .93rem; font-weight: 700; text-align: center;
  padding: .55rem 1rem; margin: 0;
  text-wrap: balance;
}

/* ---------- Header ----------------------------------------------------- */

/* The wordmark lives in the hero now, so the bar carries only navigation
   and is centred rather than pushed against a logo. */
.site-header { background: var(--paper); border-bottom: 3px solid var(--berry); position: sticky; top: 0; z-index: 40; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; min-height: 4.6rem; flex-wrap: wrap; padding-block: .6rem;
}

.brand {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--serif); font-size: 1.24rem; font-weight: 700;
  color: var(--berry-deep); text-decoration: none; letter-spacing: -.02em;
  line-height: 1.1;
}
/* The name sets on two lines beside the marks; centring it keeps the
   lockup balanced when the second line is shorter. */
.brand .word { max-width: 11rem; text-align: center; text-wrap: balance; }

/* The two brand marks: a Venus symbol on the left holding a black "M?",
   a Mars symbol on the right holding a magenta "S?". Same viewBox and same
   circle radius in both, so they sit symmetrically either side of the name. */
.mark { flex: none; display: block; overflow: visible; }
.brand .mark { width: 3.2rem; height: 3.2rem; }
.mark .disc { fill: #ffffff; }
.mark .stroke-berry { stroke: var(--berry); }
.mark .stroke-ink { stroke: var(--mark-ink); }
.mark .glyph { font-family: var(--serif); font-weight: 700; font-size: 15px; }
.mark .glyph-ink { fill: #12100f; }
.mark .glyph-berry { fill: var(--berry); }

.site-nav { display: flex; align-items: center; justify-content: center; gap: .3rem; flex-wrap: wrap; }

/* Three groups, and the bar is the row that holds them: where the site
   starts pinned to the left corner, who you are pinned to the right, and
   everything the site holds between the two. It was one flat list of pills
   wrapping across a centred bar, which said nothing about which link was
   which.

   `#nav-links` is a real box now. It could not stay `display: contents` —
   the groups have to be laid out against each other, and nothing can be
   laid out against anything when the parent has dissolved. The warning that
   used to sit here was about that flat list: given a box of its own it
   wrapped onto a third row. What keeps the height down now is the shape
   itself — the left group is two rows tall on purpose, so the middle has
   two rows to wrap through before the bar grows at all. */
.nav-links { display: flex; align-items: flex-start; gap: 1.2rem; width: 100%; }
.nav-group { display: flex; flex-wrap: wrap; gap: .35rem; }
/* The two corners stack; the middle spreads. */
.nav-lead, .nav-aside { flex-direction: column; flex: none; }
.nav-aside { align-items: stretch; margin-left: auto; }
.nav-main { flex: 1 1 auto; justify-content: center; align-content: flex-start; }

/* The button that folds them. Shown only below 59rem — see the fold block. */
.nav-toggle { display: none; }

/* The language button sits under "Zaloguj się" in the right-hand corner, so
   it is as wide as it and reads as the second of a pair rather than as a
   stray control. */
.nav-aside .lang-toggle { justify-content: center; }

.site-nav a {
  display: inline-flex; align-items: center; min-height: 3rem;
  padding: .4rem 1.1rem; border-radius: 999px;
  border: 2px solid var(--berry); background: var(--paper);
  color: var(--berry-deep); text-decoration: none; font-weight: 700;
}
.site-nav a:hover { background: var(--berry-tint); }
.site-nav a[aria-current="page"] { background: var(--berry); border-color: var(--berry); color: var(--on-berry); }


.lang-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 3rem; padding: .4rem 1.1rem;
  border: 2px solid var(--teal); border-radius: 999px;
  background: var(--paper); color: var(--teal-deep);
  font: inherit; font-weight: 700; cursor: pointer;
}
.lang-toggle:hover { background: var(--teal-tint); }

/* ---------- Buttons ---------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.4rem; padding: .7rem 1.7rem;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--berry); color: var(--on-berry); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--berry-deep); }
.btn-accent { background: var(--marigold); color: var(--on-marigold); box-shadow: var(--shadow); }
.btn-accent:hover { filter: brightness(.93); }
.btn-teal { background: var(--teal); color: var(--on-teal); box-shadow: var(--shadow); }
.btn-teal:hover { background: var(--teal-deep); }
.btn-ghost { background: var(--paper); color: var(--berry-deep); border-color: var(--berry); }
.btn-ghost:hover { background: var(--berry-tint); }
.btn-lg { font-size: 1.12rem; min-height: 3.9rem; padding: .8rem 2.2rem; }
.btn-block { display: flex; width: 100%; }

/* ---------- Hero ------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 12% -10%, var(--marigold-tint), transparent 60%),
    radial-gradient(50rem 34rem at 96% 8%, var(--violet-tint), transparent 62%),
    linear-gradient(180deg, var(--ground-deep), var(--ground));
  padding: 3.6rem 0 3.4rem;
}
/* One column, at every width. The lockup is a render, the headline and a
   second render — about 900px of it — and `--wrap` caps the page at 74rem,
   so a photograph beside that had nowhere to stand: it came out 189px wide
   on a laptop, with the 58% badge covering most of what was left. Centred
   under the copy it is a photograph again, and the composition is the same
   one on a phone as on a desktop. */
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 2.6rem; align-items: center; position: relative; }

/* Everything in the left column is centred within it — between the photo
   and the edge of the page. */
.hero-copy { text-align: center; }

/* The full-size wordmark: Venus and Mars flank the headline, scaled with it. */
.hero-title {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.1rem, .45vw, .4rem);
  margin-bottom: .7rem;
}
/* The middle line ("czy") is far shorter than the lines above and below it,
   so the mark is pulled inward to sit beside it rather than beside the long
   lines. Only on the right: that is the side the mark is on now. */
/* Capped, or the flex box takes its max-content width — the whole title on
   one line — and the headline wraps inside a box far wider than the words,
   which pushes the two renders out to the edges of the page. At this width
   it sets on three lines, the shape the lockup was drawn around, and the
   marks sit close in beside it. The left margin is the gap to the wedding
   pair; the negative right one tucks the imps against the short middle
   line. */
.hero-title h1 { max-width: 23rem; margin: 0 -1.5rem 0 1.1rem; }

/* --- The mark beside the headline ---------------------------------------
   A 3D render with its studio backdrop cut away, so it carries its own
   lighting and needs none of ours. It was an animated SVG until the render
   replaced it; the arm swings, leans and tail wag went with it. Sized by
   width alone — height:auto keeps the cut-out's own proportions, and the
   width/height attributes on the tag hold the space while it loads. */

/* The wedding pair, left of the headline. Wider than it is tall and read
   at a glance rather than in detail, so it is sized off the viewport like
   its opposite number.

   Unlike the imps it is not cut out: it keeps its sky, faded off to nothing
   by tools/skyfade.py, and 28% of the frame is that transparent air. So the
   box is sized to put the *figures* at the size the imps are drawn — hence
   the larger numbers than the cut-out it replaced — and the air is pulled
   back off both sides, or the lockup would gain 90px of nothing on each
   side and shove the headline about.

   Every number here is the cut-out's divided by 0.687, the share of the
   frame the figures take: the old 5.5/15.5vw/12.5 became 8/22.6vw/18.2. The
   margin is the other 31.3%, halved — exactly the air — written the same way
   the width is, so the two go on matching each other at every width. Re-run
   skyfade.py with a different HALO and these have to be worked out again;
   the script prints the share. */
.mark-couple {
  width: clamp(8rem, 22.6vw, 18.2rem); height: auto;
  margin-inline: clamp(-2.85rem, -3.53vw, -1.25rem);
}

.mark-pair {
  width: clamp(6rem, 16vw, 13rem); height: auto;
  /* The h1's -1.5rem pulls the marks in against the short middle line.
     The SVG could take it — it carried empty space around the figures.
     The render is cropped to its edges, so that much would put the
     horns into the headline; this gives the margin back on this side.
     Dropped to nothing on narrow screens, where the lockup is already
     wider than its column — see the 40rem block. */
  margin-left: 1.6rem;
}

.eyebrow {
  display: inline-block; margin-bottom: 1rem;
  background: var(--berry); color: var(--on-berry);
  padding: .4rem 1.1rem; border-radius: 999px;
  font-weight: 700; font-size: .88rem; letter-spacing: .07em; text-transform: uppercase;
}
.hero h1 .flip { color: var(--berry); font-style: italic; }
.hero h1 .qm { color: var(--teal); }
.lede { font-size: 1.24rem; color: var(--ink-soft); max-width: 36ch; }

/* The motto under the wordmark carries the site's voice, so it is set larger,
   heavier and darker than an ordinary standfirst. */
.hero .lede {
  margin-inline: auto;
  max-width: 44ch;
  font-size: clamp(1.22rem, 1.75vw, 1.48rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.hero .lede br { content: ""; display: block; margin-top: .6rem; }
.hero-actions { display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.7rem; }

/* Smaller than it was — it used to be half the hero — and under the words
   rather than beside them. The photograph is no longer centred there on its
   own: it sits off to one side with the 58% sign standing beside it, and the
   two together are centred instead. About 42rem of them, which the 74rem
   wrap has room for; below 46rem they stack — see the block there. */
.hero-figure {
  display: flex; align-items: center; justify-content: center;
  width: min(100%, 42rem); margin-inline: auto;
}
/* The photograph and the "rozejrzyj się" button beneath it — one column, so
   the button is as wide as the picture and reads as belonging to it. */
.hero-shot { position: relative; flex: 0 1 27rem; min-width: 0; }
/* `height: auto` is load-bearing: the tag carries width="820" height="656" to
   hold the space while it loads, and that height is a presentational hint, so
   without this the box is 656px tall whatever its width and `aspect-ratio`
   below never gets a say. It showed up the moment the photograph was asked to
   be smaller — it stopped scaling and started slicing a tall strip out of
   itself. */
.hero-figure img {
  width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
}
/* It hung off the corner of a tall photograph once, then sat squared up
   underneath a smaller one. It stands beside the photograph now and laps
   over its edge — far enough in to read as one object with it, not so far
   that it covers the couple, which is what a 15.5rem box pinned to the
   corner used to do. `z-index` because the overlap is the point: the shadow
   and the teal have to fall on the picture, not under it. */
.hero-badge {
  flex: 0 0 14rem; position: relative; z-index: 2;
  margin-left: -2.6rem;
  background: var(--teal); color: var(--on-teal);
  border-radius: var(--radius); padding: 1rem 1.3rem;
  box-shadow: var(--shadow-lift);
}
.hero-badge strong { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1; margin-bottom: .3rem; }
.hero-badge span { font-size: .93rem; opacity: .95; }

/* ---------- Sections --------------------------------------------------- */

.section { padding: 3.8rem 0; }
.section-paper { background: var(--paper); }
.section-tint { background: var(--teal-tint); }
.section-head { max-width: 46rem; margin-bottom: 2.4rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.12rem; color: var(--ink-soft); margin: 0; }

.grid { display: grid; gap: 1.6rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Steps really are a sequence, so they are numbered — and each number takes
   a different brand colour so the three read as distinct stages. */
.step { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; }
.section-paper .step { background: var(--ground); }
.step .num {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: 1rem;
  border-radius: 50%; font-family: var(--serif); font-size: 1.45rem; font-weight: 700;
}
.step:nth-child(1) .num { background: var(--berry); color: var(--on-berry); }
.step:nth-child(2) .num { background: var(--teal); color: var(--on-teal); }
.step:nth-child(3) .num { background: var(--violet); color: var(--on-violet); }
.step:nth-child(1) { border-color: var(--berry); }
.step:nth-child(2) { border-color: var(--teal); }
.step:nth-child(3) { border-color: var(--violet); }
/* Needs to beat `.section-head p { margin: 0 }`, hence the two classes. */
.section-head .rules-lead {
  margin: 1.5rem 0 0; font-weight: 700; font-size: 1.25rem;
  color: var(--berry-deep); font-family: var(--serif);
}
/* Two classes so it beats `.callout { margin: 1.8rem 0 }`; spans the full
   width of the three cards above it. */
.callout.membership { margin: 2rem 0 0; }

/* Two lines close the three steps rather than introducing them: what you
   have to do to be seen, and what we verify. They span the full width of
   the boxes above rather than being capped at 56rem, and they carry the
   marigold highlight the callouts use elsewhere — they are the promise the
   section is making, not its small print, so `--ink` rather than the softer
   grey, which has too little to work with over the tint. */
.steps-note {
  margin: 2.2rem 0 0; text-align: center;
  font-size: 1.08rem; color: var(--ink);
  background: var(--marigold-tint);
  border-left: 8px solid var(--marigold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.5rem;
}
/* The second sits close under the first — they are one block of two. */
.steps-note + .steps-note { margin-top: 1rem; }
.step h3 { margin-bottom: .35rem; }
.step p { margin: 0; color: var(--ink-soft); }

/* ---------- The home page's own rhythm ---------------------------------------

   Every section on the site is padded 3.8rem top and bottom, which puts
   3.6cm to 4.5cm of blush between the end of one and the heading of the
   next. That reads as generous on its own and as a long scroll down a page
   with seven of them, so the home page keeps its own, tighter rhythm.

   Set as the gap either side of each seam rather than as one padding for
   all of them, because the amounts asked for differed: 2cm off the first
   two seams, 3cm off the next two and off the last, 4cm off the one before
   the quotations — which the line about being logged in, now gone, had
   been holding open by about 1.5cm of that on its own.

   It is a home-page rule and nothing else uses these classes; every other
   page keeps the 3.8rem. Below 46rem it is all thrown away again — see the
   block down there — because a phone is already tight and taking another
   4cm out of it would run the headings into the pictures above them. */

[data-page="home"] .hero { padding-bottom: 1.55rem; }
.home-steps  { padding-top: 1.45rem; padding-bottom: 1.65rem; }
.home-people { padding-top: 1.7rem;  padding-bottom: .6rem; }
.home-do     { padding-top: .7rem;   padding-bottom: .65rem; }
.home-news   { padding-top: .65rem;  padding-bottom: 1.2rem; }
.home-quotes { padding-top: 1.25rem; padding-bottom: .6rem; }
[data-page="home"] .cta-band { padding-top: .5rem; }

/* ---------- News and events ---------------------------------------------- */

.news-card {
  background: var(--ground); border: 2px solid var(--line);
  border-left: 8px solid var(--teal);
  border-radius: var(--radius-lg); padding: 1.5rem;
}
.news-when {
  margin: 0 0 .3rem; font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--teal-deep);
}
.news-card h3 { margin-bottom: .4rem; }
.news-card p:last-child { margin: 0; color: var(--ink-soft); }

/* ---------- Member cards ------------------------------------------------ */

.member-card {
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.member-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--berry); }
.member-photo { position: relative; }
.member-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--ground-deep); }
.member-online {
  position: absolute; top: .8rem; left: .8rem; margin: 0;
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--paper); color: var(--ink);
  padding: .3rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
  box-shadow: var(--shadow);
}
.member-online::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--online); }
.member-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.member-name { font-family: var(--serif); font-size: 1.38rem; font-weight: 700; margin: 0; }
.member-name .age { color: var(--berry); font-weight: 400; }
.member-meta { color: var(--ink-soft); font-size: .98rem; margin: 0; }
.member-tagline { margin: 0; }
.member-card .btn { margin-top: auto; }

/* Interest chips cycle three brand tints so a card of them looks alive
   rather than uniform. */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.tags li { padding: .25rem .7rem; border-radius: 999px; font-size: .87rem; font-weight: 700; }
.tags li:nth-child(3n+1) { background: var(--berry-tint); color: var(--berry-deep); }
.tags li:nth-child(3n+2) { background: var(--teal-tint); color: var(--teal-deep); }
.tags li:nth-child(3n+3) { background: var(--violet-tint); color: var(--violet-deep); }

/* Anyone not online right now still gets a line, just a quieter one. */
.member-seen {
  position: absolute; top: .8rem; left: .8rem; margin: 0;
  background: var(--paper); color: var(--ink-soft);
  padding: .3rem .75rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; box-shadow: var(--shadow);
}

/* Guest or full member, said plainly next to the town. */
.tier {
  display: inline-block; margin-left: .4rem; padding: .1rem .55rem;
  border-radius: 999px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.tier-member { background: var(--teal-tint); color: var(--teal-deep); }
.tier-guest { background: var(--violet-tint); color: var(--violet-deep); }

/* ---------- Greeting picker and longer message --------------------------- */

.contact-panel {
  margin-top: 1.2rem; padding: 1.3rem;
  border: 2px solid var(--berry); border-radius: var(--radius-lg);
  background: var(--paper);
}
.contact-panel h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.contact-panel .field { margin-top: .8rem; }
.greet-preview {
  margin: .5rem 0 0; padding: .9rem 1.1rem;
  background: var(--berry-tint); border-radius: var(--radius);
  font-family: var(--serif); font-size: 1.05rem;
}
.panel-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.panel-actions .btn { flex: 1 1 auto; }
.char-count { margin: .4rem 0 0; font-variant-numeric: tabular-nums; }

/* ---------- The office: composed mail, and the outbox -------------------- */

/* The composed message is a read-only textarea rather than a <pre>: it can
   always be selected and copied by hand, which is the fallback when both
   the mail program and the clipboard refuse — inside an Artifact, both do. */
.office-text {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .95rem; line-height: 1.5;
  background: var(--ground); min-height: 9rem;
}

.outbox { margin-top: 3rem; }
.outbox-item {
  border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper); padding: 1.3rem; margin-bottom: 1.2rem;
}
.outbox-item h3 { font-size: 1.15rem; margin-bottom: .1rem; }
.outbox-item .hint { margin-bottom: .7rem; font-variant-numeric: tabular-nums; }

/* ---------- Page head + filters ----------------------------------------- */

.page-head {
  background: linear-gradient(180deg, var(--berry-tint), var(--ground));
  border-bottom: 3px solid var(--berry);
  padding: 2.8rem 0 2.4rem;
}
.page-head p { color: var(--ink-soft); font-size: 1.1rem; margin: 0; max-width: 58ch; }

/* Every page head is set the same: a sentence-sized heading rather than a
   poster-sized one, so moving between tabs feels like one site. */
.page-head h1 { font-size: clamp(1.55rem, 3vw, 2.25rem); max-width: 44ch; margin-bottom: .5rem; }

.filters { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem; }
.filter-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
/* Rows that hold three answers, or one that wants the whole width. */
.filter-row.three { grid-template-columns: repeat(3, 1fr); }
.filter-row.single { grid-template-columns: 1fr; }
/* Two lines to write on rather than the one a single-line input gives, and
   the box grows if the list does. */
.filter-row textarea { min-height: 0; }

/* "Wiek" is one control made of two selects, so they sit on one line. */
.age-pair { display: flex; align-items: center; gap: .5rem; }
.age-pair select { min-width: 0; }
.age-pair span { color: var(--ink-soft); font-weight: 700; }
.field { display: flex; flex-direction: column; gap: .35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > .legend { font-weight: 700; font-size: .98rem; }
.hint { font-size: .92rem; color: var(--ink-soft); }
.optional { font-weight: 400; color: var(--ink-soft); }

input[type="text"], input[type="email"], input[type="number"], input[type="tel"],
input[type="date"], input[type="password"], select, textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: 10px;
  padding: .7rem .85rem; min-height: 3.3rem; width: 100%;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: var(--teal); }
input:focus, select:focus, textarea:focus { border-color: var(--berry); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.9rem;
  padding: .3rem 1rem; border: 2px solid var(--line); border-radius: 999px;
  background: var(--paper); font-weight: 600;
}
.chip input:checked + span { background: var(--berry); border-color: var(--berry); color: var(--on-berry); }
.chip input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }
/* The box the "Inne" chip opens. No display of its own, so [hidden] still works. */
.chip-other { margin-top: 1.2rem; max-width: 34rem; }

.check-row { display: flex; align-items: flex-start; gap: .8rem; padding: .4rem 0; }
.check-row input[type="checkbox"] { width: 1.6rem; height: 1.6rem; min-height: 0; flex: none; margin: .25rem 0 0; accent-color: var(--berry); cursor: pointer; }
.check-row label { font-weight: 600; cursor: pointer; }

.filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 2px solid var(--line); }

/* "Sortuj według" and its menu on one line. These were inline styles on the
   markup, which meant nothing in here could reach them — and the 14rem was
   overflowing a 360px phone by 2px, with no way to override it. */
.sort-field { flex-direction: row; align-items: center; gap: .7rem; }
.sort-field label { white-space: nowrap; }
.sort-field select { min-width: 14rem; }
.result-count { font-weight: 700; margin: 0; }
.result-count span { color: var(--berry); }

.empty-state { grid-column: 1 / -1; text-align: center; padding: 3.5rem 1.5rem; background: var(--paper); border: 3px dashed var(--berry); border-radius: var(--radius-lg); }
.empty-state h3 { margin-bottom: .3rem; }
.empty-state p { color: var(--ink-soft); }

/* ---------- Profile ------------------------------------------------------ */

.profile-grid { display: grid; grid-template-columns: 22rem 1fr; gap: 3rem; align-items: start; }
.profile-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.profile-actions { display: grid; gap: .7rem; margin-top: 1.2rem; }
.profile-header h1 { margin-bottom: .2rem; }
.profile-header .age { color: var(--berry); font-weight: 400; }
.profile-sub { font-size: 1.12rem; color: var(--ink-soft); margin-bottom: 1.4rem; }

.panel { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 1.7rem; margin-bottom: 1.5rem; }
.panel h2 { font-size: 1.38rem; color: var(--berry-deep); }
.panel > :last-child { margin-bottom: 0; }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin: 0; }
.facts dt { font-size: .8rem; color: var(--teal-deep); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.facts dd { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 600; }

.prompt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.prompt-list li { border-left: 4px solid var(--marigold); padding-left: 1rem; }
.prompt-list .q { font-weight: 700; color: var(--violet-deep); margin: 0 0 .2rem; }
.prompt-list .a { margin: 0; }

/* A link standing on its own is pressed like a button, so it is the size
   of one: 48px, the number the rest of this file keeps to because the
   audience is 55+. These came to 24-30px, which is worst exactly where it
   matters most — a phone, held one-handed.

   Only links that stand alone. A link inside a sentence is left as it is:
   padding one out would break the line it sits in, it is not a target
   standing on its own, and WCAG exempts it for that reason. The case *every
   standalone link is a full-sized target on a phone* in the suite draws the
   line the same way, by looking at whether the parent carries text of its
   own beside the link. */
.link-solo, .back-link, .join-tier a {
  min-height: 48px; display: inline-flex; align-items: center;
}
/* The margin gives back most of what the min-height took, so the page keeps
   the spacing it had. */
.back-link { gap: .4rem; font-weight: 700; margin-bottom: .95rem; }

/* ---------- Quotes + category strip ---------------------------------------- */

.quote { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; margin: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.quote:nth-child(1) { border-top: 8px solid var(--berry); }
.quote:nth-child(2) { border-top: 8px solid var(--teal); }
.quote:nth-child(3) { border-top: 8px solid var(--violet); }
.quote p { font-family: var(--serif); font-size: 1.13rem; font-style: italic; margin: 0; }
.quote footer { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.quote img { width: 3.7rem; height: 3.7rem; border-radius: 50%; object-fit: cover; flex: none; }
.quote cite { font-style: normal; font-weight: 700; display: block; }
.quote .where { font-size: .92rem; color: var(--ink-soft); }

.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.strip figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.strip img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.strip figcaption {
  position: absolute; inset: auto 0 0 0;
  color: #fff; padding: 2.4rem .8rem .9rem; font-weight: 700; font-size: .97rem;
  text-align: center; text-wrap: balance;
}
.strip figure:nth-child(1) figcaption { background: linear-gradient(180deg, transparent, rgba(224, 27, 98, .95)); }
.strip figure:nth-child(2) figcaption { background: linear-gradient(180deg, transparent, rgba(14, 156, 154, .95)); }
.strip figure:nth-child(3) figcaption { background: linear-gradient(180deg, transparent, rgba(122, 59, 196, .95)); }
.strip figure:nth-child(4) figcaption { background: linear-gradient(180deg, transparent, rgba(168, 111, 0, .95)); }
.strip figure:nth-child(5) figcaption { background: linear-gradient(180deg, transparent, rgba(169, 19, 74, .95)); }

/* ---------- Photograph and video uploads --------------------------------- */

.upload-btn { align-self: flex-start; margin-top: .5rem; cursor: pointer; }
.upload-btn:hover { background: var(--berry-tint); }

.upload-preview { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.upload-preview .hint { margin: 0; }

.media-item {
  margin: 0; width: 11rem;
  border: 2px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column;
}
.media-item img, .media-item video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ground-deep);
}
.media-item figcaption {
  font-size: .82rem; color: var(--ink-soft);
  padding: .5rem .6rem 0; word-break: break-word;
}
.media-remove {
  margin: .5rem .6rem .6rem; padding: .35rem .7rem;
  border: 2px solid var(--berry); border-radius: 999px;
  background: var(--paper); color: var(--berry-deep);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.media-remove:hover { background: var(--berry-tint); }

/* ---------- Interest groups --------------------------------------------- */

.group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.group-card {
  background: var(--paper); border: 2px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.5rem;
}
.group-card h2 {
  font-size: 1.25rem; margin-bottom: .9rem; padding-bottom: .5rem;
  border-bottom: 3px solid var(--berry); color: var(--berry-deep);
}
.group-card .tags { gap: .45rem; }
.group-card .tags li { font-size: .92rem; padding: .3rem .8rem; }

/* The way into a group sits at the foot of the card, pushed down so the
   buttons line up across a row however long each tag list is. */
.group-card { display: flex; flex-direction: column; }
.group-foot { margin-top: auto; padding-top: 1.3rem; }
.group-foot .btn { width: 100%; }
.group-state {
  margin: 0 0 .6rem; min-height: 1.5em;
  font-size: .95rem; color: var(--ink-soft);
}
.group-state.locked { font-weight: 700; color: var(--berry-deep); }

@media (max-width: 62rem) { .group-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .group-grid { grid-template-columns: 1fr; } }

/* ---------- Prose + callouts ---------------------------------------------- */

.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.6rem; color: var(--berry-deep); }
.prose ul { padding-left: 1.3rem; }
.prose li { margin-bottom: .6rem; }
.callout { border-left: 8px solid var(--marigold); background: var(--marigold-tint); padding: 1.3rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.8rem 0; }
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-bottom: .3rem; color: var(--marigold-deep); }
.callout.warn { border-left-color: var(--berry); background: var(--berry-tint); }

/* Every tab opens with this: the page's introduction in one box, set at a
   readable size. The heading above already names the page, so the box never
   repeats it. */
.callout.page-intro {
  margin: 0 0 2.4rem;
  font-size: 1.12rem;
  max-width: 62rem;
}

/* With the page title gone, the first section carries the top spacing. */
.section-top { padding-top: 2.8rem; }
.callout.page-intro p:last-of-type { margin-bottom: 0; }
.callout.page-intro .btn { margin-top: .4rem; }
.callout.warn h3 { color: var(--berry-deep); }

/* ---------- Forms ----------------------------------------------------------- */

.form-card { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 2.2rem; box-shadow: var(--shadow); }
.form-card fieldset { border: 0; padding: 0; margin: 0 0 2.2rem; }
.form-card legend {
  font-family: var(--serif); font-size: 1.38rem; font-weight: 700;
  padding: 0 0 .6rem; margin-bottom: 1.1rem; width: 100%;
  border-bottom: 3px solid var(--berry);
  display: flex; align-items: center; gap: .7rem;
}
.step-n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; background: var(--berry); color: var(--on-berry); border-radius: 50%; font-family: var(--sans); font-size: 1.05rem; font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.form-row.single { grid-template-columns: 1fr; }
.form-row.three { grid-template-columns: repeat(3, 1fr); }
.error-text { color: var(--danger); font-weight: 700; font-size: .95rem; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); background: var(--danger-bg); }
.field.invalid .error-text { display: block; }

/* "Twój profil" runs to six groups of questions, so its sub-headings have to
   be findable at a glance on the way back down a long form: a violet band,
   which is the one brand colour the legends above them do not use, so a band
   never reads as a section of its own. Smaller than a legend, and tinted
   rather than filled, so the numbered step still wins the page. */
.sub-legend {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 700;
  margin: 2.4rem 0 1rem; padding: .55rem .9rem;
  background: var(--violet-tint); color: var(--violet-deep);
  border-left: 6px solid var(--violet);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.form-card legend + .sub-legend,
.form-card .profile-note + .sub-legend { margin-top: 0; }
.profile-note { margin-bottom: 1.4rem; }
/* The star beside a label, and the line under the heading that explains it.
   aria-hidden on the star itself: the control carries aria-required, which is
   what a screen reader announces — the star is for everyone else. */
.req { color: var(--danger); font-weight: 700; }
.req-note { margin: .5rem 0 0; }
.callout.private-note { margin: 1rem 0 1.8rem; }

/* Three boxes across, and only one of them with a hint under its label, left
   the row's inputs at three different heights. The cells already stretch to
   the tallest, so pushing the control to the bottom of its own cell lines
   them all up while the labels stay where they are, at the top. */
.form-card .form-row .field > input,
.form-card .form-row .field > select,
.form-card .form-row .field > textarea { margin-top: auto; }

.form-success { background: var(--teal-tint); border: 3px solid var(--teal); border-radius: var(--radius-lg); padding: 2.2rem; text-align: center; }
.form-success h2 { color: var(--teal-deep); }

/* The two panels above the sheet — whether to keep it, and whether to carry
   on with what was kept. Callouts, so they read as the site asking rather
   than as another row of the form. */
.sheet-ask { margin: 0 0 1.6rem; }
.sheet-ask h3 { margin-bottom: .3rem; }
.sheet-ask .panel-actions { margin: 1.1rem 0 0; }
.sheet-ask .panel-actions .btn { flex: 0 1 auto; }

.sheet-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  background: var(--violet-tint); border: 2px solid var(--violet);
  border-radius: var(--radius-lg); padding: 1.3rem 1.5rem; margin-bottom: 1.6rem;
}
.sheet-progress { flex: 1 1 20rem; }
.sheet-progress .result-count { margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.sheet-progress .result-count span { color: var(--violet-deep); }
.sheet-progress .hint { margin: .5rem 0 0; }
.progress-track { height: .8rem; background: var(--paper); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--berry), var(--violet)); border-radius: 999px; transition: width .25s ease; }
.sheet-buttons { display: flex; gap: .7rem; flex-wrap: wrap; }
.sheet-summary { text-align: left; margin-top: 1.6rem; }
.sheet-summary dd { font-weight: 400; }

/* ---------- What a Guest is told instead ------------------------------------- */

/* The same panel wherever a Guest meets a closed door — writing to
   somebody, the interest groups, the matcher. One shape, so the answer
   reads as one rule rather than three refusals. It is a .callout.warn, so
   the border and tint come from there; only the spacing is new. */
.gate-panel { margin: 0 0 2rem; }
.gate-panel h3 { margin-bottom: .4rem; }
.gate-panel p:last-child { margin-bottom: 0; }
/* Inside the profile's button column it stands in for two buttons, so it
   keeps their rhythm rather than the page's. */
.profile-actions .gate-panel { margin: 0 0 .7rem; }
.profile-actions .gate-panel .btn { width: 100%; margin-top: .6rem; }

/* ---------- Our AI: what it checked, and who it picked ----------------------- */

/* The reading of the sheet, above the ranking. It is the half that makes a
   thin result explain itself, so it is a panel rather than a footnote. */
.ai-checked { margin-bottom: 2.4rem; }
.ai-checked h2 { font-size: 1.25rem; }
.ai-checked h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; color: var(--violet-deep); }
.ai-checked strong { color: var(--berry-deep); font-variant-numeric: tabular-nums; }
.ai-gaps { margin: 0 0 1rem; padding-left: 1.3rem; color: var(--ink-soft); }
.ai-gaps li { margin-bottom: .4rem; }
.ai-results-head { margin-bottom: 1.4rem; }
/* What the thing actually is, under the list it produced. */
.ai-note { margin-top: 1.6rem; max-width: 62rem; }

.match-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.match-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 2px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
/* Best first, so the first three carry the teal the fit badge uses. */
.match-card:nth-child(-n+3) { border-color: var(--teal); }
.match-photo { display: block; }
.match-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--ground-deep); }
.match-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.3rem 1.4rem; flex: 1; }
.match-name { font-family: var(--serif); font-size: 1.32rem; font-weight: 700; margin: 0; }
.match-name .age { color: var(--berry); font-weight: 400; }
/* The number the whole page is about, so it is the one thing in teal. */
.match-fit {
  display: inline-block; margin-left: .5rem; padding: .15rem .6rem;
  border-radius: 999px; background: var(--teal); color: var(--on-teal);
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums; vertical-align: middle;
}
/* Why it scored what it scored. Every line here is a point it gave. */
.match-why { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.match-why li {
  font-size: .93rem; color: var(--ink-soft);
  padding-left: 1.1rem; position: relative;
}
.match-why li::before {
  content: "\2713"; position: absolute; left: 0;
  color: var(--teal-deep); font-weight: 700;
}
.match-card .btn { margin-top: auto; }

@media (max-width: 62rem) { .match-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .match-grid { grid-template-columns: 1fr; } }

/* ---------- Messages ---------------------------------------------------------- */

/* The count beside "Wiadomości" in the bar. Hidden at zero by the script
   rather than by CSS, so the element is genuinely absent from the row and
   the link does not carry a gap where a number might be. */
.nav-badge {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem;
  margin-left: .45rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--berry); color: var(--on-berry);
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* On the current page the link is already berry, so the badge has to
   invert or it disappears into it. */
.site-nav a[aria-current="page"] .nav-badge { background: var(--paper); color: var(--berry-deep); }

.msg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.msg-card {
  display: flex; gap: 1.2rem; align-items: stretch;
  background: var(--paper); border: 2px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.msg-card-photo { flex: none; width: 8rem; display: block; }
.msg-card-photo img { width: 100%; height: 100%; object-fit: cover; background: var(--ground-deep); }
.msg-card-body { display: flex; flex-direction: column; gap: .4rem; padding: 1.2rem 1.3rem 1.3rem; flex: 1; min-width: 0; }
.msg-card-name { font-family: var(--serif); font-size: 1.28rem; font-weight: 700; margin: 0; }
.msg-card-name .age { color: var(--berry); font-weight: 400; }
/* The last line of the conversation, clipped to two lines — a preview, not
   the message. The thread is where it is read. */
.msg-card-last {
  margin: 0; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-card-body .btn { margin-top: auto; align-self: flex-start; }

.msg-unread {
  display: inline-block; margin-left: .5rem; padding: .15rem .6rem;
  border-radius: 999px; background: var(--berry); color: var(--on-berry);
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  vertical-align: middle;
}

.msg-when { margin: 0; font-size: .87rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* The thread. Yours to the right and tinted, theirs to the left on paper —
   the oldest convention there is for a conversation, and the one nobody
   has to be taught. */
.msg-thread { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; }
.msg-line { max-width: 42rem; border-radius: var(--radius-lg); padding: 1rem 1.3rem; }
.msg-mine { justify-self: end; background: var(--berry-tint); border: 2px solid var(--berry); }
.msg-theirs { justify-self: start; background: var(--paper); border: 2px solid var(--line); }
.msg-body { margin: 0 0 .4rem; white-space: pre-wrap; }
.msg-note { margin-top: 1.6rem; max-width: 62rem; }

@media (max-width: 46rem) {
  /* The photograph stops earning its width here; the name and the last
     line need all of it. */
  .msg-card { flex-direction: column; }
  .msg-card-photo { width: 100%; height: 9rem; }
  .msg-line { max-width: 100%; }
}

/* ---------- Joining: the two ways in ---------------------------------------- */

/* The chooser that opens "Dołącz do nas". No `display` of its own, and none
   on #join-sheet either: both are switched with [hidden], and a `display`
   here would beat it — the same trap the "Inne" row is a plain <div> to
   avoid. The row inside carries the layout instead. */
.join-choice h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .4rem; }
.join-choice > p { color: var(--ink-soft); max-width: 58ch; margin-bottom: 2rem; }

/* Two cards side by side, and the buttons line up across them however long
   the sentence under each one runs. */
.join-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.join-option {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--paper); border: 2px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.7rem;
}
.join-option:first-child { border-color: var(--berry); }
.join-option:last-child { border-color: var(--teal); }
.join-option p { margin: 0; color: var(--ink-soft); }

/* Which path this is, and the way back to the other one, above the sheet. */
.join-tier {
  background: var(--violet-tint); border-left: 6px solid var(--violet);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .9rem 1.2rem; margin: 0 0 1.6rem;
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
  justify-content: space-between;
}
.join-tier a { font-weight: 700; white-space: nowrap; }

/* The plan and the payment questions repeat at the end of the Full Member
   path, where they are one section of a form rather than the whole page. */
#sheet-billing .plan-card { margin-bottom: 2rem; }

@media (max-width: 46rem) {
  .join-options { grid-template-columns: 1fr; }
}

/* ---------- Full access: plan, payment methods, order summary ---------------- */

.plan-card {
  display: grid; grid-template-columns: 14rem 1fr; gap: 0;
  border: 2px solid var(--berry); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 2rem; background: var(--paper);
}
.plan-price {
  background: linear-gradient(150deg, var(--berry), var(--violet));
  color: #fff; display: grid; place-content: center; text-align: center;
  padding: 2rem 1rem;
}
.plan-price strong { display: block; font-family: var(--serif); font-size: 2.8rem; line-height: 1; }
.plan-price span { font-size: .95rem; opacity: .9; }
.plan-body { padding: 1.7rem; }
.plan-body h2 { font-size: 1.5rem; margin-bottom: .3rem; }
.plan-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.plan-list li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 600; }
.plan-list li::before {
  content: "✓"; color: var(--teal-deep); font-weight: 700; flex: none; line-height: 1.5;
}

.pay-methods { display: grid; gap: .8rem; }
.pay-option { position: relative; display: block; }
.pay-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pay-face {
  display: flex; align-items: center; gap: 1rem;
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; background: var(--paper);
}
.pay-option input:checked + .pay-face { border-color: var(--berry); background: var(--berry-tint); }
.pay-option input:focus-visible + .pay-face { outline: 3px solid var(--violet); outline-offset: 2px; }
.pay-mark {
  display: grid; place-items: center; flex: none;
  min-width: 4.4rem; height: 2.6rem; padding: 0 .6rem;
  border-radius: 8px; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 1.1rem; letter-spacing: .02em;
}
.pay-mark.blik-mark { background: #000; font-size: .95rem; letter-spacing: .08em; }
.pay-text { display: flex; flex-direction: column; }
.pay-text .hint { font-size: .9rem; }

.pay-detail { margin-top: 1.2rem; }
.blik-input {
  font-family: var(--serif); font-size: 1.9rem; letter-spacing: .35em;
  text-align: center; font-variant-numeric: tabular-nums; padding-inline: .5rem;
}

.order-summary {
  margin-top: 2rem; border: 2px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem; background: var(--ground);
}
.order-summary h3 { font-size: 1.2rem; margin-bottom: .8rem; }
.order-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; font-variant-numeric: tabular-nums;
}
.order-row.total {
  border-top: 2px solid var(--line); margin-top: .4rem; padding-top: .8rem;
  font-weight: 700; font-size: 1.25rem; color: var(--berry-deep);
}
.order-summary .hint { margin: .6rem 0 0; }

@media (max-width: 46rem) {
  /* The home page's tighter rhythm is thrown away here. It takes 2 to 4cm
     out of each seam, which is right on a screen where the sections are
     wide and the scroll is long; on a phone the sections are already close
     and taking that out again would run each heading into the picture above
     it. The standard 3.8rem comes back, except at the hero, where the block
     below sets its own. */
  .home-steps, .home-people, .home-do, .home-news, .home-quotes {
    padding-top: 3.8rem; padding-bottom: 3.8rem;
  }
  [data-page="home"] .cta-band { padding-top: 3.6rem; }

  .plan-card { grid-template-columns: 1fr; }
  .plan-price { padding: 1.4rem 1rem; }
  /* Nothing can stand beside the photograph at this width without squeezing
     it, so the sign goes back under the picture and the column is as wide as
     the picture was on its own — and the order changes with it: photograph,
     sign, button. Beside the photograph the sign is part of the picture and
     the button belongs under it; stacked, the sign wants to sit against the
     photograph it is talking about, and the button reads as the end of the
     whole block rather than as a caption on the picture.

     The button lives inside .hero-shot, with the photograph, so `order`
     alone cannot lift it past a sibling of its parent. `display: contents`
     dissolves that column — the photograph and the button become children
     of .hero-figure themselves — and then all three sequence freely.
     Nothing is positioned against .hero-shot, which is what makes it safe
     to make the box disappear. */
  .hero-figure { flex-direction: column; width: min(100%, 27rem); }
  .hero-shot { display: contents; }
  .hero-figure img { order: 1; }
  /* Almost touching: it is a caption on that photograph, not a panel under
     it, and the gap is what says which. */
  .hero-badge {
    order: 2; flex: 0 0 auto; width: 100%;
    margin-left: 0; margin-top: .35rem;
  }
  .hero-actions { order: 3; margin-top: 1.1rem; }

  /* The hero used to end 3.4rem below the button and the next section start
     3.8rem above its heading — 7.2rem of nothing between "Najpierw się
     rozejrzyj" and "A potem wykonaj trzy proste kroki", which is most of a
     phone screen of blush. Only the seam between those two: `.hero +` keeps
     every other section's spacing where it is. */
  .hero { padding-bottom: 1.6rem; }
  .hero + .section { padding-top: 2.1rem; }
}

/* ---------- Bands + footer --------------------------------------------------- */

.cta-band {
  background: linear-gradient(120deg, var(--berry), var(--violet));
  color: var(--band-ink); padding: 3.6rem 0; text-align: center;
}
.cta-band h2 { color: var(--band-ink); }
.cta-band p { font-size: 1.15rem; color: var(--band-soft); max-width: 48ch; margin-inline: auto; }
.cta-band .btn { margin-top: 1.5rem; }

.site-footer { background: var(--foot); color: var(--foot-ink); padding: 3rem 0 2rem; font-size: .98rem; }
.site-footer a { color: #ffd7e5; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .88rem; text-transform: uppercase; letter-spacing: .1em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

/* ---------- Routing ------------------------------------------------------------ */

[data-page] { display: none; }
[data-page].is-active { display: block; }

/* ---------- Responsive ---------------------------------------------------------- */

@media (max-width: 68rem) {
  .brand { font-size: 1.02rem; gap: .4rem; }
  .brand .word { max-width: 9.5rem; }
  .brand .mark { width: 2.7rem; height: 2.7rem; }
  .site-nav a { padding: .35rem .6rem; }
}
@media (max-width: 62rem) {
  .grid-4, .strip { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .filter-row, .filter-row.three { grid-template-columns: repeat(2, 1fr); }
  .filter-row.single { grid-template-columns: 1fr; }
  .form-row.three { grid-template-columns: repeat(2, 1fr); }
  .profile-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- The bar folds away ----------------------------------------------- */

/* The header is sticky, so whatever it is tall it is tall for the whole
   visit. Eight pill links stacked one per line came to 315-380px, and with
   the demo bar above that was most of a phone screen pinned to the top for
   ever: the site looked like a list of its own sections and nothing else.
   The links fold behind a button and the bar comes back to one row.

   The fold used to stop at 40rem, which was right for seven links. The
   eighth — "Dopasowania" — pushed the bar onto a third row all the way from
   660px to 920px, a 197px header on every tablet, which is the thing this
   block exists to prevent. It folds to 59rem now. Only these rules moved:
   the 17px root and the rest of the phone layout still turn over at 40rem,
   because a tablet is not a phone in any other respect.

   NARROW in app.js is the same number and has to move with it.

   A button with a word on it rather than a bare hamburger: the audience is
   55+, and "Menu" needs no learning. */
@media (max-width: 59rem) {
  .site-header .wrap { min-height: 0; }
  .brand .word { max-width: none; }
  .site-nav { width: 100%; }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: .6rem; order: 1;
    min-height: 3rem; padding: .4rem 1.2rem;
    border: 2px solid var(--berry); border-radius: 999px;
    background: var(--paper); color: var(--berry-deep);
    font: inherit; font-weight: 700; cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"] { background: var(--berry); border-color: var(--berry); color: var(--on-berry); }
  /* Three bars drawn with a border, so nothing depends on a glyph the
     device may not have. They close up into a cross when the menu is open. */
  .nav-toggle-bars {
    width: 1.5rem; height: 1.05rem; flex: none;
    border-top: 3px solid currentColor; border-bottom: 3px solid currentColor;
    position: relative;
  }
  /* Two middle lines lie on top of each other: closed, only the first is
     inked and it is the third bar; open, the outer two borders go and both
     swing apart into a cross. */
  .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    margin-top: -1.5px; border-top: 3px solid currentColor;
  }
  .nav-toggle-bars::after { border-top-color: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { border-top-color: transparent; border-bottom-color: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { border-top-color: currentColor; transform: rotate(-45deg); }

  /* Closed by default here, and only here: above 59rem the rule does not
     apply, so the links are visible whatever state the button was left in. */
  .nav-links { display: none; }
  .site-nav.nav-open .nav-links {
    display: grid; gap: .5rem; order: 3; flex: 1 0 100%;
    margin-top: .7rem;
    /* An open menu is a deliberate act, but it still must not outgrow the
       screen it opened on. */
    max-height: 68vh; overflow-y: auto;
  }
  /* One column of nine, not three groups of a few: the grouping is a
     desktop idea and means nothing in a list you scroll. `display: contents`
     dissolves the groups so every link is a row of the same grid, and
     `order` then puts them where a phone wants them — signing in first,
     because somebody who has an account came to do that and should not have
     to read past eight other things to find it, and the language last. */
  .site-nav.nav-open .nav-group { display: contents; }
  .site-nav.nav-open .nav-links a,
  .site-nav.nav-open .nav-links button { justify-content: center; min-height: 3.2rem; }
  .site-nav.nav-open .nav-lead a { order: 2; }
  .site-nav.nav-open .nav-main a { order: 3; }
  .site-nav.nav-open .nav-aside a { order: 1; margin-bottom: .55rem; }
  .site-nav.nav-open .lang-toggle { order: 4; margin-top: .55rem; }
}

@media (max-width: 40rem) {
  :root { font-size: 17px; }
  /* The headline wants the whole width here — "Małżeństwo" alone is most of
     it — so the lockup wraps and the mark sits under the words rather than
     being pulled into them by the h1's negative margin. */
  /* No room to flank anything on a phone: the headline takes the whole
     width and the two renders sit under it side by side, in the order they
     are asked in — married, then not so sure. `order` does that without
     moving them in the markup, where the wedding pair leads. */
  .hero-title { gap: .4rem .8rem; flex-wrap: wrap; justify-content: center; }
  .hero-title h1 { flex: 1 0 100%; margin: 0; order: 1; }
  /* The pair of them has to fit one row together — 40 + 37 of the viewport
     plus the gap, which still leaves room at 360px, the narrowest phone
     worth designing for. Any wider and they wrap, and a render on a line of
     its own reads as two unrelated pictures rather than a question. */
  /* Same arithmetic as above at phone size: the figures have to come to
     40vw for the pair of them to fit one row, and the box is that plus its
     air. max() rather than min() because the more negative of two negative
     lengths is the smaller number. */
  .mark-couple {
    order: 2; width: min(58vw, 13.8rem);
    margin-inline: max(-9.1vw, -2.17rem);
  }
  .mark-pair { order: 3; margin-left: 0; width: min(37vw, 9rem); }
  .grid-4, .strip, .filter-row, .filter-row.three, .form-row, .form-row.three, .facts { grid-template-columns: 1fr; }
  /* The count, the sort menu and the clear button each take a line: the menu
     alone asks for 14rem, and with its label beside it that is wider than a
     360px phone has to give. */
  .filter-foot { flex-direction: column; align-items: stretch; }
  .sort-field select { min-width: 0; }
  /* The one that was pushing every page 53px wider than the phone it was
     on: two columns were kept here, and a grid track will not shrink below
     its content, so the footer set the width of the page. */
  .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  /* The one that was pushing every page 53px wider than the phone it was
     on: two columns were kept here, and a grid track will not shrink below
     its content, so "Grupy zainteresowań" set the width of the page. */
  .btn { width: 100%; }
  .hero-actions .btn { width: auto; flex: 1 1 12rem; }
  .sheet-buttons .btn { flex: 1 1 100%; }
}

/* ---------- Small signs of life ------------------------------------------ */

/* The photograph eases in a little when you point at a card. */
.member-photo img { transition: transform .4s ease; }
.member-card:hover .member-photo img { transform: scale(1.045); }
.strip img { transition: transform .5s ease; }
.strip figure:hover img { transform: scale(1.06); }

/* The green dot breathes, so "online now" reads as live rather than printed. */
.member-online::before { animation: livePulse 2.6s ease-in-out infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 145, 76, .5); }
  70%      { box-shadow: 0 0 0 .45rem rgba(23, 145, 76, 0); }
}

/* Blocks rise gently into place as you scroll. Only applied once the script
   has confirmed it can observe them, so nothing can end up stuck hidden. */
body.reveal-on .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
body.reveal-on .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  body.reveal-on .reveal { opacity: 1; transform: none; }
}

/* ---------- Print ------------------------------------------------------------------ */

@media print {
  .site-header, .site-footer, .demo-bar, .page-head, .cta-band, .no-print, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .form-card { border: 0; box-shadow: none; padding: 0; }
  .form-card legend { border-bottom: 2px solid #000; }
  .step-n { background: #fff !important; color: #000 !important; border: 2px solid #000; }
  fieldset { break-inside: avoid; page-break-inside: avoid; }
  input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="date"], select {
    border: 0; border-bottom: 1.5px solid #000; border-radius: 0; min-height: 2.2rem; appearance: none; -webkit-appearance: none;
  }
  textarea { border: 1.5px solid #000; border-radius: 0; }
  .chip { display: inline-flex; align-items: center; gap: .4rem; }
  .chip input { position: static; inset: auto; opacity: 1; width: 1rem; height: 1rem; margin: 0; flex: none; appearance: auto; -webkit-appearance: auto; }
  .chip span { border: 0; background: #fff !important; color: #000 !important; min-height: 0; padding: 0; font-weight: 400; }
  .print-only { display: block !important; }
  .form-row.print-only { display: grid !important; }
  /* Nothing can be ticked on paper, so the "Inne" box is always there to write in. */
  .chip-other[hidden] { display: block !important; }
}
.print-only { display: none; }