/* The blog list and blog posts. Loaded after text-page.css, which has the tokens, font, logo and footer.
   The header, hero, kicker, numbered steps and join panel match index.html. */
:root{
  --base-rgb:17,17,20;
  --deep-rgb:11,11,14;
  --glow-rgb:80,80,92;
  --base-bright:#3A3A44;
  --base-pale:#D0D0D8;
  --white-rgb:255,255,255;
  --line-2:#C8C8D0;
  --placeholder:#5F5F6A;
  --pop-rgb:234,74,62;
  --pop-soft:#FDE5E2;
  --shadow-sm:0 1px 2px rgba(var(--base-rgb),.06),0 14px 34px -20px rgba(var(--base-rgb),.32);
  --shadow-lg:0 2px 4px rgba(var(--deep-rgb),.06),0 36px 70px -28px rgba(var(--deep-rgb),.45);
  --shadow-pop:0 10px 28px -12px rgba(var(--pop-rgb),.9);
  --dots-hero:rgba(var(--white-rgb),.1);
  --dots-join:rgba(var(--white-rgb),.08);
  --stage-h:170px;
  --body:#2A2A31;
}
[hidden]{display:none!important}
.on-dark :focus-visible{outline-color:var(--white)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{background:var(--white);color:var(--base)}
.skip:focus{outline:3px solid var(--white);outline-offset:3px}

/* Header: logo, glass pill nav in the middle, Join free */
.site-header{position:absolute;top:0;left:0;right:0;z-index:10;border:0;color:var(--white)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;min-height:92px}
.logo{justify-self:start;color:inherit}
.nav-pill{justify-self:center}
.nav-pill ul{display:flex;gap:2px;margin:0;padding:4px;list-style:none;border-radius:999px;background:rgba(var(--white-rgb),.08);border:1px solid rgba(var(--white-rgb),.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.12)}
.nav-pill a{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;color:var(--white)}
.nav-pill a:hover{background:rgba(var(--white-rgb),.08)}
.nav-pill a[aria-current="page"]{background:rgba(var(--white-rgb),.12)}
.nav .btn{justify-self:end;box-shadow:var(--shadow-pop)}

/* Hero: base radial ground, fine dot grid, fades to white behind the controls or the cover */
.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;color:var(--white);padding-top:136px;
  background:
    radial-gradient(34% 26% at 50% calc(100% - var(--stage-h) * .5),rgba(var(--pop-rgb),.3),rgba(var(--pop-rgb),0) 72%),
    radial-gradient(62% 48% at 50% 0%,rgba(var(--glow-rgb),.4),rgba(var(--glow-rgb),0) 100%),
    linear-gradient(180deg,var(--base) 0,var(--base) calc(100% - var(--stage-h)),var(--base-bright) calc(100% - var(--stage-h) * .62),var(--base-pale) calc(100% - var(--stage-h) * .3),var(--white) calc(100% - var(--stage-h) * .06))}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at center,var(--dots-hero) 0 1px,transparent 1.6px);background-size:22px 22px;background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--stage-h)),transparent calc(100% - var(--stage-h) * .45));
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--stage-h)),transparent calc(100% - var(--stage-h) * .45))}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:8px 18px 8px 14px;border-radius:999px;background:rgba(var(--white-rgb),.08);border:1px solid rgba(var(--white-rgb),.2);font-size:14px;font-weight:500;letter-spacing:.01em;line-height:1.35;text-decoration:none}
a.kicker:hover{background:rgba(var(--white-rgb),.14)}
.kicker .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 4px rgba(var(--pop-rgb),.22)}
.hero h1{max-width:15em;margin:0 0 24px;font-size:clamp(32px,4.58vw,67px);font-weight:300;font-stretch:125%;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.hero h1 .ln{display:block}
.hero h1 .ul{text-decoration-line:underline;text-decoration-color:var(--pop);text-decoration-thickness:.06em;text-underline-offset:.15em;text-decoration-skip-ink:none}
.lede{max-width:33em;margin:0 0 56px;font-size:clamp(17.5px,1.35vw,20px);line-height:1.55;color:var(--on-base)}

/* Controls: topic tabs, search and sort in one pill */
.controls{position:relative;display:flex;align-items:center;gap:8px;max-width:1040px;margin:0 auto 56px;padding:8px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--base);box-shadow:var(--shadow-lg)}
.tabs{display:flex;gap:2px;flex:none}
.tab{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 15.5px var(--font);cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--base)}
.tab[aria-pressed="true"]{background:var(--base);color:var(--white)}
.search{position:relative;flex:1;min-width:0}
.search svg{position:absolute;left:18px;top:14px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.search input{width:100%;height:48px;padding:0 70px 0 48px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);font:400 16px var(--font);color:var(--base)}
.search input::placeholder{color:var(--placeholder);opacity:1}
.search input::-webkit-search-cancel-button{display:none}
.clear{position:absolute;right:8px;top:2px;height:44px;padding:0 12px;border:0;background:none;color:var(--base);font:600 14px var(--font);text-decoration:underline;cursor:pointer}
.sort select{height:48px;padding:0 44px 0 18px;border:1.5px solid var(--line);border-radius:999px;-webkit-appearance:none;appearance:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111114' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center/12px 8px;font:500 15px var(--font);color:var(--base);cursor:pointer}

/* Post cards in a hairline grid */
.post-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.card{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pop);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.card:hover::after,.card:focus-within::after{transform:scaleX(1)}
.card:nth-child(3n){border-right:0}
.card a{display:block;height:100%;padding:32px 28px 36px;color:var(--base);text-decoration:none}
.cover{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 0 0 1px var(--line);transition:transform .25s ease}
.card a:hover .cover{transform:translateY(-4px)}
.info{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 12px}
.topic{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;font-stretch:112%;letter-spacing:.12em;line-height:1.3;text-transform:uppercase}
.topic::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--pop)}
.date{flex:none;color:var(--muted);font-size:15px}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.card h2,.card h3{margin:0 0 10px;font-size:25px;font-weight:400;font-stretch:115%;line-height:1.22;letter-spacing:-.015em;text-wrap:balance}
.card a:hover h2,.card a:hover h3{text-decoration:underline;text-decoration-color:var(--pop);text-decoration-thickness:2px;text-underline-offset:5px}
.go{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-top:2px;border-radius:50%;background:var(--pop);color:var(--on-pop)}
.go svg{width:15px;height:15px}
.excerpt{margin:0;color:var(--muted);font-size:16.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
mark{background:var(--pop-soft);color:inherit;border-radius:3px}
.no-results{padding:88px 24px;text-align:center}
.no-results h2{margin:0 0 8px;font-size:36px;font-weight:300;font-stretch:125%;line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere}
.no-results p{margin:0 0 22px;color:var(--muted)}
.ghost{min-height:52px;padding:0 26px;border:1px solid var(--base);border-radius:999px;background:var(--white);color:var(--base);font:600 16px var(--font);font-stretch:108%;cursor:pointer}
.pager{display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 24px 40px}
.pager-status{margin:0;font-size:15px;color:var(--muted)}
.pager-btn{min-height:52px;padding:0 30px;border:0;border-radius:999px;background:var(--base);color:var(--white);font:600 16.5px var(--font);font-stretch:108%;cursor:pointer}
.pager-btn:hover{background:var(--base-bright)}
.blog-main{padding-bottom:96px}

/* A post: the hero holds the title, then the cover overlaps the fade */
.post-hero{padding-bottom:0;--stage-h:300px}
.post-hero h1{font-size:clamp(34px,4.6vw,66px)}
.post-meta{margin:0 0 44px;color:var(--on-base);font-size:16px}
.post-meta a{color:var(--white);text-decoration-color:var(--pop)}
.post-cover{display:block;width:100%;max-width:1000px;height:auto;margin:0 auto;border-radius:36px;box-shadow:var(--shadow-lg)}

/* The article: the reading column, with the reading rail on its left and "On this page" on its right.
   Sizes are larger on screens over 760px because the page renders at 85% there. */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46rem) minmax(0,1fr);column-gap:56px;max-width:1500px;margin:0 auto;padding:72px var(--gutter) 0}
