:root {
  --ink: #0a0a09;
  --panel: #11110f;
  --paper: #eeeae0;
  --muted: #aaa69d;
  --gold: #d4b66b;
  --line: rgba(238, 234, 224, 0.13);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

.site-header {
  position: absolute; z-index: 2; top: 0; left: 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px clamp(24px, 5vw, 80px); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-star { color: var(--gold); font-size: 17px; line-height: 1; }
.header-link { border-bottom: 1px solid rgba(212, 182, 107, .75); padding-bottom: 5px; transition: color .2s; }
.header-link:hover { color: var(--gold); }

.hero {
  min-height: min(800px, 100svh); position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; padding: 130px 24px 86px;
  background: radial-gradient(circle at 50% 52%, #26231d 0%, #11110f 35%, #080808 72%);
}
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero::before { width: min(85vw, 900px); aspect-ratio: 1; border: 1px solid rgba(212, 182, 107, .16); border-radius: 50%; box-shadow: 0 0 0 45px rgba(212, 182, 107, .025), 0 0 0 125px rgba(212, 182, 107, .02); }
.hero::after { inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle, black, transparent 72%); }
.hero-glow { position: absolute; z-index: -1; width: 45vw; aspect-ratio: 1; border-radius: 50%; background: #d4b66b; filter: blur(130px); opacity: .08; }
.hero-content { max-width: 780px; text-align: center; }
.eyebrow { margin: 0 0 20px; color: #cfcbc1; font-size: 10px; font-weight: 700; letter-spacing: .21em; line-height: 1.5; text-transform: uppercase; }
.gold { color: var(--gold); }
.hero-wordmark { display: block; width: min(530px, 86vw); height: auto; margin: 0 auto -49px; mix-blend-mode: screen; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.03em; }
h1 { margin-bottom: 20px; font-size: clamp(51px, 7vw, 90px); line-height: .86; }
em { color: var(--gold); font-weight: 500; }
.hero-copy { max-width: 510px; margin: 0 auto 30px; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.8; }
.button { display: inline-flex; gap: 18px; align-items: center; justify-content: center; padding: 15px 21px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--gold); color: var(--ink); }
.button-primary:hover { background: #e9cd86; }
.scroll-prompt { position: absolute; bottom: 30px; display: flex; gap: 9px; align-items: center; color: #79766f; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; }
.scroll-prompt span { display: block; height: 30px; border-left: 1px solid var(--gold); }

.section { padding: 128px clamp(24px, 10vw, 160px); }
.section-label { color: #77736a; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.statement { background: #0c0c0b; border-top: 1px solid var(--line); }
.statement-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(300px, 1fr); align-items: center; gap: clamp(55px, 11vw, 175px); max-width: 1100px; margin: 44px auto 0; }
.crest-wrap { position: relative; display: grid; place-items: center; }
.crest-wrap img { position: relative; width: min(100%, 350px); border-radius: 50%; mix-blend-mode: screen; filter: contrast(1.06); }
.crest-halo { position: absolute; width: 90%; aspect-ratio: 1; border: 1px solid rgba(212,182,107,.28); border-radius: 50%; box-shadow: 0 0 70px rgba(212,182,107,.12); }
h2 { margin-bottom: 23px; font-size: clamp(47px, 5.2vw, 70px); line-height: .89; }
.statement-copy p:not(.eyebrow), .shop-copy > p:not(.eyebrow), .motto-copy { color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.85; }

.principles { background: var(--panel); border-top: 1px solid var(--line); }
.principles-intro { max-width: 590px; }
.principles-intro .eyebrow { margin-top: 42px; }
.principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1280px; margin: 66px auto 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.principle { min-height: 280px; position: relative; padding: 29px 25px 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principle-number { display: block; margin-bottom: 37px; color: #77736a; font-family: var(--mono); font-size: 10px; }
.principle-icon { position: absolute; top: 22px; right: 22px; color: var(--gold); font-family: var(--serif); font-size: 29px; }
h3 { margin-bottom: 8px; font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: .01em; }
.principle-name { margin-bottom: 21px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.principle > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }

.motto { position: relative; overflow: hidden; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #0a0a09; }
.motto::before { content: "✦"; position: absolute; top: 40%; color: rgba(212,182,107,.035); font-family: var(--serif); font-size: min(80vw, 850px); line-height: 0; }
.motto-rule { width: 1px; height: 55px; margin-bottom: 32px; background: var(--gold); }
.motto h2 { position: relative; margin-bottom: 21px; font-size: clamp(49px, 7vw, 90px); }
.motto-copy { position: relative; max-width: 570px; margin: 0; }

.shop { display: grid; grid-template-columns: 1fr minmax(250px, .75fr); align-items: stretch; gap: clamp(44px, 10vw, 140px); background: var(--gold); color: var(--ink); }
.shop .section-label { color: rgba(10,10,9,.55); margin-bottom: 41px; }
.shop .gold { color: #5a451a; }
.shop-copy h2 { color: var(--ink); }
.shop-copy > p:not(.eyebrow) { color: rgba(10,10,9,.68); max-width: 480px; margin-bottom: 27px; }
.button-light { background: var(--ink); color: var(--paper); }
.button-light:hover { background: #292821; }
.combatives-card { min-height: 290px; display: flex; flex-direction: column; justify-content: space-between; padding: 35px; background: var(--paper); box-shadow: 12px 12px 0 rgba(10,10,9,.12); transition: transform .2s, box-shadow .2s; }
.combatives-card:hover { transform: translate(-4px, -4px); box-shadow: 17px 17px 0 rgba(10,10,9,.12); }
.combatives-card img { display: block; align-self: center; width: min(100%, 270px); height: auto; mix-blend-mode: multiply; }
.combatives-card span { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.combatives-card b { font-size: 16px; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 31px clamp(24px, 5vw, 80px); color: #858178; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.site-footer p { margin: 0; }
.site-footer > a:last-child { justify-self: end; color: var(--gold); }

@media (max-width: 760px) {
  .site-header { padding: 21px 20px; font-size: 9px; }
  .hero { min-height: 720px; padding: 120px 20px 75px; }
  .hero::before { width: 115vw; }
  .hero-wordmark { margin-bottom: -34px; }
  h1 { font-size: clamp(48px, 15vw, 70px); }
  .section { padding: 80px 24px; }
  .statement-layout { grid-template-columns: 1fr; gap: 50px; margin-top: 36px; }
  .crest-wrap img { width: min(85vw, 300px); }
  .principle-grid { grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .principle { min-height: 260px; padding: 23px 18px; }
  .principle-number { margin-bottom: 34px; }
  .principle-icon { top: 16px; right: 16px; }
  .motto { min-height: 470px; }
  .shop { grid-template-columns: 1fr; gap: 48px; }
  .combatives-card { min-height: 245px; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer p { grid-column: 1 / -1; grid-row: 2; line-height: 1.6; }
}

@media (max-width: 400px) {
  .header-link { font-size: 8px; }
  .principle-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > a:last-child { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }