/* justforthestudents.com — shared styles. Full-bleed; 3-zone body (label · content · sidebar) that interleaves on mobile. */
:root{
  --paper:#F9FAF8;
  --ink:17,18,19;
  --blue:34,86,242;
  --crimson:214,40,72;
  --hair:rgba(17,18,19,.12);
  --ok:#2E8158;
  --partial:#B5801C;
  --mono:"Space Mono", ui-monospace, SFMono-Regular, monospace;
  --grot:"Space Grotesk", system-ui, -apple-system, sans-serif;
  --pad:clamp(20px, 4.5vw, 64px);
  --maxw:1400px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:rgb(var(--ink));font-family:var(--grot);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}
.mono{font-family:var(--mono)}
a{color:inherit}
:focus-visible{outline:2px solid rgb(var(--blue));outline-offset:3px;border-radius:2px}
.bleed{padding-inline:var(--pad)}
.wrap{max-width:var(--maxw);margin-inline:auto}
.rule{border:0;border-top:1px solid var(--hair);margin:0}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-block:22px}
.wordmark{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:-.01em;text-decoration:none;color:inherit}
.nav{display:flex;gap:24px;font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.nav a{color:rgba(var(--ink),.55);text-decoration:none;transition:color .18s}
.nav a:hover,.nav a[aria-current]{color:rgb(var(--blue))}

/* hero: text | globe + motif */
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;padding-block:38px 50px}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(var(--ink),.5)}
.crumb b{color:rgba(var(--ink),.82);font-weight:400}
.h1{font-size:clamp(46px,6.4vw,94px);font-weight:500;line-height:.97;letter-spacing:-.03em;margin:24px 0 0}
.lead{font-size:clamp(18px,1.9vw,23px);line-height:1.46;color:rgba(var(--ink),.74);max-width:44ch;margin:24px 0 0}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.globe-link{display:block;width:148px;height:148px;text-decoration:none}
.globe-link canvas,.globe-link>div{display:block;width:100%;height:100%}
.globe-cap{display:block;text-align:center;margin-top:2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:rgba(var(--ink),.4);transition:color .18s}
.globe-link:hover .globe-cap{color:rgb(var(--blue))}
.motif{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;color:rgba(var(--ink),.45);margin-top:24px}
.motif .mline{width:46px;height:0;border-top:1px dashed rgba(var(--ink),.28)}

/* body: 3-zone grid — label | content | sidebar. Items authored interleaved in source. */
.body{display:grid;grid-template-columns:minmax(140px,2.3fr) minmax(0,6.7fr) minmax(220px,3fr);column-gap:clamp(28px,4vw,60px);align-items:start}
.body>.rule{grid-column:1 / -1}
.sec-label{grid-column:1;padding-block:44px;font-family:var(--mono);font-weight:700;font-size:17px;letter-spacing:.06em;color:rgb(var(--ink));line-height:1.5;overflow-wrap:break-word}
.sec-label .n{display:block;font-weight:400;font-size:11.5px;letter-spacing:.13em;color:rgba(var(--ink),.3);margin-bottom:8px}
.sec-body{grid-column:2;padding-block:44px;min-width:0}
.side{grid-column:3;padding-block:44px;display:flex;flex-direction:column;gap:16px}

/* content typography */
.h2{font-size:clamp(24px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.07;margin:0 0 18px}
.prose{max-width:64ch}
.prose p{font-size:17px;line-height:1.62;color:rgba(var(--ink),.82);margin:0 0 18px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:500;color:rgb(var(--ink))}

/* dots + honesty */
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;vertical-align:middle}
.dot.ok{background:var(--ok)} .dot.partial{background:var(--partial)} .dot.crimson{background:rgb(var(--crimson))} .dot.blue{background:rgb(var(--blue))}
.meta{font-family:var(--mono);font-size:12px;color:rgba(var(--ink),.5);line-height:1.5}
.src{color:rgb(var(--blue));text-decoration:none}.src:hover{text-decoration:underline}
.fig{font-family:var(--mono)}
/* a deliberate gap, shown plainly — never styled to look like a value */
.fig-blank{color:rgba(var(--ink),.42);font-style:normal}

