:root{
--white:#FFFFFF;--cloud:#F0EEE9;--cloud-2:#E7E4DC;
--papaya:#FCA263;--sand:#ECC498;--rose:#DC7177;--wine:#782A38;
--sage:#5A6E4E;--forest:#44543A;--navy:#233656;--cedar:#4B3A26;--cocoa:#281700;
--ink:#131311;--ink-2:#4A4843;--ink-3:#8C8880;--hair:#D8D4CB;--hair-2:rgba(19,19,17,.14);
--cream:#F0EEE9;--ink-soft:#4A4843;--copper:#5A6E4E;--label:#8C8880;--line:#D8D4CB;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--white);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.55;font-weight:350;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Manrope","Instrument Sans",sans-serif;font-weight:400;letter-spacing:-.03em;line-height:1.06}
h3,h4{font-weight:500;letter-spacing:-.025em;line-height:1.14}
.display{font-family:"Manrope","Instrument Sans",sans-serif;font-weight:400;letter-spacing:-.03em;line-height:1.06}
em,i{font-style:normal}
.mono,.lbl{font-family:"Instrument Sans",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--sage)}
.frame{max-width:1440px;margin:0 auto;padding:0 40px}
section{padding:88px 0;border:0}

/* top bar */
.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;padding:22px 0;border-bottom:1px solid var(--ink)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .logo{width:56px;height:56px;object-fit:contain;display:block;mix-blend-mode:multiply}
.brand .wordmark{font-family:"Instrument Sans",sans-serif;font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.3;text-transform:none;color:var(--ink)}
.brand .wordmark span{color:var(--ink-3)!important;font-weight:400;font-size:11.5px;letter-spacing:0}
.nav{display:flex;gap:30px;justify-content:center}
.nav a{font-family:"Instrument Sans",sans-serif;font-size:14px;font-weight:450;letter-spacing:-.01em;text-transform:none;color:var(--ink-2);border:0;padding:0;white-space:nowrap}
.brand .wordmark{white-space:nowrap}
.nav a:hover,.nav a.on{color:var(--ink)}
.begin{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:100px;background:var(--ink);color:var(--white);border:0;font-family:"Instrument Sans",sans-serif;font-size:13px;font-weight:500;letter-spacing:-.01em;text-transform:none;transition:background .2s}
.begin .dot{width:7px;height:7px;border-radius:50%;background:var(--papaya)}
.begin:hover{background:var(--sage);color:var(--white)}

/* section meta */
.section-meta{display:flex;align-items:baseline;gap:18px;margin-bottom:28px;flex-wrap:wrap}
.section-meta .num,.section-meta span{font-family:"Instrument Sans",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}

