@font-face{font-family:'Cormorant Garamond';src:url('/_releases/b45a07089dbe1f42ae5f8397aea3e0f54ded60c8c541e0c8fd62e5aff731ee5f/assets/cormorant-garamond-variable.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
/* The page scrolls as one. It opens on a full screen of night (blog-detail.js draws the dawn into .article-field);
   the article texture sits behind the reading column below it, and the footer follows. */
.blog-detail-page{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.article-shell{position:relative;isolation:isolate}
.detail-background{position:absolute;inset:0;z-index:-1;background:url('/_releases/b45a07089dbe1f42ae5f8397aea3e0f54ded60c8c541e0c8fd62e5aff731ee5f/assets/blog-detail-background.png') top left/100% auto no-repeat;pointer-events:none}
.article-hero{--night:#0f1010;--dawn-ink:#ededea;position:relative;height:100vh;height:100svh;min-height:640px;--design-height:1080px;background:radial-gradient(ellipse 80% 50% at 50% 42%,#191b1b 0%,var(--night) 62%) var(--night);color:var(--dawn-ink);overflow:hidden;isolation:isolate}
.article-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.article-hero .design-canvas{pointer-events:none}
.article-hero .site-header{pointer-events:auto}
.article-hero .home-link img{filter:invert(1) brightness(1.08)}
.article-hero .main-nav :is(button,a){opacity:.56}
.article-hero .main-nav :is(button,a):hover,.article-hero .main-nav [aria-current="page"]{opacity:1}
.article-opening{position:absolute;left:50%;top:73%;transform:translate(-50%,-50%);width:min(92vw,calc(1100px * var(--art-scale)));text-align:center;animation:article-opening 2.2s cubic-bezier(.2,.6,.2,1) .5s both}
@keyframes article-opening{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}
.article-kicker{display:flex;justify-content:center;align-items:center;gap:1.2em;font-size:calc(15px * var(--art-scale));line-height:1;letter-spacing:.22em;text-transform:none;opacity:.62}
.article-kicker-dot{opacity:.7}
.article-hero h1{margin:calc(26px * var(--art-scale)) 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:calc(132px * var(--art-scale));line-height:1;letter-spacing:-.012em}
.article-toc{list-style:none;margin:calc(56px * var(--art-scale)) auto 0;padding:0;width:calc(320px * var(--art-scale));font-size:calc(17px * var(--art-scale));line-height:calc(27px * var(--art-scale))}
.article-toc a{display:flex;align-items:baseline;gap:.8em;color:inherit;opacity:.86;transition:opacity .2s}
.article-toc a:hover{opacity:1}
.toc-number{opacity:.6;font-variant-numeric:tabular-nums}
.toc-leader{flex:1;height:0;border-bottom:1px dotted rgba(237,237,234,.42);transform:translateY(-.3em)}
.toc-title{white-space:nowrap}
.article-scroll{position:absolute;left:50%;bottom:calc(26px * var(--art-scale));transform:translateX(-50%);font-size:calc(12px * var(--art-scale));letter-spacing:.24em;text-transform:uppercase;opacity:.5;padding-bottom:calc(22px * var(--art-scale));animation:article-scroll 1.6s ease 3.2s both}
.article-scroll::after{content:'';position:absolute;left:50%;bottom:0;width:1px;height:calc(14px * var(--art-scale));background:currentColor;opacity:.7;animation:article-scroll-line 2.6s ease-in-out 4s infinite}
.article-scroll:hover{opacity:.9}
@keyframes article-scroll{from{opacity:0}to{opacity:.5}}
@keyframes article-scroll-line{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media(prefers-reduced-motion:reduce){.article-opening,.article-scroll,.article-scroll::after{animation:none}}
.article-reading{position:relative}
.article-reading>article{padding:calc(48px * var(--art-scale)) calc(48px * var(--art-scale)) 0}
.blog-detail-page .site-footer{margin-top:0}
.article-cover{width:100%;height:auto;aspect-ratio:1824/880;object-fit:cover}
.article-copy{padding-top:calc(48px * var(--art-scale));padding-bottom:calc(86px * var(--art-scale));font-size:calc(var(--body-copy-size) * var(--art-scale));line-height:var(--body-copy-leading);font-weight:400}
.article-copy p+p{margin-top:1.4em}
.article-introduction{width:calc(1028px * var(--art-scale));margin-left:calc(536px * var(--art-scale))}
.article-section{display:grid;grid-template-columns:calc(338px * var(--art-scale)) calc(1028px * var(--art-scale));margin-left:calc(194px * var(--art-scale))}
.article-rd{margin-top:calc(44px * var(--art-scale));column-gap:calc(2px * var(--art-scale))}
.article-team{margin-top:calc(35px * var(--art-scale))}
.article-team .article-section-body{transform:translateX(calc(-2px * var(--art-scale)))}
.article-section-label{padding-left:calc(2px * var(--art-scale))}
.article-section-number{display:block;line-height:1.2;opacity:.48}
.article-section h2{margin:calc(8px * var(--art-scale)) 0 0 calc(-2px * var(--art-scale));font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:calc(24px * var(--art-scale));line-height:calc(28px * var(--art-scale))}
/* Figma uses SemiBold with a 0.3px outside stroke; paint the fill over a centered 0.6px stroke. */
.article-section h2{-webkit-text-stroke:calc(.6px * var(--art-scale)) #000;paint-order:stroke fill}
@media(max-width:1023px){
  .article-hero{min-height:560px}
  .article-opening{width:min(90vw,520px);top:71%}
  .article-kicker{font-size:11px;letter-spacing:.2em}
  .article-hero h1{margin-top:18px;font-size:56px}
  .article-toc{margin-top:34px;width:240px;font-size:14px;line-height:24px}
  .article-scroll{bottom:22px;font-size:10px;padding-bottom:18px}
  .article-scroll::after{height:12px}
  .article-reading>article{padding:20px 20px 0}
  .article-copy{padding-top:28px;padding-bottom:40px;font-size:var(--body-copy-size);line-height:var(--body-copy-leading)}
  .article-introduction{width:auto;margin:0}
  .article-section{display:block;margin:32px 0 0}
  .article-section-label{padding:0;margin-bottom:16px}
  .article-section-number{font-size:14px;line-height:18px}
  .article-section h2{margin:4px 0 0;font-size:24px;line-height:28px;-webkit-text-stroke-width:.6px}
  .article-team .article-section-body{transform:none}
}
@media(max-height:600px) and (min-width:1024px){
  .article-hero{min-height:520px}
  .article-hero h1{font-size:calc(96px * var(--art-scale))}
  .article-toc{margin-top:calc(30px * var(--art-scale))}
}

@media(min-width:600px) and (max-width:1023px){
  .article-hero h1{font-size:76px}
  .article-toc{width:280px;font-size:15px}
  .article-reading>article{max-width:840px;margin-inline:auto;padding-inline:28px}
}
@media(max-height:600px) and (max-width:1023px){
  .article-hero{min-height:420px}
  .article-hero h1{font-size:44px}
  .article-toc{display:none}
  .article-scroll{display:none}
}
