/* Buildner Books: the story section of a book page (book_story.py builds it, book-story.js mounts it).
   Page tokens only (ink, paper, muted, line, yellow, surface), Graphik and the Gelasio italic accent.
   Type, nothing else: section title (h2, with the italic line), one h3 size, lead, body, one small grey
   line, and the page's eyebrow labels. */
.bs{--bs-gap:clamp(16px,2vw,32px);--bs-body:#3d3d39;padding-bottom:40px}
.bs-wrap{padding-left:var(--ad-pad);padding-right:var(--ad-pad)}
.bs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bs-gap)}
/* the page already keeps 105px clear under its sticky header (scroll-padding); sections start with
   empty padding, so they may tuck a little under it */
#inside,.bs section[id]{scroll-margin-top:-56px}
.bs h2{font-size:clamp(42px,4.4vw,68px);margin-top:20px}
.bs-h3,.bs-jury h3{font-size:clamp(28px,2.6vw,40px);letter-spacing:-.05em;line-height:1.1}
.bs p{font-size:16px;line-height:1.65;color:var(--bs-body)}
.bs .bs-lead{font-size:20px;line-height:1.55;letter-spacing:-.01em;color:var(--ink)}
.bs .bs-small,.bs-small{font-size:13px;line-height:1.5;color:var(--muted)}
.bs .eyebrow{font-size:12px;line-height:1.4;color:var(--ink)}
.bs-row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--bs-gap)}
.bs-side{max-width:340px}

/* Opening */
.bs-intro{padding-top:96px}
.bs-intro .bs-head{grid-column:1/span 6}
.bs-intro .bs-lead{grid-column:8/span 5;align-self:end}
.bs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--bs-gap);margin:64px 0 0;border-top:1px solid var(--ink)}
.bs-facts>div{padding-top:22px}
.bs-facts dt{font-size:clamp(42px,4.4vw,68px);letter-spacing:-.065em;line-height:1}
.bs-facts dd{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.bs-jump{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:40px}
.bs-jump a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;border-bottom:1px solid var(--ink)}

/* Photos of the printed book */
.bs-photos-block{padding-top:110px}
.bs-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bs-gap);list-style:none;margin:36px 0 0;padding:0}
.bs-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#efeee8}

/* Real spreads, scrolled sideways */
.bs-spreads{padding-top:110px}
.bs-spreads .bs-side{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.bs-spreads .bs-side p{text-align:right}
.bs-arrows{display:flex;gap:10px}
.bs-arrows button{width:48px;height:48px;min-height:48px;padding:0;justify-content:center;border:1px solid var(--ink);border-radius:50%;font-size:18px;transition:background .18s,opacity .18s}
.bs-arrows button:hover{background:var(--yellow)}
.bs-arrows button:disabled{opacity:.3;cursor:default;background:none}
.bs-strip{display:flex;gap:20px;list-style:none;margin:36px 0 0;padding:0 var(--ad-pad) 18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--ad-pad);scrollbar-width:thin;scrollbar-color:#bdbdb4 transparent;overscroll-behavior-x:contain}
.bs-strip:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.bs-strip>li{flex:0 0 min(1040px,74vw);scroll-snap-align:start}
.bs-strip figure{margin:0}
.bs-strip img{width:100%;background:#fff;box-shadow:0 0 0 1px var(--line)}
.bs-strip figcaption{margin-top:12px}

/* The brief and the eight criteria */
.bs-brief{padding-top:120px}
.bs-brief .bs-head{grid-column:1/span 7}
.bs-text{grid-column:9/span 4;align-self:end;display:grid;gap:18px}
.bs-list-title{margin-top:88px}
.bs-criteria{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--bs-gap);list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--ink)}
.bs-criteria li{padding:20px 0 26px;border-bottom:1px solid var(--line)}
.bs-criteria strong{display:block;margin:10px 0 6px;font-size:16px;font-weight:700;letter-spacing:-.01em}

