/* ==========================================================================
   EXCEPT SUSTAINABILITY ACADEMY, direction C, THE ARCHIVE
   The site is a working collection with a visible cataloguing apparatus.
   Layout vocabulary, whole:
     1. TYPOGRAPHIC PAGE  text only, wide margins, marginalia, hanging figures
     2. PLATE             one object, its own screen, mounted on a mat
     3. CONTACT SHEET     many objects at once, hairline-ruled slots
     4. REGISTER          a numbered table with rules, set like a reference work
     5. BAND              one full-bleed field of colour carrying one voice
   Text and image never share a row. That is the whole point.
   ========================================================================== */

@font-face{font-family:'Newsreader';
  src:url('/assets/fonts/Newsreader-var-latin.woff2') format('woff2-variations');
  font-weight:200 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Newsreader';
  src:url('/assets/fonts/Newsreader-Italic-var-latin.woff2') format('woff2-variations');
  font-weight:200 800;font-style:italic;font-display:swap;}
@font-face{font-family:'Archivo';
  src:url('/assets/fonts/Archivo-var-latin.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;}

:root{
  /* --- ground. warm, four surfaces, nothing cold ------------------------ */
  --paper:     #F6F2EA;
  --clay:      #E9E0D0;   /* mats: every plate is mounted on this */
  --stone:     #DDD1BD;   /* the contact sheet ground */
  --ink:       #2E211A;
  --ink-soft:  #5C4E42;   /* 7.2:1 on paper, 5.3:1 on stone */
  --paper-dim: #E0CFD9;   /* on the magenta band only */

  --rose:      #EB469A;   /* brand, at full strength. marks and fields only */
  --rose-deep: #8E1B57;   /* the text-bearing magenta. paper on it is 7.7:1 */

  --rule:      rgba(46,33,26,.20);
  --rule-firm: rgba(46,33,26,.42);

  /* --- frame ------------------------------------------------------------ */
  --pad:  clamp(20px, 4.4vw, 76px);
  --maxw: 1440px;
  --col-gap: clamp(14px, 1.7vw, 26px);

  /* --- apparatus: the catalogue voice, one size, used everywhere -------- */
  --ap-size: 11.5px;
  --ap-track: .155em;

  /* --- display ---------------------------------------------------------- */
  --d-title: clamp(52px, 10.4vw, 152px);
  --d-head:  clamp(35px, 4.3vw, 60px);
  --d-quote: clamp(26px, 3.3vw, 46px);

  --s1:8px; --s2:16px; --s3:28px; --s4:44px; --s5:68px;
  --s6:104px; --s7:150px; --s8:200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Newsreader',Georgia,serif;
  font-size:19px;line-height:32px;font-weight:400;
  font-optical-sizing:auto;font-synthesis:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0;padding:0;}
ul,ol{list-style:none;}

:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:'Archivo';font-weight:600;font-size:13px;text-decoration:none;}
.skip:focus{left:0;}

/* --- the frame and its twelve tracks ------------------------------------ */
.frame{width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);}

/* ==========================================================================
   THE APPARATUS
   One typeface, one size, one tracking, everywhere on the site. Archivo held
   narrow so a reference number reads as a stamp and not as a word.
   ========================================================================== */
.ap,.rhead,.nav__list,.slot__ref,.plate__ap,.folio,.colophon .ap-h{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:560;font-stretch:78%;
  font-size:var(--ap-size);line-height:1.45;
  letter-spacing:var(--ap-track);text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.ap--ink{color:var(--ink);}
.ap--rose{color:var(--rose-deep);}
.ap b{font-weight:560;color:var(--ink);}

/* the tick: a solid magenta mark that opens a reference. the site's signature */
.tick{display:inline-block;width:7px;height:7px;background:var(--rose);
  margin-right:11px;vertical-align:.06em;}

/* --- the running head that opens every section -------------------------- */
.rhead{display:flex;align-items:center;gap:14px;
  padding-bottom:10px;border-bottom:1px solid var(--rule-firm);
  margin-bottom:var(--s4);}
.rhead__n{flex:none;display:grid;place-items:center;
  width:24px;height:24px;background:var(--rose);color:#fff;
  font-size:11px;letter-spacing:.02em;font-weight:640;}
.rhead__k{flex:none;color:var(--ink);
  font-size:inherit;font-weight:inherit;line-height:inherit;
  letter-spacing:inherit;font-family:inherit;font-stretch:inherit;}
.rhead__line{flex:1 1 auto;height:1px;background:var(--rule);min-width:12px;}
.rhead__r{flex:none;}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--rule-firm);}
.masthead__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding-block:14px;flex-wrap:wrap;}
.wordmark{display:block;flex:none;}
.wordmark img{width:158px;height:auto;}
.nav__list{display:flex;flex-wrap:wrap;gap:0;}
.nav__list li+li{margin-left:clamp(14px,1.8vw,30px);}
.nav__link{text-decoration:none;color:var(--ink-soft);
  padding-block:4px;display:inline-block;position:relative;}
