/* School Choice Report — UK civic broadsheet
   A British broadsheet nameplate and a council notice board.
   Playfair Display (Didone display / nameplate + headlines) + Source Sans 3 (body).
   Ruled, ordered, editorial. Deep teal + warm coral on cream newsprint. */

:root {
  --teal: #17505c;
  --teal-2: #1f6675;
  --coral: #e8674c;
  --coral-deep: #cf4e34;
  --cream: #f7f3ea;
  --cream-2: #efe7d6;
  --card: #fffdf8;
  --ink: #1c2624;
  --ink-soft: #45524f;
  --ink-faint: #67716e;
  --line: #ccbfa6;          /* hairline rule — a touch darker than the old line for true newsprint rules */
  --line-soft: #e2d9c7;
  --good: #1f7a44;
  --warn: #b57e1f;
  --bad: #b83426;
  --rule: 1px solid var(--line);
  --rule-heavy: 3px double var(--line);
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0;
  font-family:'Source Sans 3',system-ui,-apple-system,sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 26px; }
a { color:var(--teal); text-decoration:none; } a:hover { color:var(--coral-deep); }
h1,h2,h3 { font-family:'Playfair Display',Georgia,'Times New Roman',serif; font-weight:700; color:var(--ink); line-height:1.08; letter-spacing:-0.005em; }
.mono { font-variant-numeric:tabular-nums; }

/* small-caps editorial kicker */
.kicker {
  font-family:'Source Sans 3',sans-serif;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--coral-deep);
  margin:0 0 10px;
}

/* ============ NAMEPLATE (newspaper masthead) ============ */
.nameplate { background:var(--cream); }
.nameplate-inner { border-top:3px solid var(--ink); }
.nameplate-top {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 0 12px;
}
.nameplate-edition {
  font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; white-space:nowrap;
}
.nameplate-edition .sep { color:var(--coral); padding:0 4px; }
.nameplate-price {
  font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; white-space:nowrap;
}
.nameplate-title {
  text-align:center;
  border-top:var(--rule); border-bottom:3px double var(--line);
  padding:14px 0 16px;
}
.nameplate-title a { color:var(--ink); display:inline-block; }
.nameplate-title a:hover { color:var(--ink); }
.nameplate-name {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;
  font-size:clamp(2.1rem,7vw,4.3rem);
  line-height:0.98;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.nameplate-name .the { color:var(--coral-deep); }
.nameplate-standwrap { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:9px; }
.nameplate-mark { width:26px; height:26px; object-fit:contain; opacity:0.9; }
.nameplate-tag {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:0.98rem; color:var(--ink-soft);
}
/* slim ruled nav bar under the nameplate */
.masthead-nav { border-bottom:3px solid var(--ink); position:sticky; top:0; z-index:50; background:rgba(247,243,234,0.96); backdrop-filter:blur(6px); }
.masthead-nav .wrap { display:flex; align-items:center; justify-content:space-between; }
.nav-desktop { display:flex; gap:0; align-items:stretch; }
.nav-desktop a {
  font-weight:600; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); padding:11px 16px; border-left:var(--rule); display:flex; align-items:center;
}
.nav-desktop a:first-child { border-left:0; }
.nav-desktop a:hover { color:var(--coral-deep); background:var(--cream-2); }
.nav-desktop a.nav-cta { color:var(--card); background:var(--coral); border-left:var(--rule); }
.nav-desktop a.nav-cta:hover { color:var(--card); background:var(--coral-deep); }
.masthead-nav-date { font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.nav-toggle { display:none; } .nav-mobile { display:none; }
@media (max-width:820px){
  .nav-desktop,.masthead-nav-date{display:none;}
  .masthead-nav .wrap{justify-content:flex-end;}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;margin:5px -8px 5px 0;background:none;border:0;cursor:pointer;padding:11px;}
  .nav-toggle span{display:block;height:2.5px;width:100%;background:var(--ink);border-radius:0;transition:transform .25s,opacity .2s;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  .nav-mobile{display:block;border-top:var(--rule);background:var(--cream);}
  .nav-mobile[hidden]{display:none;}
  .nav-mobile a{display:block;padding:14px 26px;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;color:var(--ink);border-top:var(--rule);}
  .nav-mobile a.nav-mobile-cta{color:var(--card);background:var(--coral);}
  .nameplate-top{flex-direction:column;align-items:center;gap:3px;text-align:center;}
}

/* ============ HERO — broadsheet lead ============ */
.lead { padding:40px 0 4px; }
.lead-grid { display:grid; grid-template-columns:1.35fr 0.9fr; gap:0; align-items:stretch; }
.lead-main { padding-right:40px; border-right:var(--rule); }
.lead-eyebrow {
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--coral-deep); font-weight:700; margin:0 0 14px;
  padding-bottom:11px; border-bottom:var(--rule);
}
.lead h1 {
  font-size:clamp(2.4rem,5.6vw,4rem);
  margin:0 0 20px; letter-spacing:-0.015em; color:var(--ink);
}
.lead h1 em { font-style:italic; color:var(--coral-deep); }
.standfirst {
  font-size:1.24rem; line-height:1.5; color:var(--ink-soft);
  font-family:'Source Sans 3',sans-serif; margin:0;
  padding-top:18px; border-top:var(--rule);
}
.lead-byline {
  font-size:0.82rem; color:var(--ink-faint); margin:16px 0 0;
  letter-spacing:0.02em;
}
.lead-byline strong { color:var(--ink-soft); font-weight:700; }

