/* 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;

  --gutter: clamp(16px, 4vw, 56px);
  --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: var(--nav-h); padding: 0 var(--gutter);
  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: 56px; }
.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: 56px;
  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 {
  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); } }
.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; }
@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) 96px; 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: 88px var(--gutter) 40px; 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; }
.lv__entry { align-self: center; display: grid; gap: 24px; overflow-y: auto; max-height: 100%; }
.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: 24px; display: flex; gap: 8px; }

/* 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) {
  :root { --section: 96px; --nav-h: 64px; --fs-display: 17vw; }
  .nav__links { gap: 16px; }

  .hero { --pw: min(88vw, calc(48svh * var(--ar))); }
  .hero__work { left: calc(50% - var(--pw) / 2); top: calc(var(--nav-h) + 24px); }
  .hero__text { bottom: 32px; right: var(--gutter); }
  .hero__name { margin-top: 8px; }
  .hero__lede { margin-top: 16px; }
  .hero__cap { top: calc(var(--nav-h) + 24px + var(--pw) / var(--ar) + 16px); bottom: auto; left: var(--gutter); right: var(--gutter); max-width: none; text-align: left; }

  .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); grid-template-areas: "thumb title" "thumb est"; gap: 4px 16px; align-items: start; padding: 16px 0; }
  .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: 72px var(--gutter) 24px; }
  .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: 16px; justify-content: flex-end; }
}

/* 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: name and lot fit on the first screen */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --fs-display: min(8vw, 20svh); }
  .hero { min-height: 0; --pw: min(42vw, calc(70svh * var(--ar))); }
  .hero__text, .hero__cap { bottom: 24px; }
  .hero__lede { margin-top: 8px; }
}

@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%)); }
}