/*
 * ============================================================================
 * THE WONDER ROOM — a walk through painted rooms. A SIGNATURE pack.
 * ============================================================================
 *
 * THE THESIS, in three sentences. Tracy Sanders plans a session by talking until an idea
 * arrives — "Sometimes that means laying on the pin end of a bowling alley. Sometimes it
 * means raining candy, building superheroes, or burying you in dog toys" — so the site is
 * her prop room and a visitor walks through it. Every section is a painted wall rather
 * than a white band, and every photograph hangs from a brass picture rail on a wire,
 * because her actual product is prints on walls rather than files on a phone. The luxury
 * is the finish — one display face at mural scale, a typed museum-plate voice for every
 * label, and photographs shown exactly as she made them — not the temperature.
 *
 * Cut from the comp Michael picked on 2026-09-06 ("I think she will love this, I know she
 * will want to change a few things but this is great"), on the branch
 * `comp/gallery-direction-b-wonder-room`, which is untouched and stays a demo pack.
 *
 * ----------------------------------------------------------------------------
 * THE ONE AESTHETIC RISK, NAMED: SATURATED COLOUR, IN A CATEGORY THAT SHOWS BLACK,
 * WHITE AND CREAM.
 *
 * The arrival is a marigold wall; the rooms repaint to cobalt, moss, plum and ember as a
 * visitor scrolls. Luxury photographers do not do this. It is held premium by four things
 * and nothing else: one display face used with discipline, a monospaced plate voice for
 * every label, generous air inside every room, and photographs that are never touched.
 *
 * If it is a notch too loud, the notch is `--wr-marigold` and `--wr-ember` below and
 * `--wr-grain` — every room reads from those, so pulling the saturation back is a
 * three-line change and nothing else moves.
 * ----------------------------------------------------------------------------
 *
 * ----------------------------------------------------------------------------
 * WHY THIS IS A SIGNATURE PACK, AND WHAT THAT DOES NOT LICENCE.
 *
 * ADR-0021's ruling of 2026-08-31 has two cases. A standard pack styles a chrome tool
 * somebody selected; a signature pack owns its chrome, because there "the chrome IS the
 * design and to change it would be a design change not a menu change". The vitrine — the
 * dark case the whole page sits inside, with her white-line mark on it — is that case: the
 * mark is drawn in white line and needs a dark ground behind it whatever colour the room
 * is, so the case is not an ornament on the masthead, it is why the masthead can exist
 * over a marigold wall at all.
 *
 * THE CONSTANT THE RULING TURNS ON HOLDS HERE. Menu CONTENT flows through. Every entry in
 * the bar and in the drawer is drawn from the tenant's own menu markup; nothing below
 * names a page, counts the entries, or breaks when somebody adds one. A page added in
 * PageStudio appears in the case with no code change, which is the whole test.
 * ----------------------------------------------------------------------------
 *
 * ----------------------------------------------------------------------------
 * WHAT THIS PACK OBEYS.
 *
 * It OVERRIDES ONLY (ADR-0021 decision 3). `site.css` is complete on its own and loads
 * first; a section this file never mentions still renders sanely on a Wonder Room site.
 *
 * PHOTOGRAPHS ARE NEVER RECOLOURED OR FILTERED (Michael, standing, 2026-08-25). There is
 * no `filter`, no `mix-blend-mode` and no tinted veil over an `img` anywhere in this file.
 * The one place a photograph sits under anything is the door, where a scrim of the room's
 * own wall colour sits BESIDE the image in the stacking order so words can be read on it —
 * and it lifts on hover so the photograph is seen whole.
 *
 * HER LOGO IS SACRED (same ruling). It is never recoloured, masked, cropped or redrawn.
 * It is given a dark ground and a size and nothing else is done to it.
 *
 * EVERY COLOUR IS DERIVED FROM THE TENANT'S OWN PALETTE. The five walls are the five brand
 * slots taken to a paint value: gold becomes the marigold foyer, the teal becomes cobalt,
 * the fifth slot becomes moss, the free slot becomes plum, and the primary becomes ember.
 * A tenant with a different palette gets their own five rooms. The mix partners are paint
 * anchors, not a second palette: each one is the darkening a bright brand colour needs
 * before type can sit on it, and nothing below reads a raw hex as a colour of its own.
 *
 * TYPE. The display face is the tenant's own heading choice — Fraunces on this tenant,
 * whose WONK and SOFT axes are the wink the design is built on. The plate voice is the
 * READER's own monospace, fetched from nobody: the concept used DM Mono, which is not in
 * this build's font library, and this is that stack's own declared fallback rather than a
 * new binary in the repository.
 * ----------------------------------------------------------------------------
 */

/*
 * ---------------------------------------------------------------------------
 * THE TOKENS. Everything below reads from these and nothing else.
 *
 * On `.site` and not on `:root`, which is the base's own rule and is load-bearing: the
 * tenant's palette arrives as inline custom properties on the `.site` wrapper, and a
 * `var()` written at `:root` substitutes there and would bake in the fallback instead.
 * ---------------------------------------------------------------------------
 */
