/* The renderer is the authored ThreeUI Sketchbook; this is its reading surface. */
.portfolio-notebook{--notebook-blue:#9fc2ff;--notebook-ink:#e9eff6;--notebook-muted:#b2bfce;--notebook-line:#a6bbd32b;position:relative;width:100%;margin:30px auto 0;max-width:1240px}.notebook-view{background:#0a1520;border:1px solid var(--notebook-line);overflow:hidden}.notebook-frame{display:block;width:100%;height:clamp(400px,44vw,600px);border:0;background:#0a1520}.notebook-reading{padding:30px 4px;max-width:900px;min-height:260px}.notebook-reading-meta{display:flex;gap:25px;align-items:center;justify-content:space-between;font:500 12px/1.7 Onest,Arial,sans-serif;color:var(--notebook-blue);margin-bottom:16px}.notebook-reading h3{font:500 clamp(24px,2.8vw,36px)/1.25 Onest,Arial,sans-serif;letter-spacing:-.035em;text-transform:none;margin:0 0 18px;color:var(--notebook-ink);max-width:32ch}.notebook-reading>p{font:400 15px/1.8 Onest,Arial,sans-serif;max-width:76ch;color:var(--notebook-muted);margin:0 0 18px}.notebook-reading .notebook-stack{font:400 12px/1.7 Onest,Arial,sans-serif;color:#91a7c3}.notebook-actions{display:flex;gap:15px 30px;flex-wrap:wrap}.notebook-actions a{font:500 13px/1.6 Onest,Arial,sans-serif;color:var(--notebook-blue);border-bottom:1px solid #9fc2ff55;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}.notebook-actions a:hover{color:white;border-color:white}.notebook-index{border-top:1px solid var(--notebook-line);padding:18px 4px 8px;font:400 13px/1.6 Onest,Arial,sans-serif;color:var(--notebook-muted)}.notebook-index summary{cursor:pointer;min-height:44px;display:list-item;padding:10px 0;color:var(--notebook-ink)}.notebook-index>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 20px}.notebook-index button{background:#101f30;color:#c7d7eb;border:1px solid #8cadd240;padding:13px 16px;font:400 13px/1.6 Onest,Arial,sans-serif;text-align:left;cursor:pointer}.notebook-index button[aria-pressed=true]{border-color:#9fc2ff;color:#fff;background:#1a3049}.notebook-index button:hover{border-color:#9fc2ff}.portfolio-notebook a:focus-visible,.portfolio-notebook button:focus-visible,.portfolio-notebook summary:focus-visible{outline:2px solid #9fc2ff;outline-offset:5px}.notebook-index[open] summary{margin-bottom:6px}.notebook-section-link{display:inline-flex;margin-top:25px;color:#9fc2ff;font:500 13px/1.6 Onest,Arial,sans-serif}.notebook-route{max-width:1450px;margin:auto;padding:45px max(24px,7vw) 75px}.notebook-early{border-top:1px solid #a6bbd32b}.notebook-early .folio-section-intro{max-width:650px}
@media(max-width:820px){.notebook-frame{height:clamp(300px,52vw,430px)}.notebook-reading{padding:25px 2px;min-height:285px}.notebook-index>div{grid-template-columns:repeat(2,minmax(0,1fr))}.notebook-route{padding:25px 24px 50px}}
@media(max-width:500px){.notebook-frame{height:270px}.notebook-reading h3{font-size:26px}.notebook-reading>p{font-size:14px}.notebook-reading{min-height:300px}.notebook-index>div{grid-template-columns:1fr}.notebook-reading-meta{font-size:11px}.portfolio-notebook{margin-top:25px}.notebook-actions{gap:22px}}

/* Each collection opens out into a viewport-sized reading stage. Keep the
   readable catalogue below it, rather than overlaying text on the book. */
.portfolio-notebook{max-width:none}
.notebook-view{position:relative;left:50%;width:100vw;margin-left:-50vw;border:0;min-height:calc(100svh - 82px)}
.notebook-frame{height:calc(100svh - 82px);min-height:420px}
.notebook-reading,.notebook-index{max-width:1100px;margin-inline:auto}
.notebook-route{max-width:none}
@media(max-width:820px){.notebook-frame{height:calc(100svh - 82px);min-height:360px}.notebook-reading,.notebook-index{max-width:100%}}