/* School Spotlight, Autumn 2026 – the spread's stylesheet scoped to main.spotlight.
   Loaded after style.css, like article.css on the article pages. Built by build-spotlight.py
   from the published spread; edit the spread, not this file. */
.spotlight{ --paper:#f7f4ec; }                 /* the site canvas, so the sticky bar sits on the page */
main.spotlight{ overflow:visible; display:flow-root; }
                                                /* style.css clips main; the sticky switcher needs it open,
                                                   and flow-root keeps the switcher's top margin inside main
                                                   (without it the grey ground showed under the header) */
.spotlight .school{ scroll-margin-top:60px; }   /* a link to #school lands below the sticky switcher */
html, body{ overflow-x:clip; }                  /* style.css sets hidden on both on a phone, which makes body a
                                                   scroll box and stops the switcher sticking; clip cuts the same
                                                   overflow without creating one (this file loads on this page only) */
*, *::before, *::after{ box-sizing:border-box; }
.spotlight{
  --paper:#faf8f2;
  --ink:#1a1f23;
  --ink-soft:#5c6269;
  --rule:#c2c5c8;
  --rule-soft:#e0ded4;
  --forest:#142b20;
  --band:#eeefe8;
  --gold:#a98548;        
  --gold-ink:#846838;    
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --shell:1060px;
  --pad:20px;
  --display-weight:700;
  --display-tight:-.005em;
}
.spotlight{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.62;
  text-rendering:optimizeLegibility;
}
.spotlight img{ display:block; max-width:100%; }
.spotlight a{ color:inherit; }
.spotlight ::selection{ background:rgba(169,133,72,.22); }
.spotlight .wrap{ width:min(100% - 32px, var(--shell)); margin-inline:auto; }
@media (min-width:48rem){
.spotlight .wrap{ width:min(100% - 96px, var(--shell)); }
}
@media (min-width:34rem){

}
.spotlight .switch{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; background:var(--paper);
  border-bottom:1px solid var(--rule); margin-top:10px;
}
.spotlight .switch .wrap{ display:flex; align-items:center; gap:12px; min-height:52px; }
.spotlight .now{ display:flex; flex-direction:column; min-width:0; }
.spotlight .now .k{
  font-family:var(--display); font-weight:600; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-ink);
}
.spotlight .now .v{
  font-family:var(--display); font-weight:var(--display-weight); font-size:17px; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.spotlight .open-list{
  margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:0 14px; cursor:pointer;
  background:var(--forest); color:var(--paper); border:1px solid var(--forest);
  font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.spotlight .open-list:hover{ background:#1d3a2c; }
.spotlight .open-list .count{ color:#c4aa76; letter-spacing:.08em; }
.spotlight .rail{ display:none; }
.spotlight .railwrap{ display:none; }
.spotlight .arrows{ display:none; }
@media (min-width:48rem){
.spotlight .now, .spotlight .open-list{ display:none; }
.spotlight .railwrap, .spotlight .arrows{ display:block; }
.spotlight .rail{
    display:flex; align-items:stretch; gap:0; width:100%; overflow-x:auto;
    scrollbar-width:none;
  }
.spotlight .rail::-webkit-scrollbar{ display:none; }
.spotlight .rail button{
    flex:0 0 auto; min-height:52px; padding:0 18px; cursor:pointer;
    background:transparent; border:0; border-bottom:2px solid transparent;
    font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink-soft);
    white-space:nowrap;
  }
.spotlight .rail button:hover{ color:var(--ink); }
.spotlight .rail button[aria-current="true"]{ color:var(--forest); border-bottom-color:var(--gold); }
.spotlight .rail button[disabled]{ color:#a8aaa5; cursor:default; }
.spotlight .rail button[disabled]:hover{ color:#a8aaa5; }
.spotlight .rail .idx{ font-size:12px; letter-spacing:.14em; color:var(--gold-ink); margin-right:8px; }
.spotlight .railwrap{ position:relative; flex:1 1 auto; min-width:0; }
.spotlight .railwrap::after{
    content:''; position:absolute; top:0; right:0; bottom:0; width:34px; pointer-events:none;
    background:linear-gradient(to right, rgba(250,248,242,0), var(--paper));
  }
.spotlight .arrows{ display:flex; align-items:center; flex:0 0 auto; }
.spotlight .arrows button{
    min-width:44px; min-height:44px; padding:0 12px; cursor:pointer;
    background:transparent; border:0; font-size:20px; color:var(--forest);
  }
.spotlight .arrows button:hover{ color:var(--gold-ink); }
}
.spotlight .school[hidden]{ display:none; }
.spotlight .school{ padding-bottom:8px; }
@media (prefers-reduced-motion:no-preference){
.spotlight .school.enter{ animation:rise .22s ease-out both; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
}
.spotlight .sectionhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 0 10px; border-bottom:1px solid var(--rule);
}
.spotlight .sectionhead .label{
  font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink);
}
.spotlight .sectionhead .no{ font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (min-width:34rem){
.spotlight .sectionhead .label{ font-size:12.5px; }
.spotlight .sectionhead .no{ font-size:16px; }
}
.spotlight .title{
  margin:18px 0 0; font-family:var(--display); font-weight:var(--display-weight);
  font-size:clamp(2.35rem,1.5rem + 4.4vw,4.25rem); line-height:1.02;
  letter-spacing:var(--display-tight); color:var(--ink);
  text-wrap:balance; overflow-wrap:break-word; hyphens:none;
}
.spotlight .meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  margin:14px 0 0; font-size:15px; color:var(--ink);
}
.spotlight .meta .item{ display:inline-flex; align-items:center; gap:7px; }
.spotlight .meta svg{ width:15px; height:15px; flex:0 0 auto; fill:currentColor; opacity:.85; }
.spotlight .meta .bar{ width:1px; align-self:stretch; min-height:18px; background:var(--rule); }
@media (max-width:33.99rem){
.spotlight .meta .bar{ display:none; }
}
.spotlight .sp-hero{ margin:18px 0 0; }
.spotlight .sp-hero img{ width:100%; height:auto; }
.spotlight .sec{ padding:22px 0 0; border-top:1px solid var(--rule); margin-top:22px; }
.spotlight .school > .sec:first-of-type{ border-top:0; }
.spotlight .sec h2{
  margin:0; font-family:var(--display); font-weight:var(--display-weight);
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.05rem); line-height:1.18;
  letter-spacing:var(--display-tight); color:var(--ink); overflow-wrap:break-word;
}
.spotlight .sec h2 .n{ margin-right:.35em; }
.spotlight .ask{ margin:.7em 0 0; font-size:15.5px; line-height:1.55; color:var(--ink-soft); }
.spotlight .ans{ margin:1.05em 0 0; }
.spotlight .ans p{ margin:0 0 .85em; }
.spotlight .ans p:last-child{ margin-bottom:0; }
.spotlight .sec figure{ margin:18px 0 0; }
.spotlight .sec figure img{ width:100%; height:auto; }
@media (min-width:48rem){
.spotlight .sec{ display:grid; grid-template-columns:1.08fr 1fr; grid-template-rows:auto auto 1fr;
         column-gap:34px; align-items:start; }
.spotlight .sec > h2, .spotlight .sec > .ask, .spotlight .sec > .ans{ grid-column:1; }
.spotlight .sec > figure{ grid-column:2; grid-row:1 / span 3; margin:6px 0 0; align-self:start; }
.spotlight .sec.flip > h2, .spotlight .sec.flip > .ask, .spotlight .sec.flip > .ans{ grid-column:2; }
.spotlight .sec.flip > figure{ grid-column:1; }
.spotlight .sec.lead{ grid-template-rows:auto auto auto; }
.spotlight .sec.lead > h2, .spotlight .sec.lead > .ask{ grid-column:1 / -1; }
.spotlight .sec.lead > .ans{ grid-column:1; }
.spotlight .sec.lead > figure{ grid-column:2; grid-row:3; margin-top:0; }
}
.spotlight .vibe{ margin-top:22px; padding-top:22px; border-top:1px solid var(--rule); }
.spotlight .vibe h2{
  margin:0; font-family:var(--display); font-weight:var(--display-weight);
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.05rem); line-height:1.18;
  letter-spacing:var(--display-tight);
}
.spotlight .vibe .ask{ margin-top:.55em; }
.spotlight .band{
  margin-top:16px; padding:clamp(22px,6vw,38px) clamp(16px,4vw,32px);
  background:var(--band); text-align:center;
}
.spotlight .band .words{
  margin:0; font-family:var(--display); font-weight:var(--display-weight);
  font-size:clamp(2rem,1.05rem + 4.9vw,4.25rem); line-height:1.06;
  letter-spacing:var(--display-tight); color:var(--ink);
  text-wrap:balance; overflow-wrap:break-word;
}
.spotlight .band .tick{ width:56px; height:1px; margin:clamp(14px,3vw,20px) auto; background:var(--ink); opacity:.55; }
.spotlight .band .msg{ margin:0; font-size:16px; line-height:1.6; max-width:56ch; margin-inline:auto; }
.spotlight .credit{
  margin-top:22px; padding-top:12px; border-top:1px solid var(--rule-soft);
  font-size:13px; font-style:italic; line-height:1.6; color:var(--ink-soft);
}
.spotlight .endrule{ display:flex; align-items:center; gap:12px; margin-top:18px; padding-bottom:6px; }
.spotlight .endrule .rule{ flex:1 1 0; min-width:12px; height:1px; background:var(--rule); }
.spotlight .endrule .tag{
  font-family:var(--display); font-weight:600; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--forest); white-space:nowrap;
}
.spotlight .endrule .motto{
  font-family:var(--display); font-weight:600; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--forest);
}
@media (max-width:33.99rem){
.spotlight .endrule .motto{ display:none; }
}
.spotlight .next{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; width:100%; margin-top:24px;
  padding:14px; cursor:pointer; text-align:left;
  background:transparent; border:1px solid var(--rule); color:inherit;
  font:inherit;
}
.spotlight .next:hover{ background:#f3f0e6; border-color:var(--forest); }
.spotlight .next:focus-visible{ outline:2px solid var(--forest); outline-offset:2px; }
.spotlight .next img{ width:76px; height:76px; object-fit:cover; flex:0 0 auto; }
.spotlight .next .t{ min-width:0; }
.spotlight .next .k{
  overflow-wrap:break-word;
  font-family:var(--display); font-weight:600; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-ink);
}
.spotlight .next .v{
  font-family:var(--display); font-weight:var(--display-weight);
  font-size:clamp(1.1rem,1rem + .7vw,1.5rem); line-height:1.18; margin-top:3px;
  overflow-wrap:break-word;
}
.spotlight .next .go{ margin-left:auto; flex:0 0 auto; font-size:22px; color:var(--forest); }
.spotlight .sheet[hidden]{ display:none; }
.spotlight .sheet{
  position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  background:var(--paper);
}
.spotlight .sheet-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--rule);
}
.spotlight .sheet-top .h{
  font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--forest);
}
.spotlight .sheet-top button{
  min-width:44px; min-height:44px; cursor:pointer; background:transparent; border:1px solid var(--rule);
  font-size:19px; color:var(--ink);
}
.spotlight .sheet ol{ list-style:none; margin:0; padding:0 16px 24px; overflow-y:auto; }
.spotlight .sheet li{ border-bottom:1px solid var(--rule-soft); }
.spotlight .sheet li button{
  display:flex; align-items:center; gap:14px; width:100%; min-height:76px; padding:12px 0;
  cursor:pointer; background:transparent; border:0; text-align:left; font:inherit; color:inherit;
}
.spotlight .sheet li button[disabled]{ cursor:default; opacity:.45; }
.spotlight .sheet li img{ width:60px; height:60px; object-fit:cover; flex:0 0 auto; }
.spotlight .sheet li .ph{ width:60px; height:60px; flex:0 0 auto; background:var(--band); }
.spotlight .sheet li .t-wrap{ display:flex; flex-direction:column; min-width:0; }
.spotlight .sheet li .n{
  font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.18em; color:var(--gold-ink);
}
.spotlight .sheet li .t{ font-family:var(--display); font-weight:var(--display-weight); font-size:19px; line-height:1.2; overflow-wrap:break-word; }
.spotlight .sheet li .s{ font-size:13px; color:var(--ink-soft); }
.spotlight .sheet li button[aria-current="true"] .t{ color:var(--forest); }
.spotlight .sheet li button[aria-current="true"]::after{ content:"✓"; margin-left:auto; color:var(--forest); font-size:17px; }
.spotlight .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;
}
.spotlight .sp-hero img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--paper); }
.spotlight .sec figure img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--paper); }
.spotlight .sp-hero img.fit, .spotlight .sec figure img.fit{ object-fit:contain; }
.spotlight .vibe h2 .n{ margin-right:.35em; }
.spotlight .title{ font-size:min(clamp(2.35rem,1.5rem + 4.4vw,4.25rem), calc((100vw - 32px) / 12.3)); }
@media (min-width:48rem){
.spotlight .title{ font-size:min(clamp(2.35rem,1.5rem + 4.4vw,4.25rem), calc((min(100vw, 1156px) - 96px) / 12.3)); }
}
@media (min-width:48rem){
.spotlight .sec.lead{ grid-template-rows:auto auto 1fr; }
.spotlight .sec.lead > h2, .spotlight .sec.lead > .ask, .spotlight .sec.lead > .ans{ grid-column:1; }
.spotlight .sec.lead > figure{ grid-column:2; grid-row:1 / span 3; margin:6px 0 0; }
}
/* ==========================================================================
   Site version only (30 Sep 2026)
   ========================================================================== */

