/* ==========================================================================
   /_dev/new — "Oáza"

   THESIS
   The information spine of oazis.sk, wearing the Župčany world.

   What is taken from the reference is not a look, it is a GRAMMAR. Every
   section on oazis.sk opens the same way: a tiny mono eyebrow, a serif
   statement of two lines, one sentence of sub, then the content. It never
   varies. That relentlessness is the thing this page has been missing: the
   old homepage invented a new opening for every band, which is why nothing
   "fell into place" no matter how good the individual band was.

   What is NOT taken is the skin. oazis is a grid of bordered cards on six
   opaque colour blocks. Here:

     - ONE CONTINUOUS GROUND. Cream, edge to edge, top to bottom. Sections are
       transparent. Tonal difference is a translucent warm wash at 2 to 4
       percent, never an opaque swap, so no seam is ever a hard step. This is
       the fix for "the gradients look bad": there are no band gradients left
       to look bad.

     - DEPTH BY FOLIAGE, NOT BY TONE. Where the old page dropped a dark field
       to signal "new section", this one drifts a linden branch across the
       margin. Leaves are the only thing on the page that moves against the
       scroll, and they live ONLY in empty space: never behind a word, per
       DIRECTION.md rule 1.

     - SHEETS, NOT BOXES. Cards are soft floating sheets of #fdfbf4 with a
       real shadow and no border at all. A visible 1px rectangle around
       content is the single fastest way to read as a template.

   TYPE
   Fraunces speaks, Hanken Grotesk reads, IBM Plex Mono labels. This is the
   project's own set, declared in resources/css/app.css and served by the
   production layout. Z3 shipped Instrument Serif/Instrument Sans instead,
   whose latin-ext coverage is thin, so Slovak diacritics fell back mid word
   and the headlines read as broken. Redefining --serif and --sans here also
   re-types the inherited hero, which is the one thing about it that was wrong.

   LOADED AFTER /dev/zahrada-v3.css, which supplies the hero, the .fol leaf
   rig and the curve seam. Anything below the hero is defined here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
    /* The type set. These two names are read by zahrada-v3.css, so assigning
       them here re-types the hero without touching its stylesheet. */
    --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

    /* The ground and the sheets. */
    --cream: #f6f2e6;
    --sheet: #fdfbf4;
    --sheet-2: #fbf7ec;

    /* Ink. Near black with a green undertone, never grey: grey body copy is
       the cheapest looking thing on any page. --ink-soft is 8.4:1 on cream. */
    --ink: #11231d;
    --ink-soft: #3a4b43;
    --ink-faint: #5d6b62; /* meta only, never a sentence */

    /* Hairlines. Used for rules and dividers, never as a box around content. */
    --line: #e2dbc8;
    --line-soft: #ebe5d6;

    /* The deep field. One place only: the footer. */
    --pine: #0d211c;
    --pine-2: #16332b;

    /* The accent, from the LIRI swan. */
    --teal: #159b9c;
    --teal-deep: #0d6f70;
    --teal-ink: #0b5758; /* accent that passes as text on cream */
    --teal-wash: #e4efe9;
    --mint: #9adfd7;

    /* Warm secondary, for eyebrows on cream. Not a second brand colour: it is
       the cream's own shadow, used so eyebrows are not all teal. */
    --sand: #8a7a54;

    /* Measure and rhythm. The wrap is wide on purpose: at 76rem the page read
       as a narrow column floating in a lot of nothing, which is timid rather
       than airy. The air now comes from the vertical band and from the empty
       half of a left set section head, not from side margins. */
    --wrap: 84rem;
    --wrap-narrow: 52rem;
    --gutter: clamp(1.25rem, 5vw, 3.5rem);
    --band: clamp(5.5rem, 11vh, 9rem); /* vertical air between sections */

    /* Sheet elevation. Two shadows: a tight contact shadow and a wide soft
       one. A single large blur reads as a drop shadow; two read as an object
       resting on paper. */
    --lift: 0 1px 2px rgba(17, 35, 29, 0.04), 0 12px 32px -12px rgba(17, 35, 29, 0.13);
    --lift-hi: 0 2px 4px rgba(17, 35, 29, 0.05), 0 22px 48px -16px rgba(17, 35, 29, 0.18);

    --r: 1.25rem; /* sheet radius */
    --r-sm: 0.75rem;
}

/* --------------------------------------------------------------------------
   2. THE GROUND

   One field behind everything. The washes are radial, enormous, and sit at
   two to four percent: they are felt as the page warming and cooling, never
   seen as a shape. Fixed attachment so they do not scroll with the content,
   which is what keeps the page feeling like one continuous sheet of paper
   rather than a stack of panels.
   -------------------------------------------------------------------------- */

/* Reserved so the page does not jump sideways when the lightbox hides the
   scrollbar to lock the scroller. */
html {
    scrollbar-gutter: stable;
}

body.nw {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.125rem; /* 18px floor: the audience skews elderly */
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

.nw-ground {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(70rem 50rem at 12% 18%, rgba(21, 155, 156, 0.05), transparent 62%),
        radial-gradient(60rem 44rem at 88% 42%, rgba(138, 122, 84, 0.06), transparent 60%),
        radial-gradient(80rem 56rem at 46% 88%, rgba(21, 155, 156, 0.035), transparent 64%);
}

/* The paper. A near invisible fibre so the cream is a material and not a
   fill. Two percent alpha; if it is ever visible as dots, it is wrong. */
.nw-grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

.nw-main {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

/* zahrada-v3.css also defines .wrap, and adds padding-inline: var(--gut) on
   top of its width. Inheriting that here shrank every column by two gutters
   on top of the one this rule already reserves, which is most of why the page
   read as a narrow strip. The padding is zeroed; the min() below is the only
   thing that reserves side space.

   SCOPED, and it has to be. The hero copy is class="hero-copy wrap" and the
   header bar is class="hdr-in wrap": both are single-class selectors, so an
   unscoped .wrap here loaded after zahrada-v3.css beat .hero-copy on the
   cascade and replaced its position:absolute with position:relative. That
   dropped the hero copy out of its bottom anchor and into normal flow at the
   very top of the stage, over the bright part of the photograph. Only the
   sections and the footer get this rule; the inherited chrome keeps its own. */
.nw-main .wrap,
.nw-foot .wrap {
    position: relative;
    z-index: 3; /* above .nleaf, which is 2 */
    width: min(100% - (var(--gutter) * 2), var(--wrap));
    max-width: none;
    padding-inline: 0;
    margin-inline: auto;
}

.wrap-n {
    width: min(100% - (var(--gutter) * 2), var(--wrap-narrow));
    margin-inline: auto;
}

/* A section. Transparent by design: it paints nothing, it only reserves air.
   position:relative so its leaves can hang off it. */
.sec {
    position: relative;
    padding-block: var(--band);
}

.sec--tight {
    padding-block: calc(var(--band) * 0.62);
}

/* The only tonal difference allowed between sections: a translucent tint,
   feathered at both edges so it has no boundary of its own. Never an opaque
   colour, never a hard line. */
.sec--warm::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(226, 219, 200, 0.3) 14%,
        rgba(226, 219, 200, 0.3) 86%,
        transparent 100%
    );
}

/* --------------------------------------------------------------------------
   4. THE SECTION HEAD — the grammar taken from the reference

   eyebrow → serif statement → one sentence of sub. Every section. The point
   is that it does not vary; the variation is whether it is centred or set
   left, which alternates down the page so the rhythm never becomes the
   centred-hero-and-three-cards template.
   -------------------------------------------------------------------------- */

.shead {
    max-width: 48rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.shead--c {
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.15rem;
    font-family: var(--mono);
    font-size: 0.9375rem; /* 15px: the small floor holds, this is not fine print */
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--teal-ink);
}

.eyebrow::before {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--teal);
    flex: none;
}

.eyebrow--sand {
    color: var(--sand);
}

.eyebrow--sand::before {
    background: var(--sand);
}

.shead--c .eyebrow {
    justify-content: center;
}

/* The statement. Fraunces at display optical size, one notch tighter than
   its default tracking, and the second line turned to italic: the reference
   does this on every heading and it is most of why its sections read as
   composed rather than typed. */
/* max-width: none is load bearing. zahrada-v3.css caps .stmt at 20ch, which
   is right for its own narrow bands and wrong here: it shrink wrapped the
   heading box, so in a centred section head the text centred inside a
   left-parked 679px box and every centred statement sat ~90px left of where
   the eyebrow and the sub sentence were. */
