/* Layout: an Admiralty sea chart in Empire style. Night-blue chart paper with rhumb lines, gilt rules and Roman capitals, the eight volumes hung as framed paintings in a gallery, the Emperor's adversaries listed like a naval roll. */
@font-face { font-family: "Cinzel"; font-weight: 500; font-display: swap; src: url(../fonts/cinzel-latin-500-normal.woff2) format("woff2") }
@font-face { font-family: "Cinzel"; font-weight: 700; font-display: swap; src: url(../fonts/cinzel-latin-700-normal.woff2) format("woff2") }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-latin-400-normal.woff2) format("woff2") }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/eb-garamond-latin-400-italic.woff2) format("woff2") }
@font-face { font-family: "EB Garamond"; font-weight: 600; font-display: swap; src: url(../fonts/eb-garamond-latin-600-normal.woff2) format("woff2") }
@font-face { font-family: "Fell SC"; font-weight: 400; font-display: swap; src: url(../fonts/im-fell-english-sc-latin-400-normal.woff2) format("woff2") }

:root {
  /* one fixed look on purpose: night-blue chart, gilt, parchment, Imperial red */
  --night: #111a2b;
  --deep: #0b1220;
  --sea: #1a2740;
  --gilt: #c8a24e;
  --gilt-hi: #e2c272;
  --parch: #efe5cc;
  --mute: #a7a99f;
  --red: #9e2b25;
  --mustard: #c8a24e;
  --bone: #efe5cc;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --cond: "Cinzel", Georgia, serif;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --type: "Fell SC", "EB Garamond", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } * { transition: none !important } }
body { margin: 0; background: var(--night); color: var(--parch); font: 400 21px/1.6 var(--serif); -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: inherit }
p { margin: 0 }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: .04em; text-wrap: balance }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)) }
.label { font: 400 17px/1.3 var(--type); letter-spacing: .06em }
.rule { display: flex; align-items: center; gap: 14px; color: var(--gilt) }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gilt), transparent) }
:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 3px }

.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 10px 28px; font: 700 15px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--deep); background: linear-gradient(180deg, var(--gilt-hi), var(--gilt)); border: 1px solid var(--gilt-hi); box-shadow: inset 0 0 0 3px var(--gilt-hi), inset 0 0 0 4px rgba(11,18,32,.35); transition: filter .15s }
.btn:hover { filter: brightness(1.08) }
.btn.ghost { background: transparent; color: var(--gilt-hi); box-shadow: inset 0 0 0 3px var(--night), inset 0 0 0 4px rgba(200,162,78,.5) }

body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--deep) }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: rgba(11,18,32,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(200,162,78,.35) }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 11px }
.mark { display: grid; text-decoration: none; line-height: 1.1 }
.mark b { font: 700 19px/1.1 var(--display); letter-spacing: .1em; color: var(--gilt-hi) }
.mark small { font: 400 14px/1.2 var(--type); color: var(--mute) }
.bar .btn { min-height: 40px; font-size: 12px; padding: 8px 16px; white-space: nowrap }

