/* Reading pages for Ideas from CIRS. The student text remains the focus. */
body.blog{
  --art-paper:var(--paper);
  --art-ink:var(--ink);
  --art-soft:var(--ink-soft);
  --art-muted:var(--ink-mute);
  --art-rule:#D6D3CA;
  --art-gold:var(--gold);
  background:var(--art-paper);
  color:var(--art-ink);
}
.art{background:var(--art-paper)}
.art__shell{
  width:min(100%, 1190px);margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 64px);
}
.art__head{
  padding-block:clamp(122px, 16vh, 172px) clamp(45px, 6vw, 85px);
  border-bottom:1px solid var(--art-ink);
}
.art__breadcrumb{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-bottom:clamp(50px, 7vw, 90px);
  color:var(--art-muted);font-size:14px;
}
.art__breadcrumb a{color:var(--art-ink);text-decoration:none;border-bottom:1px solid currentColor}
.art__breadcrumb a:hover{color:var(--label)}
.art__breadcrumb a:focus-visible,.art__rail a:focus-visible,
.art__foot a:focus-visible,.art__related a:focus-visible{
  outline:3px solid var(--art-gold);outline-offset:4px;
}
.art__edition{
  display:flex;align-items:center;gap:10px;
  margin:0 0 19px;color:var(--label);font-size:15px;
}
.art__edition span{color:var(--art-rule)}
.art__title{
  max-width:1050px;margin:0;
  font-family:var(--font-display);font-size:clamp(3.4rem, 7.2vw, 7.9rem);
  line-height:.94;letter-spacing:-.053em;font-weight:500;
  text-wrap:balance;overflow-wrap:anywhere;
}
.art__subtitle{
  max-width:60ch;margin:clamp(22px, 3vw, 38px) 0 0;
  color:var(--art-soft);font-size:clamp(19px, 2vw, 25px);
  line-height:1.4;
}
.art__credits{
  display:flex;flex-wrap:wrap;gap:6px clamp(16px, 3vw, 40px);
  border-top:1px solid var(--art-rule);
  margin-top:clamp(45px, 6vw, 76px);padding-top:18px;
  color:var(--art-muted);font-size:15px;line-height:1.4;
}
.art__credits span:first-child{color:var(--art-ink)}
.art__layout{
  display:grid;grid-template-columns:minmax(130px,175px) minmax(0,735px);
  gap:clamp(35px, 6vw, 90px);
  width:min(100%, 1190px);margin-inline:auto;
  padding:clamp(45px, 7vw, 88px) clamp(20px, 5vw, 64px) clamp(50px, 8vw, 100px);
}
.art__rail{
  align-self:start;position:sticky;top:105px;
  padding-top:4px;border-top:5px solid var(--art-gold);
  color:var(--art-muted);font-size:14px;line-height:1.45;
}
.art__rail p{margin:20px 0 8px}
.art__rail strong{
  display:block;margin-bottom:26px;
  color:var(--art-ink);font-size:clamp(1.45rem, 2vw, 1.85rem);
  line-height:1.12;font-weight:500;
}
.art__rail a{
  display:block;width:max-content;max-width:100%;margin-bottom:12px;
  color:var(--art-ink);text-decoration:none;border-bottom:1px solid currentColor;
}
.art__rail a:hover,.art__foot a:hover{text-decoration:underline}
.art__content{min-width:0}
.art__hero{margin:0 0 clamp(34px, 5vw, 62px)}
/* A picture whose shape the page gives (--ratio, set by build-site.py) is
   narrowed until it is no taller than the window allows, so it and its
   caption start at the same edge. Without one it keeps the column's width
   and is fitted into the window's height inside it. */
