/* #region Photography */
/* The veil this page invented — a gradient darkening down the frame, light falling — is now the
   house's own --photo-veil in site.css, together with the three exposures a photograph may take.
   It was settled on this page because the mismatch stands side by side here: products.webp opens
   the hero and also closes the Places stack, dimmed by a gradient in one and by a flat brightness() in
   the other. The reasoning holds for every page, so the value lives in site.css; this alias is what the
   five rules below read, and it exists so the page says out loud that its photographs are treated like
   everyone else's. Keep it at the shared strength: at .58 at the foot of the frame this page is the
   darkest in the house, which is a look, but not one anybody chose. */
:root {
    --home-photo-veil: var(--photo-veil);
}
/* #endregion */

/* #region Geometric */
@media (prefers-reduced-motion: reduce) {
    .hero-cinematic--home .hero-bg::after,
    .hero-cinematic--home::before,
    .hero-cinematic--home::after,
    .home-hero-square::before {
        animation: none;
    }
}
/* #endregion */

/* #region Editorial */
.home-editorial {
    position: relative;
    z-index: 5;
    padding: 20vh 0 14vh;
    /* Horizontally only. Plain `overflow: clip` also clips vertically, and any ancestor that clips
       on an axis becomes the scroll container for position: sticky inside it — which would stop the
       Places cards from stacking against the viewport. overflow-x may be clipped while overflow-y
       stays visible; that is the one combination the spec allows without forcing the other axis to
       auto, and it still contains the sideways bleed this section has to guard against. */
    overflow-x: clip;
    background: var(--black);
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .home-editorial {
        padding-top: 16vh;
    }
}

/* #endregion */

/* #region Hero */
.hero-cinematic--home {
    min-height: 100svh;
    height: auto;
    background: var(--hero-surface);
    border-bottom: 1px solid var(--line);
}

    /* The lattice, the axis and their reveal live once in site.css, next to the hero copy's own
       entrance: this page and the product pages draw the same hero, and two copies of those rules are
       how the two drift apart. What stays here is only what the home page alone has. */
    .hero-cinematic--home .hero-bg {
        overflow: hidden;
        background: var(--black);
    }

.hero-cinematic--home .container.hero-content {
    width: min(90vw, var(--hero-content-max));
    max-width: none;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 500px) 1fr;
    gap: clamp(4rem, 8vw, 9rem);
    /* Never less than the fixed header, which 8vh of a short laptop is not. */
    padding: max(8vh, calc(var(--site-header-h, 72px) + 1.5rem)) 0 3vh;
    text-shadow: none;
    text-align: left;
    align-items: center;
}

.hero-cinematic--home .hero-copy::before {
    display: none;
}

.hero-cinematic--home .hero-copy {
    position: relative;
    z-index: 2;
}

/* Wide enough for "Przestrzeń zyskuje" to stand as one line: the break belongs where the <br /> in
   the copy puts it, not where a character count happens to fall. */
.hero-cinematic--home .h-title {
    max-width: 18ch;
    margin-bottom: 0;
}

.hero-cinematic--home .h-desc {
    max-width: 500px;
    margin: 5vh 0 0;
}

.home-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
    margin-top: -12px;
    color: var(--white);
    font-family: var(--font-sans);
    font-size: clamp(.78rem, .9vw, .9rem);
    font-weight: 400;
    letter-spacing: .25em;
    line-height: 1.5;
    text-decoration: none;
    text-transform: uppercase;
}

