/* Enso Studio buyer pages, direction A: Viewing room.
   One cinematic first screen per piece, then a warm bone room with a statement,
   a museum tag beside the piece, and one quiet ask. Phone first.
   Ported from the approved mock (2026-10-21) to the live line sheet and piece pages. */

@font-face { font-family: "Barlow"; src: url("fonts/barlow-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/spectral-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/spectral-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/spectral-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --umber: #2C211A;
  --umber-deep: #241912;
  --brown: #5A3422;
  --adobe: #926753;
  --sand: #CFB497;
  --gold: #CE9D43;
  --bone: #ECE3D2;
  --cream: #F6EFE2;
  --rule: rgb(90 52 34 / .3);
  --focus: var(--umber);
  /* The staff preview strip's height: the first screen gives it up below. */
  --strip: 58px;
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --screen: 100svh;
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bone); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--umber);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overflow-wrap: break-word;
}
h1, h2, p, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; object-fit: contain; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button, a, input, textarea, label { -webkit-tap-highlight-color: transparent; }
/* Keyboard focus: umber on the bone room, gold on the dark grounds. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.viewing, .site-foot { --focus: var(--gold); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; z-index: 20; top: -100px; left: var(--gutter);
  padding: 10px 14px; background: var(--cream); color: var(--umber);
  font: 500 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { top: 10px; }
.print-mark, .print-contact { display: none; }

/* Staff preview: a thin bone strip above the viewing */
.preview-strip {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: var(--strip);
  padding: 0 var(--gutter);
  background: var(--bone); border-bottom: 1px solid var(--rule);
  font: 500 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brown);
}
.preview-strip a { display: inline-block; padding: 12px 0; text-underline-offset: 5px; }

/* The banner sits where the buyer lands: above the first screen */
.banner { background: var(--bone); border-top: 1px solid var(--gold); padding: 18px var(--gutter) 20px; }
.banner-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.banner-head { font: 400 19px/1.4 var(--serif); color: var(--umber); }
.banner-fine { margin-top: 6px; font: 400 13.5px/1.55 var(--sans); color: var(--brown); }

/* ------------------------------------------------------------------ */
/* The first screen: a private viewing                                  */
/* ------------------------------------------------------------------ */

.viewing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: var(--screen);
  min-height: 600px;
  container-type: size;
  background: var(--umber-deep);
  color: var(--cream);
  /* space kept clear for the mark (top) and the name (bottom) */
  --rt: 104px;
  --rb: 196px;
}

/* After a request the banner leads the page, so the first screen gives up about
   the banner's height: the name and the cue still show beneath it. The staff
   preview strip leads it the same way, by its own height. */
@media screen {
  .preview-strip + .viewing { height: calc(var(--screen) - var(--strip)); }
  .banner + .viewing { height: calc(var(--screen) - 9rem); min-height: 520px; }
  .preview-strip + .banner + .viewing { height: calc(var(--screen) - 9rem - var(--strip)); }
}

/* A room photograph. The sharp plate keeps the piece whole: it is sized and placed
   from the piece's own box in the photograph (--sx, --sy, --cx, --cy). The app does
   not know that box, so the whole photograph is the box (1, 1, .5, .5) and is fitted
   whole. Where a screen is taller or wider than the photograph, the photograph's own
   edges, mirrored and softly out of focus, carry the room on. */
