/* Articles: the writing rooms of the same house. Porcelain to read on, walnut at the edges,
   the same Archivo and the same hand as the home page. Shared by /blog/ and /blog/founder/. */
:root{
  --porcelain:#edefee; --glaze:#ffffff; --shade:#d4d9d8;
  --walnut:#2a150d; --ink:#15110e; --quiet:#5d5753;
  --on-wood:#f6efe9; --on-wood-quiet:#c9b4a6;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* names the older posts' component rules still reference */
  --black:var(--ink); --white:var(--glaze); --gray:var(--quiet); --light-gray:#e4e8e7; --rule:var(--shade);
  --accent:var(--walnut); --accent-bg:var(--glaze); --muted:var(--quiet); --faint:var(--quiet); --paper:var(--porcelain);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--porcelain); color:var(--ink); font:400 19px/1.65 "Archivo",system-ui,sans-serif; font-variation-settings:"wdth" 100; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
img{max-width:100%; height:auto}

/* ---------- Top of every article ---------- */
.nav{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px clamp(20px,5vw,72px) 0; max-width:none; border:0; background:none; position:static}
.nav .mark{font-size:19px; font-weight:500; letter-spacing:-.01em; text-decoration:none; font-variation-settings:"wdth" 125; min-height:44px; display:inline-flex; align-items:center}
.nav ul{display:flex; gap:clamp(16px,3vw,36px); list-style:none; margin:0; padding:0; font-size:16px}
.nav ul a{text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.nav ul a:hover,.nav ul a[aria-current]{text-decoration:underline; text-underline-offset:5px}

/* ---------- The reading column ---------- */
.article{max-width:760px; margin:0 auto; padding:clamp(56px,8vw,112px) 24px clamp(64px,8vw,112px)}
.article-date,.updated-line{font-size:15px; color:var(--quiet); margin:0 0 18px; letter-spacing:0; text-transform:none}
.article h1{margin:0 0 clamp(36px,5vw,56px); font-weight:280; font-size:clamp(40px,6vw,76px); line-height:1; letter-spacing:-.035em; font-variation-settings:"wdth" 125; text-transform:none; font-family:inherit}
.article h2{margin:clamp(56px,7vw,88px) 0 22px; padding:0; border:0; font-weight:320; font-size:clamp(28px,3vw,40px); line-height:1.08; letter-spacing:-.025em; font-variation-settings:"wdth" 118; font-family:inherit; text-transform:none}
.article h3{margin:40px 0 12px; font-weight:500; font-size:22px; line-height:1.25; letter-spacing:-.01em; font-family:inherit; text-transform:none}
.article p,.article li{font-size:19px; line-height:1.68; margin:0 0 24px}
.article ul,.article ol{padding-left:1.25em; margin:0 0 28px}
.article li{margin-bottom:10px}
.article li::marker{color:var(--quiet)}
.article strong{font-weight:600}
.article a{color:var(--ink); text-decoration:none; border-bottom:1px solid #9aa3a1}
.article a:hover{border-color:var(--ink)}
.article .bluf{font-size:clamp(20px,1.6vw,23px); line-height:1.55; padding:0; margin:0 0 36px; border:0; background:none}
.article hr{border:0; border-top:1px solid var(--shade); margin:56px 0}
.article code{font-family:var(--mono); font-size:.86em; background:var(--glaze); padding:.1em .38em; border-radius:6px}
.article blockquote{margin:36px 0; padding:0 0 0 24px; border-left:2px solid var(--walnut); color:var(--quiet)}
.dim{color:var(--quiet)}
.accent{color:var(--walnut)}

/* the line lifted out of the text */
.pull,.pull-quote{margin:clamp(44px,6vw,72px) 0; padding:0; border:0; text-align:left; font-family:inherit; font-weight:280; font-size:clamp(28px,3.2vw,42px)!important; line-height:1.14!important; letter-spacing:-.025em; font-variation-settings:"wdth" 112; color:var(--walnut); text-transform:none}

/* ---------- Founder stories: cover and byline ---------- */
.cover{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; padding:clamp(40px,6vw,88px) clamp(20px,5vw,72px) 0; position:relative; min-height:0; background:none; color:var(--ink)}
.cover-photo{order:2; width:100%; aspect-ratio:1.18; object-fit:cover; border-radius:47% 53% 44% 56% / 56% 46% 54% 44%; box-shadow:0 50px 90px -40px rgba(20,12,6,.55); position:static; height:auto; filter:none}
/* a product's real screen, held in a porcelain dish like the company pages */
.dish{display:flex; align-items:center; justify-content:center; aspect-ratio:1.18; border-radius:47% 53% 44% 56% / 56% 46% 54% 44%;
  background:radial-gradient(120% 95% at 28% 18%,var(--glaze) 0%,#f3f5f4 40%,#e3e7e6 72%,var(--shade) 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.95),inset 0 -22px 46px rgba(40,30,25,.10),0 50px 90px -34px rgba(20,12,6,.5)}
.cover .dish{order:2; width:100%}
.dish .screen{display:block; box-shadow:0 18px 40px -14px rgba(20,12,6,.45),0 0 0 1px rgba(0,0,0,.06)}
.dish .screen.phone{height:84%; width:auto; border-radius:22px}
.dish .screen.wide{width:80%; height:auto; border-radius:8px}
.cover::before,.cover::after{content:none}
.cover-inner{order:1; position:static; padding:0; max-width:none; color:var(--ink)}
.cover-eyebrow{font-size:15px; color:var(--quiet); margin:0 0 18px; letter-spacing:0; text-transform:none; font-family:inherit}
.cover h1{margin:0 0 24px; font-weight:280; font-size:clamp(40px,5.4vw,84px); line-height:.96; letter-spacing:-.04em; font-variation-settings:"wdth" 125; font-family:inherit; text-transform:none; color:var(--ink)}
.dek{margin:0; font-size:clamp(19px,1.5vw,22px); line-height:1.5; color:var(--quiet); max-width:560px; font-style:normal}
.byline{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; max-width:760px; margin:clamp(40px,6vw,72px) auto 0; padding:0 24px; font-size:15px; color:var(--quiet); border:0}
.byline .who{display:inline-flex; align-items:center; gap:10px}
.byline .avatar{display:none}
.byline .name{color:var(--ink); font-weight:500}
.byline + .article{padding-top:clamp(28px,4vw,48px)}
.byline + .article::after{content:"Jesse"; display:block; margin-top:48px; font-family:"Homemade Apple",cursive; font-size:30px; color:var(--walnut); transform:rotate(-4deg); transform-origin:left}

/* ---------- Calls to action: porcelain dishes ---------- */
.cta,.download-cta,.composed-cta,.newsletter{margin:clamp(44px,6vw,64px) 0; padding:clamp(28px,3.4vw,44px); border:0; border-radius:44px 44px 44px 120px; color:var(--ink);
  background:radial-gradient(120% 120% at 20% 0%,#fff 0%,#f4f6f5 55%,#e6eae9 100%);
  box-shadow:inset 0 1px 0 #fff,0 30px 60px -36px rgba(20,14,10,.45)}
.cta h3,.download-cta h3,.composed-cta h3,.newsletter h3{margin:0 0 10px; font-family:inherit; font-weight:400; font-size:clamp(24px,2.2vw,30px); line-height:1.15; letter-spacing:-.02em; font-variation-settings:"wdth" 112; text-transform:none}
.cta p,.download-cta p,.composed-cta p,.newsletter p{font-size:17px; margin:0 0 20px}
.btn,.download-btn,.composed-btn,.newsletter-btn,.article .btn,.article .download-btn,.article .composed-btn,.article .newsletter-btn{display:inline-flex; align-items:center; min-height:48px; padding:0 26px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:500 16px/1 "Archivo",system-ui,sans-serif; letter-spacing:0; text-transform:none; text-decoration:none; box-shadow:0 12px 26px -12px rgba(0,0,0,.6); cursor:pointer}
.btn:hover,.download-btn:hover,.composed-btn:hover,.newsletter-btn:hover{background:#000; color:#fff}
.fine,.download-meta,.cta .fine,.download-cta .download-meta{font-size:15px!important; color:var(--quiet); margin:16px 0 0!important}

/* ---------- Data the older posts carry ---------- */
.terminal,.article pre{background:var(--walnut) url("/assets/house/veneer.jpg") center/cover; color:var(--on-wood); font-family:var(--mono); font-size:15px; line-height:1.6; padding:24px 26px; border-radius:24px; overflow-x:auto; margin:32px 0; position:relative; box-shadow:inset 0 0 0 999px rgba(20,9,4,.55)}
.terminal *,.article pre *{color:inherit; background:none}
.prompt-box,.spec-box{background:var(--glaze); border:0; border-radius:24px; padding:22px 24px; margin:28px 0; font-size:16px; box-shadow:inset 0 -10px 24px rgba(40,30,25,.05)}
.prompt-box strong,.spec-box strong{font-weight:600}
table,.results-table{width:100%; border-collapse:collapse; margin:32px 0; font-size:16px; background:none; border:0}
.results-table thead,thead{background:none!important}
th,.results-table th{text-align:left; font-weight:500; font-size:15px; color:var(--quiet)!important; background:none!important; padding:12px 12px 12px 0; border-bottom:1px solid var(--ink); text-transform:none; letter-spacing:0; font-family:inherit}
td,.results-table td{padding:14px 12px 14px 0; border-bottom:1px solid var(--shade); vertical-align:top}
.results-table tbody tr:nth-child(even),.results-table tbody tr:hover{background:none}
.verdict{background:var(--walnut) url("/assets/house/veneer.jpg") center/cover; color:var(--on-wood); border-radius:44px 44px 44px 120px; padding:clamp(28px,4vw,48px); margin:48px 0; box-shadow:inset 0 0 0 999px rgba(20,9,4,.6)}
.verdict h3{font-family:inherit; color:var(--on-wood); margin-top:0; text-transform:none; letter-spacing:-.01em}
.verdict p{color:var(--on-wood-quiet)}
.verdict p strong{color:var(--on-wood)}
.app-screenshot{border-radius:22px; box-shadow:0 18px 40px -14px rgba(20,12,6,.45); margin:28px auto; display:block}

/* ---------- More from the house ---------- */
.related{max-width:1180px; margin:0 auto; padding:clamp(56px,7vw,96px) clamp(20px,5vw,72px)}
.related .label,.related-label{font-size:15px; color:var(--quiet); margin:0 0 18px; letter-spacing:0; text-transform:none}
.related-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.related-card{display:block; text-decoration:none; padding:24px 26px; border-radius:32px 32px 32px 84px; background:radial-gradient(120% 120% at 20% 0%,#fff 0%,#f4f6f5 55%,#e6eae9 100%); box-shadow:inset 0 1px 0 #fff,0 24px 48px -32px rgba(20,14,10,.45); transition:transform .4s cubic-bezier(.2,.7,.2,1); border:0}
.related-card:hover{transform:translateY(-3px)}
.rc-name{margin:0 0 6px; font-size:21px; font-weight:400; letter-spacing:-.015em; font-family:inherit; text-transform:none}
.rc-desc{margin:0; font-size:15px; color:var(--quiet)}
.related-title{font-weight:500}
.related-meta{font-size:15px; color:var(--quiet)}

/* ---------- Founder stories index ---------- */
.hub-head{max-width:1180px; margin:0 auto; padding:clamp(56px,8vw,120px) clamp(20px,5vw,72px) clamp(32px,4vw,56px)}
.hub-head .eyebrow{font-size:15px; color:var(--quiet); margin:0 0 18px; letter-spacing:0; text-transform:none}
.hub-head h1{margin:0 0 22px; font-weight:280; font-size:clamp(48px,7vw,112px); line-height:.96; letter-spacing:-.04em; font-variation-settings:"wdth" 125; font-family:inherit; text-transform:none}
.hub-head p{max-width:620px; color:var(--quiet); margin:0}
.grid{max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,72px) clamp(72px,9vw,128px); display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(28px,3vw,44px)}
.story{display:block; text-decoration:none; border:0}
.story .thumb{aspect-ratio:1.18; overflow:hidden; border-radius:47% 53% 44% 56% / 56% 46% 54% 44%; margin-bottom:22px; box-shadow:0 30px 60px -36px rgba(20,12,6,.55)}
.story:nth-child(3n+2) .thumb{border-radius:58% 42% 52% 48% / 46% 58% 42% 54%}
.story:nth-child(3n) .thumb{border-radius:42% 58% 50% 50% / 58% 44% 56% 42%}
.story .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.story:hover .thumb img{transform:scale(1.03)}
.story .thumb.dish{overflow:visible; box-shadow:inset 0 2px 1px rgba(255,255,255,.95),inset 0 -22px 46px rgba(40,30,25,.10),0 30px 60px -36px rgba(20,12,6,.5)}
.story .thumb.dish img.screen{object-fit:contain}
.story .thumb.dish img.screen.phone{width:auto; height:84%}
.story .thumb.dish img.screen.wide{width:80%; height:auto}
.story:hover .thumb.dish img{transform:scale(1.04)}
.story h2{margin:0 0 8px; font-weight:350; font-size:clamp(24px,2.2vw,30px); line-height:1.1; letter-spacing:-.02em; font-variation-settings:"wdth" 112; font-family:inherit; text-transform:none}
.story p{margin:0; color:var(--quiet); font-size:17px}
.story.feature{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center}
.story.feature .thumb{margin:0}
.story.feature h2{font-size:clamp(34px,4vw,56px); font-weight:280; letter-spacing:-.035em; font-variation-settings:"wdth" 125}

/* ---------- Walnut floor ---------- */
.footer{position:relative; background:var(--walnut) url("/assets/house/veneer.jpg") center/cover; color:var(--on-wood-quiet); padding:clamp(48px,6vw,80px) clamp(20px,5vw,72px) 28px; margin:0; text-align:left; border:0}
.footer::before{content:""; position:absolute; inset:0; background:rgba(20,9,4,.66)}
.footer > *{position:relative}
.footer p{margin:0}
.footer-text,.f-links{display:flex; flex-wrap:wrap; gap:4px 26px; font-size:15px; letter-spacing:0; text-transform:none; color:var(--on-wood-quiet)}
.footer a{color:var(--on-wood-quiet); text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.footer a:hover{color:var(--on-wood)}
.f-mark{margin-top:28px!important; font-family:"Homemade Apple",cursive; font-size:28px; color:var(--on-wood); transform:rotate(-3deg); transform-origin:left; letter-spacing:0}

@media (max-width:860px){
  .cover{grid-template-columns:minmax(0,1fr)}
  .cover-photo,.cover .dish{order:0}
  .story.feature{grid-template-columns:minmax(0,1fr)}
  .nav ul{gap:16px; font-size:15px}
}
@media (prefers-reduced-motion:reduce){.related-card,.story .thumb img{transition:none}}

/* ---------- Writing index: the dated notes ---------- */
.notes{max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,72px) clamp(72px,9vw,128px)}
.notes h2{margin:0 0 18px; font-weight:280; font-size:clamp(34px,4vw,56px); line-height:1; letter-spacing:-.035em; font-variation-settings:"wdth" 125}
.note{display:grid; grid-template-columns:200px minmax(0,1fr); gap:6px 32px; padding:22px 0; border-bottom:1px solid var(--shade); text-decoration:none}
.note:first-of-type{border-top:1px solid var(--shade)}
.note .k{grid-row:span 2; font-size:15px; color:var(--quiet); padding-top:4px}
.note .t{font-size:clamp(21px,1.8vw,26px); line-height:1.2; letter-spacing:-.015em; font-variation-settings:"wdth" 108}
.note .d{color:var(--quiet); font-size:17px}
.note:hover .t{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
@media (max-width:720px){.note{grid-template-columns:minmax(0,1fr)} .note .k{grid-row:auto; padding:0}}
.btn svg,.download-btn svg,.composed-btn svg,.newsletter-btn svg{width:18px; height:18px; flex:none; margin-right:10px; fill:currentColor}
.btn span,.composed-btn span{line-height:1.2}
.article p,.article li,.article td{overflow-wrap:break-word}
.article a,.article code{overflow-wrap:anywhere}