/*
 * The Academy's other pages in the home page's language (academy.css): the same paper, ink and
 * fonts, the same heading sizes, rounded cards and fine lines. The design file is the home page
 * only; these rules dress the page headings, essays, the Library shelf, the curriculum's stages
 * and questions, the First Wave list and the review notes in its manner.
 */

/* The header lies on the photograph on the home page only; elsewhere it is a chocolate band. */
body:not(.home-page) header.wrap{position:relative;background:var(--ink)}
body:not(.home-page) header.wrap::before{display:none}
.nav a[aria-current=page]{border-bottom-color:currentColor}
@media(max-width:75.999rem){.nav a[aria-current=page]{border-bottom-color:var(--line);font-weight:400;text-decoration:underline;text-underline-offset:6px}}

/* Base type for the pages the design does not show. */
h1{font-size:clamp(26px,3.2vw,40px);line-height:1.2}
h4{font:400 17px/1.35 var(--display);margin:0 0 10px;color:var(--ink)}
/* The other pages were written for flowing text: space after headings and paragraphs. The home
   page, and the blocks that space their contents with gaps (cards, split columns), keep none. */
body:not(.home-page) main :is(h2,h3){margin-bottom:.7em}
body:not(.home-page) main p{margin-bottom:1em}
body:not(.home-page) main p:last-child{margin-bottom:0}
body:not(.home-page) main :is(.pillar,.pilot-card,.reading-item,.age-stage,.callout,.article-aside,.image-pair>div,.section-head>div,.band .split>div:last-child)>*{margin-bottom:0}
ul,ol{padding-left:1.3em;margin:0}
li{margin:.4em 0}
figcaption{font:400 14px/1.5 var(--text);color:var(--muted);margin-top:12px}
.narrow{max-width:800px}
.small{font-size:16px}
.muted{color:var(--muted)}
.section a:not(.button):not(.text-link),.page-intro a,.prose a:not(.button):not(.text-link){text-decoration-thickness:1px;text-underline-offset:4px}

/* Page heading: path, section, title and short line. */
.page-intro{padding-block:clamp(48px,6vw,88px) clamp(40px,5vw,64px)}
.page-intro h1{max-width:22em;margin:0}
.page-intro .eyebrow{margin-bottom:18px!important}
.page-intro .lead{max-width:46rem;margin:24px 0 0;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--muted)}
.breadcrumbs{font:400 14px/1.5 var(--text);color:var(--muted);margin:0 0 clamp(28px,3.5vw,44px)!important}
.breadcrumbs a{text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.page-intro+.section,.page-intro+.image-pair,.page-intro+.wide-photo{border-top:0}
.wrap>.page-intro+.section{border-top:0}
/* A section written to continue the one before it (pt-0) carries no line above it. */
body:not(.home-page) .wrap>.section+.section.pt-0{border-top:0}

/* Photographs. */
.wide-photo{max-width:none;margin:0}
.wide-photo img{width:100%;max-height:640px;object-fit:cover;border-radius:2px}
.image-pair.portrait figure img{max-height:640px}

/* Note, steps, age stages and module facts. */
.note{margin-block:32px;padding:24px 28px;border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:12px;font-size:16px;line-height:1.7;color:var(--muted)}
.note p{font-size:16px}
.note strong{color:var(--ink);font-weight:400}
.two-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px)}
.age-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-block:clamp(28px,3.5vw,48px)}
.age-stage{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:12px;padding:26px;min-width:0}
.age-stage h3{font-size:clamp(16px,1.35vw,19px)}
.age-stage p{font-size:16px}
.age-stage .age-label,.country-number,.steps li::before{font:400 12px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.module-facts{display:flex;flex-wrap:wrap;gap:30px;margin-block:32px;border-top:1px solid var(--line);padding-top:24px}
.module-facts div{padding-right:30px;border-right:1px solid var(--line)}
.module-facts div:last-child{border:0}
.module-facts strong{display:block;font:400 clamp(24px,2.6vw,34px)/1.2 var(--display);color:var(--ink)}
.module-facts span{font-size:16px;color:var(--muted)}
.steps{counter-reset:steps;list-style:none;padding:0;margin:0;border-bottom:1px solid var(--line)}
.steps li{counter-increment:steps;display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;border-top:1px solid var(--line);padding:26px 0;margin:0}
.steps li::before{content:'0' counter(steps);padding-top:5px}
.steps h3{margin-bottom:8px}
.steps p{font-size:16px}
.band .steps,.band .steps li{border-color:var(--on-dark-line)}
.band .steps li::before{color:var(--on-dark-muted)}

/* Questions that open (curriculum) and the First Wave territories. */
.accordion{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding-block:20px}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;font:400 clamp(16px,1.35vw,19px)/1.4 var(--display);color:var(--ink);min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font:400 24px/1 var(--text);flex-shrink:0;transition:transform .15s}
details[open]>summary::after{content:'−'}
summary:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.details-content{max-width:52rem;padding:18px 40px 4px 0;color:var(--muted)}
.details-content p{font-size:16px}
.details-content h4{margin-top:18px}
.country-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,72px);align-items:start;border-top:1px solid var(--line)}
.country{padding-block:16px}
.country summary{justify-content:flex-start}
.country summary::after{margin-left:auto}
.country-number{min-width:30px;margin-right:14px}
.country-name{flex:1}
.country-language{font-size:14px;color:var(--muted);margin-top:14px}
.country p{font-size:16px}
.country .details-content{padding-right:10px}

