:root{color-scheme:dark;--bg:#100d1b;--ink:#f0f3ee;--muted:#b5b0bf;--accent:#f3b475;--line:#3c3049;--surface:#1b1426}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;overflow-wrap:break-word;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.skip{position:absolute;top:-100px;z-index:5;background:var(--bg);padding:16px}
.skip:focus{top:0}
header,main,footer{max-width:1440px;margin:auto}
header{flex-wrap:wrap;padding:22px 5%;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line)}
.wordmark{font-weight:800;letter-spacing:.14em;font-size:19px}
.wordmark span{display:block;font-size:12px;letter-spacing:.18em;color:var(--muted)}
nav{display:flex;flex-wrap:wrap;gap:24px;font-size:14px}
nav a{display:inline-flex;align-items:center;min-height:44px}
nav a:hover{color:var(--accent)}
.hero{padding:40px 5% 22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:28px;background:radial-gradient(ellipse at 85% 35%,#60377244,transparent 70%)}
.hero-copy{max-width:620px}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:bold;color:var(--accent);margin:0 0 18px}
h1{font-size:clamp(38px,4.2vw,60px);line-height:1.07;letter-spacing:-.045em;font-weight:600;margin:0 0 24px}
h1 em{font-style:normal;color:var(--accent)}
.intro{color:var(--muted);font-size:18px;line-height:1.7;margin:0 0 24px}
.button{max-width:100%;min-height:48px;text-align:center;white-space:normal;display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:13px 20px;background:var(--accent);color:var(--bg);font-size:14px;font-weight:bold;border:1px solid var(--accent)}
.button:hover{background:#ffcf9f}
.hero-art{margin:0;min-width:0}
.hero-art img{display:block;width:100%;height:auto}
.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:18px;font-size:12px;letter-spacing:.12em;color:var(--muted)}
.section{padding:48px 5%;border-top:1px solid var(--line)}
.about{display:grid;grid-template-columns:1fr 1.35fr;gap:40px}
.about .eyebrow{grid-column:1/-1;margin-bottom:-20px}
h2{font-size:clamp(30px,3.2vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.14;margin:0 0 20px}
.section p:not(.eyebrow){color:var(--muted);margin-top:0}
.about h2{margin-bottom:0}
.about p:last-child,.columns p:last-child{margin-bottom:0}
.section-heading{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:24px}
.section-heading h2{margin-bottom:0}
.section-heading>p{max-width:460px;margin-bottom:0}
.life{background:linear-gradient(120deg,#251a32,#15111e)}
.life-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px}
.life-lead{border-left:3px solid var(--accent);padding-left:24px}
.life-lead h3{font-size:26px;margin:0 0 12px}
.life-details{display:grid;gap:20px}
.life-details article{border-bottom:1px solid var(--line);padding-bottom:16px}
.life-details article:last-child{border:0;padding-bottom:0}
.life-details h3{margin:0 0 6px;font-size:19px}
.life-details p{margin-bottom:0}
.columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.columns article{border-top:2px solid var(--line);padding-top:18px}
.number{font-size:14px;color:var(--accent)}
h3{font-size:22px;line-height:1.3;font-weight:500;margin:12px 0}
.charter{display:flex;align-items:center;justify-content:space-between;gap:32px;background:#211729}
.charter>div{max-width:720px}
.charter p:last-child{margin-bottom:0}
.outline{overflow-wrap:anywhere;background:transparent;color:var(--accent);flex-shrink:0}
.outline:hover{color:var(--bg)}
footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 5%;font-size:12px;color:var(--muted)}
footer .wordmark{font-size:14px;color:var(--ink)}
/* Let grid and flex children shrink without forcing horizontal scrolling. */
.hero > *, .about > *, .life-grid > *, .columns > *, .section-heading > *, .charter > * { min-width: 0; }
@media (max-width: 56.25rem) {
  header { gap: 12px; }
  nav { column-gap: 20px; row-gap: 0; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  .hero-copy { max-width: none; }
  .hero-art { grid-row: 1; width: 100%; max-width: 640px; justify-self: center; }
  .hero h1 { font-size: clamp(2.125rem, 5.8vw, 3rem); }
  .intro { font-size: 1rem; }
  .about, .life-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .about .eyebrow { margin-bottom: 0; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 16px; max-width: none; }
  .columns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .charter { align-items: stretch; flex-direction: column; gap: 24px; }
  .charter .button { align-self: flex-start; }
  footer { flex-wrap: wrap; gap: 12px 24px; }
  footer p { width: 100%; order: 3; margin: 0; }
}
@media (max-width: 40rem) {
  header { align-items: stretch; flex-direction: column; gap: 14px; padding: 18px 5% 12px; }
  .wordmark { font-size: 1.0625rem; }
  .wordmark span { font-size: .75rem; }
  nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-size: .875rem; }
  nav a { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .hero { gap: 22px; }
  .hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
  h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  h3 { font-size: 1.25rem; }
  .hero-bottom { flex-direction: column; gap: 6px; font-size: .75rem; }
  .section { padding: 32px 5%; }
  .life-lead { padding-left: 16px; }
  .life-lead h3 { font-size: 1.5rem; }
  .section-heading { margin-bottom: 22px; }
  .button { width: 100%; gap: 12px; padding: 13px 16px; font-size: .875rem; }
  footer { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Light, shadow, and overlapping surfaces give the page a sense of depth. */
body { background: radial-gradient(ellipse at 0 35%, #39214844, transparent 55%), var(--bg); }
header { position: relative; z-index: 1; background: linear-gradient(120deg, #201729, #100d1b); box-shadow: 0 12px 32px #05030933; }
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 8% 4% 12% 35%; border-radius: 50%; background: radial-gradient(ellipse, #ae66d32b, #f3b4750d 45%, transparent 70%); }
.hero-art { position: relative; padding: 10px; border: 1px solid #b181ca38; border-radius: 12px; background: linear-gradient(145deg, #ffffff0a, #100d1b55); box-shadow: 0 24px 45px -20px #000c, inset 0 1px 0 #ffffff12; }
.hero-art img { border-radius: 5px; }
.hero h1 em { text-shadow: 0 3px 26px #f3b47522; }
.about { background: linear-gradient(160deg, #ffffff03, transparent 65%); }
.life { position: relative; background: radial-gradient(ellipse at 0 0, #784a8d33, transparent 65%), linear-gradient(120deg, #251a32, #15111e); box-shadow: inset 0 1px 0 #ffffff08, inset 0 -20px 35px -30px #000; }
.life-lead { padding: 24px; border-radius: 0 10px 10px 0; background: linear-gradient(135deg, #ffffff07, #100d1b55); box-shadow: 0 18px 30px -24px #000; }
.columns article { padding: 24px; border: 1px solid #71518166; border-top: 2px solid #a577b8; border-radius: 10px; background: linear-gradient(145deg, #30213e, #181220); box-shadow: 0 16px 28px -20px #000, inset 0 1px 0 #ffffff0a; }
.number { display: inline-block; padding: 3px 10px; border: 1px solid #f3b47533; border-radius: 4px; background: #f3b4750a; }
.charter { background: radial-gradient(ellipse at 100% 100%, #86533722, transparent 65%), linear-gradient(130deg, #2c1e36, #191320); box-shadow: inset 0 1px 0 #ffffff0c; }
.button { border-radius: 5px; box-shadow: 0 8px 20px -12px #f3b47580; }
nav a { position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
nav a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .button, .columns article { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
  nav a::after { transition: transform .25s ease; }
  .hero-art { animation: settle-in 1s cubic-bezier(.2,.7,.2,1) both; }
  .hero::before { animation: light-arrives 3s ease-out both; }
  @keyframes settle-in { from { transform: translateY(12px); } to { transform: translateY(0); } }
  @keyframes light-arrives { from { opacity: .3; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
}
@media (hover: hover) and (pointer: fine) {
  nav a:hover::after { transform: scaleX(1); }
  .columns article:hover { border-color: #bd8bd1; box-shadow: 0 24px 35px -20px #000c, inset 0 1px 0 #ffffff16; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .columns article:hover { transform: translateY(-5px); }
  .button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px #f3b47566; }
}
@media (max-width: 40rem) {
  .hero-art { padding: 6px; border-radius: 8px; }
  .life-lead, .columns article { padding: 20px; }
}

/* A fixed star field sits behind the scrolling page surfaces. */
:root { --header-height: 110px; }
html { scroll-padding-top: calc(var(--header-height) + 20px); }
body { position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 80% 20%, #864ba72e, transparent 48%), radial-gradient(ellipse at 10% 75%, #49367c33, transparent 50%), radial-gradient(1px 1px at 19px 31px, #eee2ff80 70%, transparent 100%) 0 0 / 137px 173px, radial-gradient(1px 1px at 73px 97px, #f3b47566 70%, transparent 100%) 0 0 / 229px 251px, radial-gradient(1.5px 1.5px at 127px 61px, #d6b5eb66 70%, transparent 100%) 0 0 / 337px 293px; }
header { position: sticky; top: 0; z-index: 10; background: #17101ff5; border-bottom-color: #b181ca55; box-shadow: 0 12px 32px #05030966; }
@supports (backdrop-filter: blur(12px)) {
  header { background: #17101fe8; backdrop-filter: blur(12px); }
}
nav a[aria-current="location"] { color: var(--accent); }
nav a[aria-current="location"]::after { transform: scaleX(1); }
.skip { position: fixed; z-index: 20; }
@media (max-width: 40rem) {
  :root { --header-height: 160px; }
  header { padding-top: 10px; padding-bottom: 8px; gap: 6px; }
  nav { gap: 0 12px; }
  .wordmark span { display: none; }
}
/* Keep content accessible when a landscape screen or zoom leaves little room. */
@media (max-height: 30rem) {
  header { position: relative; }
  html { scroll-padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { position: absolute; }
}