/* Home page sections, top to bottom. */

/* ============ HERO ============ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(680px, calc(100svh - var(--header-h)), 1080px);
  display: grid; grid-template-rows: 1fr auto auto; align-items: center;
}
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--bg); overflow: hidden; }
.hero-art { position: absolute; inset: -2% -2%; will-change: transform; }
:root[data-theme="red"] .hero-art[data-theme-art="blue"],
:root[data-theme="blue"] .hero-art[data-theme-art="red"] { display: none; }
.hero-still, .hero-still img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 28%; }
.hero-video { opacity: 0; transition: opacity 1.2s ease; }
.hero-video.is-playing { opacity: 1; }
:root[data-motion="reduced"] .hero-video { display: none; }
/* Without video (or before it loads) the still breathes slowly */
:root:not([data-motion="reduced"]) .hero-still img { animation: hero-drift 26s ease-in-out infinite alternate; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.045) translate(-.6%, -.4%); } }
.hero-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--shade-rgb), .94) 0%, rgba(var(--shade-rgb), .78) 26%, rgba(var(--shade-rgb), .25) 52%, transparent 70%),
    linear-gradient(180deg, rgba(var(--shade-rgb), .5) 0%, transparent 18%, transparent 62%, var(--bg) 100%);
}
.hero-hud {
  position: absolute; right: 4%; top: 6%; width: min(46vw, 620px); height: auto; color: var(--accent-hot); opacity: .22;
  animation: hud-spin 120s linear infinite; pointer-events: none;
}
:root[data-motion="reduced"] .hero-hud { animation: none; }
@keyframes hud-spin { to { transform: rotate(360deg); } }

