/* #region Hero */
/* Everything structural — the full-screen height, the two columns, the lattice, the axis and the
   spacing from eyebrow to headline — comes from .hero-cinematic--exhibit, the hero every product
   page wears. Only two things are this page's own: the column split, because a domain name needs
   more room than a product's two-word title, and the headline, because it is a literal string that
   must be allowed to wrap rather than be clipped at eight characters. */
/* Only while the hero is still two columns. Below 1100px the shared rules collapse it to one, and
   an override written flat here would win on source order and undo that. */
@media (min-width: 1101px) {
    .sd-hero .hero-content {
        grid-template-columns: minmax(0, 620px) 1fr;
    }
}

/* The column is the container the name is measured against, so the fit is exact at every width
   instead of being guessed from the viewport. */
.sd-hero .hero-copy {
    container-type: inline-size;
}

/* An address is a single token: „ortodonta.cv" broken after the dot leaves „cv" alone on a line and
   reads as two things. It never breaks; the type steps down instead.

   The size here is the maximum, not the size a long name gets. It is the hero's own size, which is
   what a short name keeps — ceo.ug and resort.sc are set exactly as every other hero on the site.
   Fitting a longer name to the column is a measurement, made in the browser by the script beside
   the heading in Domain.cshtml: it reads this value as its starting point, measures the line and
   scales down. Do not put a size estimate back into this rule — a character count or a width
   computed from the font file competes with that measurement and wins wherever the measurement does
   not land, which puts a long name over the column's edge or shrinks it absurdly inside it. With no
   script a long name overflows, which is the honest trade: the fit is a measurement and cannot be
   faked in a stylesheet.

   The selector needs two classes. `.hero-cinematic--exhibit .h-title` in product.css holds the
   shared exhibit hero's title to `max-width: 8ch`, which a product page's two-word title wants;
   that is (0,2,0), so a single `.sd-hero-title` loses to it and leaves this heading eight characters
   wide whatever size it is given. The box has to be right before the fit can be, because the script
   measures the box. This file also loads after product.css. */
.sd-hero .sd-hero-title {
    max-width: none;
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
    font-size: var(--hero-title-size);
}

    .sd-hero-title i {
        font-style: normal;
        font-weight: 200;
        color: var(--gold);
    }
/* #endregion */

/* #region Card */
/* The card takes the column the product photograph takes on every other product page, and is held
   to a readable width inside it rather than stretching across the whole right half. It also arrives
   the way that photograph arrives — half a hero moving is what reads as unfinished. */
.sd-card {
    position: relative;
    z-index: 2;
    animation: heroExhibitEnter 1.25s .2s var(--ease-house) both;
    width: min(100%, 480px);
    margin-inline: auto;
    min-width: 0;
    padding: clamp(1.75rem, 2.5vw, 2.5rem);
    border: 1px solid var(--hairline-mid);
    background: linear-gradient(160deg, var(--tint), transparent 42%), var(--surface-raised);
}

    /* The card is the page's one instrument: a short gold rule across its head is its one accent,
       without a second border or a heavier fill. */
    .sd-card::before {
        position: absolute;
        top: -1px;
        left: -1px;
        width: clamp(3rem, 6vw, 4.5rem);
        height: 1px;
        background: var(--gold);
        content: "";
    }

@media (prefers-reduced-motion: reduce) {
    .sd-card {
        animation: none;
    }
}

