/* ==========================================================================
   OFWITH HALL
   Aesthetic: Baroque chiaroscuro / illuminated manuscript / candlelit hall.
   Principles: serif type, parchment ground with radial candle glow,
   gold rules, oxblood accents, ornamental dividers, centered composition,
   inscribed-capital headings, drop caps.
   ========================================================================== */

/* Color & token palette -------------------------------------------------- */

:root {
  --parchment:        #f0e3c2;
  --parchment-deep:   #e6d4a5;
  --parchment-edge:   #c9a878;
  --parchment-shadow: #a8865a;
  --ink:              #2a1808;
  --ink-soft:         #4a3520;
  --ink-faded:        #6a5238;
  --gold:             #b8893f;
  --gold-bright:      #d4a85a;
  --oxblood:          #7b2a1e;
  --oxblood-deep:     #5a1d12;
  --candle:           #f4c869;
}

/* Reset & base ----------------------------------------------------------- */

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

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink);
  /* Candle-glow radial: warmer in upper-center, falling off to dim edges */
  background:
    radial-gradient(
      ellipse 90% 70% at 50% 35%,
      var(--parchment) 0%,
      var(--parchment-deep) 55%,
      var(--parchment-edge) 90%,
      var(--parchment-shadow) 100%
    );
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a {
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.center { text-align: center; }

/* Header ----------------------------------------------------------------- */

.site-header {
  padding: 2rem 2rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--gold);
}

.brand {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  border-bottom: none;
}

.brand:hover { color: var(--oxblood); }

.brand-mark {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: 0.18em;
}

.site-nav {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  gap: 2.25rem;
}

.site-nav a {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
}

.site-nav a:hover {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
}

/* Hero ------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: 5rem 2rem 3.5rem;
}

.hero-sub { padding: 3.5rem 2rem 2.5rem; }

.hero-title {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: clamp(3.5rem, 9vw, 6rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.5);
}

.hero-title-sub {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--oxblood);
  margin: 1rem 0 0;
  letter-spacing: 0.02em;
}

/* Ornament dividers ------------------------------------------------------ */

.ornament {
  text-align: center;
  font-size: 1.5rem;
  color: var(--gold);
  margin: 2.5rem 0;
  letter-spacing: 1rem;
  user-select: none;
}

/* Main content area ------------------------------------------------------ */

main { display: block; }

.prose {
  max-width: 38rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.prose p {
  margin: 0 0 1.25rem;
}

.prose p:first-of-type::first-letter {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 3.75rem;
  font-weight: 800;
  float: left;
  line-height: 0.85;
  margin: 0.4rem 0.55rem 0 0;
  color: var(--oxblood);
}

.prose-h2,
h2 {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 1.15rem;
  text-align: center;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin: 3.5rem 0 1.5rem;
}

/* CTA buttons ------------------------------------------------------------ */

.cta {
  display: inline-block;
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 2.25rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  margin-top: 1rem;
}

.cta:hover {
  background: var(--ink);
  color: var(--parchment);
  border-color: var(--ink);
}

/* Latest Dispatch -------------------------------------------------------- */

.dispatch {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto;
  padding: 0 2rem 2rem;
}

.dispatch-body {
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 30rem;
  margin: 0 auto;
}

/* The Cabinet ------------------------------------------------------------ */

.cabinet {
  max-width: 38rem;
  margin: 2rem auto;
  padding: 0 2rem;
  display: grid;
  gap: 2rem;
}

.cabinet-entry {
  border: 1px solid var(--gold);
  background: rgba(255, 250, 230, 0.55);
  padding: 2rem;
  text-align: center;
  position: relative;
}

.cabinet-entry::before,
.cabinet-entry::after {
  content: "❦";
  position: absolute;
  color: var(--gold);
  font-size: 0.9rem;
  top: -0.65rem;
  background: var(--parchment-deep);
  padding: 0 0.5rem;
}

.cabinet-entry::before { left: 1rem; }
.cabinet-entry::after  { right: 1rem; }

.cabinet-entry h3 {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--ink);
}

.cabinet-status {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-faded);
  margin: 0 0 0.75rem;
}

.cabinet-empty {
  text-align: center;
  padding: 3.5rem 2rem;
  border: 1px dashed var(--gold);
  font-style: italic;
  color: var(--ink-faded);
  font-size: 1.15rem;
  line-height: 1.7;
}

/* Game logo image — used as the visual title in both the Cabinet entry
   and the home page's Latest Dispatch announcement. The PNG already has
   parchment background that blends into the page. */

.game-logo {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.cabinet-entry-title {
  margin: 0 0 0.5rem;
}

.cabinet-entry-title a {
  display: block;
  border-bottom: none;
  margin: -1.25rem -1.25rem 0.5rem;
}

.cabinet-entry-title a:hover { opacity: 0.92; }

.dispatch-logo {
  max-width: 28rem;
  margin: 1rem auto 1.25rem;
  text-align: center;
}

.dispatch-logo a {
  display: block;
  border-bottom: none;
}

.dispatch-logo a:hover { opacity: 0.92; }

.cabinet-note {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-faded);
  margin: 1.5rem 0 0;
  line-height: 1.55;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* Cabinet entry with multiple action buttons -------------------------------- */

.cabinet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0 0;
}

.cabinet-actions .cta { margin-top: 0; }

/* Game embed page — Kongregate-style game-first layout ----------------------- */
/* The iframe is the dominant visual element. Title bar is compact above,
   description and links sit below. No ornate hero. */

.game-page {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  box-sizing: border-box;
}

.game-page-header {
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
}

.game-page-title {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  color: var(--ink);
}

.game-page-meta {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin: 0;
}

.game-page-meta a {
  color: var(--ink-soft);
}

/* Native game resolution is 1200×720 (5:3).  Padding-bottom 60% locks the
   wrapper to that aspect ratio at any width.  Background is black to match
   the game's own dark frame, so any letterboxing inside the iframe is
   invisible rather than showing parchment around the canvas. */
.game-frame-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 60%;
  height: 0;
  background: #000;
  border: 1px solid var(--ink);
  box-sizing: border-box;
}

.game-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.game-frame-mobile-notice {
  display: none;
  max-width: 38rem;
  margin: 2rem auto;
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .game-frame-wrapper { display: none; }
  .game-frame-mobile-notice { display: block; }
}

.game-page-info {
  max-width: 42rem;
  margin: 2rem auto 0;
  text-align: center;
}

.game-page-desc {
  font-size: 1.15rem;
  margin: 0 0 1rem;
}

.game-note {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 34rem;
  margin: 0.75rem auto 1.5rem;
}

.game-page-links {
  margin-top: 1.5rem;
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

.site-footer {
  margin-top: 6rem;
  padding: 2.5rem 2rem;
  border-top: 1px solid var(--gold);
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-faded);
}

.site-footer p { margin: 0; }

.site-footer strong {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}