.home-hero-square {
    position: relative;
    width: min(52vw, 760px);
    max-width: calc(100% + clamp(2rem, 4vw, 4.5rem));
    margin: 0;
    grid-column: 2;
    justify-self: end;
    clip-path: none;
    /* The entrance is in site.css, shared with the product pages' exhibit. */
}

    .home-hero-square::before {
        position: absolute;
        inset: -2.5%;
        z-index: -1;
        padding: 1px;
        background: var(--section-divider);
        content: '';
        -webkit-mask: linear-gradient(#050505 0 0) content-box, linear-gradient(#050505 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    .home-hero-square::after {
        position: absolute;
        inset: -2.5%;
        z-index: -1;
        padding: 1px;
        background: var(--hairline-faint);
        content: '';
        -webkit-mask: linear-gradient(#050505 0 0) content-box, linear-gradient(#050505 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

/* The Filmable frame carries both classes, so its overlay and its grade are stated once, under
   .home-intro-image below. A second ::after here declared the same four properties and only ever
   lost to it, and a filter here did the same — two darker gradients nobody could tell apart is how
   this page ended up with three different exposures. */
.home-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.8s var(--ease-house), filter var(--motion-slow) var(--ease-house);
}

.home-intro-image > span {
    font-family: var(--font-sans);
    font-size: clamp(.62rem, .75vw, .76rem);
    letter-spacing: .22em;
    text-transform: uppercase;
}

.home-hero-abstract .home-hero-stage {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    /* The five products together — the one photograph the home page opens with, so it is named here rather
       than on the element. The house black sits under it, so while it loads the square is black rather
       than the lattice behind it showing through as grey. */
    background-color: var(--black);
    background-image: url('/img/house/products.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 34px 90px rgba(5, 5, 5, .42);
}

    .home-hero-abstract .home-hero-stage::before {
        position: absolute;
        z-index: 0;
        inset: 0;
        background: var(--home-photo-veil);
        content: '';
        pointer-events: none;
    }

.home-hero-node {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    width: clamp(4.7rem, 5.5vw, 5.5rem);
    min-width: 0;
    aspect-ratio: 1;
    padding: .55rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 50%;
    background: rgba(5, 5, 5, .88);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
    text-align: center;
}

    .home-hero-node::before {
        position: absolute;
        inset: -1px;
        border: 1px solid var(--hairline-strong);
        border-radius: 50%;
        content: '';
        pointer-events: none;
    }

    .home-hero-node::after {
        position: absolute;
        inset: -1px;
        border: 1px solid var(--hairline);
        border-radius: 50%;
        content: '';
        pointer-events: none;
    }

    .home-hero-node small {
        color: var(--gold);
        font-size: .55rem;
        font-weight: 400;
        letter-spacing: .12em;
    }

.home-hero-node--soul {
    top: 71.5%;
    left: 13.5%;
}

.home-hero-node--alibi {
    top: 45%;
    right: 15%;
}

.home-hero-node--art {
    top: 28%;
    left: 49%;
}

.home-hero-node--lens {
    top: 46.5%;
    left: 17%;
}

.home-hero-node--space {
    top: 68%;
    right: 33%;
}

.home-hero-node:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: .5rem;
}

    .home-hero-node:hover::before,
    .home-hero-node:focus-visible::before {
        animation-play-state: paused;
    }

/* No bottom padding at all. The footer already opens with a full --section-space, so anything paid
   here is paid twice — which is what left the book strip, the last thing in <main>, sitting in a
   gap the height of two sections. The space under the last content on this page is now the footer's
   own opening, exactly as on every other page. The class is on the home page's <main> and nowhere
   else, so this moves nothing on any other screen. */
.home-editorial {
    padding: 0;
    overflow: clip;
    background: #050505;
    border: 0;
}

/* #endregion */

/* #region Shared section typography */
.home-anatomy,
.home-places,
.home-evening {
    width: min(90vw, var(--hero-content-max));
    max-width: none;
    padding-inline: 0;
}

.home-intro-image:hover img {
    filter: var(--photo-grade);
    transform: scale(1.012);
}

.home-intro-image {
    position: relative;
    width: min(100%, 640px);
    aspect-ratio: 1;
    overflow: visible;
}

    .home-intro-image::before {
        position: absolute;
        inset: 5% 7% -5% -7%;
        z-index: 0;
        border: 1px solid var(--hairline-mid);
        content: '';
        transition: border-color var(--motion) var(--ease-house);
    }

    /* The offset frame warms under the hand. */
    .home-intro-image:hover::before {
        border-color: var(--photo-frame-hover);
    }

    .home-intro-image::after {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: var(--home-photo-veil);
        content: '';
        pointer-events: none;
        transition: transform 1.8s var(--ease-house);
    }

    .home-intro-image:hover::after {
        transform: scale(1.012);
    }

    .home-intro-image img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: var(--photo-grade);
    }

    .home-intro-image > span {
        position: absolute;
        right: calc(100% + 16px);
        bottom: 0;
        z-index: 3;
        color: var(--white-soft);
        font-family: var(--font-sans);
        font-size: .56rem;
        letter-spacing: .24em;
        line-height: 1.5;
        text-transform: uppercase;
        white-space: nowrap;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

/* The concierge's heading is not set here. A declaration-for-declaration copy of the shared rule in
   product-sections.css — same margin, face, size, weight, tracking, leading and colour — loads later and
   quietly wins, so the home page holds its own measure under that title while every other page follows the
   shared one. That is the drift a duplicate exists to cause. */

/* #endregion */

/* No Cases region: seven alternating image/text blocks and thirty-two sense bullets are what the place
   selector and the evening story (below, "Places") do instead. */

/* #region Ecosystem & products */
.home-editorial .core-interface {
    border-top: none;
}

/* The sense — Dotyk, Słuch — introduces the product above its name. */
.home-anatomy-sense {
    margin-bottom: 1.2rem;
}

.home-product-motto {
    margin-bottom: 2.4vh;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 2.1rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.25;
}

/* No .home-product-role and no span for it: the motto carries that thought, and saying it twice is what
   makes the panel feel padded. */

.home-product-description {
    max-width: 520px;
    color: var(--white-soft);
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.8;
}

/* A block box of its own width, not an inline one: as an inline-flex the top margin is measured into the
   line box and the link sits on the description. The width keeps the rule under the words instead of
   across the whole column. */

.home-product-link {
    display: flex;
    width: fit-content;
    align-items: center;
    margin-top: clamp(1rem, 2vh, 1.4rem);
    padding-bottom: .8rem;
    font-family: var(--font-sans);
    font-size: clamp(.65rem, .8vw, .78rem);
    font-weight: 300;
    letter-spacing: .22em;
    text-decoration: none;
    text-transform: uppercase;
}

    /* The arrow belongs to the word, not beside it: at 14px it read as a separate mark, so this page
       keeps eight. It is the arrow's own margin rather than the row's gap — a gap would land on
       both sides of a <sup class="tm"> as well, which is a flex item like any other. See the note
       on .home-product-link in product-sections.css. */
    .home-product-link > span:last-child {
        margin-left: 8px;
    }

/* #endregion */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Between the full layout and the 1100px collapse the hero scene shrinks below ~330px,
   where two full-size product nodes physically overlap — smaller nodes keep them apart. */
@media (max-width: 1200px) {
    .home-hero-node {
        width: clamp(3.6rem, 6.5vw, 4.7rem);
    }
}

@media (max-width: 1100px) {
    .hero-cinematic--home {
        min-height: auto;
    }

    /* The stacked hero has room again. */
    .home-hero-node {
        width: clamp(4.7rem, 5.5vw, 5.5rem);
    }

        .hero-cinematic--home .container.hero-content {
            grid-template-columns: 1fr;
            gap: 7vh;
            padding: max(17vh, calc(var(--site-header-h, 72px) + 2rem)) 0 15vh;
        }

        .hero-cinematic--home .hero-copy {
            max-width: 760px;
        }

    .home-hero-square {
        /* The base rule pins the figure to column 2; without this reset the collapsed
           single-column grid grows an implicit second track and squeezes the hero copy. */
        grid-column: auto;
        width: min(100%, 620px);
        max-width: none;
        max-height: none;
        justify-self: end;
    }
}

@media (max-width: 900px) {
    /* The vertical caption sits left of the image; on phones the image starts at the screen edge, so left
       of it is off-screen and the caption is clipped away. */
    .home-intro-image > span {
        position: static;
        display: block;
        margin-top: .75rem;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .home-intro-image {
        width: min(100%, 620px);
    }
}

@media (max-width: 650px) {
    .hero-cinematic--home .container.hero-content {
        gap: 7vh;
        padding: max(17vh, calc(var(--site-header-h, 72px) + 2rem)) 0 15vh;
    }

    .hero-cinematic--home .h-tag {
        margin-bottom: max(.75rem, 2vh);
    }

    .hero-cinematic--home .h-title {
        max-width: none;
        margin-bottom: 3vh;
    }

    .hero-cinematic--home .h-desc {
        max-width: 520px;
        font-size: 1rem;
    }

    .home-concierge-heading h2 {
        font-size: clamp(2.2rem, 12vw, 4rem);
        overflow-wrap: break-word;
    }

    .home-product-description {
        font-size: 1rem;
        line-height: 1.75;
    }

    .home-product-link {
        margin-top: clamp(2rem, 4vh, 3rem);
    }

    /* The ladder keeps its own, tighter distance on the phone too — the scoped rule below outranks
       this one whatever the order, so it has to be restated here or the panel would lose the extra
       air the single column otherwise gets. */
    .home-anatomy-copy .home-product-link {
        margin-top: clamp(1.2rem, 2.4vh, 1.8rem);
    }

}

@media (prefers-reduced-motion: reduce) {
    .hero-cinematic--home .hero-copy,
    .home-hero-square {
        opacity: 1;
        transform: none;
        clip-path: none;
        animation: none;
    }

    .home-intro-image img,
    .home-intro-image::after,
    .home-anatomy-image img {
        transition: none;
    }

    .home-intro-image:hover img,
    .home-intro-image:hover::after {
        transform: none;
    }

    .home-concierge .voice-line,
    .home-concierge .whispers-box,
    .home-concierge .whisper-label {
        transition: none;
    }
}

/* #endregion */

/* The Manifest aside lived here — the third repetition of the five senses on one page. The
   anatomy scene carries the thought now, and the manifest link moved into its heading. */

/* #region Hero nodes — full product names and the phone layout */
/* The circles carry the full product name ("Odoardo Soul™"), not the bare enum, so they need room
   for two lines. Letter-spacing gives way before the type size does, which is what keeps the
   label readable. */
.home-hero-node {
    width: clamp(5.4rem, 6.6vw, 6.6rem);
    padding: .5rem;
    font-size: clamp(.58rem, .68vw, .66rem);
    letter-spacing: .06em;
    line-height: 1.3;
}

    .home-hero-node small {
        font-size: .56rem;
        letter-spacing: .08em;
    }

@media (max-width: 1200px) {
    /* Between the full layout and the 1100px collapse the scene is at its narrowest,
       so the nodes give back what they can without losing the name. */
    .home-hero-node {
        width: clamp(4.4rem, 7vw, 5.4rem);
        font-size: .55rem;
        letter-spacing: .04em;
    }
}

@media (max-width: 1100px) {
    .home-hero-node {
        width: clamp(5.4rem, 6.6vw, 6.6rem);
        font-size: clamp(.58rem, .68vw, .66rem);
        letter-spacing: .06em;
    }
}

/* Under 700px the five circles sit on top of one another and their captions fall below a readable
   size. The scene splits instead: the photograph keeps its square, and the products become a list
   under it with 44px touch targets. */
@media (max-width: 700px) {
    .home-hero-abstract .home-hero-stage {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
        aspect-ratio: auto;
        overflow: visible;
        background-image: none;
        box-shadow: none;
    }

        /* The overlay pseudo-element becomes the photograph itself, so the list can flow below it. */
        .home-hero-abstract .home-hero-stage::before {
            position: static;
            flex: 0 0 100%;
            aspect-ratio: 1;
            margin-bottom: 1.2rem;
            background: var(--home-photo-veil),
                        url('/img/house/products.webp') center / cover no-repeat var(--black);
            box-shadow: 0 34px 90px rgba(5, 5, 5, .42);
        }

    .home-hero-node {
        position: static;
        flex-direction: row;
        gap: .5rem;
        width: auto;
        min-height: 44px;
        aspect-ratio: auto;
        padding: .6rem 1.1rem;
        border-radius: 999px;
        font-size: .72rem;
        letter-spacing: .08em;
    }

        .home-hero-node::before,
        .home-hero-node::after {
            display: none;
        }

        .home-hero-node small {
            font-size: .7rem;
            letter-spacing: .06em;
        }
}

/* #endregion */

/* #region Hero — the page that answers */

/* The constellation: five quiet white points, and gold arrives on the one under the hand. Each label
   introduces itself once, in order, then withdraws — and returns under the visitor's cursor or focus.

   The photograph underneath is oak. The point stays flat — one solid fill, no gradient and no glow —
   and is separated from the wood by a dark hairline drawn immediately around it: the grain is never
   this dark, so the ring reads at any exposure. The slow halo does the rest; movement is what the eye
   finds on a busy surface. */
.home-hero-node {
    width: 1.15rem;
    padding: 0;
    background: var(--white);
    border-color: rgba(5, 5, 5, .72);
    box-shadow: 0 0 0 1px rgba(5, 5, 5, .45);
    transition: background-color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
}

    /* One slow halo per point. Each point exhales in its own turn through --node-index, already set
       on the element, so the constellation never blinks in unison. */
    .home-hero-node::before {
        inset: -.4rem;
        border-color: rgba(245, 245, 245, .38);
        animation: homeHeroNodeHalo 5.4s var(--ease-house) infinite;
        animation-delay: calc(var(--node-index, 0) * 1.08s);
    }

    /* The second ring stops drawing and becomes the touch target instead: the bead itself is 18px,
       far under the 44px a finger needs, and an invisible ring costs nothing. */
    .home-hero-node::after {
        inset: -.85rem;
        border-color: transparent;
        animation: none;
        pointer-events: auto;
    }

@keyframes homeHeroNodeHalo {
    0% {
        opacity: 0;
        transform: scale(.5);
    }

    18% {
        opacity: .8;
    }

    72%, 100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

/* The label is a caption on a plate, so it is set like one: the product name tracked wide in the
   sans, the sense beneath it in the display italic. Two faces doing two jobs — the name identifies,
   the sense describes — instead of one size of the same face twice, which is what made it read as a
   browser tooltip rather than as part of the house. */
.home-hero-node-label {
    position: absolute;
    top: calc(100% + .6rem);
    left: 50%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    align-items: center;
    padding: .6rem 1rem;
    /* Stated here rather than inherited from the bead, whose font-size changes at the two breakpoints
       where it is resized. */
    font-size: .78rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .2em;
    --tm-tracking: .2em;
    border: 1px solid var(--hairline-mid);
    background: rgba(5, 5, 5, .92);
    white-space: nowrap;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity var(--motion-quick) var(--ease-house), border-color var(--motion) var(--ease-house);
    animation: homeNodeLabelIntro 3.4s ease calc(1.5s + var(--node-index, 0) * .6s);
    pointer-events: none;
}

    /* The sense — „Dotyk", „Słuch" — in the display italic: it is a description, not a label, and it
       needs neither the tracking nor the capitals the name above it carries. */
    .home-hero-node-label small {
        font-family: var(--font-display);
        /* A touch above the name, because the display face sets smaller at the same size — the pair
           keeps the proportion it had once the name came down to the tooltip size. */
        font-size: .88rem;
        font-style: italic;
        font-weight: 300;
        text-transform: none;
        letter-spacing: .01em;
        color: var(--gold);
    }

/* The lower points speak upwards, or the stage's edge would cut their word off. */
.home-hero-node--soul .home-hero-node-label,
.home-hero-node--space .home-hero-node-label {
    top: auto;
    bottom: calc(100% + .6rem);
}

.home-hero-node:hover .home-hero-node-label,
.home-hero-node:focus-visible .home-hero-node-label {
    opacity: 1;
}

@keyframes homeNodeLabelIntro {
    0% {
        opacity: 0;
    }

    18%, 76% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Under the cursor the bead takes the gold and keeps its size: the colour is the whole answer, and a
   point that grows reads as a button jumping. The plate's hairline warms with it. */
.home-hero-node:hover,
.home-hero-node:focus-visible {
    background: var(--gold);
    border-color: rgba(5, 5, 5, .72);
    box-shadow: 0 0 0 1px rgba(5, 5, 5, .45);
}

    .home-hero-node:hover .home-hero-node-label,
    .home-hero-node:focus-visible .home-hero-node-label {
        border-color: var(--gold-hover);
    }

@media (prefers-reduced-motion: reduce) {
    /* No halo, so the dark hairline and the highlight carry the point on their own. */
    .home-hero-node::before {
        animation: none;
        opacity: .55;
    }

    .home-hero-node-label {
        animation: none;
        opacity: .92;
    }
}

/* #endregion */

/* #region Anatomy of the senses */

/* One living space, five capabilities — running down the page along a single rule, alternating
   side to side. This section deliberately does not opt into the scroll-scene engine in site.js: a
   pinned stage gives each sense one screen inside a narrow column, and comparing two of them then
   means scrubbing the scroll back and forth. */
/* One rhythm for every section on the site: --section-space above and below, so the space on the two
   sides of a dividing rule is the same wherever a rule is drawn. A padding-top of its own with no
   padding-bottom is why the gap above the line under the ladder and the gap below it stop matching. */
.home-anatomy {
    padding: var(--section-space) 0;
}

/* The heading stands above the senses rather than beside them. As a left-hand column it took a
   third of the width and left the five panels squeezed into what remained — the very thing that
   made this section feel cramped. */
.home-anatomy-stage {
    display: block;
}

.home-anatomy-heading {
    max-width: 62ch;
    margin-bottom: clamp(4.5rem, 10vh, 8rem);
}


.home-anatomy-heading h2 {
    max-width: 12ch;
    font-family: var(--font-display);
    font-size: var(--section-title-size);
    font-weight: 300;
    line-height: 1.12;
}

.home-anatomy-heading > p {
    max-width: 44ch;
    margin-top: var(--section-lead-gap);
    color: var(--white-soft);
    font-weight: 300;
    line-height: 1.75;
}

.home-anatomy-manifest {
    margin-top: 2.4rem;
}

/* The vertical rule the senses hang from — one line down the middle of the column, with each panel
   crossing it. It is drawn on the list rather than on each panel so it runs unbroken from the first
   sense to the last. */
/* The rungs are spaced by the list's own gap now, not by padding inside each panel. As padding it
   was paid twice between neighbours and once again at both ends, which is what pushed the first
   image far below the heading and left the last one stranded above the rule. */
/* The ladder — the grid, the rule down the middle, the alternating columns, the mark on the line and
   the passe-partout around each picture — is defined once in product-sections.css, which this page
   loads after this file. The industry pages draw the same ladder from the same rules — written out
   here and again in segment.css, the two drift into different sets of proportions. What stays here is
   only what belongs to this page's pictures. */
.home-anatomy-image {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
}

    .home-anatomy-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: var(--photo-grade);
    }

    /* The veil sits on the frame, not on the picture, so it stays put while the photograph breathes
       under it on hover — a darkening that zoomed with the image would read as a second movement. */
    .home-anatomy-image::after {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--home-photo-veil);
        content: '';
        pointer-events: none;
    }

    /* The photograph's slow approach under the hand is site.css's, shared with every framed picture. */

.home-anatomy-copy {
    max-width: 46ch;
}

/* The product's name is the headline of its panel, so it is set at section-heading weight rather
   than as a card title — five names descending the ladder are what the eye should catch first. */
.home-anatomy-copy h3 {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 3.8vw, 3.6rem);
    font-weight: 300;
    line-height: 1.08;
}

/* Tighter above the link than the shared base allows: the description is set at line-height 1.8, so
   its half-leading already opens a gap under the last line and the base margin was landing on top of
   it. Scoped to the ladder — the Filmable strip and the Places cards set their own distance. */
.home-anatomy-copy .home-product-link {
    margin-top: clamp(.6rem, 1.2vh, .9rem);
}

/* No pinned scroll scene here, and no data-scene hook in the markup — the senses run down the page,
   so there is nothing to pin. */

/* The single column, the hidden rule and its marks are handled for both ends of the site in
   product-sections.css, at this same 900px. Only the gap between a picture and its words is this
   page's own. */
@media (max-width: 900px) {
    .home-anatomy-panel {
        gap: 1.6rem;
    }
}

/* #endregion */

/* #region Places — choose your world */

/* The same rhythm as every other section: the rule this section draws at its top now has an equal
   measure of space on both sides of it. */
.home-places {
    position: relative;
    padding: var(--section-space) 0;
}

    /* A full-bleed rule above the section. The section itself is held to the content width, so the
       line is drawn by a pseudo-element stretched to the viewport — a border on the container would
       stop short of both edges, which is the "short rule" problem the book strip had. */
    .home-places::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 1px;
        margin-left: -50vw;
        background: var(--section-divider);
        content: '';
        pointer-events: none;
    }

.home-places-heading {
    max-width: 640px;
    margin-bottom: var(--section-head-gap);
}

    .home-places-heading h2 {
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        line-height: 1.12;
    }

    .home-places-heading > p {
        margin-top: var(--section-lead-gap);
        color: var(--white-soft);
        font-weight: 300;
        line-height: 1.75;
    }

/* The stack. Every card sticks at the same offset, so as the page scrolls each one comes to rest
   and the next slides over it — the worlds pile up instead of hiding behind a row of tabs almost
   nobody clicked. Pure CSS: no script decides what is shown, and where sticky is unsupported the
   cards simply stand one under another, which is a perfectly good fallback. */
.home-places-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3vh, 2.2rem);
}

