/* ---------------------------------------------------------------------------
 * rozarka — design layer.
 *
 * Lora body + Playfair nav, Luxurious Script for the display names. Warm mauve on cream.
 * Loaded AFTER css/style.css, which is sablona1's scaffold: that stylesheet is
 * token-driven (148 var() uses), so re-skinning is an override of :root rather
 * than a rewrite. Values are measured from the Figma board (ref/tokens.md), not
 * picked by eye.
 * ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Luxurious Script';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/luxurious-400-latin-ext.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: 'Luxurious Script';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/luxurious-400-latin.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: 'Lora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/lora-600-latin-ext.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: 'Lora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/lora-600-latin.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;
}

:root {
    --font-display: 'Luxurious Script', 'Playfair Display', Georgia, serif;
    --font-body: 'Lora', Georgia, 'Times New Roman', serif;
    --font-cta: 'Playfair Display', Georgia, serif;

    --c-text-mauve: #745861;
    --c-ink: #4a2b24;
    --c-cream: #fffcf6;
    --c-cream-2: #fffcf5;
    --c-story-card: #e4ccba;
    --c-blush: #e7cbb8;
    --c-sage: #c2d0bb;
    --c-cta: #7d626a;
    --c-hero-fallback: #e3bcb3;
}


/* --------------------------------------------------------------------------
   Surface. The scaffold came from sablona1, whose identity is IMAGE based -
   wood-tile.jpg planks, paper.png grain, torn-paper edges - none of it token
   driven, so overriding :root alone left the page looking exactly like
   sablona1. This board has no wood and no paper: it is one continuous surface
   carrying its own backdrop, exported from the Figma frame.
   -------------------------------------------------------------------------- */
body {
    background-color: var(--c-cream);
    position: relative;
}
/* The board's stin_textura (673:569 / mobile 779:1316), composited OURSELVES:
   Figma's isolated node render cannot reproduce the six HARD_LIGHT 30% texture
   rects blending against the frame cream (it flattened them at ~51% alpha,
   which tinted the whole page beige). dd90e9ee texture; the big rect tiles
   5.49x vertically per its imageTransform; margin samples match the board.
   Stretched over the full document. 100%/100% rather than cover: the
   texture is page-height by design, and a modest vertical stretch of a soft
   shadow wash is invisible while cover-zooming it to viewport width is not.
   The patchy diagonal composition with cream gaps IS the design. */
/* Seamless tile (owner request): one period of the big patch at NATIVE 1620px
   width, mirrored vertically ([T; flip T]) so repeat-y never seams. Trades the
   board's five accent patches for tileability + full resolution. */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../img/figma/backdrop-tile.webp');
    background-repeat: repeat;
    background-size: 100% auto;
}

/* sablona1 surface utilities, neutralised rather than deleted: the section
   templates still carry the class names, and they must not paint. */
.bs-paper,
.bs-wood,
.bs-wood-band {
    background-color: transparent;
    background-image: none;
}
.bs-wood-band__tear { display: none; }

/* the divider is now this board's own vector */
.bs-divider {
    display: block;
    padding: 40px 0;
    background: none;
}
.bs-divider picture { display: block; width: 100%; }
.bs-divider__motif { display: block; width: 100%; height: auto; }  /* oddelovac is a full-width 1620x105 strip */
.bs-divider__line { display: none; }

/* --------------------------------------------------------------------------
   sablona1 ornaments that this board does not have. Its flowers, botanical
   branches, embossed swirl and torn-paper edges are specific to that design;
   none of them appear anywhere on this Figma board. Hidden rather than deleted
   from the scaffold CSS so the section templates keep parsing.
   -------------------------------------------------------------------------- */
.bs-story__flower,
.bs-program__botanical, .bs-program__leaf, .bs-program__flower, .bs-program__pin,
.bs-guestbook__flourish, .bs-rsvp__swirl, .bs-gifts__heart,
.bs-dress__branch, .bs-floral-corner, .bs-wood-band__tear { display: none !important; }

/* --------------------------------------------------------------------------
   HEROBOX — Figma node 673:578, 1620x843. Same skeleton as the scaffold's hero;
   only the type and the light treatment differ, measured off text.md:
   wordmark Luxurious 40, nav Playfair 17 UPPERCASE, names Luxurious 128 with
   their center at y~331 (39%), date Luxurious 48. The board draws NO darkening
   overlay - the photo carries the text on its own shading.
   -------------------------------------------------------------------------- */
/* the board's `filtr` layer: solid #776464 at 50% - the muted warm cast that
   makes the white lockup read on the light stone */
.bs-hero__overlay { background: rgba(119, 100, 100, .5); }
/* board window on the 3:4 hero source: rows ~25-64% (hero_image box 1621x1082,
   FILL, clipped to the 843 frame) -> centre the crop at 41% */