.plate-wrap {
  --avail: calc(100cqh - var(--rt) - var(--rb));
  --w: min(max(100cqw, 100cqh * var(--r)), 100cqw / var(--sx), var(--avail) * var(--r) / var(--sy), var(--nw, 9999px));
  --h: calc(var(--w) / var(--r));
  position: absolute;
  z-index: -2;
  width: var(--w);
  height: var(--h);
  left: clamp(min(0px, 100cqw - var(--w)), 50cqw - var(--cx) * var(--w), max(0px, 100cqw - var(--w)));
  top: clamp(min(0px, 100cqh - var(--h)) - 8cqh, var(--rt) + var(--avail) / 2 - var(--cy) * var(--h), max(0px, 100cqh - var(--h)));
  animation: lights-up 1.8s cubic-bezier(.2, .6, .2, 1) both;
}
.plate-wrap picture, .hung picture { display: contents; }
.plate {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 var(--ft, 10%), #000 var(--fb, 90%), transparent 100%),
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, #000 var(--ft, 10%), #000 var(--fb, 90%), transparent 100%),
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
.ext {
  position: absolute;
  z-index: 0;
  background-image: var(--img);
  background-repeat: no-repeat;
  /* Darkened first, then toned: a pale studio backdrop becomes warm room light,
     where sepia on a light ground would turn olive. The small turn toward red
     keeps it umber rather than khaki. */
  filter: blur(24px) brightness(.42) sepia(1) saturate(1.25) hue-rotate(-6deg);
}
.ext--top, .ext--bottom { left: -40px; right: -40px; height: 100cqh; }
.ext--top { filter: blur(24px) brightness(.4) sepia(1) saturate(1.25) hue-rotate(-6deg); bottom: calc(100% - 56px); background-size: 100% calc(100cqh / var(--kt, .16)); background-position: 50% 0; transform: scaleY(-1); }
.ext--bottom { top: calc(100% - 56px); background-size: 100% calc(100cqh / var(--kb, .14)); background-position: 50% 100%; transform: scaleY(-1); }
.ext--left, .ext--right { top: -40px; bottom: -40px; width: 100cqw; }
.ext--left { right: calc(100% - 56px); background-size: calc(100cqw / var(--ks, .1)) 100%; background-position: 0 50%; transform: scaleX(-1); }
.ext--right { left: calc(100% - 56px); background-size: calc(100cqw / var(--ks, .1)) 100%; background-position: 100% 50%; transform: scaleX(-1); }

/* Behind the mirrored edges, the same room deeply out of focus: where a whole
   photograph leaves the screen's corners uncovered, the room still fills them. */
.viewing--room::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -3;
  background-image: var(--img);
  background-position: center;
  background-size: cover;
  filter: blur(48px) brightness(.4) sepia(1) saturate(1.25) hue-rotate(-6deg);
}

/* On a phone the room plate rides high under the mark, and its floor carries on,
   out of focus, down to the name. */