.site {
  /* ---- the five walls, each a brand slot taken to paint ---- */
  --wr-marigold: color-mix(in srgb, var(--accent-gold) 70%, #c07a00);
  --wr-cobalt: color-mix(in srgb, var(--accent-teal) 30%, #16307a);
  --wr-moss: color-mix(in srgb, var(--brand-quinary, var(--accent-teal)) 30%, #14490c);
  --wr-plum: color-mix(in srgb, var(--brand-free, var(--accent)) 40%, #3c1258);
  --wr-ember: color-mix(in srgb, var(--accent) 55%, #7c1d00);

  /* ---- the case, the paper and the inks ---- */
  --wr-case: var(--ground-dark);
  --wr-case-lift: color-mix(in srgb, var(--ground-dark) 88%, var(--accent-gold));
  --wr-paper: color-mix(in srgb, var(--accent-gold) 11%, #fff);
  --wr-paper-dim: color-mix(in srgb, var(--accent-gold) 34%, #8a7658);
  --wr-ink: color-mix(in srgb, var(--accent) 18%, #000);
  --wr-ink-soft: color-mix(in srgb, var(--accent) 30%, #3a2a12);
  --wr-brass: color-mix(in srgb, var(--accent-gold) 62%, #6b4a00);

  /* ---- the room, redeclared per section. These are the foyer's ---- */
  --wall: var(--wr-marigold);
  --on-wall: var(--wr-ink);
  --on-wall-soft: var(--wr-ink-soft);
  --plaque: var(--wr-plum);
  --plaque-ink: var(--wr-paper);

  /* ---- type ---- */
  --wr-display: var(--site-font-display, Georgia, 'Times New Roman', serif);
  --wr-body: var(--site-font-body, system-ui, sans-serif);
  /* The museum plate. The reader's own monospace: nothing is fetched to draw a label. */
  --wr-plate: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  --wr-1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --wr-2: clamp(1rem, 0.95rem + 0.25vw, 1.14rem);
  --wr-3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --wr-4: clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --wr-5: clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --wr-6: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);

  /* ---- the case and the rhythm ---- */
  --wr-edge: 13px;
  --wr-bar: 74px;
  --wr-room: clamp(3.4rem, 9vw, 8rem);
  --wr-drop: 34px;
  --wr-hop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wr-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --wr-grain: 0.13;

  background: var(--wr-case);
  font-family: var(--wr-body);
  /* The case's own three edges. The bar at the top is the header itself. */
  border-inline: var(--wr-edge) solid var(--wr-case);
  border-block-end: var(--wr-edge) solid var(--wr-case);
}

@media (max-width: 700px) {
  .site {
    --wr-edge: 6px;
    --wr-bar: 60px;
    --wr-drop: 20px;
  }
}

/*
 * ---------------------------------------------------------------------------
 * 1. THE ROOMS.
 *
 * Every top-level section is a painted wall. The colour is chosen by POSITION, cycling on
 * six, which is `main-street.css`'s facade recipes at section scale and for the same
 * reason: a pack may not know what a page is called, and a rhythm that reads as designed
 * has to survive somebody adding a section in the middle of it.
 *
 * The FIRST room on a page is the exception and it is drawn from the menu: whichever entry
 * carries `aria-current`, cycling on five, gives the arrival its own wall. So Seniors opens
 * cobalt, Families moss, Headshots plum — each session lives in a room of its own — and a
 * page added to the menu simply takes the next colour with no code change. That is menu
 * CONTENT flowing through the chrome, which is the ruling this pack is written under.
 *
 * The grain and the raking light are what stop a saturated ground reading as a colour
 * blob. Both are pseudo-elements behind the content, so nothing they do can cover a word.
 * ---------------------------------------------------------------------------
 */
.site-main > * {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--wr-room);
  background: var(--wall);
  color: var(--on-wall);
}

/* Plaster. One repeating noise tile, at 13%, multiplied into whatever the wall is. */
.site-main > *::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--wr-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Light falling into the room from the upper left, and the corner it does not reach. */
.site-main > *::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(115% 78% at 16% -14%, rgb(255 255 255 / 20%), transparent 60%),
    radial-gradient(90% 60% at 88% 112%, rgb(0 0 0 / 15%), transparent 62%);
}

/* ---- the six-room walk, from the second section down ---- */

.site-main > :nth-child(6n + 2) {
  --wall: var(--wr-case);
  --on-wall: var(--wr-paper);
  --on-wall-soft: var(--wr-paper-dim);
  --plaque: var(--accent-gold);
  --plaque-ink: var(--wr-ink);
}

.site-main > :nth-child(6n + 3),
.site-main > :nth-child(6n + 5) {
  --wall: var(--wr-paper);
  --on-wall: var(--wr-ink);
  --on-wall-soft: var(--wr-ink-soft);
  --plaque: var(--wr-plum);
  --plaque-ink: var(--wr-paper);
}

.site-main > :nth-child(6n + 4) {
  --wall: var(--wr-cobalt);
  --on-wall: var(--wr-paper);
  --on-wall-soft: color-mix(in srgb, var(--wr-paper) 78%, var(--accent-teal));
  --plaque: var(--accent-gold);
  --plaque-ink: var(--wr-ink);
}

.site-main > :nth-child(6n + 6) {
  --wall: var(--wr-plum);
  --on-wall: var(--wr-paper);
  --on-wall-soft: color-mix(in srgb, var(--wr-paper) 76%, var(--brand-free, var(--accent)));
  --plaque: var(--brand-quinary, var(--accent-gold));
  --plaque-ink: var(--wr-ink);
}

.site-main > :nth-child(6n + 7) {
  --wall: var(--wr-moss);
  --on-wall: var(--wr-paper);
  --on-wall-soft: color-mix(in srgb, var(--wr-paper) 78%, var(--brand-quinary, var(--accent-gold)));
  --plaque: var(--accent-gold);
  --plaque-ink: var(--wr-ink);
}

/*
 * ---- the arrival's own room, taken from where the page sits in the menu ----
 *
 * Five walls on five positions, and a sixth entry starts the cycle again. Nothing here
 * names a page: it is the tenant's own menu, counted.
 */
.site:has(.site-header .menu > li:nth-child(5n + 2) > a[aria-current='page']) .site-main > :first-child {
  --wall: var(--wr-cobalt);
  --on-wall: var(--wr-paper);
  --on-wall-soft: color-mix(in srgb, var(--wr-paper) 78%, var(--accent-teal));
  --plaque: var(--accent-gold);
  --plaque-ink: var(--wr-ink);
}

.site:has(.site-header .menu > li:nth-child(5n + 3) > a[aria-current='page']) .site-main > :first-child {
  --wall: var(--wr-moss);
  --on-wall: var(--wr-paper);
  --on-wall-soft: color-mix(in srgb, var(--wr-paper) 78%, var(--brand-quinary, var(--accent-gold)));
  --plaque: var(--accent-gold);
  --plaque-ink: var(--wr-ink);
}

.site:has(.site-header .menu > li:nth-child(5n + 4) > a[aria-current='page']) .site-main > :first-child {
  --wall: var(--wr-plum);
  --on-wall: var(--wr-paper);
  --on-wall-soft: color-mix(in srgb, var(--wr-paper) 76%, var(--brand-free, var(--accent)));
  --plaque: var(--brand-quinary, var(--accent-gold));
  --plaque-ink: var(--wr-ink);
}

.site:has(.site-header .menu > li:nth-child(5n + 5) > a[aria-current='page']) .site-main > :first-child {
  --wall: var(--wr-ember);
  --on-wall: var(--wr-paper);
  --on-wall-soft: color-mix(in srgb, var(--wr-paper) 80%, var(--accent));
  --plaque: var(--accent-teal);
  --plaque-ink: var(--wr-ink);
}

/*
 * ---------------------------------------------------------------------------
 * 2. TYPE.
 *
 * One display face, worked at four sizes, with the optical-size and WONK axes turned up so
 * the wink is in the letterforms rather than in an ornament. Below `h2` every voice is the
 * body face or the plate — a display face on a card heading is where an editorial page
 * turns into a brochure.
 * ---------------------------------------------------------------------------
 */
.site-main h1,
.site-main h2 {
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.026em;
  text-wrap: balance;
  color: var(--on-wall);
}

.site-main h1 {
  font-size: var(--wr-6);
  line-height: 0.87;
  margin: 0;
}

.site-main h2 {
  font-size: var(--wr-5);
  margin: 0 0 var(--gap);
}

/*
 * A section heading is a mural, and a mural is two or three lines rather than one long
 * one. Capped in characters rather than pixels so it breaks at the same place at every
 * width — a heading that is one line at 1440 and four on a phone is two different designs.
 */
.card-list > h2,
.quotes > h2,
.build > h2,
.gallery > h2,
.faq > h2,
.contact > h2,
.split-words > h2,
.cta-band-words > h2 {
  max-width: 20ch;
}

.site-main h3,
.site-main h4 {
  font-family: var(--wr-body);
  font-weight: 700;
  letter-spacing: -0.006em;
  color: var(--on-wall);
}

.site-main p,
.site-main li,
.site-main dd,
.site-main address {
  color: var(--on-wall);
}

.site-main a {
  color: var(--on-wall);
}

/* The plate: every kicker, caption, label and small print, in the reader's monospace. */
.hero-sub::before,
.quotes-kicker,
.build-kicker,
.gallery-caption,
.card-list > h2 + .cards .card-action,
.site-footer-legal,
.build-plate,
.build-count,
.build-choice-mark,
.build-result-set {
  font-family: var(--wr-plate);
}

.quotes-kicker,
.build-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  color: var(--on-wall-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

/* The rule that hangs off a plate, drawn rather than typed. */
.quotes-kicker::before,
.build-kicker::before {
  content: '';
  flex: none;
  width: 1.6rem;
  height: 1px;
  background: currentcolor;
}

/*
 * ---------------------------------------------------------------------------
 * 3. THE PLAQUE — the only button shape on the site.
 *
 * A brass plate that sits proud of the wall and presses INTO it when touched. Never a
 * pill, never a bare underlined link. One shape, everywhere, so a visitor learns it once.
 * ---------------------------------------------------------------------------
 */
.site-main .hero-action a,
.site-main .split-action a,
.site-main .cta-band-action a,
.site-main .card-action a,
.site-main .build-take,
.site-main .contact-form-submit,
.site-main .build-next,
.site-main .build-again {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: 0;
  font-family: var(--wr-plate);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--plaque-ink);
  background: var(--plaque);
  box-shadow: 6px 6px 0 0 color-mix(in srgb, var(--wr-case) 74%, transparent);
  transition:
    transform 0.22s var(--wr-hop),
    box-shadow 0.22s var(--wr-hop);
}

.site-main .hero-action a::after,
.site-main .split-action a::after,
.site-main .cta-band-action a::after,
.site-main .card-action a::after,
.site-main .build-take::after {
  content: '\2192';
  transition: transform 0.22s var(--wr-hop);
}

.site-main .hero-action a:hover,
.site-main .split-action a:hover,
.site-main .cta-band-action a:hover,
.site-main .card-action a:hover,
.site-main .build-take:hover,
.site-main .contact-form-submit:hover,
.site-main .hero-action a:focus-visible,
.site-main .split-action a:focus-visible,
.site-main .cta-band-action a:focus-visible,
.site-main .card-action a:focus-visible,
.site-main .build-take:focus-visible,
.site-main .contact-form-submit:focus-visible {
  color: var(--plaque-ink);
  background: var(--plaque);
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--wr-case) 74%, transparent);
}

.site-main .hero-action a:hover::after,
.site-main .split-action a:hover::after,
.site-main .cta-band-action a:hover::after,
.site-main .card-action a:hover::after,
.site-main .build-take:hover::after {
  transform: translateX(4px);
}

.site-main .hero-action a:active,
.site-main .split-action a:active,
.site-main .cta-band-action a:active,
.site-main .card-action a:active,
.site-main .build-take:active,
.site-main .contact-form-submit:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 0 transparent;
}

/* The quiet plaque: an outline that fills on touch. Used where two acts sit together. */
.site-main .build-next,
.site-main .build-again {
  color: var(--on-wall);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-wall) 55%, transparent);
}

.site-main .build-next:hover,
.site-main .build-again:hover,
.site-main .build-next:focus-visible,
.site-main .build-again:focus-visible {
  color: var(--wall);
  background: var(--on-wall);
  box-shadow: inset 0 0 0 1.5px var(--on-wall);
}

/*
 * The ring, on every ground. The base points it at the accent, which is invisible on the
 * ember wall and nearly so on the marigold one; here it is the room's own accent with a
 * halo of the room's ink behind it, so it reads on all seven grounds.
 */
.site :focus-visible {
  outline: 3px solid var(--plaque);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--on-wall) 45%, transparent);
}