.home-places-card {
    position: sticky;
    /* Each card rests a few pixels lower than the one before it, so the edges of those underneath
       stay visible — the pile reads as a pile rather than as one replaced panel. */
    top: calc(clamp(4.5rem, 12vh, 8rem) + var(--card-index, 0) * 10px);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2.4rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    border: 1px solid var(--line);
    /* Opaque on purpose: a translucent card would let the one beneath show through as it slides. */
    background: var(--black-soft);
}

/* The place's name is the headline of its card, at the scale the product names carry in the ladder
   above. As a .68rem uppercase micro-label it takes the typography of a form field, and eight worlds a
   visitor is meant to recognise themselves in read as eight small captions. */
.home-places-name {
    margin-bottom: .7rem;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 3.8vw, 3.6rem);
    font-weight: 300;
    line-height: 1.08;
}

/* The motto is the ladder's own, so the two sections speak in one voice — only the spacing differs,
   because a card is tighter than a panel. */
.home-places-motto {
    margin-bottom: 1.6rem;
}

/* Three separate observations, so they are set as three entries rather than as one grey block of
   prose — that run-together paragraph is what made this section read badly. */
.home-places-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .home-places-lines li {
        max-width: 52ch;
        padding: .75rem 0;
        border-top: 1px solid var(--hairline);
        color: var(--white-soft);
        font-weight: 300;
        line-height: 1.75;
    }

        /* One step up from the line's own 300, not the browser's 700: at that weight a bolded phrase
           stops reading as emphasis in a face set this light and starts reading as a different type.
           The full white does as much of the work as the weight. */
        .home-places-lines li b {
            color: var(--white);
            font-weight: 500;
        }

