/* =========================================================
   TK Academy — "Escuela"
   A school has to look patient. Warm paper, a Garamond for the
   headings, wide margins and a curriculum laid out as a
   numbered sequence. Nothing urgent, nothing shouted.
   ========================================================= */

:root {
  --main: #16293A;
  --bg: #FBFAF6;
  --bg-dark: #F2EFE6;
  --bg-soft: #FFFFFF;

  --second: #2E6E9E;        /* azure — links, numbers, rules */
  --third: #9A8757;         /* old gold — kickers */
  --gold: #2E6E9E;

  --key-green: #4E8C6E;
  --key-navy: #2E6E9E;
  --key-red: #B5695F;

  --line: rgba(22, 41, 58, 0.16);
  --line-soft: rgba(22, 41, 58, 0.08);
  --dim: rgba(22, 41, 58, 0.72);
  --dimmer: rgba(22, 41, 58, 0.48);

  --accent-line: rgba(46, 110, 158, 0.38);
  --accent-soft: rgba(46, 110, 158, 0.08);
  --hdr-bg: rgba(251, 250, 246, 0.93);
  --hover-bg: rgba(22, 41, 58, 0.05);
  --shadow: 0 18px 46px rgba(22, 41, 58, 0.14);
  --ph: rgba(22, 41, 58, 0.34);
  --scrim: linear-gradient(180deg, rgba(12,24,34,.70) 0%, rgba(12,24,34,.38) 45%, rgba(12,24,34,.86) 100%);
  --glow-top: linear-gradient(180deg, rgba(46, 110, 158, 0.07) 0%, transparent 72%);
  --glow-tile: none;
  --glow-cta: linear-gradient(180deg, rgba(46, 110, 158, 0.09), transparent 72%);

  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Hiragino Sans", "Hiragino Sans GB", "Yu Gothic", "Microsoft YaHei", "PingFang SC", "PingFang TC",
    "Apple SD Gothic Neo", "Malgun Gothic", "Nirmala UI", "Noto Sans", sans-serif;
  --font-header: "Cormorant Garamond", "Noto Serif Devanagari", "Times New Roman",
    "Hiragino Mincho ProN", "Yu Mincho", "Songti SC", "Apple SD Gothic Neo",
    "Nanum Myeongjo", serif;

  --radius: 2px;
  --h-weight: 400;
  --h-track: 0.2px;
}

/* A serif at a generous size, with room to breathe around it */
h1, h2, h3, h4 { font-weight: var(--h-weight); letter-spacing: var(--h-track); line-height: 1.14; }
h1 em, .lede em { font-style: italic; color: var(--second); }
.hero--split h1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); }
.main-header { font-size: clamp(2.2rem, 4.4vw, 3.7rem); }
.section { padding: clamp(92px, 11vw, 160px) 0; }
.lede { font-size: 1.04rem; line-height: 1.95; }

.kicker { color: var(--third); letter-spacing: 0.34em; }

/* The curriculum is the heart of the site, so the week rows get
   the most careful treatment on the page. */
.rows { border-top: 1px solid var(--line); margin-top: 54px; }
.rows .row { border-bottom: 1px solid var(--line-soft); }
.row__n {
  color: var(--second); letter-spacing: 0.2em; font-weight: 400;
  font-family: var(--font-body);
}
.row__t { font-size: 1.6rem; }
.row__d { font-weight: 300; }

.cats { background: var(--line-soft); }
.cat { background: var(--bg-soft); padding: 40px 34px 42px; }
.cat h4 { font-size: 1.5rem; }
.cat__es { color: var(--third); }

.tiles { background: var(--line-soft); }
.tile { background: var(--bg-soft); padding: 44px 34px 46px; }
.tile::before { display: none; }
.tile:hover { background: #FFFDF8; }
.tile h3 { font-size: 1.75rem; }

.stats { background: var(--line-soft); }
.stat { background: var(--bg-soft); }
.stat b { font-weight: 300; color: var(--main); }

.btn { border-radius: var(--radius); }
.btn--solid { background: var(--second); border-color: var(--second); color: #FFFFFF; }

.note { background: var(--bg-soft); border-left-width: 3px; }

.ptable th {
  background: transparent; color: var(--third);
  border-bottom: 1px solid var(--line);
  font-size: 9.5px; letter-spacing: .24em;
}
.ptable td.k { font-family: var(--font-header); font-size: 1.12rem; }
.ptable td.num { color: var(--second); }

.imgcard { border: 1px solid var(--line); filter: none; }

.pull { background: var(--bg-dark); border-block: 1px solid var(--line-soft); }
.pull p { font-style: italic; }

.quote { background: var(--bg-dark); }
.quote blockquote { font-style: italic; font-weight: 300; }

.ftr { background: var(--bg-dark); border-top: 1px solid var(--line-soft); }

.stat span, .tile__sub { color: var(--dim); }