.sd-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.05rem 0;
    border-top: 1px solid var(--line);
}

    .sd-card-row:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .sd-card-row span {
        color: var(--white-ghost);
        font-family: var(--font);
        font-size: .62rem;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    .sd-card-row strong {
        color: var(--white);
        font-family: var(--font);
        font-size: 1rem;
        font-weight: 400;
        text-align: right;
    }

        .sd-card-row strong.is-free {
            color: var(--white);
        }

        .sd-card-row strong.is-taken {
            color: var(--white-faint);
        }

.sd-card-price {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: clamp(1.4rem, 2vw, 1.9rem) 0 clamp(1.1rem, 1.6vw, 1.5rem);
    margin-top: .4rem;
    border-top: 1px solid var(--hairline-mid);
}

.sd-card-price-label {
    color: var(--white-ghost);
    font-family: var(--font);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sd-card-price-value {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3vw, 2.9rem);
    font-weight: 300;
    line-height: 1;
}

    .sd-card-price-value small {
        color: rgba(245, 245, 245, .5);
        font-family: var(--font);
        font-size: .62rem;
        font-weight: 400;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

.sd-card-price.is-taken .sd-card-price-value {
    font-size: clamp(1.4rem, 1.9vw, 1.75rem);
    color: var(--white-faint);
}

.sd-card-price-note {
    color: var(--text-muted);
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 300;
    line-height: 1.7;
}

/* The family catalogue, reached from the value it names. */
.sd-card-link {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    color: var(--white);
    text-decoration: none;
    transition: color var(--motion-quick) var(--ease-house);
}

    .sd-card-link span {
        transition: transform var(--motion-quick) var(--ease-house);
    }

    .sd-card-link:hover,
    .sd-card-link:focus-visible {
        color: var(--gold);
    }

        .sd-card-link:hover span,
        .sd-card-link:focus-visible span {
            transform: translateX(4px);
        }

/* The house button, the same one that stands under every price on the site — full width here,
   because in a card it is the card's one action. */
.sd-card-cta {
    width: 100%;
    margin-top: 0;
}
/* #endregion */

/* #region Content variants */
.sd-essay {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 6vw, 6rem);
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    border-top: 1px solid var(--hairline-mid);
}

/* HEADINGS, not labels. These two stood as gold mono eyebrows at .62rem — the same treatment the
   section's own eyebrow takes — so the page had three things in a row claiming to be the label of
   something, and the two blocks under them read as one undifferentiated body of text. Set in the
   display face at the size of a card title they do what the reader needs them to do: divide the
   essay in two and say which half is which.

   They also join the house's heading system rather than keeping a private look: the emphasis is the
   display italic in champagne gold, written into the copy, exactly as every other heading on the
   site carries it. That is the whole typographic gesture — there is no new one to invent. */
.sd-essay-block h3 {
    margin: 0 0 1.6rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 300;
    letter-spacing: -.025em;
    line-height: 1.15;
    text-transform: none;
}

/* One paragraph per sentence — see the note in the view. The space between them is what turns four
   claims about a name into four claims rather than one block; the last one takes none, so the two
   columns still end on the same rule. */
/* FOUR CLAIMS, SET AS FOUR. An address's profile answers „why this name" with several independent
   sentences — what the root means, what the extension says about the market, how the spelling
   behaves on the telephone — and run together as prose they read as one undivided wall. As a list
   each one is a claim a reader can weigh or skip.

   The marker is the house's, not a new one: the 14px gold hairline .cfg-included-list draws, at the
   same distance. There is one list idiom on this site and this is it. */
.sd-essay-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* Tight between items. Set at a paragraph's distance they read as four paragraphs that happen to
       carry dashes; closer together they read as one list, which is the whole reason for making them
       one. The marker does the separating, so the space does not have to. */
    .sd-essay-list li {
        position: relative;
        margin-bottom: .6rem;
        padding-left: 1.6rem;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: clamp(1rem, 1.05vw, 1.05rem);
        font-weight: 300;
        line-height: 1.75;
    }

        .sd-essay-list li:last-child {
            margin-bottom: 0;
        }

        .sd-essay-list li::before {
            content: "";
            position: absolute;
            top: .85em;
            left: 0;
            width: 14px;
            height: 1px;
            background: var(--gold);
        }

/* The site's ordinary reading size, taken from .explore-intro declaration for declaration — the
   paragraph that opens a section, which is the plainest copy the house sets. It ran a step larger
   and a shade brighter than that, and beside two big headings a body that is also slightly enlarged
   is what made this section look loud. The size a whole page is set in is the right size here.
   A block that answers in one sentence keeps this shape; only several sentences become a list. */
.sd-essay-block p {
    margin: 0 0 1.1rem;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: clamp(1rem, 1.05vw, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
}

    .sd-essay-block p:last-child {
        margin-bottom: 0;
    }

/* No enlarged opening sentence. Setting the first one at the size of a section's lead — on the theory that a
   column of equal paragraphs has no point of entry — is wrong twice over: the type comes out huge beside a
   body of 1.05rem, and it makes a heading out of a sentence that is simply the first of four. What this
   section wants is air between the claims, not a hierarchy among them. */
/* #endregion */

/* #region Name, measured */
/* The headline above these facts is seeded per address, so its length is whatever the name needed —
   „Funkcja prowadzenia obrad" beside „Na czele organizacji, pod własnym nazwiskiem". Left to the
   default it wraps wherever the column runs out, which drops a single short word onto the second
   line. Balanced, every one of the six hundred addresses splits into even lines without anybody
   hand-tuning a seed. Scoped here rather than in product.css, which every product page shares. */
/* A MEASURE, not just balancing. This heading is the one on the page nobody writes for the page:
   it comes from the address's own profile, so it runs from three words to ten and the stylesheet
   cannot be told where to break it with a <br /> the way every authored heading on the site is.

   Left to the container it stretched across almost the whole screen on one line, which is not how a
   display heading is set anywhere else here. A measure in em — so it scales with the heading's own
   clamp rather than with the viewport — puts anything past roughly two dozen characters onto a
   second line, leaves a short headline on one, and `balance` then makes those two lines even
   instead of leaving one word alone on the second. */
.sd-essence-title {
    max-width: 11em;
    text-wrap: balance;
}

/* Facts about the name that nobody has to take on trust, because they are the name counted. */
.sd-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

/* Label at the top of the cell, its value directly under it: the labels then read across the row as one
   line and each value follows its own at half a step. Neither alternative works — `space-between` pushes
   the pair apart to the cell's full height, so the tallest cell decides how far a label stands from the
   number it names, and `flex-end` keeps them together but sends both to the floor, where the labels no
   longer begin on one line. */
.sd-metric {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .5rem;
    padding: clamp(1.4rem, 2.2vw, 2rem);
    background: var(--surface-card);
}

    .sd-metric span {
        color: var(--white-ghost);
        font-family: var(--font);
        font-size: .58rem;
        letter-spacing: .2em;
        text-transform: uppercase;
    }

    /* The labels begin on one line at the top; the values sit on one line in the middle. The value
       takes the whole of what is left of the cell and centres itself in it, so seventeen, twenty-one,
       „.com" and a sentence all fall at the same height however tall the row grows — and none of them
       depends on how tall its neighbour's content happens to be.
       Neither alternative works: pushed to the foot, „.com" ends a hand's breadth from the word naming it;
       left at the top, the two single-line cells float above a void their neighbours have opened. */
    .sd-metric strong {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.6vw, 1.45rem);
        font-weight: 300;
        line-height: 1.2;
    }

        /* The figure, and it is the only thing in this row worth seeing from across it. Display face
           at the size of a small heading — the count is the fact, and a fact set at the size of its
           own caption is a fact nobody reads. */
        .sd-metric strong b {
            display: block;
            font-weight: 300;
            font-size: clamp(2.1rem, 3.2vw, 3rem);
            letter-spacing: -.02em;
            line-height: 1;
        }

        /* „znaków" — what is being counted, at the weight of the label above rather than of the number
           beside it. Not italic: <i> is simply the element this row has free, and this is the one place in
           the house where it carries no slant. */
        .sd-metric strong i {
            display: block;
            margin-top: .5rem;
            color: var(--white-ghost);
            font-family: var(--font);
            font-size: .58rem;
            font-style: normal;
            letter-spacing: .2em;
            text-transform: uppercase;
        }

    /* The cell that answers with a sentence instead of a figure needs no rule of its own: it simply
       carries no <b>, so it stays at reading size while the others take the display face. Set to
       match the figures it wrapped onto three lines and pulled the row apart. */

    /* The extension, in gold. Every other figure in this row is a measurement OF the name — how many
       characters, how it is spelled — while this one is a piece of the name itself, and gold is how
       the house marks what it is offering rather than what it is counting. */
    .sd-metric-tld strong b {
        color: var(--gold);
    }
/* #endregion */

/* #region The address in use */
/* Three places a buyer actually meets the name, drawn from the name itself — nothing here is a
   photograph, so a new address in the portfolio arrives with its own set already made. */
.sd-uses-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.6rem, 3vw, 2.8rem);
}

