/* Sarah's brand book: every chapter is a drawing sheet with its own title block. */

.bk-sheet{position:relative;padding-block:var(--s8) calc(var(--s7) + 40px);border-top:1px solid var(--rule)}
.bk-sheet .wrap{position:relative}
.tb{position:absolute;right:calc(var(--margin) + 6px);bottom:var(--s5);display:grid;grid-template-columns:auto auto auto;border:1px solid var(--rule-2)}
.tb>*{padding:7px 12px;border-left:1px solid var(--rule-2);white-space:nowrap}
.tb>:first-child{border-left:0}
.tb b{font-weight:600;color:var(--ink)}
@media (max-width:700px){.tb{position:static;margin:var(--s6) 0 0 calc(var(--margin) + 6px);grid-template-columns:1fr;width:max-content}.tb>*{border-left:0;border-top:1px solid var(--rule-2)}.tb>:first-child{border-top:0}}

.bk-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gutter);align-items:end;margin-bottom:var(--s7)}
@media (max-width:899px){.bk-head{grid-template-columns:1fr;gap:var(--s4)}}
.bk-head .num{font:300 italic clamp(64px,7vw,120px)/.8 var(--serif);color:var(--accent);letter-spacing:-.04em}

.story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s5) clamp(32px,5vw,96px);align-items:start;margin-bottom:var(--s7)}
@media (max-width:899px){.story{grid-template-columns:1fr}}
.story-main{display:grid;gap:1em;max-width:36em}
.story-main p{font-size:clamp(18px,.3vw + 16.8px,21px);line-height:1.6;text-wrap:pretty}
.story-main p.first{font:300 clamp(22px,.8vw + 19px,30px)/1.38 var(--serif)}
.notes{display:grid;gap:var(--s4);padding-top:8px;border-top:1px solid var(--rule)}

/* cover */
.bk-cover{min-height:calc(100svh - var(--strip));display:grid;align-content:center;padding-block:var(--s7);overflow:hidden}
.bk-cover .grid{align-items:center}
.bk-cover .txt{grid-column:1 / span 6}
.bk-cover .art{grid-column:7 / span 6}
@media (max-width:899px){.bk-cover .txt,.bk-cover .art{grid-column:1 / -1}}
.bk-cover .hero{margin-top:var(--s5)}
.bk-cover .sub{margin-top:var(--s5);max-width:26em}
.scales{display:flex;align-items:flex-end;gap:0;margin-top:var(--s6);max-width:560px}
.scales span{flex:1;min-width:0;white-space:nowrap;position:relative;padding-top:14px;border-top:1px solid var(--ink);font:500 10.5px/1 var(--mono);font-stretch:87.5%;letter-spacing:.04em;color:var(--ink-2)}
.scales span::before{content:"";position:absolute;left:0;top:-6px;width:1px;height:11px;background:var(--ink)}
.scales span:nth-child(odd){border-top-width:3px}
.scales span:last-child::after{content:"";position:absolute;right:0;top:-6px;width:1px;height:11px;background:var(--ink)}

