:root {
  --paper: #F5F2EC; --ink: #17171A; --oxblood: #7A2430; --stone: #6A655D; --rule: #D9D3C7;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
/* Every size is in rem, so the whole page scales from the root size, the way
   browser zoom would. Up to a 1440 by 900 window the root is the browser's
   default (16px). Past that it grows in step with the window, by its width or
   height, whichever is smaller, so a large monitor shows the same layout as a
   laptop, only bigger, and a wide but short window does not blow up the type.
   The 250% cap keeps the page within reach of browser zoom. Hairlines (rules,
   borders, focus rings) stay in px. */
html { font-size: clamp(100%, min(100vw / 90, 100vh / 56.25), 250%); background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.125rem/1.6 var(--serif); font-optical-sizing: auto; overflow-x: hidden; overflow-x: clip; }
a { color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: .1875rem; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.wrap { max-width: 62.5rem; margin: 0 auto; padding: 0 1.5rem; }
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; padding: 1.375rem 0; border-bottom: 1px solid var(--rule); }
.lockup { display: inline-flex; align-items: center; gap: .75rem; font-weight: 500; font-size: .9375rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lockup .mark { display: block; height: 1.5rem; width: auto; }
.lockup .v { color: var(--oxblood); }
.bar nav { display: flex; gap: 1.5rem; }
.label, .bar nav a { font: 500 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); text-decoration: none; }
.bar nav a:hover { color: var(--ink); }
.hero { padding: 6.5rem 0 5rem; }
/* The home page hero runs the full window width over the Roman temple photo
   (hero.webp, built in the vault by tools/av_hero.py), under a Paper wash that
   is nearly solid behind the type and thins toward the ruin. The header bar
   stays on plain Paper, so the column never sits on the photo. The Contact and
   404 pages use .hero-short and keep plain Paper. */
.hero:not(.hero-short) { position: relative; isolation: isolate; margin-bottom: 3rem; }
.hero:not(.hero-short)::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background: linear-gradient(90deg, rgb(245 242 236 / .95) 0%, rgb(245 242 236 / .86) 42%, rgb(245 242 236 / .45) 100%),
    url(/hero.webp) 62% 45% / cover no-repeat;
}
.wordmark { margin: 0; font-weight: 500; font-size: clamp(2.5rem, 9vw, 5rem); line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.wordmark span { display: block; margin-top: .9em; font: 500 .3em/1 var(--sans); letter-spacing: .42em; color: var(--oxblood); }
.lede { max-width: 30ch; margin: 2.75rem 0 0; font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.5; }
.section { padding: 0 0 5.5rem; }
.label { margin: 0 0 1.125rem; }
.holdings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.holdings li { padding: 1.625rem 1.75rem 1.875rem 0; }
.holdings li + li { padding-left: 1.75rem; border-left: 1px solid var(--rule); }
.holdings h3 { margin: 0; font-size: 1.3125rem; font-weight: 500; line-height: 1.3; }
.holdings p { margin: .5rem 0 .875rem; font: 400 .9375rem/1.55 var(--sans); color: var(--stone); }
.holdings a { font: 500 .875rem/1.4 var(--sans); letter-spacing: .02em; }
.contact { margin: 0; font-size: 1.375rem; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--rule); font: 400 .8125rem/1.5 var(--sans); color: var(--stone); }
@media (max-width: 720px) {
  .hero { padding: 4rem 0 3.5rem; }
  /* On a phone the type spans the width, so the wash is even rather than a fade. */
  .hero:not(.hero-short)::before {
    background: linear-gradient(rgb(245 242 236 / .86), rgb(245 242 236 / .86)), url(/hero.webp) 68% 50% / cover no-repeat;
  }
  .holdings { grid-template-columns: minmax(0, 1fr); }
  .holdings li, .holdings li + li { padding: 1.375rem 0 1.5rem; border-left: 0; border-bottom: 1px solid var(--rule); }
}
.hero-short { padding: 4.5rem 0 2.5rem; }
.page-title { margin: 0; font: 500 clamp(2rem, 6vw, 3rem)/1.15 var(--serif); }
.foot a { color: inherit; }
/* Running text on a page of its own, such as the privacy page. */
.prose { max-width: 64ch; }
.prose .label { margin: 2.75rem 0 .875rem; }
.prose .label:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose .updated { margin-top: 2rem; font: 400 .9375rem/1.5 var(--sans); color: var(--stone); }
.notice, .error { font: 400 .9375rem/1.5 var(--sans); color: var(--oxblood); }
.error { min-height: 1.5em; margin: 0 0 .75rem; }
.quiz { max-width: 40rem; }
.quiz fieldset { border: 0; margin: 0; padding: 0 0 .5rem; min-width: 0; }
.quiz .step > legend { padding: 0; margin: 0 0 1.25rem; font: 500 1.625rem/1.3 var(--serif); }
.quiz .question { margin: 0 0 1.5rem; }
.quiz .question > legend, .field > label { padding: 0; margin: 0 0 .625rem; font: 500 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.progress { margin: 0 0 1.125rem; font: 500 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.choices { display: grid; gap: .5rem; }
.choice { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border: 1px solid var(--rule); cursor: pointer; font-size: 1.0625rem; line-height: 1.4; }
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--oxblood); box-shadow: inset 0 0 0 1px var(--oxblood); }
.choice input { margin: 0; accent-color: var(--oxblood); }
.field { display: grid; margin: 0 0 1.125rem; }
.field input, .field textarea { font: 400 1.0625rem/1.5 var(--serif); color: var(--ink); background: transparent; border: 1px solid var(--stone); border-radius: 0; padding: .625rem .75rem; }
.field input:focus-visible, .field textarea:focus-visible, .choice:focus-within { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 0; }
.button { font: 500 .8125rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: .9375rem 1.375rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
.button.quiet { background: transparent; color: var(--ink); }
.button:disabled { opacity: .6; cursor: progress; }
.quiz:not(.is-stepped) .progress, .quiz:not(.is-stepped) [data-next], .quiz:not(.is-stepped) [data-back] { display: none; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks:focus { outline: none; }
.quiz [hidden] { display: none; }
/* Phones get a larger type scale: nothing a visitor reads is under 14px, and
   running text is 17px or more, so the site reads without zooming. It sits
   last so it overrides every rule above, the quiz's included. The lockup is
   a logo, not reading text, so it stays 15px, which with the narrower gap
   keeps Contact on the lockup's line down to a 360px phone. */
@media (max-width: 720px) {
  .bar { gap: .75rem 1.25rem; }
  .label, .bar nav a { font-size: .875rem; letter-spacing: .14em; }
  .wordmark { font-size: 3rem; }
  .lede { font-size: 1.375rem; }
  .holdings h3 { font-size: 1.5rem; }
  .holdings p { margin: .625rem 0 1rem; font-size: 1.125rem; }
  .holdings a { font-size: 1.0625rem; }
  .contact { font-size: 1.5rem; }
  .foot { font-size: .9375rem; }
  .page-title { font-size: 2.25rem; }
  .quiz .step > legend { font-size: 1.75rem; }
  .quiz .question > legend, .field > label, .progress { font-size: .875rem; letter-spacing: .14em; }
  .choice { padding: .875rem 1rem; font-size: 1.125rem; }
  .field input, .field textarea { padding: .75rem .875rem; font-size: 1.125rem; }
  .button { padding: 1.125rem 1.5rem; font-size: .9375rem; }
  .notice, .error { font-size: 1.0625rem; }
}
@media (max-width: 389px) {
  .lockup { letter-spacing: .12em; }
}