.prose{grid-column:2;grid-row:1;max-width:none;margin:0;color:var(--body);font-size:21px;line-height:1.7;text-wrap:pretty}
.prose a{text-decoration-color:var(--pop);text-decoration-thickness:1.5px}
.prose strong{font-weight:600;color:var(--base)}
.prose .lead{margin:0 0 28px;color:var(--base);font-size:25px;line-height:1.5}
.prose h2{margin:72px 0 18px;color:var(--base);font-size:36px;font-weight:600;font-stretch:100%;line-height:1.2;letter-spacing:-.02em;text-wrap:balance;scroll-margin-top:32px}
.prose h3{margin:44px 0 12px;color:var(--base);font-size:26px;font-weight:600;font-stretch:100%;line-height:1.3;letter-spacing:-.012em;text-wrap:balance}
.prose p,.prose ul,.prose ol{margin:0 0 20px}
.prose ul{padding-left:24px}
.prose li{margin-bottom:10px}
.prose ol{padding:0;list-style:none;counter-reset:step}
.prose ol li{position:relative;min-height:40px;margin-bottom:16px;padding:2px 0 0 58px;counter-increment:step}
.prose ol li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--base);color:var(--white);font-size:14px;font-weight:600;font-stretch:112%;line-height:1}
.prose ol li:last-child::before{background:var(--pop);color:var(--on-pop)}
.prose code{padding:2px 6px;border-radius:6px;background:var(--tint-2);font-size:.88em;overflow-wrap:anywhere}