/* scale ladder */
.ladder{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:1100px){.ladder{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rung{display:grid;gap:10px;align-content:start}
.rung .pic{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--rule)}
.rung .pic img{width:100%;height:100%;object-fit:cover}
.rung .pic.contain img{object-fit:contain;padding:8%;mix-blend-mode:var(--draw-blend)}
.rung b{font:400 19px/1.2 var(--serif)}
.rung .mono{color:var(--accent)}

/* lettering wall */
.letters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--gutter)}
@media (max-width:700px){.letters{grid-template-columns:1fr}}
.letters figure{display:grid;gap:8px;padding:var(--s4) 0;border-top:1px solid var(--rule)}
.letters img{height:clamp(34px,4vw,56px);width:auto;max-width:100%}
.rule-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin-top:var(--s6)}
@media (max-width:700px){.rule-pair{grid-template-columns:1fr}}
.rule-pair>div{padding:var(--s5);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--rule)}
.rule-pair .demo-title{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin:12px 0 16px}
.rule-pair .h3{color:#24201C}
.rule-pair .note{color:#5E574E}
.rule-pair .label{color:#5E574E}

/* swatches with their source */
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--gutter)}
@media (max-width:1000px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sw{display:grid;gap:4px;align-content:start}
.sw .pair{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:2/1.1;margin-bottom:10px;box-shadow:inset 0 0 0 1px var(--rule)}
.sw .pair img{width:100%;height:100%;object-fit:cover}
.sw .pair span{background:var(--c)}
.sw b{font:400 20px/1.2 var(--serif)}
.sw code{font:500 11.5px/1.5 var(--mono);font-stretch:87.5%;color:var(--ink-2)}
.sw .use{font-size:15px;line-height:1.45;color:var(--ink-2);margin-top:4px}
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin-top:var(--s6)}
@media (max-width:800px){.modes{grid-template-columns:1fr}}
.mode{padding:var(--s5);display:grid;gap:12px}
.mode.day{background:#F6F2EA;color:#24201C}
.mode.night{background:#0F2747;color:#E9EEF4}
.mode .label{color:inherit;opacity:.75}
.mode img{width:100%}
.mode.day img{mix-blend-mode:multiply}
.mode.night .wd img{filter:invert(1) hue-rotate(180deg) saturate(.7);mix-blend-mode:screen}
.mode.night .wc{background:#F3EFE6;padding:10px;box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.mode .duo{display:grid;grid-template-columns:3fr 2fr;gap:14px;align-items:center}

/* type */
.faces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:800px){.faces{grid-template-columns:1fr}}
.face{padding-top:var(--s4);border-top:1px solid var(--rule-2);display:grid;gap:10px;align-content:start}
.face .aa{font-size:clamp(88px,9vw,150px);line-height:.9}
.roles{margin-top:var(--s6)}
.role{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,7fr) minmax(0,3fr);gap:var(--s4) var(--gutter);padding:var(--s4) 0;border-top:1px solid var(--rule);align-items:baseline}
@media (max-width:900px){.role{grid-template-columns:1fr}}
.role .sample{min-width:0;overflow-wrap:anywhere}
.role dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font:500 11.5px/1.55 var(--mono);font-stretch:87.5%;color:var(--ink-2)}
.role dt{text-transform:uppercase;letter-spacing:.08em;font-size:10px}

/* the sheet */
.anatomy{display:grid;gap:var(--s5)}
.strip-demo{position:relative;height:var(--strip);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,2fr) minmax(0,2fr) 56px;border:1px solid var(--rule-2);background:var(--paper)}
.strip-demo>*{display:flex;align-items:center;gap:10px;padding-inline:12px;border-left:1px solid var(--rule);white-space:nowrap;overflow:hidden}
.strip-demo>:first-child{border-left:0}
.callouts{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,2fr) minmax(0,2fr) 56px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.callouts>*{padding:10px 12px 0;border-left:1px dashed var(--rule-2)}
.callouts .span2{grid-column:4 / 6}
@media (max-width:800px){.strip-demo,.callouts{grid-template-columns:1fr 1fr}.callouts>*{border-left:0}.callouts .span2{grid-column:auto}
  .strip-demo{height:auto}.strip-demo>*{min-height:40px}.strip-demo>:nth-child(n+3){border-top:1px solid var(--rule)}.strip-demo>:nth-child(3){border-left:0}.strip-demo>:last-child{display:none}.strip-demo .k{display:none}}
