/* Career Path Simulator, version 2. Colour fields: hero sky, deep blue picker, cream cards, amber jobs, teal route.
   Rules used throughout: big display type, solid colour fields, one drawing per section, hard shadows, no borders on cards. */

main { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(0.96); } 50% { transform: scale(1.06); } }
@keyframes drift { from { transform: translateX(-60px); } to { transform: translateX(160px); } }
@keyframes road { to { stroke-dashoffset: -54; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rise { from { transform: translateY(105%) rotate(7deg); } to { transform: none; } }
@keyframes pop { from { transform: scale(0.94) rotate(-1.2deg); } to { transform: none; } }
@keyframes scope { to { transform: translateX(-80px); } }
@keyframes flowx { to { transform: translateX(var(--ext, 72px)); } }
@keyframes flowy { to { transform: translateY(var(--ext, 72px)); } }
@keyframes aim { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, 6px); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.sun-rays { transform-box: fill-box; transform-origin: center; animation: spin 90s linear infinite; }
.blades { transform-box: fill-box; transform-origin: center; animation: spin 7s linear infinite; }
.t2 .blades { animation-duration: 9s; }

/* ================= 1. HERO ================= */
.hero { position: relative; overflow: hidden; background: #0B56A8; min-height: clamp(560px, calc(100svh - var(--header-h)), 860px); }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-sun { will-change: transform; }
.ring { transform-box: fill-box; transform-origin: center; animation: pulse 5s ease-in-out infinite; }
.ring.r2 { animation-delay: -2.5s; }
.cloud { animation: drift 38s ease-in-out infinite alternate; }
.cloud.c2 { animation-duration: 52s; animation-direction: alternate-reverse; }
.dash { animation: road 1.6s linear infinite; }
.way { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-in-out infinite; }
.w2 { animation-delay: -0.5s; } .w3 { animation-delay: -1s; } .w4 { animation-delay: -1.5s; } .w5 { animation-delay: -2s; }
.birds path { animation: bob 3s ease-in-out infinite; }
.birds .b2 { animation-delay: -1.3s; }
.hero-copy { position: relative; z-index: 2; padding-top: clamp(32px, 7vh, 80px); padding-bottom: var(--s8); }
.hero-title { margin: 0 0 var(--s5); }
.ht { display: inline-block; overflow: hidden; max-width: min(100%, 6.5em); font-size: clamp(48px, 9.4vw, 150px); line-height: 0.92; letter-spacing: -0.045em; color: var(--cream); background: var(--ink); padding: 0.07em 0.2em 0.16em; border-radius: 0.2em; transform: rotate(-2deg); box-shadow: 0.05em 0.06em 0 var(--amber); white-space: pre-wrap; }
.ht .wd { display: inline-block; white-space: nowrap; }
.ht .ch { display: inline-block; animation: rise 650ms var(--spring) both; animation-delay: min(calc(var(--i) * 40ms + 100ms), 500ms); } /* same on every page: the whole entry ends within 1.2 s */
.hero-line { display: inline-block; margin: 0 0 var(--s6); padding: var(--s3) var(--s5); background: var(--sun); color: var(--ink); border-radius: 999px; font: 600 clamp(20px, 2.2vw, 28px)/1.2 var(--font-body); transform: rotate(1deg); max-width: 36ch; }
.hero-go { display: flex; width: fit-content; }
@media (max-width: 600px) { .ht { font-size: 15.5vw; } .hero-copy { padding-top: var(--s6); } }

/* ================= 2. PICKER ================= */
.picker-field { background: var(--deep); color: var(--cream); overflow: clip; padding-block: var(--s8) var(--s9); }
.picker-field::before { content: ""; position: absolute; right: -12vw; top: -10vw; width: 44vw; aspect-ratio: 1; border-radius: 50%; border: clamp(24px, 4vw, 56px) solid var(--panel); }
.picker-field::after { content: ""; position: absolute; right: 8vw; top: 4vw; width: 7vw; aspect-ratio: 1; border-radius: 50%; background: var(--amber); }
.picker-field h2 { margin-bottom: var(--s7); font-size: clamp(38px, 6vw, 88px); }
.machine { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s6); align-items: stretch; }
.controls { display: grid; gap: var(--s6); align-content: start; padding: var(--s7) var(--s7) var(--s6); border-radius: var(--r-lg); background: var(--cream); color: var(--ink); box-shadow: 0 12px 0 var(--ink); }
.ctl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.ctl h3 { margin-bottom: var(--s4); font-size: clamp(26px, 2.4vw, 34px); }
.ctl-head h3 { margin: 0; }
.slots { display: flex; flex: none; gap: var(--s2); }
.slots i { width: 24px; height: 24px; border-radius: 50%; background: #EBD5A4; box-shadow: inset 0 0 0 3px var(--ink); transition: background 200ms var(--glide), transform 360ms var(--spring); }
.slots[data-n="1"] i:nth-child(-n+1), .slots[data-n="2"] i:nth-child(-n+2), .slots[data-n="3"] i { background: var(--amber); transform: scale(1.18); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s3); }
.chip { min-height: 48px; padding: 0 var(--s5); font: 700 18px/1 var(--font-body); color: var(--ink); background: var(--chip, var(--sun)); border: 0; border-radius: 999px; box-shadow: 0 5px 0 var(--ink); cursor: pointer; touch-action: manipulation; transition: transform 160ms var(--spring), box-shadow 160ms var(--spring), background 160ms; }
.chip-row li:nth-child(4n+2) .chip { --chip: var(--teal-3); }
.chip-row li:nth-child(4n+3) .chip { --chip: var(--coral); }
.chip-row li:nth-child(4n) .chip { --chip: var(--mint); }
@media (hover: hover) { .chip:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); } }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.chip[aria-disabled="true"] { background: var(--cream-2); color: var(--ink-soft); box-shadow: 0 5px 0 #CDB98C; cursor: not-allowed; }
.chip:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.live { min-height: 0; }
.limit { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--coral); font: 700 17px/1.3 var(--font-body); max-width: none; }

