/* Capture & Keep, round two, A1 The Kept Book. Design concept, not the live site. */
:root{
  --ivory:#FBF8F2; --ivory-2:#F4EEE3; --page:#FFFDF7; --stone:#E4DED0;
  --green:#557267; --green-dk:#435C53; --cloth:#2F463E; --cloth-dk:#22342D; --sage:#D7E2D3; --on-green:#EEF4E7;
  --burg:#7A2632; --burg-dk:#5E1B25; --blush:#E9D0CD;
  --foil:#D8BD84; --brass:#8A6A33;
  --ink:#22201C; --ink-2:#55504A; --rule:rgba(85,114,103,.28);
  --display:'Baskervville', 'Baskerville', Georgia, serif;
  --text:'EB Garamond', Garamond, Georgia, serif;
  --wrap:1240px; --gut:clamp(16px, 4vw, 48px);
  --pw:300px; --ph:calc(var(--pw) * 1.42);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@view-transition{navigation:auto}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 1.25rem/1.6 var(--text);
  font-variant-numeric:oldstyle-nums proportional-nums;font-kerning:normal;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--burg);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--burg-dk);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--burg);outline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.005em}
em,i{font-style:italic}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sc{font-variant:small-caps;letter-spacing:.08em;text-transform:lowercase;font-variant-caps:all-small-caps}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cloth);color:var(--on-green);padding:10px 16px;font-size:1rem}
.skip:focus{top:12px;color:var(--on-green)}
.concept-tag{position:fixed;right:10px;bottom:10px;z-index:60;margin:0;background:var(--page);color:var(--ink);
  border:1px solid var(--ink);font:500 .875rem/1.2 var(--text);padding:6px 10px;letter-spacing:.02em}

/* buttons: explicit colours on every state, so no link rule can override them */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.55em 1.3em;
  border:1.5px solid var(--cloth);background:var(--cloth);color:var(--on-green)!important;text-decoration:none;
  font:500 1.0625rem/1.2 var(--text);letter-spacing:.02em;border-radius:2px;cursor:pointer}
.btn:hover{background:var(--cloth-dk);border-color:var(--cloth-dk);color:var(--on-green)!important}
.btn.burg{background:var(--burg);border-color:var(--burg)}
.btn.burg:hover{background:var(--burg-dk);border-color:var(--burg-dk)}
.btn.ghost{background:transparent;color:var(--cloth)!important}
.btn.ghost:hover{background:var(--cloth);color:var(--on-green)!important}
.btn[disabled]{opacity:.45;cursor:default}
.btn.small{min-height:44px;padding:.4em 1em;font-size:1rem}

/* masthead */
.mast{border-bottom:1px solid var(--rule);background:var(--ivory);position:relative;z-index:20}
.mast .wrap{display:flex;align-items:center;gap:28px;min-height:84px}
.mast-brand{display:block;flex:0 0 auto;line-height:0}
.mast-brand img{width:214px}
.mast nav{margin-left:auto}
.mast nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.mast nav a{color:var(--ink);text-decoration:none;font-size:1.0625rem}
.mast nav a:hover{color:var(--burg);text-decoration:underline}
.menu-btn,.js .menu-btn{display:none}

/* ----------------------------------------------------------- hero */
.hero{padding:clamp(24px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);background:
  radial-gradient(ellipse 60% 70% at 30% 55%, #F3EDE1 0%, rgba(243,237,225,0) 70%), var(--ivory)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(24px, 4vw, 64px);align-items:center}
.hero-copy{grid-column:2;grid-row:1}
.hero-book{grid-column:1;grid-row:1}
.kicker{font:500 .9375rem/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--green-dk);margin:0 0 18px}
.hero h1{font-size:clamp(2.6rem, 1.6rem + 3vw, 4.6rem);line-height:1.02;margin-bottom:22px}
.hero h1 em{color:var(--burg)}
.hero .lead{font-size:1.375rem;line-height:1.5;margin-bottom:16px}
.hero .lm{font-size:1.0625rem;color:var(--ink-2);border-left:2px solid var(--burg);padding-left:14px;margin:0 0 24px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.price-line{margin:18px 0 0;font-size:1.0625rem;color:var(--ink-2)}
.price-line b{color:var(--ink);font-weight:600}

/* ----------------------------------------------------------- the book */
.stage{position:relative;height:calc(var(--ph) + 56px);perspective:2200px;perspective-origin:50% 40%;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.pan{flex:0 0 auto;position:relative;width:calc(var(--pw) * 2);height:var(--ph);transition:transform .9s cubic-bezier(.45,.05,.25,1);transform-style:preserve-3d}
.book{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.45,.05,.25,1)}
.stage[data-open="0"] .pan{transform:translateX(calc(var(--pw) * -.5))}
.stage[data-open="0"] .book{transform:rotateY(24deg) rotateX(7deg)}
.shadow{position:absolute;left:50%;bottom:-18px;width:calc(var(--pw) * 1.05);height:34px;transform:translateX(-4%);
  background:radial-gradient(ellipse at center, rgba(34,32,28,.32), rgba(34,32,28,0) 70%);transition:all 1s}
.stage[data-open="1"] .shadow{left:0;width:calc(var(--pw) * 2);transform:none}
.spine{position:absolute;top:0;left:calc(50% - 34px);width:34px;height:100%;transform-origin:right center;
  transform:rotateY(-90deg);background:var(--cloth-c, var(--cloth));
  box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;transition:opacity .4s}
.spine::before,.spine::after{content:"";position:absolute;left:0;right:0;height:5px;
  background:repeating-linear-gradient(90deg, var(--burg) 0 4px, var(--foil) 4px 6px, var(--cloth) 6px 10px)}
.spine::before{top:3px}.spine::after{bottom:3px}
.spine span{writing-mode:vertical-rl;color:var(--foil);font:500 max(14px, calc(var(--pw) * .047))/1 var(--display);letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;max-height:86%}
.stage[data-open="1"] .spine{opacity:0}
.base{position:absolute;top:0;width:50%;height:100%}
.base.right{left:50%;transform:translateZ(-6px)}
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;
  transform:translateZ(var(--z, 0px)) rotateY(var(--r, 0deg));transition:transform 1s cubic-bezier(.45,.05,.25,1)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--page)}