.bs-hero__media img { object-position: center 41%; }
.bs-hero__logo { font-size: 40px; }
.bs-nav__ul a {
    font-family: var(--font-cta);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.bs-hero__center { top: 39%; }
.bs-hero__names { font-size: clamp(56px, 7.9vw, 128px); }
.bs-hero__date { font-size: clamp(22px, 2.96vw, 48px); margin-top: 6px; }
/* countdown is ours, not the board's - numerals read better in the nav face
   than in script */
.bs-countdown__num { font-family: var(--font-cta); }
.bs-countdown__label { font-family: var(--font-cta); }

/* --------------------------------------------------------------------------
   CESTA ZIVOTEM (Story) — Figma node 673:620, render 1382x1833.
   Photos 506.8x338.4 in the square 703px frame node (centred; overhangs the
   photo box ~19% each side / ~54% top+bottom). story-frame.webp is the NODE
   RENDER of 728:249 - fill opacity .5 + temperature/tint filters baked - the
   raw stock png is dark mahogany and wrong. Two flow columns,
   right offset one photo height (338.4/1185.8 = 28.54cqw of the list); captions
   right-aligned, their right edge 40px past the photo edge. Caption type is all
   Lora per the node's styleOverrideTable: title 600@29, date 400@24, desc
   400@20 (the Playfair base style is fully overridden).
   -------------------------------------------------------------------------- */
.bs-cesta { padding: 56px 0 64px; }
.bs-cesta__heading {
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(30px, 2.96vw, 48px);
    color: var(--c-text-mauve);
}
.bs-cesta__intro {
    width: min(1114px, 92vw);
    margin: 30px auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(16px, 1.23vw, 20px);
    line-height: 1.55;
    color: var(--c-text-mauve);
}
.bs-cesta__intro p { margin: 0 0 .5em; }
.bs-cesta__list {
    container-type: inline-size;
    width: min(1186px, 85vw);   /* frame art overhangs 8.3% of the list per side -
                                   85vw keeps it inside the viewport at mid widths */
    margin: 133px auto 0;
    display: flex;
    justify-content: space-between;
}
.bs-cesta__col {
    width: 42.74cqw;
    margin: 0; padding: 0;
    list-style: none;
}
.bs-cesta__col--right { margin-top: 28.54cqw; }
.bs-cesta__item {
    margin: 0;
    /* the board's rhythm: every item occupies exactly TWO photo heights - the
       caption zone (81.6px + caption + 52px) fills one full photo height, so
       photo N+2 lands precisely at photo N's bottom edge in the other column.
       min-height keeps the rhythm for short captions and lets a long
       description extend its own column instead of overlapping. */
    min-height: 57.07cqw;
}
.bs-cesta__card {
    position: relative;
    margin: 0;
    aspect-ratio: 506.8 / 338.4;
}
.bs-cesta__photo {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* measured: the frame render's hole starts ~0.5% of photo height ABOVE the
       photo box (hole y 25.68% vs box 25.93%), which left a background sliver
       along the top edge. Bleed upward only (origin bottom): the border is 50%
       TRANSLUCENT, so an oversized bottom/side bleed reads as a ghost edge
       through it - the design itself tucks only ~4px under the sides. */
    transform: scale(1.02, 1.025);
    transform-origin: 50% 100%;
    object-position: center 28%;   /* portrait sources (the cat) keep heads in
                                      frame inside the 3:2 cover crop */
}
.bs-cesta__frame {
    position: absolute;
    left: 50%; top: 50%;
    width: 138.7%;
    aspect-ratio: 1 / 1;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
    max-width: none;
}
/* captions mirror per column (owner): left column right-aligned with the
   board's +40px overhang, right column left-aligned with the mirrored -40px */
.bs-cesta__caption {
    text-align: right;
    margin: 16.1% -7.9% 0 0;
    color: var(--c-text-mauve);
    font-family: var(--font-body);
}
.bs-cesta__title {
    margin: 0;
    font-family: var(--font-body);   /* style.css h3 rule sets --font-display directly */
    font-weight: 600;
    font-size: clamp(22px, 1.81vw, 29px);
    line-height: 1.33;
}
.bs-cesta__date {
    margin: 2px 0 0;
    font-weight: 400;
    font-size: clamp(17px, 1.48vw, 24px);
}
.bs-cesta__desc {
    margin-top: 14px;
    font-weight: 400;
    font-size: clamp(15px, 1.23vw, 20px);
    line-height: 1.5;
}
.bs-cesta__desc p { margin: 0 0 .5em; }
.bs-cesta__col--right .bs-cesta__caption {
    text-align: left;
    margin: 16.1% 0 0 -7.9%;
}

@media (max-width: 820px) {
    /* mobile board 777:662: one centred column, same caption treatment */
    .bs-cesta__list { display: block; margin-top: 90px; width: 82vw; }
    .bs-cesta__col { width: 100%; }
    .bs-cesta__card { width: 68%; margin: 0 auto; }   /* frame overhang must fit 100vw */
    .bs-cesta__col--right { margin-top: 0; }
    .bs-cesta__item + .bs-cesta__item { margin-top: 0; }
    .bs-cesta__caption { margin-right: 0; margin-bottom: 12vw; }
    .bs-cesta__item { min-height: 0; }
}


/* --------------------------------------------------------------------------
   Shared pill button — the board's `tlacitko` component: 270x50, radius 18,
   blush fill, Lora 600 18 in ink. Radius/fill live on the INNER rectangle of
   the Figma instance (27:11), not the instance frame.
   -------------------------------------------------------------------------- */
.bs-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 270px;
    min-height: 50px;
    padding: 12px 28px;
    border-radius: 18px;
    background: var(--c-blush);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    color: var(--c-ink);
    text-align: center;
}
.bs-pill:hover { filter: brightness(1.04); }

/* --------------------------------------------------------------------------
   GALERIE — Figma node 673:649, render 1334x1500. Six-photo mosaic on the
   board's measured absolute grid (container aspect 1334/1147, 30px gutters);
   remainder chunks fall back to a plain 3-column grid.
   -------------------------------------------------------------------------- */
