/* Appearance: dark is the existing design; light uses the same slate, lilac and mist palette. */
:root { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f7f6f3;
  --ink: #252b37;
  --muted: #596473;
  --line: #d8dce3;
  --peach: #a87372;
  --purple: #75668d;
  --blue: #547d94;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #ffffff35;
  border-radius: 50%;
  color: var(--ink);
  background: #ffffff09;
  transition: background .2s, border-color .2s, transform .2s;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: #ffffff18; transform: rotate(12deg); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle__moon { display: none; }
html[data-theme="light"] .theme-toggle__sun { display: none; }
html[data-theme="light"] .theme-toggle__moon { display: block; }
.theme-toggle:focus-visible { outline-offset: 3px; }

html[data-theme="light"] body { background: var(--paper); color: var(--ink); }
html[data-theme="light"] ::selection { background: #cfd8e9; }
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] [tabindex]:focus-visible { outline-color: #526e9c; }
html[data-theme="light"] .section-shell { background: var(--paper); }
html[data-theme="light"] .site-header .brand > span,
html[data-theme="light"] .desktop-nav a,
html[data-theme="light"] .mobile-menu > a:not(:last-child),
html[data-theme="light"] .event-site-header .brand > span {
  background: none;
  color: #293446;
  -webkit-text-fill-color: #293446;
}
html[data-theme="light"] .desktop-nav a:hover,
html[data-theme="light"] .mobile-menu > a:not(:last-child):hover,
html[data-theme="light"] .event-site-header nav:not(.language-switch) a:hover { color: #596c90; -webkit-text-fill-color: #596c90; }
html[data-theme="light"] .join-pill,
html[data-theme="light"] .join-large {
  color: #273449;
  background: linear-gradient(115deg, #e9dde1, #dddceb 53%, #d2e3e9);
  box-shadow: inset 0 0 0 1px #b8c0cb80;
}
html[data-theme="light"] .hero h1 .rainbow-initial {
  background: linear-gradient(145deg, #475c78, #68658b 55%, #447b92);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .section-heading h2 em,
html[data-theme="light"] .join h2 em { color: #626d82; }
html[data-theme="light"] .hero-baseline,
html[data-theme="light"] .apple-hint,
html[data-theme="light"] .site-footer,
html[data-theme="light"] .join-caption { color: var(--muted); }
html[data-theme="light"] .chapter-rail a:after { background: #9da8b8; }
html[data-theme="light"] .chapter-rail a.active:after { background: linear-gradient(#ba9aaa, #8c8ab5, #6897ac); }
html[data-theme="light"] .color-orb { background: linear-gradient(145deg, #c9aabc, #9ea7ca 58%, #8bb6c7); }
html[data-theme="light"] .unfold-control { background: #ffffff73; border-color: var(--line); }
html[data-theme="light"] .unfold-control:after { border-color: #cbd1dc; }
html[data-theme="light"] .mobile-menu { background: #f7f6f3f5; }
html[data-theme="light"] .menu-toggle span { background: var(--ink); }
html[data-theme="light"] .back-apple,
html[data-theme="light"] .motion-toggle { color: var(--ink); background: #ffffffde; border-color: var(--line); }
html[data-theme="light"] dialog { color: var(--ink); background: #fff; border-color: var(--line); box-shadow: 0 25px 90px #4c587038; }
html[data-theme="light"] dialog::backdrop { background: #29364e59; }
html[data-theme="light"] .detail-body { color: var(--muted); }

html[data-theme="light"] .language-switch { color: var(--ink); background: #eaecf0; border-color: #cdd2da; }
html[data-theme="light"] .language-switch__option { color: #4d5868; }
html[data-theme="light"] .language-switch__option:hover { color: #26364f; background: #dce1e8; }
html[data-theme="light"] .language-switch__option.is-active,
html[data-theme="light"] .language-switch__option.is-active:hover { color: #fff; background: #2d394d; }
html[data-theme="light"] .theme-toggle { color: #364a68; background: #ffffffd9; border-color: #cdd3dc; }
html[data-theme="light"] .theme-toggle:hover { background: #e9edf2; }

html[data-theme="light"] .event-upcoming-empty {
  color: var(--ink);
  border-color: var(--line);
  background: radial-gradient(circle at 85% 20%, #d8cadd9e, transparent 38%),
              radial-gradient(circle at 66% 85%, #c7dce78c, transparent 38%), #fff;
}
html[data-theme="light"] .event-upcoming-empty h2 em { color: #74688d; }
html[data-theme="light"] .event-card { color: var(--ink); background: #fff; border-color: var(--line); }
html[data-theme="light"] .event-card:hover,
html[data-theme="light"] .event-card:focus-within { border-color: #a8a5c5; box-shadow: 0 18px 45px #3b475c21; }
html[data-theme="light"] .event-card__body .eyebrow { color: #6a668a; }
html[data-theme="light"] .event-card__read { color: #465d7b; }
html[data-theme="light"] .event-archive__intro h1 em,
html[data-theme="light"] .site-page__hero h1 {
  background: linear-gradient(115deg, #806279, #66638a 52%, #4d7890);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .event-content,
html[data-theme="light"] .site-page__content p,
html[data-theme="light"] .site-page__content li { color: #3e4856; }
html[data-theme="light"] .event-content a,
html[data-theme="light"] .site-page__content a { color: #365f8c; }
html[data-theme="light"] .site-page__content p.site-page__lead { color: var(--ink); }
html[data-theme="light"] .site-page__content p.site-page__eyebrow { color: #6f6188; }
html[data-theme="light"] .event-archive__pagination .current { border-color: #817198; background: #e9e5ed; }
html[data-theme="light"] .event-site-footer { color: var(--muted); }

@media (max-width: 760px) {
  .site-header .brand > span { font-size: 18px; }
  .site-header .brand-mark { width: 30px; height: 30px; }
  .header-actions { gap: 8px; }
  .header-actions .language-switch__option { min-width: 38px; min-height: 28px; padding: 4px 6px; }
  .theme-toggle { flex-basis: 34px; width: 34px; height: 34px; }
  .theme-toggle svg { width: 17px; height: 17px; }
  .menu-toggle { width: 30px; }
  .event-site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 8px; }
  .event-header-actions { display: contents; }
  .event-header-actions > nav:not(.language-switch) { grid-column: 1 / -1; grid-row: 2; }
  .event-header-actions > .language-switch { grid-column: 2; grid-row: 1; }
  .event-header-actions > .theme-toggle { grid-column: 3; grid-row: 1; }
}
@media (max-width: 380px) {
  .site-header { padding-left: 4%; padding-right: 4%; }
  .site-header .brand > span { font-size: 16px; }
  .site-header .brand-mark { width: 28px; height: 28px; }
  .header-actions { gap: 6px; }
  .menu-toggle { width: 27px; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* The club mark is the color reference for accents in both appearances. */
:root {
  --club-gradient: linear-gradient(110deg, #ffc080 0%, #ec8db9 42%, #a38cdd 70%, #78bdd9 100%);
  --club-gradient-ink: linear-gradient(110deg, #a94d60 0%, #945098 43%, #6556a8 72%, #276e99 100%);
}
.site-header .brand > span,
.event-site-header .brand > span {
  background: var(--club-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.join-pill,
.join-large {
  color: #252434;
  background: var(--club-gradient);
  box-shadow: inset 0 0 0 1px #ffffff55, 0 8px 28px #ae75b32b;
}
.join-pill:hover,
.join-large:hover { box-shadow: inset 0 0 0 1px #ffffff80, 0 12px 34px #ae75b348; }
.hero h1 .rainbow-initial,
.event-archive__intro h1 em,
.site-page__hero h1,
.section-heading h2 em,
.join h2 em {
  background: var(--club-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color-orb { background: var(--club-gradient); box-shadow: inset -4px -4px 8px #4f4c9425, 0 0 18px #d777c044; }
.tiny-dot,
.chapter-rail a.active:after { background: var(--club-gradient); }
.reading-progress span { background: var(--club-gradient); }
.theme-toggle {
  background: linear-gradient(#171821, #171821) padding-box, var(--club-gradient) border-box;
  border-color: transparent;
}
.theme-toggle:hover { background: linear-gradient(#292633, #292633) padding-box, var(--club-gradient) border-box; }
.event-card:hover,
.event-card:focus-within { border-color: #aa86d1; }
.desktop-nav a:hover,
.event-site-header nav:not(.language-switch) a:hover,
.event-site-header nav:not(.language-switch) a:focus-visible { color: #ed96c5; -webkit-text-fill-color: #ed96c5; }
.event-upcoming-empty h2 em { color: #d999db; }
.event-content a,
.site-page__content a,
.event-card__read { color: #baa9ff; }
.fallback-apple {
  background: radial-gradient(ellipse at 28% 18%, #ffc080, transparent 40%),
              linear-gradient(150deg, #f3a172 4%, #ed70b1 38%, #a281db 69%, #6da8db 100%);
}
.fallback-apple:after { background: linear-gradient(120deg, #8c88dc, #68b1d8); }
.fallback-apple > span { border-color: #bc78d2; }

html[data-theme="light"] .site-header .brand > span,
html[data-theme="light"] .event-site-header .brand > span { background: var(--club-gradient-ink); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
html[data-theme="light"] .join-pill,
html[data-theme="light"] .join-large { color: #252434; background: var(--club-gradient); box-shadow: inset 0 0 0 1px #ffffff80, 0 8px 28px #96569b24; }
html[data-theme="light"] .hero h1 .rainbow-initial,
html[data-theme="light"] .event-archive__intro h1 em,
html[data-theme="light"] .site-page__hero h1,
html[data-theme="light"] .section-heading h2 em,
html[data-theme="light"] .join h2 em { background: var(--club-gradient-ink); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
html[data-theme="light"] .color-orb { background: var(--club-gradient); box-shadow: inset -3px -3px 8px #53509824, 0 0 18px #dc84ca55; }
html[data-theme="light"] .theme-toggle { color: #58447d; background: linear-gradient(#fff, #fff) padding-box, var(--club-gradient) border-box; border-color: transparent; }
html[data-theme="light"] .theme-toggle:hover { background: linear-gradient(#f8f2fa, #f8f2fa) padding-box, var(--club-gradient) border-box; }
html[data-theme="light"] .event-upcoming-empty {
  background: radial-gradient(circle at 85% 20%, #eda1c35e, transparent 38%),
              radial-gradient(circle at 66% 85%, #91b9e45e, transparent 38%), #fff;
}
html[data-theme="light"] .event-card:hover,
html[data-theme="light"] .event-card:focus-within { border-color: #b284c8; }
html[data-theme="light"] .desktop-nav a:hover,
html[data-theme="light"] .event-site-header nav:not(.language-switch) a:hover,
html[data-theme="light"] .event-site-header nav:not(.language-switch) a:focus-visible { color: #945098; -webkit-text-fill-color: #945098; }
html[data-theme="light"] .event-upcoming-empty h2 em { color: #945098; }
html[data-theme="light"] .event-content a,
html[data-theme="light"] .site-page__content a,
html[data-theme="light"] .event-card__read { color: #714a91; }
@media (forced-colors: active) {
  .site-header .brand > span,
  .event-site-header .brand > span,
  .hero h1 .rainbow-initial,
  .event-archive__intro h1 em,
  .site-page__hero h1,
  .section-heading h2 em,
  .join h2 em { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .join-pill, .join-large { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
}

/* Let the document-length ribbon stay visible behind the reading sections. */
.section-shell { background: rgba(17, 18, 24, .62); }
html[data-theme="light"] .section-shell { background: rgba(247, 246, 243, .66); }
.upcoming.section-shell { background: linear-gradient(to bottom, transparent, rgba(17, 18, 24, .62) 240px); }
html[data-theme="light"] .upcoming.section-shell { background: linear-gradient(to bottom, transparent, rgba(247, 246, 243, .66) 240px); }

/* Give DKU the university mark's green-to-blue color, with a soft light center. */
:root {
  --dku-wordmark: linear-gradient(105deg, #2bb879 0%, #a9d675 31%, #f5f4e8 49%, #58b5d0 69%, #227dbc 100%);
  --dku-wordmark-light: linear-gradient(105deg, #006a4d 0%, #318b52 36%, #177f83 61%, #084b8b 100%);
}
.site-header .brand > .brand__wordmark,
.event-site-header .brand > .brand__wordmark,
.site-footer .brand > .brand__wordmark {
  background: none;
  -webkit-text-fill-color: currentColor;
}
.brand__dku,
.hero h1 .dku-word {
  background: var(--dku-wordmark);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.brand__club {
  background: var(--club-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .brand__dku,
html[data-theme="light"] .hero h1 .dku-word { background: var(--dku-wordmark-light); background-clip: text; -webkit-background-clip: text; }
html[data-theme="light"] .brand__club { background: var(--club-gradient-ink); background-clip: text; -webkit-background-clip: text; }
@media (forced-colors: active) {
  .brand__dku, .brand__club, .hero h1 .dku-word {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

/* Use the bundled Sora face for navigation and actions; keep editorial headings serif. */
:root { --ui-font: 'Sora', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
.desktop-nav a,
.event-site-header nav:not(.language-switch) a,
.language-switch__option,
.join-pill,
.join-large,
.text-link,
.event-card__read,
.event-single__back {
  font-family: var(--ui-font);
  font-weight: 500;
  letter-spacing: -.025em;
}
.desktop-nav a,
.event-site-header nav:not(.language-switch) a { font-weight: 400; letter-spacing: -.01em; }
.join-pill { align-items: center; gap: 27px; padding: 15px 23px; line-height: 1.2; }
.join-pill > .lang-en,
.join-pill > .lang-zh { font-size: 15px; }
.join-pill > [aria-hidden] { font-family: var(--sans); font-size: 18px; line-height: 1; }
.join-large { font-size: 15px; line-height: 1.2; }
.join-large > .lang-en,
.join-large > .lang-zh { font-family: var(--ui-font); font-size: 16px; font-weight: 500; }
.join-large > [aria-hidden] { font-family: var(--sans); font-size: 22px; line-height: 1; }
.language-switch__option { font-size: 11px; letter-spacing: -.01em; }
@media (min-width: 761px) and (max-width: 1120px) {
  .join-pill { gap: 15px; padding: 13px 17px; }
  .join-pill > .lang-en, .join-pill > .lang-zh { font-size: 12px; }
}
@media (max-width: 760px) {
  .join-large > .lang-en,
  .join-large > .lang-zh { font-size: 14px; }
}