/*
 * ---------------------------------------------------------------------------
 * 4. THE PICTURE RAIL.
 *
 * Her whole business is prints on walls, so no photograph on this site floats in a box:
 * every one hangs from a brass rail on a wire, inside a paper mount, with a shadow that
 * says it is standing off the wall. The rail is drawn on the container, the wire and its
 * hook on the picture, and the mount is the picture's own padding.
 *
 * The crooked print is the one piece of mischief in the pack, and it is on the FIRST
 * picture of a wall and the third card of a shelf — never on a face in a portrait band,
 * where a tilt reads as a mistake rather than as a joke. It straightens when touched.
 * ---------------------------------------------------------------------------
 */
.hero-picture,
.split-picture,
.card-picture,
.gallery-picture,
.build-result-picture {
  position: relative;
  /*
   * The base clips a gallery picture to its own box, which cut the rail's bleed off at
   * both ends and would take the corners off a crooked print. Nothing here needs a clip:
   * a door's crop is done by `overflow` on the CARD, not on the picture.
   */
  overflow: visible;
  padding-top: var(--wr-drop);
  background: none;
  border-radius: 0;
}

/* the rail, bleeding a little past the mount so a row reads as one continuous brass line */
.hero-picture::before,
.split-picture::before,
.gallery-picture::before,
.card-picture::before {
  content: '';
  position: absolute;
  inset-inline: -0.6rem;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--wr-brass) 4%, var(--wr-brass) 96%, transparent);
  box-shadow: 0 3px 0 0 rgb(0 0 0 / 28%);
}

/*
 * The wire and its hook. One drawing rather than two pseudo-elements: the hook is a
 * rotated square and a `::after` cannot be both a 1px wire and a 9px diamond at once.
 */
