/* Where the Raven Flies: the look is taken from the game itself.
   Colours: Raven.Unity/Assets/Scripts/Screens/Ui.cs, Palette (exact values).
   Shapes:  Ui.PanelBox = dark brown glass at 0.86, an 8-unit radius, a 1.5-unit gold hairline (PanelEdge), a faint
            warm gloss over the top 90 units and a shadow 6 units down. ButtonLook.Royal = wax red, top to bottom
            (0.725, 0.17, 0.153) to (0.53, 0.098, 0.086), a 2-unit gold border and cream lettering. ButtonLook.Secondary
            = dark brown, top to bottom (0.19, 0.14, 0.10) to (0.11, 0.08, 0.055), a brown border. Pill = the title's
            "TAP TO BEGIN": Palette.Button, fully round, with the gold hairline. Focus = Ui.FocusRing, amber.
   Title:   GameFlow.Screens.cs DrawTitle: Cinzel Black, "WHERE THE" and "FLIES" cream and spaced half a letter
            apart, "RAVEN" gold on a dark brown ledge 3 units below, the tagline in Spectral Italic.
   Fonts:   the game's own, Cinzel (Bold, Black) and Spectral (Regular, Italic), SIL OFL 1.1, served from /fonts/.
   No script anywhere on the site, and no style="" attributes, so the server's strict policy needs no exceptions. */

@font-face { font-family: "Cinzel"; src: url("/fonts/Cinzel-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/Cinzel-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/fonts/Spectral-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/fonts/Spectral-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Palette (Ui.cs) */
  --panel: rgba(26, 19, 13, 0.86);       /* Panel (0.10, 0.075, 0.05, 0.86) */
  --edge: rgba(179, 134, 40, 0.95);      /* PanelEdge #b38628 */
  --cream: #f4e7c4;
  --parch: #d8c9a0;
  --muted: #cdb88a;
  --body: #ebdfc6;                       /* Body (0.92, 0.875, 0.776) */
  --gold: #f0c75e;
  --amber: #f59e0b;
  --yellow: #fef08a;
  --wax: #a8352b;
  --wax-dark: #7a211a;
  --button: rgba(38, 26, 16, 0.9);       /* Button rgba(38, 26, 16) */
  --ink: #12141a;                        /* Ink (0.07, 0.08, 0.10) */
  --night: #0a0b0f;                      /* the title vignette (0.03, 0.04, 0.06) */

  /* Title lockup (DrawTitle) */
  --title-cream: #f6e7b4;                /* (0.965, 0.906, 0.706) */
  --title-ledge: #5b3d0f;                /* (0.357, 0.24, 0.06) */
  --title-tag: #f0e4c2;                  /* (0.94, 0.894, 0.76) */

  /* Buttons (Ui.cs ButtonLook) */
  --royal-top: #b92b27;
  --royal-bottom: #871916;
  --royal-edge: #d1a23a;                 /* (0.82, 0.635, 0.227) */
  --royal-text: #fff2d1;                 /* (1, 0.95, 0.82) */
  --second-top: #30241a;
  --second-bottom: #1c140e;
  --second-edge: rgba(133, 107, 71, 0.9);/* (0.52, 0.42, 0.28, 0.9) */
  --second-text: #ede3cc;                /* (0.93, 0.89, 0.80) */
  --rule: rgba(168, 148, 115, 0.35);     /* the dim card border (0.66, 0.58, 0.45) */

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif: "Spectral", Georgia, "Times New Roman", serif;

  --radius: 8px;
  --wrap: 1120px;
  --gutter: 16px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--body);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--cream); }

:focus-visible {
  outline: 2.5px solid var(--amber);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.3);
}

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--panel); border: 1.5px solid var(--edge); color: var(--gold);
  font-family: var(--display); font-weight: 700; text-decoration: none;
}
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */

h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.15; margin: 0; }

