/* =========================================================================
   The finish card

   The exteriors and the interiors as one design: each section a rounded
   card inset from the page, the pictures across its head, and beneath them
   two columns — the choice and the button that takes it to the left, the
   story of the finish on show to the right, from the card's centre line.
   Each card sets only what is its own: how tall its pictures are
   (--row-h, a share of the card's width), and anything its choices need
   (the interiors' second row of chips). See exteriors.css, interiors.css.

   The section as one rounded card, inset from the page: the pictures
   across its head, and beneath them two columns — the choice of cladding
   and the button that takes it to the left, the story of the one on show
   to the right, from the card's centre line.

   Laid out from the drawing (External Design Refinement, October 2026)
   by measurement rather than by eye. From a tablet up every length in it
   is a share of the card's width (cqw: the card is a size container), so
   it keeps the drawing's proportions at any width. The card cannot size
   its own padding that way — container units on the container itself
   read the next one out — so the children carry the insets instead.

   Behind it all, a light taken from the cladding on show. The drawing's
   warm grey is Ivory's own colour at under half its brightness,
   so each cladding lights the card the same way in its own colour, and
   the light moves between them rather than switching.
   ========================================================================= */
@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(228 219 198);
}

.finish-card {
  --card-px: clamp(1.25rem, 4.5vw, 5.5rem);
  --card-pt: clamp(1.75rem, 3.6vw, 4.25rem);
  --card-pb: clamp(2rem, 4vw, 4.5rem);
  --glow: var(--c-ivory);

  position: relative;
  isolation: isolate;
  container-type: inline-size;
  margin: var(--section-pad) var(--gutter-safe);
  padding: var(--card-pt) var(--card-px) var(--card-pb);
  background: none;
  transition: --glow 0.9s var(--ease-out);
}

.finish-card[data-variant="obsidian"] { --glow: var(--c-obsidian); }
.finish-card[data-variant="ivory"]    { --glow: var(--c-ivory); }
.finish-card[data-variant="forge"]    { --glow: var(--c-forge); }
.finish-card[data-variant="char"]     { --glow: var(--c-char); }
.finish-card[data-variant="amber"]    { --glow: var(--c-amber); }
.finish-card[data-variant="burgundy"] { --glow: var(--c-burgundy); }
.finish-card[data-variant="sage"]     { --glow: var(--c-sage); }
.finish-card[data-variant="tide"]     { --glow: var(--c-tide); }
.finish-card[data-variant="vine"]     { --glow: var(--c-vine); }

/* The surface, fitted to the drawing: a broad light across the top,
   brightest a quarter of the way in and falling away to the right; a
   second, tighter light under the pictures, right of centre; and the
   whole of it sinking to black, so the card has a top and sides but no
   foot. Each light is the cladding's colour, darkened. */
