/* ==========================================================================
   English Room -- design system
   Direction: "The Margin". The page is built like a teacher's working page:
   a margin rail carrying her handwritten notes, and the content beside it.
   Colour is pen-on-paper -- cool Andalusian whitewash, ink blue, a teal tick,
   one sun yellow reserved for rewards. Nothing here is decoration for its
   own sake: the marks are how she actually works.
   ========================================================================== */

:root{
  /* --- surfaces: whitewashed wall in hard sun, shadows go blue not beige --- */
  --paper:        #F7F8FA;
  --paper-2:      #EDF0F6;
  --paper-3:      #E3E8F1;
  --white:        #FFFFFF;

  /* --- ink --- */
  --ink:          #16202E;
  --ink-2:        rgba(22,32,46,.70);
  --ink-3:        rgba(22,32,46,.48);
  --ink-4:        rgba(22,32,46,.28);

  /* --- the marking pen: the one accent --- */
  --mark:         #2B4EE6;
  --mark-deep:    #1B34AC;
  --mark-soft:    rgba(43,78,230,.10);
  --mark-line:    rgba(43,78,230,.26);

  /* --- a tick is green, a reward is warm, "on air" is red. Each earns it. --- */
  --tick:         #0E9E93;
  --tick-soft:    rgba(14,158,147,.12);
  --sun:          #F5A524;
  --sun-soft:     rgba(245,165,36,.14);
  --live:         #E5484D;

  --line:         rgba(22,32,46,.12);
  --line-strong:  rgba(22,32,46,.22);

  --display: "Instrument Serif", Georgia, serif;
  --sans:    "Inter Tight", system-ui, -apple-system, sans-serif;
  --hand:    "Shantell Sans", "Comic Sans MS", cursive;

  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 1200px;
  --rail: 132px;             /* the margin rail width on desktop */
  --radius: 14px;

  --shadow-sm: 0 1px 2px rgba(22,32,46,.05), 0 4px 14px -8px rgba(22,32,46,.14);
  --shadow-md: 0 2px 6px rgba(22,32,46,.06), 0 18px 44px -22px rgba(22,32,46,.28);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

::selection{background:var(--mark);color:#fff}

:focus-visible{
  outline:2px solid var(--mark);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------------------------------------------------------- type ---- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  margin:0;
  line-height:1.04;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.7rem,6.4vw,5.1rem)}
h2{font-size:clamp(2.05rem,4.4vw,3.5rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15}
p{margin:0 0 1.15rem}

.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--mark);
  display:inline-flex;
  align-items:center;
  gap:.75em;
  margin:0 0 1.15rem;
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:var(--mark);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .1s;
}
.reveal.in .eyebrow::before,.eyebrow.in::before{transform:scaleX(1)}

.lead{
  font-size:clamp(1.05rem,1.55vw,1.24rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:56ch;
}
.muted{color:var(--ink-3)}
.tight{max-width:42ch}

/* --- the signature: a correction. Struck-out word, her word written above --- */
/* The word she crossed out is drawn with generated content on purpose: it is
   a visual mark, not part of the sentence. That keeps the accessible name and
   the indexed text of the heading as the CORRECTED sentence -- a screen reader
   and a crawler both read "English that finally feels like yours". */
.fix{position:relative;white-space:nowrap;display:inline-block;line-height:1}
.fix::before{
  content:attr(data-old);
  color:var(--ink-4);
}
.fix::after{
  content:"";
  position:absolute;left:-.03em;right:-.03em;top:.53em;
  height:.055em;min-height:2px;background:var(--mark);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease) .55s;
}
.fix .new{
  position:absolute;
  left:50%;bottom:100%;
  transform:translateX(-50%) rotate(-1.7deg);
  font-family:var(--hand);
  font-weight:500;
  font-size:.4em;
  line-height:1.05;
  color:var(--mark);
  white-space:nowrap;
  opacity:0;
  transition:opacity .5s var(--ease) 1s, transform .5s var(--ease) 1s;
  pointer-events:none;
}
.fix.struck::after{transform:scaleX(1)}
.fix.struck .new{opacity:1;transform:translateX(-50%) translateY(-.06em) rotate(-1.7deg)}
@media (prefers-reduced-motion: reduce){
  .fix::after{transform:scaleX(1);transition:none}
  .fix .new{opacity:1;transform:translateX(-50%) translateY(-.06em) rotate(-1.7deg);transition:none}
}

/* --- her marginalia: real notes, never filler --- */
.note{
  font-family:var(--hand);
  font-size:.95rem;
  line-height:1.35;
  color:var(--mark);
  font-weight:400;
}
.note--rail{
  position:relative;
  padding-left:16px;
  transform:rotate(-.7deg);
}
.note--rail::before{
  content:"";position:absolute;left:0;top:.35em;bottom:.35em;
  width:2px;background:var(--mark-line);border-radius:2px;
}

