:root {
  --bg: #0d0c0f;
  --bg-alt: #15131a;
  --panel: rgba(24, 21, 26, 0.78);
  --text: #e8e3dc;
  --muted: #aaa3ad;
  --metal-light: #ded8c2;
  --metal-gold: #c5b58a;
  --metal-mid: #9f8c63;
  --metal-bronze: #6e5d43;
  --metal-dark: #3c342a;
  --line: rgba(197, 181, 138, 0.22);
  --max-width: 1100px;
  --header-height: 64px;
}

@font-face {
  font-family: "UnifrakturCook";
  src: url("../fonts/unifrakturcook-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OldEnglishFive";
  src: url("../fonts/OldEnglishFive.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Georgia, "Times New Roman", serif; line-height: 1.65; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin-top: 0; }

/* Sticky header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-height);
  transform: translateY(-110%); opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(19,17,20,.96), rgba(10,9,11,.90));
  border-bottom: 1px solid rgba(159,140,99,.58);
  box-shadow: 0 8px 28px rgba(0,0,0,.34), inset 0 -1px 0 rgba(222,216,194,.035);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 220ms ease, opacity 220ms ease;
}
.site-header--visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.site-header__inner { width: min(100% - 2rem, 1280px); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; }
.site-header__brand { display: inline-grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid rgba(159,140,99,.70); color: var(--metal-light); background: radial-gradient(circle at 50% 35%, rgba(197,181,138,.13), transparent 62%), rgba(15,13,15,.88); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(222,216,194,.035), 0 2px 10px rgba(0,0,0,.35); }
.site-header__monogram { font-family: "UnifrakturCook", Georgia, serif; font-size: 1.38rem; font-weight: 700; line-height: 1; background: linear-gradient(180deg, #f0ead5 0%, var(--metal-gold) 58%, var(--metal-mid) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 1px rgba(0,0,0,.72)); }
.site-header__nav { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; }
.site-header__links { display: flex; align-items: center; gap: 1.3rem; }
.site-header__links a { position: relative; color: #cbc5bd; font-family: Arial, Helvetica, sans-serif; font-size: .73rem; font-weight: 700; letter-spacing: .10em; text-decoration: none; text-transform: uppercase; transition: color 160ms ease, text-shadow 160ms ease; }
.site-header__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.45rem; height: 1px; background: linear-gradient(90deg, var(--metal-bronze), var(--metal-light)); transition: right 180ms ease; }
.site-header__links a:hover, .site-header__links a:focus-visible { color: var(--metal-light); text-shadow: 0 0 10px rgba(197,181,138,.18); }
.site-header__links a:hover::after, .site-header__links a:focus-visible::after { right: 0; }
.site-header__links--external { padding-left: 1.3rem; border-left: 1px solid rgba(197,181,138,.18); }
.site-header__links--external a { color: var(--metal-gold); }
.site-header__toggle { display: none; width: 42px; height: 42px; margin-left: auto; padding: 9px; border: 1px solid rgba(159,140,99,.55); background: rgba(15,13,15,.82); color: var(--metal-light); cursor: pointer; }
.site-header__toggle span { display: block; height: 1px; margin: 5px 0; background: var(--metal-light); }

/* Hero */
.hero { position: relative; min-height: 88vh; display: grid; place-items: center; overflow: hidden; text-align: center; padding: 5rem 1.5rem; background-image: url("../images/hero.png"); background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,8,12,.30) 0%, rgba(7,8,12,.10) 35%, rgba(7,8,12,.18) 65%, rgba(13,12,15,.92) 100%); }
.hero__content { position: relative; z-index: 1; width: min(100%, 1200px); }
.hero h1 { margin: 0 0 1rem; font-family: "OldEnglishFive", Georgia, serif; font-size: clamp(4.5rem, 11vw, 9.5rem); font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--metal-light); background: linear-gradient(180deg, #f0ead5 0%, var(--metal-light) 22%, var(--metal-gold) 50%, var(--metal-mid) 72%, #d4c69d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(45,38,30,.95)) drop-shadow(0 5px 5px rgba(0,0,0,.78)) drop-shadow(0 0 14px rgba(197,181,138,.15)); }
.tagline { max-width: 720px; margin: 0 auto 2rem; color: #ddd7d0; font-size: clamp(1.1rem, 2vw, 1.5rem); text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.coming-soon { display: inline-block; margin: 0; padding: .7rem 1.2rem; border: 1px solid var(--metal-mid); color: var(--metal-light); background: rgba(12,11,13,.38); font-family: Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(222,216,194,.06), 0 3px 12px rgba(0,0,0,.30); }

h2 { margin-bottom: 1.4rem; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; }
h3 { margin-bottom: .75rem; font-size: 1.35rem; }
.eyebrow { margin-bottom: 1rem; color: var(--metal-gold); font-family: Arial, Helvetica, sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.lead { color: #d5ced8; font-size: 1.25rem; }
.section { padding: 7rem 1.5rem; border-top: 1px solid var(--line); }
.section--intro { background: var(--bg); }
.section--features { background: linear-gradient(180deg, rgba(197,181,138,.025), transparent 30%), var(--bg-alt); }
.section--closing { text-align: center; }
.container { width: min(100%, var(--max-width)); margin: 0 auto; }
.container--narrow { max-width: 760px; }
.metal-divider { width: min(240px, 60vw); height: 1px; margin: 2rem auto; border: 0; background: linear-gradient(90deg, transparent, var(--metal-bronze) 15%, var(--metal-light) 50%, var(--metal-bronze) 85%, transparent); }
.metal-text { color: var(--metal-gold); }
.metal-frame { position: relative; padding: 2rem; border: 1px solid var(--metal-bronze); background: rgba(20,18,21,.72); box-shadow: inset 0 0 0 1px rgba(222,216,194,.05), 0 8px 24px rgba(0,0,0,.24); }
.metal-frame::before, .metal-frame::after { content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none; }
.metal-frame::before { top: -1px; left: -1px; border-top: 2px solid var(--metal-light); border-left: 2px solid var(--metal-light); }
.metal-frame::after { right: -1px; bottom: -1px; border-right: 2px solid var(--metal-light); border-bottom: 2px solid var(--metal-light); }
.button--metal { display: inline-block; padding: .75rem 1.3rem; border: 1px solid var(--metal-mid); color: var(--metal-light); background: linear-gradient(180deg, rgba(197,181,138,.10), rgba(62,52,42,.20)); font-family: Arial, Helvetica, sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.button--metal:hover { border-color: var(--metal-light); transform: translateY(-1px); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; margin-top: 3rem; }
.feature-card { min-height: 190px; padding: 2rem; border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 8px 24px rgba(0,0,0,.16); }
.feature-card h3 { color: var(--metal-gold); }
footer { padding: 2rem 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: .85rem; }
.footer__content { display: flex; justify-content: space-between; gap: 1rem; }
.footer__content p { margin-bottom: 0; }

/* Story beats */
.story-beat { position: relative; padding: 5.5rem 1.5rem; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(197,181,138,.055), transparent 55%), linear-gradient(180deg, rgba(10,9,11,.98), rgba(18,15,18,.98)); border-top: 1px solid rgba(197,181,138,.10); border-bottom: 1px solid rgba(197,181,138,.10); }
.story-beat::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(197,181,138,.025) 50%, transparent 100%); opacity: .9; }
.story-beat::after { content: ""; position: absolute; left: 50%; bottom: 2.4rem; width: min(180px,45vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--metal-bronze) 18%, var(--metal-light) 50%, var(--metal-bronze) 82%, transparent); box-shadow: 0 0 10px rgba(197,181,138,.10); }
.story-beat__inner { position: relative; z-index: 1; width: min(100%,760px); margin: 0 auto; padding: 2.1rem 2.4rem; text-align: center; border-left: 1px solid rgba(197,181,138,.20); border-right: 1px solid rgba(197,181,138,.20); background: linear-gradient(90deg, transparent, rgba(197,181,138,.025) 18%, rgba(255,255,255,.018) 50%, rgba(197,181,138,.025) 82%, transparent); }
.story-beat__inner::before, .story-beat__inner::after { content: ""; position: absolute; left: 50%; width: min(320px,72%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(110,93,67,.65), rgba(222,216,194,.82), rgba(110,93,67,.65), transparent); }
.story-beat__inner::before { top: 0; }
.story-beat__inner::after { bottom: 0; }
.story-beat p { max-width: 680px; margin: 0 auto; color: #d8d1c8; font-size: clamp(1.15rem,2.2vw,1.45rem); font-style: italic; line-height: 1.8; text-shadow: 0 2px 8px rgba(0,0,0,.72); }
.story-beat p::first-letter { color: var(--metal-gold); font-size: 1.35em; font-weight: 700; }

/* Artwork stays static unless desktop motion is enabled in site.js. */
.story-beat--artwork { isolation: isolate; display: grid; align-items: center; min-height: 480px; padding-block: 8rem; }
.story-beat__artwork { position: absolute; z-index: -2; inset: -168px 0; width: 100%; max-width: none; height: calc(100% + 336px); object-fit: cover; object-position: 50% 55%; transform: translate3d(0, var(--story-offset, 0px), 0); pointer-events: none; }
.story-beat--artwork::before { z-index: -1; opacity: 1; background: linear-gradient(180deg, var(--bg) 0%, rgba(13,12,15,.25) 24%, rgba(13,12,15,.25) 76%, var(--bg-alt) 100%); }
.story-beat--artwork .story-beat__inner { background: linear-gradient(90deg, rgba(13,12,15,.65), rgba(13,12,15,.82) 50%, rgba(13,12,15,.65)); }
.story-beat--artwork p { color: var(--text); }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .story-beat__artwork { inset: 0; height: 100%; transform: none; }
}

@media (min-width: 900px) { .hero { background-attachment: fixed; } }
@media (max-width: 900px) {
  .site-header__inner { width: min(100% - 1.2rem, 1280px); }
  .site-header__toggle { display: block; }
  .site-header__nav { position: absolute; top: var(--header-height); left: 0; right: 0; display: grid; gap: 0; max-height: 0; overflow: hidden; background: linear-gradient(180deg, rgba(15,13,16,.98), rgba(9,8,10,.98)); border-bottom: 1px solid rgba(159,140,99,.52); opacity: 0; pointer-events: none; transition: max-height 220ms ease, opacity 180ms ease; }
  .site-header--menu-open .site-header__nav { max-height: 520px; opacity: 1; pointer-events: auto; }
  .site-header__links { display: grid; gap: 0; }
  .site-header__links a { padding: 1rem 1.25rem; border-top: 1px solid rgba(197,181,138,.08); }
  .site-header__links a::after { display: none; }
  .site-header__links--external { padding-left: 0; border-left: 0; border-top: 1px solid rgba(197,181,138,.22); }
}
@media (max-width: 700px) {
  .hero { min-height: 74vh; padding: 4rem 1rem; background-position: 58% center; }
  .hero h1 { font-size: clamp(4rem,18vw,6.5rem); line-height: .9; }
  .section { padding: 5rem 1.25rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .footer__content { flex-direction: column; }
  .story-beat { padding: 4rem 1.1rem; }
  .story-beat__inner { padding: 1.7rem 1.2rem; }
  .story-beat p { font-size: 1.08rem; line-height: 1.72; }
  .story-beat::after { bottom: 1.8rem; }
  .story-beat--artwork { min-height: 420px; padding-block: 5rem; }
  .story-beat__artwork { object-position: 48% 55%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { background-attachment: scroll; }
  .button--metal, .site-header, .site-header__nav, .site-header__links a::after { transition: none; }
}