/* Noto Sans JP, SIL OFL. Subset covers the Japanese dictionary plus kana and Latin. */
@font-face { font-family:"Noto Sans JP"; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/noto-sans-jp-journal.woff2) format("woff2"); }
/* ==========================================================================
   journal-diary.css — diary / column layer for Cairns ’26
   Reusable components added in the September 2026 diary revision.
   Load after journal-playful.css. Each block is self-contained; copy the block
   and its HTML recipe from README §12 to reuse it elsewhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens for this layer (extend tokens.css without editing it)
   -------------------------------------------------------------------------- */
:root {
  --diary-paper:#fff8e6;          /* sticky-note yellow */
  --diary-paper-ink:#4a3b12;
  --diary-pink:#ffd9e6;
  --diary-mint:#dff6ee;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --shadow-note:0 10px 26px rgba(11,17,17,.18);
}

/* --------------------------------------------------------------------------
   2. Diary voice: dated entries and handwritten margin notes
   -------------------------------------------------------------------------- */
.diary-entry { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.diary-entry .meta { font-size:.65rem; color:var(--color-accent-ink); }
.dark .diary-entry .meta { color:var(--color-accent); }
.diary-entry time { font-family:var(--font-script); font-size:1.5rem; line-height:1; color:var(--color-muted); }
.diary-note { display:inline-block; max-width:24rem; padding:1rem 1.25rem 1.2rem; background:var(--diary-paper); color:var(--diary-paper-ink); font-family:var(--font-script); font-size:1.45rem; line-height:1.25; box-shadow:var(--shadow-note); transform:rotate(-2deg); position:relative; }
.diary-note:before { content:''; position:absolute; top:-.55rem; left:50%; width:3.4rem; height:1.1rem; margin-left:-1.7rem; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.06); transform:rotate(2deg); }
.diary-note.pink { background:var(--diary-pink); }
.diary-note.mint { background:var(--diary-mint); }
.diary-note.tilt-right { transform:rotate(2.5deg); }
.diary-note small { display:block; margin-top:.5rem; font-family:var(--font-sans); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.diary-aside { display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center; margin-block:3rem; }
.diary-aside>.diary-note { justify-self:end; }

/* --------------------------------------------------------------------------
   3. Pop-ups: “Look, a bird!” spots and “Did you know?” fun facts
   Both are data-reveal wrappers with .fx-pop (see effects.css) and data-sfx.
   -------------------------------------------------------------------------- */
.bird-spot, .fun-fact { position:relative; display:grid; gap:1.25rem; padding:1.5rem; background:var(--color-white); color:var(--color-ink); border-radius:var(--radius-card); box-shadow:var(--shadow-note); max-width:34rem; }
.bird-spot { grid-template-columns:150px 1fr; align-items:center; }
.bird-spot .photo { width:150px; aspect-ratio:1; border-radius:50%; }
.bird-spot .annotation { font-size:1.9rem; margin:0 0 .35rem; color:var(--color-accent-ink); transform:rotate(-3deg); display:inline-block; }
.bird-spot h3, .fun-fact h3 { font-size:1.05rem; letter-spacing:-.02em; line-height:1.3; }
.bird-spot p, .fun-fact p { font-size:.85rem; line-height:1.7; color:var(--color-muted); margin-top:.4rem; }
.bird-spot .meta, .fun-fact .meta { font-size:.6rem; color:var(--color-accent-ink); margin-top:.6rem; display:block; }
.bird-spot .bird-tag { position:absolute; top:-.9rem; right:1.25rem; font-family:var(--font-script); font-size:1.15rem; background:var(--diary-paper); color:var(--diary-paper-ink); padding:.15rem .7rem; transform:rotate(4deg); box-shadow:0 3px 8px rgba(0,0,0,.12); }
.fun-fact { grid-template-columns:auto 1fr; align-items:start; background:var(--diary-mint); }
.fun-fact.warm { background:var(--diary-paper); }
.fun-fact.night { background:#13262b; color:var(--color-paper); --color-muted:#b6c1be; }
.fun-fact.night .meta { color:var(--color-accent); }
.journal-icon { display:block; object-fit:contain; }
.intro-heading { display:grid; grid-template-columns:minmax(0,1fr) 7.5rem; gap:1rem; align-items:center; }
.intro-icon { width:100%; height:auto; aspect-ratio:auto; transform:rotate(-4deg); }
.fun-fact .fact-icon { width:4.2rem; height:4.2rem; object-fit:contain; align-self:start; transform:rotate(3deg); }
.fun-fact .fact-photo { grid-column:1/-1; aspect-ratio:4/3; border-radius:calc(var(--radius-card) - .4rem); }
.fun-fact.with-photo { grid-template-columns:auto 1fr; }
.fun-fact.with-photo .fact-photo { grid-column:1/-1; }
.dark .bird-spot { background:#132022; color:var(--color-paper); }
.dark .bird-spot .annotation { color:var(--color-accent); }
.dark .bird-spot .meta { color:var(--color-accent); }
.pop-row { display:flex; gap:2rem; flex-wrap:wrap; align-items:flex-start; margin-block:3rem; }
.pop-row>* { flex:1 1 320px; }
.pop-row.centered { justify-content:center; }
.float-right { float:right; margin:0 0 2rem 3rem; }

/* --------------------------------------------------------------------------
   4. Scroll scenes: two photographs cross-fade while the frame stays pinned
   <section class="scene-fade" data-scene-fade> <div class="scene-frame">…</div> </section>
   JS (diary.js) writes --fade 0→1 from scroll position.
   -------------------------------------------------------------------------- */
.scene-fade { position:relative; height:var(--scene-length,calc(var(--journal-svh, 1svh) * 220)); --fade:0; }
.scene-frame { position:sticky; top:0; height:calc(var(--journal-svh, 1svh) * 100); min-height:520px; overflow:hidden; background:var(--color-ink); isolation:isolate; }
.scene-frame>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--photo-position,center); }
.scene-frame>img.scene-to { opacity:var(--fade); }
.scene-frame>img.scene-from { transform:scale(calc(1 + var(--fade) * .06)); }
.scene-frame:after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,transparent 60%,rgba(0,0,0,.6)); pointer-events:none; }
.scene-caption { position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); bottom:3rem; color:white; display:flex; justify-content:space-between; align-items:end; gap:2rem; }
.scene-caption .title-film { font-size:clamp(2.4rem,5.5vw,5.5rem); }
.scene-caption .scene-labels { position:relative; min-width:12rem; text-align:right; }
.scene-caption .scene-labels>span { display:block; transition:opacity 300ms; }
.scene-caption [data-from] { opacity:calc(1 - var(--fade)); }
.scene-caption [data-to] { position:absolute; right:0; bottom:0; opacity:var(--fade); }
.scene-meter { position:absolute; z-index:2; top:6rem; right:var(--gutter); width:1px; height:9rem; background:rgba(255,255,255,.3); }
.scene-meter:after { content:''; position:absolute; top:0; left:-2px; width:5px; height:100%; background:var(--color-accent); transform-origin:top; transform:scaleY(var(--fade)); }
.scene-hint { position:absolute; z-index:2; top:6rem; left:var(--gutter); color:white; font-family:var(--font-script); font-size:1.5rem; opacity:calc(1 - var(--fade) * 2); }
.scene-frame .diary-note { position:absolute; z-index:2; top:5.5rem; left:var(--gutter); max-width:19rem; opacity:calc(1 - var(--fade) * 1.6); }
/* Reduced motion: the pinned cross-fade becomes an editorial diptych. Both
   photographs are shown side by side on the same ink ground, and the film
   title and the from/to labels keep their place, so the scene still reads as
   one composed frame rather than two loose images. */
