/* Only loaded by Home and subject/compatibility navigation pages. */
:root { color-scheme: light; --forest:#173e31; --deep:#0c271f; --gold:#dbb76c; --ink:#263c30; --paper:#fbf3de; }
* { box-sizing:border-box; }
body { margin:0; background:var(--forest); color:var(--paper); font-family:Georgia,'Times New Roman',serif; }
a { color:inherit; }
button { font:inherit; cursor:pointer; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid #f5ce78; outline-offset:5px; }
.skip-link { position:absolute; top:-100px; left:20px; z-index:10; padding:14px; background:var(--paper); color:var(--deep); }
.skip-link:focus { top:12px; }
.masthead { max-width:1800px; margin:auto; border-bottom:1px solid #d9b66655; }
.utilities { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; font:14px system-ui,sans-serif; }
.utilities a { min-height:44px; display:inline-flex; align-items:center; text-underline-offset:5px; }
.nav-shell { margin:0 auto; padding:24px 32px 36px; width:100%; max-width:1800px; }
.page-intro { text-align:center; }
.eyebrow { font:11px system-ui,sans-serif; text-transform:uppercase; letter-spacing:.23em; color:var(--gold); }
h1 { font-weight:normal; font-size:clamp(1.9rem,3vw,2.8rem); margin:8px 0 10px; }
.page-intro p { margin:0; color:#e0dfca; line-height:1.5; }
.subject-map { display:grid; grid-template-columns:minmax(160px,1fr) minmax(300px,1.75fr) minmax(160px,1fr); grid-template-rows:1fr 1fr; align-items:center; gap:12px 34px; max-width:1220px; margin:auto; }
.subject-link { display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; padding:6px 12px; border:1px solid transparent; border-radius:20px; min-width:0; }
.subject-link:hover { background:#f2e8c40b; border-color:#dbb76c55; }
.subject-link img { width:clamp(135px,15vw,225px); height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 8px 10px #071d1a66); }
.subject-link strong { font-size:clamp(1.05rem,1.6vw,1.4rem); font-weight:normal; margin-top:6px; }
.subject-link .subject-note { font:12px system-ui,sans-serif; color:#c7d4c2; margin-top:4px; }
.subject-link:nth-of-type(1) { grid-area:1/1; }
.subject-link:nth-of-type(2) { grid-area:1/3; }
.subject-link:nth-of-type(3) { grid-area:2/1; }
.subject-link:nth-of-type(4) { grid-area:2/3; }
.globe-panel { grid-area:1/2/3/3; margin:0; width:100%; min-width:0; text-align:center; }
.globe-stage { width:100%; aspect-ratio:1; position:relative; border-radius:50%; background:radial-gradient(ellipse,#42674b 0%,#254b38 40%,#173e3100 70%); }
.globe-stage img,.globe-stage canvas { width:100%; height:100%; position:absolute; inset:0; object-fit:contain; }
.globe-stage canvas { opacity:0; touch-action:none; cursor:grab; border-radius:50%; }
.globe-stage[data-ready=true] canvas { opacity:1; }
.globe-stage[data-ready=true] img { visibility:hidden; }
.globe-stage canvas:active { cursor:grabbing; }
.globe-stage canvas[data-pointer-focus=true] { outline:none; }
.globe-caption { font:12px/1.5 system-ui,sans-serif; color:#d5decb; margin:8px 0; min-height:36px; }
.nav-footer { margin:16px 32px 0; padding:20px 0; text-align:center; color:#c7d1bc; border-top:1px solid #d9b66633; font:12px/1.6 system-ui,sans-serif; }
.hub-heading { display:flex; align-items:center; justify-content:center; gap:24px; margin:10px 0 22px; }
.hub-heading img { width:125px; height:125px; object-fit:contain; }
.hub-heading p { color:#d9dfce; margin:8px 0; line-height:1.5; }
.breadcrumb { font:14px system-ui,sans-serif; min-height:44px; display:inline-flex; align-items:center; }
.activity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.activity-card { position:relative; padding-left:36%; background:var(--paper); color:var(--ink); border:1px solid var(--gold); border-radius:14px; display:flex; overflow:hidden; text-decoration:none; min-height:156px; }
.activity-card:hover { background:#fff9e9; box-shadow:0 6px 20px #0003; }
.activity-card img,.activity-art { position:absolute; inset:0 auto 0 0; width:36%; height:100%; object-fit:cover; object-position:center; background:#e6d8b7; }
.activity-art { display:grid; place-items:center; font-size:48px; }
.activity-copy { padding:22px 16px; align-self:center; }
.activity-copy h2 { font-size:1.25rem; line-height:1.25; margin:0 0 8px; }
.activity-copy p { font:14px/1.5 system-ui,sans-serif; margin:0; color:#526044; }
.badge { display:inline-block; font:11px system-ui,sans-serif; background:#e9d09b; padding:4px 7px; border-radius:4px; margin-bottom:8px; }
.empty-state { max-width:720px; margin:32px auto 70px; text-align:center; padding:40px 24px; border:1px solid #c1a16a77; border-radius:18px; background:#f4ebd710; }
.empty-state p { font:16px/1.7 system-ui,sans-serif; color:#d9dfce; }
.paper-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 20px; border-radius:7px; background:var(--paper); color:var(--deep); text-decoration:none; margin:8px; }
@media(min-width:900px) and (max-height:850px) {
  .nav-shell { padding-top:12px; padding-bottom:20px; }
  .subject-map { max-width:1080px; }
  .subject-link img { width:150px; }
  .globe-panel { max-width:350px; justify-self:center; }
}
@media(max-width:1100px) {
  .activity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subject-map { grid-template-columns:minmax(110px,1fr) minmax(210px,1.7fr) minmax(110px,1fr); gap:8px 16px; }
  .subject-link img { width:clamp(100px,15vw,155px); }
  .nav-shell { padding:16px; }
  .utilities { padding:0 16px; }
  .subject-note { display:none; }
}
@media (orientation:portrait) and (max-width:1100px), (max-width:500px) {
  .subject-map { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; max-width:620px; gap:8px; }
  .globe-panel { grid-area:1/1/2/3; width:min(100%,320px); justify-self:center; }
  .subject-link:nth-of-type(n) { grid-area:auto; }
  .subject-link img { width:clamp(120px,22vw,180px); max-width:100%; }
  .activity-grid { grid-template-columns:1fr; max-width:760px; margin:auto; }
  .hub-heading { gap:14px; }
  .hub-heading img { width:90px; height:90px; }
  .nav-footer { margin:0 16px; }
}
@media(max-width:500px) {
  .nav-shell { padding:12px 14px 24px; }
  .globe-panel { width:min(100%,260px); }
  .activity-card { min-height:140px; }
  .hub-heading { align-items:flex-start; }
  .hub-heading h1 { font-size:1.9rem; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

.brand { display:block; width:100%; text-align:center; }
.brand img { display:block; width:100%; height:clamp(120px,17vw,280px); object-fit:contain; }
.utilities { justify-content:flex-end; padding:0 32px; }
.page-intro h1 { font-size:clamp(1.25rem,2vw,1.65rem); margin:0 0 12px; }
.globe-caption:empty { display:none; }
/* A fitted silhouette removes the baked square without replacing the emblem artwork. */
img[src$="science-coloured.webp"] { mask:url('/navigation/assets/science-outline.svg') center / 100% 100% no-repeat; }
img[src$="hass-coloured.webp"] { mask:url("/navigation/assets/hass.webp") center / 100% 100% no-repeat; }
img[src$="english-simple.webp"] { mask:url("/navigation/assets/english.webp") center / 100% 100% no-repeat; }
img[src$="mathematics-simple.webp"] { mask:url("/navigation/assets/mathematics.webp") center / 100% 100% no-repeat; }