/* ============================================================
   Screen 07: layout structure.

   Every other structural screen changes something you can see on its own: a
   divider is there or it is not, a corner is round or it is square. This one
   changes proportion, and a proportion is invisible without a ruler. Four
   pages with the columns nudged a few points apart are four identical pages.

   So the ruler is drawn. The measure below is a real twelve-column grid, and
   the three disciplined answers place every block on an exact column count:
   what changes between them is which spans the page spends its columns on.
   Freeform is then the one answer that crosses the lines, and it reads as a
   decision because the thing it is breaking is on screen next to it.

   Two selectors per option, the shape screen 03 established. The first is the
   hover preview and belongs to this screen alone. The second is the committed
   answer and reaches every artboard marked data-carry, which is this screen
   plus boundaries, corners, and depth, so each later question is asked about
   the page as it has been chosen so far. The measure itself does not travel:
   it is an instrument for this question, drawn only where it is asked.
   ============================================================ */

/* ── The measure ─────────────────────────────────────────────
   Twelve columns and eleven gutters inside the page margins, so a column is
   (100% - 11 x 1.6%) / 12. The span variables are the width of n columns
   including the gutters they swallow, which is what a grid track needs and
   what makes an answer legible: --pvs-w7 against --pvs-w5 is a seven-five
   hero, and it is written that way rather than as 57.6667%.

   Percentages resolve against the box they are used in. Every section's
   content box is the page width, so spans hold there; the gallery sits inside
   one editorial track, so its gutter is scaled by that track's share. The
   ladder runs to ten because the widest gallery track is a ten-column one,
   and each answer's gallery gutter is derived from the number here. */
[data-carry] {
  --pvs-gut: 1.6%;
  --pvs-w1: 6.8667%;
  --pvs-w2: 15.3333%;
  --pvs-w3: 23.8%;
  --pvs-w4: 32.2667%;
  --pvs-w5: 40.7333%;
  --pvs-w6: 49.2%;
  --pvs-w7: 57.6667%;
  --pvs-w8: 66.1333%;
  --pvs-w9: 74.6%;
  --pvs-w10: 83.0667%;
}

/* The page's own margins are asymmetric under two of the answers, and a
   drawn grid makes it obvious when only some rows honor them. Chrome and the
   editorial band are brought onto the same measure as the hero and the proof
   band. Scoped to the structural artboards: screens 03 and 04 are judging
   color and glyphs, and their page is not under a ruler. */
[data-carry]:not(.picker-preview-layout) :is(.ps-nav, .ps-editorial, .ps-footer) {
  padding-right: var(--pvs-gutter-end);
}

/* The proof band divides in four, which on a twelve-column page means each
   claim takes three columns and each divider sits in a gutter. It was four
   equal shares of whatever was left after a fixed 25px gap, which lands a few
   pixels off every column line: close enough to pass unnoticed on a bare
   page, and the one row that looks wrong once the lines are drawn. */
[data-carry]:not(.picker-preview-layout) .ps-desktop > .ps-proof {
  grid-template-columns:
    var(--pvs-w3) auto
    var(--pvs-w3) auto
    var(--pvs-w3) auto
    minmax(0, 1fr);
  column-gap: calc(var(--pvs-gut) / 2);
}

/* Eleven hairlines, one down the middle of each gutter, rather than the
   filled columns a grid tool draws. Filled columns cover four fifths of the
   page and turn it into wallpaper at any tint dark enough to see, and the
   gutter is ten pixels wide at this size, so painting it whole gives a stripe
   rather than a line. The centre line carries the same information and
   carries it better: where two blocks are on the grid, the mark lands dead
   centre in the gap between them, and where one is not, it does not.

   Mixed from the artboard's own ink so the field survives a drenched ground,
   and kept under the page so nothing is read through it. */

/* The field is nailed to six and six and carries its own twelve columns
   rather than reading the answer's margins and the ladder above. A measure
   that re-fits itself to whatever page is on it is not a measure: the origin
   and the column width would both follow the answer, and four pages each
   checked against a ruler cut to fit would be four pages checked against
   nothing. The instrument is the same one under all four. What moves is the
   page standing on it, which is the whole of what this screen is asking. */
.picker-preview-layout .ps-desktop {
  position: relative;
  isolation: isolate;
}