html.motion-off .scene-fade:not(.reef-sequence), html:not(.motion-ready) .scene-fade:not(.reef-sequence) { height:auto; }
html.motion-off .scene-frame:not(.reef-frame), html:not(.motion-ready) .scene-frame:not(.reef-frame) {
  position:relative; height:auto; min-height:0;
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding-bottom:clamp(7rem,14vw,11rem);
}
html.motion-off .scene-frame:not(.reef-frame)>img, html:not(.motion-ready) .scene-frame:not(.reef-frame)>img {
  position:relative; inset:auto; opacity:1!important; transform:none!important;
  aspect-ratio:4/5; height:auto; width:100%;
}
/* The scroll affordances have no job once nothing scrolls. */
html.motion-off .scene-frame:not(.reef-frame) .diary-note, html:not(.motion-ready) .scene-frame:not(.reef-frame) .diary-note,
html.motion-off .scene-meter, html:not(.motion-ready) .scene-meter { display:none; }
/* The gradient existed to lift text off the photo; the caption now sits below. */
html.motion-off .scene-frame:not(.reef-frame):after, html:not(.motion-ready) .scene-frame:not(.reef-frame):after { display:none; }
html.motion-off .scene-caption, html:not(.motion-ready) .scene-caption {
  position:absolute; top:auto; bottom:clamp(2rem,4vw,3.5rem);
  align-items:end;
}
html.motion-off .scene-caption [data-from], html:not(.motion-ready) .scene-caption [data-from] { opacity:1; }
html.motion-off .scene-caption [data-to], html:not(.motion-ready) .scene-caption [data-to] { position:static; opacity:1; }
html.motion-off .scene-caption .scene-labels, html:not(.motion-ready) .scene-caption .scene-labels { min-width:0; }
html.motion-off .scene-caption .scene-labels>span, html:not(.motion-ready) .scene-caption .scene-labels>span { display:block; }
/* from → to, read as a pair. */
html.motion-off .scene-caption [data-from]:after, html:not(.motion-ready) .scene-caption [data-from]:after {
  content:' 93'; color:var(--color-accent);
}
@media(max-width:760px) {
  html.motion-off .scene-frame:not(.reef-frame), html:not(.motion-ready) .scene-frame:not(.reef-frame) { grid-template-columns:1fr; }
  html.motion-off .scene-frame:not(.reef-frame)>img, html:not(.motion-ready) .scene-frame:not(.reef-frame)>img { aspect-ratio:4/3; }
}

/* --------------------------------------------------------------------------
   5. Living photographs: a still that becomes its own short video clip
   <figure class="photo living-photo" data-living><img …><video data-src …></video></figure>
   -------------------------------------------------------------------------- */
.living-photo video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1200ms var(--ease-soft); z-index:1; pointer-events:none; }
.living-photo.is-live video { opacity:1; }
.living-photo .live-badge { position:absolute; z-index:3; top:1rem; left:1rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:white; background:rgba(0,0,0,.45); padding:.35rem .6rem; border-radius:2rem; opacity:0; transition:opacity 500ms; }
.living-photo .live-badge:before { content:''; width:6px; height:6px; border-radius:50%; background:#ff5c5c; }
.living-photo.is-live .live-badge { opacity:1; }
.living-photo.is-live .live-badge:before { animation:live-blink 1.6s infinite; }
@keyframes live-blink { 50% { opacity:.25; } }
/* Motion down: the clip waits behind its still photograph, but it can still
   be played by hand, and it becomes visible once it is running. */
.motion-off .living-photo:not(.is-live) video,
.motion-off .living-photo:not(.is-live) .live-badge { display:none; }
.motion-off .living-photo.is-live video { display:block; opacity:1; }
.living-pair { display:grid; grid-template-columns:1.25fr 1fr; gap:1.5rem; align-items:start; margin-top:3rem; }
.living-pair>.photo { aspect-ratio:4/3; border-radius:var(--radius-card); }
.living-pair>.photo:nth-child(2) { margin-top:4rem; }

/* --------------------------------------------------------------------------
   6. Slides that show the whole photograph without black bars
   Add .contain-fill and style="--fill:url(…)" to .slide-photo.
   -------------------------------------------------------------------------- */
.slide-photo.contain-fill { background:var(--color-ink); }
.slide-photo.contain-fill:before { content:''; position:absolute; inset:-6%; background:var(--fill) center/cover no-repeat; filter:blur(28px) brightness(.55) saturate(1.2); z-index:0; }
.slide-photo.contain-fill>img { object-fit:contain; z-index:1; }
.personal-journal #balloon .slide-photo>img { object-fit:contain; }

/* --------------------------------------------------------------------------
   7. Scrapbook grids for wildlife, butterflies, Army Duck and Barron Falls
   -------------------------------------------------------------------------- */
.scrap-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:3rem; }
.scrap-grid figure { min-width:0; }
.scrap-grid .photo { aspect-ratio:4/3; border-radius:var(--radius-card); }
.scrap-grid .photo.portrait { aspect-ratio:3/4; }
.scrap-grid figcaption { padding-top:.9rem; font-size:.8rem; line-height:1.6; color:var(--color-muted); }
.scrap-grid figcaption strong { display:block; color:var(--color-ink); font-size:.95rem; letter-spacing:-.01em; margin-bottom:.2rem; }
.dark .scrap-grid figcaption strong { color:var(--color-paper); }
.scrap-grid figure:nth-child(3n+2) { transform:rotate(1.2deg); }
.scrap-grid figure:nth-child(3n) { transform:rotate(-1deg); margin-top:1.5rem; }
.scrap-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.scrap-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.scrap-lead { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; margin-top:5rem; }
.scrap-lead .photo { aspect-ratio:4/3; border-radius:var(--radius-card); }
.scrap-lead .photo.portrait { aspect-ratio:3/4; max-width:420px; margin-inline:auto; }
.scrap-lead h3 { font-size:clamp(1.8rem,3.2vw,3rem); letter-spacing:-.045em; margin-bottom:1rem; }
.scrap-lead .annotation { font-size:2rem; margin-top:1.5rem; color:var(--color-accent-ink); }
.barron-strip { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1rem; margin-top:4rem; }
.barron-strip .photo { height:520px; border-radius:var(--radius-card); }
.barron-strip .photo-caption .meta { font-size:.62rem; }

/* --------------------------------------------------------------------------
   8. Handwritten routes (waterfront walk)
   -------------------------------------------------------------------------- */
