/* ==========================================================================
   The journal — journal.html: the news told as a cinematic essay (FŪDO treatment) in the portfolio's palette.
   Green-black ground, ivory serif, brass labels, film grain, a timeline rail; pinned stages, a dolly opener per
   chapter, a translucent reading panel, transit counters, the dotted globe behind everything.
   ========================================================================== */
:root {
  --ground: #0f1b16; --panel: rgba(13,22,18,.95); --ivory: #f1ece0; --brass: #b48a3a; --cream: #cdbf9a; --forest: #1f3b2d;
  --serif:Figtree,sans-serif; --sans: Figtree, sans-serif; --mono: 'JetBrains Mono', monospace;
}
html{background:var(--ground);scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ivory);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:rgba(180,138,58,.45)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
@keyframes ping{from{transform:scale(.4);opacity:.9}to{transform:scale(2.6);opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- Fixed layers ---------- */
.ground{position:fixed;inset:0;z-index:0;background:var(--ground)}
.cloud{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;opacity:0;transition:opacity 1.4s ease}
.cloud.is-on{opacity:1}
.grain{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");background-size:160px 160px}
.jhead{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;pointer-events:none;opacity:0;transition:opacity .8s}
.jhead.is-on{opacity:1}
.jhead a{pointer-events:auto;text-decoration:none;color:#fff}
.jhead .brand{display:flex;align-items:center;gap:10px}
.jhead svg{display:block}

/* Timeline rail (the latitude rail): a 58vh rule with monthly ticks, a brass marker and a readout */
.rail{position:fixed;right:28px;top:21vh;height:58vh;width:1px;background:rgba(255,255,255,.28);z-index:40;color:#fff;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em}
.rail i{position:absolute;right:0;width:5px;height:1px;background:rgba(255,255,255,.35)}
.rail i.y{width:10px;background:rgba(255,255,255,.7)}
.rail b{position:absolute;right:16px;transform:translateY(-50%);font-weight:400;white-space:nowrap;opacity:.65}
.rail-marker{position:absolute;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--brass);transform:translateY(-50%);box-shadow:0 0 0 4px rgba(180,138,58,.25)}
.rail-read{position:absolute;right:18px;transform:translateY(-50%);white-space:nowrap;color:#fff;font-size:10px}
@media (max-width:1023px){.rail{display:none}}

/* ---------- Intro: the curved photo mosaic, the giant word, the title ---------- */
.intro-wrap{position:relative;height:300vh;z-index:2}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.mosaic{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 50%}
.mosaic-wall{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.tile{position:absolute;left:0;top:0;width:var(--tw);height:var(--th);margin-left:calc(var(--tw) * -.5);margin-top:calc(var(--th) * -.5);background-size:cover;background-position:50% 35%;backface-visibility:hidden;filter:saturate(.9)}
.mosaic-dim{position:absolute;inset:0;background:var(--ground);opacity:0;pointer-events:none}
.kanji{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-weight:700;font-size:clamp(88px,22vw,320px);line-height:1;color:var(--ivory);opacity:.9;letter-spacing:-.05em;white-space:nowrap;will-change:transform,opacity;text-shadow:0 0 60px rgba(0,0,0,.5)}
.intro-title{position:absolute;left:0;right:0;bottom:12vh;padding:0 clamp(20px,5vw,72px);opacity:0;will-change:opacity,transform}
.intro-stamp{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--brass)}
.intro-title h1{margin:10px 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(2.5rem,6.4vw,5.4rem);line-height:.95;letter-spacing:-.045em;color:var(--ivory);max-width:14ch}
.intro-title p{margin:18px 0 0;max-width:46rem;font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:rgba(241,236,224,.9);font-family:var(--serif)}
.fog{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,var(--ground) 0%,var(--ground) 30%,transparent 70%);opacity:0;transform:scale(.4);will-change:transform,opacity}
.scroll-hint{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:rgba(241,236,224,.6)}

/* ---------- Chapters: dolly opener + reading panel ---------- */
.chapter{position:relative;height:340vh;z-index:2}
.scene3d{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 50%;overflow:hidden}
.dolly{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.plane{position:absolute;left:50%;top:50%;transform-style:preserve-3d;backface-visibility:hidden}
.plane-a{width:26vw;height:18vw;margin:-9vw 0 0 -34vw;background-size:cover;background-position:50% 35%;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateZ(-450px)}
.plane-b{width:22vw;height:28vw;margin:-14vw 0 0 10vw;background-size:cover;background-position:50% 30%;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateZ(-950px)}
.plane-k{margin:0;transform:translate(-50%,-50%) translateZ(-1350px);font-family:var(--serif);font-weight:700;font-size:clamp(140px,30vw,440px);line-height:1;color:var(--ivory);opacity:.85;letter-spacing:-.05em;white-space:nowrap}
.plane-hero{left:0;top:0;width:100%;height:100%;margin:0;background-size:cover;background-position:50% 30%;transform:translateZ(-2000px) scale(2.2);transform-origin:50% 50%}
.plane-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,22,.1) 30%,rgba(15,27,22,.75) 100%)}
.ch-name{position:absolute;left:clamp(20px,5vw,72px);bottom:10vh;z-index:3;opacity:0;will-change:opacity,transform}
.ch-stamp{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--brass)}
.ch-name h2{margin:8px 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5vw,4.4rem);line-height:.98;letter-spacing:-.04em;color:var(--ivory);max-width:17ch}
.panel{position:absolute;left:0;right:0;bottom:0;max-height:100%;overflow:hidden;transform:translateY(100%);background:var(--panel);border-top:1px solid rgba(255,255,255,.1);padding:clamp(28px,5vh,56px) clamp(20px,5vw,72px) clamp(24px,4vh,40px);box-sizing:border-box;will-change:transform;z-index:4}
.panel-in{max-width:80rem;margin:0 auto}
.lede{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;line-height:1.75;color:var(--brass);margin:0}
.wide{margin:16px 0 0;font-family:var(--serif);font-size:clamp(16px,1.2vw,17px);line-height:1.65;color:rgba(241,236,224,.9);max-width:70rem}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 64px;margin-top:4vh}
@media (max-width:899.98px){.cols{grid-template-columns:1fr;gap:24px}}
.col{border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
.col h4{margin:0 0 10px;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.05em;color:rgba(241,236,224,.55)}
.col p{margin:0;font-family:var(--serif);font-size:16px;line-height:1.6;color:rgba(241,236,224,.6)}
.col p.hi{color:rgba(241,236,224,.85)}
.strip{display:flex;gap:8px;height:24vh;margin-top:4vh;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;margin-right:calc(-1 * clamp(20px,5vw,72px));padding-right:clamp(20px,5vw,72px)}
.strip a{flex:none;height:100%;scroll-snap-align:start;display:block}
.strip img{height:100%;width:auto;display:block;border-radius:2px}
.panel-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:3vh;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.panel-links a{color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:3px}
@media (max-width:899.98px){.strip{height:18vh}}

/* ---------- Transits: the counter ---------- */
.transit{position:relative;height:200vh;z-index:2}
.transit .stage{display:grid;place-items:center}
.counter{text-align:center;will-change:opacity,transform}
.counter .above{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(241,236,224,.55)}
.counter .num{font-family:var(--serif);font-weight:700;font-size:clamp(4.2rem,14vw,12.5rem);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ivory)}
.counter .num small{font-size:.22em;color:rgba(241,236,224,.55);margin-left:.2em;font-weight:500;letter-spacing:-.01em}
.counter .below{margin-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--brass)}
.pings{position:absolute;inset:0;pointer-events:none}
.pings i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--brass);box-shadow:0 0 18px rgba(180,138,58,.9)}
.pings i::after{content:"";position:absolute;inset:-6px;border:1px solid rgba(180,138,58,.8);border-radius:50%;animation:ping 2.2s ease-out infinite}

