:root{
  --paper:#F2EBD4; --paper-warm:#ECE3C2; --paper-deep:#DCD0AA; --band:#E6DCB8;
  --ink:#15110B; --ink-soft:#2B241A; --ink-mid:#4A4131; --ink-mute:#685C47;
  --rule:#C4B58A; --ox:#8A4A1E; --ox-dk:#693514; --gold:#BA8C3E; --gold-soft:#D4B070;
  --serif:"Fraunces","EB Garamond",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --shadow-cover:0 30px 60px -20px rgba(21,17,11,.45),0 12px 24px -12px rgba(21,17,11,.3);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:64px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.62 var(--serif);font-optical-sizing:auto;font-variation-settings:"SOFT" 50,"opsz" 14;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.center{text-align:center}
.small{font-size:15px;color:var(--ink-mute)}
.nw{white-space:nowrap}
.tone{filter:sepia(.5) saturate(1.03) contrast(1.04)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--ink);margin:0;letter-spacing:-.025em;font-variation-settings:"SOFT" 30,"opsz" 144}
h1 em,h2 em{font-style:italic;color:var(--ox);font-weight:600}
h1{font-size:clamp(2.45rem,4.4vw,3.75rem);line-height:1.04}
h2{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.07}
.eb{font:700 13px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ox);margin:0 0 10px}

