.journal { margin:0; padding-top:var(--topbar-h); overflow-x:visible; color:var(--color-ink); background:var(--color-paper); font:400 var(--type-body)/1.5 var(--font-family); letter-spacing:var(--tracking); }
.journal * { box-sizing:border-box; }
.journal a { color:inherit; text-decoration:none; }
.journal .top-request { color:var(--color-paper); }
.journal button,.journal input { font:inherit; color:inherit; }
.journal-main img,.article-main img { display:block; max-width:100%; height:auto; }
/* :where() keeps these resets at zero specificity, so shared blocks (header, footer) keep their own spacing. */
:where(.journal) :is(h1,h2,h3,p) { margin:0; }
:where(.journal) :is(h1,h2,h3) { font-weight:400; text-wrap:balance; }
.journal a:focus-visible,.journal button:focus-visible,.journal input:focus-visible,.journal summary:focus-visible { outline:2px solid var(--color-ink); outline-offset:5px; }
.journal [hidden] { display:none!important; }
.skip { position:fixed; left:var(--space-16); top:-100px; z-index:20; background:white; padding:var(--space-16); }
.skip:focus { top:var(--space-16); }
.journal-header { min-height:var(--topbar-h); padding:var(--space-20) var(--page-gutter); display:flex; gap:var(--space-24); flex-wrap:wrap; align-items:center; justify-content:space-between; border-bottom:1px solid var(--color-border); }
.journal-brand { width:226px; flex:none; line-height:1; }
.journal-brand>span { font:300 var(--text-24)/1 "Montserrat",Arial,sans-serif; white-space:nowrap; }
.journal-brand b { color:var(--color-accent); font-size:var(--text-36); font-weight:400; }
.journal-brand small { display:block; font:400 var(--text-12)/1.2 "Montserrat",Arial,sans-serif; text-align:right; }
.journal-header nav { display:flex; flex-wrap:wrap; gap:var(--space-8) var(--space-24); font-size:var(--type-control); order:3; width:100%; }
.journal-header nav a { padding:var(--space-8) 0; text-underline-offset:6px; }
.journal-header nav a:hover,.journal-header nav [aria-current] { text-decoration:underline; }
.journal-back { display:none; }
.journal-main,.article-main { padding:0 var(--page-gutter); max-width:1800px; margin:auto; }
.journal-intro { padding:var(--space-64) 0 var(--space-48); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-20); }
.eyebrow { font-size:var(--type-label); line-height:1.4; color:var(--color-muted); }
.journal-intro h1 { font-size:var(--type-section); line-height:1.06; }
.journal-deck { font-size:var(--type-lead); }
.journal-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-24); margin-bottom:var(--space-24); }
.journal-tools h2 { font-size:var(--type-result); }
.search { display:flex; align-items:center; gap:var(--space-12); border-bottom:1px solid var(--color-border); width:min(100%,320px); }
.search input { width:100%; min-width:0; border:0; padding:var(--space-12) 0; background:transparent; font-size:var(--type-control); }
.search-status { margin-bottom:var(--space-24)!important; font-size:var(--type-control); color:var(--color-muted); }
.journal-grid { display:grid; gap:var(--space-48) var(--space-24); }
.journal-card { min-width:0; }
.journal-card>a { display:flex; height:100%; flex-direction:column; }
.cover { aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius-panel); background:var(--color-surface); margin-bottom:var(--space-20); }
.cover img { width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--motion-standard); }
@media (hover:hover) {
  .journal-card > a:hover .cover img { transform:scale(1.035); }
}
.journal-card h2 { font-size:var(--type-result); line-height:1.15; text-wrap:pretty; margin:var(--space-12) 0; }
.journal-card p { font-size:var(--type-body); line-height:1.5; color:var(--color-muted); margin-bottom:var(--space-24); }
.card-link { margin-top:auto; font-size:var(--type-control); display:flex; align-items:center; gap:var(--space-12); }
/* Filter bar shared by the blog and the cases page: outline controls in the site's button language, the chosen one ink. */
.filter-bar { display:flex; gap:var(--space-8); min-width:0; }
.filter-bar button { display:inline-flex; align-items:center; gap:var(--space-8); flex:none; min-height:44px; padding:0 var(--space-16); border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-paper); color:var(--color-ink); font-size:var(--type-control); line-height:1; white-space:nowrap; cursor:pointer; transition:border-color var(--duration-fast),background var(--duration-fast),color var(--duration-fast); }
.filter-bar button:hover { border-color:var(--color-ink); }
.filter-bar button[aria-pressed="true"] { border-color:var(--color-ink); background:var(--color-ink); color:var(--color-paper); }
.filter-bar .filter-count { font-size:var(--type-label); color:var(--color-muted); }
.filter-bar button[aria-pressed="true"] .filter-count { color:var(--color-dark-muted); }
.filter-status { margin:0 0 var(--space-24); font-size:var(--type-control); color:var(--color-muted); }
@media(max-width:767px) {
  /* Phones: one scrollable row instead of ragged wrapping, bleeding to the screen edges. */
  .filter-bar { overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--page-gutter)); padding-inline:var(--page-gutter); scroll-padding-inline:var(--page-gutter); }
  .filter-bar::-webkit-scrollbar { display:none; }
  .journal-tools { flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:var(--space-16); }
  .journal-tools .search { width:100%; }
}
.article-author { display:flex; align-items:center; gap:var(--space-12); margin-block:var(--space-20) var(--space-24); font-size:var(--type-control); }
.article-author img { width:44px; height:44px; object-fit:cover; border-radius:50%; flex:none; }
.article-author strong { display:block; font-weight:500; color:var(--color-ink); }
.article-author small { display:block; font-size:var(--type-label); line-height:1.4; color:var(--color-muted); }
.article-heading .article-author { margin:0; }
.human-label { display:inline-flex; align-items:center; gap:var(--space-8); font-size:var(--type-label); color:var(--color-muted); margin-block:var(--space-8); }
.journal .case-archive .projects { margin-inline:0; }
.case-archive .cases-v3 h2 { font-size:var(--type-case-heading); line-height:1.125; font-weight:400; }
.case-archive .case-primary-story h2,.case-archive .case-southern-story h2 { margin-top:var(--space-16); }
.journal .case-archive .case-brand img { max-width:none; height:inherit; }
.journal .ph { font-size:var(--text-20); vertical-align:middle; flex:none; }
.materials { padding:var(--space-48) 0 0; margin-top:var(--section-gap); border-top:1px solid var(--color-border); display:grid; gap:var(--space-32); scroll-margin-top:var(--space-32); }
.materials h2 { font-size:var(--type-section); line-height:1.1; margin:var(--space-12) 0 var(--space-24); }
.material { display:flex; gap:var(--space-16); padding:var(--space-24) 0; border-bottom:1px solid var(--color-border); align-items:flex-start; }
.material strong { display:block; font-size:var(--type-body); font-weight:500; }
.material small { display:block; font-size:var(--type-control); color:var(--color-muted); margin-top:var(--space-8); }
.material-format { white-space:nowrap; margin-left:auto; font-size:var(--type-label); }
.material:hover strong { text-decoration:underline; text-underline-offset:5px; }
.journal-footer { margin:var(--space-80) var(--page-gutter) 0; border-top:1px solid var(--color-border); padding:var(--space-32) 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-24); font-size:var(--type-control); }
.journal-footer p { color:var(--color-muted); }
.breadcrumbs { display:flex; gap:var(--space-12); flex-wrap:wrap; font-size:var(--type-label); color:var(--color-muted); margin-top:var(--space-32); }
.breadcrumbs a:hover { text-decoration:none; }
.article-heading { max-width:1004px; margin:var(--space-48) auto; }
.article-main > .breadcrumbs { max-width:1004px; margin-inline:auto; }
.article-heading h1 { font-size:var(--type-article-title); line-height:1.08; margin:var(--space-20) 0 var(--space-24); overflow-wrap:break-word; }
.article-lead { font-size:var(--type-lead); line-height:1.5; max-width:850px; }
.article-meta { display:flex; flex-wrap:wrap; gap:var(--space-12) var(--space-24); align-items:center; margin-top:var(--space-24); font-size:var(--type-label); color:var(--color-muted); }
.copy-link { width:44px; height:44px; border:1px solid var(--color-border); border-radius:50%; background:var(--color-paper); cursor:pointer; }
.article-layout { display:grid; gap:var(--space-32); max-width:1240px; margin:auto; }
.article-aside { min-width:0; }
.article-aside details { border-block:1px solid var(--color-border); padding:var(--space-20) 0; }
.article-aside summary { cursor:pointer; font-size:var(--type-control); }
.article-aside nav { display:grid; gap:var(--space-16); margin-top:var(--space-20); }
.article-aside a { font-size:var(--type-control); color:var(--color-muted); line-height:1.35; border-left:3px solid transparent; padding-left:var(--space-12); }
.article-aside a:hover { color:var(--color-ink); text-decoration:underline; text-underline-offset:4px; }
.article-aside a[aria-current] { color:var(--color-ink); border-left-color:var(--color-accent); }
.reading { min-width:0; max-width:700px; width:100%; margin:auto; font-size:var(--type-reading); line-height:1.6; overflow-wrap:break-word; }
.article-cover { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius-panel); }
.reading-summary { margin:var(--space-32) 0 var(--space-48); padding-left:var(--space-24); border-left:3px solid var(--color-accent); }
.reading-summary .eyebrow { margin-bottom:var(--space-8); }
.reading section { margin-top:var(--space-64); scroll-margin-top:calc(var(--topbar-h) + var(--space-24)); }
.reading h2 { font-size:var(--type-case-heading); line-height:1.18; margin-bottom:var(--space-24); text-wrap:pretty; }
.reading h3 { font-size:var(--type-result); line-height:1.3; margin-bottom:var(--space-16); }
.reading { color:var(--color-reading); }
.reading :is(h2,h3,h4) { color:var(--color-ink); font-weight:500; }
.reading p+p,.reading ul+p { margin-top:var(--space-24); }
.reading ul,.reading ol { padding-left:var(--space-24); margin-block:var(--space-24); }
.reading ol { list-style:decimal outside; }
.reading ol > li { display:list-item; }
.reading li::marker { color:inherit; font:inherit; }
.reading li+li { margin-top:var(--space-12); }
.reading :is(strong,b) { font-weight:500; }
.reading blockquote { margin:var(--space-32) 0; padding-left:var(--space-24); border-left:3px solid var(--color-accent); }
.reading :is(p,div):empty { display:none; }
.reading p a { text-decoration:underline; text-decoration-color:var(--color-muted); text-underline-offset:4px; }
.reading p a:hover { text-decoration-thickness:2px; }
.reading-example { margin:var(--space-32) 0; padding:var(--space-24); background:var(--color-surface); }
.reading .article-download,.reading .article-next-step { border-top:1px solid var(--color-border); padding-top:var(--space-32); }
.small-note { font-size:var(--type-label); color:var(--color-muted); margin-top:var(--space-16)!important; }
.article-next-step>a { display:inline-block; margin-top:var(--space-24); padding-bottom:var(--space-8); border-bottom:1px solid var(--color-ink); font-size:var(--type-control); }
.related { margin:var(--section-gap) 0 0; }
.related>h2 { font-size:var(--type-section); line-height:1.05; margin-bottom:var(--space-48); }
@media(min-width:600px) {
  .journal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .journal-back { display:flex; gap:var(--space-12); align-items:center; font-size:var(--type-control); }
}
@media(min-width:1100px) {
  .journal-header { flex-wrap:nowrap; }
  .journal-header nav { order:0; width:auto; gap:var(--space-40); }
  .journal-intro { padding:var(--space-80) 0; }
  .journal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .materials { grid-template-columns:1fr 2fr; gap:var(--space-64); }
  .article-layout { grid-template-columns:240px minmax(0,700px); gap:var(--space-64); justify-content:center; }
  .article-aside>details { position:sticky; top:calc(var(--topbar-h) + var(--space-32)); max-height:calc(100dvh - var(--topbar-h) - 64px); overflow:auto; }
  .article-heading { margin-block:var(--space-64); }
  .related .journal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) { .journal * { transition:none!important; scroll-behavior:auto!important; } }
@media print { .journal { padding-top:0; } .topbar,.nav-backdrop,.journal-footer,.article-aside,.related,.copy-link,.article-next-step { display:none; } .article-layout { display:block; } .reading { max-width:none; } .reading section { break-inside:avoid; } .article-cover { max-height:220px; object-fit:contain; } }

/* Inner pages follow the home page rhythm: one section gap before the footer. */
.journal .site-footer { margin-top:var(--section-gap); }
.case-archive .journal-tools { margin-bottom:var(--space-48); }
.case-archive [data-case-hidden] { display:none!important; }
.case-archive .case-card-grid:not(:has(.case-tile:not([data-case-hidden]))) { display:none; }