/* ═══ LTB2000 ═══════════════════════════════════════════════════
   Ink, paper, seal. See DESIGN.md for the reasoning.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:       #102c3a;
  --ink-deep:  #08202b;
  --paper:     #e9e8e0;
  --paper-hi:  #f4f3ed;
  --seal:      #a32431;
  --seal-lt:   #e0796f;   /* carmine lightened for the dark field only */
  --slate:     #5e6e77;
  --chalk:     #eae7df;
  --chalk-dim: #93a4ad;
  --rule:      rgba(16,44,58,.18);
  --rule-soft: rgba(16,44,58,.10);

  --serif: Vollkorn, Georgia, "Times New Roman", serif;
  --sans:  "Golos Text", "Segoe UI", Roboto, system-ui, sans-serif;

  --step-0: 1.0625rem;   /* 17px */
  --step-1: 1.32rem;
  --step-2: 1.65rem;
  --step-3: 2.05rem;
  --step-4: 2.6rem;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 68ch;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--step-0);
  line-height:1.65;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--serif);font-weight:900;line-height:1.1;letter-spacing:-.015em;margin:0}

/* Vollkorn sets old-style figures by default, which is right for running
   prose and wrong for a name or an address. Lining figures where numbers
   are data. */
.brand,.f-brand,h1,h2,h3,.hero-lead,.stamp,.wait,.contact{font-variant-numeric:lining-nums}
p{margin:0 0 1.1em}
a{color:inherit}

.wrap{max-width:73rem;margin-inline:auto;padding-inline:var(--gutter)}

:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.site-foot :focus-visible{outline-color:var(--seal-lt)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--seal);color:#fff;padding:.7rem 1.1rem;font-family:var(--sans);
}
.skip:focus{left:.5rem;top:.5rem}

/* ─── header ─────────────────────────────────────────────────── */
.site{
  position:sticky;top:0;z-index:30;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.site-in{
  display:flex;align-items:center;gap:1.25rem;
  min-height:4.25rem;
}
.brand{
  font-family:var(--serif);font-weight:900;font-size:1.35rem;letter-spacing:-.02em;
  text-decoration:none;line-height:1;white-space:nowrap;
}
.brand-num{color:var(--seal)}

.nav{
  display:flex;flex-wrap:wrap;gap:.15rem 1.35rem;
  margin-inline-start:auto;
  font-family:var(--sans);font-size:.875rem;font-weight:500;
}
.nav a{
  text-decoration:none;color:var(--ink);padding:.35rem 0;
  border-bottom:2px solid transparent;
}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--seal)}

