/* Self-hosted site fonts. Cinzel and Baskervville are variable weight fonts;
   their axes are declared as ranges so the browser interpolates instead of
   synthetically bolding. Ragnar SC is a single upright weight. Paths are
   relative to this stylesheet so ManifestStaticFilesStorage rewrites them to
   the hashed asset URLs in production. */
@font-face {
  font-family: "Baskervville";
  src: url("../fonts/baskervville-variable.382b6787fb55.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* Real Baskervville Italic (static 400, v1.100 like the upright face) so
   italic text stops being a synthetic slant of the roman. These are Google
   Fonts' latin-ext and latin subsets, split by unicode-range so a page only
   downloads what it renders. Copyright 2018 The Baskervville Project Authors
   (https://github.com/anrt-type/ANRT-Baskervville), SIL Open Font License
   1.1 (https://openfontlicense.org). Bold italic is still synthesized. */
@font-face {
  font-family: "Baskervville";
  src: url("../fonts/baskervville-italic-latin-ext.4efb77b6d00d.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Baskervville";
  src: url("../fonts/baskervville-italic-latin.ca2bae381f51.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-variable.7a5ca9201524.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Baskervville SC";
  src: url("../fonts/baskervville-sc-variable.6a2e26d67aaa.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Ragnar SC";
  src: url("../fonts/ragnar-sc-regular.a4eb263da707.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --site-bg: #050812;
  --site-bg-raised: rgba(10, 15, 26, 0.86);
  --site-bg-panel: rgba(12, 18, 30, 0.76);
  --site-border: rgba(213, 177, 101, 0.26);
  --site-border-strong: rgba(235, 199, 119, 0.54);

  --site-text: #f6ead0;
  --site-text-muted: rgba(241, 228, 198, 0.74);
  --site-text-soft: rgba(241, 228, 198, 0.58);
  --site-gold: #e8c46f;
  --site-gold-strong: #fff0bc;
  --site-blue: #9fc8e8;

  /* Baskervville SC is the title face. Its weight axis stops at 700, so the
     two rules that set title type heavier are pinned to 700 rather than
     relying on the browser to clamp them silently. Cinzel stays in the
     stack as the fallback and is still self-hosted. */
  --site-font-title: "Baskervville SC", Cinzel, Georgia, serif;
  --site-font-body: Baskervville, Georgia, serif;

  --site-radius-sm: 6px;
  --site-radius-md: 8px;
  --site-radius-lg: 12px;
  --site-radius-pill: 999px;

  --site-shadow-soft: 0 18px 42px rgba(0, 0, 0, 0.28);
  --site-shadow-menu: 0 22px 54px rgba(0, 0, 0, 0.44);
  --site-shell-width: 1680px;
  --site-content-width: 1420px;
  --site-page-gutter: clamp(1rem, 4vw, 4.5rem);
}

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

html {
  min-height: 100%;
  background: var(--site-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--site-text);
  background: var(--site-bg);
  font-family: var(--site-font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid rgba(245, 210, 128, 0.88);
  outline-offset: 3px;
}

::selection {
  color: #071125;
  background: rgba(245, 210, 128, 0.86);
}

.site-kicker {
  margin: 0;
  color: var(--site-gold);
  font-family: var(--site-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-panel {
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 236, 176, 0.055), rgba(0, 0, 0, 0.08)),
    var(--site-bg-panel);
  box-shadow: var(--site-shadow-soft);
}

.site-page-band {
  width: min(var(--site-content-width), calc(100% - (var(--site-page-gutter) * 2)));
  margin-inline: auto;
}

.site-section-title {
  position: relative;
  margin: 0;
  color: #f3d99f;
  font-family: var(--site-font-title);
  font-size: clamp(1.45rem, 2.7vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.48);
}

.site-section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.56rem;
  width: min(100%, 230px);
  height: 7px;
  background: url("../assets/optimized/images/homepage/Header_Underline.5df0d77f55da.webp") center / 100% 100% no-repeat;
  opacity: 0.78;
  transform: translateX(-50%);
}

.site-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.95rem, 1.7vw, 1.25rem);
}

.site-card {
  color: inherit;
  text-decoration: none;
}

.site-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.56rem;
  min-height: 2.55rem;
  padding: 0.62rem 0.95rem;
  border: 1px solid rgba(226, 184, 94, 0.48);
  border-radius: var(--site-radius-sm);
  color: #fff2c8;
  background:
    linear-gradient(180deg, rgba(255, 231, 158, 0.07), rgba(0, 0, 0, 0.16)),
    rgba(6, 14, 27, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 176, 0.04),
    0 14px 30px rgba(0, 0, 0, 0.28);
  font-family: var(--site-font-body);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.site-action-link:hover,
.site-action-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 220, 130, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 226, 142, 0.16), rgba(80, 48, 12, 0.16)),
    rgba(15, 22, 32, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 176, 0.08),
    0 0 24px rgba(225, 173, 76, 0.18);
}

/* Canonical DS Button variants (design-system/components/core/Button.jsx).
   As in the canonical component, hover lifts and glows but keeps the
   variant's own fill. */
.site-action-link--primary,
.site-action-link--primary:hover,
.site-action-link--primary:focus-visible {
  background:
    linear-gradient(180deg, rgba(224, 177, 76, 0.74), rgba(124, 72, 21, 0.78)),
    #45270d;
}

.site-action-link--primary {
  border-color: rgba(255, 205, 101, 0.82);
}

.site-action-link--ghost,
.site-action-link--ghost:hover,
.site-action-link--ghost:focus-visible {
  background: transparent;
}

.site-action-link--ghost {
  border-color: rgba(207, 170, 82, 0.34);
  color: rgba(244, 229, 184, 0.84);
  box-shadow: none;
}

.site-action-link--lg {
  min-height: 3.15rem;
  padding: 0.72rem 1.2rem;
  font-size: 0.86rem;
}

.site-status-pill {
  display: inline-flex;
  width: max-content;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.26rem 0.68rem;
  border: 1px solid rgba(255, 226, 144, 0.44);
  border-radius: 5px;
  color: #100d06;
  background: linear-gradient(180deg, #f3d27e, #b67a2c);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .site-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .site-page-band {
    width: calc(100% - 2rem);
  }

  .site-card-grid {
    grid-template-columns: 1fr;
  }
}