/* "The short version", at the top of a post */
.short{margin:0 0 28px;padding:26px 30px;border:1px solid var(--line);border-radius:24px;background:var(--tint)}
.prose .short-title{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--base);font-size:15px;font-weight:600;font-stretch:112%;letter-spacing:.12em;text-transform:uppercase}
.short-title::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--pop)}
.prose .short ul{margin:0}
.prose .short li:last-child{margin-bottom:0}

/* The stages of a task, joined by arrows */
.prose .route{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:18px;margin:0 0 28px;padding:0;list-style:none}
.prose .route li{position:relative;display:grid;place-items:center;min-height:84px;margin:0;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--white);color:var(--base);font-size:18px;font-weight:600;line-height:1.25;text-align:center}
.prose .route li:last-child{border-color:var(--pop);background:var(--pop);color:var(--on-pop)}
.prose .route li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-16px;z-index:1;width:14px;height:14px;margin-top:-7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' fill='none' stroke='%23EA4A3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Tables */
.table-wrap{margin:24px 0 32px;overflow-x:auto;border:1px solid var(--line);border-radius:20px}
.prose table{width:100%;border-collapse:collapse;font-size:18.5px;line-height:1.5}
.prose th{padding:14px 20px;background:var(--tint);color:var(--base);font-weight:600;text-align:left;white-space:nowrap}
.prose td{padding:14px 20px;border-top:1px solid var(--line);vertical-align:top}
.prose td:first-child{min-width:8.5em;color:var(--base);font-weight:600}

/* Checklists, drawings and notes */
.prose .checks{padding:0;list-style:none}
.prose .checks li{position:relative;padding-left:36px}
.prose .checks li::before{content:"";position:absolute;left:0;top:.38em;width:22px;height:22px;border-radius:50%;background:var(--pop) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23111114' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.prose figure{margin:28px 0 32px}
.prose img{display:block;max-width:100%;height:auto;border-radius:24px;box-shadow:0 0 0 1px var(--line)}
.prose figcaption{margin-top:12px;color:var(--muted);font-size:17px;line-height:1.45}
.prose blockquote{display:flex;align-items:center;gap:18px;margin:24px 0 32px;padding:18px 24px 18px 18px;border-radius:24px;color:var(--white);background:radial-gradient(60% 140% at 100% 0%,rgba(var(--glow-rgb),.45),rgba(var(--glow-rgb),0) 70%),var(--base);box-shadow:var(--shadow-sm);font-size:19px;line-height:1.5}
.prose blockquote::before{content:"!";flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--pop);color:var(--on-pop);font-size:20px;font-weight:700}
.prose blockquote p{margin:0}
.prose blockquote strong,.prose blockquote a{color:var(--white)}
.prose blockquote :focus-visible{outline-color:var(--white)}
.how{margin:36px 0 0;padding-top:18px;border-top:1px dashed var(--line-2);color:var(--muted);font-size:17.5px;line-height:1.5}

/* "On this page" */
.toc{grid-column:3;grid-row:1;position:sticky;top:32px;align-self:start;max-height:calc(100vh - 64px);overflow:auto;font-size:16.5px;line-height:1.35}
.toc summary{margin-bottom:12px;color:var(--base);font-size:15.5px;font-weight:600;list-style:none;pointer-events:none}
.toc summary::-webkit-details-marker{display:none}
.toc ul{margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
.toc a{display:block;margin-left:-2px;padding:8px 0 8px 16px;border-left:3px solid transparent;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--base)}
.toc a[aria-current="true"]{border-left-color:var(--pop);color:var(--base);font-weight:500}

/* The reading rail: a perforated edge, like a label sheet, that fills red as you read */
.read-rail{grid-column:1;grid-row:1;justify-self:end;position:relative;width:2px;background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 12px)}
@keyframes rail-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rail-head{from{top:0}to{top:100%}}
@keyframes bar-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .read-rail{view-timeline:--article-read block}
    .read-rail::before{content:"";position:absolute;inset:0;background:var(--pop);transform-origin:top;animation:rail-fill linear both;animation-timeline:--article-read}
    .read-rail::after{content:"";position:absolute;left:-4px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 5px rgba(var(--pop-rgb),.22);animation:rail-head linear both;animation-timeline:--article-read}
    .prose figure,.prose .route,.prose .table-wrap{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 28%}
  }
}

