* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: #24343f; background: #fff; font-family: Manrope, Arial, sans-serif; line-height: 1.8; }
a { color: #17526a; text-underline-offset: .22em; }
a:focus-visible, button:focus-visible { outline: 3px solid #2186a3; outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 200; padding: .6rem 1rem; background: #fff; }
.skip-link:focus { top: 1rem; }
.site-topbar.home-topbar { background: #071524 !important; }
.home-topbar .site-brand { color: #fff; }
.article-heading, .blog-heading { padding: 7rem 0 1.6rem; text-align: center; }
.heading-inner, .story-copy { width: min(700px, calc(100% - 3rem)); margin: auto; }
.article-navigation { text-align: center; }
.back-link { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .8rem; border: 1px solid #d5dfe5; border-radius: 4px; font-size: .8rem; font-weight: 700; text-decoration: none; }
.back-link:hover { background: #f4f7f8; }
.article-date { margin: 1.4rem 0 .8rem; font-size: .77rem; color: #6c7780; }
h1, .story-copy h2, .story-preview h3 { font-family: "Space Grotesk", Manrope, Arial, sans-serif; color: #132733; font-weight: 600; letter-spacing: -.035em; }
.article-heading h1, .blog-heading h1 { font-size: clamp(1.9rem, 3.2vw, 2.65rem); line-height: 1.15; margin: 0 auto .9rem; }
.article-deck { max-width: 590px; margin: auto; font-size: 1rem; color: #67737b; line-height: 1.7; }
.story-content { padding-bottom: 3rem; }
.story-copy { font-size: 1rem; }
.story-copy p { margin: 0 0 1.15rem; }
.story-copy .article-lead { font-size: 1.08rem; color: #243f50; }
.story-copy h2 { text-align: center; font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.3; margin: 2.8rem 0 1.2rem; scroll-margin-top: 7rem; }
.story-figure { width: min(680px, calc(100% - 3rem)); margin: 2rem auto 2.5rem; }
.story-figure a { display: block; }
.story-figure img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; }
.story-figure figcaption { font-size: .76rem; text-align: center; color: #707b83; margin-top: .65rem; }
.website-examples { margin: 0; }
.short-note { padding: 1rem 1.2rem; margin: 1.3rem 0 1.8rem; border-left: 2px solid #5b91a5; background: #f6f8f9; font-size: .85rem; line-height: 1.7; }
.short-note strong { display: block; color: #294b5c; margin-bottom: .3rem; }
.build-workflow { width: min(700px, calc(100% - 3rem)); margin: 1.7rem auto 2.2rem; padding: 1rem 1.5rem; background: #f6f8f9; }
.build-workflow figcaption { font-size: .85rem; font-weight: 700; text-align: center; color: #294b5c; margin-bottom: .5rem; }
.build-workflow dl { margin: 0; }
.build-workflow dl>div { display: flex; gap: 1.5rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid #e3e9ed; }
.build-workflow dl>div:last-child { border: 0; }
.build-workflow dt { flex: 0 0 130px; font-size: .84rem; font-weight: 800; color: #294b5c; }
.build-workflow dd { margin: 0; font-size: .82rem; color: #62727d; line-height: 1.65; }
.article-end { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e7ea; text-align: center; font-size: .83rem; }
.article-end .article-navigation { margin-bottom: 1rem; }
.blog-stories { width: min(740px, calc(100% - 3rem)); margin: auto; padding: 1rem 0 4rem; }
.blog-stories>h2 { text-align: center; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #70808b; margin: 0 0 1.4rem; }
.story-preview { display: block; text-align: center; text-decoration: none; color: #24343f; }
.story-preview img { display: block; width: 100%; max-height: 340px; object-fit: contain; margin: auto; }
.story-preview h3 { font-size: 1.8rem; line-height: 1.25; margin: .7rem 0; }
.story-preview p { max-width: 580px; margin-left: auto; margin-right: auto; }
.story-preview>span { font-weight: 700; color: #17526a; }
@media(max-width:680px) {
 .article-heading,.blog-heading { padding-top: 6.5rem; padding-bottom: 1.3rem; }
 .heading-inner,.story-copy,.story-figure,.build-workflow,.blog-stories { width: calc(100% - 2rem); }
 .article-heading h1 { font-size: 2rem; }
 .article-deck { font-size: .95rem; }
 .story-figure img { max-height: 260px; }
 .build-workflow { padding: .8rem 1rem; }
 .build-workflow dl>div { display: block; }
 .build-workflow dt { margin-bottom: .2rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
/* A quiet newspaper layout with one clear link and boundary per story. */
body{background:#f8f6f0}
.newspaper{width:min(1080px,calc(100% - 3rem));margin:auto;padding:6.8rem 0 3rem}
.paper-masthead{text-align:center;border-bottom:3px double #334338;padding-bottom:1.1rem}
.paper-dateline{display:flex;justify-content:space-between;padding-bottom:.65rem;border-bottom:1px solid #c0c5b9;font-size:.69rem;color:#77806f}
.paper-name{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:.22em;font:700 clamp(2.4rem,5.5vw,4.5rem)/1.2 Georgia,serif;color:#1b3027;letter-spacing:-.04em;margin:1rem 0 .45rem}
.paper-wordmark{font-family:"Space Grotesk",Manrope,Arial,sans-serif;font-weight:700;letter-spacing:.025em;font-variant-numeric:lining-nums;font-feature-settings:"lnum"}
.paper-the{font-size:.66em;font-style:italic;font-weight:400;letter-spacing:-.02em}
.paper-description{margin:0;font-size:.76rem;color:#6d7867}
.journal-stories{padding-top:1.7rem}
.journal-stories a{color:inherit;text-decoration:none}
.journal-feature{border:1px solid #d8dccf;background:#fdfcf8}
.feature-link{display:flex;align-items:stretch;min-width:0}
.feature-link>img{display:block;width:52%;height:auto;aspect-ratio:1.55;object-fit:cover}
.feature-copy{flex:1;min-width:0;padding:1.6rem 1.9rem;align-self:center}
.story-label{font:700 .64rem/1.5 Manrope,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6c806b;margin:0 0 .8rem}
.journal-stories h2{font:700 clamp(1.6rem,2.8vw,2.25rem)/1.15 Georgia,serif;letter-spacing:-.025em;color:#20382a;margin:0 0 1rem}
.journal-stories p:not(.story-label){font:1.05rem/1.65 Georgia,serif;color:#5a6855;margin:0 0 1.4rem}
.story-read{display:inline-block;font:700 .71rem/1.5 Manrope,Arial,sans-serif;color:#355a3e;border-bottom:1px solid #9aa98e;padding-bottom:.1rem}
.journal-stories a:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.journal-pair{display:flex;gap:1.5rem;margin-top:1.5rem}
.journal-story{flex:1;min-width:0;border:1px solid #d8dccf;background:#fdfcf8}
.journal-story>a{display:flex;height:100%;flex-direction:column;align-items:start;padding:1.6rem 1.8rem}
.journal-story h2{font-size:1.8rem;max-width:20ch}
.journal-story .story-read{margin-top:auto}
.article-heading h1,.story-copy h2{font-family:Georgia,"Times New Roman",serif;color:#203b30}
.article-heading h1{font-size:clamp(2rem,3.7vw,3rem);letter-spacing:-.04em}
.article-heading .heading-inner{border-bottom:3px double #bbc3af;padding-bottom:1.2rem}
.article-heading .article-date{font-size:.72rem;color:#7a8273}
.article-deck{font-family:Georgia,serif;color:#687466}
.story-copy{font-family:Georgia,"Times New Roman",serif;font-size:1.1rem;color:#3a493f}
.story-copy .article-lead{color:#234b36;font-size:1.17rem}
.story-copy h2{font-size:1.7rem}
.back-link{background:transparent;border-color:#c4ccbd;color:#496443;font-family:Manrope,Arial,sans-serif}
.short-note{background:#eeefe6;border-color:#728c6a;font-family:Manrope,Arial,sans-serif}
.build-workflow{background:#eeefe6;font-family:Manrope,Arial,sans-serif}
.build-workflow dt,.build-workflow figcaption{color:#34533c}
.story-figure figcaption{font-family:Manrope,Arial,sans-serif;color:#75806e}
.article-end{border-color:#b8c2ad;font-family:Manrope,Arial,sans-serif}
@media(max-width:760px){.newspaper{width:calc(100% - 2rem);padding-top:6.5rem}.feature-link{display:block}.feature-link>img{width:100%;aspect-ratio:1.9}.feature-copy{padding:1.3rem}.journal-pair{gap:1rem}.journal-story>a{padding:1.2rem}.journal-story h2{font-size:1.5rem}.paper-name{font-size:2.6rem}.article-heading h1{font-size:2.2rem}}
@media(max-width:470px){.journal-pair{display:block}.journal-story+.journal-story{margin-top:1rem}.paper-name{font-size:2.1rem;gap:.18em}.paper-dateline{font-size:.61rem}.story-copy{font-size:1.05rem}}
/* One editorial typeface, with full-height numerals throughout the journal. */
.newspaper,
.newspaper *,
.article-heading,
.article-heading *,
.story-content,
.story-content * {
  font-family: "Times New Roman", Times, serif !important;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.paper-wordmark {
  font-family: inherit;
  letter-spacing: inherit;
}
/* The journal is an evergreen index; only actual posts appear below its masthead. */
.paper-overline{margin:0;padding-bottom:.7rem;border-bottom:1px solid #bbc4b3;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#75816d}
.paper-name{margin-top:1.3rem}
.journal-stories{padding-top:1.8rem;border-bottom:3px double #a7b39b;padding-bottom:1.8rem}
.journal-feature{border:0;background:transparent}
.feature-link{gap:2.3rem;align-items:center}
.feature-link>img{width:48%;aspect-ratio:1.5;object-fit:contain}
.feature-copy{padding:1rem 0}
.journal-stories .story-author{font-size:.8rem;color:#78816d;margin:.7rem 0 1.2rem}
@media(max-width:760px){.feature-link>img{width:100%;aspect-ratio:1.5}.feature-copy{padding:1.4rem 0 0}.journal-stories{padding-bottom:1.5rem}}