/* card grids */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.card{padding:20px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.card h3{font-size:18px;font-weight:500;margin:0 0 8px;letter-spacing:-.01em}
.card p{font-size:14px;line-height:1.55;color:rgba(var(--ink),.66);margin:0}

/* spoke / destination cards */
.spokes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.spoke{display:flex;flex-direction:column;justify-content:space-between;min-height:128px;padding:20px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);text-decoration:none;transition:background .18s}
.spoke:hover{background:rgba(var(--blue),.04)}
.spoke .sn{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:rgba(var(--ink),.4)}
.spoke .st{font-size:20px;font-weight:500;letter-spacing:-.01em;margin-top:9px}
.spoke .sd{font-size:13px;color:rgba(var(--ink),.6);margin-top:6px;line-height:1.5}
.spoke .go{font-size:13.5px;color:rgb(var(--blue));margin-top:13px}

/* steps */
.steps{border-top:1px solid var(--hair)}
.step{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--hair)}
.step .num{font-family:var(--mono);font-size:13px;color:rgba(var(--ink),.4)}
.step h3{font-size:19px;font-weight:500;margin:0 0 7px;letter-spacing:-.01em}
.step p{font-size:15.5px;line-height:1.55;color:rgba(var(--ink),.8);margin:0 0 8px;max-width:62ch}

/* sourced facts */
.facts{display:flex;flex-direction:column;gap:16px}
.fact .claim{font-size:16px;line-height:1.5;color:rgba(var(--ink),.9);margin:0}
.fact .claim .dot{margin-right:9px}
.fact .meta{margin:5px 0 0 16px}

/* callouts */
.callout{border:1px solid var(--hair);border-radius:4px;padding:20px 22px;max-width:72ch}
.callout.warn{background:rgba(181,128,28,.06);border-color:rgba(181,128,28,.32)}
.callout .eyebrow{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;color:rgba(var(--ink),.42)}
.callout.warn .eyebrow{color:var(--partial)}
.callout .b{font-size:16px;line-height:1.55;color:rgba(var(--ink),.86);margin:9px 0 0;max-width:62ch}
.callout .meta{margin-top:11px}

/* nepal step chip */
.nepal-step{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:rgba(var(--ink),.78);text-decoration:none;border:1px solid rgba(var(--crimson),.28);border-radius:4px;padding:10px 14px;transition:border-color .18s}
.nepal-step:hover{border-color:rgba(var(--crimson),.55)}
.nepal-step b{color:rgb(var(--crimson));font-weight:500}
.nepal-step .arrow{color:rgba(var(--ink),.5)}

/* sidebar blocks */
.cta{border:1px solid var(--hair);border-radius:4px;padding:18px;text-decoration:none;display:block;transition:border-color .18s,background .18s}
.cta:hover{border-color:rgba(var(--ink),.28)}
.cta .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:rgba(var(--ink),.45)}
.cta .t{display:block;font-size:18px;font-weight:500;letter-spacing:-.01em;margin-top:9px;line-height:1.18}
.cta .d{display:block;font-size:13px;color:rgba(var(--ink),.62);margin-top:7px;line-height:1.5}
.cta .go{display:block;font-size:13.5px;color:rgb(var(--blue));margin-top:13px}
.cta.primary{border-color:rgba(var(--blue),.35);background:rgba(var(--blue),.045)}
.cta.primary:hover{border-color:rgba(var(--blue),.6)}
.cta.soon .go{color:rgba(var(--ink),.4)}
.rnav .eyebrow{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:rgba(var(--ink),.42);margin-bottom:10px}
.rnav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.rnav li{border-bottom:1px solid var(--hair)}
.rnav a{display:block;padding:11px 0;font-size:14.5px;color:rgba(var(--ink),.7);text-decoration:none;transition:color .15s}
.rnav a:hover{color:rgb(var(--blue))}
.rnav a[aria-current]{color:rgb(var(--ink));font-weight:500}
.rnav a[aria-current]::before{content:"› ";color:rgb(var(--blue))}