/* The arrival is staggered off the tile's own index rather than off two hand-written delay classes:
   with six tiles those classes ran out at the third one, and the row would have arrived all at once
   from there on. */
.sd-use {
    margin: 0;
    transition-delay: calc(var(--sd-use-index, 0) * .11s);
}

.sd-use-stage {
    position: relative;
    display: flex;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: clamp(1.6rem, 2.6vw, 2.6rem);
    border: 1px solid var(--hairline);
    background: linear-gradient(150deg, var(--tint), transparent 45%), var(--surface-card);
    transition: border-color var(--motion) var(--ease-house);
}

.sd-use:hover .sd-use-stage {
    border-color: var(--gold-border);
}

/* The address on each artefact is set in white; gold arrives on it under the hand. */
.sd-use-mail li,
.sd-use-card-address,
.sd-use-ad-address,
.sd-use-sign-name,
.sd-use-package-tape {
    transition: color var(--motion) var(--ease-house);
}

.sd-use:hover .sd-use-mail li,
.sd-use:hover .sd-use-card-address,
.sd-use:hover .sd-use-ad-address,
.sd-use:hover .sd-use-sign-name,
.sd-use:hover .sd-use-package-tape {
    color: var(--gold);
}

/* One clock for the whole row: two seconds a tile, six tiles, so the light is in exactly one place
   at a time and comes back round every twelve. The wash says which tile is lit, the rule crossing it
   says the name is being read there. Both are decoration and both sit on pseudo-elements, so nothing
   in the tile's own markup has to know about them. */