.hero { padding-block: 72px 84px; background: url(../covers/rhumb.svg) center / cover no-repeat, radial-gradient(ellipse 70% 70% at 70% 40%, var(--sea), var(--night)) }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 60px; align-items: center }
.hero-copy { display: grid; gap: 24px; justify-items: start; min-width: 0 }
.hero .label { color: var(--gilt) }
.hero h1 { font-size: clamp(38px, 5.4vw, 70px); color: var(--parch) }
.hero h1 span { display: block; color: var(--gilt-hi) }
.lede { font-size: 23px; color: #ddd5bf; max-width: 50ch }
.lede em { color: var(--parch) }
.ctas { display: flex; flex-wrap: wrap; gap: 16px }
.note { font: 400 16px/1.4 var(--type); color: var(--mute) }
.frame { justify-self: center; width: min(360px, 100%); padding: 14px; background: linear-gradient(135deg, #8a6a2a, var(--gilt-hi) 30%, #7a5a22 55%, var(--gilt) 80%, #6a4c1c); box-shadow: 0 34px 70px -24px #000 }
.frame img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; outline: 3px solid var(--deep) }

/* question band */
.what { background: var(--parch); color: var(--deep); padding-block: 54px 58px; text-align: center }
.what .wrap { display: grid; gap: 18px; justify-items: center }
.what .rule { color: var(--red); width: min(520px, 100%); font: 400 18px/1 var(--type) }
.what .rule::before, .what .rule::after { background: linear-gradient(90deg, transparent, var(--red), transparent) }
.what h2 { font-size: clamp(28px, 3.6vw, 42px); max-width: 26ch }
.what p { max-width: 62ch; color: #3a3a40; font-size: 21px }

/* gallery */
.gallery { padding-block: 80px 70px; background: url(../covers/rhumb.svg) center / cover no-repeat, var(--night) }
.gallery-head { display: grid; gap: 12px; justify-items: center; text-align: center; margin-bottom: 48px }
.gallery-head .rule { width: min(560px, 100%) }
.gallery-head h2 { font-size: clamp(32px, 4.4vw, 52px) }
.gallery-head p { color: var(--mute); max-width: 60ch }
.vols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 30px }
.vol { display: grid; gap: 14px; align-content: start; min-width: 0 }
.vol .frame { width: 100%; padding: 9px }
.plate { justify-self: center; font: 400 15px/1 var(--type); color: var(--deep); background: linear-gradient(180deg, var(--gilt-hi), var(--gilt)); padding: 6px 14px; margin-top: -6px }
.vol h3 { font-size: 21px; text-align: center; color: var(--gilt-hi) }
.where { text-align: center; color: var(--mute); font: 400 16px/1.3 var(--type) }
.hook { text-align: center; font-style: italic; color: var(--parch); font-size: 19px; line-height: 1.4 }
.vol p.sum { font-size: 17px; line-height: 1.55; color: #c9c3b2 }
.gallery-cta { display: flex; justify-content: center; margin-top: 60px }

/* adversaries */
.roll { background: var(--deep); border-top: 1px solid rgba(200,162,78,.35); padding-block: 70px }
.roll-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start }
.roll h2 { font-size: clamp(30px, 4vw, 46px) }
.roll-intro { display: grid; gap: 14px }
.roll-intro .label { color: var(--gilt) }
.roll-intro p:not(.label) { color: var(--mute) }
.names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px }
.names li { padding-block: 16px; border-bottom: 1px solid rgba(200,162,78,.25); display: grid; gap: 2px }
.names b { font: 700 18px/1.2 var(--display); letter-spacing: .06em; color: var(--parch) }
.names span { font-size: 17px; color: var(--mute); line-height: 1.4 }
.names i { font: 400 15px/1 var(--type); font-style: normal; color: var(--gilt) }

.final { padding-block: 86px; text-align: center; background: url(../covers/rhumb.svg) center / cover no-repeat, radial-gradient(ellipse 60% 80% at 50% 110%, rgba(158,43,37,.35), transparent 70%), var(--night) }
.final .wrap { display: grid; gap: 22px; justify-items: center }
.final .rule { width: min(420px, 100%); font: 400 18px/1 var(--type) }
.final h2 { font-size: clamp(34px, 5.4vw, 66px); max-width: 18ch }
.final p { color: #ddd5bf; max-width: 50ch }
footer { border-top: 1px solid rgba(200,162,78,.35); background: var(--deep) }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px; font: 400 16px/1.4 var(--type); color: var(--mute) }
footer nav { display: flex; gap: 20px }
footer a { text-decoration: none }
footer a:hover { color: var(--gilt-hi) }

@media (max-width: 980px) { .vols { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 860px) {
  .hero-grid, .roll-grid { grid-template-columns: minmax(0, 1fr) }
  .hero .frame { width: min(300px, 80%) }
}
@media (max-width: 560px) {
  .names { grid-template-columns: minmax(0, 1fr) }
  .vols { gap: 40px 16px }
  .vol h3 { font-size: 17px }
  .vol p.sum { display: none }
  .hook { font-size: 17px }
  .mark small { display: none }
  .mark b { font-size: 15px }
  .hero { padding-block: 40px 56px }
}

:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
[hidden] { display: none !important }
.legal { padding-block: 56px 72px }
.legal .wrap { max-width: 780px; display: grid; gap: 16px }
.legal h1 { font-size: clamp(44px, 6vw, 68px) }
.legal h2 { font-size: 28px; margin-top: 14px; color: var(--mustard) }
.legal p { color: #ddd5bf }
.legal strong { color: var(--bone) }
.mail { user-select: all; color: var(--mustard); font-family: var(--type); font-size: 16px }