.picker-preview-layout .ps-desktop::before {
  --pvs-field-col: 6.8667%;
  --pvs-field-gut: 1.6%;
  --pvs-mark: calc(var(--pvs-field-col) + var(--pvs-field-gut) / 2);

  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 6%;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 calc(var(--pvs-mark) - 0.5px),
    color-mix(in oklab, var(--pvs-ink) 5%, transparent)
      calc(var(--pvs-mark) - 0.5px) calc(var(--pvs-mark) + 0.5px),
    transparent calc(var(--pvs-mark) + 0.5px)
      calc(var(--pvs-field-col) + var(--pvs-field-gut))
  );
  pointer-events: none;
}

/* The handset has one column, so twelve bands would say nothing there. What
   the answer changes on a phone is the measure itself and whether anything
   is allowed to cross it, so the two content edges are the whole ruler. */
.picker-preview-layout .ps-phone-body {
  position: relative;
  isolation: isolate;
}

.picker-preview-layout .ps-phone-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: var(--pvs-phone-gutter, 6%);
  right: var(--pvs-phone-gutter, 6%);
  border-inline: 1px solid color-mix(in oklab, var(--pvs-ink) 5%, transparent);
  pointer-events: none;
}

/* ── Simple grid ─────────────────────────────────────────────
   Six and six, four cards of two, equal margins, bands of near-equal weight.
   Everything starts and stops on a line, and the thing to notice is that
   there is nothing to notice. */
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) [data-carry]:not(.picker-preview-layout) {
  --pvs-gutter: 6%;
  --pvs-gutter-end: 6%;
  --pvs-hero-cols: var(--pvs-w6) minmax(0, 1fr);
  --pvs-hero-gap: var(--pvs-gut);
  --pvs-editorial-cols: var(--pvs-w4) minmax(0, 1fr);
  --pvs-editorial-gap: var(--pvs-gut);
  /* Four equal cards of two columns need no ratio. The gap is the page
     gutter restated as a share of the eight-column track it sits inside. */
  --pvs-gallery-cols: repeat(4, minmax(0, 1fr));
  --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 66.1333);
  --pvs-section-align: start;
  --pvs-rows: 9.4% 45.5% 9% 27.8% 8.3%;
  --pvs-phone-gutter: 7%;
  --pvs-phone-gallery-cols: 1fr 1fr;
}

/* ── Balanced ────────────────────────────────────────────────
   The same grid, spent unevenly. The hero leans five-seven and the lead card
   takes three columns where its neighbours take two. Both breaks land on the
   lines: the emphasis is chosen, the discipline is not loosened. */
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="balanced"]:checked) [data-carry]:not(.picker-preview-layout) {
  --pvs-gutter: 6%;
  --pvs-gutter-end: 6%;
  --pvs-hero-cols: var(--pvs-w5) minmax(0, 1fr);
  --pvs-hero-gap: var(--pvs-gut);
  --pvs-editorial-cols: var(--pvs-w3) minmax(0, 1fr);
  --pvs-editorial-gap: var(--pvs-gut);
  /* Three columns then three of two. The tracks are fr in the same
     proportion as the spans, because fr cannot take a percentage variable,
     and the gap is the page gutter inside a nine-column track. */
  --pvs-gallery-cols: 23.8fr 15.3333fr 15.3333fr 15.3333fr;
  --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 74.6);
  --pvs-section-align: center;
  --pvs-rows: 9.4% 50.6% 9% 22.7% 8.3%;
  --pvs-phone-gutter: 6%;
  --pvs-phone-gallery-cols: 1.35fr 0.85fr;
}

/* Balanced needs no block of its own on this screen. The shared artboard is
   already an asymmetrically balanced page: margins of 5.5 and 3.2, a hero that
   splits 35.8 against the rest across a wide gap, and a lead card carrying more
   than the three beside it. Unequal parts that settle on a centered axis is
   what balance means, so the default is the answer and Simple grid is the one
   that has to be talked out of it, below. */

