/* IMSOG shared chrome: colour tokens, header, navigation, banner, footer.
   Loaded on every page, including the Past Papers and timetable apps, so every class here is "sx-" prefixed. */
:root {
  /* Palette: "Spruce & Almond" (Media.io) on IMSOG cream. Each colour has one job:
     cream paper + warm ink ..... the base of every page
     orange .................... action only: buttons, links, the one highlighted word
     spruce green .............. the one big block per page (hero), the banner and the footer
     muted spruce .............. the quote card
     almond .................... soft warm sections (the Join panel)
     sunshine .................. tiny handwritten notes on green, the footer heart
     Dark mode: no green blocks. The "green" slots become raised warm charcoal and orange carries the colour. */
  --paper: #f6f0e6; --surface: #fcf8f1; --surface-2: #ece3d3; --ink: #221c14; --muted: #6b6152; --line: #ddd2bf;
  --orange: #e2572b; --orange-text: #b3421b; --orange-soft: #f6dccb;
  --green: #1e3a34; --green-2: #3e5f57; --on-green: #fffaf2; --on-green-muted: #dbe5e0;
  --peach: #e9dcc6; --sun: #f2c46b; --sun-ink: #3d2c05;
  --pick-bg: #1e3a34; --pick-ink: #fffaf2; --leaf: #3e5f57; --polaroid: #fdfbf6; --photo-dim: none; --quote-bg: #3e5f57; --quote-ink: #fffaf2; --quote-muted: #dde6e1; --quote-accent: #f2c9a0; --quote-mark: rgb(255 250 242 / .14); --quote-line: transparent;
  --ok: #1d7a4a; --ok-bg: #dcefe2; --bad: #b3261e; --bad-bg: #f7dcd8;
  --logo-filter: none; --shadow: 0 1px 2px rgb(30 42 38 / .06), 0 8px 24px rgb(30 42 38 / .07);
  --f-display: "Changa One", "Arial Black", Impact, sans-serif;
  --f-body: "Commissioner", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-hand: "Caveat", "Segoe Print", cursive;
  --sx-max: 1160px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15120f; --surface: #1f1b17; --surface-2: #29241e; --ink: #f1e9dc; --muted: #b3a896; --line: #383128;
    --orange: #ff7043; --orange-text: #ff9466; --orange-soft: #3a2519;
    --green: #27221c; --green-2: #332c24; --on-green: #fffaf2; --on-green-muted: #cfc6b8;
    --peach: #2b221a; --sun: #e8b93f; --sun-ink: #2a1e03;
    --pick-bg: #f1e9dc; --pick-ink: #15120f; --leaf: #8fbfae; --polaroid: #cfc6b6; --photo-dim: brightness(.88) saturate(.95); --quote-bg: #211d18; --quote-ink: #fffaf2; --quote-muted: #cfc6b8; --quote-accent: #f2c9a0; --quote-mark: rgb(255 250 242 / .12); --quote-line: transparent;
    --ok: #6fd39a; --ok-bg: #173424; --bad: #ff8a80; --bad-bg: #3d1a17;
    --logo-filter: invert(1); --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --paper: #15120f; --surface: #1f1b17; --surface-2: #29241e; --ink: #f1e9dc; --muted: #b3a896; --line: #383128;
    --orange: #ff7043; --orange-text: #ff9466; --orange-soft: #3a2519;
    --green: #27221c; --green-2: #332c24; --on-green: #fffaf2; --on-green-muted: #cfc6b8;
    --peach: #2b221a; --sun: #e8b93f; --sun-ink: #2a1e03;
    --pick-bg: #f1e9dc; --pick-ink: #15120f; --leaf: #8fbfae; --polaroid: #cfc6b6; --photo-dim: brightness(.88) saturate(.95); --quote-bg: #211d18; --quote-ink: #fffaf2; --quote-muted: #cfc6b8; --quote-accent: #f2c9a0; --quote-mark: rgb(255 250 242 / .12); --quote-line: transparent;
    --ok: #6fd39a; --ok-bg: #173424; --bad: #ff8a80; --bad-bg: #3d1a17;
    --logo-filter: invert(1); --shadow: none; color-scheme: dark;
}

body { background: var(--paper); color: var(--ink); }
.sx-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; font: 600 14px var(--f-body); }
.sx-skip:focus { left: 8px; }

/* Announcement banner */
.sx-banner { background: var(--green); color: var(--on-green); font: 500 14px/1.4 var(--f-body); }
.sx-banner-in { max-width: var(--sx-max); margin: 0 auto; padding: 9px 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: center; text-align: center; }
.sx-banner a { color: var(--on-green); font-weight: 700; text-underline-offset: 3px; }
.sx-banner a::after { content: " →"; }