.stmt {
    margin: 0;
    max-width: none;
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 0, 'WONK' 0;
    font-weight: 400;
    font-size: clamp(2.1rem, 4.6vw, 3.35rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
    hyphens: none;
}

.stmt em {
    font-style: italic;
    font-weight: 400;
    color: var(--teal-ink);
}

.stmt--sm {
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
}

.slead {
    margin: 1.35rem 0 0;
    max-width: 40rem;
    font-size: 1.1875rem;
    line-height: 1.62;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.shead--c .slead {
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5. SHEETS — soft floating cards, never boxes

   No border. The shadow does the separating. The 1px inset highlight along
   the top edge is what makes a sheet read as lit paper rather than a grey
   rectangle, and it is the whole difference between expensive and templaty.
   -------------------------------------------------------------------------- */

.sheet {
    position: relative;
    background: var(--sheet);
    border-radius: var(--r);
    box-shadow: var(--lift), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    padding: clamp(1.5rem, 2.6vw, 2.15rem);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

a.sheet,
.sheet--act {
    display: block;
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    a.sheet:hover,
    .sheet--act:hover {
        transform: translateY(-3px);
        box-shadow: var(--lift-hi), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
}

.sheet h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ink);
}

.sheet p {
    margin: 0.7rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* The icon chip. A tinted rounded square, teal wash, with the stroke icon
   sitting in it at the accent's darker tone. */
.chip {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    background: var(--teal-wash);
    color: var(--teal-ink);
    margin-bottom: 1.35rem;
    flex: none;
}

.chip svg {
    width: 1.4rem;
    height: 1.4rem;
    stroke-width: 1.5;
}

.chip--sand {
    background: rgba(138, 122, 84, 0.11);
    color: #6f6240;
}

/* --------------------------------------------------------------------------
   6. GRIDS

   Deliberately not a single reusable "cards" grid: each family gets its own
   count so the page does not become one rhythm repeated seven times.
   -------------------------------------------------------------------------- */

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

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

.g2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.35rem;
}

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

@media (max-width: 40rem) {
    .g4,
    .g2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   7. FIRST STEPS — the reference's best single idea

   Four doors, named the way a family names them, sitting immediately under
   the hero. The old page made a worried person scroll nine bands to find the
   price. This answers "where do I go" before it says anything about itself.
   -------------------------------------------------------------------------- */

/* .sheet.step, not .step: a.sheet above sets display:block and outranks a
   single class, which left the four "Otvoriť" links sitting wherever their
   paragraph happened to end instead of on one baseline. */
.sheet.step {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.6rem 1.5rem 1.4rem;
}

.step h3 {
    font-size: 1.25rem;
}

.step p {
    flex: 1;
    font-size: 1rem;
    margin-top: 0.55rem;
}

.step .go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.15rem;
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-ink);
}

.step .go svg {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
    a.step:hover .go svg {
        transform: translateX(4px);
    }
}

/* --------------------------------------------------------------------------
   8. THE FIGURES — one strip, three numbers

   Lifted from the reference's stat bar, which is the clearest thing on their
   page. Tabular figures so the numbers align optically, and the label under
   each in mono so it reads as a record rather than a marketing claim.
   -------------------------------------------------------------------------- */

.figs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 2rem clamp(1.5rem, 4vw, 3rem);
}

.fig {
    text-align: center;
    position: relative;
}

.fig + .fig::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    height: 76%;
    width: 1px;
    background: var(--line);
}

.fig b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 3.1rem);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.fig span {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

@media (max-width: 40rem) {
    .figs {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding-block: 1.75rem;
    }

    .fig + .fig::before {
        left: 22%;
        right: 22%;
        top: -0.875rem;
        width: auto;
        height: 1px;
    }
}

/* --------------------------------------------------------------------------
   9. THE WIDE HIGHLIGHT

   One claim given a whole sheet, with a drawn figure on the right. The
   reference uses this to break its own card rhythm exactly once, which is
   why it works; used twice it would be another grid.
   -------------------------------------------------------------------------- */

/* ---- ROUND 11: the wide card, three positions on one axis ----

   The axis is the ratio of photograph to type, and how heavily the type is
   set. V1 the type leads, V3 the photograph leads, V2 holds them level.

   Shared by all three, because these are what made the first two attempts
   read as a form rather than as a page:
     - no icon chip; the heading is the entry point
     - no ticked list; a checklist is what a spec sheet looks like
     - the photograph is flush to the card's own edge, taking the card's
       radius on its outer corners and square on the inner one, so there is
       never a rounded box sitting inside another rounded box
     - the body column is vertically centred against the photograph, so a
       short paragraph never leaves a dead band beneath it
*/
.hilite {
    --hl-pad: clamp(1.75rem, 3.4vw, 2.75rem);

    display: grid;
    gap: clamp(1.75rem, 4vw, 3.75rem);
    align-items: center;
    padding: var(--hl-pad);
    margin-bottom: 1.35rem;
    overflow: hidden; /* lets the photo meet the card's rounded corners cleanly */

    /* The card states its own height rather than inheriting whatever height a
       photograph 850px wide happens to want. Without this the picture drove
       the row to 474px while the copy filled 300px of it, which just moved the
       emptiness from beside the text to underneath it. The photograph covers
       this height instead of setting it. */
    min-height: clamp(17rem, 23vw, 21rem);
}

/* THE STRUCTURAL RULE, and the thing three attempts got wrong:

   the text column is measured in ch and the photograph takes 1fr.

   Before this, the text column was 1fr (924px at this width) while the copy
   inside it was capped at a 40ch measure, because a paragraph set 900px wide
   is unreadable. The result was ~450px of dead air between the last word and
   the photograph, in every variant, at every type size. That gap is what read
   as "empty", and no amount of tuning the type could close it: the column was
   wider than its contents by construction.

   Sizing the column in ch means it is exactly as wide as the measure the copy
   wants, and 1fr hands every remaining pixel to the photograph. Dead space
   between the two becomes impossible rather than merely unlikely. The axis
   then becomes real: how many characters the text column is allowed. */

/* V1 — the word leads. Widest measure, type at display size. */
.hilite--v1 {
    grid-template-columns: minmax(0, 44ch) 1fr;
}

.hilite--v1 h3 {
    font-size: clamp(1.85rem, 3.1vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.022em;
}

.hilite--v1 .hilite-lead {
    font-size: 1.25rem;
    line-height: 1.55;
    margin-top: 1.15rem;
}

/* V2 — level. The two halves carry comparable weight and the four care acts
   run underneath as one quiet line. */
.hilite--v2 {
    grid-template-columns: minmax(0, 38ch) 1fr;
}

.hilite--v2 h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.05rem);
    line-height: 1.12;
}

.hilite--v2 .hilite-lead {
    font-size: 1.125rem;
    margin-top: 0.95rem;
}

/* V3 — the picture leads. Narrowest measure, so the photograph takes roughly
   two thirds of the card and the type sits beside it as a caption. */
.hilite--v3 {
    grid-template-columns: minmax(0, 30ch) 1fr;
}

.hilite--v3 h3 {
    font-size: clamp(1.4rem, 2.1vw, 1.75rem);
    line-height: 1.15;
}

.hilite--v3 .hilite-lead {
    font-size: 1.0625rem;
    margin-top: 0.85rem;
}

/* The running series of care acts, V2 only. Mono, at the 16px floor, divided
   by middots: a line of facts, not a list of them. */
.hilite-run {
    margin-top: 1.35rem !important;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line-soft);
    font-family: var(--mono);
    font-size: 1rem !important;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: var(--ink-faint) !important;
}

/* The swan watermark inside the card.

   Anchored to the card's left edge and pulled a third of its own width back
   out through the padding, so the card's overflow crops it. A mark that
   begins and ends inside the frame reads as a badge someone placed; a mark
   the frame cuts reads as something the paper was printed on.

   No blur, no desaturation: it is the swan's real teal, simply taken to a
   level where it is a tint of the sheet. Above roughly a tenth it starts to
   announce itself, which is the one thing a watermark must never do. */
.hilite-mark {
    position: absolute;
    /* -1, not 0. A positioned element with z-index 0 paints AFTER the inline
       content of its stacking context, so at 0 the swan was drawn on top of
       the words rather than under them. Negative puts it back behind the text
       where a watermark belongs. */
    z-index: -1;
    left: calc(var(--hl-pad) * -1);
    top: 50%;
    width: clamp(15rem, 25vw, 25rem);
    transform: translate(-30%, -50%);
    pointer-events: none;
    user-select: none;
}

.hilite-mark img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.07;
}

/* V2 puts it in the notch instead.

   The copy in this variant leaves a rough triangle of white at the bottom
   right of the text column: the lead's last line stops short, and the mono
   series stops shorter still. A mark placed there is doing work, filling
   space the type has already given up, rather than lying underneath words.

   Small, so it reads as a maker's mark rather than as a watermark, and
   therefore allowed more presence than the big cropped version: at this size
   seven percent would simply disappear. z-index 0 keeps it under the text
   regardless, so even a reflow that ran a line long could not put a glyph
   behind anything. */
/* Driven into the corner and deliberately not whole. It overhangs the card's
   bottom edge and is cut off by the card's own overflow, so what shows is a
   wing and a shoulder rather than a complete swan sitting politely inside the
   frame. A cropped mark reads as printing; a complete one reads as a sticker.

   Held back from the right so it never reaches the photograph: the text
   column ends at 655 and the picture starts at 715, and the mark stops
   between them. */
.hilite--v2 .hilite-mark {
    left: auto;
    top: auto;
    /* Pushed out into the gutter between the text column and the photograph,
       and stopped there: the column ends at 655 and the picture starts at 715,
       so -3.5rem lands its right edge at 711 with four pixels to spare. */
    right: -3.5rem;
    bottom: -3rem;
    width: clamp(7rem, 10vw, 10rem);
    transform: none;
}

.hilite--v2 .hilite-mark img {
    /* Lower than the small version was: it covers far more area now, and it
       sits behind the mono series, whose ink is already the page's faintest. */
    opacity: 0.15;
}

/* The mono series is given a right indent so the notch is a real column
   rather than whatever gap the line breaks happened to leave. Shaping the
   text to the mark, instead of shrinking the mark to the text, is what keeps
   the two from ever colliding at any width. The hairline above is unaffected:
   padding sits inside the border box, so the rule still spans the full
   measure. */
.hilite--v2 .hilite-run {
    padding-right: 7rem;
}

/* Every word sits above the mark, never inside it. */
.hilite-body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* No `.hilite h3` / `.hilite p` sizing here. They used to live at this point
   in the file and, being the same specificity as .hilite--v1 h3 but declared
   later, they silently won: all three variants rendered at V2's type size and
   the axis being tested did not exist. Every size now belongs to its variant
   block above. */

/* The photograph, flush to the card's edge. Negative margins pull it out
   through the card's own padding so it meets the outer corners: it takes the
   card's radius there and stays square on the inner edge, which is what stops
   it reading as a picture pasted into a box. */
.hilite-ph {
    position: relative; /* the img is taken out of flow against this */
    margin: calc(var(--hl-pad) * -1) calc(var(--hl-pad) * -1) calc(var(--hl-pad) * -1) 0;
    align-self: stretch;
    background: var(--line-soft);
    overflow: hidden;
}