/* Panel headings: Ui.H1, Cinzel Black in cream, with Ui.Sub (Spectral Italic) under it. */
.box-title {
  color: var(--cream);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: 0.03em;
  margin-bottom: 2px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.box-hint { color: var(--muted); font-style: italic; margin: 0 0 18px; }

.small { font-size: 0.9rem; }
.dim { color: var(--muted); }
.gold { color: var(--gold); }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* ---------- Title screen ---------- */

.title-screen {
  position: relative;
  isolation: isolate;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  padding: 56px 0 56px;
  overflow: hidden;
  border-bottom: 1.5px solid var(--edge);
  background-color: var(--night);
}

/* A real frame of the game behind the title, as the game flies a dusk road behind its own. */
.title-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/img/hero.jpg") center 60% / cover no-repeat;
}

/* The title's vignette, Icons.Vignette at (0.03, 0.04, 0.06, 0.55), darker behind the words. */
.title-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(8, 10, 15, 0.62) 0%, rgba(8, 10, 15, 0.45) 45%, rgba(8, 10, 15, 0.7) 100%),
    linear-gradient(to bottom, rgba(10, 11, 15, 0) 72%, var(--night) 100%);
}

.title-in { text-align: center; }

.crest { width: clamp(70px, 9vw, 112px); height: auto; margin: 0 auto 10px; display: block;
  filter: drop-shadow(0 0 18px rgba(240, 199, 94, 0.35)); }

.lockup { margin: 0; font-family: var(--display); font-weight: 900; line-height: 1.15; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75); }
.lockup span { display: block; }

.lockup .where,
.lockup .flies {
  color: var(--title-cream);
  font-size: clamp(1.05rem, 3.4vw, 2.2rem);
  letter-spacing: 0.5em;
  margin-right: -0.5em; /* the last letter's spacing, so the line stays centred */
  line-height: 1.2;
}

.lockup .raven {
  color: var(--gold);
  font-size: clamp(3.4rem, 13vw, 8.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 0 var(--title-ledge), 0 5px 10px rgba(0, 0, 0, 0.75);
}

.tagline {
  color: var(--title-tag);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  margin: 14px 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.studio-line {
  color: var(--parch);
  font-size: 0.95rem;
  margin: 6px 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.title-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 420px);
  justify-content: center;
  gap: 28px;
  margin-top: 36px;
  text-align: left;
}

.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* ---------- Panels and buttons (Ui.cs) ---------- */

.box {
  position: relative;
  background:
    linear-gradient(to bottom, rgba(255, 217, 153, 0.06), rgba(255, 217, 153, 0) 90px),
    var(--panel);
  border: 1.5px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 2px 6px 0 rgba(0, 0, 0, 0.35);
  padding: 22px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 18px;
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  color: var(--second-text);
  background: linear-gradient(to bottom, var(--second-top), var(--second-bottom));
  border: 1.5px solid var(--second-edge);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  transition: filter 80ms linear, border-color 80ms linear;
}

.btn:hover { filter: brightness(1.3); color: var(--second-text); }

.btn.royal {
  color: var(--royal-text);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 50%),
    linear-gradient(to bottom, var(--royal-top), var(--royal-bottom));
  border: 2px solid var(--royal-edge);
}
.btn.royal:hover { filter: brightness(1.12); color: var(--royal-text); }
.btn:active { transform: translateY(1px); filter: brightness(0.85); }

/* The title's prompt pill. */
.pill {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--button);
  border: 1px solid var(--edge);
  color: var(--cream);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
}

/* The status note beside the menu. */
.status .pill { margin-bottom: 12px; }
.status .box-title { font-size: 1.3rem; }
.status ul { margin: 12px 0 0; padding: 0; list-style: none; }
.status li { padding: 7px 0; border-top: 1px solid var(--rule); color: var(--cream); }
.status li span { color: var(--muted); }

/* ---------- Sections ---------- */

main { padding: 40px 0 24px; }

.section { margin: 0 0 32px; scroll-margin-top: 16px; }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }

.facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px;
}
.facts.one { grid-template-columns: minmax(0, 1fr); }

.facts li { padding-left: 22px; position: relative; }

/* A small gold feather mark, after the HUD's quill (Icons.Feather). */
.facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.38em;
  width: 9px;
  height: 14px;
  background: var(--gold);
  clip-path: path("M4.5 0 Q9 5 4.5 14 Q0 5 4.5 0 Z");
}