/* sources / cross-links / footer */
.sources{font-family:var(--mono);font-size:12px;color:rgba(var(--ink),.55);line-height:1.9;columns:2;column-gap:44px}
.sources a{color:rgb(var(--blue));text-decoration:none}
.xlinks{display:flex;flex-wrap:wrap;gap:24px}
.xlinks a{font-size:16px;color:rgb(var(--blue));text-decoration:none}.xlinks a:hover{text-decoration:underline}
.foot{border-top:1px solid var(--hair);padding-block:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:rgba(var(--ink),.4)}
.foot a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.foot a:hover{color:rgb(var(--blue));border-bottom-color:rgba(var(--blue),.45)}
.foot-fine{padding-block:8px 22px;font-family:var(--mono);font-size:11px;color:rgba(var(--ink),.28);letter-spacing:.01em}

/* cost bars — give money a sense of scale. Numbers are real text; the bar only
   reinforces them. A figure with no value shows a hatched empty track, never a guess. */
.costbars{display:flex;flex-direction:column;gap:22px;max-width:72ch}
.cbar-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:7px}
.cbar-label{font-size:15.5px;color:rgba(var(--ink),.88)}
.cbar-val{font-size:14px;color:rgb(var(--ink));white-space:nowrap;font-variant-numeric:tabular-nums}
.cbar-track{position:relative;height:9px;background:rgba(var(--ink),.06);border-radius:2px;overflow:hidden}
.cbar-fill{position:absolute;top:0;bottom:0;background:rgb(var(--blue));border-radius:2px}
.cbar-fill.is-range{background:linear-gradient(90deg,rgba(var(--blue),.45),rgb(var(--blue)))}
.cbar .meta{margin-top:7px;display:flex;align-items:center;gap:9px}
.cbar-blank .cbar-val{color:rgba(var(--ink),.4)}
.cbar-blank .cbar-track{background:repeating-linear-gradient(135deg,rgba(var(--ink),.05) 0 5px,transparent 5px 10px);border:1px dashed rgba(var(--ink),.16)}
.cbar-axis{font-size:11.5px;letter-spacing:.06em;color:rgba(var(--ink),.38);padding-top:2px;border-top:1px solid var(--hair)}

/* timeline — sequenced steps with a rail; turns process prose into something scannable */
.timeline{display:flex;flex-direction:column;max-width:72ch}
.tl-item{display:grid;grid-template-columns:minmax(120px,168px) minmax(0,1fr);column-gap:26px;padding-bottom:26px}
.tl-when{font-size:12px;letter-spacing:.06em;color:rgba(var(--ink),.5);padding-top:3px}
.tl-body{position:relative;padding-left:24px;border-left:1px solid var(--hair)}
.tl-body::before{content:"";position:absolute;left:-4.5px;top:6px;width:8px;height:8px;border-radius:50%;background:rgb(var(--blue))}
.tl-item:last-child .tl-body{border-left-color:transparent}
.tl-body h3{font-size:16.5px;font-weight:500;margin:0;color:rgb(var(--ink))}
.tl-body p{font-size:15.5px;line-height:1.55;color:rgba(var(--ink),.74);margin:6px 0 0}
.tl-body .meta{margin-top:7px}

/* office cards — a real place with a real address. Built on the same hairline
   grid as .cardgrid so a contact block never reads as a different design system.
   A field the registry doesn't have renders as a muted "not published" blank —
   the same empty-but-honest rule the figures follow. */
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.office{padding:20px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.office .o-role{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:rgba(var(--ink),.42);display:block;margin-bottom:7px}
.office h3{font-size:17px;font-weight:500;margin:0 0 13px;letter-spacing:-.01em;line-height:1.25}
.o-rows{display:flex;flex-direction:column;gap:7px}
.o-row{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:baseline}
.o-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:rgba(var(--ink),.38)}
.o-v{font-size:14px;line-height:1.5;color:rgba(var(--ink),.82);overflow-wrap:anywhere}
.o-v a{color:rgb(var(--blue));text-decoration:none}.o-v a:hover{text-decoration:underline}
.o-blank{color:rgba(var(--ink),.4)}
.office .meta{margin-top:14px;padding-top:11px;border-top:1px solid var(--hair);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}