.route-handwritten .route-label { font-family:var(--font-script); font-size:24px; letter-spacing:0; }
.route-handwritten .route-label-small { font-size:19px; opacity:.85; }
.waterfront-route { width:min(100%,680px); margin:3rem auto 0; }

/* --------------------------------------------------------------------------
   9. Sticky lo-fi player and audio settings (site-wide, stored in localStorage)
   -------------------------------------------------------------------------- */
 .site-header .music-toggle { background:none; border:0; color:white; padding:10px; min-width:44px; min-height:44px; display:grid; place-items:center; cursor:pointer; margin-inline-start:1rem; flex-shrink:0; }
.music-toggle svg { width:23px; height:23px; }
.music-toggle [hidden] { display:none; }
.music-toggle:hover { opacity:.75; }
.site-header .site-nav { margin-inline-start:auto; }
@media(max-width:760px) { .site-header .music-toggle { margin-inline-start:auto; margin-inline-end:.5rem; } }

/* Motion switch: same quiet treatment as the sound switch. */
.site-header .motion-toggle { background:none; border:0; color:white; padding:10px; min-width:44px; min-height:44px; display:grid; place-items:center; cursor:pointer; margin-inline-start:.25rem; flex-shrink:0; }
.motion-toggle svg { width:23px; height:23px; }
.motion-toggle [hidden] { display:none; }
.motion-toggle:hover { opacity:.75; }
.motion-toggle:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; }
@media(max-width:760px) { .site-header .motion-toggle { margin-inline-start:auto; margin-inline-end:0; } .site-header .sound-control { margin-inline-start:.25rem; } }

/* Volume, on the pointer devices that can hover. The slider shares the
   button's hit area so it opens on hover and stays open while it has focus. */
.sound-control { position:relative; display:flex; align-items:center; margin-inline-start:1rem; flex-shrink:0; }
.sound-control .music-toggle { margin-inline-start:0; }
.volume-popover {
  position:absolute; top:100%; right:0; z-index:60;
  padding:.85rem .9rem; border-radius:1rem;
  background:rgba(11,17,17,.92); border:1px solid #ffffff2b;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity 160ms var(--ease-soft), transform 160ms var(--ease-soft), visibility 160ms;
}
.sound-control:hover .volume-popover,
.sound-control:focus-within .volume-popover { opacity:1; visibility:visible; transform:translateY(0); }
.volume-slider { -webkit-appearance:none; appearance:none; width:110px; height:4px; border-radius:2px; background:#ffffff3d; outline:none; display:block; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--color-accent); border:0; cursor:pointer; }
.volume-slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--color-accent); border:0; cursor:pointer; }
.volume-slider:focus-visible { outline:3px solid var(--color-accent); outline-offset:6px; }

/* No hover, no popover: touch screens keep the plain sound switch. */
@media(hover:none),(pointer:coarse) { .volume-popover { display:none; } }

/* --------------------------------------------------------------------------
   10. Language switch (EN / NL / JA) in the header
   -------------------------------------------------------------------------- */
.lang-switch { display:flex; align-items:center; gap:.15rem; margin-left:1.5rem; font-size:.68rem; letter-spacing:.1em; }
.lang-switch button { background:transparent; border:0; color:inherit; padding:.4rem .5rem; min-height:44px; opacity:.6; border-bottom:1px solid transparent; }
.lang-switch button[aria-pressed="true"] { opacity:1; border-bottom-color:var(--color-accent); }
.lang-switch button:hover { opacity:1; }
@media(max-width:440px) {
  .lang-switch { margin-left:.5rem; }
  .lang-switch button { padding:.4rem .35rem; }
}
html[data-lang-pending] body { visibility:hidden; }
html[lang=ja] .annotation, html[lang=ja] .diary-note, html[lang=ja] .bird-spot .bird-tag, html[lang=ja] .diary-entry time, html[lang=ja] .trip-calendar caption span, html[lang=ja] .plan-b, html[lang=ja] .music-hint, html[lang=ja] .route-handwritten .route-label { font-family:var(--font-sans); font-weight:600; }
html[lang=ja] .annotation { font-size:1.6rem; line-height:1.4; }
html[lang=ja] .breakfast-note .annotation, html[lang=ja] #balloon .chapter-copy .annotation { font-size:2rem; }
html[lang=ja] body, html[lang=ja] .prose p { line-height:1.95; line-break:strict; }
html[lang=ja] .title-editorial, html[lang=ja] .title-film, html[lang=ja] .title-explore, html[lang=ja] .scene-title h3 { letter-spacing:0; line-height:1.25; }
html[lang=ja] .title-day h2, html[lang=ja] .chapter-copy h3 { letter-spacing:0; }
html[lang=ja] .meta { letter-spacing:.12em; }
html[lang=ja] .title-explore strong { font-size:clamp(2.2rem,4.5vw,4.6rem); }
html[lang=nl] .title-editorial { letter-spacing:-.04em; }

/* --------------------------------------------------------------------------
   11. Small extras: moon note, food link, footer copyright
   -------------------------------------------------------------------------- */
.moon-note { display:grid; grid-template-columns:200px 1fr; gap:2rem; align-items:center; max-width:40rem; margin-top:3rem; }
.moon-note .photo { aspect-ratio:3/4; border-radius:var(--radius-card); }
.moon-note p { font-size:.9rem; color:var(--color-muted); line-height:1.75; }
.moon-note .annotation { font-size:1.8rem; margin-bottom:.75rem; }
.hotel-room-strip { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; }
.hotel-room-strip .photo { aspect-ratio:3/4; border-radius:var(--radius-card); }
.hotel-room-strip figcaption { font-family:var(--font-script); font-size:1.15rem; margin-top:.6rem; color:var(--color-accent-ink); }
.site-footer-copy { display:block; font-size:.7rem; color:var(--color-muted); line-height:1.8; margin-top:.5rem; }
footer .footer-copy-block { display:flex; flex-direction:column; gap:.2rem; }
.chapter-copy .text-link { margin-top:1.5rem; }

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1000px) {
  .scrap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scrap-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scrap-grid figure:nth-child(3n) { margin-top:0; }
  .scrap-lead { grid-template-columns:1fr; gap:2rem; }
  .barron-strip { grid-template-columns:1fr 1fr; }
  .barron-strip figure:first-child { grid-column:1/-1; }
  .barron-strip .photo { height:400px; }
}
@media(max-width:760px) {
  .bird-spot { grid-template-columns:110px 1fr; padding:1.1rem; gap:1rem; }
  .bird-spot .photo { width:110px; }
  .bird-spot .annotation { font-size:1.5rem; }
  .fun-fact { padding:1.1rem; }
  .intro-heading { grid-template-columns:minmax(0,1fr) 5.25rem; gap:.5rem; }
  .fun-fact .fact-icon { width:3.5rem; height:3.5rem; }
  .float-right { float:none; margin:2rem auto; }
  .diary-aside { grid-template-columns:1fr; gap:1.5rem; }
  .diary-aside>.diary-note { justify-self:start; }
  .scene-frame { min-height:0; height:calc(var(--journal-svh, 1svh) * 88); }
  .scene-caption { bottom:2rem; flex-direction:column; align-items:start; gap:1rem; }
  .scene-caption .scene-labels { text-align:left; min-width:0; }
  .scene-caption [data-to] { right:auto; left:0; }
  .scene-meter { top:5rem; height:6rem; }
  .scene-frame .diary-note { top:5rem; max-width:15rem; font-size:1.2rem; }
  .living-pair { grid-template-columns:1fr; }
  .living-pair>.photo:nth-child(2) { margin-top:0; }
  .scrap-grid, .scrap-grid.four, .scrap-grid.two { grid-template-columns:1fr 1fr; gap:.9rem; }
  .scrap-grid figcaption { font-size:.72rem; }
  .barron-strip { grid-template-columns:1fr 1fr; gap:.6rem; }
  .barron-strip .photo { height:300px; }
  .moon-note { grid-template-columns:130px 1fr; gap:1.2rem; }
  .hotel-room-strip { gap:.9rem; }
  .route-handwritten .route-label { font-size:30px; }
  .route-handwritten .route-label-small { font-size:24px; }
}
@media(max-width:480px) {
  .scrap-grid, .scrap-grid.four { grid-template-columns:1fr; }
  .scrap-grid figure:nth-child(3n+2), .scrap-grid figure:nth-child(3n) { transform:none; }
}