.hero-picture::after,
.split-picture::after,
.gallery-picture::after,
.card-picture::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 11px;
  height: var(--wr-drop);
  transform: translateX(-50%);
  background: var(--wr-brass);
  mask:
    linear-gradient(#000, #000) center bottom / 1px calc(100% - 5px) no-repeat,
    conic-gradient(from 45deg at 50% 50%, #000 0 25%, transparent 0 100%) center top / 9px 9px no-repeat;
  opacity: 0.85;
}

.hero-picture img,
.split-picture img,
.card-picture img,
.gallery-picture img,
.build-result-picture {
  display: block;
  transform-origin: 50% 0;
  /*
   * A print is capped by the height of the wall it hangs on. Her portraits are 2:3, and
   * uncapped one of them makes a band twelve hundred pixels tall with the words floating
   * in the middle of it. `width: auto` beside the cap is what keeps her framing: a tall
   * print gets SMALLER, never cropped and never squashed to fit.
   */
  width: auto;
  max-width: 100%;
  max-height: 76vh;
  margin-inline: auto;
  border-radius: 0;
  background: var(--wr-paper);
  padding: clamp(7px, 1vw, 13px);
  box-shadow:
    0 2px 2px rgb(0 0 0 / 18%),
    0 18px 34px -14px rgb(0 0 0 / 55%);
  transition:
    box-shadow 0.5s var(--wr-settle),
    transform 0.6s var(--wr-settle);
}

/*
 * The mischief, and it is on the PRINT rather than on the picture — the rail and the wire
 * are drawn on the container, so tilting the container tilted the rail with it, and a
 * picture rail that leans is not a picture rail. The print hangs crooked on a level rail,
 * which is the joke the comp makes, and it straightens when touched.
 *
 * Never on a door: a card list carrying links is five faces in portrait frames, and the
 * third one tilted read as a mistake rather than as a joke — and clipped its own corners
 * against the tile it fills.
 */
.gallery-item:nth-child(6n + 4) .gallery-picture img,
.card-list:not(:has(.card-action)) .card:nth-child(7n + 3) .card-picture img {
  transform: rotate(-2.2deg);
}

.gallery-item:nth-child(9n + 8) .gallery-picture img {
  transform: rotate(1.6deg);
}

.gallery-item:nth-child(6n + 4) .gallery-picture:hover img,
.gallery-item:nth-child(6n + 4):focus-within .gallery-picture img,
.gallery-item:nth-child(9n + 8) .gallery-picture:hover img,
.gallery-item:nth-child(9n + 8):focus-within .gallery-picture img,
.card-list:not(:has(.card-action)) .card:nth-child(7n + 3) .card-picture:hover img,
.card-list:not(:has(.card-action)) .card:nth-child(7n + 3):focus-within .card-picture img {
  transform: rotate(0deg);
}

/*
 * ---------------------------------------------------------------------------
 * 5. THE VITRINE — the case the whole site sits inside.
 *
 * Her mark is white line work, so it needs a dark ground whatever colour the room behind
 * it is painted. The case gives it one permanently: the bar at the top, three edges around
 * the page, and the footer at the bottom are one continuous dark frame, and the rooms are
 * what is inside it.
 * ---------------------------------------------------------------------------
 */
.site-header {
  --nav-board: var(--wr-case);
  --nav-board-2: var(--wr-case-lift);
  --nav-ink: var(--wr-paper);
  --nav-ink-mute: var(--wr-paper-dim);
  --nav-tint: var(--wr-case-lift);
  --nav-hair: rgb(255 255 255 / 14%);
  --nav-edge: 1px solid rgb(255 255 255 / 14%);
  --nav-marker: var(--accent-gold);
  --nav-plate: var(--wr-case-lift);
  --nav-plate-ink: var(--wr-paper);
  --nav-plate-ink-mute: var(--wr-paper-dim);
  --nav-radius: 0;
  --nav-shadow: none;

  min-height: var(--wr-bar);
  align-items: center;
  background: var(--wr-case);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.site-header .site-logo {
  height: clamp(30px, 4.6vw, 42px);
  width: auto;
}

.site-header .site-name {
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 60;
  color: var(--wr-paper);
}

/* Every destination in the case is a museum plate, and the current one is lit brass. */
.site-header .menu > li > a,
.site-header .menu > .menu-heading > span,
.site-header .menu-children a {
  font-family: var(--wr-plate);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wr-paper-dim);
}

.site-header .menu > li > a:hover,
.site-header .menu-children a:hover {
  color: var(--wr-paper);
}

.site-header .menu > li > a[aria-current='page'] {
  color: var(--accent-gold);
}

/*
 * THE LAST ENTRY IN THE MENU IS THE CALL, and it is drawn as a brass plate on the case.
 *
 * A masthead on this platform has no button of its own — the menu is the whole of what a
 * tenant types — and a photographer's bar needs one thing to press. So the pack takes the
 * LAST entry, whatever it is, and gives it the plate. That is menu content flowing through
 * the chrome (ADR-0021, 2026-08-31): rename it, reorder it, add a page after it, and the
 * plate simply moves to whatever now sits last. Nothing here names a page.
 */
.site-header .menu > li:last-child > a {
  padding: 0.62rem 0.95rem;
  color: var(--wr-case);
  background: var(--accent-gold);
  transition:
    background 0.2s,
    transform 0.2s var(--wr-hop);
}

.site-header .menu > li:last-child > a:hover,
.site-header .menu > li:last-child > a[aria-current='page'] {
  color: var(--wr-case);
  background: var(--wr-paper);
  transform: translateY(-2px);
}

.site-header .menu > li:last-child > a::after {
  display: none;
}

.site-header .burger,
.site-header .burger::before,
.site-header .burger::after {
  background: var(--wr-paper);
}

/*
 * The bar is one row, and it has to be: the case's whole job is a shallow dark lid on the
 * rooms, and a masthead that wraps onto a second line is a 159px lid. The base's `drop`
 * format pads each destination 20px/14px, which is right for a chamber's five entries and
 * too generous for a studio's ten, so the pack tightens it — arrangement untouched.
 */
@media (min-width: 720px) {
  .site-header[data-nav-format='drop'] .menu > li > a,
  .site-header[data-nav-format='drop'] .menu > .menu-heading > span {
    padding: 0.85rem 0.6rem;
  }

  .site-header[data-nav-format='drop'] .menu > li > a::after {
    left: 0.6rem;
    right: 0.6rem;
  }
}

.site-footer {
  padding-block: clamp(2.6rem, 6vw, 4.5rem);
  background: var(--wr-case);
  color: var(--wr-paper);
}

.site-footer .site-name {
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 60;
  color: var(--wr-paper);
}

.site-footer .menu > li > a,
.site-footer .menu-children a,
.site-footer .site-footer-contact-item {
  font-family: var(--wr-body);
  color: var(--wr-paper);
}

.site-footer .menu > li > a:hover,
.site-footer .menu-children a:hover {
  color: var(--accent-gold);
}

.site-footer .site-footer-legal {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--wr-paper-dim);
}

/*
 * ---------------------------------------------------------------------------
 * 6. THE ARRIVAL.
 *
 * The h1 at mural scale beside a print hung from a rail, and one wall drawing behind both
 * — a sunflower head in line, at 10% of the room's own ink, tone on tone. It is the only
 * ornament in the pack and it is the room the mark has never had. It is drawn from the
 * pack rather than from content, so it appears for any tenant carrying this pack, and it
 * is `background-image` on a pseudo-element so nothing a reader needs is inside it.
 * ---------------------------------------------------------------------------
 */