/* essays index hero */
#notes-hero{padding:80px 0 28px}
.notes-headline{font-size:clamp(44px,6.4vw,104px);line-height:1.02;margin:0;max-width:16ch}
.notes-headline em{color:#FFCE1B}
.notes-dek{font-family:"Manrope",sans-serif;font-size:clamp(18px,1.9vw,25px);font-weight:400;line-height:1.38;letter-spacing:-.02em;color:var(--ink-2);max-width:48ch;margin:28px 0 0}

/* ribbon */
.ribbon{overflow:hidden;background:transparent;padding:22px 0;white-space:nowrap;width:100vw;margin-left:calc(50% - 50vw)}
.marquee-track{display:inline-flex;gap:80px;animation:mq 60s linear infinite}
.marquee-track span{font-family:"Manrope",sans-serif;font-size:clamp(28px,3.2vw,46px);font-weight:400;letter-spacing:-.03em;color:var(--cocoa)}
.marquee-track span em{color:rgba(40,23,0,.55)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* article list */
#list{padding:76px 0 88px}
.articles{border-top:1px solid var(--ink)}
.article-row{display:grid;grid-template-columns:220px 1fr;gap:48px;padding:40px 0;border-bottom:1px solid var(--hair);position:relative;color:var(--ink)}
.article-row::before{content:"";position:absolute;left:-24px;top:40px;bottom:40px;width:6px;background:var(--bar,var(--sage))}
.article-row:nth-child(6n+1){--bar:var(--papaya)}
.article-row:nth-child(6n+2){--bar:var(--sage)}
.article-row:nth-child(6n+3){--bar:var(--rose)}
.article-row:nth-child(6n+4){--bar:var(--navy)}
.article-row:nth-child(6n+5){--bar:var(--wine)}
.article-row:nth-child(6n+6){--bar:var(--forest)}
.article-num{font-family:"Instrument Sans",sans-serif;font-size:76px;font-weight:400;letter-spacing:-.05em;line-height:.8;color:var(--bar,var(--sage));display:block}
.article-body{max-width:none}
.article-meta{display:flex;gap:10px;align-items:baseline;margin:0 0 14px;color:var(--ink-3)}
.article-title{font-size:clamp(24px,2.7vw,40px);margin:0 0 16px;max-width:30ch;font-weight:400;letter-spacing:-.03em;line-height:1.08;transition:color .2s}
.article-row:hover .article-title{color:var(--bar,var(--sage))}
.article-dek{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:0 0 22px;max-width:58ch}
.article-cta{font-family:"Instrument Sans",sans-serif;font-size:13px;font-weight:500;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.article-cta .arrow{display:inline-block;transition:transform .2s}
.article-row:hover .article-cta{color:var(--bar,var(--sage))}
.article-row:hover .article-cta .arrow{transform:translateX(4px)}

/* opt-in */
#optin{background:var(--cloud);padding:80px 0 64px;margin-top:80px;width:100vw;margin-left:calc(50% - 50vw);padding-left:max(40px,calc(50vw - 720px + 40px));padding-right:max(40px,calc(50vw - 720px + 40px))}
.optin-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end}
.optin-copy h2{font-size:clamp(30px,3.6vw,54px);margin:0 0 14px;max-width:20ch}
.optin-copy h2 em{color:var(--sage)}
.optin-copy p{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:0;max-width:40ch}
.optin-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.optin-form input[type="email"]{flex:1;min-width:240px;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:12px 0;font-family:"Inter",sans-serif;font-size:17px;color:var(--ink);outline:none}
.optin-form input::placeholder{color:var(--ink-3)}
.optin-form input:focus{border-color:var(--sage)}
.optin-submit{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:100px;background:var(--ink);color:var(--white);border:0;cursor:pointer;font-family:"Instrument Sans",sans-serif;font-size:13px;font-weight:500;letter-spacing:-.01em}
.optin-submit .dot{width:7px;height:7px;border-radius:50%;background:var(--papaya)}
.optin-submit:hover{background:var(--sage)}
.optin-note{margin:22px 0 0;color:var(--ink-3)}
.optin-thanks{font-family:"Manrope",sans-serif;font-size:21px;font-weight:400;letter-spacing:-.02em;color:var(--ink);margin:0}

/* essay page */
.breadcrumb{display:flex;gap:12px;align-items:baseline;padding:34px 0 0}
.breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover{color:var(--sage)}
article.piece{padding:0 0 88px;max-width:none}
.piece-hero{margin:34px 0 44px;max-width:820px}
.piece-hero img{width:100%;height:auto;display:block}
.piece-meta{display:flex;gap:10px;align-items:baseline;margin:0 0 18px;color:var(--ink-3)}
.piece-meta .sep{color:var(--hair)}
.piece-title{font-size:clamp(34px,4.8vw,78px);line-height:1.02;margin:0 0 44px;max-width:26ch}
.piece-title em{color:var(--sage)}
.piece-body{max-width:66ch}
.piece-body p{font-size:18px;line-height:1.7;margin:0 0 22px;color:var(--ink-2)}
.piece-body p.drop{font-family:"Manrope",sans-serif;font-size:clamp(22px,2.4vw,34px);font-weight:400;line-height:1.28;letter-spacing:-.025em;color:var(--ink);margin-bottom:32px}
.piece-body p.drop::first-letter{font-size:inherit;float:none;padding:0;color:inherit}
.piece-body em{color:var(--sage)}
.piece-body strong{font-weight:600;color:var(--ink)}
.piece-body a{color:var(--sage);border-bottom:1px solid var(--sage)}
.piece-body a:hover{color:var(--ink);border-color:var(--ink)}
.continues{margin-top:52px;padding-top:28px;border-top:1px solid var(--hair);display:flex;align-items:center;gap:14px;color:var(--ink-3)}
.continues .dot{width:7px;height:7px;border-radius:50%;background:var(--papaya);flex:none}
.next-up{margin-top:80px;padding-top:32px;border-top:1px solid var(--ink)}
.next-up .label{display:block;margin-bottom:16px;color:var(--ink-3)}
.next-up a{display:block;font-family:"Manrope",sans-serif;font-size:clamp(24px,2.6vw,38px);font-weight:400;letter-spacing:-.03em;line-height:1.08;max-width:30ch;color:var(--ink)}
.next-up a:hover{color:var(--sage)}

/* footer */
footer.foot{border-top:1px solid var(--hair);padding:30px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer.foot a{border:0}
footer.foot a:hover{color:var(--sage)}
footer.foot .foot-social{display:inline-flex;align-items:center;gap:24px}
footer.foot .foot-social img{display:block;transition:opacity .2s}
footer.foot .foot-social img.mark{height:19px;width:auto;mix-blend-mode:multiply}
footer.foot .foot-social img.avatar{height:30px;width:30px;border-radius:50%;object-fit:cover}
footer.foot .foot-social a:hover img{opacity:.6}

@media(max-width:1150px){
.topbar{grid-template-columns:1fr;gap:16px;justify-items:start}
.nav{flex-wrap:wrap;justify-content:flex-start;gap:22px}
}
@media(max-width:900px){
.frame{padding:0 22px}
section,#notes-hero,#list,#optin{padding-left:0;padding-right:0}
section{padding:56px 0}
.topbar{grid-template-columns:1fr;gap:16px}
.nav{flex-wrap:wrap;justify-content:flex-start;gap:18px}
.article-row,.optin-grid{grid-template-columns:1fr;gap:20px}
.article-row::before{left:0;top:0;bottom:auto;width:44px;height:5px}
.article-row{padding-top:26px}
.article-num{font-size:56px}
}