.food-extras.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.food-extras.four figure:nth-child(2) { margin-top:0; }
.food-extras.four figure:nth-child(even) { margin-top:3rem; }
@media(max-width:1000px) { .food-extras.four { grid-template-columns:1fr 1fr; } }
@media(max-width:760px) { .food-extras.four { grid-template-columns:1fr; } .food-extras.four figure:nth-child(even) { margin-top:0; } }

/* Hero adjustments for the diary layer */
.scroll-cue .cue-text { border:0; width:auto; height:auto; display:inline; border-radius:0; }
.personal-journal .hero-index { display:none; }
html[lang=ja] .title-destination { font-family:var(--font-destination,var(--font-script)); }
html[lang=ja] .prose p, html[lang=ja] p, html[lang=ja] li, html[lang=ja] figcaption, html[lang=ja] h2, html[lang=ja] h3, html[lang=ja] .meta { font-family:var(--font-sans),"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; }
.scene-caption { bottom:5.5rem; }
@media(max-width:760px) { .scene-caption { bottom:5.5rem; } }

/* Japanese uses a consistent sans face, with natural phrase wrapping. */
html[lang=ja] { --font-sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; --font-script:var(--font-sans); }
html[lang=ja] body { word-break:normal; line-break:strict; overflow-wrap:break-word; }
html[lang=ja] :is(p,li,figcaption) { line-height:1.85; letter-spacing:.015em; text-wrap:pretty; }
html[lang=ja] :is(h2,h3,.title-editorial,.title-film,.title-explore,.annotation,.diary-note) { font-family:var(--font-sans); font-style:normal; font-weight:500; line-height:1.55; letter-spacing:.015em; word-break:auto-phrase; text-wrap:balance; }
html[lang=ja] :is(.title-editorial,.title-film) { font-size:clamp(1.9rem,4vw,3.8rem); }
html[lang=ja] :is(.annotation,.diary-note) { font-size:clamp(1.05rem,2vw,1.45rem); }
html[lang=ja] :is(.title-editorial,.title-film,.title-explore,.chapter-copy h3) br { display:none; }
html[lang=ja] :is(.title-editorial,.title-film,.title-explore) :is(em,strong) { display:inline; font-style:normal; }
html[lang=ja] .meta { letter-spacing:.035em; line-height:1.65; }
html[lang=ja] .prose p { max-inline-size:40ic; }
html[lang=ja] .title-destination { font-family:"Kaushan Script",cursive; }
/* Opaque caption surface keeps the live footage from reducing contrast. */
.cassowary-photo .photo-caption { left:0; right:0; bottom:0; padding:.75rem 1rem; background:var(--color-ink); color:var(--color-paper); }
.cassowary-photo .photo-caption .meta { color:inherit; font-size:.8rem; letter-spacing:normal; line-height:1.6; }

html[lang=ja] .ja-phrase { display:inline-block; max-inline-size:100%; }
.personal-journal .lang-switch [lang=ja] { font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; }
html[lang=ja] .hero-side { transform:none; text-orientation:mixed; letter-spacing:.08em; }
.waterfront-collage { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.waterfront-collage>.photo-card { min-width:0; width:100%; aspect-ratio:auto; }
@media(max-width:760px) { .waterfront-collage { grid-template-columns:minmax(0,1fr); } .waterfront-collage>.photo-card { width:90%; } }
html[lang=ja] :is(h2,h3) em { font-style:normal; }

/* Scroll through each image pair; halfway means photo centre meets viewport centre. */
.motion-ready .scroll-cut .shot-from { opacity:calc(1 - var(--shot-mix,0)) !important; animation:none !important; transition:none !important; }
.scroll-cut .shot-echo { display:none; }
.motion-ready .scroll-cut .transition-caption { opacity:1 !important; transition:none; }

/* Keep the birds, rather than the background, at the centre of each crop. */
.bird-spot { grid-template-columns:190px minmax(0,1fr); max-width:40rem; }
.bird-spot .photo { width:190px; height:190px; overflow:hidden; }
.bird-spot .photo img { transform:scale(var(--bird-zoom,1.5)); transform-origin:var(--bird-focus,50% 50%); }
.bird-spot img[src*="lorikeet"] { --bird-zoom:2.8; --bird-focus:52% 50%; }
.bird-spot img[src*="shorebird"] { --bird-zoom:1.8; --bird-focus:48% 65%; }
.bird-spot img[src*="lawn"] { --bird-zoom:2; --bird-focus:54% 60%; }
.bird-spot img[src*="pelican"] { --bird-zoom:2.8; --bird-focus:51% 48%; }
.bird-spot img[src*="marina-heron"] { --bird-zoom:2.5; --bird-focus:54% 54%; }
.bird-spot img[src*="duck-platform"] { --bird-zoom:1.2; }
@media(max-width:600px) {
  .bird-spot { grid-template-columns:minmax(0,1fr); max-width:100%; }
  .bird-spot .photo { width:min(240px,100%); height:auto; aspect-ratio:1; }
}

/* Balloon chapter: portraits beside the diary, uninterrupted full-screen views. */
.balloon-intro,.balloon-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,7rem); align-items:center; }
.personal-journal .balloon-intro .balloon-heading { display:block; padding:0; }
.balloon-intro .balloon-heading .title-editorial { font-size:clamp(2.5rem,4vw,4.6rem); }
.balloon-opening-copy .balloon-facts { margin-top:2.5rem; }
.balloon-portrait img { height:auto; aspect-ratio:3/4; object-fit:cover; }
.balloon-portrait figcaption { margin-top:1rem; line-height:1.7; }
.balloon-portrait figcaption .meta { display:block; margin-bottom:.4rem; }
.balloon-portrait figcaption p { color:var(--color-muted); }
.balloon-panorama { height:calc(var(--journal-svh, 1svh) * 100); min-height:540px; width:100%; border-radius:0; }
.balloon-panorama>img { object-fit:cover; object-position:50% 50%; }
.balloon-panorama .photo-caption { display:block; bottom:2.5rem; left:var(--gutter); right:var(--gutter); max-width:42rem; text-shadow:0 1px 8px #000; }
.balloon-panorama .photo-caption p { margin-top:.5rem; font-size:1rem; }
.balloon-story .prose { margin-top:2rem; }
.balloon-story .annotation { margin-bottom:2rem; }
@media(max-width:760px) {
  .balloon-intro,.balloon-story { grid-template-columns:minmax(0,1fr); }
  .balloon-portrait { max-width:32rem; }
  .balloon-panorama { min-height:0; }
}

@font-face { font-family:"Zen Maru Gothic"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/zen-maru-regular.woff2) format("woff2"); }
@font-face { font-family:"Zen Maru Gothic"; font-style:normal; font-weight:500 900; font-display:swap; src:url(../fonts/zen-maru-medium.woff2) format("woff2"); }
@font-face { font-family:"Yomogi"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/yomogi-journal.woff2) format("woff2"); }
html[lang=ja] { --font-sans:"Zen Maru Gothic","Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; --font-script:"Yomogi",cursive; }
html[lang=ja] body { font-size:1.0625rem; line-height:1.9; word-break:normal; line-break:strict; }
.personal-journal [lang=ja],.personal-journal .lang-switch [lang=ja] { font-family:"Zen Maru Gothic","Noto Sans JP","Hiragino Sans",sans-serif; }
html[lang=ja] :is(p,li,figcaption) { font-family:var(--font-sans); line-height:1.9; letter-spacing:.015em; }
html[lang=ja] :is(.prose p,.bird-spot p,.fun-fact p,.scrap-grid figcaption,.moon-note p,.place-memory) { font-size:1rem; }
html[lang=ja] :is(h2,h3,.title-editorial,.title-film,.title-explore) { font-family:var(--font-sans); font-weight:500; line-height:1.5; letter-spacing:0; word-break:normal; text-wrap:balance; }
html[lang=ja] :is(h2,h3) em { font-style:normal; }
html[lang=ja] :is(.title-editorial,.title-film) { font-size:clamp(2rem,4vw,4rem); }
html[lang=ja] :is(.title-editorial,.title-film,.title-explore,.chapter-copy h3) br { display:none; }
html[lang=ja] :is(.title-editorial,.title-film,.title-explore) :is(em,strong) { display:inline; font-style:normal; }
html[lang=ja] :is(.meta,.image-credit,.site-footer-copy,.place-location,.bird-spot .meta,.fun-fact .meta,.diary-note small) { font-size:.875rem; letter-spacing:.025em; line-height:1.7; }
html[lang=ja] :is(.annotation,.diary-note,.bird-spot .bird-tag,.trip-calendar caption span,.plan-b,.hotel-room-strip figcaption,.scene-hint) { font-family:"Yomogi",cursive; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:400; line-height:1.65; letter-spacing:0; }
html[lang=ja] .diary-entry time { font-family:var(--font-sans); font-size:1rem; line-height:1.6; }
html[lang=ja] .bird-spot .bird-tag { font-size:1.25rem; }
html[lang=ja] .diary-note small { font-family:var(--font-sans); }
html[lang=ja] .hero-subtitle { font-size:1.0625rem; }
html[lang=ja] .hero-side { transform:none; text-orientation:mixed; font-size:.8rem; letter-spacing:.06em; }
html[lang=ja] .prose p { max-inline-size:38ic; }
html[lang=ja] .title-destination { font-family:"Kaushan Script",cursive; }
html[lang=ja] .cassowary-photo .photo-caption .meta { font-size:.95rem; }
html[lang=ja] .balloon-panorama .photo-caption p { font-size:1.0625rem; }
html[lang=ja] .ja-phrase { display:inline; }
.audio-credits { display:block; margin-top:1.25rem; font-size:.8rem; line-height:1.8; color:var(--color-muted); }
.audio-credits a { text-decoration:underline; text-underline-offset:.2em; }
html[lang=ja] .audio-credits { font-size:.875rem; }

[data-bird-sound] { cursor:pointer; }
.bird-sound-button {
  position:absolute; top:.5rem; right:.5rem; z-index:5;
  display:grid; place-items:center; width:44px; height:44px;
  padding:0; border:0; border-radius:50%; cursor:pointer;
  color:var(--color-white); background:var(--color-ink); opacity:.82;
}
.bird-spot .bird-sound-button { top:13%; right:13%; }
.bird-sound-button:hover,.bird-sound-button:focus-visible { opacity:1; }
.bird-sound-button:focus-visible { outline:3px solid var(--color-white); outline-offset:2px; }
.bird-sound-stop,[data-bird-state="playing"] .bird-sound-waves { display:none; }
[data-bird-state="playing"] .bird-sound-stop { display:block; }
[data-bird-state="loading"] .bird-sound-button { opacity:.55; }
.bird-audio-credits summary { cursor:pointer; text-decoration:underline; text-underline-offset:.2em; }
.bird-audio-credits ul { padding-inline-start:1.25rem; }
html[lang=ja] .balloon-facts .meta { font-size:.875rem; }
html[lang=ja] .balloon-facts>p { font-size:1rem; }
html[lang=ja] .trip-quote p,html[lang=ja] .trip-quote cite { font-size:1rem; line-height:1.9; }
html[lang=ja] .bird-spot h3,html[lang=ja] .fun-fact h3 { font-size:1.2rem; }

/* Consistent editorial spacing and quiet, contextual illustrations. */
:root { --journal-icon-filter:grayscale(1) brightness(.48) sepia(.65); --journal-icon-filter-dark:grayscale(1) brightness(1.35) sepia(.4); }
.journal-icon { filter:var(--journal-icon-filter); }
.dark .journal-icon { filter:var(--journal-icon-filter-dark); }
.fun-fact .fact-icon { transform:none; }
.scrap-grid figure:nth-child(n) { transform:none; margin-top:0; }
.crop-grid .photo, .crop-grid .photo.portrait, .photo.landscape-crop,
.scrap-lead .photo.landscape-crop { aspect-ratio:4/3; width:100%; max-width:none; }
.crop-grid img { object-fit:cover; }
.crop-grid img[src*="koala"] { object-position:50% 42%; }
.crop-grid img[src*="butterfly"] { object-position:center; }
.personal-journal .arrival-scrapbook { display:block; max-width:72rem; margin-inline:auto; }
.bailey-story { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 3rem; }
.bailey-story .eyebrow,.bailey-story h2 { grid-column:1; }
.bailey-story .prose { grid-column:1; }
.personal-journal .bailey-story .bailey-postcard { margin:0; grid-column:2; grid-row:1/4; align-self:center; transform:none; width:100%; }
.waterfront-album .breakfast-note { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; align-items:center; max-width:52rem; margin:3rem auto; transform:none; }
.waterfront-album .breakfast-note .photo { aspect-ratio:4/3; border-radius:var(--radius-card); }
.food-extras.four figure:nth-child(n) { margin-top:0; }
.barron-strip { grid-template-columns:1fr 1.4fr 1fr; }
.personal-tips { max-width:48rem; margin:3rem 0 0; }
.personal-tips h3 { margin-bottom:1rem; }
.personal-tips p { color:var(--color-muted); line-height:1.8; }
html:not([lang=ja]) .trip-quote>p[lang=ja],html:not([lang=ja]) .language-ja,
html[lang=ja] .language-latin { display:none; }
.journal-video { display:block; width:100%; height:100%; object-fit:cover; background:var(--color-ink); }
.slide-photo>.journal-video { position:absolute; inset:0; object-fit:contain; }
.memory-slide .slide-photo { background:var(--color-ink); }
.memory-slideshow .slideshow-controls { padding-top:1rem; flex-wrap:wrap; }
.memory-slideshow .slide-arrows { flex-wrap:wrap; gap:.5rem; }
.memory-slideshow .slide-dots button { min-width:44px; width:44px; }
.kuranda-grid>.photo>.journal-video { position:absolute; inset:0; }
.kuranda-grid>.photo .photo-caption { bottom:4rem; pointer-events:none; }
.reef-finale { width:100%; height:calc(var(--journal-svh, 1svh) * 75); min-height:280px; background:var(--color-ink); }
.reef-finale video { object-fit:contain; }
.scroll-album { height:calc(var(--journal-svh, 1svh) * 250); }
.scroll-album-frame { position:sticky; top:0; height:calc(var(--journal-svh, 1svh) * 100); overflow:hidden; background:var(--color-ink); }
.scroll-album-frame>img,.scroll-album-frame>video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scroll-album-frame>img:not(:first-child),.scroll-album-frame>video { opacity:0; }
.scroll-album-frame .scene-title { pointer-events:none; bottom:5rem; }
.scroll-album-count { position:absolute; z-index:3; top:6rem; right:var(--gutter); color:white; }
.sky-fade .photo-caption { z-index:3; }
.hero-media { position:absolute; inset:0; }
.hero-media>img,.hero-media>video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 800ms ease; }
.hero-media>:first-child,.hero-media>.is-current { opacity:1; }
.hero-media:has(.is-current)>:not(.is-current) { opacity:0; }
.hero-media-toggle { position:absolute; z-index:4; top:6rem; right:var(--gutter); min-height:44px; padding:.5rem 1rem; color:white; background:var(--color-ink); border:1px solid currentColor; border-radius:3px; }
@media(max-width:1000px) { .barron-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } .barron-strip figure:first-child { grid-column:auto; } }
@media(max-width:760px) {
 .bailey-story { display:block; } .bailey-story .bailey-postcard { margin-top:2rem; }
 .waterfront-album .breakfast-note { grid-template-columns:1fr; gap:1rem; }
 .barron-strip { grid-template-columns:1fr; } .barron-strip .photo { height:auto; aspect-ratio:4/3; }
 .scroll-album { height:calc(var(--journal-svh, 1svh) * 220); }
 .hero-media-toggle { top:5rem; font-size:.75rem; }
 .memory-slideshow .slide-dots { flex-wrap:wrap; }
 .memory-slideshow .slide-arrows { width:100%; }
 .memory-slideshow .slide-dots { order:2; width:100%; justify-content:center; }
}
/* Reduced motion (and before the scripts run): the album stops being a stack
   of full-height frames. The lead photograph keeps the scene title over it,
   exactly where the animation leaves it, and the others sit underneath as a
   strip, so the spread still reads as one album. */