/* Absolutely positioned, and that is the whole fix for the card's height.

   As a normal flow child, `height: 100%` resolved against an indefinite
   height, so the image fell back to its intrinsic aspect ratio: 857px wide
   became 575px tall, and the picture silently became the thing deciding how
   tall the card was. Out of flow, it contributes nothing to layout and simply
   covers whatever height the copy and the card's own min-height agree on. */
.hilite-ph img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The evidence list. Four real opatrovateľské úkony, ticked. Two columns on a
   wide card so it reads as a set rather than as a long tail of bullets. */
.ticks {
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem 1.75rem;
}

.ticks li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.34em;
    width: 1.05rem;
    height: 0.55rem;
    border-left: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: rotate(-45deg);
    border-radius: 1px;
}

@media (max-width: 68rem) {
    .ticks {
        grid-template-columns: 1fr;
    }
}

/* Stacked below 56rem. The photograph goes to the top of the card in every
   variant, flush on three sides, with the type under it: on a phone a picture
   beside a paragraph is two things fighting for the same 380px. */
@media (max-width: 56rem) {
    .hilite,
    .hilite--v1,
    .hilite--v2,
    .hilite--v3 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hilite-body,
    .hilite--v3 .hilite-body {
        order: 2;
    }

    .hilite-ph,
    .hilite--v3 .hilite-ph {
        order: 1;
        margin: calc(var(--hl-pad) * -1) calc(var(--hl-pad) * -1) 0 calc(var(--hl-pad) * -1);
    }

    /* Stacked, the photo is out of flow so its box needs a stated height. */
    .hilite-ph {
        height: 14rem;
    }

    .hilite--v1 h3 {
        font-size: clamp(1.6rem, 6vw, 2.1rem);
    }
}

/* Specification chips. Facts small enough that a sentence around them would
   be padding. */
