/* Claude Monet, multi-page portfolio, auction-catalogue look: Home, Lots, a page per lot, About, Enquiries.
   Everything down to the reduced-motion block is shared with the one-page version (site-auction);
   the multi-page parts are at the end of the file.

   From the one-page version: */
/* Claude Monet, one-page portfolio, auction-catalogue look.
   An evening sale: a dark saleroom, every painting a numbered lot with its catalogue entry,
   sharp buttons and hairline rules instead of pills. One accent, the saleroom red, used for
   lot labels, sold dots and the fill that slides into a button under the pointer. */

:root {
  color-scheme: dark;
  --room: #101012;
  --room-2: #18181b;           /* raised: a row under the pointer, the lot view */
  --wall: #222227;             /* the hero wall, where the light falls */
  --ink: #ecebe7;              /* 15.9:1 on --room */
  --ink-2: #a3a3a8;            /* 7.5:1 on --room */
  --line: rgba(236, 235, 231, .12);
  --accent: #e0573d;           /* 5.0:1 on --room, and --room text on it is 5.0:1 */
  --shade: 12, 12, 14;         /* the dark outside the spotlight */

  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(3.5rem, 8.4vw, 8.75rem);
  --fs-h2: clamp(1.75rem, 2.9vw, 2.75rem);
  --fs-body: 1.0625rem;
  --fs-label: .8125rem;

  /* side margins never reach under a notch or rounded corner (viewport-fit=cover) */
  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --section: 160px;
  --nav-h: 72px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --z-nav: 20;
  --z-peek: 25;
  --z-grain: 30;
}

*, *::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(--room);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
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; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Catalogue type: titles in Bodoni italic, everything you scan in small spaced capitals. */
h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 20ch;
}
.label {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.label i { font-family: var(--serif); font-size: 1.15em; font-weight: 400; letter-spacing: 0; text-transform: none; }
.accent { color: var(--accent); }
.muted { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: -9999px; top: 16px; z-index: 100;
  padding: 8px 16px; background: var(--ink); color: var(--room);
}
.skip:focus { left: 16px; }

/* ---------- buttons: sharp, with a fill that slides in from the side the pointer came from ---------- */
.btn {
  --h: 48px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--h); padding: 0 24px;
  overflow: hidden;
  border: 0; border-radius: 0;
  background: var(--ink); color: var(--room);
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease), color .3s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleX(0); transform-origin: var(--from, left);
  transition: transform .45s var(--ease);
}
@media (hover: hover) { .btn:hover::before { transform: scaleX(1); } }
.btn:active { transform: translateY(1px); }
/* second choice: a hairline frame in ink, so it never reads as a ghost */
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line::before { background: var(--ink); }
@media (hover: hover) { .btn--line:hover { color: var(--room); } }
.btn--sm { --h: 40px; padding: 0 16px; }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.btn:disabled::before { transform: scaleX(0); }
.btn:disabled.btn--line { color: var(--ink); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--nav-h) + var(--safe-t)); padding: var(--safe-t) var(--gutter) 0;
  pointer-events: none;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav > * { pointer-events: auto; }
.nav:not(.is-over-hero) { background: var(--room); box-shadow: 0 1px 0 var(--line); }
.nav__name {
  font-family: var(--serif); font-size: 1.25rem; font-style: italic; text-decoration: none;
  transition: opacity .4s var(--ease), visibility .4s;
}
.nav.is-over-hero .nav__name { opacity: 0; visibility: hidden; }
.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__link { text-decoration: none; }
/* when the opening painting fills the screen the link sits on paint, so give it a soft shadow */
.nav.is-over-hero .nav__link { text-shadow: 0 1px 2px rgba(var(--shade), .8), 0 0 16px rgba(var(--shade), .6); }
@media (hover: hover) { .nav__link:hover { color: var(--accent); } }