.motion-off .scroll-album,
html:not(.motion-ready) .scroll-album { height:auto; }

.motion-off .scroll-album-frame,
html:not(.motion-ready) .scroll-album-frame {
  position:relative; height:auto; overflow:hidden;
  display:grid; grid-template-columns:repeat(2,1fr); gap:4px;
}

.motion-off .scroll-album-frame>img,
.motion-off .scroll-album-frame>video,
html:not(.motion-ready) .scroll-album-frame>img,
html:not(.motion-ready) .scroll-album-frame>video {
  position:relative; inset:auto; opacity:1; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
}

.motion-off .scroll-album-frame>img:first-of-type,
html:not(.motion-ready) .scroll-album-frame>img:first-of-type {
  grid-area:1/1/2/-1; aspect-ratio:16/9;
}

/* Same grid cell as the lead photograph, so the title sits on it rather than
   wherever the static position happens to fall. */
.motion-off .scroll-album-frame .scene-title,
html:not(.motion-ready) .scroll-album-frame .scene-title {
  position:relative; inset:auto; grid-area:1/1/2/-1;
  align-self:end; z-index:2; height:auto;
  padding:5rem var(--gutter) 2.5rem;
  background:linear-gradient(transparent,rgba(0,0,0,.62));
}

/* The frame-wide shade would darken the whole strip; the title carries it. */
.motion-off .scroll-album-frame.photo-shade:after,
html:not(.motion-ready) .scroll-album-frame.photo-shade:after { display:none; }