section{padding:96px 0}
.band{background:var(--band)}
.dark{background:var(--ink);color:#E4D9B8}
.dark h2{color:var(--paper)}
.dark h2 em{color:var(--gold-soft)}
.dark .eb{color:var(--gold-soft)}
.dark .small{color:#B7A985}

/* Section heading with numeral */
.shead{display:grid;grid-template-columns:168px minmax(0,800px);margin-bottom:54px}
.rn{font:italic 600 clamp(3.2rem,6vw,5.4rem)/1 var(--serif);color:var(--ox);letter-spacing:-.03em;font-variation-settings:"opsz" 144}
.dark .rn{color:var(--gold-soft)}
.shead .sub{font-size:20px;margin:16px 0 0;max-width:680px;color:var(--ink-mid)}
.dark .shead .sub{color:#CFC39F}

/* Draft ribbon */
.ribbon{background:var(--ox);color:#fff;font:700 13px/1.4 var(--mono);text-align:center;padding:6px 12px}

/* Top bar */
.launch-bar{background:var(--ink);color:var(--gold-soft);position:sticky;top:0;z-index:30}
.lb{max-width:1240px;margin:0 auto;padding:9px 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;font:500 12.5px/1.3 var(--mono);letter-spacing:.17em;text-transform:uppercase}
.lb p{margin:0}
.lb .mid{display:flex;align-items:center;gap:13px;color:#D8CDA9}
.lb .right{justify-self:end}
.lb-btn{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid var(--gold);padding:12px 0 2px}
.cd{display:flex;gap:4px;background:var(--ox-dk);padding:6px 9px;border-radius:2px;color:var(--paper);letter-spacing:.06em}
.cd div{display:flex;align-items:baseline;gap:1px}
.cd b{font:700 13.5px/1 var(--mono)}
.cd span{font:500 10px/1 var(--mono);text-transform:lowercase;opacity:.82;margin-right:3px}

/* Hero */
.hero{background:linear-gradient(135deg,var(--paper) 0,var(--paper-warm) 100%);border-bottom:1px solid var(--rule);padding:72px 0 76px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:68px;align-items:center}
.byline{display:flex;align-items:center;gap:16px;font:700 13px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ox);margin:0 0 26px}
.byline:after{content:"";flex:1;height:1px;background:var(--rule)}
.byline span:last-child{order:3;color:var(--ink-mute);font-weight:500}
.lede{font-size:21px;line-height:1.48;margin:26px 0 30px;color:var(--ink-soft)}
.lede:first-letter{font:italic 600 4.4em/.78 var(--serif);float:left;color:var(--ox);padding:.08em .1em 0 0}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hstats{display:flex;margin:36px 0 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.si{flex:1;padding:0 18px;border-left:1px solid var(--rule);min-width:0}
.hstats>div:first-child>.si:first-child{border-left:0;padding-left:0}
.hstats>.si:first-child{border-left:0;padding-left:0}
.si i{font-style:inherit}
.hstats b{display:block;font:italic 600 30px/1.1 var(--serif);color:var(--ox);letter-spacing:-.02em}
.si>span{display:block;font:500 11.5px/1.45 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);margin-top:6px}
.frame{position:relative;background:var(--paper);border:1px solid var(--rule);padding:13px;box-shadow:var(--shadow-cover)}
.frame img{width:100%}
.hero .frame img{aspect-ratio:1/1.02;object-fit:cover;object-position:50% 40%}
.pull{position:absolute;left:-34px;bottom:-30px;width:min(330px,82%);background:var(--paper);padding:22px 24px 16px;box-shadow:0 18px 32px -12px rgba(21,17,11,.38);margin:0}
.pull:before{content:"\201C";position:absolute;left:18px;top:-30px;font:italic 700 66px/1 var(--serif);color:var(--ox)}
.pull p{margin:0;font-style:italic;font-weight:500;font-size:18px;line-height:1.35;color:var(--ink)}
.pull cite{display:block;font:500 11.5px/1.4 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-mute);margin-top:10px}

/* Buttons */
.btn{display:inline-block;font:700 14px/1.2 var(--mono);letter-spacing:.17em;text-transform:uppercase;text-decoration:none;text-align:center;padding:21px 32px;border:1px solid var(--ink);border-radius:2px;cursor:pointer;transition:background .15s,color .15s}
.buy{background:var(--ox);border-color:var(--ox);color:#FBF3DD}
.buy:hover{background:var(--ox-dk)}
.ghost{background:transparent;color:var(--ink)}
.ghost:hover{background:var(--ink);color:var(--paper)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wide{display:block;width:100%}
.linkb{background:none;border:0;color:var(--ink-mute);text-decoration:underline;font:inherit;font-size:16px;cursor:pointer;padding:10px 6px;min-height:44px}

/* Offer */
.offer-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:70px;align-items:start}
.book{background:var(--paper-warm);padding:15px;box-shadow:var(--shadow-cover);border:1px solid var(--rule)}
.oname{font-weight:700;font-size:29px;line-height:1.13;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink);font-variation-settings:"opsz" 144}
.pline{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin:22px 0}
.pline b{font:italic 600 54px/1 var(--serif);color:var(--ox);letter-spacing:-.03em}
.pline span{font:500 12.5px/1.5 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ox)}
.items{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.items li{display:flex;justify-content:space-between;gap:22px;padding:14px 0;border-bottom:1px solid var(--rule)}
.items div{min-width:0}
.items strong{color:var(--ink);font-weight:700}
.items p{margin:2px 0 0;font-size:17px;line-height:1.42;color:var(--ink-mid)}
.items em{flex:0 0 auto;font:500 12.5px/1.8 var(--mono);color:var(--ink-mute);font-style:normal;white-space:nowrap}
.today{display:flex;justify-content:space-between;align-items:center;background:var(--paper-deep);padding:17px 14px;margin:0 -14px 22px}
.today span{font:italic 600 21px var(--serif);color:var(--ox)}
.today b{font:italic 700 25px var(--serif);color:var(--ox)}
.micro{font:500 12px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);text-align:center;margin:14px 0 0}
.guar-row{display:flex;gap:15px;align-items:center;margin:24px 0 10px}
.guar-row img{width:68px;height:68px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--gold)}
.guar{margin:0;font-size:17.5px;line-height:1.42}
.pay{margin:0;font-size:15px;line-height:1.45;color:var(--ink-mute)}
.howto{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 22px;padding:0;font-size:16.5px;line-height:1.35}
.howto li{counter-increment:s;border-top:1px solid var(--rule);padding-top:10px}
.howto li:before{content:"0" counter(s);display:block;font:500 12.5px var(--mono);color:#8A6424;margin-bottom:4px}
.tvqr{display:flex;gap:18px;align-items:center;background:var(--paper-deep);padding:14px;margin-top:16px}
.tvqr [data-qr]{width:170px;flex:0 0 auto;background:#fff;padding:4px}
.tvqr p{margin:0}

/* Explained photograph */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.ba-grid figure{margin:0}
.ba-grid h3{color:var(--paper);font-size:28px;letter-spacing:-.02em;padding-bottom:13px;border-bottom:1px solid #4B4232;margin-bottom:18px;font-weight:600}
.ba-grid h3 span{font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-left:9px}
.pin{position:relative}
.mark{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--ox);color:#FBF3DD;font:700 15px/31px var(--mono);text-align:center;border:1.5px solid var(--paper)}
.notes{counter-reset:n;list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.notes li{counter-increment:n;padding:15px 0;border-top:1px dashed #4B4232;font-size:18px;line-height:1.42}
.notes li:before{content:"0" counter(n);display:block;font:700 12.5px var(--mono);color:var(--gold-soft);margin-bottom:6px}
.notes b{color:var(--paper)}

/* Inside */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.card{background:linear-gradient(150deg,var(--paper-warm),#E7DDBC);border:1px solid var(--rule);padding:32px}
.card.wide-c{grid-column:1/-1}
.card h3{font-size:25px;line-height:1.18;letter-spacing:-.02em;margin:0 0 14px;font-weight:700}
.nlist{list-style:none;margin:0;padding:0;counter-reset:l}
.nlist li{counter-increment:l;display:grid;grid-template-columns:48px 1fr;padding:10px 0;border-bottom:1px solid #D2C59C;font-size:18px;line-height:1.36}
.nlist li:last-child{border-bottom:0}
.nlist li:before{content:counter(l,decimal-leading-zero);font:500 12.5px/1.9 var(--mono);color:#8A6424}
.nlist small{display:block;font-size:15.5px;color:var(--ink-mid);line-height:1.35;margin-top:1px}
.part{font:700 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin:12px 0 4px}
.recs{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin:0 0 34px}
.recs img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--rule)}
.look-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:60px;align-items:center;margin-top:62px}
.page-shot{background:#fff;padding:0;margin:0;box-shadow:var(--shadow-cover);border:1px solid var(--rule)}
.page-cap{font:500 12px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-top:12px}
.samplebox .alt{display:inline-block;margin-top:12px;font-size:17px;color:var(--ox);padding:9px 2px;min-height:44px}

/* Voices */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:0}
.quotes.one{grid-template-columns:minmax(0,560px);justify-content:center;margin-top:34px}
.vc{position:relative;margin:14px 0 0;background:#F0E7CD;border:1px solid var(--rule);padding:30px 26px 22px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink)}
.vc:before{content:"\201C";position:absolute;left:24px;top:-26px;font:italic 700 66px/1 var(--serif);color:var(--ox);background:#F0E7CD;padding:0 7px;height:30px}
.vc p{margin:0 0 16px;font-style:italic;font-size:18px;line-height:1.42}
.vc footer{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;border-top:1px solid var(--rule);padding-top:12px;font:500 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.vc cite{font-style:normal}
.vc b{color:var(--ink-mid);font-weight:500}
.likes{white-space:nowrap}
.sample{outline:2px dashed var(--ox);outline-offset:-6px}
.note{font-size:16px;color:var(--ink-mute);margin:22px 0 0}
.archives{margin-top:46px;border-top:1px solid var(--rule);padding-top:22px;display:flex;gap:30px;align-items:baseline;flex-wrap:wrap}
.archives p{margin:0;font:700 12.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ox)}
.archives ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 34px;flex-wrap:wrap;font-weight:600;color:var(--ink)}
.ask-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.ask{background:#F0E7CD;border:1px solid var(--rule);padding:24px}
.ask .q{font-style:italic;margin:0 0 10px}
.ask .a{margin:0;font-weight:600}
.subh{font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.12;margin:66px 0 8px}

/* Presenter */
.nar-grid{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:64px;align-items:center}
.nar-grid p{margin:0 0 15px;font-size:20px}
.nar-grid a{color:var(--ox);overflow-wrap:anywhere}
.sign{font:italic 600 34px/1.2 var(--serif)!important;color:var(--ox);margin:20px 0 0!important}

/* Who and compare */
.who-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:64px;align-items:start}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:15px 0;border-bottom:1px solid var(--rule);font-size:20px;line-height:1.4}
.ticks li:first-child{padding-top:0}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;font-size:17px;color:var(--ink)}
.cmp th,.cmp td{border-bottom:1px solid var(--rule);padding:12px 8px;text-align:center}
.cmp thead th{font:700 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);border-bottom:1px solid var(--ink)}
.cmp thead th:last-child{color:var(--ox)}
.cmp tbody th{text-align:left;font-weight:500}
.cmp .y{color:#3E5230;font-weight:700}
.cmp .n{color:var(--ox);font-weight:700}
.cmp td:last-child{background:var(--paper-deep)}

/* Order */
.ord-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:64px;align-items:center;max-width:980px}

/* Accordions */
.faq-wrap{max-width:860px;margin-left:168px}
details.acc{border-bottom:1px solid var(--rule);color:var(--ink-soft)}
details.acc:first-child{border-top:1px solid var(--rule)}
details.acc summary{cursor:pointer;font-weight:600;font-size:20px;padding:18px 44px 18px 0;position:relative;list-style:none;color:var(--ink)}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary:after{content:"+";position:absolute;right:4px;top:11px;font:400 29px var(--mono);color:var(--ox)}
details.acc[open] summary:after{content:"\2013"}
.acc-body{padding:0 0 18px}
.acc-body p{margin:0}
.acc-body a{overflow-wrap:anywhere}
.method{margin-top:26px}

/* Last call and footer */
.final{padding:100px 0}
.final h2{max-width:900px;margin:0 auto 18px}
.final p{margin:14px 0}
.final a.small{color:var(--gold-soft);display:inline-block;padding:9px 2px;min-height:44px}
.foot{background:var(--ink);border-top:1px solid #352D20;color:#B7A985;font-size:15px;padding:30px 0 92px}
.foot p{margin:5px 0}
.foot .links a{display:inline-block;padding:9px 2px;min-height:44px;line-height:26px}
.foot .bn{font:700 13px var(--mono);letter-spacing:.2em;color:var(--gold-soft)}
.sticky{position:fixed;left:0;right:0;bottom:0;background:var(--ink);border-top:1px solid var(--gold);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));z-index:40;color:#E4D9B8}
.sticky .st b{display:block;font:italic 600 25px/1.1 var(--serif);color:var(--gold-soft)}
.sticky .st small{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sticky .btn{padding:15px 26px;white-space:nowrap}
@media(min-width:900px){.sticky{display:none}.foot{padding-bottom:30px}}

/* Dialogs */
dialog{border:1px solid var(--rule);background:var(--paper);color:var(--ink-soft);max-width:460px;width:calc(100% - 32px);padding:26px;text-align:center;box-shadow:var(--shadow-cover)}
dialog::backdrop{background:rgba(21,17,11,.72)}
dialog h2{font-size:29px;margin-bottom:10px}
dialog img{margin:0 0 14px}
dialog p{margin:8px 0}
.exit-face{max-height:230px;width:100%;object-fit:cover;object-position:50% 12%}

/* Legal pages */
.legal{padding:54px 0;background:var(--paper)}
.legal .wrap{max-width:800px}
.legal h1{font-size:40px;margin-bottom:12px}
.legal h2{font-size:24px;margin:28px 0 6px;letter-spacing:-.015em}
.legal p{margin:8px 0}
.narrow{max-width:800px}

@media(max-width:980px){
  .wrap{padding:0 22px}
  section{padding:66px 0}
  .shead{grid-template-columns:1fr;margin-bottom:36px}
  .rn{margin-bottom:8px}
  .faq-wrap{margin-left:0}
  .hero{padding:26px 0 46px}
  .hero-grid,.offer-grid,.look-grid,.nar-grid,.who-grid,.ord-grid,.grid-2,.ba-grid,.quotes,.ask-grid{grid-template-columns:minmax(0,1fr)}
  .hero-grid{gap:50px}
  .hero-grid .pic{order:-1}
  .hero .frame{padding:9px}
  .hero .frame img{aspect-ratio:1.12/1;object-position:50% 12%}
  .pull{left:10px;bottom:-30px}
  .offer-grid,.look-grid,.nar-grid,.who-grid{gap:38px}
  .book{max-width:430px;margin:0 auto}
  .ord-grid .book{max-width:250px}
  .nar-grid .frame{max-width:340px;margin:0 auto}
  .page-shot{max-width:430px;margin:0 auto}
  .lb{grid-template-columns:auto;justify-content:center;padding:7px 12px}
  .lb .left,.lb .right{display:none}
  .launch-bar{position:static}
  [id]{scroll-margin-top:10px}
  .notes{grid-template-columns:1fr}
  .recs{grid-template-columns:repeat(4,1fr);gap:8px}
  .card{padding:24px 20px}
}
@media(max-width:560px){
  body{font-size:18px}
  .cta-row .btn{display:block;width:100%}
  .hstats{flex-direction:column;padding:0}
  .si{border-left:0;border-bottom:1px solid var(--rule);padding:13px 0}
  .hstats>.si:last-child{border-bottom:0}
  .byline span:last-child{display:none}
  .btn{padding:20px 14px;letter-spacing:.13em}
  .lb{letter-spacing:.09em;font-size:11px}
  .lb .mid{gap:8px}
  .howto{grid-template-columns:1fr}
  .items li{flex-direction:column;gap:2px}
  .cmp th,.cmp td{padding:10px 4px;font-size:15px}
  .cmp thead th{font-size:10px;letter-spacing:.04em}
  table.cmp{table-layout:fixed}
  .cmp thead th:first-child{width:43%}
  .today{margin-left:0;margin-right:0}
  .guar-row{align-items:flex-start}
  .ba-grid h3 span{display:block;margin:5px 0 0}
}
@media(max-height:520px){.launch-bar{position:static}[id]{scroll-margin-top:10px}}

/* Big screens and televisions */
@media(min-width:2300px){body{zoom:1.4}}
@media(min-width:3200px){body{zoom:2}}
@media(min-width:1700px){html.tv body{zoom:1.4}}
@media(min-width:3200px){html.tv body{zoom:2.4}}
html.tv a:focus,html.tv button:focus,html.tv summary:focus{outline:5px solid var(--gold);outline-offset:3px}