/* The Thucydides Atlas: the app's own register. A dark ground the map can sit on, Thucydides in
   white EB Garamond, system words in Inter, terracotta and verdigris from the style guide.
   Both faces are SIL Open Font License, self-hosted (EB Garamond carries its polytonic Greek). */
@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ground: #0B0E10;
  --raised: #12171A;
  --line: #2A3237;
  --text: #F2EDE3;
  --muted: #A8A397;
  --terracotta: #D07A4F;
  --verdigris: #7DB3A4;
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --gutter: 40px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--serif); font-size: 20px; line-height: 1.5; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--terracotta); }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- the hero: the map, the title standing on it ---- */
.hero { position: relative; min-height: min(92vh, 900px); display: flex; flex-direction: column; overflow: hidden; background: #06090B; }
.hero .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(6, 9, 11, 0.72) 0, rgba(6, 9, 11, 0) 22%),
    linear-gradient(to top, var(--ground) 0, rgba(11, 14, 16, 0.86) 22%, rgba(11, 14, 16, 0.15) 62%, rgba(11, 14, 16, 0) 100%);
}
.bar { position: relative; width: 100%; padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; font-family: var(--sans); font-size: 15px; }
.bar .home { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; }
.bar .home img { width: 40px; height: 40px; border-radius: 10px; }
.bar .links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.bar .links a { text-decoration: none; padding: 10px 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.title { position: relative; width: 100%; margin-top: auto; padding-top: 120px; padding-bottom: 72px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.title .the { font-family: var(--sans); font-weight: 500; font-size: clamp(14px, 1.5vw, 20px); letter-spacing: 0.42em; text-transform: uppercase; margin-bottom: 6px; padding-left: 0.2em; }
.title h1 { font-size: clamp(54px, 10.4vw, 148px); line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase; }
.title h1 .atlas { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.36em; letter-spacing: 0.56em; margin-top: 0.42em; padding-left: 0.1em; }
.title .line { margin-top: 34px; max-width: 26em; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.3; font-style: italic; }
.title .soon { margin-top: 22px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); text-shadow: none; }

/* ---- the opening words ---- */
.opening { padding-top: 88px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
blockquote { margin: 0; padding-left: 28px; border-left: 2px solid var(--terracotta); }
blockquote .greek { font-size: 22px; color: var(--muted); }
blockquote .english { margin-top: 16px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.32; }
blockquote footer { margin-top: 18px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.about { display: flex; flex-direction: column; gap: 18px; color: #D9D3C7; }

/* ---- the five parts ---- */
.features { padding-bottom: 40px; }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; padding: 64px 0; border-top: 1px solid var(--line); }
.feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip .text { order: 2; }
.feature .num { font-size: 22px; letter-spacing: 0.12em; color: var(--terracotta); margin-bottom: 10px; }
.feature h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; margin-bottom: 18px; text-wrap: balance; }
.feature .text p:not(.num) { color: #D9D3C7; max-width: 30em; }
.shot { margin: 0; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--raised); border: 1px solid var(--line); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
/* A frame waiting for its screenshot: remove the class `todo` and put an <img> inside. */
.shot.todo { display: grid; place-items: center; border-style: dashed; border-color: #46525A; text-align: center; padding: 24px; }
.shot.todo span { font-family: var(--sans); font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ---- the plain facts ---- */
.plain { background: var(--raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts { padding-top: 64px; padding-bottom: 68px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 56px; }
.facts h3 { font-size: 26px; margin-bottom: 8px; }
.facts p { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---- platforms and credits ---- */
.platforms { padding-top: 88px; padding-bottom: 40px; }
.platforms h2, .credits h2 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 22px; }
.platforms ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; }
.platforms li { padding: 22px 0 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.platforms strong { font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; }
.platforms li span { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.note { margin-top: 26px; font-family: var(--sans); font-size: 15px; color: var(--muted); }
.credits { padding-top: 56px; padding-bottom: 88px; }
.credits dl { margin: 0; border-bottom: 1px solid var(--line); }
.credits dl div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.credits dt { font-family: var(--sans); font-size: 14px; color: var(--muted); padding-top: 5px; }
.credits dd { margin: 0; }

/* ---- the foot ---- */
.foot { padding-top: 32px; padding-bottom: 48px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 32px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.foot span { margin-left: auto; }

/* ---- the privacy page ---- */
.page { max-width: 44rem; margin: 0 auto; padding: 28px var(--gutter) 96px; }
.page .eyebrow { font-family: var(--sans); font-size: 14px; display: flex; align-items: center; gap: 12px; }
.page .eyebrow img { width: 32px; height: 32px; border-radius: 8px; }
.page .eyebrow a { text-decoration: none; }
.page h1 { font-size: clamp(40px, 6vw, 60px); line-height: 1.05; margin-top: 56px; }
.page .date { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 10px 0 34px; }
.page .lede { font-size: 24px; line-height: 1.38; }
.page h2 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); margin: 44px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.page p, .page ul { margin: 0 0 16px; color: #D9D3C7; }
.page ul { padding-left: 1.2em; }
.page li { margin-bottom: 6px; }

@media (max-width: 860px) {
  :root { --gutter: 22px; }
  body { font-size: 19px; }
  .hero { min-height: 78vh; }
  .title { padding-bottom: 48px; }
  .opening { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 56px; padding-bottom: 64px; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 48px 0; }
  .feature.flip .text { order: 0; }
  .facts, .platforms ul { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .platforms ul { gap: 0; }
  .credits dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .foot span { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }