.blog-atlas {
  --atlas-ink: #12231e;
  --atlas-paper: #f3f5f0;
  --atlas-blue: #147a50;
  --atlas-lime: #dff3aa;
  background: var(--atlas-paper);
  color: var(--atlas-ink);
  font-family: "Instrument Sans", system-ui, sans-serif;
}

.blog-atlas .shell-nav { background: rgba(244, 241, 234, .86); border-color: rgba(16, 21, 28, .16); }
.blog-atlas .shell-nav-name { font-family: "Instrument Sans", system-ui, sans-serif; font-size: .88rem; font-weight: 700; letter-spacing: -.02em; }
.blog-atlas .shell-nav-links a { font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.blog-atlas .shell-nav-links a::after { background: var(--atlas-blue); }

.blog-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 6rem; }
.journal-hero { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(280px, .94fr); min-height: min(740px, calc(100vh - 58px)); border-bottom: 1px solid rgba(16, 21, 28, .22); }
.journal-hero__copy { display: flex; flex-direction: column; justify-content: center; padding: 4rem clamp(1.5rem, 5vw, 5rem) 4rem 0; }
.journal-kicker, .journal-hero__portrait figcaption { font: 500 .67rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.journal-kicker { color: var(--atlas-blue); }
.journal-hero h1 { margin: 1.25rem 0 0; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: clamp(3.25rem, 7vw, 6.6rem); font-variation-settings: "wdth" 88; font-weight: 560; letter-spacing: -.065em; line-height: .84; text-wrap: balance; }
.journal-hero h1 em { color: var(--atlas-blue); font: inherit; font-style: normal; letter-spacing: -.05em; }
.journal-hero p { max-width: 34rem; margin: 2rem 0 0; color: #4d535e; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; }
.journal-scroll { width: max-content; margin-top: 2.5rem; color: var(--atlas-ink); border-bottom: 1px solid currentColor; font: 500 .78rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; padding-bottom: .35rem; }
.journal-scroll span { color: var(--atlas-blue); padding-left: .45rem; }
.journal-formats { display: flex; gap: .75rem; margin-top: 1.5rem; font: 500 .62rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.journal-formats span { color: #68786f; }
.journal-formats a { color: var(--atlas-blue); text-underline-offset: .2rem; }
.journal-hero__portrait { position: relative; margin: 0; overflow: hidden; background: var(--atlas-blue); }
.journal-hero__portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(200,255,49,.25), transparent 34%, rgba(16,21,28,.22)); mix-blend-mode: screen; pointer-events: none; }
.journal-hero__portrait img { width: 100%; height: 100%; min-height: 540px; object-fit: cover; object-position: 70% center; filter: saturate(.9) contrast(1.05); transform: scale(1.012); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.journal-hero__portrait:hover img { transform: scale(1.055); }
.journal-hero__portrait figcaption { position: absolute; z-index: 1; right: 1rem; bottom: 1rem; color: #fff; writing-mode: vertical-rl; text-shadow: 0 1px 8px rgba(0,0,0,.45); }

.blog-atlas .blog-list { max-width: 850px; margin: 0; padding-top: clamp(3rem, 8vw, 7rem); }
.blog-atlas .blog-entry { position: relative; padding: 2rem 0 2.25rem; border-color: rgba(16,21,28,.18); transition: padding .35s cubic-bezier(.22,1,.36,1), background .35s ease; }
.blog-atlas .blog-entry::before { content: ""; position: absolute; left: -1.2rem; top: 0; width: .22rem; height: 100%; background: var(--atlas-lime); transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.blog-atlas .blog-entry:hover { padding-left: 1.2rem; background: rgba(36,70,240,.035); }
.blog-atlas .blog-entry:hover::before { transform: scaleY(1); }
.blog-atlas .blog-entry-meta { color: var(--atlas-blue); font-family: "IBM Plex Mono", monospace; font-size: .67rem; letter-spacing: .06em; text-transform: uppercase; }
.blog-atlas .blog-entry-title { margin-top: .65rem; color: var(--atlas-ink); font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: clamp(1.55rem, 3vw, 2.55rem); font-weight: 560; letter-spacing: -.045em; line-height: 1.02; }
.blog-atlas .blog-entry-desc { color: #575d66; font-size: 1rem; line-height: 1.55; }
.blog-atlas .shell-footer { border-color: rgba(16,21,28,.18); }

@media (max-width: 700px) {
  .blog-wrap { padding-inline: 18px; }
  .journal-hero { grid-template-columns: 1fr; min-height: auto; }
  .journal-hero__copy { min-height: 500px; padding: 3.5rem 0; }
  .journal-hero__portrait { height: 480px; }
  .journal-hero__portrait img { min-height: 0; }
  .blog-atlas .blog-entry:hover { padding-left: .7rem; }
}

@media (prefers-reduced-motion: reduce) { .journal-hero__portrait img { transition: none; } }