.hero-in { padding-block: clamp(40px, 7vh, 96px) clamp(24px, 4vh, 48px); }
.hero-in > * { max-width: 640px; }
.tagline { margin-bottom: clamp(14px, 2.4vh, 28px); }
.tagline span {
  display: inline-block; padding: 9px 30px 8px 34px;
  font-family: var(--font-label); font-weight: 600; font-size: .78rem; letter-spacing: .5em; text-transform: uppercase; color: var(--accent-hot);
  background: linear-gradient(var(--bg), var(--bg)) padding-box;
  clip-path: polygon(14px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 14px 100%, 0 50%);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background-color: rgba(var(--shade-rgb), .6);
}
.hero-title {
  font-size: var(--fs-hero); line-height: .86; max-width: none; margin-left: -.04em;
  color: #fff; filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .65));
}
.hero-title-line { display: block; white-space: nowrap; }
.hero-title-line + .hero-title-line { margin-left: -.06em; }
.hero-title .char {
  display: inline-block; padding-right: .06em; margin-right: -.06em;
  background: linear-gradient(180deg, #fff 35%, #e1d7cf 68%, #a89b93 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  margin-top: clamp(10px, 1.6vh, 20px);
  font-style: italic; font-weight: 700; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(1rem, 2.5vw, 2rem); letter-spacing: .34em; color: var(--accent);
  text-shadow: 0 0 28px var(--glow);
}
.hero-lede { margin-top: clamp(14px, 2.4vh, 26px); font-size: 1.08em; color: var(--text); text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.hero-note { margin-top: 14px; padding-left: 16px; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; font-size: .98em; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.hero-id {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin-top: 16px;
  font-family: var(--font-label, inherit); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}
.hero-id strong { color: var(--accent); font-size: 1.18em; letter-spacing: .14em; text-transform: none; }
.hero-id span::before { content: "//"; margin-inline: .8em; color: var(--accent); opacity: .7; }
.creed {
  margin-top: 16px; font-family: var(--font-label, inherit); font-size: .68rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(20px, 3.4vh, 36px); }

.traits {
  position: relative; display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 16px clamp(14px, 3vw, 40px);
  background: rgba(var(--shade-rgb), .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  clip-path: polygon(28px 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
  box-shadow: inset 0 1px 0 var(--line-strong), inset 0 -1px 0 var(--line);
}
.traits li {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 8px;
  font-family: var(--font-label); font-weight: 600; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1.25;
  border-left: 1px solid var(--line-soft);
}
.traits li:first-child { border-left: 0; }
.traits .icon { width: 28px; height: 28px; color: var(--accent-hot); }

.hero-divider {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 18px;
  width: min(100% - 2 * var(--gutter), 900px); margin: clamp(18px, 3vh, 34px) auto clamp(18px, 3vh, 30px);
}
.hero-divider .rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.hero-divider .rule:last-of-type { transform: scaleX(-1); }
.divider-mark { width: 40px; height: 40px; }
.hero-divider p {
  grid-column: 1 / -1; text-align: center; margin-top: 8px;
  font-style: italic; font-weight: 500; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(.8rem, 1.8vw, 1.25rem); letter-spacing: .6em; text-indent: .6em; color: var(--text);
}

/* ============ ORIGIN ============ */
.origin { background: radial-gradient(900px 500px at 100% 50%, var(--tint), transparent 70%); }
.origin-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.skew-frame {
  position: relative; aspect-ratio: 3 / 2;
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  filter: drop-shadow(0 0 0 var(--line));
}
.skew-frame picture, .skew-frame img { width: 100%; height: 100%; object-fit: cover; }
.skew-frame img { transform: scale(1.12); will-change: transform; }
.skew-frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(0, 0, 0, .5); pointer-events: none; }
.quote { margin-top: 26px; padding: 16px 22px; border-left: 2px solid var(--accent); background: linear-gradient(90deg, var(--tint), transparent); }
.quote p { font-style: italic; font-weight: 700; font-stretch: 112%; font-size: 1.2em; color: #fff !important; }
.quote cite { display: block; margin-top: 4px; font-family: var(--font-label); font-style: normal; font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-hot); }

/* ============ DOCTRINE ============ */
.doctrine { overflow: hidden; isolation: isolate; }
.doctrine-bg { position: absolute; inset: 0; z-index: -1; opacity: .85; }
.doctrine-bg picture, .doctrine-bg img { width: 100%; height: 100%; object-fit: cover; object-position: left bottom; }
:root[data-theme="blue"] .doctrine-bg { filter: hue-rotate(200deg) saturate(.8); }
.doctrine-grid { display: grid; grid-template-columns: minmax(240px, .8fr) 3fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.doctrine-list { display: grid; grid-template-columns: repeat(5, 1fr); }
.doctrine-list li { border-left: 1px solid var(--line-soft); }
.doctrine-list li:first-child { border-left: 0; }
.doctrine-card {
  position: relative; width: 100%; height: 100%; padding: 26px 14px 30px; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center;
  transition: background .3s, transform .3s var(--ease);
}
.doctrine-card .icon { width: 40px; height: 40px; color: #fff; transition: color .3s, transform .4s var(--ease); }
.doctrine-title { font-family: var(--font-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .9rem; color: #fff; max-width: 9ch; line-height: 1.3; }
.doctrine-line { color: var(--muted); font-size: .9rem; line-height: 1.4; }
.doctrine-card::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .35s var(--ease); }
.doctrine-card:hover, .doctrine-card:focus-visible { background: linear-gradient(180deg, transparent, var(--tint)); }
.doctrine-card:hover .icon, .doctrine-card:focus-visible .icon { color: var(--accent-hot); transform: translateY(-4px) scale(1.1); }
.doctrine-card:hover::after, .doctrine-card:focus-visible::after { transform: scaleX(1); }

/* ============ REELS ============ */
.reels-grid { display: grid; grid-template-columns: minmax(260px, .85fr) 2.4fr; gap: clamp(24px, 4vw, 64px); align-items: center; }

/* ============ LOADOUTS ============ */
.loadouts { background: radial-gradient(900px 500px at 0% 50%, var(--tint), transparent 70%); }
.loadouts-grid { display: grid; grid-template-columns: minmax(260px, .85fr) 2.4fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.role-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; perspective: 1200px; }
.role-card {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3.3; overflow: hidden; text-align: left;
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  transform-style: preserve-3d; will-change: transform; background: #000;
}
.role-list li:first-child .role-card { clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.role-card picture, .role-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.role-card img { transition: transform .9s var(--ease), filter .4s; filter: saturate(.9) brightness(.82); object-position: 70% 40%; }
.role-card:hover img, .role-card:focus-visible img { transform: scale(1.08); filter: none; }
.role-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(var(--shade-rgb), .95)); }
.role-body { position: absolute; left: 16%; right: 14%; bottom: 9%; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.role-body .icon { grid-row: span 2; width: 34px; height: 34px; color: var(--accent-hot); }
.role-title { font-family: var(--font-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-size: clamp(.82rem, 1.15vw, 1rem); }
.role-line { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.role-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 60%); }
.role-card:hover .role-sheen { opacity: 1; }

/* ============ ARCHIVE ============ */
.archive { padding-bottom: 0; background: linear-gradient(var(--bg-2), var(--bg)); }
.archive-head { display: grid; grid-template-columns: auto 1fr; gap: 16px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(20px, 3vw, 36px); }
.archive-intro { color: var(--muted); max-width: 60ch; justify-self: end; }

.viewer-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px;
  border: 1px solid var(--line-soft); background: var(--bg-2);
  font-family: var(--font-label); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: color .2s, background .2s, border-color .2s;
}
.chip i { font-style: normal; font-size: .7rem; color: var(--accent-hot); letter-spacing: .08em; }
.chip:hover { color: #fff; border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip[aria-pressed="true"] i { color: var(--accent-ink); }

.viewer-body {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px;
  padding: 14px; background: var(--panel); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.viewer-stage { min-width: 0; display: grid; gap: 12px; }
.viewer-main { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--line-soft); }
.viewer-img { width: 100%; height: 100%; object-fit: contain; }
.viewer-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, .16) 3px 4px); }
.viewer-main::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(0, 0, 0, .55); }
.viewer-rec {
  position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px #000;
}
.viewer-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: rec 1.6s steps(2) infinite; }
:root[data-motion="reduced"] .viewer-rec i { animation: none; }
@keyframes rec { 50% { opacity: .25; } }
.viewer-main:hover .shot-open, .viewer-main:focus-visible .shot-open { opacity: 1; transform: none; }
.viewer-bar { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; }
.viewer-cap { display: grid; line-height: 1.25; min-width: 0; max-width: none !important; }
.viewer-title { font-style: italic; font-weight: 800; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1rem, 1.6vw, 1.3rem); }
.viewer-detail { color: var(--muted); font-size: .92rem; }
.viewer-count { font-family: var(--font-label); font-size: .8rem; letter-spacing: .2em; color: var(--muted); white-space: nowrap; }
.viewer-count b { color: var(--accent-hot); font-weight: 600; }

.viewer-side { position: relative; min-width: 0; }
.viewer-thumbs {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border: 1px solid var(--line-soft); }
.thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.7); transition: filter .3s, transform .5s var(--ease); }
.thumb:hover img, .thumb:focus-visible img { filter: none; transform: scale(1.08); }
.thumb.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px -4px var(--glow); }
.thumb.is-current img { filter: none; }