.nav__link:hover{color:var(--ink);}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--rose);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;}
.nav__link:hover::after,.nav__link[aria-current]::after{transform:scaleX(1);}
.nav__link[aria-current]{color:var(--ink);}
.folio{display:none;flex:none;}
@media (min-width:1120px){.folio{display:block;}}

/* ==========================================================================
   1. THE TYPOGRAPHIC PAGE
   ========================================================================== */
.page-sec{padding-block:var(--s7);}
.page-sec--tight{padding-block:var(--s6);}
/* Two typographic pages in a row do not each need a full section margin: the
   first one's bottom padding is already the gap. Three catalogue groups running
   consecutively were carrying 300px of padding around 443px of content each,
   which is 900px of empty ground inside one list. */
.page-sec + .page-sec{padding-top:0;}


.marg{grid-column:1 / span 2;}
.marg .ap+.ap{margin-top:var(--s2);}
.marg__note{font-family:'Newsreader';font-style:italic;font-weight:300;
  font-size:16px;line-height:25px;color:var(--ink-soft);
  text-transform:none;letter-spacing:0;margin-top:var(--s2);}

.body-col{grid-column:3 / span 7;}
.body-col--in{grid-column:4 / span 6;}
/* the column rule. The open right third is a margin, not a gap, and the rule
   is what says so. Reference works have had one for four hundred years. */
@media (min-width:1025px){
  .body-col{box-shadow:1px 0 0 var(--rule);padding-right:var(--col-gap);}
  .defn{box-shadow:none;}
}

.display{font-weight:300;font-size:var(--d-head);line-height:1.03;
  letter-spacing:-.018em;font-variation-settings:'opsz' 56,'wght' 300;
  max-width:16ch;margin-bottom:var(--s3);text-wrap:balance;}

.ap a{text-decoration:none;color:inherit;
  box-shadow:inset 0 -1px 0 var(--rule);}
.ap a:hover{color:var(--rose-deep);box-shadow:inset 0 -2px 0 var(--rose);}

.prose p{max-width:33em;}
.prose--open p{font-size:clamp(19px,1.35vw,21px);line-height:1.62;max-width:38em;}

/* a displayed definition: prose promoted, the way a reference work displays one */
.defn p{font-weight:340;font-size:clamp(22px,2.05vw,30px);line-height:1.36;
  letter-spacing:-.011em;font-variation-settings:'opsz' 34,'wght' 340;
  max-width:26em;}
.defn{border-left:2px solid var(--rose);padding-left:clamp(18px,2vw,34px);}
.prose p+p{margin-top:var(--s3);}
.prose a{color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--rose),var(--rose));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;}
.prose a:hover{color:var(--rose-deep);background-size:100% 3px;}

/* the frontispiece: type at the largest size on the site, and nothing else */
.front{padding-top:clamp(48px,8vw,116px);padding-bottom:0;}
.front h1{font-weight:250;font-size:var(--d-title);line-height:.90;
  letter-spacing:-.03em;font-variation-settings:'opsz' 72,'wght' 250;
  max-width:12ch;grid-column:3 / span 10;margin-top:-.12em;}
.front--sub{padding-top:clamp(40px,6vw,84px);}
/* The title in three registers, grafted from direction A. One line of the
   sans at apparatus scale, then the serif roman, then the same serif italic:
   the phrase reads as one sentence but arrives in three voices, which is the
   thing a single weight at a single size cannot do however large it is set. */
.front__title{display:block;}
.front__title span{display:block;}
.front__t1{
  font-family:'Archivo',system-ui,sans-serif;
  font-size:clamp(15px,1.2vw,19px);line-height:1.2;
  font-weight:640;font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.42em;
}
.front__t2{font-style:normal;}
.front__t3{font-style:italic;font-variation-settings:'opsz' 72,'wght' 250;}
@media (max-width:640px){
  .front__t1{letter-spacing:.11em;margin-bottom:.5em;}
}