.sd-use-stage::before,
.sd-use-stage::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: 0;
    content: "";
    pointer-events: none;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: calc(var(--sd-use-index, 0) * 2s);
}

.sd-use-stage::before {
    background: radial-gradient(120% 85% at 50% 50%, var(--tint-raised), transparent 65%);
    animation-name: sd-use-wash;
}

/* Full height rather than a one-pixel band, so the travel can be written in percentages of the tile
   and the line lands exactly on both edges whatever size the grid gives it. */
.sd-use-stage::after {
    background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--hairline-strong) 50%, transparent calc(50% + 1px));
    animation-name: sd-use-scan;
}

@keyframes sd-use-wash {
    0%, 16%, 100% {
        opacity: 0;
    }

    4%, 12% {
        opacity: 1;
    }
}

@keyframes sd-use-scan {
    0% {
        opacity: 0;
        transform: translateY(-52%);
    }

    3%, 13% {
        opacity: 1;
    }

    16%, 100% {
        opacity: 0;
        transform: translateY(52%);
    }
}

/* A tile whose visitor asked for less movement is simply a tile. */
@media (prefers-reduced-motion: reduce) {
    .sd-use-stage::before,
    .sd-use-stage::after {
        animation: none;
    }

    .sd-use-stage,
    .sd-use-mail li,
    .sd-use-card-address,
    .sd-use-ad-address,
    .sd-use-sign-name,
    .sd-use-package-tape {
        transition: none;
    }
}

.sd-use figcaption {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding-top: 1.3rem;
}

    /* The name of the use, so it is set as a name and not with .h-tag — mono, tracked out and in
       capitals is the eyebrow that stands above a heading, not the heading itself. */
    /* The scale the artist page gives a numbered card with a title and a paragraph — the nearest
       thing in the house to these tiles. It sat a step lower, on the size a small card in the
       artist catalogue takes, and under a large figure a one-word heading at that size read as a
       caption rather than as the name of the case. */
    .sd-use-title {
        margin: 0;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.3rem, 1.9vw, 1.65rem);
        font-weight: 300;
        letter-spacing: -.01em;
        line-height: 1.2;
    }

    .sd-use figcaption p {
        margin: 0;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: .95rem;
        font-weight: 300;
        line-height: 1.75;
    }

/* The mailbox */
.sd-use-mail {
    align-items: center;
}

    .sd-use-mail ul {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sd-use-mail li {
        padding: .95rem 0;
        border-top: 1px solid var(--line);
        color: var(--white-soft);
        font-family: var(--font);
        font-size: clamp(.78rem, .95vw, .95rem);
        font-weight: 300;
        letter-spacing: .01em;
        overflow-wrap: anywhere;
    }

        .sd-use-mail li:first-child {
            padding-top: 0;
            border-top: 0;
        }

        .sd-use-mail li span {
            color: var(--white);
        }

/* The browser */
.sd-use-browser {
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.2rem, 2vw, 1.8rem);
}

