/* ==========================================================================
   /products/patent-search only. Loaded by templates/product_patent_search.html
   after style.css and after the scrollcraft engine stylesheet, so the plain
   selectors here are page scoped by where the file is linked; everything
   else is under .ps or .ps-main.

   A typographic poster with plates (John asked for pictures; see the
   template's header). Four jobs here:
     0. the plates and the product's own panels, redrawn from the connector's
        view source (the .psapp block carries that view's colours);
     1. theme the engine (six tokens, two faces, the site's own) and pin the
        site chrome to its light palette, because the engine sets the body
        ground and the header would otherwise inherit it;
     2. the poster scale: one display face at four sizes, from a line that
        fills the viewport to the smallest type on the site at the close,
        with tracking that tightens as size grows and a measure that holds;
     3. the signature move's glyph states, driven from patent-search.js off
        the --sc-p the engine publishes on the NUMBERS act.

   Two families: the site's display serif carries every poster line and the
   system sans carries prose and labels. Field codes and tool names are set
   in the sans on a soft surface rather than in a third, monospaced, family.
   One accent, the site's green. No em dash anywhere in this file.
   ========================================================================== */

/* --- 1. Engine theme and the site chrome ----------------------------------- */

:root {
    --sc-canvas: #f4f3ee;
    --sc-surface: #e9e8e1;
    --sc-ink: #16181d;
    --sc-ink-soft: #565f59;
    --sc-accent: #1f4d3d;
    --sc-accent-ink: #ffffff;
    --sc-font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
        Palatino, Georgia, "Times New Roman", serif;
    --sc-font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --sc-section: clamp(3rem, 6vw, 6.5rem);
}

@media (prefers-color-scheme: dark) {
    :root {
        --sc-canvas: #1a1d21;
        --sc-surface: #242930;
        --sc-ink: #eef0f2;
        --sc-ink-soft: #9fa8b0;
        --sc-accent: #7fd4a0;
        --sc-accent-ink: #0d1512;
    }
}

/* The header, notice and footer keep the site palette on this page whatever
   the engine does to the body ground. Same fix as the example-run pages. */
.site-header,
.notice-strip {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--sc-font-text);
}

.site-footer {
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--sc-font-text);
}

/* `main.wrap` in style.css is element+class, so it out-specifies a bare
   `.ps-main`; matching the element keeps the reset from losing to it. */
main.ps-main {
    max-width: none;
    padding: 0;
}

.ps {
    --ps-gutter: clamp(20px, 5vw, 72px);
    --ps-measure: 60ch;
    --ps-line: color-mix(in oklab, var(--sc-ink) 16%, transparent);
    --ps-ease: cubic-bezier(0.23, 1, 0.32, 1);
    color: var(--sc-ink);
    font-family: var(--sc-font-text);
    line-height: 1.6;
}

.ps-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--ps-gutter);
}

/* --- 2. The poster scale ---------------------------------------------------- */

.ps-poster {
    font-family: var(--sc-font-display);
    font-weight: 600;
    margin: 0;
    color: var(--sc-ink);
    text-wrap: balance;
}

/* The hero line fills the viewport width. Tracking tightens with size: at
   this scale the face's default tracking reads loose. */
/* The hero line shares its screen with Plate I, so it is set to fill its
   own column rather than the viewport. */
