/* The Valle Collection (plans index and the ten plan pages) and Granada. Everything else comes from site.css. */

/* A drawing sheet in the opening pair. On a wide sheet the plan itself is small, with white paper around it,
   so the picture is brought closer to the drawing: the page gives --zoom and --at (where the drawing sits).
   A tall sheet shows its top half; the page sets which part with object-position. Both open whole when pressed. */
.pair.land > figure.close > a { overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--hair); background: #fff; }
.pair.land > figure.close img { border-radius: 0; box-shadow: none; }

/* The row of jumps under the opener of a plan page. */
.sheet-body.lead > .chips { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hair); }

/* The filter under the plans heading. */
.plan-filter { margin: -16px 0 32px; }
.plan-rows + .plan-index { margin-top: 48px; }
.plan-index .name { white-space: nowrap; }

/* A plan film: shown at the full width of the page, plays only when pressed. */
.film video { aspect-ratio: 16 / 9; background: var(--ink); }
.film figcaption .text-link { font-size: 13.5px; margin-left: 6px; }

/* Plan drawings sit on white paper. */
.plan-sec .strip figure > a { display: block; }
.plan-sec .strip img, .plan-sec .split img { background: #fff; }

/* Spec rows and lists inside the text column of a split. */
.split .text .spec { margin-top: 28px; }
.num-sec .split .text > .spec:first-child, .plan-sec .split .text > .lede:first-child { margin-top: 0; }
.split .text .plain p, .split .text.plain > p:not(.lede) { margin-top: 14px; }
.has-sec .index .name { font-size: 20px; line-height: 1.3; }
.split.words { margin-top: 48px; }
.index.small .name { line-height: 1.3; }

/* Strip items that hold two links (a plan page and its film). */
.strip > div > a.card { display: block; text-decoration: none; }
.strip > div > a.card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--bronze); }
.strip > div > p { margin-top: 6px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }
.strip > div > p.film-link { margin-top: 8px; }
.strip > div > p a { white-space: nowrap; color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; text-decoration-thickness: 1px; }

.form .note a { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 3px; }

@media (max-width: 860px) {
  .plan-filter { margin-top: -8px; }
  .split.words { margin-top: 32px; }
}

/* Gate 4 (r1): the feature lists beside a plan hold short sentences, so they wrap instead of running off the page. */
.split.words .index.small .name { white-space: normal; }
/* The words under a plan: the lede across the reading width, then the feature list in two columns. */
.words > .lede { max-width: 760px; }
.words > .index { margin-top: 26px; }
.words .index.small .name { white-space: normal; }
/* The color plan beside its words: a tall drawing is held to the height of the words beside it, centred in its
   column, so the row has no hole at 1280 and wider. The full plan opens on press. */
.plan-sec .split > .media img { display: block; width: auto; max-width: 100%; max-height: 560px; margin-inline: auto; }
.plan-sec .split > .media figcaption { text-align: center; }
.plan-sec .index .name { white-space: normal; }