.face.back{transform:rotateY(180deg)}
/* gutter shading */
.face.front::after,.base.right::after{content:"";position:absolute;inset:0 auto 0 0;width:16%;pointer-events:none;
  background:linear-gradient(90deg, rgba(34,32,28,.16), rgba(34,32,28,0))}
.face.back::after{content:"";position:absolute;inset:0 0 0 auto;width:16%;pointer-events:none;
  background:linear-gradient(270deg, rgba(34,32,28,.16), rgba(34,32,28,0))}
.face.cover::after{background:linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,0) 40%);width:12%}

/* cloth cover */
.cover{--c:var(--cloth-c, var(--cloth));background:
   repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
   repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px), var(--c);
  border-radius:0 3px 3px 0;color:var(--foil);display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(var(--pw) * .14) calc(var(--pw) * .1) calc(var(--pw) * .1)}
.cover .blind{position:absolute;inset:calc(var(--pw) * .045);border:1px solid rgba(0,0,0,.28);box-shadow:0 0 0 3px rgba(255,255,255,.04) inset, 1px 1px 0 rgba(255,255,255,.07)}
.cover .dev{width:calc(var(--pw) * .25);margin-bottom:calc(var(--pw) * .07)}
.cover .c1{font:500 max(14px, calc(var(--pw) * .047))/1.2 var(--text);letter-spacing:.24em;text-transform:uppercase;margin:0 0 .6em}
.cover .c2{font:400 calc(var(--pw) * .1)/1.02 var(--display);font-style:italic;margin:0 0 .3em;overflow-wrap:anywhere}
.cover .c3{font:400 max(14px, calc(var(--pw) * .048))/1.3 var(--text);font-style:italic;margin:0}
.cover .c4{margin-top:auto;font:500 max(14px, calc(var(--pw) * .047))/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase}
.cover .c4 .os{font-variant-numeric:lining-nums;letter-spacing:.12em}
.ribbon{position:absolute;left:calc(50% + var(--pw) * .62);bottom:calc(-1 * var(--pw) * .16);width:calc(var(--pw) * .055);height:calc(var(--pw) * .22);
  background:var(--burg);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);transform:translateZ(-3px);transition:opacity .4s}
.stage[data-open="1"] .ribbon{opacity:0}