/* The jury, a dark band */
.bs-jury{margin-top:110px;padding:88px 0;background:var(--ink);color:#fff}
.bs-jury .eyebrow{color:#fff}
.bs-jury .bs-head{grid-column:1/span 4}
.bs-jury h3{margin-top:20px}
.bs-people{grid-column:6/span 7;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--bs-gap);list-style:none;margin:0;padding:0;align-self:end}
.bs-people li{padding:16px 0;border-top:1px solid #3a3a37}
.bs-people strong{display:block;font-size:16px;font-weight:400}
.bs-people span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:#b9b9b1}

/* Case studies */
.bs-cases{padding-top:120px}
.bs-cases+.bs-quote{margin-top:110px}
.bs-quote+.bs-cases{padding-top:0}
.bs-case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bs-gap);align-items:start;margin-top:96px}
.bs-case-images{grid-column:1/span 7;grid-row:1}
.bs-case-text{grid-column:9/span 4;grid-row:1;position:sticky;top:124px;display:grid;gap:14px}
.bs-case-head,.bs-case-body{display:grid;gap:14px}
.bs-case:nth-of-type(even) .bs-case-images{grid-column:6/span 7}
.bs-case:nth-of-type(even) .bs-case-text{grid-column:1/span 4}
.bs-main{width:100%;background:#efeee8}
.bs-pair{display:flex;gap:12px;margin-top:12px}
.bs-pair img{flex:var(--ar) 1 0;width:0;min-width:0;background:#efeee8}
.bs-num{padding-bottom:10px;border-bottom:1px solid var(--ink)}
.bs-case-text .eyebrow{margin-top:6px}
.bs-case-text .bs-h3{margin-top:-2px}
.bs .bs-by{margin-top:-6px}
.bs-spec{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.bs-spec li{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink)}

/* A quote from the book */
.bs-quote{margin:110px 0 0;padding:84px 0;background:#f0f0eb}
.bs-quote-img{grid-column:1/span 5;align-self:center}
.bs-quote-img img{width:100%;mix-blend-mode:multiply}
.bs-quote-text{grid-column:7/span 6;align-self:center;display:grid;gap:24px}
.bs-quote blockquote{margin:0}
.bs .bs-quote blockquote p{font-size:clamp(28px,2.6vw,40px);line-height:1.2;color:var(--ink)}
.bs-quote figcaption{display:grid;gap:6px;font-size:16px}

/* Every title, with threads to follow */
.bs-index{padding-top:120px}
.bs-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.bs-filters button{min-height:44px;padding:0 18px;gap:8px;border:1px solid #c6c6be;border-radius:999px;font-size:14px;transition:background .18s,border-color .18s}
.bs-filters button span{color:var(--muted)}
.bs-filters button:hover{border-color:var(--ink)}
.bs-filters button[aria-pressed="true"]{background:var(--yellow);border-color:var(--ink)}
.bs-filters button[aria-pressed="true"] span{color:var(--ink)}
.bs-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px var(--bs-gap);list-style:none;margin:36px 0 0;padding:0}
.bs-tiles li[hidden]{display:none}
.bs-tile-img{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:11%;background:#f0f0eb}
.bs-tile-img img{width:auto;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.bs-tile-img img.bs-tile-page{mix-blend-mode:normal;background:#fff;box-shadow:0 1px 2px rgba(20,20,15,.08),0 8px 22px rgba(20,20,15,.1)}
.bs-tile-case{position:absolute;left:0;top:0;padding:8px 10px;background:var(--yellow);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.bs .bs-tile-name{margin-top:12px;font-size:16px;line-height:1.3;color:var(--ink)}
.bs-tiles .bs-small{margin-top:4px}
.bs-more-row{display:flex;justify-content:center;margin-top:40px}
.bs-more-row[hidden]{display:none}
.bs .bs-more{margin:0;min-height:52px;gap:28px}
.bs .bs-more span{font-size:18px}
.bs-credit{margin-top:56px}

/* Numbered steps, a photo each */
.bs-steps-block,.bs-pages-block,.bs-notes-block{padding-top:110px}
.bs-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bs-gap);list-style:none;margin:36px 0 0;padding:0}
.bs-steps figure{margin:0}
.bs-steps img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#efeee8}
.bs-steps figcaption{display:grid;gap:8px;margin-top:18px}
.bs-steps strong,.bs-notes strong{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}

/* Little black pages, like the notebook's own */
.bs-pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bs-gap);list-style:none;margin:36px 0 0;padding:0}
.bs-page{position:relative;display:flex;flex-direction:column;overflow:hidden;aspect-ratio:80/105;padding:14% 12%;background:var(--ink);box-shadow:0 16px 34px rgba(20,20,20,.12)}
.bs p.bs-h3{font-size:clamp(28px,2.6vw,40px);line-height:1.1}
.bs .bs-page .bs-h3,.bs .bs-sheet-black .bs-h3{color:#fff}
.bs .bs-page-by{margin-top:10px;font-size:13px;line-height:1.5;color:#b9b9b1}
.bs-page-num{position:absolute;right:12%;bottom:6%;font-size:13px;line-height:1;color:#b9b9b1}
.bs .bs-page-lines{margin-top:22px;white-space:pre-line;font-size:14px;line-height:1.6;color:#e6e6e1}
.bs .bs-page-lines:empty{display:none}
.bs .bs-page .bs-page-lines{flex:1 1 0;min-height:0;overflow:hidden;margin-bottom:8%;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.bs-pages>li>p{margin-top:18px}
.bs-page-more{display:flex;flex-direction:column;justify-content:flex-end;background:var(--yellow);box-shadow:none}
.bs .bs-page-more .bs-page-by{color:var(--ink)}
.bs .bs-page-count{font-size:clamp(42px,4.4vw,68px);letter-spacing:-.065em;line-height:1;color:var(--ink)}

/* A spread to draw on */
.bs-doodle{padding-top:120px}
.bs-doodle-text{grid-column:1/span 5;align-self:center;display:grid;gap:24px;justify-items:start}
.bs .bs-turn{margin:0;min-height:52px;gap:28px}
.bs .bs-turn span{font-size:18px}
.bs-doodle-figure{grid-column:7/span 6;margin:0}
.bs-doodle-figure figcaption{margin-top:16px}
.bs-doodle-figure [data-poem]{transition:opacity .2s}
.bs-doodle-figure.is-switching [data-poem]{opacity:0}
.bs-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));box-shadow:0 22px 50px rgba(20,20,20,.14)}
.bs-sheet{position:relative;aspect-ratio:80/105;container-type:inline-size}
.bs-sheet .bs-page-num{bottom:7.9cqw}
.bs-sheet-black{display:flex;flex-direction:column;padding:14% 12%;background:var(--ink)}
.bs .bs-sheet-black .bs-page-lines{margin-bottom:6%}
.bs-sheet-black .bs-page-num{left:12%;right:auto}
.bs-sheet-white{background:#fff}
.bs-sheet-white::before{content:"";position:absolute;inset:0 auto 0 0;z-index:1;width:22px;background:linear-gradient(90deg,rgba(20,20,20,.1),rgba(20,20,20,0));pointer-events:none}
.bs-sheet-white canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 2.5l4 4L8 20l-5.5 1.5L4 16z' fill='%23141414' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 3 21,crosshair}
.bs-sheet-white .bs-page-num{z-index:1;color:var(--muted);pointer-events:none}
.bs .bs-doodle-hint{position:absolute;inset:0;display:grid;place-items:center;padding:0 14%;text-align:center;font-size:16px;line-height:1.5;color:var(--bs-body);pointer-events:none;transition:opacity .3s}
.bs .is-drawn .bs-doodle-hint{opacity:0}
.bs-turning{position:absolute;inset:0;z-index:2;background:#fff center/100% 100% no-repeat;box-shadow:-8px 0 24px rgba(20,20,20,.12);transform-origin:left center;pointer-events:none;animation:bs-turn .55s cubic-bezier(.45,.05,.55,.95) forwards}
@keyframes bs-turn{to{transform:perspective(1600px) rotateY(-90deg)}}

/* Short text cards */
.bs-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--bs-gap);list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--ink)}
.bs-notes li{display:grid;gap:8px;align-content:start;padding:20px 0 26px;border-bottom:1px solid var(--line)}
@media(min-width:1001px){.bs-notes:has(>li:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}}  /* five cards: one row of five, not four and one */

/* A film and its words, side by side (half the page each): the poster with a play button until it is pressed */
.bs-video{padding-top:110px}
.bs-video-grid{align-items:center;row-gap:28px}
.bs-film{grid-column:1/span 6;min-width:0}
.bs-film-box{position:relative;overflow:hidden;width:100%;aspect-ratio:var(--ar,16/9);background:var(--ink)}
.bs-film video,.bs-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--ink)}
.bs .bs-play{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;padding:0}
.bs .bs-play[hidden]{display:none}
.bs-play img{width:100%;height:100%;object-fit:cover}
.bs-play-mark{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--yellow);box-shadow:0 10px 30px rgba(20,20,20,.25);transition:transform .18s}
.bs-play-mark::after{content:"";position:absolute;left:50%;top:50%;margin:-16px 0 0 -9px;border-style:solid;border-width:16px 0 16px 27px;border-color:transparent transparent transparent var(--ink)}
.bs-play:hover .bs-play-mark{transform:scale(1.06)}
.bs-film-time{position:absolute;left:16px;bottom:16px;padding:7px 10px;background:var(--ink);color:#fff;font-size:13px;line-height:1}
.bs-film-text{grid-column:8/span 5;display:grid;gap:18px;justify-items:start}
.bs .bs-film-note{margin-top:6px}
.bs-film-links{display:flex;flex-wrap:wrap;gap:8px 28px}
.bs-film-links a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--ink)}