.viewing--room { --rt: 72px; --rb: 300px; }
.viewing--room .plate {
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 calc(var(--ft, 10%) + 2%), #000 var(--fb, 90%), transparent 100%),
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0, #000 calc(var(--ft, 10%) + 2%), #000 var(--fb, 90%), transparent 100%),
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
/* On a wide screen a studio photograph is presented whole, as a lit print in the
   room's warm dark. Its own pale backdrop, mirrored or blurred out to the sides,
   only made streaks, ghost shapes and a glow, so here the room is a fixed warm
   light that falls away outward, the print keeps a narrow soft edge, and a soft
   shadow sets it off the wall. The edge is 3% of the print, at most 18px, so it
   stays narrow on the widest screens. */
@media (min-width: 900px) {
  .viewing--room .ext { display: none; }
  .viewing--room::before {
    background: radial-gradient(ellipse 62% 72% at 50% 46%, #97805F 0, #927B5E 48%, #6E5A42 70%, #2A1D14 100%);
    filter: none;
  }
  .viewing--room .plate {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0, #000 min(3%, 18px), #000 max(97%, 100% - 18px), transparent 100%),
      linear-gradient(90deg, transparent 0, #000 min(3%, 18px), #000 max(97%, 100% - 18px), transparent 100%);
    mask-image:
      linear-gradient(180deg, transparent 0, #000 min(3%, 18px), #000 max(97%, 100% - 18px), transparent 100%),
      linear-gradient(90deg, transparent 0, #000 min(3%, 18px), #000 max(97%, 100% - 18px), transparent 100%);
  }
  /* The masked photograph cannot carry a shadow itself, so a box just inside it does. */
  .viewing--room .plate-wrap::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 2%;
    box-shadow: 0 24px 60px rgb(14 8 5 / .5);
  }
}
/* Up to twice as wide as tall, the room also falls away to the sides (wider
   screens have their own, deeper edge shade below). */
@media (min-width: 900px) and (max-aspect-ratio: 1999/1000) {
  .viewing--room .shade::before,
  .viewing--setting .shade::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(30 20 14 / .32) 0, rgb(30 20 14 / 0) 16%, rgb(30 20 14 / 0) 84%, rgb(30 20 14 / .32) 100%);
  }
}

/* A staged room photograph, which staff mark on a furniture or statement piece:
   the approved mock's own room. The photograph fills the screen behind and
   around the plate, on a phone as on a wide screen, and past its own edges the
   room carries on, mirrored and softly out of focus. The app does not know where
   the piece sits in the room, so the plate keeps on screen the share of the
   photograph the studio's staged rooms place a piece in (the template sets it:
   the central 88% of the width; of a landscape room's height 72% on a phone,
   66% on a wide screen and 74% from 1600 px; 95% of an upright room's) and
   only the outer room is ever cropped. The plain studio photograph shows the
   piece whole further down the page. */
.viewing--setting { --rt: 72px; --rb: 300px; }
.viewing--setting .ext { filter: blur(20px) sepia(.25) brightness(.78); }
/* The mock's tone for the top edge, darkened before it is toned: on a pale
   backdrop, sepia first clips to grey and the band turns olive. */
.viewing--setting .ext--top { filter: blur(20px) brightness(.58) sepia(.6) saturate(1.15); }
/* Where the screen is wider than the room (a short wide screen, the banner on
   a desktop, an upright room on a phone), the room's mirrored sides fall into
   its warm dark rather than reading as pale bands beside the photograph, and
   blur far enough that the stretched edge leaves no streaks. A landscape room
   on a phone runs past both sides of the screen, so there they never show. At
   twice as wide as tall and wider the edge shade below already darkens the
   sides, so they keep the mock's own tone and carry the room on, as on its
   ultrawide screen. */
@media (max-aspect-ratio: 1999/1000) {
  .viewing--setting .ext--left,
  .viewing--setting .ext--right { filter: blur(44px) brightness(.46) sepia(.5); }
}
/* An upright room on a phone may run on under the name, as under the banner,
   so its piece stays large on a short screen (the piece itself stops well
   above the name). Under the request banner a short phone has little height
   left: the room is the background, so it may run on under the name. The
   script still widens these bands for a name that needs more. */
@media (max-width: 899px) {
  .viewing--upright { --rt: 80px; --rb: 200px; }
  .viewing--sheet.viewing--upright { --rb: 240px; }
  .banner + .viewing--setting { --rb: 200px; }
}
/* On a phone the plate rides high under the mark, and its floor carries on, out
   of focus, down to the name. */
.viewing--setting .plate {
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 calc(var(--ft, 10%) + 6%), #000 var(--fb, 90%), transparent 100%),
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0, #000 calc(var(--ft, 10%) + 6%), #000 var(--fb, 90%), transparent 100%),
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
@media (min-width: 900px) {
  /* A wide screen keeps the wide-screen share of the room's height on screen,
     so a landscape room fills the width, as the mock's did. A landscape room
     also keeps a little more of its height and sits a little higher (--sy-xl,
     --cy-xl from the template), so a tall piece stays clear of the mark and its
     legs stop above the name. */
  .viewing--setting .plate-wrap { --sy: var(--sy-xl, var(--sy-wide, .72)); --cy: var(--cy-xl, .5); }
  .viewing--setting .plate {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0, #000 var(--ft, 10%), #000 var(--fb, 90%), transparent 100%),
      linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
    mask-image:
      linear-gradient(180deg, transparent 0, #000 var(--ft, 10%), #000 var(--fb, 90%), transparent 100%),
      linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  }
}
/* An upright room's piece reaches to within 5% of the photograph's top, so the
   plate's top fades over a narrow band that ends above the piece: the piece is
   never dimmed under the mark. */
.viewing--upright .plate {
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 min(4%, 24px), #000 var(--fb, 90%), transparent 100%),
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0, #000 min(4%, 24px), #000 var(--fb, 90%), transparent 100%),
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
/* On a wide screen an upright room is a tall view into the room, not a
   pillarboxed photograph. Its mirrored sides, stretched across the width, only
   made streaks, so there the room's warm light falls away outward, as behind a
   studio print; the plate's sides feather narrowly (3%, at most 18px) and a
   soft shadow sets it off. Above and below, the room still carries on,
   mirrored and out of focus. */
@media (min-width: 900px) {
  .viewing--upright::before {
    content: "";
    position: absolute;
    inset: -60px;
    z-index: -3;
    background: radial-gradient(ellipse 62% 72% at 50% 46%, #97805F 0, #927B5E 48%, #6E5A42 70%, #2A1D14 100%);
  }
  .viewing--upright .ext--left,
  .viewing--upright .ext--right { display: none; }
  .viewing--upright .ext--top,
  .viewing--upright .ext--bottom { left: 0; right: 0; }
  .viewing--upright .plate {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0, #000 min(4%, 24px), #000 var(--fb, 90%), transparent 100%),
      linear-gradient(90deg, transparent 0, #000 min(3%, 18px), #000 max(97%, 100% - 18px), transparent 100%);
    mask-image:
      linear-gradient(180deg, transparent 0, #000 min(4%, 24px), #000 var(--fb, 90%), transparent 100%),
      linear-gradient(90deg, transparent 0, #000 min(3%, 18px), #000 max(97%, 100% - 18px), transparent 100%);
  }
  /* Under the mirrored bands, so the shadow shows only at the sides. */
  .viewing--upright .plate-wrap::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 2%;
    box-shadow: 0 24px 60px rgb(14 8 5 / .5);
  }
}

/* Very wide screens: the room's edges fall away into shade. */
@media (min-aspect-ratio: 2/1) {
  .viewing--room .shade::after,
  .viewing--setting .shade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(30 20 14 / .7) 0, rgb(30 20 14 / 0) 22%, rgb(30 20 14 / 0) 78%, rgb(30 20 14 / .7) 100%);
  }
}

/* A hung piece: the painting or the stone, shown whole at no more than its own size,
   and never taller than the space between the mark and the name. */
.hung {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: calc(var(--rt) + (100cqh - var(--rt) - var(--rb)) / 2);
  width: var(--hung-w);
  margin: 0;
  transform: translate(-50%, -50%);
  animation: lights-up 1.8s cubic-bezier(.2, .6, .2, 1) both;
}
.hung img {
  width: 100%;
  height: auto;
  box-shadow: 0 1px 2px rgb(14 8 5 / .5), 0 22px 44px rgb(14 8 5 / .55);
}

/* Art hangs on a limewashed adobe wall, under a picture light. */
.viewing--wall { --hung-w: min(var(--nw, 478px), 82cqw, (100cqh - var(--rt) - var(--rb) - 48px) * var(--r, 1.45)); background: #4A3326; }
.wall {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse min(640px, 92cqw) min(460px, 40cqh) at 50% calc(var(--rt) + (100cqh - var(--rt) - var(--rb)) * .42),
      rgb(246 206 146 / .42), rgb(246 206 146 / .16) 50%, rgb(246 206 146 / 0) 100%),
    url("plaster-wall.jpg") center / cover;
}

/* Stones and jewelry lie on Jeremy's walnut, in a pool of light. */
.viewing--board { --hung-w: min(var(--nw, 720px), 720px, 86cqw, (100cqh - var(--rt) - var(--rb) - 80px) * var(--r, 1.7)); background: #2B1A10; }
.board {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse min(820px, 100cqw) min(520px, 42cqh) at 50% calc(var(--rt) + (100cqh - var(--rt) - var(--rb)) / 2),
      rgb(246 206 146 / .30), rgb(246 206 146 / .10) 55%, rgb(246 206 146 / 0) 100%),
    url("walnut.webp") center / cover;
}
.viewing--board .hung img { box-shadow: 0 1px 1px rgb(14 8 5 / .6), 0 8px 18px rgb(14 8 5 / .5); }

@keyframes lights-up {
  from { opacity: 0; filter: brightness(.55); }
  to { opacity: 1; filter: brightness(1); }
}

/* Warm umber shade: a soft vignette, and depth where the type sits. */
.shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(30 20 14 / .78) 0, rgb(30 20 14 / .34) 12%, rgb(30 20 14 / 0) 24%),
    linear-gradient(0deg, rgb(30 20 14 / .92) 0, rgb(30 20 14 / .7) 16%, rgb(30 20 14 / .2) 30%, rgb(30 20 14 / 0) 38%),
    radial-gradient(130% 92% at 50% 44%, rgb(30 20 14 / 0) 50%, rgb(30 20 14 / .55) 100%);
}
.viewing--wall .shade,
.viewing--board .shade {
  background:
    linear-gradient(180deg, rgb(30 20 14 / .55) 0, rgb(30 20 14 / 0) 20%),
    linear-gradient(0deg, rgb(30 20 14 / .7) 0, rgb(30 20 14 / 0) 30%),
    radial-gradient(120% 90% at 50% 44%, rgb(30 20 14 / 0) 46%, rgb(30 20 14 / .6) 100%);
}

/* Floating navigation: Index, the mark, Ask */
.float-nav {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 14px var(--gutter) 0;
}
.nav-item {
  font: 500 11px/1.5 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  padding: 14px 0;
}
.nav-item:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.nav-item--start { justify-self: start; }
.nav-item--end { justify-self: end; margin-right: -.3em; }
.nav-mark { display: block; width: 76px; height: 76px; }
.nav-mark img { width: 100%; height: 100%; }

/* The name: thin, widely tracked capitals, centred low */
.viewing-title {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 104px;
  margin: 0;
  text-align: center;
}
.viewing-title h1 {
  margin: 0;
  padding-left: .32em;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.viewing-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(1040px, 130%);
  height: 280%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(30 20 14 / .5), rgb(30 20 14 / .22) 60%, rgb(30 20 14 / 0));
  pointer-events: none;
}
.viewing--sheet .viewing-title h1 { font-size: 15px; letter-spacing: .28em; padding-left: .28em; }
/* The sheet's name may run to three lines over "Prepared for": keep the hung piece clear of it. */
.viewing--sheet:not(.viewing--room):not(.viewing--setting) { --rb: 240px; }
.viewing-title .sub {
  display: block;
  margin: 14px 0 0;
  font: italic 400 15px/1.5 var(--serif);
  letter-spacing: .01em;
  text-wrap: balance;
}

.cue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 16px;
  display: grid;
  justify-items: center;
  align-items: end;
  width: 48px;
  height: 68px;
  transform: translateX(-50%);
  color: var(--cream);
}
.cue svg { width: 14px; height: 54px; transition: transform .4s ease; }
.cue:hover svg { transform: translateY(5px); }

.corner { display: none; }
/* A staged room is always labelled staged. On a phone the corners are hidden,
   so every piece page (`place.staged_note`: the public page, the line sheet
   and the staff preview) says it under the name; from 900 px the end corner
   says it instead. */
.viewing-title .staged-note {
  margin: 10px 0 0;
  padding-left: .24em;
  font: 500 10.5px/1.4 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
}
@media (min-width: 900px) {
  .viewing-title .staged-note { display: none; }
}

/* ------------------------------------------------------------------ */
/* Below the first screen: the bone room                               */
/* ------------------------------------------------------------------ */

.statement { padding: 0 var(--gutter) 72px; text-align: center; }
.statement::before {
  content: "";
  display: block;
  width: 1px;
  height: 64px;
  margin: 0 auto 40px;
  background: var(--adobe);
}
.eyebrow {
  margin: 0 0 26px;
  font: 500 10.5px/1.8 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brown);
}
.eyebrow .sep { display: none; margin: 0 .5em; }
.eyebrow-part { display: block; }
/* The house names wrap as one phrase when they can: never "Source / D'Amour". */
.house-names { display: inline-block; }
.statement-text {
  margin: 0 auto;
  max-width: 620px;
  font: 400 21px/1.6 var(--serif);
  color: var(--umber);
  text-wrap: pretty;
  white-space: pre-line;
}
.statement-fine {
  max-width: 480px;
  margin: 28px auto 0;
  font: 400 12.5px/1.6 var(--sans);
  color: var(--brown);
}
/* A quiet text control: the sheet's own download */
.text-control {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 10.5px/1.6 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--umber);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  cursor: pointer;
}
.text-control:hover { color: var(--brown); }
.text-link { text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* The museum tag */
.tag {
  border-top: 1px solid var(--umber);
  padding-top: 14px;
  font: 400 13.5px/1.6 var(--sans);
  color: var(--umber);
}
.tag-maker {
  margin: 0 0 6px;
  font: 500 10.5px/1.5 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brown);
}
.tag-name { margin: 0 0 8px; font: 500 15px/1.4 var(--sans); letter-spacing: .01em; }
.tag-lines { margin: 0; padding: 0; list-style: none; }
.tag-lines:empty { display: none; }
.tag-sizes { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.tag-terms {
  margin: 14px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  font: 400 13px/1.5 var(--sans);
  color: var(--brown);
}
.tag-fine { margin: 8px 0 0; font: 400 11.5px/1.5 var(--sans); color: var(--brown); }
.tag-lines .tag-fine--grade { display: block; margin: 0 0 4px; }

/* The asymmetric pairing: tag, then the piece whole */
.pairing { display: grid; row-gap: 32px; padding: 0 0 64px; }
.pairing .tag { margin: 0 var(--gutter); max-width: 300px; }
.second { margin: 0; }
.second img { width: min(100%, var(--screen) * .85 * var(--r, 1.5)); height: auto; margin: 0 auto; }
.second--hung { padding: 0 var(--gutter); }
.second--hung img {
  width: min(100%, var(--natural, 478px), var(--screen) * .80 * var(--r, 1.5));
  margin: 0 auto;
  box-shadow: 0 1px 2px rgb(60 36 22 / .25), 0 16px 34px rgb(60 36 22 / .22);
}

/* Further views: a quiet column of whole photographs */
.more-views { display: grid; row-gap: 40px; padding: 0 var(--gutter) 72px; }
.more-view { margin: 0; }
.more-view img { width: min(100%, var(--natural, 100%), var(--screen) * .85 * var(--r, 1.5)); margin: 0 auto; }

/* The bloom: photographs below the first screen develop from sepia to colour as they arrive.
   Only the develop is animated, so the sepia is already in place when the script turns it on. */
.can-bloom [data-bloom] img { filter: sepia(.78) saturate(.6) brightness(.97); }
.can-bloom [data-bloom].is-bloomed img { filter: none; transition: filter 2.4s cubic-bezier(.25, .6, .2, 1); }

/* The ask: one thin underlined line, and the request beneath it */
.ask { padding: 8px var(--gutter) 96px; scroll-margin-top: 16px; }
.ask-inner { max-width: 480px; margin: 0 auto; }
.ask-head { margin: 0; font: inherit; }
.ask-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0 11px;
  border-bottom: 1px solid var(--umber);
  font: 400 16px/1.4 var(--sans);
  letter-spacing: .03em;
  color: var(--umber);
  text-decoration: none;
}
.ask-arrow { flex: none; width: 30px; height: 10px; transition: transform .35s ease; }
.ask-line:hover .ask-arrow, .ask-submit:hover .ask-arrow { transform: translateX(6px); }
.ask-note {
  margin: 12px 0 0;
  font: italic 400 14.5px/1.5 var(--serif);
  color: var(--brown);
}
.ask-fine, .selection-note { margin: 0 0 8px; font: 400 12.5px/1.6 var(--sans); color: var(--brown); }
.selection-note { margin-bottom: 28px; }
.ask-form, .preview-request { margin-top: 40px; }
.ask-form label {
  display: block;
  margin: 0 0 22px;
  font: 500 10.5px/1.6 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brown);
}
.ask-form input, .ask-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--umber);
  border-radius: 0;
  background: transparent;
  color: var(--umber);
  font: 400 16px/1.5 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
