/* Career Calling Education: a printed handbook for people deciding whether and how to study. Warm paper, logo navy for
   ink and logo orange for marks, Fraunces for the voice and Inter for the reading. Fonts are self-hosted (no third-party
   requests). Everything reads without JavaScript; motion is one small gesture and is off for reduced motion. */
@font-face { font-family: 'Inter Variable'; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces Variable'; src: url('/assets/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces Variable'; src: url('/assets/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
:root {
  --navy: #002068; --ink: #10204F; --ink-2: #3B4768; --muted: #5A6480;
  --orange: #F85800; --orange-ink: #B23D00; --orange-soft: #FFF0E6; --orange-line: #F7C9AC;
  --paper: #FFFDF9; --tint: #FAF4EC; --sheet: #FFFFFF; --line: #E8E0D4; --line-2: #D6CCBD; --field: #7A7F92;
  --blue: var(--navy); --blue-ink: var(--navy); --blue-deep: var(--orange-ink); --ring: rgba(178, 61, 0, .3); --sky: var(--orange-soft); --sun: var(--orange); --coral: var(--navy); --grid: var(--line); --cream: var(--tint);
  --maxw: 1220px; --r: 14px;
  --sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --serif: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
  --shadow: 0 1px 2px rgba(16, 32, 79, .06), 0 18px 40px -22px rgba(16, 32, 79, .28);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; scrollbar-color: var(--line-2) var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17.5px/1.65 var(--sans); overflow-x: clip; caret-color: var(--orange-ink); }
::selection { background: #FFD9BF; color: var(--navy); }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--navy); text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--orange-ink); }
:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); color: var(--navy); font-weight: 500; text-wrap: balance; margin: 0 0 .5em; font-variation-settings: 'SOFT' 0, 'WONK' 0; }
h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -.028em; }
h2 { font-size: clamp(29px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.008em; }
h1 em, h2 em { font-style: italic; color: var(--orange-ink); font-weight: 400; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .45em; }
li::marker { color: var(--orange-ink); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.lead { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.small { font-size: 15px; }
.num { font-variant-numeric: tabular-nums; }
.nb { white-space: nowrap; }
.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec-tint { background: var(--tint); }
.sec-head { max-width: 760px; margin-bottom: 36px; }
.sec-head p { color: var(--ink-2); font-size: 19px; margin: 0; }
.ico { width: 20px; height: 20px; flex: none; }
.ico-ext { width: 14px; height: 14px; margin-left: 4px; vertical-align: -1px; }
.arr { display: inline-block; transition: transform .35s var(--ease); }
a:hover > .arr, button:hover > .arr { transform: translateX(4px); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 11px 24px; border-radius: 999px; font: 650 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background-color .2s, color .2s, border-color .2s; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--orange-ink); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-sm { min-height: 42px; padding: 8px 18px; font-size: 15px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* ---------- hero: the headline and a working part of the checklist ---------- */
.hero { padding: clamp(44px, 6.5vw, 88px) 0 clamp(56px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero h1 { margin-bottom: .34em; }
.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 26px 26px 22px; box-shadow: var(--shadow); transform: rotate(.7deg); }
.sheet h2 { font-size: 24px; margin-bottom: 4px; }
.sheet > p { font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.sheet .ticks { border-top: 1px solid var(--line); }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 15px; }
.sheet-foot a { font-weight: 650; }

/* ---------- the tick: a pen stroke, drawn when the box is ticked ---------- */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { margin: 0; border-bottom: 1px solid var(--line); }
.tick { position: relative; display: flex; gap: 13px; align-items: flex-start; padding: 12px 2px; cursor: pointer; line-height: 1.42; font-size: 16.5px; }
.tick input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.tick-box { flex: none; width: 26px; height: 26px; border: 1.5px solid var(--field); border-radius: 5px; background: #fff; display: grid; place-items: center; transition: border-color .2s, background-color .2s; }
.tick-box svg { width: 22px; height: 22px; fill: none; stroke: var(--orange-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .38s var(--ease); }
.tick input:checked + .tick-box { border-color: var(--orange-ink); background: var(--orange-soft); }
.tick input:checked + .tick-box svg { stroke-dashoffset: 0; }
.tick input:focus-visible + .tick-box { outline: 3px solid var(--orange-ink); outline-offset: 2px; }
.tick:hover .tick-box { border-color: var(--navy); }
.tick small { display: block; color: var(--muted); font-size: 14.5px; margin-top: 2px; }

/* ---------- the question index ---------- */
.qrows { border-top: 1.5px solid var(--navy); }
.qrow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 34px; gap: 28px; align-items: baseline; padding: 24px 2px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--ink); transition: background-color .25s, padding .35s var(--ease); }
.qrow strong { font: 500 clamp(22px, 2.3vw, 29px)/1.2 var(--serif); color: var(--navy); letter-spacing: -.012em; transition: color .2s; }
.qrow span.ans { color: var(--ink-2); font-size: 16.5px; line-height: 1.5; }
.qrow .arr { color: var(--orange-ink); font-size: 22px; justify-self: end; }
.qrow:hover { padding-left: 12px; color: var(--ink); }
.qrow:hover strong { color: var(--orange-ink); }

/* ---------- the AQF ladder ---------- */
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 7px; }
.ladder li { margin: 0 0 0 calc((var(--n) - 1) * 3.4%); display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: stretch; background: #fff; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.ladder .lv { display: grid; place-items: center; background: var(--navy); color: #fff; font: 500 22px/1 var(--serif); font-variant-numeric: tabular-nums; }
.ladder .vet .lv { background: var(--orange-ink); }
.ladder .both .lv { background: linear-gradient(135deg, var(--orange-ink) 50%, var(--navy) 50%); }
.ladder .ty { padding: 9px 16px; font-size: 16px; line-height: 1.35; }
.ladder .ty b { font-weight: 650; color: var(--navy); }
.js .ladder.rise li { opacity: 1; animation: rung .7s var(--ease) both; animation-delay: calc(var(--n) * 45ms); }
@keyframes rung { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--ink-2); margin: 16px 0 0; padding: 0; list-style: none; }
.key li { display: flex; align-items: center; gap: 8px; margin: 0; }
.key i { width: 14px; height: 14px; border-radius: 3px; background: var(--navy); }
.key .k-vet { background: var(--orange-ink); }
.key .k-both { background: linear-gradient(135deg, var(--orange-ink) 50%, var(--navy) 50%); }

/* ---------- warning phrases ---------- */
.heard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin: 0; }
.heard > div { padding: 22px 0; border-top: 1px solid var(--line-2); }
.heard dt { font: italic 400 clamp(22px, 2.3vw, 28px)/1.22 var(--serif); color: var(--navy); margin-bottom: 8px; }
.heard dd { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.frame { border-radius: 8px; overflow: hidden; margin: 0 0 1.4em; background: #0d2a1c; }
.frame img { display: block; width: 100%; }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); border-top: 1.5px solid var(--navy); }
.people a { display: block; padding: 22px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.people strong { display: block; font: 500 23px/1.25 var(--serif); color: var(--navy); margin-bottom: 4px; }
.people a:hover strong { color: var(--orange-ink); }
.people span { font-size: 16.5px; color: var(--ink-2); }
.declare { max-width: 72ch; font-size: 16.5px; color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 22px; margin: 44px 0 0; }

/* ---------- page head ---------- */
.phead { padding: clamp(36px, 5vw, 64px) 0 clamp(30px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.phead h1 { font-size: clamp(36px, 5vw, 62px); max-width: 18ch; margin-bottom: .32em; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 20px; padding: 0; font-size: 14.5px; color: var(--muted); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--line-2); }
.crumbs a { color: var(--muted); }

/* ---------- guide pages ---------- */
.guide { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(32px, 6vw, 84px); padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(56px, 7vw, 96px); }
.toc { position: sticky; top: 104px; align-self: start; font-size: 15px; max-height: calc(100vh - 124px); overflow: auto; }
.toc h2 { font: 650 13.5px/1.3 var(--sans); letter-spacing: 0; color: var(--muted); margin-bottom: 10px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); }
.toc li { margin: 0; }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc a:hover, .toc a.on { color: var(--orange-ink); border-left-color: var(--orange-ink); }
.prose { max-width: 70ch; min-width: 0; }
.prose > section { margin-bottom: clamp(44px, 5vw, 64px); }
.prose > section:last-child { margin-bottom: 0; }
.prose h2 { font-size: clamp(27px, 3vw, 37px); }
.prose h3 { margin-top: 1.3em; }
.src { font-size: 14.5px; color: var(--muted); margin-top: 1.1em; padding-top: 10px; border-top: 1px solid var(--line); }
.src a { color: var(--ink-2); }
.note { background: var(--orange-soft); border-radius: 8px; padding: 16px 20px; margin: 1.3em 0; font-size: 16.5px; }
.note p:last-child { margin-bottom: 0; }
.steps { list-style: none; counter-reset: s; margin: 1em 0; padding: 0; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 12px; margin-bottom: 1em; }
.steps > li::before { content: counter(s); font: 500 24px/1.2 var(--serif); color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.tbl-wrap { overflow-x: auto; margin: 1.2em 0; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbl th { text-align: left; font-weight: 650; color: var(--navy); border-bottom: 1.5px solid var(--navy); padding: 8px 12px 8px 0; vertical-align: bottom; }
.tbl td { border-bottom: 1px solid var(--line); padding: 10px 12px 10px 0; vertical-align: top; }
.next { margin-top: clamp(40px, 5vw, 60px); padding-top: 22px; border-top: 1.5px solid var(--navy); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: baseline; }
.next a { font: 500 22px/1.3 var(--serif); text-decoration: none; }

/* ---------- glossary ---------- */
.gloss { margin: 0; }
.gloss > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 4px 28px; padding: 16px 0; border-top: 1px solid var(--line); }
.gloss dt { font: 500 19px/1.3 var(--serif); color: var(--navy); }
.gloss dd { margin: 0; }

/* ---------- tools ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; }
.tool-state { font-weight: 650; color: var(--navy); font-variant-numeric: tabular-nums; margin-right: auto; }
.tool-group { margin: 34px 0 0; }
.tool-group h2 { font-size: 26px; margin-bottom: 8px; }
.selfcheck { font-size: 15.5px; color: var(--ink-2); background: var(--tint); border-radius: 8px; padding: 12px 16px; margin: 18px 0 0; }
.calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.result { background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 18px 22px; margin: 0; }
.result b { display: block; font: 500 clamp(30px, 4vw, 44px)/1.1 var(--serif); color: var(--navy); font-variant-numeric: tabular-nums; }
.result.over b { color: var(--orange-ink); }
.ev-note { width: 100%; margin: 0 0 12px 39px; max-width: calc(100% - 39px); }

/* ---------- forms ---------- */
.fld { display: block; margin-bottom: 16px; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.fld input, .fld textarea, .fld select, .ev-note { display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 10px 13px; border: 1.5px solid var(--field); border-radius: 8px; font: 400 16.5px/1.45 var(--sans); color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
.fld textarea, textarea.ev-note { min-height: 112px; resize: vertical; }
textarea.ev-note { min-height: 64px; }
.fld input:focus, .fld textarea:focus, .ev-note:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(178, 61, 0, .28); }
.fld .opt { font-weight: 400; color: var(--muted); }
.fld-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 4px 0 16px; line-height: 1.45; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--orange-ink); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.msg { margin: 12px 0 0; font-weight: 600; font-size: 15.5px; min-height: 1.4em; }
.msg.ok { color: #0B6B3A; }
.msg.err { color: #A3210F; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 84px); align-items: start; }
.form-panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px; box-shadow: var(--shadow); }
.form-panel h2 { font-size: 26px; }

/* ---------- policy text ---------- */
.policy { max-width: 72ch; }
.policy h2 { font-size: 26px; margin-top: 1.5em; }
.policy h3 { font-size: 20px; }
.cq-policy-updated { color: var(--muted); font-size: 15px; }


/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .sheet { transform: none; }
  .guide { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; background: var(--tint); border-radius: 8px; padding: 16px 18px; }
  .toc ul { border: 0; }
  .toc a { padding: 6px 0; border: 0; margin: 0; }
  .qrow { grid-template-columns: minmax(0, 1fr) 28px; gap: 6px 14px; }
  .qrow span.ans { grid-column: 1; grid-row: 2; }
  .qrow .arr { grid-column: 2; grid-row: 1; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .wrap { padding: 0 16px; }
  .heard, .people, .fld-2, .calc { grid-template-columns: minmax(0, 1fr); }
  .gloss > div { grid-template-columns: minmax(0, 1fr); }
  .ladder li { margin-left: calc((var(--n) - 1) * 1.6%); grid-template-columns: 46px minmax(0, 1fr); }
  .ladder .lv { font-size: 19px; }
  .btn { width: 100%; }
  .toolbar .btn { width: auto; }
  .sheet { padding: 20px 18px 18px; }
  .ev-note { margin-left: 0; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  #cqbar, .site-h, .cqf3, .toc, .btns, .toolbar .btn, .crumbs, .next, .skip { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .guide { display: block; padding: 0; }
  .tool-group h2 { break-after: avoid; }
  .ticks li { break-inside: avoid; }
  .tick { padding: 6px 0; }
  .tick-box { border-color: #333; }
  .ev-note { border: 1px solid #999; }
  a { text-decoration: none; }
}