/* Layout: a single vertical stream of paintings at large scale. Chrome is a small
   fixed wordmark and three words of navigation. Type recedes; pigment carries the page.
   Palette is taken from the pigments actually on the palette, not from a theme. */
:root {
  color-scheme: light;
  --paper:        #ffffff;
  --paper-deep:   #f4f4f4;
  --ink:          #111111;
  --ink-quiet:    #4d4d4d;
  --ink-faint:    #8a8a8a;
  --rule:         #e6e6e6;

  /* pigments */
  --ultramarine:  #2b4a8b;
  --cerulean:     #2e7fa8;
  --quin-gold:    #c8912a;
  --quin-rose:    #c1577a;
  --burnt-sienna: #9a4f2e;
  --sap:          #6e8b4a;
  --payne:        #4a5a66;

  --display: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;
  --utility: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1rem, 5vw, 5rem);
  --wash-opacity: .9;
}




*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--utility);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: .5rem; z-index: 99; background: var(--ink); color: var(--paper); padding: .5rem .9rem; }

/* ---------- chrome: deliberately almost nothing ---------- */
.chrome {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
}
.wordmark {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark em { font-style: italic; }
.chrome nav { display: flex; gap: clamp(.8rem, 3vw, 1.9rem); }
.chrome nav a {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.chrome nav a:hover, .chrome nav a:focus-visible { color: var(--ink); border-bottom-color: currentColor; }

/* ---------- hero ---------- */
.hero { padding: clamp(1.5rem, 6vw, 4rem) var(--gutter) clamp(2rem, 7vw, 5rem); }
.hero-wash { position: relative; }
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 9.5vw, 6.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  max-width: 24ch;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--payne); }
.hero .sub {
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  color: var(--ink-quiet);
  max-width: 34ch;
  margin: 0;
}
.hero .place {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--cerulean);
  margin: 0 0 1.6rem;
}

/* ---------- the painting stream ---------- */
.series { padding: clamp(2.5rem, 8vw, 6rem) var(--gutter); }
.series + .series { border-top: 1px solid var(--rule); }

.series-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}
.series-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.5vw, 2.9rem);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -.015em;
}
.series-head p {
  margin: 0;
  color: var(--ink-quiet);
  font-size: .95rem;
  max-width: 38ch;
}
.count {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* large scale, never thumbnails: one big piece then two beside it */
.stream { display: grid; gap: clamp(.9rem, 2.2vw, 1.75rem); }
.stream.lead { grid-template-columns: 1fr; }
.stream.pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 40rem) { .stream.pair { grid-template-columns: 1fr; } }

figure { margin: 0; }
.plate {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--paper-deep);
  overflow: hidden;
}
.plate svg { display: block; width: 100%; height: 100%; }
.plate.tall   { aspect-ratio: 4 / 5; }
.plate.wide   { aspect-ratio: 16 / 10; }
.plate.square { aspect-ratio: 1 / 1; }

.slug {
  position: absolute;
  inset: auto 0 0 0;
  padding: .45rem .6rem;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity .25s ease;
}
.plate:hover .slug { opacity: 1; }