/* the look-up coupon — a cut-out form */
.lead-aside { padding-left:34px; }
.coupon {
  border:2px dashed var(--line);
  background:var(--card);
  padding:22px 22px 24px;
  position:relative;
}
.coupon::before {
  content:"Look-up coupon"; position:absolute; top:-11px; left:18px;
  background:var(--cream); padding:0 9px;
  font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:700; color:var(--coral-deep);
}
.coupon h2 {
  font-size:1.4rem; margin:2px 0 3px; color:var(--ink);
}
.coupon .sub {
  font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; font-weight:600;
  color:var(--ink-faint); margin:0 0 4px; padding-bottom:14px; border-bottom:var(--rule);
}
.orderform label { display:block; font-weight:700; font-size:0.74rem; letter-spacing:0.09em; text-transform:uppercase; margin:15px 0 6px; color:var(--ink); }
.orderform input {
  width:100%; padding:11px 12px;
  border:1.5px solid var(--line); border-radius:0;
  font-size:1rem; font-family:inherit; background:var(--cream); color:var(--ink);
}
.orderform input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 2px rgba(23,80,92,0.2); background:var(--card); }
.phase-toggle { display:flex; gap:0; border:1.5px solid var(--line); }
.phase-toggle label { flex:1; margin:0; }
.phase-toggle label + label span { border-left:1.5px solid var(--line); }
.phase-toggle input { position:absolute; opacity:0; width:0; height:0; }
.phase-toggle span {
  display:block; text-align:center; padding:11px 6px;
  font-weight:700; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
  cursor:pointer; background:var(--card); color:var(--ink-soft);
}
.phase-toggle input:checked + span { background:var(--teal); color:var(--card); }
.phase-toggle input:focus-visible + span { box-shadow:inset 0 0 0 2px var(--coral); }
.btn { display:inline-block; border:0; cursor:pointer; font-family:'Source Sans 3',sans-serif; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; border-radius:0; transition:background .18s, transform .1s; }
.btn.primary { background:var(--coral); color:var(--card); }
.btn.primary:hover { color:var(--card); background:var(--coral-deep); }
.btn.teal { background:var(--teal); color:var(--card); } .btn.teal:hover { color:var(--card); background:var(--teal-2); }
.btn.big { padding:14px 26px; font-size:0.92rem; }
.submit-row { margin-top:20px; }
.submit-row .btn { width:100%; text-align:center; }
.subnote { display:block; text-align:center; font-size:0.74rem; letter-spacing:0.03em; color:var(--ink-faint); margin-top:9px; }
.order-status { margin-top:12px; padding:10px 13px; font-size:0.86rem; background:var(--cream-2); border-left:3px solid var(--teal); }
.order-status.err { background:#f6e5e1; color:#9a3226; border-left-color:var(--bad); }
.cta-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

@media (max-width:900px){
  .lead-grid{grid-template-columns:1fr; gap:0;}
  .lead-main{border-right:0; padding-right:0; padding-bottom:32px; border-bottom:var(--rule-heavy);}
  .lead-aside{padding-left:0; padding-top:30px;}
}

/* ============ RULED SECTIONS ============ */
section.section { padding:44px 0; border-top:3px double var(--line); }
section.section.first { border-top:0; }
.section-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding-bottom:16px; margin-bottom:26px; border-bottom:var(--rule);
}
.section-head h2 { font-size:clamp(1.7rem,3.4vw,2.5rem); margin:6px 0 0; max-width:22ch; color:var(--ink); }
.section-head .kicker { margin:0; }
.section-lead { max-width:64ch; }