.finish-card::before,
.plan--card::before {
  --glow-a: color-mix(in srgb, var(--glow) 46.3%, #000);
  --glow-b: color-mix(in srgb, var(--glow) 58.2%, #000);

  content: "";
  position: absolute;
  /* under the section's name, which sits over the card (--card-top) */
  inset: var(--card-top, 0px) 0 0;
  z-index: -1;
  border-radius: var(--card-radius);
  clip-path: var(--card-notch-clip);
  background:
    var(--frost-sheen),
    linear-gradient(180deg,
      transparent 17.9cqw,
      rgb(0 0 0 / 0.58) 33.38cqw,
      rgb(0 0 0 / 0.95) 52cqw),
    var(--frost-grain),
    radial-gradient(43.2cqw 13.2cqw at 61.2cqw 32.6cqw,
      color-mix(in srgb, var(--glow-b) 78%, transparent),
      color-mix(in srgb, var(--glow-b) 15.8%, transparent) 72.4%,
      transparent),
    radial-gradient(219.8cqw 58.7cqw at 27.8cqw 4.7cqw,
      color-mix(in srgb, var(--glow-a) 80%, transparent),
      color-mix(in srgb, var(--glow-a) 37.6%, transparent) 26.5%,
      transparent),
    rgb(0 0 0 / 0.42);
  /* frosted: the colours above a wash over what is behind the card */
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
  box-shadow: var(--frost-rim);
}

/* SOLUM STUDIO | EXTERNAL FINISHES: the model, then what this is */
.finish-card__eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-tech);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  background: linear-gradient(90deg, #cfc6b3, #b6afa0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9c1af;
}

.finish-card__sep {
  padding-inline: 0.59em;
}

/* Choose your external finish: in the headlines' serif (Instrument
   Serif), each part in its own light */
.finish-card__choose {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  line-height: 1;
  color: #cfcfcf;
}

.finish-card__choose-lead {
  color: #ababab;
}

/* "your", in the colour of the finish on show — the drawing's cream is
   Ivory's own, a shade down — and moving with it as the card's light does */
.finish-card__choose em {
  font-style: italic;
  color: color-mix(in srgb, var(--glow) 92.5%, #000);
}

/* The chips' toggle (below) is only a toggle from a tablet up; on a phone
   the chips lie in their row as they always have. */
.swatch-toggle {
  display: contents;
}

/* Studio is not made in Obsidian: the card offers only what can be had */
.finish-card .swatch.is-pending {
  display: none;
}

.finish-card .section-head {
  display: block;
  margin: var(--space-7) 0 0;
}

/* ---- Phones: the drawing's phone layout ----
   One column, every length a share of the card's width as on a desktop:
   the pictures, then the choice, the story and the select button. The
   pictures and the chips run out past the card to the edge of the
   screen and fade there, so the row says it carries on. The smallest
   type is held at a readable size where the drawing's would go under. */
@media (max-width: 47.99rem) {
  .finish-card {
    --card-in: 6.36cqw;    /* the drawing's inset, from the card's edge */
    --to-screen: calc(var(--card-in) + var(--gutter-safe));

    display: flex;
    flex-direction: column;
    padding: 0 0 8cqw;
  }

  /* lit as the desktop card is, in the light's shape on a tall card */
  .finish-card::before,
  .plan--card::before {
    --glow-a: color-mix(in srgb, var(--glow) 57%, #000);
    --glow-b: color-mix(in srgb, var(--glow) 52%, #000);

    border-radius: 3cqw;
    clip-path: var(--card-notch-clip-tall);
    background:
      var(--frost-sheen),
      linear-gradient(180deg,
        transparent 72.9cqw,
        rgb(0 0 0 / 0.5) 146.8cqw,
        rgb(0 0 0 / 0.95) 166.6cqw),
      var(--frost-grain),
      radial-gradient(108.5cqw 147.2cqw at 126.5cqw -17.2cqw,
        color-mix(in srgb, var(--glow-b) 78%, transparent),
        color-mix(in srgb, var(--glow-b) 35.7%, transparent) 67.9%,
        transparent),
      radial-gradient(105.8cqw 120.9cqw at -9.1cqw -16cqw,
        color-mix(in srgb, var(--glow-a) 80%, transparent),
        color-mix(in srgb, var(--glow-a) 64.6%, transparent) 33.8%,
        transparent),
      rgb(0 0 0 / 0.42);
  }

  .finish-card .finish-card__choice {
    display: contents;
  }

  .finish-card .section-head,
  .finish-card .finish-card__about,
  .finish-card .enquire {
    margin-inline: var(--card-in);
  }

  /* the row: from the card's inset, out to the screen's edge */
  .finish-card .finish-card__track {
    gap: 3.43cqw;
    margin: 7.27cqw calc(-1 * var(--gutter-safe)) 0 0;
    padding-inline: var(--card-in) var(--to-screen);
    scroll-padding-inline: var(--card-in);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter-safe) - 8cqw), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter-safe) - 8cqw), transparent);
  }

  .finish-card .finish-card__track > figure {
    --img-radius: 1.8cqw;

    flex: 0 0 76.97cqw;
    aspect-ratio: 762 / 499;
    scroll-snap-align: start;
  }

  /* the pictures first, then the section's name under them, as drawn */
  .finish-card .finish-card__track {
    order: -1;
  }

  .finish-card__eyebrow {
    margin: 8.87cqw var(--card-in) 0;
    font-size: max(0.6875rem, 3.17cqw);
  }

  .finish-card .section-head {
    margin-top: 0;
  }

  /* the chips say what they are: their rows' names are for a wide screen */
  .finish-card .swatches__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }


  .finish-card__choose {
    margin: 6.3cqw 0 0;
    font-size: 7.15cqw;
    letter-spacing: 0.027em;
  }

  /* the chips: one row, the Plus's five swiped along it */
  .finish-card .swatches {
    flex-wrap: nowrap;
    gap: 1.8cqw;
    margin: 5.57cqw calc(-1 * var(--to-screen)) 0 0;
    padding: 4px var(--to-screen) 4px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter-safe) - 8cqw), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter-safe) - 8cqw), transparent);
  }

  .finish-card .swatches::-webkit-scrollbar {
    display: none;
  }

  .finish-card .section-head .swatch {
    --notch: 0.91em;
    --notch-corners: 0.36em 0.36em 0;

    flex: none;
    padding: 0.582em calc(1.2em - var(--track-mono)) 0.582em 1.2em;
    font-size: max(0.6875rem, 2.41cqw);
    letter-spacing: var(--track-mono);
    /* the page's label grey, as the chips have everywhere else: the
       quieter ink-4 measured 4.45:1 on the card behind them, under the
       4.5 that small type needs; ink-3 is 5.1 to 5.5 there */
    color: var(--c-ink-3);
  }

  .finish-card .section-head .swatch.is-selected {
    color: color-mix(in oklab, var(--swatch-colour) 45%, #fff);
  }

  /* Four or fewer on offer (the Studio's claddings, the palettes, the
     joinery): they need not be swiped, so they are not. The row stops at
     the card's inset, where the story's column ends, and the chips share
     it out, each growing from its own width, so every name is whole and
     the row's right edge meets the text's. Only the Plus's five keep the
     swiped row, drawn to the screen's edge and fading there. */
  .finish-card .swatches:not(:has(.swatch:not(.is-pending) ~ .swatch:not(.is-pending) ~ .swatch:not(.is-pending) ~ .swatch:not(.is-pending) ~ .swatch:not(.is-pending))) {
    margin-right: 0;
    padding-right: 0;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .finish-card .swatches:not(:has(.swatch:not(.is-pending) ~ .swatch:not(.is-pending) ~ .swatch:not(.is-pending) ~ .swatch:not(.is-pending) ~ .swatch:not(.is-pending))) .swatch {
    flex: 1 1 auto;
    padding-inline: 0.6em calc(0.6em - var(--track-mono));
    text-align: center;
  }

  /* The narrowest phones (320): the four palettes need 259px at full
     tracking and the row has 244, so the tracking and the sides come in
     a little, rather than any name being cut. */
  @media (max-width: 22rem) {
    .finish-card .swatches:not(:has(.swatch:not(.is-pending) ~ .swatch:not(.is-pending) ~ .swatch:not(.is-pending) ~ .swatch:not(.is-pending) ~ .swatch:not(.is-pending))) .swatch {
      letter-spacing: 0.2em;
      padding-inline: 0.35em calc(0.35em - 0.2em);
    }
  }

  /* the story, without its name: the chip says which it is */
  .finish-card .finish {
    margin-top: 5.45cqw;
  }

  .finish-card .finish__name {
    display: none;
  }

  /* the stack takes the height of the story on show, not the longest,
     so the spacing under it is the drawing's whichever is chosen; the
     one leaving fades out over it */
  .finish-card .finish {
    position: relative;
  }

  .finish-card .finish__copy:not(.is-shown) {
    position: absolute;
    inset: 0 0 auto;
  }

  .finish-card .finish__story {
    font-size: 4.77cqw;
    line-height: 1.22;
    color: #ced2d2;
  }

  .finish-card .finish__key {
    margin-top: 4.76cqw;
    font-size: 3.7cqw;
    line-height: 1.38;
    text-shadow: 0 0 3.1cqw color-mix(in oklab, var(--finish, transparent) 35%, transparent);
  }

  .finish-card .finish__standard {
    margin-top: 4.78cqw;
    max-width: none;
    font-size: max(0.75rem, 2.36cqw);
    line-height: 1.56;
    color: var(--c-ink-4);
  }

  .finish-card .enquire {
    order: 2;
    margin-top: 11.65cqw;
  }

  .finish-card .enquire__prompt {
    margin: 0;
    font-size: max(0.6875rem, 2.72cqw);
    line-height: 1.5;
    color: var(--c-ink-4);
  }

  .finish-card .enquire__link {
    --notch: 0.92em;

    width: auto;
    margin-top: 3.4cqw;
    min-height: max(2.5rem, 8.38cqw);
    padding: 0 1.57em;
    font-size: max(0.6875rem, 2.36cqw);
    color: #c8c9ca;
    /* sized to its label, but never past the column: "Select Burgundy ·
       Dark Oak" is 288px at 320 in a 244px column, and ran off the screen.
       Where it cannot fit, the label takes a second line instead. */
    max-width: 100%;
  }

  .finish-card .enquire__link .button__label {
    padding-block: 0.7em;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    text-wrap: balance;
  }
}

/* ---- From a tablet up: the drawing ---- */
@media (min-width: 48rem) {
  .finish-card {
    /* The card's unit. Every length in the card is a share of its width —
       1% of it, as drawn — unless the screen is too short for the card at
       that scale, when the unit is taken from the screen's height
       instead: the whole of the card, type, chips and gaps, comes down
       together, keeping the drawing's proportions, while the card itself
       keeps the page's edges. (The pictures' row is the card's width's
       to say, --row-h, and the scene fits it in what is left.) */
    --u: min(1cqw, 1.434vh);

    /* the section's name over the card: its line, and the gap under it */
    --card-top: calc(max(0.6875rem, calc(1.12 * var(--u))) + calc(1.66 * var(--u)));

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "track   track"
      "choice  about";
    /* a card held taller than its content (scene.js) gives the room to
       the columns, whose feet keep to the foot of the card */
    grid-template-rows: auto auto 1fr;
    align-items: stretch;
    padding: 0;
  }

  /* The section's name, over the card, keeps its place but is not shown:
     the band it holds over the card is where the tray settles when the
     card is at rest (tray.css). Still read out, as the section's name. */
  .finish-card__eyebrow {
    grid-area: eyebrow;
    margin: 0 calc(3.9 * var(--u)) calc(1.66 * var(--u));
    font-size: max(0.6875rem, calc(1.12 * var(--u)));
    opacity: 0;
    pointer-events: none;
  }

  /* the pictures: inset 4.1% from the top and 3.9% from the sides, and
     22.5% as tall as they are wide — unless the screen asks for shorter
     (scene.js may lower --conveyor-h, never raise it past this) */
  .finish-card .finish-card__track {
    grid-area: track;
    height: min(var(--conveyor-h), var(--row-h, 20.76cqw));
    margin: calc(4.09 * var(--u)) calc(3.9 * var(--u)) 0;
    padding-inline: 0;
  }

  .finish-card .finish-card__track > figure {
    --img-radius: calc(0.78 * var(--u));
  }

  /* the two columns, the left from the pictures' edge and the right from
     the card's centre line, each a column of its own so its foot can be
     set level with the other's */
  .finish-card .finish-card__choice,
  .finish-card .finish-card__about {
    display: flex;
    flex-direction: column;
    margin-top: calc(6.67 * var(--u));
    margin-bottom: calc(2.4 * var(--u));
  }

  .finish-card .finish-card__choice {
    grid-area: choice;
    margin-left: calc(3.9 * var(--u));
    padding-right: calc(3 * var(--u));
  }

  .finish-card .finish-card__about {
    grid-area: about;
    margin-right: calc(3.9 * var(--u));
  }

  .finish-card .section-head {
    margin: 0;
  }

  /* the question, level with the story's name opposite, and under it a
     line in the colour of the finish on show */
  .finish-card__choose {
    margin: 0;
    font-size: calc(3.32 * var(--u));
    letter-spacing: 0.022em;
  }

  .finish-card__choose::after {
    content: "";
    display: block;
    width: calc(37.9 * var(--u));
    height: 1px;
    margin-top: calc(2.19 * var(--u));
    background: color-mix(in srgb, var(--glow) 42%, transparent);
  }

  /* each row of chips under its name, the name in the mono of the page's
     labels; the chips a third larger than elsewhere on the page */
  .finish-card .swatches {
    flex-wrap: wrap;
    margin-top: calc(2.31 * var(--u));
    gap: calc(1.37 * var(--u)) calc(0.83 * var(--u));
  }

  .finish-card .swatches__label {
    flex-basis: 100%;
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: max(0.6875rem, calc(1.081 * var(--u)));
    line-height: 1;
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--c-ink-4);
  }

  .finish-card .swatch {
    --notch: 0.91em;
    --notch-corners: 0.36em 0.36em 0;

    padding: 0.582em calc(1.2em - var(--track-mono)) 0.582em 1.2em;
    font-size: max(0.6875rem, calc(1.081 * var(--u)));
    color: var(--c-ink-3);
  }

  /* the drawing's chips are a shade quieter than the page's */
  .finish-card .swatch.is-selected {
    color: color-mix(in oklab, var(--swatch-colour) 45%, #fff);
  }

  /* ---- The chips as a toggle ----
     As the blurbs' toggles are (scene.css), but a choice: the lit pill,
     the milkier glass with its colour a soft wash in its foot, sits under
     the option chosen and crosses to the next one chosen; a fainter wash
     of that colour lies in the bar under it; the name chosen is lit in its
     colour, the rest quiet, coming up under the pointer. The bar is as wide as its options need, each the width of
     the longest. Where the pill is and what colour it takes:
     ui/swatch-toggle.js (--at, --count, --lead-lit, --lead-x). The floor
     plan's sizes take the same toggle, lit in the page's silver-white. */
  :is(.finish-card, .plan) .swatch-toggle {
    --count: 4;
    --at: 0;
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 4px;
    border-radius: 999px;
    background:
      radial-gradient(calc(120% / var(--count)) 90% at var(--lead-x) 125%,
        color-mix(in oklab, var(--lead-lit) 22%, transparent),
        transparent 75%),
      var(--glass-frost);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--glass-edge), var(--glass-shadow);
    transition:
      --lead-lit 0.6s var(--ease-out),
      --lead-x 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  }

  :is(.finish-card, .plan) .swatch-toggle::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--count));
    translate: calc(var(--at) * 100%) 0;
    border-radius: 999px;
    background:
      radial-gradient(90% 85% at 50% 130%,
        color-mix(in oklab, var(--lead-lit) 55%, transparent),
        transparent 78%),
      var(--glass-lit-frost);
    box-shadow: var(--glass-lit-edge), var(--glass-lit-shadow);
    transition: translate 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
  }

  /* the bar's own pill until the script has placed it: no jump on load */
  :is(.finish-card, .plan) .swatch-toggle:not(.is-placed)::before {
    transition: none;
  }

  /* each option: the chip's glass, notch and lift gone, only its name */
  :is(.finish-card, .plan) .swatch-toggle .swatch {
    position: relative;      /* over the pill */
    /* close enough set that five fit the column on a laptop */
    padding: 0.85em 0.95em;
    border: 0;
    border-radius: 999px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    clip-path: none;
    font-family: var(--font-tech);
    font-weight: 400;
    font-size: max(0.6875rem, calc(1.081 * var(--u)));
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-align: center;
    color: var(--c-ink-3);
    transform: none;
    transition: color 0.45s ease 0.1s, text-shadow 0.45s ease 0.1s;
  }

  :is(.finish-card, .plan) .swatch-toggle .swatch::after {
    content: none;
  }

  :is(.finish-card, .plan) .swatch-toggle .swatch.is-selected {
    color: color-mix(in oklab, var(--swatch-colour) 45%, #fff);
    cursor: default;
  }

  :is(.finish-card, .plan) .swatch-toggle .swatch:focus-visible {
    outline: 1px solid var(--c-led-core);
    outline-offset: -3px;
  }

  /* the select line and its button, level at the foot with the small
     print opposite */
  .finish-card .enquire {
    margin-top: auto;
    padding-top: calc(3.15 * var(--u));
  }

  .finish-card .enquire__prompt {
    margin: 0;
    font-size: max(0.75rem, calc(1.267 * var(--u)));
    line-height: 1.5;
    color: var(--c-ink-4);
  }

  .finish-card .enquire__link {
    --notch: 0.92em;

    width: auto;
    margin-top: calc(1.5 * var(--u));
    min-height: calc(4 * var(--u));
    padding: 0 1.57em;
    font-size: max(0.6875rem, calc(1.0815 * var(--u)));
    color: #c8c9ca;
  }

  .finish-card .enquire__link .button__arrow {
    font-size: 1.147em;
  }

  /* the story */
  .finish-card .finish {
    margin-top: 0;
  }

  .finish-card .finish__name {
    margin: 0;
    font-size: max(0.6875rem, calc(1.07 * var(--u)));
    font-weight: 500;
    line-height: 1;
  }

  .finish-card .finish__story {
    margin-top: calc(0.78 * var(--u));
    font-size: calc(2.497 * var(--u));
    line-height: 1.22;
    color: #ced2d2;
  }

  .finish-card .finish__key {
    margin-top: calc(2.33 * var(--u));
    font-size: calc(1.985 * var(--u));
    line-height: 1.35;
    text-shadow: 0 0 calc(1.66 * var(--u)) color-mix(in oklab, var(--finish, transparent) 35%, transparent);
  }

  /* the small print at the column's foot, level with the button opposite:
     the line itself, or the interiors' stack of them, one per room */
  .finish-card .finish-card__about > .finish__standards {
    margin-top: auto;
    padding-top: calc(2 * var(--u));
  }

  .finish-card .finish__standards .finish__standard {
    align-self: end;   /* a shorter room's line ends where the longest's does */
    margin-top: 0;
    padding-top: 0;
  }

  .finish-card .finish__standard {
    margin-top: auto;
    padding-top: calc(2 * var(--u));
    max-width: 32em;
    font-size: max(0.75rem, calc(1.267 * var(--u)));
    line-height: 1.5;
    color: var(--c-ink-4);
  }
}