/* endpapers */
.ep{background-color:#E4DED0;background-image:url(art/ep-1950s.svg);background-size:calc(var(--pw) * .32)}
.ep[data-d="1940s"]{background-image:url(art/ep-1940s.svg);background-size:calc(var(--pw) * .15)}
.ep[data-d="1950s"]{background-image:url(art/ep-1950s.svg);background-size:calc(var(--pw) * .32)}
.ep[data-d="1960s"]{background-image:url(art/ep-1960s.svg);background-size:calc(var(--pw) * .24)}
.ep[data-d="1970s"]{background-image:url(art/ep-1970s.svg);background-size:calc(var(--pw) * .2)}

/* pages */
.pg{padding:calc(var(--pw) * .1) calc(var(--pw) * .1) calc(var(--pw) * .09);display:flex;flex-direction:column;
  font-size:max(14px, calc(var(--pw) * .052));line-height:1.42;color:var(--ink)}
.pg .folio{margin-top:auto;text-align:center;font-size:max(14px, calc(var(--pw) * .047));color:var(--ink-2)}
.pg .note{font-size:max(14px, calc(var(--pw) * .047));font-style:italic;color:var(--ink-2);line-height:1.3;margin:0}
.frontis{justify-content:center;align-items:center}
.frontis img{width:86%;margin:0 auto calc(var(--pw) * .04)}
.frontis .note{text-align:center}
.tp{align-items:center;text-align:center;justify-content:flex-start;padding-top:calc(var(--pw) * .2)}
.tp .t1{font-size:max(14px, calc(var(--pw) * .047));letter-spacing:.26em;text-transform:uppercase;margin:0 0 .8em;color:var(--green-dk)}
.tp .t2{font:400 calc(var(--pw) * .108)/1.02 var(--display);font-style:italic;margin:0 0 .25em;color:var(--ink);overflow-wrap:anywhere}
.tp .t3{font-style:italic;margin:0 0 1.1em}
.tp .rule{width:38%;height:1px;background:var(--burg);margin:0 auto 1.1em;position:relative}
.tp .rule::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:var(--burg);transform:translate(-50%,-50%) rotate(45deg)}
.tp .t4{font-size:max(14px, calc(var(--pw) * .048));margin:0}
.tp .t5{margin-top:auto;font-size:max(14px, calc(var(--pw) * .047));letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.tp .t5 .os{font-variant-numeric:lining-nums}
.tp .dev{width:calc(var(--pw) * .12);margin:calc(var(--pw) * .05) auto 0}
.imprint{justify-content:flex-end;font-size:max(14px, calc(var(--pw) * .047));color:var(--ink-2)}
.imprint p{margin:0 0 .8em}
.contents h3{font:400 calc(var(--pw) * .07)/1.1 var(--display);text-align:center;margin:0 0 .9em;letter-spacing:.02em}
.contents ol{list-style:none;margin:0;padding:0;font-size:max(14px, calc(var(--pw) * .048))}
.contents li{display:flex;gap:.4em;align-items:baseline;margin:0 0 .45em}
.contents li .r{color:var(--burg);width:1.6em;flex:0 0 auto}
.contents li .d{flex:1;border-bottom:1px dotted var(--ink-2);transform:translateY(-.25em)}
.chap-eng{justify-content:center}
.chap-eng img{width:100%}
.chap{padding-top:calc(var(--pw) * .13)}
.chap .cn{font-size:max(14px, calc(var(--pw) * .047));letter-spacing:.22em;text-transform:uppercase;color:var(--burg);text-align:center;margin:0 0 .4em}
.chap h4{font:400 calc(var(--pw) * .07)/1.1 var(--display);font-style:italic;text-align:center;margin:0 0 .9em}
.chap .txt{text-align:justify;hyphens:auto;margin:0}
.chap .txt::first-letter{float:left;font:400 3.1em/.8 var(--display);color:var(--burg);margin:.06em .08em 0 0}
.colo{justify-content:center;align-items:center;text-align:center;font-size:max(14px, calc(var(--pw) * .048))}
.colo h4{font:500 max(14px, calc(var(--pw) * .047))/1 var(--text);letter-spacing:.26em;text-transform:uppercase;margin:0 0 1em;color:var(--green-dk)}
.colo .dev{width:calc(var(--pw) * .14);margin:1em auto 0}

/* book controls */
.book-ui{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;margin-top:6px}
.book-ui .where{flex-basis:100%;text-align:center;margin:0;font-size:1rem;color:var(--ink-2);min-height:1.6em}
.book-ui .where b{color:var(--ink);font-weight:600}
.book-caption{font-size:.9375rem;line-height:1.45;color:var(--ink-2);text-align:center;max-width:46ch;margin:12px auto 0}
.js-only{display:none}
.js .js-only{display:revert}
.js .book-ui .btn.js-only{display:inline-flex}
.js .book-ui p.where{display:block}

/* personalise */
.compose{margin:16px auto 0;max-width:560px;background:var(--page);border:1px solid var(--rule);padding:20px 22px 22px;text-align:left}
.compose[hidden]{display:none}
.compose h3{font-size:1.5rem;margin:0 0 4px}
.compose .fine{font-size:.9375rem;color:var(--ink-2);margin:0 0 14px}
.compose .row{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.compose label,.compose legend{display:block;font-size:.9375rem;font-weight:500;margin:0 0 4px;color:var(--ink)}
.compose input[type=text]{width:100%;min-height:44px;font:400 1.0625rem/1.2 var(--text);padding:8px 10px;border:1px solid #8C877E;background:#fff;color:var(--ink);border-radius:2px}
.compose input[aria-invalid="true"]{border-color:var(--burg);box-shadow:0 0 0 1px var(--burg)}
.compose .err{color:var(--burg);font-size:.9375rem;min-height:1.2em;margin:4px 0 0}
.compose fieldset{border:0;padding:0;margin:14px 0 0;grid-column:1/-1}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches label{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 6px;border:1px solid var(--rule);cursor:pointer;margin:0;font-weight:400}
.swatches input{position:absolute;opacity:0;width:1px;height:1px}
.swatches .chip{width:30px;height:30px;border-radius:2px;border:1px solid rgba(0,0,0,.2)}
.swatches input:checked + .chip{outline:2px solid var(--ink);outline-offset:2px}
.swatches input:focus-visible + .chip{outline:3px solid var(--burg);outline-offset:3px}
.compose .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;align-items:center}

/* ----------------------------------------------------------- chapters */
.chapter{padding:clamp(56px, 7vw, 104px) 0}
.chapter.alt{background:var(--ivory-2)}
.ch-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(20px, 3vw, 36px)}
.ch-head .num{font:400 clamp(3rem, 2rem + 3vw, 5rem)/.8 var(--display);font-style:italic;color:var(--burg)}
.ch-head .lab{font:500 .9375rem/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--green-dk);border-top:1px solid var(--rule);padding-top:8px;flex:1}
.h2{font-size:clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);line-height:1.05}
.h2 em{color:var(--burg)}