/* ---------------------------------------------------------------- layout -- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4.5vw,48px)}
section{position:relative;padding:clamp(72px,10vh,132px) 0}

/* the margin rail: content sits to the right of a teacher's margin */
.ruled{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(20px,3.5vw,52px);
  align-items:start;
}
.ruled > .rail{position:sticky;top:120px}
@media (max-width:900px){
  .ruled{grid-template-columns:1fr}
  .ruled > .rail{position:static;margin-bottom:20px}
}

.band{background:var(--paper-2)}
.band-white{background:var(--white)}

/* ---------------------------------------------------------------- reveal -- */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------------------------------------------------------------- buttons - */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-weight:500;font-size:.95rem;
  letter-spacing:-.005em;
  padding:.92em 1.6em;
  border-radius:999px;
  border:1px solid transparent;
  background:var(--mark);color:#fff;
  cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  box-shadow:0 10px 24px -14px rgba(43,78,230,.85);
}
.btn:hover{background:var(--mark-deep);transform:translateY(-1px);box-shadow:0 16px 30px -16px rgba(43,78,230,.9)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

.btn-ghost{
  background:transparent;color:var(--ink);
  border-color:var(--line-strong);
  box-shadow:none;
}
.btn-ghost:hover{background:var(--white);border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-sm)}

.btn-sm{padding:.6em 1.05em;font-size:.85rem}
.btn-danger{background:var(--live);box-shadow:none}
.btn-danger:hover{background:#c8383d}
.btn-quiet{background:transparent;color:var(--ink-3);box-shadow:none;padding:.5em .8em}
.btn-quiet:hover{background:var(--paper-3);color:var(--ink);transform:none}

/* ---------------------------------------------------------------- chips ---- */
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:.76rem;font-weight:500;letter-spacing:.02em;
  padding:.32em .75em;border-radius:999px;
  background:var(--mark-soft);color:var(--mark-deep);
  white-space:nowrap;
}
.chip--tick{background:var(--tick-soft);color:var(--tick)}
.chip--sun{background:var(--sun-soft);color:#9a6408}
.chip--quiet{background:var(--paper-3);color:var(--ink-3)}
.chip--live{background:var(--live);color:#fff}

.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dot--pulse{animation:pulse 1.7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@media (prefers-reduced-motion: reduce){.dot--pulse{animation:none}}

/* ---------------------------------------------------------------- cards ---- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(18px,2.4vw,28px);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card--flat:hover{transform:none;box-shadow:var(--shadow-sm)}

/* ---------------------------------------------------------------- forms ---- */
label.field{display:block;margin-bottom:14px}
.field > span{
  display:block;font-size:.76rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=datetime-local],input[type=date],select,textarea{
  width:100%;
  font-family:var(--sans);font-size:.98rem;color:var(--ink);
  background:var(--white);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:.72em .9em;
  transition:border-color .25s,box-shadow .25s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--mark);box-shadow:0 0 0 3px var(--mark-soft);
}
textarea{resize:vertical;min-height:110px;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--ink-4)}

/* ---------------------------------------------------------------- nav ------ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:16px clamp(20px,4.5vw,48px);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(247,248,250,.86);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom-color:var(--line);
  padding-top:11px;padding-bottom:11px;
}
.brand{display:flex;align-items:baseline;gap:.5em;font-family:var(--display);font-size:1.32rem;color:var(--ink)}
.brand small{
  font-family:var(--sans);font-size:.64rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav-links a{
  font-size:.9rem;color:var(--ink-2);position:relative;padding:2px 0;
  transition:color .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--mark);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
@media (max-width:860px){ .nav-links .hide-sm{display:none} }

/* language switch: three letters, no flags */
.langs{display:inline-flex;gap:2px;background:var(--paper-3);padding:3px;border-radius:999px}
.langs button{
  border:0;background:transparent;cursor:pointer;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:.34em .62em;border-radius:999px;
  transition:background .25s,color .25s;
}
.langs button[aria-pressed="true"]{background:var(--white);color:var(--mark);box-shadow:var(--shadow-sm)}

/* ---------------------------------------------------------------- footer --- */
.footer{
  background:var(--ink);color:rgba(255,255,255,.66);
  padding:clamp(48px,7vh,80px) 0 34px;
}
.footer h3{color:#fff;font-size:1.9rem}
.footer a{color:rgba(255,255,255,.78);transition:color .25s}
.footer a:hover{color:#fff}
.footer .rule{height:1px;background:rgba(255,255,255,.14);margin:34px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:24px}}

/* ---------------------------------------------------------------- utils ---- */
.stack-sm > * + *{margin-top:8px}
.stack > * + *{margin-top:16px}
.stack-lg > * + *{margin-top:28px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row-tight{display:flex;align-items:center;gap:7px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.center{text-align:center}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.grow{flex:1 1 auto;min-width:0}
.mono-num{font-variant-numeric:tabular-nums}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--ink);color:#fff;padding:.8em 1.3em;border-radius:999px;
  font-size:.9rem;z-index:200;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  box-shadow:var(--shadow-md);max-width:90vw;
}
.toast.in{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--live)}