@media (min-width: 48rem) and (hover: hover) {
  :is(.finish-card, .plan) .swatch-toggle .swatch:not(.is-selected):not(.is-pending):hover {
    color: color-mix(in oklab, var(--swatch-colour) 55%, var(--c-ink-3));
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }
}


/* =========================================================================
   The pictures down the left

   The card as before — its surface, its rounding, its place on the
   screen — with the pictures given the room: down the left of the card,
   about three fifths of its width and the whole of its height, as they
   were before the cards; and down the right, in one column, the question,
   the toggles (smaller than they were); then, lower down, the story of
   the finish on show; and at the foot the way to select it and the small
   print. Three tiers: the question and its answer at the head, large;
   the story further down, over the action; the action, quiet.

   The two columns the card's children were in are let go of
   (display: contents), so their parts can be set in the card's own grid
   in that order.
   ========================================================================= */
@media (min-width: 48rem) {
  .finish-card {
    --side-gap: calc(3.6 * var(--u));
    /* the top block (the pictures, and the question and story beside them)
       set down a little from the card's edge, under the tray's notch, as
       far as the open band under it allows (scene.js); the foot (the way
       to select it, and the small print) stays where it is */
    --head-drop: 0px;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "eyebrow eyebrow"
      "track   head"
      "track   story"
      ".       ."
      "enquire small";
  }

  .finish-card .finish-card__choice,
  .finish-card .finish-card__about {
    display: contents;
  }

  /* the pictures, landscape: the row 1.8 times as wide as it is tall at
     the least, level at the head with the question opposite and at the
     foot with the story, and taller only where the column beside them is */
  .finish-card .finish-card__track {
    grid-area: track;
    align-self: stretch;
    height: auto;
    aspect-ratio: 1.8 / 1;
    /* held to the interiors' height on the exteriors' card, so the two
       cards' pictures are framed alike (scene.js) */
    min-height: var(--track-min, 0px);
    /* and as wide as its column, never wider for being taller: given a
       shape and a height, a grid item otherwise takes its width from them */
    justify-self: stretch;
    width: auto;
    min-width: 0;
    /* (--card-spare: a squarer screen's room, shared above and below,
       scene.js; and never closer to the card's edge than the notch the
       tray sits in allows, with a little air, my-solum.js) */
    margin: max(calc(4.09 * var(--u) + var(--head-drop) + var(--card-spare, 0px)),
        calc(var(--notch-d, 0px) + 0.5rem))
      0 0 calc(3.9 * var(--u));
  }

  .finish-card .finish-card__choice > .section-head,
  .finish-card .finish-card__about > .finish,
  .finish-card .finish-card__about > .finish__standard,
  .finish-card .finish-card__about > .finish__standards {
    margin-left: var(--side-gap);
    margin-right: calc(3.9 * var(--u));
  }

  /* set down from the pictures' top edge, so the column sits beside the
     pictures rather than hanging from the line of their head */
  .finish-card .finish-card__choice > .section-head {
    grid-area: head;
    margin-top: calc(8 * var(--u) + var(--head-drop) + var(--card-spare, 0px));
    margin-bottom: 0;
  }

  /* down to the foot of the pictures, its last line level with theirs
     (the room over it is the column's to spare: this is only the least it
     keeps, where the card is tight) */
  .finish-card .finish-card__about > .finish {
    grid-area: story;
    align-self: end;
    margin-top: calc(3.2 * var(--u));
  }

  /* The card's foot, across both columns: the way to select it under the
     pictures, the small print opposite, level at their feet. */
  .finish-card .finish-card__choice > .enquire {
    grid-area: enquire;
    align-self: end;
    margin: 0 0 calc(3.9 * var(--u)) calc(3.9 * var(--u));
    padding-top: calc(2.6 * var(--u));
  }

  /* the way to select it, as quiet as the small print under it */
  .finish-card .enquire__prompt {
    font-size: max(0.6875rem, calc(1.05 * var(--u)));
  }

  .finish-card .finish-card__about > .finish__standard,
  .finish-card .finish-card__about > .finish__standards {
    grid-area: small;
    align-self: end;
    margin-top: 0;
    margin-bottom: calc(3.9 * var(--u));
    padding-top: calc(2.6 * var(--u));
  }

  /* the question, the column's head: at the card's full size, unless
     the column is too narrow for it on one line (on a tall screen the
     card's unit grows faster than the column) */
  .finish-card__choose {
    font-size: min(calc(3.4 * var(--u)), 2.95cqw);
  }

  .finish-card__choose::after {
    width: 100%;
    margin-top: calc(1.6 * var(--u));
  }

  .finish-card .swatches {
    margin-top: calc(1.6 * var(--u));
    gap: calc(1 * var(--u)) 0;
  }

  .finish-card .swatches__label {
    font-size: max(0.6875rem, calc(0.9 * var(--u)));
  }

  /* the toggles, smaller: about two thirds of what they were */
  :is(.finish-card, .plan) .swatch-toggle {
    padding: 3px;
  }

  :is(.finish-card, .plan) .swatch-toggle::before {
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--count));
  }

  :is(.finish-card, .plan) .swatch-toggle .swatch {
    padding: 0.72em 0.7em;
    font-size: max(0.6875rem, calc(0.86 * var(--u)));
    letter-spacing: 0.11em;
    text-indent: 0.11em;
  }

  /* the story, a size down for the column */
  .finish-card .finish__story {
    font-size: calc(1.95 * var(--u));
    line-height: 1.24;
  }

  .finish-card .finish__key {
    margin-top: calc(1.8 * var(--u));
    font-size: calc(1.45 * var(--u));
  }

  .finish-card .finish__standard {
    font-size: max(0.6875rem, calc(1.05 * var(--u)));
  }
}

