@font-face{font-family:BookSans;src:local("YuGothic"),local("Yu Gothic"),url("assets/book-sans.woff?v=6") format("woff");font-weight:100 900;font-style:normal;font-display:swap}
:root{--green:#b1cfad;--peach:#ffbf9c;--blue:#0000bf;--orange:#89310a;--head-height:270px;--cover-half:max(0px,calc(50svh - var(--head-height)/2));--sans:BookSans,"Hiragino Kaku Gothic ProN",sans-serif;color-scheme:light;scroll-padding-top:calc(var(--head-height) + 25px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--green);color:var(--blue);font-family:var(--sans);font-feature-settings:"palt";-webkit-text-size-adjust:100%;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;border-radius:0;touch-action:manipulation}
a,button{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
p,h1,h2,figure,dl,dd{margin:0}
::selection{background:var(--peach);color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
[hidden]{display:none!important}
.skip{position:fixed;z-index:30;top:8px;left:12px;padding:10px 16px;background:var(--peach);transform:translateY(-150%)}
.skip:focus{transform:none}
/* Equal spaces above and below center the cover lockup. The body-level header
   moves with the document until native sticky positioning reaches the top. */
.cover-world{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--green);height:100vh;height:100dvh}
.cover-world:before,.masthead:before{content:"";position:absolute;top:0;left:50%;width:min(100%,1440px);height:100vh;height:100dvh;transform:translateX(-50%);background:var(--green) url("assets/cover-pattern.svg") center 48%/cover no-repeat}
.masthead{position:sticky;top:0;z-index:10;padding:22px 0 20px;overflow:hidden;isolation:isolate;background:transparent}
.masthead:before{z-index:-1;opacity:0}
.masthead.is-pinned{background:var(--green)}
.masthead.is-pinned:before{opacity:1}
.cover-lead{height:max(0px,calc(var(--cover-half) + var(--cover-center-shift,0px)))}
.masthead-inner{width:min(calc(100% - 80px),1280px);margin-inline:auto;position:relative}
.brand{display:flex;flex-direction:column;align-items:center;width:min(100%,540px);margin-inline:auto;text-align:center;container-type:inline-size}
.brand-series{width:100%;font-size:clamp(11px,3.7vw,23px);font-size:clamp(11px,4.2cqw,23px);line-height:1.4;font-weight:400;margin-bottom:18px;white-space:nowrap;letter-spacing:-.02em}
.brand-lockup{width:100%;line-height:1}
.brand-lockup img{width:100%;height:auto}
.buy-link{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--blue);color:var(--peach);padding:12px 14px;min-height:44px;min-width:115px;font-size:12px;transition:color .2s,background .2s}
.buy-link span:last-child{font-family:Arial,sans-serif;font-size:20px}
.buy-link:hover,.buy-link:focus-visible{background:var(--peach);color:var(--blue)}
.frame{width:min(calc(100% - 80px),1160px);margin-inline:auto}
.cover-opening{min-height:max(0px,calc(var(--cover-half) - var(--cover-center-shift,0px)));width:min(calc(100% - 80px),1280px);margin-inline:auto;display:flex;align-items:flex-end;padding:0 0 40px}
.start-link{font-size:12px;line-height:2;display:inline-flex;gap:35px;align-items:center}
.start-link:hover{background:var(--peach)}
.start-link span{font-family:Arial,sans-serif;font-size:21px}
/* The portrait floats into the biography like a small printed cutout. */
.profile{display:flow-root;max-width:760px;padding-block:90px 130px}
.profile-portrait{float:left;width:144px;aspect-ratio:1;object-fit:cover;border-radius:50%;margin:6px 34px 22px 0}
.profile h2{font-size:23px;line-height:1.8;font-weight:400;margin-bottom:20px}
.profile h2 span{font-family:Arial,sans-serif;font-size:14px;white-space:nowrap}
.profile-copy{font-size:13px;line-height:2.15;font-weight:400;text-align:justify;text-justify:inter-character}
.profile-copy p+p{margin-top:1em}
/* Each chapter keeps the complete title on one line. Images and captions carry
   the asymmetry; the widest titles can use the whole page width. */
.chapter{padding-block:130px 180px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:start}
.chapter-heading{grid-column:1/-1;grid-row:1;min-width:0;width:100%}
.chapter-number{font-family:Arial,sans-serif;font-size:40px;line-height:1;letter-spacing:-.035em;margin-bottom:24px}
.chapter h2{width:100%;min-width:0;font-size:clamp(36px,4vw,54px);font-weight:400;line-height:1.4;letter-spacing:-.04em;white-space:nowrap;overflow-wrap:normal}
.chapter-visual{grid-column:6/-1;grid-row:2;margin-top:55px;width:100%;min-width:0}
.image-open{display:block;padding:0;width:100%;background:transparent;text-align:left;cursor:zoom-in}
.image-open img{width:100%}
.chapter-visual:not(.photograph):not(.model) .image-open{mix-blend-mode:multiply}
figcaption{font-size:10px;line-height:1.85;font-weight:400;letter-spacing:.015em;margin-top:10px}
.image-open.is-viewed+figcaption{color:var(--orange)}
.chapter-note{grid-column:1/-1;grid-row:3;width:100%;min-width:0;font-size:15px;font-weight:300;line-height:1.9;letter-spacing:.005em;white-space:nowrap;overflow-wrap:normal;margin-top:65px}
#chapter-01 .chapter-visual{grid-column:6/-1;margin-top:70px}
#chapter-01 .chapter-note{margin-top:75px}
#chapter-02{padding-top:100px;padding-bottom:130px}
#chapter-02 .chapter-heading{text-align:right}
#chapter-02 .chapter-visual{grid-column:1/9;margin-top:80px}
#chapter-02 .chapter-note{text-align:right;margin-top:90px}
#chapter-03{padding-top:150px;padding-bottom:210px}
#chapter-03 .chapter-visual{grid-column:7/-1;margin-top:45px}
#chapter-03 .chapter-note{margin-top:110px}
#chapter-04{padding-top:100px;padding-bottom:100px}
#chapter-04 .chapter-heading{text-align:right}
#chapter-04 .chapter-visual{grid-column:2/10;margin-top:28px}
#chapter-04 .chapter-note{text-align:right;margin-top:22px}
#chapter-05{padding-top:180px;padding-bottom:180px}
#chapter-05 .chapter-visual{grid-column:1/10;margin-top:85px}
#chapter-05 .chapter-note{text-align:right;margin-top:75px}
#chapter-06{padding-top:140px;padding-bottom:170px}
#chapter-06 .chapter-heading{text-align:right}
#chapter-06 .chapter-visual{grid-column:6/-1;margin-top:38px}
#chapter-06 .chapter-note{text-align:right;margin-top:18px}
#chapter-07{padding-top:115px;padding-bottom:175px}
#chapter-07 .chapter-visual{grid-column:1/-1;margin-top:65px}
#chapter-07 .chapter-note{margin-top:20px}
#chapter-08{padding-top:150px;padding-bottom:140px}
#chapter-08 .chapter-heading{text-align:right}
#chapter-08 .chapter-visual{grid-column:1/8;margin-top:95px}
#chapter-08 .chapter-note{text-align:right;margin-top:105px}
.gravure{width:min(calc(100% - 80px),1280px);margin:30px auto 100px}
.gravure>img{width:100%;height:auto}
.gravure>figcaption{margin-top:9px}
.column{padding-block:45px 75px}
.column-inner{width:min(100%,570px);margin:auto;padding:55px 28px;text-align:center;background:var(--green)}
.column-index{font-family:Arial,sans-serif;font-size:9px;letter-spacing:.1em;line-height:1.6}
.column h2{font-size:25px;font-weight:400;line-height:1.6;letter-spacing:0;margin:15px 0}
.column-inner>p:last-child{font-size:12px;line-height:1.9;font-weight:300}
.book-panel,.footer-panel{width:100%;background:#fff}
.book{padding:100px 0 85px;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.book-cover{width:75%;max-width:360px;justify-self:center}
.book-info h2{font-family:"Franklin Gothic Medium",Arial,sans-serif;font-weight:400;font-size:43px;letter-spacing:-.035em;line-height:1.3;margin-bottom:22px}
.book-info>p{font-size:16px;line-height:1.9}
.book-info .book-series{font-size:11px;line-height:1.9;margin:25px 0 30px}
.purchase-status{display:block;background:var(--peach);padding:14px 16px;font-size:12px;line-height:1.6;max-width:350px}
.purchase-ready:hover{color:var(--peach);background:var(--blue)}
.book-info .purchase-note{font-size:10px;margin-top:9px;line-height:1.8}
.footer{font-size:10px;line-height:1.9;padding:45px 0 25px;display:grid;grid-template-columns:1fr auto;gap:35px}
.book-credits{display:grid;gap:9px}
.book-credits>div{display:grid;grid-template-columns:13em 1fr;column-gap:18px}
.book-credits dt{font-weight:400}
.back-top{align-self:start;white-space:nowrap;font-size:10px}
.back-top:hover{background:var(--peach)}
.copyright{grid-column:1/-1;font-size:8px;letter-spacing:.02em}
.film{padding:80px 0}
.film h2{font-weight:400;font-size:25px;line-height:1.7;margin-bottom:25px}
.film-player{position:relative;aspect-ratio:16/9;width:100%;background:var(--blue)}
.film-player iframe{display:block;width:100%;height:100%;border:0}
.film-play{position:relative;width:100%;height:100%;padding:0;cursor:pointer;background:var(--blue)}
.film-play img{width:100%;height:100%;object-fit:cover}
.film-play span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--peach);padding:15px 24px;font-size:14px;white-space:nowrap}
.film-note{font-size:10px;line-height:1.7;margin-top:12px}
.lightbox{border:0;padding:62px 24px 24px;background:var(--green);color:var(--blue);width:calc(100vw - 60px);max-width:1250px;max-height:calc(100dvh - 60px);overflow:auto}
.lightbox::backdrop{background:rgba(0,0,70,.8)}
.lightbox img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 180px);margin:auto;object-fit:contain}
.lightbox figcaption{text-align:center;font-size:12px;margin-top:18px}
.lightbox-close{position:absolute;top:12px;right:20px;padding:8px 4px;min-height:36px;background:transparent;cursor:pointer;font-size:12px}
.modal-open{overflow:hidden}
.reveal{opacity:1}
.motion-ready .reveal{transition:opacity .45s ease}
.motion-ready .reveal.is-waiting{opacity:0}
@media(max-width:1000px){
 .masthead-inner{padding-bottom:56px}
}
@media(max-width:760px){
 :root{--head-height:245px;scroll-padding-top:calc(var(--head-height) + 18px)}
 .masthead{padding:calc(16px + env(safe-area-inset-top)) 0 16px}
 .masthead-inner{width:calc(100% - 32px);padding-bottom:49px}
 .brand{width:100%;max-width:540px}
 .buy-link{width:clamp(90px,26vw,140px);min-width:0;min-height:37px;padding:8px 11px;gap:9px;font-size:12px}
 .buy-link span:last-child{font-size:18px}
 .frame{width:calc(100% - 36px)}
 .cover-opening{width:calc(100% - 36px);padding:0 0 40px}
 .start-link{font-size:11px;gap:25px}
 .cover-world:before,.masthead:before{background-position:48% center;background-size:auto 115%}
 .profile{width:calc(100% - 48px);padding-block:65px 100px}
 .profile-portrait{width:104px;margin:5px 20px 16px 0}
 .profile h2{font-size:20px;line-height:1.65;margin-bottom:18px}
 .profile h2 span{display:block;font-size:12px}
 .profile-copy{font-size:12px;line-height:2.2}
 .chapter{display:flex;flex-direction:column;gap:0;padding-block:100px 130px}
 .chapter-heading{width:100%}
 .chapter-number{font-size:32px;margin-bottom:20px}
 .chapter h2{font-size:clamp(30px,8vw,48px);line-height:1.5;letter-spacing:-.04em}
 .chapter-visual{margin-top:45px;width:88%}
 .chapter-note{font-size:14px;line-height:1.9;margin-top:50px}
 #chapter-01 .chapter-visual{width:88%;align-self:flex-end;margin-top:50px}
 #chapter-01 .chapter-note{margin-top:65px}
 #chapter-02{padding-block:90px 110px}
 #chapter-02 .chapter-visual{width:98%;align-self:flex-start;margin-top:65px}
 #chapter-02 .chapter-note{margin-top:65px}
 #chapter-03{padding-block:125px 150px}
 #chapter-03 .chapter-visual{width:76%;align-self:flex-end;margin-top:38px}
 #chapter-03 .chapter-note{margin-top:85px}
 #chapter-04{padding-block:90px 80px}
 #chapter-04 .chapter-visual{width:90%;align-self:flex-start;margin-top:25px}
 #chapter-04 .chapter-note{margin-top:18px}
 #chapter-05{padding-block:140px 130px}
 #chapter-05 .chapter-visual{width:98%;align-self:flex-start;margin-top:65px}
 #chapter-05 .chapter-note{margin-top:65px}
 #chapter-06{padding-block:105px 125px}
 #chapter-06 .chapter-visual{width:80%;align-self:flex-end;margin-top:32px}
 #chapter-06 .chapter-note{margin-top:16px}
 #chapter-07{padding-block:95px 130px}
 #chapter-07 .chapter-visual{width:calc(100% + 36px);max-width:none;margin:50px -18px 0}
 #chapter-07 figcaption{margin-left:18px}
 #chapter-07 .chapter-note{margin-top:18px}
 #chapter-08{padding-block:125px 110px}
 #chapter-08 .chapter-visual{width:78%;align-self:flex-start;margin-top:75px}
 #chapter-08 .chapter-note{margin-top:85px}
 figcaption{font-size:9px;line-height:1.85;margin-top:10px}
 .gravure{width:100%;margin:10px auto 80px}
 .gravure>figcaption{margin:9px 18px 0;font-size:9px}
 .column{padding-block:30px 55px}
 .column-inner{padding:40px 18px;max-width:470px}
 .column-index{font-size:8px}
 .column h2{font-size:21px;margin:14px 0}
 .column-inner>p:last-child{font-size:11px}
 .book{padding:85px 0 60px;display:flex;flex-direction:column;gap:42px}
 .book-cover{width:66%;max-width:310px;align-self:center}
 .book-info{width:100%;padding:0 6px}
 .book-info h2{font-size:38px;margin-bottom:18px}
 .book-info>p{font-size:14px;line-height:1.9}
 .book-info .book-series{font-size:10px;margin:22px 0 26px}
 .purchase-status{max-width:none;font-size:12px}
 .book-info .purchase-note{font-size:9px}
 .footer{display:flex;flex-direction:column;gap:30px;padding:40px 6px 25px;font-size:10px}
 .book-credits{gap:15px}
 .book-credits>div{display:block}
 .book-credits dt{font-size:9px;margin-bottom:2px}
 .back-top{font-size:10px}
 .copyright{font-size:8px}
 .film{padding:65px 0}
 .film h2{font-size:20px}
 .film-note{font-size:9px}
 .lightbox{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:60px 10px 20px}
 .lightbox img{max-height:calc(100dvh - 150px)}
 .lightbox figcaption{font-size:10px}
 .lightbox-close{right:12px}
}
@media(max-width:359px){
 .profile-portrait{width:90px;margin-right:16px}
}
/* Scale the complete reference composition together in short viewports. */
@media(max-height:600px){
 .masthead{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:12px}
 .brand{width:min(100%,420px)}
 .brand-series{margin-bottom:12px}
 .buy-link{min-height:35px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .reveal,.motion-ready .reveal,.motion-ready .reveal.is-waiting{opacity:1!important;transition:none!important}
 *{animation:none!important;transition:none!important}
}
@media print{
 .masthead,.cover-world,.cover-lead,.skip,.start-link,.lightbox{display:none!important}
 body{background:white}
 .cover-opening{display:none}
 .frame{width:90%}
 .profile,.chapter,.column,.book{break-inside:avoid;padding-block:25px}
 .reveal,.motion-ready .reveal.is-waiting{opacity:1!important}
 .gravure{width:90%;break-inside:avoid}
 .footer{padding-bottom:15px}
}

.book-info .book-author{margin-bottom:12px}
.book-info .book-specs{font-size:12px;line-height:1.9;margin:0 0 24px}

.book{align-items:start}
.book-info .purchase-status{max-width:none;margin-bottom:22px}
.book-info .book-author{margin:0 0 8px}
.book-info h2{font-weight:600;line-height:1.05;margin:0}
.book-info .book-subtitle{margin:0}
.book-info .book-series{margin:32px 0 4px}
.book-info .book-specs{margin:0 0 26px;line-height:2}
.book-info .book-credits{font-size:10px;line-height:1.7;gap:7px;margin:0 0 14px}
.book-info .book-credits>div{display:grid;grid-template-columns: 12em 1fr;gap:12px}
.book-info .copyright{font-size:8px;line-height:1.8}
.footer{display:flex;justify-content:flex-end;padding-top:0}
@media(max-width:700px){.book-info .book-credits>div{grid-template-columns:10em 1fr}.book-info .book-credits dt{margin:0}.book-info .book-series{margin:28px 0 4px}}
/* Final book spread */
.book-info h2{font-family:Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:-.025em}
@media(min-width:701px){
 .book-panel{min-height:calc(100vh - 100px);min-height:calc(100dvh - 100px);display:flex;align-items:center}
 .book{width:min(calc(100% - 80px),1160px);padding:45px 0;align-items:start}
 .book-cover{width:auto;max-width:100%;height:var(--book-info-height, 520px);max-height:none}
}
@media(max-width:700px){.book-panel{background:#fff}.book-info h2{margin:0}.footer{align-items:flex-end}}

/* At the end, hold the book spread while the header scrolls away. */
.book-back-top{position:absolute;right:0;bottom:20px;font-size:10px}
.book{position:relative}
@media(min-width:701px) and (min-height:650px){
 .book-panel{display:block;min-height:0;height:165vh;height:165dvh;background:white}
 .book{position:sticky;top:0;box-sizing:border-box;height:100vh;height:100dvh;display:grid;align-content:center;align-items:start;padding:35px 0}
}
@media(max-width:700px){.book-back-top{position:static;align-self:flex-end;margin-top:4px}}

/* FIX v1: introduction, diagram crop, column scale and two-line excerpts. */
#chapter-01 .image-open{aspect-ratio:954/482;overflow:hidden}
#chapter-01 .image-open img{max-width:none;height:auto}
.column-index{font-size:10.8px}
.column h2{font-size:30px}
.column-inner>p:last-child{font-size:14.4px}
.column-inner{width:min(100%,684px);padding:66px 33.6px}
.chapter-note{white-space:normal;overflow-wrap:anywhere}
.chapter-note>span{display:block}
@media(max-width:760px){
 .column-index{font-size:9.6px}
 .column h2{font-size:25.2px}
 .column-inner>p:last-child{font-size:13.2px}
 .column-inner{padding:48px 21.6px;max-width:564px}
 .chapter-note{font-size:14px}
}
.buy-link span:first-child{white-space:nowrap}
@media(max-width:760px){.buy-link{width:140px}}

.chapter-tags{font-size:11px;line-height:1.9;margin-top:15px;white-space:normal;font-weight:400}
.image-credit{display:block;font-size:9px;line-height:1.6;margin-top:5px}
.introduction{padding:100px 0 130px;display:flow-root}
.introduction h2{font-size:48px;font-weight:400;line-height:1.5;margin-bottom:65px}
.intro-copy{font-size:17px;line-height:1.7}.intro-copy p+p{margin-top:1.2em}
.intro-art{width:48%;margin:35px 0 0 auto}.intro-art img{width:100%}.intro-art figcaption{font-size:9px}
@media(max-width:760px){.introduction{padding:70px 0 80px}.introduction h2{font-size:34px;margin-bottom:35px}.intro-copy{font-size:14px;line-height:1.9}.intro-art{width:80%;margin-top:28px}.chapter-tags{font-size:10px}.image-credit{font-size:8px}}
.introduction{background:var(--green);box-shadow:0 0 0 100vmax var(--green);clip-path:inset(0 -100vmax)}

/* v3: transparent sections, clearer text, original supplied assets. */
.introduction{background:transparent;box-shadow:none;clip-path:none}
.column-inner{background:transparent}
.chapter-tags{font-size:16.5px}
.chapter-number{font-size:28px}
.chapter-note{font-size:18px;font-weight:400}
#chapter-04 .image-open,#chapter-05 .image-open{mix-blend-mode:normal}
@media(max-width:760px){.chapter-tags{font-size:15px}.chapter-number{font-size:22.4px}.chapter-note{font-size:16.8px;font-weight:400}}
/* v4: reduce the introductory sketch and chapter excerpts to 80%. */
.intro-art{width:38.4%}
.chapter-note{font-size:14.4px}
@media(max-width:760px){.intro-art{width:64%}.chapter-note{font-size:13.44px}}