.bs-galerie { padding: 56px 0 40px; }
.bs-galerie__heading {
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(30px, 2.96vw, 48px);
    color: var(--c-text-mauve);
}
.bs-galerie__intro {
    width: min(564px, 92vw);
    margin: 22px auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.23vw, 20px);
    line-height: 1.5;
    color: var(--c-text-mauve);
}
.bs-galerie__intro p { margin: 0; }
.bs-galerie__cta-row { text-align: center; margin-top: 34px; }
.bs-galerie__mosaic { width: min(1334px, 94vw); margin: 46px auto 0; }
.bs-galerie__set {
    position: relative;
    aspect-ratio: 1334 / 1147;
}
.bs-galerie__set + .bs-galerie__set,
.bs-galerie__set + .bs-galerie__rest,
.bs-galerie__rest + .bs-galerie__set { margin-top: 2.25%; }
.bs-galerie__cell { position: absolute; display: block; }
.bs-galerie__cell img, .bs-galerie__tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* measured off the board (percent of the 1334x1147 mosaic box) */
.bs-galerie__cell--1 { left: .6%;   top: 1.05%;  width: 69.7%; height: 37.5%; }
.bs-galerie__cell--2 { left: 72.6%; top: .87%;   width: 26.7%; height: 54.05%; }
.bs-galerie__cell--3 { left: .6%;   top: 41.15%; width: 33.6%; height: 29.3%; }
.bs-galerie__cell--4 { left: 36.4%; top: 41.15%; width: 33.9%; height: 57.98%; }
.bs-galerie__cell--5 { left: 72.6%; top: 57.54%; width: 26.8%; height: 41.6%; }
.bs-galerie__cell--6 { left: .67%;  top: 73.06%; width: 33.7%; height: 26.07%; }
.bs-galerie__rest {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25%;
}
.bs-galerie__tile { aspect-ratio: 3 / 2; display: block; }
.bs-galerie__video {
    position: relative;
    width: min(900px, 90%);
    margin: 46px auto 0;
    aspect-ratio: 16 / 9;
    box-shadow: 0 14px 30px rgba(50,34,26,.18);
}
.bs-galerie__video > style, .bs-galerie__video > script { display: none; }
.bs-galerie__video iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 820px) {
    /* mobile board 777:685: two-column stagger, last photo full width */
    .bs-galerie__set {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* fr alone floors at the
            img's intrinsic min-content width and blows past the viewport */
        gap: 3vw;
    }
    .bs-galerie__cell { position: static; width: auto; height: auto; min-width: 0; }
    .bs-galerie__cell--1, .bs-galerie__cell--4 { aspect-ratio: 3 / 4; }
    .bs-galerie__cell--2, .bs-galerie__cell--5 { aspect-ratio: 3 / 3.4; }
    .bs-galerie__cell--3 { aspect-ratio: 3 / 2.6; }
    .bs-galerie__cell--6 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
    .bs-galerie__rest { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3vw; }
}


/* --------------------------------------------------------------------------
   PROGRAM — Figma node 673:679 (495x843). The board is a bare centred list on
   the backdrop: heading Lora 600 48, then every line - item title, time, note -
   uniform Lora 400 16, 35px between items. No card, no art. Menu (jidelni
   listek) has no board node and reuses this vocabulary as a sibling.
   -------------------------------------------------------------------------- */
.bs-program { padding: 56px 0 40px; }
.bs-program__inner { width: min(500px, 92vw); margin: 0 auto; }
.bs-program__heading {
    margin: 0;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(30px, 2.96vw, 48px);
    color: var(--c-text-mauve);
}
.bs-program__intro {
    margin: 30px auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-text-mauve);
}
.bs-program__intro p { margin: 0; }
.bs-program__list { list-style: none; margin: 35px 0 0; padding: 0; }
.bs-program__row + .bs-program__row { margin-top: 35px; }
.bs-program__row-title, .bs-program__row-time, .bs-program__row-note {
    margin: 0;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: var(--c-text-mauve);
}
.bs-program__row-note p { margin: 0; }


/* --------------------------------------------------------------------------
   DULEZITI LIDE (People) — Figma node 673:704 (1225x658). Heading, intro, the
   embossed-swirl ornament (768:535, 942x134), then 201px circular avatars in
   one visual row: uniform 62px gaps, grouping carried by the centred side
   headings (Lora 700 24). Name Lora 500 24, role Lora 400 16.
   -------------------------------------------------------------------------- */
.bs-people { padding: 56px 0 40px; }
.bs-people__heading {
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(30px, 2.96vw, 48px);
    color: var(--c-text-mauve);
}
.bs-people__intro {
    width: min(784px, 92vw);
    margin: 18px auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(16px, 1.23vw, 20px);
    line-height: 1.45;
    color: var(--c-text-mauve);
}
.bs-people__intro p { margin: 0; }
.bs-people__swirl {
    display: block;
    width: min(942px, 84vw);
    height: auto;
    margin: 20px auto 0;
}
.bs-people__groups {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 62px;
    width: min(1225px, 94vw);
    margin: 18px auto 0;
}
.bs-people__group-heading {
    margin: 0 0 53px;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 24px;
    color: var(--c-text-mauve);
}
.bs-people__row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 62px;
}
.bs-people__person { margin: 0; width: 201px; }
.bs-people__avatar {
    width: 201px; height: 201px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-blush);
}
.bs-people__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 28%;   /* portrait uploads: keep heads in frame */
}
.bs-people__name {
    margin-top: 12px;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 24px;
    color: var(--c-text-mauve);
}
.bs-people__role {
    text-align: center;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--c-text-mauve);
}
.bs-people__bio {
    margin-top: 8px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text-mauve);
}
.bs-people__bio p { margin: 0; }