.hero {
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero[data-align='left'] {
    /*
     * The words take the wider column. Her session headings are long sentences —
     * "Kansas City senior photography with personality, purpose, and a little bold magic"
     * — and at an even split that one ran to seven lines at 1440.
     */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

  .hero[data-align='left'] .hero-words {
    order: -1;
  }
}

.hero-words {
  position: relative;
  z-index: 1;
}

/*
 * The wall drawing, on the arrival's own light layer.
 *
 * A `mask` rather than a coloured SVG: the shape is a stencil and `--on-wall` is what
 * fills it, so the sunflower is the room's own ink on every wall and nothing has to ship
 * eight tinted copies of one drawing. It sits at 9%, which is where it reads as a mural
 * somebody painted and not as a graphic somebody placed — and it is deliberately behind
 * the words, off to the left of the column and running past the bottom of the band.
 */
.hero-words::before {
  --wr-mural: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 210' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='100' cy='86' r='26'/%3E%3Ccircle cx='100' cy='86' r='13'/%3E%3Cg%3E%3Cpath d='M100 60 L100 30 M100 30 C88 34 84 46 100 60'/%3E%3Cpath d='M100 60 L100 30 M100 30 C112 34 116 46 100 60'/%3E%3C/g%3E%3Cg transform='rotate(45 100 86)'%3E%3Cpath d='M100 60 L100 30 M100 30 C88 34 84 46 100 60'/%3E%3Cpath d='M100 60 L100 30 M100 30 C112 34 116 46 100 60'/%3E%3C/g%3E%3Cg transform='rotate(90 100 86)'%3E%3Cpath d='M100 60 L100 30 M100 30 C88 34 84 46 100 60'/%3E%3Cpath d='M100 60 L100 30 M100 30 C112 34 116 46 100 60'/%3E%3C/g%3E%3Cg transform='rotate(135 100 86)'%3E%3Cpath d='M100 60 L100 30 M100 30 C88 34 84 46 100 60'/%3E%3Cpath d='M100 60 L100 30 M100 30 C112 34 116 46 100 60'/%3E%3C/g%3E%3Cg transform='rotate(180 100 86)'%3E%3Cpath d='M100 60 L100 30 M100 30 C88 34 84 46 100 60'/%3E%3Cpath d='M100 60 L100 30 M100 30 C112 34 116 46 100 60'/%3E%3C/g%3E%3Cg transform='rotate(225 100 86)'%3E%3Cpath d='M100 60 L100 30 M100 30 C88 34 84 46 100 60'/%3E%3Cpath d='M100 60 L100 30 M100 30 C112 34 116 46 100 60'/%3E%3C/g%3E%3Cg transform='rotate(270 100 86)'%3E%3Cpath d='M100 60 L100 30 M100 30 C88 34 84 46 100 60'/%3E%3Cpath d='M100 60 L100 30 M100 30 C112 34 116 46 100 60'/%3E%3C/g%3E%3Cg transform='rotate(315 100 86)'%3E%3Cpath d='M100 60 L100 30 M100 30 C88 34 84 46 100 60'/%3E%3Cpath d='M100 60 L100 30 M100 30 C112 34 116 46 100 60'/%3E%3C/g%3E%3Cpath d='M100 112 L100 206 M100 140 C74 132 64 116 62 100 C84 100 96 118 100 140 M100 160 C126 152 136 136 138 120 C116 120 104 138 100 160'/%3E%3C/svg%3E");

  content: '';
  position: absolute;
  z-index: -1;
  top: -24%;
  left: -26%;
  width: min(42vw, 520px);
  aspect-ratio: 200 / 210;
  pointer-events: none;
  opacity: 0.1;
  background: var(--on-wall);
  mask: var(--wr-mural) no-repeat center / contain;
}

@media (max-width: 900px) {
  .hero-words::before {
    top: auto;
    bottom: -14%;
    left: -34%;
    width: 118%;
    opacity: 0.07;
  }
}

/*
 * The plate rule over the arrival's heading.
 *
 * The concept sets a typed museum plate above the h1 — "GALLERY PORTRAITURE INC — KANSAS
 * CITY" — and the hero declaration has no slot for one. What survives is the RULE, drawn
 * here: the same hairline every plate on the site hangs off, with nothing written on it,
 * so the arrival still opens on the plate's gesture without this stylesheet inventing
 * words about somebody's business.
 */
.hero-words h1::before {
  content: '';
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  background: currentcolor;
  opacity: 0.7;
}

.hero-sub {
  max-width: 42ch;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  font-family: var(--wr-plate);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--on-wall);
}

.hero-action {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}

/*
 * ---------------------------------------------------------------------------
 * 7. THE FOUR JOBS A CARD LIST DOES, TOLD APART STRUCTURALLY.
 *
 * A card list is the platform's one repeating primitive and this design asks four things
 * of it. Nothing in the markup says which — that would be a section carrying a look — so
 * the pack reads what the cards actually HOLD:
 *
 *   grid + a link on every card   → the DOORS. Five session types as full-bleed doors.
 *   grid + a picture, no link     → the PROP SHELF. Objects on a brass shelf.
 *   grid + no picture             → the FACTS. A number and what it counts.
 *   rows + a picture              → the PATH. Numbered steps with a photograph aside.
 *   rows + no picture             → the LEDGER. A name, a price, a description.
 * ---------------------------------------------------------------------------
 */
.cards {
  display: grid;
  gap: var(--gap);
  margin: var(--gap) 0 0;
  padding: 0;
  list-style: none;
}

/*
 * The base draws a card as a white panel with a rule and a lift. Nothing in this pack is a
 * white panel — a card here is either a door, a cell on a shelf, a plate on a wall or a
 * line in a ledger — so the panel comes off once, here, and each of the four puts back
 * only what it needs. Without this the room's own ink lands on the base's white card and
 * a shelf reads as blank paper, which is what it did before this rule.
 */
.card-list .card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.card-list .card:hover {
  transform: none;
  box-shadow: none;
}

.card-list .card-body {
  color: var(--on-wall-soft);
}

/* ---- the doors ---- */
.card-list[data-align='grid']:has(.card-action) .cards {
  gap: 1px;
  background: color-mix(in srgb, var(--on-wall) 22%, transparent);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.card-list[data-align='grid']:has(.card-action) .card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: clamp(300px, 34vw, 440px);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--wall);
  color: var(--wr-paper);
}

.card-list[data-align='grid']:has(.card-action) .card-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding-top: 0;
}

.card-list[data-align='grid']:has(.card-action) .card-picture::before,
.card-list[data-align='grid']:has(.card-action) .card-picture::after {
  content: none;
}

.card-list[data-align='grid']:has(.card-action) .card-picture img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  box-shadow: none;
  background: none;
}

/*
 * A door is the one deliberate crop on this site, and on a phone it turns landscape —
 * where a centred crop took the top off three of the five heads. Michael, 2026-09-06: a
 * photograph cut by its frame is a poor crop whatever the CSS calls it. The window moves
 * up the frame so the headroom she left is the part that survives.
 */
