/* ============================================================================
   ERASMUS HOSTING — visual system. Ported from the approved mockup,
   docs/superpowers/specs/2026-09-04-erasmus-mockup.html. Not redesigned.

   The shape of the page, unchanged from that file:
     ONE loud moment. A deep European blue stage (#0B2F7A) opens the hub —
     white headline, gold/white rule, three gold figures, and the routes map
     with gold routes converging on Warsaw. Everything after it returns to the
     site's cream (#ECECEA) so the section still belongs to teamknocknock.com.
     The blue returns exactly ONCE more, for the EU-frameworks band.

   Programme colour coding, consistent on every surface:
     EYE mint #69E8A0 · traineeship sky #8ED2E0 · KA1 gold #F5C649.

   NO EU emblem and NO ring of gold stars, anywhere, ever. Gold marks cities
   and routes. A blue field carrying a ring of twelve gold stars IS the emblem,
   it needs authorisation we do not have, and it would assert an endorsement we
   have not been given. The page says so in its own closing note.

   SCOPING — read before adding a rule.
   er_shell() puts `mil-er-hub` (hub) and `mil-er-story-page` (story) on the
   BODY, alongside the shared `mil-er`. A component rule named after either
   would style the whole document: that exact bug painted 105 invisible
   elements on /pl/dotacje. So EVERY rule in this file is scoped under
   `.mil-er-page` — the wrapper <div> both templates open — which the body can
   never match. scripts/tests/test_css_body_class_collisions.py pins it.

   Fonts: Anton (display) and Roboto (body) come from assets-site/css/fonts.css;
   IBM Plex Mono was added to that file's existing @import for the data layer.

   No position:fixed in this file. site.css parks .mil-transition-frame at
   filter:blur(0), which makes it the containing block for fixed descendants,
   so a fixed child would anchor to the frame rather than the viewport.
   ========================================================================== */

/* --- 0. TOKENS ------------------------------------------------------------
   --er-eu is the blue for TEXT and LINES. --er-eu-solid is the blue for FILLED
   surfaces and is a different, deeper value on purpose: a filled panel must
   never take a value that is allowed to lighten, because the white type on it
   would go with it. The first draft of the mockup shared one token and
   rendered white on pale blue. They stay separate.
   --er-signal is the brand red, spent on Warsaw and on non-text marks only;
   --er-signal-ink is its AA-safe sibling for the one fill that carries white
   text (white on #E52E51 is 4.34:1 and fails AA at 12px — the same finding
   partners.css records for --pt-red-ink). */
.mil-er-page{
  --er-ground:#ECECEA;          /* the live site's page ground */
  --er-paper:#FFFFFF;
  --er-ink:#1E1E32;             /* brand navy */
  /* The mockup's grey, kept exactly. Measured: 5.04:1 on paper (AA) and 4.26:1 on
     the cream ground — under AA's 4.5 for the four rules that sit on cream
     (.mil-er-head .mil-er-lede, .mil-er-col p, .mil-er-not, .mil-er-meta-item),
     though well over the site's own body grey (#7a7a7a on cream is 3.54:1) and
     four times the 0.12 luminance gap this project tests for. Darkening the token
     to #5F5F6A takes every one of them to 5.3:1 and is a one-line change — it is
     not made here because the palette is the approved design, not this file's. */
  --er-muted:#6E6E78;           /* grey biased toward the navy, not a neutral mid-grey */
  --er-hair:rgba(30,30,50,.14);
  --er-signal:#E52E51;          /* brand red — marks, rules, the Warsaw dot */
  --er-signal-ink:#D82549;      /* the same red, dark enough to carry white text */
  --er-eu:#12429B;              /* European blue, for text and lines */
  --er-eu-solid:#0B2F7A;        /* deeper blue for FILLED surfaces — never lightens */
  --er-gold:#F5C649;            /* the blue's partner; cities and routes only */
  --er-eye:#69E8A0;             /* EYE — brand mint */
  --er-trn:#8ED2E0;             /* traineeship — sky */
  --er-ka1:#F5C649;             /* KA1 — gold */
  --er-shadow:0 6px 22px rgba(30,30,50,.05);

  --er-display:var(--font-secondary),Impact,"Arial Narrow",sans-serif;
  --er-body:var(--font-primary),Arial,Helvetica,sans-serif;
  --er-data:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --er-head:100px;              /* the fixed site header, measured */
  --er-gutter:30px;             /* bootstrap-grid's --bs-gutter-x at this width */
}
@media (min-width:992px){.mil-er-page{--er-head:120px}}
@media (max-width:768px){.mil-er-page{--er-gutter:15px}}