.disc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.dchip { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--s2); min-height: 92px; padding: var(--s3) var(--s4); font: 800 18px/1.05 var(--font-display); letter-spacing: -0.01em; text-align: left; color: var(--ci); background: var(--c); border: 0; border-radius: var(--r-sm); box-shadow: 0 5px 0 var(--ink); cursor: pointer; touch-action: manipulation; transition: transform 160ms var(--spring), box-shadow 160ms var(--spring); }
.dchip svg { width: 30px; height: 30px; fill: currentColor; flex: none; }
.dchip[data-discipline="not-sure-yet"] { grid-column: 1 / -1; justify-content: center; min-height: 64px; }
@media (hover: hover) { .dchip:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); } }
.dchip[aria-pressed="true"] { transform: translateY(5px); box-shadow: 0 0 0 var(--ink), inset 0 0 0 5px var(--ink); }
.dchip:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.controls .reset { justify-self: start; background: var(--amber); }

/* the screen: a scope line while nothing is picked, then the match */
.screen { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 440px; padding: var(--s6) var(--s6) 150px; overflow: hidden; border-radius: var(--r-lg); background: var(--ink); color: var(--cream); box-shadow: 0 12px 0 var(--panel); }
.scope { position: absolute; left: 0; right: 0; bottom: var(--s5); width: 100%; height: auto; overflow: hidden; }
.scope .grid { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; }
.scope .wave-a, .scope .wave-b { fill: none; stroke-width: 4; stroke-linecap: round; animation: scope 2.4s linear infinite; }
.scope .wave-a { stroke: var(--teal-3); }
.scope .wave-b { stroke: var(--amber); transform: scaleY(0.55) translateY(34px); animation: scope-b 3.2s linear infinite; }
@keyframes scope-b { to { transform: scaleY(0.55) translate(-80px, 34px); } }
.screen:has(.res:not([hidden])) .scope { display: none; }
.orbit { position: relative; display: block; width: min(100%, 250px); height: auto; margin: 0 auto var(--s4); }
.orbit .core { transform-box: fill-box; transform-origin: center; animation: beat 2.2s ease-in-out infinite; }
.orb { transform-box: view-box; transform-origin: 150px 150px; animation: spin 40s linear infinite; }
.nd { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite reverse; }
.nd use { color: var(--ink); }
.n1 circle { fill: var(--disc-power); } .n1 use { color: var(--disc-power-ink); }
.n2 circle { fill: var(--disc-renewable); } .n2 use { color: var(--disc-renewable-ink); }
.n3 circle { fill: var(--disc-electronics); } .n3 use { color: var(--disc-electronics-ink); }
.n4 circle { fill: var(--disc-control); } .n4 use { color: var(--disc-control-ink); }
.n5 circle { fill: var(--disc-comms); } .n5 use { color: var(--disc-comms-ink); }
.n6 circle { fill: var(--disc-computing); } .n6 use { color: var(--disc-computing-ink); }
.n1 use, .n2 use, .n3 use, .n4 use, .n5 use, .n6 use { fill: currentColor; }
.screen:has(.res:not([hidden])) .orbit { display: none; }
.results { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.idle { grid-column: 1 / -1; max-width: 12ch; font: 800 clamp(32px, 3.4vw, 50px)/1 var(--font-display); letter-spacing: -0.03em; }
.res { position: relative; overflow: hidden; padding: var(--s5); border-radius: var(--r); background: var(--c); color: var(--ci); }
.res.pop { animation: pop 460ms var(--spring); }
.res-top { grid-column: 1 / -1; padding: var(--s6); }
.rank { display: inline-block; margin-bottom: var(--s3); padding: 6px 14px 7px; border-radius: 999px; background: var(--ci); color: var(--c); font: 800 16px/1 var(--font-display); letter-spacing: 0; }
.res-name { margin: 0; font: 800 clamp(21px, 1.8vw, 23px)/1.05 var(--font-display); letter-spacing: -0.02em; }
.res-top .res-name { font-size: clamp(34px, 3.8vw, 54px); line-height: 0.95; max-width: 14ch; }
.res-name a { display: block; padding-block: var(--s2); color: inherit; text-decoration: none; }
.res-name a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.res-d { margin-top: var(--s2); font: 700 17px/1.2 var(--font-body); max-width: none; }
.res-ic { position: absolute; right: var(--s5); top: var(--s5); width: clamp(80px, 9vw, 130px); height: auto; fill: var(--ci); opacity: 0.2; }
.pips { display: flex; gap: var(--s2); margin-top: var(--s4); }
.pips i { width: 20px; height: 20px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 3px var(--ci); transition: background 200ms var(--glide); transition-delay: calc(var(--n, 0) * 90ms); }
.pips i:nth-child(2) { --n: 1; } .pips i:nth-child(3) { --n: 2; } .pips i:nth-child(4) { --n: 3; } .pips i:nth-child(5) { --n: 4; }
.pips i.on { background: var(--ci); }
.how { grid-column: 1 / -1; max-width: none; font: 600 17px/1.3 var(--font-body); color: var(--sun); }

/* colours of the six disciplines, for buttons, cards and results alike; anything without one is sand */
[data-discipline] { --c: var(--sand); --ci: var(--ink); }
[data-discipline="power-systems"] { --c: var(--disc-power); --ci: var(--disc-power-ink); }
[data-discipline="renewable-energy"] { --c: var(--disc-renewable); --ci: var(--disc-renewable-ink); }
[data-discipline="electronics-and-embedded-systems"] { --c: var(--disc-electronics); --ci: var(--disc-electronics-ink); }
[data-discipline="control-and-automation"] { --c: var(--disc-control); --ci: var(--disc-control-ink); }
[data-discipline="communications"] { --c: var(--disc-comms); --ci: var(--disc-comms-ink); }
[data-discipline="computer-engineering-and-ai"] { --c: var(--disc-computing); --ci: var(--disc-computing-ink); }

/* ================= 3. CARDS ================= */
.careers-field { background: var(--cream); color: var(--ink); overflow: clip; }
.careers-field::before { content: ""; position: absolute; left: -10vw; top: -16vw; width: 42vw; aspect-ratio: 1; border-radius: 50%; background: var(--cream-2); }
.careers-field h2 { margin-bottom: var(--s5); font-size: clamp(38px, 6vw, 88px); max-width: 12ch; }
.hint { margin-bottom: var(--s6); font: 700 20px/1.3 var(--font-body); }
.career-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.career-card { position: relative; border-radius: var(--r); background: var(--c); color: var(--ci); box-shadow: 0 8px 0 var(--ink); transition: transform 300ms var(--spring); }
@media (hover: hover) { .career-card:hover { transform: translateY(-5px) rotate(-0.5deg); } }
.career-card:has(> summary:focus-visible) { transform: translateY(-5px) rotate(-0.5deg); }
.career-card:target { transform: translateY(-5px); box-shadow: 0 8px 0 var(--ink), 0 0 0 6px var(--ink); } /* arriving from a link (an Explorer career chip): the card stands out */
.career-card[data-rank="top"] { box-shadow: 0 8px 0 var(--ink), 0 0 0 7px var(--sun); }
.career-card[data-rank="alt"] { box-shadow: 0 8px 0 var(--ink), 0 0 0 5px var(--cream-2); }
.career-card summary { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-height: 184px; padding: var(--s5); border-radius: var(--r); list-style: none; cursor: pointer; touch-action: manipulation; }
.career-card summary::-webkit-details-marker { display: none; }
.career-card summary::after { content: ""; position: absolute; top: var(--s4); right: var(--s4); width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(var(--c), var(--c)) center / 18px 4px no-repeat, linear-gradient(var(--c), var(--c)) center / 4px 18px no-repeat, var(--ci); transition: transform 360ms var(--spring); }
.career-card[open] summary::after { background: linear-gradient(var(--c), var(--c)) center / 18px 4px no-repeat, var(--ci); transform: rotate(180deg); }
.career-card h3 { font-size: clamp(22px, 1.8vw, 24px); line-height: 1; letter-spacing: -0.02em; hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
.ci { width: 46px; height: 46px; fill: currentColor; flex: none; transition: transform 400ms var(--spring); }
.career-card[open] .ci { transform: rotate(-10deg) scale(1.1); }
.dtag { margin-top: auto; padding: 7px 14px 8px; border-radius: 999px; background: var(--ci); color: var(--c); font: 700 15px/1.1 var(--font-body); }
.rank-b { position: absolute; top: var(--s4); right: 68px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--cream); font: 800 24px/1 var(--font-display); animation: pop 460ms var(--spring); }
.career-card[data-rank="top"] .rank-b { background: var(--amber); color: var(--ink); }
.card-body { display: grid; gap: var(--s3); margin: 0 var(--s5); padding: var(--s4) 0 var(--s5); border-top: 3px dashed var(--ci); }
.career-card[open] .card-body { animation: pop 360ms var(--spring); }
.ln { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3); max-width: none; font: 600 17px/1.3 var(--font-body); }
.ln svg { width: 22px; height: 22px; margin-top: 2px; fill: currentColor; }