/* chapter I: plate and galley */
.ch1{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px, 5vw, 80px);align-items:start}
.plate{margin:0;background:var(--page);padding:18px 18px 14px;border:1px solid var(--rule);box-shadow:0 1px 0 #fff inset, 0 24px 40px -28px rgba(34,32,28,.45)}
.plate img{width:100%}
.plate figcaption{font-size:.9375rem;line-height:1.4;color:var(--ink-2);margin-top:12px;text-align:center}
.plate figcaption .sc{color:var(--ink)}
.galley p{font-size:1.25rem}
.galley .first::first-letter{float:left;font:400 4.6em/.78 var(--display);color:var(--burg);margin:.07em .1em 0 0}
.galley .first::first-line{font-variant-caps:all-small-caps;letter-spacing:.06em}
.stamp{display:inline-block;margin:10px 0 0;border:1.5px solid var(--burg);color:var(--burg);padding:8px 14px;font:500 .9375rem/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase}

/* chapter II: the sewing thread */
.sewn{position:relative;margin-top:clamp(28px, 4vw, 52px)}
.thread{position:absolute;left:0;right:0;top:20px;height:24px;pointer-events:none;z-index:0}
.steps li::before{z-index:1}
.thread svg{width:100%;height:24px;overflow:visible}
.thread{transform-origin:left center;transition:transform 2s ease}
.thread path{fill:none;stroke:var(--burg);stroke-width:2.2;stroke-dasharray:14 9}
.js .sewn:not(.sewn-in) .thread{transform:scaleX(0)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px, 3vw, 40px);position:relative}
.steps li{padding-top:64px;position:relative}
.steps li::before{content:"";position:absolute;top:24px;left:0;width:16px;height:16px;border-radius:50%;background:var(--ivory);border:2px solid var(--cloth)}
.alt .steps li::before{background:var(--ivory-2)}
.steps .n{font:400 2.4rem/1 var(--display);font-style:italic;color:var(--burg);display:block;margin-bottom:8px}
.steps h3{font-size:1.625rem;margin-bottom:8px}
.steps p{font-size:1.125rem;line-height:1.55}
.sub{font-size:1.3125rem;max-width:40ch;color:var(--ink-2);margin-top:14px}

/* chapter III: the shelf */
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px, 3vw, 44px);margin-top:clamp(28px, 4vw, 56px);align-items:start}
.vol{display:grid!important;grid-template-rows:clamp(380px, 34vw, 480px) auto}
.vol .bk{align-self:end;width:100%}
.vol{display:flex;flex-direction:column}
.vol .bk{position:relative;aspect-ratio:1/1.32;border-radius:2px 4px 4px 2px;color:var(--foil);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12% 10%;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),var(--c);
  box-shadow:inset 10px 0 12px -8px rgba(0,0,0,.45), 0 18px 30px -22px rgba(34,32,28,.7)}
.vol:nth-child(1) .bk{--c:var(--cloth);max-width:88%}
.vol:nth-child(2) .bk{--c:var(--burg-dk)}
.vol:nth-child(3) .bk{--c:#3E4744;max-width:92%}
.vol .bk::before{content:"";position:absolute;inset:7%;border:1px solid rgba(216,189,132,.45)}
.vol .bk .r{font:500 .9375rem/1 var(--text);letter-spacing:.24em;text-transform:uppercase;margin:0 0 14px;color:var(--foil)}
.vol .bk h3{font-size:clamp(1.7rem, 1.1rem + 1.4vw, 2.4rem);font-style:italic;color:var(--foil);margin:0 0 12px}
.vol .bk .why{font-size:1.0625rem;font-style:italic;color:#EFE3C7;margin:0}
.vol .label{border-top:3px double var(--ink);margin-top:0;padding-top:16px}
.vol .label p{font-size:1.125rem}
.vol ul{list-style:none;margin:0 0 14px;padding:0;font-size:1.0625rem}
.vol li{padding:7px 0;border-bottom:1px solid var(--rule)}
.vol li::before{content:"\2766";color:var(--burg);margin-right:8px;font-size:.9em}
.shelf-line{height:12px;background:linear-gradient(var(--cloth-dk), var(--cloth));grid-column:1/-1;margin-top:-1px;box-shadow:0 10px 20px -12px rgba(0,0,0,.4)}
.also{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;margin-top:40px;border-top:1px solid var(--rule);padding-top:22px}
.also p{font-size:1.125rem;margin:0}
.also .m{color:var(--burg);font-family:var(--display);font-size:1.4rem;margin-right:8px}

/* chapter IV: the index */
.ix-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px, 5vw, 80px);margin-top:clamp(24px, 3vw, 40px);align-items:start}
.index{columns:2;column-gap:40px;font-size:1.125rem}
.index h3{font:400 1.75rem/1 var(--display);color:var(--burg);margin:0 0 6px;break-after:avoid}
.index ul{list-style:none;margin:0 0 18px;padding:0;break-inside:avoid}
.index li{margin:0 0 6px;line-height:1.35}
.index .e{display:flex;align-items:baseline;gap:6px;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:0;padding:4px 0;min-height:44px;cursor:pointer}
.index .e .t{flex:0 1 auto}
.index .e .d{flex:1;border-bottom:1px dotted #8C877E;min-width:12px;transform:translateY(-.3em)}
.index .e .n{color:var(--green-dk);font-variant-numeric:oldstyle-nums}
.index .e[aria-pressed="true"] .t{color:var(--burg);text-decoration:underline;text-underline-offset:.2em}
.index .e:hover .t{color:var(--burg)}
.index .full{display:block;font-style:italic;color:var(--ink-2);font-size:1rem;margin:-2px 0 4px}
.js .index .full{display:none}
.specimen{position:sticky;top:24px;background:var(--page);border:1px solid var(--rule);padding:clamp(24px, 3vw, 40px);min-height:340px;display:flex;flex-direction:column}
.specimen .no{font:500 .9375rem/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--burg);margin:0 0 18px}
.specimen .q{font:400 clamp(2rem, 1.3rem + 2vw, 3.2rem)/1.08 var(--display);font-style:italic;margin:0 0 18px}
.specimen .from{color:var(--ink-2);font-size:1.0625rem;margin-top:auto}
.guides{margin-top:34px}
.guides h3{font:500 .9375rem/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--green-dk);margin:0 0 10px}
.guides ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px}
.guides a{display:inline-block;padding:8px 0;font-size:1.0625rem}