/* The message box's thin border keeps at least 3:1 against the bone ground. */
.ask-form textarea { margin-top: 10px; padding: 10px 12px; border: 1px solid rgb(90 52 34 / .65); resize: vertical; }
.ask-form input:focus-visible, .ask-form textarea:focus-visible { outline-offset: 2px; }
.ask-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 12px 0 11px;
  border: 0;
  border-bottom: 1px solid var(--umber);
  background: none;
  font: 500 15px/1.4 var(--sans);
  letter-spacing: .03em;
  color: var(--umber);
  text-align: left;
  cursor: pointer;
}
.ask-submit:disabled { cursor: default; color: var(--brown); border-bottom-color: var(--rule); opacity: .6; }
.ask-submit:disabled .ask-arrow { transform: none; }
.preview-request .ask-fine { margin-bottom: 4px; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Plate navigation inside the sheet */
.plates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "prev next" "index index";
  align-items: end;
  gap: 4px 16px;
  margin: 0 var(--gutter);
  padding: 10px 0 14px;
  border-top: 1px solid var(--rule);
  font: 500 10.5px/1.6 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brown);
}
.plates a { text-decoration: none; padding: 10px 0; }
.plates a:hover { text-decoration: underline; text-underline-offset: 5px; }
.plates .plates-prev { grid-area: prev; }
.plates .plates-index { grid-area: index; }
.plates .plates-next { grid-area: next; text-align: right; }
/* First or last plate: the index shares the line with the one neighbour, which sits right. */
.plates:not(:has(.plates-prev)), .plates:not(:has(.plates-next)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.plates:not(:has(.plates-prev)) { grid-template-areas: "index next"; }
.plates:not(:has(.plates-next)) { grid-template-areas: "prev index"; }
.plates:not(:has(.plates-next)) .plates-index { text-align: right; }
.plates .next-name {
  display: block;
  margin-top: 2px;
  font: italic 400 15px/1.4 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--umber);
}

