/* Overview uses the same tables as the IB guide, with native course disclosures. */
#grade-guide {padding:72px 28px 78px;background:#fbf8f3;scroll-margin-top:100px}
#grade-guide .hy-guide-inner {display:block;max-width:1106px}
#grade-guide .overview-guide-heading {display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:55px;padding:0 0 32px;margin-bottom:30px;border-bottom:1px solid #d9cbbb}
#grade-guide .hy-guide-kicker {margin:0 0 14px;font-size:11px}
#grade-guide h2 {margin:0;font-size:clamp(28px,3vw,38px);line-height:1.5}
#grade-guide .hy-guide-intro {margin:0 0 4px;max-width:430px;font-size:14px;line-height:1.95}
#grade-guide .overview-guide-block {padding:0;margin:0 0 15px;background:#f7f2e9;border:1px solid #ded2c2;box-shadow:0 3px 0 -1px #f2eadf;scroll-margin-top:105px}
#grade-guide .overview-guide-block::before {left:26px;height:3px;width:30px;opacity:0;transition:opacity .3s}
#grade-guide .overview-guide-block[open]::before {opacity:1}
#grade-guide .overview-guide-block>summary {padding:23px 75px 23px 26px;gap:20px;font:500 21px/1.6 'Noto Serif TC',serif;color:#3c322b;transition:background .3s,color .3s}
#grade-guide .overview-guide-block>summary:hover {background:#efe5d7;color:#9b3b35}
#grade-guide .overview-guide-block>summary small {font:400 12px/1.8 'Plus Jakarta Sans','Noto Sans TC',sans-serif;white-space:normal;text-align:right;flex-shrink:0;color:#8b7058;max-width:50%}
#grade-guide .overview-guide-block>summary::after {content:'+';right:26px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:29px;height:29px;border:1px solid #cbb69f;border-radius:50%;color:#9b3b35;font:400 19px/1 Georgia,serif;transition:transform .4s,background .3s}
#grade-guide .overview-guide-block[open]>summary::after {content:'−';background:#fffaf3}
#grade-guide .overview-guide-block>summary:focus-visible {outline:2px solid #9b3b35;outline-offset:4px}
#grade-guide .hy-grade-content {padding:0 26px 24px}
#grade-guide .level-table {font-size:14px}
#grade-guide .level-table thead th {padding:13px 20px}
#grade-guide .level-table tbody th,#grade-guide .level-table td {padding:16px 20px}
#grade-guide .overview-key-cell {color:var(--level-ink);font-size:16px}
#grade-guide .overview-guide--early tbody th {font-family:'Lora',Georgia,serif;font-size:21px}
#grade-guide .hy-grade-content>.level-table-wrap + p {margin:18px 0 0}
#grade-guide .hy-grade-content>p {font-size:12px;line-height:1.95;max-width:840px;margin:0 0 20px}
#grade-guide .hy-grade-content>a {margin-top:20px;gap:24px;padding:10px 15px;border:1px solid #c4aa91;background:#fffaf3;color:#8f3731;font-size:12px;line-height:1.6;transition:background .3s,color .3s}
#grade-guide .hy-grade-content>a:hover {background:#9b3b35;color:white;gap:24px}
#grade-guide .hy-grade-content>a:focus-visible {outline:2px solid #9b3b35;outline-offset:3px}
#grade-guide .overview-guide--sf {background:#f2f4ed;border-color:#d4dccb;box-shadow:0 3px 0 -1px #e9eddf}
#grade-guide .overview-guide--sf>summary,#grade-guide .overview-guide--sf>summary small {color:#586951}
#grade-guide .overview-guide--sf>summary:hover {background:#e6ecde}
#grade-guide .overview-guide--sf>summary::after {border-color:#acb99f;color:#586951}
#grade-guide .overview-guide--sf .hy-grade-content>a {border-color:#acb99f;color:#526148;background:#fbfcf8}
#grade-guide .overview-guide--sf .hy-grade-content>a:hover {background:#586951;color:#fff}
#grade-guide .overview-guide-notes {padding:8px 3px 0}
#grade-guide .hy-guide-note {margin-top:13px;max-width:100%;font-size:11px;line-height:1.95}
@media(max-width:900px) {
  #grade-guide {padding:52px 24px 58px}
  #grade-guide .overview-guide-heading {gap:28px;grid-template-columns:1fr 1fr}
  #grade-guide .overview-guide-block>summary {font-size:19px}
  #grade-guide .overview-guide-block>summary small {font-size:11px}
}
@media(max-width:650px) {
  #grade-guide .overview-guide-heading {grid-template-columns:1fr;gap:16px;padding-bottom:23px;margin-bottom:23px}
  #grade-guide h2 {font-size:29px}
  #grade-guide .hy-guide-intro {max-width:100%;font-size:13px}
  #grade-guide .overview-guide-block>summary {display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:19px 56px 19px 17px;font-size:18px}
  #grade-guide .overview-guide-block>summary small {width:auto;max-width:100%;text-align:left}
  #grade-guide .overview-guide-block>summary::after {right:17px;width:26px;height:26px}
  #grade-guide .overview-guide-block::before {left:17px}
  #grade-guide .hy-grade-content {padding:0 15px 20px}
  #grade-guide .level-table thead th {padding:11px 10px;font-size:11px}
  #grade-guide .level-table tbody th,#grade-guide .level-table td {padding:14px 10px;font-size:13px}
  #grade-guide .overview-guide--early tbody th {font-size:19px}
  #grade-guide .level-school-grade {font-size:11px}
  #grade-guide .overview-key-cell {font-size:15px!important}
  #grade-guide .hy-grade-content>a {margin-top:17px}
}
@media(max-width:400px) {
  #grade-guide {padding-inline:18px}
  #grade-guide .hy-grade-content {padding-inline:11px}
  #grade-guide .level-table thead th,#grade-guide .level-table tbody th,#grade-guide .level-table td {padding-inline:8px}
}
@media(prefers-reduced-motion:reduce) {#grade-guide *,#grade-guide *::before,#grade-guide *::after {transition:none!important;animation:none!important}}