/* Fonts: SIL Open Font License, see fonts/OFL-*.txt. The latin-ext files load only for rare letters.
   For a letter in both files, the browser uses the face declared last, so latin comes last. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(fonts/newsreader-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(fonts/newsreader-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 500; font-display: swap; src: url(fonts/newsreader-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 500; font-display: swap; src: url(fonts/newsreader-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/instrument-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/instrument-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #ffffff;
  --paper-deep: #f3f2ef;
  --ink: #1c1b18;
  --ink-soft: #4a4740;
  --muted: #6f6a60;
  --rule: #e7e5e0;
  --accent: #9a3b26;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  /* Wide screens: the content stops at 1680px and stays centered. */
  --gutter: max(clamp(16px, 4vw, 56px), (100vw - 1680px) / 2);
  --row: 300px;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
body.viewer-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
em, i { font-style: italic; }
::selection { background: #ece6da; }

/* Labels and small type */
.label, .site-nav a, .filters button, .footer {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.todo {
  background: #fff2b8;
  color: #5d4a00;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

/* Header */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 28px var(--gutter) 0;
}

.site-name {
  font-size: 21px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-menus { display: flex; align-items: baseline; gap: clamp(20px, 3vw, 44px); }
.site-nav { display: flex; gap: clamp(16px, 2.6vw, 36px); }
.lang-switch { display: flex; gap: 10px; font-family: var(--sans); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.lang-switch [aria-current] { color: var(--ink); }
.lang-switch a { color: var(--muted); border-bottom: 1px solid transparent; transition: color .2s; }
.lang-switch a:hover { color: var(--ink); }

.lang-hint {
  display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px var(--gutter); border-bottom: 1px solid var(--rule);
  font-size: 15px; color: var(--ink-soft);
}
.lang-hint a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.lang-hint a:hover { border-bottom-color: var(--ink); }
.lang-hint button { appearance: none; border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); padding: 0 4px; }
.site-nav a { color: var(--ink-soft); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

main { padding: 0 var(--gutter); }

/* Home */
/* Name and intro at the top left. The wall label is at the bottom left, level with the foot of the painting.
   The painting is as tall as the screen allows, but a wide one stops where the text column needs its room. */
.hero {
  --text-min: max(420px, 30vw);
  --gap: clamp(24px, 4vw, 72px);
  display: grid;
  grid-template-columns: minmax(var(--text-min), 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 0 var(--gap);
  padding: clamp(32px, 6vh, 72px) 0 clamp(40px, 8vh, 96px);
}

.hero-text { grid-area: 1 / 1; }
.hero-text h1 {
  margin: -0.08em 0 32px;
  font-weight: 300;
  font-size: clamp(56px, 5.6vw, 104px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.hero-text h1 span { white-space: nowrap; }

.hero-text p { margin: 0 0 14px; max-width: 34ch; color: var(--ink-soft); font-size: 19px; }
.hero-text .label { color: var(--muted); max-width: none; }

.hero-figure { margin: 0; display: contents; }
.hero-link { grid-area: 1 / 2 / 3 / 3; justify-self: end; }
.hero-figure img {
  width: auto;
  height: min(calc(100vh - 150px), 880px, calc((100vw - 2 * var(--gutter) - var(--text-min) - var(--gap)) / var(--r)));
  object-fit: contain;
  object-position: right bottom;
}
.hero-figure figcaption { grid-area: 2 / 1; align-self: end; display: grid; gap: 2px; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.hero-figure figcaption .t { font-size: 19px; color: var(--ink); }
.hero-figure figcaption .series-link { margin-top: 12px; justify-self: start; color: var(--muted); transition: color .2s; }
.hero-figure figcaption .series-link:hover { color: var(--ink); }
body[data-page="home"] .site-name { visibility: hidden; }

.page-title, .band h2 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* Home sampler */
.more {
  font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color .2s;
  justify-self: start; align-self: start;
}
.more::after { content: " →"; }
a:hover .more, .more:hover { border-bottom-color: var(--ink); }

.band { border-top: 1px solid var(--rule); padding: clamp(48px, 8vh, 88px) 0; }
.band-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px clamp(20px, 3vw, 48px); align-items: baseline; margin-bottom: 40px; }
.band-head p { grid-column: 2 / -1; margin: 0; max-width: 52ch; color: var(--ink-soft); }
.band-head .more { grid-column: 3; justify-self: end; }
.door p { margin: 0; color: var(--ink-soft); font-size: 16px; max-width: 40ch; }

/* Cards in a row have the same image height: each card's width follows its image ratio. Wide images are capped. */
.doors { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 48px); }
.door { --g: min(var(--r), 1.1); flex: var(--g) 1 0; min-width: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; }
.door-img { aspect-ratio: var(--g); display: flex; align-items: flex-end; justify-content: flex-start; margin-bottom: 10px; overflow: hidden; }
.door-img img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; transition: transform .8s cubic-bezier(.2,.7,.2,1); transform-origin: bottom left; }
.door:hover .door-img img { transform: scale(1.02); }
.door h3 { margin: 0; font-weight: 400; font-size: 24px; line-height: 1.2; }
.door h3 i { font-style: italic; }
.door .en { color: var(--muted); font-size: 16px; margin-top: -6px; }

.split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
.split-img { margin: 0; }
.split-portrait { grid-template-columns: minmax(200px, 4fr) 8fr; }
.split-portrait .split-text p { max-width: 52ch; }
.split-img img { width: 100%; }
.split-text { display: grid; gap: 18px; }
.split-text p { margin: 0; max-width: 42ch; color: var(--ink-soft); }

.studio-figure { margin: 40px 0 0; display: grid; gap: 8px; }
.studio-figure > img { width: 100%; }
.photo-row { display: flex; gap: 8px; }
.photo-row img { flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); object-fit: cover; }
.studio-mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; aspect-ratio: 1.9; }
.studio-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.studio-mosaic img:first-child { grid-row: span 2; }
.prose .body .next { margin: 40px 0 0; }

/* Generic page head */
.page-head {
  display: grid;
  grid-template-columns: minmax(200px, 4fr) 8fr;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(48px, 9vh, 112px) 0 clamp(32px, 6vh, 64px);
}
.page-head p { margin: 6px 0 0; max-width: 58ch; color: var(--ink-soft); }

/* Work page */
body[data-page="work"] .page-head { grid-template-columns: 272px 1fr; }
.work-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

/* Full-width scroll bar in a light color, with space between it and the dates. */
.toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; padding: 0 16px 24px 0; scrollbar-width: auto; scrollbar-color: #d4d0c6 transparent; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 15px; color: var(--muted); transition: color .2s; }
.toc a:hover, .toc a.active { color: var(--ink); }
.toc a .y { font-family: var(--sans); font-size: 12px; letter-spacing: .04em; padding-top: 3px; white-space: nowrap; }
.toc li.hidden { display: none; }
.toc .toc-group { color: var(--muted); margin: 22px 0 8px; }
.group-head {
  margin: 0 0 clamp(40px, 6vh, 64px); padding-top: clamp(32px, 5vh, 56px); border-top: 1px solid var(--rule);
  font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.015em;
}
.group-head.hidden { display: none; }

.work-layout > * { min-width: 0; }
.jump { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 28px; }
.filters button {
  appearance: none; background: none; border: 0; padding: 0 0 3px; cursor: pointer;
  color: var(--muted); border-bottom: 1px solid transparent;
}
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.series { padding: 0 0 clamp(64px, 10vh, 120px); scroll-margin-top: 24px; }
.series.hidden { display: none; }
.series-head { display: grid; gap: 4px; margin-bottom: 8px; }
.series-head h2 { margin: 0; font-weight: 400; font-style: italic; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.01em; }
.series-head .en { color: var(--muted); font-size: 16px; }
.series-text { max-width: 58ch; margin: 10px 0 28px; color: var(--ink-soft); font-size: 17px; }

/* Justified rows: each item grows in proportion to its aspect ratio. */
.grid { display: flex; flex-wrap: wrap; gap: 32px 24px; }
.grid::after { content: ""; flex-grow: 999999; }
.tile {
  flex: var(--r) 1 calc(var(--r) * var(--row));
  max-width: calc(var(--r) * var(--row) * 1.6);
  margin: 0;
  cursor: zoom-in;
}
.tile.hidden { display: none; }
.tile .frame { background: var(--paper-deep); aspect-ratio: var(--r); overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.tile img.loaded { opacity: 1; }
.tile figcaption { margin-top: 8px; font-size: 14px; line-height: 1.35; }
.tile figcaption .t { display: block; color: var(--ink); }
.tile figcaption .m { display: block; color: var(--muted); }
.tile:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

/* Viewer */
.viewer {
  position: fixed; inset: 0; z-index: 50;
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(16px, 3vw, 40px) var(--gutter);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.viewer:focus { outline: none; }
.viewer.open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.viewer-stage { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 0; min-width: 0; }
.viewer-stage img { max-width: 100%; max-height: calc(100vh - 2 * clamp(16px, 3vw, 40px)); object-fit: contain; transition: opacity .2s; }
.viewer-stage img.swapping { opacity: 0; }
.viewer-side { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0; min-height: 0; }
.viewer-close, .viewer-nav button {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.viewer-close { align-self: flex-end; }
.viewer button:focus:not(:focus-visible) { outline: none; }
.viewer button:focus-visible { outline: 1px solid var(--muted); outline-offset: 4px; }
.viewer-close:hover, .viewer-nav button:hover { color: var(--ink); }
.viewer-caption h3 { margin: 0 0 4px; font-weight: 400; font-style: italic; font-size: 26px; line-height: 1.15; }
.viewer-caption p { margin: 0 0 4px; font-size: 16px; color: var(--ink-soft); }
.viewer-caption .series-link { display: inline-block; margin-top: 18px; color: var(--muted); }
.viewer-caption .series-link:hover { color: var(--ink); }
.viewer-nav { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.viewer-hit { appearance: none; background: none; border: 0; padding: 0; position: absolute; top: 0; bottom: 0; width: 35%; cursor: w-resize; }
.viewer-hit.next { right: 0; cursor: e-resize; }
.viewer-hit.prev { left: 0; }
.viewer.single .viewer-nav { visibility: hidden; }
.viewer.single .viewer-hit { display: none; }

img.zoom { cursor: zoom-in; }
img.zoom:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* Prose pages */
.prose { display: grid; grid-template-columns: minmax(200px, 4fr) 8fr; gap: clamp(24px, 4vw, 72px); padding-bottom: 72px; }
.prose .body { max-width: 64ch; }
.prose .body p { margin: 0 0 1.1em; }
.prose .body p.lede { font-size: 23px; line-height: 1.4; color: var(--ink); }
.prose h2 { margin: 0; font-weight: 300; font-size: 30px; line-height: 1.1; }
.prose + .prose { border-top: 1px solid var(--rule); padding-top: 56px; }

.about-portrait { margin: 0; align-self: start; position: sticky; top: 32px; }
.about-portrait img { width: 100%; max-width: 380px; }
.prose .side { display: grid; gap: 32px; align-self: start; position: sticky; top: 32px; }
.side .about-portrait { position: static; }

/* Exhibitions */
.shows { list-style: none; margin: 0; padding: 0; }
.shows li { display: grid; grid-template-columns: 5em 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.shows li:first-child { border-top: 1px solid var(--rule); }
.shows .when { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; color: var(--muted); padding-top: 5px; font-variant-numeric: tabular-nums; }
.shows .kind { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.shows h3 { margin: 0; font-weight: 400; font-style: italic; font-size: 22px; line-height: 1.25; }
.shows p { margin: 4px 0 0; color: var(--ink-soft); font-size: 16px; }
.shows .links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.shows .links a, .link { border-bottom: 1px solid var(--rule); transition: border-color .2s; }
.shows .links a:hover, .link:hover { border-bottom-color: var(--ink); }
.shows .links a { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* Contact */
.contact-list { margin: 0; display: grid; grid-template-columns: 9em 1fr; gap: 18px 24px; align-items: baseline; }
.contact-list dt { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-list dd { margin: 0; }

/* Page not found: short text, centered. */
.lost { display: grid; justify-items: center; gap: 20px; text-align: center; padding: clamp(64px, 16vh, 180px) 0 120px; }
.lost p { margin: 0; color: var(--ink-soft); }
.lost-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }

/* Footer */
.footer a { transition: color .2s; }
.footer a:hover { color: var(--ink); }
.footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 28px 0 36px; color: var(--muted); border-top: 1px solid var(--rule); margin: 0 var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tile img { opacity: 1; }
}

/* Narrow screens */
@media (max-width: 860px) {
  :root { --row: 150px; }
  body { font-size: 17px; }
  .site-header { flex-direction: column; gap: 10px; padding-top: 20px; }
  .site-menus { flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; width: 100%; }
  .site-nav { flex-wrap: wrap; gap: 8px 20px; }
  .hero, .page-head, .work-layout, .prose, .band-head, .split, body[data-page="work"] .page-head { grid-template-columns: 1fr; }
  .band-head p, .band-head .more { grid-column: 1; justify-self: start; }
  body[data-page="home"] .site-name { visibility: visible; }
  .doors {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
  }
  .doors::-webkit-scrollbar { display: none; }
  .door { scroll-snap-align: start; }
  .door-img { aspect-ratio: 4 / 5; }
  .hero { align-items: start; grid-template-rows: none; row-gap: 24px; }
  .hero-text { grid-area: auto; }
  .hero-figure { display: block; order: -1; }
  /* The header already shows the name. The heading stays for screen readers. */
  .hero-text h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  .hero-figure img { width: 100%; height: auto; max-height: 62vh; object-position: center; }
  .hero-figure figcaption { display: block; margin-top: 10px; }
  .hero-figure figcaption .t { font-size: 15px; color: var(--ink-soft); }
  .hero-figure figcaption .m, .hero-figure figcaption .series-link { display: none; }
  .toc { display: none; }
  .controls { position: sticky; top: 0; z-index: 5; background: var(--paper); margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 4px; border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
  .series { scroll-margin-top: 120px; }
  .jump { display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px; }
  .jump .label { display: none; }
  .controls .filters { margin-bottom: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 18px; white-space: nowrap; }
  .controls .filters::-webkit-scrollbar { display: none; }
  .jump select {
    flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
    background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 4px 0;
  }
  .grid { gap: 20px 12px; }
  .viewer { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .viewer-stage { justify-content: center; }
  .viewer-stage img { max-height: 62vh; }
  .viewer-side { gap: 14px; }
  .viewer-close { position: absolute; top: 14px; right: var(--gutter); }
  .viewer-caption h3 { font-size: 21px; }
  .photo-row { flex-wrap: wrap; }
  .photo-row img { flex-basis: calc(var(--r) * 110px); }
  .about-portrait, .prose .side { position: static; }
  .about-portrait img { max-width: 260px; }
  .contact-list { grid-template-columns: 1fr; gap: 4px; }
  .contact-list dd { margin-bottom: 16px; }
  .shows li { grid-template-columns: 1fr; gap: 4px; }
  .todo { white-space: normal; }
}