/* Footer: the gold mark and the town */
.site-foot {
  background: var(--umber);
  color: var(--sand);
  text-align: center;
  padding: 60px var(--gutter) 56px;
}
.site-foot img { width: 84px; height: 84px; margin: 0 auto; }
.site-foot p {
  margin: 18px 0 0;
  padding-left: .3em;
  font: 500 10.5px/1.6 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
}
.foot-mail {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 0;
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .04em;
  color: var(--sand);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* The sheet: quiet full-width rows, each with its museum tag           */
/* ------------------------------------------------------------------ */

.rows { display: block; padding: 0 0 24px; }
.row { margin: 0 0 88px; }
.row-image { display: block; text-decoration: none; }
.row-image picture { display: contents; }
.row-image img { width: min(100%, var(--screen) * .92 * var(--r, 1.5)); height: auto; margin: 0 auto; }
.row-wall {
  position: relative;
  display: grid;
  place-items: center;
  padding: 64px var(--gutter);
  background:
    radial-gradient(ellipse 70% 62% at 50% 46%, rgb(246 206 146 / .38), rgb(246 206 146 / 0) 100%),
    radial-gradient(130% 100% at 50% 50%, rgb(30 20 14 / 0) 55%, rgb(30 20 14 / .35) 100%),
    url("plaster-wall.jpg") center / cover;
}
.row-wall img {
  width: min(var(--nw, 478px), 478px, 100%, var(--screen) * .64 * var(--r, 1.45));
  box-shadow: 0 1px 2px rgb(14 8 5 / .5), 0 20px 40px rgb(14 8 5 / .5);
}
/* Stones and jewelry: the same quiet block, on walnut */
.row-board {
  background:
    radial-gradient(ellipse 70% 62% at 50% 46%, rgb(246 206 146 / .26), rgb(246 206 146 / 0) 100%),
    radial-gradient(130% 100% at 50% 50%, rgb(30 20 14 / 0) 55%, rgb(30 20 14 / .4) 100%),
    url("walnut.webp") center / cover;
}
.row-board img {
  width: min(var(--nw, 600px), 600px, 100%, var(--screen) * .56 * var(--r, 1.5));
  box-shadow: 0 1px 1px rgb(14 8 5 / .6), 0 8px 18px rgb(14 8 5 / .5);
}
.row-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 16px;
  padding: 22px var(--gutter) 0;
}
.row-num { font: italic 400 22px/1 var(--serif); color: var(--brown); padding-top: 14px; }
.row-foot .tag { max-width: 320px; }
.row-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 28px;
}
.row-view {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--umber);
  font: 500 11px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--umber);
}
.row-view .ask-arrow { width: 24px; }
.row-view:hover .ask-arrow { transform: translateX(5px); }
.rows-empty {
  margin: 0 var(--gutter);
  padding: 18px 0 40px;
  border-top: 1px solid var(--rule);
  font: italic 400 17px/1.5 var(--serif);
  color: var(--brown);
  text-align: center;
}

