.education-page {
  --work-rule: color-mix(in srgb, var(--primary) 28%, transparent);
  --work-surface: color-mix(in srgb, var(--background) 94%, transparent);
  display: flex;
  flex-direction: column;
  place-items: normal;
  height: auto;
  min-height: 100svh;
  padding: 0 clamp(24px, 4vw, 72px);
  pointer-events: auto;
  text-shadow: 0 1px 14px var(--background), 0 0 6px var(--background);
}
.education-page > .work-header { width: min(100%, 1320px); margin: 0 auto; flex-shrink: 0; }
.education-body { width: min(100%, 1200px); margin: 0 auto; padding: 36px 0 32px; }
.education-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 72px); }
.school-map { min-width: 0; container-type: inline-size; }
.school-scene { position: relative; }
.is-enhanced .school-scene { aspect-ratio: 500 / 460; }
.school-geography { display: block; width: 100%; overflow: visible; pointer-events: none; }
.is-enhanced .school-geography { position: absolute; inset: 0; }
.state-outline, .state-islands { stroke: var(--primary); stroke-width: 1.6px; }
.state-outline { fill: var(--background); fill-opacity: 0; }
.school-callout { stroke: var(--primary); stroke-width: 1px; }
.school-callout circle { fill: var(--dot-bright); stroke-width: 0; }
.school-caption { position: absolute; inset: 0 0 auto; aspect-ratio: 500 / 460; pointer-events: none; }
.school-caption h2 { position: absolute; top: 3%; left: 10%; width: 80%; margin: 0; max-width: 20ch; color: var(--text); font-size: clamp(20px, 5.4cqw, 31px); font-weight: 400; line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.school-open { cursor: pointer; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; }
.school-map:has(.school-open:is(:hover, :focus-visible)) .state-outline { stroke: var(--dot-bright); stroke-width: 2.3px; }
.school-open:focus-visible { outline-offset: -8px; }
.school-details { pointer-events: none; text-align: center; padding: 24px; }
.is-enhanced .school-details { position: absolute; z-index: 1; left: 18%; right: 18%; top: 50%; padding: 0; translate: 0 -50%; }
.school-date { color: var(--muted); font-size: clamp(11px, 2.6cqw, 14px); margin: 0 0 12px; }
.school-degree { color: var(--primary); font-size: clamp(32px, 10cqw, 58px); font-weight: 400; line-height: 0.95; letter-spacing: -0.065em; margin: 0 0 14px; }
.school-degree abbr { text-decoration: none; }
.school-subject { color: var(--text); font-size: clamp(18px, 4.8cqw, 28px); line-height: 1.1; letter-spacing: -0.03em; margin: 0; }
.school-detail { color: var(--muted); font-size: clamp(12px, 2.8cqw, 16px); line-height: 1.4; margin: 10px 0 12px; }
.school-back { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 6px 0; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--primary); font-size: clamp(11px, 2.5cqw, 14px); }
.school-back span { color: var(--primary); }
.school-back:hover { color: var(--dot-bright); }
.school-back:active { color: var(--focus); }
.education-certifications { margin-top: 28px; }
.education-certifications > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 16px 0; border-block: 1px solid var(--work-rule); color: var(--text); font-size: 18px; cursor: pointer; list-style: none; }
.education-certifications > summary::-webkit-details-marker { display: none; }
.education-certifications > summary::after { content: '+'; color: var(--primary); font-size: 28px; line-height: 1; }
.education-certifications[open] > summary::after { content: '−'; }
.education-certifications > summary:hover { color: var(--dot-bright); }
.education-certifications > summary:active { color: var(--focus); }
.education-certifications > summary:focus-visible { outline-offset: 5px; }
.certification-list { padding: 0; }
.certification:first-child { border-top: 0; }
.certification { display: grid; grid-template-columns: minmax(140px, .6fr) minmax(0, 1.7fr) 150px; gap: 28px; align-items: baseline; padding: 40px 0; border-top: 1px solid var(--work-rule); }
.certification:last-child { border-bottom: 1px solid var(--work-rule); }
.certification-issuer { margin: 0; color: var(--primary); font-size: 15px; }
.certification-name h2 { max-width: 21ch; margin: 0; color: var(--text); font-size: clamp(26px, 3vw, 42px); font-weight: 400; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.certification-level { margin: 14px 0 0; color: var(--muted); font-size: 17px; }
.certification-date { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; color: var(--muted); font-size: 13px; }
.certification-date time { white-space: nowrap; }

@media (max-width: 740px) {
  .education-body { padding-top: 28px; }
  .education-maps { grid-template-columns: 1fr; gap: 26px; max-width: 500px; margin: auto; }
  .certification { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
  .certification-list { padding-top: 0; }
  .certification-name h2 { font-size: clamp(26px, 7vw, 36px); }
}
@media (max-width: 380px) {
  .school-date { margin-bottom: 8px; }
  .school-degree { margin-bottom: 10px; }
  .school-detail { margin: 8px 0; }
}
@media (forced-colors: active) {
  .education-page { --work-rule: CanvasText; --work-surface: Canvas; text-shadow: none; }
  .state-outline, .state-islands, .school-callout { stroke: CanvasText; }
  .state-outline { fill: Canvas; }
  .school-callout circle { fill: CanvasText; }
  .school-degree { color: CanvasText; }
  .school-back { color: ButtonText; border-color: ButtonText; }
  .education-certifications > summary::after { color: ButtonText; }
  .certification-issuer { color: CanvasText; }
}