@media (max-width: 820px) {
    .bs-people__groups { gap: 40px; }
    .bs-people__row { gap: 8vw 6vw; }
    .bs-people__person { width: 38vw; max-width: 201px; }
    .bs-people__avatar { width: 38vw; height: 38vw; max-width: 201px; max-height: 201px; }
    .bs-people__group-heading { margin-bottom: 26px; }
    .bs-people__name { font-size: 20px; }
}


/* --------------------------------------------------------------------------
   DULEZITA MISTA (Location) — Figma node 673:730 (1287x1151). Mirrored rows:
   live map 509x342 inside the wood frame (same node render as Story, painted
   OVER the map edges, pointer-events none so the map stays draggable), venue
   text bottom-aligned beside it. Type: label Lora 28, name 20, address 16 with
   the pin, description 14. Even rows mirror layout AND text alignment.
   -------------------------------------------------------------------------- */
.bs-mista { padding: 56px 0 64px; }
.bs-mista__heading {
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(30px, 2.96vw, 48px);
    color: var(--c-text-mauve);
}
.bs-mista__intro {
    width: min(784px, 92vw);
    margin: 18px auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.5;
    color: var(--c-text-mauve);
}
.bs-mista__intro p { margin: 0; }
.bs-mista__rows {
    width: min(1210px, 85vw);   /* same frame-overhang allowance as the story list */
    margin: 90px auto 0;
    display: flex;
    flex-direction: column;
    gap: 110px;   /* NOT `row + row` margins: the per-map <script> tags sit
                     between rows and break element adjacency */
}
.bs-mista__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6%;
}
.bs-mista__row--mirror { flex-direction: row-reverse; }
.bs-mista__mapwrap { position: relative; flex: 0 0 42%; }
.bs-mista__map {
    aspect-ratio: 509 / 342;
    width: 100%;
    background: var(--c-blush);
    transform: scale(1.02, 1.025);   /* same top-only bleed as .bs-cesta__photo */
    transform-origin: 50% 100%;
}
.bs-mista__frame {
    position: absolute;
    left: 50%; top: 50%;
    width: 138.5%;
    aspect-ratio: 1 / 1;
    height: auto;
    max-width: none;
    transform: translate(-50%, -50%);
    pointer-events: none;   /* the live map underneath stays draggable */
}
.bs-mista__text {
    flex: 0 1 431px;
    padding-bottom: 8px;
    font-family: var(--font-body);
    color: var(--c-text-mauve);
}
.bs-mista__row--mirror .bs-mista__text { text-align: right; }
.bs-mista__label { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 28px; }
.bs-mista__name { margin-top: 5px; font-size: 20px; }
.bs-mista__addr {
    margin: 8px 0 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.bs-mista__row--mirror .bs-mista__addr { justify-content: flex-end; }
.bs-mista__pin { flex: 0 0 auto; }
.bs-mista__desc { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.bs-mista__desc p { margin: 0; }

@media (max-width: 820px) {
    .bs-mista__rows { margin-top: 60px; width: 84vw; gap: 80px; }
    .bs-mista__row, .bs-mista__row--mirror { flex-direction: column; align-items: stretch; gap: 30px; }
    .bs-mista__mapwrap { flex: none; width: 68%; margin: 0 auto; }
    .bs-mista__text { flex: none; padding-bottom: 0; }
    .bs-mista__row--mirror .bs-mista__text { text-align: left; }
    .bs-mista__row--mirror .bs-mista__addr { justify-content: flex-start; }
}


/* --------------------------------------------------------------------------
   DOPLNUJICI INFORMACE (Info) — Figma node 673:800 (1093x609): bare centred
   heading + the couple's free-form text (Lora 20; the board's lone Inter node
   is a placeholder artifact, see tokens.md) on the backdrop.
   -------------------------------------------------------------------------- */
.bs-info { padding: 90px 16px; }
.bs-info__heading {
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(30px, 2.96vw, 48px);
    color: var(--c-text-mauve);
}
.bs-info__text {
    width: min(659px, 92vw);
    margin: 26px auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(16px, 1.23vw, 20px);
    line-height: 1.5;
    color: var(--c-text-mauve);
}
.bs-info__text p { margin: 0 0 .5em; }
.bs-info__text p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   DARY (Gifts) — Figma node 755:182 (render 1604x756). Heading + message, then
   the ribbon (dary_stuha node render) threading behind three ROUNDED (r30)
   photos staggered per the board. The whole band is the click-only trigger for
   the registry overlay (which lives in style.css - shared reservation UI).
   Band geometry: photo zone y244..756 of the render => band aspect 1604/512;
   the ribbon extends above it (top -41%) behind the intro text.
   -------------------------------------------------------------------------- */
.bs-gifts { padding: 56px 0 64px; }
.bs-gifts__heading {
    position: relative; z-index: 1;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(30px, 2.96vw, 48px);
    color: var(--c-text-mauve);
}
.bs-gifts__text {
    position: relative; z-index: 1;
    width: min(659px, 92vw);
    margin: 26px auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(16px, 1.23vw, 20px);
    line-height: 1.5;
    color: var(--c-text-mauve);
}
.bs-gifts__text p { margin: 0; }
.bs-gifts__trigger {
    display: block;
    width: 100%;
    margin: 0; padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.bs-gifts__sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.bs-gifts__band {
    position: relative;
    display: block;
    width: min(1604px, 100vw);
    margin: 0 auto;
    aspect-ratio: 1604 / 512;
}
.bs-gifts__band + .bs-gifts__band { margin-top: 48px; }
.bs-gifts__ribbon {
    position: absolute;
    left: 0; top: -41.2%;
    width: 100%; height: 139.8%;   /* render bleed absorbed by a 1.6% squeeze -
                                      wider pushed scrollWidth past the viewport */
    max-width: none;
    pointer-events: none;
}
.bs-gifts__ribbon--m { display: none; }
.bs-gifts__slot {
    position: absolute;
    border-radius: clamp(16px, 1.85vw, 30px);
    background-size: cover;
    background-position: center;
    transition: transform .25s ease;
}
.bs-gifts__slot--1 { left: 14.21%; top: 6.84%;  width: 19.14%; height: 43.95%; }
.bs-gifts__slot--2 { left: 40.77%; top: 28.7%;  width: 19.14%; height: 43.95%; }
.bs-gifts__slot--3 { left: 67.77%; top: 0;      width: 19.68%; height: 45.2%; }
.bs-gifts__trigger:hover .bs-gifts__slot,
.bs-gifts__trigger:focus-visible .bs-gifts__slot { transform: translateY(-1.5%) scale(1.02); }
.bs-gifts__trigger:focus-visible { outline: 2px solid var(--c-cta); outline-offset: -4px; }

@media (max-width: 820px) {
    /* mobile board 777:767: vertical S-ribbon, three stacked staggered photos */
    .bs-gifts__band {
        width: 72vw;
        aspect-ratio: 275.7 / 626.5;
    }
    .bs-gifts__ribbon { display: none; }
    .bs-gifts__ribbon--m {
        display: block;
        left: 0; top: -.6%;
        width: 100.1%; height: 100.2%;
    }
    .bs-gifts__slot--1 { left: 34.4%; top: 10.28%; width: 61.6%; height: 19.87%; }
    .bs-gifts__slot--2 { left: 14.9%; top: 39.78%; width: 61.6%; height: 19.87%; }
    .bs-gifts__slot--3 { left: 32.6%; top: 66.03%; width: 63.3%; height: 20.43%; }
}

/* overlay refinements over the kept style.css registry: the card name was
   var(--font-display), which is now the script face - gift names in script
   are unreadable */
.bs-gift__name { font-family: var(--font-body); font-weight: 600; }


/* --------------------------------------------------------------------------
   DRESS CODE — Figma node 673:810 (1611x828). Dress (320x603) + suit (356x603)
   vectors adjacent on the left; right column: heading, note (Lora 20, 491
   wide), palette as CONTIGUOUS 67x56 swatches (no gaps). Flow, art and text
   vertically centred against each other.
   -------------------------------------------------------------------------- */
.bs-dress { padding: 72px 0; }
.bs-dress__stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6%;
    width: min(1310px, 92vw);
    margin: 0 auto;
}
.bs-dress__art {
    flex: 0 1 52%;
    display: flex;
    align-items: flex-end;
}
.bs-dress__illu { display: block; height: auto; }
.bs-dress__illu--dress { width: 47.3%; }   /* 320 / 676 */
.bs-dress__illu--suit  { width: 52.7%; }
.bs-dress__card { flex: 0 1 40%; text-align: center; }
.bs-dress__heading {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(30px, 2.96vw, 48px);
    color: var(--c-text-mauve);
}
.bs-dress__text {
    width: min(491px, 100%);
    margin: 30px auto 0;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.23vw, 20px);
    line-height: 1.45;
    color: var(--c-text-mauve);
}
.bs-dress__text p { margin: 0 0 .5em; }
.bs-dress__palette {
    display: flex;
    justify-content: center;
    margin-top: clamp(40px, 6vw, 132px);
}
.bs-dress__swatch { width: 67px; height: 56px; display: block; }

@media (max-width: 820px) {
    .bs-dress__stage { flex-direction: column; gap: 40px; width: 88vw; }
    .bs-dress__art { flex: none; width: min(420px, 88vw); margin: 0 auto; }
    .bs-dress__card { flex: none; }
    .bs-dress__swatch { width: 54px; height: 45px; }
}


/* --------------------------------------------------------------------------
   FOOTER — Figma node 673:916: dusty-rose band #b28b8b with the white script
   lockup (names Luxurious 128, date 48), then the lighter #d6b29f strip with
   the shared footer strings (Lora 16, white).
   -------------------------------------------------------------------------- */
#footer { text-align: center; }
#footer > div:first-child {
    background: #b28b8b;
    padding: 34px 20px 44px;
}
#footer h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(44px, 7.9vw, 128px);
    line-height: 1.05;
    color: #fff;
}
#footer > div:first-child p {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.96vw, 48px);
    color: #fff;
    margin-top: 2px;
}
#footer > div + div {
    background: #d6b29f;
    padding: 26px 20px 30px;
}
#footer > div + div p {
    font-family: var(--font-body);
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.7;
    color: #fff;
}
#footer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: 3px; }
#footer a:hover { text-decoration-color: currentColor; }