/* ---------- Outro ---------- */
.outro{position:relative;z-index:2;min-height:100vh;display:grid;align-content:center;padding:20vh 10vw 12vh;box-sizing:border-box}
.outro h2{margin:0;max-width:34rem;font-family:var(--serif);font-weight:700;font-size:clamp(32px,4.4vw,64px);line-height:1;letter-spacing:-.04em;color:var(--ivory)}
.outro p{max-width:34rem;margin:28px 0 0;font-family:var(--serif);font-size:17px;line-height:1.65;color:rgba(241,236,224,.75)}
.outro .credit{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;margin-top:36px;display:flex;flex-wrap:wrap;gap:14px 28px}
.outro .credit a{color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:3px}
.outro .settings{appearance:none;background:none;border:1px solid rgba(255,255,255,.3);color:var(--ivory);font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:9px 14px;cursor:pointer}
.outro .copy{margin-top:48px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.6;color:rgba(241,236,224,.45)}

/* ---------- Plain layout: phones, reduced motion, or no motion library ---------- */
html[data-plain] .intro-wrap,html[data-plain] .chapter,html[data-plain] .transit{height:auto}
html[data-plain] .stage{position:relative;height:auto;min-height:0}
html[data-plain] .mosaic{position:relative;height:auto;perspective:none;padding:90px 16px 0}
html[data-plain] .mosaic-wall{position:static;width:auto;height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;transform:none!important}
html[data-plain] .tile{position:static;margin:0;width:auto;height:auto;aspect-ratio:4/3;transform:none!important}
html[data-plain] .kanji,html[data-plain] .fog,html[data-plain] .mosaic-dim,html[data-plain] .scroll-hint{display:none}
html[data-plain] .intro-title{position:relative;bottom:auto;opacity:1!important;transform:none!important;padding:40px 16px 20px}
html[data-plain] .scene3d{position:relative;height:60vh;perspective:none}
html[data-plain] .dolly{transform:none!important}
html[data-plain] .plane-a,html[data-plain] .plane-b,html[data-plain] .plane-k{display:none}
html[data-plain] .plane-hero{transform:none!important}
html[data-plain] .ch-name{opacity:1!important;transform:none!important}
html[data-plain] .panel{position:relative;transform:none!important;max-height:none;backdrop-filter:none}
html[data-plain] .transit .stage{min-height:40vh}
html[data-plain] .counter{opacity:1!important;transform:none!important}
html[data-plain] .cloud{opacity:.35}