.facts strong { color: var(--cream); font-weight: 400; font-family: var(--display); font-size: 0.95em; letter-spacing: 0.02em; }

/* ---------- Pictures ---------- */

.shot {
  margin: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1.5px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 2px 6px 0 rgba(0, 0, 0, 0.35);
}

.shot img, .shot video { width: 100%; background: #000; }

.shot figcaption {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  color: var(--muted);
}

.shot figcaption b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
  font-size: 0.95rem;
}

.gallery { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gallery .wide { grid-column: 1 / -1; }

.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }

/* Trailer: the wide cut beside the phone cut. */
.trailer { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.notice {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 14px;
  margin: 18px 0 0;
}

/* Platforms, as the map's stop cards (Ui.cs Card: lit = gold border). */
.platforms {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}

.platforms li {
  background: rgba(41, 29, 19, 0.88);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.platforms .pname { display: block; font-family: var(--display); font-weight: 900; color: var(--cream); font-size: 1.2rem; }
.platforms .pstate { display: block; font-size: 0.95rem; color: var(--gold); }
.platforms .pnote { display: block; font-size: 0.88rem; color: var(--muted); }

.table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.table th, .table td { text-align: left; vertical-align: top; padding: 9px 14px 9px 0; border-top: 1px solid var(--rule); }
.table th { font-family: var(--display); font-weight: 700; color: var(--cream); white-space: nowrap; font-size: 0.95rem; }
.table td { color: var(--body); }
.table caption {
  text-align: left; color: var(--muted); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.08em; padding-bottom: 6px; font-family: var(--display);
}

/* Studio */
.hallmarks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 18px; }
.hallmarks figure { margin: 0; border: 1.5px solid var(--edge); border-radius: var(--radius); overflow: hidden; background: #000; }
.hallmarks figcaption { padding: 8px 12px; border-top: 1px solid var(--rule); font-family: var(--display); font-weight: 700; color: var(--cream); background: var(--panel); }

/* Draft banner on the legal pages. */
.draft .pill { background: var(--wax-dark); border-color: var(--royal-edge); color: var(--royal-text); }
.tbd { color: var(--amber); }

/* ---------- Footer ---------- */

.footer {
  border-top: 1.5px solid var(--edge);
  background: #120d09;
  padding: 22px 0 28px;
  color: var(--muted);
  font-size: 0.92rem;
}
.footer p { margin: 0 0 6px; }
.footer .name { font-family: var(--display); font-weight: 900; color: var(--gold); letter-spacing: 0.06em; }

/* ---------- Not found ---------- */

.lost { min-height: 100vh; display: flex; align-items: center; padding: 40px 0; }
.lost .box { max-width: 560px; margin: 0 auto; text-align: center; }
.lost .btn { margin-top: 18px; }

/* ---------- Plain pages (privacy, terms) ---------- */

.page-head { padding: 40px 0 0; text-align: center; }
.page-head a { text-decoration: none; }
.page-head .lockup .raven { font-size: clamp(2.4rem, 8vw, 3.6rem); }
.page-head .lockup .where, .page-head .lockup .flies { font-size: clamp(0.8rem, 2.2vw, 1.05rem); }

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  .title-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trailer { grid-template-columns: minmax(0, 1fr); }
  .trailer .shot.tall { max-width: 380px; width: 100%; margin: 0 auto; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .two, .facts, .gallery, .hallmarks { grid-template-columns: minmax(0, 1fr); }
  .phones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .phones figcaption { font-size: 0.8rem; padding: 8px; }
  .title-screen { min-height: 0; padding: 44px 0 40px; }
  .box { padding: 16px; }
  .btn { min-height: 48px; font-size: 1rem; }
  .table th { white-space: normal; }
}

@media (max-width: 460px) {
  .platforms { grid-template-columns: minmax(0, 1fr); }
  .phones { grid-template-columns: minmax(0, 1fr); max-width: 300px; margin: 0 auto; }
  .table, .table tbody, .table tr, .table th, .table td { display: block; }
  .table tr { border-top: 1px solid var(--rule); padding: 8px 0; }
  .table th, .table td { border: 0; padding: 0; }
}

.spaced { margin-top: 20px; }
.facts + p { margin-top: 18px; }