/* chapter V: reads like */
.spread{display:grid;grid-template-columns:1fr 1fr;background:var(--page);margin-top:clamp(24px, 3vw, 44px);
  box-shadow:0 30px 50px -36px rgba(34,32,28,.6), 0 0 0 1px var(--rule);position:relative}
.spread::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:60px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg, rgba(34,32,28,0), rgba(34,32,28,.12) 50%, rgba(34,32,28,0))}
.spread .l,.spread .r{padding:clamp(28px, 4vw, 64px)}
.spread .l{display:flex;flex-direction:column;justify-content:center;text-align:center}
.spread .l img{margin:0 auto 22px;width:100%;max-width:420px}
.spread .cn{font-size:.9375rem;letter-spacing:.22em;text-transform:uppercase;color:var(--burg);margin:0 0 8px}
.spread h3{font-size:clamp(1.8rem, 1.2rem + 1.4vw, 2.5rem);font-style:italic}
.spread .r .txt{font-size:1.3125rem;line-height:1.62;text-align:justify;hyphens:auto}
.spread .r .txt::first-letter{float:left;font:400 4.2em/.78 var(--display);color:var(--burg);margin:.07em .1em 0 0}
.spread .tag{font-size:.9375rem;font-style:italic;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:10px;margin-top:18px}
.end-up{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px, 4vw, 64px);margin-top:clamp(40px, 5vw, 72px);align-items:start}
.end-up .big{font:400 clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem)/1.15 var(--display);margin:0 0 18px}
.end-up .big em{color:var(--burg)}
.papers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.papers figure{margin:0}
.papers .sw{aspect-ratio:3/4;border:1px solid var(--rule);background-size:44px}
.papers .sw.ep{--pw:220px}
.papers figcaption{font-size:.9375rem;text-align:center;margin-top:6px;color:var(--ink-2)}
.papers-note{grid-column:1/-1;font-size:.9375rem;color:var(--ink-2);margin:10px 0 0}

/* epigraph */
.epi{background:var(--cloth);color:var(--on-green);padding:clamp(72px, 9vw, 130px) 0;position:relative;overflow:hidden}
.epi blockquote{margin:0 auto;max-width:900px;text-align:center}
.epi .q{font:400 clamp(1.9rem, 1.2rem + 2.2vw, 3.3rem)/1.18 var(--display);font-style:italic;color:var(--on-green);margin:0 0 22px}
.epi .q em{color:var(--foil);font-style:normal}
.epi footer{font:500 1rem/1 var(--text);letter-spacing:.26em;text-transform:uppercase;color:var(--foil)}
.epi .rib{position:absolute;top:0;left:calc(50% + 520px);width:22px;height:62%;background:var(--burg);clip-path:polygon(0 0,100% 0,100% 100%,50% 92%,0 100%)}

/* Amanda */
.am{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px, 5vw, 80px);align-items:start}
.portrait{margin:0;background:var(--page);padding:16px;border:1px solid var(--rule);position:relative}
.portrait .pm{border:1px solid rgba(34,32,28,.25);padding:10px;background:#F7F2E8}
.portrait figcaption{font-size:.9375rem;color:var(--ink-2);margin-top:10px;text-align:center}
.am h2{font-size:clamp(2rem, 1.3rem + 2vw, 3.1rem);font-style:italic;margin-bottom:22px}
.creds{list-style:none;padding:16px 0 0;margin:20px 0 0;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:1.0625rem}
.creds li::before{content:"\25C6";color:var(--burg);font-size:.6em;margin-right:8px;vertical-align:.25em}

/* terms: the list */
.list-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px, 5vw, 72px);align-items:start;margin-top:clamp(20px, 3vw, 36px)}
.catalogue{list-style:none;margin:0;padding:0;border-top:3px double var(--ink)}
.catalogue li{padding:18px 0;border-bottom:1px solid var(--rule)}
.catalogue .line{display:flex;align-items:baseline;gap:10px}
.catalogue .t{font:400 1.75rem/1.1 var(--display)}
.catalogue .d{flex:1;border-bottom:1px dotted #8C877E;transform:translateY(-.35em);min-width:20px}
.catalogue .p{font:400 1.5rem/1.1 var(--display);color:var(--burg);white-space:nowrap}
.catalogue .p.muted{color:var(--ink-2);font-style:italic;font-size:1.25rem}
.catalogue p{font-size:1.0625rem;color:var(--ink-2);margin:6px 0 0;max-width:52ch}
.soon{display:inline-block;font:500 .875rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--burg);color:var(--burg);padding:5px 7px;margin-left:8px;vertical-align:.3em}
.bookplate{background:var(--page);border:1px solid var(--rule);padding:34px 30px;text-align:center;position:relative}
.bookplate::before{content:"";position:absolute;inset:8px;border:1px solid var(--burg);pointer-events:none}
.bookplate .from{font:400 1.5rem/1 var(--display);font-style:italic;color:var(--ink-2)}
.bookplate .amt{font:400 clamp(4rem, 2.6rem + 4vw, 6.4rem)/1 var(--display);color:var(--burg);font-variant-numeric:lining-nums;margin:4px 0 10px;display:block}
.bookplate p{font-size:1.0625rem}

