:root {
  --ink: #181711;
  --ink-soft: #343128;
  --paper: #eee7d8;
  --paper-deep: #d8cdb8;
  --gold: #d8bb72;
  --gold-bright: #f0d89b;
  --green: #1c5a47;
  --green-bright: #2b7b60;
  --rust: #9e4b32;
  --white: #fffdf7;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --frame: min(1240px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--gold); padding: 10px 16px; color: #111; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 88px; padding: 0 clamp(22px, 3vw, 52px); display: flex; align-items: center; color: white; transition: height .35s, box-shadow .35s; }
/* The scrolled backdrop lives on a pseudo-element: backdrop-filter on the header
   itself would make it the containing block for the fixed mobile menu, shrinking
   the menu to the header's height. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(13,14,11,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.site-header::after { content: ""; position: absolute; inset: auto clamp(22px, 3vw, 52px) 0; border-bottom: 1px solid rgba(255,255,255,.28); }
.site-header.scrolled { height: 72px; box-shadow: 0 14px 40px rgba(0,0,0,.2); }
.site-header.scrolled::before { opacity: 1; }
.site-header.scrolled::after { inset-inline: 0; border-color: rgba(216,187,114,.72); }
.brand { width: 220px; height: 82px; display: flex; align-items: center; text-decoration: none; position: relative; z-index: 2; transition: width .35s, height .35s; }
.brand img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.site-header.scrolled .brand { width: 188px; height: 66px; }
.footer-brand strong { display: block; font: 600 18px/1 var(--serif); letter-spacing: .02em; }
.footer-brand small { display: block; margin-top: 5px; font-size: 9px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: #d9cda9; }
.site-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-left: clamp(56px, 10vw, 190px); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.site-nav a { text-decoration: none; transition: color .2s; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold-bright); }
.site-nav .nav-cta { padding: 12px 19px; border: 1px solid var(--gold); background: var(--gold); }
.site-nav .nav-cta span { color: transparent; background: #11110e; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.menu-toggle { display: none; }

.hero { min-height: 820px; height: min(940px, 100svh); position: relative; color: white; overflow: hidden; background: #111722; isolation: isolate; }
.hero-art { position: absolute; inset: 0; background: #687487 url("winter-castle.jpg") center center / cover no-repeat; transform: scale(1.01); }
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,12,18,.58) 0%, rgba(7,12,18,.22) 48%, rgba(7,12,18,.16) 100%), linear-gradient(0deg, rgba(8,10,13,.84) 0%, rgba(8,10,13,.3) 54%, rgba(5,8,12,.24) 100%); }
.hero-content { position: relative; z-index: 3; width: min(1120px, calc(100vw - 64px)); height: 100%; margin: 0 auto; padding: 112px 0 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-logo { width: min(620px, 68vw); height: auto; display: block; margin: -36px auto -26px; filter: drop-shadow(0 18px 32px rgba(0,0,0,.48)); }
.hero-copy { width: min(940px, 100%); }
.eyebrow, .section-kicker { margin: 0 0 24px; color: var(--gold-bright); font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow { align-self: center; display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.eyebrow b { font: inherit; white-space: nowrap; }
.eyebrow span { display: inline-block; width: 36px; height: 1px; background: var(--gold); }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
h1 { max-width: 940px; margin-inline: auto; font-size: clamp(48px, 4.5vw, 70px); line-height: .98; text-wrap: balance; text-shadow: 0 3px 28px rgba(0,0,0,.42); }
h1 i, h2 em { color: var(--gold-bright); font-weight: 400; }
.hero-copy > p { max-width: 680px; margin: 22px auto 0; color: rgba(255,255,255,.82); font: 18px/1.65 var(--serif); }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 28px; }
.button { min-height: 50px; display: inline-flex; justify-content: center; align-items: center; gap: 28px; padding: 0 22px; border: 1px solid transparent; text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; transition: transform .2s, background .2s, color .2s, border .2s; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { background: var(--gold); color: #17140e; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.button-primary:hover, .button-primary:focus-visible { background: var(--gold-bright); }
.text-link { color: white; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.text-link span { color: var(--gold); margin-left: 5px; }

.section { padding: 124px max(32px, calc((100vw - 1240px)/2)); }
.intro { background: var(--paper); background-image: radial-gradient(rgba(56,47,32,.08) .7px, transparent .7px); background-size: 6px 6px; }
.section-kicker { color: var(--rust); }
.section-kicker::before { content: "✦"; margin-right: 10px; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: start; }
h2 { font-size: clamp(48px, 5vw, 76px); line-height: 1.02; }
h2 em { color: var(--green); }
.intro-copy .lead { margin-top: 4px; font: 24px/1.55 var(--serif); color: #27241c; }
.intro-copy p { color: #5f584c; }
.inline-link { display: inline-block; margin-top: 14px; padding-bottom: 4px; color: var(--green); text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(28,90,71,.3); }
.legacy-panel { margin-top: 88px; display: grid; grid-template-columns: 1fr .7fr; gap: 64px; align-items: center; padding: 46px 54px; border: 1px solid rgba(93,72,36,.24); background: rgba(255,253,247,.46); box-shadow: 0 28px 80px rgba(45,34,17,.09); position: relative; }
blockquote { margin: 0; }
blockquote p { margin: 0 0 18px; font: italic 28px/1.45 var(--serif); color: #2f2b22; }
blockquote cite { color: var(--rust); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.legacy-panel dl { margin: 0; border-left: 1px solid rgba(68,55,35,.2); padding-left: 44px; }
.legacy-panel dl div { padding: 10px 0; border-bottom: 1px solid rgba(68,55,35,.14); }
.legacy-panel dt { color: #766b58; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.legacy-panel dd { margin: 2px 0 0; font: 18px/1.3 var(--serif); }

.history { color: white; background: #181812; position: relative; overflow: hidden; }
.history::before { content: ""; position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(90deg, transparent 49.8%, rgba(216,187,114,.4) 50%, transparent 50.2%), radial-gradient(circle, rgba(255,255,255,.32) 1px, transparent 1px); background-size: 100% 100%, 32px 32px; pointer-events: none; }
.history > * { position: relative; z-index: 1; }
.history-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; }
.history-heading h2 em { color: var(--gold-bright); }
.history-heading > p { max-width: 540px; margin: 0 0 10px; color: rgba(255,255,255,.64); }
.timeline-date { margin: 0; color: var(--gold-bright); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.timeline-featured { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(216,187,114,.22); border: 1px solid rgba(216,187,114,.22); }
.timeline-feature { min-height: 240px; padding: 28px; display: flex; flex-direction: column; background: #23221b; }
.timeline-feature h3 { margin: 10px 0 13px; color: var(--white); font: 400 24px/1.14 var(--serif); }
.timeline-more { align-self: flex-start; margin-top: auto; padding-top: 16px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.timeline-more:hover, .timeline-more:focus-visible { color: var(--gold-bright); }
.timeline-more[hidden] { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.timeline-feature-text { margin: 0; color: rgba(255,255,255,.56); font-size: 12px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.timeline-history { margin-top: 26px; border: 1px solid rgba(216,187,114,.28); background: #201f19; }
.timeline-history > summary { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 66px 22px 26px; cursor: pointer; list-style: none; color: var(--white); font: 400 20px/1.2 var(--serif); }
.timeline-history > summary::-webkit-details-marker, .timeline-complete summary::-webkit-details-marker { display: none; }
.timeline-history > summary small { color: rgba(255,255,255,.45); font: 800 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.timeline-history > summary b { position: absolute; right: 28px; color: var(--gold); font: 300 25px/1 var(--sans); transition: transform .2s; }
.timeline-history[open] > summary b { transform: rotate(45deg); }
.timeline-complete { position: relative; max-height: 720px; margin: 0; padding: 28px 28px 30px 76px; overflow-y: auto; list-style: none; border-top: 1px solid rgba(216,187,114,.18); scrollbar-color: var(--gold) #181812; }
.timeline-complete::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 43px; width: 1px; background: linear-gradient(var(--gold), rgba(216,187,114,.12)); }
.timeline-complete > li { position: relative; border-bottom: 1px solid rgba(255,255,255,.1); }
.timeline-complete > li::before { content: ""; position: absolute; left: -38px; top: 23px; width: 9px; height: 9px; border: 2px solid var(--gold); border-radius: 50%; background: #201f19; box-shadow: 0 0 0 5px #201f19; }
.timeline-complete > li:last-child { border-bottom: 0; }
.timeline-complete details > summary { display: grid; grid-template-columns: 155px 1fr; gap: 24px; padding: 17px 4px; cursor: pointer; color: rgba(255,255,255,.86); font: 400 18px/1.3 var(--serif); }
.timeline-complete details > p { margin: 0; padding: 0 4px 22px 179px; color: rgba(255,255,255,.6); font-size: 13px; }
.timeline-complete details > summary { transition: color .6s; }
.timeline-complete details.is-highlighted > summary { color: var(--gold-bright); }
.timeline-empty { margin: 74px auto 0; max-width: 620px; padding: 48px; text-align: center; color: rgba(255,255,255,.65); border: 1px solid rgba(216,187,114,.22); background: #212119; }
.timeline-empty span { color: var(--gold); }
.timeline-empty p { margin: 12px 0 0; font: italic 21px/1.5 var(--serif); }

.values { background: #133f34; color: white; position: relative; overflow: hidden; }
.values::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle at 22% 18%, rgba(255,255,255,.16) 0 1px, transparent 1px), radial-gradient(circle at 78% 72%, rgba(255,255,255,.12) 0 1px, transparent 1px); background-size: 32px 32px, 44px 44px; }
.values::after { content: "UWF"; position: absolute; right: -30px; top: -100px; color: rgba(255,255,255,.025); font: 700 320px/1 var(--serif); }
.values > * { position: relative; z-index: 2; }
.section-kicker-light { color: var(--gold-bright); }
.values-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 9vw; }
.values-heading .section-kicker { grid-column: 1 / -1; }
.values-heading h2 em { color: var(--gold-bright); }
.values-heading > p { align-self: end; margin: 0 0 8px; max-width: 520px; color: rgba(255,255,255,.66); }
.code-panels { margin-top: 64px; border-top: 1px solid rgba(255,255,255,.2); }
.code-panels details { border-bottom: 1px solid rgba(255,255,255,.2); }
.code-panels summary { position: relative; display: flex; align-items: baseline; gap: 20px; padding: 25px 52px 25px 0; cursor: pointer; list-style: none; color: white; font: 400 27px/1.2 var(--serif); }
.code-panels summary::-webkit-details-marker { display: none; }
.code-panels summary::after { content: "\2726"; position: absolute; right: 8px; color: var(--gold); font: 300 27px/1 var(--sans); transition: transform .2s; }
.code-panels details[open] summary::after { transform: rotate(45deg); }
.code-panels summary span { color: var(--gold-bright); font: 800 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.code-panels ol { columns: 2; column-gap: 60px; margin: 0; padding: 0 0 30px 22px; color: rgba(255,255,255,.66); }
.code-panels li { padding: 0 24px 13px 5px; break-inside: avoid; font-size: 13px; }
.code-panels li strong { color: rgba(255,255,255,.9); }
.code-panels details > p { max-width: 850px; margin: 0; padding: 0 0 30px; color: rgba(255,255,255,.66); }
.code-motto { margin: 34px 0 0; font: italic 17px/1.4 var(--serif); color: rgba(255,255,255,.68); }

.leadership { background: #f4efe4; }
.leadership-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; }
.leadership-heading .section-kicker { grid-column: 1 / -1; }
.leadership-heading > p { max-width: 560px; margin: 0 0 8px; color: #625b4e; }
.button-dark { background: var(--ink); color: white; }
.leadership-roster { margin-top: 64px; display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(93,72,36,.2); border: 1px solid rgba(93,72,36,.2); }
.leadership-roster article { min-height: 0; padding: 25px 32px; background: rgba(255,253,247,.62); }
.leadership-roster article > span { color: var(--rust); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.leadership-roster h3 { margin: 10px 0 0; font: 400 34px/1.2 var(--serif); }
.leadership-roster p { margin: 14px 0 0; color: #5d564a; line-height: 1.8; }
.leader-primary { color: #f4ecd9; background: var(--green) !important; }
.leader-primary > span { color: var(--gold-bright) !important; }
.leader-primary h3 { text-align: center; }
.leadership-archive { margin-top: 24px; border: 1px solid rgba(93,72,36,.22); background: rgba(255,253,247,.5); }
.leadership-archive > summary { position: relative; padding: 22px 60px 22px 28px; cursor: pointer; list-style: none; color: #2f2b23; font: 400 21px/1.2 var(--serif); }
.leadership-archive > summary::-webkit-details-marker { display: none; }
.leadership-archive > summary b { position: absolute; right: 28px; color: var(--rust); font: 300 25px/1 var(--sans); transition: transform .2s; }
.leadership-archive[open] > summary b { transform: rotate(45deg); }
.leadership-archive > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(93,72,36,.16); border-top: 1px solid rgba(93,72,36,.16); }
.leadership-archive article { padding: 26px 28px; background: #f7f2e8; }
.leadership-archive h3 { margin: 0 0 9px; font: 400 20px/1.2 var(--serif); }
.leadership-archive p { margin: 10px 0 0; color: #625b4e; font-size: 13px; line-height: 1.75; }
.leadership-contact { margin-top: 42px; display: grid; grid-template-columns: .7fr 1fr auto; gap: 38px; align-items: center; padding-top: 32px; border-top: 1px solid rgba(93,72,36,.22); }
.leadership-contact span { display: block; color: var(--rust); font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.leadership-contact strong { display: block; margin-top: 5px; font: 400 20px/1.2 var(--serif); }
.leadership-contact p { margin: 0; color: #625b4e; }
.guild-house { scroll-margin-top: 96px; margin-top: 64px; display: grid; grid-template-columns: 1fr .8fr; gap: clamp(40px, 7vw, 90px); padding: 48px; color: #f5eddb; background: var(--ink); }
.guild-house h3 { margin: 4px 0 18px; font: 400 clamp(30px, 3vw, 44px)/1.1 var(--serif); }
.guild-house p { margin: 0; color: rgba(255,255,255,.68); }
.guild-house ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(216,187,114,.28); }
.guild-house li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(216,187,114,.2); color: rgba(255,255,255,.82); }
.guild-house li span { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .16em; }

.join { position: relative; display: grid; grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr); gap: clamp(50px, 8vw, 110px); align-items: start; color: white; overflow: hidden; background: #133f34; }
.join::before { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(216,187,114,.18); pointer-events: none; }
.join::after { content: "\2726"; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); color: rgba(216,187,114,.42); font: 18px/1 var(--serif); }
.join-intro, .join-form { position: relative; z-index: 2; }
.join-intro { position: sticky; top: 120px; padding-top: 24px; }
.join h2 em { color: var(--gold-bright); }
.join-intro > p { max-width: 520px; margin: 24px 0 0; color: rgba(255,255,255,.72); }
.join-intro .button { margin-top: 32px; }
.button-ghost { color: white; border-color: rgba(255,255,255,.45); background: rgba(8,8,6,.24); }
.join-note { font-size: 9px !important; letter-spacing: .14em; text-transform: uppercase; }
.join-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 42px; background: #eeeadf; color: var(--ink); border: 1px solid rgba(216,187,114,.5); box-shadow: 0 28px 80px rgba(0,0,0,.25); }
.form-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid rgba(68,55,35,.18); }
.form-heading p { margin: 0; font: 400 27px/1.2 var(--serif); }
.form-heading span { color: #726a5b; font-size: 10px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field-wide, .form-check, .form-submit { grid-column: 1 / -1; }
.form-field label, .captcha-field > div > label { color: #4b4438; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid #cfc5b1; border-radius: 0; background: #fffdf8; color: var(--ink); font: 16px/1.4 var(--sans); padding: 12px 13px; outline: none; transition: border .2s, box-shadow .2s; }
.form-field textarea { resize: vertical; min-height: 138px; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(28,90,71,.12); }
.form-check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: #514b40; font-size: 13px; }
.form-check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--green); }
.form-check a { color: var(--green); font-weight: 700; }
.captcha-field { display: grid; grid-template-columns: 1fr 90px auto; gap: 12px; align-items: end; margin-top: 6px; padding: 18px; background: #dfd8c9; border: 1px solid #c8bda9; }
.captcha-field > div p { margin: 4px 0 0; font: 600 20px/1.25 var(--serif); }
.captcha-field input { text-align: center; font-size: 20px; }
.captcha-refresh { height: 49px; padding: 0 14px; border: 1px solid #9f927d; background: transparent; color: #3a352c; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.captcha-refresh:hover, .captcha-refresh:focus-visible { border-color: var(--green); color: var(--green); }
.captcha-field small { grid-column: 1 / -1; color: #756d60; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-submit { display: flex; align-items: center; gap: 22px; padding-top: 8px; }
.form-submit .button { border: 0; cursor: pointer; }
.form-submit .button:disabled { opacity: .6; cursor: wait; transform: none; }
.form-status { margin: 0; color: #625a4c; font-size: 13px; }
.form-status.is-error { color: #8d2d23; }
.form-status.is-success { color: var(--green); font-weight: 700; }

.site-footer { min-height: 170px; padding: 42px max(32px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; color: white; background: #11110e; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.site-footer nav { display: flex; gap: 26px; }
.site-footer nav a { color: #c8bda7; text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.site-footer > p { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); color: #777268; font-size: 10px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes breathe { 0%,100% { transform: scaleX(.35); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }

@media (max-width: 1000px) {
  :root { --frame: calc(100vw - 40px); }
  .site-nav { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; margin-left: 0; background: rgba(15,17,13,.98); transform: translateX(100%); visibility: hidden; transition: transform .32s, visibility .32s; font-size: 16px; }
  .site-nav.open { transform: none; visibility: visible; }
  .menu-toggle { display: grid; grid-template-columns: 24px auto; gap: 4px 10px; align-items: center; position: relative; z-index: 3; margin-left: auto; border: 0; background: none; color: white; cursor: pointer; }
  .menu-toggle span { grid-column: 1; height: 1px; background: white; }
  .menu-toggle em { grid-column: 2; grid-row: 1 / 4; font: 700 9px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; font-style: normal; }
  .hero-content { width: min(860px, calc(100vw - 64px)); }
  .hero-logo { width: min(570px, 70vw); }
  .hero-copy { width: min(760px, 100%); }
  .intro-grid, .values-heading, .leadership-heading { grid-template-columns: 1fr; }
  .history-heading, .join { grid-template-columns: 1fr; }
  .intro-grid, .leadership-heading { gap: 48px; }
  .legacy-panel { grid-template-columns: 1fr; }
  .legacy-panel dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(68,55,35,.2); }
  .legacy-panel dl div { text-align: center; border-bottom: 0; border-right: 1px solid rgba(68,55,35,.14); }
  .values-heading > p { margin-top: 24px; }
  .timeline-featured { grid-template-columns: repeat(2, 1fr); }
  .leadership-contact { grid-template-columns: 1fr 1fr; }
  .leadership-contact .button { grid-column: 1 / -1; justify-self: start; }
  .guild-house { grid-template-columns: 1fr; }
  .join { gap: 46px; }
  .join-intro { position: relative; top: auto; max-width: 700px; }
}

@media (max-width: 680px) {
  .site-header { height: 70px; padding-inline: 20px; }
  .site-header::after { inset-inline: 20px; }
  .brand { width: 162px; height: 64px; }
  .hero { min-height: 900px; height: auto; }
  .hero-art { background-position: 45% center; }
  .hero-vignette { background: linear-gradient(90deg, rgba(6,10,15,.88), rgba(6,10,15,.18)), linear-gradient(0deg, rgba(7,8,11,.82), rgba(7,8,11,.05) 72%); }
  .hero-content { width: calc(100vw - 48px); min-height: 900px; padding: 100px 0 48px; justify-content: flex-start; }
  .hero-content .eyebrow { width: 100%; margin: 22px 0 22px; font-size: 9px; }
  .hero-content .eyebrow span { flex: 1; max-width: 36px; }
  .hero-logo { width: 390px; max-width: 110vw; margin: -24px auto -18px; }
  .hero-copy { width: 100%; }
  h1 { font-size: clamp(43px, 12.5vw, 58px); }
  .hero-copy > p { font-size: 16px; line-height: 1.55; }
  .hero-actions, .leadership-actions, .join-actions { flex-direction: column; align-items: stretch; }
  .text-link { text-align: center; }
  .hero-actions .text-link { align-self: center; padding: 7px 13px; background: rgba(7,10,12,.46); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
  .section { padding: 88px 24px; }
  h2 { font-size: 45px; }
  .intro-grid { gap: 36px; }
  .intro-copy .lead { font-size: 21px; }
  .legacy-panel { margin-top: 58px; grid-template-columns: 1fr; padding: 38px 28px; gap: 30px; }
  blockquote p { font-size: 23px; }
  .legacy-panel dl { grid-template-columns: 1fr; width: 100%; }
  .legacy-panel dl div { border-right: 0; border-bottom: 1px solid rgba(68,55,35,.14); }
  .timeline-featured { grid-template-columns: 1fr; margin-top: 46px; }
  .timeline-feature { min-height: 0; }
  .timeline-history > summary { align-items: flex-start; flex-direction: column; gap: 8px; }
  .timeline-complete { padding-left: 54px; }
  .timeline-complete::before { left: 29px; }
  .timeline-complete > li::before { left: -30px; }
  .timeline-complete details > summary { grid-template-columns: 1fr; gap: 4px; }
  .timeline-complete details > p { padding-left: 4px; }
  .code-panels ol { columns: 1; }
  .code-panels summary { align-items: flex-start; flex-direction: column; gap: 7px; }
  .history-heading { gap: 26px; }
  .leadership-roster, .leadership-archive > div, .leadership-contact { grid-template-columns: 1fr; }
  .leadership-contact .button { grid-column: 1; }
  .guild-house { padding: 34px 26px; }
  .join-form { grid-template-columns: 1fr; padding: 30px 22px; }
  .form-field, .form-field-wide, .form-check, .form-submit, .form-heading { grid-column: 1; }
  .form-heading, .form-submit { align-items: flex-start; flex-direction: column; gap: 10px; }
  .captcha-field { grid-template-columns: 1fr 72px; }
  .captcha-refresh { grid-column: 1 / -1; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { align-items: center; }
  .site-footer nav { flex-wrap: wrap; justify-content: center; }
}

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