.sd-use-browser-bar {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--black-mid);
    color: rgba(245, 245, 245, .5);
}

.sd-use-browser-url {
    color: var(--white);
    font-family: var(--font);
    font-size: clamp(.8rem, 1vw, .98rem);
    font-weight: 300;
    overflow-wrap: anywhere;
}

.sd-use-browser-page {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

    .sd-use-browser-page span {
        display: block;
        height: 1px;
        background: var(--white-subtle);
    }

        .sd-use-browser-page span:nth-child(1) {
            width: 68%;
        }

        .sd-use-browser-page span:nth-child(2) {
            width: 88%;
        }

        .sd-use-browser-page span:nth-child(3) {
            width: 44%;
        }

/* The business card. No name and no role on it, only two rules where they would be: the address is
   the one real thing printed here, and a curated house does not put a fictional owner on a card. */
.sd-use-card {
    align-items: center;
    justify-content: center;
}

.sd-use-card-face {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 90%;
    aspect-ratio: 85 / 55;
    padding: clamp(.9rem, 1.5vw, 1.3rem);
    border: 1px solid var(--hairline);
    background: linear-gradient(140deg, rgba(245, 245, 245, .05), transparent 55%), var(--black-mid);
    box-shadow: 0 18px 40px rgba(5, 5, 5, .55);
}

.sd-use-card-rule {
    display: block;
    width: 58%;
    height: 1px;
    background: var(--white-subtle);
}

.sd-use-card-rule--short {
    width: 34%;
}

.sd-use-card-address {
    margin-top: auto;
    color: var(--white);
    font-family: var(--font);
    font-size: clamp(.7rem, .9vw, .85rem);
    font-weight: 300;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

/* The advertisement, which is one line and a sign-off — the address is the call, so it stands where
   a call stands: last, under a rule, alone. */
.sd-use-ad {
    flex-direction: column;
    justify-content: center;
    gap: clamp(.9rem, 1.6vw, 1.4rem);
    background: linear-gradient(160deg, var(--tint), transparent 55%), var(--black-mid);
}

.sd-use-ad-line {
    max-width: 12ch;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 300;
    line-height: 1.15;
}

.sd-use-ad-rule {
    width: 34%;
    height: 1px;
    background: var(--hairline-strong);
}

.sd-use-ad-address {
    color: var(--white);
    font-family: var(--font);
    font-size: clamp(.85rem, 1.05vw, 1rem);
    font-weight: 300;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

/* The sign over an entrance: two mounts, a board and the light it throws on the wall under it. */
.sd-use-sign {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: linear-gradient(180deg, var(--black-mid), var(--surface-card));
}

.sd-use-sign-mounts {
    display: flex;
    justify-content: space-between;
    width: 58%;
}

    .sd-use-sign-mounts i {
        width: 1px;
        height: clamp(1.2rem, 2.6vw, 2.2rem);
        background: linear-gradient(to bottom, transparent, var(--hairline));
    }

.sd-use-sign-board {
    display: grid;
    /* A zero minimum, or the one track grows to the name's full width and the ellipsis never engages. */
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    width: 100%;
    padding: clamp(.9rem, 1.8vw, 1.5rem) clamp(.6rem, 1.2vw, 1rem);
    border: 1px solid var(--hairline);
    background: linear-gradient(135deg, var(--tint-raised), var(--tint) 45%, var(--tint-raised)), var(--black-mid);
    box-shadow: 0 16px 34px rgba(5, 5, 5, .6);
}

.sd-use-sign-name {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.9vw, 1.7rem);
    font-weight: 300;
    letter-spacing: .06em;
    text-align: center;
    /* A sign is one line of lettering: a long name is cut with an ellipsis, never broken mid-word. */
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Etched rather than printed: a dark line above the glyph and a light one below is what a
       shallow engraving does to light. */
    text-shadow: 0 -1px 0 rgba(5,5,5,.55), 0 1px 0 rgba(245,245,245,.12);
}

    .sd-use-sign-name i {
        font-style: normal;
        color: var(--white-soft);
    }

.sd-use-sign-light {
    width: 76%;
    height: clamp(1.4rem, 2.8vw, 2.4rem);
    background: radial-gradient(60% 100% at 50% 0, var(--tint-raised), transparent 72%);
}

/* The parcel: the address runs along the tape that holds the box shut, which is where it travels
   further than any page of ours ever will. */
.sd-use-package {
    align-items: center;
    justify-content: center;
}

.sd-use-package-box {
    position: relative;
    display: block;
    width: 92%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: linear-gradient(160deg, rgba(245, 245, 245, .045), transparent 50%), var(--black-mid);
    box-shadow: 0 20px 44px rgba(5, 5, 5, .6);
}

.sd-use-package-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--white-subtle);
}

