.journal{background:#fbfaf6;border-top:1px solid #ece7da;padding:58px 30px 48px}
.journal-inner{max-width:980px;margin:auto;min-width:0}
.journal-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.journal-heading .eyebrow{color:#857044;margin-bottom:12px}
.journal-heading h2{font-family:"Yu Mincho",serif;font-size:30px;margin-bottom:9px}
.journal-flower{font-size:44px;color:#bda978;font-weight:normal}
.access .access-logo{height:240px;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 18px rgba(40,57,83,.08))}
.journal-sample{font-size:10px;color:#68707a;margin:18px 0 22px;line-height:1.8}
.journal-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#c7b68a transparent;padding:4px 0 14px;overscroll-behavior-x:contain}
.journal-card{flex:0 0 calc((100% - 22px)/2);min-width:0;display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:19px;padding:22px 24px;border:1px solid #c6b689;border-radius:56px 18px 56px 18px;background:#fffefa;box-shadow:inset 0 0 0 5px #fffefa,inset 0 0 0 6px #eee6d6;scroll-snap-align:start;scroll-snap-stop:always}
.journal-card figure{margin:0;padding:0;min-width:0}
.journal-card img{width:100%;height:auto;aspect-ratio:559/628;object-fit:contain;border-radius:14px 5px 14px 5px}
.journal-copy{min-width:0}
.journal-category{font:9px/1.8 Arial,sans-serif;letter-spacing:.06em;color:#887448;display:block}
.journal-category small{font:9px "Yu Gothic",sans-serif;margin-left:5px;color:#737773;white-space:nowrap}
.journal-card h3{font-family:"Yu Mincho",serif;font-size:17px;line-height:1.75;margin:8px 0}
.journal-card p{font-size:11px;color:#606b78;line-height:1.85;margin:0}
.journal-number{display:block;font:9px/1.5 Georgia,serif;letter-spacing:.13em;color:#8c784b;margin-top:13px}
.journal-number span{margin:0 7px}
.journal-controls{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:16px}
.journal-controls[hidden]{display:none}
.journal-controls button{width:40px;height:40px;border:1px solid #b9a574;border-radius:50%;background:transparent;color:var(--navy);font-size:18px;cursor:pointer}
.journal-controls button:hover:not(:disabled){background:#efe8d8}
.journal-controls button:disabled{opacity:.3;cursor:default}
.journal-controls button:focus-visible,.journal-track:focus-visible{outline:2px solid #947b43;outline-offset:3px}
.journal-status{font:12px Georgia,serif;letter-spacing:.12em;min-width:66px;text-align:center}
/* Only animate on entry; no hidden initial state or dependency on JS to read. */
.reveal-enter{animation:section-enter .65s ease both}
@keyframes section-enter{from{opacity:.15;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:601px) and (max-width:900px){.journal-card{grid-template-columns:80px minmax(0,1fr);gap:12px;padding:21px 19px}.journal-card h3{font-size:15px}.journal-category{font-size:8px}.journal-card p{font-size:10px}}
@media(max-width:600px){.journal{padding:42px 6% 36px}.journal-heading h2{font-size:25px}.journal-flower{display:none}.journal-sample{font-size:9px;margin:14px 0 18px}.journal-track{gap:16px}.journal-card{flex-basis:100%;grid-template-columns:90px minmax(0,1fr);gap:15px;padding:23px 21px;border-radius:44px 16px 44px 16px}.journal-card h3{font-size:16px}.journal-card p{font-size:11px}.journal-category{font-size:8px}.journal-controls{margin-top:10px}.access .access-logo{height:190px;margin-top:6px}}
@media(max-width:360px){.journal-card{grid-template-columns:72px minmax(0,1fr);gap:11px;padding:22px 17px}.journal-card h3{font-size:14px}.journal-card p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.reveal-enter{animation:none}.journal-track{scroll-behavior:auto}}
@media print{.journal-track{display:block;overflow:visible}.journal-card{break-inside:avoid;margin-bottom:15px}.journal-controls{display:none}.reveal-enter{animation:none}}

/* Hero portrait: the image fills the navy area while its face stays in the right-hand clear zone. */
.hero{display:block;position:relative;isolation:isolate;overflow:hidden;background:var(--navy)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 42%,rgba(40,57,83,.96) 51%,rgba(40,57,83,.38) 69%,rgba(40,57,83,.08) 100%),url("images/hero-portrait.png") right center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0 auto 0 0;z-index:0;width:68%;pointer-events:none;background:linear-gradient(90deg,rgba(40,57,83,.07),transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%)}
.hero-text{position:relative;z-index:1;width:47%}
.hero h1{font-size:clamp(35px,3.7vw,54px)}
@media(max-width:600px){.hero{display:block}.hero::before{background:linear-gradient(90deg,rgba(40,57,83,.82) 0%,rgba(40,57,83,.76) 35%,rgba(40,57,83,.57) 56%,rgba(40,57,83,.27) 76%,rgba(40,57,83,.08) 100%),url("images/hero-portrait.png") right bottom/auto 82% no-repeat}.hero::after{width:75%}.hero-text{width:100%;padding:35px 7% 42px}.hero h1{font-size:clamp(32px,9vw,42px)}.hero .intro{max-width:310px}}

/* Menu photos stay deliberately compact so the course details remain the focus. */
.course-photo{display:block;margin:0 0 18px;overflow:hidden;height:130px;border-radius:3px}
.course-photo img{height:100%;object-fit:cover;object-position:center 46%}
.course-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px;background:#f1f4f6}
.course-photo-pair img:first-child{object-position:center 52%}
.course-photo-pair img:last-child{object-position:60% center}
@media(max-width:600px){.course-photo{height:120px;margin-bottom:17px}.course-photo-pair{gap:6px}}