.ps-poster--hero {
    font-size: clamp(3rem, 6.9vw, 7.4rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
}

.ps-poster--xl {
    font-size: clamp(2.4rem, 6.4vw, 5.6rem);
    line-height: 1.0;
    letter-spacing: -0.028em;
}

.ps-poster--lg {
    font-size: clamp(1.9rem, 4.4vw, 3.9rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.ps-poster--md {
    font-size: clamp(1.45rem, 2.6vw, 2.3rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.ps-poster__line { display: block; }

.ps-kicker {
    font-family: var(--sc-font-text);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    margin: 0 0 14px;
}

.ps-body {
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: var(--ps-measure);
    margin: 0;
    color: var(--sc-ink);
    text-wrap: pretty;
}

.ps-note {
    font-family: var(--sc-font-display);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 54ch;
    margin: 0;
    color: var(--sc-ink-soft);
}

/* A field code or a tool call: the sans on a soft surface, not a third face. */
.ps-code {
    font-family: var(--sc-font-text);
    font-size: 0.92em;
    font-variant-numeric: tabular-nums;
    background: var(--sc-surface);
    border-radius: 4px;
    padding: 0.08em 0.4em;
    overflow-wrap: anywhere;
}

.ps-link {
    color: var(--sc-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

.ps-link:hover { text-decoration-thickness: 2px; }

/* The close's one control is a form button set as the same underlined link,
   so a signed-in reader and a signed-out one see the same affordance. */
.ps-link--button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: var(--sc-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

.ps-link--button:hover { text-decoration-thickness: 2px; }

.ps-stack > * + * { margin-top: 18px; }

/* --- Acts: shared ----------------------------------------------------------- */

.ps-act {
    position: relative;
    padding: var(--sc-section) 0;
}

/* A pinned stage: the engine makes it sticky and sizes it to the viewport
   under the site header, and clips it. The content is top-aligned rather
   than centred: a stage whose content is taller than the viewport would
   otherwise push its first lines above the clip and show an empty screen. */
.ps-stage {
    display: flex;
    align-items: flex-start;
    padding-top: clamp(14px, 3.5vh, 36px);
}

.ps-stage__inner {
    width: 100%;
}

.ps-act[data-sc-act="pin"] { padding: 0; }

/* A flow act directly after a pinned one takes reduced top padding: the
   stage needs a viewport to scroll off, and full padding on top of that
   delays the next content by another screen. */
.ps-design,
.ps-rooms { padding-top: clamp(1.5rem, 3vw, 3rem); }

/* --- The hero ----------------------------------------------------------------- */

.ps-hero {
    min-height: calc(92svh - var(--site-header-h, 0px));
    display: flex;
    align-items: center;
    padding-top: clamp(2rem, 6vh, 5rem);
    padding-bottom: clamp(2rem, 6vh, 5rem);
}

.ps-standfirst {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.55;
    max-width: 52ch;
    margin: clamp(22px, 3vw, 40px) 0 0;
    color: var(--sc-ink-soft);
}

.ps-standfirst .ps-link { white-space: nowrap; }

/* --- Plates ---------------------------------------------------------------------- */

.ps-plate {
    margin: 0;
}

.ps-plate img {
    width: 100%;
    height: auto;
    aspect-ratio: 1376 / 768;
    display: block;
    border-radius: 6px;
    /* Offset and blur, tinted to the ground, rather than a halo. */
    box-shadow: 0 12px 28px rgba(12, 16, 20, 0.16);
}

.ps-plate figcaption {
    font-family: var(--sc-font-display);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--sc-ink-soft);
    margin-top: 10px;
    max-width: 40ch;
}

.ps-plate__label {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--sc-accent);
    margin-right: 6px;
}

.ps-hero__spread {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
    width: 100%;
}

/* --- The product's panels, redrawn from ui/views.py (_BASE_CSS) ------------- */

.ps-app {
    margin: 0;
}

.ps-app figcaption {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--sc-ink-soft);
    margin-top: 12px;
    max-width: 60ch;
}

.psapp {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    color: #1a1a2e;
    background: #f7f8fa;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    overflow: hidden;
    line-height: 1.45;
    box-shadow: 0 12px 28px rgba(12, 16, 20, 0.14);
}

.psapp__header {
    background: #003366;
    color: #fff;
    padding: 9px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.psapp__h1 { font-size: 14px; font-weight: 600; }
.psapp__badge { background: #2f6db5; border-radius: 4px; padding: 1px 7px; font-size: 11px; }
.psapp__spacer { flex: 1; }

.psapp__bar {
    background: #e8eef5;
    border-bottom: 1px solid #c5d3e6;
    padding: 6px 14px;
    font-size: 12px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.psapp__note {
    background: #f4f5f7;
    border-bottom: 1px solid #e3e5e9;
    padding: 5px 14px;
    font-size: 11px;
    color: #555;
}

.psapp__wrap { padding: 10px 14px; }

.psapp__card {
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    padding: 9px 11px;
    margin-bottom: 8px;
}

.psapp__card:last-child { margin-bottom: 0; }
.psapp__num { font-family: ui-monospace, monospace; color: #2f6db5; font-weight: 700; font-size: 12px; }
.psapp__title { font-weight: 600; margin: 3px 0; }
.psapp__meta { color: #666; font-size: 11px; }
.psapp__snip { margin-top: 4px; color: #333; }
.psapp__fam { font-size: 11px; color: #666; margin-top: 3px; }
.psapp__btns { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

.psapp__btn {
    border: 1px solid #c5d3e6;
    background: #eef3fa;
    color: #003366;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    text-decoration: none;
    display: inline-block;
}

.psapp__btn:hover { background: #dce7f5; }
.psapp__btn--inert { cursor: default; }
.psapp__header .psapp__btn { color: #003366; }

.psapp__status {
    background: #fff8e1;
    border: 1px solid #f0d080;
    border-radius: 5px;
    padding: 7px 10px;
    margin-bottom: 8px;
    font-size: 12px;
}

.psapp__claim {
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 5px;
    padding: 7px 10px;
    margin-bottom: 5px;
    line-height: 1.45;
}

.psapp__claim--more { color: #666; font-size: 12px; background: #fbfcfe; }

/* --- Search: scrolls in and stays ------------------------------------------- */

.ps-search__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}

.ps-query {
    margin-bottom: 14px;
}

.ps-query__q::before { content: "\201C"; }
.ps-query__q::after { content: "\201D"; }

.ps-hits {
    list-style: none;
    margin: clamp(10px, 2vh, 24px) 0 0;
    padding: 0;
    max-width: 62ch;
}

.ps-hit {
    display: grid;
    gap: 2px;
    padding: 12px 0;
    border-top: 1px solid var(--ps-line);
}

.ps-hit__num {
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    color: var(--sc-accent);
}

.ps-hit__title {
    font-family: var(--sc-font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.25;
}

.ps-hit__meta {
    font-size: 0.9rem;
    color: var(--sc-ink-soft);
}

.ps-search .ps-note { margin-top: clamp(14px, 2.4vh, 28px); }
.ps-search .ps-plate { margin-top: clamp(18px, 3vw, 32px); }

/* --- Fields ------------------------------------------------------------------- */

.ps-boolean {
    font-variant-numeric: tabular-nums;
    margin-bottom: clamp(20px, 3vw, 36px);
}

.ps-spec {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    gap: 10px clamp(14px, 2vw, 28px);
    margin: 0;
    max-width: 72ch;
}

.ps-spec dt {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    padding-top: 0.25em;
}

.ps-spec dd {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
}

/* --- The browser search page captures ------------------------------------------ */

.ps-page {
    margin-top: clamp(36px, 5vw, 64px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--ps-line);
}

.ps-page .ps-body { margin-bottom: clamp(16px, 2.4vw, 28px); }

.ps-page__strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 28px);
}

.ps-shot {
    margin: 0;
}

.ps-shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 700;
    display: block;
    border: 1px solid var(--ps-line);
    border-radius: 6px;
    background: #fff;
}

.ps-shot figcaption {
    font-size: 0.84rem;
    color: var(--sc-ink-soft);
    margin-top: 8px;
}

/* --- Designs: the crane plate beside the quote (John, 10 October 2026) ------- */

.ps-design__spread {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}

.ps-plate--design img { aspect-ratio: 1200 / 896; }

/* --- The captures open full size (John, 10 October 2026) ------------------- */

.ps-shot__open {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    border-radius: 6px;
    cursor: zoom-in;
    font: inherit;
    color: inherit;
}

.ps-shot__open:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 3px;
}

.ps-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 2vw;
    background: rgba(12, 16, 20, 0.92);
    cursor: zoom-out;
}

/* An author display beats the UA's [hidden] rule, so it is restated. */
.ps-lightbox[hidden] { display: none; }

.ps-lightbox__img {
    display: block;
    max-width: 96vw;
    max-height: 96vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.ps-lightbox__close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-family: var(--sc-font-text);
    font-size: 28px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
}

.ps-lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }

.ps-lightbox__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

body.ps-lightbox-open { overflow: hidden; }

/* --- Themes: the peak ---------------------------------------------------------- */

/* The theme plate shares the lead column with the label and the note, and
   gives way on short viewports so the note still fits under the clip.
   John's screenshot of 10 October 2026 (1151 x 771) showed the plate's top
   edge at the foot of the stage: the lead column alone runs to about 600px
   there (kicker, ask, a four-line label at 4.4vw, id, a seven-line note),
   the plate adds about 217px, and the stage is the viewport less the 66px
   header and its own padding. The plate therefore needs a viewport of
   about 910px at that width and about 960px at 1440. Below 960 the plate
   shrinks to 11rem (about 135px tall) instead of hiding: a 1080p monitor
   gives the browser roughly 940px, and John wants the plate on it. */
.ps-plate--theme { max-width: 18rem; margin: 14px 0 0; }
.ps-plate--theme figcaption { margin-top: 6px; }
@media (max-height: 960px) { .ps-plate--theme { max-width: 11rem; margin-top: 10px; } }

.ps-theme__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(18px, 3vw, 56px);
    align-items: start;
}

.ps-theme__side > * + * { margin-top: clamp(10px, 1.8vh, 20px); }

.ps-theme__ask {
    font-family: var(--sc-font-display);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.4;
    max-width: 40ch;
    margin: 0 0 14px;
    color: var(--sc-ink-soft);
}

.ps-theme__label {
    max-width: 16ch;
    margin-bottom: 10px;
}

.ps-theme__id {
    font-size: 0.9rem;
    color: var(--sc-ink-soft);
    max-width: 60ch;
    margin: 0 0 clamp(14px, 2.4vh, 28px);
}

.ps-concepts {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 20px;
    font-size: 0.94rem;
    line-height: 1.4;
}

.ps-concepts li {
    break-inside: avoid;
    padding: 4px 0;
    border-top: 1px solid var(--ps-line);
}

.ps-concepts--apart {
    columns: 1;
    font-family: var(--sc-font-display);
    font-size: 1.02rem;
}

.ps-theme__neighbour {
    font-size: 0.9rem;
    color: var(--sc-ink-soft);
    margin: 14px 0 0;
    max-width: 44ch;
}

.ps-members {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.ps-member {
    display: grid;
    grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
    grid-template-areas: "num title" "num claim";
    gap: 1px clamp(10px, 1.5vw, 20px);
    padding: 6px 0;
    border-top: 1px solid var(--ps-line);
}

.ps-member__num { grid-area: num; padding-top: 0.2em; }
.ps-member__title { grid-area: title; }
.ps-member__claim {
    grid-area: claim;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ps-member__num {
    font-variant-numeric: tabular-nums;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    color: var(--sc-accent);
}

.ps-member__title {
    font-family: var(--sc-font-display);
    font-size: 0.98rem;
    line-height: 1.3;
}

.ps-member__claim {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--sc-ink-soft);
}

.ps-themes .ps-note { margin-top: clamp(14px, 2.4vh, 28px); max-width: 40ch; }

/* --- Claims ------------------------------------------------------------------- */

.ps-claims__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}

.ps-claims__argument .ps-plate { margin-bottom: 8px; }

.ps-claim {
    max-width: 70ch;
    margin: 0 0 clamp(28px, 4vw, 48px);
    padding: clamp(16px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px);
    background: var(--sc-surface);
    border-radius: 6px;
}

.ps-claim__head {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    margin: 0 0 10px;
}

.ps-claim__text {
    font-family: var(--sc-font-display);
    font-size: clamp(0.98rem, 1.2vw, 1.12rem);
    line-height: 1.55;
    margin: 0;
}

.ps-claim__foot {
    font-size: 0.86rem;
    color: var(--sc-ink-soft);
    margin: 12px 0 0;
}

/* --- Numbers: the signature move ---------------------------------------------- */

.ps-numbers__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 56px);
    align-items: start;
}

.ps-numbers__grid .ps-crosswalk__figure {
    font-size: clamp(1.6rem, 3.3vw, 3rem);
}

.ps-plate--numbers { margin-top: clamp(20px, 4vh, 48px); }

.ps-numbers__widget {
    margin-top: 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 44ch;
}
@media (max-height: 700px) { .ps-numbers__widget { display: none; } }

.ps-numbers__ask {
    font-family: var(--sc-font-display);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    color: var(--sc-ink-soft);
    margin: 0 0 clamp(14px, 2.4vh, 28px);
}

.ps-crosswalk {
    display: grid;
    gap: clamp(10px, 1.6vh, 18px);
}

.ps-crosswalk__row {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
    grid-template-areas: "kind figure" "kind when";
    gap: 2px clamp(12px, 2vw, 28px);
    align-items: baseline;
    margin: 0;
}

.ps-crosswalk__kind {
    grid-area: kind;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    align-self: start;
    padding-top: 0.6em;
}

.ps-crosswalk__figure {
    grid-area: figure;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    max-width: none;
}

.ps-crosswalk__when {
    grid-area: when;
    font-size: 0.9rem;
    color: var(--sc-ink-soft);
}

/* With the script running, the three rows collapse onto one line and the
   glyphs re-set in place. Each glyph is a span; `is-set` is the glyph of the
   current name, `is-next` the one arriving. Without the script the three
   rows simply stand in a column, which is the same information. */
.ps--js .ps-crosswalk { position: relative; }

.ps--js .ps-crosswalk__row {
    transition: opacity 320ms var(--ps-ease);
}

.ps--js .ps-crosswalk__row:not(.is-current) .ps-crosswalk__figure,
.ps--js .ps-crosswalk__row:not(.is-current) .ps-crosswalk__kind,
.ps--js .ps-crosswalk__row:not(.is-current) .ps-crosswalk__when {
    opacity: 0.34;
}

.ps--js .ps-crosswalk__row.is-current .ps-crosswalk__kind {
    color: var(--sc-accent);
}

.ps-glyph {
    display: inline-block;
    transition: transform 260ms var(--ps-ease), opacity 260ms var(--ps-ease);
    transform: translateY(0);
}

.ps--js .ps-crosswalk__row:not(.is-current) .ps-glyph {
    transform: translateY(0.12em);
}

.ps--js .ps-crosswalk__row.is-current .ps-glyph.is-set {
    opacity: 1;
    transform: translateY(0);
}

.ps--js .ps-crosswalk__row.is-current .ps-glyph:not(.is-set) {
    opacity: 0.22;
    transform: translateY(0.18em);
}

.ps-numbers__note { margin-top: clamp(14px, 2.4vh, 28px); }

@media (prefers-reduced-motion: reduce) {
    .ps-glyph { transition: none; }
    .ps--js .ps-crosswalk__row { transition: none; }
}

/* --- The rooms: the ground turns dark once -------------------------------------- */

.ps-rooms {
    background: #0d1512;
    color: #f1efe7;
    --sc-ink: #f1efe7;
    --sc-ink-soft: #a8b5ac;
    --sc-accent: #7fd4a0;
    --sc-surface: #14201b;
    --ps-line: rgba(241, 239, 231, 0.16);
    /* Light on dark, compensated: a touch more leading and tracking. */
    letter-spacing: 0.004em;
    line-height: 1.66;
    padding-bottom: var(--sc-section);
}

.ps-rooms .ps-poster { color: #f1efe7; max-width: 22ch; margin-bottom: clamp(20px, 3vw, 36px); }
.ps-rooms .ps-body { color: #f1efe7; }
.ps-rooms .ps-kicker { color: #a8b5ac; }

.ps-rooms__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}

.ps-calls {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.ps-calls li {
    display: grid;
    gap: 3px;
    padding: 10px 0;
    border-top: 1px solid var(--ps-line);
}

.ps-calls .ps-code {
    background: #14201b;
    color: #f1efe7;
    font-size: 0.86rem;
    line-height: 1.5;
    width: fit-content;
    max-width: 100%;
}

.ps-calls__why {
    font-size: 0.9rem;
    color: #a8b5ac;
}

.ps-rooms__doors {
    display: grid;
    gap: clamp(18px, 2.4vw, 32px);
}

.ps-door {
    border-top: 1px solid var(--ps-line);
    padding-top: 14px;
}

.ps-door__name {
    font-family: var(--sc-font-display);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    margin: 0;
    color: #f1efe7;
}

.ps-door__price {
    font-family: var(--sc-font-display);
    font-size: 1.1rem;
    margin: 2px 0 10px;
    color: #a8b5ac;
    font-variant-numeric: tabular-nums;
}

.ps-door__line {
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 0 0 10px;
    color: #f1efe7;
}

.ps-door__seats { color: #a8b5ac; }

.ps-rooms .ps-link { color: #7fd4a0; }

/* --- The close: the smallest type on the page --------------------------------- */

.ps-close {
    padding-top: clamp(3rem, 7vw, 7rem);
    padding-bottom: clamp(3rem, 7vw, 7rem);
}

.ps-close__line {
    font-family: var(--sc-font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.5;
    margin: 0 0 18px;
    max-width: 48ch;
}

.ps-close__form {
    display: inline;
    margin: 0;
}

.ps-close__terms {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--sc-ink-soft);
    max-width: 70ch;
    margin: 0 0 14px;
}

.ps-imprint {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--sc-ink-soft);
    max-width: 74ch;
    margin: 0;
}

/* --- Breakpoints: 900 and 640, the site's set ------------------------------- */

@media (max-width: 900px) {
    .ps-hero__spread,
    .ps-search__grid,
    .ps-claims__grid,
    .ps-numbers__grid,
    .ps-theme__cols,
    .ps-design__spread,
    .ps-rooms__grid { grid-template-columns: minmax(0, 1fr); }
    .ps-page__strip { grid-template-columns: minmax(0, 1fr); }
    .ps-plate--theme,
    .ps-plate--numbers,
    .ps-numbers__widget { display: none; }
    .ps-member { grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "title"; }
    .ps-member__claim { display: none; }
    .ps-concepts { columns: 1; }
    .ps-themes .ps-note { display: none; }
}

@media (max-width: 640px) {
    .ps-poster--hero { font-size: clamp(2.6rem, 14vw, 4.4rem); }
    .ps-spec { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
    .ps-spec dd { margin-bottom: 10px; }
    .ps-crosswalk__row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "kind" "figure" "when";
    }
    .ps-crosswalk__kind { padding-top: 0; }
    .ps-crosswalk__figure { white-space: normal; font-size: clamp(1.6rem, 8vw, 2.4rem); }
    .ps-theme__id,
    .ps-theme__neighbour,
    .ps-theme__apart { display: none; }
    .ps-theme__label { font-size: clamp(1.45rem, 7vw, 2.1rem); }
    .ps-concepts { font-size: 0.84rem; line-height: 1.3; }
    .ps-concepts li { padding: 3px 0; }
    .ps-member__title { font-size: 0.88rem; }
    .ps-stage { padding-top: 10px; }
}