:root{--paper:#F7F5F0;--paper-2:#EFEBE3;--ink:#15202B;--ink-2:#3C4A58;--mute:#6E7A86;--sea:#1F5F73;--brass:#A8894F;--rule:#D8D2C6;--navy:#0E1D2C;--navy-fg:#EEE9DF;
--display:"Fraunces",Georgia,serif;--body:"Newsreader",Georgia,serif;--ui:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--sea)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.col{max-width:62ch;margin:0 auto;padding:0 20px}
.eyebrow{font:500 12px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 14px}
.fine{font:400 13px/1.5 var(--ui);color:var(--mute)}
.note{font:400 14px/1.5 var(--ui);padding:10px 12px;border-radius:3px;margin:12px 0 0}
.note.err{background:#F6E4E0;color:#7A2E1F}.note.ok{background:#E3EEE7;color:#2B5A3C}
[hidden]{display:none!important}

/* top bar */
.bar{background:var(--navy);color:var(--navy-fg);font-family:var(--ui);font-size:13px}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:12px;flex-wrap:wrap}
.bar a{color:#D9C8A3;text-decoration:none}
.bar .brand{font-family:var(--display);font-size:18px;color:#F6F1E6}

/* hero */
.hero{position:relative;background:var(--navy);color:var(--navy-fg);overflow:hidden}
.hero img{width:100%;height:min(70vh,640px);object-fit:cover;opacity:.75}
.hero .title{position:absolute;inset:auto 0 0 0;padding:0 20px 44px;background:linear-gradient(180deg,transparent,rgba(5,12,20,.88) 60%)}
.hero .kicker{font:500 13px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#D9C8A3;margin:0 0 14px}
.hero h1{font-size:clamp(36px,6.5vw,84px);font-weight:300;color:#F6F1E6}
.hero h1 em{font-style:italic}
.hero .deck{font-size:clamp(17px,2vw,22px);max-width:60ch;color:#DDD5C6;margin:14px 0 0}

/* signup */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:48px;align-items:start;padding-block:56px}
.signup .pitch p{margin:0 0 1em}
.signup .pitch .lede{font-size:22px;line-height:1.4}
form.card{background:#fff;border:1px solid var(--rule);padding:28px 26px 24px;font-family:var(--ui)}
form.card h2{font-size:26px;margin-bottom:4px}
form.card .sub{font-size:14px;color:var(--mute);margin:0 0 18px}
label{display:block;font:500 12px/1.4 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:12px 0 5px}
input,select{width:100%;font:400 16px/1.3 var(--ui);padding:11px 12px;border:1px solid var(--rule);border-radius:3px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.btn{display:inline-block;font:500 15px/1 var(--ui);letter-spacing:.02em;padding:14px 22px;border:0;border-radius:3px;background:var(--ink);color:#fff;cursor:pointer;text-decoration:none;text-align:center}
.btn.full{width:100%;margin-top:18px}
.btn.brass{background:var(--brass)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.code{font:400 40px/1 var(--display);letter-spacing:.3em;text-align:center;padding:16px 8px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.plan{border:1px solid var(--rule);padding:22px 20px;font-family:var(--ui)}
.plan.best{border-color:var(--brass);box-shadow:inset 0 3px 0 var(--brass)}
.plan b{display:block;font:300 40px/1 var(--display);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.plan b small{font-size:.4em;color:var(--mute)}
.plan p{font-size:14px;color:var(--ink-2);margin:8px 0 14px}
.plan .tag{font:500 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}

/* contents preview */
.preview{padding-block:48px;border-top:1px solid var(--rule)}
.preview ol{font-family:var(--ui);font-size:15px;columns:2;column-gap:40px;padding-left:20px;margin:16px 0 0}
.preview li{break-inside:avoid;margin-bottom:8px}
.calendar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--ink);margin-top:20px}
.calendar div{padding:14px 12px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);font-family:var(--ui);font-size:13px}
.calendar b{display:block;font:500 11px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.calendar span{font-family:var(--display);font-size:19px;display:block;margin:4px 0 2px;color:var(--ink)}

/* reader */
#reader-head{background:var(--paper-2);border-bottom:1px solid var(--rule);font-family:var(--ui);font-size:13px}
#reader-head .who{max-width:1100px;margin:0 auto;padding:10px 20px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
#reader-head .who em{font-style:normal;color:var(--brass);font-weight:500}
#reader-head .issues{max-width:1100px;margin:0 auto;padding:0 20px 10px;display:flex;gap:16px;flex-wrap:wrap}
#reader-head .issues a{text-decoration:none;color:var(--ink)}
#reader-head .issues a.locked{color:var(--mute)}
#issue-host{display:block;min-height:40vh}
#reader-head .issues a.current{color:var(--brass);font-weight:500}
.paywall{max-width:62ch;margin:0 auto;padding:60px 20px}

footer{background:var(--navy);color:#B9AE9C;font:400 12px/1.5 var(--ui);padding:28px 0}
footer .brand{font-family:var(--display);font-size:22px;color:#F6F1E6;font-weight:300;margin:0 0 6px}
@media (max-width:860px){.signup{grid-template-columns:1fr}.preview ol{columns:1}}