/* ==========================================================================
   NextZenOlympiad — site stylesheet
   ==========================================================================
   One system for all ten pages. No framework, no webfont CDN, no build step.

   The identity is a printed annual: a warm neutral stock, a serif display face,
   and full-bleed colour bands that separate sections instead of hairline rules.
   Deliberately unlike the two treatments this site has worn before — the navy /
   gold luxury look, and the white / ultramarine Swiss grid with a fixed index
   rail. The rail is gone; the page is a centred measure that reads top to bottom.

   Class vocabulary is unchanged from the previous system on purpose: the three
   PHP form pages carry verified markup, and renaming their classes for a visual
   change would put working forms at risk for nothing.

   Prefix: nz-
   ========================================================================== */

:root {
    /* Stock: warm neutral, biased very slightly green toward the accent so it
       reads as chosen rather than as an unconsidered off-white. */
    --paper:     #f7f7f4;
    --card:      #ffffff;
    --sunken:    #eeeeea;
    --ink:       #14171a;
    --ink-2:     #4a5158;
    /* Darkened from #737b83, which measured 4.29:1 on white and 4.00:1 on the
       paper ground — below the 4.5:1 AA floor at the 13px it is used at. */
    --ink-3:     #6a727a;
    --rule:      #dcdcd5;
    --rule-2:    #e9e9e3;

    /* One accent: a deep teal. Growth and instruction rather than finance. */
    --accent:    #0f6b5c;
    --accent-hi: #14856f;
    --accent-bg: #e6f1ee;

    /* Signal. Deadlines only, never decoration. */
    --signal:    #b3261e;
    --signal-bg: #fbecea;

    --ok:        #0f6b3f;

    /* The four papers. Index marks only — never page furniture. */
    --maths:       #1d3f9e;
    --science:     #0b6b42;
    --environment: #0d5f61;
    --english:     #5b2f97;

    /* A serif display against a sans body is the single biggest departure from
       the previous heavy-grotesque treatment. */
    --display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --gut: clamp(20px, 5vw, 48px);
    --measure: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Skip link ───────────────────────────────────────────────────────────── */
.nz-skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--ink); color: #fff; padding: 12px 18px; font-weight: 600;
}
.nz-skip:focus { left: 12px; top: 12px; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
.nz-shell { min-height: 100vh; display: flex; flex-direction: column; }
.nz-main { flex: 1 1 auto; }
.nz-inner { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gut); }

/* ── Masthead ────────────────────────────────────────────────────────────── */
.nz-bar {
    position: sticky; top: 0; z-index: 60;
    background: rgba(247,247,244,.93);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--rule);
}
.nz-bar__in {
    max-width: var(--measure); margin: 0 auto; padding: 0 var(--gut);
    display: flex; align-items: center; gap: 24px; min-height: 70px;
}
.nz-bar__mark img { height: 40px; width: auto; }