/* --- 1. THE SHEET --------------------------------------------------------- */
.mil-er-page{
  background:var(--er-ground);
  color:var(--er-ink);
  font-family:var(--er-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
}
/* The mockup sets its headings in Anton at their natural case; site.css sets
   every h1-h6 uppercase, navy and weight 100. Restating all three here is what
   makes the section render as the approved comp rather than as the site's
   default heading style. */
.mil-er-page h1,
.mil-er-page h2,
.mil-er-page h3{
  font-family:var(--er-display);
  font-weight:400;
  text-transform:none;
  letter-spacing:-.01em;
  line-height:1;
  color:var(--er-ink);
  margin:0;
  text-wrap:balance;
  overflow-wrap:break-word;
  padding-bottom:.04em;         /* room for Polish ogonki */
}
.mil-er-page h2{font-size:clamp(28px,3.6vw,44px)}
.mil-er-page h3{font-size:20px;line-height:1.15}
.mil-er-page p{margin:0}
.mil-er-page a{color:inherit}
/* site.css kills the UA outline with `*,*:focus{outline:inherit}`, so keyboard
   focus has to be re-drawn here. Blue on the light ground, gold on the two
   blue surfaces where blue would disappear. */
.mil-er-page a:focus-visible,
.mil-er-page .mil-btn:focus-visible{
  outline:2px solid var(--er-eu);outline-offset:3px;border-radius:2px;
}
.mil-er-page .mil-er-stage a:focus-visible,
.mil-er-page .mil-er-frames a:focus-visible{outline-color:var(--er-gold)}

/* Section rhythm. Everything below the stage is a .mil-er-sec; the specific
   sections tune it further, further down this file. */
.mil-er-page .mil-er-sec{padding:clamp(36px,5.2vw,64px) 0}

/* --- 2. THE STAGE ---------------------------------------------------------
   The one place the page goes loud. The blue is a rounded card, not a bleed,
   and the card is exactly the container's content box — the same box the
   triad, the bands and the CTA cards fill. Every card on the page therefore
   has one left edge and one right edge, as in the mockup, where a single
   .wrap gave every block the same width. */
.mil-er-page .mil-er-stage{padding:calc(var(--er-head) + clamp(18px,2.6vw,34px)) 0 0}
.mil-er-page .mil-er-stage-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,410px);
  gap:clamp(26px,4vw,54px);
  align-items:center;
  background:var(--er-eu-solid);
  color:#fff;
  border-radius:20px;
  padding:clamp(28px,4.2vw,52px);
}
/* min-width:0 on both: a grid child takes a min-content minimum by default and
   clips long words — the trap that cost this project 7px of every paragraph at
   375px once already. */
.mil-er-page .mil-er-stage-copy{min-width:0}
.mil-er-page .mil-er-stage-map{min-width:0}
@media (max-width:880px){
  .mil-er-page .mil-er-stage-inner{grid-template-columns:minmax(0,1fr);gap:30px}
  .mil-er-page .mil-er-stage-map{max-width:440px;width:100%;margin:0 auto}
}

.mil-er-page .mil-er-bar{
  display:block;height:4px;width:128px;border-radius:2px;margin:0 0 22px;
  background:linear-gradient(90deg,var(--er-gold) 0 46%,rgba(255,255,255,.45) 46% 100%);
}
.mil-er-page .mil-er-stage h1{
  font-size:clamp(38px,6vw,74px);
  line-height:1.02;
  color:#fff;
  margin:0 0 20px;
}
/* The one accented word of the headline. initAccentWords() (assets-site/js/site.js)
   wraps whatever templates/erasmus-index.php lists in data-accent-words in a
   .mil-a1, which site.css paints the brand red — right everywhere else on the site,
   wrong on this blue, where the mockup's accent is gold. Scoped to the stage so the
   red survives untouched anywhere else the class lands. Three classes, so it outranks
   site.css's bare .mil-a1 whatever the load order. */