/* Simple grid, on this screen's own preview. The regular one: equal margins,
   whole-column spans, four identical cards, and a single gutter used as every
   gap down the page, so one rhythm runs from the nav to the footer. Every block
   hangs from the top of its band rather than floating in the middle of it.
   Nothing added, only proportions evened out. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout {
  --pvs-gutter: 6%;
  --pvs-gutter-end: 6%;
  /* Equal halves. Any split with a dominant mass is asymmetrical balance,
     which is the other answer. The copy's own bars are capped below so the
     half does not read as a half-page smear of text. */
  --pvs-hero-cols: var(--pvs-w6) minmax(0, 1fr);
  --pvs-hero-gap: var(--pvs-gut);
  /* The section copy is removed below, so the card row takes the whole band:
     four cards of exactly three columns, sitting directly under the proof
     band's four three-column claims. Two rows of the same four cells is what
     a simple grid looks like. */
  --pvs-editorial-cols: minmax(0, 1fr);
  --pvs-editorial-gap: 0%;
  --pvs-gallery-cols: repeat(4, minmax(0, 1fr));
  --pvs-gallery-gap: var(--pvs-gut);
  --pvs-section-align: start;
  --pvs-rows: 9.4% 45.5% 9% 27.8% 8.3%;
  --pvs-phone-gutter: 6%;
  --pvs-phone-gallery-cols: 1fr 1fr;
}

/* The one block that leaves: the section copy beside the cards. A text column
   against a card row is a two-weight composition, and this answer is the one
   without a second weight. Desktop only; the handset stack is sized in pixels
   and closes the gap itself. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-desktop .ps-editorial-copy,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-desktop .ps-editorial-copy {
  display: none;
}

/* The handset, on the same terms. The section copy goes for the same reason it
   went on the desktop, and its row goes with it so the two cards keep the
   flexible row at the bottom of the stack. The card gap comes down to the
   page's own gutter and the proof band's uneven inset is evened out: one
   margin, one gap, two equal cards. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-phone-body .ps-editorial-copy,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-phone-body .ps-editorial-copy {
  display: none;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-phone-body,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-phone-body {
  grid-template-rows: 31% auto auto auto 34px minmax(0, 1fr);
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-phone-body .ps-gallery,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-phone-body .ps-gallery {
  gap: 6%;
  margin-left: 0;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-phone-body .ps-proof,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-phone-body .ps-proof {
  padding-inline: 4%;
}

/* The bars keep a text measure instead of running to the column edge, so the
   copy reads as a compact block in its half rather than a wide one. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-headline i,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-headline i {
  width: 76%;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-headline i:last-child,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-headline i:last-child {
  width: 54%;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-copy i,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-copy i {
  width: 58%;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-copy i:last-child,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-copy i:last-child {
  width: 44%;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-eyebrow,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-eyebrow {
  width: 38%;
}

/* Editorial, on this screen's own preview. The option's own definition is
   the spec: uneven columns, with one of them clearly leading. Every edge
   still lands on the drawn lines; what changes is that the spans are ranked
   instead of evened. The hero gives the copy seven columns against the
   picture's five, and the headline takes the scale that span earns. The
   section band drops from four columns to three, ranked four, three, two
   left to right: a ladder, not a row. Balanced leans and settles around a
   centered axis; this page has a first column, a second, and a third. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) .picker-preview-layout {
  --pvs-gutter: 6%;
  --pvs-gutter-end: 6%;
  /* The leading column: copy at seven against the picture's five. Balanced
     leans the other way, so the two answers cannot be mistaken. */
  --pvs-hero-cols: var(--pvs-w7) minmax(0, 1fr);
  --pvs-hero-gap: var(--pvs-gut);
  --pvs-editorial-cols: var(--pvs-w3) minmax(0, 1fr);
  --pvs-editorial-gap: var(--pvs-gut);
  /* Three ranked columns in the nine-column track: four, three, two. The
     tracks are fr in the same proportion as the spans, and the fourth card
     is removed below; its columns are what pay for the lead's width. */
  --pvs-gallery-cols: 32.2667fr 23.8fr 15.3333fr;
  --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 74.6);
  --pvs-section-align: start;
  --pvs-rows: 8.5% 48% 9% 26.5% 8%;
  --pvs-phone-gutter: 6%;
}