/* notes (faq) */
.notes{columns:3;column-gap:44px;margin-top:clamp(20px, 3vw, 36px)}
.notes div{break-inside:avoid;margin:0 0 24px}
.notes h3{font-size:1.5rem;margin:0 0 8px}
.notes h3 sup{font-family:var(--text);color:var(--burg);font-size:.6em;margin-right:6px}
.notes p{font-size:1.125rem}

/* close: the back board */
.close{background:
   repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
   repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px), var(--cloth);
  color:var(--on-green);padding:clamp(72px, 9vw, 130px) 0;text-align:center;position:relative}
.close::before{content:"";position:absolute;inset:18px;border:1px solid rgba(216,189,132,.35);pointer-events:none}
.close img.dev{width:96px;margin:0 auto 20px}
.close .lab{font:500 .9375rem/1 var(--text);letter-spacing:.26em;text-transform:uppercase;color:var(--foil);margin:0 0 16px}
.close h2{font-size:clamp(2.4rem, 1.5rem + 2.8vw, 4.2rem);color:var(--on-green);margin-bottom:18px}
.close .lead{max-width:40ch;margin:0 auto 28px;color:var(--on-green);font-size:1.3125rem}
.close .ctas{justify-content:center}
.close .btn{background:var(--foil);border-color:var(--foil);color:var(--cloth-dk)!important}
.close .btn:hover{background:#E8D3A4;border-color:#E8D3A4;color:var(--cloth-dk)!important}
.close .btn.ghost{background:transparent;border-color:var(--on-green);color:var(--on-green)!important}
.close .btn.ghost:hover{background:var(--on-green);color:var(--cloth-dk)!important}
.close .small{margin:20px 0 0;font-size:1.0625rem;color:var(--on-green)}
.close .colo-note{max-width:60ch;margin:34px auto 0;font-size:.9375rem;color:#D7E2D3;font-style:italic}

.site-foot{padding:44px 0 80px;border-top:1px solid var(--rule);font-size:1rem;color:var(--ink-2)}
.site-foot .wrap{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:28px}
.site-foot img{width:300px;max-width:100%;margin-bottom:12px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li a{display:inline-block;padding:6px 0;color:var(--ink)}

/* reveal: visible by default, gentle when JS runs */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.js .rv.in{opacity:1;transform:none}

/* ----------------------------------------------------------- tablet and mobile */
@media (max-width:1240px){.epi .rib{left:auto;right:20px;height:34%}.epi blockquote{padding:0 40px}}
@media (max-width:1100px){
  .mast nav ul{gap:16px}
  .mast-brand img{width:200px}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-copy,.hero-book{grid-column:1;grid-row:auto}
  .hero-copy{max-width:680px}
  .notes{columns:2}
}
@media (max-width:900px){
  .mast .wrap{flex-wrap:wrap;gap:10px 16px;min-height:72px;padding-top:10px;padding-bottom:10px}
  .mast-brand img{width:170px}
  .js .menu-btn{display:inline-flex;margin-left:auto}
  .mast .talk{display:none}
  .mast nav{order:3;flex-basis:100%;margin:0}
  .js .mast nav{display:none}
  .js .mast nav.open{display:block}
  .mast nav ul{flex-direction:column;gap:0;padding:6px 0 10px}
  .mast nav a{display:block;padding:10px 0;font-size:1.1875rem;border-top:1px solid var(--rule)}
  .ch1,.am,.list-grid,.ix-grid,.end-up{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .shelf{grid-template-columns:1fr}
  .vol{grid-template-rows:auto auto}
  .vol .bk{max-width:340px!important;width:80%;margin:0 auto}
  .shelf-line{display:none}
  .vol .label{border-top:0}
  .vol{border-bottom:3px double var(--ink);padding-bottom:24px}
  .specimen{position:relative;top:auto;min-height:0}
  .spread{grid-template-columns:1fr}
  .spread::before{display:none}
  .spread .l{border-bottom:1px solid var(--rule)}
  .epi .rib{left:auto;right:24px;height:40%}
  .epi blockquote{padding:0 34px}
}
@media (max-width:640px){
  body{font-size:1.1875rem}
  :root{--pw:min(300px, calc(100vw - 64px))}
  .stage{width:auto}
  .hero{padding-top:20px}
  .hero h1{font-size:clamp(2.35rem, 1.4rem + 4.6vw, 3rem)}
  .hero .lead{font-size:1.25rem}
  .ctas .btn{flex:1 1 auto}
  .stage{height:calc(var(--ph) + 44px);margin:0 calc(-1 * var(--gut))}
  .stage[data-open="1"][data-focus="left"] .pan{transform:translateX(calc(var(--pw) * .5))}
  .stage[data-open="1"][data-focus="right"] .pan{transform:translateX(calc(var(--pw) * -.5))}
  .stage[data-open="0"] .book{transform:rotateY(18deg) rotateX(6deg)}
  .compose .row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:0}
  .steps li{padding:0 0 26px 40px}
  .steps li::before{top:6px}
  .thread{left:7px;right:auto;top:8px;bottom:30px;width:2px;height:auto;transform-origin:top center}
  .js .sewn:not(.sewn-in) .thread{transform:scaleY(0)}
  .thread svg{display:none}
  .thread{background:var(--burg)}
  .index{columns:1}
  .guides ul{grid-template-columns:1fr}
  .also{grid-template-columns:1fr}
  .papers{grid-template-columns:repeat(2,1fr)}
  .notes{columns:1}
  .catalogue .line{flex-wrap:wrap}
  .catalogue .d{display:none}
  .catalogue .p{flex-basis:100%}
  .site-foot .wrap{grid-template-columns:1fr}
  .close::before{inset:10px}
  .epi .rib{width:16px;right:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .rv{opacity:1;transform:none}
  .js .sewn .thread{transform:none}
}

/* ===================================================== inner: Amanda's writing */
.keep-ribbon{position:fixed;top:0;right:clamp(14px, 3vw, 40px);width:16px;height:100vh;z-index:15;pointer-events:none}
.keep-ribbon span{display:block;width:100%;height:100%;background:var(--burg);transform-origin:top;transform:scaleY(0);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 12px),0 100%)}
.st-head{padding:clamp(28px, 4vw, 56px) 0 clamp(24px, 3vw, 40px);border-bottom:1px solid var(--rule)}
.crumb{font-size:1rem;color:var(--ink-2);margin:0 0 26px}
.crumb a{color:var(--ink-2)}
.st-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px, 4vw, 72px);align-items:end}
.st-head h1{font-size:clamp(2.8rem, 1.6rem + 3.6vw, 5.2rem);line-height:1;margin:0 0 16px}
.st-head h1 em{color:var(--burg)}
.st-sub{font-size:1.3125rem;font-style:italic;color:var(--ink-2);margin:0}
.st-intro{font-size:1.25rem;margin:0}
.notes-bar{display:flex;gap:18px;align-items:center;margin-top:28px;padding-top:20px;border-top:1px dotted #8C877E}
.notes-bar p{margin:0;font-size:1rem;color:var(--ink-2);max-width:70ch}
.opening{padding:clamp(48px, 6vw, 96px) 0}
.op-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 240px;background:var(--page);
  box-shadow:0 30px 50px -36px rgba(34,32,28,.6), 0 0 0 1px var(--rule);position:relative}