.motion-off .scroll-album-frame .info-locator,
html:not(.motion-ready) .scroll-album-frame .info-locator {
  top:var(--gutter); left:var(--gutter); right:auto; bottom:auto; z-index:3;
}

.motion-off .scroll-album-count,
html:not(.motion-ready) .scroll-album-count { display:none; }

@media(max-width:600px) {
  .motion-off .scroll-album-frame,
  html:not(.motion-ready) .scroll-album-frame { grid-template-columns:1fr; }
  /* A portrait lead on phones: the title and the weather panel need the room. */
  .motion-off .scroll-album-frame>img:first-of-type,
  html:not(.motion-ready) .scroll-album-frame>img:first-of-type { aspect-ratio:3/4; }
  .motion-off .scroll-album-frame .scene-title,
  html:not(.motion-ready) .scroll-album-frame .scene-title {
    padding:4rem var(--gutter) 1.5rem;
    flex-wrap:wrap; gap:.75rem 1rem;
  }
}
.motion-off .hero-media>* { transition:none; }
/* Keep motion focused on the photographs rather than their decorative frames. */
.personal-journal .tilt-right,.personal-journal .tilt-left { rotate:0deg; }
.personal-journal .bird-spot,.personal-journal .fun-fact { box-shadow:none; }
.personal-journal .fun-fact:not(.night):not(.warm) { background:var(--color-surface,var(--diary-mint)); }
/* Tablet cards need enough text width beside their photographs. */
.bird-spot figcaption,.moon-note figcaption,.bailey-story>* { min-width:0; }
.bird-spot :is(p,h3,.meta),.moon-note p,.place-title h3 { overflow-wrap:anywhere; }
@media(min-width:761px) and (max-width:1100px) {
 .pop-row { flex-direction:column; }
 .pop-row>* { flex:none; width:100%; max-width:none; }
 .bailey-story { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.5rem; }
}