.art__hero img{
  display:block;width:min(100%, calc(70vh * var(--ratio, 100)));height:auto;max-height:70vh;
  object-fit:contain;object-position:center;
  background:#EEE9DE;
}
.art__hero figcaption{
  padding-top:10px;color:var(--art-muted);
  font-size:13px;line-height:1.4;
}
.art__body{max-width:72ch}
.art__body h2{
  margin:2.3em 0 .65em;
  color:var(--art-ink);
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 3vw, 2.65rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.035em;
}
.art__body p{
  margin:0 0 1.2em;color:var(--art-soft);
  font-size:clamp(18px, 1.45vw, 20px);
  line-height:1.72;letter-spacing:.003em;
  overflow-wrap:break-word;
}
.art__body p:first-child{font-size:clamp(20px, 1.7vw, 23px);line-height:1.55;color:var(--art-ink)}
.art__body p:last-child{margin-bottom:0}
.art__foot{
  display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid var(--art-ink);
  padding:28px 0 clamp(55px, 7vw, 100px);
}
.art__foot p{margin:0;color:var(--art-muted);font-size:16px;line-height:1.4}
.art__foot a{
  display:inline-block;margin:0 0 12px 24px;
  color:var(--art-ink);font-size:15px;text-decoration:none;
  border-bottom:1px solid currentColor;
}
.art__related{border-top:1px solid var(--art-rule);padding-bottom:clamp(70px, 9vw, 120px)}
.art__related h2{
  margin:28px 0 36px;font-size:clamp(2.3rem, 4vw, 4.5rem);
  font-weight:500;line-height:1;letter-spacing:-.04em;
}
.art__related ul{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px, 3vw, 50px);padding:0;margin:0;list-style:none;
}
.art__related li{border-top:1px solid var(--art-rule);padding-top:18px}
.art__related a{display:block;color:var(--art-ink);text-decoration:none}
.art__related a span{
  display:block;margin-bottom:15px;
  color:var(--label);font-size:13px;line-height:1.4;
}
.art__related a strong{
  display:block;font-size:clamp(1.5rem, 2.3vw, 2.35rem);
  line-height:1.08;font-weight:500;letter-spacing:-.025em;
}
.art__related a:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.1em}
@media(max-width:800px){
  .art__layout{grid-template-columns:1fr;gap:30px}
  .art__rail{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
    position:static;border-top-width:4px;padding-top:8px;
  }
  .art__rail p,.art__rail strong,.art__rail a{margin:0}
  .art__rail strong{font-size:17px}
  .art__hero img{width:min(100%, calc(62vh * var(--ratio, 100)));max-height:62vh}
}
@media(max-width:600px){
  .art__head{padding-bottom:42px}
  .art__breadcrumb{margin-bottom:52px}
  .art__title{font-size:clamp(3.2rem, 13vw, 5.4rem)}
  .art__credits{margin-top:40px;gap:7px 16px}
  .art__layout{padding-top:36px}
  .art__rail{display:block}
  .art__rail p{margin:10px 0 5px}
  .art__rail strong{margin-bottom:15px}
  .art__rail a{margin-bottom:8px}
  .art__body p{font-size:18px;line-height:1.65}
  .art__foot{display:block}
  .art__foot div{margin-top:20px}
  .art__foot a{margin:0 18px 12px 0}
  .art__related ul{grid-template-columns:1fr;gap:24px}
}
@media(prefers-reduced-motion:reduce){
  .art :is(a,img){scroll-behavior:auto;transition:none}
}

/* ============================================================
   The archive galleries
   ------------------------------------------------------------
   Two of the school's own news pages were galleries rather than
   articles, so those two reports are photographs and no prose.
   The grid is auto-fit rather than a fixed column count: the
   sets are thirteen and seventeen, neither of which divides
   tidily, and auto-fit lets the last row fill the measure
   instead of stranding one picture on its own.
   ============================================================ */
.newsgal{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(10px,1.4vw,18px);
  margin:clamp(20px,3vw,34px) 0 0;
}
.newsgal__shot{ margin:0; }
.newsgal__shot img{
  display:block; width:100%; height:auto;
  border-radius:6px;
  background:var(--paper-2);
}
.art__back{
  margin:clamp(30px,4vw,48px) 0 0;
  padding-top:var(--space-5);
  border-top:1px solid var(--rule);
}
.art__back a{ color:var(--dark); font-weight:500; }
.art__back a:hover{ color:var(--label); }

/* Touch: the rail's links are 14px type; each takes a taller hit box
   without shifting the rail, and the stacked ones are spaced so the boxes
   do not overlap. */
@media (pointer:coarse){
  .art__breadcrumb a,.art__rail a{position:relative}
  .art__breadcrumb a::after,.art__rail a::after{content:"";position:absolute;inset:-10px -6px}
  .art__rail a{margin-bottom:20px}
}

/* The school's bulletin, written into news articles (tools/sakshi.py):
   lists for schedules and results, and photographs set into the text. The
   figures keep the size the school supplied, so a small one is not stretched. */
.art__body ul{margin:0 0 1.4em;padding:0;list-style:none;border-top:1px solid var(--art-rule)}
.art__body ul li{
  margin:0;padding:.7em 0 .7em 1.1em;position:relative;
  border-bottom:1px solid var(--art-rule);
  color:var(--art-soft);font-size:clamp(16px, 1.25vw, 18px);line-height:1.55;
  overflow-wrap:break-word;
}
.art__body ul li::before{content:"";position:absolute;left:0;top:1.28em;width:5px;height:5px;border-radius:50%;background:var(--art-gold)}
.art__body ul.art__links li::before{background:var(--art-ink)}
.art__body .art__links a,.art__body p a{color:var(--art-ink);text-decoration:underline;text-underline-offset:4px}
.art__body strong{color:var(--art-ink);font-weight:600}
.art__fig{margin:1.8em 0}
.art__fig img{display:block;width:auto;max-width:100%;height:auto;border-radius:6px;background:var(--paper-2)}