/* /journey: timeline of year groups, this year's calendar, GCSE maths facts. Builds on learn.css (tokens, buttons, eyebrows). */
.j-hero { padding: clamp(24px, 5vw, 60px) 0 0; max-width: 860px; }
.j-hero h1 { font-size: clamp(48px, 7vw, 88px); line-height: 1; margin: 10px 0 16px; }
.j-hero .cta, .j-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* timeline: stages as coloured bands, years as round stops */
.j-line { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 2px 10px; }
@media (max-width: 760px) { .j-line { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } }
.j-stage { flex: 0 0 auto; border-radius: 18px; padding: 10px 10px 12px; background: var(--card); border: 1px solid var(--border); }
.j-stage > .mono { display: block; margin: 0 4px 8px; }
.j-years { display: flex; gap: 6px; }
.j-years button { position: relative; display: grid; place-items: center; gap: 0; width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; line-height: 1.1; }
.j-years button b { font-size: 18px; }
.j-years button small { font-size: 11px; color: var(--muted); }
.j-years button i { position: absolute; top: 3px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--card); }
.j-years button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.j-years button[aria-selected="true"] small { color: #c9d3f0; }
.j-eyfs { border-top: 4px solid #f2a7b8; } .j-ks1 { border-top: 4px solid #9fd3a8; } .j-ks2 { border-top: 4px solid #8fb8ff; }
.j-ks3 { border-top: 4px solid #c7a6f0; } .j-ks4 { border-top: 4px solid var(--yellow); } .j-post16 { border-top: 4px solid #9aa4b8; }
@media (hover: hover) { .j-years button:hover { border-color: var(--navy); } }

.j-detail { margin-top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 20px 22px;
  display: grid; grid-template-columns: 220px 1fr; gap: 10px 26px; box-shadow: 0 4px 16px rgb(15 27 61 / .06); }
@media (max-width: 760px) { .j-detail { grid-template-columns: 1fr; } }
.j-head h3 { font-size: 44px; line-height: 1; margin: 4px 0 0; }
.j-step { grid-column: 2; border-left: 3px solid var(--yellow); padding: 2px 0 6px 16px; }
@media (max-width: 760px) { .j-step { grid-column: 1; } }
.j-step + .j-step { margin-top: 10px; }
.j-step h4 { margin: 0; font-size: 19px; }
.j-step p { margin: 4px 0; max-width: 46rem; }
.j-when { display: inline-block; font-weight: 700; font-size: 14px; color: var(--navy); background: color-mix(in srgb, var(--yellow) 30%, var(--card)); border-radius: 999px; padding: 2px 12px; }
.j-help { color: var(--muted); font-size: 15px; }
.j-link { font-weight: 600; font-size: 15px; }

/* this school year: twelve months */
.j-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 16px; }
@media (max-width: 900px) { .j-cal { display: flex; overflow-x: auto; padding-bottom: 6px; } .j-month { flex: 0 0 200px; } }
.j-month { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px; min-height: 120px; }
.j-month.quiet { opacity: .7; }
.j-month.now { border: 2px solid var(--yellow); box-shadow: 0 0 0 4px rgb(246 184 41 / .15); }
.j-month > .mono { margin: 0 0 8px; }
.j-event { border-radius: 10px; padding: 7px 9px; margin-top: 6px; font-size: 14px; line-height: 1.3; background: color-mix(in srgb, var(--navy) 7%, var(--card)); }
.j-event.national { border-left: 3px solid var(--navy); }
.j-event.local { border-left: 3px dashed var(--muted); }
.j-event small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.j-note { margin-top: 10px; }

/* GCSE maths facts */
.j-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 16px; }
.j-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 18px 20px; box-shadow: 0 4px 16px rgb(15 27 61 / .06); }
.j-card h3 { font-size: 32px; margin: 0 0 6px; }
.j-card p { margin: 0 0 8px; }
.j-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.j-table th, .j-table td { text-align: left; padding: 6px 4px; border-top: 1px solid var(--border); }
.j-table th { font: 600 11px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.j-cta { margin-top: 20px; }
.j-sources { margin-top: 56px; }
header.site nav a[aria-current="page"]::after { transform: scaleX(1); }

/* desktop: all fourteen years on one row */
.j-years button { width: 52px; height: 52px; }
.j-years button b { font-size: 16px; }
.j-years button small { font-size: 10px; }
.j-stage { padding: 8px 8px 10px; }
.j-line { gap: 8px; }

.j-legend { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; }
.j-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }