/* Ordinary, the collection. An editorial hang: each painting at its true size relative to the others,
   given its own moment in turn, left then right, with the sitter's line beside it like a wall text.
   Choose a painting and it opens beside its letter; choose it again and it fills the screen. */
.oc-page main { --grid: 12; --col-gap: clamp(16px, 2vw, 32px); }
.oc-hero { display: grid; justify-items: center; text-align: center; padding: clamp(40px, 7vw, 110px) var(--c-gut) 0; }
.oc-back { justify-self: start; font: 14px var(--c-sans); color: var(--c-soft); text-decoration: none; margin-bottom: clamp(24px, 4vw, 56px); }
.oc-back:hover { color: var(--c-ink); }
html[data-theme] body.oc-page main .oc-hero h1#or-title { margin: 0; font-size: var(--type-display, clamp(4rem, 12vw, 12.5rem)) !important; line-height: .85 !important; letter-spacing: -.05em !important; }
html[data-theme] body.oc-page main .oc-hero .oc-sub { margin: clamp(22px, 3vw, 40px) 0 0; max-width: 34ch; font-size: var(--type-lede) !important; line-height: 1.5 !important; color: var(--c-soft); text-wrap: balance; }

/* the sequence */
.oc-seq { display: grid; gap: clamp(100px, 13vw, 200px); padding: clamp(90px, 12vw, 180px) var(--c-gut) clamp(120px, 14vw, 220px); }
.oc-piece { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; scroll-margin-top: calc(var(--sh-header-height, 76px) + 40px);
  --H: min(80svh, 56vw); }
.oc-pic { all: unset; cursor: pointer; grid-column: 2 / span 6; grid-row: 1; justify-self: end; display: block; }
.oc-pic img { display: block; height: calc(var(--H) * var(--hcm) / 58); width: auto; max-width: 100%; object-fit: contain;
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.18); transition: transform .9s cubic-bezier(.2,.75,.15,1), box-shadow .9s; }
html[data-theme="light"] body.oc-page .oc-pic img { box-shadow: 0 50px 80px -46px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.08); }
.oc-pic:hover img, .oc-pic:focus-visible img { transform: translateY(-8px); }
.oc-pic:focus-visible { outline: 2px solid currentColor; outline-offset: 12px; }
.oc-about { grid-column: 8 / span 4; padding-left: clamp(8px, 2vw, 40px); grid-row: 1; display: grid; gap: 18px; justify-items: start; padding-bottom: clamp(0px, 2vw, 24px); }
.oc-piece.alt .oc-pic { grid-column: 6 / span 6; justify-self: start; }
.oc-piece.alt .oc-about { grid-column: 2 / span 4; padding-left: 0; padding-right: clamp(8px, 2vw, 40px); }
html[data-theme] body.oc-page main .oc-about h2 { margin: 0; font-size: var(--type-section-title) !important; line-height: 1 !important; letter-spacing: -.03em !important; }
html[data-theme] body.oc-page main .oc-about .oc-line { margin: 0; max-width: 22ch; font-family: var(--c-serif) !important; font-style: italic; font-size: var(--type-lede) !important; line-height: 1.35 !important; text-wrap: balance; }
html[data-theme] body.oc-page main .oc-about .oc-label { margin: 6px 0 0; font: 12px/1.4 var(--c-sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--c-soft); }
.oc-go { all: unset; cursor: pointer; font: 15px/1.3 var(--c-sans); border-bottom: 1px solid currentColor; padding-bottom: 4px; margin-top: 4px; }
.oc-go span { display: inline-block; transition: transform .4s cubic-bezier(.2,.75,.15,1); }
.oc-go:hover span, .oc-go:focus-visible span { transform: translateX(6px); }
.oc-go:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* each piece arrives once as it comes into view */
.oc-js .oc-piece .oc-pic img { opacity: 0; transform: translateY(40px); }
.oc-js .oc-piece .oc-about > * { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.75,.15,1); }
.oc-js .oc-piece.seen .oc-pic img { opacity: 1; transform: none; transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.75,.15,1), box-shadow .9s; }
.oc-js .oc-piece.seen .oc-about > * { opacity: 1; transform: none; }
.oc-js .oc-piece.seen .oc-about > :nth-child(1) { transition-delay: .25s; } .oc-js .oc-piece.seen .oc-about > :nth-child(2) { transition-delay: .38s; }
.oc-js .oc-piece.seen .oc-about > :nth-child(3) { transition-delay: .5s; } .oc-js .oc-piece.seen .oc-about > :nth-child(4) { transition-delay: .6s; }
.oc-js .oc-piece.seen .oc-pic:hover img { transform: translateY(-8px); transition: transform .9s cubic-bezier(.2,.75,.15,1), box-shadow .9s; }

