/* The Work page's typography, spacing, borders and muted palette. */
.journal { --journal-accent: #00c49a; width: min(1440px, calc(100% - 80px)); margin: 0 auto; padding: 100px 0 96px; color: #f2f2f2; font-family: 'Satoshi', sans-serif; }
.journal *, .journal *::before { box-sizing: border-box; }
.journal a { color: inherit; }
.journal .journal-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; }
.journal .journal-eyebrow { margin: 0 0 20px; color: #a3aaa7; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.journal h1 { margin: 0; color: #f2f2f2; font-family: 'ClashDisplay', sans-serif; font-size: clamp(64px, 9vw, 128px); font-weight: 500; line-height: .95; letter-spacing: -.045em; }
.journal .journal-intro-copy { max-width: 330px; margin: 0 0 3px; color: #a3aaa7; font-size: 17px; line-height: 1.65; }
.journal .journal-divider { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; margin-bottom: 20px; border-top: 1px solid #ffffff24; color: #929b96; font-size: 13px; }
.journal .journal-label { padding: 10px 17px; border-radius: 999px; background: #e9eeeb; color: #111714; font-size: 14px; }
.journal .journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; list-style: none; margin: 0; padding: 0; }
.journal .journal-card { display: flex; min-width: 0; margin: 0; padding: 0; }
.journal .journal-card > a { display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 1px solid #ffffff20; border-radius: 12px; background: #14171566; color: inherit; text-decoration: none; transition: border-color .2s; }
.journal .journal-card > a:hover { border-color: #ffffff50; }
.journal .journal-cover { aspect-ratio: 4 / 3; overflow: hidden; background: #141715; border-bottom: 1px solid #ffffff14; }
.journal .journal-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.journal .journal-card a:hover img { transform: scale(1.035); }
.journal .journal-card-copy { display: flex; flex-direction: column; flex: 1; padding: 26px; }
.journal .journal-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; color: #929b96; font-size: 12px; line-height: 1.6; }
.journal h2 { margin: 18px 0 14px; font-family: 'ClashDisplay', sans-serif; color: #f2f2f2; font-size: 28px; font-weight: 500; line-height: 1.16; letter-spacing: -.025em; }
.journal .journal-excerpt { margin: 0 0 28px; color: #a3aaa7; font-size: 15px; line-height: 1.7; }
.journal .journal-read { display: flex; justify-content: space-between; align-items: center; margin-top: auto; color: #b6bab8; font-size: 13px; }
.journal .journal-arrow { display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; border: 1px solid #ffffff25; border-radius: 50%; color: #b8c0bb; }
.journal .journal-arrow svg { width: 16px; height: 16px; }
.journal .journal-card a:hover .journal-arrow { color: var(--journal-accent); border-color: var(--journal-accent); }
.journal .journal-card--text .journal-card-copy { min-height: 360px; }
.journal .journal-card--text h2 { font-size: 34px; }
.journal .journal-card--text .journal-meta { padding-bottom: 20px; border-bottom: 1px solid #ffffff20; }
.journal .journal-back { display: inline-block; margin-bottom: 40px; color: #a3aaa7; font-size: 14px; text-decoration: none; }
.journal .journal-back:hover { color: #fff; }
.journal .article-header { max-width: 1000px; margin: 0 auto 40px; }
.journal .article-header h1 { font-size: clamp(40px, 5.5vw, 76px); line-height: 1.04; letter-spacing: -.035em; overflow-wrap: anywhere; }
.journal .article-header .journal-meta { margin-top: 28px; font-size: 13px; }
.journal .article-cover { max-width: 1000px; margin: 0 auto 56px; overflow: hidden; border: 1px solid #ffffff20; border-radius: 12px; background: #141715; }
.journal .article-cover img { display: block; width: 100%; max-height: 620px; object-fit: contain; }
.journal .article-body { max-width: 760px; margin: 0 auto; color: #c2c8c4; font-size: 19px; line-height: 1.85; overflow-wrap: anywhere; }
.journal .article-body p { margin: 0 0 1.5em; }
.journal .article-body strong { color: #f2f2f2; }
.journal .article-body blockquote { margin: 32px 0; padding: 8px 0 8px 26px; border: 0; border-left: 2px solid var(--journal-accent); color: #f2f2f2; font-size: 23px; line-height: 1.6; }
.journal .article-body blockquote p:last-child { margin-bottom: 0; }
.journal .article-body a { color: var(--journal-accent); text-underline-offset: 4px; }
.journal .article-footer { max-width: 760px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid #ffffff24; }
.journal .blog-comments { max-width: 760px; margin: 64px auto 0; padding-top: 40px; border-top: 1px solid #ffffff24; }
.journal .blog-comments h2 { margin: 0 0 24px; font-size: 32px; }
.journal .blog-comment-list { display: grid; gap: 16px; list-style: none; margin: 0 0 32px; padding: 0; }
.journal .blog-comment { margin: 0; padding: 24px; border: 1px solid #ffffff20; border-radius: 12px; background: #14171566; }
.journal .blog-comment header { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.journal .blog-comment-author { color: #f2f2f2; font-size: 15px; font-weight: 500; }
.journal .blog-comment time, .journal .blog-reply-context { color: #929b96; font-size: 12px; }
.journal .blog-comment-body { margin: 16px 0; color: #c2c8c4; line-height: 1.8; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.journal .blog-reply-context { margin: 12px 0 0; }
.journal .blog-comment-form { margin: 32px 0 0; padding: 28px; border: 1px solid #ffffff20; border-radius: 12px; background: #14171566; }
.journal .blog-comment-form h3 { margin: 0 0 12px; font-family: 'ClashDisplay', sans-serif; font-size: 23px; font-weight: 500; color: #f2f2f2; }
.journal .blog-form-note, .journal .blog-comment-status { color: #a3aaa7; font-size: 14px; line-height: 1.6; margin: 12px 0 20px; }
.journal .blog-comment-status[data-error='true'] { color: #f2aaa4; }
.journal .blog-comment-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.journal .blog-comment-form label { display: block; margin: 20px 0 8px; font-size: 14px; color: #c2c8c4; }
.journal .blog-comment-form input, .journal .blog-comment-form textarea { display: block; width: 100%; max-width: 100%; padding: 12px 14px; border: 1px solid #ffffff25; border-radius: 8px; background: #090c0a; color: #f2f2f2; font: inherit; font-size: 16px; line-height: 1.6; box-shadow: none; }
.journal .blog-comment-form textarea { min-height: 140px; resize: vertical; }
.journal .blog-comment-form button, .journal .blog-load-more { cursor: pointer; padding: 11px 20px; margin-top: 20px; border: 1px solid #e9eeeb; border-radius: 999px; background: #e9eeeb; color: #111714; font: inherit; font-size: 14px; }
.journal .blog-reply, .journal .blog-cancel-reply { cursor: pointer; padding: 0; margin: 0; border: 0; background: none; color: #a3aaa7; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.journal button:disabled { opacity: .45; cursor: not-allowed; }
.journal .blog-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.journal [hidden] { display: none !important; }
.journal a:focus-visible, .journal button:focus-visible, .journal input:focus-visible, .journal textarea:focus-visible { outline: 2px solid var(--journal-accent); outline-offset: 4px; }
@media (max-width: 1199px) { .journal .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .journal { width: calc(100% - 48px); padding: 64px 0; }
  .journal .journal-intro { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
  .journal .journal-intro-copy { max-width: 440px; }
  .journal .journal-card-copy { padding: 22px; }
}
@media (max-width: 560px) {
  .journal { width: calc(100% - 32px); padding: 48px 0; }
  .journal .journal-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .journal .journal-eyebrow { font-size: 11px; }
  .journal .journal-card--text .journal-card-copy { min-height: auto; }
  .journal .journal-card--text h2 { font-size: 28px; }
  .journal .article-body { font-size: 17px; }
  .journal .article-body blockquote { font-size: 20px; padding-left: 20px; }
  .journal .article-cover { margin-bottom: 32px; }
  .journal .blog-comment, .journal .blog-comment-form { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .journal .journal-cover img, .journal .journal-card > a { transition: none; } .journal .journal-card a:hover img { transform: none; } }

/* One typographic cover system, with a deterministic hue per article slug. */
.journal .type-cover{display:flex;flex-direction:column;justify-content:space-between;gap:24px;aspect-ratio:4/3;padding:28px;background:hsl(var(--cover-hue) 62% 76%);color:#14201b;border:0;border-radius:12px;overflow:hidden;text-align:left}
.journal .type-cover-brand,.journal .type-cover-bottom{font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:#14201b}
.journal .type-cover-title{display:block;font-family:'ClashDisplay',sans-serif;font-weight:500;font-size:clamp(23px,2.4vw,36px);line-height:1.08;letter-spacing:-.035em;overflow-wrap:anywhere;color:#14201b}
.journal .type-cover-bottom{display:flex;justify-content:space-between;border-top:1px solid #14201b40;padding-top:14px;letter-spacing:.04em}
.journal .article-cover.type-cover{aspect-ratio:16/9;padding:clamp(24px,5vw,64px);margin:40px 0}
.journal .article-cover .type-cover-title{font-size:clamp(30px,5vw,68px);max-width:1000px}
@media(max-width:600px){.journal .type-cover{padding:24px;aspect-ratio:auto;min-height:300px}.journal .type-cover-title{font-size:30px}.journal .article-cover.type-cover{aspect-ratio:auto;min-height:320px}.journal .article-cover .type-cover-title{font-size:36px}}

/* Shared cover headings, category controls and the single-column reading layout. */
.journal h2.type-cover-title{margin:0;color:#14201b}
.journal .journal-card-copy .journal-meta{margin-bottom:18px}
.journal .journal-filters{display:flex;flex-wrap:wrap;gap:8px}
.journal .journal-filters button,.journal .journal-back{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid #ffffff24;border-radius:999px;background:transparent;color:#b6bab8;font:500 14px/1.5 'Satoshi',sans-serif;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.journal .journal-filters button[aria-pressed="true"]{background:#e9eeeb;border-color:#e9eeeb;color:#111714}
.journal .journal-filters button:hover,.journal .journal-back:hover{border-color:#00c49a;color:#00c49a}
.journal .journal-back{margin:0}
.journal .article-navigation{margin-bottom:24px}
.journal.journal-article{max-width:800px}
.journal .article-header.article-cover{width:100%;max-width:none;margin:0 auto 48px;padding:clamp(24px,4vw,48px);aspect-ratio:auto;min-height:440px;gap:48px}
.journal .article-cover-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.journal .type-cover-category{border:1px solid #14201b50;border-radius:999px;padding:6px 12px;font-size:12px;line-height:1.4}
.journal .article-header h1.type-cover-title{font-size:clamp(34px,5vw,60px);line-height:1.06;letter-spacing:-.035em;margin:0;color:#14201b}
.journal .article-header .journal-meta{margin:0;padding-top:20px;border-top:1px solid #14201b40;color:#14201b;font-size:13px;gap:10px 20px;width:100%}
.journal .article-header .journal-meta a{margin-left:auto;text-decoration:underline;text-underline-offset:4px}
.journal .article-body,.journal .article-footer,.journal .blog-comments{width:100%;max-width:none}
@media(max-width:600px){.journal .journal-divider{align-items:flex-start;gap:16px;flex-direction:column}.journal .article-header.article-cover{min-height:360px;gap:36px;margin-bottom:32px}.journal .article-header .journal-meta a{margin-left:0}.journal .journal-filters button{padding:9px 14px}}
@media(prefers-reduced-motion:reduce){.journal .journal-filters button,.journal .journal-back{transition:none}}
