/* Dedicated public grade journey. Existing Home, footer and palettes stay native. */
.n9-grade-journey{--grade-ink:var(--n9-colour-text,#172337);--grade-paper:var(--n9-colour-surface,#fff);width:min(1180px,calc(100% - 32px));margin:40px auto 64px;color:var(--grade-ink)}
.n9-grade-journey *{box-sizing:border-box}
.n9-grade-journey h1{font-size:clamp(36px,5vw,64px);line-height:1.08;letter-spacing:-.035em;margin:12px 0 18px}
.n9-grade-journey>p{font-size:18px;line-height:1.6}
.n9-grade-journey .n9-grade-kicker{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--n9-colour-muted,#526071)}
.n9-language-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:30px}
.n9-language-card{display:block;min-width:0;border:2px solid #172337;border-radius:24px;overflow:hidden;background:var(--grade-paper);color:var(--grade-ink);text-decoration:none;box-shadow:0 5px 0 #172337;transition:transform .15s ease}
.n9-language-card:hover{transform:translateY(-3px)}
.n9-language-card:focus-visible{outline:4px solid var(--n9-colour-focus,#725009);outline-offset:6px}
.n9-language-picture{position:relative;aspect-ratio:4/3;overflow:hidden;background:#ffda3f}
.n9-language-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:25% center}
.n9-language-en .n9-language-picture{background:#43cbd4}
.n9-language-en .n9-language-picture img{object-position:75% center}
.n9-grade-circle{position:absolute;bottom:16px;left:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:clamp(124px,16vw,184px);aspect-ratio:1;border:3px solid #172337;border-radius:50%;padding:16px;text-align:center;background:#ffda3f;color:#172337;box-shadow:0 4px 0 #172337}
.n9-language-en .n9-grade-circle{background:#43cbd4}
.n9-grade-circle strong{font-size:clamp(22px,2.5vw,32px);line-height:1.15}
.n9-grade-circle>span{font-size:clamp(13px,1.3vw,17px);font-weight:750;line-height:1.35;max-width:100%}
.n9-language-card-copy{padding:22px}
.n9-language-card-copy h2{margin:0 0 12px;font-size:clamp(23px,2.6vw,32px);line-height:1.2}
.n9-language-card-copy p{margin:0;font-weight:750;font-size:16px;line-height:1.5}
.n9-grade-note{font-size:15px!important;line-height:1.6;color:var(--n9-colour-muted,#526071)}
.n9-grade-back{display:inline-block;padding:10px 0;min-height:44px;color:var(--n9-colour-link,#725009);font-weight:750}
.n9-public-terms{padding:clamp(18px,3vw,32px);border:1px solid #d7dee6;border-radius:24px;background:var(--grade-paper);margin-top:28px}
.n9-public-term-grid{min-width:0;padding:0;border:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.n9-public-term-grid legend{margin:0 0 18px;padding:0;font-weight:750;font-size:18px}
.n9-public-term{position:relative;display:flex;gap:10px;align-items:flex-start;min-width:0;min-height:158px;padding:18px 14px;border:2px solid #a5b0bc;border-radius:16px;background:var(--n9-colour-surface,#fff);color:var(--grade-ink);cursor:pointer}
.n9-public-term:nth-of-type(1){--term-accent:#ffda3f}
.n9-public-term:nth-of-type(2){--term-accent:#43cbd4}
.n9-public-term:nth-of-type(3){--term-accent:#ceb6f5}
.n9-public-term:nth-of-type(4){--term-accent:#ff806b}
.n9-public-term:has(input:checked){background:var(--term-accent);color:#172337;border-color:#172337;box-shadow:0 3px 0 #172337}
.n9-public-term:focus-within{outline:3px solid var(--n9-colour-focus,#725009);outline-offset:3px}
.n9-public-term input{flex:0 0 auto;width:20px;height:20px;margin:3px 0 0;accent-color:var(--n9-colour-link,#725009)}
.n9-public-term>span{display:flex;flex-direction:column;gap:10px;min-width:0}
.n9-public-term strong{font-size:20px;line-height:1.3}
.n9-public-term b{font-size:28px;line-height:1.15}
.n9-public-term small,.n9-public-term em{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.n9-public-term.is-unavailable{background:#f0f2f4;color:#526071;cursor:default}
.n9-public-term-tools{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.n9-public-term-tools[hidden]{display:none}
.n9-public-term-tools button{font:inherit;font-size:14px;min-height:44px;padding:10px 14px;border:1px solid #a5b0bc;border-radius:9px;background:var(--grade-paper);color:var(--grade-ink);cursor:pointer}
.n9-public-term-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid #d7dee6;font-size:18px}
.n9-public-term-total strong{font-size:clamp(30px,4vw,42px)}
.n9-grade-continue{margin-top:24px;text-align:center}
.n9-grade-button{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:52px;padding:14px 24px;border:2px solid #172337;border-radius:12px;background:var(--n9-colour-primary,#d2a124);color:var(--n9-colour-primary-text,#172337);font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.n9-grade-button:disabled{opacity:.55;cursor:default}
.n9-grade-continue p{font-size:14px;line-height:1.6}
.n9-grade-error{padding:14px;border:2px solid #8c291d;border-radius:12px;color:#8c291d;background:#fff5f1}
.n9-grade-menu{position:relative;min-width:0}
.n9-grade-desktop-links{display:none}
@media(min-width:1081px){
  .n9-public-header .nav .n9-grade-desktop-links{display:contents}
  .n9-public-header .nav .n9-grade-desktop-links ~ .n9-grade-menu{display:none}
  .n9-public-header .nav .n9-grade-desktop-links>a{min-height:42px;display:inline-flex;align-items:center;padding:8px 10px;border:0;border-radius:9px;white-space:nowrap}
  .n9-public-header .nav .n9-grade-desktop-links>a:hover,.n9-public-header .nav .n9-grade-desktop-links>a:focus-visible{color:var(--navy);background:var(--book-paper-warm)}
  .n9-public-header .nav .n9-grade-desktop-links>a.active,.n9-public-header .nav .n9-grade-desktop-links>a[aria-current="page"]{color:var(--navy);background:linear-gradient(180deg,#fffdf8,#f5ead1);box-shadow:inset 0 -2px 0 var(--menu-accent)}
}
.n9-grade-desktop-links>a:focus-visible{outline:3px solid var(--n9-colour-focus,#725009);outline-offset:3px}
.n9-grade-menu>summary{min-height:44px;display:flex;align-items:center;gap:8px;padding:10px 12px;font-weight:750;cursor:pointer;list-style:none}
.n9-grade-menu>summary::-webkit-details-marker{display:none}
.n9-grade-menu>summary::after{content:'⌄';margin-left:auto}
.n9-grade-menu[open]>summary::after{content:'⌃'}
.n9-grade-menu-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;position:absolute;top:100%;left:0;width:320px;padding:12px;border:1px solid #d7dee6;border-radius:12px;background:var(--n9-colour-surface,#fff);box-shadow:0 10px 24px rgba(23,35,55,.14);z-index:60}
.n9-grade-menu-links>a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:8px;color:var(--n9-colour-text,#172337);background:var(--n9-colour-tint,#fff4cd);border-radius:8px;font-weight:700;text-decoration:none;font-size:14px;line-height:1.4;text-align:center}
.n9-grade-menu-links>a:focus-visible,.n9-grade-button:focus-visible,.n9-public-term-tools button:focus-visible{outline:3px solid var(--n9-colour-focus,#725009);outline-offset:3px}
@media(max-width:1080px){
  .n9-public-header .nav>.header-course-link{order:-1;margin-left:0;width:100%;justify-content:flex-start}
  .n9-public-header .header-inner .nav{box-sizing:border-box;width:min(440px,calc(100vw - var(--n9-public-gutter,16px) * 2));max-width:calc(100vw - var(--n9-public-gutter,16px) * 2);min-width:0;grid-template-columns:minmax(0,1fr);overflow-x:hidden}
  .n9-public-header .nav .n9-grade-menu{width:100%;min-width:0;border-top:1px solid #d7dee6;padding-top:4px}
  .n9-public-header .nav .n9-grade-menu-links{position:static;width:100%;max-width:100%;box-shadow:none;border:0;padding:4px 0 10px;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){.n9-language-cards{grid-template-columns:minmax(0,1fr);gap:24px}.n9-language-picture{aspect-ratio:3/2}.n9-grade-circle{width:144px}.n9-public-term-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.n9-public-term{min-height:166px}}
@media(max-width:420px){.n9-grade-journey{width:calc(100% - 24px);margin-top:24px}.n9-grade-circle{width:124px;left:12px;bottom:12px}.n9-public-terms{padding:16px}.n9-public-term-grid{gap:10px}.n9-public-term{padding:14px 10px;gap:7px}.n9-public-term strong{font-size:17px}.n9-public-term input{width:18px;height:18px}.n9-grade-button{width:100%;padding:12px 10px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.n9-language-card{transition:none}.n9-language-card:hover{transform:none}}

/* Grade-specific term artwork; keep the complete supplied image visible. */
.n9-grade-term-artwork {
  width:min(1180px,calc(100% - 32px));
  margin:40px auto 24px;
}
.n9-grade-term-artwork img {
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
}
.n9-grade-term-artwork + .n9-grade-journey {margin-top:24px}
@media(max-width:420px) {
  .n9-grade-term-artwork {width:calc(100% - 24px);margin-top:24px}
  .n9-grade-term-artwork img {border-radius:16px}
}

/* Artwork term tabs: colours sampled from the Grade 4 Afrikaans artwork. */
.n9-artwork-term-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.n9-artwork-term-tab {
  --artwork-term-colour:#ffda3f;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
  min-height:60px;
  padding:14px 16px;
  border:2px solid #1a2e3a;
  border-radius:12px;
  background:var(--artwork-term-colour);
  color:#172337;
  box-shadow:0 3px 0 #1a2e3a;
  font-family:inherit;
  font-size:18px;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  cursor:pointer;
}
.n9-artwork-term-tab:nth-child(2) {--artwork-term-colour:#32c6d4}
.n9-artwork-term-tab:nth-child(3) {--artwork-term-colour:#b7a5f3}
.n9-artwork-term-tab:nth-child(4) {--artwork-term-colour:#ff806b}
.n9-artwork-term-tab:hover {filter:brightness(1.045)}
.n9-artwork-term-tab:focus-visible {outline:3px solid #172337;outline-offset:5px}
.n9-artwork-term-tab[aria-pressed="true"] {box-shadow:inset 0 0 0 2px #1a2e3a,0 3px 0 #1a2e3a}
.n9-artwork-term-tab::before {content:"";width:18px;height:18px;flex:0 0 18px;border:2px solid currentColor;border-radius:4px;box-sizing:border-box}
.n9-artwork-term-tab[aria-pressed="true"]::before {content:"✓";display:flex;align-items:center;justify-content:center;background:#172337;color:#fff;border-color:#172337;font-size:14px;line-height:1}
.n9-artwork-term-tab:disabled {opacity:.55;cursor:not-allowed;box-shadow:none}
@media(max-width:760px) {
  .n9-artwork-term-tabs {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:420px) {
  .n9-artwork-term-tab {padding:12px 8px;min-height:56px}
}

.n9-artwork-term-tabs[hidden]{display:none}

/* Term content tabs. Selecting a tab only changes the visible term area. */
.n9-artwork-term-tab[role="tab"] {position:relative}
.n9-artwork-term-tab[role="tab"]::before {display:none}
.n9-artwork-term-tab[role="tab"][aria-selected="true"] {
  box-shadow:inset 0 0 0 2px #1a2e3a,0 3px 0 #1a2e3a;
}
.n9-artwork-term-tab[role="tab"][aria-selected="true"]::after {
  content:"";position:absolute;bottom:5px;left:calc(50% - 18px);
  width:36px;height:3px;border-radius:3px;background:#172337;
}
.n9-artwork-term-panel {margin-top:24px;padding-top:20px;border-top:5px solid #ffda3f}
.n9-artwork-term-panel[data-grade-term-panel="2"] {border-top-color:#32c6d4}
.n9-artwork-term-panel[data-grade-term-panel="3"] {border-top-color:#b7a5f3}
.n9-artwork-term-panel[data-grade-term-panel="4"] {border-top-color:#ff806b}
.n9-artwork-term-panel[hidden] {display:none!important}
.n9-artwork-term-panel:focus-visible {outline:3px solid #172337;outline-offset:6px}