/* ================= 4. JOBS ================= */
.jobs { background: var(--amber); color: var(--ink); overflow: clip; }
.jobs::before { content: ""; position: absolute; right: -8vw; bottom: -14vw; width: 36vw; aspect-ratio: 1; border-radius: 50%; background: var(--sun); }
.jobs h2 { margin-bottom: var(--s7); font-size: clamp(38px, 6vw, 88px); box-shadow: 0.05em 0.06em 0 var(--cream); }
.t-target { grid-column: 1 / 8; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; background: var(--deep); color: var(--cream); min-height: 460px; }
.t-expect { grid-column: 8 / 13; background: var(--cream); color: var(--ink); }
.t-us { grid-column: 8 / 13; background: var(--coral); color: var(--ink); }
.t-target .big { font-size: clamp(72px, 12.5vw, 190px); color: var(--amber); }
.t-expect .big, .t-us .big { font-size: clamp(56px, 7vw, 104px); }
.t-expect .big { color: var(--coral-deep); }
.t-target .meta { color: var(--sun); }
.art-target { position: absolute; right: var(--s6); top: var(--s6); width: min(46%, 300px); height: auto; }
.art-target .arrow { animation: aim 2.8s ease-in-out infinite; }
.art-expect { display: block; width: min(100%, 220px); height: auto; margin-bottom: var(--s5); }
.art-us { position: absolute; right: var(--s6); top: var(--s6); width: 120px; height: auto; animation: beat 2.4s ease-in-out infinite; }
/* UAE graduate programmes: four cards under the three tiles, the employer's name as the big type */
.emp-h { margin: var(--s8) 0 var(--s6); font-size: clamp(30px, 4vw, 52px); }
.emp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); }
.emp .card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); }
.emp h4 { margin-right: 72px; font: 800 clamp(44px, 6vw, 84px)/0.9 var(--font-display); letter-spacing: -0.04em; }
.emp .what { max-width: 34ch; }
.emp .meta { margin-top: auto; padding-top: var(--s3); }
.emp .cap { position: absolute; right: var(--s5); top: var(--s5); width: 56px; height: 56px; fill: currentColor; }
.emp-1 { grid-column: span 7; background: var(--deep); color: var(--cream); }
.emp-2 { grid-column: span 5; background: var(--cream); color: var(--ink); }
.emp-3 { grid-column: span 5; background: var(--coral); color: var(--ink); }
.emp-4 { grid-column: span 7; background: var(--teal-dark); color: var(--cream); }
.emp-1 .meta { color: var(--sun); }
@media (max-width: 900px) { .emp .card { grid-column: 1 / -1; } }
.opt .crs li { white-space: normal; }