/* A small laptop, from where the cards are staged (56rem, scene.js) to
   78rem: the column a little wider, the question a size down so it keeps
   to one line, and the toggles set close, so five options (the Plus's
   claddings) are read whole. */
@media (min-width: 56rem) and (max-width: 78rem) {
  .finish-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .finish-card__choose {
    font-size: min(calc(3.2 * var(--u)), 3.7cqw);
  }

  :is(.finish-card, .plan) .swatch-toggle .swatch {
    font-size: 0.6875rem;
    padding-inline: 0.5em;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
  }
}

/* =========================================================================
   A narrower card: a tablet, up to where the cards are staged

   Too narrow for the pictures and a column beside them: the column would
   cut the toggles' names short and break the question over two lines.
   So the pictures go back across the head of the card, landscape, and
   under them the question and its toggles across the card's width, the
   story under those, and the way to select it at the foot, opposite the
   small print. The card is only staged where it is wider than this, so
   it simply runs as long as it needs to.
   ========================================================================= */
@media (min-width: 48rem) and (max-width: 55.99rem) {
  @supports (display: grid) {
    .finish-card {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto auto auto auto;
      grid-template-areas:
        "eyebrow eyebrow"
        "track   track"
        "head    head"
        "story   story"
        "enquire small";
    }

    .finish-card .finish-card__track {
      margin: calc(4.09 * var(--u)) calc(3.9 * var(--u)) 0;
    }

    .finish-card .finish-card__choice > .section-head,
    .finish-card .finish-card__about > .finish,
    .finish-card .finish-card__about > .finish__standard,
    .finish-card .finish-card__about > .finish__standards {
      margin-left: calc(3.9 * var(--u));
      margin-right: calc(3.9 * var(--u));
    }

    .finish-card .finish-card__choice > .section-head {
      margin-top: max(1.75rem, calc(4.5 * var(--u)));
    }

    .finish-card .finish-card__about > .finish {
      align-self: start;
      margin-top: max(1.75rem, calc(4.5 * var(--u)));
    }

    .finish-card .finish-card__about > .finish__standard,
    .finish-card .finish-card__about > .finish__standards {
      margin-left: calc(1.8 * var(--u));
      padding-top: max(1.5rem, calc(3.5 * var(--u)));
    }

    .finish-card .finish-card__choice > .enquire {
      padding-top: max(1.5rem, calc(3.5 * var(--u)));
    }

    /* the type held at sizes that still read on a narrower card */
    .finish-card__choose {
      font-size: max(1.75rem, calc(3.4 * var(--u)));
    }

    .finish-card .finish__story {
      font-size: max(1.25rem, calc(1.95 * var(--u)));
    }

    .finish-card .finish__key {
      font-size: max(1rem, calc(1.45 * var(--u)));
    }

    /* the toggles at their own size, the width of their names */
    :is(.finish-card, .plan) .swatch-toggle .swatch {
      font-size: 0.6875rem;
      padding-inline: 0.85em;
      letter-spacing: 0.14em;
      text-indent: 0.14em;
    }
  }
}

