: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; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 18px/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: 3px; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.lockup { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lockup .mark { display: block; height: 24px; width: auto; }
.lockup .v { color: var(--oxblood); }
.bar nav { display: flex; gap: 24px; }
.label, .bar nav a { font: 500 12px/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: 104px 0 80px; }
/* 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: 48px; }
.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(40px, 9vw, 80px); 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: 44px 0 0; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.5; }
.section { padding: 0 0 88px; }
.label { margin: 0 0 18px; }
.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: 26px 28px 30px 0; }
.holdings li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.holdings h3 { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.3; }
.holdings p { margin: 8px 0 14px; font: 400 15px/1.55 var(--sans); color: var(--stone); }
.holdings a { font: 500 14px/1.4 var(--sans); letter-spacing: .02em; }
.contact { margin: 0; font-size: 22px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px 0 40px; border-top: 1px solid var(--rule); font: 400 13px/1.5 var(--sans); color: var(--stone); }
@media (max-width: 720px) {
  .hero { padding: 64px 0 56px; }
  /* 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: 22px 0 24px; border-left: 0; border-bottom: 1px solid var(--rule); }
}
.hero-short { padding: 72px 0 40px; }
.page-title { margin: 0; font: 500 clamp(32px, 6vw, 48px)/1.15 var(--serif); }
.notice, .error { font: 400 15px/1.5 var(--sans); color: var(--oxblood); }
.error { min-height: 1.5em; margin: 0 0 12px; }
.quiz { max-width: 640px; }
.quiz fieldset { border: 0; margin: 0; padding: 0 0 8px; min-width: 0; }
.quiz .step > legend { padding: 0; margin: 0 0 20px; font: 500 26px/1.3 var(--serif); }
.quiz .question { margin: 0 0 24px; }
.quiz .question > legend, .field > label { padding: 0; margin: 0 0 10px; font: 500 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.progress { margin: 0 0 18px; font: 500 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.choices { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); cursor: pointer; font-size: 17px; 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 18px; }
.field input, .field textarea { font: 400 17px/1.5 var(--serif); color: var(--ink); background: transparent; border: 1px solid var(--stone); border-radius: 0; padding: 10px 12px; }
.field input:focus-visible, .field textarea:focus-visible, .choice:focus-within { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.field textarea { min-height: 120px; resize: vertical; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }
.button { font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 15px 22px; 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: 12px 20px; }
  .label, .bar nav a { font-size: 14px; letter-spacing: .14em; }
  .wordmark { font-size: 48px; }
  .lede { font-size: 22px; }
  .holdings h3 { font-size: 24px; }
  .holdings p { margin: 10px 0 16px; font-size: 18px; }
  .holdings a { font-size: 17px; }
  .contact { font-size: 24px; }
  .foot { font-size: 15px; }
  .page-title { font-size: 36px; }
  .quiz .step > legend { font-size: 28px; }
  .quiz .question > legend, .field > label, .progress { font-size: 14px; letter-spacing: .14em; }
  .choice { padding: 14px 16px; font-size: 18px; }
  .field input, .field textarea { padding: 12px 14px; font-size: 18px; }
  .button { padding: 18px 24px; font-size: 15px; }
  .notice, .error { font-size: 17px; }
}
@media (max-width: 389px) {
  .lockup { letter-spacing: .12em; }
}