/* Join panel, as on index.html */
.post-cta{position:relative;isolation:isolate;overflow:hidden;margin:72px 0 0;padding:56px;border-radius:36px;color:var(--white);background:radial-gradient(70% 90% at 0% 0%,rgba(var(--glow-rgb),.4),rgba(var(--glow-rgb),0) 70%),radial-gradient(45% 60% at 85% 60%,rgba(var(--pop-rgb),.16),rgba(var(--pop-rgb),0) 70%),var(--base)}
.post-cta::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle at center,var(--dots-join) 0 1px,transparent 1.6px);background-size:22px 22px}
.post-cta h2{margin:0 0 12px;font-size:clamp(30px,3.4vw,46px);font-weight:300;font-stretch:125%;line-height:1.08;letter-spacing:-.025em}
.post-cta p{max-width:36em;margin:0 0 24px;color:var(--on-base)}
.post-cta .btn{min-height:52px;padding:0 28px;font-size:16.5px;box-shadow:var(--shadow-pop)}

/* Keep reading */
.more-title{margin:72px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:clamp(28px,3vw,40px);font-weight:300;font-stretch:125%;line-height:1.1;letter-spacing:-.025em;text-align:center}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.more .card{border-bottom:0}
.more .card h3{margin:18px 0 0;font-size:21px}

@media (max-width:1180px){
  .post-layout{display:block;max-width:calc(46rem + var(--gutter) * 2)}
  .toc{position:static;max-height:none;margin:0 0 32px;padding:16px 22px;overflow:visible;border:1px solid var(--line);border-radius:18px}
  .toc summary{display:flex;align-items:center;justify-content:space-between;min-height:28px;margin:0;font-size:17px;cursor:pointer;list-style:none;pointer-events:auto}
  .toc summary::after{content:"";width:12px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111114' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  .toc[open] summary{margin-bottom:12px}
  .toc[open] summary::after{transform:rotate(180deg)}
  .read-rail{position:fixed;top:0;left:0;right:0;z-index:20;justify-self:auto;width:auto;height:3px;background:none}
  .read-rail::before{transform-origin:left;animation-name:bar-fill;animation-timeline:scroll(root)}
  .read-rail::after{display:none}
}
@media (max-width:1040px){
  .post-list,.more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card:nth-child(3n){border-right:1px solid var(--line)}
  .card:nth-child(2n){border-right:0}
  .controls{flex-wrap:wrap;border-radius:32px}
  .tabs{order:3;width:100%;overflow-x:auto}
  .search{flex-basis:60%}
}
@media (max-width:760px){
  .nav{grid-template-columns:1fr auto}
  .nav-pill{display:none}
  .post-layout{padding-top:40px}
  .prose{font-size:18px}
  .prose .lead{font-size:20.5px}
  .prose h2{margin-top:56px;font-size:27px}
  .prose h3{margin-top:36px;font-size:21px}
  .prose .short-title{font-size:13px}
  .short{padding:20px 22px;border-radius:20px}
  .prose .route{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:16px}
  .prose .route li{min-height:0;padding:12px;font-size:16.5px}
  .prose .route li:not(:last-child)::after{top:auto;right:50%;bottom:-15px;margin:0 -7px 0 0;transform:rotate(90deg)}
  .prose table{font-size:16px}
  .prose th,.prose td{padding:12px 14px}
  .prose td:first-child{min-width:6.5em}
  .prose ol li{padding-top:5px;padding-left:54px}
  .prose figcaption{font-size:14.5px}
  .prose blockquote{gap:14px;padding:16px;border-radius:20px;font-size:16.5px}
  .prose blockquote::before{width:38px;height:38px;border-radius:12px;font-size:17px}
  .how{font-size:15px}
  .toc summary{font-size:16px}
  .toc{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .card::after,.cover{transition:none}
  .card a:hover .cover{transform:none}
}
@media (max-width:680px){
  .post-list,.more{grid-template-columns:minmax(0,1fr)}
  .card{border-right:0!important}
  .card a{padding:24px 0 28px}
  .controls{margin-bottom:40px}
  .search{flex-basis:100%}
  .sort{order:2;width:100%}
  .sort select{width:100%}
  .post-cover{border-radius:24px}
  .post-cta{padding:32px 24px;border-radius:28px}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .nav{min-height:80px}
  .logo{font-size:22px}
  .hero{padding-top:104px}
  .kicker{margin-bottom:24px;font-size:13.5px}
}