/* Prints (vision §E4): the shop's front door, and how prints are made. The Lamp is off here: the
   drawings are flat and evenly lit, previews sit on the achromatic --proof grey, and the only light
   on the page is on the paintings' own tiles at the end (vision §A "Light is for paint").
   Asymmetric on desktop (text on 1–4/5, drawings on 6–12); one column below 1024 px. */
@layer pages {
  .prints {
    display: block;
    --pr-head-cols: 1 / span 5;
  }
  .pr-defs {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
  }
  /* Owner placeholders: only where drafts show (DECISIONS §13). */
  :root:not([data-drafts]) [data-owner] {
    display: none !important;
  }

  /* ------------------------------------------------------------------ shared section parts */
  .pr-section {
    padding-block-start: var(--section);
  }
  .pr-section h2 {
    margin: 0;
  }
  .pr-section__head {
    display: grid;
    gap: var(--space-3);
    margin-block-end: clamp(var(--space-6), 4vw, var(--space-7));
    max-inline-size: 46rem;
  }
  .pr-lede {
    max-inline-size: 52ch;
    margin: 0;
    color: var(--ink-2);
    font-size: var(--step-1);
    line-height: 1.45;
    text-wrap: pretty;
  }
  .pr-note {
    max-inline-size: var(--measure);
    margin: var(--space-5) 0 0;
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.55;
  }
  .pr-note a {
    color: var(--ink);
  }
  .pr-owner {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    margin-block-start: var(--space-5);
    padding: var(--space-4);
    border: 1px dashed var(--lamp);
    border-radius: var(--radius-1);
    background: color-mix(in oklab, var(--lamp) 6%, transparent);
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.5;
  }
  .pr-owner p {
    margin: 0;
  }
  .pr-owner strong {
    color: var(--ink);
  }

  /* ------------------------------------------------------------------ 1. intro + size wall */
  .pr-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7) var(--gutter);
    padding-block-start: clamp(var(--space-6), 4.5vw, var(--space-8));
  }
  .pr-intro__text {
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }
  .pr-intro__text > * {
    margin: 0;
  }
  .pr-intro__title {
    font-size: var(--step-5);
    font-weight: 360;
    line-height: 0.98;
    letter-spacing: -0.015em;
  }
  .pr-intro__lead {
    max-inline-size: 40ch;
    color: var(--ink-2);
  }
  .pr-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-block-start: var(--space-3) !important;
  }
  /* Where the button and the link might not share a row in every face, they never do: the layout
     cannot change when the web font arrives. */
  @media (max-width: 479.98px), (min-width: 1024px) and (max-width: 1279.98px) {
    .pr-intro__actions {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  /* The eyebrow breaks at its dot below 1280 px, whatever the face. */
  .pr-intro__eyebrow > span {
    display: inline-block;
  }
  .pr-intro__eyebrow > .pr-intro__dot {
    padding-inline: 0.55em;
  }
  @media (max-width: 1279.98px) {
    .pr-intro__eyebrow > span {
      display: block;
    }
    .pr-intro__eyebrow .pr-intro__dot {
      display: none;
    }
  }
  .pr-wall__sizes > label {
    white-space: nowrap;
  }
  @media (max-width: 599.98px) {
    .pr-wall__sizes,
    .pr-crop__sizes {
      flex-wrap: nowrap;
    }
    .pr-wall__sizes > label,
    .pr-crop__sizes > label {
      padding-inline: 10px;
    }
  }
  @media (min-width: 1024px) {
    .pr-intro {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: center;
    }
    .pr-intro__text {
      grid-column: 1 / span 5;
    }
    .pr-wall {
      grid-column: 6 / -1;
    }
  }

  /* On this page: one quiet strip under the intro (title above the links in every face). */
  .pr-toc {
    display: grid;
    gap: var(--space-1);
    margin-block-start: clamp(var(--space-7), 5vw, var(--space-8));
    padding-block: var(--space-4);
    border-block: 1px solid var(--rule);
  }
  .pr-toc__title {
    margin: 0;
  }
  .pr-toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    margin: 0;
    padding: 0;
    counter-reset: pr-toc;
  }
  .pr-toc li {
    counter-increment: pr-toc;
  }
  .pr-toc a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55em;
    min-block-size: 40px;
    padding-block: 10px;
    color: var(--ink-2);
    font: 500 var(--step--1)/1.35 var(--font-ui);
    text-decoration: none;
    transition: color var(--dur-quick) var(--ease-set);
  }
  .pr-toc a::before {
    content: counter(pr-toc, decimal-leading-zero);
    font: 450 var(--step--2)/1 var(--font-mono);
    letter-spacing: 0.06em;
  }
  .pr-toc a:hover {
    color: var(--ink);
  }
  @media (max-width: 599.98px) {
    .pr-toc ol {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--gutter);
      inline-size: 100%;
    }
    .pr-toc a {
      min-block-size: 44px;
    }
  }

  /* ------------------------------------------------------------------ 2. sizes */
  .pr-sizes__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6) var(--gutter);
    align-items: start;
  }
  @media (min-width: 1024px) {
    .pr-sizes__body {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .pr-sizes__body > .table-scroll {
      grid-column: 1 / span 7;
    }
    .pr-sizes__aside {
      grid-column: 9 / -1;
    }
  }
  .pr-sizes__aside {
    display: grid;
    gap: var(--space-4);
  }
  .pr-size-table {
    font-size: var(--step-0);
  }
  .pr-size-table :is(th, td) {
    padding-block: var(--space-4);
  }
  .pr-size-table tbody th {
    font: 400 var(--step-1)/1.2 var(--font-display);
    white-space: nowrap;
  }
  .pr-size-table td {
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.92em;
    white-space: nowrap;
  }
  .pr-size-table td.num {
    color: var(--ink);
  }
  /* The size drawn solid on the wall above: an ink rule at the row's start (never colour alone). */
  .pr-size-table tbody tr[data-on] :is(th, td) {
    color: var(--ink);
  }
  .pr-size-table tbody tr[data-on] th {
    box-shadow: inset 2px 0 0 var(--ink);
  }
  .pr-size-table tbody th {
    padding-inline-start: var(--space-3);
  }
  .pr-tip {
    display: grid;
    gap: var(--space-1);
    margin-block-start: var(--space-2) !important;
    color: var(--ink);
    font-size: var(--step-0);
    line-height: 1.5;
  }
  .pr-tip__label {
    color: var(--ink-2);
    font: 600 var(--step--2)/1.3 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* The size wall: the four outlines over a 200 cm sofa beside a 170 cm figure, to scale. */
  .pr-wall {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    min-inline-size: 0;
    --floor: color-mix(in oklab, var(--ink) 6%, var(--ground));
  }
  .pr-wall__sizes {
    justify-self: start;
  }
  .pr-wall__stage {
    position: relative;
    aspect-ratio: 326 / 214;
  }
  .pr-wall__svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
  }
  .pr-wall__floor {
    fill: var(--floor);
  }
  .pr-wall__skirting {
    fill: color-mix(in oklab, var(--ink) 9%, var(--ground));
  }
  .pr-wall__sofa rect {
    fill: color-mix(in oklab, var(--ink) 12%, var(--ground));
  }
  .pr-wall__sofa .pr-wall__shade {
    fill: color-mix(in oklab, var(--ink) 9%, var(--ground));
  }
  .pr-wall__person {
    fill: none;
    stroke: var(--ink-2);
    stroke-width: 1.25px;
    stroke-linejoin: round;
  }
  .pr-wall__dims path,
  .pr-wall__dim {
    fill: none;
    stroke: var(--ink-2);
    stroke-width: 1px;
  }
  .pr-wall__print > rect:not(.pr-wall__art-ground) {
    fill: none;
    stroke: color-mix(in oklab, var(--ink-2) 75%, transparent);
    stroke-width: 1px;
    stroke-dasharray: 3 3;
    transition: fill var(--dur-settle) var(--ease-set), stroke var(--dur-settle) var(--ease-set);
  }
  .pr-wall__print .pr-wall__dim {
    display: none;
  }
  .pr-wall__print[data-on] > rect:not(.pr-wall__art-ground) {
    fill: color-mix(in oklab, var(--ink) 9%, transparent);
    stroke: var(--ink);
    stroke-width: 2px;
    stroke-dasharray: none;
  }
  .pr-wall__print[data-on] .pr-wall__dim {
    display: inline;
  }
  /* A real painting hung in the solid outline: flat, unlit, filled exactly as the lab fills the
     print. The outline then only draws the print's edge (no tint over the picture). */
  .pr-wall__stage[data-art] .pr-wall__print[data-on] rect:not(.pr-wall__art-ground) {
    fill: none;
    stroke-width: 1px;
  }
  .pr-wall__art {
    opacity: 0;
    transition: opacity var(--dur-quick) var(--ease-set);
  }
  .pr-wall__art[data-loaded] {
    opacity: 1;
  }
  .pr-wall__art-ground {
    stroke: none;
  }
  /* Physical left/top on purpose: the side labels are set vertically, and logical insets would
     follow their writing mode. */
  .pr-wall__label {
    position: absolute;
    left: var(--x);
    top: var(--y);
    translate: -50% -50%;
    padding: 1px 5px;
    background: var(--ground);
    color: var(--ink);
    font: 450 var(--step--2)/1.15 var(--font-mono);
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
  }
  .pr-wall__label[data-size]:not([data-on]) {
    display: none;
  }
  .pr-wall__label--side {
    padding: 5px 1px;
    writing-mode: vertical-rl;
  }
  .pr-wall__label--floor {
    background: var(--floor);
    color: var(--ink-2);
  }
  .pr-wall__caption {
    max-inline-size: 60ch;
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.5;
  }
  .pr-wall__now {
    display: block;
    margin-block-end: var(--space-1);
    color: var(--ink);
    font-size: var(--step-0);
  }
  .pr-wall__now strong {
    font-weight: 600;
  }
  /* Which painting hangs in the outline, and its trim at that size: two lines are kept for it from
     the start, so the caption never grows when the painting arrives. */
  .pr-wall__shown {
    display: block;
    min-block-size: 3em;
    margin-block-end: var(--space-2);
    color: var(--ink);
    font-size: var(--step--1);
    line-height: 1.5;
  }
  @media (max-width: 599.98px) {
    .pr-wall__shown {
      min-block-size: 4.5em;
    }
  }
  @media (max-width: 599.98px) {
    .pr-wall__label {
      font-size: 10.5px;
      padding-inline: 3px;
    }
    .pr-wall__label--side {
      padding: 3px 0;
    }
  }

  /* ------------------------------------------------------------------ 3. prices */
  .pr-prices__body {
    display: grid;
    gap: var(--space-5);
    max-inline-size: 58rem;
  }
  .pr-price-table {
    font-size: var(--step-0);
  }
  .pr-price-table thead th {
    text-align: end;
  }
  .pr-price-table thead td {
    border-block-end: 1px solid var(--edge);
  }
  .pr-price-table tbody th {
    font: 400 var(--step-1)/1.2 var(--font-display);
    color: var(--ink);
  }
  .pr-price-table td.num {
    font-size: var(--step-0);
    color: var(--ink);
  }
  .pr-price-table :is(th, td) {
    padding-block: var(--space-4);
  }
  .pr-addons {
    display: grid;
    margin: 0;
  }
  .pr-addons > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px var(--gutter);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--rule);
  }
  @media (min-width: 600px) {
    .pr-addons > div {
      grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
      align-items: baseline;
    }
  }
  .pr-addons dt {
    color: var(--ink);
    font-weight: 500;
  }
  .pr-addons dd {
    margin: 0;
    color: var(--ink-2);
  }
  .pr-addons .mono {
    color: var(--ink);
    font-size: 0.94em;
  }
  .pr-addons__note {
    color: var(--ink-2);
    font-size: var(--step--1);
  }

  /* Phones: both tables fit the screen (no sideways scrolling to find a price). */
  @media (max-width: 599.98px) {
    .prints .pr-size-table,
    .prints .pr-price-table {
      font-size: 0.875rem;
    }
    .prints .pr-size-table :is(th, td),
    .prints .pr-price-table :is(th, td) {
      padding-inline-end: 10px;
    }
    .prints .pr-size-table thead th,
    .prints .pr-price-table thead th {
      white-space: normal;
      letter-spacing: 0.06em;
      vertical-align: bottom;
    }
    .prints .pr-size-table tbody th,
    .prints .pr-price-table tbody th {
      font-size: 1.0625rem;
    }
    .prints .pr-size-table tbody th {
      padding-inline-start: var(--space-2);
    }
    .prints .pr-size-table td,
    .prints .pr-price-table td.num {
      font-size: 0.8125rem;
    }
  }

  /* ------------------------------------------------------------------ cards (paper, edges, frames) */
  .pr-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7) var(--gutter);
    margin: 0;
    padding: 0;
  }
  @media (min-width: 600px) {
    .pr-cards--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .pr-cards--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .pr-cards--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .pr-card {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-inline-size: 0;
  }
  .pr-card__name {
    margin: var(--space-3) 0 0;
    font: 600 var(--step-0)/1.3 var(--font-ui);
    letter-spacing: 0;
  }
  .pr-card__spec {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.5;
    text-wrap: pretty;
  }
  .pr-card__price {
    margin: 0;
    color: var(--ink);
    font: 450 var(--step--2)/1.4 var(--font-mono);
    letter-spacing: 0.04em;
  }
  /* Phones: a picture beside its words, so three or four cards stay short. */
  @media (max-width: 599.98px) {
    .pr-cards {
      gap: var(--space-5);
    }
    .pr-card {
      grid-template-columns: 38% minmax(0, 1fr);
      column-gap: var(--space-5);
      align-items: center;
    }
    .pr-card > :first-child {
      grid-row: 1 / span 4;
    }
    .pr-card__name {
      margin-block-start: 0;
    }
  }

  /* Paper swatches: two sheets of each paper, drawn to show its surface (nothing printed on them,
     so no effect ever sits over a picture). */
  .pr-swatch {
    --paper: #f2efe8;
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
  }
  .pr-swatch__sheet {
    position: relative;
    grid-area: 1 / 1;
    block-size: 84%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--paper);
    box-shadow:
      0 0 0 1px light-dark(rgb(0 0 0 / 0.07), rgb(0 0 0 / 0.25)),
      0 1px 2px var(--hang-contact-color),
      0 6px 16px light-dark(rgb(29 26 23 / 0.1), rgb(0 0 0 / 0.32));
  }
  .pr-swatch__sheet:first-child {
    translate: -14% 3%;
    rotate: -5deg;
    filter: brightness(0.94);
  }
  .pr-swatch__sheet:last-child {
    translate: 9% -2%;
    rotate: 3deg;
  }
  .pr-swatch__sheet::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  /* Matte: a fine, dry tooth and no shine. */
  .pr-swatch--matte {
    --paper: #f1eee6;
  }
  .pr-swatch--matte .pr-swatch__sheet::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .24 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    opacity: 0.5;
  }
  /* Lustre: a cooler white with a slight sheen running across it. */
  .pr-swatch--lustre {
    --paper: #f5f5f2;
  }
  .pr-swatch--lustre .pr-swatch__sheet::after {
    background:
      linear-gradient(122deg, transparent 26%, rgb(255 255 255 / 0.85) 43%, rgb(255 255 255 / 0.2) 52%, transparent 64%),
      linear-gradient(160deg, rgb(255 255 255 / 0.18), transparent 55%, rgb(0 0 0 / 0.05));
    mix-blend-mode: screen;
  }
  .pr-swatch--lustre .pr-swatch__sheet {
    background: linear-gradient(122deg, #ecebe7, #f7f7f4 45%, #e9e8e3);
  }
  /* Rag: a warm cotton sheet with soft fibres. */
  .pr-swatch--rag {
    --paper: #efe7d6;
  }
  .pr-swatch--rag .pr-swatch__sheet::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .45' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .22 0 0 0 1.5 -.68'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.7;
  }

  /* Canvas edge diagrams. */
  .pr-edge,
  .pr-frame {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
  }
  .pr-edge svg,
  .pr-frame svg {
    inline-size: min(62%, 10rem);
    block-size: auto;
    overflow: visible;
    filter: drop-shadow(0 1px 1.5px var(--hang-contact-color));
  }
  .pr-frame svg {
    inline-size: min(56%, 9rem);
  }
  .pr-edge__shade {
    fill: rgb(0 0 0 / 0.2);
  }
  .pr-edge__shade--top {
    fill: rgb(255 255 255 / 0.12);
  }
  .pr-edge__fold {
    fill: none;
    stroke: rgb(0 0 0 / 0.28);
    stroke-width: 0.75px;
  }
  .pr-edge__solid--black {
    fill: #1d1b19;
  }
  .pr-edge__solid--black.pr-edge__solid--top {
    fill: #2b2825;
  }
  .pr-edge__solid--white {
    fill: #e2ded6;
  }
  .pr-edge__solid--white.pr-edge__solid--top {
    fill: #f5f3ee;
  }
  /* In Lamp the black edge and the black frame need their outline against the dark wall. */
  .pr-edge__solid,
  .pr-frame__moulding {
    stroke: light-dark(rgb(0 0 0 / 0.16), rgb(255 255 255 / 0.2));
    stroke-width: 0.6;
  }
  .pr-frame__lip {
    fill: none;
    stroke: rgb(0 0 0 / 0.38);
    stroke-width: 0.8;
  }
  .pr-frame__mitre {
    fill: none;
    stroke: rgb(0 0 0 / 0.16);
    stroke-width: 0.6;
  }
  [data-frame="black"] .pr-frame__mitre,
  [data-frame="walnut"] .pr-frame__mitre {
    stroke: rgb(255 255 255 / 0.1);
  }

  /* ------------------------------------------------------------------ 7. the crop */
  .pr-crop {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7) var(--gutter);
    align-items: start;
  }
  .pr-crop__text {
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }
  .pr-crop__text > * {
    margin: 0;
  }
  .pr-crop__text > p:not(.pr-lede) {
    max-inline-size: 52ch;
    color: var(--ink);
    line-height: 1.6;
  }
  .pr-crop__sizes {
    margin-block-start: var(--space-3) !important;
  }
  .pr-crop__sizes:disabled {
    opacity: 0.6;
  }
  .pr-crop__sentence {
    min-block-size: 3em;
    color: var(--ink) !important;
    font-weight: 500;
  }
  @media (min-width: 1024px) {
    .pr-crop {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .pr-crop__text {
      grid-column: 1 / span 5;
    }
    .pr-crop__figure {
      grid-column: 7 / -1;
    }
  }
  .pr-crop__figure {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    min-inline-size: 0;
  }
  /* The proof: the photo flat on achromatic grey, the trim dimmed, the print's edge dashed. */
  .pr-proof {
    --proof-line: light-dark(rgb(0 0 0 / 0.42), rgb(255 255 255 / 0.5));
    --proof-ink: light-dark(#474747, #c9c9c9);
    container-type: size;
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 4;
    background: var(--proof);
  }
  .pr-proof__frame {
    --pad: clamp(26px, 9cqi, 56px);
    position: relative;
    inline-size: min(100cqi - 2 * var(--pad), (100cqb - 2 * var(--pad)) * var(--ar, 1));
    aspect-ratio: var(--ar, 1);
  }
  .pr-proof__frame > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  .pr-proof__dim {
    position: absolute;
    background: color-mix(in srgb, var(--proof) 70%, transparent);
    pointer-events: none;
    transition-property: inline-size, block-size, inset-inline, inset-block;
    transition-duration: var(--dur-settle);
    transition-timing-function: var(--ease-set);
  }
  .pr-proof__dim--l { inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--tx) * 50%); }
  .pr-proof__dim--r { inset-block: 0; inset-inline-end: 0; inline-size: calc(var(--tx) * 50%); }
  .pr-proof__dim--t { inset-inline: calc(var(--tx) * 50%); inset-block-start: 0; block-size: calc(var(--ty) * 50%); }
  .pr-proof__dim--b { inset-inline: calc(var(--tx) * 50%); inset-block-end: 0; block-size: calc(var(--ty) * 50%); }
  .pr-proof__edge {
    position: absolute;
    inset-block: calc(var(--ty) * 50%);
    inset-inline: calc(var(--tx) * 50%);
    border: 1px dashed rgb(255 255 255 / 0.92);
    outline: 1px solid rgb(0 0 0 / 0.38);
    pointer-events: none;
    transition: inset var(--dur-settle) var(--ease-set);
  }
  /* Room for the caption before the example painting arrives (nothing below moves). */
  .pr-crop__figure[data-state="loading"] .pr-crop__caption {
    min-block-size: 5.5rem;
  }
  .pr-crop__caption {
    display: grid;
    gap: var(--space-2);
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.5;
  }
  .pr-crop__caption a {
    color: var(--ink);
  }
  .pr-crop__caption .title {
    font-size: 1.08em;
  }
  .pr-crop__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    font: 450 var(--step--2)/1.4 var(--font-mono);
    letter-spacing: 0.04em;
  }
  .pr-crop__key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .pr-crop__key::before {
    content: "";
    inline-size: 18px;
    block-size: 12px;
  }
  .pr-crop__key--trim::before {
    background: light-dark(#b9b9b9, #5c5c5c);
    box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.42), rgb(255 255 255 / 0.5));
  }
  .pr-crop__key--edge::before {
    border: 1px dashed currentColor;
  }

  /* ------------------------------------------------------------------ 8. colour and texture */
  .pr-truths {
    display: grid;
    margin: 0;
    max-inline-size: 58rem;
    border-block-start: 1px solid var(--rule);
  }
  .pr-truths > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2) var(--gutter);
    padding-block: var(--space-5);
    border-block-end: 1px solid var(--rule);
  }
  @media (min-width: 600px) {
    .pr-truths > div {
      grid-template-columns: 9rem minmax(0, 1fr);
      align-items: baseline;
    }
  }
  .pr-truths dt {
    color: var(--ink-2);
    font: 600 var(--step--2)/1.3 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .pr-truths dd {
    margin: 0;
    max-inline-size: 60ch;
    color: var(--ink);
    font-size: var(--step-0);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .pr-truths__control {
    display: flex;
    margin-block-start: var(--space-3);
  }

  /* ------------------------------------------------------------------ 9. shipping */
  .pr-ship__body {
    display: grid;
    gap: var(--space-6);
    max-inline-size: 58rem;
  }
  .pr-ship__facts {
    display: grid;
    margin: 0;
    border-block-start: 1px solid var(--rule);
  }
  .pr-ship__facts > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px var(--gutter);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--rule);
  }
  @media (min-width: 600px) {
    .pr-ship__facts > div {
      grid-template-columns: 9rem minmax(0, 1fr);
      align-items: baseline;
    }
  }
  .pr-ship__facts dt {
    color: var(--ink);
    font-weight: 600;
  }
  .pr-ship__facts dd {
    margin: 0;
    color: var(--ink-2);
  }
  .pr-ship__facts .mono {
    color: var(--ink);
  }
  .pr-ship__facts .draft-note {
    margin-inline-start: var(--space-2);
  }
  .pr-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-7);
    margin: 0;
    padding: 0;
  }
  .pr-links .link-arrow {
    padding-block: 0.6em;
  }

  /* ------------------------------------------------------------------ 10. pick a painting */
  .pr-pick__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-5) var(--space-7);
    margin-block-end: var(--space-5);
  }
  .pr-pick__head > div {
    display: grid;
    gap: var(--space-3);
  }
  .pr-search {
    flex: 0 1 26rem;
    min-inline-size: min(100%, 18rem);
  }
  .pr-search__input {
    padding-inline-start: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918b83' stroke-width='1.6'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.25 15.25L20 20'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px 18px;
  }
  .pr-pick__status {
    margin: 0 0 var(--space-5);
    color: var(--ink-2);
    font-size: var(--step--1);
  }
  .pr-pick__status a {
    color: var(--ink);
  }
  /* Nothing matches: the status line is the empty state. */
  .pr-pick__status[data-empty] {
    max-inline-size: 30ch;
    padding-block: var(--space-6) var(--space-4);
    color: var(--ink);
    font: 400 var(--step-2)/1.25 var(--font-display);
    text-wrap: balance;
  }
  .pr-pick__grid:empty {
    min-block-size: 0;
  }
  .pr-pick__all {
    margin: var(--space-6) 0 0;
  }

  /* Justified rows, CSS only (vision §E2): each tile grows with its aspect ratio; the row's
     filler soaks up the rest of the last row. */
  .pr-pick__grid {
    --row-h: 230px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-7) var(--space-4);
    min-block-size: 200px;
  }
  .pr-pick__grid::after {
    content: "";
    flex-grow: 999;
  }
  /* Before the paintings arrive, about the height the 24 will take (rows of tile + label). */
  .pr-pick__grid[data-state="loading"] {
    min-block-size: calc(var(--rows, 5) * (var(--row-h) + 3.25rem + var(--space-7)));
  }
  .pr-pick__grid > .tile {
    flex: var(--ar) 1 calc(var(--ar) * var(--row-h));
    min-inline-size: 0;
    max-inline-size: calc(var(--ar) * var(--row-h) * 1.6);
  }
  .pr-pick__grid .label__title {
    --label-size: var(--step--1);
  }
  @media (max-width: 1023.98px) {
    .pr-pick__grid {
      --row-h: 180px;
      --rows: 7;
    }
  }
  @media (max-width: 599.98px) {
    .pr-pick__grid {
      --row-h: 132px;
      --rows: 10;
      gap: var(--space-6) var(--space-3);
    }
  }
  /* ------------------------------------------------------------------ 11. originals */
  .pr-originals {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    padding-block-end: var(--space-6);
  }
  .pr-originals__title {
    max-inline-size: 18ch;
    font-size: var(--step-4) !important;
    font-weight: 400;
    line-height: 1.04;
  }
  .pr-originals .button {
    margin-block-start: var(--space-3);
  }

  @media (prefers-contrast: more) {
    .pr-wall__print > rect:not(.pr-wall__art-ground) {
      stroke: var(--ink);
    }
  }
  @media (forced-colors: active) {
    .pr-wall__sofa rect,
    .pr-wall__floor,
    .pr-wall__skirting {
      fill: Canvas;
      stroke: CanvasText;
      stroke-width: 1px;
    }
    .pr-wall__person,
    .pr-wall__dims path,
    .pr-wall__dim,
    .pr-wall__print > rect:not(.pr-wall__art-ground) {
      stroke: CanvasText;
    }
    .pr-wall__print[data-on] > rect:not(.pr-wall__art-ground) {
      stroke: Highlight;
    }
    .pr-wall__label {
      forced-color-adjust: none;
      background: Canvas;
      color: CanvasText;
    }
    .pr-swatch,
    .pr-edge,
    .pr-frame,
    .pr-proof {
      forced-color-adjust: none;
    }
    .pr-proof__edge {
      border-color: Highlight;
    }
  }
}