/* Night Lets & Co. — an estate agent's window at night.
   Painted shopfront frame, gold-leaf lettering, cards clipped to steel cables behind the glass. */

:root {
  --paint: #10251e;
  --paint-hi: #1a3a2f;
  --paint-lo: #08150f;
  --gold: #d9b45b;
  --gold-soft: #e8d8a8;
  --glass: #141613;
  --paper: #fbfaf5;
  --ink: #1b1d1a;
  --muted: #5b6159;
  --line: #dedacd;
  --red: #c8261c;
  --steel: rgba(214, 219, 222, .5);
  --frame: 22px;
  --pad-x: 28px;
  --pad-y: 22px;
  --gap: 22px;
  --wire: 30px;
  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --cond: 'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paint) linear-gradient(90deg, #0c1f18, #12291f 50%, #0c1f18);
  color: var(--gold-soft);
  font: 400 16px/1.45 var(--sans);
}
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: none; vertical-align: -.15em; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 3px;
  background: var(--gold); color: var(--paint); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid #f4cd55; outline-offset: 3px; }

/* gold leaf with a signwriter's shade line */
.gold {
  display: inline-block;
  background: linear-gradient(180deg, #fcf0c2 0%, #e6c267 34%, #a77a27 54%, #e9c870 76%, #b88d38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(1px 1px 0 #040b08);
}

/* ------------------------------------------------------------------ fascia */

.fascia { padding: 10px var(--frame) 0; }
.fascia__board {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 26px;
  background: linear-gradient(180deg, var(--paint-hi), #0f241d 70%, #0c1e18);
  border: 1px solid #040b08;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 3px 0 #06110c;
}
.fascia__board::before {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(217, 180, 91, .5);
}
.fascia__name {
  font: 400 clamp(27px, 3vw, 40px)/1.05 var(--serif);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.fascia__co { font-style: italic; }
.fascia__side {
  flex: 1 1 0;
  display: flex; align-items: center; gap: 10px;
  font: 600 13px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.fascia__side:last-child { justify-content: flex-end; }
.fascia__dot { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

/* ------------------------------------------------------------------ branches strip */

.branches {
  position: sticky; top: 0; z-index: 20;
  margin-top: 8px;
  background: #0a120f;
  border-top: 1px solid #000;
  border-bottom: 1px solid rgba(217, 180, 91, .45);
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .55);
}
.branches__scroll {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 46px;
  padding: 0 var(--frame);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.branches__scroll::-webkit-scrollbar { display: none; }
.branches__scroll.is-over:not(.at-start):not(.at-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.branches__scroll.is-over.at-start:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.branches__scroll.is-over.at-end:not(.at-start) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
.branches__label {
  flex: none;
  font: italic 400 16px/1 var(--serif); color: var(--gold);
  white-space: nowrap;
}
.branches__label::after { content: ':'; }
.branches__list { display: flex; flex: none; gap: 2px; margin: 0; padding: 0; list-style: none; }
.branches__list li { flex: none; }
.branch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 7px;
  border-radius: 3px;
  color: #eadfc2; text-decoration: none; white-space: nowrap;
  font: 600 15px/1 var(--cond); letter-spacing: .07em;
}
.branch img { width: 20px; height: 15px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.branch .ic { width: 16px; height: 16px; }
.branch--window { margin-right: 6px; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; }
.branch[aria-current] {
  background: linear-gradient(180deg, #edcd78, #b88b35);
  color: #0d1f18;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 #000;
}
@media (hover: hover) { .branch:not([aria-current]):hover { background: rgba(217, 180, 91, .14); color: #fff; } }

/* ------------------------------------------------------------------ the window pane */

.pane {
  position: relative;
  margin: 18px var(--frame) 0;
  padding: var(--pad-y) var(--pad-x) 44px;
  background: var(--glass) linear-gradient(180deg, #23241f 0, #161814 420px, #121411 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .7),
    inset 0 22px 40px -18px rgba(0, 0, 0, .8),
    0 0 0 2px #06100c, 0 0 0 7px #17362b, 0 0 0 8px #050d0a;
}
/* the street's reflection on the glass: stays put while the window scrolls under it */
.pane__glare {
  position: sticky; top: 0; z-index: 5;
  height: 100vh;
  margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) calc(var(--pad-y) - 100vh);
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 9%, rgba(255, 255, 255, .045) 9% 20%, transparent 20% 24%, rgba(255, 255, 255, .03) 24% 27%, transparent 27%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%);
}

/* lettering on the glass */
.vinyl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; }
.vinyl__title { font: italic 400 clamp(28px, 3.1vw, 40px)/1.1 var(--serif); }
.vinyl__sub { font: 600 14px/1.35 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: #cdbf98; }

/* ------------------------------------------------------------------ rows on the home page */

.row { margin-top: 24px; }
.row--featured { margin-top: 18px; }
.row__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(217, 180, 91, .28);
}
.row__title {
  display: flex; align-items: center; gap: 10px;
  font: 400 23px/1.15 var(--serif); color: #f3e8c8;
}
.row__title img { width: 28px; height: 21px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.row__count { font: 600 14px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.row__all {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 2px;
  font: 600 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: #f3e8c8; text-decoration: none;
  border-bottom: 1px solid rgba(217, 180, 91, .6);
}
.row__all:hover { color: #fff; border-bottom-color: #f4cd55; }
.row__nav { display: flex; gap: 6px; }
.row__all + .row__nav { margin-left: 4px; }
.row__count + .row__nav { margin-left: auto; }
.row__nav[hidden] { display: none; }
.nudge {
  width: 34px; height: 30px; display: grid; place-items: center;
  border: 1px solid rgba(217, 180, 91, .55); border-radius: 3px;
  background: #0d1a15; color: var(--gold-soft); cursor: pointer; font-size: 18px;
}
.nudge:hover:not(:disabled) { background: #183229; color: #fff; }
.nudge:disabled { opacity: .35; cursor: default; }

.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(270px, calc((100% - 3 * var(--gap)) / 3.6), 390px);
  gap: var(--gap);
  margin: 0 -6px; padding: var(--wire) 6px 22px;
  list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 6px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 180, 91, .55) rgba(0, 0, 0, .25);
}
.rail > .lot { scroll-snap-align: start; }

/* ------------------------------------------------------------------ the branch page */

.board { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; }
.board__title { font: italic 400 clamp(28px, 3.1vw, 40px)/1.1 var(--serif); }
.board__title img { display: inline-block; width: 36px; height: 27px; margin-right: 12px; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.board__word { font-style: italic; color: #f3e8c8; }
.board__facts { font: 500 14px/1.4 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: #cdbf98; }
.board__facts b { color: var(--gold); font-weight: 700; }

.ctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 16px;
}
.ctl__search {
  position: relative; flex: 1 1 300px; max-width: 460px;
  display: flex; align-items: center;
}
.ctl__search .ic { position: absolute; left: 12px; width: 18px; height: 18px; color: #6b6f63; pointer-events: none; }
.ctl input[type="search"], .ctl select {
  width: 100%; height: 42px;
  border: 1px solid #b9ab80; border-radius: 3px;
  background: #f7f3e6; color: var(--ink);
  font: 500 16px/1 var(--sans);
}
.ctl input[type="search"] { padding: 0 12px 0 38px; }
.ctl__sort { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; }
.ctl__lab { font: 600 14px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ctl select { width: auto; min-width: 180px; padding: 0 34px 0 12px; appearance: none; -webkit-appearance: none;
  background: #f7f3e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2310251e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
.ctl__toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: #f3e8c8; font: 600 16px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.ctl__toggle small { color: #b5a983; font-size: 14px; }
.ctl__toggle input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.ctl__switch {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px;
  background: #2b2e28; border: 1px solid #8b7f5c; transition: background .15s;
}
.ctl__switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #e8dfc4; transition: transform .15s;
}
.ctl__toggle input:checked + .ctl__switch { background: var(--red); border-color: #f09a92; }
.ctl__toggle input:checked + .ctl__switch::after { transform: translateX(18px); background: #fff; }
.ctl__toggle input:focus-visible + .ctl__switch { outline: 3px solid #f4cd55; outline-offset: 3px; }
.ctl__go {
  height: 42px; padding: 0 18px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--gold); color: var(--paint); font: 700 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
}
.js .ctl__go { display: none; }

.status { margin-top: 12px; font: 500 15px/1.35 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: #b9ae8d; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: var(--wire) var(--gap);
  margin: 0; padding: var(--wire) 0 0;
  list-style: none;
}

.more-wrap { display: flex; justify-content: center; margin-top: 34px; }
.more {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 28px;
  border: 1px solid #f0d488; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #ecca72, #b88a35);
  color: #0d1f18; font: 700 18px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px rgba(0, 0, 0, .45);
}
.more:hover { filter: brightness(1.07); }
.more[hidden] { display: none; }

/* ------------------------------------------------------------------ the property card */

.lot { display: flex; min-width: 0; }
.card {
  position: relative;
  display: flex; flex: 1; min-width: 0;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .16), 0 18px 30px -10px rgba(0, 0, 0, .75);
  color: var(--ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* steel cables from the ceiling + the clamps holding the acrylic pocket */
.card::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: calc(-1px - var(--wire)); height: var(--wire);
  pointer-events: none;
  background:
    linear-gradient(var(--steel), var(--steel)) 30px 0 / 1px 100% no-repeat,
    linear-gradient(var(--steel), var(--steel)) right 30px top 0 / 1px 100% no-repeat;
}
.card::after {
  content: ''; position: absolute; top: -8px; left: 23px; right: 23px; height: 15px;
  pointer-events: none;
  background:
    linear-gradient(180deg, #f4f6f7, #a3aaae 60%, #7d8489) 0 0 / 13px 15px no-repeat,
    linear-gradient(180deg, #f4f6f7, #a3aaae 60%, #7d8489) right 0 top 0 / 13px 15px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), 0 26px 38px -12px rgba(0, 0, 0, .85); }
  .card:hover .card__photo img { filter: brightness(1.05); }
}
.card:focus-visible { outline-offset: 4px; }

.card__paper {
  display: flex; flex-direction: column; flex: 1; min-width: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--paper);
}
.card__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #cfcabc; }
.card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sticker {
  position: absolute; top: 18px; right: -40px; width: 160px;
  transform: rotate(38deg);
  padding: 6px 0;
  background: var(--red); color: #fff; text-align: center;
  font: 700 14px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.card__branch {
  position: absolute; left: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 6px;
  border-radius: 2px;
  background: rgba(10, 22, 17, .88); color: #f1dc9b;
  font: 600 13px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
}
.card__branch img { width: 16px; height: 16px; border-radius: 50%; }

.card__strip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--paint); color: #f6efd9;
  font: 700 16px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase;
}
.card__strip b { color: #f3cf6c; font-weight: 700; }
.card__strip span { margin-left: auto; font-weight: 600; font-size: 13px; letter-spacing: .1em; color: #c6bb98; }

.card__body {
  container-type: inline-size;
  display: flex; flex-direction: column; flex: 1;
  padding: 12px 14px 14px;
}
.card__price {
  overflow: hidden;
  white-space: nowrap;
  color: var(--ink);
  font: 700 46px/1 var(--cond);
  font-size: min(52px, calc(100cqi / (var(--d) * .5 + var(--c) * .2 + var(--s) * .33 + .25)));
  letter-spacing: -.005em;
  font-variant-numeric: lining-nums tabular-nums;
}
.card__cur { margin-right: .06em; font-size: .58em; vertical-align: .52em; letter-spacing: .02em; }
.card__per { margin-top: 3px; color: var(--muted); font: 500 14px/1.3 var(--sans); }
.card__per s { margin-left: 4px; color: var(--red); text-decoration-thickness: 1px; }
.card__name {
  margin-top: 10px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
  font: 400 21px/1.16 var(--serif); color: #121411;
}
.card__local { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.card__addr {
  display: flex; align-items: flex-start; gap: 5px;
  margin-top: 5px;
  color: #3e443d; font-size: 14.5px; line-height: 1.3;
}
.card__addr .ic { width: 15px; height: 15px; margin-top: 1px; color: var(--paint); }
.card__facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 10px 0 0; padding: 0; list-style: none;
  color: #2c312b; font-size: 14px; line-height: 1.25;
}
.card__facts li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.card__facts .ic { width: 17px; height: 17px; color: #1d5a45; }
.card__stay { flex: 1 1 100%; }
.card__stay span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card__rate { gap: 1px !important; flex: none; }
.card__rate .ic { width: 15px; height: 15px; color: #c7951d; }

/* guest rating as an energy-performance certificate */
.epc {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}
.epc::before { content: ''; grid-column: 1 / -1; height: 0; margin-top: 2px; border-top: 1px dashed var(--line); margin-bottom: 9px; }
.epc__head { grid-column: 1 / -1; margin-bottom: 5px; font: 600 12px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.epc__scale { display: flex; align-items: center; height: 26px; }
.epc__scale i {
  display: grid; place-items: center;
  width: 19px; height: 17px; margin-right: -3px;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%, 5px 50%);
  background: var(--b); color: #fff;
  font: 700 10px/1 var(--cond); font-style: normal;
  opacity: .5;
}
.epc__scale i:first-child { clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%); }
.epc__scale i:nth-child(1) { --b: #008054; }
.epc__scale i:nth-child(2) { --b: #19b459; }
.epc__scale i:nth-child(3) { --b: #8dce46; color: #10251e; }
.epc__scale i:nth-child(4) { --b: #ffd500; color: #10251e; }
.epc__scale i:nth-child(5) { --b: #fcaa65; color: #10251e; }
.epc__scale i:nth-child(6) { --b: #ef8023; }
.epc__scale i:nth-child(7) { --b: #e9153b; }
.epc--a i:nth-child(1), .epc--b i:nth-child(2), .epc--c i:nth-child(3), .epc--d i:nth-child(4),
.epc--e i:nth-child(5), .epc--f i:nth-child(6), .epc--g i:nth-child(7) {
  width: 30px; height: 26px; font-size: 16px; opacity: 1;
  margin: 0 -1px 0 -2px;
}
.epc__score { color: #1d201c; font: 500 14px/1.2 var(--sans); }
.epc__score b { font: 700 24px/1 var(--cond); margin-right: 2px; }
.epc__score span { display: block; color: var(--muted); font-size: 13px; }

/* the end-of-row board */
.allcard {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
  flex: 1; min-width: 0;
  padding: 30px 28px;
  border: 1px solid rgba(217, 180, 91, .55); border-radius: 4px;
  background: linear-gradient(180deg, #16342a, #0d2019);
  color: #f3e8c8; text-decoration: none;
  box-shadow: inset 0 0 0 5px #0d2019, inset 0 0 0 6px rgba(217, 180, 91, .45), 0 18px 30px -10px rgba(0, 0, 0, .75);
}
.allcard::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: calc(-1px - var(--wire)); height: var(--wire);
  background:
    linear-gradient(var(--steel), var(--steel)) 30px 0 / 1px 100% no-repeat,
    linear-gradient(var(--steel), var(--steel)) right 30px top 0 / 1px 100% no-repeat;
}
.allcard img { width: 48px; height: 36px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.allcard__n { font: 700 64px/1 var(--cond); color: #f3cf6c; }
.allcard__t { font: italic 400 24px/1.2 var(--serif); }
.allcard__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding-bottom: 3px; border-bottom: 1px solid #f3cf6c; font: 600 16px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; }
@media (hover: hover) { .allcard:hover { background: linear-gradient(180deg, #1b3e32, #10261e); } }

/* ------------------------------------------------------------------ stallriser (footer) */

.riser { padding: 26px var(--frame) 30px; }
.riser__plate {
  max-width: 900px; margin: 0 auto; padding: 18px 22px;
  border: 1px solid rgba(217, 180, 91, .4);
  color: #b9ae8d; font-size: 14px; line-height: 1.5;
}
.riser__plate p + p { margin-top: 6px; }
.riser__name { font: 400 22px/1.2 var(--serif); margin-bottom: 6px; }

/* ------------------------------------------------------------------ sizes */

@media (max-width: 1199px) {
  :root { --frame: 18px; --pad-x: 22px; }
  .rail { grid-auto-columns: clamp(270px, calc((100% - 2 * var(--gap)) / 2.6), 390px); }
}
@media (max-width: 899px) {
  :root { --frame: 14px; --pad-x: 18px; --pad-y: 18px; --gap: 18px; }
  .rail { grid-auto-columns: clamp(260px, calc((100% - var(--gap)) / 2.2), 390px); }
  .fascia__side:first-child { display: none; }
  .fascia__board { justify-content: space-between; }
}
@media (max-width: 599px) {
  :root { --frame: 8px; --pad-x: 8px; --pad-y: 16px; --gap: 14px; --wire: 24px; }
  .fascia { padding-top: 8px; }
  .fascia__board { justify-content: center; padding: 9px 16px; }
  .fascia__side { display: none; }
  .fascia__name { font-size: 27px; }
  .branches { margin-top: 6px; }
  .branches__scroll { height: 44px; gap: 8px; padding: 0 10px; }
  .branches__label { font-size: 15px; }
  .pane { margin-top: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 22px 40px -18px rgba(0, 0, 0, .8), 0 0 0 2px #06100c, 0 0 0 4px #17362b; }
  .vinyl, .board { gap: 4px; padding: 0 4px; }
  .vinyl__title { font-size: 28px; }
  .board__title { font-size: 26px; }
  .board__title img { width: 30px; height: 22px; margin-right: 8px; }
  .board__when { display: none; }
  .row__nav { display: none; }
  .vinyl__sub, .board__facts { font-size: 13px; letter-spacing: .08em; }
  .row__head { padding: 0 4px 8px; }
  .row__title { font-size: 20px; }
  .row__title img { width: 24px; height: 18px; }
  .rail { grid-auto-columns: calc(100% - 32px); }
  .ctl { padding: 0 4px; gap: 10px; margin-top: 12px; }
  .ctl__search { flex: 1 1 100%; max-width: none; }
  .ctl__sort { flex: 1 1 0; min-width: 0; }
  .ctl__sort select { min-width: 0; flex: 1; padding-right: 30px; font-size: 15px; }
  .ctl__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ctl__toggle { gap: 8px; font-size: 15px; }
  .status { padding: 0 4px; font-size: 14px; }
  .allcard__n { font-size: 52px; }
}
@media (max-width: 399px) {
  .ctl__toggle small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .card:hover { transform: none; }
}