/* ---------- hero: one lot on a dark wall, under a light that follows you ---------- */
.hero {
  --ar: 1.124;
  --pw: min(42vw, calc(66svh * var(--ar)));
  position: relative;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  background: var(--wall);
}
.hero__work {
  position: absolute;
  left: calc(60% - var(--pw) / 2);
  top: calc(50% - var(--pw) / var(--ar) / 2);
  width: var(--pw);
  box-shadow: 0 40px 80px -36px rgba(var(--shade), .9);
}
.hero__work img { width: 100%; aspect-ratio: var(--ar); background: var(--room-2) center / cover no-repeat; }
/* the room's dark, with a hole where the light is; JS moves it, without JS it rests on the painting */
.hero__dark {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle var(--r, 44vmax) at var(--x, 60%) var(--y, 50%),
    rgba(var(--shade), 0) 0%, rgba(var(--shade), .05) 34%, rgba(var(--shade), .94) 100%);
}
.hero.is-lit .hero__dark { display: none; }
.hero__text { position: absolute; z-index: 2; left: var(--gutter); bottom: calc(56px + var(--safe-b)); }
.hero__kicker { color: var(--ink-2); }
.hero__name {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.02em;
  margin-left: -.04em;
}
.hero__name .line { display: block; }
.hero__lede { margin-top: 24px; color: var(--ink-2); }
.hero__cap {
  position: absolute; z-index: 2;
  right: var(--gutter); bottom: calc(56px + var(--safe-b));
  max-width: 260px; text-align: right;
  color: var(--ink-2);
}
.hero__cap b { color: var(--accent); font-weight: 500; }

/* the one moment: the lines rise as the light comes up */
.line { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.line > span { display: inline-block; }
.js .hero .line > span { transform: translateY(105%); }
.js .hero.is-ready .line > span { transform: none; transition: transform 1.2s var(--ease) .5s; }
.js .hero.is-ready .hero__name .line:nth-child(2) > span { transition-delay: .58s; }
.js .hero.is-ready .hero__lede .line > span { transition-delay: .74s; }
.js .hero__cap { opacity: 0; }
.js .hero.is-ready .hero__cap { opacity: 1; transition: opacity 1.2s var(--ease) 1.1s; }

/* ---------- about the artist ---------- */
.essay {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px;
  padding: var(--section) var(--gutter) 0;
}
.essay .label { grid-column: 1 / -1; color: var(--accent); }
.essay__body { display: grid; gap: 24px; max-width: 34em; color: var(--ink-2); padding-top: 8px; }
.essay__body p:first-child::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  font-family: var(--serif); font-size: 4.6em; line-height: .8;
  color: var(--ink);
}
.essay__body i { font-family: var(--serif); color: var(--ink); }

/* ---------- section heads ---------- */
.head { padding: 0 var(--gutter); display: grid; gap: 16px; }
.head .label { color: var(--accent); }
.head p:not(.label) { max-width: 34em; color: var(--ink-2); }