.langsw{display:flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;flex:none}
.langsw button{
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.03em;
  background:none;border:0;color:var(--slate);padding:.42rem .72rem;cursor:pointer;
}
.langsw button[aria-pressed="true"]{background:var(--seal);color:#fff}
.langsw button:not([aria-pressed="true"]):hover{color:var(--ink)}

.nav-toggle{display:none}

/* ─── hero ───────────────────────────────────────────────────── */
.hero{padding:clamp(3.25rem,9vw,6.5rem) 0 clamp(3rem,7vw,5rem)}
.hero h1{
  font-size:clamp(2.45rem,7.2vw,5rem);
  line-height:.99;letter-spacing:-.028em;
  max-width:18ch;margin-bottom:1.1rem;
  text-wrap:balance;
}
.hero-lead{
  font-size:var(--step-1);color:var(--slate);
  max-width:44ch;margin-bottom:clamp(2.5rem,6vw,3.75rem);
}

/* the one loud element: the level ladder */
.ladder{margin:0 0 2.5rem;overflow-x:auto;padding-bottom:.4rem}
.rail{
  display:flex;align-items:center;flex-wrap:nowrap;
  list-style:none;margin:0;padding:0;min-width:max-content;
}
.rail li{
  position:relative;flex:none;
  font-family:var(--sans);font-weight:600;font-size:.9rem;letter-spacing:.06em;
  padding:.5rem .85rem;
  border:1px solid var(--rule);background:var(--paper-hi);color:var(--ink);
}
.rail{--gap:clamp(1.6rem,3.6vw,4.25rem)}
.rail li + li{margin-left:var(--gap)}
.rail li:not(:first-child)::before{
  content:"";position:absolute;left:calc(-1 * var(--gap));top:50%;
  width:var(--gap);height:1px;background:var(--rule);
  transform-origin:left center;
}
.rail .mark{
  background:var(--seal);border-color:var(--seal);color:#fff;
  font-size:.95rem;padding-inline:1.1rem;
}
.rail .mark::before{background:var(--seal);height:2px}
.ladder figcaption{
  font-family:var(--sans);font-size:.95rem;line-height:1.55;
  color:var(--ink);max-width:56ch;margin-top:1.25rem;
}

.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin:0}
.btn{
  display:inline-block;background:var(--seal);color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:.98rem;
  padding:.85rem 1.6rem;border-radius:999px;
  transition:background .18s ease;
}
.btn:hover,.btn:focus-visible{background:#8a1d28}
.tel{
  font-family:var(--sans);font-weight:600;font-size:1.05rem;
  text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.1rem;
}
.tel:hover{border-bottom-color:var(--seal)}

/* ─── sections & the gloss margin ────────────────────────────── */
.sec{padding:clamp(3rem,7vw,5.25rem) 0;border-top:1px solid var(--rule)}
.sec.alt{background:var(--paper-hi)}
.sec.dark{background:var(--ink-deep);color:var(--chalk);border-top:0}

.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem}
.col{min-width:0;max-width:var(--measure)}

.gloss{margin:0;line-height:1.25}
.gloss .de{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.4rem;color:var(--ink);
}
.gloss .tr{
  display:block;font-family:var(--sans);font-size:.8rem;color:var(--slate);
  margin-top:.2rem;
}
.dark .gloss .de{color:var(--chalk)}
.dark .gloss .tr{color:var(--chalk-dim)}

@media (min-width:62rem){
  .grid{grid-template-columns:11rem minmax(0,1fr);gap:0 3.5rem}
  .gloss{position:sticky;top:6rem;align-self:start;text-align:right}
  .col{border-left:1px solid var(--rule);padding-left:3.5rem;margin-left:-.05rem}
  .dark .col{border-left-color:rgba(234,231,223,.16)}
}

.sec h2{font-size:clamp(1.85rem,3.6vw,var(--step-4));margin-bottom:1.1rem;text-wrap:balance}
.sec h3{font-size:var(--step-2);margin:2rem 0 .7rem}
.lead{font-size:var(--step-1);color:var(--slate);margin-bottom:1.75rem}
.dark .lead{color:var(--chalk-dim)}
.sub{
  font-family:var(--sans);font-weight:600;font-size:.95rem;
  margin:1.75rem 0 .75rem;
}
.aside{color:var(--slate);font-style:italic}
.link{
  font-family:var(--sans);font-size:.95rem;font-weight:500;
  color:var(--seal);text-decoration:none;border-bottom:1px solid currentColor;
}
.dark .link{color:var(--seal-lt)}
.link:hover{color:var(--ink)}
.dark .link:hover{color:var(--chalk)}

/* ─── list with carmine dashes ───────────────────────────────── */
.marks{list-style:none;margin:0 0 1.4em;padding:0}
.marks li{position:relative;padding-left:1.6rem;margin-bottom:.6em}
.marks li::before{
  content:"";position:absolute;left:0;top:.78em;
  width:.8rem;height:2px;background:var(--seal);
}
.marks.wide li{font-size:var(--step-1);margin-bottom:1em;line-height:1.5}
.marks.wide li::before{top:.72em}

/* ─── the three-element spine ────────────────────────────────── */
.spine{list-style:none;margin:2rem 0 0;padding:0}
.spine > li{
  position:relative;padding-left:2rem;padding-bottom:2.5rem;
  border-left:1px solid var(--rule);
}
.spine > li:last-child{border-left-color:transparent;padding-bottom:0}
.spine > li::before{
  content:"";position:absolute;left:-.3125rem;top:.45rem;
  width:.625rem;height:.625rem;border-radius:50%;
  background:var(--seal);
}
.spine .step{
  font-family:var(--sans);font-weight:600;font-size:.82rem;
  color:var(--seal);margin:0 0 .3rem;
}
.spine h3{margin-top:0;font-size:var(--step-1)}