/* Set closer where the column is too narrow for every name at the
   toggle's own setting (ui/swatch-toggle.js), so none is cut short. */
@media (min-width: 48rem) {
  :is(.finish-card, .plan) .swatch-toggle.is-close .swatch {
    padding-inline: 0.5em;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
  }

  :is(.finish-card, .plan) .swatch-toggle.is-closer .swatch {
    padding-inline: 0.3em;
    letter-spacing: 0.02em;
    text-indent: 0.02em;
  }
}

/* The exteriors' card, beside its pictures: its one row of claddings sits
   in the middle of the room between the question's rule and the story,
   rather than tucked under the question. The question's block runs down
   to the story (the rows of both), keeping the story's height free at
   its foot (--story-h, ui/finish-card.js), and the toggle takes the
   middle of what is left. (The interiors' column, with two rows of
   chips, has no such room to spare.) */
@media (min-width: 56rem) {
  .exteriors--card .finish-card__choice > .section-head {
    grid-row: head-start / story-end;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: calc(var(--story-h, 0px) + 3.2 * var(--u));
  }

  .exteriors--card .finish-card__choice > .section-head > .finish-card__choose {
    margin-bottom: calc(1.6 * var(--u));
  }

  .exteriors--card .finish-card__choice > .section-head > .swatches {
    margin-block: auto;
  }
}