/* --------------------------------------------------------------------------
   POTVRZENI UCASTI (GuestList/RSVP) — Figma node 673:833: one large ROUNDED
   near-white card on the backdrop; labelled underline inputs, three choice
   groups side by side, ruled Poznamka, blush pill submit. Form markup comes
   from the shared Nette renderer - selectors here restyle, never rename.
   -------------------------------------------------------------------------- */
.bs-rsvp { padding: clamp(46px, 6vw, 96px) 16px; overflow-x: clip; }
.bs-rsvp__card {
    position: relative; width: 100%; max-width: 1390px; margin: 0 auto;
    background: #fffdfa;
    border-radius: clamp(20px, 2.5vw, 40px);
    box-shadow: 0 6px 18px rgba(80, 60, 55, .10);
    padding: clamp(34px, 5vw, 74px) clamp(22px, 6vw, 118px) clamp(40px, 5vw, 78px);
}
.bs-rsvp__heading {
    font-family: var(--font-body); font-weight: 600; color: var(--c-text-mauve);
    font-size: clamp(30px, 2.96vw, 48px); text-align: center; margin: 0;
}
.bs-rsvp__swirl { display: none; }
.bs-rsvp__intro {
    font-family: var(--font-body); color: var(--c-text-mauve); text-align: center;
    max-width: 900px; margin: 22px auto clamp(22px, 3vw, 44px); line-height: 1.55; font-size: 16px;
}
.bs-rsvp__form { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; }
.bs-rsvp__row { margin: 0 0 22px; }
.bs-rsvp__row:has(.bs-rsvp__option) > label:first-child { margin-bottom: 12px; }
.bs-rsvp__form form { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(20px, 3vw, 48px); }
.bs-rsvp__form form > * { grid-column: 1 / -1; }
.bs-rsvp__form .bs-rsvp__row:has(input[type=checkbox]),
.bs-rsvp__form .bs-rsvp__row:has(input[type=radio]) { grid-column: auto / span 1; }
/* name/email rows: bold label left, the line running beside it (board layout) */
.bs-rsvp__form label {
    display: block; font-family: var(--font-body); font-weight: 700;
    color: var(--c-text-mauve); font-size: 16px; margin: 0 0 6px;
}
.bs-rsvp__row:has(> .bs-rsvp__input) { display: flex; align-items: flex-end; gap: 18px; }
.bs-rsvp__row:has(> .bs-rsvp__input) > label { flex: 0 0 auto; min-width: 110px; margin: 0; padding-bottom: 4px; }
.bs-rsvp__input {
    flex: 1 1 auto; width: 100%;
    font-family: var(--font-body); font-size: 17px; color: var(--c-text-mauve);
    background: transparent; border: none; border-bottom: 1.2px solid var(--c-text-mauve);
    border-radius: 0; padding: 4px 2px;
}
/* Poznamka: ruled lines per the board, not a boxed textarea */
.bs-rsvp__textarea {
    width: 100%; font-family: var(--font-body); font-size: 17px; color: var(--c-text-mauve);
    line-height: 40px; min-height: 120px; padding: 0 2px; border: none; border-radius: 0;
    resize: vertical; background-color: transparent;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent 39px, rgba(116,88,97,.55) 39px, rgba(116,88,97,.55) 40px);
    background-attachment: local;
}
.bs-rsvp__input:focus, .bs-rsvp__textarea:focus { outline: none; border-color: var(--c-cta); }
.bs-rsvp__option { margin: 10px 0; }
.bs-rsvp__form .bs-rsvp__option-label { display: flex; align-items: center; gap: 12px; }
.bs-rsvp__form input[type=checkbox], .bs-rsvp__form input[type=radio] {
    width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto;
    accent-color: var(--c-text-mauve); cursor: pointer;
}
.bs-rsvp__option-label { font-weight: 400 !important; margin: 0 !important; cursor: pointer; }
.bs-rsvp__help { display: block; font-size: 14px; opacity: .8; margin-top: 4px; }
.bs-rsvp__error, .bs-rsvp .text-danger { color: #b3423b; font-size: 14px; }
.bs-rsvp__submit {
    display: block; margin: clamp(24px, 3vw, 40px) auto 0;
    min-width: 220px; min-height: 50px; padding: 12px 34px;
    border: 0; border-radius: 18px; cursor: pointer;
    background: var(--c-blush); color: var(--c-ink);
    font-family: var(--font-body); font-weight: 600; font-size: 18px; text-align: center;
}
.bs-rsvp__submit:hover { filter: brightness(1.04); }
.bs-rsvp__floral { display: none; }

@media (max-width: 820px) {
    .bs-rsvp__form form { display: block; }
    .bs-rsvp__row:has(> .bs-rsvp__input) { flex-direction: column; align-items: stretch; gap: 4px; }
    .bs-rsvp__row:has(> .bs-rsvp__input) > label { min-width: 0; }
}

/* --------------------------------------------------------------------------
   KNIHA NAVSTEV (Guestbook) — Figma node 673:879: tall rounded card, labelled
   lines, the message as ruled notebook paper, blush pill submit.
   -------------------------------------------------------------------------- */
.bs-guestbook { padding: clamp(46px, 6vw, 96px) 16px clamp(60px, 8vw, 130px); }
.bs-guestbook__card {
    position: relative; width: 100%; max-width: 900px; margin: 0 auto;
    background: #fffdfa;
    border-radius: clamp(20px, 2.5vw, 40px);
    box-shadow: 0 6px 18px rgba(80, 60, 55, .10);
    padding: clamp(34px, 5vw, 66px) clamp(24px, 6vw, 76px) clamp(40px, 5vw, 70px);
}
.bs-guestbook__heading {
    font-family: var(--font-body); font-weight: 600; color: var(--c-text-mauve);
    font-size: clamp(30px, 2.96vw, 48px); text-align: center; margin: 0;
}
.bs-guestbook__flourish { display: none; }
.bs-guestbook__intro {
    font-family: var(--font-body); color: var(--c-text-mauve); text-align: center;
    max-width: 520px; margin: 14px auto clamp(22px, 3vw, 34px); line-height: 1.5; font-size: 16px;
}
.bs-guestbook__form { position: relative; z-index: 2; }
.bs-guestbook__field { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 26px; }
.bs-guestbook__field label {
    flex: 0 0 auto; min-width: 150px; font-family: var(--font-body);
    color: var(--c-text-mauve); font-size: 16px; padding-bottom: 5px;
}
.bs-guestbook__line {
    flex: 1 1 auto; font-family: var(--font-body); font-size: 17px; color: var(--c-text-mauve);
    background: transparent; border: none; border-bottom: 1.2px solid rgba(116,88,97,.75);
    border-radius: 0; padding: 4px 2px;
}
.bs-guestbook__line:focus { outline: none; border-color: var(--c-cta); }
.bs-guestbook__msg > label {
    display: block; font-family: var(--font-body); color: var(--c-text-mauve);
    font-size: 16px; margin: 0 0 8px;
}
.bs-guestbook__ruled {
    position: relative; z-index: 2;
    width: 100%; font-family: var(--font-body); font-size: 17px; color: var(--c-text-mauve);
    line-height: 40px; padding: 0 2px; border: none; border-radius: 0; resize: vertical;
    background-color: transparent;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent 39px, rgba(116,88,97,.55) 39px, rgba(116,88,97,.55) 40px);
    background-attachment: local;
}
.bs-guestbook__ruled:focus { outline: none; }
.bs-guestbook__alert:not(:empty) { margin: 16px 0 0; }
.bs-guestbook__submit {
    display: block; margin: clamp(22px, 3vw, 34px) auto 0;
    min-width: 220px; min-height: 50px; padding: 12px 34px;
    border: 0; border-radius: 18px; cursor: pointer;
    background: var(--c-blush); color: var(--c-ink);
    font-family: var(--font-body); font-weight: 600; font-size: 18px; text-align: center;
}
.bs-guestbook__submit:hover { filter: brightness(1.04); }
.bs-guestbook__floral { display: none; }