/* Let the photographs lead; keep playback controls at the edge of the story. */
.hero-media-toggle { top:auto; bottom:2rem; padding:.65rem; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; }
.slideshow-controls [data-slide-play] { display:grid; place-items:center; min-width:44px; min-height:44px; padding:.5rem; }
.personal-journal #balloon .slide-photo>img { object-fit:cover; }
.balloon-slideshow .slides-viewport { height:calc(var(--journal-svh, 1svh) * 100); }
.balloon-slideshow .memory-slide { position:relative; height:100%; }
.personal-journal .balloon-slideshow .slide-photo { height:100%; aspect-ratio:auto; border-radius:0; }
.balloon-slideshow .memory-slide figcaption { position:absolute; inset:auto 0 0; padding:5rem var(--gutter) 5.5rem; color:var(--color-white); background:linear-gradient(transparent,rgba(0,0,0,.8)); pointer-events:none; }
.balloon-slideshow .memory-slide figcaption p { max-width:48rem; color:inherit; }
.balloon-slideshow .memory-slide .balloon-trip-notes { padding-top:8rem; }
.balloon-trip-notes .trip-quote { margin-block:1rem; }
.balloon-trip-notes .prose { max-width:48rem; }
.balloon-slideshow .slideshow-controls { position:absolute; bottom:.5rem; inset-inline:var(--gutter); color:var(--color-white); z-index:3; }
.balloon-slideshow .slideshow-controls button { color:inherit; }
.balloon-landing-photo { margin-bottom:2rem; }
.balloon-landing-photo img { width:100%; max-height:calc(var(--journal-svh, 1svh) * 70); object-fit:cover; }
.scrap-grid.four .cassowary-photo { grid-column:1 / -1; width:min(100%,52rem); justify-self:center; aspect-ratio:16/10; }
#bailey { --hotel-tile-opacity:.075; position:relative; isolation:isolate; }
#bailey::before { content:""; position:absolute; inset:0; z-index:-1; background:url('../images/tile_bg.webp') repeat; background-size:320px auto; opacity:var(--hotel-tile-opacity); pointer-events:none; }
.reef-blue-video { position:absolute; inset:0; opacity:var(--fade,0); }
.reef-word { z-index:3; }
@media(max-width:760px) {
 .balloon-slideshow .memory-slide figcaption { padding-bottom:8rem; }
 .balloon-trip-notes .annotation { font-size:1.6rem; }
 .balloon-trip-notes .trip-quote p { font-size:1.2rem; }
 .balloon-trip-notes .prose p { font-size:.95rem; line-height:1.65; }
}
.motion-ready .balloon-slideshow .slides-viewport { display:block; position:relative; overflow:hidden; }
.motion-ready .balloon-slideshow .memory-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 850ms ease,visibility 850ms; }
.motion-ready .balloon-slideshow .memory-slide.is-current { opacity:1; visibility:visible; }
.balloon-slideshow .slideshow-controls { border:0; margin-inline:0; }
.balloon-slideshow .memory-slide .balloon-trip-notes p { text-shadow:0 1px 3px #000; }
.personal-journal #balloon .balloon-slideshow .slide-photo { height:100%; }
#balloon .balloon-slideshow .slide-photo>video { object-fit:cover; }
.personal-journal .balloon-trip-notes .annotation { transform:none; line-height:1.35; margin-bottom:.75rem; }
.personal-journal .balloon-trip-notes .trip-quote { margin:.75rem 0 1.1rem; }
.personal-journal .balloon-trip-notes .trip-quote cite { color:inherit; opacity:.85; }
@media(max-width:760px) {
 .balloon-slideshow .slideshow-controls { flex-wrap:nowrap; align-items:flex-start; }
 .balloon-slideshow .slide-arrows { width:auto; flex:1; min-width:0; }
 .balloon-slideshow .slide-dots { gap:0; }
 .balloon-slideshow .slide-dots button { min-width:44px; width:44px; }
}
@media(max-width:760px) {
 .balloon-slideshow .slideshow-controls { display:grid; grid-template-columns:1fr 44px; gap:.25rem; }
 .balloon-slideshow .slide-arrows { display:contents; }
 .balloon-slideshow [data-slide-prev] { grid-area:1 / 1; justify-self:start; }
 .balloon-slideshow [data-slide-next] { grid-area:1 / 1; justify-self:start; margin-inline-start:48px; }
 .balloon-slideshow [data-slide-play] { grid-area:1 / 2; }
 .balloon-slideshow .slide-dots { grid-area:2 / 1 / 3 / 3; width:100%; }
}

/* Readable captions and a shared row for the landing photograph and notes. */
.personal-journal .memory-slide figcaption>p,
.personal-journal .memory-slide figcaption>.meta { font-size:clamp(1rem,1.2vw,1.2rem); line-height:1.65; }
.personal-journal .balloon-trip-notes .trip-quote p { font-size:clamp(1.15rem,1.6vw,1.5rem); }
.personal-journal .balloon-trip-notes .trip-quote cite { font-size:1rem; }
.personal-journal .balloon-trip-notes .prose p { font-size:clamp(1.0625rem,1.3vw,1.2rem); line-height:1.65; }
.personal-journal .balloon-slideshow figcaption>.annotation { font-size:clamp(1.8rem,3vw,2.6rem); }
.personal-journal .balloon-landing { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.balloon-landing .balloon-landing-photo { margin:0; }
.balloon-landing-photo img { display:block; height:auto; max-height:none; aspect-ratio:4/3; object-fit:cover; }
.balloon-landing-copy { min-width:0; }
.balloon-landing-copy .prose { max-width:none; }
@media(max-width:760px) {
 .personal-journal .balloon-landing { grid-template-columns:1fr; }
 .personal-journal .balloon-trip-notes .trip-quote p { font-size:1.15rem; }
 .personal-journal .balloon-trip-notes .prose p { font-size:1.0625rem; }
}
@media(max-width:760px) {
 .balloon-slideshow .slides-viewport { min-height:44rem; }
}

/* --------------------------------------------------------------------------
   Manual play fallback
   Shown by js/media.js only when a clip refuses to start on its own, or when
   reduced motion holds autoplay back. The poster stays visible behind it.
   -------------------------------------------------------------------------- */
.video-fallback-anchor { position:relative; }
.video-fallback {
  position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; min-width:44px; padding:.6rem 1.1rem;
  font-family:var(--font-sans); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-ink); background:var(--color-paper);
  border:0; border-radius:2rem; cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  transition:background 180ms var(--ease-soft), color 180ms var(--ease-soft), transform 180ms var(--ease-soft);
}
.video-fallback:hover { background:var(--color-accent); }
.video-fallback:focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; }
.video-fallback svg { flex-shrink:0; }
@media(max-width:480px) {
  .video-fallback { font-size:.62rem; padding:.55rem .9rem; letter-spacing:.1em; }
}
html.motion-off .video-fallback { transition:none; }

/* Composed frames put a title in the middle, so the play button steps aside
   instead of landing on the type. */
