/* Claude Monet, a printed sale catalogue.
   A gold-foil catalogue on black. The pages stay paper; everything around them is black.
   Gold comes in three forms and stays in its lane: metallic leaf only on the cover, the frames
   and the hammer; a flat bright gold for type and controls on black; a deep gold for type on
   paper. Every painting hangs in a gilded frame with a linen slip, and has its own sound block
   beside it: the hammer comes down on the block, never on the painting.
   Corners: controls 6px, paper and frames 1-2px, the loupe, block and paddle ring round. */

:root {
  color-scheme: dark;
  --black: #0e0e0f;            /* the room, the desk, the nav, the lot view */
  --raised: #18181a;           /* a surface lifted off the black */
  --quiet: #242427;            /* the quiet button fill */
  --ivory: #ecebe5;            /* 16.2:1 on --black, 13.0:1 on --quiet */
  --muted: #a6a49c;            /* 7.7:1 on --black, 7.1:1 on --raised */
  --gold: #e2cd97;             /* champagne on black: 12.3:1 on --black, 11.3:1 on --raised */
  --gold-hover: #ecdcae;
  --near-black: #141210;       /* text on gold: 11.9:1 on --gold, 13.7:1 on --gold-hover */
  --line: rgba(236, 235, 229, .12);

  --paper: #eeefeb;            /* the pages */
  --ink: #1c1e22;              /* 14.5:1 on --paper */
  --ink-2: #575c66;            /* 5.8:1 on --paper */
  --gold-deep: #725d2c;        /* gold type on paper: 5.5:1 on --paper */
  --foil-ink: #2e2410;         /* type stamped into the foil: 7.0:1 on its darkest tone, 9.8:1 mid */
  --shadow: 20, 18, 14;

  /* metallic leaf: the cover, the frames */
  /* champagne foil: base #e2cd97, highlights #f7ecd2, shading #b9995c */
  --foil: linear-gradient(160deg, #cdb37a 0%, #f2e4bf 22%, #dcc58d 40%, #f7ecd2 58%, #c8ad72 78%, #e2cd97 100%);
  --edge: linear-gradient(to right, #b9995c, #e2cd97 55%, #f7ecd2);  /* a board's edge, desk to top */
  /* the frame moulding: a 9-slice drawing, mitred, lit from the top left */
  --moulding: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236a5630'/%3E%3Cstop offset='0.025' stop-color='%236a5630'/%3E%3Cstop offset='0.025' stop-color='%23fffcf1'/%3E%3Cstop offset='0.05' stop-color='%23fdf6e3'/%3E%3Cstop offset='0.1' stop-color='%23edddb5'/%3E%3Cstop offset='0.1' stop-color='%23e2cd97'/%3E%3Cstop offset='0.13' stop-color='%23e2cd97'/%3E%3Cstop offset='0.13' stop-color='%23876f40'/%3E%3Cstop offset='0.2' stop-color='%239f834d'/%3E%3Cstop offset='0.27' stop-color='%23c0a872'/%3E%3Cstop offset='0.33' stop-color='%23f2e6c5'/%3E%3Cstop offset='0.36' stop-color='%23fdf6e3'/%3E%3Cstop offset='0.36' stop-color='%236a5630'/%3E%3Cstop offset='0.375' stop-color='%236a5630'/%3E%3Cstop offset='0.375' stop-color='%23fef9ea'/%3E%3Cstop offset='0.405' stop-color='%23fffcf1'/%3E%3Cstop offset='0.435' stop-color='%23b39963'/%3E%3Cstop offset='0.435' stop-color='%236a5630'/%3E%3Cstop offset='0.45' stop-color='%236a5630'/%3E%3Cstop offset='0.45' stop-color='%23ead9ae'/%3E%3Cstop offset='0.62' stop-color='%23e2cd97'/%3E%3Cstop offset='0.76' stop-color='%23d1ba84'/%3E%3Cstop offset='0.76' stop-color='%23fffcf1'/%3E%3Cstop offset='0.785' stop-color='%23fdf6e3'/%3E%3Cstop offset='0.785' stop-color='%239f834d'/%3E%3Cstop offset='1' stop-color='%23826a3d'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%236a5630'/%3E%3Cstop offset='0.025' stop-color='%236a5630'/%3E%3Cstop offset='0.025' stop-color='%23f8f3e4'/%3E%3Cstop offset='0.05' stop-color='%23ece1c7'/%3E%3Cstop offset='0.1' stop-color='%23e3d1a7'/%3E%3Cstop offset='0.1' stop-color='%23ddc791'/%3E%3Cstop offset='0.13' stop-color='%23ddc791'/%3E%3Cstop offset='0.13' stop-color='%23907a4f'/%3E%3Cstop offset='0.2' stop-color='%23b09868'/%3E%3Cstop offset='0.27' stop-color='%23c6b07c'/%3E%3Cstop offset='0.33' stop-color='%23e6d7b1'/%3E%3Cstop offset='0.36' stop-color='%23ece1c7'/%3E%3Cstop offset='0.36' stop-color='%236a5630'/%3E%3Cstop offset='0.375' stop-color='%236a5630'/%3E%3Cstop offset='0.375' stop-color='%23f2ead6'/%3E%3Cstop offset='0.405' stop-color='%23f8f3e4'/%3E%3Cstop offset='0.435' stop-color='%23bea674'/%3E%3Cstop offset='0.435' stop-color='%236a5630'/%3E%3Cstop offset='0.45' stop-color='%236a5630'/%3E%3Cstop offset='0.45' stop-color='%23e2cfa1'/%3E%3Cstop offset='0.62' stop-color='%23ddc791'/%3E%3Cstop offset='0.76' stop-color='%23d2bb87'/%3E%3Cstop offset='0.76' stop-color='%23f8f3e4'/%3E%3Cstop offset='0.785' stop-color='%23ece1c7'/%3E%3Cstop offset='0.785' stop-color='%23b09868'/%3E%3Cstop offset='1' stop-color='%238a7449'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%236a5630'/%3E%3Cstop offset='0.025' stop-color='%236a5630'/%3E%3Cstop offset='0.025' stop-color='%23c5b38d'/%3E%3Cstop offset='0.05' stop-color='%23b9a377'/%3E%3Cstop offset='0.1' stop-color='%23c5ae7c'/%3E%3Cstop offset='0.1' stop-color='%23cdb67f'/%3E%3Cstop offset='0.13' stop-color='%23cdb67f'/%3E%3Cstop offset='0.13' stop-color='%23ab9b7a'/%3E%3Cstop offset='0.2' stop-color='%23e1d3b6'/%3E%3Cstop offset='0.27' stop-color='%23d7c49a'/%3E%3Cstop offset='0.33' stop-color='%23c1ab7a'/%3E%3Cstop offset='0.36' stop-color='%23b9a377'/%3E%3Cstop offset='0.36' stop-color='%236a5630'/%3E%3Cstop offset='0.375' stop-color='%236a5630'/%3E%3Cstop offset='0.375' stop-color='%23bfab82'/%3E%3Cstop offset='0.405' stop-color='%23c5b38d'/%3E%3Cstop offset='0.435' stop-color='%23dbcaa6'/%3E%3Cstop offset='0.435' stop-color='%236a5630'/%3E%3Cstop offset='0.45' stop-color='%236a5630'/%3E%3Cstop offset='0.45' stop-color='%23c7b07d'/%3E%3Cstop offset='0.62' stop-color='%23cdb67f'/%3E%3Cstop offset='0.76' stop-color='%23d2bd8d'/%3E%3Cstop offset='0.76' stop-color='%23c5b38d'/%3E%3Cstop offset='0.785' stop-color='%23b9a377'/%3E%3Cstop offset='0.785' stop-color='%23e1d3b6'/%3E%3Cstop offset='1' stop-color='%23a08e6c'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%236a5630'/%3E%3Cstop offset='0.025' stop-color='%236a5630'/%3E%3Cstop offset='0.025' stop-color='%23d8caac'/%3E%3Cstop offset='0.05' stop-color='%23c7b48d'/%3E%3Cstop offset='0.1' stop-color='%23cdb888'/%3E%3Cstop offset='0.1' stop-color='%23d1ba84'/%3E%3Cstop offset='0.13' stop-color='%23d1ba84'/%3E%3Cstop offset='0.13' stop-color='%23a4926e'/%3E%3Cstop offset='0.2' stop-color='%23d3c3a0'/%3E%3Cstop offset='0.27' stop-color='%23d2be92'/%3E%3Cstop offset='0.33' stop-color='%23cbb689'/%3E%3Cstop offset='0.36' stop-color='%23c7b48d'/%3E%3Cstop offset='0.36' stop-color='%236a5630'/%3E%3Cstop offset='0.375' stop-color='%236a5630'/%3E%3Cstop offset='0.375' stop-color='%23d0bf9c'/%3E%3Cstop offset='0.405' stop-color='%23d8caac'/%3E%3Cstop offset='0.435' stop-color='%23d2c098'/%3E%3Cstop offset='0.435' stop-color='%236a5630'/%3E%3Cstop offset='0.45' stop-color='%236a5630'/%3E%3Cstop offset='0.45' stop-color='%23ceb887'/%3E%3Cstop offset='0.62' stop-color='%23d1ba84'/%3E%3Cstop offset='0.76' stop-color='%23d2bc8b'/%3E%3Cstop offset='0.76' stop-color='%23d8caac'/%3E%3Cstop offset='0.785' stop-color='%23c7b48d'/%3E%3Cstop offset='0.785' stop-color='%23d3c3a0'/%3E%3Cstop offset='1' stop-color='%23998762'/%3E%3C/linearGradient%3E%3CradialGradient id='p' cx='.35' cy='.35' r='.75'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%23f5e7c3'/%3E%3Cstop offset='.8' stop-color='%23b39557'/%3E%3Cstop offset='1' stop-color='%237d6538'/%3E%3C/radialGradient%3E%3CradialGradient id='bt'%3E%3Cstop offset='0' stop-color='%23fff1c2' stop-opacity='0.7'/%3E%3Cstop offset='1' stop-color='%23fff1c2' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='br'%3E%3Cstop offset='0' stop-color='%23fff1c2' stop-opacity='0.35'/%3E%3Cstop offset='1' stop-color='%23fff1c2' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='bl'%3E%3Cstop offset='0' stop-color='%23fff1c2' stop-opacity='0.3'/%3E%3Cstop offset='1' stop-color='%23fff1c2' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='bb'%3E%3Cstop offset='0' stop-color='%23fff1c2' stop-opacity='0.18'/%3E%3Cstop offset='1' stop-color='%23fff1c2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23t)' d='M0 0H100L80 20H20Z'/%3E%3Cpath fill='url(%23l)' d='M0 0L20 20V80L0 100Z'/%3E%3Cpath fill='url(%23b)' d='M0 100L20 80H80L100 100Z'/%3E%3Cpath fill='url(%23r)' d='M100 0V100L80 80V20Z'/%3E%3Cg fill='url(%23p)'%3E%3Ccircle cx='21.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='21.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='21.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='21.5' r='0.95'/%3E%3Ccircle cx='24.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='24.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='24.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='24.5' r='0.95'/%3E%3Ccircle cx='27.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='27.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='27.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='27.5' r='0.95'/%3E%3Ccircle cx='30.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='30.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='30.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='30.5' r='0.95'/%3E%3Ccircle cx='33.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='33.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='33.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='33.5' r='0.95'/%3E%3Ccircle cx='36.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='36.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='36.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='36.5' r='0.95'/%3E%3Ccircle cx='39.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='39.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='39.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='39.5' r='0.95'/%3E%3Ccircle cx='42.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='42.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='42.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='42.5' r='0.95'/%3E%3Ccircle cx='45.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='45.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='45.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='45.5' r='0.95'/%3E%3Ccircle cx='48.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='48.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='48.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='48.5' r='0.95'/%3E%3Ccircle cx='51.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='51.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='51.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='51.5' r='0.95'/%3E%3Ccircle cx='54.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='54.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='54.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='54.5' r='0.95'/%3E%3Ccircle cx='57.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='57.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='57.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='57.5' r='0.95'/%3E%3Ccircle cx='60.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='60.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='60.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='60.5' r='0.95'/%3E%3Ccircle cx='63.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='63.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='63.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='63.5' r='0.95'/%3E%3Ccircle cx='66.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='66.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='66.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='66.5' r='0.95'/%3E%3Ccircle cx='69.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='69.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='69.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='69.5' r='0.95'/%3E%3Ccircle cx='72.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='72.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='72.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='72.5' r='0.95'/%3E%3Ccircle cx='75.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='75.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='75.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='75.5' r='0.95'/%3E%3Ccircle cx='78.5' cy='8.1' r='0.95'/%3E%3Ccircle cx='78.5' cy='91.9' r='0.95'/%3E%3Ccircle cx='8.1' cy='78.5' r='0.95'/%3E%3Ccircle cx='91.9' cy='78.5' r='0.95'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23bt)'/%3E%3Ccircle cx='90' cy='10' r='9' fill='url(%23br)'/%3E%3Ccircle cx='10' cy='90' r='9' fill='url(%23bl)'/%3E%3Ccircle cx='90' cy='90' r='8' fill='url(%23bb)'/%3E%3C/svg%3E");

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-small: .8125rem;        /* 13 */
  --fs-ui: .9375rem;           /* 15 */
  --fs-body: 1.125rem;         /* 18, a serif reads small */
  --fs-h2: clamp(1.75rem, 3vw, 2.25rem);

  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(72px, 10vw, 128px);
  --nav-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  /* what the type on a surface uses; paper surfaces swap these */
  --fg: var(--ivory);
  --fg-2: var(--muted);
  --num: var(--gold);
  --focus: var(--gold);

  --z-nav: 20;
}
@media (max-width: 719px) { :root { --nav-h: 56px; } }