@container (max-width: 40rem) {
  .card-list[data-align='grid']:has(.card-action) .card-picture img {
    object-position: 50% 28%;
  }
}

/*
 * The scrim. It is a sibling layer over the photograph rather than a filter ON it — the
 * photograph itself is never touched — and it lifts on hover, so the door opens onto the
 * whole frame.
 */
.card-list[data-align='grid']:has(.card-action) .card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wr-case) 8%, transparent) 0%,
    color-mix(in srgb, var(--wr-case) 48%, transparent) 42%,
    color-mix(in srgb, var(--wr-case) 92%, transparent) 74%,
    var(--wr-case) 100%
  );
  transition: opacity 0.45s var(--wr-settle);
}

.card-list[data-align='grid']:has(.card-action) .card:hover::before,
.card-list[data-align='grid']:has(.card-action) .card:focus-within::before {
  opacity: 0.66;
}

/* the inset rule that lights the frame when the door is pointed at */
.card-list[data-align='grid']:has(.card-action) .card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--accent-gold);
  transition: box-shadow 0.28s;
}

.card-list[data-align='grid']:has(.card-action) .card:hover::after,
.card-list[data-align='grid']:has(.card-action) .card:focus-within::after {
  box-shadow: inset 0 0 0 5px var(--accent-gold);
}

.card-list[data-align='grid']:has(.card-action) .card h2,
.card-list[data-align='grid']:has(.card-action) .card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 0.45rem;
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 90;
  /*
   * Sized against the SECTION's width rather than the viewport's, so a door name is as
   * large as its own door allows — five doors on a wide page and two on a phone are
   * different columns, and a viewport clamp broke "Headshots" across two lines at 1440.
   * `hyphens: none` and `overflow-wrap: normal` make a word that still will not fit
   * overflow its column rather than be sliced in half, which is the failure that is
   * visible from across a room.
   */
  font-size: clamp(1.15rem, 2.1cqi + 0.35rem, 1.95rem);
  font-weight: 600;
  line-height: 1.02;
  hyphens: none;
  overflow-wrap: normal;
  color: var(--wr-paper);
}

.card-list[data-align='grid']:has(.card-action) .card-body {
  position: relative;
  z-index: 2;
}

.card-list[data-align='grid']:has(.card-action) .card-body p {
  margin: 0;
  font-size: var(--wr-1);
  line-height: 1.5;
  color: color-mix(in srgb, var(--wr-paper) 90%, transparent);
}

/* the door's own way in: a plate of words, not a plaque — the whole tile is the target */
.card-list[data-align='grid']:has(.card-action) .card-action {
  position: relative;
  z-index: 4;
  margin: 1.1rem 0 0;
}

.card-list[data-align='grid']:has(.card-action) .card-action a {
  min-height: 0;
  padding: 0;
  gap: 0.5rem;
  color: var(--accent-gold);
  background: none;
  box-shadow: none;
  font-size: 0.68rem;
}

.card-list[data-align='grid']:has(.card-action) .card-action a:hover,
.card-list[data-align='grid']:has(.card-action) .card-action a:focus-visible {
  color: var(--accent-gold);
  background: none;
  box-shadow: none;
  transform: none;
}

/* the whole door is pressable, and the link is what a keyboard lands on */
.card-list[data-align='grid']:has(.card-action) .card-action a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
}

.card-list[data-align='grid']:has(.card-action) .card-action a {
  position: static;
}

/* ---- the prop shelf ---- */
.card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .cards {
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 7.5rem), 1fr));
  border-block: 3px solid var(--wr-brass);
}

.card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) clamp(0.5rem, 1.4vw, 1rem) clamp(1rem, 2vw, 1.5rem);
  border-inline-end: 1px dashed color-mix(in srgb, var(--on-wall) 26%, transparent);
  transition: background 0.25s;
}

/*
 * Every print on the shelf hangs in a mount of the same height, so the row reads as one
 * shelf rather than as a ragged wall — and `contain` rather than `cover`, so a portrait
 * she framed one way is not re-cropped to fill a square. The mount letterboxes; the
 * photograph keeps every pixel she made.
 */
.card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card-picture img {
  aspect-ratio: 1;
  height: auto;
  margin-bottom: 0;
  object-fit: contain;
}

.card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card:hover,
.card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card:focus-within {
  background: color-mix(in srgb, var(--on-wall) 9%, transparent);
}

.card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card-picture {
  --wr-drop: 18px;
}

.card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card h2,
.card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card h3 {
  margin: 0.8rem 0 0.3rem;
  font-family: var(--wr-plate);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-wall-soft);
}

.card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card-body p {
  margin: 0;
  font-size: var(--wr-1);
  line-height: 1.5;
  color: var(--on-wall);
}

/* ---- the facts ---- */
.card-list[data-align='grid']:not(:has(.card-picture)) .cards {
  gap: 1px;
  background: color-mix(in srgb, var(--on-wall) 24%, transparent);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.card-list[data-align='grid']:not(:has(.card-picture)) .card {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--wall);
}

.card-list[data-align='grid']:not(:has(.card-picture)) .card h2,
.card-list[data-align='grid']:not(:has(.card-picture)) .card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 90;
  font-size: var(--wr-5);
  font-weight: 600;
  line-height: 1;
  color: var(--plaque);
}

.card-list[data-align='grid']:not(:has(.card-picture)) .card-body p {
  margin: 0;
  font-size: var(--wr-1);
  color: var(--on-wall-soft);
}

/* ---- the path ---- */
/*
 * One card per row, which is the whole of what `rows` means. The base gives every
 * `.cards` an auto-fit track list (`.features, .cards, .listings`), and nothing in the
 * base takes it back for this arrangement — so four steps landed across the page in
 * three 400px columns instead of down it. The pack states the single column it wants.
 */
.card-list[data-align='rows'] .cards {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: wr-step;
}

.card-list[data-align='rows'] .card {
  counter-increment: wr-step;
  display: grid;
  gap: 0 clamp(1rem, 3vw, 2.6rem);
  align-items: start;
  padding-block: clamp(1.8rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--on-wall) 26%, transparent);
}

.card-list[data-align='rows'] .card:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--on-wall) 26%, transparent);
}

.card-list[data-align='rows']:has(.card-picture) .card::before {
  content: counter(wr-step, decimal-leading-zero);
  grid-area: n;
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-style: italic;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 300;
  line-height: 0.8;
  color: var(--plaque);
}

/*
 * Every one of a card's four parts is named here. A `grid-area` whose name is NOT in the
 * template does not fall back to the flow — the spec makes the unmatched name resolve
 * against implicit lines, so the body opened two implicit auto columns of its own, took
 * the room they needed, and left `minmax(0, 1fr)` measuring zero. That is what put every
 * step's heading down the page one character per line.
 */
