/* 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;
}

@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);
}

.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;
  }
}