/* a book page: paper, ink, deep gold */
.paper {
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --num: var(--gold-deep);
  --focus: var(--gold-deep);
  background-color: var(--paper);
  color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--black);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; background-size: cover; }
button { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1, h2, h3, p, figure, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 50;
  padding: 10px 14px; border-radius: 6px;
  background: var(--gold); color: var(--near-black);
  font: 500 var(--fs-ui) var(--sans);
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ---------- buttons: flat gold with a struck bevel underneath ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 6px;
  background: var(--gold); color: var(--near-black);
  box-shadow: inset 0 -2px 0 rgba(70, 48, 12, .35);
  font: 600 var(--fs-ui)/1 var(--sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .16s var(--ease);
}
.btn:hover { background: var(--gold-hover); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 0 0 rgba(70, 48, 12, 0); }
.paper .btn { box-shadow: inset 0 0 0 1px rgba(92, 66, 20, .55), inset 0 -2px 0 rgba(70, 48, 12, .3); }
.btn--quiet { background: var(--quiet); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.btn--quiet:hover { background: #2e2e32; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .875rem; }
.btn:disabled { opacity: .35; cursor: default; transform: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--black); border-bottom: 1px solid var(--line);
  color: var(--ivory);
  font-family: var(--sans);
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-on-cover, .nav.is-on-desk { background: transparent; border-color: transparent; }
.nav.is-on-cover { color: var(--foil-ink); }
.nav.is-on-cover .btn { background: var(--near-black); color: var(--gold); box-shadow: none; }
.nav__name { font: 500 1.0625rem var(--serif); text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); }
.nav__link { font-size: var(--fs-ui); text-decoration: none; padding: 8px 0; }
.nav__link:hover { text-decoration: underline; }
.sound {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 6px;
  border: 0; background: none; cursor: pointer;
  font: var(--fs-ui) var(--sans);
}
.sound svg { width: 20px; height: 20px; fill: currentColor; }
.sound[aria-pressed="true"] .sound__off, .sound[aria-pressed="false"] .sound__on { display: none; }
@media (max-width: 519px) {
  .nav__link { display: none; }
  .sound [data-sound-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- the gilded frame ----------
   A real object, lit from the top left like everything else. The moulding is mitred, with its own
   profile on each side (dark arris, a lip with a specular streak, a deep cove, a pearl-strung bead
   between cut lines, a flat, then the sight-edge bevel) and burnished corners. It stands off the
   wall: its bottom and right sides show as a dark gilt extrusion, with a contact shadow and a long
   shadow thrown down and to the right. Inside, a linen slip with its own bevel, then the canvas,
   pushed back so it shifts against the frame when the frame tilts. */
.frame {
  --f: 18px;                   /* the moulding */
  --m: 10px;                   /* the linen slip */
  position: relative; display: block;
  border: var(--f) solid #b8913f;
  border-image: var(--moulding) 20 / var(--f) round;
  transform-style: preserve-3d;
  box-shadow: 1px 1px 0 #d3bb84, 2px 2px 0 #cbb37d, 3px 3px 0 #c3ab76, 4px 4px 0 #bba36f, 5px 5px 0 #b39b68, 6px 6px 0 #ac9460, 7px 7px 0 #a48c59, 8px 8px 0 #9c8452, 9px 9px 0 #947c4b, 10px 10px 0 #8c7444, 11px 12px 3px rgba(20, 15, 5, 0.45), 20px 28px 40px -2px rgba(20, 15, 5, 0.42);
}
/* the rebate behind the canvas, only seen in a sliver when the canvas shifts on tilt */
.frame::before {
  content: ""; position: absolute; inset: 0;
  background: #3a2f1a;
  transform: translateZ(-14px);
}
.frame__slip {
  position: relative; display: block; padding: var(--m);
  background-color: #dcd3bc;
  background-image:
    repeating-linear-gradient(0deg, rgba(60, 50, 30, .06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(60, 50, 30, .05) 0 1px, transparent 1px 3px);
  /* the moulding's top and left edge throws its shadow onto the slip */
  box-shadow: inset 4px 4px 7px rgba(0, 0, 0, .5), inset -1px -1px 0 rgba(255, 255, 255, .35);
  transform: translateZ(-10px);
}
/* the slip's own bevel, sloping down to the canvas: dark top and left, lit bottom and right */
.frame__slip::before {
  content: ""; position: absolute; inset: calc(var(--m) - 3px);
  border: 3px solid; border-color: #9e967f #fbf8ef #fffdf6 #a39b84;
  pointer-events: none;
}
/* the canvas set back: a shadow along its top and left edges */
.frame__slip::after {
  content: ""; position: absolute; inset: var(--m);
  box-shadow: inset 4px 4px 6px rgba(0, 0, 0, .5), inset -1px -1px 1px rgba(255, 255, 255, .1);
  pointer-events: none;
}
/* on tilt a band of light sweeps across the gold */
.frame > .sheen {
  inset: calc(-1 * var(--f));
  background: linear-gradient(110deg, rgba(255, 250, 225, 0) 38%, rgba(255, 250, 225, .5) 49%, rgba(255, 255, 255, .7) 50%, rgba(255, 250, 225, .45) 51%, rgba(255, 250, 225, 0) 62%);
  background-size: 300% 100%;
  background-position: calc(100% - var(--sx, 50%)) 0;
}
.frame--sm { --f: 13px; --m: 6px; box-shadow: 1px 1px 0 #d3bb84, 2px 2px 0 #c7af79, 3px 3px 0 #bba36f, 4px 4px 0 #b09864, 5px 5px 0 #a48c59, 6px 6px 0 #98804f, 7px 7px 0 #8c7444, 8px 9px 3px rgba(20, 15, 5, 0.45), 17px 25px 34px -2px rgba(20, 15, 5, 0.42); }
.frame--sm .frame__slip { box-shadow: inset 3px 3px 4px rgba(0, 0, 0, .5); }
.frame--sm .frame__slip::before { inset: calc(var(--m) - 2px); border-width: 2px; }
.frame--sm .frame__slip::after { box-shadow: inset 3px 3px 4px rgba(0, 0, 0, .5); }
.frame--lv { --f: 36px; --m: 18px; box-shadow: 1px 1px 0 #d3bb84, 2px 2px 0 #ceb67f, 3px 3px 0 #c8b07a, 4px 4px 0 #c3ab75, 5px 5px 0 #bda570, 6px 6px 0 #b8a06b, 7px 7px 0 #b29a66, 8px 8px 0 #ad9562, 9px 9px 0 #a78f5d, 10px 10px 0 #a28a58, 11px 11px 0 #9c8453, 12px 12px 0 #977f4e, 13px 13px 0 #917949, 14px 14px 0 #8c7444, 15px 16px 3px rgba(20, 15, 5, 0.5), 24px 32px 48px -2px rgba(20, 15, 5, 0.5); }
.frame--cover { --f: 12px; --m: 7px; box-shadow: 1px 1px 0 #d3bb84, 2px 2px 0 #c5ad77, 3px 3px 0 #b79f6a, 4px 4px 0 #a8905e, 5px 5px 0 #9a8251, 6px 6px 0 #8c7444, 7px 8px 3px rgba(20, 15, 5, 0.45), 16px 24px 32px -2px rgba(20, 15, 5, 0.42); }
@media (max-width: 899px) {
  .frame--lv { --f: 20px; --m: 10px; box-shadow: 1px 1px 0 #d3bb84, 2px 2px 0 #cab27c, 3px 3px 0 #c1a974, 4px 4px 0 #b8a06c, 5px 5px 0 #b09864, 6px 6px 0 #a78f5c, 7px 7px 0 #9e8654, 8px 8px 0 #957d4c, 9px 9px 0 #8c7444, 10px 11px 3px rgba(20, 15, 5, 0.5), 19px 27px 38px -2px rgba(20, 15, 5, 0.5); }
}
@media (max-width: 719px) {
  .frame--sm { --f: 10px; --m: 5px; box-shadow: 1px 1px 0 #d3bb84, 2px 2px 0 #c5ad77, 3px 3px 0 #b79f6a, 4px 4px 0 #a8905e, 5px 5px 0 #9a8251, 6px 6px 0 #8c7444, 7px 8px 3px rgba(20, 15, 5, 0.45), 16px 24px 32px -2px rgba(20, 15, 5, 0.42); }
}

/* ---------- the sound block: dark lacquered wood with a gold inlay, rendered in Blender ----------
   --w is the width of the block's top face. The picture is cropped round the block and its shadow,
   so gavel.js hands over where the block sits inside it (--bk-*, in widths of the top face). */
.block {
  --w: 44px;
  position: relative; display: inline-block; flex: none;
  width: var(--w); height: calc(var(--w) * var(--bk-body, .69));
  cursor: var(--gavel-cursor, pointer);
}
.block::before {
  content: ""; position: absolute;
  left: calc(var(--w) * var(--bk-left, -.022)); top: calc(var(--w) * var(--bk-top, -.016));
  width: calc(var(--w) * var(--bk-width, 1.335)); height: calc(var(--w) * var(--bk-height, .72));
  background: var(--bk-src) 0 0 / 100% 100% no-repeat;
}
.block__top {                    /* the face the hammer lands on (the hit point; nothing drawn) */
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--w) * var(--bk-face, .375));
}
.block--sm { --w: 34px; }
.block--lv { --w: 64px; position: absolute; right: 40px; bottom: 22px; z-index: 2; }
@media (max-width: 899px) { .block--lv { --w: 48px; right: 16px; bottom: 14px; } }

/* ---------- the cover: gold foil, a blind-pressed panel, the title stamped in ---------- */
.cover {
  container-type: size;
  display: flex; flex-direction: column;
  padding: 9cqh 10cqw 8cqh;
  background: var(--foil);
  color: var(--foil-ink);
  border-radius: 2px 4px 4px 2px;
}
/* a specular band across the foil; book.js moves it (--spec) as the book turns and leans */
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, rgba(255, 252, 235, 0) 36%, rgba(255, 252, 235, .22) 45%, rgba(255, 255, 255, .5) 48.5%, rgba(255, 252, 235, .2) 52%, rgba(255, 252, 235, 0) 62%);
  background-size: 300% 100%;
  background-position: var(--spec, 40%) 0;
}
.cover::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: rgb(var(--shadow)); opacity: var(--shade, 0); }
/* gold on gold: a double rule pressed into the board */
.cover__panel {
  position: absolute; inset: 4.6cqh 6cqw; pointer-events: none;
  border: 1.5px solid rgba(130, 104, 52, .55); border-radius: 3px;
  box-shadow: 1px 1px 0 rgba(255, 251, 238, .75), inset 1px 1px 0 rgba(255, 251, 238, .65), inset -1px -1px 0 rgba(130, 104, 52, .3);
  outline: 1px solid rgba(130, 104, 52, .4); outline-offset: -8px;
}
/* stamped: pressed into the foil, so a highlight under each stroke and a shadow over it */
.cover__kind, .cover__title, .cover__sub, .cover__foot { position: relative; text-shadow: 0 1.5px 0 rgba(255, 251, 238, .8), 0 -1px 0 rgba(90, 70, 30, .45); }
.cover__kind { font: 500 max(12px, 1.8cqh) var(--sans); }
.cover__title { margin-top: 5cqh; font: 500 min(12.5cqh, 17cqw)/.95 var(--serif); letter-spacing: -.025em; }
.cover__sub { margin-top: 2.4cqh; font: italic 400 max(14px, 2.8cqh)/1.3 var(--serif); }
.cover__plate { position: relative; margin-top: auto; align-self: flex-end; width: min(58cqw, 50cqh); }
.cover__plate img { width: 100%; }
.cover__foot { margin-top: 4cqh; font: max(12px, 1.9cqh)/1.45 var(--sans); }

/* ---------- the hardback, as a real 3D object ----------
   Both catalogues (the open book on a big screen, the closed book on a phone) are built from boxes
   in one 3D space; book.js adds the pieces. Gold boards a little larger than the page block, with
   their own thickness; the page block with gilt edges and fine page lines; a rounded spine with a
   red and gold headband; the front board as a slab that swings open on the spine.
   --T: the page block's height off the desk. --b: a board's thickness. --ov: the boards' overhang. */
.b3 { --b: 3px; --T: 56px; --ov: 8px; position: relative; transform-style: preserve-3d; }
.bx, .bx > i, .slab, .spine3d, .headband { position: absolute; display: block; pointer-events: none; }
.bx { transform-style: preserve-3d; transform: translateZ(var(--z, 0px)); }
.bx > .top { inset: 0; transform: translateZ(var(--d)); }
.bx > .front { left: 0; top: 100%; width: 100%; height: var(--d); transform-origin: 50% 0; transform: rotateX(90deg); }
.bx > .right { left: 100%; top: 0; width: var(--d); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); }
.bx > .left { left: 0; top: 0; width: var(--d); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); }
/* the boards: thin, champagne cloth, the edge a little deeper toward the desk */
.bx--board { --d: var(--b); top: calc(-1 * var(--ov)); height: calc(100% + 2 * var(--ov)); }
.bx--board > .top { background: var(--foil); }
.bx--board > .front { background: linear-gradient(to bottom, #b9995c, #e2cd97 55%, #f7ecd2); }
.bx--board > .right, .bx--board > .left { background: var(--edge); }
/* the page block: a tall stack of cream pages, fine lines, a pale gilt edge along the top */
.bx--pages { --z: var(--b); top: 0; height: 100%; box-shadow: 0 0 5px rgba(90, 70, 30, .35); }
.bx--pages > .front {
  background:
    repeating-linear-gradient(to bottom, rgba(140, 115, 70, .26) 0 1px, rgba(0, 0, 0, 0) 1px 2.2px),
    linear-gradient(to bottom, #cfc2a0, #ece3cc 30%, #f4ecd8 82%, #ead9a8 94%, #f7ecd2);
}
.bx--pages > .right, .bx--pages > .left {
  background:
    repeating-linear-gradient(to right, rgba(140, 115, 70, .26) 0 1px, rgba(0, 0, 0, 0) 1px 2.2px),
    linear-gradient(to right, #c9bb97, #e8dfc7 30%, #f2ead6 82%, #e8d6a4 94%, #f7ecd2);
}
/* the spine of the closed book: slim and softly rounded, no heavy bands */
.spine3d {
  top: calc(-1 * var(--ov)); height: calc(100% + 2 * var(--ov));
  width: calc(var(--T) + var(--b) + 6px);
  transform-origin: 0 50%; transform: rotateY(-90deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 3px;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 9%, rgba(130, 104, 52, .3) 9.3%, rgba(255, 251, 238, .5) 9.6%, rgba(0, 0, 0, 0) 9.9%,
      rgba(0, 0, 0, 0) 90.1%, rgba(130, 104, 52, .3) 90.4%, rgba(255, 251, 238, .5) 90.7%, rgba(0, 0, 0, 0) 91%),
    linear-gradient(to right, #b9995c, #dcc58d 25%, #fbf3dd 52%, #e2cd97 74%, #c8ad72);
}
/* the headband at the foot of the spine: a slim band of red and champagne silk */
.headband {
  top: 100%; width: 7px; height: calc(var(--T) - var(--b));
  transform-origin: 50% 0; transform: translateZ(var(--b)) rotateX(90deg);
  border-radius: 0 0 3px 3px;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 40%),
    repeating-linear-gradient(to right, #8b2a2a 0 1.5px, #efe2bd 1.5px 3px);
}
/* the front board: a thin slab with its own edges; the cover is its top face */
.slab--b { left: 0; top: 100%; width: 100%; height: var(--b); transform-origin: 50% 0; transform: rotateX(90deg); background: linear-gradient(to bottom, #b9995c, #e2cd97 55%, #f7ecd2); }
.slab--r { left: 100%; top: 0; width: var(--b); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); background: var(--edge); border-radius: 0 2px 2px 0; }
.leaf--cover .face--front { transform: translateZ(var(--b)); }

/* ---------- the open book on the desk (big screens) ---------- */
.book { display: none; }
.book__stage {
  position: relative; height: 100vh; height: 100svh;
  display: grid; place-items: center;
  padding-top: var(--nav-h);
  /* a pool of lamplight on the black desk, so the book's shadow has something to fall on */
  background: radial-gradient(ellipse 58% 56% at 52% 60%, #3d382f, #1c1a16 52%, var(--black) 80%);
  perspective: 1800px; perspective-origin: 34% 135%;  /* the eye low and a little left: the spine and the page block show */
  overflow: hidden;
}
.book__tilt { transform-style: preserve-3d; }
.book__body {
  --h: min(calc(100svh - var(--nav-h) - 120px), calc((100vw - 2 * var(--gutter)) / 1.6));
  --ov: calc(var(--h) * .012);
  width: calc(var(--h) * 1.5); height: var(--h);
  transform-origin: 75% 50%;
}
/* on the desk: ambient occlusion right under the book, and a long soft shadow down and to the right */
.book__shadow, .pb__shadow {
  position: absolute; inset: calc(-1 * var(--ov));
  border-radius: 4px;
  transform: translateZ(-1px);
  box-shadow: 0 0 4px 2px rgba(12, 10, 6, .55), 0 0 26px 10px rgba(12, 10, 6, .45), 34px 52px 90px 16px rgba(12, 10, 6, .5);
}
.book__shadow { transform-origin: 100% 50%; }
.book .bx.r { left: 50%; width: 50%; }
.book .bx--board.r { width: calc(50% + var(--ov)); }
.book .bx--board.r > .top { border-radius: 0 3px 3px 0; }
.book .bx.l { left: 0; width: 50%; }
.book .bx--board.l { left: calc(-1 * var(--ov)); width: calc(50% + var(--ov)); }
.book .bx--board.l > .top { border-radius: 3px 0 0 3px; }
.book .bx--pages.l { --d: calc(var(--T) - 2 * var(--b)); }
.book .bx--pages.r { --d: calc(var(--T) - var(--b)); }
.book .bx.l { visibility: hidden; }
.book.is-open .bx.l { visibility: visible; }
.book .spine3d { left: 50%; }
.book .headband { left: calc(50% - 3.5px); }
.book.is-open .spine3d { visibility: hidden; }
.leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}
.leaf--cover { top: calc(-1 * var(--ov)); height: calc(100% + 2 * var(--ov)); width: calc(50% + var(--ov)); }
.face, .base {
  position: absolute; inset: 0;
  container-type: size;
  overflow: hidden;
}
.face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.base { left: 50%; width: 50%; }
/* the pages bow into the gutter: the left page curves away from the light into the crease, the
   right page rises out of it toward the light */
.face--front:not(.cover), .base {
  border-radius: 0 2px 2px 0;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .1) 1.4%, rgba(255, 255, 255, .26) 3.6%, rgba(255, 255, 255, 0) 10%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, .07));
}
.face--back {
  transform: rotateY(180deg);
  border-radius: 2px 0 0 2px;
  background-image:
    linear-gradient(to left, rgba(0, 0, 0, .36) 0, rgba(0, 0, 0, .17) 2.6%, rgba(0, 0, 0, 0) 14%),
    linear-gradient(to right, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 30%);
}
.face::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: rgb(var(--shadow)); opacity: var(--shade, 0); }
/* the shadow a lifting page throws onto the page it uncovers */
.face--front:not(.cover)::before, .base::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 55%);
  opacity: var(--cast-r, 0);
}
.face--back::before, .endpaper::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to left, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 55%);
  opacity: var(--cast-l, 0);
}
.leaf--cover .face--back::before { content: none; }
/* inside the front board: the foil turned in round the edges, the endpaper pasted down */
.leaf--cover .face--back {
  overflow: visible;
  background: var(--foil);
  border-radius: 4px 2px 2px 4px;
}
.endpaper {
  position: absolute; top: var(--ov); bottom: var(--ov); left: var(--ov); right: 0;
  container-type: size; overflow: hidden;
  background-image: linear-gradient(to left, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .14) 2.5%, rgba(0, 0, 0, 0) 13%);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .35);
}
/* a page: plate pages centre the painting, entry pages run down from the lot number */
.page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 9cqh 9cqw 11cqh; }
.page--plate { justify-content: center; align-items: center; }
.page--plate .fig { max-width: 100%; }
.page--plate .frame { --f: max(18px, 3.5cqh); --m: max(9px, 1.7cqh); }
.page--plate .frame img { max-height: calc(56cqh - 2 * (var(--f) + var(--m))); max-width: calc(80cqw - 2 * (var(--f) + var(--m))); width: auto; }
.folio {
  position: absolute; left: 0; right: 0; bottom: 4.5cqh;
  text-align: center;
  font: max(11px, 1.5cqh) var(--sans); color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

/* the plate: a framed painting, with its block on the same line as the caption */
.fig { display: flex; flex-direction: column; align-items: flex-start; }
.plate { display: block; padding: 0; border: 0; background: none; cursor: var(--gavel-cursor, pointer); }
.fig__row { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.plate__cap { font: var(--fs-small) var(--sans); color: var(--fg-2); }
.page .fig__row { margin-top: 2.6cqh; }
.page .plate__cap { font-size: max(12px, 1.6cqh); }
.page .block { --w: max(40px, 6.4cqh); }

/* the entry: lot number, artist, title, the facts, the estimate */
.entry__lot { font: 500 4.5rem/.9 var(--serif); color: var(--num); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.entry__artist { margin-top: 18px; font: 500 var(--fs-small) var(--sans); color: var(--fg-2); }
.entry__title { margin-top: 6px; font: italic 400 2rem/1.12 var(--serif); max-width: 20ch; text-wrap: balance; }
.entry__meta { margin-top: 14px; font-size: 1rem; line-height: 1.5; }
.entry__actions { margin-top: 24px; }
.entry__credit { margin-top: 20px; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-2); max-width: 36ch; }
.page--entry .entry__lot { font-size: max(44px, 12cqh); }
.page--entry .entry__artist { margin-top: 3cqh; font-size: max(12px, 1.8cqh); }
.page--entry .entry__title { margin-top: 1cqh; font-size: max(22px, 4.6cqh); }
.page--entry .entry__meta { margin-top: 2.4cqh; font-size: max(14px, 2.2cqh); }
.page--entry .est { margin-top: 4cqh; }
.page--entry .est__v { font-size: max(18px, 3.4cqh); }
.page--entry .entry__actions { margin-top: 4cqh; }
.page--entry .entry__credit { margin-top: auto; max-width: 62%; font-size: max(12px, 1.6cqh); }
/* a short page (a small laptop) leaves the collection line to the lot view */
@container (max-height: 600px) { .page--entry .entry__credit { display: none; } }

.est { margin-top: 22px; }
.est__label { margin-bottom: 8px; font: 500 var(--fs-small) var(--sans); color: var(--fg-2); }
.page--entry .est__label { margin-bottom: 1.2cqh; font-size: max(12px, 1.7cqh); }
.est__v { display: flex; align-items: center; gap: .45em; font-size: 1.5rem; }
.est__cur { font: 500 .62em var(--sans); color: var(--fg-2); }

/* the turn corner: a dog-eared corner that lifts under the pointer */
.corner {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; gap: 1.4cqh;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 max(12px, 1.6cqh) var(--sans); color: var(--fg-2);
}
.corner span { padding-bottom: 2.4cqh; }
.corner::after {
  content: ""; width: 8cqh; height: 8cqh;
  background: linear-gradient(to top left, #d6d7d1 50%, #f4f4f0 50%); /* the page beneath, the curled page's underside */
  box-shadow: -3px -3px 6px -3px rgba(var(--shadow), .4);
  transform-origin: 100% 100%;
  transition: transform .3s var(--ease);
}
.corner:hover::after, .corner:focus-visible::after { transform: scale(1.35); }
.corner:hover span { color: var(--fg); }
.corner--cover { color: var(--foil-ink); }
.corner--cover:hover span { color: var(--near-black); }

/* ---------- phones (and reduced motion): the closed hardback on the desk ----------
   Turned so its spine and gilt edges show; drag it (or tilt an Android phone) and it turns a
   little; scrolling, or the corner, swings the cover open onto the first lot. */
.opening__stage {
  position: relative; height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
  padding-top: var(--nav-h);
  background: radial-gradient(ellipse 85% 52% at 50% 58%, #3d382f, #1c1a16 55%, var(--black) 88%);
  perspective: 1100px; perspective-origin: 10% 125%;
  touch-action: pan-y;
}
.pb__tilt { transform-style: preserve-3d; }
.pb {
  --pw: min(80vw, 360px, calc((100svh - var(--nav-h) - 150px) * .75));
  --T: 40px; --b: 3px; --ov: calc(var(--pw) * .02);
  width: var(--pw); height: calc(var(--pw) * 4 / 3);
}
.pb .bx { left: 0; width: 100%; }
.pb .bx--board { width: calc(100% + var(--ov)); }
.pb .bx--board > .top { border-radius: 0 3px 3px 0; }
.pb .bx--pages { --d: calc(var(--T) - var(--b)); }
.pb .spine3d { left: 0; width: calc(var(--T) + var(--b) + 2px); }
.pb .headband { left: -2px; }
.pb .leaf--cover { left: 0; width: calc(100% + var(--ov)); }
.pb__page {
  position: absolute; inset: 0;
  transform: translateZ(var(--T));
  container-type: size; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 7cqh 8cqw 6cqh;
  border-radius: 0 2px 2px 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .06) 2%, rgba(255, 255, 255, .2) 4%, rgba(255, 255, 255, 0) 10%);
}
.pb__page .fig { align-self: flex-start; max-width: 100%; }
.pb__page .frame { --f: max(11px, 4cqw); --m: max(6px, 2.2cqw); box-shadow: 1px 1px 0 #d3bb84, 2px 2px 0 #c7af79, 3px 3px 0 #bba36f, 4px 4px 0 #b09864, 5px 5px 0 #a48c59, 6px 6px 0 #98804f, 7px 7px 0 #8c7444, 8px 9px 3px rgba(20, 15, 5, 0.45), 17px 25px 34px -2px rgba(20, 15, 5, 0.42); }
.pb__page .frame img { max-height: calc(40cqh - 2 * (var(--f) + var(--m))); max-width: calc(78cqw - 2 * (var(--f) + var(--m))); width: auto; }
.pb__page .fig__row { justify-content: flex-end; margin-top: 2cqh; }
.pb__page .plate__cap, .pb__page .entry__artist, .pb__page .entry__meta, .pb__page .entry__credit { display: none; }
.pb__page .block { --w: max(28px, 10cqw); }
.pb__page .entry__lot { margin-top: 1.5cqh; font-size: 9.5cqh; }
.pb__page .entry__title { margin-top: .8cqh; font-size: max(15px, 5.6cqh); }
.pb__page .est { margin-top: 2.6cqh; }
.pb__page .est__label { margin-bottom: 1cqh; font-size: max(11px, 2.6cqh); }
.pb__page .est__v { font-size: max(14px, 4.4cqh); }
.pb__page .entry__actions { margin-top: 3cqh; }
.pb__page .btn { min-height: max(34px, 9cqh); padding: 0 5cqw; font-size: max(12px, 3.4cqh); }
.opening .corner--cover span { padding-bottom: 3.4cqh; }

/* four pages to swipe */
.strip-sec { padding: var(--section) 0; }
.strip-sec .head { padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.strip__nav { display: none; gap: 10px; }
@media (hover: hover) and (pointer: fine) { .strip__nav { display: flex; } }
.strip {
  display: flex; gap: 20px;
  perspective: 1100px;
  margin-top: 28px; padding: 8px var(--gutter) 24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.mpage {
  position: relative;
  flex: 0 0 min(84vw, 440px);
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  padding: 24px 22px 44px;
  border-radius: 2px;
  /* a thick sheet: its edge (paper, then gilt) down and to the right, a shadow on the desk */
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7),
    1px 1px 0 #f4f2ec, 2px 2px 0 #d8d3c6, 3px 3px 0 #efece4, 4px 4px 0 #d2ccbe, 5px 5px 0 #e9cf8c, 6px 6px 0 #b8913f, 7px 7px 0 #7a5a22,
    8px 9px 3px rgba(0, 0, 0, .7), 18px 28px 36px -10px rgba(0, 0, 0, .9);
}
.mpage .frame { --f: 14px; --m: 8px; box-shadow: 1px 1px 0 #d3bb84, 2px 2px 0 #c9b17b, 3px 3px 0 #bfa772, 4px 4px 0 #b59d69, 5px 5px 0 #aa925f, 6px 6px 0 #a08856, 7px 7px 0 #967e4d, 8px 8px 0 #8c7444, 9px 10px 3px rgba(20, 15, 5, 0.45), 18px 26px 36px -2px rgba(20, 15, 5, 0.42); }
.mpage .fig { align-self: flex-start; max-width: 100%; } /* the block stays beside the painting */
.mpage .fig__row { justify-content: flex-end; margin-top: 14px; }
.mpage .block { --w: 40px; }
.mpage .plate__cap { display: none; }
.mpage .frame img { max-height: 38svh; width: auto; }
.mpage .entry__lot { margin-top: 8px; font-size: 3rem; }
.mpage .entry__title { font-size: 1.5rem; }
.mpage .entry__meta { font-size: .9375rem; }
.mpage .folio { bottom: 16px; font-size: 12px; }

/* ---------- the essay ---------- */
.essay {
  padding: var(--section) var(--gutter);
  display: grid; gap: 28px 64px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1280px; margin: 0 auto;
}
.essay h2, .head h2, .enquire h2 { font: 500 var(--fs-h2)/1.15 var(--serif); letter-spacing: -.01em; max-width: 24ch; text-wrap: balance; }
.essay__body { display: grid; gap: 1em; max-width: 60ch; color: var(--fg); }
@media (min-width: 900px) { .essay { grid-template-columns: 5fr 6fr; align-items: start; } }
.head p { margin-top: 10px; color: var(--fg-2); max-width: 56ch; }

/* ---------- every lot: a contact sheet of framed plates, rows set to one height ---------- */
.plates { padding: var(--section) var(--gutter); border-top: 1px solid var(--line); }
.sheet {
  --row: 200px;
  --fp: 19px;                  /* frame + slip on each side of a small frame */
  display: flex; flex-wrap: wrap; gap: 60px 40px;
  margin-top: 48px;
}
.sheet::after { content: ""; flex: 999 1 0; }
@media (max-width: 719px) { .sheet { --row: 80px; --fp: 15px; gap: 40px 18px; } }
/* the frame adds the same width to every plate; adding it to the basis keeps the rows level */
.tile { position: relative; flex: var(--ar) 1 calc(var(--ar) * var(--row) + 2 * var(--fp)); min-width: 0; }
.tile__open {
  display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left;
  cursor: var(--gavel-cursor, pointer);
}
.tile .frame img { width: 100%; aspect-ratio: var(--ar); object-fit: cover; }
.tile__cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; margin-top: 16px; }
.tile__lot { font: 500 1.25rem/1.1 var(--serif); color: var(--gold); font-variant-numeric: lining-nums; }
.tile__text { display: grid; gap: 2px; font-size: .9375rem; line-height: 1.3; }
.tile__text i { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile__est { font: var(--fs-small) var(--sans); color: var(--fg-2); }
.tile__open:hover + .tile__cap i { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
@media (max-width: 719px) {
  .tile__cap { grid-template-columns: auto minmax(0, 1fr); }
  .tile__cap .block { grid-column: 1 / -1; justify-self: end; margin-top: -4px; }
}

/* the sold stamp: gold ink pressed by hand, slightly crooked, on a dark ground so it reads on a pale sky */
.stamp {
  position: absolute; top: calc(var(--fp) + 8px); right: calc(var(--fp) + 6px); z-index: 2;
  padding: .12em .45em .08em;
  border: 3px solid currentColor; border-radius: 6px;
  background: rgba(20, 18, 16, .66);
  color: var(--gold);
  font: 700 1.375rem/1.1 var(--sans); letter-spacing: .06em;
  transform: rotate(-7deg);
  filter: url(#ink) drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
  opacity: 0;
  pointer-events: none;
}
.is-stamped > .stamp { opacity: .95; }
@media (max-width: 719px) { .stamp { font-size: 1rem; border-width: 2px; } }

/* ---------- enquire, footer ---------- */
.enquire { padding: var(--section) var(--gutter); border-top: 1px solid var(--line); }
.enquire > p { margin-top: 10px; color: var(--fg-2); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.foot { padding: 36px var(--gutter) 48px; border-top: 1px solid var(--line); font: var(--fs-small)/1.6 var(--sans); color: var(--fg-2); }
.foot p { max-width: 72ch; }

/* ---------- the lot view: the framed painting under a light, on black ---------- */
.lv {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--black); color: var(--ivory);
}
.lv::backdrop { background: rgba(0, 0, 0, .7); }
.lv[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lv__sheet { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); min-height: 0; }
.lv__fig {
  position: relative; min-height: 0; overflow: hidden;
  display: grid; place-items: center;
  padding: 40px 40px 80px;
  background: radial-gradient(ellipse 70% 65% at 50% 46%, #1e1d1b, var(--black) 75%);
}
/* the image box is exactly the drawn painting (the frame is a wrapper), so the loupe aims true */
.lv__img {
  max-width: 100%;
  max-height: calc(100svh - 72px - 120px - 2 * (var(--f) + var(--m)));
  width: auto; height: auto;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.lv__fig .frame { max-width: 100%; }
.lv__fig.is-looking .lv__img { cursor: none; }
.lv__entry { overflow-y: auto; padding: 56px 48px 40px; }
.lv__note { margin-top: 12px; font: var(--fs-small)/1.5 var(--sans); color: var(--fg-2); max-width: 36ch; }
.lv__notes { margin-top: 28px; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-2); }
.lv__notes dt { font: 500 var(--fs-small) var(--sans); }
.lv__notes dd { margin-top: 4px; max-width: 40ch; }
.lv__notes a { color: var(--ivory); }
.lv__hint { margin-top: 20px; font: var(--fs-small) var(--sans); color: var(--fg-2); }
.lv__bar {
  display: flex; justify-content: flex-end; gap: 12px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--black);
}
@media (max-width: 899px) {
  .lv__sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .lv__fig { padding: 16px 16px 66px; }
  .lv__img { max-height: calc(40svh - 2 * (var(--f) + var(--m))); }
  .lv__entry { padding: 20px var(--gutter) 32px; }
  .lv__entry .entry__lot { font-size: 3.25rem; }
  .lv__entry .entry__title { font-size: 1.625rem; }
  .lv__bar { justify-content: space-between; }
}

/* the loupe: a printer's loupe, dark rim with a fine gold edge, the painting at full size inside */
.loupe {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 200px; height: 200px; border-radius: 50%;
  border: 7px solid #121110;
  background-color: var(--black); background-repeat: no-repeat;
  background-origin: border-box; /* the loupe.js offsets are measured from the outer edge */
  box-shadow: 0 0 0 1px rgba(214, 178, 106, .6), 0 14px 30px rgba(0, 0, 0, .6), inset 0 0 18px rgba(0, 0, 0, .45);
  pointer-events: none;
  will-change: transform;
}
@media (pointer: coarse) { .loupe { width: 156px; height: 156px; border-width: 6px; } }

/* the paddle: hold it and the gold ring fills; full, the paddle goes up */
.paddle {
  --p: 0;
  display: flex; align-items: center; gap: 16px;
  margin-top: 28px; padding: 10px 22px 10px 10px;
  border: 0; border-radius: 6px;
  background: var(--raised); color: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none;
  transition: transform .12s var(--ease), background-color .16s var(--ease);
}
.paddle:hover { background: #222225; }
.paddle.is-holding { transform: translateY(1px); }
.paddle__ring {
  flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(236, 235, 229, .12) 0);
}
.paddle__card {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 46px; margin-top: -10px;
  border-radius: 6px 6px 4px 4px;
  background: var(--ivory); color: var(--near-black);
  font: 600 1.0625rem var(--sans); font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  transition: transform .4s var(--ease-back);
}
.paddle__card::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  width: 6px; height: 12px; margin-left: -3px;
  border-radius: 0 0 2px 2px; background: var(--gold);
}
.paddle.is-raised .paddle__card { transform: translateY(-9px) rotate(-6deg); }
.paddle__text { display: grid; gap: 2px; }
.paddle__label { font: 600 var(--fs-ui) var(--sans); }
.paddle__sub { font: var(--fs-small) var(--sans); color: var(--fg-2); }

/* ---------- the flip counter: black cards, gold figures ---------- */
.flaps { display: inline-flex; }
.flaps__row { display: inline-flex; gap: .07em; }
.flap {
  position: relative; display: inline-block;
  width: .66em; height: 1.2em;
  perspective: 5em;
  font: 500 1em/1.2em var(--serif); font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.flap__half {
  position: absolute; left: 0; right: 0; height: 50%;
  overflow: hidden;
  background: #1c1a17;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flap__half > span { position: absolute; left: 0; right: 0; height: 200%; text-align: center; }
.flap__top { top: 0; transform-origin: 50% 100%; border-radius: 2px 2px 0 0; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .6); }
.flap__top > span { top: 0; }
.flap__bottom { bottom: 0; transform-origin: 50% 0; border-radius: 0 0 2px 2px; background: #141310; }
.flap__bottom > span { bottom: 0; }

/* ---------- what the shared pieces draw ---------- */
.strike-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.strike-layer--local { position: absolute; z-index: 3; overflow: visible; }
.strike-gavel { position: absolute; background-repeat: no-repeat; will-change: opacity; } /* one frame of the rendered swing; its shadow is in the frame */
.strike-ring { position: absolute; border: 2px solid var(--gold); border-radius: 50%; } /* sized round the block's top by gavel.js */
.strike-spark { position: absolute; width: 14px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--gold-hover); transform-origin: 0 50%; }
.sheen {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 250, 230, .34), rgba(255, 250, 230, 0) 58%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.is-leaning > .sheen { opacity: 1; }

/* ---------- which catalogue you get ---------- */
@media (min-width: 900px) and (min-height: 600px) {
  html:not(.rm) .book { display: block; }
  html:not(.rm) .opening, html:not(.rm) .strip-sec { display: none; }
}
/* reduced motion: nothing pinned; the hardback simply lies open on the desk */
.rm .pb { --pw: min(80vw, 420px, calc((100svh - var(--nav-h) - 150px) * .75)); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}