.sheets{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gutter);margin-top:var(--s6);align-items:start}
@media (max-width:900px){.sheets{grid-template-columns:1fr}}
.a3{position:relative;aspect-ratio:420/297;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--rule-2),var(--card-shadow)}
.a3 .border{position:absolute;inset:3.4%;border:1px solid #24201C}
.a3 .cols{position:absolute;inset:3.4% calc(3.4% + 8.1%) 3.4% 3.4%;display:grid;grid-template-columns:repeat(24,1fr);gap:0 .8%}
.a3 .cols i{background:rgba(178,68,65,.08)}
.a3 .ts{position:absolute;top:3.4%;bottom:3.4%;right:3.4%;width:8.1%;border-left:1px solid #24201C;display:grid;grid-template-rows:repeat(8,1fr)}
.a3 .ts i{border-top:1px solid rgba(36,32,28,.35)}
.a3 .ts i:first-child{border-top:0}
.a3 .pic{position:absolute;left:6%;top:12%;width:58%;mix-blend-mode:multiply}
.a3 .t{position:absolute;left:66%;top:14%;width:20%;font:300 clamp(10px,1.4vw,22px)/1.05 var(--serif);color:#24201C}
.web-sheet{position:relative;aspect-ratio:16/10;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule-2);overflow:hidden}
.web-sheet .cols{position:absolute;inset:0 6% 9% 6%;display:grid;grid-template-columns:repeat(12,1fr);gap:0 1.6%}
.web-sheet .cols i{background:rgba(178,68,65,.08)}
.web-sheet .bar{position:absolute;left:0;right:0;bottom:0;height:9%;border-top:1px solid var(--rule-2);display:grid;grid-template-columns:3fr 5fr 2fr 2fr 1fr}
.web-sheet .bar i{border-left:1px solid var(--rule)}
.web-sheet .bar i:first-child{border-left:0}
.web-sheet .frame-i{position:absolute;inset:3%;border:1px solid var(--rule)}

/* motion: cut the section */
.cutter{display:grid;gap:var(--s4)}
.plan-wrap{position:relative;background:var(--sheet);box-shadow:var(--card-shadow)}
.plan-wrap img{width:100%;mix-blend-mode:var(--draw-blend)}
.cut-line{position:absolute;pointer-events:none;opacity:0;transition:opacity .4s,transform .9s var(--turn)}
.cut-line.h{left:-2%;right:-2%;height:0;border-top:2px dashed var(--accent)}
.cut-line.v{top:-3%;bottom:-3%;width:0;border-left:2px dashed var(--accent)}
.cut-line.on{opacity:1}
.cut-shade{position:absolute;background:color-mix(in srgb,var(--paper) 70%,transparent);transition:all .9s var(--turn);pointer-events:none}
.marker{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;border:1.5px solid var(--accent);background:var(--paper);color:var(--accent);font:600 13px/1 var(--mono);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--settle),background .3s}
.marker::after{content:"";position:absolute;width:0;height:0;border:7px solid transparent}
.marker[data-look="up"]::after{border-bottom-color:var(--accent);top:-15px}
.marker[data-look="down"]::after{border-top-color:var(--accent);bottom:-15px}
.marker[data-look="left"]::after{border-right-color:var(--accent);left:-15px}
.marker[data-look="right"]::after{border-left-color:var(--accent);right:-15px}
.marker:hover,.marker[aria-pressed="true"]{transform:translate(-50%,-50%) scale(1.12);background:var(--accent);color:var(--paper)}
.section-view{position:relative;background:var(--sheet);box-shadow:var(--card-shadow);min-height:120px}
.section-view img{width:100%;mix-blend-mode:var(--draw-blend);transition:opacity .5s var(--paper-ease),transform .9s var(--paper-ease)}
.section-view img.out{opacity:0;transform:translateY(16px)}
.section-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cut-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gutter);align-items:start}
@media (max-width:900px){.cut-pair{grid-template-columns:1fr}}
.curves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:var(--s6)}
@media (max-width:800px){.curves{grid-template-columns:1fr}}
.curve{display:grid;gap:8px}
.curve svg{width:100%;height:auto;max-height:180px;color:var(--ink)}
.curve .track{height:30px;position:relative;border-bottom:1px solid var(--rule)}
.curve .dot{position:absolute;left:0;bottom:5px;width:18px;height:18px;border:1.5px solid var(--accent);border-radius:50%}
.curve.run .dot,.curve:hover .dot{animation:run var(--d) var(--e) both}
@keyframes run{to{left:calc(100% - 18px)}}
.curve button{justify-self:start;border:1px solid var(--rule-2);background:none;padding:7px 10px;cursor:pointer;font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}

/* care, files */
.care{display:grid}
.care li{display:grid;gap:6px;padding:var(--s4) 0;border-top:1px solid var(--rule)}
.care b{font:400 21px/1.25 var(--serif)}
.files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--gutter)}
@media (max-width:900px){.files{grid-template-columns:1fr}}
.files div{padding-top:var(--s4);border-top:1px solid var(--rule-2);display:grid;gap:8px;align-content:start}
.files dl{display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px 12px;font-size:15px}
.files dt{font:500 10px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.files dd{min-width:0;overflow-wrap:anywhere}
.colophon{padding-block:var(--s7);display:grid;place-items:center;text-align:center;gap:var(--s3);border-top:1px solid var(--rule)}
.colophon .pd{width:34px;color:var(--ink-2)}
:root[data-theme="blueprint"]{--pd-filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]){--pd-filter:invert(1)}}