.mil-er-page .mil-er-stage .mil-a1{color:var(--er-gold)}
.mil-er-page .mil-er-stage .mil-er-lede{color:rgba(255,255,255,.85);margin:0 0 30px}

/* The three gold figures. <b> because the markup says <b>; site.css sets
   b{font-weight:100}, which Anton does not have. */
.mil-er-page .mil-er-stats{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,40px);
}
.mil-er-page .mil-er-stat{min-width:0}
.mil-er-page .mil-er-stat b{
  display:block;
  font-family:var(--er-display);font-weight:400;
  font-size:clamp(30px,3.4vw,40px);line-height:1;
  color:var(--er-gold);
}
.mil-er-page .mil-er-stat small{
  display:block;margin-top:6px;
  font-family:var(--er-data);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* --- 3. THE ROUTES MAP ----------------------------------------------------
   er_map_svg() projects real longitude/latitude onto the 100x100 box, so the
   geometry is honest and a person with no coordinates simply contributes no
   dot. Gold on the routes and the halo; the hub itself is the brand red. */
.mil-er-page .mil-er-map{width:100%;height:auto;display:block}
.mil-er-page .mil-er-grid{stroke:rgba(255,255,255,.13);stroke-width:.3}
.mil-er-page .mil-er-line{
  stroke:var(--er-gold);stroke-width:1;fill:none;opacity:.85;stroke-dasharray:2.5 2;
}
.mil-er-page .mil-er-pt{fill:rgba(255,255,255,.82)}
.mil-er-page .mil-er-halo{fill:none;stroke:var(--er-gold);stroke-width:.9;opacity:.9}
.mil-er-page .mil-er-dest{fill:var(--er-signal)}
.mil-er-page .mil-er-map text{
  font-family:var(--er-data);font-size:3.4px;
  fill:rgba(255,255,255,.62);letter-spacing:.06em;
}
/* Written as text.<class>, not .<class>: `.mil-er-map text` is a class plus a
   type and would otherwise outrank a bare class and grey out the hub label. */
.mil-er-page .mil-er-map text.mil-er-hubname{fill:#fff;font-size:4.3px;font-weight:500}

/* --- 4. THE TRIAD — three DIFFERENT EU instruments, named apart ------------
   HAIRLINE GRID, used here and again for the EU frameworks band. The obvious
   build — a 1px grid gap over a tinted bed — leaves a solid slab of bed colour
   wherever the last row is short, which is what four framework cards in three
   columns look like between roughly 770 and 1150px. So the bed is the CELL
   colour, the container draws a full inset ring, and each cell draws its own
   right and bottom hairline inside itself. Short rows then show nothing but
   the fill, and one, three, four or eight children all work with no per-count
   rules. Cells must stay transparent: a cell background would paint over the
   container's ring. */
.mil-er-page .mil-er-triad-sec{padding:clamp(30px,4vw,44px) 0 0}
.mil-er-page .mil-er-triad{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:0;
  background:var(--er-paper);
  box-shadow:inset 0 0 0 1px var(--er-hair);
  border-radius:14px;
  overflow:hidden;
}
.mil-er-page .mil-er-prog{
  background:transparent;padding:22px 22px 24px;min-width:0;
  box-shadow:inset -1px 0 0 0 var(--er-hair),inset 0 -1px 0 0 var(--er-hair);
}
.mil-er-page .mil-er-code{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;
  font-family:var(--er-data);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--er-muted);
}
.mil-er-page .mil-er-prog-name{
  font-size:20px;line-height:1.15;margin:0 0 8px;color:var(--er-ink);
}
.mil-er-page .mil-er-role{font-family:var(--er-data);font-size:12px;color:var(--er-eu);margin:0}

/* Programme dots. One vocabulary — eye / trn / ka1 — drives the CSS modifier
   and the copy field names both (see erasmus-index.php), so a fourth programme
   cannot silently inherit a third one's colour. */
.mil-er-page .mil-er-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--er-hair);
}
.mil-er-page .mil-er-dot-eye{background:var(--er-eye)}
.mil-er-page .mil-er-dot-trn{background:var(--er-trn)}
.mil-er-page .mil-er-dot-ka1{background:var(--er-ka1)}