/* The Library shelf. */
.library-tools{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-block:clamp(36px,4.5vw,56px) 28px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.search-control{flex:1;max-width:520px}
.search-control label{display:block;font:400 12px var(--text);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.search-control input{width:100%;min-height:52px;padding:12px 18px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:400 17px var(--text)}
.search-control input::placeholder{color:var(--muted);opacity:.75}
.library-count{font-size:16px;color:var(--muted);white-space:nowrap}
.filter-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px}
.filter-tabs button{min-height:44px;padding:8px 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:400 16px var(--text)}
.filter-tabs button:hover{border-color:var(--ink)}
.filter-tabs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.library-grid .reading-item h3{font-size:clamp(17px,1.5vw,21px)}
.reading-item .text-link{margin-top:auto}
.no-results{padding:24px 0;color:var(--muted)}
.source-list{list-style:none;padding:0;margin:24px 0 0}
.source-list li{border-top:1px solid var(--line);padding:22px 0;margin:0}
.source-list a{font:400 clamp(16px,1.35vw,19px)/1.4 var(--display)}
.source-list small{display:block;font-size:14px;line-height:1.6;margin-top:8px;color:var(--muted)}
.source-list p{font-size:16px;margin-top:8px}
.band .source-list li{border-color:var(--on-dark-line)}
.band .source-list small{color:var(--on-dark-muted)}

/* An essay: the text in the reading measure with the side panel beside it. */
.article-title{max-width:24em}
.article-reading{margin-top:18px;font-size:15px;color:var(--muted)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(36px,6vw,96px);align-items:start;padding-block:8px clamp(56px,7vw,100px)}
.prose{max-width:800px;overflow-wrap:anywhere}
.prose p,.prose li{color:var(--muted);line-height:1.75}
.prose strong,.prose b{color:var(--ink);font-weight:400}
.prose h2{margin:2.6rem 0 1rem;font-size:clamp(20px,2vw,26px)}
.prose h3{margin:2.2rem 0 .9rem;font-size:clamp(18px,1.7vw,22px)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.4em}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.prose blockquote{margin:2rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:3px solid var(--ink);color:var(--muted)}
.prose figure{margin:2.4rem 0}
.prose img{border-radius:2px}
.standfirst p,.article .standfirst p{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--ink)}
.standfirst{margin-bottom:2rem}
.article .callout{margin-top:44px;padding:28px 0 0;background:none;color:var(--ink);border:0;border-top:1px solid var(--line)}
.article .callout .text-link{color:var(--ink);border-bottom-color:var(--ink)}
.article-aside{position:sticky;top:28px;display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid var(--line);border-radius:12px;font-size:16px}
.article-aside p{font-size:16px;line-height:1.6;color:var(--muted)}
.article-aside p:first-child{font:400 12px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.article-aside p:nth-child(2){font:400 17px/1.35 var(--display);color:var(--ink)}
.article-aside a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-block:6px}
.article-aside a:hover{border-bottom-color:var(--ink)}
.article-aside p a{border:0;padding:0;text-decoration:underline;text-underline-offset:4px}

/* Review notes: the source table, the status lines and the closing note. */
.source-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.6;margin-top:24px}
.source-table th,.source-table td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--muted)}
.source-table th{font:400 12px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.source-table td:first-child{width:28%;color:var(--ink)}
.review-status{border-top:1px solid var(--line);padding-block:20px;font-size:16px;color:var(--muted)}
.endnote{padding-block:32px 64px;font-size:16px;color:var(--muted)}

@media(max-width:1100px){.age-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  .two-cols,.country-list,.library-grid{grid-template-columns:minmax(0,1fr)}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .article-aside{position:static}
  .library-tools{flex-direction:column;align-items:stretch;gap:16px}
  .search-control{max-width:none}
}
@media(max-width:560px){
  .age-grid{grid-template-columns:minmax(0,1fr)}
  .module-facts{gap:18px}
  .module-facts div{padding-right:18px}
  .details-content{padding-right:0}
  .steps li{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .source-table{display:block;overflow-x:auto}
}
@media print{
  header.wrap,.menu-toggle,.footer,.article-aside,.library-tools,.filter-tabs{display:none}
  body{background:#fff}
  .band{background:none;color:var(--ink)}
}