.home-places-visual {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

    .home-places-visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: var(--photo-grade);
    }

    .home-places-visual::after {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--home-photo-veil);
        content: '';
        pointer-events: none;
    }

.home-places-copy .home-product-link {
    margin-top: 1.9rem;
}

/* Same bargain as button.home-product-link: zero the sides the browser draws and clear only the
   background colour. The line under the words is .home-product-link's background layers, so the
   `background` shorthand here would wipe them and leave this one button without its rule. */
.home-places-ask {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background-color: transparent;
    cursor: pointer;
}

/* One evening, five senses — the proof that this is a single experience. */
/* A section in its own right, on the house pattern: one measure above its rule and one below, the
   same as every other divider on the site — not a block appended to the worlds above it with a
   heading a size below the sections around it. */
.home-evening {
    position: relative;
    padding: var(--section-space) 0;
}

    /* Edge to edge. The section is held to the content width, so a border on it stopped short of
       both sides and read as an underline under the column rather than as the seam between two
       sections — the same reason .home-places draws its rule this way. */
    .home-evening::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 1px;
        margin-left: -50vw;
        background: var(--section-divider);
        content: '';
        pointer-events: none;
    }

/* The same setting as every other section title — the concierge's heading below it carries exactly these
   values. Give this one its own line-height and no letter-spacing and two headings at the same size sit on
   visibly different rhythms. */