/* --- 5. SECTION HEADS ----------------------------------------------------- */
.mil-er-page .mil-er-head{margin:0 0 clamp(24px,3.2vw,32px)}
/* In the head the lede plays the mockup's `.small`: the quiet line under an
   h2, not the stage's lead paragraph. */
.mil-er-page .mil-er-head .mil-er-lede{
  margin:14px 0 0;font-size:clamp(15px,1.15vw,16.5px);
  line-height:1.6;color:var(--er-muted);max-width:62ch;
}
.mil-er-page .mil-er-lede{
  margin:0;font-size:clamp(16.5px,1.4vw,19px);line-height:1.6;max-width:56ch;
}

/* --- 6. ARRIVALS — one band per person ------------------------------------
   The route column carries the movement (home city, then Warsaw, with a drawn
   line between them); the who column carries the person. */
.mil-er-page .mil-er-arrivals{padding:clamp(44px,6vw,64px) 0 clamp(16px,2.4vw,24px)}
.mil-er-page .mil-er-band{
  display:grid;
  grid-template-columns:minmax(0,250px) minmax(0,1fr);
  gap:40px;
  background:var(--er-paper);
  border-radius:16px;
  padding:30px;
  box-shadow:var(--er-shadow);
  margin:0 0 20px;
}
.mil-er-page .mil-er-band:last-child{margin-bottom:0}
@media (max-width:760px){
  .mil-er-page .mil-er-band{grid-template-columns:minmax(0,1fr);gap:26px;padding:24px}
}

.mil-er-page .mil-er-route{display:flex;flex-direction:column;gap:14px;min-width:0}
.mil-er-page .mil-er-leg{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
}
.mil-er-page .mil-er-legmark{
  display:flex;flex-direction:column;align-items:center;padding-top:5px;
}
.mil-er-page .mil-er-ring{
  width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--er-eu);background:var(--er-paper);
}
/* Same specificity as .mil-er-ring, so it has to come after it. */
.mil-er-page .mil-er-ring-here{border-color:var(--er-signal);background:var(--er-signal)}
/* min-height, not height: the mark column is align-items:start, so the line
   would collapse to nothing if it only had flex:1 to go on. */
.mil-er-page .mil-er-leg-line{
  width:2px;flex:1 1 auto;min-height:38px;
  background:linear-gradient(var(--er-eu),var(--er-signal));
}
.mil-er-page .mil-er-legtext{display:block;min-width:0}
.mil-er-page .mil-er-city{
  display:block;font-family:var(--er-display);font-weight:400;
  font-size:19px;line-height:1.1;color:var(--er-ink);overflow-wrap:break-word;
}
.mil-er-page .mil-er-when{
  display:block;margin-top:3px;
  font-family:var(--er-data);font-size:11.5px;
  color:var(--er-muted);font-variant-numeric:tabular-nums;
}
.mil-er-page .mil-er-stay{
  margin:4px 0 0;padding-top:12px;border-top:1px solid var(--er-hair);
  font-family:var(--er-data);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--er-muted);
}

.mil-er-page .mil-er-who{min-width:0;display:flex;flex-direction:column;gap:14px}
.mil-er-page .mil-er-whohead{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;min-width:0;
}
/* One class for the photograph and for the initial that stands in for it, so a
   missing portrait leaves the same circle rather than a hole in the row. */
.mil-er-page .mil-er-portrait{
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  background:var(--er-ground);border:1px solid var(--er-hair);
}
.mil-er-page .mil-er-initial{
  display:grid;place-items:center;line-height:1;
  font-family:var(--er-display);font-weight:400;font-size:21px;
  text-transform:uppercase;color:var(--er-muted);
}
.mil-er-page .mil-er-who-name{
  font-size:clamp(20px,2.2vw,26px);line-height:1.1;margin:0;min-width:0;
}

/* Programme chip. The dot inside it already carries the colour; the pill is
   tinted with the same hue so the coding survives at a glance, and the label
   stays navy on a near-white tint rather than trying to be legible in mint. */