/* The quiet request toggle: a small square box, empty in the ink of its line,
   filled umber with a cream tick when the piece is in the request */
.request-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 400 13px/1.4 var(--sans);
  letter-spacing: .02em;
  color: var(--brown);
  cursor: pointer;
}
.request-toggle input {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 18px;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.request-toggle input::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--cream);
  clip-path: polygon(0 45%, 18% 28%, 40% 50%, 82% 6%, 100% 22%, 40% 86%);
  transform: scale(0);
}
.request-toggle input:checked { background: var(--umber); border-color: var(--umber); }
.request-toggle input:checked::before { transform: scale(1); }

/* Grade key: what the studio's own grades mean */
.grade-key { max-width: 620px; margin: 0 auto; padding: 8px var(--gutter) 72px; text-align: center; }
.grade-key-head {
  margin: 0 0 14px;
  font: 500 10.5px/1.8 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brown);
}
.grade-key-line { margin: 6px 0 0; font: 400 12.5px/1.6 var(--sans); color: var(--brown); }

/* On a phone, once pieces are ticked: a slim cream bar to the request */
.request-shortcut {
  position: fixed;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 52px;
  padding: 14px var(--gutter) max(14px, env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 1px solid var(--rule);
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--umber);
}
.request-shortcut:focus-visible { outline-offset: -6px; }
.request-shortcut[hidden] { display: none; }

