@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* The book's own palette: the cover's flat navy, its ivory title, its gold rule,
   the interior's white paper and black ink, and the ballpoint blue. */
:root{
  --navy:#081324; --ivory:#EEE4CE; --gold:#C4A157;
  --paper:#FFFFFF; --ink:#000000; --ink-soft:#3B3B3B; --pen:#1B2A86;
  --measure:34em;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Cormorant Garamond",Garamond,"Times New Roman",serif;font-weight:600;
  font-size:clamp(19px,1.05rem + .35vw,22px);line-height:1.55;font-kerning:normal;
  font-variant-numeric:oldstyle-nums;}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.wrap{width:min(100% - 32px, 68rem);margin-inline:auto}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1em}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--ivory);color:var(--navy);padding:.4em .8em;z-index:9}

/* NAVY: the cover */
.navy{background:var(--navy);color:var(--ivory)}
.masthead{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0 0;gap:1rem;flex-wrap:wrap}
.masthead a{text-decoration:none;letter-spacing:.22em;font-size:.82rem;font-weight:600}
.masthead nav a{letter-spacing:.02em;font-size:1rem;margin-left:1.4rem;color:var(--ivory);opacity:.85}
.masthead nav a:hover{opacity:1;text-decoration:underline}

.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,104px)}
.hero .book{transform:rotate(-1.2deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.04)}
.hero blockquote{margin:0;font-size:clamp(1.9rem,1.2rem + 2.6vw,3.5rem);line-height:1.1;font-weight:600;letter-spacing:-.005em;text-wrap:balance}
.hero blockquote .last{display:block;margin-top:.25em;letter-spacing:.06em}
.hero .who{margin:1.6em 0 0;color:var(--gold);font-size:1.05rem;line-height:1.4}
.hero .who b{color:var(--ivory);font-weight:600;letter-spacing:.14em}
.buy{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.8em}
.btn{display:inline-block;text-decoration:none;padding:.62em 1.25em;font-size:1.02rem;border:1px solid var(--ivory);color:var(--ivory)}
.btn.solid{background:var(--ivory);color:var(--navy)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* the receipt */
.strip{padding:0 0 clamp(40px,6vw,80px);overflow:hidden}
.strip figure{margin:0}
.strip .wide{width:min(100%,1400px);margin-inline:auto}
.strip .narrow{display:none}
.strip figcaption{width:min(100% - 32px, 40rem);margin:clamp(8px,2vw,24px) auto 0;text-align:center;font-size:1.15rem;line-height:1.5;color:var(--ivory)}
.strip figcaption em{font-style:normal;color:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .js .strip .wide img{clip-path:inset(0 0 0 100%);transition:clip-path 2.2s cubic-bezier(.25,.6,.2,1)}
  .js .strip.seen .wide img{clip-path:inset(0 0 0 0)}
}

/* PAPER: the interior */
.paper{padding:clamp(56px,8vw,112px) 0}
.paper h2{font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem);line-height:1.12;font-weight:600;margin:0 0 .7em;max-width:18em}
.paper .lead{font-size:1.1em}
.author{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,72px);align-items:start}
.author .photo{margin:0}
.author .photo img{filter:grayscale(.15)}
.author .photo figcaption{font-size:.95rem;color:var(--ink-soft);margin-top:.6em}
.one{font-size:clamp(2.2rem,1.4rem + 2.8vw,3.9rem);line-height:1.12;margin:0;max-width:17em;text-wrap:balance}
.one + p{margin-top:1.1em;color:var(--ink-soft)}
.rule{border:0;border-top:1px solid var(--gold);width:90px;margin:0 0 2.2em}
.contents{columns:2 18rem;column-gap:3rem;padding:0;margin:1.4em 0 0;list-style:none;counter-reset:ch}
.contents li{break-inside:avoid;padding:.18em 0;display:flex;gap:.8em}
.contents li span{min-width:1.6em;color:var(--ink-soft);font-variant-numeric:lining-nums tabular-nums;font-size:.92em}
.reads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.reads .sample{border:1px solid var(--ink);padding:1.4em 1.6em 1.2em;font-size:1.25rem;line-height:1.45}
.reads .sample p{margin:0 0 .7em}
.reads .sample .from{font-size:.9rem;color:var(--ink-soft);margin:0}
.dl{display:inline-block;margin-top:1.2em;text-decoration:none;border:1px solid var(--ink);padding:.62em 1.25em}
.dl:hover{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.small{font-size:.92rem;color:var(--ink-soft)}

footer.navy{padding:48px 0 56px;font-size:1rem}
footer .row{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:baseline}
footer a{color:var(--ivory)}
footer .fine{color:var(--gold);font-size:.92rem;margin-top:1.4em}

/* article pages */
.article-head{padding:clamp(40px,6vw,80px) 0 clamp(40px,6vw,72px)}
.article-head h1{font-size:clamp(2.2rem,1.4rem + 3vw,4rem);line-height:1.06;font-weight:600;margin:.3em 0 .35em;max-width:15em;text-wrap:balance}
.article-head p{max-width:32em;margin:0;color:var(--ivory);font-size:1.12em}
.article-head .back{color:var(--gold);text-decoration:none;font-size:1rem}
.article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.article .receipt{position:sticky;top:24px;margin:0}
.article .receipt figcaption{font-size:.95rem;color:var(--ink-soft);margin-top:.4em}
.article h2{font-size:clamp(1.6rem,1.2rem + 1vw,2.1rem);line-height:1.2;margin:1.8em 0 .5em;font-weight:600}
.article h2:first-child{margin-top:0}
.article blockquote{margin:1.2em 0;padding-left:1.1em;border-left:2px solid var(--gold);font-style:italic}
.pull{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:1em 0;margin:1.8em 0}
.pull dt{font-size:.95rem;color:var(--ink-soft)}
.pull dd{margin:0 0 .7em}
.pull code{font-family:"DejaVu Sans Mono",Menlo,Consolas,monospace;font-size:.8em;font-weight:600;letter-spacing:0}
.press dl{margin:0}
.press dt{font-weight:700;margin-top:1em}
.press dd{margin:0}
.press ol{padding-left:1.3em}
.press ol li{margin:.35em 0}
.assets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:1.2em}
.assets figure{margin:0}
.assets figcaption{font-size:.95rem;margin-top:.5em}
.draft{background:#FFF6D6;border:1px dashed #9A7B1C;padding:.4em .7em;font-size:.9rem;font-family:system-ui,sans-serif;font-weight:400;color:#5A4510}

@media (max-width:760px){
  .masthead nav a{margin-left:0;margin-right:1.2rem}
  .hero{grid-template-columns:1fr}
  .hero .book{width:62%;max-width:280px;margin-inline:auto}
  .strip .wide{display:none}
  .strip .narrow{display:block;width:min(86%,420px);margin:0 auto;transform:rotate(1.5deg)}
  .author,.reads,.article{grid-template-columns:1fr}
  .author .photo{max-width:260px}
  .article .receipt{position:static;max-width:420px}
}

/* ---- draft 2 ---- */
@font-face{font-family:"Receipt Mono";src:url(/fonts/dejavu-sans-mono-bold-latin.woff2) format("woff2");font-weight:700;font-display:swap}
.hero h1{margin:0;font-size:clamp(2.1rem,1.2rem + 3vw,3.9rem);line-height:1.06;font-weight:600;letter-spacing:-.005em;text-wrap:balance}
.hero h1 span{display:block;color:var(--gold)}
.hero .sub{margin:1.1em 0 0;max-width:30em;font-size:1.12rem;line-height:1.5}
.stakes{padding:clamp(24px,4vw,56px) 0 clamp(56px,8vw,104px)}
.stakes .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.stakes h2{font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem);line-height:1.1;font-weight:600;margin:0 0 .6em;text-wrap:balance}
.stakes p{margin:0 0 1em;max-width:30em}
.stakes .kicker{font-size:1.25rem;margin-top:1.4em;color:var(--gold)}
.tape{background:var(--paper);color:#181818;font-family:"Receipt Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;font-weight:700;
  font-size:clamp(12.5px,.62rem + .35vw,15px);line-height:1.45;padding:34px clamp(18px,3vw,34px) 34px;transform:rotate(1.2deg);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.8);
  --z:10px;clip-path:polygon(0 var(--z),2.5% 0,5% var(--z),7.5% 0,10% var(--z),12.5% 0,15% var(--z),17.5% 0,20% var(--z),22.5% 0,25% var(--z),27.5% 0,30% var(--z),32.5% 0,35% var(--z),37.5% 0,40% var(--z),42.5% 0,45% var(--z),47.5% 0,50% var(--z),52.5% 0,55% var(--z),57.5% 0,60% var(--z),62.5% 0,65% var(--z),67.5% 0,70% var(--z),72.5% 0,75% var(--z),77.5% 0,80% var(--z),82.5% 0,85% var(--z),87.5% 0,90% var(--z),92.5% 0,95% var(--z),97.5% 0,100% var(--z),100% calc(100% - var(--z)),97.5% 100%,95% calc(100% - var(--z)),92.5% 100%,90% calc(100% - var(--z)),87.5% 100%,85% calc(100% - var(--z)),82.5% 100%,80% calc(100% - var(--z)),77.5% 100%,75% calc(100% - var(--z)),72.5% 100%,70% calc(100% - var(--z)),67.5% 100%,65% calc(100% - var(--z)),62.5% 100%,60% calc(100% - var(--z)),57.5% 100%,55% calc(100% - var(--z)),52.5% 100%,50% calc(100% - var(--z)),47.5% 100%,45% calc(100% - var(--z)),42.5% 100%,40% calc(100% - var(--z)),37.5% 100%,35% calc(100% - var(--z)),32.5% 100%,30% calc(100% - var(--z)),27.5% 100%,25% calc(100% - var(--z)),22.5% 100%,20% calc(100% - var(--z)),17.5% 100%,15% calc(100% - var(--z)),12.5% 100%,10% calc(100% - var(--z)),7.5% 100%,5% calc(100% - var(--z)),2.5% 100%,0 calc(100% - var(--z)))}
