/* Shared landing styles live in /assets/site.css. */
.blog-page{overflow-x:visible}.blog-page [hidden]{display:none!important}.blog-shell{width:min(1100px,calc(100% - 48px));margin:auto;padding-top:138px}.blog-page :focus-visible{outline:3px solid #b61949;outline-offset:5px}.skip-link{position:fixed;top:-80px;left:20px;background:#1d1d1f;color:white;padding:12px 20px;z-index:200;border-radius:10px}.skip-link:focus{top:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:600;color:#b61949;margin:0 0 20px;text-transform:uppercase}.blog-hero{text-align:center;padding:28px 0 66px}.blog-hero h1{font-size:clamp(46px,6.6vw,78px);line-height:1.04;letter-spacing:-.065em;font-weight:600;margin:0}.blog-hero h1 em{font-style:normal;color:var(--apple-accent)}.blog-hero>p:last-child{font-size:21px;color:var(--apple-text-muted);line-height:1.5;margin:26px 0 0;letter-spacing:-.025em}
.featured{border:1px solid #e8e8ec;border-radius:28px;background:white;overflow:hidden}.featured>a{display:grid;grid-template-columns:1.05fr 1fr;color:inherit;text-decoration:none}.featured-copy{padding:48px}.featured h2{font-size:clamp(30px,3.3vw,42px);letter-spacing:-.045em;line-height:1.13;margin:0 0 20px;font-weight:600}.featured-copy>p:not(.eyebrow){color:#6e6e73;line-height:1.65;font-size:16px}.featured-link{display:inline-flex;align-items:center;gap:22px;margin-top:18px;font-weight:600;font-size:15px}.featured-link>span{font-size:21px;color:var(--apple-accent)}.featured-meta{display:flex;gap:12px;color:#707077;font-size:12px;margin-top:28px}
.project-art{--tint:#fbe9ef;--ink:#b61949;position:relative;min-height:195px;background:var(--tint);display:grid;place-items:center;overflow:hidden;isolation:isolate}.project-art.blue{--tint:#e9f1fa;--ink:#286295}.project-art.purple{--tint:#f0edfa;--ink:#7353a7}.project-art.green{--tint:#e9f3ed;--ink:#3a7657}.project-art.orange{--tint:#fbefe3;--ink:#9e6324}.art-grid{position:absolute;inset:0;background-image:radial-gradient(var(--ink) .7px,transparent .7px);background-size:20px 20px;opacity:.13;z-index:-1}.art-device{width:88px;height:88px;border:1px solid #ffffffd9;border-radius:22px;display:grid;place-items:center;background:#ffffffa6;box-shadow:0 10px 25px -15px var(--ink),inset 0 0 0 5px #ffffff35;color:var(--ink);transform:rotate(-8deg)}.art-device svg{width:44px;height:44px}.art-orbit{position:absolute;width:178px;height:178px;border:1px solid var(--ink);opacity:.12;border-radius:50%;z-index:-1}.orbit-two{width:280px;height:280px}.art-label{position:absolute;bottom:16px;left:20px;font-size:9px;letter-spacing:.13em;color:var(--ink);font-weight:600}.art-dot{position:absolute;right:20px;bottom:20px;width:6px;height:6px;background:var(--ink);border-radius:50%}.large-art .art-device{width:150px;height:150px;border-radius:36px}.large-art .art-device svg{width:72px;height:72px}.large-art .orbit-one{width:260px;height:260px}.large-art .orbit-two{width:400px;height:400px}.large-art .art-label{left:30px;bottom:26px;font-size:10px}.large-art .art-dot{right:30px;bottom:30px}
.library{margin-top:84px}.library-heading{display:flex;justify-content:space-between;gap:24px;align-items:end}.library-heading .eyebrow,.related .eyebrow{color:#73737a;margin-bottom:12px}.library h2,.related h2{margin:0;font-size:clamp(28px,3vw,38px);font-weight:600;letter-spacing:-.045em;line-height:1.15}.search-box{display:flex;align-items:center;gap:8px;border:1px solid #dddde3;border-radius:12px;padding:0 14px;height:46px;background:white}.search-box svg{width:18px;height:18px;color:#76767d}.search-box input{width:175px;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;color:#1d1d1f}.search-box:focus-within{outline:2px solid #b61949;outline-offset:3px}.search-box input:focus{outline:none}.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 30px}.filter-chip{background:transparent;color:#58585f;font:inherit;font-size:13px;border:1px solid #dedee4;border-radius:999px;padding:11px 16px;min-height:44px;cursor:pointer}.filter-chip span{margin-left:5px;opacity:.7}.filter-chip[aria-pressed=true]{background:#1d1d1f;color:white;border-color:#1d1d1f}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}.project-card{min-width:0;border:1px solid #e5e5eb;border-radius:22px;overflow:hidden;background:white;transition:box-shadow .2s,border-color .2s}.project-card:hover{box-shadow:0 10px 30px #22222208;border-color:#c9c9d1}.project-card>a{display:flex;height:100%;flex-direction:column;text-decoration:none;color:inherit}.card-copy{padding:24px;flex:1;display:flex;flex-direction:column}.card-meta{display:flex;justify-content:space-between;gap:12px;color:#74747c;font-size:11px;font-weight:500}.card-meta>span{white-space:nowrap}.project-card h3{font-size:23px;font-weight:600;line-height:1.2;letter-spacing:-.035em;margin:15px 0 12px}.project-card p{font-size:14px;color:#717178;line-height:1.65;margin:0 0 24px}.card-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:#686870}.card-bottom>span:last-child{font-size:22px;color:#1d1d1f}.empty-state{text-align:center;padding:64px 20px;color:#6e6e73}.empty-state h3{color:#1d1d1f}.empty-state button{border:0;border-radius:999px;background:#1d1d1f;color:white;font:inherit;padding:12px 22px;cursor:pointer}
.blog-cta{display:flex;align-items:center;gap:32px;margin-top:80px;padding:44px 48px;border-radius:24px;background:#f1f1f5}.blog-cta .eyebrow{margin-bottom:12px}.blog-cta h2{font-size:34px;letter-spacing:-.045em;line-height:1.15;margin:0;font-weight:600}.blog-cta p:not(.eyebrow){color:#6e6e73;font-size:16px}.blog-cta a{color:#b61949;text-decoration:none;font-size:15px;font-weight:600}.editorial-intro{max-width:680px;text-align:center;margin:40px auto 64px;font-size:13px;color:#77777e;line-height:1.7}.editorial-intro a{color:inherit;text-underline-offset:3px}.blog-footer{margin-top:0}.blog-footer .footer-links{flex-wrap:wrap}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:#74747c;font-size:13px;margin:14px 0 42px}.breadcrumbs a{color:inherit;text-decoration:none;padding:6px 0}.article-header{max-width:860px}.article-header .eyebrow{letter-spacing:.06em}.article-header h1{font-size:clamp(38px,5.4vw,66px);line-height:1.06;letter-spacing:-.055em;font-weight:600;margin:0}.article-deck{font-size:20px;line-height:1.6;color:#6e6e73;max-width:770px;margin:24px 0}.byline{display:flex;gap:12px;align-items:center;margin:26px 0 38px;font-size:13px;font-weight:500}.byline-detail{display:block;color:#76767e;font-size:12px;font-weight:400;margin-top:3px}.article-banner{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;border:1px solid #e7e7ed;overflow:hidden;background:white;margin-bottom:58px}.article-banner .project-art{min-height:260px}.article-banner .art-device{width:110px;height:110px;border-radius:28px}.article-banner .art-device svg{width:54px;height:54px}.project-facts{display:flex;flex-direction:column;justify-content:center;padding:30px 40px;gap:20px;margin:0}.project-facts dt{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#77777f;margin-bottom:5px}.project-facts dd{font-size:15px;font-weight:500;margin:0}
.reading-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:58px}.article-aside{align-self:start;position:sticky;top:130px;max-height:calc(100vh - 155px);overflow-y:auto;font-size:12px;line-height:1.5;padding-right:12px}.aside-title{color:#1d1d1f;font-weight:600;margin:0 0 16px}.toc ul{list-style:none;padding:0;margin:0}.toc li{margin-bottom:12px}.toc a{color:#717178;text-decoration:none;display:block;border-left:2px solid #e6e6eb;padding:4px 0 4px 14px}.toc a:hover,.toc a[aria-current=true]{color:#b61949;border-color:#b61949}.back-link{display:inline-block;margin-top:24px;color:#1d1d1f;text-decoration:none}.article-body{min-width:0;font-size:17px;line-height:1.85;color:#45454d}.article-body>p:first-child{font-size:21px;line-height:1.7;color:#25252c;margin-top:-7px}.article-body p{margin:0 0 22px}.article-body h2{font-size:29px;font-weight:600;line-height:1.2;letter-spacing:-.035em;color:#1d1d1f;margin:46px 0 20px;scroll-margin-top:135px}.article-body h3{color:#1d1d1f}.article-body a{color:#b61949;text-underline-offset:4px;overflow-wrap:anywhere}.article-body li{padding-left:5px;margin-bottom:10px}.article-body ul,.article-body ol{padding-left:23px;margin:22px 0 28px}.article-body :not(pre)>code{font-size:.86em;background:#ededf2;border-radius:5px;padding:3px 5px;color:#983257;overflow-wrap:anywhere}.code-block{margin:26px 0 30px;border:1px solid #282d35;border-radius:16px;overflow:hidden;background:#0d1117;color:#e6edf3;font-size:13px}.code-toolbar{padding:10px 18px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;color:#a9b3c2;letter-spacing:.08em;font:10px/1.5 var(--font);min-height:52px}.copy-code{color:#dce4ee;border:1px solid #414854;border-radius:7px;padding:7px 10px;font:11px/1.5 var(--font);background:#ffffff08;cursor:pointer;min-height:32px}.code-block pre{margin:0;padding:22px;overflow-x:auto;font:13px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}.code-block code{font:inherit}.editorial-note{padding:24px;background:#f0f0f4;border-radius:16px;margin-top:40px;font-size:13px;line-height:1.75;color:#6e6e73}.editorial-note strong{color:#38383e}.editorial-note p{margin:8px 0 0}.related{margin:90px 0 80px;padding-top:44px;border-top:1px solid #e3e3e9}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.featured-copy{padding:34px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.reading-layout{grid-template-columns:minmax(0,1fr);gap:32px}.article-aside{position:static;max-height:none;padding:22px;border:1px solid #e1e1e8;border-radius:16px}.toc ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.article-aside .back-link{display:none}.article-body{max-width:760px;margin:auto}.library-heading{flex-wrap:wrap}}
@media(max-width:600px){.blog-shell{width:calc(100% - 36px);padding-top:112px}.blog-hero{padding:25px 0 42px}.blog-hero h1{font-size:48px}.blog-hero>p:last-child{font-size:18px}.featured>a{grid-template-columns:1fr}.featured-copy{padding:30px}.featured .project-art{min-height:230px;grid-row:1}.featured .art-device{width:112px;height:112px;border-radius:28px}.featured .art-device svg{width:56px;height:56px}.featured h2{font-size:32px}.library{margin-top:56px}.library-heading{align-items:stretch}.search-box{width:100%}.search-box input{flex:1;width:100%}.filter-row{gap:7px;margin-top:22px}.filter-chip{font-size:12px;padding:10px 13px}.project-grid{grid-template-columns:minmax(0,1fr)}.project-art{min-height:200px}.card-copy{padding:24px}.project-card h3{font-size:26px}.card-meta{font-size:12px}.blog-cta{padding:28px;align-items:start;flex-direction:column;gap:22px;margin-top:54px}.blog-cta h2{font-size:31px}.breadcrumbs{margin:8px 0 28px}.article-header h1{font-size:42px}.article-deck{font-size:18px}.byline-detail{font-size:11px}.article-banner{grid-template-columns:1fr;margin-bottom:32px}.article-banner .project-art{min-height:220px}.project-facts{padding:26px;gap:18px}.toc ul{grid-template-columns:1fr}.article-body{font-size:16px;line-height:1.85}.article-body>p:first-child{font-size:19px}.article-body h2{font-size:26px}.code-block pre{padding:18px;font-size:12px}.related{margin-top:56px}.blog-footer .footer-top{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.project-card{transition:none}}
@media print{.nav-wrapper,.article-aside,.related,.blog-footer,.copy-code,.skip-link{display:none!important}.blog-shell{width:100%;padding-top:0}.reading-layout{display:block}.article-body{max-width:none}.code-block pre{white-space:pre-wrap;overflow-wrap:anywhere}}
/* Let code scroll inside its own panel; never widen or scroll the article column. */
.blog-page main.blog-shell { overflow: visible; }
.article-body { width: 100%; }
/* Keep the archive hero typography in lockstep with the landing-page Blog title. */
.blog-hero h1{font-size:clamp(3rem,5vw,5.4rem);line-height:.96;letter-spacing:-.065em;font-weight:600}
@media(max-width:600px){.blog-hero h1{font-size:clamp(3rem,14vw,4.4rem)}}