.front h1.h1--sub{font-size:clamp(42px,7.4vw,108px);max-width:15ch;line-height:.94;}
.front__marg{grid-column:1 / span 2;padding-top:.5em;}
.front__lead{grid-column:6 / span 7;margin-top:clamp(36px,4.4vw,74px);
  padding-top:var(--s3);border-top:1px solid var(--rule-firm);}
.front__lead p{font-weight:340;font-size:clamp(20px,1.55vw,23px);
  line-height:1.52;max-width:36em;}
.front__holdings{grid-column:1 / span 12;
  display:flex;justify-content:space-between;gap:var(--s3) var(--s4);flex-wrap:wrap;
  margin-top:clamp(46px,6.4vw,104px);padding-block:13px;
  border-top:1px solid var(--rule-firm);border-bottom:1px solid var(--rule);}

/* ==========================================================================
   2. THE PLATE : one object, mounted, given the screen
   ========================================================================== */
.plate{background:var(--clay);padding-block:clamp(34px,4.4vw,66px);}
.plate__in{display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);align-items:start;}
.plate__ap{grid-column:1 / span 2;display:flex;flex-direction:column;gap:6px;
  padding-top:4px;}
.plate__ap .tick{margin-right:0;}
.plate__mount{grid-column:3 / span 10;
  background:#FBF8F1;padding:clamp(14px,1.5vw,24px);
  box-shadow:0 1px 0 rgba(46,33,26,.10),0 18px 44px -32px rgba(46,33,26,.55);}
.plate__mount img{width:100%;}
/* a tall portrait sheet holds the middle of the frame instead of all of it */
.plate--tall .plate__mount{grid-column:4 / span 7;}
.plate--wide .plate__mount{grid-column:3 / span 10;}

/* the full-bleed plate: the watercolours, no mat, edge to edge.
   Its apparatus runs ABOVE the object as a plate heading, never below it. */
.plate--bleed{padding:0;background:var(--clay);}
.plate--bleed .plate__in{display:block;}
.plate--bleed img{width:100%;}
.plate--bleed .plate__ap{display:flex;flex-direction:row;gap:26px;align-items:center;
  max-width:var(--maxw);margin-inline:auto;padding:18px var(--pad) 14px;}

/* the band: a photograph, cropped hard, given a strip and never a screen */
.strip{position:relative;background:var(--ink);}
.strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(to top,rgba(24,15,10,.86),rgba(24,15,10,0));
  pointer-events:none;}
.strip .plate__ap{z-index:2;}
.strip img{width:100%;height:clamp(210px,30vw,420px);object-fit:cover;
  object-position:center 42%;opacity:.92;}
.strip .plate__ap{position:absolute;left:0;right:0;bottom:0;
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) 18px;
  display:flex;gap:22px;color:var(--paper);}
.strip .plate__ap .ap{color:var(--paper);}

/* ==========================================================================
   3. THE CONTACT SHEET : many objects at once, hairline slots
   ========================================================================== */
.sheetsec{background:var(--stone);
  border-block:1px solid var(--rule-firm);}
.sheetsec__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);padding-block:16px;flex-wrap:wrap;}
.contact{display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--stone);
  border-top:1px solid var(--rule-firm);
  border-right:1px solid var(--rule-firm);}
.slot{background:var(--stone);padding:14px 14px 18px;
  display:flex;flex-direction:column;gap:12px;
  border-left:1px solid var(--rule-firm);
  border-bottom:1px solid var(--rule-firm);}
.slot__ref{display:flex;align-items:center;gap:0;}
.slot__box{display:grid;place-items:center;
  background:#FBF8F1;padding:10px;aspect-ratio:3 / 4;
  box-shadow:0 1px 0 rgba(46,33,26,.09);}
.slot__box img{max-width:100%;max-height:100%;width:auto;height:auto;}
.contact--five{grid-template-columns:repeat(5,1fr);}
/* A contact sheet is a way of holding many drawings at once, which stops being
   true the moment each one is a 150px thumbnail. Below 900 it becomes a
   scroll-snapped rail at a size the drawing can actually be read at, which is
   the same information in the form the screen can carry. */
@media (max-width:900px){
  .contact,.contact--five,.contact--three{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    border-right:0;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .contact::-webkit-scrollbar,
  .contact--five::-webkit-scrollbar{display:none;}
  .contact .slot{flex:0 0 min(74vw,340px);scroll-snap-align:start;}
  .contact:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px;}
}