@media (max-width: 820px) {
    .bs-guestbook__field { flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 18px; }
    .bs-guestbook__field label { min-width: 0; }
}


/* --------------------------------------------------------------------------
   SNOUBENCI (AboutUs) — Figma node 673:597, frame 969x982.
   Stage is 1067 wide, not 969: both ovals overrun the frame (nevesta_elipsa
   starts at x=-47, zenich_eipsa ends at x=1020). So X offsets are figma_x+47,
   and Y offsets are figma_y UNCHANGED — mixing the two is what put the rims
   19px low on the first pass. All units cqw so the overlap survives scaling.
   The envelope SVG exports at 557x659 because it carries the card that sticks
   up out of the envelope; its drawn extent measured off the board is 530x430
   at (214,99) in frame coords.
   -------------------------------------------------------------------------- */
.bs-snoubenci { padding: 150px 0 24px; }   /* envelope card overhangs the frame top by 140px */
.bs-snoubenci__stage {
    container-type: inline-size; position: relative;
    width: min(1067px, 88vw); margin: 0 auto; aspect-ratio: 1067 / 800;   /* 88vw: the groom oval overhangs the stage 4.4% right */  /* role labels end ~783px; no reserved slack below (owner x2) */
}
.bs-snoubenci__person, .bs-snoubenci__card { position: absolute; inset: 0; }
.bs-snoubenci__person { z-index: 3; }        /* ovals sit over the envelope, per Figma */
/* Figma paints the ovals over the text frame, and gets away with it because its
   placeholder copy is shorter than the real seeded text: our lines run wider and
   slide under the bride oval. Lift the copy above the ovals - the design's intent
   is a readable card, and real content is longer than any mock. */
