:root{--paper:#EDE7DC;--card:#F6F3EC;--ink:#181F25;--steel:#3F5A62;--steel-d:#2A3F45;--peach:#FE8A66;--peachink:#B3431F;--line:#D3CDC0;--mut:#55666B;--on:#EDE6D8}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 'Frank Ruhl Libre',Georgia,serif}
a{color:var(--peachink);text-underline-offset:3px}a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.prog{position:fixed;left:0;top:0;height:4px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--peach);z-index:50}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;max-width:1160px;margin:0 auto;font:500 13px 'JetBrains Mono',monospace;position:relative;z-index:3}
.wm{font:400 30px 'Young Serif',serif;color:inherit;text-decoration:none}.top nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.top nav a{color:inherit;text-decoration:none;opacity:.85}
.top .try{background:var(--peach);color:var(--ink);padding:9px 16px;border-radius:999px;font-weight:600;opacity:1}
.band{position:relative;overflow:hidden;color:var(--on);background:var(--steel)}.band.peach{background:var(--peach);color:var(--ink)}
.band .top{color:inherit}.band.peach .top .try{background:var(--ink);color:var(--paper)}
.band .in{max-width:1160px;margin:0 auto;padding:34px 24px 74px;position:relative;z-index:2}
.band .crumb{font:500 12px 'JetBrains Mono';letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-bottom:18px}.band .crumb a{color:inherit;text-decoration:none}
.band h1{font:500 clamp(40px,6.4vw,84px)/.98 'Frank Ruhl Libre',serif;letter-spacing:-.02em;margin:0 0 22px;max-width:15ch}
.band .meta{display:flex;gap:10px;flex-wrap:wrap;font:500 12px 'JetBrains Mono'}.band .meta span{border:1px solid currentColor;border-radius:999px;padding:5px 12px;opacity:.9}
.dogear{position:absolute;right:0;top:0;width:min(34vw,360px);height:min(34vw,360px);z-index:1;pointer-events:none}
.dogear i{position:absolute;right:0;top:0;width:100%;height:100%;background:var(--ink);opacity:.12;clip-path:polygon(0 0,100% 0,100% 100%)}
.band.peach .dogear i{opacity:.13}.dogear b{position:absolute;right:0;top:0;width:100%;height:100%;background:var(--paper);clip-path:polygon(0 0,100% 100%,0 100%);transform:translate(0,0);opacity:0}
.stripe{height:14px;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(24,31,37,.12) 10px 12px)}
main{max-width:1160px;margin:0 auto;padding:54px 24px 90px;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:60px;align-items:start}
main.single{display:block;max-width:780px}
article>p:first-of-type{font-size:clamp(21px,2.3vw,25px);line-height:1.5;color:var(--steel);max-width:34em}
h2{font:500 clamp(28px,3.4vw,38px)/1.1 'Frank Ruhl Libre',serif;margin:56px 0 14px;letter-spacing:-.01em;position:relative;display:inline-block}
h2:after{content:"";position:absolute;left:-4px;right:-6px;bottom:3px;height:.42em;background:var(--peach);opacity:.55;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) .15s;border-radius:2px}
h2.in-view:after,.no-js h2:after{transform:scaleX(1)}h2{z-index:0}
h3{font:700 20px/1.3 'Frank Ruhl Libre',serif;margin:26px 0 4px}
p,li{font-size:19px;max-width:64ch}p{margin:0 0 16px}ul,ol{padding-left:24px;margin:0 0 18px}li{margin-bottom:8px}li::marker{color:var(--peachink);font-weight:700}
.dl{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 34px}.dl a{font:600 14px 'JetBrains Mono';padding:16px 22px;border-radius:14px;text-decoration:none;color:var(--ink);background:var(--peach);box-shadow:0 8px 0 -3px rgba(24,31,37,.25);transition:transform .15s}.dl a:hover{transform:translateY(-2px)}.dl a.alt{background:transparent;border:1.5px solid var(--ink);box-shadow:none}
.entry{margin:26px 0;padding:24px 28px;background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 22px 36px -26px rgba(24,31,37,.5);transform:rotate(-.6deg);background-image:repeating-linear-gradient(transparent 0 33px,rgba(63,90,98,.13) 33px 34px);position:relative}
.entry:before{content:"";position:absolute;right:-1px;top:-1px;width:34px;height:34px;background:linear-gradient(225deg,var(--paper) 50%,#d9cdb7 50%);border-bottom-left-radius:8px}
.entry p{margin:0 0 6px;font-size:18px;line-height:34px}mark{background:linear-gradient(transparent 12%,rgba(254,138,102,.7) 12%,rgba(254,138,102,.7) 90%,transparent 90%);color:inherit;padding:0 2px;background-size:0% 100%;background-repeat:no-repeat;transition:background-size 1s cubic-bezier(.2,.7,.2,1) .3s}.in-view mark,.no-js mark{background-size:100% 100%}
.shot{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;transform:rotate(1.8deg);box-shadow:0 36px 56px -30px rgba(24,31,37,.55)}.shot img{width:100%;height:auto;display:block;border-radius:6px}
aside{position:sticky;top:26px}
.cta{margin-top:36px;background:var(--steel);color:var(--on);border-radius:20px;padding:28px 28px 30px;position:relative;overflow:hidden}.cta:after{content:"";position:absolute;right:-1px;top:-1px;width:56px;height:56px;background:var(--peach);clip-path:polygon(0 0,100% 0,100% 100%)}
.cta b{font:400 34px 'Young Serif'}.cta p{color:#C9D3D1;font-size:17px;margin:10px 0 16px}.cta a{display:inline-block;background:var(--peach);color:var(--ink);padding:12px 20px;border-radius:999px;font:600 13px 'JetBrains Mono';text-decoration:none}
.inline-cta{margin:56px 0 0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}.reveal.in-view,.no-js .reveal{opacity:1;transform:none}
/* index */
.hero{padding-bottom:30px}.hero h1{max-width:12ch;font-size:clamp(46px,8vw,112px)}.hero p.lead{font-size:clamp(19px,2vw,24px);max-width:min(30em,calc(100vw - 48px),620px);margin:0 0 30px;color:var(--on);opacity:.92}
.marked{background:var(--card);color:var(--ink);border-radius:8px;padding:26px 30px;max-width:520px;transform:rotate(-1.5deg);box-shadow:0 30px 50px -28px rgba(0,0,0,.6);font-size:22px;line-height:1.45;position:relative;z-index:2;margin-top:8px}.marked small{display:block;font:500 11px 'JetBrains Mono';letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:10px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:10px;grid-auto-rows:1fr}.card{display:flex;flex-direction:column;border-radius:22px;padding:30px;text-decoration:none;color:var(--ink);min-height:250px;position:relative;overflow:hidden;transition:transform .2s ease-out}.card{-webkit-tap-highlight-color:transparent;backface-visibility:hidden;-webkit-backface-visibility:hidden}@media(hover:hover){.card:hover{transform:translateY(-4px)}}.card:active{transform:scale(.985);transition-duration:.08s}
.card.c1{background:var(--peach)}.card.c2{background:var(--steel);color:var(--on)}.card .k{font:500 11px 'JetBrains Mono';letter-spacing:.1em;text-transform:uppercase;opacity:.8}.card b{display:block;font:500 clamp(24px,2.2vw,30px)/1.1 'Frank Ruhl Libre';margin:12px 0 14px;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}.card span:not(.k){opacity:.9;font-size:17px}.card .go{margin-top:auto;padding-top:14px;align-self:flex-end;font:600 24px 'JetBrains Mono'}
.card:after{content:"";position:absolute;right:0;top:0;width:60px;height:60px;background:rgba(24,31,37,.16);clip-path:polygon(0 0,100% 0,100% 100%)}
footer{background:var(--ink);color:#C9D3D1;margin-top:0}footer .in{max-width:1160px;margin:0 auto;padding:34px 24px 44px;font:13px 'JetBrains Mono';display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}footer a{color:var(--peach)}
/* index hero: marked lines from books in the public domain */
.stack{position:absolute;right:max(24px,calc((100vw - 1160px)/2 + 24px));top:130px;width:380px;z-index:2}.stack .q{background:var(--card);color:var(--ink);border-radius:8px;padding:22px 26px;font-size:21px;line-height:1.4;box-shadow:0 30px 50px -28px rgba(0,0,0,.65)}.stack .q small{display:block;font:500 11px 'JetBrains Mono';letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:10px}
.stack .q1{transform:rotate(3deg)}.stack .q2{transform:rotate(-2.5deg) translate(-26px,-8px);margin-top:20px}
.stack .q mark{background-size:100% 100%}
article{counter-reset:s}h2{counter-increment:s}h2:before{content:counter(s,decimal-leading-zero);display:block;font:500 12px 'JetBrains Mono';letter-spacing:.12em;color:var(--peachink);margin-bottom:6px}
h2,.band h1,.card b{text-wrap:balance;overflow-wrap:break-word}
h3.step{display:flex;gap:14px;align-items:flex-start;font-size:22px;margin:34px 0 10px}h3.step .n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--peach);color:var(--ink);display:grid;place-items:center;font:600 16px 'JetBrains Mono';box-shadow:0 5px 0 -2px rgba(24,31,37,.25);margin-top:-2px}
.faqi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px 6px;margin:0 0 14px}.faqi h3.q{margin:0 0 6px;font-size:19px}.faqi p{font-size:17.5px}
article>ul>li,article>ol>li{padding:2px 0}
article>ul,article>ol{list-style:none;padding:0;margin:6px 0 22px;counter-reset:li}
article>ul>li,article>ol>li{position:relative;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--peach);border-radius:10px;padding:12px 16px 12px 18px;margin:0 0 10px;counter-increment:li}
article>ol>li{padding-left:56px}article>ol>li:before{content:counter(li);position:absolute;left:14px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--steel);color:var(--on);display:grid;place-items:center;font:600 13px 'JetBrains Mono'}
article>ul>li>ul{margin:8px 0 0;padding-left:20px}article>ul>li:nth-child(even){border-left-color:var(--steel)}
.hero{padding-bottom:0}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
.top{padding:14px 16px}.top nav a:not(.try){display:none}.wm{font-size:26px}
.band .in{padding:22px 16px 48px}.band h1{font-size:clamp(30px,9.2vw,42px);line-height:1.06;max-width:none;margin-bottom:18px}.hero h1{font-size:clamp(44px,14vw,60px)}
.band .meta{font-size:11px}.band .crumb{font-size:11px;margin-bottom:14px}.dogear{width:110px;height:110px}
main{padding:30px 16px 56px}main.single[style]{padding-top:34px!important}.band.hero .in{padding-bottom:36px}article>ul>li,article>ol>li{padding:10px 12px 10px 14px}article>ol>li{padding-left:50px}article>ol>li:before{left:12px;top:10px}main.single{padding-left:16px;padding-right:16px}
p,li{font-size:17.5px;line-height:1.6}article>p:first-of-type{font-size:20px;line-height:1.45}
h2{margin:40px 0 12px;font-size:27px}h3.step{font-size:20px;gap:12px}h3.step .n{width:36px;height:36px;font-size:15px}
.cards{grid-template-columns:1fr;gap:16px;grid-auto-rows:auto}.card{padding:22px 22px 18px;min-height:0;border-radius:18px}.card b{font-size:25px}.card span:not(.k){font-size:16px}
.entry{padding:20px 18px;margin:22px 0;transform:none}.entry p{font-size:17px;line-height:34px}
.marked{font-size:19px;padding:20px 20px;max-width:100%}
.dl{flex-direction:column}.dl a{text-align:center}
.shot{max-width:300px;margin:0 auto}aside{margin-top:6px}
.cta{padding:24px 20px 26px;border-radius:16px}.cta b{font-size:30px}
.faqi{padding:16px 16px 4px}
footer .in{padding:28px 16px 36px}
}
@media(max-width:1100px){.stack{display:none}}
@media(max-width:900px){main{grid-template-columns:1fr;gap:34px}aside{position:static}.shot{max-width:420px}.dogear{opacity:.7}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtout .18s ease-in both}::view-transition-new(root){animation:vtin .3s ease-out .05s both}
@keyframes vtout{to{opacity:0}}@keyframes vtin{from{opacity:0;transform:translateY(8px)}}
@keyframes pgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body{animation:pgin .35s ease-out both}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;border:0;background:var(--peach);color:var(--ink);font:600 22px/1 'JetBrains Mono',monospace;box-shadow:0 8px 0 -3px rgba(24,31,37,.28),0 14px 24px -10px rgba(24,31,37,.5);cursor:pointer;z-index:40;opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s;-webkit-tap-highlight-color:transparent}
.totop.on{opacity:1;transform:none;pointer-events:auto}.totop:active{transform:scale(.94)}
footer a.up{color:var(--peach)}
@media(prefers-reduced-motion:reduce){h2:after,mark,.reveal,.totop{transition:none}.prog{display:none}body,::view-transition-old(root),::view-transition-new(root){animation:none}html{scroll-behavior:auto}}