.mil-er-page .mil-er-chip{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:5px 11px;border-radius:999px;
  border:1px solid var(--er-hair);background:var(--er-paper);
  font-family:var(--er-data);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--er-ink);
}
.mil-er-page .mil-er-chip-eye{background:#EAFCF2;border-color:#CBF7DE}
.mil-er-page .mil-er-chip-trn{background:#EFF9FB;border-color:#D7EFF4}
.mil-er-page .mil-er-chip-ka1{background:#FEF7E6;border-color:#FCEBBF}

/* Their sentence, never ours — which is why it is a blockquote and never
   merged with the paragraph under it. */
.mil-er-page .mil-er-quote{
  margin:0;padding-left:20px;border-left:3px solid var(--er-eu);
  font-size:clamp(19px,2.1vw,25px);line-height:1.34;font-weight:300;
  color:var(--er-ink);
}
.mil-er-page .mil-er-did{
  margin:0;font-size:14.5px;line-height:1.65;color:var(--er-muted);max-width:68ch;
}
.mil-er-page .mil-er-more{
  align-self:flex-start;padding-bottom:2px;
  border-bottom:1px solid var(--er-signal);text-decoration:none;
  font-family:var(--er-data);font-size:12px;letter-spacing:.05em;
  color:var(--er-ink);
}
.mil-er-page .mil-er-more:hover{color:var(--er-signal-ink)}

/* The section ships with zero people and must still look finished, so the
   empty note is a designed object rather than a stray grey line. */
.mil-er-page .mil-er-empty{
  margin:0;max-width:64ch;padding:20px 24px;
  background:var(--er-paper);border:1px solid var(--er-hair);
  border-left:3px solid var(--er-eu);border-radius:12px;
  font-size:15.5px;line-height:1.65;color:var(--er-ink);
}

/* --- 7. WHAT HOSTING MEANS ------------------------------------------------
   One column per programme, each saying what we do and then what we are NOT.
   The rule on top is the programme's colour; the negative half is a field of
   its own so it cannot be trimmed to a clause. */
.mil-er-page .mil-er-means{padding:clamp(40px,5.4vw,56px) 0}
.mil-er-page .mil-er-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:28px;margin-top:28px;
}
.mil-er-page .mil-er-col{min-width:0;border-top:3px solid var(--er-hair);padding-top:18px}
.mil-er-page .mil-er-col-eye{border-top-color:var(--er-eye)}
.mil-er-page .mil-er-col-trn{border-top-color:var(--er-trn)}
.mil-er-page .mil-er-col-ka1{border-top-color:var(--er-ka1)}
.mil-er-page .mil-er-col h3{margin:0 0 10px}
.mil-er-page .mil-er-col p{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:var(--er-muted)}
/* Three classes deep on purpose: `.mil-er-page .mil-er-col p` above is one
   class + one type and would otherwise win. */
.mil-er-page .mil-er-col .mil-er-not{
  margin:0;padding-left:12px;border-left:2px solid var(--er-hair);
  font-size:13px;line-height:1.6;color:var(--er-muted);
}

/* --- 8. EU FRAMEWORKS — the blue's second and last appearance -------------
   Unlike the stage this band has no inner wrapper, so the blue is drawn by a
   ::before inset to exactly one gutter — which is the container's own content
   box, i.e. the same left and right edge as the stage card, the triad, the
   bands and the CTA. Painting the container itself would have made the blue
   one gutter wider than every card above it, and the page would step in and
   out down its own edge. --bs-gutter-x is read from bootstrap-grid.css rather
   than restated, so the two stay in step if that file's breakpoints move; the
   fallback is its ≥768px value. Measured equal to .mil-er-triad's box at
   375 / 700 / 768 / 900 / 1000 / 1150 / 1220 / 1280 / 1400 / 1600px.

   position:absolute, never fixed: site.css parks .mil-transition-frame at
   filter:blur(0), which would make it the containing block for a fixed box. */
.mil-er-page .mil-er-frames{padding:clamp(20px,3vw,30px) 0}
.mil-er-page .mil-er-frames>.container{
  position:relative;isolation:isolate;color:#fff;
  padding:clamp(26px,3.4vw,40px) calc(var(--bs-gutter-x,30px) + clamp(26px,3.4vw,40px));
}
.mil-er-page .mil-er-frames>.container::before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:var(--bs-gutter-x,30px);right:var(--bs-gutter-x,30px);
  background:var(--er-eu-solid);border-radius:18px;
}
.mil-er-page .mil-er-frames h2{color:#fff}
.mil-er-page .mil-er-frames .mil-er-head{margin-bottom:26px}
.mil-er-page .mil-er-frames .mil-er-head .mil-er-lede{color:rgba(255,255,255,.72)}
/* Same hairline grid as the triad, in the blue's own values. This is the list
   the technique exists for: four CMS cards in three columns put a pale slab
   two tracks wide under the fourth one. */
.mil-er-page .mil-er-frames-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:0;background:var(--er-eu-solid);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  border-radius:12px;overflow:hidden;
}
.mil-er-page .mil-er-frame{
  background:transparent;padding:20px;min-width:0;
  box-shadow:inset -1px 0 0 0 rgba(255,255,255,.2),inset 0 -1px 0 0 rgba(255,255,255,.2);
}
.mil-er-page .mil-er-frame-k{
  display:block;margin-bottom:9px;
  font-family:var(--er-data);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--er-gold);
}
.mil-er-page .mil-er-frame h3{font-size:17px;margin:0 0 7px;color:#fff}
.mil-er-page .mil-er-frame p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.7)}
.mil-er-page .mil-er-frame-more{
  display:inline-block;margin-top:11px;padding-bottom:2px;
  border-bottom:1px solid var(--er-gold);text-decoration:none;
  font-family:var(--er-data);font-size:11.5px;color:#fff;
}
.mil-er-page .mil-er-frame-more:hover{border-bottom-color:#fff}

/* --- 9. SPLIT CTA — two audiences, two different asks --------------------- */
.mil-er-page .mil-er-cta{padding:clamp(24px,3vw,34px) 0 clamp(50px,7vw,76px)}
.mil-er-page .mil-er-two{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:20px;
}
.mil-er-page .mil-er-card{border-radius:16px;padding:clamp(24px,3vw,30px);min-width:0}
.mil-er-page .mil-er-card h2{font-size:clamp(20px,2.2vw,26px);line-height:1.12;margin:0 0 10px}
.mil-er-page .mil-er-card p{margin:0;font-size:15px;line-height:1.6;max-width:52ch}
.mil-er-page .mil-er-card-come{background:var(--er-ink);color:var(--er-ground)}
.mil-er-page .mil-er-card-come h2{color:var(--er-ground)}
.mil-er-page .mil-er-card-come p{color:rgba(236,236,234,.78)}
.mil-er-page .mil-er-card-send{background:var(--er-paper);box-shadow:var(--er-shadow)}
.mil-er-page .mil-er-card-send h2{color:var(--er-ink)}
.mil-er-page .mil-er-card-send p{color:var(--er-muted)}

/* Both buttons also carry site.css's .mil-btn, which hard-sets its own
   background AND colour, so every value has to be restated here at a higher
   specificity or the CTAs render as the site's disabled-looking grey pill. */
.mil-er-page .mil-btn.mil-er-btn{
  height:56px;padding:0 28px;border-radius:999px;margin-top:18px;
  font-family:var(--er-data);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
}
.mil-er-page .mil-btn.mil-er-btn-gold{background-color:var(--er-gold);color:var(--er-ink)}
.mil-er-page .mil-btn.mil-er-btn-gold:hover{background-color:#E9B830;filter:none}
.mil-er-page .mil-btn.mil-er-btn-solid{background-color:var(--er-signal-ink);color:#fff}
.mil-er-page .mil-btn.mil-er-btn-solid:hover{background-color:#C21F41;filter:none}
@media (max-width:575px){
  .mil-er-page .mil-btn.mil-er-btn{width:100%;justify-content:center;padding:0 20px}
}

/* --- 10. THE EMBLEM NOTE --------------------------------------------------
   Why there is no EU emblem and no Erasmus+ logo above. Set in the data face,
   quiet, and deliberately not deletable-looking. */
.mil-er-page .mil-er-note{
  border-top:1px solid var(--er-hair);
  padding:22px 0 clamp(40px,6vw,60px);
}
.mil-er-page .mil-er-note p{
  margin:0;max-width:78ch;
  font-family:var(--er-data);font-size:11.5px;line-height:1.7;color:var(--er-muted);
}

/* --- 11. ONE PERSON'S STAY -----------------------------------------------
   No blue stage on this page, so the wrapper itself clears the fixed header. */
.mil-er-page.mil-er-story-page-body{
  padding-top:calc(var(--er-head) + clamp(16px,2.2vw,28px));
}
.mil-er-page .mil-er-story-back-wrap{
  padding-top:clamp(6px,1vw,10px);padding-bottom:clamp(6px,1vw,10px);
}
.mil-er-page .mil-er-story-back-wrap:last-child{padding-bottom:clamp(40px,6vw,64px)}
.mil-er-page .mil-er-back{
  display:inline-block;padding-bottom:3px;
  border-bottom:1px solid var(--er-hair);text-decoration:none;
  font-family:var(--er-data);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--er-muted);
}
.mil-er-page .mil-er-back:hover{color:var(--er-ink);border-bottom-color:var(--er-signal)}

.mil-er-page .mil-er-story-hero{padding:clamp(16px,2.4vw,26px) 0 clamp(28px,4vw,42px)}
.mil-er-page .mil-er-story-head{margin:0 0 clamp(22px,3vw,30px)}
.mil-er-page .mil-er-story-head h1{
  font-size:clamp(34px,5.2vw,64px);line-height:1.02;margin:0;
}
.mil-er-page .mil-er-meta{
  list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.mil-er-page .mil-er-meta-item{
/* A verification link that looks identical to plain text is a link nobody clicks, and
   these two exist precisely so a reader can check the person and the programme route. */
.mil-er-page .mil-er-meta-item a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--er-eu)}
.mil-er-page .mil-er-meta-item a:hover{text-decoration-color:currentColor}
  padding:5px 11px;border:1px solid var(--er-hair);border-radius:999px;
  font-family:var(--er-data);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--er-muted);
}
.mil-er-page .mil-er-story-quote{
  display:flex;gap:18px;align-items:flex-start;
  margin:0 0 clamp(18px,2.4vw,26px);
}
.mil-er-page .mil-er-story-quote .mil-er-portrait{width:72px;height:72px}
.mil-er-page .mil-er-story-quote .mil-er-initial{font-size:27px}
/* Same specificity as .mil-er-quote, so it follows it. */
.mil-er-page .mil-er-quote-lg{min-width:0;font-size:clamp(21px,2.6vw,30px);line-height:1.3}
.mil-er-page .mil-er-story-outcome{
  margin:0;max-width:64ch;padding:20px 24px;
  background:var(--er-paper);border:1px solid var(--er-hair);
  border-left:3px solid var(--er-eu);border-radius:12px;
  font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--er-ink);
}