.bs-snoubenci__heading, .bs-snoubenci__intro { z-index: 4; }
.bs-snoubenci__rim, .bs-snoubenci__photo { position: absolute; border-radius: 50%; }
.bs-snoubenci__rim {
    background: #fff;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .25);   /* Figma DROP_SHADOW on the elipsa */
}
.bs-snoubenci__photo { object-fit: cover; }
.bs-snoubenci__name, .bs-snoubenci__role {
    position: absolute; text-align: center; color: var(--c-text-mauve);
    font-family: 'Lora', Georgia, serif;     /* the script face is hero-only */
    text-shadow: 0 4px 4px rgba(0, 0, 0, .18);   /* Figma DROP_SHADOW on the texts */
}
.bs-snoubenci__name { font-weight: 600; font-size: 4.87cqw; line-height: 6.28cqw; }
.bs-snoubenci__role { font-weight: 400; font-size: 2.44cqw; line-height: 3.09cqw; }
.bs-snoubenci__heading {
    position: absolute; margin: 0; text-align: center; color: var(--c-text-mauve);
    font-family: 'Lora', Georgia, serif; font-weight: 600;
    font-size: 4.31cqw; line-height: 5.44cqw;
}
.bs-snoubenci__intro {
    position: absolute; text-align: center; color: var(--c-text-mauve);
    font-family: 'Lora', Georgia, serif; font-weight: 400;
    font-size: 1.50cqw; line-height: 1.87cqw;
}
.bs-snoubenci__intro p { margin: 0 0 .6em; }
.bs-snoubenci__person--bride .bs-snoubenci__rim { left: -1.23cqw;   /* owner: -60px total vs board */ top: 20.90cqw; width: 33.65cqw; height: 41.71cqw; }
.bs-snoubenci__person--bride .bs-snoubenci__photo { left: 2.06cqw; top: 24.55cqw; width: 26.80cqw; height: 34.77cqw; }
.bs-snoubenci__person--groom .bs-snoubenci__rim { left: 70.76cqw; top: 20.90cqw; width: 33.65cqw; height: 41.71cqw; }
.bs-snoubenci__person--groom .bs-snoubenci__photo { left: 74.41cqw; top: 24.55cqw; width: 26.24cqw; height: 34.77cqw; }
.bs-snoubenci__person--bride .bs-snoubenci__name { left: -1.23cqw; top: 63.17cqw; width: 33.65cqw; }
.bs-snoubenci__person--bride .bs-snoubenci__role { left: -1.23cqw; top: 70.29cqw; width: 33.65cqw; }
.bs-snoubenci__person--groom .bs-snoubenci__name { left: 70.76cqw; top: 63.17cqw; width: 33.65cqw; }
.bs-snoubenci__person--groom .bs-snoubenci__role { left: 70.76cqw; top: 70.29cqw; width: 33.65cqw; }
.bs-snoubenci__envelope {
    position: absolute; display: block;
    left: 23.90cqw; top: -13.12cqw; width: 52.11cqw; height: 61.76cqw;
    /* PNG node render: shadows baked in (the SVG's masks+filters misrendered
       in-browser as a tilted deckled card with a stray outline) */
}
.bs-snoubenci__heading { left: 38.89cqw; top: 14.62cqw; width: 21.65cqw; }
.bs-snoubenci__intro {
    left: 35.20cqw; top: 30.83cqw; width: 30.40cqw;   /* centred on the note paper; +20px per owner */
    transform: rotate(-2deg);  /* follows the note paper's tilt (owner-corrected direction) */
}