/* ================= 5. ROUTE ================= */
.route { background: var(--teal-dark); color: var(--cream); overflow: clip; }
.route::before { content: ""; position: absolute; left: -9vw; top: -12vw; width: 36vw; aspect-ratio: 1; border-radius: 50%; border: clamp(20px, 3vw, 44px) solid var(--teal); }
.route h2 { margin-bottom: var(--s8); font-size: clamp(38px, 6vw, 88px); }

.tables > summary { list-style: none; cursor: pointer; }
.tables > summary::-webkit-details-marker { display: none; }
.tables > summary::after { content: "+"; font-size: 26px; line-height: 1; }
.tables[open] > summary::after { content: "\2212"; }
.tables-in { margin-top: var(--s6); }
.asof { margin-bottom: var(--s2); font: 700 20px/1.3 var(--font-body); }
.year-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.yt { padding: var(--s5); border-radius: var(--r); background: var(--cream); color: var(--ink); }
.yt h3 { margin-bottom: var(--s3); font-size: clamp(24px, 2.2vw, 30px); }
.yt .asof { font-size: 16px; }
.yt table { width: 100%; border-collapse: collapse; }
.yt th, .yt td { padding: var(--s3) 0; text-align: left; vertical-align: top; }
.yt thead th { padding-top: 0; font: 700 15px/1 var(--font-body); }
.yt tbody tr + tr > * { box-shadow: inset 0 3px 0 rgba(6, 44, 59, 0.12); }
.yt tbody th { width: 5.6em; padding-right: var(--s3); font: 800 18px/1.15 var(--font-display); }
.crs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.crs li { white-space: nowrap; padding: 6px 12px 7px; border-radius: 999px; background: var(--cream-2); font: 600 15px/1.2 var(--font-body); }
.crs li.coop-c { background: var(--coral); }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .career-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .machine { grid-template-columns: 1fr; }
  .screen { order: -1; min-height: 300px; }
  .controls { padding: var(--s6) var(--s5); }
  .career-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-target, .t-expect, .t-us { grid-column: 1; grid-row: auto; min-height: 0; }
  .t-target { min-height: 340px; }
  .t-target .big { font-size: clamp(72px, 22vw, 150px); }
}
@media (max-width: 640px) {
  .career-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .career-card summary { min-height: 0; padding: var(--s4) var(--s4) var(--s4) var(--s4); gap: var(--s2); }
  .ci { width: 40px; height: 40px; }
  .disc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dchip { min-height: 80px; font-size: 17px; }
  .year-grid { grid-template-columns: 1fr; }
  .crs li { white-space: normal; }
  .results { grid-template-columns: 1fr; }
  .screen { padding: var(--s5); min-height: 240px; }
  .ctl-head { align-items: flex-start; }
  .art-target { width: 40%; right: var(--s4); top: var(--s4); }
  .art-us { width: 84px; right: var(--s5); top: var(--s5); }
  .picker-field::after { display: none; }
}

