:root {
  --wall: #e7ddcb;
  --paper: #f6f0e4;
  --ink: #241d16;
  --ink-soft: #5c5142;
  --rule: #c9bba1;
  --brass-1: #d9bd77;
  --brass-2: #a9812f;
  --brass-ink: #3a2a08;
  --shadow: rgba(52, 38, 20, .28);
  --glow: rgba(255, 250, 235, .55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --wall: #1a1712;
    --paper: #23201a;
    --ink: #e9dfcc;
    --ink-soft: #a2957f;
    --rule: #443c30;
    --brass-1: #c3a05a;
    --brass-2: #8d6a24;
    --brass-ink: #1c1405;
    --shadow: rgba(0, 0, 0, .65);
    --glow: rgba(255, 232, 186, .07);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wall);
  background-image: radial-gradient(ellipse at 50% -10%, var(--glow), transparent 60%);
  color: var(--ink);
  font: 300 18px/1.65 Spectral, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.masthead {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2.4rem clamp(1.2rem, 5vw, 4.5rem) 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.wordmark { text-decoration: none; display: block; }
.wordmark-small {
  display: block; font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-soft);
}
.wordmark-big {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 4.4vw, 2.7rem); font-weight: 600; letter-spacing: .01em;
  line-height: 1.05;
}
.masthead nav { display: flex; gap: 1.8rem; }
.masthead nav a {
  text-decoration: none; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft); padding-bottom: .3rem; border-bottom: 1px solid transparent;
}
.masthead nav a:hover, .masthead nav a.here { color: var(--ink); border-color: var(--brass-2); }

main { padding: clamp(2.5rem, 6vw, 5rem) clamp(1.2rem, 5vw, 4.5rem); max-width: 1180px; margin: 0 auto; }

h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; letter-spacing: .005em; }

.eyebrow {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 1.6rem;
}
.entrance h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.12; margin: 0 0 1.6rem; max-width: 20ch;
}
.lede { font-size: 1.12rem; max-width: 58ch; color: var(--ink-soft); }
.lede.small { font-size: .95rem; }

.actions { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; margin-top: 2.6rem; }
.btn {
  display: inline-block; text-decoration: none;
  padding: .78rem 1.9rem; border: 1px solid var(--brass-2);
  background: linear-gradient(180deg, var(--brass-1), var(--brass-2));
  color: var(--brass-ink);
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  cursor: pointer; font-family: inherit;
}
.btn:hover { filter: brightness(1.06); }
.btn-quiet {
  text-decoration: none; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding-bottom: .2rem;
}
.btn-quiet:hover { color: var(--ink); border-color: var(--brass-2); }

.rule {
  font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 0 0 .4rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule);
}
.recent, .collection { margin-top: clamp(3rem, 8vw, 5.5rem); }

.grid {
  display: grid; gap: clamp(2rem, 4vw, 3.4rem);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-top: 2.6rem;
}
.plinth { text-decoration: none; display: block; }
.frame {
  background: var(--paper);
  padding: 12px;
  border: 1px solid var(--rule);
  box-shadow: 0 14px 26px -14px var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plinth .frame { transition: transform .25s ease, box-shadow .25s ease; }
.plinth:hover .frame { transform: translateY(-3px); box-shadow: 0 22px 34px -16px var(--shadow); }
.plinth h3 { font-size: 1.15rem; line-height: 1.25; margin: .55rem 0 0; }

.plaque {
  display: inline-block; margin-top: .9rem;
  padding: .28rem .8rem;
  background: linear-gradient(180deg, var(--brass-1), var(--brass-2));
  color: var(--brass-ink);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
.plaque.inline { margin: 0; }
.plaque.big { font-size: .8rem; padding: .45rem 1.1rem; }

.pager {
  display: flex; gap: 2rem; align-items: center; justify-content: center;
  margin-top: 3.6rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pager a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .2rem; }
.pager a:hover { border-color: var(--brass-2); color: var(--ink); }

.object { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.frame.large { padding: 18px; }
.frame.large img { aspect-ratio: auto; }
.object-image .plaque { margin-top: 1.1rem; }

.placard {
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 34px -22px var(--shadow);
  padding: clamp(1.6rem, 4vw, 2.8rem);
}
.placard h1 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); line-height: 1.15; margin: 0 0 1.4rem; }
.placard dl { margin: 0; }
.placard dt {
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 1.5rem;
}
.placard dd { margin: .35rem 0 0; }
.accessioned {
  margin: 2.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}

.thoughts, .margin { margin-top: 2.6rem; border-left: 2px solid var(--rule); padding-left: 1.4rem; }
.thoughts h2, .margin h2 {
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft); font-family: Spectral, Georgia, serif; font-weight: 400; margin: 0 0 .6rem;
}
.thoughts .note { font-size: .82rem; font-style: italic; color: var(--ink-soft); margin: 0 0 1rem; }
.thought-body {
  font-size: .88rem; font-style: italic; line-height: 1.6; color: var(--ink-soft);
  white-space: pre-wrap;
}
.thoughts .thought-body { max-height: 30rem; overflow-y: auto; padding-right: .8rem; }

.desk form { margin-top: 2.8rem; max-width: 620px; }
.dropzone {
  display: block; position: relative; cursor: pointer;
  border: 1px dashed var(--rule); background: var(--paper);
  padding: 2.6rem 2rem; text-align: center;
  box-shadow: inset 0 0 0 8px rgba(0, 0, 0, .02);
}
.dropzone:hover { border-color: var(--brass-2); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-text { display: block; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.dz-text small { display: block; margin-top: .7rem; letter-spacing: .06em; text-transform: none; font-size: .82rem; font-style: italic; }
#preview { display: none; margin: 0 auto 1.4rem; max-height: 260px; width: auto; border: 1px solid var(--rule); }
#preview.has-image { display: block; }
.desk button { margin-top: 1.8rem; }

.examination { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 3.4rem); align-items: start; margin-top: 2.4rem; }
.examination .margin { margin-top: 0; }
.examination .thought-body { max-height: 70vh; overflow-y: auto; }
.exam-main .frame.large { max-width: 380px; margin-bottom: 2rem; }
.status {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 1.6rem;
}
.status.waiting::before { content: '\2014\00a0'; }
.status.error { color: #9c3b1f; text-transform: none; letter-spacing: .02em; font-size: 1rem; font-style: italic; }
@media (prefers-color-scheme: dark) { .status.error { color: #e08a6a; } }

pre.placard.live {
  font-family: Spectral, Georgia, serif; font-size: 1rem; line-height: 1.65;
  white-space: pre-wrap; margin: 0;
}
pre.placard.live .lab {
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft);
}
pre.placard.live .live-plaque {
  display: inline-block; margin-bottom: .6rem;
  padding: .28rem .8rem;
  background: linear-gradient(180deg, var(--brass-1), var(--brass-2));
  color: var(--brass-ink);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
}
.accepted { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.8rem; margin: 2.6rem 0 .6rem; }
#finale .plaque.big { margin-bottom: 1.8rem; }
#finale p:last-child { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }

.colophon {
  border-top: 1px solid var(--rule);
  padding: 2.4rem clamp(1.2rem, 5vw, 4.5rem) 3.4rem;
  color: var(--ink-soft); font-size: .84rem; font-style: italic;
}
.colophon p { margin: 0 0 .4rem; }
.colophon .credit { font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 820px) {
  .object, .examination { grid-template-columns: 1fr; }
}