/* 1. No text below 12px – the floor the site's own labels keep ("Article 01",
      table headers). The spread had 10–11px in five places. */
.spotlight .now .k,
.spotlight .endrule .tag,
.spotlight .endrule .motto,
.spotlight .sheet li .n{ font-size:12px; }
@media (max-width:47.99rem){ .spotlight .sectionhead .label{ font-size:12px; } }

/* 2. The school switcher: full-contrast names, a size you can read, and the
      school you are on filled in forest so it cannot be missed. */
.spotlight .switch .wrap{ min-height:60px; }
.spotlight .rail{ gap:4px; padding:8px 0; }
.spotlight .rail button{
  min-height:44px; padding:0 16px; border:1px solid transparent; border-bottom:1px solid transparent;
  font-size:17px; color:var(--ink); letter-spacing:.01em;
}
.spotlight .rail button:hover{ color:var(--forest); border-color:var(--gold); }
.spotlight .rail button[aria-current="true"]{
  background:var(--forest); color:#f4efe4; border-color:var(--forest);
}
.spotlight .rail .idx{ font-size:13px; color:var(--gold-ink); }
.spotlight .rail button[aria-current="true"] .idx{ color:#c4aa76; }
.spotlight .rail button:focus-visible{ outline:2px solid var(--forest); outline-offset:2px; }
.spotlight .arrows button{ font-size:26px; }
.spotlight .now .v{ font-size:18px; }

/* 3. The way on at the foot of a school: only "Previous school" and "Next school",
      no name and no picture of the next one – a reader of one school is not shown
      another. The first school has no Previous, the last no Next. */
.spotlight .pager{
  display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 44px; padding-top:24px;
  border-top:1px solid var(--rule);
}
.spotlight .pager button{
  display:inline-flex; align-items:center; justify-content:center; gap:16px;
  min-height:60px; padding:14px 26px; cursor:pointer;
  border:1px solid var(--forest); background:transparent; color:var(--forest);
  font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:.16em; text-transform:uppercase;
}
.spotlight .pager .pager-next{ margin-left:auto; background:var(--forest); color:#f4efe4; }
.spotlight .pager .arr{ font-size:28px; line-height:.6; letter-spacing:0; }
.spotlight .pager button:hover{ background:#1d3a2c; border-color:#1d3a2c; color:#f4efe4; }
.spotlight .pager button:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }
@media (max-width:47.99rem){
  .spotlight .pager{ flex-direction:column; }
  .spotlight .pager button{ width:100%; font-size:17px; letter-spacing:.12em; padding:12px 18px; }
  .spotlight .pager .pager-next{ margin-left:0; }
}