.sd-use-package-tape {
    position: absolute;
    top: 50%;
    right: -8%;
    left: -8%;
    overflow: hidden;
    padding: .5rem 0;
    border-block: 1px solid var(--hairline-strong);
    background: linear-gradient(180deg, var(--tint-raised), var(--tint));
    color: var(--white-soft);
    font-family: var(--font-mono);
    font-size: clamp(.5rem, .7vw, .62rem);
    letter-spacing: .16em;
    text-align: center;
    white-space: nowrap;
    transform: translateY(-50%) rotate(-2deg);
}
/* #endregion */

/* #region Tones */
/* margin-inline stays auto: the section's own rule centres every .container inside it, and a plain
   `margin: 0` here would quietly move the list to the left edge of the viewport. */
.sd-tones {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hairline);
}

/* Three rows, and they are a footnote to the page rather than one of its arguments — a brand direction is a
   suggestion, not something anybody buys. At a section's own rhythm they stand almost as tall as the
   sections that sell, which is a claim about importance the content does not make. So the row is compressed
   on both axes: less air above and below each entry, and a column for the numeral narrow enough for two
   letters rather than for a display figure. */
.sd-tone {
    display: grid;
    grid-template-columns: clamp(2.6rem, 5vw, 4.2rem) minmax(0, 1fr);
    gap: clamp(1.2rem, 2.6vw, 2.4rem);
    align-items: start;
    padding: clamp(1.3rem, 2.2vw, 1.9rem) 0;
    border-bottom: 1px solid var(--hairline);
    transition-delay: 0s;
}

    .sd-tone.delay-1 {
        transition-delay: .18s;
    }

    .sd-tone.delay-2 {
        transition-delay: .36s;
    }

/* The type comes down with the spacing, because a scale is a ratio: shorten the rows while the headings stay
   at a section's own size and the result is three tight rows of large titles, louder than the full-height
   version. The numeral comes down furthest, since it has no business standing larger than the title it
   numbers. */
.sd-tone-num {
    color: rgba(245, 245, 245, .5);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    font-weight: 300;
    line-height: 1.3;
}

.sd-tone-body h3 {
    margin: 0 0 .5rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 300;
    line-height: 1.25;
}

.sd-tone-body p {
    max-width: 62ch;
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: clamp(.95rem, 1.05vw, 1.02rem);
    font-weight: 300;
    line-height: 1.7;
}
/* #endregion */

/* #region The potential card */
/* THE HOUSE'S NUMBERED TILE, brought to the cards on this page. As a small gold label in mono the figure
   stands over a block of empty space — .b2b-index reserves seven rem of padding under itself to push the
   title down — so each card opens with a caption and a void. As a watermark the number does the same job
   without spending the room: set far larger than the card, pushed past its bottom-right corner so the edge
   crops it, and drawn at a fraction of the white, warming to gold under the hand. The declarations are
   the segment scenario tile's, value for value, because there is one such treatment on this site and
   copying it exactly is what keeps it one.

   Scoped to this section: Odoardo Art™ carries the same .b2b-card, and its numbers are labels there. */
.sd-potential .b2b-card {
    overflow: hidden;
}

    /* Everything the reader reads stands above the watermark. */
    .sd-potential .b2b-card > :not(.b2b-index) {
        position: relative;
        z-index: 1;
    }

    .sd-potential .b2b-index {
        position: absolute;
        right: -.04em;
        bottom: -.1em;
        z-index: 0;
        margin: 0;
        padding: 0;
        color: rgba(245, 245, 245, .045);
        font-family: var(--font-display);
        font-size: clamp(6rem, 9vw, 9.5rem);
        font-weight: 400;
        letter-spacing: -.04em;
        line-height: .8;
        pointer-events: none;
        user-select: none;
        transition: color var(--motion) var(--ease-house);
    }

    .sd-potential .b2b-card:hover .b2b-index,
    .sd-potential .b2b-card:focus-within .b2b-index {
        color: rgba(var(--gold-rgb), .085);
    }
