:root {
  --paper: #f4f1e8;
  --paper-deep: #e9e5d9;
  --ink: #17231e;
  --ink-soft: #56635b;
  --line: #cfcfc2;
  --accent: #d9ee83;
  --accent-strong: #c8e356;
  --dark: #17231e;
  --white: #fbfaf6;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --page-width: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
::selection { color: var(--ink); background: var(--accent); }
.skip-link { position: absolute; z-index: 1000; top: -60px; left: 16px; padding: 10px 14px; background: var(--accent); color: var(--ink); }
.skip-link:focus { top: 12px; }
.site-header { height: 86px; padding: 0 max(28px, calc((100vw - var(--page-width)) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(23,35,30,.14); position: relative; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; letter-spacing: -.035em; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; color: var(--paper); background: var(--ink); border-radius: 50%; font-size: 12px; letter-spacing: -.04em; }
.brand-name { font-size: 16px; }.brand-dot, .footer-brand span { color: #809629; }
.main-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 43px); font-size: 12px; font-weight: 600; }
.main-nav > a:not(.nav-contact) { color: #505c54; transition: color .2s ease; }.main-nav > a:hover { color: #78921b; }
.nav-contact { border: 1px solid var(--ink); padding: 10px 15px; border-radius: 999px; }.nav-contact span { margin-left: 8px; }
.menu-toggle { display: none; }
.section-wrap { width: min(var(--page-width), calc(100% - 80px)); margin: 0 auto; }
.hero { position: relative; min-height: 670px; display: grid; grid-template-columns: 1fr .92fr; gap: 60px; align-items: center; padding-top: 76px; padding-bottom: 115px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 14px; }
.eyebrow, .section-topline, .label-kicker, .visual-caption, .image-index, .work-meta, .credential-kind, .timeline-date, .credential-stamp, .video-overlay-label, .contact-topline, .contact-footnote { font-family: var(--mono); font-size: 10px; letter-spacing: .095em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; color: #63715b; }
.eyebrow-line { width: 28px; height: 1px; background: #82935f; display: inline-block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 500; letter-spacing: -.065em; line-height: 1.04; }
h1 { margin-bottom: 26px; font-size: clamp(48px, 5.7vw, 79px); max-width: 770px; }
h1 em, h2 em, .wide-image-title em { font-family: var(--serif); font-weight: 500; letter-spacing: -.065em; }
.hero-intro { max-width: 510px; color: #59645c; font-size: 16px; line-height: 1.85; margin-bottom: 29px; }
.hero-actions { display: flex; gap: 25px; align-items: center; flex-wrap: wrap; }
.button { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 27px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 12px; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }.button-dark { background: var(--ink); color: var(--white); }.button-dark:hover { background: #293c32; }.button-light { background: #4d5d0b; color: var(--ink); }.button-light:hover { background: var(--accent-strong); }
.text-link { font-size: 12px; font-weight: 600; border-bottom: 1px solid #acb2a1; padding-bottom: 4px; }.text-link span { margin-left: 8px; }
.hero-meta { margin-top: 57px; display: flex; align-items: center; gap: 9px; color: #6b756d; font-size: 10px; }
.status-dot, .note-dot { width: 7px; height: 7px; border-radius: 50%; background: #92a943; display: inline-block; box-shadow: 0 0 0 4px rgba(146,169,67,.12); }
.hero-visual { min-height: 480px; position: relative; display: flex; align-items: center; justify-content: center; }
.hero-photo-frame { width: min(100%, 440px); height: 475px; position: relative; z-index: 1; border-radius: 220px 220px 6px 6px; overflow: hidden; background: #b9c1b5; box-shadow: 0 24px 70px rgba(26,40,31,.13); }
.hero-photo { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); }
.hero-photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,28,21,0) 48%, rgba(17,28,21,.55)); pointer-events: none; }
.image-label { position: absolute; z-index: 2; bottom: 24px; left: 25px; display: flex; flex-direction: column; gap: 4px; color: #fff; font-family: var(--serif); font-size: 23px; letter-spacing: -.03em; }
.label-kicker { font-size: 9px; color: #e1ecce; font-family: var(--mono); }
.orbit { position: absolute; border: 1px solid rgba(106,126,81,.35); border-radius: 50%; transform: rotate(-30deg); pointer-events: none; }.orbit-one { width: 490px; height: 230px; }.orbit-two { width: 525px; height: 280px; transform: rotate(54deg); border-color: rgba(106,126,81,.2); }
.hero-sticker { position: absolute; left: -25px; top: 87px; display: flex; align-items: center; gap: 11px; padding: 12px 17px 12px 12px; background: var(--accent); color: var(--ink); z-index: 3; transform: rotate(-7deg); border-radius: 2px; box-shadow: 0 12px 25px rgba(25,36,28,.1); font-size: 10px; line-height: 1.35; font-weight: 600; }
.sticker-icon { display: grid; place-items: center; width: 31px; height: 31px; background: var(--ink); color: var(--accent); border-radius: 50%; font-size: 18px; }
.visual-caption { position: absolute; right: -13px; bottom: 25px; transform: rotate(90deg) translateX(100%); transform-origin: right bottom; color: #6f7a68; font-size: 9px; }
.hero-scroll { position: absolute; left: 0; bottom: 38px; display: flex; gap: 12px; align-items: center; color: #7b8377; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }.scroll-rule { height: 1px; width: 42px; background: #aeb3a4; }
.numbers-band { background: var(--dark); color: var(--paper); }.numbers-inner { width: min(var(--page-width), calc(100% - 80px)); margin: 0 auto; min-height: 150px; display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr 1.1fr; align-items: center; gap: 30px; }.number-item strong { font-family: var(--serif); font-size: 42px; line-height: 1; font-weight: 500; letter-spacing: -.06em; }.number-item strong span { color: var(--accent); font-size: 25px; }.number-item p { margin: 8px 0 0; color: #e1e4d8; font-size: 11px; }.number-item small { display: block; margin-top: 3px; color: #aab6a6; font-size: 9px; }.number-divider { height: 54px; background: rgba(232,235,224,.2); }.numbers-note { justify-self: end; color: #dce1d4; font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.section-space { padding-top: 120px; padding-bottom: 120px; }.section-topline { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--line); color: #6d796a; font-size: 9px; }.section-topline span:last-child { text-align: right; }
.about-grid { display: grid; grid-template-columns: .9fr 1fr; gap: 90px; padding-top: 61px; }.about-heading h2, .section-heading-row h2, .credentials-intro h2, .recognition-grid h2 { margin: 0; font-size: clamp(44px, 5vw, 68px); }.about-heading .eyebrow { margin-bottom: 23px; }.about-copy { padding-top: 5px; max-width: 570px; }.large-copy { font-family: var(--serif); font-size: 25px; line-height: 1.42; letter-spacing: -.035em; margin-bottom: 22px; }.about-copy > p:not(.large-copy) { color: #687169; font-size: 13px; line-height: 1.9; margin-bottom: 16px; }.signature-note { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: 11px; font-weight: 600; }.signature-star { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #b9c2a7; border-radius: 50%; font-size: 16px; color: #7d9138; }
.work { background: #eae7dc; max-width: 100%; width: 100%; padding-left: max(40px, calc((100vw - var(--page-width)) / 2)); padding-right: max(40px, calc((100vw - var(--page-width)) / 2)); }.section-heading-row { display: flex; justify-content: space-between; gap: 50px; align-items: end; padding-top: 54px; margin-bottom: 50px; }.section-heading-row .eyebrow { margin-bottom: 18px; }.section-aside { color: #69736a; font-size: 12px; line-height: 1.8; max-width: 270px; margin: 0 0 6px; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 27px; align-items: start; }.work-card-tall { grid-row: span 2; }.work-image { display: block; position: relative; overflow: hidden; background: #cbd0c3; }.work-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .45s ease; filter: saturate(.83); }.work-image:hover img { transform: scale(1.045); filter: saturate(1); }.image-tall { height: 660px; }.image-short { height: 295px; }.image-wide { height: 360px; }.image-index { position: absolute; top: 18px; left: 18px; z-index: 2; color: white; background: rgba(23,35,30,.7); padding: 7px 9px; border-radius: 2px; font-size: 9px; }.image-arrow { position: absolute; z-index: 2; right: 18px; top: 18px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); font-size: 17px; transition: transform .2s; }.work-image:hover .image-arrow { transform: rotate(45deg); }.work-card-copy { padding-top: 18px; }.work-meta { display: flex; justify-content: space-between; gap: 20px; color: #76816e; font-size: 9px; margin-bottom: 11px; }.work-card h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.045em; font-weight: 600; margin-bottom: 10px; }.work-card p { color: #6a746b; font-size: 12px; line-height: 1.8; max-width: 490px; margin-bottom: 15px; }.tag-row, .timeline-tags { display: flex; flex-wrap: wrap; gap: 7px; }.tag-row span, .timeline-tags span { border: 1px solid #c0c7b7; padding: 5px 9px; border-radius: 999px; color: #61705a; font-size: 9px; line-height: 1.3; }.work-card-wide { grid-column: 2; }.wide-image-title { position: absolute; left: 28px; bottom: 25px; color: white; font-size: clamp(20px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.05em; font-weight: 600; text-shadow: 0 2px 15px rgba(0,0,0,.35); }
.video-feature { display: grid; grid-template-columns: .72fr 1fr; align-items: center; gap: 76px; padding-top: 115px; padding-bottom: 115px; }.video-copy .section-topline { margin-bottom: 55px; }.video-copy .eyebrow { margin-bottom: 17px; }.video-copy h2 { font-size: clamp(40px, 4.2vw, 58px); margin-bottom: 20px; }.video-copy > p:not(.eyebrow) { color: #677168; font-size: 13px; line-height: 1.85; max-width: 380px; }.video-note { display: flex; align-items: flex-start; gap: 10px; padding-top: 10px; font-size: 10px !important; }.note-dot { flex: 0 0 auto; margin-top: 7px; width: 6px; height: 6px; }.video-frame { position: relative; aspect-ratio: 16 / 10; background: #17231e; box-shadow: 0 24px 50px rgba(23,35,30,.14); overflow: hidden; }.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #17231e; }.video-overlay-label { display: flex; align-items: center; gap: 9px; position: absolute; bottom: 16px; left: 16px; color: #fff; background: rgba(23,35,30,.72); padding: 8px 12px; font-size: 8px; pointer-events: none; }.play-glyph { display: grid; place-items: center; width: 20px; height: 20px; background: var(--accent); color: var(--ink); border-radius: 50%; font-size: 8px; padding-left: 2px; }
.experience { padding-top: 105px; }.experience .section-heading-row { margin-bottom: 68px; }.timeline { border-top: 1px solid var(--line); }.timeline-item { display: grid; grid-template-columns: .42fr 1fr; gap: 70px; padding: 35px 0 38px; border-bottom: 1px solid var(--line); }.timeline-date { display: flex; align-items: flex-start; gap: 10px; padding-top: 7px; color: #717b6b; font-size: 10px; }.current-pulse { margin-top: 3px; height: 7px; width: 7px; flex: 0 0 7px; border-radius: 50%; background: #8fa33e; box-shadow: 0 0 0 4px rgba(143,163,62,.15); }.timeline-main h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.045em; margin-bottom: 7px; font-weight: 600; }.timeline-org { color: #7a866d; font-size: 11px; font-weight: 600; margin-bottom: 15px; }.timeline-org span { color: #8a9085; font-weight: 400; }.timeline-main > p:not(.timeline-org) { color: #657068; font-size: 12px; line-height: 1.9; max-width: 760px; margin-bottom: 16px; }.timeline-tags span { border-color: #d0d2c6; }
.credentials { background: var(--dark); color: var(--paper); }.credentials .section-topline { border-color: rgba(238,240,229,.24); color: #b4c1a8; }.credentials-grid { display: grid; grid-template-columns: .76fr 1.1fr; gap: 105px; padding-top: 65px; }.credentials-intro .eyebrow { color: #b4c0a6; }.credentials-intro h2 { margin: 0 0 24px; }.credentials-intro > p:not(.eyebrow) { color: #bdc7ba; font-size: 12px; line-height: 1.9; max-width: 330px; }.credential-stamp { width: 156px; height: 156px; margin-top: 52px; border-radius: 50%; border: 1px solid rgba(217,238,131,.65); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; align-content: center; gap: 6px; font-size: 8px; transform: rotate(-12deg); }.credential-stamp span { font-size: 11px; }.credential-list { border-top: 1px solid rgba(235,238,222,.25); }.credential-item { display: grid; grid-template-columns: 35px 1fr 20px; gap: 18px; align-items: start; padding: 25px 0 26px; border-bottom: 1px solid rgba(235,238,222,.22); }.credential-number { padding-top: 1px; color: var(--accent); font-family: var(--mono); font-size: 10px; }.credential-kind { color: #b6c3a4; font-size: 8px; margin: 0 0 8px; }.credential-item h3 { font-size: 17px; line-height: 1.35; margin-bottom: 5px; letter-spacing: -.025em; font-weight: 500; }.credential-item p:not(.credential-kind) { color: #bac4b9; font-size: 11px; margin-bottom: 0; }.credential-item .credential-detail { margin-top: 7px !important; color: #d6e4b7 !important; }.credential-arrow { color: var(--accent); font-size: 17px; }
.recognition { padding-top: 105px; padding-bottom: 105px; }.recognition-grid { display: grid; grid-template-columns: .75fr 1fr; gap: 105px; padding-top: 62px; }.recognition-grid h2 { font-size: clamp(42px, 4.7vw, 64px); }.recognition-grid .eyebrow { margin-bottom: 19px; }.recognition-points { border-top: 1px solid var(--line); }.recognition-point { display: grid; grid-template-columns: 36px 1fr; gap: 17px; padding: 23px 0; border-bottom: 1px solid var(--line); }.recognition-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #677d32; border: 1px solid #c8cfb9; border-radius: 50%; font-size: 15px; }.recognition-point h3 { font-size: 16px; margin-bottom: 5px; letter-spacing: -.025em; }.recognition-point p { color: #6a756c; font-size: 12px; line-height: 1.8; max-width: 460px; margin: 0; }
.contact-section { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }.contact-inner { min-height: 600px; padding-top: 42px; padding-bottom: 54px; position: relative; }.contact-topline { display: flex; justify-content: space-between; gap: 20px; color: #b4c0ab; border-bottom: 1px solid rgba(238,240,229,.23); padding-bottom: 16px; font-size: 9px; }.contact-inner > .eyebrow { margin-top: 77px; color: #c6d6a2; }.contact-inner h2 { font-size: clamp(54px, 7vw, 94px); margin-bottom: 24px; position: relative; z-index: 1; }.contact-inner h2 em { color: var(--accent); }.contact-copy { color: #c3cbbf; font-size: 13px; line-height: 1.85; max-width: 470px; }.contact-actions { display: flex; align-items: center; gap: 25px; margin-top: 28px; }.contact-secondary { color: #d8dfd2; font-size: 11px; border-bottom: 1px solid #687568; padding-bottom: 4px; }.contact-footnote { color: #a4b1a1; font-size: 8px; margin-top: 24px; letter-spacing: .04em; text-transform: none; }.contact-decoration { position: absolute; right: 10px; bottom: -45px; width: 350px; height: 350px; pointer-events: none; }.contact-decoration > span { position: absolute; right: 10px; bottom: 18px; font-family: var(--serif); font-size: 220px; letter-spacing: -.12em; font-style: italic; color: rgba(217,238,131,.08); }.contact-decoration i { position: absolute; border: 1px solid rgba(217,238,131,.22); border-radius: 50%; inset: 10px; }.contact-decoration i:nth-child(2) { inset: 42px; }.contact-decoration i:nth-child(3) { inset: 75px; }
.site-footer { min-height: 89px; padding: 20px max(28px, calc((100vw - var(--page-width)) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 25px; color: #69756a; font-size: 10px; }.footer-brand { font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: -.09em; color: var(--ink); }.site-footer p { margin: 0; }.footer-right { text-align: right; }.footer-separator { margin: 0 8px; color: #a8ae9e; }
.js-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.js-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .js-reveal { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .section-wrap { width: min(var(--page-width), calc(100% - 56px)); }.site-header { padding-inline: 28px; }.hero { gap: 30px; min-height: 610px; }.hero-photo-frame { height: 420px; }.hero-visual { min-height: 430px; }.orbit-one { width: 400px; }.orbit-two { width: 430px; }.hero-sticker { left: -10px; }.numbers-inner { width: calc(100% - 56px); gap: 20px; }.work { padding-inline: 28px; }.image-tall { height: 570px; }.image-short { height: 260px; }.credentials-grid, .recognition-grid { gap: 65px; }.video-feature { gap: 45px; }.timeline-item { gap: 40px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 77px; }.site-header { height: 72px; padding-inline: 20px; }.brand-mark { width: 35px; height: 35px; }.menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border: 1px solid #c7ccbe; background: transparent; border-radius: 50%; cursor: pointer; }.menu-toggle span { width: 16px; height: 1.5px; margin: 0 auto; background: var(--ink); transition: transform .2s ease; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .main-nav { position: fixed; inset: 72px 0 auto 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 22px 24px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 28px rgba(23,35,30,.08); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }.main-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }.main-nav a { padding: 15px 2px; border-bottom: 1px solid rgba(23,35,30,.1); font-size: 14px; }.main-nav .nav-contact { margin-top: 14px; text-align: center; border: 1px solid var(--ink); padding: 13px 15px; }
  .section-wrap { width: calc(100% - 40px); }.hero { display: flex; flex-direction: column; align-items: stretch; gap: 42px; padding-top: 57px; padding-bottom: 86px; }.hero-copy { padding: 0; }.eyebrow { font-size: 9px; }.hero h1 { font-size: clamp(43px, 11vw, 66px); }.hero-intro { font-size: 14px; }.hero-meta { margin-top: 32px; line-height: 1.5; }.hero-visual { min-height: unset; height: 430px; margin: 0 8px; }.hero-photo-frame { width: 76%; height: 410px; }.orbit-one { width: 100%; height: 210px; }.orbit-two { width: 100%; height: 240px; }.hero-sticker { left: -6px; top: 60px; }.visual-caption { right: -3px; bottom: 18px; }.hero-scroll { bottom: 26px; }
  .numbers-inner { width: calc(100% - 40px); grid-template-columns: 1fr 1fr 1fr; gap: 20px 12px; padding: 28px 0; }.number-divider { display: none; }.number-item strong { font-size: 36px; }.number-item p { font-size: 10px; line-height: 1.4; }.number-item small { font-size: 8px; }.numbers-note { grid-column: 1 / -1; justify-self: start; border-top: 1px solid rgba(232,235,224,.2); width: 100%; padding-top: 17px; font-size: 15px; }
  .section-space { padding-top: 79px; padding-bottom: 79px; }.section-topline { font-size: 8px; }.section-topline span:last-child { max-width: 52%; }.about-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }.about-heading h2, .section-heading-row h2, .credentials-intro h2, .recognition-grid h2 { font-size: clamp(42px, 10vw, 60px); }.large-copy { font-size: 22px; }.about-copy > p:not(.large-copy) { font-size: 12px; }
  .work { padding-inline: 20px; }.section-heading-row { display: block; padding-top: 40px; margin-bottom: 35px; }.section-aside { margin-top: 20px; max-width: 350px; }.work-grid { grid-template-columns: 1fr; gap: 38px; }.work-card-tall { grid-row: auto; }.work-card-wide { grid-column: auto; }.image-tall { height: min(122vw, 530px); }.image-short { height: min(72vw, 350px); }.image-wide { height: min(72vw, 350px); }.work-card h3 { font-size: 21px; }.wide-image-title { font-size: 25px; left: 20px; bottom: 21px; }
  .video-feature { grid-template-columns: 1fr; gap: 33px; padding-top: 79px; padding-bottom: 79px; }.video-copy .section-topline { margin-bottom: 42px; }.video-copy h2 { font-size: clamp(39px, 9vw, 52px); }.video-frame { aspect-ratio: 4 / 3; }
  .experience .section-heading-row { margin-bottom: 36px; }.timeline-item { grid-template-columns: 1fr; gap: 12px; padding: 25px 0 27px; }.timeline-date { font-size: 9px; }.timeline-main h3 { font-size: 21px; }.timeline-main > p:not(.timeline-org) { font-size: 12px; }.credentials-grid { grid-template-columns: 1fr; gap: 42px; padding-top: 42px; }.credentials-intro > p:not(.eyebrow) { max-width: 440px; }.credential-stamp { width: 115px; height: 115px; margin-top: 28px; font-size: 7px; }.credential-item { grid-template-columns: 26px 1fr 15px; gap: 10px; }.credential-item h3 { font-size: 16px; }.credential-item p:not(.credential-kind) { font-size: 10px; }
  .recognition-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }.recognition-point { padding: 19px 0; }.recognition-point h3 { font-size: 15px; }.contact-inner { min-height: 550px; padding-top: 29px; padding-bottom: 36px; }.contact-inner > .eyebrow { margin-top: 58px; }.contact-inner h2 { font-size: clamp(48px, 11vw, 70px); }.contact-copy { font-size: 12px; }.contact-decoration { right: -120px; bottom: -94px; transform: scale(.82); }.contact-footnote { max-width: 285px; line-height: 1.6; }.contact-topline { font-size: 8px; }.site-footer { padding: 20px; display: grid; grid-template-columns: 40px 1fr; gap: 7px 15px; }.site-footer p { font-size: 9px; }.footer-right { grid-column: 1 / -1; text-align: left; margin-top: 8px !important; }
}
@media (max-width: 380px) { .hero-actions { gap: 17px; }.button { gap: 17px; }.hero-visual { height: 375px; }.hero-photo-frame { height: 360px; }.section-topline span:last-child { max-width: 47%; }.number-item strong { font-size: 31px; } }


:root {
  --paper: #0b1210;
  --paper-deep: #121b17;
  --ink: #edf2e9;
  --ink-soft: #b8c4b8;
  --line: rgba(225, 236, 215, .18);
  --accent: #d9ee83;
  --accent-strong: #c8e356;
  --dark: #070c0a;
  --white: #f8faf4;
}
html, body { background: var(--paper); color: var(--ink); }
body { background: #0b1210; }
.site-header { background: rgba(11, 18, 16, .96); border-bottom-color: rgba(225,236,215,.16); backdrop-filter: blur(14px); }
.brand-mark { background: var(--accent); color: #111a13; }
.brand-name, .main-nav > a:not(.nav-contact) { color: #e7eee3; }
.brand-dot, .footer-brand span { color: var(--accent); }
.main-nav > a:hover { color: var(--accent); }
.nav-contact { border-color: rgba(217,238,131,.65); color: var(--accent); }
.menu-toggle { border-color: rgba(225,236,215,.35); }
.menu-toggle span { background: var(--ink); }
.eyebrow { color: #bdc9b2; }
.eyebrow-line { background: var(--accent); }
h1, h2, h3, .large-copy { color: #f0f4ec; }
.hero-intro { color: #c0cbc0; }
.hero-meta, .hero-scroll, .visual-caption { color: #aab7a9; }
.text-link { color: #e4ebde; border-bottom-color: rgba(225,236,215,.4); }
.button-dark { background: var(--accent); color: #111a13; }
.button-dark:hover { background: var(--accent-strong); }
.hero-photo-frame { box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.orbit-one { border-color: rgba(217,238,131,.35); }
.orbit-two { border-color: rgba(217,238,131,.19); }
.hero-scroll .scroll-rule { background: rgba(225,236,215,.45); }
.numbers-band { background: #070c0a; color: #f0f4ec; border-top: 1px solid rgba(225,236,215,.08); border-bottom: 1px solid rgba(225,236,215,.08); }
.number-item p { color: #d9e2d5; }
.number-item small, .numbers-note { color: #bdc9bb; }
.number-divider { background: rgba(225,236,215,.18); }
.section-topline { color: #adbd9d; border-bottom-color: var(--line); }
.about-copy > p:not(.large-copy) { color: #bdc8bd; }
.signature-star { color: var(--accent); border-color: rgba(217,238,131,.5); }
.signature-note { color: #dfe8d9; }
.work { background: #101916; border-top: 1px solid rgba(225,236,215,.08); border-bottom: 1px solid rgba(225,236,215,.08); }
.section-aside { color: #bac7b9; }
.work-card-copy { color: #e6ece2; }
.work-meta { color: #b5c49f; }
.work-card h3 { color: #f0f4ec; }
.work-card p { color: #bdc8bd; }
.tag-row span { color: #d7e1d1; background: rgba(225,236,215,.05); border-color: rgba(225,236,215,.19); }
.image-arrow { color: #121a12; }
.video-feature { color: var(--ink); }
.video-copy > p:not(.eyebrow) { color: #c0cbc0; }
.video-note { color: #adbdad !important; }
.experience { color: var(--ink); }
.timeline { border-top-color: var(--line); }
.timeline-item { border-bottom-color: var(--line); }
.timeline-date { color: #c0ceac; }
.timeline-org { color: #f0f4ec; }
.timeline-org span { color: #abb9aa; }
.timeline-main > p:not(.timeline-org) { color: #bdc8bd; }
.timeline-tags span { color: #c4d4b4; border-color: rgba(217,238,131,.27); }
.credentials { background: #111a16; color: #f0f4ec; border-top: 1px solid rgba(225,236,215,.09); border-bottom: 1px solid rgba(225,236,215,.09); }
.credentials-intro > p:not(.eyebrow) { color: #bdc8bd; }
.credential-stamp { color: var(--accent); border-color: rgba(217,238,131,.45); }
.credential-list { border-top-color: var(--line); }
.credential-item { border-bottom-color: var(--line); }
.credential-kind { color: #bbccaa; }
.credential-item p:not(.credential-kind) { color: #bdc8bd; }
.credential-item .credential-detail { color: #d9eea0 !important; }
.recognition { color: var(--ink); }
.recognition-points { border-top-color: var(--line); }
.recognition-point { border-bottom-color: var(--line); }
.recognition-icon { color: var(--accent); border-color: rgba(217,238,131,.42); }
.recognition-point p { color: #bdc8bd; }
.contact-section { background: #070c0a; }
.contact-topline { color: #bdcbb7; border-bottom-color: rgba(225,236,215,.2); }
.contact-inner > .eyebrow { color: var(--accent); }
.contact-copy { color: #c5d0c4; }
.contact-secondary { color: #e0e8db; border-bottom-color: #7b8b77; }
.contact-footnote { color: #9eae9e; }
.site-footer { background: #080d0b; color: #aebcaf; border-top: 1px solid rgba(225,236,215,.12); }
.footer-brand { color: #f0f4ec; }
.footer-separator { color: #64735f; }
.skip-link { color: #111a13; }

.hero-profile-links { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.profile-links-label { width: 100%; color: #9eae9e; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; margin-bottom: 2px; }
.hero-profile-links a { display: inline-flex; align-items: center; gap: 8px; color: #eaf0e6; font-size: 11px; font-weight: 600; padding: 8px 12px; border: 1px solid rgba(217,238,131,.35); border-radius: 999px; background: rgba(217,238,131,.035); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.hero-profile-links a:hover { color: var(--accent); border-color: var(--accent); background: rgba(217,238,131,.09); transform: translateY(-2px); }
.hero-profile-links .profile-link-cv { border-color: rgba(217,238,131,.75); background: rgba(217,238,131,.11); }
.hero-photo-frame .image-label { max-width: calc(100% - 48px); }
.hero-photo-frame .image-label > span:last-child { font-family: var(--sans); font-size: 12px; line-height: 1.4; letter-spacing: 0; }

.subjects { color: var(--ink); }
.subjects-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; padding-top: 54px; margin-bottom: 42px; }
.subjects-heading h2 { margin: 0; font-size: clamp(42px, 5vw, 66px); }
.subjects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.subject-card { min-height: 215px; padding: 28px 28px 25px; border: 1px solid rgba(225,236,215,.16); background: linear-gradient(140deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.subject-number { display: inline-block; color: var(--accent); font-family: var(--mono); font-size: 10px; margin-bottom: 18px; }
.subject-card h3 { font-size: 21px; margin-bottom: 10px; }
.subject-card p { max-width: 530px; color: #bdc8bd; font-size: 12px; line-height: 1.85; margin-bottom: 16px; }
.subject-card .tag-row { margin-top: 0; }

.project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px 24px; }
.project-grid .project-card { grid-row: auto; grid-column: auto; min-width: 0; }
.project-grid .work-image, .project-grid .image-short, .project-grid .image-tall, .project-grid .image-wide { height: 245px; }
.project-grid .work-card-copy { padding-top: 17px; }
.project-grid .work-card h3 { font-size: 20px; }
.project-grid .work-card p { font-size: 12px; line-height: 1.8; }
.projects-disclaimer { color: #8f9d90; font-size: 10px; margin: 34px 0 0; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr .9fr; gap: 28px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid .work-image, .project-grid .image-short, .project-grid .image-tall, .project-grid .image-wide { height: 255px; }
  .subjects-heading { gap: 28px; }
}
@media (max-width: 760px) {
  .main-nav { background: #0c1410; border-bottom-color: rgba(225,236,215,.16); box-shadow: 0 20px 28px rgba(0,0,0,.28); }
  .main-nav a { border-bottom-color: rgba(225,236,215,.12); }
  .main-nav .nav-contact { border-color: rgba(217,238,131,.6); color: var(--accent); }
  .hero-profile-links { gap: 10px 17px; }
  .subjects-heading { display: block; padding-top: 40px; margin-bottom: 30px; }
  .subjects-heading .section-aside { margin-top: 18px; }
  .subjects-grid { grid-template-columns: 1fr; gap: 12px; }
  .subject-card { min-height: 0; padding: 23px 20px; }
  .project-grid { grid-template-columns: 1fr; gap: 35px; }
  .project-grid .work-image, .project-grid .image-short, .project-grid .image-tall, .project-grid .image-wide { height: min(72vw, 350px); }
  .projects-disclaimer { line-height: 1.7; }
}

.project-cover {
  appearance: none;
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.project-cover:focus-visible,
.project-view-button:focus-visible,
.school-album-card:focus-visible,
.media-dialog-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.project-cover-hint {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  color: #f1f5ed;
  background: rgba(7, 12, 10, .78);
  border: 1px solid rgba(217, 238, 131, .38);
  padding: 7px 9px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .07em;
}
.project-view-button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 9px 0 5px;
  border: 0;
  border-bottom: 1px solid rgba(217, 238, 131, .45);
  background: transparent;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.project-view-button:hover { border-bottom-color: var(--accent); }
.project-view-button span { font-size: 15px; }
.loading-note { grid-column: 1 / -1; color: #bdc8bd; font-size: 12px; }

.school-album { color: var(--ink); }
.school-album .section-heading-row { margin-bottom: 42px; }
.school-album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.school-album-card {
  display: block;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(225, 236, 215, .15);
  background: rgba(255, 255, 255, .025);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.school-album-card:hover { border-color: rgba(217, 238, 131, .55); transform: translateY(-3px); background: rgba(255, 255, 255, .045); }
.school-album-image { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #17231e; }
.school-album-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: transform .5s ease, filter .3s ease; }
.school-album-card:hover .school-album-image img { transform: scale(1.035); filter: saturate(1); }
.school-photo-note { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 6px 8px; color: #f4f7f0; background: rgba(7, 12, 10, .78); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.school-photo-open { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #111a13; background: var(--accent); }
.school-album-caption { display: block; padding: 14px 16px 15px; font-size: 13px; font-weight: 600; }
.album-footnote { margin: 24px 0 0; color: #9eae9e; font-size: 10px; line-height: 1.7; }
.profile-link-album { border-color: rgba(217, 238, 131, .72) !important; }

.media-dialog {
  width: min(1040px, calc(100% - 32px));
  max-width: 1040px;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(217, 238, 131, .24);
  border-radius: 8px;
  background: #0c1410;
  color: #edf2e9;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .55);
}
.media-dialog::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(5px); }
.media-dialog-shell { padding: clamp(18px, 3vw, 32px); }
.media-dialog-header { display: flex; justify-content: space-between; gap: 25px; align-items: flex-start; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(225, 236, 215, .16); }
.media-dialog-header .eyebrow { margin-bottom: 9px; color: var(--accent); }
.media-dialog-header h2 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); }
.media-dialog-description { max-width: 680px; margin: 0; color: #bdc8bd; font-size: 12px; line-height: 1.7; }
.media-dialog-close { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(217, 238, 131, .4); border-radius: 999px; background: transparent; color: #edf2e9; font-size: 11px; cursor: pointer; }
.media-dialog-close:hover { background: rgba(217, 238, 131, .09); }
.media-dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.media-dialog-item { position: relative; min-width: 0; margin: 0; padding: 0; background: #111a16; border: 1px solid rgba(225, 236, 215, .12); }
.media-dialog-item img, .media-dialog-item video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #070c0a; }
.media-dialog-item figcaption { padding: 12px 14px; color: #d7e1d1; font-size: 11px; line-height: 1.6; }
.media-kind { position: absolute; top: 10px; left: 10px; padding: 5px 7px; color: #111a13; background: var(--accent); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
@media (max-width: 1000px) { .school-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .school-album-grid { grid-template-columns: 1fr; gap: 15px; }
  .school-album .section-heading-row { display: block; padding-top: 40px; margin-bottom: 30px; }
  .school-album .section-aside { margin-top: 18px; }
  .media-dialog-grid { grid-template-columns: 1fr; }
  .media-dialog-header { gap: 12px; }
  .media-dialog-close { font-size: 10px; }
}

.project-hover-panel,
.school-hover-panel {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 9px;
  padding: clamp(16px, 2vw, 24px);
  overflow-y: auto;
  color: #f0f4ec;
  text-align: left;
  background: linear-gradient(180deg, rgba(7, 12, 10, .34), rgba(7, 12, 10, .96) 78%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.project-cover:hover .project-hover-panel,
.project-cover:focus-visible .project-hover-panel,
.school-album-card:hover .school-hover-panel,
.school-album-card:focus-visible .school-hover-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hover-panel-kicker {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
}
.hover-panel-title {
  color: #fff;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.2;
}
.hover-panel-copy {
  display: block;
  max-width: 58ch;
  color: #e0e8dc;
  font-size: 11px;
  line-height: 1.65;
  white-space: normal;
}
.hover-panel-action {
  margin-top: 3px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
}
.school-album-entry { min-width: 0; }
.school-album-card { width: 100%; }
.touch-description { display: none; }

@media (hover: none), (pointer: coarse) {
  .project-hover-panel,
  .school-hover-panel {
    display: none;
  }
  .touch-description {
    display: block;
    margin-top: 12px;
    border-top: 1px solid rgba(217, 238, 131, .22);
    border-bottom: 1px solid rgba(217, 238, 131, .22);
    color: #dce6d8;
  }
  .touch-description summary {
    padding: 10px 0;
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    list-style-position: inside;
  }
  .touch-description p {
    padding: 0 0 12px;
    margin: 0;
    color: #bdc8bd;
    font-size: 11px;
    line-height: 1.7;
  }
  .school-touch-description {
    padding: 0 12px;
    margin-top: 0;
    background: rgba(255, 255, 255, .025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-hover-panel,
  .school-hover-panel {
    transition: none;
  }
}


.work-card p,
.project-grid .work-card p {
  font-size: 14px;
  line-height: 1.85;
}

.hover-panel-copy {
  font-size: 14px;
  line-height: 1.7;
}

.media-dialog-description {
  font-size: 14px;
  line-height: 1.8;
}

.section-aside,
.subject-card p,
.timeline-main > p:not(.timeline-org) {
  font-size: 14px;
}

@media (max-width: 760px) {
  .work-card p,
  .project-grid .work-card p,
  .hover-panel-copy,
  .media-dialog-description,
  .subject-card p,
  .timeline-main > p:not(.timeline-org) {
    font-size: 13px;
  }

  .touch-description p {
    font-size: 13px;
    line-height: 1.75;
  }

  .section-aside {
    font-size: 13px;
  }
}

body { font-size: 18px; }
.brand { font-size: 17px; }
.brand-name { font-size: 18px; }
.brand-mark { font-size: 14px; }
.main-nav { font-size: 14px; }
.main-nav a,
.nav-contact { font-size: 14px; }
.eyebrow { font-size: 12px; }
.hero-intro { font-size: 18px; }
.button,
.text-link { font-size: 14px; }
.hero-meta { font-size: 12px; }
.hero-scroll { font-size: 11px; }
.profile-links-label { font-size: 11px; }
.hero-profile-links a { font-size: 13px; }

.number-item p { font-size: 13px; }
.number-item small { font-size: 11px; }
.numbers-note { font-size: 19px; }
.section-topline { font-size: 11px; }
.section-aside { font-size: 16px; }
.about-copy > p:not(.large-copy) { font-size: 15px; }
.signature-note { font-size: 13px; }

.work-meta { font-size: 11px; }
.work-card h3 { font-size: 22px; }
.work-card p,
.project-grid .work-card p { font-size: 16px; line-height: 1.8; }
.tag-row span,
.timeline-tags span { font-size: 11px; }
.image-index { font-size: 11px; }
.projects-disclaimer,
.album-footnote { font-size: 12px; }
.subject-number { font-size: 12px; }
.subject-card h3 { font-size: 23px; }
.subject-card p { font-size: 16px; }
.school-photo-note { font-size: 10px; }
.school-album-caption { font-size: 15px; }

.timeline-date { font-size: 12px; }
.timeline-org { font-size: 13px; }
.timeline-main > p:not(.timeline-org) { font-size: 16px; }
.credential-kind { font-size: 10px; }
.credential-item h3 { font-size: 19px; }
.credential-item p:not(.credential-kind) { font-size: 13px; }
.credential-number { font-size: 12px; }
.recognition-point h3 { font-size: 18px; }
.recognition-point p { font-size: 14px; }
.contact-topline { font-size: 11px; }
.contact-copy { font-size: 15px; }
.contact-secondary { font-size: 13px; }
.site-footer { font-size: 12px; }

.media-dialog-description { font-size: 16px; line-height: 1.8; }
.media-dialog-close { font-size: 13px; }
.media-dialog-item figcaption { font-size: 13px; }
.media-kind { font-size: 10px; }

.project-hover-panel,
.school-hover-panel {
  inset: auto 14px 14px;
  display: block;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid rgba(217, 238, 131, .48);
  border-radius: 6px;
  background: rgba(5, 11, 8, .9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
}

.project-hover-panel > :not(.hover-panel-title),
.school-hover-panel > :not(.hover-panel-title) {
  display: none !important;
}

.hover-panel-title {
  display: block;
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.25;
}

.project-cover:hover .project-hover-panel,
.project-cover:focus-visible .project-hover-panel,
.school-album-card:hover .school-hover-panel,
.school-album-card:focus-visible .school-hover-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.project-card .work-card-copy h3 {
  cursor: pointer;
  width: fit-content;
  transition: color .2s ease;
}
.project-card .work-card-copy h3:hover,
.project-card .work-card-copy h3:focus-visible {
  color: var(--accent);
}
.project-card .work-card-copy h3:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .main-nav a,
  .main-nav .nav-contact { font-size: 16px; }
  .eyebrow { font-size: 11px; }
  .section-topline { font-size: 10px; }
  .hero-intro { font-size: 16px; }
  .button,
  .text-link { font-size: 14px; }
  .hero-meta { font-size: 12px; }
  .number-item p { font-size: 12px; }
  .number-item small { font-size: 10px; }
  .section-aside { font-size: 15px; }
  .about-copy > p:not(.large-copy) { font-size: 14px; }
  .work-card p,
  .project-grid .work-card p,
  .subject-card p,
  .timeline-main > p:not(.timeline-org) { font-size: 15px; }
  .school-album-caption { font-size: 15px; }
  .timeline-org { font-size: 13px; }
  .timeline-date { font-size: 11px; }
  .credential-item h3 { font-size: 18px; }
  .credential-item p:not(.credential-kind) { font-size: 12px; }
  .recognition-point h3 { font-size: 17px; }
  .recognition-point p { font-size: 14px; }
  .contact-copy { font-size: 14px; }
  .site-footer { font-size: 11px; }
  .projects-disclaimer,
  .album-footnote { font-size: 12px; }
  .media-dialog-description { font-size: 15px; }
  .touch-description summary { font-size: 13px; }
  .touch-description p { font-size: 15px; }
}



.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid rgba(217, 238, 131, .55);
  border-radius: 999px;
  background: rgba(217, 238, 131, .06);
  color: var(--accent);
  font: 600 13px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.theme-toggle:hover {
  border-color: var(--accent);
  background: rgba(217, 238, 131, .13);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.theme-toggle-icon {
  font-size: 17px;
  line-height: 1;
}

@media (max-width: 760px) {
  .main-nav .theme-toggle {
    align-self: flex-start;
    margin: 14px 0 0;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --paper: #f4f1e8;
  --paper-deep: #e9e5d9;
  --ink: #17231e;
  --ink-soft: #56635b;
  --line: #cfcfc2;
  --accent: #718a2b;
  --accent-strong: #5f7621;
  --dark: #17231e;
  --white: #fbfaf6;
}

html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="light"],
html[data-theme="light"] body {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="light"] .site-header {
  background: rgba(244, 241, 232, .96);
  border-bottom-color: rgba(23, 35, 30, .14);
}
html[data-theme="light"] .brand-mark { background: var(--ink); color: var(--paper); }
html[data-theme="light"] .brand-name,
html[data-theme="light"] .main-nav > a:not(.nav-contact) { color: var(--ink); }
html[data-theme="light"] .main-nav > a:hover { color: var(--accent); }
html[data-theme="light"] .nav-contact { border-color: var(--ink); color: var(--ink); }
html[data-theme="light"] .menu-toggle { border-color: rgba(23, 35, 30, .3); }
html[data-theme="light"] .menu-toggle span { background: var(--ink); }
html[data-theme="light"] .eyebrow { color: #59674f; }
html[data-theme="light"] .eyebrow-line { background: var(--accent); }
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .large-copy { color: var(--ink); }
html[data-theme="light"] .hero-intro,
html[data-theme="light"] .about-copy > p:not(.large-copy),
html[data-theme="light"] .section-aside,
html[data-theme="light"] .video-copy > p:not(.eyebrow),
html[data-theme="light"] .timeline-main > p:not(.timeline-org),
html[data-theme="light"] .recognition-point p { color: #59665d; }
html[data-theme="light"] .hero-meta,
html[data-theme="light"] .hero-scroll,
html[data-theme="light"] .visual-caption { color: #647064; }
html[data-theme="light"] .text-link { color: var(--ink); border-bottom-color: rgba(23, 35, 30, .35); }
html[data-theme="light"] .button-dark { background: var(--ink); color: var(--white); }
html[data-theme="light"] .button-dark:hover { background: #293c32; }
html[data-theme="light"] .button-light { background: var(--ink); color: var(--white); }
html[data-theme="light"] .button-light:hover { background: #34483a; }
html[data-theme="light"] .hero-photo-frame { box-shadow: 0 24px 70px rgba(26, 40, 31, .13); }
html[data-theme="light"] .orbit-one { border-color: rgba(106, 126, 81, .35); }
html[data-theme="light"] .orbit-two { border-color: rgba(106, 126, 81, .2); }
html[data-theme="light"] .hero-scroll .scroll-rule { background: rgba(23, 35, 30, .35); }

html[data-theme="light"] .numbers-band {
  background: #e9e5d9;
  color: var(--ink);
  border-color: rgba(23, 35, 30, .12);
}
html[data-theme="light"] .number-item p { color: #435047; }
html[data-theme="light"] .number-item small,
html[data-theme="light"] .numbers-note { color: #59665c; }
html[data-theme="light"] .number-divider { background: rgba(23, 35, 30, .18); }
html[data-theme="light"] .section-topline { color: #59674f; border-bottom-color: var(--line); }
html[data-theme="light"] .signature-star { color: var(--accent); border-color: rgba(113, 138, 43, .45); }
html[data-theme="light"] .signature-note { color: var(--ink); }

html[data-theme="light"] .work {
  background: #eae7dc;
  border-top-color: rgba(23, 35, 30, .08);
  border-bottom-color: rgba(23, 35, 30, .08);
}
html[data-theme="light"] .work-meta { color: #65734f; }
html[data-theme="light"] .work-card-copy,
html[data-theme="light"] .work-card h3 { color: var(--ink); }
html[data-theme="light"] .work-card p { color: #59665d; }
html[data-theme="light"] .tag-row span,
html[data-theme="light"] .timeline-tags span {
  color: #4c5c45;
  background: rgba(255, 255, 255, .28);
  border-color: rgba(75, 92, 65, .28);
}
html[data-theme="light"] .projects-disclaimer { color: #59665d; }
html[data-theme="light"] .video-feature { color: var(--ink); }
html[data-theme="light"] .video-note { color: #59665d !important; }
html[data-theme="light"] .experience { color: var(--ink); }
html[data-theme="light"] .timeline-date { color: #65734f; }
html[data-theme="light"] .timeline-org { color: #4e613b; }
html[data-theme="light"] .timeline-org span { color: #687267; }

html[data-theme="light"] .credentials {
  background: #e9e5d9;
  color: var(--ink);
  border-top-color: rgba(23, 35, 30, .1);
  border-bottom-color: rgba(23, 35, 30, .1);
}
html[data-theme="light"] .credentials .section-topline { color: #59674f; border-color: var(--line); }
html[data-theme="light"] .credentials-intro .eyebrow { color: #59674f; }
html[data-theme="light"] .credentials-intro h2,
html[data-theme="light"] .credential-item h3 { color: var(--ink); }
html[data-theme="light"] .credentials-intro > p:not(.eyebrow),
html[data-theme="light"] .credential-item p:not(.credential-kind) { color: #59665d; }
html[data-theme="light"] .credential-stamp { color: var(--accent); border-color: rgba(113, 138, 43, .5); }
html[data-theme="light"] .credential-list,
html[data-theme="light"] .credential-item { border-color: var(--line); }
html[data-theme="light"] .credential-kind { color: #5b6e43; }
html[data-theme="light"] .credential-item .credential-detail { color: #526b24 !important; }
html[data-theme="light"] .credential-number,
html[data-theme="light"] .credential-arrow { color: var(--accent); }

html[data-theme="light"] .recognition { color: var(--ink); }
html[data-theme="light"] .recognition-point h3 { color: var(--ink); }
html[data-theme="light"] .recognition-icon { color: var(--accent); border-color: rgba(113, 138, 43, .38); }
html[data-theme="light"] .recognition-points,
html[data-theme="light"] .recognition-point { border-color: var(--line); }
html[data-theme="light"] .contact-section { background: #e9e5d9; color: var(--ink); }
html[data-theme="light"] .contact-topline { color: #59674f; border-bottom-color: rgba(23, 35, 30, .2); }
html[data-theme="light"] .contact-inner > .eyebrow { color: #5e7624; }
html[data-theme="light"] .contact-inner h2 { color: var(--ink); }
html[data-theme="light"] .contact-inner h2 em { color: #657e25; }
html[data-theme="light"] .contact-copy { color: #59665d; }
html[data-theme="light"] .contact-secondary { color: var(--ink); border-bottom-color: #89947e; }
html[data-theme="light"] .contact-decoration > span { color: rgba(113, 138, 43, .08); }
html[data-theme="light"] .contact-decoration i { border-color: rgba(113, 138, 43, .22); }
html[data-theme="light"] .site-footer { background: var(--paper); color: #647064; border-top-color: rgba(23, 35, 30, .12); }
html[data-theme="light"] .footer-brand { color: var(--ink); }
html[data-theme="light"] .footer-separator { color: #909989; }

html[data-theme="light"] .hero-profile-links a {
  color: var(--ink);
  border-color: rgba(91, 111, 52, .4);
  background: rgba(113, 138, 43, .045);
}
html[data-theme="light"] .hero-profile-links a:hover {
  color: #536b1d;
  border-color: var(--accent);
  background: rgba(113, 138, 43, .1);
}
html[data-theme="light"] .hero-profile-links .profile-link-cv {
  border-color: rgba(91, 111, 52, .7);
  background: rgba(113, 138, 43, .11);
}
html[data-theme="light"] .profile-links-label { color: #697466; }
html[data-theme="light"] .subjects { color: var(--ink); }
html[data-theme="light"] .subject-card {
  border-color: rgba(23, 35, 30, .16);
  background: linear-gradient(140deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .35));
}
html[data-theme="light"] .subject-card h3 { color: var(--ink); }
html[data-theme="light"] .subject-card p { color: #59665d; }
html[data-theme="light"] .subject-number { color: #617a24; }
html[data-theme="light"] .school-album { color: var(--ink); }
html[data-theme="light"] .school-album-card {
  border-color: rgba(23, 35, 30, .15);
  background: rgba(255, 255, 255, .5);
}
html[data-theme="light"] .school-album-card:hover { background: rgba(255, 255, 255, .8); }
html[data-theme="light"] .school-album-caption { color: var(--ink); }
html[data-theme="light"] .album-footnote { color: #647064; }
html[data-theme="light"] .project-view-button { color: #526b1c; border-bottom-color: rgba(82, 107, 28, .45); }
html[data-theme="light"] .loading-note { color: #59665d; }

html[data-theme="light"] .media-dialog {
  border-color: rgba(113, 138, 43, .35);
  background: #f7f5ee;
  color: var(--ink);
  box-shadow: 0 24px 90px rgba(23, 35, 30, .25);
}
html[data-theme="light"] .media-dialog::backdrop { background: rgba(23, 35, 30, .55); }
html[data-theme="light"] .media-dialog-header { border-bottom-color: rgba(23, 35, 30, .14); }
html[data-theme="light"] .media-dialog-header h2 { color: var(--ink); }
html[data-theme="light"] .media-dialog-header .eyebrow { color: #617a24; }
html[data-theme="light"] .media-dialog-description { color: #59665d; }
html[data-theme="light"] .media-dialog-close { color: var(--ink); border-color: rgba(91, 111, 52, .45); }
html[data-theme="light"] .media-dialog-item { background: #eeece3; border-color: rgba(23, 35, 30, .14); }
html[data-theme="light"] .media-dialog-item img,
html[data-theme="light"] .media-dialog-item video { background: #e4e1d6; }
html[data-theme="light"] .media-dialog-item figcaption { color: #465248; }
html[data-theme="light"] .touch-description { color: #465248; border-color: rgba(91, 111, 52, .28); }
html[data-theme="light"] .touch-description summary { color: #536b1d; }
html[data-theme="light"] .touch-description p { color: #59665d; }
html[data-theme="light"] .school-touch-description { background: rgba(255, 255, 255, .35); }

html[data-theme="light"] .theme-toggle {
  color: #536b1d;
  border-color: rgba(91, 111, 52, .45);
  background: rgba(113, 138, 43, .06);
}
html[data-theme="light"] .theme-toggle:hover { background: rgba(113, 138, 43, .12); }

@media (max-width: 760px) {
  html[data-theme="light"] .main-nav {
    background: var(--paper);
    border-bottom-color: var(--line);
    box-shadow: 0 20px 28px rgba(23, 35, 30, .08);
  }
  html[data-theme="light"] .main-nav a { border-bottom-color: rgba(23, 35, 30, .1); }
  html[data-theme="light"] .main-nav .nav-contact { border-color: var(--ink); color: var(--ink); }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .main-nav { gap: 12px; }
  .main-nav a:not(.nav-contact) { font-size: 12px; }
  .theme-toggle { gap: 5px; padding-inline: 10px; font-size: 12px; }
}


/* Purple theme: a soft lavender palette with deep plum text and accents. */
html[data-theme="purple"] {
  color-scheme: light;
  --paper: #f4effb;
  --paper-deep: #e7def3;
  --ink: #281a36;
  --ink-soft: #63546f;
  --line: #d6c9e3;
  --accent: #8051b9;
  --accent-strong: #673c9a;
  --dark: #281a36;
  --white: #fcf9ff;
}

html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="purple"],
html[data-theme="purple"] body {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="purple"] .site-header {
  background: rgba(244, 239, 251, .96);
  border-bottom-color: rgba(40, 26, 54, .14);
}
html[data-theme="purple"] .brand-mark { background: var(--ink); color: var(--paper); }
html[data-theme="purple"] .brand-name,
html[data-theme="purple"] .main-nav > a:not(.nav-contact) { color: var(--ink); }
html[data-theme="purple"] .main-nav > a:hover { color: var(--accent); }
html[data-theme="purple"] .nav-contact { border-color: var(--ink); color: var(--ink); }
html[data-theme="purple"] .menu-toggle { border-color: rgba(40, 26, 54, .3); }
html[data-theme="purple"] .menu-toggle span { background: var(--ink); }
html[data-theme="purple"] .eyebrow { color: #685579; }
html[data-theme="purple"] .eyebrow-line { background: var(--accent); }
html[data-theme="purple"] h1,
html[data-theme="purple"] h2,
html[data-theme="purple"] h3,
html[data-theme="purple"] .large-copy { color: var(--ink); }
html[data-theme="purple"] .hero-intro,
html[data-theme="purple"] .about-copy > p:not(.large-copy),
html[data-theme="purple"] .section-aside,
html[data-theme="purple"] .video-copy > p:not(.eyebrow),
html[data-theme="purple"] .timeline-main > p:not(.timeline-org),
html[data-theme="purple"] .recognition-point p { color: #62556e; }
html[data-theme="purple"] .hero-meta,
html[data-theme="purple"] .hero-scroll,
html[data-theme="purple"] .visual-caption { color: #756982; }
html[data-theme="purple"] .text-link { color: var(--ink); border-bottom-color: rgba(40, 26, 54, .35); }
html[data-theme="purple"] .button-dark { background: var(--ink); color: var(--white); }
html[data-theme="purple"] .button-dark:hover { background: #40304f; }
html[data-theme="purple"] .button-light { background: var(--ink); color: var(--white); }
html[data-theme="purple"] .button-light:hover { background: #4a3860; }
html[data-theme="purple"] .hero-photo-frame { box-shadow: 0 24px 70px rgba(40, 26, 54, .13); }
html[data-theme="purple"] .orbit-one { border-color: rgba(128, 81, 185, .35); }
html[data-theme="purple"] .orbit-two { border-color: rgba(128, 81, 185, .2); }
html[data-theme="purple"] .hero-scroll .scroll-rule { background: rgba(40, 26, 54, .35); }

html[data-theme="purple"] .numbers-band {
  background: #e7def3;
  color: var(--ink);
  border-color: rgba(40, 26, 54, .12);
}
html[data-theme="purple"] .number-item p { color: #51405e; }
html[data-theme="purple"] .number-item small,
html[data-theme="purple"] .numbers-note { color: #665a72; }
html[data-theme="purple"] .number-divider { background: rgba(40, 26, 54, .18); }
html[data-theme="purple"] .section-topline { color: #685579; border-bottom-color: var(--line); }
html[data-theme="purple"] .signature-star { color: var(--accent); border-color: rgba(128, 81, 185, .45); }
html[data-theme="purple"] .signature-note { color: var(--ink); }

html[data-theme="purple"] .work {
  background: #e9e1f2;
  border-top-color: rgba(40, 26, 54, .08);
  border-bottom-color: rgba(40, 26, 54, .08);
}
html[data-theme="purple"] .work-meta { color: #745b92; }
html[data-theme="purple"] .work-card-copy,
html[data-theme="purple"] .work-card h3 { color: var(--ink); }
html[data-theme="purple"] .work-card p { color: #62556e; }
html[data-theme="purple"] .tag-row span,
html[data-theme="purple"] .timeline-tags span {
  color: #5f506d;
  background: rgba(255, 255, 255, .28);
  border-color: rgba(98, 78, 116, .28);
}
html[data-theme="purple"] .projects-disclaimer { color: #62556e; }
html[data-theme="purple"] .video-feature { color: var(--ink); }
html[data-theme="purple"] .video-note { color: #62556e !important; }
html[data-theme="purple"] .experience { color: var(--ink); }
html[data-theme="purple"] .timeline-date { color: #745b92; }
html[data-theme="purple"] .timeline-org { color: #604677; }
html[data-theme="purple"] .timeline-org span { color: #796e83; }

html[data-theme="purple"] .credentials {
  background: #e7def3;
  color: var(--ink);
  border-top-color: rgba(40, 26, 54, .1);
  border-bottom-color: rgba(40, 26, 54, .1);
}
html[data-theme="purple"] .credentials .section-topline { color: #685579; border-color: var(--line); }
html[data-theme="purple"] .credentials-intro .eyebrow { color: #685579; }
html[data-theme="purple"] .credentials-intro h2,
html[data-theme="purple"] .credential-item h3 { color: var(--ink); }
html[data-theme="purple"] .credentials-intro > p:not(.eyebrow),
html[data-theme="purple"] .credential-item p:not(.credential-kind) { color: #62556e; }
html[data-theme="purple"] .credential-stamp { color: var(--accent); border-color: rgba(128, 81, 185, .5); }
html[data-theme="purple"] .credential-list,
html[data-theme="purple"] .credential-item { border-color: var(--line); }
html[data-theme="purple"] .credential-kind { color: #684b87; }
html[data-theme="purple"] .credential-item .credential-detail { color: #65418b !important; }
html[data-theme="purple"] .credential-number,
html[data-theme="purple"] .credential-arrow { color: var(--accent); }

html[data-theme="purple"] .recognition { color: var(--ink); }
html[data-theme="purple"] .recognition-point h3 { color: var(--ink); }
html[data-theme="purple"] .recognition-icon { color: var(--accent); border-color: rgba(128, 81, 185, .38); }
html[data-theme="purple"] .recognition-points,
html[data-theme="purple"] .recognition-point { border-color: var(--line); }
html[data-theme="purple"] .contact-section { background: #e7def3; color: var(--ink); }
html[data-theme="purple"] .contact-topline { color: #685579; border-bottom-color: rgba(40, 26, 54, .2); }
html[data-theme="purple"] .contact-inner > .eyebrow { color: #70459f; }
html[data-theme="purple"] .contact-inner h2 { color: var(--ink); }
html[data-theme="purple"] .contact-inner h2 em { color: #7650a7; }
html[data-theme="purple"] .contact-copy { color: #62556e; }
html[data-theme="purple"] .contact-secondary { color: var(--ink); border-bottom-color: #9789a1; }
html[data-theme="purple"] .contact-decoration > span { color: rgba(128, 81, 185, .08); }
html[data-theme="purple"] .contact-decoration i { border-color: rgba(128, 81, 185, .22); }
html[data-theme="purple"] .site-footer { background: var(--paper); color: #756982; border-top-color: rgba(40, 26, 54, .12); }
html[data-theme="purple"] .footer-brand { color: var(--ink); }
html[data-theme="purple"] .footer-separator { color: #a49aae; }

html[data-theme="purple"] .hero-profile-links a {
  color: var(--ink);
  border-color: rgba(103, 75, 135, .4);
  background: rgba(128, 81, 185, .045);
}
html[data-theme="purple"] .hero-profile-links a:hover {
  color: #67428f;
  border-color: var(--accent);
  background: rgba(128, 81, 185, .1);
}
html[data-theme="purple"] .hero-profile-links .profile-link-cv {
  border-color: rgba(103, 75, 135, .7);
  background: rgba(128, 81, 185, .11);
}
html[data-theme="purple"] .profile-links-label { color: #796e84; }
html[data-theme="purple"] .subjects { color: var(--ink); }
html[data-theme="purple"] .subject-card {
  border-color: rgba(40, 26, 54, .16);
  background: linear-gradient(140deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .35));
}
html[data-theme="purple"] .subject-card h3 { color: var(--ink); }
html[data-theme="purple"] .subject-card p { color: #62556e; }
html[data-theme="purple"] .subject-number { color: #7650a7; }
html[data-theme="purple"] .school-album { color: var(--ink); }
html[data-theme="purple"] .school-album-card {
  border-color: rgba(40, 26, 54, .15);
  background: rgba(255, 255, 255, .5);
}
html[data-theme="purple"] .school-album-card:hover { background: rgba(255, 255, 255, .8); }
html[data-theme="purple"] .school-album-caption { color: var(--ink); }
html[data-theme="purple"] .album-footnote { color: #756982; }
html[data-theme="purple"] .project-view-button { color: #673c9a; border-bottom-color: rgba(103, 60, 154, .45); }
html[data-theme="purple"] .loading-note { color: #62556e; }

html[data-theme="purple"] .media-dialog {
  border-color: rgba(128, 81, 185, .35);
  background: #faf7ff;
  color: var(--ink);
  box-shadow: 0 24px 90px rgba(40, 26, 54, .25);
}
html[data-theme="purple"] .media-dialog::backdrop { background: rgba(40, 26, 54, .55); }
html[data-theme="purple"] .media-dialog-header { border-bottom-color: rgba(40, 26, 54, .14); }
html[data-theme="purple"] .media-dialog-header h2 { color: var(--ink); }
html[data-theme="purple"] .media-dialog-header .eyebrow { color: #7650a7; }
html[data-theme="purple"] .media-dialog-description { color: #62556e; }
html[data-theme="purple"] .media-dialog-close { color: var(--ink); border-color: rgba(103, 75, 135, .45); }
html[data-theme="purple"] .media-dialog-item { background: #f0eafa; border-color: rgba(40, 26, 54, .14); }
html[data-theme="purple"] .media-dialog-item img,
html[data-theme="purple"] .media-dialog-item video { background: #e5dced; }
html[data-theme="purple"] .media-dialog-item figcaption { color: #594969; }
html[data-theme="purple"] .touch-description { color: #594969; border-color: rgba(103, 75, 135, .28); }
html[data-theme="purple"] .touch-description summary { color: #67428f; }
html[data-theme="purple"] .touch-description p { color: #62556e; }
html[data-theme="purple"] .school-touch-description { background: rgba(255, 255, 255, .35); }

html[data-theme="purple"] .theme-toggle {
  color: #67428f;
  border-color: rgba(103, 75, 135, .45);
  background: rgba(128, 81, 185, .06);
}
html[data-theme="purple"] .theme-toggle:hover { background: rgba(128, 81, 185, .12); }

@media (max-width: 760px) {
  html[data-theme="purple"] .main-nav {
    background: var(--paper);
    border-bottom-color: var(--line);
    box-shadow: 0 20px 28px rgba(40, 26, 54, .08);
  }
  html[data-theme="purple"] .main-nav a { border-bottom-color: rgba(40, 26, 54, .1); }
  html[data-theme="purple"] .main-nav .nav-contact { border-color: var(--ink); color: var(--ink); }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .main-nav { gap: 12px; }
  .main-nav a:not(.nav-contact) { font-size: 12px; }
  .theme-toggle { gap: 5px; padding-inline: 10px; font-size: 12px; }
}



/* Larger typography — applied consistently across all three colour themes. */
body { font-size: 19px; line-height: 1.68; }
.brand { font-size: 18px; }
.brand-name { font-size: 20px; }
.brand-mark { font-size: 15px; }
.main-nav, .main-nav a:not(.nav-contact) { font-size: 15px; }
.nav-contact { font-size: 15px; }
.eyebrow { font-size: 13px; }
.hero-intro { font-size: 20px; line-height: 1.8; }
.button, .text-link { font-size: 15px; }
.hero-meta { font-size: 13px; }
.profile-links-label { font-size: 12px; }
.hero-profile-links a { font-size: 14px; }
.number-item p { font-size: 15px; }
.number-item small { font-size: 13px; }
.numbers-note { font-size: 20px; }
.section-topline { font-size: 12px; }
.section-aside { font-size: 18px; line-height: 1.8; }
.large-copy { font-size: 27px; }
.about-copy > p:not(.large-copy) { font-size: 17px; }
.signature-note { font-size: 14px; }
.work-meta { font-size: 12px; }
.work-card h3 { font-size: 24px; }
.work-card p, .project-grid .work-card p { font-size: 18px; line-height: 1.8; }
.tag-row span, .timeline-tags span { font-size: 13px; }
.image-index { font-size: 12px; }
.projects-disclaimer, .album-footnote { font-size: 13px; }
.subject-number { font-size: 13px; }
.subject-card h3 { font-size: 25px; }
.subject-card p { font-size: 18px; line-height: 1.8; }
.school-album-caption { font-size: 17px; }
.timeline-date { font-size: 13px; }
.timeline-org { font-size: 15px; }
.timeline-main h3 { font-size: 26px; }
.timeline-main > p:not(.timeline-org) { font-size: 18px; line-height: 1.85; }
.credential-kind { font-size: 12px; }
.credential-item h3 { font-size: 21px; }
.credential-item p:not(.credential-kind) { font-size: 15px; }
.credential-number { font-size: 13px; }
.recognition-point h3 { font-size: 20px; }
.recognition-point p { font-size: 16px; line-height: 1.8; }
.contact-topline { font-size: 12px; }
.contact-copy { font-size: 17px; line-height: 1.85; }
.contact-secondary { font-size: 15px; }
.site-footer { font-size: 13px; }
.media-dialog-description { font-size: 18px; line-height: 1.8; }
.media-dialog-close { font-size: 15px; }
.media-dialog-item figcaption { font-size: 15px; }
.media-kind { font-size: 12px; }
.theme-toggle { font-size: 14px; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .main-nav a, .main-nav .nav-contact { font-size: 17px; }
  .main-nav .theme-toggle { font-size: 16px; }
  .eyebrow { font-size: 12px; }
  .section-topline { font-size: 11px; }
  .hero-intro { font-size: 18px; }
  .button, .text-link { font-size: 15px; }
  .number-item p { font-size: 13px; }
  .number-item small { font-size: 11px; }
  .section-aside { font-size: 16px; }
  .large-copy { font-size: 24px; }
  .about-copy > p:not(.large-copy) { font-size: 16px; }
  .work-card h3 { font-size: 23px; }
  .work-card p, .project-grid .work-card p,
  .subject-card p, .timeline-main > p:not(.timeline-org) { font-size: 16px; }
  .subject-card h3 { font-size: 23px; }
  .school-album-caption { font-size: 16px; }
  .timeline-main h3 { font-size: 23px; }
  .timeline-org { font-size: 14px; }
  .timeline-date { font-size: 12px; }
  .credential-item h3 { font-size: 19px; }
  .credential-item p:not(.credential-kind) { font-size: 14px; }
  .recognition-point h3 { font-size: 18px; }
  .recognition-point p { font-size: 15px; }
  .contact-copy { font-size: 16px; }
  .site-footer { font-size: 12px; }
  .projects-disclaimer, .album-footnote { font-size: 13px; }
  .media-dialog-description { font-size: 16px; }
  .media-dialog-item figcaption { font-size: 14px; }
}

@media (min-width: 761px) and (max-width: 1200px) {
  .main-nav { gap: clamp(9px, 1.4vw, 16px); }
  .main-nav > a:not(.nav-contact), .main-nav .nav-contact { font-size: 13px; }
  .theme-toggle { gap: 6px; padding-inline: 10px; font-size: 12px; }
}


/* ================================================================
   CONSOLIDATED FOUR-THEME PALETTE
   Dark = Midnight Ember | Light = original warm light theme
   Ocean = Ocean Blue | Purple = Royal Purple
   This file is intended to REPLACE the existing styles.css.
   ================================================================ */
/*
  EXTRA PORTFOLIO THEMES
  Add this file AFTER styles.css in index.html.
  Theme names used by theme-toggle.js: ocean, royal, ember.
*/

/* =========================================================
   OCEAN BLUE
   Deep navy surfaces with clear aqua-blue highlights.
   ========================================================= */
html[data-theme="ocean"] {
  color-scheme: dark;
  --paper: #0b1726;
  --paper-deep: #10263a;
  --ink: #eaf5ff;
  --ink-soft: #c0d1e1;
  --line: rgba(180, 215, 240, .19);
  --accent: #72d6e8;
  --accent-strong: #43bbd3;
  --dark: #06111d;
  --white: #f6fbff;
  --theme-surface: #142c42;
  --theme-surface-raised: #1a3852;
  --theme-muted: #b8cbda;
  --theme-on-accent: #071821;
  --theme-shadow: rgba(0, 7, 16, .32);
}

/* =========================================================
   ROYAL PURPLE
   Deep aubergine with soft lavender highlights.
   ========================================================= */
html:is([data-theme="purple"], [data-theme="royal"]) {
  color-scheme: dark;
  --paper: #140e1f;
  --paper-deep: #1f1630;
  --ink: #f5eeff;
  --ink-soft: #d2c3e5;
  --line: rgba(213, 189, 243, .2);
  --accent: #c5a0ff;
  --accent-strong: #a77be8;
  --dark: #0b0712;
  --white: #fcf8ff;
  --theme-surface: #241a35;
  --theme-surface-raised: #302143;
  --theme-muted: #c8b8d8;
  --theme-on-accent: #1a1026;
  --theme-shadow: rgba(8, 3, 16, .38);
}

/* =========================================================
   MIDNIGHT EMBER — THE SURPRISE THEME
   Charcoal-brown surfaces with warm copper and champagne.
   ========================================================= */
html:is([data-theme="dark"], [data-theme="ember"]) {
  color-scheme: dark;
  --paper: #17110e;
  --paper-deep: #241914;
  --ink: #fff3e9;
  --ink-soft: #d7c0b0;
  --line: rgba(240, 194, 159, .2);
  --accent: #f0b37e;
  --accent-strong: #d98b54;
  --dark: #0d0907;
  --white: #fff9f3;
  --theme-surface: #2a1d17;
  --theme-surface-raised: #37251c;
  --theme-muted: #d5bca8;
  --theme-on-accent: #241309;
  --theme-shadow: rgba(12, 5, 2, .4);
}

/* Shared styling for all three new dark themes. */
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]),
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) body {
  background: var(--paper);
  color: var(--ink);
}

html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) ::selection {
  color: var(--theme-on-accent);
  background: var(--accent);
}

html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .site-header {
  background: rgba(10, 14, 22, .94);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px var(--theme-shadow);
}
html:is([data-theme="purple"], [data-theme="royal"]) .site-header { background: rgba(20, 14, 31, .95); }
html:is([data-theme="dark"], [data-theme="ember"]) .site-header { background: rgba(23, 17, 14, .95); }

html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .brand-name,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .main-nav > a:not(.nav-contact),
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) h1,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) h2,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) h3,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .large-copy,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .text-link {
  color: var(--ink);
}

html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .brand-mark {
  background: var(--accent);
  color: var(--theme-on-accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .brand-dot,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .footer-brand span {
  color: var(--accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .main-nav > a:hover {
  color: var(--accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .nav-contact {
  color: var(--accent);
  border-color: var(--accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .menu-toggle {
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .menu-toggle span {
  background: var(--ink);
}

html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .eyebrow,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .section-topline,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .work-meta,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .timeline-date,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credential-kind,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .subject-number,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .number-item strong span {
  color: var(--accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .eyebrow-line,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .status-dot,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .note-dot {
  background: var(--accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .section-topline,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .timeline,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .timeline-item,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .recognition-points,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .recognition-point,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credential-list,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credential-item {
  border-color: var(--line);
}

/* Body copy and secondary labels. */
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .hero-intro,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .hero-meta,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .hero-scroll,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .visual-caption,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .about-copy > p:not(.large-copy),
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .section-aside,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .work-card p,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .subject-card p,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .timeline-main > p:not(.timeline-org),
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .timeline-org span,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credentials-intro > p:not(.eyebrow),
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credential-item p:not(.credential-kind),
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .recognition-point p,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .contact-copy,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .projects-disclaimer,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .album-footnote,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .profile-links-label {
  color: var(--theme-muted);
}

html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .text-link {
  border-bottom-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .button-dark,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .button-light {
  background: var(--accent);
  color: var(--theme-on-accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .button-dark:hover,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .button-light:hover {
  background: var(--accent-strong);
  color: var(--theme-on-accent);
}

/* Main section backgrounds and content cards. */
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .numbers-band,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .contact-section {
  background: var(--dark);
  color: var(--ink);
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .number-item p,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .number-item small,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .numbers-note {
  color: var(--theme-muted);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .number-divider {
  background: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .work,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credentials {
  background: var(--paper-deep);
  color: var(--ink);
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .subject-card,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .school-album-card {
  color: var(--ink);
  background: var(--theme-surface);
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .subject-card h3,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .school-album-caption,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credentials-intro h2,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credential-item h3,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .recognition-point h3,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .contact-inner h2 {
  color: var(--ink);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .tag-row span,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .timeline-tags span {
  color: var(--theme-muted);
  background: rgba(255, 255, 255, .035);
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .signature-note {
  color: var(--ink);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .signature-star,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .recognition-icon {
  color: var(--accent);
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .timeline-org {
  color: var(--ink);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credential-stamp {
  color: var(--accent);
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credential-number,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .credential-arrow {
  color: var(--accent);
}

/* Hero links, photo decoration, footer and contact details. */
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .hero-profile-links a {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, .035);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .hero-profile-links a:hover,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .hero-profile-links .profile-link-cv {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 255, 255, .07);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .orbit-one,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .orbit-two {
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .scroll-rule {
  background: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .contact-topline {
  color: var(--theme-muted);
  border-bottom-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .contact-inner > .eyebrow,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .contact-inner h2 em {
  color: var(--accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .contact-secondary {
  color: var(--ink);
  border-bottom-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .contact-decoration > span {
  color: color-mix(in srgb, var(--accent) 10%, transparent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .contact-decoration i {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .site-footer {
  background: var(--dark);
  color: var(--theme-muted);
  border-top-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .footer-brand {
  color: var(--ink);
}

/* Project hover labels and photo controls keep their clear image contrast. */
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .image-arrow {
  background: var(--accent);
  color: var(--theme-on-accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .project-view-button {
  color: var(--accent);
  border-bottom-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .loading-note {
  color: var(--theme-muted);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .theme-toggle {
  color: var(--accent);
  border-color: var(--line);
  background: var(--theme-surface);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .theme-toggle:hover {
  background: var(--theme-surface-raised);
  border-color: var(--accent);
}

/* Gallery dialog and touch descriptions. */
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog {
  color: var(--ink);
  background: var(--theme-surface);
  border-color: var(--line);
  box-shadow: 0 24px 90px var(--theme-shadow);
}
html[data-theme="ocean"] .media-dialog::backdrop { background: rgba(3, 12, 24, .78); }
html:is([data-theme="purple"], [data-theme="royal"]) .media-dialog::backdrop { background: rgba(8, 3, 16, .8); }
html:is([data-theme="dark"], [data-theme="ember"]) .media-dialog::backdrop { background: rgba(12, 5, 2, .8); }
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-header {
  border-bottom-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-header h2,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-close {
  color: var(--ink);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-header .eyebrow {
  color: var(--accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-description,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-item figcaption,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .touch-description p {
  color: var(--theme-muted);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-close {
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-item {
  background: var(--theme-surface-raised);
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-item img,
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .media-dialog-item video {
  background: var(--dark);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .touch-description {
  color: var(--theme-muted);
  border-color: var(--line);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .touch-description summary {
  color: var(--accent);
}
html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .school-touch-description {
  background: rgba(255, 255, 255, .035);
}

/* Keep the expanded mobile navigation consistent with the selected theme. */
@media (max-width: 760px) {
  html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .main-nav {
    background: var(--paper);
    border-bottom-color: var(--line);
    box-shadow: 0 20px 28px var(--theme-shadow);
  }
  html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .main-nav a {
    color: var(--ink);
    border-bottom-color: var(--line);
  }
  html:is([data-theme="ocean"], [data-theme="purple"], [data-theme="dark"], [data-theme="royal"], [data-theme="ember"]) .main-nav .nav-contact {
    color: var(--accent);
    border-color: var(--accent);
  }
}


/* Backwards-compatible aliases for the earlier six-option theme switcher.
   `royal` uses the same Royal Purple palette as `purple`.
   `ember` uses the same Midnight Ember palette as `dark`. */
html[data-theme="royal"] {
  color-scheme: dark;
  --paper: #140e1f;
  --paper-deep: #1f1630;
  --ink: #f5eeff;
  --ink-soft: #d2c3e5;
  --line: rgba(213, 189, 243, .2);
  --accent: #c5a0ff;
  --accent-strong: #a77be8;
  --dark: #0b0712;
  --white: #fcf8ff;
  --theme-surface: #241a35;
  --theme-surface-raised: #302143;
  --theme-muted: #c8b8d8;
  --theme-on-accent: #1a1026;
  --theme-shadow: rgba(8, 3, 16, .38);
}
html[data-theme="ember"] {
  color-scheme: dark;
  --paper: #17110e;
  --paper-deep: #241914;
  --ink: #fff3e9;
  --ink-soft: #d7c0b0;
  --line: rgba(240, 194, 159, .2);
  --accent: #f0b37e;
  --accent-strong: #d98b54;
  --dark: #0d0907;
  --white: #fff9f3;
  --theme-surface: #2a1d17;
  --theme-surface-raised: #37251c;
  --theme-muted: #d5bca8;
  --theme-on-accent: #241309;
  --theme-shadow: rgba(12, 5, 2, .4);
}