/* =========================================================================
   The notch

   Where the tray settles over a card (tray.css, my-solum.js), a notch is
   cut from the top edge of its surface for it to sit in: a trapezoid,
   centred, its walls slanting in to its floor. Cut, not painted, so the
   page shows through it: the surface's mask is the whole of it, less the
   notch's shape (drawn by my-solum.js at the size the tray needs, and
   shared by every card), taken away from it (xor).
   ========================================================================= */
.has-scene .finish-card::before,
.has-scene .plan--card::before,
.has-scene .journey--card::before,
.has-scene .mysolum.is-card .mysolum__card::before {
  -webkit-mask:
    var(--notch-shape, linear-gradient(transparent 0 0)) var(--notch-x, 50%) calc(-1 * var(--notch-lip, 0px)) / var(--notch-w, 0px) calc(var(--notch-d, 0px) + var(--notch-lip, 0px)) no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask:
    var(--notch-shape, linear-gradient(transparent 0 0)) var(--notch-x, 50%) calc(-1 * var(--notch-lip, 0px)) / var(--notch-w, 0px) calc(var(--notch-d, 0px) + var(--notch-lip, 0px)) no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: exclude, add;
}

/* Where shape() is to be had, the notch is drawn into the outline the
   surface is already cut to (its top corners), as one shape: drawn as a
   shape, at any density, where a mask is drawn as a picture and laid on
   whole pixels, and at a density that is not whole (a page zoomed) could
   leave the edge's last row standing across the notch, a faint line.
   (--card-clip: my-solum.js; the corners alone until it is set.) */
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .has-scene .scene__pin > .finish-card::before,
  .has-scene .scene__pin > .plan--card::before,
  .has-scene .scene__pin > .journey--card::before,
  .has-scene .mysolum.is-card .mysolum__card::before {
    clip-path: var(--card-clip, var(--card-notch-clip));
    -webkit-mask: none;
    mask: none;
  }
}