html:not(.js) .career-card summary { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .ht .ch, .res.pop, .career-card[open] .card-body, .rank-b { animation: none; }
}

/* the hero drawing has two compositions: the wide one, and a portrait one for narrow screens (the road runs straight up to the skyline) */
.hero-tall { display: none; }
@media (max-width: 700px) {
  .hero-wide { display: none; }
  .hero-tall { display: block; }
  .screen { padding-bottom: 120px; }
  .dchip { padding: var(--s3) 8px; font-size: 14px; overflow-wrap: break-word; }
}
.screen:has(.res:not([hidden])) { padding-bottom: var(--s6); }
@media (max-width: 640px) {
  .yt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .yt tbody th, .yt tbody td { display: block; width: auto; padding: var(--s2) 0 0; }
  .yt tbody tr { display: block; padding: var(--s3) 0; }
  .yt tbody tr + tr > * { box-shadow: none; }
  .yt tbody tr + tr { box-shadow: inset 0 3px 0 rgba(6, 44, 59, 0.12); }
}

/* ================= route: five stops on one line; Co-op is a station on the line beside its year ================= */
.route h2 { margin-bottom: var(--s6); }
@media (min-width: 901px) { .route { padding-block: var(--s8); } }
.route .wrap > .asof { margin-bottom: var(--s8); }
.track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5); margin-bottom: var(--s8); }
.route-line { position: relative; }
/* the line under the five stops: a clipped pill, its stripes a strip wider than it, slid along by transform (a whole number of stripe periods per loop, so it joins up) */
.flow { position: absolute; left: 0; right: 0; top: 39px; height: 18px; overflow: hidden; border-radius: 9px; background: var(--ink-soft); }
.flow::before { content: ""; position: absolute; inset: 0 0 0 calc(var(--ext, 72px) * -1); background: repeating-linear-gradient(90deg, var(--amber) 0 12px, var(--sun) 12px 24px); animation: flowx 1.65s linear infinite; }
.stop { position: relative; min-height: 96px; padding-top: 120px; }
.num { position: absolute; z-index: 1; top: 0; left: 0; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--n, var(--teal-3)); color: var(--ink); font: 800 56px/1 var(--font-display); box-shadow: 0 8px 0 var(--ink); }
.s1 { --n: var(--teal-3); } .s2 { --n: var(--sun); } .s3 { --n: var(--coral); } .s4 { --n: var(--amber); } .s5 { --n: var(--mint); }
.yr { display: block; font: 800 clamp(26px, 2.8vw, 38px)/1 var(--font-display); letter-spacing: -0.02em; }
.co { position: absolute; z-index: 1; top: 6px; left: 118px; display: grid; place-items: center; width: 88px; height: 84px; border-radius: 26px; background: var(--coral); color: var(--ink); font: 800 21px/1 var(--font-display); box-shadow: 0 8px 0 var(--ink), inset 0 0 0 4px var(--ink); transform: rotate(-5deg); }
.rel { display: grid; gap: var(--s2); justify-items: start; }
.rf { padding: 3px 10px 4px; border-radius: 999px; background: var(--ci); color: var(--c); font: 700 14px/1.2 var(--font-body); }
.rel .ln { justify-self: stretch; }

