:root{
  --ink:#24384b;
  --ink-soft:#66798a;

  --navy:#35546d;
  --navy-deep:#294257;
  --blue-dust:#6f8fa7;
  --blue-mist:#dfe8ef;
  --blue-wash:#eef4f7;

  --cream:#fbf8f1;
  --paper:#fffdf9;
  --paper-warm:#f7f2e8;

  --sage:#93a89a;
  --sage-soft:#e7efe9;

  --peach:#dbc3b6;
  --peach-soft:#f3e7df;

  --gold:#bda57a;

  --line:rgba(45,67,87,0.13);
  --line-strong:rgba(45,67,87,0.22);

  --shadow-soft:0 10px 26px rgba(60,85,110,0.06);
  --shadow-card:0 18px 42px rgba(54,78,101,0.08);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 12% 10%,rgba(168,190,207,.18),transparent 24%),
    radial-gradient(circle at 88% 18%,rgba(219,195,182,.12),transparent 22%),
    radial-gradient(circle at 22% 85%,rgba(147,168,154,.10),transparent 26%),
    linear-gradient(180deg,#fcfaf5 0%,#f9f5ee 100%);
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}

/* ============================================================
   KS2ENGLISH.COM BRAND
   Bigger, more visible, but still literary rather than corporate.
============================================================ */

.brand{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  white-space:nowrap;
  padding:5px 0 7px;
  color:var(--navy-deep);
}

.brand span{
  font:800 30px/1 Georgia,serif;
  letter-spacing:-.055em;
  color:var(--navy-deep);
}

.brand em{
  font:italic 500 29px/1 Georgia,serif;
  letter-spacing:-.045em;
  color:var(--navy);
}

.brand::after{
  content:".com";
  margin-left:1px;
  transform:translateY(-7px);
  color:var(--blue-dust);
  font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:.02em;
}

.brand::before{
  content:"";
  position:absolute;
  left:0;
  bottom:1px;
  width:74%;
  height:5px;
  border-radius:999px;
  background:rgba(111,143,167,.18);
  transform:rotate(-1deg);
  z-index:-1;
}

/* Give the title room to breathe in headers */
.site-header,
header{
  min-height:78px;
  padding:0 max(24px,calc((100% - 1180px)/2));
  display:flex;
  align-items:center;
  gap:30px;
  border-bottom:1px solid var(--line);
  background:rgba(251,248,241,.93);
  backdrop-filter:blur(10px);
}

nav{
  margin-left:auto;
  display:flex;
  gap:20px;
}

nav a{
  font-size:10px;
  color:var(--ink-soft);
}

nav a:hover{color:var(--navy-deep)}

.eyebrow{
  color:var(--blue-dust);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.page-shell,
.section-inner{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}

.page-title{
  margin:8px 0 16px;
  font:500 clamp(42px,5vw,66px)/1.02 Georgia,serif;
  letter-spacing:-.05em;
  color:var(--navy-deep);
}

.page-lead{
  max-width:720px;
  color:var(--ink-soft);
  font:15px/1.8 Georgia,serif;
}

.primary-button,
.primary-cta,
.primary-link{
  min-height:44px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:10px;
  background:var(--navy);
  color:#fff;
  font-size:10px;
  font-weight:750;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
}

.secondary-button,
.secondary-cta{
  min-height:44px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,253,249,.88);
  color:var(--navy-deep);
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

.soft-card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:
    radial-gradient(circle at 12% 15%,rgba(214,228,236,.35),transparent 22%),
    radial-gradient(circle at 88% 82%,rgba(238,227,214,.28),transparent 20%),
    var(--paper);
  box-shadow:var(--shadow-card);
}

.paper-card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(255,253,249,.96);
  box-shadow:var(--shadow-soft);
}

@media(max-width:700px){
  .brand span{font-size:25px}
  .brand em{font-size:24px}
  .brand::after{font-size:9px;transform:translateY(-6px)}
  header,.site-header{min-height:70px}
}