/* The lead column's type claims the width its span gives it: a heavier
   headline over a shorter second line, and an eyebrow cut to a label rather
   than stretched across the wide measure. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout .ps-desktop .ps-headline i,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) .picker-preview-layout .ps-desktop .ps-headline i {
  width: 88%;
  height: 15px;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout .ps-desktop .ps-headline i:last-child,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) .picker-preview-layout .ps-desktop .ps-headline i:last-child {
  width: 52%;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout .ps-desktop .ps-eyebrow,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) .picker-preview-layout .ps-desktop .ps-eyebrow {
  width: 24%;
}

/* The copy holds a reading measure inside the wide column instead of running
   to its edge; the width is the lead's, the text is not obliged to fill it. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout .ps-desktop .ps-copy i,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) .picker-preview-layout .ps-desktop .ps-copy i {
  width: 56%;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout .ps-desktop .ps-copy i:last-child,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) .picker-preview-layout .ps-desktop .ps-copy i:last-child {
  width: 42%;
}

/* Three ranked columns, not four even ones. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout .ps-desktop .ps-gallery-item:nth-child(4),
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) .picker-preview-layout .ps-desktop .ps-gallery-item:nth-child(4) {
  display: none;
}

/* The handset ranks its two cards the same way: a clear lead and a short. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout .ps-phone-body .ps-gallery,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) .picker-preview-layout .ps-phone-body .ps-gallery {
  grid-template-columns: 1.7fr 0.7fr;
}

/* ── Editorial ───────────────────────────────────────────────
   The committed ranked page, carried to boundaries, corners, and depth. Same
   proportions as the preview above: the copy leading the hero at seven
   against five, and the section band's three columns ranked four, three,
   two, with the fourth card removed below. The headline scale-up is the
   preview's own instrument and stays there; what travels is the ranking. */
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) [data-carry]:not(.picker-preview-layout) {
  --pvs-gutter: 6%;
  --pvs-gutter-end: 6%;
  --pvs-hero-cols: var(--pvs-w7) minmax(0, 1fr);
  --pvs-hero-gap: var(--pvs-gut);
  --pvs-editorial-cols: var(--pvs-w3) minmax(0, 1fr);
  --pvs-editorial-gap: var(--pvs-gut);
  --pvs-gallery-cols: 32.2667fr 23.8fr 15.3333fr;
  --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 74.6);
  --pvs-section-align: start;
  --pvs-rows: 8.5% 48% 9% 26.5% 8%;
  --pvs-phone-gutter: 6%;
  --pvs-phone-gallery-cols: 1.7fr 0.7fr;
}

/* The ranked band is three columns on every screen that carries it. */
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="editorial"]:checked) [data-carry]:not(.picker-preview-layout) .ps-desktop .ps-gallery-item:nth-child(4) {
  display: none;
}

/* Freeform, on this screen's own preview. The option's own definition is the
   spec: blocks step out of the grid and overlap where it pays off. That is
   not a looser grid; it is the same measure with permission granted. So the
   base composition sits on the drawn lines exactly like the disciplined
   answers, margins on the field, spans on whole columns, and then specific
   blocks play against it: the picture is set down at a slight angle like a
   print laid on a table, the buttons cross onto its corner, and the card row
   bounces, leaning cards answering each other along the baseline. Held next
   to the grid it is teasing, each move reads as a decision; without the held
   grid it would read as the page being broken. The escape rules live under
   the drift flag below. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout {
  --pvs-gutter: 6%;
  --pvs-gutter-end: 6%;
  /* Copy at five, picture at seven: the picture is the block that leaves,
     so it gets the mass that makes the exit legible. */
  --pvs-hero-cols: var(--pvs-w5) minmax(0, 1fr);
  --pvs-hero-gap: var(--pvs-gut);
  --pvs-editorial-cols: var(--pvs-w3) minmax(0, 1fr);
  --pvs-editorial-gap: var(--pvs-gut);
  /* Four even cards on the lines. The stagger below breaks the row's
     baseline, not its columns: one axis escapes at a time. */
  --pvs-gallery-cols: repeat(4, minmax(0, 1fr));
  --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 74.6);
  --pvs-section-align: start;
  --pvs-rows: 9.4% 48% 8.4% 26.2% 8%;
  --pvs-phone-gutter: 6%;
  --pvs-drift: 1;
}