/* `story` is the section's only richtext field, so this is the only place the
   stylesheet has to dress markup it did not write. */
.mil-er-page .mil-er-story-body-sec{padding:0 0 clamp(28px,4vw,42px)}
.mil-er-page .mil-er-story-body{max-width:70ch;font-size:16.5px;line-height:1.75;color:var(--er-ink)}
.mil-er-page .mil-er-story-body p{margin:0 0 1.1em}
.mil-er-page .mil-er-story-body h2{font-size:clamp(22px,2.4vw,30px);margin:1.6em 0 .5em}
.mil-er-page .mil-er-story-body h3{font-size:19px;margin:1.5em 0 .45em}
.mil-er-page .mil-er-story-body ul,
.mil-er-page .mil-er-story-body ol{margin:0 0 1.1em;padding-left:1.3em}
.mil-er-page .mil-er-story-body li{margin-bottom:.4em}
.mil-er-page .mil-er-story-body a{
  color:var(--er-eu);text-decoration:underline;text-underline-offset:3px;
}
.mil-er-page .mil-er-story-body img{max-width:100%;height:auto;border-radius:12px}
.mil-er-page .mil-er-story-body blockquote{
  margin:0 0 1.1em;padding-left:18px;border-left:3px solid var(--er-hair);color:var(--er-muted);
}
.mil-er-page .mil-er-story-outcome-sec{padding:0 0 clamp(28px,4vw,42px)}

/* --- 12. MOTION -----------------------------------------------------------
   The bands, cards and columns already rise on .mil-up (GSAP, gated by
   site.js). The only animation this file owns is the routes drawing
   themselves, which is the whole point of the map. */
@media (prefers-reduced-motion:no-preference){
  .mil-er-page .mil-er-line{stroke-dashoffset:130;animation:mil-er-draw 1.7s ease-out .2s both}
  @keyframes mil-er-draw{to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion:reduce){
  .mil-er-page .mil-up{opacity:1;transform:none}
  .mil-er-page *{animation:none !important;transition:none !important}
}