/* two-column newspaper body */
.columns { columns:2; column-gap:44px; column-rule:var(--rule); }
.columns p { margin:0 0 15px; break-inside:avoid; color:var(--ink-soft); }
.columns p:first-child { margin-top:0; }
.columns p.dropcap:first-letter {
  font-family:'Playfair Display',serif; font-weight:900; float:left;
  font-size:3.4rem; line-height:0.72; padding:6px 10px 0 0; color:var(--coral-deep);
}
@media (max-width:720px){ .columns{columns:1;} }

/* ============ LEAGUE TABLE (sample) ============ */
.league { border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.league-cap {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 0 9px; border-bottom:var(--rule);
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; color:var(--ink-faint);
}
.league-cap .r { color:var(--coral-deep); }
.league-row {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:13px 0; border-bottom:var(--rule);
}
.league-row:last-child { border-bottom:0; }
.league-rank { font-family:'Playfair Display',serif; font-weight:900; font-size:1.15rem; color:var(--ink); width:1.4em; text-align:right; }
.league-school { min-width:0; }
.league-school .name { font-weight:700; font-size:1.02rem; color:var(--ink); }   /* high contrast, dark */
.league-school .meta { display:block; font-size:0.8rem; color:var(--ink-faint); font-weight:400; margin-top:1px; }
.rating {
  font-size:0.72rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
  padding:4px 10px; white-space:nowrap; border:1.5px solid;
}
.rating.r-out { color:var(--good); border-color:var(--good); background:#e7f1ea; }
.rating.r-good { color:var(--good); border-color:var(--good); background:#e7f1ea; }
.rating.r-ri { color:var(--warn); border-color:var(--warn); background:#f6ecd6; }
.rating.r-inad { color:var(--bad); border-color:var(--bad); background:#f7e4e0; }
.league-foot { padding:11px 0 0; font-size:0.8rem; color:var(--ink-faint); }

/* ============ RULED FEATURE LIST (replaces card grid) ============ */
.dispatch { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:var(--rule); }
.dispatch-item { padding:22px 30px 22px 0; border-bottom:var(--rule); }
.dispatch-item:nth-child(odd) { padding-left:0; }
.dispatch-item:nth-child(even) { padding-left:34px; border-left:var(--rule); padding-right:0; }
.dispatch-no { font-family:'Playfair Display',serif; font-weight:900; font-size:0.9rem; color:var(--coral-deep); letter-spacing:0.04em; }
.dispatch-item h3 { font-size:1.18rem; margin:4px 0 7px; color:var(--ink); }
.dispatch-item p { margin:0; color:var(--ink-soft); font-size:0.96rem; }
@media (max-width:720px){
  .dispatch{grid-template-columns:1fr;}
  .dispatch-item,.dispatch-item:nth-child(even){padding:20px 0; border-left:0;}
}

/* ============ STEPS (ruled ledger) ============ */
.steps { border-top:3px solid var(--ink); }
.step {
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:baseline;
  padding:20px 0; border-bottom:var(--rule);
}
.step-no {
  font-family:'Playfair Display',serif; font-weight:900; font-size:1.5rem; color:var(--coral-deep);
  min-width:2.6em; letter-spacing:0.02em;
}
.step h3 { font-size:1.16rem; margin:0 0 3px; color:var(--ink); }
.step p { margin:0; color:var(--ink-soft); font-size:0.98rem; }

/* on teal notice-board sections */
section.notice { background:var(--teal); color:#d3e2e3; border-top:3px double #3a7f8d; border-bottom:3px double #3a7f8d; }
section.notice h2 { color:var(--card); }
section.notice .kicker { color:#f2b6a8; }
section.notice .section-head { border-bottom-color:#3a7f8d; }
section.notice .section-lead { color:#bcd0d1; }
section.notice .steps { border-top-color:var(--card); }
section.notice .step { border-bottom-color:#3a7f8d; }
section.notice .step h3 { color:var(--card); }
section.notice .step p { color:#bcd0d1; }
section.notice .step-no { color:#f2b6a8; }
section.notice a { color:var(--card); text-decoration:underline; text-decoration-color:var(--coral); }

/* ============ ARTICLE (guide + info pages) ============ */
.article { max-width:740px; }
.article h1 { font-size:clamp(2rem,4.2vw,2.9rem); margin:0 0 18px; color:var(--ink); }
.article h2 { font-family:'Playfair Display',serif; font-size:1.62rem; margin:34px 0 10px; color:var(--ink); padding-top:16px; border-top:var(--rule); }
.article > .kicker + h2 { padding-top:0; border-top:0; margin-top:0; }
.article h1 + h2, .article .crumbs + h1 + h2 { padding-top:0; border-top:0; }
.article h3 { font-size:1.22rem; margin:26px 0 6px; color:var(--ink); }
.article p, .article li { color:var(--ink-soft); }
.article ul { padding-left:1.2rem; }
.article a { text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:3px; }
.article .lede, .article .intro { font-size:1.16rem; color:var(--ink-soft); }
.faq-q { font-family:'Playfair Display',serif; font-weight:700; font-size:1.24rem; color:var(--ink); margin:30px 0 6px; padding-top:16px; border-top:var(--rule); }
.callout { background:var(--cream-2); border:0; border-left:4px solid var(--coral); padding:15px 20px; margin:22px 0; }
.callout p { margin:0; color:var(--ink); }

/* article intro used on standalone info pages */
.article .kicker { margin-bottom:12px; }

/* legacy hero/eyebrow/lede hooks used by success.html */
.hero { padding:52px 0; }
.eyebrow { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--coral-deep); font-weight:700; margin:0 0 12px; }
.hero h1 { font-size:clamp(2.1rem,5vw,3.3rem); margin:0 0 16px; color:var(--ink); }
.hero h1 em { font-style:italic; color:var(--coral-deep); }
.hero .lede { font-size:1.16rem; color:var(--ink-soft); max-width:52ch; }
.band { padding:44px 0; border-top:3px double var(--line); }
.band .intro { font-size:1.1rem; color:var(--ink-soft); max-width:62ch; }

/* CTA line used mid-page */
.cta-line { margin-top:34px; }

/* ============ COLOPHON (newspaper footer) ============ */
.colophon { background:var(--cream); border-top:3px solid var(--ink); padding:34px 0 28px; }
.colophon-masthead {
  text-align:center; padding-bottom:16px; margin-bottom:22px; border-bottom:3px double var(--line);
}
.colophon-name { font-family:'Playfair Display',serif; font-weight:900; font-size:1.7rem; color:var(--ink); }
.colophon-name .the { color:var(--coral-deep); }
.colophon-strap { font-family:'Playfair Display',serif; font-style:italic; font-size:0.94rem; color:var(--ink-soft); margin-top:4px; }
.colophon-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.colophon-cols h4 { font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--coral-deep); font-weight:700; margin:0 0 11px; padding-bottom:8px; border-bottom:var(--rule); }
.colophon-cols a { display:block; color:var(--ink-soft); padding:3px 0; font-size:0.92rem; }
.colophon-cols a:hover { color:var(--coral-deep); }
.colophon-cols p { margin:0; font-size:0.92rem; color:var(--ink-soft); }
.colophon-legal {
  margin-top:24px; padding-top:16px; border-top:var(--rule);
  font-size:0.78rem; color:var(--ink-faint); line-height:1.55; text-align:center; max-width:80ch; margin-left:auto; margin-right:auto;
}
@media (max-width:700px){ .colophon-cols{grid-template-columns:1fr; gap:22px;} }

/* ============ INDEX LIST (guide hub — ruled contents) ============ */
.index-list { border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.index-row {
  display:grid; grid-template-columns:9.5rem 1fr; gap:20px; align-items:baseline;
  padding:16px 0; border-bottom:var(--rule); color:var(--ink);
}
.index-row:last-child { border-bottom:0; }
.index-row:hover { background:var(--cream-2); }
.index-row:hover .index-title { color:var(--coral-deep); }
.index-tag {
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700;
  color:var(--coral-deep); padding-top:3px;
}
.index-body { min-width:0; }
.index-title { display:block; font-family:'Playfair Display',serif; font-weight:700; font-size:1.24rem; color:var(--ink); line-height:1.15; }
.index-note { display:block; font-size:0.94rem; color:var(--ink-soft); margin-top:3px; }
@media (max-width:600px){
  .index-row{grid-template-columns:1fr; gap:4px;}
  .index-tag{padding-top:0;}
}

/* guide-page tables (scoped styles in guide pages reference these vars) */
.tablewrap { overflow-x:auto; }