/* The handset's cards divide the row unevenly; its print tilts under the
   drift rules below instead of bleeding, so the angle stays whole. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout .ps-phone-body .ps-gallery,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="freeform"]:checked) .picker-preview-layout .ps-phone-body .ps-gallery {
  grid-template-columns: 1.5fr 0.9fr;
}

/* ── Freeform ────────────────────────────────────────────────
   The committed page, carried to boundaries, corners, and depth. Same terms
   as the preview above: the measure every other answer uses, with the drift
   flag up. What travels is the permission, not a different grid. */
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="freeform"]:checked) [data-carry]:not(.picker-preview-layout) {
  --pvs-gutter: 6%;
  --pvs-gutter-end: 6%;
  --pvs-hero-cols: var(--pvs-w5) minmax(0, 1fr);
  --pvs-hero-gap: var(--pvs-gut);
  --pvs-editorial-cols: var(--pvs-w3) minmax(0, 1fr);
  --pvs-editorial-gap: var(--pvs-gut);
  --pvs-gallery-cols: repeat(4, minmax(0, 1fr));
  --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 74.6);
  --pvs-section-align: start;
  --pvs-rows: 9.4% 48% 8.4% 26.2% 8%;
  --pvs-phone-gutter: 6%;
  --pvs-phone-gallery-cols: 1.5fr 0.9fr;
  --pvs-drift: 1;
}

/* ── Leaving the grid ────────────────────────────────────────
   Freeform's one move, made big: everything on the page sits exactly on the
   grid, straight and level, except the hero photograph, which is cut into an
   angular shape that starts mid-page, bleeds off the frame's right edge, and
   ends mid-band on a slanted bottom, its left side falling away on a steep
   diagonal. One block granted the permission; the rest of the page refusing
   to join in is what makes the shape read as a decision.

   The hero is a change of structure, not a nudge, so it is gated on the same
   selectors as the measure blocks above; the handset's echo rides the
   --pvs-drift flag inside its polygon, so the other answers keep a
   rectangle. */

/* The band loses its own gutter so the image can reach the frame edge; the
   copy re-applies it and keeps the page's left measure. */
#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout .ps-desktop .ps-hero,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="freeform"]:checked) [data-carry] .ps-desktop .ps-hero {
  position: relative;
  display: block;
  padding: 0;
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout .ps-desktop .ps-hero > .ps-image,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="freeform"]:checked) [data-carry] .ps-desktop .ps-hero > .ps-image {
  position: absolute;
  inset: 0;
  height: 100%;
  /* The shape: top edge from mid-page to the frame's right edge, right edge
     dropping to just past the band's midpoint, a slanted bottom running
     uphill to the right, and the steep diagonal falling back to the top. */
  clip-path: polygon(40% 0, 100% 0, 100% 78%, 66% 84%);
}

#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout .ps-desktop .ps-hero > .ps-hero-copy,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="freeform"]:checked) [data-carry] .ps-desktop .ps-hero > .ps-hero-copy {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 44%;
  height: 100%;
  align-content: center;
  padding-left: var(--pvs-gutter, 6%);
}

/* ── The handset ─────────────────────────────────────────────
   The same permission at pocket scale: the print's bottom edge takes the
   angular cut, running uphill to the right like the desktop shape. The cut
   depth rides the flag inside the polygon, so the other answers keep a
   rectangle. Everything else on the handset stays on its lines. */
[data-carry] .ps-phone-body > .ps-image {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pvs-drift, 0) * 16%), 0 100%);
}

/* ── The handset ─────────────────────────────────────────────
   One column still answers the question: in the margin, in how unevenly the
   two cards divide the row, and in whether anything is allowed to cross the
   measure. The picture is the block given that permission, both edges under
   Editorial and the outer edge alone under Freeform. The rhythm between
   blocks is left alone, because the handset's stack is sized in pixels and a
   couple of points of extra gap pushes the card row through the bottom of the
   frame at the narrowest window the picker supports. */
[data-carry]:not(.picker-preview-layout) .ps-phone-body {
  padding-inline: var(--pvs-phone-gutter, 6%);
}

/* The picture carries an explicit width, so a negative margin moves it rather
   than widening it. Both are named together or the bleed slides the block
   sideways instead of stretching it past the measure. */
[data-carry]:not(.picker-preview-layout) .ps-phone-body > .ps-image {
  margin-inline: var(--pvs-phone-bleed, 0);
  width: var(--pvs-phone-bleed-w, 100%);
}

[data-carry]:not(.picker-preview-layout) .ps-phone-body .ps-gallery {
  grid-template-columns: var(--pvs-phone-gallery-cols, 1.05fr 0.95fr);
}