/* The piece receipt after a hold */
.result-link { margin-top: 28px; font: 500 11px/1.6 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.result-link a { display: inline-block; padding: 10px 0; }

/* ------------------------------------------------------------------ */
/* Desktop                                                             */
/* ------------------------------------------------------------------ */

@media (min-width: 900px) {
  :root { --gutter: max(48px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .viewing, .viewing--room, .viewing--setting { --rt: 116px; --rb: 150px; }
  .viewing--sheet, .viewing--sheet:not(.viewing--room):not(.viewing--setting) { --rb: 184px; }
  /* A long name will wrap: a taller band keeps the piece clear of its second line
     before the script measures, and without the script at all. */
  .viewing.viewing--long { --rb: 194px; }
  .viewing--sheet.viewing--long { --rb: 228px; }
  .shade {
    background:
      linear-gradient(180deg, rgb(30 20 14 / .84) 0, rgb(30 20 14 / .55) 9%, rgb(30 20 14 / .18) 16%, rgb(30 20 14 / 0) 24%),
      linear-gradient(0deg, rgb(30 20 14 / .9) 0, rgb(30 20 14 / .62) 10%, rgb(30 20 14 / 0) 24%),
      radial-gradient(120% 100% at 50% 42%, rgb(30 20 14 / 0) 52%, rgb(30 20 14 / .55) 100%);
  }
  .float-nav { padding-top: 18px; }
  .nav-mark { width: 92px; height: 92px; }
  .viewing-title { bottom: 92px; }
  .viewing-title h1,
  .viewing--sheet .viewing-title h1 { font-size: 24px; letter-spacing: .34em; padding-left: .34em; }
  .viewing-title .sub { font-size: 16px; margin-top: 10px; }
  .cue { bottom: 18px; }
  .corner {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 34px;
    max-width: calc(50% - var(--gutter) - 48px);
    margin: 0;
    font: 500 10.5px/1.4 var(--sans);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--cream);
  }
  .corner--start { left: var(--gutter); }
  .corner--end { right: var(--gutter); text-align: right; }

  .statement { padding-bottom: 128px; }
  .eyebrow .sep, .eyebrow-part { display: inline; }
  .statement::before { height: 96px; margin-bottom: 56px; }
  .statement-text { font-size: 27px; line-height: 1.55; }

  .pairing {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    align-items: end;
    max-width: 1344px;
    margin: 0 auto;
    padding: 0 var(--gutter) 112px;
  }
  .pairing .tag { grid-column: 1 / span 3; grid-row: 1; margin: 0 0 6px; }
  .second { grid-column: 5 / span 8; grid-row: 1; }
  .second--hung { padding: 0; }
  .more-views { max-width: 1344px; margin: 0 auto; row-gap: 64px; padding-bottom: 112px; }

  .ask { padding-bottom: 144px; }
  .ask-line { font-size: 17px; }
  .form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }

  .plates {
    max-width: 1248px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "prev index next";
  }

  .rows { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) 40px; }
  .row { margin-bottom: 144px; }
  .row-wall { padding: 120px var(--gutter); }
  .row-foot { grid-template-columns: 72px minmax(0, 340px) 1fr; align-items: end; padding: 28px 0 0; }
  /* A room photograph runs the content width (at most a screen tall), centred.
     Every row's foot keeps the full content width, so the plate numbers read as
     one catalogue column whatever the photograph's shape. */
  .row-image:not(.row-wall) img { width: min(100%, var(--screen) * var(--r, 1.5)); }
  .row-actions { grid-column: 3; justify-self: end; flex-direction: column; align-items: flex-end; gap: 6px; }
  .rows-empty { margin: 0; }
  .request-shortcut { display: none; }
}

