/* Journal pages. Loaded after /site.css, so tokens, fonts, nav and footer are shared with the home page. */

body.journal{background:var(--ink);color:var(--on-ink)}
body.journal-article{background:var(--bone);color:var(--on-bone)}
.journal .nav{top:14px}

/* ---------- Index ---------- */
.journal-shell{padding:clamp(130px,16vw,230px) var(--pad) clamp(80px,10vw,150px)}
.journal-kicker{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ember)}
.journal-article .journal-kicker{color:var(--oxblood)}
.journal-hero h1{font-size:clamp(3rem,9.4vw,11rem);font-weight:300;line-height:.92;letter-spacing:-.055em;max-width:10.5em;margin:22px 0 clamp(24px,3vw,44px);text-wrap:balance}
.journal-hero p{max-width:34ch;font-size:var(--fs-m);line-height:1.3;letter-spacing:-.02em;color:var(--on-ink-2)}
.journal-grid{margin-top:clamp(56px,9vw,130px);border-top:1px solid var(--line-ink)}
.journal-card{position:relative;display:grid;grid-template-columns:clamp(150px,19vw,300px) minmax(0,1fr) auto;align-items:center;column-gap:clamp(20px,3vw,48px);padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--line-ink);transition:padding .6s var(--ease)}
.journal-thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:saturate(.85) brightness(.92);transition:filter .6s ease}
.journal-card small{display:block;margin-bottom:12px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-3)}
.journal-card h2{font-size:clamp(1.5rem,2.9vw,3.1rem);font-weight:400;line-height:1.08;letter-spacing:-.038em;max-width:22em;text-wrap:balance}
.journal-card p{margin-top:14px;max-width:52ch;font-size:1rem;line-height:1.55;color:var(--on-ink-2)}
.journal-card .j-arrow{font-size:1.5rem;transition:transform .5s var(--ease)}
@media(hover:hover){
  .journal-card:hover .journal-thumb{filter:none}
  .journal-card:hover .j-arrow{transform:translate(4px,-4px)}
  .journal-card:hover h2{color:var(--ember)}
}

/* ---------- Article ---------- */
.article{padding:clamp(130px,15vw,210px) var(--pad) clamp(70px,9vw,130px)}
.article-header{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.article-header>*{grid-column:1/-1}
.article-header h1{font-size:clamp(2.6rem,7.2vw,8.4rem);font-weight:300;line-height:.96;letter-spacing:-.052em;max-width:13em;margin:22px 0 clamp(24px,3vw,44px);text-wrap:balance}
.article-deck{max-width:34em;font-size:clamp(1.2rem,1.8vw,1.75rem);line-height:1.35;letter-spacing:-.018em;color:var(--on-bone-2)}
.article-meta{display:flex;align-items:center;gap:14px;margin:clamp(26px,3vw,40px) 0 0;padding-top:16px;border-top:1px solid var(--line-bone);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--on-bone-2)}
.lang-switch{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--line-bone);border-radius:999px;color:var(--on-bone);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;transition:background-color .3s ease,color .3s ease}
@media(hover:hover){.lang-switch:hover{background:var(--ink);color:var(--bone)}}
.article img.article-hero{width:100%;aspect-ratio:16/9;object-fit:cover;margin:clamp(34px,5vw,72px) 0 clamp(48px,7vw,110px)}
.article-body,.sources,.article-back{margin-left:auto;margin-right:auto;width:min(100%,46rem)}
.article-body{font-size:clamp(1.125rem,.5vw + 1rem,1.3rem);line-height:1.72;letter-spacing:-.005em}
.article-body p{margin:0 0 1.35em}
.article-body h2{font-size:clamp(1.9rem,3.2vw,3rem);font-weight:400;line-height:1.08;letter-spacing:-.04em;margin:2.1em 0 .7em}
.article-body h3{font-size:clamp(1.35rem,2vw,1.8rem);font-weight:500;letter-spacing:-.025em;margin:1.8em 0 .5em}
.article-body a,.sources a{color:var(--oxblood);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
@media(hover:hover){.article-body a:hover,.sources a:hover{color:var(--ink);text-decoration-thickness:2px}}
.article-body blockquote{margin:2em 0;padding-left:1.4em;border-left:2px solid var(--oxblood);font-size:1.12em;color:var(--on-bone-2)}
.article-body ul{padding-left:1.2em;margin:0 0 1.35em}
.article-body li{margin-bottom:.5em}
.sources{margin-top:clamp(56px,7vw,100px);padding-top:26px;border-top:1px solid var(--line-bone)}
.sources h2{font-family:var(--mono);font-size:var(--fs-label);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--on-bone-2);margin:0 0 16px}
.sources ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:1rem}
.article-back{display:flex;margin-top:clamp(48px,6vw,90px);width:fit-content;margin-left:max(calc((100% - 46rem)/2),0px)}

@media(max-width:1000px){
  .journal-card{grid-template-columns:1fr auto}
  .journal-thumb{grid-column:1/-1;margin-bottom:20px}
  .article-body,.sources{width:100%}
  .article-back{margin-left:0}
}