:root {
  --ink: #090806;
  --coal: #100e0b;
  --stone: #191611;
  --parchment: #d9c59b;
  --bone: #eee4ce;
  --muted: #a99d87;
  --gold: #b7924f;
  --gold-bright: #dbc47e;
  --red: #8f191c;
  --red-bright: #c02a2d;
  --emerald: #5fa67a;
  --line: rgba(205, 180, 119, .25);
  --display: Georgia, "Times New Roman", serif;
  --body: "Trebuchet MS", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--bone);
  background:
    radial-gradient(circle at 75% 5%, rgba(125, 38, 22, .12), transparent 26rem),
    var(--ink);
  font-family: var(--body);
  line-height: 1.65;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
::selection { background: var(--red); color: #fff; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  background: var(--bone);
  color: var(--ink);
  padding: .7rem 1rem;
}
.skip-link:focus { top: 1rem; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.page-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  height: 2px;
  background: rgba(255,255,255,.05);
}
.page-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--gold-bright));
}

.site-header {
  position: fixed;
  z-index: 70;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  padding: 0 4vw;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, min-height .35s ease;
}
.site-header.is-scrolled {
  min-height: 70px;
  background: rgba(9,8,6,.91);
  border-color: var(--line);
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  font-family: var(--display);
  font-size: 1.2rem;
}
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .92rem;
}
.brand-copy small {
  margin-top: .35rem;
  color: var(--muted);
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.site-nav { display: flex; gap: clamp(1.2rem, 3vw, 3.2rem); }
.site-nav a {
  position: relative;
  padding: .7rem 0;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .25s ease;
}
.site-nav a span { color: var(--gold); margin-right: .4rem; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: .2rem;
  height: 1px;
  background: var(--red-bright);
  transition: right .3s ease;
}
.site-nav a:hover,
.site-nav a.is-active { color: var(--bone); }
.site-nav a:hover::after,
.site-nav a.is-active::after { right: 0; }
.menu-button { display: none; }

.chapter { position: relative; isolation: isolate; }

[data-cms-section] { position: relative; isolation: isolate; }
.cms-free-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25%;
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%) rotate(var(--free-image-rotation, 0deg));
  transform-origin: center;
  pointer-events: none;
}
.cms-free-image img { display: block; width: 100%; height: auto; max-width: none; }
.cms-effect-container { position: relative; }
.cms-particle-layer {
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cms-particle-layer i {
  position: absolute;
  left: var(--particle-x);
  bottom: -5%;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: cms-particle-rise var(--particle-duration) var(--particle-delay) infinite ease-in;
}
.cms-particle-layer--embers i { background: #e98945; box-shadow: 0 0 12px #e98945; }
.cms-particle-layer--gold i { width: 3px; height: 3px; background: #e4ce82; box-shadow: 0 0 9px #b7924f; animation-name: cms-particle-dance; }
.cms-particle-layer--shadow i { width: 11px; height: 11px; background: rgba(87, 34, 48, .58); filter: blur(4px); box-shadow: 0 0 18px #321620; animation-name: cms-particle-wisp; }
.cms-hide-default-particles > .hero-backdrop { display: none; }
.hero > .cms-particle-layer { z-index: 2; }
.cms-free-image > .cms-particle-layer { z-index: 3; inset: -18%; overflow: visible; }
.cms-free-image.cms-effect-container { position: absolute; }
.cms-table-block {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  width: 100%;
  margin: 2.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cms-table-block table { width: 100%; min-width: 34rem; border-collapse: collapse; color: var(--bone); background: var(--cms-table-background, #14110d); }
.cms-table-block th,
.cms-table-block td { min-width: 6rem; padding: .8rem 1rem; border: 1px solid var(--cms-table-border, var(--gold)); text-align: var(--cms-table-align, left); vertical-align: top; }
.cms-table-block th { color: var(--gold-bright); background: rgba(183,146,79,.1); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.cms-custom-section { position: relative; min-height: 32rem; padding: clamp(6rem,10vw,10rem) 8vw; overflow: hidden; background: linear-gradient(135deg,#100e0b,#17120e); }
.cms-custom-section:nth-of-type(even) { background: linear-gradient(135deg,#17120e,#0b0a08); }
.cms-custom-section h2 { margin: 0 0 1.5rem; font: 400 clamp(2.8rem,6vw,6rem)/.95 var(--display); }
.cms-custom-section h3 { color: var(--gold-bright); font-family: var(--display); font-weight: 400; }
.cms-custom-section p { max-width: 48rem; color: var(--muted); }
.cms-template-image-text { display: grid; grid-template-columns: minmax(16rem,.8fr) 1.2fr; gap: 6vw; align-items: center; }
.custom-media img { width: 100%; max-height: 38rem; object-fit: cover; border: 1px solid var(--gold); }
.custom-character { display: grid; grid-template-columns: minmax(15rem,.65fr) 1.35fr; gap: 5vw; align-items: center; }
.custom-character > img { width: 100%; max-height: 34rem; object-fit: cover; }
.custom-character dl { display: grid; grid-template-columns: 8rem 1fr; max-width: 30rem; border-top: 1px solid var(--line); }
.custom-character dt,.custom-character dd { margin: 0; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.custom-character dt { color: var(--gold); }
.cms-template-project { border-left: .45rem solid var(--red); }
.cms-template-quote { display: grid; place-content: center; text-align: center; }
.cms-template-quote blockquote { max-width: 60rem; margin: 1rem auto; font: italic clamp(2rem,5vw,5rem)/1.15 var(--display); }
.custom-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.custom-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.custom-rumours,.custom-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.custom-rumours p,.custom-columns > div { padding: 2rem; border: 1px solid var(--line); background: rgba(9,8,6,.5); }
img[data-cms-motion="float"] { animation: cms-image-float 6s infinite ease-in-out; }
img[data-cms-motion="breathe"] { animation: cms-image-breathe 7s infinite ease-in-out; }
img[data-cms-motion="sway"] { animation: cms-image-sway 8s infinite ease-in-out; transform-origin: center bottom; }
img[data-cms-motion="parallax"],
.hero-portrait img:not([data-cms-motion]) {
  transform: translate(var(--cms-parallax-x, 0), var(--cms-parallax-y, 0)) scale(1.025);
  transition: transform .16s ease-out;
}
.eyebrow {
  margin: 0 0 1.4rem;
  color: var(--gold-bright);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.8rem;
  height: 1px;
  margin: 0 1rem .22rem 0;
  background: var(--red-bright);
}
.section-number {
  position: absolute;
  z-index: -1;
  color: rgba(183,146,79,.055);
  font-family: var(--display);
  font-size: min(42vw, 36rem);
  line-height: .8;
  user-select: none;
}
.section-heading h2,
.arsenal h2,
.closing-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .92;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--bone);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-decoration: none;
  text-transform: uppercase;
}
.text-link span {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  transition: background .25s ease, transform .25s ease;
}
.text-link:hover span { background: var(--red); transform: translateY(3px); }

.hero {
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: 9rem 8vw 5rem;
  background:
    linear-gradient(90deg, #090806 0%, rgba(9,8,6,.92) 38%, rgba(9,8,6,.15) 70%, #090806 100%),
    radial-gradient(circle at 72% 52%, #4d1a13 0%, #17100c 31%, #080706 66%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .26;
  background:
    repeating-linear-gradient(115deg, transparent 0 85px, rgba(183,146,79,.08) 86px, transparent 88px),
    linear-gradient(90deg, transparent 7.9vw, var(--line) 8vw, transparent 8.05vw);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -12vw;
  bottom: -38vh;
  width: 72vw;
  height: 66vh;
  border: 1px solid rgba(183,146,79,.14);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.hero-content { position: relative; z-index: 3; width: min(46rem, 58vw); }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 400; line-height: .83; }
.hero h1 span {
  display: block;
  font-size: clamp(5.3rem, 12.5vw, 12rem);
  letter-spacing: -.075em;
  text-shadow: 0 12px 38px rgba(0,0,0,.5);
}
.hero h1 em {
  display: block;
  margin: 1.25rem 0 0 .4rem;
  color: var(--gold-bright);
  font-size: clamp(1.15rem, 2.2vw, 2.1rem);
  font-weight: 400;
  letter-spacing: .23em;
  text-transform: uppercase;
}
.hero-lead {
  width: min(40rem, 90%);
  margin: 2.4rem 0 2rem .5rem;
  color: #c7bda9;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.7;
}
.hero .text-link { margin-left: .5rem; }
.hero-portrait {
  position: absolute;
  z-index: 1;
  right: 3vw;
  bottom: 0;
  width: min(52vw, 48rem);
  height: 92%;
  overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 19%);
  filter: saturate(.76) contrast(1.08);
}
.hero-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #090806 0%, transparent 34%),
    linear-gradient(0deg, #090806 0%, transparent 28%),
    linear-gradient(180deg, rgba(9,8,6,.45), transparent 22%);
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-backdrop { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ember { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e98945; box-shadow: 0 0 12px #e98945; animation: drift 8s infinite ease-in; }
.ember-one { left: 49%; bottom: 16%; animation-delay: -1s; }
.ember-two { left: 72%; bottom: 8%; animation-delay: -5s; }
.ember-three { left: 90%; bottom: 22%; animation-delay: -3s; }
.hero-seal {
  position: absolute;
  z-index: 4;
  right: 2.6vw;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--gold);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: rotate(90deg) translateX(50%);
  transform-origin: right center;
}
.hero-seal i { width: 4rem; height: 1px; background: var(--gold); }
.scroll-hint {
  position: absolute;
  z-index: 4;
  left: 3vw;
  bottom: 3.2rem;
  margin: 0;
  color: var(--muted);
  font-size: .58rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.scroll-hint span { display: inline-block; width: 1px; height: 3rem; margin: 0 auto 1rem; background: var(--gold); animation: pulse 2s infinite; }

.oath-band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  min-height: 13rem;
  padding: 3rem 8vw;
  overflow: hidden;
  background: var(--red);
  color: #fff1da;
}
.oath-band::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .1;
  background: repeating-linear-gradient(-25deg, transparent 0 20px, #fff 21px, transparent 22px);
}
.oath-band p { position: relative; z-index: 1; margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 3rem); }
.oath-band p:first-child { text-align: right; }
.oath-band span { position: relative; z-index: 1; color: var(--gold-bright); font-size: 1.5rem; }

.profile {
  display: grid;
  grid-template-columns: .8fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(2rem, 5vw, 6rem);
  min-height: 110vh;
  padding: clamp(7rem, 12vw, 12rem) 8vw;
  background:
    linear-gradient(rgba(10,9,7,.93), rgba(10,9,7,.98)),
    repeating-linear-gradient(45deg, #14110d 0 2px, #0c0b09 2px 6px);
}
.profile .section-number { right: 3vw; top: 12rem; }
.profile .section-heading { grid-column: 1 / -1; }
.portrait-card { align-self: start; position: relative; }
.portrait-frame {
  position: relative;
  aspect-ratio: .78;
  padding: .65rem;
  border: 1px solid var(--gold);
}
.portrait-frame::before,
.portrait-frame::after { content: ""; position: absolute; width: 2.6rem; height: 2.6rem; border-color: var(--red-bright); }
.portrait-frame::before { left: -8px; top: -8px; border-left: 2px solid; border-top: 2px solid; }
.portrait-frame::after { right: -8px; bottom: -8px; border-right: 2px solid; border-bottom: 2px solid; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.08) saturate(.85); }
.portrait-card > p { margin: 1.2rem 0 0; color: var(--gold-bright); font-family: var(--display); font-size: 1.3rem; text-align: center; }
.portrait-card > p span { display: block; color: var(--muted); font-family: var(--body); font-size: .55rem; letter-spacing: .25em; text-transform: uppercase; }
.profile-copy { padding-top: 1rem; }
.profile-copy > p { color: var(--muted); font-family: var(--display); font-size: clamp(1.05rem, 1.35vw, 1.28rem); }
.profile-copy .dropcap::first-letter { float: left; margin: .05em .14em 0 0; color: var(--gold-bright); font-size: 4.5em; line-height: .72; }
.profile-copy .aliases {
  margin: 2rem 0;
  padding: 1rem 0;
  color: var(--bone);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  letter-spacing: .04em;
}
.aliases > span {
  display: block;
  margin-bottom: .25rem;
  color: var(--gold);
  font-family: var(--body);
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.facts { margin: 3rem 0 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 7rem 1fr; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--gold); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.facts dd { margin: 0; color: var(--bone); font-family: var(--display); }
.trait-panel { align-self: center; padding: 2.2rem; border: 1px solid var(--line); background: rgba(27,23,17,.65); }
.trait-panel .eyebrow { margin-bottom: 2.5rem; }
.trait { margin: 1.5rem 0; }
.trait span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
  color: var(--muted);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.trait span b { color: var(--bone); font-weight: 400; }
.trait span small { color: #6f675b; font-size: inherit; }
.trait i { display: block; position: relative; height: 2px; background: rgba(255,255,255,.1); }
.trait i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value); background: linear-gradient(90deg, var(--red), var(--gold-bright)); transform-origin: left; }

.signatures {
  position: relative;
  padding: clamp(7rem, 11vw, 11rem) 8vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 28%, rgba(143,25,28,.15), transparent 24rem),
    linear-gradient(135deg, #15110d, #0b0a08 55%);
}
.signatures::before {
  content: "";
  position: absolute;
  inset: 2rem;
  border: 1px solid rgba(183,146,79,.1);
  pointer-events: none;
}
.signatures-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 6vw;
  align-items: end;
  margin-bottom: 5rem;
}
.signatures-heading > p {
  max-width: 30rem;
  margin: 0 0 .3rem;
  padding-left: 1.5rem;
  color: var(--muted);
  border-left: 1px solid var(--red-bright);
  font-family: var(--display);
  font-size: 1.08rem;
}
.signatures-heading h2,
.brotherhood-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .92;
}
.signature-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr);
  grid-template-rows: repeat(2, minmax(17rem, auto));
  gap: 1rem;
}
.signature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 17rem;
  padding: 2.4rem 2.7rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(125deg, rgba(255,255,255,.018), transparent 45%),
    rgba(9,8,6,.46);
}
.signature-card--featured {
  grid-row: 1 / 3;
  min-height: 38rem;
  padding: clamp(3rem, 5vw, 5.5rem);
  background:
    radial-gradient(circle at 82% 18%, rgba(192,42,45,.3), transparent 13rem),
    linear-gradient(145deg, rgba(143,25,28,.17), transparent 55%),
    #0d0b09;
}
.signature-card--featured::before {
  content: "";
  position: absolute;
  width: 9rem;
  height: 46rem;
  right: 9%;
  top: -9rem;
  opacity: .72;
  background: linear-gradient(90deg, #4e0c0e, var(--red-bright) 48%, #6a1013);
  box-shadow: 0 0 55px rgba(143,25,28,.28);
  transform: rotate(37deg);
}
.signature-card::after {
  content: "";
  position: absolute;
  left: 2.7rem;
  bottom: 1.6rem;
  width: 2.4rem;
  height: 1px;
  background: var(--red-bright);
}
.signature-card--featured::after { left: clamp(3rem, 5vw, 5.5rem); bottom: 3.2rem; width: 4rem; background: var(--gold); }
.signature-rune {
  position: absolute;
  right: 1.2rem;
  top: .4rem;
  color: rgba(183,146,79,.08);
  font-family: var(--display);
  font-size: 7rem;
  line-height: 1;
}
.signature-card--featured .signature-rune { right: auto; left: 2rem; top: 1.5rem; font-size: 15rem; }
.signature-emblem {
  position: absolute;
  right: 2rem;
  top: 1.7rem;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  font-family: var(--display);
  font-size: 1.25rem;
}
.signature-card--featured .signature-emblem { top: auto; right: 3.5rem; bottom: 3.5rem; width: 4.2rem; height: 4.2rem; color: #f1d892; border-color: #d2a95c; }
.signature-card h3 {
  position: relative;
  margin: 1rem 0 1.5rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.4vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
}
.signature-card--featured h3 { max-width: 75%; font-size: clamp(3rem, 5vw, 5.2rem); }
.signature-card > p { position: relative; z-index: 1; }
.signature-card > p:last-child { max-width: 38rem; margin-bottom: 1.6rem; color: var(--muted); }
.signature-card--featured > p:last-child { max-width: 58%; margin-bottom: 1rem; color: #bdb19d; }
.waypoints {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .38fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 1rem;
  padding: 2.1rem 2.7rem;
  border: 1px solid var(--line);
  background: rgba(183,146,79,.025);
}
.waypoints .waypoints-title {
  margin: 0;
  color: var(--bone);
  font-family: var(--display);
  font-size: 1.2rem;
}
.waypoints-title span { margin-right: .55rem; color: var(--red-bright); }
.waypoints span {
  color: var(--gold);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.waypoints p { margin: .8rem 0 0; color: var(--muted); font-family: var(--display); font-size: 1.15rem; }
.waypoints p small { color: #756c5e; font-family: var(--body); font-size: .58em; letter-spacing: .05em; text-transform: uppercase; }

.interlude {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding: 8rem 12vw;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(rgba(12,9,7,.72), rgba(12,9,7,.82)),
    url('/assets/keylyn.png') center 36% / cover fixed;
}
.interlude::before { content: ""; position: absolute; inset: 2rem; border: 1px solid var(--line); }
.interlude blockquote { max-width: 58rem; margin: 1rem 0; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 5rem); font-style: italic; line-height: 1.15; text-shadow: 0 3px 20px #000; }
.interlude > p { color: var(--gold-bright); font-size: .65rem; letter-spacing: .3em; text-transform: uppercase; }
.interlude-sigil { color: var(--red-bright); font-size: 2rem; }

.legacy {
  min-height: 100vh;
  padding: clamp(7rem, 12vw, 12rem) 8vw;
  background: #0d0b09;
}
.legacy .section-number { left: 2vw; top: 8rem; }
.legacy > .section-heading { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: 8vw; align-items: end; margin-bottom: 6rem; }
.legacy > .section-heading .eyebrow { grid-column: 1 / -1; }
.legacy > .section-heading > p:last-child { max-width: 30rem; margin: 0 0 .4rem; color: var(--muted); }
.legacy-list { border-top: 1px solid var(--line); }
.legacy-card {
  position: relative;
  display: grid;
  grid-template-columns: 5rem 6rem 1fr;
  gap: 3vw;
  align-items: start;
  padding: clamp(3rem, 6vw, 6rem) 2vw;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: background .4s ease;
}
.legacy-card::after {
  content: "";
  position: absolute;
  inset: 0 100% 0 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(143,25,28,.22), rgba(183,146,79,.04));
  transition: right .55s cubic-bezier(.2,.8,.2,1);
}
.legacy-card:hover::after { right: 0; }
.card-index { color: var(--gold); font-size: .65rem; letter-spacing: .2em; }
.card-icon { color: var(--gold-bright); font-family: var(--display); font-size: 3rem; line-height: 1; text-align: center; }
.card-kicker { margin: 0 0 .6rem; color: var(--red-bright); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; }
.legacy-card h3 { display: inline-block; width: 48%; margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 4.5rem); font-weight: 400; line-height: .95; vertical-align: top; }
.legacy-card > div:last-child > p:last-child { display: inline-block; width: 42%; margin: .3rem 0 0 7%; color: var(--muted); vertical-align: top; }

.arsenal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  min-height: 78vh;
  padding: clamp(7rem, 11vw, 11rem) 8vw;
  color: #20180f;
  background:
    linear-gradient(rgba(222,201,156,.91), rgba(205,181,128,.91)),
    repeating-linear-gradient(7deg, transparent 0 5px, rgba(68,44,19,.12) 6px, transparent 7px);
}
.arsenal .eyebrow { color: var(--red); }
.arsenal-list { align-self: center; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(70,45,22,.35); }
.arsenal-list li { display: grid; grid-template-columns: 4rem 1fr; padding: 1.3rem 0; border-bottom: 1px solid rgba(70,45,22,.35); font-family: var(--display); font-size: clamp(1rem, 1.6vw, 1.4rem); }
.arsenal-list span { color: var(--red); font-family: var(--body); font-size: .65rem; letter-spacing: .14em; }
.arsenal-list .cms-list-text { color: inherit; font: inherit; letter-spacing: inherit; }
.aptitudes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(70,45,22,.35);
}
.aptitudes p { margin: 0; font-family: var(--display); }
.aptitudes span { display: block; margin-bottom: .65rem; color: var(--red); font-family: var(--body); font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.aptitudes .cms-list-text { display: inline; margin: 0; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; }

.brotherhood {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 5rem 8vw;
  min-height: 100vh;
  padding: clamp(8rem, 13vw, 13rem) 8vw;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,7,6,.96), rgba(8,7,6,.78)),
    repeating-linear-gradient(120deg, transparent 0 62px, rgba(183,146,79,.06) 63px, transparent 65px),
    #0b0907;
}
.brotherhood::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brotherhood-mark {
  position: absolute;
  right: -4vw;
  top: -3rem;
  color: rgba(143,25,28,.13);
  font-size: min(36vw, 32rem);
  line-height: 1;
}
.brotherhood-heading,
.brotherhood-copy,
.services,
.rp-note { position: relative; z-index: 1; }
.brotherhood-copy {
  align-self: end;
  padding-top: 3rem;
  color: var(--muted);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}
.services { padding: 2.5rem; border: 1px solid var(--line); background: rgba(23,18,13,.6); }
.services { grid-column: 1 / -1; }
.services ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.services li { padding: .8rem 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.15rem; }
.services li::before { content: "✦"; margin-right: .8rem; color: var(--red-bright); font-size: .7rem; }

.ooc-disclaimer {
  position: relative;
  display: grid;
  grid-template-columns: .42fr 1.58fr;
  gap: 4rem 6vw;
  padding: clamp(6rem, 10vw, 10rem) 8vw;
  color: #312416;
  overflow: hidden;
  background:
    linear-gradient(rgba(221,201,160,.94), rgba(200,177,128,.96)),
    repeating-linear-gradient(8deg, transparent 0 5px, rgba(77,49,21,.12) 6px, transparent 8px);
}
.ooc-disclaimer::before,
.ooc-disclaimer::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.ooc-disclaimer::before { inset: 1.2rem; border: 1px solid rgba(72,46,21,.28); }
.ooc-disclaimer::after {
  right: -8rem;
  top: -8rem;
  width: 30rem;
  height: 30rem;
  border: 2px solid rgba(143,25,28,.08);
  border-radius: 50%;
}
.ooc-seal {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: clamp(8rem, 14vw, 13rem);
  aspect-ratio: 1;
  color: var(--parchment);
  border: .35rem double #6f1618;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 10px 30px rgba(63,30,14,.24), inset 0 0 0 .55rem rgba(217,197,155,.12);
  transform: rotate(-8deg);
}
.ooc-seal::before { content: ""; position: absolute; inset: 1rem; border: 1px solid rgba(238,228,206,.45); border-radius: 50%; }
.ooc-seal span { font-family: var(--display); font-size: clamp(2rem, 4vw, 4rem); letter-spacing: .08em; }
.ooc-heading { position: relative; z-index: 1; }
.ooc-heading .eyebrow { color: var(--red); }
.ooc-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 7rem); font-weight: 400; letter-spacing: -.045em; line-height: .92; }
.ooc-heading > p:last-child { max-width: 44rem; margin: 2rem 0 0; font-family: var(--display); font-size: 1.12rem; }
.ooc-rules { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(72,46,21,.32); border-left: 1px solid rgba(72,46,21,.32); }
.ooc-rule { position: relative; min-height: 15rem; padding: 2.5rem 3rem; border-right: 1px solid rgba(72,46,21,.32); border-bottom: 1px solid rgba(72,46,21,.32); }
.ooc-rule > span { position: absolute; right: 1.5rem; top: 1rem; color: rgba(143,25,28,.22); font-family: var(--display); font-size: 3.5rem; }
.ooc-rule h3 { position: relative; margin: 0 0 1rem; color: var(--red); font-family: var(--display); font-size: 1.8rem; font-weight: 400; }
.ooc-rule p { position: relative; max-width: 38rem; margin: 0; font-family: var(--display); line-height: 1.75; }

.rumours {
  min-height: 120vh;
  padding: clamp(8rem, 13vw, 13rem) 8vw 8rem;
  overflow: hidden;
  background: #0b0907;
}
.rumours .section-number { right: 2vw; top: 9rem; }
.rumours .section-heading { position: relative; z-index: 1; margin-bottom: 5rem; }
.rumour-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .25;
  background:
    radial-gradient(circle at 80% 20%, rgba(143,25,28,.5), transparent 25rem),
    linear-gradient(120deg, transparent 48%, rgba(183,146,79,.1) 48.2%, transparent 48.5%);
}
.rumour-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.rumour-note {
  position: relative;
  min-height: 25rem;
  padding: 3rem 2.5rem;
  color: #2a2015;
  background: #d1ba89;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  transform: rotate(-1deg);
}
.rumour-note:nth-child(2) { transform: translateY(2.5rem) rotate(1.2deg); }
.rumour-note:nth-child(3) { transform: rotate(-.5deg); }
.rumour-note:nth-child(4) { transform: translateY(2.5rem) rotate(.7deg); }
.rumour-note::before { content: ""; position: absolute; inset: .7rem; border: 1px solid rgba(74,46,18,.26); pointer-events: none; }
.rumour-note span { color: var(--red); font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.rumour-note h3 { margin: 2rem 0 1.5rem; font-family: var(--display); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 400; line-height: 1; }
.rumour-note p { font-family: var(--display); font-size: 1.08rem; line-height: 1.75; }
.closing-mark {
  display: grid;
  place-items: center;
  width: 7rem;
  aspect-ratio: 1;
  margin: 11rem auto 3rem;
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  font-family: var(--display);
  font-size: 3rem;
  transform: rotate(45deg);
}
.closing-copy { text-align: center; }
.closing-copy > p { color: var(--red-bright); font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; }
.closing-copy h2 { margin: 1.5rem 0 3rem; }
.closing-copy .text-link { justify-content: center; }

.site-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 2rem 4vw;
  color: #786f60;
  border-top: 1px solid var(--line);
  background: #080706;
  font-size: .57rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.site-footer p { margin: 0; }
.site-footer p:nth-child(2) { text-align: center; }
.site-footer p:nth-child(3) { text-align: right; }
.site-footer .admin-link {
  grid-column: 3;
  justify-self: end;
  color: #5f584d;
  font-size: .48rem;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: none;
  transition: color .2s ease;
}
.site-footer .admin-link:hover,
.site-footer .admin-link:focus-visible { color: #948976; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes drift {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(8rem, -60vh) scale(1.5); }
}
@keyframes cms-particle-rise {
  0% { bottom: -5%; opacity: 0; transform: translateX(0) scale(.45); }
  18% { opacity: 1; }
  100% { bottom: 105%; opacity: 0; transform: translateX(var(--particle-drift)) scale(1.55); }
}
@keyframes cms-particle-dance {
  0% { bottom: -5%; opacity: 0; transform: translateX(0) scale(.5); }
  22%, 68% { opacity: .95; }
  100% { bottom: 105%; opacity: 0; transform: translateX(var(--particle-drift)) scale(1.25) rotate(160deg); }
}
@keyframes cms-particle-wisp {
  0% { bottom: -5%; opacity: 0; transform: translateX(0) scale(.35); }
  25% { opacity: .7; }
  100% { bottom: 105%; opacity: 0; transform: translateX(var(--particle-drift)) scale(2.1); }
}
@keyframes cms-image-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes cms-image-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes cms-image-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes pulse { 0%,100% { opacity: .2; transform: scaleY(.5); } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 900px) {
  .cms-template-image-text,.custom-character,.custom-rumours,.custom-columns { grid-template-columns: 1fr; }
  .custom-gallery { grid-template-columns: 1fr 1fr; }
  .site-header { min-height: 72px; padding: 0 1.25rem; }
  .brand-copy small { display: none; }
  .menu-button {
    position: relative;
    z-index: 2;
    display: grid;
    place-content: center;
    gap: 7px;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--bone);
    border: 0;
    background: transparent;
  }
  .menu-button span:not(.sr-only) { display: block; width: 26px; height: 1px; background: currentColor; transition: transform .25s ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .site-nav {
    position: fixed;
    inset: 0;
    display: grid;
    align-content: center;
    gap: 1.4rem;
    padding: 5rem 12vw;
    background: rgba(9,8,6,.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav a { font-family: var(--display); font-size: clamp(1.8rem, 8vw, 3.5rem); letter-spacing: 0; text-transform: none; }
  .site-nav a span { display: inline-block; width: 2.5rem; font-family: var(--body); font-size: .6rem; }
  .hero { align-items: end; padding: 9rem 1.5rem 5rem; }
  .hero-content { width: 100%; }
  .hero h1 span { font-size: clamp(4.8rem, 22vw, 8rem); }
  .hero h1 em { font-size: 1rem; }
  .hero-lead { width: 100%; max-width: 34rem; }
  .hero-portrait { right: -14%; top: 0; width: 88%; height: 75%; opacity: .7; }
  .hero-portrait::after { background: linear-gradient(0deg, #090806 4%, transparent 60%), linear-gradient(90deg, #090806 0%, transparent 58%); }
  .hero-seal, .scroll-hint { display: none; }
  .oath-band { grid-template-columns: 1fr; gap: .5rem; text-align: center; }
  .oath-band p:first-child { text-align: center; }
  .profile { grid-template-columns: 1fr 1fr; padding-left: 1.5rem; padding-right: 1.5rem; }
  .portrait-card { grid-column: 1; }
  .profile-copy { grid-column: 2; }
  .trait-panel { grid-column: 1 / -1; }
  .signatures { padding-left: 1.5rem; padding-right: 1.5rem; }
  .signatures-heading { grid-template-columns: 1fr; gap: 2rem; }
  .signatures-heading > p { margin-left: .2rem; }
  .signature-grid { grid-template-columns: 1.2fr .8fr; }
  .signature-card { padding-left: 1.8rem; padding-right: 1.8rem; }
  .signature-card--featured { padding: 3rem; }
  .signature-card--featured::after { left: 3rem; }
  .signature-card--featured > p:last-child { max-width: 70%; }
  .waypoints { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .waypoints-title { grid-column: 1 / -1; }
  .legacy, .rumours, .arsenal { padding-left: 1.5rem; padding-right: 1.5rem; }
  .legacy > .section-heading { grid-template-columns: 1fr; }
  .legacy > .section-heading > p:last-child { margin-top: 2rem; }
  .legacy-card { grid-template-columns: 3rem 4rem 1fr; padding-left: 0; padding-right: 0; }
  .legacy-card h3, .legacy-card > div:last-child > p:last-child { display: block; width: 100%; margin-left: 0; }
  .legacy-card > div:last-child > p:last-child { margin-top: 1.5rem; }
  .aptitudes { gap: 2rem; }
  .rumour-grid { grid-template-columns: 1fr; max-width: 40rem; margin: auto; }
  .rumour-note:nth-child(n) { min-height: auto; transform: none; }
  .closing-mark { margin-top: 8rem; }
  .brotherhood { grid-template-columns: 1fr; padding-left: 1.5rem; padding-right: 1.5rem; }
  .brotherhood-copy { padding-top: 0; }
  .services ul { grid-template-columns: repeat(2, 1fr); }
  .ooc-disclaimer { grid-template-columns: 1fr; padding-left: 2rem; padding-right: 2rem; }
  .ooc-seal { justify-self: start; }
}

@media (max-width: 600px) {
  .custom-gallery { grid-template-columns: 1fr; }
  .eyebrow { letter-spacing: .22em; }
  .section-heading h2, .arsenal h2, .closing-copy h2 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .hero { min-height: 760px; }
  .hero-portrait { right: -32%; width: 126%; height: 72%; }
  .hero-content { padding-bottom: 1rem; }
  .hero-lead { font-size: 1rem; line-height: 1.55; }
  .oath-band { min-height: 11rem; }
  .profile { grid-template-columns: 1fr; }
  .profile .section-heading, .portrait-card, .profile-copy, .trait-panel { grid-column: 1; }
  .portrait-card { width: min(88%, 25rem); margin: auto; }
  .signature-grid, .waypoints { grid-template-columns: 1fr; }
  .signature-grid { grid-template-rows: auto; }
  .signature-card, .signature-card--featured { grid-row: auto; min-height: 22rem; padding: 3rem 1.8rem 4rem; }
  .signature-card--featured { min-height: 34rem; }
  .signature-card--featured h3, .signature-card--featured > p:last-child { max-width: 90%; }
  .signature-card--featured::before { right: -10%; opacity: .5; }
  .signature-card--featured::after { left: 1.8rem; }
  .signature-card--featured .signature-emblem { right: 2rem; bottom: 2.5rem; }
  .waypoints .waypoints-title { grid-column: auto; }
  .interlude { min-height: 80vh; padding: 6rem 2rem; background-attachment: scroll; }
  .legacy-card { grid-template-columns: 2rem 1fr; gap: 1.25rem; }
  .card-icon { grid-column: 2; grid-row: 1; justify-self: end; font-size: 2rem; }
  .legacy-card > div:last-child { grid-column: 2; }
  .arsenal { grid-template-columns: 1fr; }
  .arsenal-list { margin-top: 2rem; }
  .aptitudes { grid-template-columns: 1fr; }
  .rumour-note { padding: 2.5rem 2rem; }
  .services ul, .ooc-rules { grid-template-columns: 1fr; }
  .ooc-rule { min-height: auto; padding: 2.5rem 2rem; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .site-footer p:nth-child(n) { text-align: center; }
  .site-footer .admin-link { grid-column: auto; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .interlude { background-attachment: scroll; }
}