@font-face{font-family:SourceSerif;src:url('/assets/serif-latin.woff2?v=d9338f6d3e') format('woff2'),url('/assets/serif.ttf') format('truetype');font-display:swap}
@font-face{font-family:SourceSerifItalic;src:url('/assets/serif-italic-latin.woff2?v=bf40a10acf') format('woff2'),url('/assets/serif-italic.ttf') format('truetype');font-style:italic;font-display:swap}
@font-face{font-family:SourceSans;src:url('/assets/sans-latin.woff2?v=c13a28cf75') format('woff2'),url('/assets/sans.ttf') format('truetype');font-display:swap}
@font-face{font-family:SourceSans;src:url('/assets/sans-semibold-latin.woff2?v=62db0029ce') format('woff2'),url('/assets/sans-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--paper:#fcfbf8;--ink:#202520;--muted:#62645d;--surface:#e9e7e0;--rule:#d8d9d1;--teal:#a13e29;--serif:SourceSerif,Georgia,serif;--sans:SourceSans,Arial,sans-serif;--reader-header:58px}
*{box-sizing:border-box}html{scroll-behavior:auto;scrollbar-gutter:stable}
body{margin:0;color:var(--ink);font:16px var(--sans);background:var(--paper)}
button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}
button{color:inherit;cursor:pointer;border:0;background:none}button:disabled{opacity:.24;cursor:default}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
.login-page{min-height:100svh;display:grid;place-items:center}
.login-main{width:min(1180px,calc(100% - 120px));min-height:calc(100svh - 120px);display:grid;grid-template-columns:1.35fr 1fr;align-items:center;margin:60px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.login-title{padding:70px 9% 78px 0;border-right:1px solid var(--rule)}
.login-title h1{font:clamp(92px,10.5vw,148px)/.9 var(--serif);font-weight:400;letter-spacing:-6px;margin:0}
.login-title p{font:italic clamp(24px,2.5vw,34px)/1.3 SourceSerifItalic,Georgia,serif;margin:42px 0 0;letter-spacing:-.5px}
.login-entry{padding:70px 0 70px 20%;width:100%}.login-form{width:100%;max-width:310px}
.login-form label{font-size:12px;display:block;margin-bottom:14px}.password-field{display:flex;align-items:center;border-bottom:1px solid #8d9590}
.password-field input{min-width:0;width:100%;padding:10px 0 15px;background:none;border:0;color:var(--ink);font-size:22px;border-radius:0;outline-offset:0}
.password-field:focus-within{border-color:var(--ink)}.reveal{padding:10px;display:grid;place-items:center;color:var(--muted)}.reveal svg{width:18px;height:18px}
.enter-button{background:var(--ink);color:var(--paper);padding:16px 18px;width:100%;display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-top:26px;transition:background .2s}.enter-button:hover{background:#2c4652}.enter-button span{font-size:22px;line-height:1}
.form-error{font-size:12px;color:#a53b2f;margin:14px 0 0;line-height:1.5}.login-edition{font-size:11px;color:var(--muted);margin:55px 0 0;display:flex;justify-content:space-between;max-width:310px}
.password-field input:is(:autofill,:-webkit-autofill){-webkit-box-shadow:0 0 0 100px var(--paper) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.reader-page{background:var(--surface)}.reader-page.is-book{height:100dvh;overflow:hidden}
html:has(.reader-page.is-book){scrollbar-gutter:auto;overflow:hidden}
.skip-link{position:fixed;left:20px;top:-100px;background:var(--ink);color:white;padding:10px;z-index:30}.skip-link:focus{top:10px}
.reader-header{height:var(--reader-header);position:sticky;top:0;z-index:12;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:var(--paper);border-bottom:1px solid #d0d0c8;gap:24px}
.wordmark{font:22px/1 var(--serif);letter-spacing:-.5px;display:block;width:max-content;white-space:nowrap}
.wordmark span{display:block;font:7px/1.2 var(--sans);letter-spacing:1.2px;margin-top:5px;color:var(--muted)}
.reader-actions{display:flex;gap:24px;align-items:center}.quiet-button{padding:7px 0;display:flex;align-items:center;gap:8px;font-size:11px}.quiet-button:hover,.download-button:hover{color:var(--teal)}
.view-switch{display:flex;border:1px solid #c9cdc5}.view-switch button{padding:6px 13px;font-size:10px;color:var(--muted)}.view-switch button.active{background:var(--ink);color:var(--paper)}
.download-button{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:11px}.download-button svg{width:17px;height:17px}
#magazine{padding:30px 34px 115px;outline:none}.is-book #magazine{padding:0}
.book-reader{position:fixed;inset:8px 0;width:100%;margin:0}
.book-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;outline:none}
/* A layer held at will-change:transform is rasterized once and then scaled, so zoomed pages look soft. Promote it only while panning. */
.book-transform{position:absolute;inset:0;transform-origin:50% 50%}.is-panning .book-transform{will-change:transform}

.book-stage{width:100%;height:100%;position:relative}
.flip-page{background:var(--paper);overflow:hidden;user-select:none;-webkit-user-select:none}
.flip-page .paper{width:100%;height:100%;aspect-ratio:auto;box-shadow:none;background:var(--paper)}
.flip-page .paper>img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.book-stage:not(.is-single) .flip-page.--left:after,.book-stage:not(.is-single) .flip-page.--right:after{content:'';position:absolute;top:0;bottom:0;width:16px;pointer-events:none;z-index:5}
.book-stage:not(.is-single) .flip-page.--left:after{right:0;background:linear-gradient(to left,#172b381c,transparent)}
.book-stage:not(.is-single) .flip-page.--right:after{left:0;background:linear-gradient(to right,#172b3814,transparent)}
.is-zoomed .book-viewport{cursor:grab}.is-panning .book-viewport{cursor:grabbing}
.spread-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:64px;z-index:7;opacity:0;transition:opacity .2s;background:#f5f1e854}
.book-reader:hover .spread-arrow{opacity:.35}
.spread-arrow:hover,.spread-arrow:focus-visible{opacity:1;background:#f5f1e8e6}.spread-arrow:disabled{opacity:0;pointer-events:none}
.spread-previous{left:9px}.spread-next{right:9px}.is-zoomed .spread-arrow{display:none}
.scroll-reader{width:min(100%,880px);margin:auto;display:flex;flex-direction:column;gap:35px}.page-block{position:relative;scroll-margin-top:84px}
.paper{position:relative;aspect-ratio:var(--page-ratio,480/600);background:var(--paper);box-shadow:0 1px 2px #172b3810,0 8px 28px -12px #172b3826;isolation:isolate}
.paper>img{width:100%;height:100%;object-fit:contain;display:block}.page-caption{height:20px;display:flex;justify-content:flex-end;align-items:center;padding:5px 0 0;color:var(--muted)}
.text-button{font-size:10px;color:var(--muted);padding:4px 0}.page-caption .text-button{opacity:0;transition:opacity .15s}.page-block:hover .text-button,.text-button:focus-visible{opacity:1}.text-button:hover{color:var(--ink)}
.hotspot{position:absolute;display:block;z-index:2}.hotspot:hover{background:#23777d0c;outline:1px solid #23777d40}
.corner-turn{position:absolute;right:0;bottom:0;width:60px;height:60px;z-index:3;padding:0;opacity:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.paper:hover>.corner-turn,.corner-turn:focus-visible{opacity:1}.corner-turn:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 48%,#c6c1b7 50%,#fffcf5 74%);filter:drop-shadow(-2px -2px 3px #172b3820)}
.reader-loading{position:fixed;inset:var(--reader-header) 0 90px;z-index:8;display:grid;place-content:center;text-align:center;font:18px var(--serif);color:var(--muted);background:var(--surface)}
.loading-line{display:block;width:70px;height:1px;background:var(--teal);margin:0 auto 24px;animation:loadPulse 1.6s ease infinite}
.reading-error{max-width:440px;margin:100px auto;position:relative;z-index:9}.reading-error h1{font:36px var(--serif)}
.issue-end{margin:70px auto 10px;text-align:center}.issue-end a{font-size:12px;border-bottom:1px solid #8e9690;padding-bottom:5px}.issue-end>span{display:block;color:var(--muted);font-size:10px;margin-top:16px}
.page-dock{display:flex;gap:4px;align-items:center;position:fixed;bottom:27px;left:50%;transform:translateX(-50%);border:1px solid #c4c8be;background:var(--paper);box-shadow:0 4px 20px #172b3810;padding:5px 8px;z-index:10;font-size:11px;color:var(--muted);height:43px;white-space:nowrap}
.page-dock button{font-size:19px;padding:5px;display:grid;place-items:center;min-width:31px;height:31px}.page-dock button:hover:not(:disabled){color:var(--ink);background:#e8e4da}.page-dock svg{width:17px;height:17px}
.page-number{display:flex;align-items:center;gap:6px;margin:0 6px}.page-dock input{background:none;border:0;width:25px;text-align:right;font-size:11px;color:var(--ink);appearance:textfield;padding:4px 0}.page-dock input::-webkit-inner-spin-button{appearance:none}
.page-dock .fit-button{font-size:11px;padding:5px 7px}.dock-divider{height:17px;width:1px;background:var(--rule);margin:0 5px}
.reader-page:not(.is-book) #zoom-book,.reader-page:not(.is-book) #zoom-out,.reader-page:not(.is-book) #zoom-reset,.reader-page:not(.is-book) .dock-divider{display:none}
dialog{background:var(--paper);color:var(--ink);border:0;padding:28px;box-shadow:0 20px 80px #172b3838;z-index:30}dialog::backdrop{background:#142c3850}
.contents-drawer{position:fixed;left:auto;right:0;top:0;bottom:0;margin:0;width:min(430px,100%);height:100dvh;max-height:none;max-width:none;overflow:auto;overscroll-behavior:contain}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.drawer-top h2{font:32px/1.1 var(--serif);margin:0;font-weight:400}.icon-button{font:30px/1 var(--sans);padding:0 4px;color:var(--muted)}
#chapter-links{display:flex;flex-direction:column}#chapter-links button{text-align:left;display:flex;gap:18px;padding:14px 0;border-top:1px solid #c8cdc4;font-size:14px}#chapter-links button span{color:var(--muted);font-size:10px;width:20px;padding-top:3px}
.drawer-page-label{font-size:10px;color:var(--muted);margin:35px 0 17px}.page-thumbnails{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.page-thumbnails button{padding:0;font-size:10px;color:var(--muted);text-align:left}
.page-thumbnails img{width:100%;aspect-ratio:var(--page-ratio,480/600);object-fit:contain;display:block;background:#e5e1d7;margin-bottom:7px;box-shadow:0 2px 5px #172b3814}.page-thumbnails button:hover img{outline:1px solid var(--ink);outline-offset:3px}
.logout-button{font-size:12px;margin-top:30px;padding:15px 0;border-top:1px solid var(--rule);width:100%;text-align:left}.logout-button span{float:right}.text-drawer{width:min(640px,calc(100% - 30px));max-height:85dvh}.text-drawer #page-text{white-space:pre-wrap;font:18px/1.55 var(--serif);color:var(--ink)}
@keyframes loadPulse{50%{transform:scaleX(.4);opacity:.5}}
@media(min-width:1600px){.reader-header{padding-left:4vw;padding-right:4vw}.scroll-reader{max-width:940px}}
@media(max-width:950px){.login-main{width:calc(100% - 70px);min-height:580px}.login-title h1{letter-spacing:-4px}.login-entry{padding-left:15%}}
@media(max-width:650px){
 html{scrollbar-gutter:auto}.login-main{width:calc(100% - 48px);min-height:auto;margin:28px 0;grid-template-columns:1fr}.login-title{border-right:0;padding:48px 0 38px;border-bottom:1px solid var(--rule)}.login-title h1{font-size:91px;letter-spacing:-4px}.login-title p{font-size:25px;margin-top:28px}.login-entry{padding:42px 0 28px}.login-form,.login-edition{max-width:none}.login-edition{margin-top:38px}
 :root{--reader-header:55px}.reader-header{padding:0 14px;gap:10px}.wordmark{font-size:20px}.wordmark span{font-size:6.5px;letter-spacing:.9px;margin-top:4px}.reader-actions{gap:11px}.reader-actions .quiet-button span,.download-button span{display:none}.reader-actions svg{width:17px;height:17px}.view-switch button{padding:6px 9px;font-size:9px}
 #magazine{padding:22px 10px 115px}.is-book #magazine{padding:0}.book-reader{bottom:82px}.spread-arrow{width:26px;height:50px;background:transparent;opacity:.65}.spread-previous{left:0}.spread-next{right:0}.spread-arrow svg{width:17px;height:17px}
 .page-dock{bottom:27px;gap:1px;padding:5px}.page-dock button{min-width:29px;padding:5px;height:31px}.page-number{margin:0 3px;gap:4px}.page-dock #first-page,.page-dock #last-page{display:none}.dock-divider{margin:0 3px}.page-range{width:calc(100% - 38px)}
 .scroll-reader{gap:24px}.page-block{scroll-margin-top:80px}.page-caption{height:17px}.page-caption .text-button{opacity:1;font-size:9px}.issue-end{margin-top:45px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.flipbook-engine .stf__wrapper{position:relative;width:100%;height:100%}
.flipbook-page>.flip-page{position:relative;width:100%;height:100%}
.book-stage:not(.is-single) .flipbook-page.--left .flip-page:after,.book-stage:not(.is-single) .flipbook-page.--right .flip-page:after{content:'';position:absolute;top:0;bottom:0;width:16px;pointer-events:none;z-index:5}
.book-stage:not(.is-single) .flipbook-page.--left .flip-page:after{right:0;background:linear-gradient(to left,#172b381c,transparent)}
.book-stage:not(.is-single) .flipbook-page.--right .flip-page:after{left:0;background:linear-gradient(to right,#172b3814,transparent)}

/* Floating controls leave the paper at a constant, generous size. */
.reader-header{gap:14px}.reader-header>#contents-button{margin-left:auto}.reader-actions{gap:5px}
.chrome-button{display:grid;place-items:center;width:36px;height:36px;padding:8px;background:var(--paper);border:1px solid #172b3814;border-radius:3px;box-shadow:0 2px 8px #172b3806;font-size:11px;cursor:pointer}
.chrome-button:hover{background:#fffcf5}.chrome-button svg{width:19px;height:19px}
.is-book .reader-header{position:fixed;inset:16px 20px auto;height:36px;padding:0;background:none;border:0;pointer-events:none;justify-content:space-between}
.is-book .reader-header .wordmark{display:none}.is-book .reader-header>#contents-button{margin:0}
.is-book .reader-header>button,.is-book .reader-actions{pointer-events:auto}
.reader-options{position:relative}.reader-options summary{list-style:none}.reader-options summary::-webkit-details-marker{display:none}
.options-panel{position:absolute;right:0;top:44px;width:210px;background:var(--paper);border:1px solid #c8cbc2;padding:9px;box-shadow:0 8px 35px #172b381c;border-radius:3px;font-size:12px;max-height:calc(100dvh - 85px);overflow:auto}
.options-panel>button,.options-panel>a{width:100%;display:block;padding:11px 10px;text-align:left;border-radius:2px}
.options-panel>button:hover,.options-panel>a:hover,.options-pages button:hover{background:#e8e4da}
.options-panel span{float:right}.options-panel .view-switch{margin:1px 0 7px;display:flex}.options-panel .view-switch button{flex:1;font-size:12px;padding:8px}
.listen-button,.read-button{display:flex;width:auto;gap:7px;padding:8px 11px}.listen-button span,.read-button span{font-size:12px}.listen-button[aria-expanded="true"],.read-button[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.audio-player{position:fixed;right:20px;top:62px;width:300px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 90px);overflow:auto;z-index:15;padding:18px;background:var(--paper);border:1px solid #c8cbc2;border-radius:3px;box-shadow:0 8px 35px #172b381c}
.audio-top{display:flex;justify-content:space-between;align-items:center}.audio-top h2{font:25px/1.1 var(--serif);font-weight:400;margin:0}.audio-top .icon-button{font-size:26px;padding:0 2px}
.audio-page{font-size:10px;color:var(--muted);margin:18px 0 4px}.audio-title{font:18px/1.25 var(--serif);margin:0 0 18px}
.audio-controls{display:flex;gap:9px;align-items:center;margin-bottom:17px}.audio-controls button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%}.audio-play{background:var(--ink);color:var(--paper)}.audio-play svg{fill:currentColor;stroke:none;width:21px;height:21px}.audio-stop{border:1px solid var(--rule);color:var(--muted)}.audio-stop svg{width:18px;height:18px}
.audio-player select{min-height:44px;font:12px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:8px;max-width:100%}.audio-controls select{margin-left:auto;min-height:44px}#audio-voice{width:100%;font-size:11px}
.audio-status{font-size:10px;line-height:1.45;color:var(--muted);margin:12px 0 0}.audio-text{min-height:44px;min-width:44px;margin-top:12px;padding:0 0 3px;border-bottom:1px solid var(--rule);font-size:12px}
.reader-notice{position:fixed;top:66px;left:50%;transform:translateX(-50%);z-index:25;max-width:min(440px,calc(100% - 28px));padding:12px 16px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 4px 20px #172b3814;font-size:12px;line-height:1.5;margin:0}
.options-pages{display:flex;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:5px 0}.options-pages button{flex:1;padding:12px 5px;font-size:11px;text-align:center}
.page-dock{bottom:max(12px,env(safe-area-inset-bottom));height:38px;border:1px solid #172b381a;border-radius:3px;gap:2px;padding:2px 4px;background:#f5f1e8f5;box-shadow:0 2px 12px #172b380b}
.page-dock button{height:32px;width:34px;min-width:34px;padding:5px}.page-number{margin:0 6px;gap:7px}.page-dock input{width:25px;font-size:12px}.page-number>span{font-size:11px}
.reader-chrome{transition:opacity .3s ease}.is-book.chrome-hidden .reader-chrome{opacity:0;pointer-events:none}
.is-book.chrome-hidden .reader-chrome>*{pointer-events:none}.is-book.chrome-hidden .spread-arrow{opacity:0;pointer-events:none}
.reader-page:has(.reader-chrome :focus-visible) .reader-chrome{opacity:1;pointer-events:auto}
@media(max-width:650px){
 .is-book .reader-header{inset:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) auto max(12px,env(safe-area-inset-left));height:40px}
 .chrome-button{width:40px;height:40px}.reader-actions{gap:4px}.book-reader{inset:6px 0}.spread-arrow{display:none}
 .page-dock{height:44px;padding:1px 3px;bottom:max(10px,env(safe-area-inset-bottom))}.page-dock button{width:40px;min-width:40px;height:40px}.page-number{gap:7px;margin:0 7px}.page-dock input{font-size:13px}
 .options-panel{top:48px}.reader-page:not(.is-book) .wordmark{font-size:18px}
 .listen-button,.read-button{width:40px;padding:8px}.listen-button span,.read-button span{display:none}.audio-player{right:12px;top:max(62px,calc(env(safe-area-inset-top) + 62px))}.reader-notice{top:65px}
}
@media(max-width:350px){.reader-actions{gap:2px}}

/* The reading view uses authored paragraphs at a comfortable measure. */
.text-drawer{width:min(820px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:0;overflow:hidden}
.text-drawer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.text-drawer .drawer-top{margin:0;padding:32px 40px 24px;align-items:flex-start}
.text-drawer .drawer-top h2{font:400 34px/1.15 var(--serif);letter-spacing:-.6px;min-width:0;overflow-wrap:break-word}
.text-drawer .icon-button{flex:none;display:grid;place-items:center;min-width:40px;min-height:40px;margin:-6px -8px 0 0}
.text-drawer #page-text{min-height:0;overflow:auto;overscroll-behavior:contain;white-space:normal;font:20px/1.65 var(--serif);padding:0 40px 26px;overflow-wrap:break-word;scrollbar-gutter:stable}
.reading-copy>*{max-width:60ch;margin-left:auto;margin-right:auto}
.reading-copy p{margin-top:0;margin-bottom:1.1em}
.reading-copy h3,.reading-copy h4{font-weight:400;line-height:1.25;letter-spacing:-.25px}
.reading-copy h3{font-size:27px;margin-top:1.3em;margin-bottom:.6em}
.reading-copy h4{font-size:24px;margin-top:1.2em;margin-bottom:.6em}
.reading-copy>:first-child{margin-top:0}.reading-copy>:last-child{margin-bottom:0}
.reading-copy .reading-deck{font-size:23px;line-height:1.45;margin-bottom:1.2em}
.reading-copy .reading-caption{font:14px/1.5 var(--sans);color:var(--muted);margin-top:1.5em;margin-bottom:1.6em}
.reading-copy a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.reading-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 40px;padding:12px 0;border-top:1px solid var(--rule);font:12px/1.3 var(--sans)}
.reading-navigation button{min-height:44px;padding:8px 0;white-space:nowrap}.reading-navigation button:hover:not(:disabled){color:var(--teal)}
.reading-navigation p{margin:0;color:var(--muted);font-size:11px;white-space:nowrap}
@media(max-width:650px){
 .reader-page:not(.is-book) .reader-header{flex-wrap:wrap;height:auto;min-height:var(--reader-header);gap:8px;padding-top:8px;padding-bottom:8px}
 .reader-page:not(.is-book) .reader-header .wordmark{margin-right:auto}
 .reader-page:not(.is-book) .reader-header>#contents-button{margin-left:0}
 .text-drawer{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
 .text-drawer .drawer-top{padding:24px 20px 20px;gap:12px}.text-drawer .drawer-top h2{font-size:29px}
 .text-drawer #page-text{font-size:20px;line-height:1.65;padding:0 20px 24px}
 .reading-copy .reading-deck{font-size:22px}.reading-copy h3{font-size:25px}.reading-copy h4{font-size:23px}
 .reading-navigation{margin:0 20px;gap:8px}.reading-navigation p{font-size:10px}
}

/* The entry reads like the opening leaf of the issue. */
.login-main{width:min(1120px,calc(100% - 112px));min-height:calc(100svh - 96px);margin:48px 0;grid-template-columns:1.3fr 1fr;border-top:1px solid #172b3870;border-bottom:1px solid var(--rule)}
.login-title{padding:45px 13% 40px 0;border-right:0;position:relative}
.login-mark{display:block;width:34px;height:34px;margin-bottom:38px}
.login-wordmark{display:block;width:min(430px,100%);height:auto;max-width:100%}
.wordmark>img{display:block;width:160px;height:auto}
.login-title h1{font-size:clamp(94px,10.6vw,144px);line-height:.93;letter-spacing:-5px}
.login-title p{margin-top:29px;font-size:30px}
.login-folio{display:flex;justify-content:space-between;max-width:320px;margin-top:55px;font-size:11px;color:var(--muted)}
.login-entry{padding:60px 0 60px 19%;border-left:1px solid var(--rule)}
.login-intro{max-width:310px;margin-bottom:42px}.login-intro h2{font:400 35px/1.15 var(--serif);letter-spacing:-.8px;margin:0 0 14px}.login-intro p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.login-form label{font-size:11px;margin-bottom:8px}.password-field{border-color:#9da59f}.password-field input{padding:10px 0 13px;font-size:23px;letter-spacing:.4px}
.login-form .enter-button{margin-top:25px;font-size:12px;padding:15px 17px}.login-form .form-error{font-size:12px;margin-top:13px}
@media(max-width:950px){.login-main{width:calc(100% - 72px)}.login-entry{padding-left:13%}.login-title h1{letter-spacing:-4px}.login-title p{font-size:26px}.login-intro h2{font-size:31px}}
@media(max-width:650px){
 .login-main{width:calc(100% - 48px);min-height:0;margin:24px 0;grid-template-columns:1fr}.login-title{padding:28px 0 26px;border-bottom:1px solid var(--rule)}
 .login-mark{width:30px;height:30px;margin-bottom:26px}.login-title h1{font-size:clamp(76px,21vw,110px);letter-spacing:-3.8px}.login-wordmark{width:min(370px,100%)}.login-title p{font-size:24px;margin-top:23px}.login-folio{margin-top:28px;max-width:none;font-size:10px}
 .login-entry{padding:30px 0 34px;border-left:0}.login-intro{max-width:none;margin-bottom:26px}.login-intro h2{font-size:29px;margin-bottom:10px}.login-intro p{font-size:12px}.login-form{max-width:none}.login-form .enter-button{margin-top:23px;min-height:50px}
}
/* The page box is a real target, not a 25px sliver between the arrows. */
.page-dock input{min-width:34px;height:32px;padding:4px 2px}
@media(max-width:650px){.page-dock input{min-width:40px;height:40px}}

/* Companions: Lab experiments and films for the visible pages. The button hangs off the dock's right edge as its own
   pill, so the centred Previous, page and Next group never moves when it appears or goes. */
.page-dock .companion-chip{position:absolute;top:-1px;bottom:-1px;left:calc(100% + 6px);display:flex;align-items:center;justify-content:center;width:auto;min-width:0;height:auto;padding:0 12px;border:1px solid #172b381a;border-radius:3px;background:#f5f1e8f5;box-shadow:0 2px 12px #172b380b;color:var(--ink);font:600 12px/1 var(--sans);white-space:nowrap;cursor:pointer}
.page-dock .companion-chip[hidden]{display:none}
.page-dock .companion-chip:hover{background:#e8e4da}
.page-dock .companion-chip:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.companion-kind{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a13e29;white-space:nowrap}
/* The kind is shown; the titles are in the button's name and tooltip. */
.companion-label{display:none}
/* On phones "Lab and film" stacks as "Lab and" over "film", and the dock sits a constant 36 px left of centre,
   so the pill always fits on screen and the page controls are in the same place on every page. */
@media(max-width:420px){.page-dock{transform:translateX(calc(-50% - 36px))}.page-dock .companion-chip{padding:0 9px}.companion-kind.is-both{display:flex;flex-direction:column;align-items:center;font-size:10px;line-height:1.15}}
.companion-dialog{width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;padding:28px 32px 10px}
.companion-dialog .drawer-top{margin-bottom:6px}
.companion-dialog h2:focus{outline:none}
/* Each entry: its picture beside the words. A film's player takes the picture's place once it is asked for. */
.companion-item{display:grid;grid-template-columns:148px minmax(0,1fr);grid-template-areas:"picture body";column-gap:22px;align-items:start;border-top:1px solid var(--rule);padding:22px 0 18px}
.companion-picture{grid-area:picture;position:relative;display:block;overflow:hidden;border-radius:3px;background:#16222a;color:#f7f4ee}
.companion-picture img{display:block;width:100%;height:auto}
.companion-item.is-film .companion-picture{aspect-ratio:3/4;cursor:pointer}
.companion-item.is-film .companion-picture img{height:100%;object-fit:cover}
.companion-play-mark{position:absolute;left:10px;bottom:10px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#f7f4ee;color:#151c21;box-shadow:0 2px 10px #0d141840;transition:transform .2s ease}
.companion-play-mark svg{width:15px;height:15px;margin-left:2px;fill:currentColor}
.companion-picture:hover .companion-play-mark{transform:scale(1.07)}
.companion-body{grid-area:body;min-width:0}
.companion-dialog .companion-item-kind{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a13e29;margin:0 0 6px}
.companion-item h3{font:400 25px/1.15 var(--serif);margin:0 0 8px}
.companion-item p{font-size:15px;line-height:1.5;margin:0 0 12px}
.companion-meta{color:var(--muted)}
.companion-action{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:600 14px/1 var(--sans);text-decoration:none;cursor:pointer}
.companion-action svg{width:12px;height:12px;fill:currentColor}
.companion-action:hover{background:#3a423c}
.companion-action:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.companion-note{font-size:13px!important;color:var(--muted);margin-top:10px!important}
.companion-credit a{color:inherit}
.companion-links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;margin:2px 0 0!important}
.companion-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--ink);text-underline-offset:3px}
.companion-player{grid-area:player}
.companion-player:empty{display:none}
.companion-item.is-playing{grid-template-columns:minmax(0,1fr);grid-template-areas:"player" "body"}
.companion-item.is-playing .companion-picture,.companion-item.is-playing .companion-credit{display:none}
.companion-player:not(:empty){position:relative;aspect-ratio:16/9;margin:0 0 18px;background:#111}
.companion-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.companion-dialog .icon-button{flex:none;display:grid;place-items:center;min-width:44px;min-height:44px;margin:-8px -10px 0 0}
/* Without a fine hovering pointer the reader controls never fade (reader.js showChrome), so the book leaves room for the header and the dock instead of sitting under them, in portrait and landscape. */
@media not all and (hover:hover) and (pointer:fine){.is-book .book-reader{top:calc(max(12px,env(safe-area-inset-top)) + 46px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 46px)}}
/* On phones the panel uses nearly the full width and its film runs edge to edge, so the player is film-page sized rather than YouTube's small layout. */
@media(max-width:600px){.reader-page .companion-dialog{width:calc(100% - 16px);max-width:calc(100% - 16px);padding-left:20px;padding-right:20px}.reader-page .companion-player:not(:empty){margin-left:-20px;margin-right:-20px}.companion-item{grid-template-columns:100px minmax(0,1fr);column-gap:16px}.companion-item h3{font-size:22px}.companion-play-mark{left:8px;bottom:8px;width:36px;height:36px}}
/* First and last page: the controls stay focusable but are marked unavailable. */
button[aria-disabled="true"]{opacity:.24;cursor:default}.page-dock button[aria-disabled="true"]:hover{background:none}
.spread-arrow[aria-disabled="true"]{opacity:0;pointer-events:none}.spread-arrow[aria-disabled="true"]:focus-visible{opacity:.24}
@media (prefers-reduced-motion:reduce){.companion-picture:hover .companion-play-mark{transform:none}.companion-play-mark{transition:none}}
/* Touch screens: every reader control is at least 44 px, and the book leaves room for the larger header and dock. */
@media not all and (hover:hover) and (pointer:fine){
 .chrome-button,.reader-actions .chrome-button,.listen-button,.read-button{min-width:44px;min-height:44px}
 .is-book .reader-header{height:44px}
 .page-dock{height:48px}.page-dock button{width:44px;min-width:44px;height:44px}.page-dock input{min-width:44px;height:44px}.page-dock .companion-chip{min-width:44px}
 .options-panel button,.options-panel a{min-height:44px}
 .is-book .book-reader{top:calc(max(12px,env(safe-area-inset-top)) + 52px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px)}
}
/* Phones: each entry stacks, its picture full width above the words, so nothing is cramped into a narrow column. */
@media(max-width:520px){
 .companion-item{grid-template-columns:minmax(0,1fr);grid-template-areas:"picture" "body";row-gap:14px}
 .companion-item.is-film .companion-picture{aspect-ratio:16/9}
 .companion-item.is-lab .companion-picture{aspect-ratio:16/9;display:grid;place-items:center}
 .companion-item.is-lab .companion-picture img{width:auto;height:100%;max-width:100%}
 .companion-item.is-playing{grid-template-areas:"player" "body"}
 .companion-item.is-film .companion-body>p:not([class]){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
/* A film whose only frames lead with a presenter keeps its hardware-only portrait crop, beside the words. */
@media(max-width:520px){
 .companion-item.has-portrait-still:not(.is-playing){grid-template-columns:40% minmax(0,1fr);grid-template-areas:"picture body";column-gap:14px}
 .companion-item.has-portrait-still .companion-picture{aspect-ratio:3/4}
}
/* Scrolling view: the page dock is solid, so text passing under it never shows through, and on touch screens the
   per-page "read this page" control is always visible rather than revealed by hover. */
.reader-page:not(.is-book) .page-dock,.reader-page:not(.is-book) .page-dock .companion-chip{background:var(--paper)}
@media not all and (hover:hover){.page-caption .text-button{opacity:1}}
/* Phone on its side: a compact header leaves more of the short screen for the page. */
@media (orientation:landscape) and (max-height:520px){
 .reader-page:not(.is-book) .reader-header{height:52px;min-height:52px}
 .reader-page:not(.is-book) .page-block{scroll-margin-top:64px}
 .reader-page:not(.is-book) .scroll-reader{gap:28px;padding-bottom:24px}
}
/* The panel's heading and close button stay at its top while its content scrolls, so a short screen can always
   close it, even with a film playing below. */
.companion-dialog .drawer-top{position:sticky;top:-28px;z-index:2;background:var(--paper);margin:-28px -32px 6px;padding:22px 32px 10px}
@media(max-width:600px){.reader-page .companion-dialog .drawer-top{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}}
/* Touch screens: the reader's dialog and panel controls are 44 px too, including the per-page "Text" control. */
@media not all and (hover:hover) and (pointer:fine){
 .reader-page .icon-button{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
 .reading-navigation button{min-width:44px}
 .audio-controls button{width:44px;height:44px}
 .page-caption{height:auto}
 .page-caption .text-button{min-height:44px;min-width:44px;padding:0 10px;font-size:12px}
}
/* Phone on its side: the Listen panel ends above the page dock, and the options menu uses compact rows. */
@media (orientation:landscape) and (max-height:520px){
 .audio-player{max-height:calc(100dvh - 62px - 72px)}
 .options-panel{max-height:calc(100dvh - 60px)}
 .options-panel>button,.options-panel>a{padding-top:6px;padding-bottom:6px}
 .options-panel .view-switch{margin-bottom:4px}
}
@media (orientation:landscape) and (max-height:520px){.options-panel{padding:6px}.options-panel .options-pages{margin:2px 0}.options-panel .view-switch{margin:0 0 2px}}
/* Short landscape screens: the options menu fits without scrolling (checked at 844x340); below 330 px tall it uses two columns. */
@media (orientation:landscape) and (max-height:520px){.options-panel{max-height:calc(100dvh - 50px)}}
@media (orientation:landscape) and (max-height:330px){.options-panel{width:430px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:6px;align-content:start}.options-panel .view-switch,.options-panel .options-pages{margin:0}}

/* Home remains a clear way out of the full issue, including while the book controls fade. */
.reader-page .reader-header{gap:10px;justify-content:flex-start}
.reader-page .reader-header .chrome-button{width:44px;height:44px;min-width:44px;min-height:44px;flex:none}
.reader-page .reader-header .reader-home{width:56px;min-width:56px;padding:5px 4px;display:flex;flex-direction:column;justify-content:center;gap:2px;pointer-events:auto;font:11px/1.1 var(--sans);letter-spacing:0}
.reader-home img{width:18px;height:18px;display:block;object-fit:contain;flex:none}
.reader-home span{display:block}
.reader-page .reader-header .reader-actions{margin-left:auto;gap:4px;flex:none}
.reader-page .reader-header>#contents-button{margin-left:0}
.reader-page .reader-header :is(.listen-button,.read-button){width:auto;padding:8px 11px}
.is-book .reader-header{height:44px}
.is-book.chrome-hidden .reader-header{opacity:1;pointer-events:none}
.is-book.chrome-hidden .reader-header>:not(.reader-home){opacity:0;pointer-events:none}
.is-book.chrome-hidden .reader-header .reader-home{opacity:1;pointer-events:auto}
.reader-header>:not(.reader-home){transition:opacity .3s ease}
.reader-zoom-controls{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:5px 0;margin:5px 0}
.reader-zoom-controls button{display:block;width:100%;min-height:44px;padding:10px;text-align:left;border-radius:2px;font:12px var(--sans)}
.reader-zoom-controls button:hover{background:#e8e4da}
.reader-page:not(.is-book) .reader-zoom-controls{display:none}
.options-panel button,.options-panel a{min-height:44px}
.reader-text-home{display:flex;align-items:center;min-width:44px;min-height:44px;font:12px var(--sans)}
.issue-end .issue-end-home{display:inline-flex;align-items:center;min-height:44px;margin-right:24px;padding:0 5px}
@media(max-width:650px){
 .reader-page .reader-header{gap:6px}
 .reader-page:not(.is-book) .reader-header{flex-wrap:nowrap;height:60px;min-height:60px;padding:0 12px}
 .reader-page .reader-header .wordmark{display:none}
 .reader-page .reader-header :is(.listen-button,.read-button){width:44px;padding:8px}
 .reader-page .reader-header .reader-actions{gap:4px}
 .reader-page:not(.is-book) .page-block{scroll-margin-top:76px}
}
@media(max-width:350px){
 .reader-page .reader-header{gap:4px}
 .reader-page .reader-header .reader-actions{gap:2px}
}
@media(orientation:landscape) and (max-height:520px){
 .reader-page .reader-header{gap:6px}
 .reader-page:not(.is-book) .reader-header{height:52px;min-height:52px}
 .reader-page .reader-header .wordmark{display:none}
 .reader-page .options-panel{display:block;width:210px;max-height:calc(100dvh - 76px)}
}