@media(max-width:1000px){
  .bs-intro .bs-head,.bs-intro .bs-lead,.bs-brief .bs-head,.bs-text,.bs-jury .bs-head,.bs-people,.bs-quote-img,.bs-quote-text{grid-column:1/-1}
  .bs-intro .bs-lead,.bs-text{margin-top:28px}
  .bs-people{margin-top:36px}
  .bs-quote-text{margin-top:36px}
  .bs-quote-img{max-width:560px}
  .bs-criteria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-case{margin-top:80px}
  .bs-case-images,.bs-case:nth-of-type(even) .bs-case-images{grid-column:1/-1}
  /* the heading above the pictures, the story below them */
  .bs-case-text,.bs-case:nth-of-type(even) .bs-case-text{display:contents}
  .bs-case-head{grid-column:1/-1;grid-row:1;margin-bottom:24px;max-width:640px}
  .bs-case-images,.bs-case:nth-of-type(even) .bs-case-images{grid-row:2}
  .bs-case-body{grid-column:1/-1;grid-row:3;margin-top:24px;max-width:640px}
  .bs-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bs-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-steps,.bs-pages,.bs-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-steps,.bs-pages{row-gap:44px}
  .bs-doodle-text,.bs-doodle-figure{grid-column:1/-1}
  .bs-doodle-figure{width:100%;max-width:640px;margin-top:44px}
  .bs-video-grid{row-gap:0}
  .bs-film-text{display:contents}
  .bs-film-text>.bs-head{grid-column:1/-1;grid-row:1;margin-bottom:28px}
  .bs-film{grid-column:1/-1;grid-row:2}
  .bs-film-text>.bs-film-note,.bs-film-text>.bs-film-credit,.bs-film-text>.bs-film-links{grid-column:1/-1;max-width:640px}
  .bs-film-text>.bs-film-note{grid-row:3;margin-top:24px}
  .bs-film-text>.bs-film-credit{grid-row:4;margin-top:12px}
  .bs-film-text>.bs-film-links{grid-row:5;margin-top:12px}
}
@media(max-width:700px){
  .bs h2,.bs-facts dt,.bs .bs-page-count{font-size:45px}
  .bs h2{margin-top:16px}
  .bs .bs-lead{font-size:18px}
  .bs-row{display:block}
  .bs-side{margin-top:20px}
  .bs-intro{padding-top:64px}
  .bs-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;row-gap:8px}
  .bs-jump{gap:4px 24px;margin-top:28px}
  .bs-spreads,.bs-brief,.bs-cases,.bs-index,.bs-photos-block{padding-top:80px}
  .bs-photos{gap:8px;margin-top:28px}
  .bs-spreads .bs-side{align-items:flex-start}
  .bs-spreads .bs-side p{text-align:left}
  .bs-arrows{display:none}
  .bs-strip{gap:12px;margin-top:28px}
  .bs-strip>li{flex-basis:86vw}
  .bs-list-title{margin-top:56px}
  .bs-criteria{grid-template-columns:minmax(0,1fr)}
  .bs-criteria li{padding:16px 0 18px}
  .bs-jury{margin-top:80px;padding:64px 0}
  .bs-people{grid-template-columns:minmax(0,1fr)}
  .bs-case{margin-top:64px}
  .bs-pair{gap:8px;margin-top:8px}
  .bs-quote,.bs-cases+.bs-quote{margin-top:80px;padding:56px 0}
  .bs-filters{flex-wrap:nowrap;overflow-x:auto;margin:28px calc(var(--ad-pad) * -1) 0;padding:0 var(--ad-pad) 6px;scrollbar-width:none}
  .bs-filters::-webkit-scrollbar{display:none}
  .bs-filters button{flex:0 0 auto}
  .bs-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;margin-top:24px}
  .bs .bs-tile-name{font-size:16px}
  .bs-tile-case{padding:6px 8px}
  .bs-steps-block,.bs-pages-block,.bs-notes-block,.bs-doodle{padding-top:80px}
  /* steps and pages become a row to swipe, like the spreads */
  .bs-steps,.bs-pages{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:28px calc(var(--ad-pad) * -1) 0;padding:0 var(--ad-pad) 14px;scroll-padding:0 var(--ad-pad);scrollbar-width:none;overscroll-behavior-x:contain}
  .bs-steps::-webkit-scrollbar,.bs-pages::-webkit-scrollbar{display:none}
  .bs-steps>li{flex:0 0 72vw;scroll-snap-align:start}
  .bs-pages>li{flex:0 0 62vw;scroll-snap-align:start}
  .bs-notes{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .bs-notes li{padding:16px 0 18px}
  .bs-doodle-text{gap:20px}
  .bs-doodle-figure{margin-top:36px}
  /* the page is small on a phone: the poem title takes the lead size, the prompt the small one */
  .bs-spread{grid-template-columns:minmax(0,1fr)}
  .bs-sheet-white::before{inset:0 0 auto 0;width:auto;height:18px;background:linear-gradient(180deg,rgba(20,20,20,.1),rgba(20,20,20,0))}
  .bs .bs-doodle-hint{padding:0 10%;font-size:13px;color:var(--muted)}
  .bs-sheet-black,.bs-page{padding:14% 11%}
  /* on a phone: the heading, the film from edge to edge, then its words */
  .bs-video{padding-top:80px}
  .bs-film{margin:0 calc(var(--ad-pad) * -1)}
  .bs-play-mark{width:72px;height:72px;margin:-36px 0 0 -36px}
  .bs-play-mark::after{margin:-12px 0 0 -7px;border-width:12px 0 12px 21px}
  .bs-film-time{left:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.bs-strip{scroll-behavior:auto}.bs-play-mark{transition:none}}