/* Navigation and content guidance, scoped independently of existing visual stages. */
:root { --navigation-height:98px; --nav-ink:#173033; --nav-teal:#216e75; --nav-line:#cbdcd9; }
.site-header { position:relative; }
.site-header .header-in { gap:24px; justify-content:space-between; }
.navigation-menu { display:flex; align-items:center; gap:24px; font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:0; }
.navigation-menu a,.navigation-menu summary { letter-spacing:0; }
.navigation-group { position:static; border:0; }
.navigation-group>summary { display:flex; align-items:center; gap:9px; min-height:48px; list-style:none; cursor:pointer; white-space:nowrap; }
.navigation-group>summary::-webkit-details-marker { display:none; }
.navigation-group>summary::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.navigation-group[open]>summary::after { transform:rotate(225deg); }
.navigation-group.is-current>summary { color:var(--nav-teal); text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:2px; }
.navigation-direct { padding:12px 0; white-space:nowrap; }
.navigation-menu .navigation-contact { padding:13px 16px; border:1px solid var(--nav-teal); color:var(--nav-teal); white-space:nowrap; }
.navigation-panel { position:absolute; top:100%; right:24px; width:310px; padding:24px; background:#fff; border-top:2px solid var(--nav-teal); box-shadow:0 18px 24px #17303320; max-height:calc(100dvh - var(--navigation-height) - 20px); overflow:auto; }
.navigation-stores { left:50%; right:auto; transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(1080px,calc(100vw - 48px)); gap:30px; padding:28px 32px; }
.navigation-store-title { display:block; line-height:1.5; }
.navigation-store-title img { width:100%; height:104px; object-fit:cover; filter:none; margin-bottom:12px; }
.navigation-store-title span { display:block; font-family:var(--serif); font-size:22px; }
.navigation-store-title small { display:block; margin:6px 0 13px; font-size:12px; font-weight:400; color:#526762; }
.navigation-links a { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; padding:10px 0; border-bottom:1px solid #e3e9e6; font-size:14px; }
.navigation-links a::after { content:"→"; color:var(--nav-teal); }
.navigation-links a:hover,.navigation-links a[aria-current],.navigation-direct[aria-current] { color:var(--nav-teal); text-decoration:underline; text-underline-offset:4px; }
.navigation-home { display:none; }
.site-header .menu-toggle { display:none; }
.navigation-menu :focus-visible,.context-menu a:focus-visible,.page-contents a:focus-visible,.related-pages a:focus-visible,.information-section a:focus-visible,.information-section summary:focus-visible { outline:3px solid #967339; outline-offset:4px; }
.breadcrumb ol { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px; list-style:none; padding:0; margin:0; }
.breadcrumb li { display:flex; gap:12px; align-items:center; }
.breadcrumb li+li::before { content:"/"; color:#708581; }
.breadcrumb a { text-decoration:underline; text-underline-offset:3px; }
.context-menu { background:#eef5f3; border-bottom:1px solid var(--nav-line); }
.context-menu>.wide { display:flex; align-items:center; gap:28px; min-height:66px; }
.context-label { font-family:var(--serif); font-size:19px; flex-shrink:0; }
.context-menu>.wide>div { display:flex; gap:8px 24px; flex-wrap:wrap; }
.context-menu a { padding:12px 0; font-size:13px; border-bottom:3px solid transparent; }
.context-menu a[aria-current] { color:var(--nav-teal); font-weight:700; border-color:var(--nav-teal); }
.page-contents { background:#fff; border-bottom:1px solid var(--nav-line); padding:24px 0; }
.page-contents>.wide { display:flex; gap:30px; align-items:flex-start; }
.page-contents p { font-size:12px; color:#506866; margin:6px 0; flex-shrink:0; }
.page-contents ol { display:flex; flex-wrap:wrap; gap:12px 24px; list-style:none; padding:0; margin:0; }
.page-contents a { display:flex; gap:9px; align-items:baseline; font-size:13px; min-height:32px; }
.page-contents a>span { font-family:var(--sans); font-size:11px; color:var(--nav-teal); }
.page-contents a:hover { color:var(--nav-teal); text-decoration:underline; }
#main [id] { scroll-margin-top:calc(var(--navigation-height) + 20px); }
.information-section { padding:68px 0; background:#fff; color:var(--nav-ink); border-top:1px solid var(--nav-line); }
.information-section h2 { font-family:var(--serif); font-size:28px; line-height:1.5; letter-spacing:0; margin:8px 0 28px; }
.information-section h3 { font-size:18px; letter-spacing:0; line-height:1.6; margin:0 0 8px; }
.information-section p { font-size:15px; line-height:1.95; margin:0 0 16px; }
.information-section a { color:var(--nav-teal); text-decoration:underline; text-underline-offset:4px; }
.consultation-steps { padding:0; margin:0; list-style:none; }
.consultation-steps li { display:grid; grid-template-columns:54px 1fr; gap:22px; padding:24px 0; border-top:1px solid var(--nav-line); }
.step-number { font-family:var(--serif); font-size:31px; line-height:1.5; color:var(--nav-teal); }
.consultation-steps p { margin:0; }
.information-columns { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.information-columns>div { border-top:2px solid var(--nav-teal); padding-top:22px; }
.information-questions { margin-top:26px; border-top:1px solid var(--nav-line); }
.information-questions details { padding:18px 0; border-bottom:1px solid var(--nav-line); }
.information-questions summary { cursor:pointer; font-size:15px; font-weight:700; line-height:1.8; }
.information-questions p { padding-top:18px; margin:0; }
.information-section .information-action { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:30px 0 0; }
.information-action a { background:var(--nav-teal); color:#fff; padding:15px 22px; text-decoration:none; font-size:14px; }
.information-action span { font-size:18px; font-weight:700; white-space:nowrap; }
.information-note { margin-top:28px!important; color:#506866; }
.reading-list { border-top:1px solid var(--nav-line); }
.reading-list a { display:grid; grid-template-columns:110px 1fr 24px; gap:20px; padding:20px 0; border-bottom:1px solid var(--nav-line); text-decoration:none; align-items:center; }
.reading-list time { font-size:12px; color:#526762; }
.reading-list strong { font-family:var(--serif); font-size:18px; }
.related-pages { padding:36px 0; background:#edf5f4; border-top:1px solid var(--nav-line); }
.related-pages p { font-size:13px; margin:0 0 14px; color:#526762; }
.related-pages .wide>div { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.related-pages a { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:15px; min-height:54px; border-bottom:1px solid #a8c5c0; }
.related-pages a::after { content:"→"; color:var(--nav-teal); }
.footer-directory { width:var(--wide); margin:44px auto 0; display:grid; grid-template-columns:repeat(5,1fr); gap:26px; padding-top:30px; border-top:1px solid #71847f; }
.site-footer .footer-directory h2 { color:#d0e5dd; font-size:14px; }
.site-footer .footer-directory a { min-height:32px; line-height:1.65; font-size:12px; }
.access-actions { margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
.access-actions a { font-size:13px!important; border-bottom:1px solid var(--nav-teal); }
.mobile-contact { grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:1120px) {
  :root { --navigation-height:78px; }
  .site-header .header-in { gap:14px; }
  .site-header .menu-toggle { display:inline-flex!important; align-items:center; justify-content:center; gap:8px; flex-shrink:0; min-width:74px; min-height:44px; border:1px solid #8aaba4; border-radius:4px; font-family:var(--sans); color:var(--nav-ink); background:transparent; margin-left:auto; }
  .menu-toggle i { font-style:normal; font-size:23px; line-height:1; }
  .navigation-menu { display:none; position:fixed; top:var(--navigation-height); left:0; right:0; bottom:auto; height:calc(100dvh - var(--navigation-height)); overflow:auto; overscroll-behavior:contain; background:#f7fbf9; padding:20px 32px 40px; }
  .navigation-menu.is-open { display:block; }
  .navigation-open { overflow:hidden; }
  .navigation-group { border-bottom:1px solid var(--nav-line); }
  .navigation-group>summary { min-height:62px; justify-content:space-between; font-size:18px; }
  .navigation-panel { position:static; width:100%; max-height:none; padding:0 0 22px; border:0; box-shadow:none; background:transparent; transform:none; overflow:visible; }
  .navigation-stores { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .navigation-store-title img { height:90px; }
  .navigation-store-title span { font-size:18px; }
  .navigation-home,.navigation-direct,.navigation-menu .navigation-contact { display:block; padding:18px 0; border:0; border-bottom:1px solid var(--nav-line); font-size:16px; }
  .navigation-menu .navigation-contact { color:var(--nav-teal); }
  .footer-directory { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px) {
  :root { --navigation-height:66px; }
  .site-header .header-in { gap:10px; }
  .site-header .menu-toggle { min-width:70px; margin-left:0; height:44px; font-size:10px; padding:0 8px; }
  .navigation-menu { padding:12px 20px 36px; }
  .navigation-stores { display:block; }
  .navigation-store+.navigation-store { margin-top:24px; }
  .navigation-store-title img { display:none; }
  .navigation-store-title { border-left:3px solid #b8975a; padding-left:12px; }
  .navigation-store-title small { margin-bottom:6px; }
  .navigation-links a { font-size:14px; min-height:46px; padding:10px 4px; }
  .context-menu>.wide { display:block; padding-top:14px; padding-bottom:10px; }
  .context-label { font-size:17px; }
  .context-menu>.wide>div { gap:2px 18px; margin-top:7px; }
  .context-menu a { min-height:44px; font-size:12px; padding:12px 0 9px; }
  .page-contents { padding:19px 0 21px; }
  .page-contents>.wide { display:block; }
  .page-contents p { margin:0 0 9px; }
  .page-contents ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; }
  .page-contents a { min-height:44px; font-size:12px; gap:7px; align-items:flex-start; line-height:1.7; padding:6px 0; }
  .page-contents a>span { flex-shrink:0; }
  .information-section { padding:44px 0; }
  .information-section h2 { font-size:24px; margin-bottom:23px; }
  .information-section h3 { font-size:17px; }
  .information-section p { font-size:14px; }
  .consultation-steps li { grid-template-columns:32px 1fr; gap:14px; padding:21px 0; }
  .step-number { font-size:25px; }
  .information-columns { grid-template-columns:1fr; gap:24px; }
  .reading-list a { grid-template-columns:1fr 20px; gap:5px 14px; padding:18px 0; }
  .reading-list time { grid-column:1/-1; }
  .reading-list strong { font-size:17px; }
  .related-pages .wide>div { grid-template-columns:1fr; gap:4px; }
  .footer-directory { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
  .mobile-contact { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mobile-contact a { padding:6px 3px; }
  .mobile-contact span { font-size:9px; }
  .mobile-contact strong { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .navigation-menu *, .context-menu *, .page-contents * { transition:none; scroll-behavior:auto; }
}

/* 2026-09-14: shared photo menus, journal and documented history. */
.navigation-about { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.navigation-feature { display:block; min-width:0; font-weight:400; }
.navigation-feature>img { width:100%; height:122px; object-fit:cover; margin-bottom:16px; }
.navigation-feature>div { position:relative; padding-bottom:22px; }
.navigation-feature span { display:block; font:700 19px/1.5 var(--serif); color:var(--nav-ink); }
.navigation-feature p { font:400 12px/1.85 var(--sans); color:#526762; margin:8px 0 0; }
.navigation-feature small { display:block; margin-bottom:5px; font:700 11px/1.5 var(--sans); color:var(--nav-teal); }
.navigation-feature b { position:absolute; bottom:0; right:0; color:var(--nav-teal); }
.navigation-feature:hover span,.navigation-feature[aria-current] span { color:var(--nav-teal); text-decoration:underline; text-underline-offset:5px; }
.navigation-journal { display:block; }
.navigation-journal-lead { display:flex; gap:20px; justify-content:space-between; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--nav-line); }
.navigation-journal-lead span { font:700 23px/1.5 var(--serif); }
.navigation-journal-lead p { font-size:12px; font-weight:400; color:#526762; margin:6px 0 0; }
.navigation-journal-links { display:flex; gap:20px; align-items:center; font-size:12px; }
.navigation-journal-links a { border-bottom:1px solid var(--nav-teal); padding:9px 0; }
.navigation-journal-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.navigation-journal-grid .navigation-feature p { display:none; }
.navigation-journal-grid .navigation-feature span { font-size:18px; }
.navigation-journal-grid .navigation-feature>img { object-fit:contain; background:#f5f6f1; }

/* Decorative angles are removed from type, not from photos or water effects. */
#main :is(h1,h2,h3) :is(span,b,strong,em),
.hero-title-sub strong,.word-swing,.inline-hot,.brand-hero-split .brand-area { transform:none!important; rotate:0deg!important; }
#main :is(em,i) { font-style:normal; }

.information-section { background:linear-gradient(#f8faf766,#f8faf766),url('/assets/img/bg-fishscale-washi.webp') top center/1400px auto repeat-y; }
.information-section:nth-of-type(even) { background:linear-gradient(#f1f9f7dc,#f1f9f7dc),url('/assets/img/bg-ocean-current.webp') center/cover; }
.related-pages { background:linear-gradient(#edf5f4d9,#edf5f4d9),url('/assets/img/bg-fishscale-washi.webp') center/cover; }
.site-footer .footer-directory h2 { color:var(--nav-teal); }
.access-card-grid .access-purpose { min-height:100px; font-size:14px; line-height:1.9; color:#304846; margin:20px 0; }
body[data-page="access"] .story-stage-copy>p:not(.kicker) { max-width:700px; font-size:15px; line-height:2.1; }
body[data-page="access"] .story-stage-photo { opacity:.65; }

.latest-journal { padding:80px 0 72px; background:linear-gradient(#f3faf799,#f3faf799),url('/assets/img/bg-fishscale-washi.webp') top center/1400px auto repeat-y; border-top:1px solid var(--nav-line); }
.journal-heading,.history-heading { text-align:center; margin:0 auto 38px; }
.journal-heading h2,.history-heading h2 { font:600 42px/1.45 var(--serif); letter-spacing:0; margin:10px 0 18px; }
.journal-heading h2 span,.history-heading h2 span { color:var(--nav-teal); }
.journal-heading>p:last-child,.history-heading>p:last-child { font-size:15px; line-height:2; color:#304846; }
.journal-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.journal-card { display:flex; flex-direction:column; background:#fff; border:1px solid #cbdcd9; min-width:0; transition:box-shadow .2s; }
.journal-card figure { aspect-ratio:10/7; margin:0; overflow:hidden; background:#f5f6f1; }
.journal-card img { display:block; width:100%; height:100%; object-fit:contain; }
.journal-card>div { display:flex; flex:1; flex-direction:column; padding:22px; }
.journal-card time { font:700 12px/1.5 var(--sans); color:var(--nav-teal); }
.journal-card h3 { font:600 23px/1.5 var(--serif); margin:12px 0; letter-spacing:0; overflow-wrap:anywhere; }
.journal-card p { font:400 13px/1.9 var(--sans); color:#304846; margin:0 0 22px; }
.journal-card span { display:flex; justify-content:space-between; margin-top:auto; font:700 12px/1.5 var(--sans); color:var(--nav-teal); }
.journal-card:hover { box-shadow:0 8px 22px #17303317; }
.journal-card:hover h3 { color:var(--nav-teal); }
.journal-tail { margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.journal-tail p { margin:0; font-size:12px; color:#526762; }
.journal-tail a { font-size:14px; padding:12px 0; border-bottom:1px solid var(--nav-teal); color:var(--nav-teal); }
.journal-card:focus-visible,.navigation-feature:focus-visible,.history-section a:focus-visible { outline:3px solid #9b7a3a; outline-offset:4px; }

.history-section { padding:82px 0; background:linear-gradient(#f7faf7b8,#f7faf7b8),url('/assets/img/bg-fishscale-washi.webp') top center/1400px auto repeat-y; border-top:1px solid var(--nav-line); }
.history-origin { display:grid; grid-template-columns:180px 1fr; gap:38px; padding:30px 0 44px; border-bottom:1px solid #bdc8bf; }
.history-origin>span { font:500 56px/1.2 var(--serif); color:var(--nav-teal); }
.history-origin small,.history-year small { display:block; font:400 12px/1.6 var(--sans); color:#526762; margin-top:8px; }
.history-origin h3,.history-text h3 { font:600 28px/1.5 var(--serif); margin:0 0 14px; letter-spacing:0; }
.history-origin p,.history-text p { font-size:15px; line-height:2; color:#304846; margin:0; }
.history-timeline { list-style:none; padding:0; margin:0; }
.history-timeline li { display:grid; grid-template-columns:115px minmax(0,1fr) minmax(0,1fr); gap:38px; padding:42px 0; border-bottom:1px solid #bdc8bf; align-items:center; }
.history-year { align-self:start; font:500 36px/1.2 var(--serif); color:var(--nav-teal); }
.history-photo { display:block; aspect-ratio:3/2; background:#f2f5f0; }
.history-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.history-text a { display:inline-block; margin-top:22px; padding-bottom:5px; border-bottom:1px solid var(--nav-teal); font-size:13px; color:var(--nav-teal); }
.history-note { margin:25px 0 0; font-size:12px; color:#526762; }
.home-history-note { margin:36px auto 0; max-width:760px; border-top:1px solid #c1d1ca; padding-top:28px; }
.home-history-note p { font-size:14px; line-height:2.1; color:#304846; }
.home-history-note a { display:inline-block; font-size:14px; margin-top:12px; padding-bottom:5px; border-bottom:1px solid var(--nav-teal); color:var(--nav-teal); }
@media(max-width:1120px) {
  .navigation-about,.navigation-journal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .journal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .history-timeline li { grid-template-columns:85px minmax(0,1fr) minmax(0,1fr); gap:24px; }
}
@media(max-width:720px) {
  .navigation-about { display:grid; }
  .navigation-about,.navigation-journal-grid { grid-template-columns:1fr; gap:18px; }
  .navigation-feature { display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; padding-bottom:16px; border-bottom:1px solid var(--nav-line); }
  .navigation-feature>img { width:96px; height:84px; margin:0; }
  .navigation-feature span { font-size:17px; }
  .navigation-feature p { font-size:12px; }
  .navigation-journal-lead { display:block; padding-top:8px; }
  .navigation-journal-lead span { font-size:20px; }
  .navigation-journal-links { margin-top:8px; gap:24px; }
  .navigation-journal-grid .navigation-feature span { font-size:17px; }
  .latest-journal,.history-section { padding:48px 0; }
  .latest-journal,.history-section,.information-section { background-size:auto,720px auto; }
  .journal-heading h2,.history-heading h2 { font-size:30px; }
  .journal-heading>p:last-child,.history-heading>p:last-child { font-size:14px; }
  .journal-heading,.history-heading { margin-bottom:26px; }
  .journal-grid { grid-template-columns:1fr; gap:20px; }
  .journal-card>div { padding:22px; }
  .journal-card h3 { font-size:24px; }
  .journal-tail { display:block; }
  .journal-tail a { display:inline-block; margin-top:14px; }
  .access-card-grid .access-purpose { min-height:0; }
  body[data-page="access"] .story-stage-copy>p:not(.kicker) { font-size:14px; line-height:1.95; }
  .history-origin { grid-template-columns:1fr; gap:20px; padding:10px 0 30px; }
  .history-origin>span { font-size:44px; }
  .history-origin h3,.history-text h3 { font-size:25px; }
  .history-origin p,.history-text p { font-size:14px; }
  .history-timeline li { grid-template-columns:1fr; gap:20px; padding:30px 0; }
  .history-year { font-size:31px; display:flex; align-items:baseline; gap:18px; }
  .history-year small { margin:0; }
  .history-text a { margin-top:16px; }
  .home-history-note { margin-top:26px; }
  .home-history-note br { display:none; }
  .numbers-voice h2 .numbers-title-line { font-size:22px!important; letter-spacing:0!important; white-space:nowrap; }
}