/* document index — the hub's scannable list of every paper and who issues it */
.doclist{border-top:1px solid var(--hair)}
.docrow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) auto;gap:20px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:padding-left .18s,background .18s}
.docrow:hover{background:rgba(var(--blue),.04);padding-left:8px}
.dr-name{font-size:17px;font-weight:500;letter-spacing:-.01em;color:rgb(var(--ink))}
.dr-where{font-family:var(--mono);font-size:12px;color:rgba(var(--ink),.5);line-height:1.5}
.dr-go{font-size:13px;color:rgb(var(--blue));white-space:nowrap}

/* faq — question/answer pairs (field hubs + documents pages share this markup) */
.faq{border-top:1px solid var(--hair);max-width:72ch}
.faq-item{padding:18px 0;border-bottom:1px solid var(--hair)}
.faq-q{font-size:17px;font-weight:500;letter-spacing:-.01em;margin:0}
.faq-a p{font-size:15.5px;line-height:1.58;color:rgba(var(--ink),.78);margin:8px 0 0}

/* ---- cities module (CC-45) ---- */

/* The country map. Colour is deliberate and bounded: the landmass carries a
   blue→green→crimson gradient at low opacity (the three palette hues, nothing
   new), pins are the one blue, and the current city is crimson — the same
   "you/home" meaning crimson already carries in the nepal ··· destination motif.
   Every pin is an <a>, so all interaction here is CSS on a real link: no JS, and
   it still works as navigation with scripting disabled. */
.cmap-wrap{margin:0;padding:0}
/* max-height matters: viewBox aspect ratios run from Canada's 1000×402 to the
   UK's 1000×1606, and an unconstrained tall country would push the rest of the
   page off the screen. preserveAspectRatio (default xMidYMid meet) centres the
   map inside the capped box rather than distorting it. */
