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

@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  src: url("fonts/source-sans-3-latin-400-700.woff2") format("woff2");
}

:root {
  --navy: #0c223f;
  --navy-deep: #071c3a;
  --navy-soft: #173755;
  --gold: #c9a65b;
  --gold-light: #d8bb7c;
  --gold-dark: #76531c;
  --parchment: #fdfaf4;
  --sand: #f3ebdf;
  --stone: #e9e1d1;
  --ink: #172235;
  --white: #fff;
  --display: "Cinzel", Georgia, serif;
  --body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 28px 75px rgba(7, 28, 58, .17);
  --content: 1520px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--parchment); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; margin: 0; overflow-x: hidden; }
::selection { background: var(--gold); color: var(--navy-deep); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link { background: white; left: 1rem; padding: .7rem 1rem; position: fixed; top: -80px; z-index: 100; }
.skip-link:focus { top: 1rem; }
.shell { margin-inline: auto; max-width: var(--content); padding-inline: clamp(1.25rem, 5vw, 5rem); }

.concept-bar { align-items: center; background: var(--navy-deep); color: white; display: flex; font-size: .75rem; gap: 1rem; justify-content: center; min-height: 34px; padding: .35rem clamp(1rem, 4vw, 4rem); }
.concept-bar > span { color: var(--gold-light); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.concept-bar p { color: rgba(255,255,255,.62); margin: 0; }
.concept-bar a { margin-left: auto; text-decoration: none; }
.site-header { align-items: center; background: rgba(253,250,244,.95); border-bottom: 1px solid rgba(12,34,63,.11); display: flex; height: 88px; justify-content: space-between; padding: 0 clamp(1.25rem, 5vw, 5rem); position: sticky; top: 0; z-index: 40; backdrop-filter: blur(18px); }
.site-brand { align-items: center; display: flex; flex: 0 0 auto; gap: .85rem; text-decoration: none; }
.site-brand img { border-radius: 50%; height: 55px; width: 55px; }
.site-brand strong, .site-brand small { display: block; }
.site-brand strong { color: var(--navy); font-family: var(--display); font-size: 1.15rem; letter-spacing: .18em; line-height: 1.1; }
.site-brand small { color: #596477; font-size: .65rem; letter-spacing: .05em; text-transform: uppercase; }
.site-header nav { align-items: center; display: flex; gap: clamp(.85rem, 1.8vw, 2rem); }
.site-header nav a { color: rgba(23,34,53,.76); font-size: .86rem; font-weight: 600; text-decoration: none; }
.site-header nav a[aria-current="page"], .site-header nav a:not(.nav-cta):hover { color: var(--navy); }
.site-header .nav-cta { background: var(--navy); border-radius: 999px; color: white; padding: .72rem 1.1rem; }
.member-link { align-items: center; display: inline-flex; gap: .35rem; }
.menu-toggle { background: transparent; border: 0; display: none; padding: .5rem; }
.menu-toggle > span:not(.sr-only) { background: var(--navy); display: block; height: 2px; margin: 5px 0; width: 26px; }

.eyebrow { align-items: center; color: var(--gold-dark); display: flex; font-size: .74rem; font-weight: 700; gap: .75rem; letter-spacing: .15em; margin: 0 0 1.4rem; text-transform: uppercase; }
.eyebrow::before { background: currentColor; content: ""; flex: 0 0 32px; height: 2px; }
.eyebrow-light { color: var(--gold-light); }
.button { align-items: center; border: 0; border-radius: 999px; cursor: pointer; display: inline-flex; font-weight: 700; gap: 1rem; justify-content: center; min-height: 54px; padding: .85rem 1.45rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { box-shadow: 0 12px 28px rgba(7,28,58,.17); transform: translateY(-2px); }
.button-gold { background: var(--gold); color: var(--navy-deep); }
.button-navy { background: var(--navy); color: white; }
.button-light { background: var(--parchment); color: var(--navy); }
.button-outline { background: transparent; border: 1px solid rgba(201,166,91,.6); color: var(--gold-light); }
.button-gold:hover, .button-gold:focus-visible { background: var(--gold-light); color: var(--navy-deep) !important; }
.button-navy:hover, .button-navy:focus-visible { background: var(--navy-soft); color: white !important; }
.button-light:hover, .button-light:focus-visible { background: white; color: var(--navy) !important; }
.button-outline:hover, .button-outline:focus-visible { background: rgba(201,166,91,.12); color: white !important; }
.text-link { color: var(--navy); font-weight: 700; text-decoration: none; }
.text-link span { color: var(--gold-dark); margin-left: .5rem; }
.text-link:hover, .text-link:focus-visible { color: var(--gold-dark) !important; }

.hero { background: linear-gradient(135deg, var(--parchment) 0 60%, #f6efe4 60% 100%); overflow: hidden; position: relative; }
.hero-inner { align-items: center; display: grid; gap: clamp(2rem, 4vw, 4.5rem); grid-template-columns: minmax(0, 1.03fr) minmax(300px, .58fr); padding-block: clamp(4rem, 6vw, 6rem); position: relative; z-index: 2; }
.hero-copy { max-width: 790px; }
.hero h1 { color: var(--navy); font-family: var(--display); font-size: clamp(3.3rem, 5.1vw, 5.6rem); font-weight: 600; letter-spacing: -.045em; line-height: .93; margin: 0 0 1.4rem; overflow-wrap: anywhere; }
.hero h1 em { color: var(--gold-dark); font-style: normal; }
.hero-lede { color: rgba(23,34,53,.75); font-size: clamp(1.08rem, 1.5vw, 1.3rem); max-width: 650px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.hero-values { border-top: 1px solid rgba(12,34,63,.14); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; max-width: 700px; padding-top: 1.1rem; }
.hero-values div { min-width: 0; }
.hero-values div + div { border-left: 1px solid rgba(12,34,63,.14); padding-left: 1.2rem; }
.hero-values strong, .hero-values span { display: block; }
.hero-values strong { color: var(--navy); font-family: var(--display); font-size: .86rem; }
.hero-values span { color: #596477; font-size: .78rem; }
.hero-visual { align-items: center; display: flex; justify-content: center; min-height: 370px; position: relative; }
.seal-wrap { border: 1px solid rgba(201,166,91,.52); border-radius: 50%; box-shadow: var(--shadow); padding: 10px; position: relative; width: min(27vw, 400px); z-index: 3; }
.seal-wrap::before, .seal-wrap::after { border: 1px solid rgba(201,166,91,.32); border-radius: 50%; content: ""; inset: -7%; position: absolute; }
.seal-wrap::after { inset: -15%; opacity: .5; }
.seal-wrap img { border-radius: 50%; position: relative; z-index: 2; }
.statement { background: var(--navy); color: white; overflow: hidden; padding-block: clamp(5rem, 9vw, 9rem); position: relative; }
.statement-grid { display: grid; gap: 3rem; grid-template-columns: 160px 1fr; }
.statement-label { color: var(--gold-light); font-size: .75rem; font-weight: 700; letter-spacing: .17em; padding-top: 1rem; text-transform: uppercase; }
.statement h2 { color: white; font-family: var(--display); font-size: clamp(2.4rem, 4.7vw, 5.2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; margin: 0; max-width: 1200px; overflow-wrap: anywhere; }
.statement-detail { align-items: flex-end; border-top: 1px solid rgba(255,255,255,.18); display: flex; gap: 4rem; justify-content: space-between; margin-top: 4rem; padding-top: 2rem; }
.statement-detail p { color: rgba(255,255,255,.68); font-size: 1.1rem; margin: 0; max-width: 660px; }
.statement-detail a { color: var(--gold-light); font-weight: 700; text-decoration: none; white-space: nowrap; }

.section { padding-block: clamp(5rem, 9vw, 9rem); }
.section-sand { background: var(--sand); }
.section-navy { background: var(--navy); color: white; }
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4, .section-navy h5, .section-navy h6 { color: white; }
.section-intro { display: grid; gap: 0 3rem; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .6fr); }
.section-intro .eyebrow { grid-column: 1 / -1; }
.section-intro h2 { color: var(--navy); font-family: var(--display); font-size: clamp(2.5rem, 4.3vw, 4.7rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; margin: 0; overflow-wrap: anywhere; }
.section-intro > p:last-child { align-self: end; color: rgba(23,34,53,.67); font-size: 1.1rem; margin: 0; }
.priority-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; }
.priority-card { background: white; border: 1px solid var(--stone); min-height: 430px; padding: clamp(2rem, 3vw, 3rem); position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.priority-card:hover { box-shadow: var(--shadow); transform: translateY(-6px); }
.priority-card.card-featured { background: var(--navy); border-color: var(--navy); color: white; }
.priority-card.card-featured h3 { color: white; }
.priority-card.card-featured p { color: rgba(255,255,255,.76); }
.priority-card.card-featured a { color: var(--gold-light); }
.card-number { color: var(--gold-dark); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.card-symbol { align-items: center; border: 1px solid rgba(201,166,91,.5); border-radius: 50%; color: var(--gold-dark); display: flex; font-family: var(--display); font-size: 1.4rem; height: 62px; justify-content: center; margin: 3.2rem 0 2rem; width: 62px; }
.priority-card h3 { color: var(--navy); font-family: var(--display); font-size: 1.45rem; font-weight: 600; margin-bottom: 1rem; }
.priority-card p { color: rgba(23,34,53,.65); }
.priority-card a { bottom: 2.5rem; color: var(--navy); font-weight: 700; position: absolute; text-decoration: none; }
.card-featured .card-number, .card-featured .card-symbol, .card-featured a { color: var(--gold-light); }
.card-featured h3 { color: white; }
.card-featured p { color: rgba(255,255,255,.68); }

.community { background: linear-gradient(135deg, #0c223f, #071c3a); color: white; overflow: hidden; padding-block: clamp(5rem, 9vw, 9rem); position: relative; }
.community-grid { display: grid; gap: clamp(3rem, 6vw, 7rem); grid-template-columns: .75fr 1fr; position: relative; z-index: 2; }
.community-heading { height: fit-content; }
.community h2 { color: white; font-family: var(--display); font-size: clamp(2.5rem, 4.3vw, 4.7rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 1.5rem; overflow-wrap: anywhere; }
.community-heading > p:last-child { color: rgba(255,255,255,.68); font-size: 1.1rem; }
.community-steps { border-top: 1px solid rgba(255,255,255,.18); }
.community-steps article { align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.18); display: grid; gap: 2rem; grid-template-columns: 65px 1fr; min-height: 164px; padding: 2.2rem 0; }
.step-number { color: var(--gold-light); font-family: var(--display); font-size: .8rem; }
.community-steps h3 { color: white; font-family: var(--display); font-size: 1.5rem; font-weight: 500; margin: 0 0 .7rem; }
.community-steps p { color: rgba(255,255,255,.65); margin: 0; }
.community-quote { border: 1px solid rgba(201,166,91,.4); margin-top: clamp(4rem, 8vw, 8rem); overflow: hidden; padding: clamp(2.5rem, 5vw, 5rem); position: relative; z-index: 2; }
.community-quote::after { color: rgba(201,166,91,.06); content: "✦"; font-size: 28rem; line-height: 1; position: absolute; right: -5rem; top: -6rem; }
.quote-mark { color: var(--gold); font-family: Georgia, serif; font-size: 6rem; line-height: .5; }
.community-quote p { color: white; font-family: var(--display); font-size: clamp(2.1rem, 3.8vw, 4.3rem); line-height: 1.18; margin: 1.5rem 0 2rem; max-width: 1050px; overflow-wrap: anywhere; position: relative; z-index: 2; }
.community-quote footer { color: var(--gold-light); font-size: .75rem; letter-spacing: .1em; position: relative; text-transform: uppercase; z-index: 2; }

.resource-preview { background: var(--sand); }
.resource-layout { display: grid; gap: 1rem; grid-template-columns: 1.15fr .85fr; margin-top: 4rem; }
.resource-feature { background: white; border: 1px solid var(--stone); padding: clamp(2rem, 4vw, 4rem); }
.resource-kicker, .resource-card .meta, .event-card .meta { color: var(--gold-dark); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.resource-feature h3 { color: var(--navy); font-family: var(--display); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 600; line-height: 1.15; margin: 2rem 0 1rem; }
.resource-feature > p { color: rgba(23,34,53,.64); max-width: 620px; }
.resource-feature ol { list-style: none; margin: 3rem 0; padding: 0; }
.resource-feature li { align-items: flex-start; border-top: 1px solid var(--stone); display: grid; gap: 1.2rem; grid-template-columns: 42px 1fr; padding: 1.25rem 0; }
.resource-feature li > span { color: var(--gold-dark); font-family: var(--display); font-size: .78rem; }
.resource-feature li strong, .resource-feature li small { display: block; }
.resource-feature li strong { color: var(--navy); }
.resource-feature li small { color: #596477; }
.resource-stack { display: grid; gap: 1rem; }
.resource-stack article { background: var(--navy); color: white; min-height: 210px; padding: 2rem; position: relative; }
.resource-stack .resource-kicker { color: var(--gold-light); }
.resource-stack h3 { color: white; font-family: var(--display); font-size: 1.3rem; font-weight: 500; margin: 2rem 3rem .5rem 0; }
.resource-stack p { color: rgba(255,255,255,.62); margin: 0; }

.membership-callout { background: var(--gold); color: var(--navy-deep); overflow: hidden; padding-block: clamp(5rem, 8vw, 8rem); position: relative; }
.membership-callout .eyebrow { color: var(--navy-deep); }
.membership-callout::before { border: 1px solid rgba(7,28,58,.17); border-radius: 50%; content: ""; height: 520px; left: -240px; position: absolute; top: -260px; width: 520px; }
.membership-grid { align-items: center; display: grid; gap: clamp(3rem, 8vw, 9rem); grid-template-columns: 1.05fr .95fr; position: relative; z-index: 2; }
.membership-copy h2 { font-family: var(--display); font-size: clamp(2.7rem, 4.7vw, 5.2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.06; margin: 0 0 1.5rem; overflow-wrap: anywhere; }
.membership-copy p { font-size: 1.12rem; max-width: 650px; }
.membership-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.membership-preview { background: var(--parchment); box-shadow: var(--shadow); padding: clamp(2rem, 4vw, 4rem); position: relative; }
.membership-preview::before, .membership-preview::after { border-color: var(--gold-dark); border-style: solid; content: ""; height: 34px; position: absolute; width: 34px; }
.membership-preview::before { border-width: 1px 0 0 1px; left: 14px; top: 14px; }
.membership-preview::after { border-width: 0 1px 1px 0; bottom: 14px; right: 14px; }
.membership-preview h3 { color: var(--navy); font-family: var(--display); font-size: 1.7rem; margin: 0 0 1.5rem; }
.membership-preview ul { list-style: none; margin: 0; padding: 0; }
.membership-preview li { align-items: center; border-top: 1px solid var(--stone); display: flex; gap: 1rem; padding: 1rem 0; }
.membership-preview li::before { align-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-dark); content: "✦"; display: flex; flex: 0 0 32px; height: 32px; justify-content: center; }

.page-hero { background: var(--navy); color: white; overflow: hidden; padding: clamp(5rem, 10vw, 10rem) 0 clamp(12rem, 23vw, 22rem); position: relative; }
.page-hero::after { background: linear-gradient(180deg, transparent, rgba(7,28,58,.08)), url("los-angeles-horizon.jpg") center bottom / cover no-repeat; bottom: 0; content: ""; height: clamp(240px, 29vw, 430px); left: 0; position: absolute; right: 0; }
.page-hero .shell { position: relative; z-index: 2; }
.page-hero h1 { font-family: var(--display); font-size: clamp(3rem, 6vw, 6.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; margin: 0; max-width: 1050px; overflow-wrap: anywhere; }
.page-hero .lede { color: rgba(255,255,255,.72); font-size: clamp(1.08rem, 1.7vw, 1.35rem); margin: 2rem 0 0; max-width: 730px; }
.page-hero-compact { padding-bottom: clamp(5rem, 10vw, 9rem); }
.page-hero-compact::after { display: none; }
.gold-rule { background: var(--gold); height: 2px; margin: 2rem 0; width: 80px; }
.prose-grid { display: grid; gap: clamp(3rem, 7vw, 8rem); grid-template-columns: .75fr 1.25fr; }
.prose-grid h2, .content-heading { color: var(--navy); font-family: var(--display); font-size: clamp(2.2rem, 3.8vw, 4rem); line-height: 1.1; margin: 0; }
.prose-copy { color: rgba(23,34,53,.72); font-size: 1.08rem; }
.prose-copy p:first-child { color: var(--ink); font-size: 1.3rem; }
.principle-grid, .resource-grid, .event-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; }
.principle-card, .resource-card, .event-card { background: white; border: 1px solid var(--stone); padding: 2rem; }
.principle-card .number { color: var(--gold-dark); font-family: var(--display); }
.principle-card h3, .resource-card h3, .event-card h3 { color: var(--navy); font-family: var(--display); font-size: 1.3rem; margin: 2rem 0 .8rem; }
.principle-card p, .resource-card p, .event-card p { color: rgba(23,34,53,.64); }

.filter-bar { display: flex; flex-wrap: wrap; gap: .65rem; margin: 2.5rem 0; }
.filter-bar button { background: transparent; border: 1px solid rgba(12,34,63,.22); border-radius: 999px; cursor: pointer; padding: .65rem 1rem; }
.filter-bar button.is-active { background: var(--navy); color: white; }
.resource-card { min-height: 315px; position: relative; }
.resource-card a { bottom: 2rem; color: var(--gold-dark); font-weight: 700; position: absolute; text-decoration: none; }
.resource-card[hidden] { display: none; }
.event-card { min-height: 340px; }
.event-card .date-block { align-items: center; border: 1px solid var(--gold); color: var(--navy); display: inline-flex; font-family: var(--display); height: 72px; justify-content: center; text-align: center; width: 72px; }
.event-card a { color: var(--gold-dark); font-weight: 700; text-decoration: none; }

.form-section { background: var(--sand); padding-block: clamp(5rem, 9vw, 9rem); }
.application-layout { display: grid; gap: 2rem; grid-template-columns: minmax(250px,.55fr) minmax(0,1.45fr); }
.application-aside { background: var(--navy); color: white; height: fit-content; padding: clamp(2rem, 4vw, 3.5rem); }
.application-aside h2 { color: white; font-family: var(--display); font-size: 2rem; font-weight: 500; }
.application-aside p { color: rgba(255,255,255,.68); }
.application-aside ol { list-style: none; margin: 2rem 0 0; padding: 0; }
.application-aside li { border-top: 1px solid rgba(255,255,255,.15); color: var(--gold-light); padding: 1rem 0; }
.premium-form { background: var(--parchment); box-shadow: var(--shadow); padding: clamp(2rem, 5vw, 5rem); }
.form-block + .form-block { border-top: 1px solid var(--stone); margin-top: 3rem; padding-top: 3rem; }
.form-block legend { color: var(--navy); font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 600; margin-bottom: .4rem; padding: 0; }
.form-block > p { color: rgba(23,34,53,.6); margin: 0 0 1.8rem; }
fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
.field-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.field-grid .full { grid-column: 1 / -1; }
.premium-form label > span { color: var(--navy); display: block; font-size: .82rem; font-weight: 700; margin-bottom: .45rem; }
.premium-form input:not([type="checkbox"]):not([type="radio"]), .premium-form select, .premium-form textarea, .login-form input { background: white; border: 1px solid #d8cfbf; border-radius: 0; color: var(--ink); min-height: 54px; padding: .8rem .95rem; width: 100%; }
.premium-form textarea { min-height: 145px; resize: vertical; }
.choice-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.choice { align-items: flex-start; background: white; border: 1px solid var(--stone); display: flex; gap: .8rem; padding: 1rem; }
.choice input { flex: 0 0 auto; margin-top: .25rem; }
.choice span { margin: 0 !important; }
.form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.form-status { color: var(--navy); font-size: .9rem; min-height: 1.4rem; }

.login-stage { align-items: stretch; background: var(--navy); display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 122px); }
.login-art { background: linear-gradient(180deg, rgba(7,28,58,.15), rgba(7,28,58,.7)), url("los-angeles-horizon.jpg") center / cover no-repeat; min-height: 720px; padding: clamp(3rem, 7vw, 7rem); position: relative; }
.login-art-copy { bottom: clamp(3rem, 7vw, 7rem); color: white; max-width: 590px; position: absolute; }
.login-art-copy h1 { color: white; font-family: var(--display); font-size: clamp(2.6rem, 4.8vw, 5.2rem); font-weight: 500; line-height: 1; margin: 0 0 1rem; }
.login-art-copy p { color: rgba(255,255,255,.72); font-size: 1.15rem; }
.login-panel { align-items: center; background: var(--parchment); display: flex; justify-content: center; padding: clamp(3rem, 7vw, 7rem); }
.login-card { max-width: 520px; width: 100%; }
.login-card h2 { color: var(--navy); font-family: var(--display); font-size: clamp(2rem, 3vw, 3rem); margin: 0 0 .7rem; }
.login-card > p { color: rgba(23,34,53,.62); }
.login-form { margin-top: 2.5rem; }
.login-form label { display: block; margin-bottom: 1rem; }
.login-form label > span { display: block; font-size: .82rem; font-weight: 700; margin-bottom: .4rem; }
.login-options { align-items: center; display: flex; font-size: .85rem; justify-content: space-between; margin: 1rem 0 1.5rem; }
.login-options label { align-items: center; display: flex; gap: .5rem; margin: 0; }
.login-options a { color: var(--gold-dark); }
.login-form .button { width: 100%; }
.login-divider { align-items: center; color: rgba(23,34,53,.45); display: flex; font-size: .75rem; gap: 1rem; margin: 1.5rem 0; text-transform: uppercase; }
.login-divider::before, .login-divider::after { background: var(--stone); content: ""; flex: 1; height: 1px; }

.portal-body { background: #eef0f2; }
.portal-topbar { align-items: center; background: var(--navy-deep); color: white; display: flex; height: 78px; justify-content: space-between; padding: 0 clamp(1rem, 3vw, 3rem); }
.portal-topbar .site-brand strong { color: white; }
.portal-topbar .site-brand small { color: rgba(255,255,255,.55); }
.portal-user { align-items: center; display: flex; gap: .8rem; }
.avatar { align-items: center; background: var(--gold); border-radius: 50%; color: var(--navy); display: flex; font-weight: 800; height: 42px; justify-content: center; width: 42px; }
.portal-shell { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 78px); }
.portal-sidebar { background: white; border-right: 1px solid #dfe2e5; padding: 2rem 1rem; }
.portal-sidebar p { color: rgba(23,34,53,.45); font-size: .68rem; font-weight: 700; letter-spacing: .12em; margin: 0 1rem .8rem; text-transform: uppercase; }
.portal-sidebar button, .portal-sidebar a { align-items: center; background: transparent; border: 0; border-radius: 8px; color: rgba(23,34,53,.7); cursor: pointer; display: flex; font-weight: 600; gap: .75rem; margin: .2rem 0; padding: .8rem 1rem; text-align: left; text-decoration: none; width: 100%; }
.portal-sidebar .is-active { background: #f2ead9; color: var(--navy); }
.portal-main { padding: clamp(1.5rem, 4vw, 4rem); }
.portal-notice { background: #fff6df; border: 1px solid #e5cc91; color: #624a1c; font-size: .85rem; margin-bottom: 2rem; padding: .9rem 1rem; }
.portal-welcome { align-items: end; display: flex; gap: 2rem; justify-content: space-between; }
.portal-welcome h1 { color: var(--navy); font-family: var(--display); font-size: clamp(2rem, 4vw, 3.8rem); margin: 0; }
.portal-welcome p { color: rgba(23,34,53,.58); margin: .4rem 0 0; }
.member-card { background: linear-gradient(135deg, var(--navy), #153b62); border: 1px solid var(--gold); box-shadow: var(--shadow); color: white; margin: 2.5rem 0; overflow: hidden; padding: clamp(2rem, 4vw, 3.5rem); position: relative; }
.member-card::after { border: 1px solid rgba(201,166,91,.3); border-radius: 50%; content: ""; height: 380px; position: absolute; right: -170px; top: -190px; width: 380px; }
.member-card .eyebrow { color: var(--gold-light); }
.member-card h2, .member-card h3 { color: white; }
.member-card h2 { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 500; margin: 0 0 .7rem; }
.member-card p { color: rgba(255,255,255,.68); max-width: 680px; }
.portal-grid { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); }
.portal-panel { background: white; border: 1px solid #dfe2e5; min-height: 230px; padding: 1.7rem; }
.portal-panel.large { grid-column: span 7; }
.portal-panel.medium { grid-column: span 5; }
.portal-panel.third { grid-column: span 4; }
.portal-panel h3 { color: var(--navy); font-family: var(--display); margin: 0 0 1rem; }
.portal-panel .meta { color: var(--gold-dark); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.portal-panel p { color: rgba(23,34,53,.62); }
.portal-panel a { color: var(--gold-dark); font-weight: 700; text-decoration: none; }
.quick-list { list-style: none; margin: 0; padding: 0; }
.quick-list li + li { border-top: 1px solid #e6e7e8; }
.quick-list a { align-items: center; display: flex; justify-content: space-between; padding: .8rem 0; }

.site-footer { background: linear-gradient(135deg, #06172e 0%, var(--navy) 100%); border-top: 6px solid var(--gold); color: white; overflow: hidden; padding-block: clamp(4rem, 7vw, 6rem) 2rem; position: relative; }
.site-footer::before { border: 1px solid rgba(216,187,124,.16); border-radius: 50%; content: ""; height: clamp(22rem, 36vw, 34rem); pointer-events: none; position: absolute; right: clamp(-17rem, -14vw, -9rem); top: clamp(-22rem, -20vw, -13rem); width: clamp(22rem, 36vw, 34rem); }
.site-footer::after { border: 1px solid rgba(216,187,124,.08); border-radius: 50%; content: ""; height: clamp(30rem, 48vw, 44rem); pointer-events: none; position: absolute; right: clamp(-23rem, -19vw, -13rem); top: clamp(-30rem, -27vw, -18rem); width: clamp(30rem, 48vw, 44rem); }
.footer-grid { display: grid; gap: 3rem 5rem; grid-template-columns: auto 1fr; position: relative; z-index: 2; }
.footer-brand { align-items: center; display: flex; gap: 1rem; }
.footer-brand img { border: 1px solid rgba(216,187,124,.48); border-radius: 50%; box-shadow: 0 0 0 7px rgba(216,187,124,.06); height: 84px; width: 84px; }
.footer-brand strong, .footer-brand span { display: block; }
.footer-brand strong { font-family: var(--display); letter-spacing: .18em; }
.footer-brand span { color: rgba(255,255,255,.5); font-size: .72rem; }
.footer-links { align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; justify-content: flex-end; padding-block: 1.25rem; }
.footer-links a { color: rgba(255,255,255,.75); font-size: .84rem; text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--gold-light) !important; }
.site-header .nav-cta:hover, .site-header .nav-cta:focus-visible { background: var(--gold); color: var(--navy-deep) !important; }
.disclaimer { border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.5); font-size: .75rem; grid-column: 1 / -1; margin: 0; padding-top: 1.5rem; }
.copyright { color: rgba(255,255,255,.62); font-size: .7rem; grid-column: 1 / -1; margin: 0; }
.prototype-toast { background: var(--navy); border: 1px solid var(--gold); border-radius: 999px; bottom: 1.5rem; color: white; left: 50%; max-width: calc(100% - 2rem); opacity: 0; padding: .8rem 1.2rem; pointer-events: none; position: fixed; text-align: center; transform: translate(-50%, 24px); transition: .2s ease; z-index: 60; }
.prototype-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1120px) {
  .site-header nav { gap: .8rem; }
  .site-header nav a { font-size: .78rem; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(230px, .48fr); }
  .hero-visual { min-height: 300px; }
  .seal-wrap { width: min(31vw, 320px); }
  .priority-grid, .principle-grid, .resource-grid, .event-grid { grid-template-columns: 1fr 1fr; }
  .priority-card:last-child, .principle-card:last-child { grid-column: 1 / -1; }
  .community-grid, .resource-layout, .membership-grid, .prose-grid { grid-template-columns: 1fr; }
  .application-layout { grid-template-columns: 1fr; }
  .application-aside ol { display: grid; grid-template-columns: repeat(3,1fr); }
  .portal-panel.large, .portal-panel.medium { grid-column: span 12; }
  .portal-panel.third { grid-column: span 6; }
}

@media (max-width: 880px) {
  .concept-bar p { display: none; }
  .site-header { height: 76px; padding: 0 1rem; }
  .site-brand img { height: 48px; width: 48px; }
  .menu-toggle { display: block; }
  .site-header nav { background: var(--parchment); border-bottom: 1px solid var(--stone); box-shadow: 0 18px 30px rgba(7,28,58,.12); display: none; flex-direction: column; gap: 0; left: 0; padding: 1rem; position: absolute; right: 0; top: 76px; }
  .site-header nav.is-open { display: flex; }
  .site-header nav a { font-size: .9rem; min-height: 48px; padding: .85rem; width: 100%; }
  .site-header .nav-cta { border-radius: 0; text-align: center; }
  .hero-inner { grid-template-columns: 1fr; padding-block: 4.5rem; }
  .hero-values { grid-template-columns: 1fr; }
  .hero-values div { padding: .8rem 0 !important; }
  .hero-values div + div { border-left: 0; border-top: 1px solid rgba(12,34,63,.14); }
  .hero-visual { display: none; }
  .statement-grid, .section-intro { grid-template-columns: 1fr; }
  .statement-detail { align-items: flex-start; flex-direction: column; gap: 2rem; }
  .section-intro > p:last-child { margin-top: 1.5rem; }
  .field-grid, .choice-grid { grid-template-columns: 1fr; }
  .application-aside ol { display: block; }
  .login-stage { grid-template-columns: 1fr; }
  .login-art { min-height: 500px; }
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { border-bottom: 1px solid #dfe2e5; border-right: 0; display: flex; gap: .4rem; overflow-x: auto; padding: .7rem; }
  .portal-sidebar p { display: none; }
  .portal-sidebar button, .portal-sidebar a { flex: 0 0 auto; width: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .concept-bar { justify-content: space-between; }
  .concept-bar a { font-size: 0; }
  .concept-bar a span { font-size: .9rem; }
  .site-brand small { display: none; }
  .hero h1 { font-size: clamp(2.65rem, 13.8vw, 3.7rem); }
  .hero-actions, .membership-actions { align-items: flex-start; flex-direction: column; }
  .hero-values { grid-template-columns: repeat(3, 1fr); }
  .hero-values div { padding: .65rem .4rem !important; }
  .hero-values div:first-child { padding-left: 0 !important; }
  .hero-values div + div { border-left: 1px solid rgba(12,34,63,.14); border-top: 0; }
  .hero-values strong { font-size: .7rem; }
  .hero-values span { font-size: .68rem; line-height: 1.25; }
  .priority-grid, .principle-grid, .resource-grid, .event-grid { grid-template-columns: 1fr; }
  .priority-card:last-child, .principle-card:last-child { grid-column: auto; }
  .community-steps article { gap: 1rem; grid-template-columns: 38px 1fr; }
  .page-hero { padding-bottom: 12rem; }
  .page-hero-compact { padding-bottom: 5rem; }
  .login-panel { padding-inline: 1.25rem; }
  .portal-user span:not(.avatar) { display: none; }
  .portal-welcome { align-items: flex-start; flex-direction: column; }
  .portal-panel.large, .portal-panel.medium, .portal-panel.third { grid-column: span 12; }
}

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