.card-list[data-align='rows']:has(.card-picture) .card {
  grid-template-areas:
    'n words'
    'n body'
    'art art';
  grid-template-columns: clamp(50px, 12vw, 70px) minmax(0, 1fr);
}

.card-list[data-align='rows']:has(.card-picture) .card h2,
.card-list[data-align='rows']:has(.card-picture) .card h3 {
  grid-area: words;
  margin: 0 0 0.5rem;
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 60;
  font-size: var(--wr-4);
  font-weight: 600;
  line-height: 1.05;
}

.card-list[data-align='rows']:has(.card-picture) .card-body {
  grid-area: body;
}

/* Under the words on a phone, so it needs the air the zero row gap does not give it. */
.card-list[data-align='rows']:has(.card-picture) .card-picture {
  grid-area: art;
  margin-top: clamp(1.2rem, 4vw, 2rem);
}

@container (min-width: 52rem) {
  .card-list[data-align='rows']:has(.card-picture) .card {
    grid-template-areas:
      'n words art'
      'n body art';
    grid-template-columns: clamp(64px, 9vw, 116px) minmax(0, 1fr) minmax(0, 0.85fr);
    /*
     * The print is taller than the words beside it, and a spanning item hands its extra
     * height to every row it crosses — which opened a hole between the heading and its
     * own paragraph. The second row takes all of it instead, and `align-items: start`
     * keeps the paragraph under the heading rather than floating in the middle of it.
     */
    grid-template-rows: min-content minmax(0, 1fr);
  }

  /* beside the words now, hung from the same line the heading starts on */
  .card-list[data-align='rows']:has(.card-picture) .card-picture {
    margin-top: 0;
  }
}

.card-list[data-align='rows'] .card-body p {
  margin: 0 0 0.8em;
  max-width: 58ch;
  color: var(--on-wall-soft);
}

.card-list[data-align='rows'] .card-body p:last-child {
  margin-bottom: 0;
}

/* ---- the ledger ---- */
.card-list[data-align='rows']:not(:has(.card-picture)) .cards {
  gap: 1px;
  background: color-mix(in srgb, var(--on-wall) 24%, transparent);
}

.card-list[data-align='rows']:not(:has(.card-picture)) .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  background: var(--wall);
  border: 0;
}

.card-list[data-align='rows']:not(:has(.card-picture)) .card:last-child {
  border-bottom: 0;
}

.card-list[data-align='rows']:not(:has(.card-picture)) .card h2,
.card-list[data-align='rows']:not(:has(.card-picture)) .card h3 {
  margin: 0;
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 40;
  font-size: var(--wr-3);
  font-weight: 600;
}

/* The first line of a ledger card's body is the figure. */
.card-list[data-align='rows']:not(:has(.card-picture)) .card-body p:first-child {
  font-family: var(--wr-plate);
  font-size: var(--wr-3);
  font-weight: 500;
  color: var(--plaque);
}

/*
 * ---------------------------------------------------------------------------
 * 7b. THE CLAIMS — `feature-row`, the three things a session page promises.
 *
 * The base draws a feature as a white tile with a rounded corner and a shadow, and this
 * pack never took it off — so five session pages carried three white boxes on a painted
 * wall, which is the one thing every other arrangement here refuses. A claim is not a
 * tile: it is a headed paragraph written on the wall, under a rule, the way the comp
 * sets them. The panel comes off, and the rule and the display face go on.
 * ---------------------------------------------------------------------------
 */
.feature {
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--on-wall) 26%, transparent);
  border-radius: 0;
  box-shadow: none;
}

/* nothing rises here — there is no tile to lift and nowhere for a claim to go */
.feature:hover {
  transform: none;
  background: none;
  border-color: color-mix(in srgb, var(--on-wall) 26%, transparent);
  box-shadow: none;
}

.feature h2,
.feature h3 {
  margin: 0 0 0.6rem;
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 40;
  font-size: var(--wr-3);
  font-weight: 600;
  line-height: 1.1;
  color: var(--on-wall);
}

.feature-body p {
  margin: 0 0 0.8em;
  font-size: var(--wr-1);
  color: var(--on-wall-soft);
}

.feature-body p:last-child {
  margin-bottom: 0;
}

/*
 * ---------------------------------------------------------------------------
 * 8. THE BANDS: split, text, call to action.
 * ---------------------------------------------------------------------------
 */
.split {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split[data-side='left'] .split-picture {
    order: -1;
  }

  .split[data-emphasis='image-led'] {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .split[data-emphasis='image-led'][data-side='right'] {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.split-body p,
.prose p,
.contact-details p {
  max-width: 62ch;
  text-wrap: pretty;
  color: var(--on-wall-soft);
}

.split-action,
.cta-band-action {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
}

.cta-band {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .cta-band {
    grid-template-columns: minmax(0, 1.2fr) auto;
  }
}

.cta-band-body {
  max-width: 46ch;
  margin: var(--gap) 0 0;
  font-size: var(--wr-3);
  line-height: 1.42;
  color: var(--on-wall);
}

/*
 * ---------------------------------------------------------------------------
 * 9. THE WALL — the gallery.
 *
 * Every print keeps the shape she made it, and each one hangs off its own segment of rail,
 * so a row reads as one continuous brass line with the prints hanging from it.
 * ---------------------------------------------------------------------------
 */
.gallery-items {
  display: grid;
  align-items: start;
  row-gap: clamp(2.4rem, 4vw, 3.6rem);
  column-gap: clamp(1rem, 2.4vw, 2rem);
  margin: var(--gap) 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 11.5rem), 1fr));
}

.gallery-figure {
  margin: 0;
}

.gallery[data-shape='natural'] .gallery-picture {
  aspect-ratio: auto;
}

.gallery-picture img {
  height: auto;
  object-fit: contain;
}

.gallery-caption {
  display: -webkit-box;
  overflow: hidden;
  margin: 0.7rem 0 0;
  font-size: 0.64rem;
  line-height: 1.55;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-wall-soft);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*
 * ---------------------------------------------------------------------------
 * 10. THE CABINET — the questions section, as the furniture it belongs in.
 *
 * Each answer is a drawer with a real brass pull on two posts, drawn in CSS. Opening one
 * drops the pull, the way a drawer that has been pulled out sits lower than its neighbours.
 * ---------------------------------------------------------------------------
 */
/*
 * Columns, not a grid: an opened drawer pushes only the drawers under it, the way a real
 * cabinet behaves. A grid would leave a hole beside it and shove every neighbour down.
 */
.faq-list {
  display: block;
  columns: 2;
  column-gap: 10px;
}

@container (max-width: 46rem) {
  .faq-list {
    columns: 1;
  }
}

.faq-item {
  break-inside: avoid;
  margin-bottom: 10px;
}