.cmap{display:block;width:100%;height:auto;max-height:min(70vh,600px);overflow:visible}
.cmap-land{stroke:rgba(var(--ink),.28);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cmap-pin{cursor:pointer}
/* --cs is emitted per map by tools/_lib/mapsvg.js — it is the viewBox aspect,
   and it compensates for CSS capping the rendered height: a tall country draws
   smaller, so its labels and pins need more user units to end up the same size
   on screen. r is set in CSS (SVG2) with the attribute kept as the fallback. */
.cmap-halo{r:calc(22 * var(--cs,1));fill:rgb(var(--blue));opacity:0;transition:opacity .18s}
.cmap-dot{r:calc(8 * var(--cs,1));fill:rgb(var(--blue));stroke:var(--paper);stroke-width:2.5;transition:fill .18s}
.cmap-label{font-family:var(--mono);font-size:calc(23px * var(--cs,1));fill:rgba(var(--ink),.62);letter-spacing:.02em;paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round;transition:fill .18s}
.cmap-pin:hover .cmap-halo{opacity:.16}
.cmap-pin:hover .cmap-dot{fill:rgb(var(--crimson))}
.cmap-pin:hover .cmap-label{fill:rgb(var(--ink))}
.cmap-pin:focus-visible{outline:none}
.cmap-pin:focus-visible .cmap-halo{opacity:.22}
.cmap-pin:focus-visible .cmap-label{fill:rgb(var(--blue))}
/* the city you are already on — marked, and not a link that goes nowhere new */
.cmap-pin.is-current .cmap-dot{fill:rgb(var(--crimson))}
.cmap-pin.is-current .cmap-halo{fill:rgb(var(--crimson));opacity:.18}
.cmap-pin.is-current .cmap-label{fill:rgb(var(--ink));font-weight:700}
.cmap-cap{margin-top:10px;font-size:11.5px;letter-spacing:.09em;color:rgba(var(--ink),.42)}

/* university cards — the outbound link is always the institution's own domain */
.unilist{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.uni{padding:18px 20px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:8px}
.uni h3{font-size:17px;font-weight:500;margin:0;letter-spacing:-.01em;line-height:1.25}
.uni .u-note{font-size:14px;line-height:1.55;color:rgba(var(--ink),.66);flex:1}
.uni .u-go{margin-top:2px}
.uni .u-link{font-family:var(--mono);font-size:11.5px;color:rgb(var(--blue));text-decoration:none;word-break:break-all}
.uni .u-link:hover{text-decoration:underline}
.u-foot{margin:14px 0 0;max-width:64ch}

/* city rows — the index list, and the "other cities" list on each city page */
.citylist{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.cityrow{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);text-decoration:none;transition:background .18s}
.cityrow:hover{background:rgba(var(--blue),.05)}
.cl-head{display:flex;flex-direction:column;gap:3px}
.cl-name{font-size:19px;font-weight:500;letter-spacing:-.015em;color:rgb(var(--ink))}
.cl-region{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(var(--ink),.45)}
.cl-blurb{font-size:14px;line-height:1.55;color:rgba(var(--ink),.7);flex:1}
.cl-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.cl-go{font-size:13px;color:rgb(var(--blue));white-space:nowrap}
/* Cost bands are a comparison between THIS country's own cities, never a
   currency figure — so they are chips, not figures, and carry no confidence dot.
   The page says what they mean in words directly above the list. */
.cl-band{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;padding:3px 8px;border-radius:2px;white-space:nowrap}
.band-higher{background:rgba(var(--crimson),.1);color:rgb(var(--crimson))}
.band-mid{background:rgba(var(--ink),.07);color:rgba(var(--ink),.6)}
.band-lower{background:rgba(46,129,88,.12);color:var(--ok)}

/* trait chips — labelling, not data */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px}
.chip-label{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:rgba(var(--ink),.42);margin-right:2px}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:rgba(var(--ink),.66);border:1px solid var(--hair);border-radius:2px;padding:4px 9px}

/* ---- responsive: collapse to single column; sidebar blocks interleave between sections ---- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:6px}
  .hero-side{align-items:flex-end;margin-top:18px}
  .motif{margin-top:14px}
  .body{grid-template-columns:1fr;column-gap:0}
  .body>*{grid-column:1 !important}
  .sec-label{padding:40px 0 0}
  .sec-body{padding:14px 0 0}
  .side{padding:26px 0 0;gap:14px}
  .body>.rule{margin-top:40px}
  .sources{columns:1}
}
@media (max-width:700px){
  /* timeline: the "when" stacks above its step rather than squeezing to a sliver */
  .tl-item{grid-template-columns:1fr;row-gap:5px}
  .tl-when{padding-top:0}
  .tl-body{padding-left:18px}
  .cbar-head{flex-direction:column;align-items:flex-start;gap:2px}
  /* document rows: name over issuer rather than three squeezed columns */
  .docrow{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}
  .dr-where{grid-column:1}
  .dr-go{grid-row:1;grid-column:2}
  /* Map text scales with the viewBox, so it shrinks as the SVG does. Bump the
     user-unit sizes so pins and labels stay legible and thumb-sized on a phone
     — the map is navigation, and unreadable navigation is no navigation. */
  .cmap-label{font-size:calc(30px * var(--cs,1));stroke-width:7px}
  .cmap-dot{r:calc(11 * var(--cs,1))}
  .cmap-halo{r:calc(30 * var(--cs,1))}
}
@media (max-width:560px){
  .top{padding-block:16px}.nav{gap:16px}
  .globe-link{width:96px;height:96px}.globe-cap{display:none}
  .hero{padding-block:26px 34px}
  .cmap{max-height:min(62vh,460px)}
  .cmap-label{font-size:calc(38px * var(--cs,1));stroke-width:9px}
  .cmap-dot{r:calc(14 * var(--cs,1))}
  .cmap-halo{r:calc(38 * var(--cs,1))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}