/* Journal art direction: spacious typography, moving cover, asymmetric stories. */
.journal-cinema { --journal-shade: #182019; }
.journal-page .editorial-title h1 { font-size:clamp(76px,10vw,144px); letter-spacing:-5px; }
.journal-page .editorial-masthead { padding-bottom:32px; }
.journal-page .editorial-edition { border-bottom:0; }
.journal-cinema { position:relative; min-height:680px; height:78svh; max-height:900px; background:var(--journal-shade); color:var(--paper); overflow:hidden; isolation:isolate; }
.cinema-frames,.cinema-frame,.cinema-shade { position:absolute; inset:0; }
.cinema-frames { z-index:-3; }
.cinema-frame { opacity:0; transition:opacity 1.4s ease; }
.cinema-frame.is-active { opacity:1; }
.cinema-frame img { width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.motion-ready .cinema-frame.is-active img { animation:journal-drift 9s ease-out both; }
.journal-cinema.is-paused .cinema-frame img { animation-play-state:paused; }
.cinema-shade { z-index:-2; background:linear-gradient(90deg,color-mix(in srgb,var(--journal-shade) 80%,transparent),transparent 85%),linear-gradient(0deg,color-mix(in srgb,var(--journal-shade) 70%,transparent),transparent 55%); }
.cinema-layout { height:100%; min-height:680px; display:flex; flex-direction:column; justify-content:space-between; padding-block:48px 32px; }
.cinema-topline { display:flex; justify-content:space-between; gap:24px; font-size:10px; letter-spacing:2px; }
.cinema-copy { padding-block:48px; max-width:680px; }
.cinema-copy .cinema-title { font:400 clamp(72px,8vw,116px)/.9 "Cormorant Garamond",serif; letter-spacing:-3px; margin:24px 0; }
.cinema-copy h2 { font:400 23px/1.6 "Noto Serif Thai",serif; margin:24px 0 16px; }
.cinema-copy>p:not(.cinema-title) { font-size:13px; opacity:.85; }
.cinema-copy .text-link { color:var(--paper); margin-top:16px; }
.cinema-bottom { display:flex; justify-content:space-between; align-items:end; gap:24px; border-top:1px solid color-mix(in srgb,var(--paper) 35%,transparent); padding-top:24px; }
.cinema-caption { font:italic 24px "Cormorant Garamond",serif; margin:0; }
.cinema-controls { display:flex; align-items:center; gap:12px; }
.cinema-controls[hidden] { display:none; }
.cinema-button { appearance:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--paper) 55%,transparent); border-radius:50%; background:transparent; color:var(--paper); font-size:18px; transition:background .2s,color .2s; }
.cinema-button:hover { background:var(--paper); color:var(--ink); }
.cinema-pause { width:auto; border-radius:32px; padding-inline:16px; font-size:11px; }
.cinema-pause[hidden] { display:none; }
.cinema-count { font-size:10px; letter-spacing:2px; min-width:64px; text-align:center; }
.journal-interlude { display:flex; justify-content:space-between; align-items:center; gap:32px; padding-block:48px; border-bottom:1px solid var(--line); }
.journal-interlude p { font:400 clamp(32px,4vw,52px)/1.2 "Cormorant Garamond",serif; margin:0; }
.journal-interlude i { color:var(--olive); }
.journal-interlude>span { font-size:10px; letter-spacing:2px; text-align:right; color:var(--muted); }
.journal-page .editorial-section { padding-top:96px; }
.journal-page .journal-grid { grid-template-columns:1.2fr .8fr 1fr; align-items:start; gap:48px; }
.journal-page .journal-card:nth-child(2) { margin-top:96px; }
.journal-page .journal-card:nth-child(3) { margin-top:48px; }
.journal-page .journal-card .card-image { position:relative; }
.journal-page .journal-card .card-image::after { content:"↗"; position:absolute; right:16px; bottom:16px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--paper); color:var(--ink); font-size:22px; transition:transform .3s; }
.journal-page .journal-card:hover .card-image::after { transform:rotate(45deg); }
.journal-page .journal-card .card-meta>span:first-child { font:italic 32px/1 "Cormorant Garamond",serif; color:var(--olive); }
.journal-page .journal-card .card-meta { align-items:center; }
.journal-page .journal-grid.is-filtered { grid-template-columns:repeat(3,minmax(0,1fr)); }
.journal-page .journal-grid.is-filtered .journal-card { margin-top:0; }
.journal-page .editorial-signoff { background:var(--ink); color:var(--paper); padding-block:96px; }
.journal-page .editorial-signoff .en { color:var(--paper); opacity:.8; }
@keyframes journal-drift { from { transform:scale(1.015); } to { transform:scale(1.08); } }
@media(max-width:1050px) { .journal-page .journal-grid { gap:24px; } }
@media(max-width:700px) {
 .journal-page .editorial-title h1 { font-size:76px; letter-spacing:-3px; }
 .journal-cinema { height:auto; min-height:700px; }
 .cinema-layout { min-height:700px; padding-block:32px 24px; }
 .cinema-copy { padding-block:48px 32px; }
 .cinema-copy .cinema-title { font-size:76px; }
 .cinema-copy h2 { font-size:21px; }
 .cinema-topline { font-size:8px; letter-spacing:1px; }
 .cinema-bottom { align-items:start; flex-direction:column; gap:16px; }
 .cinema-controls { width:100%; justify-content:space-between; gap:8px; }
 .cinema-shade { background:linear-gradient(90deg,color-mix(in srgb,var(--journal-shade) 78%,transparent),color-mix(in srgb,var(--journal-shade) 25%,transparent)),linear-gradient(0deg,color-mix(in srgb,var(--journal-shade) 65%,transparent),transparent); }
 .journal-interlude { padding-block:32px; gap:16px; }
 .journal-interlude>span { font-size:8px; letter-spacing:1px; }
 .journal-page .journal-grid,.journal-page .journal-grid.is-filtered { grid-template-columns:1fr; gap:48px; }
 .journal-page .journal-card:nth-child(n) { margin-top:0; }
 .journal-page .journal-card:nth-child(2) { width:85%; justify-self:end; }
 .journal-page .journal-grid.is-filtered .journal-card { width:100%; }
 .journal-page .editorial-section { padding-top:48px; }
}
@media(prefers-reduced-motion:reduce) {
 html:has(.journal-page) { scroll-behavior:auto; }
 .cinema-frame,.cinema-button,.journal-page .journal-card .card-image::after { transition:none; }
 .motion-ready .cinema-frame.is-active img { animation:none; }
}