.contact--three{grid-template-columns:repeat(3,1fr);}
.contact--three .slot__box{aspect-ratio:3 / 2;}

/* ==========================================================================
   4. THE REGISTER : a numbered table, set like a reference work
   ========================================================================== */
.register{border-top:1px solid var(--rule-firm);}
.register li{display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);
  padding-block:var(--s3);border-bottom:1px solid var(--rule);}
.register__n{grid-column:1 / span 1;
  font-family:'Archivo';font-weight:200;font-stretch:80%;
  font-size:clamp(30px,2.8vw,42px);line-height:.86;
  letter-spacing:-.01em;color:var(--rose-deep);
  font-variant-numeric:tabular-nums;}
.register__t{grid-column:2 / span 4;font-weight:400;
  font-size:clamp(21px,1.75vw,26px);line-height:1.22;letter-spacing:-.01em;
  font-variation-settings:'opsz' 40,'wght' 400;padding-top:.1em;}
.register__b{grid-column:7 / span 6;color:var(--ink);}
.register__b p{max-width:38em;}
.register li:hover{background:linear-gradient(90deg,rgba(235,70,154,.06),transparent 62%);}

/* the flow variant: a sentence kept whole, its subject set as the entry term */
.register--flow .register__b{grid-column:2 / span 9;}
.register--flow .register__b p{font-size:clamp(20px,1.6vw,24px);line-height:1.42;
  max-width:44em;}
.lede{font-weight:400;font-style:italic;color:var(--rose-deep);}

/* the short two-column register, home page */
.reg2{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);
  row-gap:var(--s5);}
.reg2__grp{grid-column:span 6;}
.reg2__grp:first-child{grid-column:1 / span 5;}
.reg2__grp:last-child{grid-column:7 / span 5;}
.reg2 h3{margin-bottom:var(--s2);}
.reg2 ol{border-top:1px solid var(--rule-firm);}
.reg2 li{display:flex;gap:18px;align-items:baseline;
  padding-block:18px;border-bottom:1px solid var(--rule);
  font-size:20px;line-height:1.42;}
.reg2 .n{flex:none;font-family:'Archivo';font-weight:300;font-stretch:80%;
  font-size:13px;letter-spacing:.06em;color:var(--rose-deep);
  font-variant-numeric:tabular-nums;position:relative;top:-.15em;}

/* ==========================================================================
   5. THE BAND : one field of colour, one voice
   ========================================================================== */
.band{background:var(--rose-deep);color:var(--paper);
  border-top:9px solid var(--rose);
  padding-block:clamp(66px,8.4vw,132px);}
.band__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);}
.band .ap{color:var(--paper-dim);grid-column:1 / span 2;}
.band blockquote{grid-column:2 / span 10;}
.band blockquote p{font-weight:300;font-size:var(--d-quote);line-height:1.16;
  letter-spacing:-.017em;font-variation-settings:'opsz' 60,'wght' 300;
  max-width:26ch;text-wrap:balance;}
.band cite{display:block;margin-top:var(--s4);font-style:normal;
  padding-top:16px;border-top:1px solid rgba(246,242,234,.34);max-width:34em;}
.band cite b{font-family:'Archivo';font-weight:600;font-stretch:82%;
  font-size:var(--ap-size);letter-spacing:var(--ap-track);
  text-transform:uppercase;color:var(--paper);display:block;}
.band cite span{display:block;margin-top:5px;font-size:17px;line-height:1.4;
  color:var(--paper-dim);}

/* ==========================================================================
   THE ASK : one sentence, one full stop, no button anywhere on this site
   ========================================================================== */
.ask{padding-block:var(--s6) var(--s7);}
.ask__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);}
.ask .ap{grid-column:1 / span 2;padding-top:.9em;}
.ask a{grid-column:3 / span 9;text-decoration:none;
  font-weight:280;font-size:clamp(35px,4.6vw,64px);line-height:1.05;
  letter-spacing:-.025em;font-variation-settings:'opsz' 66,'wght' 280;
  max-width:15ch;display:block;
  background-image:linear-gradient(var(--rose),var(--rose));
  background-size:0% 4px;background-repeat:no-repeat;background-position:0 96%;
  transition:background-size .34s cubic-bezier(.2,.7,.3,1);}
.ask a:hover{background-size:100% 4px;}

/* ==========================================================================
   COLOPHON
   ========================================================================== */
.colophon{background:var(--clay);border-top:1px solid var(--rule-firm);
  padding-block:var(--s5) var(--s3);}