.tape .head{text-align:center;margin:0 0 .9em}
.tape .head b{display:block;font-size:1.35em;letter-spacing:.02em}
.tape .dash{border:0;border-top:2px dashed #2a2a2a;margin:.9em 0}
.tape ol{list-style:none;margin:0;padding:0;display:grid;gap:.85em}
.tape li{display:grid;grid-template-columns:6.4em minmax(0,1fr) 30px;gap:.7em;align-items:start}
.tape li time{white-space:nowrap}
.tape li i{font-style:normal}
.tape li img{width:30px;height:30px;margin-top:-6px}
.tape .foot{text-align:center;margin:1em 0 0}
.payoff{padding-top:0}
.payoff .big{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.3rem);line-height:1.12;margin:1.2em 0 0;max-width:19em;text-wrap:balance}
.payoff .big span{letter-spacing:.06em}
.ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.ask h2{margin-bottom:.4em}
.ask .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:1em}
.dl.solid{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.dl.solid:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.read-list{counter-reset:none;padding:0;margin:0;list-style:none}
.read-item{padding:2.2em 0;border-top:1px solid #d9d9d9}
.read-item .ch{font-size:.95rem;color:var(--ink-soft);margin:0 0 .5em}
.read-item h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem)!important;line-height:1.14;margin:0 0 .6em!important}
.read-item .mirror{border:1px solid var(--ink);padding:1em 1.2em .3em;margin-top:1.2em}
.read-item .mirror .lbl{font-style:italic;margin-bottom:.4em}
@media (max-width:760px){
  .stakes .grid,.ask{grid-template-columns:1fr}
  .tape{transform:none}
  .tape li{grid-template-columns:minmax(0,1fr) 26px;gap:.1em .5em}
  .tape li time{grid-column:1}
  .tape li i{grid-column:1}
  .tape li img{grid-column:2;grid-row:1 / span 2}
}