/* ==========================================================================
   IEC — International English Club
   Shared stylesheet. Palette sampled from the original flyer; do not
   introduce new colours or a fourth typeface without a reason.
   ========================================================================== */

:root{
  --navy:#001025;
  --navy-soft:#0A2242;
  --navy-line:#1B3558;
  --orange:#E4820F;
  --orange-deep:#D87507;
  --cream:#F2E5DD;
  --cream-2:#F0E1D7;
  --paper:#FAF3EE;
  --ink:#001025;
  --ink-muted:#4A5B70;
  --cream-muted:#B9C6D6;
  --rule:#DCC9BC;
  --rule-soft:#DFCCBE;
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Barlow",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:"Archivo","Barlow",sans-serif;
  font-variation-settings:"wdth" 88;
  font-weight:800;
  line-height:.95;
  letter-spacing:-.015em;
  margin:0;
  text-transform:uppercase;
  /* Never hyphenate or split a word: "INTERNATIONAL" breaking across two
     lines looks like a bug, because it is one. Headline sizes are chosen so
     the longest word always fits instead. */
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.script{font-family:"Kaushan Script",cursive;text-transform:none;font-weight:400;letter-spacing:0}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--navy);
  border-bottom:1px solid var(--navy-line);
}
.nav .wrap{display:flex;align-items:center;gap:24px;height:62px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--paper);line-height:1}
.mark-abbr{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 86;font-weight:900;font-size:23px;letter-spacing:.01em}
.mark-abbr i{font-style:normal;color:var(--orange)}
.mark-full{
  border-left:1px solid var(--navy-line);padding-left:11px;
  font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cream-muted);max-width:9em;
}
.mark-full i{font-style:normal;color:var(--orange)}
.nav-links{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--cream-muted);text-decoration:none;font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--paper)}
.nav-cta{
  background:var(--orange);color:var(--navy)!important;
  padding:9px 18px;border-radius:3px;font-weight:600;
}
.nav-cta:hover{background:#F0912A}
@media(max-width:900px){.nav-links a:not(.nav-cta){display:none}.mark-full{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:16px;
  padding:15px 30px;border-radius:3px;border:2px solid transparent;transition:.15s;
}
.btn-primary{background:var(--orange);color:var(--navy)}
.btn-primary:hover{background:#F5942C}
.btn-ghost{background:transparent;border-color:var(--navy-line);color:var(--paper)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}

/* ---------- sections ---------- */
.section{padding:78px 0}
.section-alt{background:var(--cream-2)}
.section-navy{background:var(--navy);color:var(--paper)}
.section h2{font-size:clamp(30px,4vw,46px);margin-bottom:10px}
.lede{font-size:19px;color:var(--ink-muted);max-width:68ch;margin-bottom:40px}
.lede strong{color:var(--ink);font-weight:600}
.section-navy .lede{color:var(--cream-muted)}
.section-navy .lede strong{color:var(--orange);font-weight:600}
.section-navy h2{color:var(--paper)}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:var(--cream-muted);padding:46px 0 40px;border-top:1px solid var(--navy-line)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.foot a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--navy-line)}
.foot .mark{border-bottom:0}
.foot a:hover{border-color:var(--orange);color:var(--orange)}
.foot-links{display:flex;flex-wrap:wrap;gap:26px;font-size:15.5px;align-items:center}
.foot-links button{
  font:inherit;font-size:15.5px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--paper);border-bottom:1px solid var(--navy-line);
}
.foot-links button:hover{border-color:var(--orange);color:var(--orange)}
.foot small{display:block;width:100%;font-size:13.5px;color:#6C7F96;margin-top:8px}

/* ---------- cookie banner ---------- */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--navy);border-top:2px solid var(--orange);
  padding:18px 0;
  box-shadow:0 -8px 28px rgba(0,16,37,.28);
}
.cookie-bar[hidden]{display:none}
.cookie-bar .wrap{
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.cookie-copy{color:var(--cream-muted);font-size:15.5px;max-width:64ch;margin:0}
.cookie-copy a{color:var(--paper)}
.cookie-actions{display:flex;gap:10px;flex-wrap:nowrap}
.cookie-actions .btn{padding:11px 20px;font-size:15px;white-space:nowrap}
.cookie-bar .btn-ghost{border-color:var(--cream-muted);color:var(--paper)}
@media(max-width:760px){
  .cookie-bar{padding:14px 0}
  .cookie-bar .wrap{flex-direction:column;align-items:stretch;gap:12px}
  .cookie-copy{font-size:14px;line-height:1.5}
  .cookie-actions .btn{flex:1;text-align:center;padding:12px 10px;font-size:14.5px}
}

/* ---------- misc ---------- */
.todo{outline:2px dashed #E4820F;outline-offset:3px;border-radius:2px}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}