.reef-frame .video-fallback,
.scene-frame .video-fallback,
.scroll-album-frame .video-fallback {
  left:auto; top:auto;
  right:var(--gutter); bottom:var(--gutter);
  transform:none;
}
@media(max-width:760px) {
  .reef-frame .video-fallback,
  .scene-frame .video-fallback,
  .scroll-album-frame .video-fallback { right:1rem; bottom:1rem; }
}

/* --------------------------------------------------------------------------
   Readability floor
   Small editorial labels are part of the look, but several fell to 7-10px on
   narrow screens. Latin small-caps reads at 10px; Japanese does not, so it
   gets its own floor. Scoped through .personal-journal so these outrank the
   component rules they are correcting.
   -------------------------------------------------------------------------- */
html .personal-journal .trip-stamp span { font-size:.62rem; letter-spacing:.08em; }
html .personal-journal .arrival-weather .meta { font-size:.62rem; }
html .personal-journal .memory-slide figcaption>.meta { font-size:.68rem; }
html .personal-journal .balloon-facts .meta { font-size:.66rem; }
html .personal-journal .map-placeholder small { font-size:.66rem; }
html .personal-journal .living-photo .live-badge { font-size:.64rem; }
html .personal-journal .hotel-strips .meta { font-size:.6rem; letter-spacing:.08em; }
html .personal-journal .scene-title .info-weather .meta { font-size:.66rem; }
html .personal-journal .arrival-weather .weather-detail { font-size:.7rem; }
html .personal-journal .ocean-note .info-location small { font-size:.74rem; }
html .personal-journal .marker-label small { font-size:.66rem; }
html .personal-journal .map-footer .info-flight small { font-size:.62rem; }
html .personal-journal .map-progress .meta { font-size:.64rem; }
html .personal-journal .map-skip { font-size:.7rem; }

/* Japanese: nothing below roughly 12px, with a little less tracking so the
   glyphs keep their shape. */
html[lang=ja] .personal-journal :is(.meta, .trip-stamp span, .live-badge,
  .title-coordinate, .weather-detail, .flight-note, .kuranda-transfers,
  .info-flight small, .marker-label small, .map-placeholder small,
  .place-location, .info-locator small, .map-skip, .itinerary-number,
  .journey-itinerary time, .place-title>span, .info-calendar span,
  .chapter-nav .meta, .on-trip, .place-actions button, .places-filters button) {
  font-size:.78rem;
  letter-spacing:.05em;
}
html[lang=ja] .personal-journal .memory-slide figcaption>.meta { font-size:.8rem; }
html[lang=ja] .personal-journal .lang-switch { font-size:.78rem; }

/* --------------------------------------------------------------------------
   Guided tour
   The header button starts it; the sticky bar only exists while it runs.
   -------------------------------------------------------------------------- */
.site-header .tour-toggle { background:none; border:0; color:white; padding:10px; min-width:44px; min-height:44px; display:grid; place-items:center; cursor:pointer; flex-shrink:0; }
.tour-toggle svg { width:23px; height:23px; }
.tour-toggle:hover { opacity:.75; }
.tour-toggle:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; }
.tour-toggle[aria-pressed="true"] { color:var(--color-accent); }

.tour-bar {
  position:fixed; z-index:70;
  left:calc(1rem + env(safe-area-inset-left, 0px));
  bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:.1rem;
  padding:.25rem; border-radius:2rem;
  background:rgba(11,17,17,.5); border:1px solid #ffffff1f;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.26);
  color:white;
  /* Resting state is a single dot, so the tour never sits on the journal.
     Everything else unfolds only when the reader reaches for it. */
  opacity:.5;
  transition:opacity 260ms var(--ease-soft), background 260ms var(--ease-soft);
}
.tour-bar:hover, .tour-bar:focus-within { opacity:1; background:rgba(11,17,17,.93); }
.tour-bar[hidden] { display:none; }

/* The hands-free tour must reach the whole directory, including entries that
   normally live inside its independently scrolling panel. */
body.tour-active .places-list { max-height:none; overflow:visible; }

@media (max-height:480px) {
  body.personal-journal .hero .hero-title { margin-top:6.5rem; }
}

.tour-bar button { background:none; border:0; color:inherit; cursor:pointer; display:grid; place-items:center; min-width:40px; min-height:40px; border-radius:50%; padding:0; }
.tour-bar button:hover { background:#ffffff1f; }
.tour-bar button:focus-visible { outline:3px solid var(--color-accent); outline-offset:-2px; }
.tour-bar svg { width:17px; height:17px; }
.tour-bar [hidden] { display:none; }
.tour-play { background:var(--color-accent)!important; color:var(--color-ink)!important; }
.tour-play:hover { filter:brightness(1.08); }

/* The extra controls and the stop name fold away until they are wanted. */
.tour-step, .tour-status {
  max-width:0; min-width:0!important; overflow:hidden; opacity:0; padding:0;
  transition:max-width 280ms var(--ease-soft), opacity 200ms var(--ease-soft), margin 280ms var(--ease-soft);
}
.tour-bar:hover .tour-step, .tour-bar:focus-within .tour-step { max-width:44px; min-width:40px!important; opacity:1; }
.tour-bar:hover .tour-status, .tour-bar:focus-within .tour-status { max-width:13rem; opacity:1; padding-inline:.55rem .3rem; }
.tour-status { display:flex; flex-direction:column; justify-content:center; }
.tour-count { font-size:.6rem; letter-spacing:.12em; opacity:.6; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tour-label { font-size:.74rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tour-exit { opacity:.6; }
.tour-bar:hover .tour-exit:hover { opacity:1; }

/* No hover to unfold with, so touch keeps a compact row: the name is dropped
   rather than the controls. */
@media(hover:none),(pointer:coarse) {
  .tour-bar { opacity:.9; background:rgba(11,17,17,.9); }
  .tour-step { max-width:44px; min-width:40px!important; opacity:1; }
  .tour-status { max-width:0; opacity:0; padding:0; }
  .tour-bar:focus-within .tour-status { max-width:8rem; opacity:1; padding-inline:.5rem .25rem; }
}
@media(max-width:400px) {
  .tour-bar { left:.6rem; gap:0; }
  .tour-bar button { min-width:38px; min-height:38px; }
  .tour-bar:hover .tour-step, .tour-bar:focus-within .tour-step, .tour-step { min-width:38px!important; }
}

/* Four icon controls plus the brand and the menu need a little help below
   400px, or the brand and the menu label wrap onto second lines. */
@media(max-width:400px) {
  .site-header { padding-inline:1rem; gap:0; }
  .site-header .brand { white-space:nowrap; font-size:.82rem; letter-spacing:-.02em; }
  .site-header .brand-mark { width:24px; height:24px; }
  .site-header .menu-toggle { white-space:nowrap; padding:.35rem .5rem; font-size:.7rem; }
  .site-header .tour-toggle,
  .site-header .motion-toggle,
  .site-header .music-toggle { padding:6px; min-width:38px; }
  .site-header .tour-toggle svg,
  .site-header .motion-toggle svg,
  .site-header .music-toggle svg { width:20px; height:20px; }
}