.journal-landing { padding: 100px 0 90px; }
.journal-landing .eyebrow { margin-bottom: 22px; }
.journal-landing h1 { max-width: 820px; margin: 0; font-size: clamp(58px, 7vw, 94px); font-weight: 520; letter-spacing: -.07em; line-height: 1.05; }
.journal-landing h1 em, .article-hero h1 em { color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.journal-landing > p:last-child { max-width: 670px; margin: 26px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.journal-divider { display: flex; justify-content: space-between; gap: 20px; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .9px; }
.journal-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 80px 0 35px; }
.journal-intro h2 { margin: 0; font-size: clamp(37px, 4vw, 54px); font-weight: 520; letter-spacing: -.055em; }
.journal-intro p { max-width: 430px; margin: 0 0 0 auto; color: var(--muted); font-size: 15px; line-height: 1.7; }
.journal-list { display: grid; gap: 16px; }
.journal-entry { display: grid; grid-template-columns: minmax(200px, .65fr) minmax(0, 1fr); gap: 35px; min-height: 245px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #202820; transition: border-color .2s, transform .2s; }
.journal-entry:hover { border-color: #859d78; transform: translateY(-3px); }
.journal-entry-art { display: flex; align-items: center; justify-content: center; min-height: 199px; border-radius: 8px; font: italic 45px Georgia, serif; }
.journal-entry-art.week { background: #384a37; color: #dcebc6; }
.journal-entry-art.handoff { background: #493b33; color: #f0c7aa; }
.journal-entry-art.context { background: #374640; color: #d1dfc5; }
.journal-entry-art span { max-width: 250px; text-align: center; line-height: 1.05; }
.journal-entry-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 9px 10px 5px 0; }
.journal-entry-copy > span { color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.journal-entry-copy h3 { margin: 17px 0 12px; font-size: clamp(28px, 3vw, 42px); font-weight: 520; letter-spacing: -.055em; line-height: 1.15; }
.journal-entry-copy p { max-width: 630px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.journal-entry-copy strong { margin-top: auto; padding-top: 18px; color: #dbeccc; font-size: 12px; font-weight: 550; }
.journal-entry-copy strong b { margin-left: 10px; font-size: 16px; font-weight: 400; }
.journal-end { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 72px 0 90px; padding: 40px; border-radius: 12px; background: #2b382b; }
.journal-end h2 { margin: 0 0 9px; font-size: 29px; font-weight: 520; letter-spacing: -.7px; }
.journal-end p { max-width: 540px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.journal-end a { flex: none; padding-bottom: 5px; border-bottom: 1px solid var(--leaf); color: #e3eed9; font-size: 12px; }

.article-hero { max-width: 950px; margin: 0 auto; padding: 85px 0 62px; }
.article-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 47px; color: #b7c9ab; font-size: 12px; }
.article-breadcrumb a { border-bottom: 1px solid #6d8a63; }
.article-breadcrumb a:hover { color: #fff; }
.article-hero .eyebrow { margin-bottom: 21px; }
.article-hero h1 { max-width: 850px; margin: 0; font-size: clamp(55px, 6.7vw, 88px); font-weight: 520; letter-spacing: -.072em; line-height: 1.06; }
.article-dek { max-width: 760px; margin: 24px 0 26px; color: #cbd8c7; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.55; }
.article-meta { display: flex; align-items: center; gap: 14px; padding-top: 17px; border-top: 1px solid var(--line); color: #a7b99e; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .6px; }
.article-banner { display: grid; place-items: center; height: 290px; margin: 0 -22px 70px; border-radius: 13px; overflow: hidden; }
.article-banner.week { background: #384b36; }
.article-banner.handoff { background: #554037; }
.article-banner.context { background: #38463d; }
.banner-week { display: flex; align-items: end; gap: 17px; height: 160px; }
.banner-week i { width: 64px; height: 100%; border-radius: 7px; background: #86a67a; transform: rotate(-8deg); }
.banner-week i:nth-child(2) { height: 120px; background: #e9b591; transform: rotate(4deg); }
.banner-week i:nth-child(3) { height: 145px; background: #d8e3b8; transform: rotate(-3deg); }
.banner-week i:nth-child(4) { height: 100px; background: #6c8961; transform: rotate(8deg); }
.banner-handoff { display: flex; align-items: center; gap: 25px; color: #f7dcc8; }
.banner-handoff i { display: grid; place-items: center; width: 140px; height: 140px; border: 1px solid #e2b596; border-radius: 10px; font: italic 33px Georgia, serif; }
.banner-handoff i:last-child { background: #e3ae89; color: #42342f; }
.banner-handoff b { font-size: 50px; font-weight: 300; }
.banner-context { display: flex; flex-direction: column; gap: 15px; width: min(440px, 80%); }
.banner-context i { height: 24px; border-radius: 6px; background: #729272; }
.banner-context i:nth-child(2) { width: 80%; align-self: end; background: #e6b290; }
.banner-context i:nth-child(3) { width: 88%; background: #cadcaf; }
.article-layout { display: grid; grid-template-columns: 205px minmax(0, 740px); justify-content: center; gap: 58px; padding-bottom: 65px; }
.article-toc { align-self: start; position: sticky; top: 24px; display: grid; gap: 13px; padding: 20px 0 0; border-top: 1px solid var(--line); }
.article-toc strong { margin-bottom: 4px; color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .9px; }
.article-toc a { color: #aebfa9; font-size: 12px; line-height: 1.4; }
.article-toc a:hover { color: var(--text); }
.article-body { min-width: 0; color: #d8e2d3; font-size: 16px; line-height: 1.86; }
.article-body > p:first-child { margin-top: 0; }
.article-body h2 { margin: 61px 0 16px; color: var(--text); font-size: clamp(27px, 3.2vw, 36px); font-weight: 530; letter-spacing: -.04em; line-height: 1.2; }
.article-body h3 { margin: 31px 0 12px; color: var(--text); font-size: 21px; font-weight: 540; letter-spacing: -.02em; }
.article-body p { margin: 0 0 19px; }
.article-body ul, .article-body ol { display: grid; gap: 11px; margin: 17px 0 25px; padding-left: 24px; }
.article-body li { padding-left: 5px; }
.article-body li::marker { color: var(--leaf); }
.article-body strong { color: var(--text); font-weight: 650; }
.article-body a { border-bottom: 1px solid #90ae82; color: #d8efc8; }
.article-body a:hover { color: #fff; }
.article-callout { margin: 32px 0; padding: 25px 29px; border-left: 3px solid var(--accent); border-radius: 0 9px 9px 0; background: #273328; }
.article-callout > span { color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.article-callout p { margin: 11px 0 0; color: #e2eadc; font-size: 15px; }
.article-example { margin: 30px 0; padding: 28px 30px; border: 1px solid #596e52; border-radius: 9px; background: #253025; }
.article-example > span { color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.article-example h3 { margin: 12px 0; }
.article-example p:last-child, .article-example ul:last-child { margin-bottom: 0; }
.article-body blockquote { margin: 35px 0; padding: 0 0 0 28px; border-left: 1px solid var(--leaf); color: #ebd1ba; font: italic 26px/1.35 Georgia, serif; }
.article-more { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 0 0 90px; padding-top: 30px; border-top: 1px solid var(--line); }
.article-more a { display: flex; flex-direction: column; min-height: 175px; padding: 25px; border: 1px solid var(--line); border-radius: 10px; background: #202820; }
.article-more a:hover { border-color: #839d77; }
.article-more span { color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .7px; }
.article-more strong { margin-top: 20px; font-size: 21px; font-weight: 520; }
.article-more small { margin-top: auto; padding-top: 10px; color: #b8c8b0; font-size: 11px; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 15px; max-width: 740px; margin: 0 auto; }
  .article-toc { position: static; grid-template-columns: repeat(2, 1fr); margin-bottom: 26px; }
  .article-toc strong { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .journal-landing { padding: 69px 0 58px; }
  .journal-landing h1 { font-size: clamp(52px, 10vw, 74px); }
  .journal-landing > p:last-child { font-size: 16px; }
  .journal-intro { grid-template-columns: 1fr; gap: 14px; padding: 58px 0 25px; }
  .journal-intro p { margin: 0; }
  .journal-entry { grid-template-columns: 1fr; gap: 17px; padding: 17px; }
  .journal-entry-art { min-height: 170px; }
  .journal-entry-copy { padding: 2px 2px 8px; }
  .journal-entry-copy h3 { margin-top: 12px; }
  .journal-entry-copy strong { padding-top: 18px; }
  .journal-end { flex-direction: column; align-items: flex-start; margin: 55px 0 70px; padding: 29px; }
  .article-hero { padding: 56px 0 42px; }
  .article-breadcrumb { margin-bottom: 34px; }
  .article-hero h1 { font-size: clamp(48px, 10vw, 70px); }
  .article-banner { height: 210px; margin: 0 -8px 48px; }
  .banner-week { height: 120px; }
  .banner-week i { width: 46px; }
  .banner-handoff { gap: 12px; }
  .banner-handoff i { width: 95px; height: 95px; font-size: 24px; }
  .article-body { font-size: 15px; line-height: 1.8; }
  .article-more { grid-template-columns: 1fr; margin-bottom: 72px; }
}
@media (max-width: 480px) {
  .article-toc { grid-template-columns: 1fr; }
  .article-hero h1 { font-size: 47px; }
  .article-dek { font-size: 17px; }
  .article-callout, .article-example { padding: 21px; }
}