.faq-details {
  background: color-mix(in srgb, var(--on-wall) 9%, var(--wall));
  border: 0;
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--on-wall) 22%, transparent),
    inset 0 -3px 0 0 rgb(0 0 0 / 34%),
    0 2px 0 0 rgb(0 0 0 / 22%);
  transition: background 0.24s;
}

.faq-details:hover {
  background: color-mix(in srgb, var(--on-wall) 15%, var(--wall));
}

.faq-details[open] {
  background: color-mix(in srgb, var(--on-wall) 17%, var(--wall));
}

.faq-question {
  gap: 1.2rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.1rem, 2vw, 1.7rem);
}

.faq-question-text {
  font-family: var(--wr-plate);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-wall);
}

/* the pull: a brass bar on two posts, in place of the base's chevron */
.faq-question::after {
  content: '';
  position: relative;
  flex: none;
  width: 54px;
  height: 16px;
  border: 0;
  transform: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wr-brass) 60%, #fff), var(--wr-brass) 55%, color-mix(in srgb, var(--wr-brass) 60%, #000)) top / 100% 8px no-repeat,
    linear-gradient(90deg, transparent 7px, var(--wr-brass) 7px 10px, transparent 10px calc(100% - 10px), var(--wr-brass) calc(100% - 10px) calc(100% - 7px), transparent calc(100% - 7px)) bottom / 100% 8px no-repeat;
  transition: transform 0.28s var(--wr-hop);
}

.faq-details[open] .faq-question::after,
.faq-question:hover::after {
  transform: translateY(3px);
}

.faq-answer {
  margin: 0;
  padding: 0 clamp(1.1rem, 2vw, 1.7rem) clamp(1.3rem, 2.4vw, 1.7rem);
  border-left: 4px solid var(--plaque);
  max-width: 62ch;
  color: var(--on-wall-soft);
  font-size: var(--wr-1);
  line-height: 1.7;
}

/*
 * ---------------------------------------------------------------------------
 * 11. VOICES — the quotes band.
 *
 * Real reviews with real names, on a card that carries a rule of the room's own accent
 * along its top and nothing else. No stars, no avatars, no carousel.
 * ---------------------------------------------------------------------------
 */
.quote {
  background: color-mix(in srgb, var(--on-wall) 8%, transparent);
  border-top: 3px solid var(--plaque);
  border-radius: 0;
  box-shadow: none;
}

.quote-words {
  color: var(--on-wall);
  font-size: var(--wr-2);
}

.quote-who {
  font-family: var(--wr-plate);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--on-wall-soft);
}

/*
 * ---------------------------------------------------------------------------
 * 12. THE STAGING TABLE — the signature interaction, in the room's clothes.
 * ---------------------------------------------------------------------------
 */
.build-intro {
  max-width: 46ch;
  font-size: var(--wr-3);
  line-height: 1.42;
  color: var(--on-wall);
}

.build-step-button {
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--wr-plate);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-wall-soft);
}

.build-step-button[data-answered='yes'] {
  color: var(--on-wall);
}

.build-step-button[aria-current='step'] {
  color: var(--plaque-ink);
  background: var(--plaque);
}

.build-choice {
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0;
  background: color-mix(in srgb, var(--on-wall) 7%, transparent);
  color: var(--on-wall);
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s var(--wr-hop);
}

.build-choice:hover {
  background: color-mix(in srgb, var(--on-wall) 13%, transparent);
  transform: translateX(3px);
}

.build-choice[aria-pressed='true'] {
  border-left-color: var(--plaque);
  background: color-mix(in srgb, var(--on-wall) 17%, transparent);
}

.build-choice-note {
  color: var(--on-wall-soft);
}

.build-choice-mark {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--plaque);
}

.build-count {
  font-family: var(--wr-plate);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-wall-soft);
}

.build-table {
  border-radius: 0;
  background: var(--wr-case);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wr-paper) 16%, transparent);
}

.build-table-empty {
  font-family: var(--wr-plate);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--wr-paper-dim);
}

.build-plate {
  background: color-mix(in srgb, var(--wr-case) 90%, transparent);
  border-top: 2px solid var(--wr-brass);
  color: var(--wr-paper);
  letter-spacing: 0.11em;
}

.build-plate dt {
  color: var(--wr-paper-dim);
}

.build-plate dd {
  color: var(--accent-gold);
  font-weight: 500;
}

.build-result-line {
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 60;
  font-size: var(--wr-4);
  font-style: italic;
  font-weight: 400;
  line-height: 1.16;
  color: var(--on-wall);
}

.build-result-set {
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-wall-soft);
}

.build-result-picture {
  border-radius: 0;
  /* The concept hangs the result as a landscape print; `contain` keeps her framing. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/*
 * ---------------------------------------------------------------------------
 * 13. THE DESK — the contact section.
 * ---------------------------------------------------------------------------
 */
@media (min-width: 62rem) {
  .contact {
    display: grid;
    gap: clamp(1.6rem, 4vw, 3.4rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .contact > h2,
  .contact-intro,
  .contact-details {
    grid-column: 1;
  }

  .contact-form,
  .contact-form-sent {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
}

.contact-intro {
  max-width: 42ch;
  font-size: var(--wr-3);
  line-height: 1.42;
  color: var(--on-wall);
}

/* The base draws the form as a white card. On a painted wall it is the wall. */
.contact-form {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.contact-form-field label {
  font-family: var(--wr-plate);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-wall-soft);
}

.contact-form-field input,
.contact-form-field textarea {
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--on-wall) 40%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--on-wall) 8%, transparent);
  color: var(--on-wall);
  font-family: var(--wr-body);
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: color-mix(in srgb, var(--on-wall) 45%, transparent);
}

.contact-form-field input:hover,
.contact-form-field textarea:hover {
  background: color-mix(in srgb, var(--on-wall) 13%, transparent);
}

.contact-form-carried {
  border-radius: 0;
  border-left: 4px solid var(--plaque);
  background: color-mix(in srgb, var(--plaque) 22%, transparent);
  font-family: var(--wr-plate);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--on-wall);
}

.contact-form-refusal {
  border-radius: 0;
  border-left: 4px solid var(--wr-paper);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--on-wall);
}

.contact-form-sent {
  font-family: var(--wr-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 60;
  font-size: var(--wr-4);
  color: var(--on-wall);
}

/*
 * ---------------------------------------------------------------------------
 * 14. MOTION. Everything ambient is off when the visitor asks for it off — including the
 * crooked print, which hangs straight rather than animating into place.
 * ---------------------------------------------------------------------------
 */
@media (prefers-reduced-motion: reduce) {
  .site *,
  .site *::before,
  .site *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .gallery-item:nth-child(6n + 4) .gallery-picture img,
  .gallery-item:nth-child(9n + 8) .gallery-picture img,
  .card-list:not(:has(.card-action)) .card:nth-child(7n + 3) .card-picture img {
    transform: none;
  }
}