/* Bios + video render BELOW the measured stage: the board's placeholder state
   has neither, so an empty blog stays pixel-faithful and real content extends
   downward instead of breaking the aspect-locked composition. */
.bs-snoubenci__extras {
    width: min(1067px, 88vw);
    margin: 10px auto 0;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.bs-snoubenci__bio {
    flex: 0 0 30%;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-text-mauve);
    text-align: center;
}
/* centred under the name/role columns: bride centre 15.6% (owner moved the
   column -60px), groom 87.6%
   of the stage (the groom oval overhangs the stage right edge by design) */
.bs-snoubenci__bio--bride { margin-left: .6%; margin-right: auto; }   /* tracks the -60px bride column: centre 15.6% */
.bs-snoubenci__bio--groom { margin-right: -2.6%; }
.bs-snoubenci__bio p { margin: 0 0 .6em; }
.bs-snoubenci__video {
    position: relative;
    width: min(900px, 90%);
    margin: clamp(34px, 4vw, 64px) auto 0;
    aspect-ratio: 16 / 9;
    box-shadow: 0 14px 30px rgba(50,34,26,.18);
}
/* getEmbedHtml() returns a FACADE: <style> + <script> + a positioned div. A
   blanket `> *` rule would give the style/script elements a box and render
   their source text — target only the real children. */
.bs-snoubenci__video > style,
.bs-snoubenci__video > script { display: none; }
.bs-snoubenci__video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Phones stack, per the mobile board (673:922).
   NOTE the selectors: the desktop rules are two-class
   (.bs-snoubenci__person--bride .bs-snoubenci__name), so single-class overrides
   here lose on specificity even inside the media query and the names landed on
   top of the roles. Match the specificity instead of reaching for !important. */
@media (max-width: 820px) {
    .bs-snoubenci { padding: 40px 0 24px; }
    .bs-snoubenci__stage {
        aspect-ratio: auto; width: 92vw; max-width: 460px;
        display: flex; flex-direction: column; align-items: center; gap: 28px;
    }
    .bs-snoubenci__person, .bs-snoubenci__card { position: static; inset: auto; }

    .bs-snoubenci__card { order: -1; position: relative; width: 100%; aspect-ratio: 556/659; }
    .bs-snoubenci__envelope { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
    .bs-snoubenci__heading { position: absolute; left: 6%; top: 12%; width: 88%;
                             font-size: 26px; line-height: 32px; }
    .bs-snoubenci__intro   { position: absolute; left: 12%; top: 40%; width: 76%;
                             font-size: 12px; line-height: 16px; }

    .bs-snoubenci__person { position: relative; width: 250px; height: 408px; }
    .bs-snoubenci__person--bride .bs-snoubenci__rim,
    .bs-snoubenci__person--groom .bs-snoubenci__rim
        { left: 0; top: 0; width: 250px; height: 310px; }
    .bs-snoubenci__person--bride .bs-snoubenci__photo,
    .bs-snoubenci__person--groom .bs-snoubenci__photo
        { left: 25px; top: 27px; width: 199px; height: 258px; }
    .bs-snoubenci__person--bride .bs-snoubenci__name,
    .bs-snoubenci__person--groom .bs-snoubenci__name
        { left: 0; top: 322px; width: 250px; font-size: 32px; line-height: 40px; }
    .bs-snoubenci__person--bride .bs-snoubenci__role,
    .bs-snoubenci__person--groom .bs-snoubenci__role
        { left: 0; top: 366px; width: 250px; font-size: 16px; line-height: 22px; }

    .bs-snoubenci__extras { flex-direction: column; gap: 20px; width: 92vw; max-width: 460px; }
    .bs-snoubenci__bio { flex-basis: auto; font-size: 14px; }
}