:root {
  --ink: #111519;
  --ink-soft: #20272c;
  --gold: #e3b452;
  --gold-deep: #af7625;
  --gold-light: #f7dda0;
  --cream: #f4f0e7;
  --cloud: #ddd9d0;
  --line: rgba(227, 180, 82, .24);
  --orange: #d76224;
  --green: #6f8e73;
  --display: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
.skip-link { position: absolute; left: -999px; top: auto; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; padding: .75rem 1rem; color: var(--ink); background: var(--gold); border-radius: .4rem; }
.eyebrow { margin: 0; color: var(--gold); font-size: .7rem; font-weight: 800; letter-spacing: .16em; line-height: 1.35; text-transform: uppercase; }

/* Official profile mark: shown intact, without the crop that was needed for the prior screenshot. */
.brand-seal { display: block; width: 11.55rem; height: 11.55rem; overflow: hidden; border: 2px solid var(--gold); border-radius: 50%; background: #070707; box-shadow: 0 0 0 8px rgba(227,180,82,.12), 0 20px 45px rgba(0,0,0,.34); }
.brand-seal img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Link on bio */
.bio-page { min-height: 100vh; color: var(--cream); background: radial-gradient(circle at 90% 4%, rgba(227,180,82,.28), transparent 26rem), radial-gradient(circle at 4% 86%, rgba(215,98,36,.25), transparent 23rem), var(--ink); }
.bio-page::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(90deg, rgba(227,180,82,.08) 1px, transparent 1px), linear-gradient(rgba(227,180,82,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.bio-shell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2.25rem 1.15rem 1.5rem; }
.bio-card { width: min(100%, 34rem); text-align: center; }
.bio-card .brand-seal { margin: 0 auto 1.75rem; }
.bio-card h1 { margin: .55rem 0 .75rem; font-family: var(--display); font-size: clamp(2.5rem, 10vw, 4.55rem); font-weight: 500; letter-spacing: -.065em; line-height: .84; }
.bio-card h1 span { color: var(--gold); }
.bio-intro { max-width: 28rem; margin: 0 auto 1.6rem; color: rgba(244,240,231,.78); font-size: .95rem; line-height: 1.55; }
.bio-links { display: grid; gap: .72rem; text-align: left; }
.bio-link { display: grid; grid-template-columns: 2.65rem 1fr auto; align-items: center; gap: .85rem; min-height: 5rem; padding: .8rem .95rem; border: 1px solid rgba(244,240,231,.14); border-radius: 1rem; background: rgba(255,255,255,.055); transition: transform .2s ease, background .2s ease, border-color .2s ease; backdrop-filter: blur(8px); }
.bio-link:hover, .bio-link:focus-visible { transform: translateY(-2px); border-color: var(--gold); background: rgba(255,255,255,.105); outline: none; }
.bio-link--primary { color: var(--ink); border-color: var(--gold); background: var(--gold); }
.bio-link--primary:hover, .bio-link--primary:focus-visible { background: var(--gold-light); }
.link-icon { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; overflow: hidden; border: 1px solid rgba(227,180,82,.6); border-radius: .75rem; color: var(--ink); background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: inset 0 1px rgba(255,255,255,.58), 0 6px 15px rgba(0,0,0,.14); }
.link-icon svg { width: 1.38rem; height: 1.38rem; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bio-link--primary .link-icon { border-color: rgba(247,221,160,.48); color: var(--gold-light); background: linear-gradient(135deg, #20282d, var(--ink)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 6px 15px rgba(0,0,0,.12); }
.bio-link strong, .bio-link small { display: block; }
.bio-link strong { font-size: .95rem; }
.bio-link small { margin-top: .17rem; opacity: .69; font-size: .72rem; line-height: 1.2; }
.link-arrow { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.bio-link:hover .link-arrow, .bio-link:focus-visible .link-arrow { transform: translateX(3px); }
.age-strip { display: flex; justify-content: center; align-items: center; gap: .75rem; margin: 1.3rem auto 0; color: rgba(244,240,231,.72); font-size: .68rem; }
.age-strip b { color: var(--gold); }
.age-strip i { width: .24rem; height: .24rem; border-radius: 50%; background: var(--gold); }
.bio-shell footer { margin-top: 1.35rem; color: rgba(244,240,231,.58); font-size: .7rem; line-height: 1; text-align: center; }
.bio-shell footer a { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .78rem; border: 1px solid rgba(244,240,231,.12); border-radius: 999px; background: rgba(255,255,255,.045); white-space: nowrap; }
.bio-shell footer a::before { content: ''; width: .35rem; height: .35rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(227,180,82,.12); }
.bio-shell footer a:hover, .bio-shell footer a:focus-visible { border-color: rgba(227,180,82,.65); color: var(--gold); outline: none; }

/* Full website */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 76rem; margin: 0 auto; padding: 1.05rem 1.35rem; }
.site-brand { display: inline-flex; align-items: center; gap: .68rem; font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: .95; }
.site-brand small { display: block; margin-top: .25rem; color: #6f6d67; font-family: var(--sans); font-size: .53rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.brand-seal--mini { width: 2.4rem; height: 2.4rem; border-width: 1px; box-shadow: none; }
.site-header nav { display: flex; align-items: center; gap: 1.15rem; font-size: .76rem; font-weight: 750; }
.site-header nav > a:not(.header-cta) { color: #5c5a55; }
.header-cta { padding: .65rem .9rem; border-radius: .45rem; color: var(--cream); background: var(--ink); }
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(20rem, .88fr); align-items: center; gap: 2rem; min-height: 40rem; padding: 3rem max(1.35rem, calc((100vw - 73rem)/2)); overflow: hidden; color: var(--cream); background: var(--ink); }
.hero-copy { position: relative; z-index: 1; max-width: 43rem; }
.hero .eyebrow { margin-bottom: 1.1rem; }
.hero h1 { margin: 0; font-family: var(--display); font-size: clamp(3.25rem, 7.1vw, 6.25rem); font-weight: 500; letter-spacing: -.07em; line-height: .84; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-text { max-width: 34rem; margin: 1.5rem 0 0; color: rgba(244,240,231,.74); font-size: 1rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.1rem; min-height: 3rem; padding: .8rem 1.1rem; border: 1px solid transparent; border-radius: .45rem; font-size: .78rem; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); outline: none; }
.button--gold { color: var(--ink); background: var(--gold); }
.button--gold:hover, .button--gold:focus-visible { background: var(--gold-light); }
.button--ghost { border-color: rgba(244,240,231,.32); color: var(--cream); }
.button--ghost:hover, .button--ghost:focus-visible { background: rgba(255,255,255,.1); }
.hero-art { position: relative; display: grid; min-height: 28rem; place-items: center; isolation: isolate; }
.hero-art::before { content: ''; position: absolute; width: 28rem; height: 28rem; border: 1px solid rgba(227,180,82,.28); border-radius: 50%; }
.hero-art::after { content: ''; position: absolute; width: 18rem; height: 18rem; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #e8c46e, #9d6c1d 72%); opacity: .23; filter: blur(2px); }
.brand-seal--hero { z-index: 2; width: 15rem; height: 15rem; }
.hero-art p { position: absolute; z-index: 3; bottom: 2rem; margin: 0; color: var(--gold); font-family: var(--display); font-size: 1.35rem; font-style: italic; }
.hero-art p span { padding: 0 .3rem; color: var(--cream); }
.hero-orbit { position: absolute; border: 1px solid rgba(244,240,231,.15); border-radius: 50%; }
.hero-orbit--one { width: 34rem; height: 11rem; transform: rotate(-38deg); }
.hero-orbit--two { width: 32rem; height: 13rem; transform: rotate(44deg); }
.intro-band { display: grid; grid-template-columns: .7fr 1.15fr .9fr; gap: 2rem; align-items: start; max-width: 76rem; margin: 0 auto; padding: 6rem 1.35rem; }
.intro-band h2, .section-heading h2, .contact-panel h2 { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.65rem); font-weight: 500; letter-spacing: -.055em; line-height: .97; }
.intro-band > p:last-child { margin: .3rem 0 0; color: #5c5a55; font-size: .92rem; line-height: 1.75; }
.programs { padding: 5.5rem max(1.35rem, calc((100vw - 73rem)/2)); color: var(--cream); background: #1b2226; }
.section-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; max-width: 43rem; margin-bottom: 2rem; }
.section-heading h2 { margin-top: .8rem; }
.program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.program-card { position: relative; min-height: 23rem; padding: 1.75rem; overflow: hidden; border-radius: .7rem; background: linear-gradient(140deg, #b95526, #592a1b); }
.program-card--society { background: linear-gradient(140deg, #77966c, #263e2f); }
.program-card::after { content: ''; position: absolute; right: -4rem; bottom: -7rem; width: 20rem; height: 20rem; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 3.75rem rgba(255,255,255,.045), 0 0 0 7.5rem rgba(255,255,255,.035); }
.program-card .eyebrow { color: rgba(255,255,255,.7); }
.program-card h3 { position: relative; z-index: 1; margin: .5rem 0 0; font-family: var(--display); font-size: clamp(3.2rem, 7vw, 5.5rem); font-weight: 500; letter-spacing: -.07em; line-height: .85; }
.program-card > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 17rem; margin: 1rem 0; color: rgba(255,255,255,.81); line-height: 1.5; }
.program-card a { position: absolute; z-index: 2; left: 1.75rem; bottom: 1.7rem; padding-bottom: .2rem; border-bottom: 1px solid currentColor; font-size: .75rem; font-weight: 800; }
.program-card a span { padding-left: .55rem; color: var(--gold-light); }
.program-number { position: absolute; z-index: 1; top: 1.75rem; right: 1.75rem; color: rgba(255,255,255,.7); font-family: var(--display); font-size: 1.2rem; }
.contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 73rem; margin: 0 auto; padding: 5.5rem 1.35rem; }
.contact-panel h2 { margin-top: .6rem; }
.contact-panel p:last-child { max-width: 34rem; margin: 1rem 0 0; color: #5c5a55; line-height: 1.65; }
.button--dark { flex: 0 0 auto; color: var(--cream); background: var(--ink); }
.button--dark:hover, .button--dark:focus-visible { background: var(--ink-soft); }
.site-footer { display: grid; grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr); align-items: center; gap: 1.2rem; padding: 1.25rem max(1.35rem, calc((100vw - 73rem)/2)); border-top: 1px solid #d7d1c7; color: #6f6d67; font-size: .72rem; }
.site-footer .site-brand { gap: .78rem; }
.footer-details { display: flex; align-items: center; justify-content: center; gap: .65rem; white-space: nowrap; }
.footer-details i { width: .25rem; height: .25rem; border-radius: 50%; background: var(--gold); }
.footer-details a { color: var(--ink); font-size: .69rem; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(17,21,25,.24); text-underline-offset: .23rem; }
.footer-details a:hover, .footer-details a:focus-visible { color: var(--orange); outline: none; }
.footer-mark { display: block; width: 3.2rem; height: 3.2rem; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(17,21,25,.13); }
.footer-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.made-by { justify-self: end; display: inline-flex; align-items: center; gap: .32rem; color: #6f6d67; font-size: .67rem; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(111,109,103,.46); text-underline-offset: .25rem; white-space: nowrap; }
.made-by span { color: var(--gold); font-size: .9rem; line-height: 1; text-decoration: none; }
.made-by:hover, .made-by:focus-visible { color: var(--ink); outline: none; }

@media (max-width: 760px) {
  .site-header { padding: .9rem 1rem; }
  .site-header nav > a:not(.header-cta) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: .8rem; padding: 3.9rem 1.35rem 2.1rem; }
  .hero h1 { font-size: clamp(3.35rem, 16vw, 4.8rem); }
  .hero-text { font-size: .94rem; }
  .hero-art { min-height: 19rem; margin-top: -.3rem; }
  .hero-art::before { width: 22rem; height: 22rem; }
  .brand-seal--hero { width: 11.6rem; height: 11.6rem; }
  .hero-orbit--one { width: 26rem; height: 9rem; }
  .hero-orbit--two { width: 25rem; height: 10rem; }
  .hero-art p { bottom: .15rem; }
  .intro-band { grid-template-columns: 1fr; gap: 1.2rem; padding: 4rem 1.35rem; }
  .intro-band h2 { font-size: 2.7rem; }
  .programs { padding-top: 4rem; padding-bottom: 4rem; }
  .program-grid { grid-template-columns: 1fr; }
  .program-card { min-height: 20.5rem; }
  .contact-panel { display: block; padding: 4.5rem 1.35rem; }
  .contact-panel .button { margin-top: 1.4rem; }
  .site-footer { grid-template-columns: 1fr; justify-items: start; gap: .85rem; padding: 1.5rem 1.35rem; }
  .footer-details { justify-content: flex-start; flex-wrap: wrap; gap: .55rem; white-space: normal; }
  .made-by { justify-self: start; }
}

@media (max-width: 390px) {
  .bio-shell { padding-left: .8rem; padding-right: .8rem; }
  .bio-card h1 { font-size: 2.9rem; }
  .age-strip { gap: .45rem; font-size: .61rem; }
  .bio-link { gap: .7rem; padding-left: .75rem; padding-right: .75rem; }
  .bio-shell footer { font-size: .64rem; }
}