@media (max-width: 1099px) { .co { left: 104px; width: 76px; height: 76px; font-size: 19px; } .num { width: 84px; height: 84px; font-size: 48px; } .flow { top: 33px; } .stop { padding-top: 108px; } }
/* wide screens: a bigger track (the Courses tables stay folded, they would take the page over its word budget) */
@media (min-width: 1100px) {
  .flow { top: 45px; height: 22px; border-radius: 11px; }
  .num { width: 112px; height: 112px; font-size: 64px; }
  .stop { min-height: 112px; padding-top: 136px; }
  .co { top: 12px; left: 128px; }
}
@media (max-width: 1000px) {
  .track { grid-template-columns: 1fr; gap: var(--s6); }
  .flow { left: 33px; right: auto; top: 0; bottom: 0; width: 18px; height: auto; }
  .flow::before { inset: calc(var(--ext, 72px) * -1) 0 0 0; background: repeating-linear-gradient(180deg, var(--amber) 0 12px, var(--sun) 12px 24px); animation-name: flowy; }
  .stop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); min-height: 84px; padding: 0 0 0 112px; }
  .co { position: static; width: 80px; height: 64px; border-radius: 20px; font-size: 19px; }
}
@media (max-width: 640px) {
  .num { width: 72px; height: 72px; font-size: 40px; }
  .flow { left: 27px; }
  .stop { min-height: 72px; padding-left: 96px; }
  .co { width: 72px; height: 56px; font-size: 18px; border-radius: 18px; }
}