figcaption {
  margin-top: .7rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: .85rem;
  color: var(--ink-quiet);
}
figcaption b { font-weight: 400; color: var(--ink); font-family: var(--display); font-size: 1.05rem; }
figcaption .med { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

/* ---------- notes: equal weight to a series. the writing is the engine ---------- */
.notes { padding: clamp(2.5rem, 8vw, 6rem) var(--gutter); border-top: 1px solid var(--rule); background: var(--paper-deep); }
.notes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.note-item { display: grid; gap: clamp(1rem, 3vw, 2.25rem); grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); align-items: start; }
@media (max-width: 38rem) { .note-item { grid-template-columns: 1fr; gap: .9rem; } }
.note-wash { aspect-ratio: 1 / 1; overflow: hidden; max-width: 100%; }
.note-wash svg { display: block; width: 100%; height: 100%; }
.note-body { min-width: 0; }
.note-body a { text-decoration: none; display: block; }
.note-kicker { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .45rem; }
.note-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.45rem, 3.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.015em;
  margin: 0 0 .5rem; text-wrap: balance; transition: color .2s ease;
}
.note-body a:hover .note-title, .note-body a:focus-visible .note-title { color: var(--burnt-sienna); }
.note-excerpt { margin: 0 0 .7rem; color: var(--ink-quiet); font-size: 1rem; max-width: 62ch; }
.note-answers { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.note-answers li { font-size: .82rem; color: var(--ink-faint); }
.note-answers li::before { content: "? "; color: var(--cerulean); }

/* ---------- colophon ---------- */
footer {
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
footer h3 { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin: 0 0 .7rem; }
footer p, footer li { margin: 0; font-size: .9rem; color: var(--ink-quiet); }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
footer a { text-decoration: none; border-bottom: 1px solid var(--rule); }
footer a:hover { border-bottom-color: currentColor; color: var(--ink); }
.mono { font-family: var(--utility); font-variant-numeric: tabular-nums; }

/* a deliberately visible marker while the plates are washes rather than paintings */
.standin {
  margin: 0 var(--gutter) 0;
  padding: .85rem 1rem;
  border-left: 2px solid var(--quin-gold);
  background: var(--paper-deep);
  font-size: .85rem;
  color: var(--ink-quiet);
  max-width: 52ch;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
:focus-visible { outline: 2px solid var(--cerulean); outline-offset: 3px; }

/* ---------- article prose ---------- */
.prose { max-width: 40rem; margin: 0 auto; padding: clamp(1.5rem,5vw,3.5rem) var(--gutter) clamp(3rem,8vw,6rem); }
.prose .kicker { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .8rem; }
.prose h1 { font-family:var(--display); font-weight:400; font-size:clamp(2.1rem,6vw,3.4rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 .6rem; text-wrap:balance; }
.prose .byline { color:var(--ink-faint); font-size:.85rem; margin:0 0 2.5rem; }
.prose h2 { font-family:var(--display); font-weight:400; font-size:clamp(1.4rem,3.2vw,2rem); line-height:1.1; margin:2.4em 0 .5em; letter-spacing:-.015em; }
.prose p, .prose li { font-size:1.05rem; line-height:1.72; }
.prose p { margin:0 0 1.1em; }
.prose a { color:var(--burnt-sienna); text-underline-offset:.18em; }
.prose ol, .prose ul { padding-left:1.4rem; margin:0 0 1.3em; }
.prose li { margin-bottom:.55em; }
.prose ol li::marker { color:var(--quin-rose); }
.prose b { font-weight:500; }
.prose em { font-style:italic; }
.prose blockquote { margin:1.8em 0; padding-left:1.2em; border-left:2px solid var(--quin-rose); font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--ink-quiet); }
.prose .note { background:var(--paper-deep); border-left:2px solid var(--quin-gold); padding:1rem 1.15rem; margin:1.9em 0; font-size:.98rem; }
.prose .note p:last-child { margin-bottom:0; }
.prose .plate { margin-bottom:2rem; }
.faq { margin:1.6em 0; }
.faq details { border-bottom:1px solid var(--rule); padding:.95rem 0; }
.faq details:first-child { border-top:1px solid var(--rule); }
.faq summary { cursor:pointer; list-style:none; font-family:var(--display); font-size:1.12rem; display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--quin-rose); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:"\2013"; }
.faq details > *:not(summary) { margin-top:.6rem; color:var(--ink-quiet); font-size:.98rem; }
.pagefoot { border-top:1px solid var(--rule); margin-top:3rem; padding-top:1.5rem; display:flex; gap:1.5rem; flex-wrap:wrap; font-size:.85rem; }
.pagefoot a { color:var(--ink-quiet); }

/* featured piece: painting large, details in a quiet column beside it */
.plate img { display:block; width:100%; height:100%; object-fit:cover; }
.feature { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:clamp(1.25rem,3vw,2.5rem); align-items:end; margin:0; }
.feature figcaption { display:flex; flex-direction:column; gap:.35rem; margin:0; justify-content:flex-end; }
.feature figcaption b { font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.05; color:var(--ink); margin-bottom:.4rem; }
.feature figcaption span { font-size:.92rem; color:var(--ink-quiet); }
.feature figcaption .med { margin-top:.6rem; }
@media (max-width:44rem) { .feature { grid-template-columns:1fr; } }

.plate.art { background:none; }
.plate.art img { height:auto; object-fit:contain; }
figcaption .med a { border-bottom:1px solid var(--rule); text-decoration:none; }

.compare { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0 2rem; }
.compare figure { margin:0; }
@media (max-width:44rem) { .compare { grid-template-columns:1fr; } }

.note-wash img { display:block; width:100%; height:100%; object-fit:cover; }