@media (max-width: 1100px) {
  .oc-pic, .oc-piece.alt .oc-pic { grid-column: 1 / span 7; justify-self: start; }
  .oc-about, .oc-piece.alt .oc-about { grid-column: 8 / span 4; padding-left: clamp(8px, 2vw, 40px); }
  .oc-piece.alt .oc-pic { grid-column: 6 / span 7; justify-self: end; grid-row: 1; }
  .oc-piece.alt .oc-about { grid-column: 1 / span 4; }
}
@media (max-width: 760px) {
  .oc-piece { grid-template-columns: 1fr; }
  .oc-piece { --H: 72svh; row-gap: 26px; }
  .oc-pic, .oc-piece.alt .oc-pic, .oc-about, .oc-piece.alt .oc-about { grid-column: 1; justify-self: start; }
  .oc-about, .oc-piece.alt .oc-about { grid-row: 2; padding: 0; }
  .oc-pic img { height: auto; max-height: calc(var(--H) * var(--hcm) / 58); width: auto; max-width: 100%; }
  .oc-seq { gap: 96px; padding-top: 72px; }
}
@media (prefers-reduced-motion: reduce) { .oc-js .oc-piece .oc-pic img, .oc-js .oc-piece .oc-about > * { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* the open state: painting and letter side by side */
dialog.oc-read { border: 0; margin: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--c-paper); color: var(--c-ink); overflow: auto; overscroll-behavior: contain; }
dialog.oc-read::backdrop { background: rgba(0,0,0,.6); }
.oc-read-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: max(14px, env(safe-area-inset-top, 0px)) var(--c-gut) 14px; background: var(--c-paper); border-bottom: 1px solid var(--c-line); font: 14px var(--c-sans); }
.oc-read-bar .n { margin-right: auto; color: var(--c-soft); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.oc-read-bar button, .oc-bar button { background: none; border: 1px solid var(--c-line); border-radius: 999px; padding: 8px 16px; color: inherit; cursor: pointer; font: 14px var(--c-sans); }
.oc-read-bar button:hover { border-color: var(--c-ink); }
.oc-sitter { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding: clamp(28px, 4vw, 64px) var(--c-gut) clamp(60px, 8vw, 120px); }
.oc-art { margin: 0; position: sticky; top: 90px; display: grid; gap: 12px; justify-items: center; }
.oc-full { all: unset; cursor: zoom-in; display: block; }
.oc-full:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.oc-full img { display: block; max-width: 100%; max-height: calc(100dvh - 170px); width: auto; height: auto; box-shadow: 0 22px 46px -24px rgba(0,0,0,.6); }
html[data-theme] body.oc-page .oc-art figcaption { font: 13px/1.4 var(--c-sans) !important; color: var(--c-soft); }
.oc-text { max-width: 34em; }
html[data-theme] body.oc-page .oc-read .oc-text h2 { margin: 0 0 .7em; font: 400 var(--type-section-title, clamp(2.2rem, 4.25vw, 4.5rem))/1.05 var(--c-serif); letter-spacing: -.02em; }
html[data-theme] body.oc-page .oc-read .oc-letter p { margin: 0 0 1.1em; font: 400 var(--type-body, clamp(1.125rem, 1.18vw, 1.4rem))/var(--leading-reading, 1.7) var(--c-serif); }
html[data-theme] body.oc-page .oc-read .oc-letter :is(blockquote, blockquote p) { font-family: var(--c-serif) !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: 0 !important; font-style: italic; }
.oc-letter blockquote { margin: 1.2em 0 1.2em 1.4em; padding-left: 1em; border-left: 1px solid currentColor; }
.oc-colophon { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 2em 0 0; padding-top: 1.2em; border-top: 1px solid var(--c-line); font: 14px/1.5 var(--c-sans); }
.oc-colophon div { display: flex; gap: 8px; }
.oc-colophon dt { color: var(--c-soft); }
.oc-colophon dd { margin: 0; }
.oc-colophon a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.oc-links { margin: 1.4em 0 0; }

/* full screen: the painting grows out of the page, then a glass magnifier follows the pointer,
   easing behind it, while the rest of the painting quietly dims */
dialog.oc-box { border: 0; margin: 0; padding: max(18px, env(safe-area-inset-top, 0px)) var(--c-gut) max(18px, env(safe-area-inset-bottom, 0px)); width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: #f2f0eb; overflow: hidden; }
dialog.oc-box[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
dialog.oc-box::backdrop { background: #070706; opacity: 0; transition: opacity .5s ease; }
dialog.oc-box.in::backdrop { opacity: 1; }
.oc-stage { position: relative; min-height: 0; overflow: visible; }
.oc-stage img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; touch-action: none; user-select: none; -webkit-user-drag: none; box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); }
.oc-stage.looking, .oc-stage.looking img { cursor: none; }
.oc-dim { position: absolute; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(7,7,6,0) var(--r, 140px), rgba(7,7,6,.36) calc(var(--r, 140px) + 160px)); }
.oc-stage.looking .oc-dim { opacity: 1; }
.oc-lens { position: absolute; left: 0; top: 0; width: var(--L, 280px); height: var(--L, 280px); border-radius: 50%; pointer-events: none; will-change: transform;
  background-repeat: no-repeat; background-color: #111; opacity: 0; transform: translate3d(var(--lx, 0), var(--ly, 0), 0) scale(.55);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 0 6px rgba(255,255,255,.06), 0 28px 70px -10px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -18px 40px -20px rgba(0,0,0,.45); }
.oc-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(120% 70% at 30% 8%, rgba(255,255,255,.16), rgba(255,255,255,0) 42%); }
.oc-stage.looking .oc-lens { opacity: 1; transform: translate3d(var(--lx, 0), var(--ly, 0), 0) scale(1); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.oc-stage.moving .oc-lens { transition: opacity .35s ease; }
.oc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font: 14px var(--c-sans); opacity: 0; transform: translateY(8px); transition: opacity .5s ease .25s, transform .6s cubic-bezier(.2,.8,.2,1) .25s; }
dialog.oc-box.in .oc-bar { opacity: 1; transform: none; }
.oc-bar .t { font: 24px var(--c-serif); margin-right: auto; letter-spacing: -.01em; }
.oc-bar .hint { color: #b9b4ab; transition: opacity .6s ease; }
.oc-bar .hint.gone { opacity: 0; }
.oc-bar .res { color: #8d887f; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.oc-bar button { border-color: #555; color: #f2f0eb; }
.oc-bar button:hover { border-color: #f2f0eb; }

@media (max-width: 900px) {
  .oc-sitter { grid-template-columns: 1fr; }
  .oc-art { position: static; }
  .oc-full img { max-height: 70dvh; }
}
@media (prefers-reduced-motion: reduce) { .oc-lens, .oc-dim, .oc-bar, dialog.oc-box::backdrop { transition: none !important; } }

/* the open state arrives: a quick fade, the letter rising after the painting has landed */
dialog.oc-read { opacity: 0; transition: opacity .35s ease; }
dialog.oc-read.in { opacity: 1; }
.oc-read .oc-text > * { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.oc-read.in .oc-sitter.ready .oc-text > * { opacity: 1; transform: none; }
.oc-read.in .oc-sitter.ready .oc-text > :nth-child(2) { transition-delay: .08s; }
.oc-read.in .oc-sitter.ready .oc-text > :nth-child(n+3) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { dialog.oc-read, .oc-read .oc-text > * { transition: none !important; opacity: 1 !important; transform: none !important; } }