/* an open card takes the whole row (desktop), its three lines side by side */
@media (min-width: 1024px) {
  .career-card[open] { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(280px, 26%) minmax(0, 1fr); align-items: start; }
  .career-card[open] .card-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); align-items: start; margin: var(--s5) var(--s5) var(--s5) 0; padding: 0 0 0 var(--s5); border-top: 0; border-left: 3px dashed var(--ci); }
}
.res-alt { padding: var(--s5) var(--s4); }
.res-alt .res-name { font-size: clamp(19px, 1.55vw, 21px); hyphens: auto; }

/* ================= phone and tablet fixes (touch targets, covered text) ================= */
@media (max-width: 900px) {
  /* the picked chip sinks 5 px: keep 8 px or more between two chips */
  .chip-row, .disc-row { row-gap: var(--s4); }
  /* "Also consider" names are links: 44 px tall */
  .res-name a { display: flex; align-items: center; min-height: 44px; }
  /* the headline stays above the animated wave band (0.375 of the screen width tall, plus its 24 px offset) */
  .screen { padding-bottom: calc(37.5% + 40px); }
}
/* below 356 px "Communications" is wider than a two-column chip: one column, so the word stays whole inside its chip */
@media (max-width: 355px) {
  .disc-row { grid-template-columns: minmax(0, 1fr); }
}
/* the big 50,000 and its drawing share one tile: a smaller numeral and a narrower drawing keep the drawing off the digits */
@media (max-width: 900px) {
  .t-target .big { font-size: clamp(72px, 13vw, 112px); }
  .art-target { width: min(30%, 220px); }
}