.colophon__in{display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);row-gap:var(--s4);}
.colophon__mark{grid-column:1 / span 4;}
.colophon__mark img{width:150px;margin-bottom:18px;}
.colophon__mark p{font-size:17px;line-height:1.5;max-width:26em;color:var(--ink-soft);}
.colophon__col{grid-column:span 2;}
.colophon__col:nth-of-type(2){grid-column:6 / span 2;}
.colophon__col:nth-of-type(3){grid-column:8 / span 2;}
.colophon__col:nth-of-type(4){grid-column:10 / span 3;}
.colophon .ap-h{color:var(--ink);margin-bottom:14px;
  padding-bottom:9px;border-bottom:1px solid var(--rule-firm);}
.colophon ul li{font-size:17px;line-height:1.45;padding-block:5px;}
.colophon a{text-decoration:none;}
.colophon a:hover{color:var(--rose-deep);}
.colophon address{font-style:normal;font-size:17px;line-height:1.45;color:var(--ink-soft);}
.colophon__base{grid-column:1 / span 12;display:flex;gap:var(--s4);flex-wrap:wrap;
  padding-top:var(--s3);border-top:1px solid var(--rule-firm);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .front h1{grid-column:1 / span 12;max-width:13ch;}
  .front__marg{grid-column:1 / span 12;padding-bottom:var(--s3);
    display:flex;gap:var(--s3);flex-wrap:wrap;}
  .front__marg .ap+.ap{margin-top:0;}
  .front__lead{grid-column:1 / span 12;}
  .marg{grid-column:1 / span 12;margin-bottom:var(--s3);
    display:flex;gap:var(--s3);flex-wrap:wrap;align-items:baseline;}
  .marg .ap+.ap{margin-top:0;}
  .marg__note{width:100%;margin-top:0;}
  .body-col,.body-col--in{grid-column:1 / span 12;}
  .plate__ap{grid-column:1 / span 12;flex-direction:row;flex-wrap:wrap;gap:16px;
    margin-bottom:18px;}
  .plate__mount,.plate--tall .plate__mount,.plate--wide .plate__mount{grid-column:1 / span 12;}
  .register li{row-gap:10px;}
  .register__n{grid-column:1 / span 12;font-size:26px;}
  .register__t{grid-column:1 / span 12;}
  .register__b{grid-column:1 / span 12;}
  .reg2__grp:first-child,.reg2__grp:last-child,.reg2__grp{grid-column:1 / span 12;}
  .band .ap{grid-column:1 / span 12;margin-bottom:var(--s3);}
  .band blockquote{grid-column:1 / span 12;}
  .band blockquote p{max-width:22ch;}
  .ask .ap{grid-column:1 / span 12;padding-top:0;margin-bottom:var(--s2);}
  .ask a{grid-column:1 / span 12;}
  .colophon__mark{grid-column:1 / span 12;}
  .colophon__col,
  .colophon__col:nth-of-type(2),
  .colophon__col:nth-of-type(3),
  .colophon__col:nth-of-type(4){grid-column:span 6;}
  .contact{grid-template-columns:repeat(3,1fr);}
  .contact--five{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  body{font-size:18px;line-height:30px;}
  :root{--s7:96px;--s6:74px;}
  .masthead__in{padding-block:11px;row-gap:9px;}
  .wordmark img{width:132px;}
  .nav__list{width:100%;gap:0 clamp(12px,3.6vw,20px);}
  .nav__list li+li{margin-left:0;}
  .front h1{max-width:none;letter-spacing:-.028em;}
  .contact,.contact--five,.contact--six{grid-template-columns:repeat(2,1fr);}
  .slot__box img{height:150px;}
  .prose p{max-width:none;}
  .display{max-width:none;}
  .colophon__col,
  .colophon__col:nth-of-type(2),
  .colophon__col:nth-of-type(3),
  .colophon__col:nth-of-type(4){grid-column:span 12;}
  .rhead{gap:10px;}
  .front__holdings{gap:14px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ==========================================================================
   MEASURE, AND THE APPARATUS THAT WILL NOT FIT
   Between 640 and 1024 the body column takes the whole frame, and at 1024 that
   is 72 characters of 19px prose, seven over the ceiling this system sets for
   itself. A ch-based ceiling holds it at every width without a breakpoint.
   ========================================================================== */
/* 64ch measured 71 real characters, because ch is the width of the zero and
   the average glyph in this serif is narrower than that. 56ch lands at 62. */
.prose p,
.prose li,
.front__lead p,
.body-col > p,
.defn p,
.marg__note,
.band cite span,
.register__b p,
.register__b span,
.register li > span,
.register li span:last-child,
.reg2 li span:last-child,
.register--flow .register__b p{max-width:56ch;}
/* em ceilings inside the register were set against their own font size and
   came out at 76 to 86 characters. ch, capped once, governs all of them. */

/* The right-hand item of a running head is apparatus: useful when there is
   room, noise when there is not. It was pushing 3.5px past the page margin at
   390 rather than giving way. */
@media (max-width:720px){
  .rhead__r{display:none;}
}
/* A contact slot's rule sat outside the frame at tablet widths, so the
   photographs began 9px nearer the edge than any text on the page. */
@media (min-width:641px) and (max-width:1024px){
  .contact,.contact--five,.contact--three{margin-inline:var(--pad);border-right:0;}
}
/* The colophon's closing line is apparatus, but 95 characters of it is a
   paragraph wearing a label's clothes. */
.colophon__base .ap{max-width:52ch;}

/* A grid item's min-height resolves to min-content, so an image taller than its
   slot ratio cannot shrink and drags the whole row with it: dam6051 at 900x857
   made one slot 410px against its neighbours' 287px. Reported by the build,
   confirmed here, and it would have bitten the first mixed-format sheet. */
.slot__box img{min-height:0;min-width:0;}
/* Two blocks inside a register entry had no space between them, because only
   .prose carries that margin. */
.register__b > * + *{margin-top:var(--s2);}
/* The one browser-default underline left on the site. */
.register__t a{text-decoration:none;
  background-image:linear-gradient(var(--rose),var(--rose));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;}
.register__t a:hover{color:var(--rose-deep);background-size:100% 2px;}
/* The contact sheet sat 25px off the screen: nearer the edge than any text but
   not bleeding either. Bleeding it with a negative margin pushed 63px past the
   viewport on ten pages, because its container is already full width. It is
   inset to the page margin instead, so the drawings line up with the prose. */
@media (min-width:1025px){
  .sheetsec > .contact{margin-inline:calc(var(--pad) - 15px);}
}

/* ==========================================================================
   AFTER THE APPARATUS
   The catalogue voice, its reference stamps, its section numerals and its
   counts of its own entries were performance: they made the page look rigorous
   and told a reader nothing. What replaces them is a section heading that says
   what the section is about, and a meta line that carries a real fact.
   ========================================================================== */
.secline{
  font-family:'Archivo',system-ui,sans-serif;font-stretch:104%;
  font-size:clamp(15px,1.15vw,17px);line-height:1.3;font-weight:600;
  letter-spacing:.015em;color:var(--ink);
  padding-bottom:10px;margin:0 0 var(--s4);
  border-bottom:1px solid var(--rule-firm);
}
.sublabel{
  font-family:'Archivo',system-ui,sans-serif;font-stretch:104%;
  font-size:14px;line-height:1.3;font-weight:600;letter-spacing:.015em;
  color:var(--ink);margin:0 0 var(--s2);
}
.meta{
  font-family:'Archivo',system-ui,sans-serif;font-stretch:100%;
  font-size:15px;line-height:24px;font-weight:450;color:var(--ink-soft);
  margin:0;letter-spacing:.004em;
}
.colophon__base .meta{max-width:52ch;}

/* With the margin apparatus gone the body column ran the whole frame but kept
   its 56ch measure, stranding every passage in the left third with two thirds
   of the page empty beside it. Heading left, prose right: it uses the width,
   it reads, and it is not a picture beside a paragraph. */
.grid > .body-col,.grid > .body-col--in{grid-column:1 / span 12;}
.body-col{box-shadow:none;padding-right:0;}
@media (min-width:1025px){
  .body-col,.body-col--in{
    display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
    column-gap:clamp(40px,5vw,96px);align-items:start;
  }
  .body-col > h2,.body-col--in > h2{grid-column:1;margin:0;}
  .body-col > .prose,.body-col > p,
  .body-col--in > .prose,.body-col--in > p{grid-column:2;}
  .body-col > .defn,.body-col--in > .defn{grid-column:1 / -1;}
}
/* Six magenta numerals counting to six is decoration, and this project already
   has a rule saying counts are not a value. */
.reg2 li .n,.register li > .n,.register__n{display:none;}

/* ==========================================================================
   MOBILE: NAVIGATION, AND ROOM FOR THE DRAWINGS
   Three measured faults at 320 and 390: the six nav links wrapped onto two
   rows and gave a fifth of the screen to navigation before any content; their
   tap targets were 25px against a 44px standard; and a dense hand-drawn sheet
   was rendered 252px wide inside a mat that was eating the width it needed.
   ========================================================================== */
@media (max-width:900px){
  /* Six links, all visible. A scrolling row showed two of six at 390 and hid
     Approach off the left edge; a disclosure button is the most template-like
     object there is. Two compact rows, every destination reachable in one tap,
     and the masthead held to the height that was the actual fault: it was 120px
     before, a fifth of a phone screen spent before any content. */
  /* Not sticky on a phone. Six links in two rows is 124px, and a sticky bar
     spends that height for the whole scroll. Let it go with the page: every
     destination is still one tap away at the top, and the content gets the
     screen back. */
  .masthead{position:static;}
  .masthead__in{flex-wrap:wrap;gap:2px var(--s2);align-items:center;padding-block:8px;}
  .wordmark img{width:112px;}
  .nav{flex:1 1 100%;min-width:0;}
  .nav__list{flex-wrap:wrap;gap:0 clamp(12px,3.4vw,20px);justify-content:flex-start;}
  .nav__list li{flex:0 0 auto;}
  .nav__list li+li{margin-left:0;}
  .nav__link{
    /* 9px gave a 36px target; 13px clears the 44px standard. */
    padding-block:13px;white-space:nowrap;
    font-size:12.5px;letter-spacing:.07em;
  }
}
@media (max-width:900px){
  /* The mat is a gesture that only works when there is width to spare. */
  .plate{padding-block:var(--s4);}
  .plate__mount{padding:10px;}
  .plate--tall .plate__in,.plate__in{max-width:none;}
  /* The mount kept its desktop grid span, so a portrait sheet took seven of
     twelve columns on a phone and rendered 264px wide. It takes the width. */
  .plate__mount,
  .plate--tall .plate__mount,
  .plate--wide .plate__mount{grid-column:1 / -1;}
  .plate__mount img{width:100%;height:auto;max-height:none;}
}
@media (max-width:560px){
  .plate{padding-inline:0;}
  .plate__mount{padding:8px;}
}

/* Removing the container labels left some passages with no heading. Those
   should take the frame, not sit in the right half of a two-column
   arrangement whose left half is now empty. */
@media (min-width:1025px){
  .body-col--solo{display:block;}
  .body-col--solo > .prose{max-width:64ch;}
}

/* ==========================================================================
   HOME: THE SIX PROGRAMS, SHOWN THE WAY A SCHOOL SHOWS THEM
   Tom, 2026-08-12: the front page opened on a wall of text and then a system
   diagram, which is not how anyone arrives at a school. What a visitor wants
   first is what they can take, how long it runs and what it covers. The
   courses now sit on the screen after the title, each with its own
   photograph. This is the one place a picture and words belong together:
   a card is a single object, not a paragraph parked beside a picture.
   ========================================================================== */
.front--home,.front--sub{padding-bottom:clamp(40px,5vw,84px);}

.strip--hero img{height:clamp(280px,40vw,560px);}
.strip--hero::after{content:none;}

.display--lead{max-width:24ch;margin-bottom:clamp(38px,4vw,64px);}

.courses{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--col-gap);row-gap:clamp(38px,3.8vw,62px);
}
.courses li{display:flex;}
.course{display:flex;flex-direction:column;width:100%;
  text-decoration:none;color:inherit;}
.course__img{
  width:100%;aspect-ratio:3 / 2;object-fit:cover;background:var(--stone);
  transition:opacity .3s ease;
}
.course__t{
  margin-top:var(--s2);font-family:'Newsreader',Georgia,serif;
  font-weight:400;font-size:clamp(21px,1.55vw,25px);line-height:1.2;
  letter-spacing:-.008em;font-variation-settings:'opsz' 32,'wght' 400;
  background-image:linear-gradient(var(--rose),var(--rose));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s cubic-bezier(.2,.7,.3,1);
  display:inline;
}
.course__d{margin-top:14px;font-size:18px;line-height:1.5;color:var(--ink-soft);}
.course__m{margin-top:auto;padding-top:10px;border-top:1px solid var(--rule);}
.course__d{margin-bottom:14px;}
.course:hover .course__t{background-size:100% 2px;}
.course:hover .course__img{opacity:.9;}
.course:focus-visible{outline:2px solid var(--rose-deep);outline-offset:6px;}

.courses__note{
  margin-top:clamp(44px,4.4vw,72px);padding-top:18px;
  border-top:1px solid var(--rule-firm);
  max-width:62ch;font-size:18px;line-height:1.55;color:var(--ink-soft);
}
.courses__note a{color:var(--ink);text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--rule-firm);}
.courses__note a:hover{color:var(--rose-deep);box-shadow:inset 0 -2px 0 var(--rose);}

/* What a participant can do afterwards. Six lines in two parallel columns
   read as a constructed pattern rather than as information; one plain list
   of plain sentences does the same job without performing. */
.outcomes{margin-top:var(--s3);max-width:38em;}
.outcomes li{padding:11px 0;border-bottom:1px solid var(--rule);}
.outcomes li:first-child{border-top:1px solid var(--rule);}

@media (max-width:1024px){
  .courses{grid-template-columns:repeat(2,1fr);row-gap:clamp(32px,4vw,48px);}
}
@media (max-width:620px){
  .courses{grid-template-columns:1fr;row-gap:38px;}
  .course__d{font-size:17px;}
  .strip--hero img{height:clamp(220px,52vw,320px);}
}


/* ==========================================================================
   THE SiD MARK, AND THE CLIENT WALL
   The framework has its own logo and the site never showed it. The clients
   are the wall published on except.design, which is where they are verified.
   ========================================================================== */
.sidmark{width:clamp(64px,6vw,92px);height:auto;margin-bottom:var(--s2);}

.clients{padding-block:var(--s6);}
.clients__grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.clients__grid li{
  display:grid;place-items:center;min-height:clamp(88px,9vw,132px);padding:20px;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.clients__grid img{max-width:min(140px,100%);max-height:46px;width:auto;height:auto;opacity:.72;}
@media (max-width:900px){.clients__grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:420px){.clients__grid{grid-template-columns:repeat(2,1fr);}}

/* The SiD film, as published on thinksid.org, same sources. */
.film{padding-block:0 var(--s6);}
.film__player{width:100%;height:auto;display:block;background:var(--ink);}


/* Tap targets: the colophon links and the contact details were 16-17px high on
   a phone, against the 44px standard the masthead already meets. */
@media (max-width:700px){
  .colophon__col a,
  .colophon__base a{display:inline-block;padding-block:12px;}
  .colophon__col li + li{margin-top:2px;}
  .contact-lines a{display:inline-block;padding-block:10px;}
}

/* ==========================================================================
   GALLERY: a plate that holds several sheets instead of one
   The drawings come in families, so a single mounted sheet stood in for a
   set. The track scrolls and snaps on its own; the controls are a
   convenience for a mouse, and the whole thing works with them removed.
   ========================================================================== */
.gallery{background:var(--clay);padding-block:clamp(30px,3.6vw,56px);}
.gallery__track{
  display:flex;gap:clamp(14px,1.6vw,26px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;
}
.gallery__track::-webkit-scrollbar{display:none;}
.gallery__track:focus-visible{outline:2px solid var(--rose-deep);outline-offset:6px;}
.gallery__item{
  flex:0 0 auto;scroll-snap-align:center;
  background:var(--paper);padding:clamp(10px,1.1vw,18px);
  box-shadow:0 1px 0 rgba(46,33,26,.10);
}
.gallery__item img{
  display:block;height:clamp(300px,42vw,600px);width:auto;max-width:none;
}
.gallery__bar{
  display:flex;align-items:center;gap:18px;
  margin-top:clamp(14px,1.4vw,22px);
}
.gallery__btn{
  appearance:none;background:none;border:0;cursor:pointer;
  font-family:'Newsreader',Georgia,serif;font-size:26px;line-height:1;
  color:var(--ink-soft);padding:8px 10px;
}
.gallery__btn:hover{color:var(--rose-deep);}
.gallery__btn[disabled]{opacity:.28;cursor:default;}
.gallery__count{font-family:'Archivo',system-ui,sans-serif;font-stretch:100%;
  font-size:12.5px;letter-spacing:var(--ap-track);text-transform:uppercase;
  color:var(--ink-soft);}
.gallery__rule{flex:1 1 auto;height:1px;background:var(--rule);}
@media (max-width:640px){
  /* A dense hand-drawn sheet at 240px tall is unreadable. On a phone each
     sheet takes the width instead, so a portrait sheet gets its height. */
  .gallery__item img{height:auto;width:min(76vw,420px);max-height:78vh;}
  .gallery__item{scroll-snap-align:center;}
}