/* A readable journal: natural document flow, never pinned scroll scenes. */
html:has(.life-journal) { scroll-behavior: auto; }
.life-journal { --journal-green: #48624a; --journal-muted: #62664f; background: #fff8e9; }
.life-journal .life-header { position: fixed; }
.life-journal .world-switch a[aria-current="location"] { background: #5b765c; color: #fffdf5; }
.life-journal main { overflow: clip; }
.journal-wrap { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.journal-hero { display: grid; grid-template-columns: 1fr .93fr; gap: 7%; align-items: center; padding-block: 146px 84px; min-height: min(850px, 100svh); }
.journal-eyebrow { font: 600 11px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--journal-muted); margin: 0 0 22px; }
.life-journal h1, .life-journal h2, .life-journal h3 { font-family: var(--serif); font-weight: 400; }
.life-journal h1 { font-size: clamp(78px, 8.7vw, 120px); line-height: .96; letter-spacing: -.045em; margin: 0 0 26px; }
.life-journal h2 { font-size: clamp(39px, 4.6vw, 62px); line-height: 1.05; letter-spacing: -.035em; margin: 0; }
.life-journal h3 { font-size: 30px; line-height: 1.14; letter-spacing: -.02em; margin-bottom: 16px; }
.life-journal h1 em, .life-journal h2 em { color: var(--journal-green); font-weight: 400; }
.journal-hero__copy > p:not(.journal-eyebrow) { max-width: 460px; line-height: 1.85; color: #5c624f; font-size: 15px; }
.journal-hero__copy > .journal-lede { font-size: 20px !important; line-height: 1.55 !important; color: #3e4434 !important; }
.journal-link { display: inline-flex; align-items: center; gap: 22px; padding-block: 13px; margin-top: 12px; border-bottom: 1px solid #71816b; font-size: 13px; font-weight: 600; }
.journal-link > span[aria-hidden] { font-size: 22px; transition: transform .25s; }
.journal-link:hover > span[aria-hidden] { transform: translate(3px,-2px); }
.journal-window { position: relative; isolation: isolate; overflow: hidden; min-height: 520px; border-radius: 48% 48% 8px 8px; background: linear-gradient(160deg,#e0ebd6,#f6e8be 65%,#f0cb94); border: 9px solid #fffdf6; box-shadow: 0 24px 65px #7c733119; }
.journal-window .life-fluid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; }
.journal-window .life-world { position: absolute; inset: 17% -18% 15%; width: 136%; height: 68%; opacity: 0; z-index: 1; pointer-events: none; }
.journal-window .life-world[data-webgl="ready"] { opacity: .92; }
.journal-window .life-world__canvas { width: 100%; height: 100%; }
.journal-window__note { position: absolute; z-index: 2; top: 22%; left: 0; right: 0; text-align: center; font: 500 30px/1.2 var(--hand); color: #5e7252; transform: rotate(-6deg); }
.journal-sun { position: absolute; width: 130px; height: 130px; top: 14%; left: 35%; border-radius: 50%; background: #fff4c3bb; box-shadow: 0 0 90px #fff9d2; animation: journal-breathe 8s ease-in-out infinite; }
.journal-places { position: absolute; z-index: 2; bottom: 28px; left: 18px; right: 18px; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid #7a855345; gap: 10px; text-align: center; }
.journal-places b { display: block; font: 600 24px var(--hand); }
.journal-places small { display: block; margin-top: 2px; font-size: 10px; color: #66704d; }
.journal-section { padding-block: 94px; border-top: 1px solid var(--line); }
.journal-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10%; align-items: end; margin-bottom: 44px; }
.journal-heading .journal-eyebrow { margin-bottom: 17px; }
.journal-prose { font-size: 15px; line-height: 1.85; color: #5c624f; }
.journal-prose p:last-child, p.journal-prose { margin-bottom: 0; }
.journal-people, .journal-trio { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; align-items: start; }
.journal-print { margin: 0; padding: 12px 12px 18px; background: #fffef9; border: 1px solid #d7d8c980; box-shadow: 0 8px 22px #5c5b3610; }
.journal-print a { display: block; overflow: hidden; }
.journal-print img { width: 100%; height: auto; transition: transform .65s var(--ease); }
.journal-print a:hover img { transform: scale(1.025); }
.journal-print figcaption { padding: 15px 6px 0; font: 500 27px/1.12 var(--hand); }
.journal-print figcaption small { display: block; color: #70725f; font: 400 11px/1.6 var(--sans); margin-top: 6px; }
.journal-people > .journal-print:nth-child(1) { transform: rotate(-2deg); margin-top: 18px; }
.journal-people > .journal-print:nth-child(2) { transform: rotate(1.4deg); }
.journal-people__aside { padding-top: 38px; }
.journal-people__aside .journal-print { transform: rotate(-1.2deg); }
.journal-handnote { font: 500 32px/1.1 var(--hand); text-align: center; color: #697e55; transform: rotate(-5deg); margin: 40px 0 0; }
.journal-band { padding-block: 94px; }
.journal-band--green { background: #e8efde; }
.journal-trio > :nth-child(2) { transform: rotate(-2deg); margin-top: 25px; }
.journal-trio > :nth-child(3) { transform: rotate(1deg); }
.journal-offclock { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.journal-repair, .journal-fitness { background: #f3ebd9; }
.journal-diptych { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.journal-diptych figure { margin: 0; }
.journal-diptych img { width: 100%; height: auto; }
.journal-diptych figcaption { font: 500 21px var(--hand); padding: 12px 16px 0; }
.journal-card-copy { padding: 30px; }
.journal-card-copy .journal-eyebrow { margin-bottom: 14px; }
.journal-card-copy > p:last-child { font-size: 14px; line-height: 1.85; color: #62644f; margin-bottom: 0; }
.journal-fitness { background: #ecefdf; }
.journal-fitness > a { display: block; width: 100%; background: #e0e6d1; }
.journal-fitness > a img { width: 100%; height: 380px; object-fit: contain; }
.journal-yulong { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: #ece9d9; }
.journal-yulong figure { margin: 0; height: 100%; }
.journal-yulong figure a { display: block; height: 100%; }
.journal-yulong img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.journal-yulong > div { padding: 46px; }
.journal-yulong h2 { font-size: clamp(39px,4vw,54px); margin-bottom: 22px; }
.journal-yulong p:not(.journal-eyebrow) { font-size: 14px; line-height: 1.85; }
.journal-yulong + .journal-section { border-top: 0; }
.journal-wall { columns: 2; column-gap: 30px; }
.journal-wall .journal-print { break-inside: avoid; margin-bottom: 30px; }
.journal-wall .journal-print:nth-child(2) img { max-height: 580px; object-fit: contain; background: #e7e5da; }
.journal-band--notes { background: #f0e4ca; }
.journal-now { display: grid; grid-template-columns: repeat(3,1fr); gap: 42px; margin-top: 42px; }
.journal-now article { border-top: 1px solid #92907870; padding-top: 24px; }
.journal-now article > span { font: 500 26px var(--hand); color: #6d774f; }
.journal-now h3 { font-size: 25px; margin-top: 17px; }
.journal-now p { font-size: 13px; line-height: 1.8; color: #61614d; }
.journal-signoff { margin: 50px 0 0; font-size: 13px; }
.journal-signoff span { display: block; margin-top: 18px; font: 500 36px var(--hand); color: #57724f; }
.life-journal .life-footer { padding: 28px 40px; }
.journal-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.journal-reveal-ready [data-journal-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s var(--ease); }
.journal-reveal-ready [data-journal-reveal].is-visible { opacity: 1; transform: none; }
.journal-lightbox { border: 0; background: #181d17; color: #fffdf5; width: min(1080px,calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 58px 24px 20px; overflow: auto; }
.journal-lightbox::backdrop { background: #172015de; backdrop-filter: blur(9px); }
.journal-lightbox figure { margin: 0; }
.journal-lightbox img { width: 100%; height: min(70dvh,800px); object-fit: contain; }
.journal-lightbox figcaption { text-align: center; padding: 15px 12px 0; font-size: 13px; line-height: 1.5; }
.journal-lightbox button { font: 500 12px var(--sans); color: inherit; border: 1px solid #ffffff40; background: transparent; padding: 10px 14px; cursor: pointer; border-radius: 3px; min-height: 42px; }
.journal-lightbox button:hover { background: #ffffff15; }
.journal-lightbox__close { position: absolute; right: 24px; top: 10px; }
.journal-lightbox__controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 15px; }
.journal-lightbox__controls span { font-size: 11px; font-variant-numeric: tabular-nums; }
.journal-album-hero { padding-block: 145px 62px; max-width: 830px; text-align: center; }
.life-journal .journal-album-hero h1 { font-size: clamp(46px,7vw,90px); margin: 20px 0; }
.journal-album-hero .journal-lede { font-size: 17px; line-height: 1.85; max-width: 560px; margin: 0 auto; }
.journal-album-hero .journal-link { margin-top: 0; margin-bottom: 28px; }
.journal-album-grid { columns: 3; column-gap: 28px; padding-bottom: 75px; }
.journal-album-grid .journal-print { break-inside: avoid; margin-bottom: 28px; }
.journal-album-end { text-align: center; padding-bottom: 80px; }
@keyframes journal-breathe { 0%,100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.07); opacity: 1; } }
@media (max-width: 980px) {
  .journal-wrap { width: calc(100% - 48px); }
  .journal-hero { gap: 30px; padding-top: 145px; min-height: auto; }
  .journal-window { min-height: 450px; }
  .journal-places { gap: 3px; left: 10px; right: 10px; }
  .journal-places b { font-size: 21px; }
  .journal-people, .journal-trio { gap: 18px; }
  .journal-offclock { gap: 20px; grid-template-columns: 1.4fr 1fr; }
  .journal-card-copy { padding: 24px; }
  .journal-yulong > div { padding: 32px; }
}
@media (max-width: 780px) {
  html:has(.life-journal) { --header: 112px; --topbar: 112px; }
  .life-journal { --header: 112px; --topbar: 112px; }
  .journal-wrap { width: calc(100% - 40px); }
  .journal-hero { grid-template-columns: 1fr; gap: 38px; padding-block: 155px 56px; }
  .life-journal h1 { font-size: clamp(76px,16vw,108px); }
  .journal-hero__copy > p:not(.journal-eyebrow) { max-width: 540px; }
  .journal-window { min-height: 420px; width: min(480px,100%); margin-inline: auto; }
  .journal-window .life-fluid, .journal-window .life-world { display: block; }
  .journal-window__note { font-size: 29px; }
  .journal-section, .journal-band { padding-block: 60px; }
  .journal-heading { grid-template-columns: 1fr; gap: 25px; margin-bottom: 30px; }
  .journal-people { grid-template-columns: 1fr 1fr; gap: 18px; }
  .journal-people__aside { grid-column: 1 / -1; padding: 12px 0 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; }
  .journal-handnote { font-size: 27px; margin: 0; }
  .journal-print { padding: 8px 8px 14px; }
  .journal-print figcaption { font-size: 23px; padding-inline: 3px; }
  .journal-trio { gap: 12px; }
  .journal-trio .journal-print figcaption { font-size: 21px; }
  .journal-trio .journal-print figcaption small { font-size: 10px; }
  .journal-offclock { grid-template-columns: 1fr; gap: 25px; }
  .journal-fitness { display: grid; grid-template-columns: .8fr 1fr; align-items: center; }
  .journal-fitness > a img { height: auto; }
  .journal-yulong { grid-template-columns: 1fr; }
  .journal-yulong img { height: auto; min-height: 0; }
  .journal-yulong > div { padding: 32px; }
  .journal-wall { column-gap: 18px; }
  .journal-wall .journal-print { margin-bottom: 18px; }
  .journal-now { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
  .journal-now h3 { margin-block: 10px; }
  .journal-now p { margin-bottom: 0; }
  .journal-album-grid { columns: 2; column-gap: 18px; }
  .journal-album-grid .journal-print { margin-bottom: 18px; }
}
@media (max-width: 460px) {
  .journal-trio { grid-template-columns: 1fr; gap: 24px; max-width: 310px; margin-inline: auto; }
  .journal-trio > :nth-child(2) { margin-top: 0; }
  .journal-trio .journal-print figcaption { font-size: 26px; }
  .journal-people__aside { grid-template-columns: 1fr; }
  .journal-handnote { margin-top: 12px; }
  .journal-people .journal-print figcaption small { font-size: 10px; }
  .journal-fitness { grid-template-columns: 1fr; }
  .journal-fitness > a img { height: 350px; }
  .journal-diptych figcaption { font-size: 19px; padding-inline: 10px; }
  .journal-wall, .journal-album-grid { columns: 1; }
  .journal-lightbox { padding-inline: 12px; }
  .journal-lightbox__controls { gap: 12px; }
  .life-journal .life-footer { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .life-journal *, .life-journal *::before, .life-journal *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .journal-reveal-ready [data-journal-reveal] { opacity: 1; transform: none; }
  .journal-window .life-fluid, .journal-window .life-world { display: none; }
}