.home-evening-heading h2 {
    /* The break is in the copy, so the measure only has to be wide enough for the longer of the two
       lines — at 14ch "nawet gdy śpisz" breaks a second time. */
    max-width: 18ch;
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--section-title-size);
    font-weight: 300;
    letter-spacing: -.035em;
    line-height: var(--section-title-line-height);
}

    /* Gold on the emphasised line, like every other section heading on the site. */
    .home-evening-heading h2 i {
        color: var(--gold);
        font-weight: 300;
    }

.home-evening-heading > p {
    max-width: 52ch;
    margin-top: var(--section-lead-gap);
    color: var(--white-soft);
    font-weight: 300;
    line-height: 1.75;
}

/* One evening, told by a clock. The dial runs the night on its own and the moment beside it changes
   with the hour — no controls, because the face already says where in the evening we are.
   Left, like everything else on the page. Centred, this one section broke the axis every other
   heading, paragraph and rule on the home page is hung from.

   The gap above is wider than a section's usual one: the dial is a drawing, and set too close under
   the lead it read as an illustration belonging to that sentence rather than as the section's own
   instrument. */
.evening-type {
    margin: clamp(3.6rem, 7vh, 5.5rem) 0 0;
    text-align: left;
}

.evening-type-clockline {
    margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
}