/* ─── school shortlist ───────────────────────────────────────── */
.schools{list-style:none;margin:0 0 2rem;padding:0}
.schools li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.75rem 0;border-top:1px solid var(--rule);
}
.schools li:last-child{border-bottom:1px solid var(--rule)}
.s-name{font-family:var(--sans);font-weight:600;font-size:1.05rem}
.s-co{font-family:var(--sans);font-size:.85rem;color:var(--slate)}

.stamp{
  display:inline-block;transform:rotate(-1.1deg);
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  color:var(--seal);border:1.5px solid var(--seal);border-radius:3px;
  padding:.45rem .8rem;margin-top:1rem;
}

/* ─── study-abroad prices ────────────────────────────────────── */
.prices{
  background:var(--paper);border:1px solid var(--rule);
  padding:1.5rem 1.75rem;margin:2rem 0;border-radius:3px;
}
.sec.alt .prices{background:var(--paper-hi)}
.prices .sub{margin-top:0}
.prices dl{margin:0;display:grid;gap:1.25rem}
.prices dt{
  font-family:var(--sans);font-weight:700;font-size:1.5rem;
  color:var(--ink);line-height:1.1;
}
.prices dd{margin:.3rem 0 0;color:var(--slate);font-size:.98rem}
@media (min-width:38rem){.prices dl{grid-template-columns:1fr 1fr;gap:2rem}}

.closing{font-size:var(--step-1);line-height:1.5;margin-top:2rem}

/* ─── translation price sheet ────────────────────────────────── */
.sheet{margin-top:1.5rem}
.sheet article{padding:1.6rem 0;border-top:1px solid var(--rule)}
.sheet article:last-of-type{border-bottom:1px solid var(--rule)}
.sheet h3{margin:0 0 .6rem;font-size:var(--step-1)}
.sheet p:last-child{margin-bottom:0}
.price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;
  margin:.9rem 0 0;
}
.price .v{font-family:var(--sans);font-weight:700;font-size:1.2rem;color:var(--seal)}
.price .u{font-family:var(--sans);font-size:.85rem;color:var(--slate)}
.note{font-family:var(--sans);font-size:.85rem;color:var(--slate);margin-top:1.1rem}