/* With the tray in the notch, the band each card kept over its surface
   for it is let go: the surface runs up to the card's top, so the card
   sits as far from the top of the screen as from the foot, and the room
   it gains goes to the air over its top block (--head-drop, scene.js).
   The finish cards' name, which held that band, is still read out. */
@media (min-width: 48rem) {
  .has-scene .finish-card,
  .has-scene .plan--card,
  .has-scene .journey--card {
    --card-top: 0px;
  }

  .has-scene .finish-card__eyebrow {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* =========================================================================
   Depth in the pictures

   Each picture set into its card rather than laid on it: a soft shadow
   inside its edge, a darker rim at the very edge, and the faintest light
   along its top, under the glass buttons and the room's name. And held a
   little larger than its frame, so it can move in it (ui/parallax.js):
   lagging the card on the way in and out (--depth-y), leaning away from
   the pointer over it (--lean-x, --lean-y), easing back when it leaves.
   ========================================================================= */
@media (min-width: 48rem) {
  .finish-card .finish-card__track > figure::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 0.28),
      inset 0 0 calc(2.6 * var(--u)) rgb(0 0 0 / 0.42),
      inset 0 1px 0 rgb(255 255 255 / 0.05);
    pointer-events: none;
  }
}

@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .finish-card .finish-card__track > figure img {
    scale: 1.07;
    translate:
      calc(var(--lean-x, 0) * -0.9 * var(--u))
      calc(var(--lean-y, 0) * -0.9 * var(--u));
    transform: translate3d(0, calc(var(--depth-y, 0) * -1.2 * var(--u)), 0);
    transition:
      opacity 0.55s var(--ease-out),
      translate 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
}