.op-grid.rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 240px}
.op-grid.two{grid-template-columns:minmax(0,2fr) 240px;box-shadow:none;background:transparent}
.op-page{padding:clamp(28px, 4vw, 60px)}
.op-grid:not(.two) .op-page:first-child{border-right:1px solid rgba(34,32,28,.08);box-shadow:inset -24px 0 30px -30px rgba(34,32,28,.35)}
.op-plate{text-align:center;display:flex;flex-direction:column;justify-content:center}
.op-plate img{margin:0 auto 20px;width:100%;max-width:440px}
.opening .cn{font-size:.9375rem;letter-spacing:.22em;text-transform:uppercase;color:var(--burg);margin:0 0 8px}
.opening h2{font-size:clamp(1.9rem, 1.3rem + 1.5vw, 2.7rem);font-style:italic}
.op-text{display:flex;flex-direction:column;justify-content:center}
.op-text .txt{font-size:1.375rem;line-height:1.62;text-align:justify;hyphens:auto;margin:0}
.op-text .txt::first-letter{float:left;font:400 4.3em/.78 var(--display);color:var(--burg);margin:.07em .1em 0 0}
.op-text .tag{font-size:.9375rem;font-style:italic;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:10px;margin:20px 0 0}
mark{background:linear-gradient(transparent 62%, var(--blush) 62%);color:inherit;padding:0 1px}
sup.nr{color:var(--burg);font-size:.62em;margin-left:1px}
.margin{background:var(--ivory-2);border-left:1px solid var(--rule);padding:clamp(28px, 4vw, 60px) 22px;font-size:1.0625rem;line-height:1.45;color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:16px}
.margin p{margin:0;font-style:italic}
.margin .nr{font-style:normal;color:var(--burg);font-family:var(--display);font-size:1.25rem;margin-right:8px}
.notes-off mark{background:none}
.notes-off sup.nr,.notes-off .margin{display:none}
.notes-off .op-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.notes-off .op-grid.two{grid-template-columns:1fr}
.op-dark{background:var(--cloth);color:var(--on-green)}
.op-dark .op-wide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px, 4vw, 64px);align-items:center}
.dark-plate{margin:0;background:var(--page);padding:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.op-dark .op-text{padding:0}
.op-dark .cn{color:var(--foil)}
.op-dark h2{color:var(--on-green);margin-bottom:20px}
.op-dark .txt{color:var(--on-green)}
.op-dark .txt::first-letter{color:var(--foil)}
.op-dark mark{background:linear-gradient(transparent 62%, rgba(216,189,132,.38) 62%);color:var(--on-green)}
.op-dark sup.nr{color:var(--foil)}
.op-dark .tag{color:#D7E2D3;border-color:rgba(238,244,231,.25)}
.op-dark .margin{background:transparent;border-left:1px solid rgba(216,189,132,.45);color:var(--on-green);padding:8px 0 8px 22px}
.op-dark .margin .nr{color:var(--foil)}
.op-dark .op-grid.two{grid-template-columns:minmax(0,1fr) 220px;gap:28px}
.st-imprint{padding:0 0 clamp(40px, 5vw, 72px)}
.st-imprint p{max-width:62ch;margin:0 auto;text-align:center;font-style:italic;color:var(--ink-2);font-size:1.125rem;border-top:3px double var(--ink);padding-top:20px}
.essay-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px, 5vw, 80px);align-items:start}
.essay .galley p{max-width:62ch}
.pull{font:400 clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem)/1.15 var(--display)!important;font-style:italic!important;color:var(--burg);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 0;margin:26px 0!important}
.draft{border-left:3px solid var(--cloth);padding-left:16px;font-weight:500}
.seal{display:flex;gap:18px;align-items:center;background:var(--page);border:1px solid var(--rule);padding:18px 20px;margin:24px 0}
.seal img{width:64px;flex:0 0 auto}
.seal p{margin:0;font-size:1.25rem;font-style:italic}
.mast nav a[aria-current="page"]{color:var(--burg);text-decoration:underline;text-underline-offset:.3em}
@media (max-width:900px){
  .st-grid,.essay-grid,.op-dark .op-wide{grid-template-columns:1fr}
  .op-grid,.op-grid.rev,.notes-off .op-grid{grid-template-columns:1fr}
  .op-grid.rev .op-plate{order:-1}
  .op-grid:not(.two) .op-page:first-child{border-right:0;box-shadow:none;border-bottom:1px solid var(--rule)}
  .margin{border-left:0;border-top:1px solid var(--rule)}
  .op-dark .op-grid.two{grid-template-columns:1fr}
  .op-dark .margin{border-top:1px solid rgba(216,189,132,.45);border-left:0;padding:18px 0 0}
  .notes-bar{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .keep-ribbon{width:10px;right:6px}
  .op-page{padding:26px 22px}
  .op-text .txt{font-size:1.25rem;text-align:left;hyphens:manual}
  .margin{padding:22px}
  .opening{padding:36px 0}
  .opening .wrap{padding:0 12px}
}
.op-dark .op-grid.two{grid-template-columns:1fr!important;gap:22px}
.op-dark .txt{text-align:left;hyphens:manual}
.op-dark .margin{border-left:0;border-top:1px solid rgba(216,189,132,.45);padding:18px 0 0}
@media (max-width:640px){.keep-ribbon{width:8px;right:2px}}
@media (max-width:640px){.spread .r .txt,.chap .txt{text-align:left;hyphens:manual}}

/* second pass: on phones the book is in the first screen */
@media (max-width:640px){
  .hero{padding:14px 0 36px}
  .hero .wrap{gap:0}
  .hero-copy,.hero-book{display:contents}
  .hero .kicker{order:1;margin:0 0 8px;font-size:.875rem}
  .hero h1{order:2;font-size:2.3rem;margin:0 0 4px}
  .stage{order:3}
  .book-ui{order:4;margin-top:0}
  .compose{order:5}
  .hero .ctas{order:6;margin-top:14px}
  .hero .ctas .btn.ghost{display:none}
  .price-line{order:7;margin:10px 0 0;font-size:1rem;text-align:center}
  .hero .lm{order:8;margin:12px 0 0;font-size:1rem}
  .hero .lead{order:9;margin:18px 0 0}
  .book-caption{order:10;margin-top:14px}
  .stage{--pw:252px}
  .stage[data-open="1"]{--pw:min(300px, calc(100vw - 64px))}
  .stage[data-open="0"]{height:calc(var(--ph) + 30px)}
  .book-ui.closed #b-prev,.book-ui.closed #b-next,.book-ui.closed .where{display:none}
  .book-ui.closed{flex-wrap:nowrap}
  .book-ui.closed .btn{flex:1 1 0;padding-left:.6em;padding-right:.6em}
}
.stage{--ph:calc(var(--pw) * 1.42)}
@media (max-width:640px){
  .js .book-ui.closed p.where{display:none}
  .js .book-ui.closed .btn.js-only#b-prev,.js .book-ui.closed .btn.js-only#b-next{display:none}
}
.js .menu-btn.js-only{display:none}
@media (max-width:900px){.js .menu-btn.js-only{display:inline-flex;margin-left:auto}}