.founders { padding-block: clamp(56px, 8vw, 110px) 0; display: grid; grid-template-columns: minmax(240px, .8fr) 3fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.founders-head { padding-bottom: clamp(32px, 6vw, 80px); }
.founders-head p { color: var(--muted); margin-top: 10px; max-width: 34ch; }
.founder-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; align-items: end; }
.founder { position: relative; }
.founder img { width: 100%; filter: grayscale(.75) brightness(.8); transition: filter .5s, transform .5s var(--ease); transform-origin: bottom; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.founder:hover img { filter: none; transform: scale(1.05); }
.founder-tag {
  position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 12px; background: rgba(var(--shade-rgb), .85); border: 1px solid var(--line);
  font-family: var(--font-label); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
}
.founder-tag i { font-style: normal; color: var(--accent-hot); margin-left: 6px; }

/* ============ TRIUMPHS ============ */
.triumphs { padding-block: clamp(20px, 3vw, 40px) clamp(48px, 6vw, 80px); }
.triumphs-in {
  display: grid; grid-template-columns: minmax(180px, auto) 1fr; align-items: center; gap: 12px 32px;
  padding: 24px clamp(18px, 3vw, 40px); background: var(--panel); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.triumphs-head p { color: var(--muted); font-style: italic; }
.triumph-list { display: grid; grid-template-columns: repeat(5, 1fr); }
.triumph-list li { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 6px 10px; border-left: 1px solid var(--line-soft); }
.triumph-list .icon { width: 34px; height: 34px; color: var(--accent-hot); margin-bottom: 4px; }
.triumph-list strong { font-size: .95rem; line-height: 1.25; }
.triumph-list span { font-family: var(--font-label); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* ============ JOIN ============ */
.join { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--line); padding-block: clamp(72px, 10vw, 150px); }
.join-bg { position: absolute; inset: 0; z-index: -1; }
.join-bg picture, .join-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; }
:root[data-theme="blue"] .join-bg img { filter: hue-rotate(195deg) saturate(.75) brightness(.95); }
.join-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--shade-rgb), .9) 0%, rgba(var(--shade-rgb), .55) 45%, transparent 75%), linear-gradient(var(--bg) 0%, transparent 18%); }
.join-in > p { max-width: 58ch; margin-top: 18px; font-size: 1.08em; color: var(--text); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.join-in > .hero-id, .join-in > .creed { max-width: 58ch; font-size: .78rem; color: var(--muted); }
.join-in > .creed { font-size: .68rem; margin-top: 22px; }
.join-in > .join-dare { font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; margin-top: 26px; }
.join-dare em { color: var(--accent); }
.join .h-display { font-size: clamp(2.2rem, 5.4vw, 4.4rem); }

/* ============ SIMPLE PAGES (recruit, reach, thanks, 404) ============ */
.page { position: relative; isolation: isolate; padding-block: clamp(40px, 7vw, 96px); min-height: 70svh; }
.page-bg { position: absolute; inset: 0; z-index: -1; opacity: .5; }
.page-bg picture, .page-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(var(--shade-rgb), .6), var(--bg)); }
.page-panel {
  width: min(100% - 2 * var(--gutter), 980px); margin-inline: auto; padding: clamp(22px, 4vw, 48px);
  background: rgba(var(--shade-rgb), .82); backdrop-filter: blur(10px); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.page-panel.narrow { max-width: 640px; text-align: center; }
.page-panel.narrow .eyebrow, .page-panel.narrow .btn-row { justify-content: center; }
.page-panel p { color: var(--muted); }
.page-panel .h-display { margin-bottom: 16px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .doctrine-grid, .reels-grid, .loadouts-grid, .founders { grid-template-columns: 1fr; }
  .founders-head { padding-bottom: 0; }
  .archive-head { grid-template-columns: 1fr; align-items: start; }
  .archive-intro { justify-self: start; }
  .triumphs-in { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .origin-grid { grid-template-columns: 1fr; }
  .viewer-body { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .viewer-thumbs { position: static; display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 0 8px; scroll-snap-type: x proximity; }
  .viewer-thumbs li { flex: none; width: clamp(96px, 26vw, 150px); scroll-snap-align: start; }
  .traits { grid-template-columns: repeat(3, 1fr); row-gap: 14px; clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
  .traits li:nth-child(4) { border-left: 0; }
  .doctrine-list { grid-template-columns: repeat(6, 1fr); }
  .doctrine-list li { grid-column: span 2; border-top: 1px solid var(--line-soft); }
  .doctrine-list li:nth-child(n+4) { grid-column: span 3; }
  .doctrine-list li:nth-child(4) { border-left: 0; }
  .role-list { grid-template-columns: 1fr; gap: 14px; }
  .role-card, .role-list li:first-child .role-card { aspect-ratio: 16 / 9; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
  .role-body { left: 10%; right: 10%; }
  .triumph-list { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .triumph-list li:nth-child(odd) { border-left: 0; }
  .triumph-list li:last-child { grid-column: 1 / -1; }
  .founder-list { grid-template-columns: repeat(3, 1fr); gap: 12px 4px; }
}
@media (max-width: 700px) {
  .viewer-bar { grid-template-columns: auto 1fr auto; }
  .viewer-count { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  /* Phone hero: art on top, copy rising out of it */
  .hero { min-height: 0; grid-template-rows: auto auto auto; }
  .hero-media { bottom: auto; height: min(62svh, 520px); }
  .hero-still, .hero-still img, .hero-video { object-position: 62% 20%; }
  .hero-shade { background: linear-gradient(180deg, rgba(var(--shade-rgb), .35) 0%, transparent 22%, rgba(var(--shade-rgb), .55) 62%, var(--bg) 96%); }
  .hero-hud { width: 90vw; right: -20%; top: 2%; }
  /* Buttons come straight after the title so they land in the first screen; the story follows. */
  .hero-in { padding-top: min(27svh, 220px); display: flex; flex-direction: column; }
  .hero-in > .tagline, .hero-in > .hero-title, .hero-in > .hero-sub { order: 1; }
  .hero-in > .hero-cta { order: 2; margin-top: 22px; }
  .hero-in > .hero-lede, .hero-in > .hero-id, .hero-in > .hero-note, .hero-in > .creed { order: 3; }
  .hero-in > .hero-lede { margin-top: 26px; font-size: 1em; }
  .tagline { margin-bottom: 12px; }
  .hero-title { font-size: clamp(3rem, 15.5vw, 5rem); }
  .hero-sub { letter-spacing: .22em; }
  .hero-cta .btn { flex: 1 1 100%; }
  .traits { margin-top: 12px; padding: 14px 10px; }
  .traits li { flex-direction: column; text-align: center; gap: 6px; font-size: .66rem; letter-spacing: .12em; }
  .hero-divider p { letter-spacing: .34em; text-indent: .34em; }
  .car-slide { width: 78vw; }
  .car-prev { left: 4px; } .car-next { right: 4px; }
  .join-bg img { object-position: 92% 50%; }
  .join-bg::after { background: linear-gradient(rgba(var(--shade-rgb), .6), rgba(var(--shade-rgb), .86)); }
  .join .btn-row .btn { flex: 1 1 100%; }
  .skew-frame { clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); }
}
@media (max-width: 420px) {
  .doctrine-list li, .doctrine-list li:nth-child(n+4) { grid-column: span 6; border-left: 0; }
  .doctrine-card { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 16px; padding: 18px 8px; }
  .doctrine-card .icon { grid-row: span 2; }
  .doctrine-title { max-width: none; }
}

/* Tablet: the hunter sits behind the copy, so darken the left side further */
@media (min-width: 701px) and (max-width: 1100px) {
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(var(--shade-rgb), .92) 0%, rgba(var(--shade-rgb), .8) 45%, rgba(var(--shade-rgb), .35) 75%, transparent 100%),
      linear-gradient(180deg, rgba(var(--shade-rgb), .5) 0%, transparent 18%, transparent 62%, var(--bg) 100%);
  }
  .hero-still, .hero-still img, .hero-video { object-position: 78% 28%; }
}