.nz-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nz-nav a {
    font-size: 14.5px; font-weight: 500; color: var(--ink-2);
    padding: 4px 0; border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.nz-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nz-nav a[aria-current="page"] { color: var(--ink); font-weight: 650; border-bottom-color: var(--accent); }
/* The nav CTA is a button, not a nav link: restate its colours so `.nz-nav a`
   (0,1,1) cannot beat `.nz-btn--fill` (0,1,0) and render it dark-on-dark. */
.nz-nav a.nz-btn { border-bottom: 0; }
.nz-nav a.nz-btn--fill, .nz-nav a.nz-btn--fill:hover { color: #fff; }

.nz-burger {
    display: none; margin-left: auto; background: none; border: 1px solid var(--rule);
    border-radius: 3px; padding: 9px 14px; font: inherit; font-size: 13.5px;
    font-weight: 600; cursor: pointer; color: var(--ink);
}
.nz-barnav { display: none; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.nz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .005em;
    padding: 13px 24px; border: 1.5px solid transparent; border-radius: 3px;
    cursor: pointer; text-align: center;
    transition: background .16s, color .16s, border-color .16s;
}
.nz-btn--fill { background: var(--accent); color: #fff; }
.nz-btn--fill:hover { background: var(--accent-hi); color: #fff; }
.nz-btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.nz-btn--line:hover { background: var(--ink); color: #fff; }
.nz-btn--dark { background: var(--ink); color: #fff; }
.nz-btn--dark:hover { background: var(--accent); color: #fff; }
.nz-btn--sm { padding: 9px 16px; font-size: 13.5px; }
.nz-btn--wide { width: 100%; }

/* ── Section bands ───────────────────────────────────────────────────────── */
.nz-sec { padding: clamp(52px, 7vw, 96px) 0; }
.nz-sec--open { padding-top: 0; }
.nz-sec--card { background: var(--card); }
.nz-sec--sunken { background: var(--sunken); }
.nz-sec--accent { background: var(--accent); color: #fff; }
.nz-sec--ink { background: var(--ink); color: #fff; }

.nz-ref {
    display: block; margin: 0 0 16px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--accent);
}
.nz-sec--accent .nz-ref, .nz-sec--ink .nz-ref { color: rgba(255,255,255,.66); }

.nz-h {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(28px, 4vw, 46px); line-height: 1.12; letter-spacing: -.018em;
    margin: 0 0 16px; max-width: 20ch; text-wrap: balance;
}
.nz-sec--accent .nz-h, .nz-sec--ink .nz-h { color: #fff; }
.nz-lede { font-size: clamp(16.5px, 1.5vw, 19px); color: var(--ink-2); max-width: 66ch; margin: 0 0 36px; }
.nz-sec--accent .nz-lede, .nz-sec--ink .nz-lede { color: rgba(255,255,255,.8); }

/* ── Masthead / hero ─────────────────────────────────────────────────────── */
.nz-head { padding: clamp(48px, 7vw, 100px) 0 clamp(36px, 5vw, 60px); }
.nz-head__flag {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 28px; padding: 8px 14px; background: var(--card);
    border: 1px solid var(--rule); border-radius: 3px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-2);
}
.nz-head__flag i { font-style: normal; color: var(--signal); font-weight: 700; }

.nz-h1, .nz-page-h {
    font-family: var(--display); font-weight: 700;
    line-height: 1.03; letter-spacing: -.022em; margin: 0 0 22px;
    text-wrap: balance;
}
.nz-h1 { font-size: clamp(38px, 6.6vw, 76px); max-width: 17ch; }
.nz-page-h { font-size: clamp(32px, 5vw, 58px); max-width: 19ch; }
.nz-h1 em { font-style: italic; color: var(--accent); }

.nz-head__sub { font-size: clamp(17px, 1.7vw, 21px); color: var(--ink-2); max-width: 58ch; margin: 0 0 32px; }
.nz-head__acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Figures strip ───────────────────────────────────────────────────────── */
.nz-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.nz-strip > * { background: var(--card); padding: 24px 22px; }
.nz-strip b {
    display: block; font-family: var(--display); font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.nz-strip span { font-size: 13px; color: var(--ink-3); }

/* ── The four papers ─────────────────────────────────────────────────────── */
.nz-papers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nz-paper {
    background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
    border-top: 5px solid var(--pc, var(--ink)); padding: 22px 20px 24px;
    display: flex; flex-direction: column; gap: 8px;
}
.nz-paper__no { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.nz-paper h3 { font-family: var(--display); font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.nz-paper__t { font-size: 13px; color: var(--ink-3); margin: 0; font-family: var(--mono); letter-spacing: .04em; }
.nz-paper__d { font-size: 14.8px; color: var(--ink-2); margin: 0; }

/* ── Definition table ────────────────────────────────────────────────────── */
.nz-defs { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.nz-def { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 17px 24px; border-bottom: 1px solid var(--rule-2); }
.nz-def:last-child { border-bottom: 0; }
.nz-def dt { font-family: var(--mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.nz-def dd { margin: 0; font-size: 16.5px; font-weight: 600; }
.nz-def dd small { display: block; font-weight: 400; font-size: 14.5px; color: var(--ink-3); margin-top: 3px; }
.nz-due { color: var(--signal); }

/* ── Feature register ────────────────────────────────────────────────────── */
.nz-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nz-feat {
    background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
    padding: 24px 22px; display: flex; flex-direction: column; gap: 9px;
}
.nz-feat__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 650; }
.nz-feat h3 { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.nz-feat p { font-size: 14.8px; color: var(--ink-2); margin: 0; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.nz-steps { counter-reset: st; display: grid; gap: 14px; }
.nz-step {
    counter-increment: st;
    display: grid; grid-template-columns: 64px 1fr; gap: clamp(14px, 3vw, 30px);
    background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
    padding: 22px 24px;
}
.nz-step::before {
    content: counter(st, decimal-leading-zero);
    font-family: var(--display); font-size: 30px; font-weight: 700;
    color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums;
}
.nz-step h3 { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.012em; }
.nz-step p { font-size: 15.5px; color: var(--ink-2); margin: 0; max-width: 64ch; }

/* ── Plans ───────────────────────────────────────────────────────────────── */
.nz-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nz-plan {
    background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
    padding: 24px 22px; display: flex; flex-direction: column;
}
.nz-plan--pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.nz-plan__t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); min-height: 15px; }
.nz-plan--pick .nz-plan__t { color: var(--accent); font-weight: 650; }
.nz-plan__p { font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: -.025em; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.nz-plan__p sub { font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: var(--ink-3); vertical-align: baseline; margin-left: 4px; letter-spacing: 0; }
.nz-plan__d { font-size: 13.5px; color: var(--ink-3); margin: 0 0 18px; }
.nz-plan ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; flex: 1 1 auto; }
.nz-plan li { font-size: 14px; color: var(--ink-2); padding-left: 20px; position: relative; }
.nz-plan li::before {
    content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 5px;
    border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.nz-formwrap { display: grid; grid-template-columns: 1fr 310px; gap: clamp(28px, 5vw, 60px); align-items: start; }
.nz-form { max-width: 720px; }
.nz-fieldset { border: 0; padding: 0; margin: 0 0 32px; }
.nz-fieldset legend {
    font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--accent); padding: 0 0 10px;
    border-bottom: 2px solid var(--accent); width: 100%; margin-bottom: 22px;
}
.nz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.nz-field { margin-bottom: 18px; }
.nz-field label { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 6px; }
.nz-field label span { color: var(--signal); }
.nz-field input, .nz-field select, .nz-field textarea {
    width: 100%; font-family: var(--sans); font-size: 15.5px; color: var(--ink);
    background: var(--card); border: 1px solid var(--rule); border-radius: 3px;
    padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
.nz-field textarea { resize: vertical; min-height: 112px; }
.nz-field input:focus, .nz-field select:focus, .nz-field textarea:focus {
    outline: 0; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.nz-field input::placeholder, .nz-field textarea::placeholder { color: #a4a9ae; }
.nz-field small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }

.nz-note {
    background: var(--card); border: 1px solid var(--rule);
    border-left: 3px solid var(--accent); border-radius: 3px; padding: 20px 22px;
}
.nz-note h2 { font-family: var(--display); font-size: 17px; font-weight: 700; margin: 0 0 9px; }
.nz-note p, .nz-note li { font-size: 14.5px; color: var(--ink-2); margin: 0 0 9px; }
.nz-note ul { margin: 0; padding-left: 18px; }
.nz-note a, .nz-a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.nz-note a:hover, .nz-a:hover { color: var(--accent-hi); }

.nz-alert { padding: 16px 20px; margin-bottom: 28px; border: 1px solid; border-left-width: 4px; border-radius: 3px; font-size: 15px; }
.nz-alert--ok { border-color: var(--ok); background: #eef6f1; color: #0b4f2f; }
.nz-alert--bad { border-color: var(--signal); background: var(--signal-bg); color: #8c1e17; }
.nz-alert strong { display: block; margin-bottom: 4px; }

/* ── Long-form prose (legal pages) ───────────────────────────────────────── */
/* Styled by element, not by class, so legal text can be lifted verbatim. */
.nz-prose { max-width: 72ch; }
.nz-prose > *:first-child { margin-top: 0; }
.nz-prose p { margin: 0 0 1.05em; color: var(--ink-2); }
.nz-prose strong { color: var(--ink); font-weight: 650; }
.nz-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.nz-prose h2 {
    font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -.015em;
    color: var(--ink); margin: 2.1em 0 .6em; padding-bottom: 9px;
    border-bottom: 2px solid var(--accent);
}
.nz-prose h3 { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink); margin: 1.7em 0 .5em; }
.nz-prose h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 1.4em 0 .4em; }
.nz-prose ul, .nz-prose ol { margin: 0 0 1.05em; padding-left: 1.5em; color: var(--ink-2); }
.nz-prose li { margin-bottom: .5em; }
.nz-prose li::marker { color: var(--accent); }

/* ── Info cards ──────────────────────────────────────────────────────────── */
.nz-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.nz-card { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 24px 22px; }
.nz-card--wide { grid-column: 1 / -1; }
.nz-card h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 650; margin: 0 0 10px; }
.nz-card p { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
.nz-card a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Topic list ──────────────────────────────────────────────────────────── */
.nz-topics { display: grid; gap: 12px; }
.nz-topic {
    background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
    padding: 18px 22px;
    display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(12px, 3vw, 32px);
    align-items: baseline;
}
.nz-topic h3 { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.nz-topic p { margin: 0; font-size: 14.8px; color: var(--ink-2); }

/* ── Map ─────────────────────────────────────────────────────────────────── */
.nz-map { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; line-height: 0; }
.nz-map iframe { width: 100%; height: 400px; border: 0; display: block; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.nz-foot { background: var(--ink); color: #fff; padding: 56px 0 32px; }
.nz-foot__grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 36px; }
.nz-foot__mark img { height: 42px; margin-bottom: 16px; }
.nz-foot__tag { font-family: var(--display); font-size: 17px; font-style: italic; color: rgba(255,255,255,.82); max-width: 30ch; margin: 0 0 20px; }
.nz-foot h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.52); margin: 0 0 15px; font-weight: 650; }
.nz-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nz-foot ul a { font-size: 14.5px; color: rgba(255,255,255,.8); }
.nz-foot ul a:hover { color: #fff; text-decoration: underline; }
.nz-foot__partners { display: flex; align-items: center; gap: 12px; }
.nz-foot__partners img { height: 26px; opacity: .62; filter: grayscale(1) invert(1); }
.nz-foot__legal {
    border-top: 1px solid rgba(255,255,255,.16); margin-top: 42px; padding-top: 22px;
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
    font-size: 13px; color: rgba(255,255,255,.6);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .nz-papers { grid-template-columns: repeat(2, 1fr); }
    .nz-plans  { grid-template-columns: repeat(2, 1fr); }
    .nz-feats  { grid-template-columns: repeat(2, 1fr); }
    .nz-formwrap { grid-template-columns: 1fr; }
    .nz-foot__grid { grid-template-columns: 1fr 1fr; }
    .nz-def { grid-template-columns: 190px 1fr; gap: 18px; }
}

@media (max-width: 760px) {
    .nz-nav { display: none; }
    .nz-burger { display: inline-block; }
    .nz-barnav { border-top: 1px solid var(--rule); padding: 6px var(--gut) 18px; }
    .nz-barnav.is-open { display: block; }
    .nz-barnav a { display: block; padding: 11px 0; font-size: 15.5px; font-weight: 550; color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
    .nz-barnav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
    .nz-barnav .nz-btn { margin-top: 14px; border-bottom: 0; }

    .nz-strip  { grid-template-columns: repeat(2, 1fr); }
    .nz-papers { grid-template-columns: 1fr; }
    .nz-plans  { grid-template-columns: 1fr; }
    .nz-feats  { grid-template-columns: 1fr; }
    .nz-cards  { grid-template-columns: 1fr; }
    .nz-def    { grid-template-columns: 1fr; gap: 4px; padding: 15px 18px; }
    .nz-topic  { grid-template-columns: 1fr; gap: 5px; }
    .nz-grid2  { grid-template-columns: 1fr; }
    .nz-step   { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px; }
    .nz-foot__grid { grid-template-columns: 1fr; }
}