/* ─── licences ───────────────────────────────────────────────── */
.lics{
  display:grid;gap:1.5rem 1.25rem;margin-top:2rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:48rem){.lics{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the licence shelf reaches past the reading measure; the prose does not */
#lic .col{max-width:44rem}
#lic .col > h2,#lic .col > .lead{max-width:34rem}
.lics figure{margin:0}
.lics .frame{
  display:grid;place-items:center;position:relative;
  aspect-ratio:3/4;background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden;
}
.sec.alt .lics .frame{background:var(--paper-hi)}
.lics img{width:100%;height:100%;object-fit:cover;display:block}
.lics .frame.empty img{display:none}
.lics .ph{display:none}
.lics .frame.empty{
  background:
    repeating-linear-gradient(-45deg,transparent 0 10px,rgba(16,44,58,.06) 10px 11px),
    var(--paper);
  border:1px dashed rgba(16,44,58,.34);
}
.lics .frame.empty .ph{
  display:block;font-family:var(--sans);font-size:.78rem;color:var(--slate);
  background:var(--paper-hi);border:1px solid var(--rule);
  padding:.35rem .7rem;border-radius:2px;text-align:center;
}
.lics figcaption{
  font-family:var(--sans);font-size:.88rem;line-height:1.45;
  margin-top:.75rem;color:var(--ink);
}

/* ─── contacts, the one dark field ───────────────────────────── */
.contact{margin:2rem 0 0;display:grid;gap:1.75rem}
@media (min-width:38rem){.contact{grid-template-columns:1fr 1fr;gap:2.25rem}}
.contact dt{
  font-family:var(--sans);font-size:.82rem;font-weight:500;
  color:var(--chalk-dim);margin-bottom:.4rem;
}
.contact dd{margin:0;display:flex;flex-direction:column;gap:.35rem}
.contact dd a{
  font-family:var(--sans);font-weight:600;font-size:1.15rem;
  color:var(--chalk);text-decoration:none;
  border-bottom:1px solid rgba(234,231,223,.25);
  align-self:flex-start;padding-bottom:.08rem;
  overflow-wrap:anywhere;
}
.contact dd a:hover{border-bottom-color:var(--seal-lt);color:#fff}
.contact dd span{font-family:var(--sans);font-size:1.02rem;color:var(--chalk)}
.contact dd a.mail{font-size:1rem;font-weight:500}
.contact dd .link{font-size:.9rem;font-weight:500;border-bottom-width:1px}
.wait{
  font-family:var(--serif);font-style:italic;font-size:var(--step-2);
  margin:2.5rem 0 0;color:var(--chalk);
}

/* ─── footer ─────────────────────────────────────────────────── */
.site-foot{
  background:var(--ink);color:var(--chalk-dim);
  font-family:var(--sans);font-size:.88rem;
  padding:2.5rem 0;
}
.foot-in{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;align-items:baseline}
.foot-in p{margin:0}
.f-brand{
  font-family:var(--serif);font-weight:900;font-size:1.15rem;color:var(--chalk);
  letter-spacing:-.02em;
}
.f-brand span{color:var(--seal-lt)}
.site-foot .link{color:var(--chalk-dim)}
.site-foot .link:hover{color:var(--chalk)}

/* ─── one orchestrated moment: the ladder draws itself ───────── */
@media (prefers-reduced-motion:no-preference){
  .rail li{opacity:0;animation:chip .45s cubic-bezier(.2,.75,.3,1) forwards;
           animation-delay:calc(.3s + var(--i) * .085s)}
  .rail li:not(:first-child)::before{transform:scale(0);
           animation:line .3s ease-out forwards;
           animation-delay:calc(.26s + var(--i) * .085s)}
  @keyframes chip{from{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}
  @keyframes line{to{transform:scale(1)}}
}

/* On a phone the whole rail has to fit: its payoff is the TestDaF mark at
   the end, and a rail that scrolls hides exactly that. Chips shrink instead. */
@media (max-width:40rem){
  .rail{--gap:.5rem}
  .rail li{font-size:.7rem;letter-spacing:.02em;padding:.3rem .4rem}
  .rail .mark{font-size:.72rem;padding-inline:.5rem}
  .ladder figcaption{font-size:.9rem}
}

/* ─── narrow screens ─────────────────────────────────────────── */
@media (max-width:61.99rem){
  .site-in{flex-wrap:wrap;gap:.75rem 1rem;padding-block:.75rem}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:.5rem;order:2;margin-inline-start:auto;
    font-family:var(--sans);font-size:.85rem;font-weight:500;
    background:none;border:1px solid var(--rule);border-radius:999px;
    padding:.42rem .85rem;color:var(--ink);cursor:pointer;
  }
  .nav-toggle-bars{width:.9rem;height:.6rem;border-top:2px solid;border-bottom:2px solid}
  .langsw{order:3}
  .nav{
    order:4;flex-basis:100%;flex-direction:column;gap:0;
    margin:0;display:none;border-top:1px solid var(--rule);padding-top:.5rem;
  }
  .nav.open{display:flex}
  .nav a{padding:.6rem 0;font-size:1rem;border-bottom:1px solid var(--rule-soft)}
  .nav a:last-child{border-bottom:0}
  .gloss{
    display:flex;align-items:baseline;gap:.6rem;
    padding-bottom:.9rem;border-bottom:1px solid var(--rule);
  }
  .dark .gloss{border-bottom-color:rgba(234,231,223,.16)}
  .gloss .de{font-size:1.15rem}
  .gloss .tr{margin-top:0}
}