/* ---------- highlights: one lot to a page; each new page slides over the last ---------- */
.highlights { padding-top: var(--section); }
.stack { margin-top: 64px; }
.hl {
  position: sticky; top: 0;
  height: 100svh;
  background: var(--room);
  border-top: 1px solid var(--line);
}
.hl__inner {
  height: 100%;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px;
  align-items: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 48px;
  transform-origin: 50% 0;
}
.hl__art { display: flex; justify-content: center; min-height: 0; height: 100%; align-items: center; }
.hl__open {
  position: relative;
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  width: min(100%, calc((100svh - var(--nav-h) - 72px) * var(--ar)));
}
.hl__open img {
  width: 100%; aspect-ratio: var(--ar);
  background: var(--room-2) center / cover no-repeat;
  box-shadow: 0 40px 80px -48px #000;
  transition: transform .6s var(--ease);
}
@media (hover: hover) { .hl__open:hover img { transform: scale(1.012); } }
/* the magnifier says "open me"; it breathes until a lot has been opened once */
.zoom-cue {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: rgba(var(--shade), .78); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 1.25rem;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.zoom-cue::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: 0 0 0 1px var(--ink);
  opacity: 0;
  animation: breathe 2.6s var(--ease) infinite;
}
.knows-lots .zoom-cue::after { animation: none; }
@keyframes breathe { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@media (hover: hover) { .hl__open:hover .zoom-cue { background: var(--accent); color: var(--room); } }
.hl__entry { display: grid; gap: 24px; align-content: center; }
.lotno { display: flex; align-items: baseline; gap: 16px; }
.lotno .label { color: var(--accent); }
.lotno__n { font-family: var(--serif); font-size: var(--fs-display); line-height: .8; letter-spacing: -.03em; }
.hl__title, .lv__title { font-family: var(--serif); font-size: var(--fs-h2); font-style: italic; font-weight: 400; line-height: 1.12; text-wrap: balance; }
.hl__meta, .lv__meta { color: var(--ink-2); }
.price { display: grid; gap: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.price .label { color: var(--ink-2); }
.price__v {
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price__v.is-sold, .price__v.is-request { font-family: var(--serif); font-style: italic; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* estimates roll in like a counter: each digit is a strip of 0-9 that slides to its value */
.odo { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; vertical-align: top; }
.odo__reel { display: flex; flex-direction: column; transition: transform 1.6s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.js .odo__reel { transform: translateY(0); }
.is-counted .odo__reel, html:not(.js) .odo__reel { transform: translateY(calc(var(--d) * -10%)); }

.dot { display: inline-block; width: .55em; height: .55em; margin-right: .45em; border-radius: 50%; background: var(--accent); vertical-align: .08em; }

/* ---------- the index: every lot on one line; the painting floats beside the pointer ---------- */
.index { padding-top: var(--section); }
.index__cols {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 15rem 13rem; gap: 24px;
  margin: 64px var(--gutter) 0; padding-bottom: 16px;
  color: var(--ink-2); border-bottom: 1px solid var(--line);
}
.index__cols span:last-child { text-align: right; }
.index__list { list-style: none; margin: 0 var(--gutter); padding: 0; }
.row { border-bottom: 1px solid var(--line); }
.row__open {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 15rem 13rem; gap: 24px; align-items: baseline;
  width: 100%; padding: 24px 0; border: 0; background: none; text-align: left; cursor: pointer;
}
.row__open::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1;
  background: var(--room-2);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .4s var(--ease);
}
.row__num { font-variant-numeric: tabular-nums; color: var(--ink-2); transition: color .3s var(--ease); }
.row__thumb { display: none; }
.row__title { display: grid; gap: 4px; transition: transform .5s var(--ease); }
.row__title i { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.12; text-wrap: balance; }
.row__date, .row__spec { color: var(--ink-2); }
.row__est { text-align: right; font-variant-numeric: tabular-nums; }
.row__go { display: none; }
@media (hover: hover) {
  .row__open:hover::before { transform: scaleY(1); }
  .row__open:hover .row__num { color: var(--accent); }
  .row__open:hover .row__title { transform: translateX(16px); }
}
.index__error, .stack__error { margin: 64px var(--gutter) 0; color: var(--ink-2); }

.peek {
  position: fixed; left: 0; top: 0; z-index: var(--z-peek);
  width: clamp(200px, 20vw, 320px);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.peek.is-on { opacity: 1; visibility: visible; }
.peek__frame { transform: scale(.92); transition: transform .5s var(--ease); }
.peek.is-on .peek__frame { transform: none; }
.peek img { width: 100%; box-shadow: 0 32px 64px -24px rgba(0, 0, 0, .8); }

/* ---------- enquiries ---------- */
.enquire { padding: var(--section) var(--gutter); }
.enquire .head { padding: 0; }
.enquire h2 { font-size: var(--fs-display); line-height: .95; max-width: 12ch; }
.enquire .actions { margin-top: 48px; }

/* ---------- footer ---------- */
.foot { padding: 48px var(--gutter) calc(96px + var(--safe-b)); color: var(--ink-2); border-top: 1px solid var(--line); }
.foot p { max-width: 52em; font-size: var(--fs-label); line-height: 1.6; }

/* ---------- lot view: the full catalogue entry, the painting large, a closer look on click ---------- */
.lv {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: calc(88px + var(--safe-t)) var(--gutter) calc(40px + var(--safe-b)); border: 0;
  background: var(--room); color: var(--ink);
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 56px;
}
.lv[open] { display: grid; }
.lv::backdrop { background: var(--room); }
.lv__fig { min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.lv__img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 48px 96px -48px #000;
  cursor: zoom-in;
}
.lv.is-zoomed .lv__fig { display: block; overflow: auto; overscroll-behavior: contain; touch-action: auto; scrollbar-width: none; }
.lv.is-zoomed .lv__fig::-webkit-scrollbar { display: none; }
.lv.is-zoomed .lv__img { max-width: none; max-height: none; box-shadow: none; cursor: zoom-out; user-select: none; -webkit-user-drag: none; }
.lv.is-zoomed.is-panning .lv__img { cursor: grabbing; }
/* a little room on top: the big lot number's glyph rises above its line box and would be clipped */
.lv__entry { align-self: center; display: grid; gap: 24px; overflow-y: auto; max-height: 100%; padding-top: 12px; scrollbar-width: thin; }
.lv__entry .lotno__n { font-size: clamp(3rem, 5vw, 5rem); }
.lv__notes { display: grid; gap: 4px; color: var(--ink-2); font-size: var(--fs-label); line-height: 1.6; }
.lv__notes dt { color: var(--ink); }
.lv__hint { color: var(--ink-2); }
.lv__bar { position: absolute; right: var(--gutter); top: calc(24px + var(--safe-t)); display: flex; gap: 8px; }
/* Enquire never scrolls out of reach when the entry is longer than the screen */
.lv__entry .actions { position: sticky; bottom: 0; z-index: 1; padding-block: 8px; background: var(--room); }

/* ---------- first-visit hints and call-outs ---------- */
.ico { width: 1em; height: 1em; flex: none; fill: currentColor; }
.ico--up { rotate: 90deg; }
.hint {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(var(--shade), .9);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: .9375rem; font-weight: 500; line-height: 1.3;
  pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hint.is-on { opacity: 1; transform: none; }
.hint__ico { font-size: 1.375rem; color: var(--accent); animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.hint--float { position: absolute; z-index: 3; translate: -50% 0; white-space: nowrap; }
.hint--inline { display: flex; width: fit-content; max-width: 100%; }

/* a ring round a button the first time it matters (Enquire) */
.btn.is-calling { animation: call 1.3s var(--ease) 2; }
.btn.is-calling::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--accent);
  animation: call-ring 1.3s var(--ease) 2;
}
@keyframes call { 50% { transform: scale(1.06); } }
@keyframes call-ring { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* film grain over everything, still, barely there */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- small screens: designed, not shrunk ---------- */
@media (max-width: 719px) {
  /* the name is capped by height too, so a short window never stacks it onto the painting */
  :root { --section: 96px; --nav-h: 64px; --fs-display: min(17vw, 11svh); }
  .nav__links { gap: 16px; }
  .nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .btn--sm { --h: 44px; }

  /* the painting takes what is left once the name, lede and caption have their room */
  .hero { --pw: min(88vw, calc(48svh * var(--ar)), calc((100svh - 300px - var(--fs-display) * 1.84 - var(--safe-b)) * var(--ar))); }
  .hero__work { left: calc(50% - var(--pw) / 2); top: calc(var(--nav-h) + var(--safe-t) + 24px); }
  .hero__text { bottom: calc(32px + var(--safe-b)); right: var(--gutter); }
  .hero__name { margin-top: 8px; }
  .hero__lede { margin-top: 16px; }
  .hero__cap { top: calc(var(--nav-h) + var(--safe-t) + 24px + var(--pw) / var(--ar) + 16px); bottom: auto; left: var(--gutter); right: var(--gutter); max-width: none; text-align: left; }
  .foot p, .lv__notes { font-size: .9375rem; }

  .essay { grid-template-columns: 1fr; gap: 24px; }

  /* the pages stop stacking on a phone: each lot just follows the last */
  .stack { margin-top: 48px; }
  .hl { position: static; height: auto; border-top: 0; }
  .hl + .hl { margin-top: 96px; }
  .hl__inner { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .hl__open { width: 100%; }
  .hl__entry { padding: 0 var(--gutter); gap: 16px; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }

  .index__cols { display: none; }
  .index__list { margin-top: 40px; border-top: 1px solid var(--line); }
  .row__open { grid-template-columns: 72px minmax(0, 1fr) 20px; grid-template-areas: "thumb title go" "thumb est go"; gap: 4px 16px; align-items: start; padding: 16px 0; }
  .row__go { display: block; grid-area: go; align-self: center; color: var(--ink-2); font-size: 1.25rem; }
  .row__num { display: none; }
  .row__thumb { display: block; grid-area: thumb; width: 72px; height: 72px; object-fit: cover; background: var(--room-2); }
  .row__title { grid-area: title; }
  .row__title i { font-size: 1.25rem; }
  .row__title .row__date::before { content: "Lot " attr(data-lot) ", "; }
  .row__spec { display: none; }
  .row__est { grid-area: est; text-align: left; color: var(--ink-2); }
  .peek { display: none; }

  /* the painting takes the height it needs (up to half the screen), the entry gets the rest */
  .lv { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 24px; padding: calc(76px + var(--safe-t)) var(--gutter) calc(16px + var(--safe-b)); }
  .lv__fig { max-height: 42svh; }
  .lv:not(.is-zoomed) .lv__img { max-height: 42svh; }
  .lv__entry { gap: 12px; align-self: start; scrollbar-width: none; }
  .lv__entry::-webkit-scrollbar { display: none; }
  .lv__entry .lotno__n { font-size: 2.75rem; }
  .lv__entry .price { padding-top: 12px; }
  .lv__entry .price__v { font-size: 1.5rem; }
  .lv__title { font-size: 1.5rem; }
  .lv__hint { display: none; }
  .lv__bar { left: var(--gutter); right: var(--gutter); top: calc(16px + var(--safe-t)); justify-content: flex-end; }
}

/* tablets and small laptops: three index columns, so titles keep room to breathe */
@media (min-width: 720px) and (max-width: 1023px) {
  .index__cols, .row__open { grid-template-columns: 3rem minmax(0, 1fr) 11rem; }
  .index__cols span:nth-child(3), .row__spec { display: none; }
  .hl__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; }
}

/* any touch screen, whatever its width (a phone on its side is wider than the phone layout):
   everything you press is at least 44px tall, and sentences stay at 15px */
@media (pointer: coarse) {
  .btn--sm { --h: 44px; }
  .nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .foot p, .lv__notes { font-size: .9375rem; }
}

/* short desktop windows: the stacked pages need some height to breathe */
@media (min-width: 720px) and (max-height: 640px) {
  .hl { position: relative; height: auto; }
  .hl__inner { padding: 64px var(--gutter); }
}

/* phone held sideways, or any wide-and-short window: the painting moves to the right,
   the caption to the top left and the name to the bottom left, so nothing overlaps */
@media (orientation: landscape) and (max-height: 640px) {
  :root { --fs-display: min(8vw, 17svh); }
  .hero { min-height: 0; --pw: min(40vw, calc((100svh - var(--nav-h) - var(--safe-t) - 40px) * var(--ar))); }
  .hero__work {
    left: calc(100% - var(--gutter) - var(--pw));
    top: calc(var(--nav-h) + var(--safe-t) + (100% - var(--nav-h) - var(--safe-t) - var(--pw) / var(--ar)) / 2);
  }
  .hero__text { bottom: calc(24px + var(--safe-b)); right: auto; }
  .hero__lede { margin-top: 8px; }
  .hero__cap {
    top: calc(var(--nav-h) + var(--safe-t) + 16px); bottom: auto; left: var(--gutter); right: auto;
    max-width: calc(100% - var(--pw) - var(--gutter) * 3); text-align: left;
  }
  .lv { padding-top: calc(72px + var(--safe-t)); padding-bottom: calc(16px + var(--safe-b)); gap: 32px; }
  .lv__bar { top: calc(16px + var(--safe-t)); }
  .lv__entry { gap: 12px; }
  .lv__entry .lotno__n { font-size: 2.75rem; }
  .lv__entry .price { padding-top: 12px; }
  .lv__entry .price__v { font-size: 1.5rem; }
  .lv__title { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .hero .line > span { transform: none; }
  .js .hero__cap { opacity: 1; }
  .js .odo__reel { transform: translateY(calc(var(--d) * -10%)); }
  .zoom-cue::after, .hint__ico, .btn.is-calling, .btn.is-calling::after { animation: none; }
}

/* ========================================================================================
   Multi-page version: the same room, split into pages.
   ======================================================================================== */

/* pages cross-fade into each other, and a lot's picture glides from where you clicked it into its own page */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
.nav { view-transition-name: nav; }

/* ---------- nav: where you are, and the menu button a phone uses ---------- */
.nav__link[aria-current="page"], .foot__nav a[aria-current="page"] { color: var(--accent); }
.nav .btn[aria-current="page"]::before { transform: scaleX(1); }
.nav__menu, .menu__close {
  position: relative;
  place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; background: none; color: inherit;
  font-size: 1.625rem; cursor: pointer;
}
.nav__menu { display: none; }
.nav__menu.is-calling { animation: call 1.3s var(--ease) 2; }
.nav__menu.is-calling::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--accent);
  animation: call-ring 1.3s var(--ease) 2;
}

/* the phone menu: the room again, with the pages in large type */
.menu {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: var(--safe-t) var(--gutter) calc(24px + var(--safe-b)); border: 0;
  background: var(--room); color: var(--ink);
  display: none; flex-direction: column;
  overflow-y: auto;
}
.menu[open] { display: flex; }
.menu::backdrop { background: var(--room); }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); }
.menu__close { display: inline-grid; margin-right: -10px; }
.menu__links { display: grid; margin-top: 24px; border-top: 1px solid var(--line); }
.menu__links a {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1.05;
  text-decoration: none;
}
.menu__links a[aria-current="page"] { color: var(--accent); font-style: italic; }
.menu__foot { margin-top: auto; padding-top: 32px; }

/* ---------- inner pages ---------- */
.page { padding-top: calc(var(--nav-h) + var(--safe-t)); }
.page-head { display: grid; gap: 16px; padding: 96px var(--gutter) 0; }
.page-head .label { color: var(--accent); }
.page-head h1 {
  font-family: var(--serif); font-size: clamp(2.75rem, 6vw, 6rem); font-weight: 400;
  line-height: 1; letter-spacing: -.02em;
  max-width: 16ch; text-wrap: balance;
}
.page-head p:not(.label) { max-width: 34em; color: var(--ink-2); }
.page-head a { color: var(--ink); }
.page-head .hint { margin-top: 8px; }

/* home: where to go next, as catalogue rows rather than cards */
.next { padding: var(--section) var(--gutter) 0; }
.next__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.next__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.next__list a > span { display: grid; gap: 8px; }
.next__list .label { color: var(--ink-2); }
.next__list b { font-family: var(--serif); font-size: var(--fs-h2); font-style: italic; font-weight: 400; line-height: 1.12; }
.next__list .ico { font-size: 1.75rem; transition: transform .5s var(--ease); }
@media (hover: hover) {
  .next__list a:hover { color: var(--accent); }
  .next__list a:hover .ico { transform: translateX(8px); }
}
.hl__open { cursor: pointer; }

/* ---------- all lots: a filter, then the index ---------- */
.page .index { padding-top: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px var(--gutter) 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 0; background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(236, 235, 231, .32);
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.chip span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--room); box-shadow: none; }
.chip[aria-pressed="true"] span { color: #4a4a4f; }
@media (hover: hover) { .chip[aria-pressed="false"]:hover { box-shadow: inset 0 0 0 1px var(--ink); } }
.chip:active { transform: translateY(1px); }
.row[hidden] { display: none; }
.row__open { color: inherit; text-decoration: none; }

/* ---------- one lot ---------- */
.lotpage { padding: calc(var(--nav-h) + var(--safe-t) + 16px) var(--gutter) 0; }
.lotpage .page-head { padding-left: 0; padding-right: 0; }
.crumbs { display: flex; align-items: center; gap: 16px; }
.crumbs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.crumbs .ico { font-size: 1.125rem; transition: transform .4s var(--ease); }
@media (hover: hover) {
  .crumbs a:hover { color: var(--accent); }
  .crumbs a:hover .ico { transform: translateX(-4px); }
}
.lotpage__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 56px;
  align-items: start;
  margin-top: 8px;
}
/* the picture fits the screen below the nav and the breadcrumb, so it is whole when the page opens */
.lotpage__fig {
  position: sticky; top: calc(var(--nav-h) + var(--safe-t) + 16px);
  display: flex; align-items: center; justify-content: center;
  height: calc(100svh - var(--nav-h) - var(--safe-t) - 88px);
  margin: 0;
  touch-action: pan-y;
}
.lotpage__frame {
  position: relative; display: block;
  max-width: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
.lotpage__img {
  display: block;
  width: auto; height: auto; max-width: 100%;
  max-height: calc(100svh - var(--nav-h) - var(--safe-t) - 88px);
  background: var(--room-2) center / cover no-repeat;
  box-shadow: 0 48px 96px -48px #000;
}
.lotpage__entry { display: grid; gap: 24px; padding: 24px 0 48px; }
.lotpage__title { font-family: var(--serif); font-size: var(--fs-h2); font-style: italic; font-weight: 400; line-height: 1.12; text-wrap: balance; }
.lotpage__meta { color: var(--ink-2); }

/* a closer look fills the screen; drag (or swipe) to move around the paint */
.lotpage__fig.is-zoomed {
  position: fixed; inset: 0; z-index: 40;
  display: block; height: auto; margin: 0;
  overflow: auto; overscroll-behavior: contain;
  background: var(--room);
  touch-action: auto; scrollbar-width: none;
}
.lotpage__fig.is-zoomed::-webkit-scrollbar { display: none; }
.is-zoomed .lotpage__frame { max-width: none; cursor: zoom-out; }
.is-zoomed .lotpage__img { max-width: none; max-height: none; box-shadow: none; user-select: none; -webkit-user-drag: none; }
.is-zoomed.is-panning .lotpage__frame { cursor: grabbing; }
.is-zoomed .zoom-cue { display: none; }
.lotpage__unzoom { position: fixed; z-index: 41; top: calc(16px + var(--safe-t)); right: var(--gutter); display: none; }
.is-zooming .lotpage__unzoom { display: inline-flex; }

/* the lots either side */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; border-top: 1px solid var(--line); }
.pager a { display: grid; gap: 8px; align-content: start; padding: 32px 0; text-decoration: none; }
.pager .label { color: var(--ink-2); }
.pager i { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; transition: color .3s var(--ease); }
.pager__next { text-align: right; justify-items: end; }
@media (hover: hover) { .pager a:hover i { color: var(--accent); } }

/* ---------- about ---------- */
.about {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px;
  align-items: start;
  padding: 64px var(--gutter) 0;
}
.about .essay__body { padding-top: 0; }
.about__fig { display: grid; gap: 16px; margin: 0; }
.about__fig img { width: 100%; background: var(--room-2); box-shadow: 0 40px 80px -48px #000; transition: transform .6s var(--ease); }
@media (hover: hover) { .about__fig a:hover img { transform: scale(1.012); } }
.about__fig figcaption { color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }
.about__fig figcaption i { font-family: var(--serif); color: var(--ink); }
.chrono { padding-top: var(--section); }
.chrono__list { list-style: none; margin: 48px var(--gutter) 0; padding: 0; border-top: 1px solid var(--line); }
.chrono__list li {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.chrono__year { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1; }
.chrono__list i { font-family: var(--serif); }
.chrono__actions { margin: 48px var(--gutter) 0; }

/* ---------- enquiries: the form only writes the WhatsApp message ---------- */
.enq {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 56px;
  align-items: start;
  padding: 64px var(--gutter) 0;
}
.form { display: grid; gap: 24px; max-width: 36rem; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 0; border-radius: 0;
  background-color: var(--room-2); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(236, 235, 231, .28);
  font: inherit; font-size: 1rem;
  transition: box-shadow .2s var(--ease);
}
.field select {
  appearance: none;
  padding-right: 48px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.field textarea { min-height: 128px; resize: vertical; }
@media (hover: hover) { .field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(236, 235, 231, .5); } }
.field :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field__help { color: var(--ink-2); font-size: .9375rem; }
.enq__side { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.enq__side p { color: var(--ink-2); }

/* ---------- footer links ---------- */
.foot__nav { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 16px; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .foot__nav a:hover { color: var(--accent); } }

/* ---------- multi-page on a phone ---------- */
@media (max-width: 719px) {
  .nav__link { display: none; }
  .nav__menu { display: inline-grid; margin-right: -10px; }
  .nav__links { gap: 8px; }

  .page-head { padding-top: 48px; }
  .next__list a { padding: 24px 0; }
  .filters { margin-top: 32px; }

  .lotpage { padding-top: calc(var(--nav-h) + var(--safe-t) + 4px); }
  .lotpage__grid { grid-template-columns: 1fr; gap: 16px; }
  .lotpage__fig { position: static; height: auto; }
  .lotpage__img { max-height: 62svh; }
  .lotpage__entry { padding-top: 8px; gap: 16px; }
  /* Enquire stays in reach while you read the entry */
  .lotpage__entry .actions { position: sticky; bottom: 0; z-index: 2; padding-block: 8px calc(8px + var(--safe-b)); background: var(--room); }
  .lotpage__entry .lotno__n { font-size: 3.5rem; }
  .lotpage__title { font-size: 1.75rem; }
  .pager { gap: 16px; margin-top: 48px; }
  .pager i { font-size: 1.125rem; }

  .about, .enq { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .chrono__list li { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 16px; }
  .chrono__year { font-size: 1.5rem; }
}

/* wide-and-short windows (a phone on its side): a smaller lot number so the entry starts higher */
@media (orientation: landscape) and (max-height: 640px) {
  .lotpage__entry .lotno__n { font-size: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .nav__menu.is-calling, .nav__menu.is-calling::after { animation: none; }
}