/* #endregion */

/* #region Neighbouring addresses */
/* The last section before the concierge, so it closes the run of rules rather than adding one more. */
.sd-similar {
    border-bottom: 0;
}

.sd-similar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.6rem);
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    padding: 0;
    list-style: none;
}

.sd-similar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    height: 100%;
    padding: clamp(1.5rem, 2.2vw, 2.1rem);
    border: 1px solid var(--hairline);
    background: var(--surface-card);
    text-decoration: none;
    transition: border-color var(--motion) var(--ease-house), background var(--motion) var(--ease-house);
}

    .sd-similar-card:hover,
    .sd-similar-card:focus-visible {
        border-color: var(--gold-accent);
        background: linear-gradient(150deg, rgba(var(--gold-rgb),.06), transparent 55%), var(--surface-card);
    }

    /* The portfolio's strongest names carry the same mark here as in the catalogue: one corner,
       no badge, no word. */
    .sd-similar-card.is-top::after {
        position: absolute;
        top: 1.1rem;
        right: 1.1rem;
        width: 6px;
        height: 6px;
        background: var(--gold);
        transform: rotate(45deg);
        content: "";
    }

.sd-similar-name {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 300;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sd-similar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    align-items: baseline;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.sd-similar-class {
    color: var(--white-ghost);
    font-family: var(--font);
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.sd-similar-price {
    margin-left: auto;
    color: var(--gold);
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 300;
}

/* #region Lease */
/* The door out of this address and into the sense that leases it. As a bare line with an arrow it
   sat under the price looking like a footnote; a bordered tile the width of the box reads as
   somewhere to go, which is what it is. */
.sd-lease .pricing-box-link {
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
    padding: .95rem 1.2rem;
    border: 1px solid var(--hairline-mid);
    background: var(--tint);
    transition: border-color var(--motion-quick) var(--ease-house), background var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
}

    .sd-lease .pricing-box-link:hover,
    .sd-lease .pricing-box-link:focus-visible {
        border-color: var(--gold);
        background: rgba(var(--gold-rgb),.09);
        color: var(--white);
    }
/* #endregion */

/* The grid above already ends on its own bottom margin, so the full section's worth of space here
   put the link adrift between the names it belongs to and the section under it. */
.sd-similar-all {
    display: flex;
    justify-content: center;
    padding-top: clamp(1.4rem, 2.6vw, 2.2rem);
}

/* The point of contact for this one address: a quiet line at the end of the section, never a call to action. */
.sd-abuse {
    display: flex;
    justify-content: center;
    padding-top: 1.4rem;
}

    .sd-abuse a {
        color: var(--text-muted);
        font-size: .78rem;
        letter-spacing: .04em;
        text-decoration: underline;
        text-underline-offset: .25em;
    }

        .sd-abuse a:hover,
        .sd-abuse a:focus-visible {
            color: var(--gold);
        }
/* #endregion */

/* #region Responsive */
/* The hero collapses to one column at 1100px, which is where the card stops sharing a row and
   should take the whole width. */
@media (max-width: 1100px) {
    .sd-card {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .sd-essay {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-uses-grid,
    .sd-similar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .sd-similar-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The uses keep two columns here where the neighbours drop to one: six artefacts one under
       another is six screens of scrolling for a section whose whole point is that the reader sees
       them together. */
    .sd-uses-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .sd-use figcaption p {
        font-size: .85rem;
    }

    .sd-tone {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}

/* Below this the two columns stop being artefacts and start being thumbnails, so the row gives in
   and takes the whole width — one at a time, in a shallower frame than a square. */
@media (max-width: 460px) {
    .sd-uses-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-use-stage {
        aspect-ratio: 16 / 10;
    }
}

/* On a narrow tile each mailbox wraps to two lines and a fixed-ratio frame cut the first and the last
   off. The mail tile grows with its list instead; the others keep their proportion. */
@media (max-width: 560px) {
    .sd-use-stage.sd-use-mail {
        aspect-ratio: auto;
        min-height: 12rem;
    }
}
/* #endregion */