/* The dial belongs to the played version. Without the script each moment prints its own hour in the
   list instead and no clock is drawn. */
.evening-type-clock {
    display: none;
}

/* The dial stands beside the sentence, not above it: side by side the hour is plainly the frame and
   the moment is the subject, which is the reading the section wants. Only the played version is laid
   out this way — without the script the blocks stack as they always did. */
.evening-type.is-live {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.evening-type.is-live .evening-type-clockline {
    margin-bottom: 0;
}

.evening-type.is-live .evening-type-clock {
    display: block;
    width: clamp(7.5rem, 14vw, 12rem);
    height: auto;
    transition: opacity .7s ease;
}

/* One pixel everywhere. The face is drawn at 200 units and shown at a fraction of that, so a plain
   stroke-width would thin out with the box; non-scaling-stroke is what keeps it a hairline at any
   size — and a hairline is the whole point of drawing the hour rather than setting it. */
.evening-clock-face,
.evening-clock-tick,
.evening-clock-hand {
    fill: none;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.evening-clock-face,
.evening-clock-tick {
    stroke: var(--hairline-strong);
}

/* The hands carry the only weight in the drawing — they are what moves, so they are what the eye
   should find. Everything behind them stays a whisper, and the pin is the dial's one point of gold. */
.evening-clock-hand {
    stroke: rgba(245, 245, 245, .7);
    stroke-linecap: round;
    transform-origin: 100px 100px;
}

    .evening-clock-hand--hour {
        stroke: rgba(245, 245, 245, .85);
    }

.evening-clock-pin {
    fill: var(--gold);
    stroke: none;
}

/* Faded while it races between two hours, back up while it is standing at one. Added by the script,
   so with no JavaScript there is no clock to fade in the first place. */
.evening-type.is-live .evening-type-clock.is-running {
    opacity: .4;
}

.evening-type-moments {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One moment at a time — the history is carried by the lit marks on the rail, not by a second
   column of text. Stacked in one cell so the block never changes height. */
/* The floor is the tallest of the five sentences plus its link, so the rail below never shifts as
   one hour replaces another. */
.evening-type.is-live .evening-type-moments {
    display: grid;
    min-height: 12rem;
}

    .evening-type.is-live .evening-type-moment {
        grid-area: 1 / 1;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
    }

    /* The fade is armed one frame after the first render, never on it. Without the script all five
       moments stand visible — that is the readable version of this section — so the moment `is-live`
       arrives they are all at full opacity, and a transition declared here made the four that are
       not current animate from 1 to 0 in front of the reader on every page load. Hiding them is a
       state, not a movement; only the changes after it are worth animating. */
    .evening-type.is-live.is-armed .evening-type-moment {
        transition: opacity var(--motion-quick) var(--ease-house), transform var(--motion-quick) var(--ease-house);
    }

    .evening-type.is-live .evening-type-moment.is-current {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .evening-type.is-live .evening-type-hour {
        display: none;
    }

.evening-type-line {
    max-width: 32ch;
    margin: 0;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.9rem);
    font-weight: 300;
    line-height: 1.38;
    text-wrap: pretty;
}

/* The house's own link, carried by .home-product-link in the markup — the rule, the type and
   the travelling arrow all come from there. Given its own smaller face with no rule under it, the one
   call to action inside this section looks unlike every other on the page.

   What stays here is only what is true of this link alone: the name carries a ™ inside itself. */
/* The tracking this link's mark needs is not declared here. .home-product-link declares it for itself
   in site.css, the class that sets the tracking in the first place and therefore the only place that
   cannot fall out of step with it; this link wears that class and inherits the value. */

    /* Its own, tighter distance from the sentence — the ladder of five senses does the same thing
       for the same reason. .home-product-link is declared twice and product-sections.css, loaded
       after this file, wins with a gap of up to 4.5rem: right under a product card's paragraph,
       far too much under one short line inside a moment. Written the way that rule writes it — the
       12px stays as padding so the link keeps its larger click target, and the margin gives it back
       — so this value is the whole distance, not the distance plus a padding somebody has to
       remember. Two classes, or the single-class rule in the later file would outrank it. */
    .evening-type-sense.home-product-link {
        margin-top: calc(clamp(1.7rem, 3.4vh, 2.6rem) - 12px);
    }

    /* Only the arrow travels. The shared hover moves every span inside the link, which here would
       take the ™ away from the word it marks. */
    .evening-type-sense:hover .evening-type-sense-name,
    .evening-type-sense:focus-visible .evening-type-sense-name {
        transform: none;
    }

/* Without the script the five moments simply stand one under another, each with its own hour. */
.evening-type:not(.is-live) .evening-type-moment {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: baseline;
    padding: clamp(1.2rem, 2.4vh, 1.8rem) 0;
    border-top: 1px solid var(--hairline);
}

    .evening-type:not(.is-live) .evening-type-moment:first-child {
        border-top: 0;
    }

.evening-type:not(.is-live) .evening-type-line {
    max-width: none;
}

.evening-type-hour {
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-sans);
    font-size: .68rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .18em;
    line-height: 1.9;
    text-transform: uppercase;
}

.evening-type-body {
    min-width: 0;
}

@media (max-width: 760px) {
    /* The dial goes back above the sentence. Two columns at a phone's width leave the moment too
       narrow to read, and the sentence is the part that has to be read. */
    .evening-type.is-live {
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(1.2rem, 3vh, 2rem);
    }

    .evening-type.is-live .evening-type-clock {
        width: clamp(5.5rem, 24vw, 8rem);
    }

    .evening-type:not(.is-live) .evening-type-moment {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .evening-type-hour {
        line-height: 1.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .evening-type.is-live.is-armed .evening-type-moment {
        transition: none;
    }
}

/* A touch tablet has no hover, so after the intro the five senses would stand as unnamed dots. */
@media (hover: none) and (min-width: 701px) {
    /* Always shown, the five labels at hover size ran into each other on a 515–620px stage: they are
       set a step smaller, and the two lower pairs open upward so no two share a band. */
    .home-hero-node-label {
        opacity: 1;
        animation: none;
        padding: .45rem .75rem;
        font-size: .7rem;
        letter-spacing: .14em;
        --tm-tracking: .14em;
    }

    .home-hero-node--alibi .home-hero-node-label,
    .home-hero-node--lens .home-hero-node-label {
        top: auto;
        bottom: calc(100% + .6rem);
    }
}

/* A card sticks under the header only where the whole card fits the screen below it; on a short
   screen the next card covered its link before it came into view. */
@media (max-height: 640px) {
    .home-places-card {
        position: static;
    }
}
@media (max-width: 760px) {
    /* One column: the live version stacks every moment in the first cell, so a second column only
       halves the width the sentence is set in. */
    .evening-type-moments {
        grid-template-columns: minmax(0, 1fr);
    }

    .evening-type.is-live .evening-type-moment.is-current,
    .evening-type:not(.is-live) .evening-type-moment {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .evening-type-hour {
        line-height: 1.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .evening-type.is-live .evening-type-moment.is-current {
        animation: none;
    }
}
@media (max-width: 760px) {
    .home-places-card {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        /* A phone screen holds barely one card, so stacking them would hide the copy behind the
           next one before it could be read. They simply flow. */
        position: static;
    }

}

/* The constellation region above shares the .home-hero-node specificity with the ≤700px
   block earlier in the file and was winning on source order — which flattened the phone
   layout back into 16px dots with every name hidden behind a hover no phone has.
   Restated here, at the end of the cascade: the node stays static (so the constellation
   offsets never bite), keeps its dark pill, and the label sits inline, always visible. */
@media (max-width: 700px) {
    .home-hero-node {
        position: static;
        width: auto;
        padding: .6rem 1.1rem;
        border-color: var(--hairline-strong);
        background: rgba(5, 5, 5, .88);
    }

    .home-hero-node-label {
        position: static;
        flex-direction: row;
        align-items: baseline;
        gap: .4rem;
        padding: 0;
        border: 0;
        background: none;
        transform: none;
        opacity: 1;
        animation: none;
    }

    /* The pill keeps its dark face under a finger or a keyboard, where the desktop bead's gold fill
       would bury the name; only its hairline takes the gold. */
    .home-hero-node:hover,
    .home-hero-node:focus-visible {
        border-color: var(--gold);
        background: rgba(5, 5, 5, .88);
        box-shadow: none;
    }
}

/* #endregion */