@media (min-width: 1600px) {
  .viewing, .viewing--room, .viewing--setting { --rt: 132px; }
  .viewing-title h1 { font-size: 27px; }
  .nav-mark { width: 104px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .plate-wrap, .hung { animation: none; }
  .can-bloom [data-bloom] img, .can-bloom [data-bloom].is-bloomed img { filter: none; transition: none; }
  .cue svg, .ask-arrow { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Print: a clean catalogue. The first screen becomes a short cover.    */
/* ------------------------------------------------------------------ */

@media print {
  @page { margin: 12mm; }
  html, body { background: var(--bone); color: var(--umber); }
  .no-print, .banner, .request-shortcut, .skip-link, .preview-strip { display: none !important; }
  .viewing {
    height: auto;
    min-height: 0;
    overflow: visible;
    container-type: normal;
    margin: 0 0 8mm;
    padding: 0 0 10mm;
    background: none;
    color: var(--umber);
    text-align: center;
  }
  .viewing > :not(.viewing-title):not(.print-mark), .viewing--room::before, .viewing--upright::before { display: none !important; }
  .print-mark { display: block; width: 46mm; height: auto; margin: 0 auto 8mm; }
  .viewing-title { position: static; }
  .viewing-title::before { display: none; }
  .viewing-title h1,
  .viewing--sheet .viewing-title h1 { font-size: 17pt; letter-spacing: .3em; padding-left: .3em; }
  .viewing-title .sub { font-size: 12pt; margin-top: 3mm; }
  .statement { padding: 0 0 8mm; }
  .statement::before { display: none; }
  .eyebrow { margin-bottom: 3mm; }
  .eyebrow .sep, .eyebrow-part { display: inline; }
  .statement-text { font-size: 13pt; max-width: 150mm; }
  .statement-fine { margin-top: 3mm; }
  .rows { max-width: none; padding: 0; }
  .row { margin: 0 0 10mm; break-inside: avoid; page-break-inside: avoid; }
  .row-image, .row-wall, .row-board { padding: 0; background: none; border: 0; }
  .row-image img, .row-image:not(.row-wall) img, .row-wall img, .row-board img {
    width: min(100%, 150mm * var(--r, 1.5), var(--nw, 100%));
    max-height: 150mm;
    margin: 0 auto;
    box-shadow: none;
    filter: none !important;
    transition: none;
  }
  .row-foot { width: auto; grid-template-columns: 14mm minmax(0, 1fr); padding: 4mm 0 0; align-items: start; }
  .row-num { padding-top: 3mm; }
  .row-foot .tag { max-width: 110mm; }
  [data-bloom] img { filter: none !important; }
  /* The grade key and the contact line stay together: the contact never ends the sheet alone. */
  .grade-key { padding: 2mm 0 0; break-inside: avoid; page-break-inside: avoid; break-after: avoid; page-break-after: avoid; }
  .print-contact {
    display: block;
    break-before: avoid;
    page-break-before: avoid;
    break-inside: avoid;
    margin: 4mm 0 0;
    padding-top: 4mm;
    border-top: 1px solid var(--umber);
    font: 400 10pt/1.5 var(--sans);
    color: var(--umber);
    overflow-wrap: anywhere;
  }
}