.passport-journal { padding:0 24px; color:var(--ink); }
.journal-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.journal-kicker { display:block; font:700 10px var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.passport-journal h3 { margin:0; font:800 24px var(--font-display); letter-spacing:-.02em; }
.journal-count { font-size:12px; white-space:nowrap; }
.journal-recent { padding:12px 0 24px; }
.recent-memories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.recent-memories article { min-width:0; padding:18px 12px 12px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--paper) 88%,#dcb779); }
.recent-memories article > p { font-size:10px; text-align:center; color:var(--ink-soft); margin:12px 0 0; }
.memory-stamp { display:block; width:100%; border:0; background:transparent; padding:8px; color:inherit; cursor:pointer; font:inherit; border-radius:12px; }
.memory-stamp:focus-visible { outline:3px solid var(--red-ink); outline-offset:3px; }
.memory-stamp .stamp { width:100%; }
.memory-stamp .stamp-face { max-width:180px; justify-self:center; }
.journal-discovery { display:grid; grid-template-columns:minmax(0,1fr) 120px; align-items:center; gap:24px; padding:22px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--paper) 85%,#78b0a0); margin-bottom:28px; }
.journal-discovery h3 { margin-bottom:12px; }
.journal-discovery p { font-size:14px; }
.journal-discovery progress, .memory-next progress { display:block; width:100%; height:8px; accent-color:#197a72; margin-top:12px; }
.discovery-seal { width:120px; aspect-ratio:1; border:3px double var(--ink-soft); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; rotate:8deg; background:color-mix(in srgb,var(--paper) 70%,transparent); }
.discovery-seal span { font-size:30px; }
.discovery-seal small { font-size:8px; letter-spacing:.12em; }
.journal-categories { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.journal-categories .chip[aria-pressed=true] { background:var(--ink); color:var(--paper); }
.journal-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.journal-filters label { display:grid; gap:6px; font-size:12px; font-weight:700; min-width:0; }
.journal-filters select { width:100%; min-width:0; min-height:44px; padding:8px; font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; }
.passport-scroll-shelf.journal-shelf { max-height:none; overflow:visible; padding-bottom:20px; }
.journal-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:24px 0 0; font-size:12px; }
.journal-pagination button:disabled { opacity:.4; cursor:default; }
.journal-seals { margin-top:24px; color:var(--ink); }
.journal-seals > summary { padding:16px 0; cursor:pointer; font-weight:700; }
.memory-details { display:grid; grid-template-columns:1fr 1.4fr; gap:8px 12px; text-align:left; padding:16px 0; margin:0; border-top:1px solid var(--line); font-size:13px; }
.memory-details dt { color:var(--ink-soft); }
.memory-details dd { margin:0; overflow-wrap:anywhere; }
.memory-next { text-align:left; border-top:1px solid var(--line); padding-top:16px; }
@media(max-width:600px) {
  .passport-journal { padding:0 16px; }
  .recent-memories { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .recent-memories article:nth-child(3) { display:none; }
  .recent-memories article { padding:14px 6px 10px; }
  .journal-discovery { grid-template-columns:minmax(0,1fr) 70px; gap:10px; padding:16px; }
  .discovery-seal { width:70px; }
  .discovery-seal span { font-size:22px; }
  .discovery-seal small { font-size:6px; letter-spacing:0; }
  .journal-heading { align-items:flex-start; }
  .passport-journal h3 { font-size:22px; }
  .journal-filters { grid-template-columns:1fr; }
}

/* The page scrolls naturally; the expanded booklet has one native scroll root. */
.journal-filter-fold > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:12px; font-weight:700; }
.journal-filter-fold[open] > summary { margin-bottom:8px; }
.passport-pages, .passport-scroll-shelf.journal-shelf { touch-action:pan-y; }
.passport-card .passport-pages { overflow:visible; }
dialog.passport-booklet { box-sizing:border-box; width:min(760px,calc(100vw - 20px)); max-width:760px; height:auto; max-height:calc(100dvh - 20px); margin:auto; padding:0 18px max(20px,env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; touch-action:pan-y; background:var(--paper); color:var(--ink); }
.passport-booklet .full-booklet-header { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--paper); border-bottom:1px solid var(--line); padding:16px 0; }
.passport-booklet h2 { font-size:26px; margin:0; }
.passport-booklet .full-booklet-header .btn { flex-shrink:0; min-height:44px; }
.full-booklet-content { padding:16px 0; }
.passport-booklet .memory-stamp { touch-action:pan-y; }
@media(max-width:600px) {
  .passport-card .passport-meta-box { padding:12px 16px; gap:0; }
  .passport-card .passport-arch3d-col { display:none; }
  .passport-card .passport-progress-col { width:100%; }
  .passport-card .passport-meta-box { grid-template-columns:1fr; }
  .passport-journal .journal-kicker { display:none; }
  .passport-journal h3 { font-size:19px; }
  .journal-heading { margin-bottom:8px; align-items:center; }
  .journal-recent { padding:4px 0 12px; }
  .recent-memories article { padding:8px 4px; }
  .recent-memories .stamp-face { width:98px; aspect-ratio:1; }
  .recent-memories .stamp-name { font-size:11px !important; }
  .recent-memories .stamp-top, .recent-memories .stamp-date { font-size:7px !important; letter-spacing:.08em; }
  .recent-memories .stamp-hood { font-size:7px !important; }
  .recent-memories .stamp-line { display:none; }
  .recent-memories article > p { margin:4px 0 0; font-size:9px; }
  .journal-recent > .small { font-size:11px; margin:8px 0; }
  .journal-discovery { display:block; padding:12px; margin:0 0 16px; }
  .journal-discovery .discovery-seal, .journal-discovery > div > b { display:none; }
  .journal-discovery h3 { font-size:17px; margin-bottom:4px; }
  .journal-discovery p { font-size:12px; margin:5px 0; }
  .journal-discovery progress { margin-top:6px; height:5px; }
  .journal-discovery .btn { min-height:44px; font-size:11px; padding:8px 12px; margin-top:4px; }
  .journal-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:10px 0 4px; }
  .journal-categories .chip { min-width:0; min-height:44px; padding:6px 3px; font-size:10px; letter-spacing:0; text-transform:none; }
  .journal-filter-fold > summary { font-size:11px; }
  .passport-card .passport-pages { padding:12px; }
  .journal-pagination { gap:6px; margin:12px 0 0; font-size:11px; flex-wrap:nowrap; }
  .journal-pagination .btn { min-width:0; min-height:44px; font-size:10px; padding:8px; }
  .journal-seals { margin-top:8px; }
  .passport-card .passport-scroll-footer { margin-top:4px; }
  .passport-card .passport-scroll-shelf.journal-shelf { max-height:none; overflow:visible; padding:0; }
  dialog.passport-booklet { width:100%; max-width:100%; max-height:100dvh; height:100vh; height:100dvh; max-height:100dvh; margin:0; border-radius:0; border:0; padding-inline:14px; }
  .passport-booklet .stamp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
}