/* Header */
.sx-head { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 90%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); font-family: var(--f-body); }
.sx-head.sx-static { position: relative; }
.sx-head-in { max-width: var(--sx-max); margin: 0 auto; padding: 0 16px; height: 64px; display: flex; align-items: center; gap: 12px; }
.sx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.sx-brand .sx-word { height: 42px; width: auto; filter: var(--logo-filter); }
.sx-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.sx-nav > a, .sx-nav > .sx-dd > button { font: 600 15px/1 var(--f-body); color: var(--ink); text-decoration: none; background: none; border: 0; padding: 10px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.sx-nav > a:hover, .sx-nav > .sx-dd > button:hover, .sx-dd[data-open] > button { background: var(--surface-2); }
.sx-nav a[aria-current="page"], .sx-dd.sx-active > button { color: var(--orange-text); }
.sx-dd { position: relative; }
.sx-dd > button svg { width: 10px; height: 10px; transition: transform .15s; }
.sx-dd[data-open] > button svg { transform: rotate(180deg); }
.sx-menu { display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgb(0 0 0 / .14); padding: 6px; }
.sx-dd[data-open] .sx-menu { display: block; }
.sx-menu a { display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); font: 600 15px/1.25 var(--f-body); }
.sx-menu a span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }
.sx-menu a:hover, .sx-menu a:focus-visible { background: var(--surface-2); }
.sx-menu a[aria-current="page"] { color: var(--orange-text); }
.sx-nav > a.sx-cta { font: 700 15px/1 var(--f-body); background: var(--orange); color: #fff; text-decoration: none; padding: 11px 18px; border-radius: 999px; white-space: nowrap; margin-left: 6px; }
.sx-nav > a.sx-cta:hover { filter: brightness(1.06); background: var(--orange); }
.sx-icon-btn { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; }
.sx-icon-btn:hover { background: var(--surface-2); }
.sx-icon-btn svg { width: 18px; height: 18px; }
.sx-theme .sx-sun { display: none; }
:root[data-theme="dark"] .sx-theme .sx-sun { display: block; }
:root[data-theme="dark"] .sx-theme .sx-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sx-theme .sx-sun { display: block; }
  :root:not([data-theme="light"]) .sx-theme .sx-moon { display: none; }
}
.sx-burger { display: none; }
.sx-head :focus-visible, .sx-foot :focus-visible, .sx-banner :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

@media (max-width: 1020px) {
  .sx-burger { display: inline-grid; }
  .sx-head-in { gap: 8px; }
  .sx-theme { margin-left: auto; }
  .sx-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 16px 18px; max-height: calc(100dvh - 64px); overflow-y: auto; box-shadow: 0 20px 40px rgb(0 0 0 / .12); }
  .sx-head[data-menu] .sx-nav { display: flex; }
  .sx-nav > a, .sx-nav > .sx-dd > button { width: 100%; justify-content: space-between; padding: 14px 4px; border-radius: 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .sx-nav > a:hover, .sx-nav > .sx-dd > button:hover, .sx-dd[data-open] > button { background: none; }
  .sx-menu { position: static; transform: none; box-shadow: none; border: 0; background: none; padding: 4px 0 8px 8px; min-width: 0; }
  .sx-nav > a.sx-cta { margin: 16px 0 0; justify-content: center; padding: 15px; border: 0; border-radius: 999px; }
}
@media (max-width: 420px) { .sx-brand .sx-word { height: 36px; } }

/* Greek key (meander) band. mask-repeat: round fits a whole number of keys, so it never gets cut off. */
.sx-meander { height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='20'%3E%3Cpath d='M0 18.5H32M4 18.5V2H26V14H12V7H19' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") left center / 32px 20px; -webkit-mask-repeat: round no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='20'%3E%3Cpath d='M0 18.5H32M4 18.5V2H26V14H12V7H19' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") left center / 32px 20px; mask-repeat: round no-repeat; }

/* Footer */
.sx-foot { background: var(--green); color: var(--on-green); font: 400 17px/1.5 var(--f-body); margin-top: 48px; border: 0; }
.sx-foot-in { max-width: var(--sx-max); margin: 0 auto; padding: 64px 16px 44px; display: grid; gap: 40px; grid-template-columns: 1fr repeat(4, 1fr); }
.sx-foot a { color: var(--on-green); text-decoration: none; }
.sx-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx-foot h2 { font: 400 22px/1.1 var(--f-display); letter-spacing: .01em; margin: 0 0 16px; color: var(--on-green); }
.sx-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--on-green-muted); }
.sx-foot ul a { color: var(--on-green-muted); }
.sx-foot ul a:hover { color: var(--on-green); }
.sx-foot-brand { position: relative; min-height: 180px; }
.sx-foot-brand a { position: absolute; inset: 5px 0 0 0; display: block; }
.sx-foot-brand img { width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.sx-social { display: flex; gap: 8px; margin-top: 18px; }
.sx-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--on-green) 30%, transparent); }
.sx-social a:hover { background: color-mix(in oklab, var(--on-green) 12%, transparent); }
.sx-social svg { width: 18px; height: 18px; fill: currentColor; }
.sx-foot-in > div { grid-row: 1; }
.sx-foot-in > div:nth-child(2) { grid-column: 2; } .sx-foot-in > div:nth-child(3) { grid-column: 3; }
.sx-foot-in > div:nth-child(4) { grid-column: 4; } .sx-foot-in > div:nth-child(5) { grid-column: 5; }
.sx-foot-brand { grid-column: 1; grid-row: 1 !important; }
.sx-signoff { grid-column: 1 / -1; grid-row: 2; align-self: start; margin: -8px 0 0; padding-top: 26px; border-top: 1px solid color-mix(in oklab, var(--on-green) 20%, transparent); text-align: center; font: 700 clamp(26px, 3vw, 32px)/1.2 var(--f-hand); color: var(--on-green); text-wrap: balance; }
.sx-heart { color: var(--orange); font-family: var(--f-body); font-size: .8em; }
@media (min-width: 720px) { .sx-foot-in { padding-inline: 28px; } }
@media (max-width: 900px) { .sx-foot-in { grid-template-columns: 1fr 1fr; } .sx-foot-in > div, .sx-foot-in > div:nth-child(n) { grid-row: auto; grid-column: auto; } .sx-foot-in > .sx-foot-brand { grid-column: 1 / -1; grid-row: auto !important; min-height: 120px; } .sx-signoff { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 460px) { .sx-foot-in { gap: 28px; padding-top: 44px; } }