.chips {
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.chips li {
    padding: 0.4rem 0.8rem;
    border-radius: 0.55rem;
    background: var(--teal-wash);
    color: var(--teal-ink);
    font-size: 1rem; /* the 16px small floor: this audience reads nothing smaller */
    line-height: 1.2;
    white-space: nowrap;
}

/* .mini-hours / .hours-row / .mini-note deleted 18 August 2026 with the
   návštevné hodiny they styled. The card that held them now runs a plain
   .sheet p, which is what every other sheet on the page already uses. */

@media (max-width: 34rem) {
    .hilite-body {
        flex-direction: column;
        gap: 1.1rem;
    }
}

/* --------------------------------------------------------------------------
   10. BUTTONS

   Five bake-off rounds died on this control. The conclusion those rounds
   reached and this page obeys: the shape was never the problem, the near
   black type on the bright accent was. So the primary is the deep teal with
   white on it (7.9:1), the shape is a soft rectangle rather than a pill or a
   sci-fi notch, and there is no third button style anywhere on the page.
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.5rem;
    border: 0;
    border-radius: 0.7rem;
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.btn svg {
    flex: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--pri {
    background: var(--teal-deep);
    color: #fff;
    box-shadow: 0 1px 2px rgba(13, 33, 28, 0.14), 0 10px 24px -12px rgba(13, 111, 112, 0.6);
}

.btn--sec {
    background: var(--sheet);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-strong, #cdc5ab), var(--lift);
}

@media (hover: hover) {
    .btn--pri:hover {
        background: #0b5f60;
        transform: translateY(-2px);
    }

    .btn--sec:hover {
        transform: translateY(-2px);
        box-shadow: inset 0 0 0 1px var(--teal), var(--lift-hi);
    }

    .btn:hover svg {
        transform: translateX(4px);
    }
}

/* The quiet inline call, sitting alone in whitespace between two sections.
   The reference uses this instead of a shouting banner and it is the single
   least pushy way to offer help on a page about somebody's parent. */
.aside-cta {
    display: flex;
    justify-content: center;
    padding-block: clamp(2rem, 4vw, 3.25rem);
}

/* The one that stands BETWEEN two sections, rather than inside one, was
   collecting the previous section's entire bottom --band on top of its own
   padding — close to 200px, which parked it in open ground halfway to the
   next band and read as a divider. It is not a divider: it is the offer that
   closes the cards above it, so it is pulled back up against them. Only the
   space above is taken; the padding below still holds the next section off. */
.nw-main > .aside-cta {
    margin-block-start: calc(var(--band) * -1);
    padding-block-start: clamp(1.5rem, 2.4vw, 2.25rem);
}

.aside-cta a {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    background: var(--sheet);
    box-shadow: var(--lift), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: var(--ink);
    font-size: 1.0625rem;
    text-decoration: none;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.aside-cta strong {
    font-weight: 600;
    color: var(--teal-ink);
}

@media (hover: hover) {
    .aside-cta a:hover {
        transform: translateY(-2px);
        box-shadow: var(--lift-hi), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
}

/* --------------------------------------------------------------------------
   11. THE CARE LIST — deliberately not a card grid

   Nine services. As nine cards this becomes the exact "wall of boxes" the
   old page was rejected for, so it is set as an editorial two column list
   with hairline rules: the same information, a completely different rhythm,
   and it breaks the sheet cadence at the middle of the page where the eye
   has started to predict it.
   -------------------------------------------------------------------------- */

/* ---- ROUND 12, V1 SKUPINY: nine collapse into three ----
   The eye counts to three instead of to nine, and the names carry it without
   descriptions: at this altitude "Stravovanie" says enough, and the sentence
   explaining it lives on /starostlivost where somebody who wants it goes. */
.care-g {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
}

.care-gc {
    display: flex;
    flex-direction: column;
}

.care-gc h3 {
    font-size: 1.3125rem;
}

.care-gc ul,
.care-s ul {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
}

/* Ticked lines, no rules between them. The reference sets these as a list of
   things rather than as a table of rows, and the hairlines we had were what
   made ours read as a ledger. */
.care-gc li,
.care-s li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.tk {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.16em;
    color: var(--teal-ink);
}

/* ---- THE DAY LANE ----

   Stravovanie drawn as the day it happens in, straight on the cream. No
   sheet, no shadow, no radius: by this depth the page has shown four white
   cards in a row and the eye has stopped registering them as objects. One
   element that is plainly not a card is worth more than a fifth one that is.

   The rule is a gradient rather than a flat hairline, warm at the left and
   cool at the right, so the lane reads as a day passing without ever printing
   a time we do not have. */
.lane {
    --lane-dot: 0.95rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.lane-h {
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sand);
}

.lane-track {
    position: relative;
    display: flex;
    align-items: flex-start;
    /* No gap. With a gap the cells are (T-(n-1)g)/n rather than T/n, so the
       first dot no longer sits at 50%/n and the rule missed it by 3px at this
       width. The stops are centred inside equal cells; they need no gap. */
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The lane itself, behind the stops. Solid rather than the near invisible
   hairline this started as: at 1px and half opacity there was nothing for the
   eye to follow between stops 250px apart, so it read as five loose labels
   instead of as a day. */
.lane-track::before {
    content: '';
    position: absolute;
    /* Ends on the centre of the first and last dot, both of which are now on
       the section's own margins. Half a dot in from each edge. */
    left: calc(var(--lane-dot) / 2);
    right: calc(var(--lane-dot) / 2);
    /* Derived, not guessed: the time label's line box (1.5rem), its margin
       (0.85rem), then half a dot to reach the dot's centre, less half the
       rule's own 2px so the rule is centred on it rather than hung from it.
       The 2.55rem this started as was a guess and sat 6px high. */
    top: calc(1.5rem + 0.85rem + (var(--lane-dot) / 2) - 1px);
    height: 2px;
    border-radius: 2px;
    /* No transparent ends now that it begins and ends on a dot: it runs warm
       at breakfast to cool at supper and stops where the day stops. */
    background: linear-gradient(
        90deg,
        rgba(196, 168, 108, 0.9) 0%,
        rgba(205, 197, 171, 1) 46%,
        rgba(21, 155, 156, 0.75) 100%
    );
}

/* HALF CELLS AT THE ENDS.

   With five equal cells the first dot sat 10% of the track in from the left
   while the eyebrow above it and the note below it were flush to the margin:
   three different left edges in one block, which is what looked broken.

   Making the end stops half cells puts their dots ON the margins, and because
   0.5 + 1 + 1 + 1 + 0.5 = 4 units the dots land at 0, 1/4, 1/2, 3/4 and 4/4 of
   the track. Flush with the section AND evenly spaced, which the obvious fix
   of just left-aligning the first stop would not have been: that leaves the
   outer gaps half as wide again as the inner ones. */
.lane-stop {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.lane-stop:first-child {
    flex: 0.5 1 0;
    text-align: left;
}

.lane-stop:last-child {
    flex: 0.5 1 0;
    text-align: right;
}

.lane-stop:first-child .lane-dot {
    margin-left: 0;
}

.lane-stop:last-child .lane-dot {
    margin-right: 0;
}

/* The time slot. Holds the part of the day until the provider supplies real
   hours, at which point the same line prints "7.30" and nothing moves. */
/* line-height is stated rather than inherited so the rule below can be
   computed from it. Inheriting the body's 1.65 made the row height 26.4px,
   an awkward number that the hand-guessed line position then missed by 6px. */
.lane-cas {
    display: block;
    font-family: var(--mono);
    font-size: 1rem;
    line-height: 1.5; /* = 1.5rem */
    letter-spacing: 0.08em;
    color: var(--sand);
    margin-bottom: 0.85rem;
}

.lane-dot {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--lane-dot);
    height: var(--lane-dot);
    margin: 0 auto;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 0 5px var(--cream);
}

.lane-label {
    display: block;
    margin-top: 1rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    letter-spacing: -0.01em;
    color: var(--ink);
}

.lane-note {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    font-size: 1.0625rem;
    color: var(--ink-soft);
}

/* On a phone the lane turns and runs down the page: five stops across 390px
   would set every label at four characters a line. Same rule, same stops,
   rotated, and the gradient goes with it. */
@media (max-width: 46rem) {
    .lane-track {
        display: grid;
        gap: 0;
        padding-left: 1.6rem;
    }

    .lane-track::before {
        left: 0.42rem;
        right: auto;
        top: 0.8rem;
        bottom: 0.8rem;
        width: 2px;
        height: auto;
        background: linear-gradient(
            180deg,
            rgba(196, 168, 108, 0.9) 0%,
            rgba(205, 197, 171, 1) 46%,
            rgba(21, 155, 156, 0.75) 100%
        );
    }

    /* Stacked, every stop is a row: the half-cell trick above is a horizontal
       device and must be undone or the first and last rows shrink. */
    .lane-stop,
    .lane-stop:first-child,
    .lane-stop:last-child {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        column-gap: 1rem;
        flex: none;
        text-align: left;
        padding-block: 0.7rem;
    }

    .lane-stop:first-child .lane-dot,
    .lane-stop:last-child .lane-dot {
        margin: 0 0 0 -1.6rem;
    }

    .lane-cas {
        grid-column: 2;
        order: 2;
        margin: 0.15rem 0 0;
    }

    .lane-dot {
        grid-column: 1;
        grid-row: 1;
        order: 1;
        margin: 0 0 0 -1.6rem;
        align-self: center;
    }

    .lane-label {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
    }
}

@media (max-width: 62rem) {
    .care-g {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .care-s-cols {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   11b. GALLERY — one row walked sideways

   Mobile first, and that ordering is the whole safety argument: what is
   written here is the plain swipeable rail, which needs no JavaScript and
   cannot break. The pinned desktop scrub is layered on top of it by
   .gal--pin, a class only added once gsap.matchMedia has decided the
   viewport is wide enough and the visitor has not asked for less motion.
   Every failure mode therefore degrades to a rail that works.
   -------------------------------------------------------------------------- */

/* Part of the section above it, not a section of its own: it gets a single
   top margin and no padding, no ground and no heading. */
/* Clipped sideways only. The track is wider than the page by design and has
   to be cut off at the viewport edges, but the vertical axis must stay open
   or the hover lift and its shadow are sliced off at the top and bottom of
   the strip.

   overflow-x: clip with overflow-y: visible is the one pairing that does
   this. With `hidden` instead of `clip` the spec forces the visible axis to
   `auto`, which is what silently produces a stray scroll container and the
   cut-off shadow. */
.gal {
    position: relative;
    margin-top: clamp(2.5rem, 5vw, 4.25rem);
    overflow-x: clip;
    overflow-y: visible;
}

/* The rail. Full bleed on purpose: the row runs to both edges of the
   viewport, and the leading padding lines the first frame up with the text
   column above it so the section does not look like it starts twice. */
.gal-viewport {
    /* Breathing room around the row. In the driven variant the vertical axis
       is open (see .gal--drive below) so this is only spacing; in the no-JS
       rail, where overflow-y must be hidden for the scroll container to
       behave, it is also what keeps the hover lift from being clipped. */
    padding-block: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.gal-viewport::-webkit-scrollbar {
    display: none;
}

.gal-track {
    display: flex;
    align-items: flex-end;
    /* Tight. The frames are meant to read as one continuous strip passing the
       window, and at the old 12 to 22px the gaps counted themselves: the eye
       measured ten separate pictures instead of following one row. */
    gap: clamp(0.25rem, 0.45vw, 0.5rem);
    margin: 0;
    padding: 0 var(--gutter);
    list-style: none;
    width: max-content;
}

.gal-it {
    flex: none;
    scroll-snap-align: center;
}

/* Fixed height, width follows the aspect ratio. This is what lets a 1800x2700
   portrait and a 2000x1116 landscape sit in one row without either being
   cropped, and it is why the row has an editorial rhythm instead of the
   lockstep of equal tiles. */
.gal-btn {
    display: block;
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: var(--lift);
    -webkit-tap-highlight-color: transparent;
}

.gal-btn img {
    display: block;
    height: var(--gal-h, 17rem);
    width: auto;
    max-width: none;
    object-fit: cover;
    background: var(--line-soft);
}

.gal-btn:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 4px;
}

/* ---- hover lift, pointer devices only ----

   CSS, not GSAP and not a listener. A transform and a shadow are the two
   things a browser can hand straight to the compositor: no JavaScript runs on
   hover, nothing is measured, and the main thread stays free for the scroll
   tween that is already moving the track. Ten GSAP hover handlers would do the
   same job while competing with that tween for the same frame budget.

   (hover: hover) and (pointer: fine) is the correct gate rather than a width
   query: it asks whether the device has a real pointer, so a small laptop
   still gets it and a large tablet correctly does not. On touch, :hover would
   otherwise stick on after a tap.

   The frame scales, so neighbours do not move: a transform takes no part in
   layout, which means nothing reflows and the row's measured width, and
   therefore its scroll travel, never changes. */
@media (hover: hover) and (pointer: fine) {
    .gal {
        --gal-push: 22px; /* how far each neighbour steps aside */
    }

    .gal-it {
        position: relative;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .gal-btn {
        transition:
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.5s ease;
    }

    /* The hovered frame grows from its own centre and rises above its
       neighbours. */
    .gal-it:hover {
        z-index: 3;
    }

    .gal-it:hover .gal-btn {
        transform: scale(1.15);
        box-shadow: var(--lift-hi);
    }

    /* Everything after the hovered frame steps right. A plain sibling
       combinator, so it costs nothing. */
    .gal-it:hover ~ .gal-it {
        transform: translate3d(var(--gal-push), 0, 0);
    }

    /* Everything before it steps left. There is no previous-sibling
       combinator, so this asks the other way round: "an item that has the
       hovered item somewhere after it". :has() is what makes the symmetrical
       push possible in CSS at all; without it this half would need JavaScript
       measuring positions on every pointer move. */
    .gal-it:has(~ .gal-it:hover) {
        transform: translate3d(calc(var(--gal-push) * -1), 0, 0);
    }

    /* A browser without :has() simply gets the one-sided push and the scale,
       which still reads correctly. Nothing is broken by its absence. */
}

/* Frame height. Small on purpose: this row is something the page passes, not
   a destination that stops it, and a band of small frames drifting sideways
   reads as depth where a wall of large ones reads as an interruption. */
.gal {
    --gal-h: 10.5rem;
}

@media (min-width: 40rem) {
    .gal {
        --gal-h: 13rem;
    }
}

@media (min-width: 64rem) {
    .gal {
        --gal-h: 15rem;
    }
}

@media (min-width: 100rem) {
    .gal {
        --gal-h: 17rem;
    }
}

/* ---- the scroll driven variant, mounted by JS ----
   The section keeps its natural height and never pins: the page scrolls
   normally and the row travels sideways as the band crosses the viewport.
   Overflow is handed to GSAP because a scrollable viewport would give the
   visitor two ways to move the same row and the two would fight.

   The CSS above it, the swipeable rail, is what remains with no JavaScript
   and under reduced motion. Nothing here is required to see the photographs. */
.gal--drive .gal-viewport {
    /* Same reasoning as .gal above: cut the row off at the viewport edges,
       leave the vertical axis open so a lifted frame and its shadow are not
       shaved flat. */
    overflow-x: clip;
    overflow-y: visible;
    scroll-snap-type: none;
}

.gal--drive .gal-track {
    will-change: transform;
}

/* --------------------------------------------------------------------------
   11c. LIGHTBOX
   -------------------------------------------------------------------------- */

.glb[hidden] {
    display: none;
}

.glb {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
}

.glb-scrim {
    position: absolute;
    inset: 0;
    background: rgba(9, 21, 17, 0.93);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.glb-fig {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
}

.glb-fig img {
    display: block;
    max-width: min(100%, 76rem);
    max-height: 76svh;
    width: auto;
    height: auto;
    border-radius: var(--r-sm);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}

.glb-cap {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    color: #eef2e6;
    font-size: 1.0625rem;
    text-align: center;
}

.glb-idx {
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.09em;
    color: var(--mint);
    flex: none;
}

.glb-x,
.glb-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 999px;
    background: rgba(246, 242, 230, 0.14);
    color: #fffdf6;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.glb-x:hover,
.glb-nav:hover {
    background: rgba(246, 242, 230, 0.28);
}

.glb-x:focus-visible,
.glb-nav:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 3px;
}

.glb-x {
    top: clamp(0.75rem, 2.5vw, 1.75rem);
    right: clamp(0.75rem, 2.5vw, 1.75rem);
}

.glb-nav--prev {
    left: clamp(0.5rem, 2vw, 1.75rem);
}

.glb-nav--next {
    right: clamp(0.5rem, 2vw, 1.75rem);
}

/* On a phone the side buttons would sit on the photograph itself, so they
   move to the bottom corners where a thumb already is. */
@media (max-width: 40rem) {
    .glb-nav {
        top: auto;
        bottom: 1rem;
        width: 3.25rem;
        height: 3.25rem;
    }

    .glb-fig img {
        max-height: 64svh;
    }

    .glb-cap {
        padding-bottom: 4.5rem;
    }
}

/* --------------------------------------------------------------------------
   11d. IZBY — round 13, three positions on one axis

   Shared by all three: no card. The page had reached nine card grids in a
   row and this band was the tenth. Photographs are hard edged, given a real
   radius only where they meet nothing.
   -------------------------------------------------------------------------- */

.izba-p {
    display: grid;
    /* TWO frames since the izolačná izba came out (18 August 2026): a family
       chooses between a dvojlôžková and a room to themselves, and that is the
       whole set. Held to a narrower measure than the 84rem wrap on purpose —
       two frames across the full band would be 41rem of photograph each and
       read as billboards, where three sat at about 26rem. At 58rem they land
       back at roughly the size the band was composed for. */
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.75rem, 1.6vw, 1.35rem);
    max-width: 58rem;
    margin-inline: auto;
}

.izba-p-it {
    margin: 0;
}

/* 4/3, close to the sources' own 3/2. The 4/5 portrait this started as threw
   away a third of every room to a crop, which on a band whose whole argument
   is "look how the room is set up" is the opposite of the point. */
.izba-p-it img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--line-soft);
}

.izba-p-it figcaption {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line-soft);
}

.izba-p-n {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: -0.012em;
    color: var(--ink);
}

/* The bathroom is the one thing that genuinely changes daily life between the
   three, so it is the one thing printed under each. */
.izba-p-k {
    display: block;
    margin-top: 0.4rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.izba-p-cap {
    display: block;
    margin-top: 0.4rem;
    font-size: 1rem;
    font-style: italic;
    color: var(--ink-faint);
}

/* ---- what is in every izba ----

   A specification grid, not a checklist. It was a two column ticked list of
   config's raw sentences, where "Elektrické polohovateľné lôžko s
   antidekubitným matracom" wrapped to two ragged lines six times over, and it
   was the third ticked list on the page. Short atoms now, one per line, ruled
   above so the block reads as a spec plate rather than as a form.

   The rules are on the cells, not between them: a grid where only the inner
   gaps are ruled has to know which cells are on an edge, and it gets that
   wrong the moment the column count changes at a breakpoint. */
.vyb {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
    border-top: 1px solid var(--line);
}

.vyb-h {
    margin: 0 0 1.35rem;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sand);
}

/* One line, not a grid. Eight cells ruled along their tops is a table
   whatever it is called, and a table is the shape for content that has
   columns. This content has no columns; it is one set of eight things about a
   room. Set as a run divided by dots it reads as a sentence, which is what it
   is.

   display:inline on the items rather than flex or grid, so the run breaks and
   rewraps like prose at any width and needs no breakpoints at all. */
.vyb-run {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 64ch;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.1rem, 1.65vw, 1.4rem);
    line-height: 1.62;
    letter-spacing: -0.008em;
    color: var(--ink);
}

.vyb-run li {
    display: inline;
}

/* The divider is a real dot in the accent rather than a slash or a comma: it
   separates without punctuating, so the line never pretends to be a sentence
   with grammar it does not have. */
.vyb-run li:not(:last-child)::after {
    content: '·';
    margin: 0 0.5em;
    color: var(--teal);
}


/* Inside a dialog: same line, quieter. */
.vyb--tight {
    margin-top: 1.6rem;
    padding-top: 1.25rem;
}

.vyb--tight .vyb-run {
    font-size: 1.0625rem;
    line-height: 1.7;
}


@media (max-width: 56rem) {
    .izba-p {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .izba-p-it img {
        aspect-ratio: 3 / 2;
    }
}

/* --------------------------------------------------------------------------
   12. ROOMS

   Photographs are events (DIRECTION.md rule 3): hard edged rectangles, given
   room, revealed with a wipe rather than a fade. No rounded corners on the
   photograph itself; the radius belongs to the sheet, not to the image.
   -------------------------------------------------------------------------- */

.room {
    overflow: hidden;
    padding: 0;
}

.room-ph {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--line-soft);
}

.room-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
    .room:hover .room-ph img {
        transform: scale(1.04);
    }
}

.room-body {
    padding: 1.5rem 1.5rem 1.65rem;
}

/* Caption for a photograph that shows something other than the room itself,
   which is only the izolačná izba's bathroom. */
.room-cap {
    margin-top: 0.55rem !important;
    font-size: 0.9375rem !important;
    font-style: italic;
    color: var(--ink-faint) !important;
}

.room-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.room-meta b {
    font-weight: 500;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   13. ROUTES IN

   Three parallel alternatives. Round 8 was rejected because rows two and
   three were indented, which drew three mutually exclusive routes as one
   sequence a family had to pass through. Here they are strictly equal: same
   width, same baseline, same everything, and the number is a marker of
   identity rather than of order.
   -------------------------------------------------------------------------- */

.route {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.6rem;
}

.route-n {
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    color: var(--teal-ink);
    margin: 0 0 1.15rem;
}

.route h3 {
    font-size: 1.3125rem;
}

.route-formal {
    margin: 0.5rem 0 0;
    font-family: var(--mono);
    font-size: 0.875rem;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
}

.route p.route-txt {
    flex: 1;
    margin-top: 1rem;
    font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   14. PRICING

   The one place on the page that holds absolutely still. No parallax, no
   leaves, no reveal on the figures: a family compares this against another
   facility's sheet, and motion on a price is unserious.
   -------------------------------------------------------------------------- */

.price-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.35rem;
}

.price-g {
    padding: 1.75rem 1.75rem 1.5rem;
}

.price-g > h3 {
    font-size: 1.3125rem;
}

.price-note {
    margin: 0.45rem 0 1.35rem;
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
}

.price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.9rem;
    border-top: 1px solid var(--line-soft);
}

.price-row span {
    font-size: 1.0625rem;
    color: var(--ink-soft);
}

.price-row b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
}

.price-foot {
    margin-top: 1.5rem;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
}

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

/* --------------------------------------------------------------------------
   15. CONTACT
   -------------------------------------------------------------------------- */

.kont {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.kont-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kont-lines li {
    display: flex;
    gap: 1rem;
    padding-block: 1.05rem;
    border-top: 1px solid var(--line-soft);
    align-items: flex-start;
}

.kont-lines li:first-child {
    border-top: 0;
    padding-top: 0;
}

.kont-lines .chip {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.65rem;
    margin-bottom: 0;
}

.kont-lines .chip svg {
    width: 1.1rem;
    height: 1.1rem;
}

.kont-k {
    display: block;
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.2rem;
}

.kont-v {
    font-size: 1.125rem;
    color: var(--ink);
    text-decoration: none;
}

.kont-v.big {
    font-family: var(--serif);
    font-size: 1.6rem;
    letter-spacing: -0.015em;
}

a.kont-v:hover {
    color: var(--teal-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.hours-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.8rem;
    border-top: 1px solid var(--line-soft);
    font-size: 1.0625rem;
}

.hours-row:first-of-type {
    border-top: 0;
}

.hours-row b {
    font-family: var(--mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

@media (max-width: 52rem) {
    .kont {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   16. FOOTER — the only deep field on the page
   -------------------------------------------------------------------------- */

.nw-foot {
    position: relative;
    z-index: 1;
    margin-top: var(--band);
    background: var(--pine);
    color: #cfd8d2;
    padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
}

.nw-foot a {
    color: #cfd8d2;
    text-decoration: none;
}

.nw-foot a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.foot-cols {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: clamp(1.75rem, 4vw, 3rem);
}

.foot-h {
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint);
    margin: 0 0 1.15rem;
}

.foot-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
    font-size: 1.0625rem;
}

.foot-brand p {
    margin: 0.9rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #a9b6ae;
    max-width: 22rem;
}

.foot-mark {
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -0.015em;
}

.foot-base {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.75rem;
    border-top: 1px solid rgba(207, 216, 210, 0.16);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: space-between;
    font-size: 0.9375rem;
    color: #93a19a;
}

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

@media (max-width: 40rem) {
    .foot-cols {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   17. FOREGROUND FOLIAGE — the page's only depth device

   This is what replaces the dark gradient bands. A linden cutout, scaled
   large, blurred by distance, drifting against the scroll. Three rules it
   never breaks:

     1. It lives in the margin. Every one is positioned outside the text
        column, and on narrow viewports where there is no margin left, they
        are removed entirely rather than lightened. Nothing on this page ever
        reduces the contrast of a word.
     2. It is foreground, so it is blurred and it is FASTER than the page,
        not slower. Background parallax reads as wallpaper; foreground
        parallax reads as depth.
     3. It never appears twice in the same corner in a row.
   -------------------------------------------------------------------------- */

/* z-index 2 puts a leaf in front of the ground and of the section's own
   whitespace, and .wrap's z-index 3 puts every word and every sheet in front
   of the leaf. So foliage reads as foreground where there is nothing to
   obscure, and is occluded the instant it reaches content, which is both the
   correct depth cue and a structural guarantee that nothing on this page ever
   sits over a word. Positions are still authored to hang off the frame; this
   is the safety net, not the plan. */
.nleaf {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

.nleaf img {
    display: block;
    width: 100%;
    height: auto;
}

/* Distance grades.

   These were soft, and soft read as a smudge on the paper rather than as
   foliage. They are sharp now: the far grade carries no blur at all and the
   nearest carries barely two pixels, which is the amount a real branch a
   metre from the lens loses and no more. Sharper also means the cutout has to
   be genuinely out of the text column, which is what the positions below do:
   each leaf hangs mostly off the viewport edge and is cropped by the frame,
   so what shows is a branch entering the picture rather than an ornament
   parked in a margin. */
.nleaf--far img {
    opacity: 0.17;
    filter: saturate(0.6) brightness(1.04);
}

.nleaf--mid img {
    opacity: 0.22;
    filter: blur(0.4px) saturate(0.78);
}

.nleaf--near img {
    opacity: 0.26;
    filter: blur(1.6px) saturate(0.92);
}

/* Solid. The hero's own .lf-live treatment: full opacity, no blur, the
   linden's real colour. These are not a wash on the paper, they are a branch
   in the room, and they are what gives the other three grades a distance to
   be measured against. Used sparingly and only where the leaf enters from
   outside the frame: a solid cutout that begins and ends inside the viewport
   reads as a sticker, not as foliage. */
.nleaf--live img {
    opacity: 1;
    filter: saturate(0.92) contrast(1.02);
}

/* Below the wide breakpoint the wrap eats the side space, so the nearest
   grade goes first and then all of them. They are removed, never lightened:
   a leaf that has nowhere to go is a leaf over a word. */
@media (max-width: 78rem) {
    .nleaf--near,
    .nleaf--live {
        display: none;
    }
}

@media (max-width: 64rem) {
    .nleaf {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   18. REVEALS

   Set by JS, so the no-JavaScript page is simply already arrived. Nothing
   here hides content from a reader who never gets the script.
   -------------------------------------------------------------------------- */

/* Hidden ONLY once the script has confirmed it is about to animate, by adding
   .mo to <html>. If GSAP never loads, stalls, or throws, .mo is never added
   and the page is simply already arrived: a reader can never be left with a
   hero and eight screens of nothing. This is the difference between a reveal
   and a page that depends on JavaScript to have content. */
.js.mo .rv {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .js.mo .rv {
        opacity: 1;
    }

    .nleaf {
        display: none;
    }

    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   18b. THE HERO, CENTRED

   The inherited hero sets its copy hard left and bottom. Centred instead, and
   the axis is only horizontal: the copy stays in the lower part of the frame
   because that is where .hero-fall-b puts its darkness, and darkness is the
   only reason white type on a photograph of a bright cream house is readable
   at all. Moving it to the true vertical centre would put every line over the
   sunlit wall, which is the "visible readability crutch" problem in reverse:
   we would have to add a scrim box to fix it, and a scrim box is the thing
   that reads as amateur.

   Measures are capped in ch rather than px so the centred lines break at a
   sensible place instead of running the full width of a 1800px frame.
   -------------------------------------------------------------------------- */

/* The inherited falloff is tuned for left-set copy sitting low: above 900px it
   is already down to 0.2 alpha at 44% of the frame and gone by 68%. Centred
   copy is taller and reaches further up, so its first two lines landed on the
   sunlit wall. Deepened and carried higher, on the same six-stop curve so it
   stays a falloff and never becomes an edge. The top half of the photograph,
   the roof, the sky and the linden, is untouched. */
.hero-fall-b {
    background: linear-gradient(
        to top,
        rgba(13, 33, 28, 0.96) 0%,
        rgba(13, 33, 28, 0.9) 19%,
        rgba(13, 33, 28, 0.76) 37%,
        rgba(13, 33, 28, 0.5) 55%,
        rgba(13, 33, 28, 0.2) 74%,
        rgba(13, 33, 28, 0) 90%
    );
}

@media (min-width: 900px) {
    .hero-fall-b {
        background: linear-gradient(
            to top,
            rgba(13, 33, 28, 0.96) 0%,
            rgba(13, 33, 28, 0.87) 17%,
            rgba(13, 33, 28, 0.68) 34%,
            rgba(13, 33, 28, 0.43) 52%,
            rgba(13, 33, 28, 0.17) 71%,
            rgba(13, 33, 28, 0) 88%
        );
    }
}

/* The left vignette existed to seat copy on the left edge. With the copy
   centred it darkens one side of a symmetrical composition and reads as a
   lighting mistake, so it becomes a pool under the words instead. */
.hero-fall-l {
    background: radial-gradient(
        122% 80% at 50% 100%,
        rgba(13, 33, 28, 0.5) 0%,
        rgba(13, 33, 28, 0.24) 42%,
        rgba(13, 33, 28, 0) 74%
    );
}

.hero-copy {
    align-items: center;
    text-align: center;
}

.hero-copy .eyebrow {
    justify-content: center;
}

/* Colour, not decoration, is the collision here. zahrada-v3.css sets
   .eyebrow--dark to mint, but this file's own .eyebrow rule has the same
   specificity and loads later, so it was about to paint the hero's eyebrow in
   --teal-ink: dark teal, on a dark photograph. Restated explicitly. */
.hero-copy .eyebrow,
.eyebrow--dark {
    color: var(--mint);
}

.hero-copy .eyebrow::before,
.eyebrow--dark::before {
    background: var(--mint);
}

.hero h1 {
    max-width: 18ch;
    margin-inline: auto;
}

.hero-sub {
    max-width: 46ch;
    margin-inline: auto;
}

.hero-cta {
    justify-content: center;
}

.hero-decl {
    text-align: center;
}

@media (max-width: 46rem) {
    .hero h1 {
        max-width: 14ch;
    }
}

/* --------------------------------------------------------------------------
   19. HEADER — carried from the locked chrome, re-typed

   The bar itself is inherited from zahrada-v3.css. Only the type and the
   condensed state's ground are restated here, because the inherited bar
   condenses onto a colour that no longer exists below the hero.
   -------------------------------------------------------------------------- */

.hdr .nav a,
.hdr .brand,
.drawer a {
    font-family: var(--sans);
}

/* "O zariadení" and "Starostlivosť" are long enough to wrap to two lines and
   knock the bar's baseline out. They are nav items, not sentences. */
.hdr .nav-d a {
    white-space: nowrap;
}

.hdr.is-solid {
    background: rgba(246, 242, 230, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(17, 35, 29, 0.5);
}

/* --------------------------------------------------------------------------
   20. DEV CHROME — the round banner and switcher

   Amber, obvious, and fixed: nobody may mistake this page for the live site.
   -------------------------------------------------------------------------- */

/* Bottom left, not bottom centre: centred it sat straight across the hero's
   declaration line ("30 miest · 17 izieb · denná úhrada od 36,50 €"), which
   is the one row in the hero a family actually reads. */
.nw-flag {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(23, 20, 12, 0.93);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.6);
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: #f4e8c8;
    max-width: calc(100vw - 2rem);
}

.nw-flag b {
    font-weight: 500;
    color: #f7c948;
}

.nw-flag a {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(244, 232, 200, 0.12);
    color: #f4e8c8;
    text-decoration: none;
}

.nw-flag a:hover {
    background: rgba(244, 232, 200, 0.24);
}

.nw-flag a.is-on {
    background: #f7c948;
    color: #241d05;
}

.nw-flag-sep {
    opacity: 0.6;
}

@media (max-width: 40rem) {
    .nw-flag {
        font-size: 0.75rem;
        padding-left: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   21. PRIJATIE — the routes as disclosures, on the reference's pattern

   Three cards, each a native <details>. What the reference does that is worth
   copying: a small label naming the formal thing above a plain-language
   title, numbered steps on a connecting rail, an inline note, a summary at
   the foot.

   The numbering restarts inside every card and the cards are identical and
   unindented, because these are three routes a family picks ONE of. Round 8
   was rejected for indenting them into a sequence; the reference's numbers
   are a sequence through one service and ours must never read that way.
   -------------------------------------------------------------------------- */

.pri {
    display: grid;
    gap: 1.15rem;
}

/* No overflow:hidden. On a <details> it fights the element's own closed
   state: the body stayed in flow and was merely clipped, so a shut card was
   348px of content hidden inside a 112px box rather than genuinely collapsed.
   Nothing here paints to the card's edge, so the radius needs no clipping. */
.pri-c {
    background: var(--sheet);
    border-radius: var(--r);
    box-shadow: var(--lift), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* The whole header is the control. list-style:none plus the ::-webkit- rule
   removes the native triangle in every engine that still draws one. */
.pri-s {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.25rem, 2.6vw, 2rem);
    cursor: pointer;
    list-style: none;
}

.pri-s::-webkit-details-marker {
    display: none;
}

.pri-s:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: -3px;
}

.pri-s .chip {
    margin-bottom: 0;
}

.pri-s-tx {
    flex: 1;
    min-width: 0;
}

.pri-s-lbl {
    display: block;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.3rem;
}

.pri-s-t {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.pri-s-x {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--teal-wash);
    color: var(--teal-ink);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.pri-c[open] .pri-s-x {
    transform: rotate(180deg);
}

.pri-b {
    padding: 0 clamp(1.25rem, 2.6vw, 2rem) clamp(1.35rem, 2.6vw, 2rem);
}

/* The step rail. The line is drawn on the list, not between items, so it
   cannot end up with a stub past the last number the way a per-item border
   would. */
.pri-steps {
    position: relative;
    margin: 0;
    padding: 0.35rem 0 0;
    list-style: none;
}

.pri-steps::before {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 1.75rem;
    bottom: 1.75rem;
    width: 2px;
    background: var(--line);
}

.pri-steps li {
    position: relative;
    display: flex;
    gap: 1.1rem;
    padding-block: 0.75rem;
}

.pri-n {
    position: relative;
    z-index: 1;
    flex: none;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--pine);
    color: var(--cream);
    font-family: var(--mono);
    font-size: 1rem;
    box-shadow: 0 0 0 4px var(--sheet);
}

.pri-k-t {
    display: block;
    font-size: 1.125rem;
    line-height: 1.35;
    color: var(--ink);
    margin-top: 0.15rem;
}

.pri-k-d {
    display: block;
    margin-top: 0.3rem;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* The inline note: the money answer, at the moment a route is being chosen. */
.pri-nota {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1.1rem 0 0 3.3rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    background: var(--teal-wash);
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--teal-ink);
}

.pri-nota svg {
    flex: none;
}

/* The Zhrnutie, set apart from the cards rather than inside one: it is true
   of all three routes, so it must not look like it belongs to the last. */
.pri-zhrn {
    margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
    padding-top: clamp(1.35rem, 2.5vw, 1.85rem);
    border-top: 1px solid var(--line);
    max-width: 62ch;
}

.pri-zhrn-h {
    margin: 0 0 0.7rem;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sand);
}

.pri-zhrn p:last-child {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

@media (max-width: 40rem) {
    .pri-nota {
        margin-left: 0;
    }
}

/* ---- V2 OTVORENÉ: three columns, nothing hidden ----
   A disclosure asks somebody to guess what is behind a chevron before they
   can compare their options, and this audience skews elderly and rural. Here
   the comparison IS the layout. No card and no shadow either: the routes are
   held apart by a rule and by air, which keeps the band from becoming a
   fourth row of white boxes. */
.pri--otv {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.pri-o .chip {
    margin-bottom: 1.1rem;
}

.pri-o-lbl {
    margin: 0 0 0.35rem;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.pri-o-t {
    margin: 0 0 1.35rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.pri-o-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pri-o-steps li {
    padding-block: 0.95rem;
    border-top: 1px solid var(--line-soft);
}

.pri-o-n {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 0.5rem;
    border-radius: 999px;
    background: var(--teal-wash);
    color: var(--teal-ink);
    font-family: var(--mono);
    font-size: 0.9375rem;
}

/* ---- V3 LINKA: each route walked left to right ----
   Built on the stravovanie day lane, the device this page already owns. A
   route is a short sequence and this is how this page draws a sequence, so
   the band speaks our language instead of the reference's.

   Nothing joins one lane to the next: three alternatives must never read as
   nine steps. */
.pri--linka {
    gap: clamp(2rem, 4vw, 3.25rem);
}

.pri-l + .pri-l {
    padding-top: clamp(2rem, 4vw, 3.25rem);
    border-top: 1px solid var(--line);
}

.pri-l-hd {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.pri-l-hd .chip {
    margin-bottom: 0;
}

.pri-l-hd .pri-o-t {
    margin: 0;
}

.pri-l-track {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* First dot to last dot, exactly. Same maths as the day lane: with n equal
   cells the first dot's centre sits 50%/n from the edge. */
.pri-l-track::before {
    content: '';
    position: absolute;
    left: calc(50% / var(--lane-n, 3));
    right: calc(50% / var(--lane-n, 3));
    top: 1.1rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(196, 168, 108, 0.9), rgba(205, 197, 171, 1) 50%, rgba(21, 155, 156, 0.75));
}

.pri-l-stop {
    flex: 1 1 0;
    min-width: 0;
    padding-right: clamp(1rem, 2.5vw, 2rem);
}

.pri-l-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--pine);
    color: var(--cream);
    font-family: var(--mono);
    font-size: 1rem;
    box-shadow: 0 0 0 5px var(--cream);
}

.pri-nota--inline {
    margin: 0 0 0 auto;
}

@media (max-width: 62rem) {
    .pri--otv {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pri--otv .pri-o + .pri-o {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--line);
    }

    .pri-l-track {
        display: grid;
        gap: 1.25rem;
    }

    .pri-l-track::before {
        display: none;
    }

    .pri-l-stop {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1rem;
        align-items: baseline;
        padding-right: 0;
    }

    .pri-l-dot {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }

    .pri-l-hd {
        flex-wrap: wrap;
    }

    .pri-nota--inline {
        margin: 0.5rem 0 0;
    }
}

/* The price a route leads to, said where the route is chosen. Quiet: it is a
   fact the reader needs, not a badge. */
.route-cena {
    margin-top: 1.15rem !important;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line-soft);
    font-family: var(--mono);
    font-size: 1rem !important;
    letter-spacing: 0.02em;
    color: var(--teal-ink) !important;
}

/* --------------------------------------------------------------------------
   ROUND 16 — the ported close, and what it made dead.

   The kontakt band and the footer are now Z3's, included from
   dev/new.blade.php. Their styling lives in zahrada-v3.css and is loaded
   FIRST, which is what makes the port a markup change and not a restyle: the
   palettes are token-for-token identical (--pine, --mint, --cream, --ink all
   hold the same values in both files), so the only thing this page changes
   about them is --serif and --sans, which is the point.

   Three bridges are needed and no more.
   -------------------------------------------------------------------------- */

/* 1. The measure. .nw-main .wrap gives the page's sections a width of
      min(100% - 2 gutters, --wrap) with no padding, while zahrada-v3.css's
      .wrap uses max-width plus padding-inline: --gut. Those resolve to
      different content widths (1344px against 1184px at this viewport), and
      the footer sits outside .nw-main, so without this the record below the
      kontakt band would be inset 80px further than the band above it. */
.kontakt .stmt em {
    color: inherit;
}

.foot .wrap {
    width: min(100% - (var(--gutter) * 2), var(--wrap));
    max-width: none;
    padding-inline: 0;
    margin-inline: auto;
}

/* 2. The eyebrow needs NO bridge. Z3's close carries none, because its cenník
      band ran straight into it; this page opens every section with one, so
      the close keeps the grammar and the markup gained a
      <p class="eyebrow eyebrow--dark">. The rule that re-points that class to
      mint, dot included, is already further up this file for the hero. Left
      here as a note so nobody adds a second one.

   3. THE ITALIC HALF OF THE CLOSE'S HEADING, which was unreadable.
      .stmt em is --teal-ink (#0b5758), a colour chosen to pass as text ON
      CREAM. The kontakt band is pine (#0d211c), where the same value is
      almost invisible: "Prídite sa POZRIEŤ" had its second word disappear
      into the field. The rule is below; it inherits the #fffdf6 that
      .kontakt .stmt already sets. Global on purpose — this band closes the
      homepage and all three subpages.

   4. The statement breaks on an explicit <br>, not on a measure. new.css sets
      .stmt { max-width: none } so centred section heads stop shrink-wrapping,
      which means Z3's two-line close came out on one line here; a ch cap
      guessed against Fraunces would be a number nobody could later justify,
      and the rest of this page already breaks its statements by hand. */

/* DEAD, kept as a record rather than silently deleted, because /_dev/new is
   still an exploration and the reasons matter more than the bytes:

     .nw-foot, .foot-cols, .foot-brand, .foot-h, .foot-list, .foot-base
        The four-column sitemap footer. Replaced by the operator's record.
     .price-grid, .price-g, .price-row, .price-note, .price-foot
        The cenník band, removed in round 16. /cennik still uses its own.
     .kont, .kont-lines, .kont-k, .kont-v, .hours-row
        The old cream kontakt band on white sheets.

   They are unreferenced by this page now. Delete them when this design is
   productionized off /_dev, not before: the /_dev index still links rounds
   that render them. */

/* 4. The kontakt photograph. Its rules were deleted from zahrada-v3.css when
      a later commit deleted the markup, so they are restored here rather than
      there: zahrada-v3.css serves the locked Z3 page at "/", and that page
      has no .kontakt-ph to style. Copied verbatim from what
      dss.weboveriesenia.sk actually serves (/dev/zahrada-v3.css?v=17).

      The mask is the whole point and must not be simplified into a border or
      a radius. A rectangle of photograph on the pine field is a rectangle;
      the radial mask lets the picture fall off into the dark on every side,
      so the band reads as one field with a view in it. Nothing about it is a
      visible readability crutch — there is no scrim and no darkening layer,
      the image simply stops existing at its edges. */
.kontakt-ph {
    margin-top: clamp(2.5rem, 6vh, 4rem);
}

.kontakt-ph img {
    width: 100%;
    height: auto;
    filter: brightness(0.9) saturate(0.94);
    -webkit-mask-image: radial-gradient(84% 92% at 42% 52%, #000 46%, transparent 88%);
    mask-image: radial-gradient(84% 92% at 42% 52%, #000 46%, transparent 88%);
}

/* The bleed. On the deployed page .wrap carries padding-inline: var(--gut),
   so pulling the picture back by one gutter lands it on the wrap's own edge.
   Here .nw-main .wrap has no padding at all, so the same negative margin
   would push it a full gutter PAST the edge and out of alignment with every
   other left edge on the page. It is pulled by the 2vw only. */
@media (min-width: 62.5rem) {
    .kontakt-ph {
        margin-left: -2vw;
    }
}

@media (max-width: 62.4375rem) {
    .kontakt-ph {
        width: calc(100% + (var(--gutter) * 2));
        margin-left: calc(-1 * var(--gutter));
    }
}

/* --------------------------------------------------------------------------
   THE ARC — the four doors follow the hero's seam.

   zahrada-v3.css paints the hero's bottom edge as an arc rather than a cut:
   "the cream of the page rises at both edges and dips away in the middle".
   The four cards sit directly under that edge now that the band's heading is
   gone, so they take the same shape — the outer two lifted, the inner two at
   rest — and the row reads as the continuation of the curve instead of as a
   straight line drawn under a curved one.

   MARGINS, NOT TRANSFORM, and this matters. The row carries [data-stagger],
   and new.js animates those children on y, so anything this file writes to
   transform is overwritten the moment the group arrives. A negative
   margin-top paired with an equal positive margin-bottom shifts the card up
   inside a stretch row while leaving the height it resolves to unchanged, so
   all four cards still end on one baseline.

   The lift is deliberately small. The hero's own arc is shallow at the
   viewport's edges, and a card row that curves harder than the thing it is
   echoing reads as a mistake rather than as a rhyme.
   -------------------------------------------------------------------------- */

.g4--arc > :first-child,
.g4--arc > :last-child {
    margin-top: -1.5rem;
    margin-bottom: 1.5rem;
}

/* Below the four-across breakpoint the cards are two-up and then stacked, and
   at two-up the "edges" of the row are cards 1 and 2, which is not the shape
   the hero makes. The arc is a wide-viewport rhyme only. */
@media (max-width: 62rem) {
    .g4--arc > :first-child,
    .g4--arc > :last-child {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* The offer of a person, after the Život band. It was an .aside-cta, the same
   inline pill the služby band uses to link to /starostlivost — one control
   doing two different jobs, a phone call and a page link. This one is the
   page speaking to the reader, so it gets a sentence and the site's real
   button, centred and alone in whitespace. */
.zivot-cta {
    max-width: 44rem;
    /* Modest, because this now lives INSIDE the band. When it sat between two
       sections it carried a 4rem margin on top of both bands' padding, which
       is the "too much space above" it was called out for. */
    margin: clamp(2rem, 3.5vw, 2.75rem) auto 0;
    text-align: center;
}

.zivot-cta p {
    margin: 0 0 1.5rem;
    font-family: var(--serif);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.45;
    color: var(--ink);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   17. KONTAKTNÝ FORMULÁR — the form in the kontakt band

   Added 18 August 2026. It lives on the pine field at the foot of every page,
   under the phone button, and it is deliberately the quieter of the two ways
   to reach the zariadenie: this audience mostly rings, and the ones who will
   not ring a stranger are the ones this is for.

   ON THE DARK. Every colour here is measured against --pine, not against
   cream. The inputs are a lifted translucent white rather than a solid panel,
   so they read as recesses in the field instead of cards laid on top of it;
   a white input box on this ground looks like a form pasted in from another
   site, which is exactly what it must not look like.

   BIG. 1.0625rem is the site's floor and the inputs sit above it, at a 3.2rem
   minimum height. The people filling this in are often in their sixties on a
   phone, and a compact form is a form they abandon.
   -------------------------------------------------------------------------- */

.kf {
    margin-top: clamp(2.5rem, 6vh, 3.75rem);
    padding-top: clamp(2rem, 4vh, 2.75rem);
    border-top: 1px solid rgba(246, 242, 230, 0.24);
    max-width: 40rem;
}

/* Same object as .khours-lbl in the card opposite: the mint mono label is how
   this site names a block on the dark field. */
.kf-lbl {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mint);
}

.kf-intro {
    margin: 0.9rem 0 0;
    max-width: 46ch;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: #dfe7d8;
    text-wrap: pretty;
}

.kf-form {
    margin-top: clamp(1.6rem, 3vh, 2.1rem);
    display: grid;
    gap: 1.35rem;
}

/* Telephone and e-mail share a line above 34rem. They are the two short
   fields and the only pair on the form; everything else runs full width
   because a name and a message both want the room. */
.kf-pair {
    display: grid;
    gap: 1.35rem;
}

@media (min-width: 34rem) {
    .kf-pair {
        grid-template-columns: 1fr 1fr;
    }
}

.kf-row {
    display: grid;
    gap: 0.5rem;
}

.kf-l {
    font-size: var(--fs-small);
    font-weight: 500;
    color: #dfe7d8;
}

.kf-opt {
    font-size: 0.9375rem;
    font-weight: 400;
    color: rgba(223, 231, 216, 0.62);
}

.kf-i {
    width: 100%;
    min-height: 3.2rem;
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: #fffdf6;
    background: rgba(246, 242, 230, 0.07);
    border: 1px solid rgba(246, 242, 230, 0.26);
    border-radius: var(--r-sm);
    transition: border-color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease;
    appearance: none;
}

.kf-i::placeholder {
    color: rgba(223, 231, 216, 0.5);
}

.kf-i:hover {
    border-color: rgba(246, 242, 230, 0.42);
}

/* The focus ring is the brand mint, not the browser's blue, and it is a real
   ring rather than a colour change: keyboard users have to be able to see
   where they are on a dark field at a glance. */
.kf-i:focus-visible {
    outline: none;
    background: rgba(246, 242, 230, 0.11);
    border-color: var(--mint);
    box-shadow: 0 0 0 3px rgba(154, 223, 215, 0.28);
}

.kf-t {
    min-height: 8.5rem;
    resize: vertical;
}

/* Wrong-field state. The border carries it and the message says what to do;
   there is no red panel, because a form that shouts at someone who mistyped a
   phone number is a form they close. */
.kf-i.is-bad {
    border-color: #f0a9a0;
    background: rgba(240, 169, 160, 0.08);
}

.kf-e {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: #f6c6bf;
}

/* THE CONSENT. A real 1.25rem box with a generous label beside it, and the
   whole label is the hit target. It is never pre-ticked: a pre-ticked consent
   is not a consent. */
.kf-consent {
    margin-top: 0.35rem;
}

.kf-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    cursor: pointer;
    font-size: var(--fs-small);
    line-height: 1.58;
    color: #dfe7d8;
    text-wrap: pretty;
}

.kf-check input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.16rem 0 0;
    accent-color: var(--teal);
    cursor: pointer;
    flex: none;
}

.kf-check input:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}

.kf-check.is-bad {
    color: #f6c6bf;
}

.kf-send {
    margin-top: 0.6rem;
}

/* The honeypot. Off the canvas rather than display:none, because some bots
   skip anything that is hidden and this field exists to be filled in. */
.kf-pot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The confirmation, which replaces the form rather than sitting above it. */
.kf-ok {
    margin-top: 1.4rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid rgba(154, 223, 215, 0.4);
    border-radius: var(--r-sm);
    background: rgba(154, 223, 215, 0.09);
}

.kf-ok-h {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 1.24;
    color: #fffdf6;
}

.kf-ok-p {
    margin: 0.7rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: #dfe7d8;
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   18. COOKIE NOTICE

   A notice, not a consent gate: see resources/views/partials/cookies.blade.php
   for why this site has nothing to ask permission for. It follows that it must
   not behave like a banner. It is a small sheet in the bottom left corner, it
   never spans the page, it never dims what is behind it, and the site works
   normally with it on screen.

   IT IS BUILT OUT OF THE PAGE, NOT DROPPED ON IT. The cream sheet, the
   two-part --lift shadow, the radius and the serif are the page's own. What
   makes it read as ours rather than as a plugin is a linden leaf bleeding off
   the top corner at .nleaf--far grade and the LIRI swan above the line: the
   site's two signatures, at the size of a detail. A black bar across the foot
   of the screen is what this must never look like.
   -------------------------------------------------------------------------- */

.ck {
    position: fixed;
    z-index: 60; /* over the page, under the menu panel and the lightbox */
    left: var(--gutter);
    bottom: var(--gutter);
    width: min(23.5rem, calc(100vw - var(--gutter) * 2));
    overflow: hidden; /* clips the leaf to the card */
    border-radius: var(--r);

    /* Not flat. The sheet warms very slightly towards the bottom right, which
       is the direction the page's own ground warms in, plus a teal breath
       behind the swan. Both sit at a few percent: felt, never seen. */
    background:
        radial-gradient(120% 100% at 8% 0%, rgba(21, 155, 156, 0.07), transparent 58%),
        linear-gradient(160deg, var(--sheet) 0%, #faf6ea 100%);
    box-shadow: var(--lift), inset 0 1px 0 rgba(255, 255, 255, 0.9);

    /* Parked until the script raises it. Transform and opacity only, so it
       never costs a layout. */
    opacity: 0;
    transform: translateY(0.9rem);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* MUST come with the display above. An author display rule beats the user
   agent's `[hidden] { display: none }`, so without this the notice is visible
   before the script mounts it and stays visible after it is dismissed. That is
   the whole failure mode of a hand-rolled banner, and it is one line. */
.ck[hidden] {
    display: none;
}

.ck.is-up {
    opacity: 1;
    transform: none;
}

/* The leaf. Same grade as .nleaf--far in the page margins (0.17, desaturated),
   so it belongs to the same weather. It hangs off the top right and is cut by
   the card, which is what makes the card feel like a window onto the page
   rather than a panel sitting on it. */
.ck-leaf {
    position: absolute;
    top: -4.6rem;
    right: -5.2rem;
    width: 15.5rem;
    /* Lower than the page's own .nleaf--far (0.17) on purpose: that grade is
       tuned for a leaf drifting over a whole band, and inside a 23rem card the
       same value reads as a photograph of leaves pasted in the corner. At 0.11,
       masked, it is weather. */
    opacity: 0.11;
    filter: saturate(0.5) brightness(1.06);
    transform: rotate(24deg);

    /* The card's edge cuts two sides of it; without this the other two are a
       hard photographic boundary sitting in the middle of the sheet. It has to
       dissolve into the paper, not stop on it. */
    -webkit-mask-image: radial-gradient(78% 78% at 82% 18%, #000 34%, transparent 82%);
    mask-image: radial-gradient(78% 78% at 82% 18%, #000 34%, transparent 82%);

    pointer-events: none;
    user-select: none;
}

.ck-in {
    position: relative; /* over the leaf */
    padding: 1.5rem 1.5rem 1.35rem;
}

/* The mark rides just above the statement rather than sitting in its own
   band of air. At 0.85rem of gap it read as a stray icon; tucked in, it is
   the swan signing the line. */
.ck-mark {
    display: block;
    width: 2rem;
    height: auto;
    margin-bottom: 0.55rem;
}

/* The answer, in the page's serif and at the size of a statement. This is the
   only line most people will read, and small print is the wrong voice for
   "we are not watching you". */
.ck-h {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--ink);
}

.ck-t {
    margin: 0.5rem 0 0;
    font-size: 1rem; /* the 16px small floor: this audience reads nothing smaller */
    line-height: 1.55;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* The actions sit under a hairline, which is how every other block on this
   site closes. Dismiss on the left because it is what nearly everyone wants. */
.ck-act {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Filled teal, but small. It is the same object as the page's .btn and
   deliberately a size below it: the primary button on this site is the phone
   call, and a dismissal that shouts as loudly would be the loudest thing on
   the screen for the least important reason. */
.ck-x {
    padding: 0.62rem 1.25rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #fffdf6;
    background: var(--teal-deep);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}

.ck-x:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -12px rgba(11, 87, 88, 0.9);
}

.ck-x:active {
    transform: none;
}

.ck-x:focus-visible {
    outline: 2px solid var(--teal-ink);
    outline-offset: 3px;
}

/* The site's own link treatment: teal, underlined off the baseline. --line
   is a hairline meant for dividers on cream and disappears under a word, which
   left "Viac" looking like it had a smudge beneath it rather than a rule. */
.ck-more {
    font-size: 1rem;
    font-weight: 500;
    color: var(--teal-ink);
    text-decoration: underline;
    text-decoration-color: rgba(11, 87, 88, 0.32);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.28em;
    transition: text-decoration-color 0.28s ease;
}

.ck-more:hover {
    text-decoration-color: var(--teal);
}

/* On a phone it runs the width it is given and sits just clear of the bottom
   edge, where a thumb already is. */
@media (max-width: 34rem) {
    .ck {
        left: 0.85rem;
        right: 0.85rem;
        bottom: 0.85rem;
        width: auto;
    }

    .ck-in {
        padding: 1.35rem 1.35rem 1.2rem;
    }

    .ck-h {
        font-size: 1.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ck {
        transition: none;
        transform: none;
    }

    .ck-x:hover {
        transform: none;
    }
}