/* Exact static font data approved as candidate C; only the hero uses weight 700. */
@font-face {
  font-family: 'Noto Serif JP'; font-style: normal; font-weight: 700; font-display: block;
  src: url('assets/fonts/noto-serif-jp-hero-700.ttf') format('truetype');
  unicode-range: U+4ECA,U+65E5,U+3001,U+306A,U+306B,U+98DF,U+3079,U+308B,U+FF1F;
}
:root {
  --paper: #f8f6f2; --green: #234034; --deep: #152e25; --gold: #bc995f;
  --ink: #26382f; --muted: #657266; --line: #dedbd3; --white: #fffefa;
  --sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Segoe UI', sans-serif;
  --serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
  --store-serif: 'Noto Serif', 'Noto Serif JP', Georgia, 'Times New Roman', serif;
  --type-base: 14px; --type-caption: 11px; --type-ui: 12px; --type-body: 14px;
  --type-card: 14px; --type-section: 17px; --type-detail: 26px;
  --type-hero: 34px;
  --leading-ui: 1.4; --leading-body: 1.6; --leading-title: 1.4;
  --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px;
  --page-gutter: 16px; --space-5: 16px; --space-6: 24px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px;
  --touch-size: 44px; --chip-size: 36px;
  --chip-inset: calc((var(--touch-size) - var(--chip-size))/2);
  --nav-height: 66px; --header-height: 56px;
  color-scheme: light;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;background:#e9e7e0;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button{border:0}svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}img{display:block;width:100%;object-fit:cover}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:600}h2{font-size:18px;letter-spacing:.035em}h3{font-size:15px}p{overflow-wrap:anywhere}.app-shell{max-width:520px;min-height:100dvh;margin:auto;background:var(--paper);position:relative;box-shadow:0 0 50px #1c322914}.app-header{height:74px;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:var(--paper);border-bottom:1px solid #e9e5dc;position:relative;z-index:10}.brand{display:flex;gap:10px;align-items:center;font-size:16px;font-weight:600;letter-spacing:.025em}.brand-mark{color:var(--green)}.brand-mark svg{width:27px;height:30px;fill:currentColor;stroke:none}.brand small{display:block;font-size:8px;letter-spacing:.17em;font-weight:400;color:var(--muted);margin-top:2px}.icon-button{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;background:transparent;border-radius:50%}.icon-button:hover{background:#2340340b}.bottom-nav{position:fixed;z-index:25;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);display:grid;grid-template-columns:repeat(4,1fr);background:#fffefbf7;backdrop-filter:blur(12px);border-top:1px solid #dddcd2;padding:10px 7px calc(8px + env(safe-area-inset-bottom));min-height:70px}.bottom-nav a{display:flex;position:relative;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:44px;font-size:10px;color:#748078}.bottom-nav svg{width:24px;height:24px}.bottom-nav a.active{color:var(--green);font-weight:700}.bottom-nav a.active:before{content:'';width:18px;height:2px;position:absolute;top:-10px;background:var(--green);border-radius:2px}.saved-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);position:absolute;top:0;right:36%}#app{padding-bottom:92px;min-height:calc(100dvh - 74px)}.loading{padding:100px 20px;text-align:center;color:var(--muted)}.hero{height:298px;position:relative;overflow:hidden;background:var(--green)}.hero>img{height:100%;object-position:center 49%}.hero:after{content:'';position:absolute;inset:0;background:#0a211c5c}.hero-copy{position:absolute;inset:0;z-index:1;padding:34px 26px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--white)}.hero .eyebrow{color:#ede3cd;font-size:9px;margin-bottom:14px}.hero h1{font-family:var(--serif);font-weight:500;font-size:37px;line-height:1.55;letter-spacing:.01em;text-shadow:0 1px 12px #10251e40}.hero-copy p:last-child{font-size:11px;line-height:1.85;margin-top:13px;letter-spacing:.025em}.hero-preview{position:absolute;top:12px;right:15px;z-index:3;font-size:8px;background:#16342bad;padding:3px 7px;color:#fff;border-radius:3px}.page-content{padding:25px 22px 12px}.section{margin-bottom:32px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}.section-title h2{padding-left:12px;border-left:3px solid var(--gold);line-height:1.3}.section-title a,.text-link{font-size:11px;color:var(--muted);text-underline-offset:4px}.section-title small{font-size:10px;color:var(--muted);font-weight:400}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:.2em;font-weight:500}.cuisine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 14px}.cuisine-button{display:flex;align-items:center;flex-direction:column;background:transparent;padding:0;gap:8px;font-size:12px}.cuisine-photo{width:78px;height:78px;max-width:100%;border-radius:50%;padding:3px;border:1px solid #c3a36f}.cuisine-photo img{height:100%;border-radius:50%}.cuisine-button:active .cuisine-photo{background:#d8c79f}.scene-grid{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d7d7cd;background:transparent;min-height:39px;padding:7px 11px;border-radius:6px;font-size:11px;white-space:nowrap}.chip svg{width:16px;height:16px;stroke-width:1.5}.chip.active{background:var(--green);color:var(--white);border-color:var(--green)}.chip .count{font-size:10px;color:#849186;margin-left:2px}.chip.active .count{color:#d5ded6}.featured-main{margin-bottom:13px}.featured-card{display:block;position:relative;border-radius:10px;overflow:hidden;background:var(--white)}.featured-card .photo-wrap{aspect-ratio:1.65;position:relative;overflow:hidden}.featured-card img{height:100%;transition:transform .25s}.featured-card:active img{transform:scale(1.025)}.photo-wrap .photo-note{position:absolute;bottom:7px;right:7px;background:#fffefbdf;color:#465b4d;padding:2px 6px;border-radius:3px;font-size:8px;letter-spacing:.025em}.featured-body{padding:12px 13px 14px}.featured-body .eyebrow{font-size:8px;margin-bottom:4px}.featured-body h3{font-family:var(--serif);font-size:20px;line-height:1.45;margin-bottom:6px}.featured-body .tagline{font-size:11px;color:#66746a;line-height:1.7}.card-meta{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:8px}.card-meta svg{width:12px;height:12px}.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 11px}.featured-grid .photo-wrap{aspect-ratio:1.25}.featured-grid h3{font-family:var(--sans);font-size:12px;line-height:1.65;margin:0}.featured-grid .featured-body{padding:10px}.featured-grid .tagline{display:none}.featured-grid .eyebrow{font-size:8px}.primary-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px 15px;min-height:48px;background:var(--green);color:var(--white);border-radius:7px;font-size:13px;text-align:center;letter-spacing:.035em}.primary-button svg{width:19px;height:19px}.primary-button.secondary{background:transparent;color:var(--green);border:1px solid var(--line)}.primary-button:disabled{background:#e3e5dd;color:#6f7a6d}.all-link{margin-top:18px}.preview-caption{font-size:10px;color:var(--muted);line-height:1.8;text-align:center;margin-top:15px}.area-links{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.area-button{background:var(--white);border:1px solid var(--line);border-radius:5px;min-height:42px;font-size:11px}.home-footer{border-top:1px solid var(--line);padding:22px 10px 5px;text-align:center}.home-footer svg{margin:0 auto 8px;fill:var(--green);stroke:none}.home-footer p{font-size:10px;color:var(--muted);line-height:1.9}.page-heading{display:flex;justify-content:space-between;align-items:center;padding:19px 22px 12px}.page-heading h1{font-size:21px;font-weight:500;font-family:var(--serif)}.page-heading .eyebrow{font-size:8px;margin-top:3px}.explore-controls{padding:0 20px 15px;background:var(--paper)}.segment{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border:1px solid var(--line);border-radius:7px;margin-bottom:16px;background:#eeeee7}.segment button{background:transparent;min-height:39px;border-radius:5px;font-size:12px}.segment button.active{background:var(--green);color:var(--white);box-shadow:0 1px 3px #203e2720}.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px;background:var(--white);padding:0 10px;margin-bottom:16px}.search-box svg{width:18px;color:#899287}.search-box input{min-width:0;flex:1;height:42px;border:0;background:transparent;outline:none!important;font-size:12px;color:var(--ink)}.search-box input::placeholder{color:#8a958b}.filter-group{margin-bottom:12px}.filter-heading{font-size:10px;letter-spacing:.04em;margin-bottom:7px;color:#667368}.filter-chips{display:flex;flex-wrap:wrap;gap:5px}.filter-chips .chip{min-height:31px;border-radius:5px;padding:5px 8px;font-size:10px}.area-filter{display:flex;align-items:center;gap:8px;margin-top:16px}.area-filter label{font-size:11px;color:#68776a}.area-filter select{flex:1;min-width:0;min-height:36px;border:1px solid var(--line);border-radius:5px;padding:4px 9px;background:var(--white);color:var(--green);font-size:11px}.clear-button{background:transparent;text-decoration:underline;text-underline-offset:3px;font-size:10px;color:#71816f;padding:5px 0;margin-left:auto;min-height:36px}.results-topline{display:flex;align-items:center;justify-content:space-between;padding:0 21px 12px}.results-topline p{font-size:11px;color:var(--muted)}.results-topline b{font-size:17px;color:var(--green);font-weight:500;margin-right:3px}.results-topline small{font-size:9px;color:#859080}.restaurant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 10px;padding:0 15px 20px}.restaurant-card{display:block;position:relative;background:var(--white);border-radius:8px;overflow:hidden;border:1px solid #e5e3d9}.restaurant-card .photo-wrap{aspect-ratio:1/1;position:relative;overflow:hidden;background:#e2e6da}.restaurant-card .photo-wrap img{height:100%;transition:transform .25s}.restaurant-card .card-link{display:block}.restaurant-card:active .photo-wrap img{transform:scale(1.025)}.restaurant-card .card-body{padding:10px 10px 12px}.restaurant-card h2{font-size:12px;line-height:1.6;letter-spacing:0;font-weight:500;padding-right:8px}.restaurant-card .japanese-name{font-size:9px;color:#7f897e;line-height:1.6;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.restaurant-card .card-location{font-size:9px;color:#758274;margin:7px 0 4px}.restaurant-card .card-price{font-size:9px;color:#405746;line-height:1.5}.bookmark-button{position:absolute;z-index:2;top:7px;right:7px;width:32px;height:32px;border-radius:50%;background:#fffefaef;display:grid;place-items:center;box-shadow:0 1px 6px #152e2514}.bookmark-button svg{width:17px;height:17px}.bookmark-button.saved{background:var(--green);color:var(--white)}.bookmark-button.saved svg{fill:currentColor}.stars{font-size:12px;color:#b58b44;letter-spacing:2px;margin-top:8px}.rating-missing{font-size:9px;color:var(--muted);letter-spacing:0}.empty-state{text-align:center;padding:54px 30px 65px}.empty-state>svg{width:38px;height:38px;margin:0 auto 17px;color:#93a088;stroke-width:1.2}.empty-state h2{font-size:17px;margin-bottom:10px}.empty-state p{font-size:12px;color:var(--muted);margin-bottom:23px}.empty-state .primary-button{max-width:240px;margin:auto}.map-panel{margin:0 15px 20px;position:relative;border-radius:10px;overflow:hidden;border:1px solid #d5d9cf;background:#e8e8de}.map-panel iframe{display:block;border:0;width:100%;height:405px;background:#e4e6da}.map-help{padding:10px 12px;background:var(--white);font-size:10px;color:#768371;border-top:1px solid var(--line)}.map-store-list{display:flex;flex-direction:column;gap:9px;padding:0 15px 25px}.map-store{display:grid;grid-template-columns:68px 1fr auto;gap:11px;align-items:center;background:var(--white);padding:9px;border:1px solid var(--line);border-radius:8px}.map-store.active{border-color:var(--green);box-shadow:inset 3px 0 0 var(--green)}.map-store img{height:68px;border-radius:5px}.map-select{padding:0;text-align:left;background:transparent;min-width:0}.map-select h2{font-size:12px;letter-spacing:0;line-height:1.65}.map-select p{font-size:10px;color:var(--muted);margin-top:4px}.map-store .detail-link{font-size:10px;padding:10px;color:var(--green)}.detail-hero{position:relative;background:#e1e4d9}.detail-hero>button.photo-open{display:block;padding:0;width:100%;background:none}.detail-hero img{height:310px;object-position:center}.detail-tools{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;pointer-events:none}.detail-tools>*{pointer-events:auto;background:#fffefae8}.detail-tools .bookmark-button{position:static;width:40px;height:40px}.detail-content{padding:23px 24px 8px}.detail-title .eyebrow{font-size:9px;margin-bottom:9px}.detail-title h1{font-family:var(--serif);font-size:25px;line-height:1.5;font-weight:600;overflow-wrap:anywhere}.detail-title .japanese-name{font-size:12px;color:#6f7a6a;margin-top:7px}.detail-meta{display:flex;flex-wrap:wrap;gap:7px 15px;margin-top:14px;font-size:11px;color:#6d7b69}.detail-meta span{display:flex;gap:5px;align-items:center}.detail-meta svg{width:14px;height:14px}.detail-title .stars{font-size:16px;margin:12px 0}.gallery-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);margin:18px 0 8px}.gallery-label svg{height:14px;width:14px}.photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.photo-gallery button{padding:0;border-radius:8px;overflow:hidden;background:#e8e4db;aspect-ratio:1}.photo-gallery img{height:100%}.detail-section{padding-top:22px;margin-top:23px;border-top:1px solid var(--line)}.detail-section h2{display:flex;gap:9px;align-items:center;font-size:15px;letter-spacing:.04em;margin-bottom:13px}.detail-section h2 svg{width:19px;height:19px;color:var(--gold)}.comment-section h2 svg{fill:var(--green);stroke:none;width:24px;height:24px;color:var(--green)}.comment-section{background:#eeeee5;border:0;border-radius:9px;padding:19px 18px;margin-left:-3px;margin-right:-3px}.comment-section p{font-size:12px;line-height:2.05;white-space:pre-wrap;color:#405644}.menu-copy{font-size:12px;line-height:1.95}.info-row{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:15px 0;border-bottom:1px solid var(--line)}.info-row svg{width:18px;height:18px;color:var(--gold);margin-top:3px}.info-row dt{font-size:10px;color:var(--muted);margin-bottom:4px}.info-row dd{font-size:12px;line-height:1.85;margin:0;white-space:pre-wrap}.info-row .missing{color:#83907e}.youtube-card{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden}.youtube-cover{height:153px;position:relative;background:var(--green)}.youtube-cover img{height:100%;opacity:.7}.play-mark{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--white);background:#234034e8;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.youtube-card-body{padding:12px 13px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.youtube-card-body small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.detail-actions{position:sticky;bottom:70px;z-index:12;margin:22px -24px -8px;padding:12px 20px;background:#f8f6f2f7;border-top:1px solid var(--line);backdrop-filter:blur(10px)}.detail-actions a.primary-button{font-size:12px}.detail-actions small{display:block;text-align:center;font-size:9px;color:var(--muted);margin-top:6px}.back-list{display:flex;gap:6px;justify-content:center;align-items:center;font-size:12px;margin:20px;color:var(--muted)}.back-list svg{width:15px;height:15px}.saved-heading{padding:29px 23px 22px}.saved-heading h1{font-family:var(--serif);font-size:24px;margin-top:7px}.saved-heading p{font-size:11px;color:var(--muted);margin-top:10px}.about-dialog{border:0;border-radius:17px;background:var(--paper);color:var(--ink);width:min(90vw,390px);padding:35px 28px}.about-dialog::backdrop{background:#0c271b80;backdrop-filter:blur(4px)}.about-dialog h2{font-family:var(--serif);font-size:25px;margin:9px 0 20px}.about-dialog p{font-size:12px;line-height:2}.about-dialog .eyebrow{font-size:8px;margin-top:16px}.about-dialog .about-note{font-size:10px;color:var(--muted);margin-top:16px}.about-paw svg{width:36px;height:36px;fill:var(--green);stroke:none}.about-close{position:absolute;top:10px;right:10px}.about-dialog .primary-button{margin-top:25px}.photo-viewer{border:0;padding:60px 16px 24px;width:100vw;max-width:800px;height:100dvh;max-height:100dvh;background:#13251ff5;color:var(--white);margin:0 auto}.photo-viewer::backdrop{background:#0a1a15f5}.viewer-close{position:absolute;top:12px;right:16px;background:#ffffff1f}.photo-viewer>img{width:100%;max-height:calc(100dvh - 220px);object-fit:contain;margin:auto}.photo-viewer #viewer-counter{font-size:12px;text-align:center;padding:14px}.photo-viewer #viewer-thumbs{display:flex;gap:8px;justify-content:center}.photo-viewer #viewer-thumbs button{width:58px;height:58px;padding:0;background:none;border-radius:6px;overflow:hidden;opacity:.55;border:2px solid transparent}.photo-viewer #viewer-thumbs button.active{opacity:1;border-color:var(--gold)}.photo-viewer #viewer-thumbs img{height:100%}.toast{position:fixed;z-index:100;bottom:92px;left:50%;transform:translate(-50%,15px);background:var(--deep);color:var(--white);padding:10px 20px;border-radius:7px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){body{padding:26px 0 0}.app-shell{border-radius:20px 20px 0 0;overflow:clip}.app-header{height:78px}.hero{height:330px}.hero h1{font-size:42px}.page-content{padding:30px 29px}.cuisine-photo{width:88px;height:88px}.bottom-nav{box-shadow:0 -6px 18px #21392a06}.restaurant-grid{gap:18px 13px;padding:0 22px 25px}.detail-hero img{height:350px}}
@media(max-width:350px){.app-header{padding:10px 16px;height:68px}.brand{font-size:14px}.hero{height:266px}.hero-copy{padding:25px 22px}.hero h1{font-size:33px}.page-content{padding:23px 17px 10px}.cuisine-grid{column-gap:8px}.cuisine-photo{width:69px;height:69px}.scene-grid{gap:6px}.scene-grid .chip{padding:7px 9px;font-size:10px}.detail-content{padding:22px 19px}.detail-title h1{font-size:23px}.detail-hero img{height:270px}.explore-controls{padding-left:16px;padding-right:16px}.filter-chips .chip{font-size:9px;padding:5px 7px}.restaurant-grid{gap:13px 8px;padding:0 10px 20px}.restaurant-card .card-body{padding:8px}.restaurant-card h2{font-size:11px}.detail-actions{margin-left:-19px;margin-right:-19px}.brand small{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
[hidden]{display:none!important}.detail-hero>.photo-note{position:absolute;bottom:10px;right:12px;background:#fffefaeb;padding:3px 7px;font-size:9px;border-radius:3px}.detail-link svg{width:14px;height:14px}.photo-wrap img[src$="hotpot.jpg"]{image-rendering:auto}
.comment-section p{font-size:14px;line-height:2}.menu-copy,.info-row dd{font-size:13px}.restaurant-card h2{font-size:13px}.restaurant-card .japanese-name{font-size:10px}.restaurant-card .card-location{font-size:10px}.restaurant-card .card-price{font-size:10px}.detail-meta{font-size:12px}.cuisine-button{font-size:13px}.scene-grid .chip{font-size:12px;min-height:41px}.preview-caption{font-size:11px}.hero-copy p:last-child{font-size:12px}

/* Approved mobile mock alignment. Existing routes, controls and media stay intact. */
body { font-family: var(--sans); font-size: var(--type-base); }
html { scroll-padding-top: 64px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.route-focus:focus:not(:focus-visible) { outline: none; }
.route-focus:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.photo-viewer button:focus-visible { outline-color: var(--white); }
.featured-card:focus-visible, .photo-open:focus-visible { outline-color: var(--white); outline-offset: -4px; }
.app-header { height: var(--header-height); padding: 5px var(--page-gutter); border-bottom-color: var(--line); }
.brand { gap: 7px; font-size: 13px; font-weight: 500; letter-spacing: .015em; min-height: 40px; }
.brand-mark svg { width: 23px; height: 26px; }
.brand small { display: none; }
.page-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 500; pointer-events: none; white-space: nowrap; }
.app-header:has(.page-label:not([hidden])) .brand > span:last-child { display: none; }
.icon-button { width: var(--touch-size); height: var(--touch-size); }
.icon-button svg { width: 21px; height: 21px; }
.bottom-nav { min-height: var(--nav-height); padding: 5px 7px calc(5px + env(safe-area-inset-bottom)); }
.bottom-nav a { min-height: 52px; gap: 3px; color: #59675c; }
.bottom-nav svg { width: 23px; height: 23px; }
.bottom-nav a.active:before { content: none; }
.saved-dot { top: 3px; }
#app { padding-bottom: calc(var(--nav-height) + 14px + env(safe-area-inset-bottom)); min-height: calc(100dvh - var(--header-height)); }

/* Home: approved photo cover, round categories and one main + two visible picks. */
.hero { height: 210px; }
.hero:after { background: linear-gradient(90deg,#10211799 0%,#10211738 58%,#10211705 100%),linear-gradient(0deg,#10211777,transparent 65%); }
.hero-copy { padding: 20px var(--space-6) var(--space-5); }
.hero .eyebrow { display: none; }
.hero h1 { font-family: var(--serif); font-size: var(--type-hero); font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.hero-copy p:last-child { font-size: var(--type-ui); line-height: 1.5; margin-top: var(--space-3); }
.hero-preview { top: 8px; right: 9px; padding: 2px 5px; }
.page-content { padding: var(--space-4) var(--page-gutter) var(--space-3); }
.section { margin-bottom: var(--space-4); }
.section-title { margin-bottom: var(--space-3); }
.section-title h2 { padding-left: var(--space-3); border-left-width: 2px; font-size: var(--type-section); }
.section-title small { font-size: 9px; }
.section-title a.all-stores-link { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; min-width: var(--touch-size); min-height: var(--touch-size); margin-block: -8px; padding: 0 3px; font-size: var(--type-ui); color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.all-stores-link svg { width: 14px; height: 14px; }
.cuisine-grid { gap: var(--space-3) var(--space-4); }
.cuisine-button { gap: 3px; font-size: var(--type-ui); line-height: 1.35; }
.cuisine-photo { width: 68px; height: 68px; padding: 2px; }
.scene-grid { gap: 2px var(--space-2); }
.page-content .scene-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.page-content .scene-grid .chip { padding-inline: 5px; }
.chip, .scene-grid .chip { position: relative; isolation: isolate; gap: 5px; min-width: var(--touch-size); min-height: var(--touch-size); padding: var(--chip-inset) 9px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: var(--type-ui); }
.chip::before { content: ''; position: absolute; z-index: -1; inset: var(--chip-inset) 0; border: 1px solid #d7d7cd; border-radius: inherit; background: transparent; pointer-events: none; }
.chip.active { background: transparent; border-color: transparent; }
.chip.active::before { background: var(--green); border-color: var(--green); }
.chip svg { width: 15px; height: 15px; }
.chip .count { font-size: 9px; color: #667366; }
.chip.active .count { color: #e2e8e1; }
.featured-card { height: auto; border-radius: var(--radius-md); background: var(--green); }
.featured-card .photo-wrap { height: auto; aspect-ratio: 4 / 3; }
.featured-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.featured-card:active img { transform: none; }
.featured-card .photo-wrap:after { content: ''; position: absolute; inset: auto 0 0; height: 36%; background: linear-gradient(0deg,#102117b8 0%,#1021174a 48%,#10211700 100%); }
.photo-wrap .photo-note { z-index: 1; top: 6px; right: 6px; bottom: auto; padding: 1px 5px; }
.featured-card .featured-body { position: absolute; bottom: 8px; left: 10px; right: 10px; z-index: 1; color: var(--white); padding: 0; }
.featured-body .eyebrow, .featured-body .tagline, .featured-body .card-meta { display: none; }
.featured-card .featured-body h3 { font-family: var(--sans); font-size: var(--type-ui); font-weight: 500; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px #10211799; }
.featured-main { height: auto; margin-bottom: var(--space-2); }
.featured-main .featured-body { bottom: 9px; left: 12px; right: 12px; }
.featured-main .featured-body h3 { font-family: var(--serif); font-size: 16px; }
.featured-grid { gap: var(--space-2); }
.featured-more { margin-top: 2px; }
.featured-more > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-size); font-size: var(--type-ui); color: var(--muted); cursor: pointer; list-style: none; }
.featured-more > summary::-webkit-details-marker { display: none; }
.featured-more > summary::before { content: '+'; font-size: 15px; }
.featured-more[open] > summary::before { content: '−'; }
.primary-button { min-height: var(--touch-size); padding: 9px var(--space-4); border-radius: var(--radius-md); font-size: 12px; letter-spacing: .025em; }
.primary-button svg { width: 18px; height: 18px; }
.all-link { position: relative; isolation: isolate; margin-top: 2px; min-height: var(--touch-size); padding: var(--chip-inset) 10px; background: transparent; }
.all-link::before { content: ''; position: absolute; z-index: -1; inset: var(--chip-inset) 0; border-radius: inherit; background: var(--green); pointer-events: none; }
.preview-caption { font-size: 9px; line-height: 1.7; margin-top: 9px; }
.area-links { gap: var(--space-2); }
.area-button { min-height: var(--touch-size); font-size: var(--type-ui); border-radius: var(--radius-sm); }
.home-footer { padding-top: 17px; }

/* Explore: compact controls with every existing cuisine, scene and area available. */
.page-heading { padding: 13px 14px 8px; }
.page-heading h1 { font-size: 18px; }
.page-heading .eyebrow { display: none; }
.explore-controls { padding: 5px var(--page-gutter) var(--space-2); }
.segment { gap: 5px; padding: 0; border: 0; border-radius: var(--radius-sm); margin-bottom: 7px; background: transparent; }
.segment button { position: relative; isolation: isolate; min-height: var(--touch-size); border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 12px; }
.segment button::before { content: ''; position: absolute; z-index: -1; inset: var(--chip-inset) 0; border: 1px solid #d3d0c9; border-radius: inherit; background: transparent; pointer-events: none; }
.segment button.active { background: transparent; border-color: transparent; box-shadow: none; }
.segment button.active::before { border-color: var(--green); background: var(--green); }
.filter-group { margin-bottom: 7px; }
.filter-heading { font-size: var(--type-ui); letter-spacing: .025em; font-weight: 400; margin-bottom: 1px; padding-left: 5px; border-left: 2px solid var(--gold); color: #566354; line-height: 1.3; }
.filter-heading span { font-size: 10px; }
.filter-chips { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px var(--space-2); }
.filter-chips .chip { min-width: var(--touch-size); min-height: var(--touch-size); border-radius: var(--radius-sm); padding: var(--chip-inset); font-size: var(--type-ui); line-height: 1.3; }
.advanced-filters { margin-top: 2px; }
.filter-tools { display: flex; align-items: flex-start; gap: 8px; }
.filter-tools > .advanced-filters { flex: 1; min-width: 0; }
.filter-tools > .clear-button { flex-shrink: 0; }
.advanced-filters > summary { min-height: var(--touch-size); display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-ui); cursor: pointer; color: #52644f; list-style: none; }
.advanced-filters > summary::-webkit-details-marker { display: none; }
.advanced-filters > summary:before { content: '+'; font-size: 14px; line-height: 1; }
.advanced-filters[open] > summary:before { content: '−'; }
.advanced-filters > summary svg { width: 14px; height: 14px; }
.advanced-filters > summary .clear-button { margin-left: auto; }
.search-box { border-radius: 5px; padding: 0 9px; margin: 3px 0 8px; }
.search-box svg { width: 17px; color: #687364; }
.search-box input { height: var(--touch-size); font-size: 16px; }
.search-box input:focus-visible { outline: 3px solid var(--green) !important; outline-offset: -2px; }
.search-box input::placeholder { color: #6d786a; font-size: 12px; }
.area-filter { margin-top: 5px; }
.area-filter label { font-size: var(--type-ui); color: #52644f; }
.area-filter select { min-height: var(--touch-size); font-size: 16px; }
.clear-button { font-size: var(--type-ui); color: #52644f; padding: 5px 0 5px var(--space-3); min-height: var(--touch-size); }
.results-topline { padding: 0 14px 6px; }
.results-topline p { font-size: 11px; }
.results-topline b { font-size: 12px; margin-right: 2px; }
.results-topline small { font-size: 10px; color: #66735f; }
.restaurant-grid { gap: 7px 6px; padding: 0 10px 15px; }
.restaurant-card { background: var(--paper); border-radius: var(--radius-md); border-color: #d9d5cd; }
.restaurant-card .photo-wrap { aspect-ratio: 1.2; }
.restaurant-card .card-body { padding: 8px 48px 8px 8px; min-height: 66px; }
.restaurant-card h2 { font-family: var(--sans); font-size: var(--type-card); line-height: var(--leading-ui); padding-right: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.restaurant-card .japanese-name, .restaurant-card .card-price, .restaurant-card .stars { display: none; }
.restaurant-card .card-location { font-size: var(--type-ui); line-height: var(--leading-ui); color: #53604e; margin: 3px 0 0; }
.restaurant-card > .bookmark-button { top: auto; bottom: 10px; right: 2px; width: 44px; height: 44px; background: transparent; border-radius: 4px; box-shadow: none; }
.restaurant-card > .bookmark-button:focus-visible { outline-offset: -3px; }
.restaurant-card > .bookmark-button.saved { color: var(--green); }
.stars { color: #87662f; }
.empty-state { padding: 45px 24px 55px; }
.empty-state > svg { width: 35px; height: 35px; margin-bottom: 14px; color: #6a7b60; }
.empty-state h2 { font-size: 16px; margin-bottom: 9px; }

/* Map: the map fills the available height; the selected place floats above it. */
.map-page { height: 100dvh; min-height: 0; overflow: hidden; }
.map-page #app { display: flex; flex-direction: column; height: calc(100dvh - var(--header-height) - var(--nav-height) - env(safe-area-inset-bottom)); min-height: 0; padding-bottom: 0; }
.map-page .explore-controls { flex-shrink: 0; padding: 5px var(--page-gutter); border-bottom: 1px solid var(--line); }
.map-page .segment { margin-bottom: 0; }
.map-page #results { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.map-page .results-topline { padding-top: 5px; }
.map-layout { flex: 1; min-height: 0; position: relative; background: #e8e8de; overflow: hidden; }
.map-viewport { position: absolute; inset: 0; background: #e8e8de; }
#restaurant-map { position: absolute; inset: 0; width: 100%; height: 100%; }
#restaurant-map[data-state="loading"] { visibility: hidden; }
.map-viewport > iframe { border: 0; width: 100%; height: 100%; display: block; }
.map-pending-note { position: absolute; z-index: 3; top: 65px; left: 10px; right: 10px; margin: 0; background: #fffefaf2; color: #4e604b; padding: 7px 9px; border-radius: 5px; font-size: 10px; line-height: 1.6; }
.map-unavailable[hidden] { display: none; }
.map-filters[open] { max-height: max(88px,min(32dvh,calc(100dvh - var(--header-height) - var(--nav-height) - 330px - env(safe-area-inset-bottom)))); overflow-y: auto; overscroll-behavior: contain; }
.map-filters { font-size: 11px; }
.map-filters > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch-size); cursor: pointer; list-style: none; }
.map-filters > summary::-webkit-details-marker { display: none; }
.map-filters > summary:after { content: '+'; font-size: 16px; }
.map-filters[open] > summary:after { content: '−'; }
.map-page .explore-controls > .map-filters { margin-top: 5px; }
.map-layout > .map-filters { position: absolute; top: 10px; right: 10px; z-index: 5; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 0 9px; max-width: calc(100% - 20px); }
.map-layout > .map-filters[open] { left: 10px; padding: 2px 10px 10px; box-shadow: 0 3px 10px #152e2520; }
.map-unavailable { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 55px 28px 100px; background: #eeeee6; text-align: center; color: var(--green); }
.map-unavailable > svg { width: 43px; height: 43px; padding: 8px; border: 1px solid #cbd1c2; border-radius: 50%; }
.map-unavailable h2, .map-unavailable h3 { font-size: 18px; }
.map-unavailable p { font-size: 12px; max-width: 320px; line-height: 1.9; color: #52644f; }
.map-unavailable small { font-size: 10px; color: #5d6b57; }
.map-unavailable a { text-decoration: underline; text-underline-offset: 3px; }
.map-coordinate-note { font-size: 10px; line-height: 1.7; color: #5c6a57; background: var(--paper); padding: 8px 14px; border-top: 1px solid var(--line); }

/* Detail: full-bleed image, restrained typography and thin editorial dividers. */
.detail-hero img { height: 350px; }
.detail-tools { left: 14px; right: 14px; }
.detail-tools .bookmark-button, .detail-tools .icon-button { width: var(--touch-size); height: var(--touch-size); }
.detail-hero > .photo-note { bottom: 9px; right: 11px; padding: 2px 6px; font-size: 8px; }
.detail-content { padding: 15px 17px 6px; }
.detail-title .eyebrow { display: none; }
.detail-title h1 { font-family: var(--serif); font-size: var(--type-detail); line-height: 1.45; font-weight: 500; }
.detail-title .japanese-name { font-family: var(--sans); font-size: var(--type-ui); color: #5d6b57; margin-top: 3px; }
.detail-meta { gap: 5px 14px; margin-top: 8px; font-size: 11px; color: #4e604b; }
.detail-title .stars { font-size: 12px; margin: 7px 0 2px; }
.detail-jump-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.detail-jump-nav button { position: relative; isolation: isolate; display: inline-flex; justify-content: center; align-items: center; min-width: var(--touch-size); min-height: var(--touch-size); padding: var(--chip-inset) 10px; border: 0; border-radius: var(--radius-sm); font-size: var(--type-ui); color: var(--green); background: transparent; }
.detail-jump-nav button::before { content: ''; position: absolute; z-index: -1; inset: var(--chip-inset) 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
#detail-menu, #detail-hours, #detail-video { scroll-margin-top: 12px; }
.detail-section[id], .info-row[id] { scroll-margin-top: 16px; }
.gallery-label { margin: 12px 0 6px; }
.photo-gallery { gap: 7px; }
.photo-gallery button { border-radius: 6px; }
.gallery-details { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 8px; }
.gallery-details > summary { font-size: 12px; min-height: var(--touch-size); cursor: pointer; }
.gallery-details .photo-gallery { margin-top: 5px; }
.detail-section { padding-top: 15px; margin-top: 16px; }
.detail-section h2 { gap: var(--space-3); font-size: var(--type-section); margin-bottom: 9px; }
.detail-section h2 svg { width: 17px; height: 17px; color: var(--green); }
.comment-section h2 svg { width: 24px; height: 24px; }
.comment-section { background: transparent; border-top: 1px solid var(--line); border-radius: 0; padding: 13px 0 0; margin-left: 0; margin-right: 0; }
.comment-section p { font-size: var(--type-body); line-height: var(--leading-body); color: #344c38; }
.menu-copy { font-size: 12px; line-height: 1.9; }
.restaurant-info { margin: 0; }
.info-row { grid-template-columns: 19px 1fr; gap: 9px; padding: 14px 0; }
.info-row svg { width: 17px; height: 17px; color: var(--green); }
.info-row dt { font-size: 12px; font-weight: 500; letter-spacing: .07em; color: var(--green); margin-bottom: 5px; }
.info-row dd { font-size: 12px; }
.info-row .missing { color: #61705a; }
.restaurant-detail .detail-content > .scene-grid { margin-top: 13px; }
.youtube-card { border-radius: 6px; }
.play-mark { width: 45px; height: 45px; }
.youtube-card-body { padding: 10px 12px; }
.detail-actions { bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); margin: 16px -17px -6px; padding: 9px 14px; }
.detail-actions a.primary-button { min-height: var(--touch-size); font-size: 12px; }
.detail-actions small { font-size: 8px; color: #5d6b57; margin-top: 5px; }
.restaurant-detail { padding-bottom: 74px; }
.restaurant-detail > .detail-actions { position: fixed; left: 50%; transform: translateX(-50%); width: min(100%, 520px); margin: 0; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
.saved-heading { padding: 22px 17px 18px; }
.saved-heading h1 { font-size: 23px; margin-top: 5px; }
.saved-heading p { margin-top: 9px; }
.toast { bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom)); }

@media (min-width: 700px) {
  body { padding-top: 20px; }
  .app-shell { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .hero { height: 230px; }
  .hero-copy { padding-left: 29px; }
  .hero h1 { font-size: var(--type-hero); }
  .page-content { padding: 16px 20px 8px; }
  .cuisine-grid { column-gap: 20px; }
  .cuisine-photo { width: 74px; height: 74px; }
  .map-page { height: calc(100dvh - 20px); }
  .map-page #app { height: calc(100dvh - 20px - var(--header-height) - var(--nav-height)); }
}
@media (max-width: 350px) {
  :root { --header-height: 50px; --type-detail: 26px; }
  .app-header { padding: 5px 11px; }
  .brand { font-size: 12px; }
  .hero { height: 200px; }
  .hero-copy { padding: 17px 20px 14px; }
  .hero h1 { font-size: var(--type-hero); }
  .page-content { padding-left: 12px; padding-right: 12px; }
  .cuisine-grid { column-gap: 8px; }
  .cuisine-photo { width: 62px; height: 62px; }
  .scene-grid { gap: 2px var(--space-2); }
  .page-content .scene-grid { display: flex; }
  .scene-grid .chip { padding: var(--chip-inset) 7px; font-size: var(--type-ui); }
  .explore-controls { padding-left: 11px; padding-right: 11px; }
  .filter-chips { gap: 2px var(--space-2); }
  .filter-chips .chip { font-size: var(--type-ui); padding-left: var(--chip-inset); padding-right: var(--chip-inset); }
  .restaurant-grid { gap: 6px 5px; padding-left: 8px; padding-right: 8px; }
  .restaurant-card h2 { font-size: var(--type-card); }
  .restaurant-card .card-body { padding-left: 6px; }
  .detail-content { padding-left: 14px; padding-right: 14px; }
  .detail-title h1 { font-size: var(--type-detail); }
  .detail-hero img { height: 310px; }
  .detail-actions { margin-left: -14px; margin-right: -14px; }
  .map-selected-card { grid-template-columns: 60px minmax(0,1fr) 44px; gap: 6px; }
  .map-selected-card > img, .map-selected-card > a > img { height: 65px; }
}

@media (max-height: 640px) {
  .map-summary { top: 8px; }
  .map-pending-note { top: 56px; font-size: 10px; line-height: 1.45; }
  .map-selected-card { grid-template-columns: 55px minmax(0,1fr) 44px; padding: 8px; gap: 6px; }
  .map-selected-card > img, .map-selected-card > a > img { height: 55px; }
  .map-selected-card h2 { font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .map-selected-card p { line-height: 1.3; }
  .map-selected-card .detail-link { min-height: var(--touch-size); margin-top: 2px; }
}
@media (max-height: 500px) {
  .map-page { height: auto; min-height: 100dvh; overflow: visible; }
  .map-page #app { display: block; height: auto; min-height: 0; padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
  .map-page #results { display: block; }
  .map-layout { height: 360px; min-height: 360px; }
  .map-filters[open] { max-height: 180px; }
}

/* Revised mobile brief: typography, spacing and touch geometry shared by all views. */
body { line-height: var(--leading-body); }
.app-header { height: var(--header-height); padding: 6px var(--page-gutter); color: var(--green); }
.brand { font-size: 16px; font-weight: 500; min-height: 44px; }
.brand-mark svg { width: 27px; height: 29px; }
.page-label { font-size: 17px; font-weight: 600; }
.bottom-nav { height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding: 5px 7px calc(5px + env(safe-area-inset-bottom)); }
.bottom-nav a { min-height: 55px; font-size: 11px; font-weight: 400; gap: 4px; }
.bottom-nav a.active { font-weight: 600; }
.bottom-nav svg { width: 24px; height: 24px; }
.bottom-nav a.active[data-page="home"] svg, .bottom-nav a.active[data-page="map"] svg { fill: currentColor; }
.hero { height: auto; aspect-ratio: 13 / 9; }
.hero:after { background: linear-gradient(90deg,#10211740,transparent 80%),linear-gradient(0deg,#102117a6,transparent 78%); }
.hero-copy { padding: 18px var(--page-gutter); }
.hero h1 { font: 700 44px/1.25 var(--serif); letter-spacing: 0; text-shadow: none; font-synthesis: none; font-kerning: normal; font-feature-settings: normal; white-space: nowrap; text-align: left; margin-left: 10px; }
.hero-copy p:last-child { font-size: 13px; line-height: 1.6; margin-top: 12px; letter-spacing: 0; }
/* Approved dark-gold artwork; reserve room for the first category row and navigation. */
.hero.hero-mobile-approved { height: clamp(260px, calc(100svh - 300px), 420px); aspect-ratio: auto; overflow: hidden; background: transparent; }
.hero-mobile-approved::before, .hero-mobile-approved::after { content: none; }
.hero.hero-mobile-approved > picture { display: block; width: 100%; height: 100%; }
.hero.hero-mobile-approved > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.page-content { padding: 20px var(--page-gutter) 12px; }
.section { margin-bottom: 24px; }
.section-title { margin-bottom: 12px; min-height: 24px; }
.section-title h2, .filter-heading, .detail-section h2, .info-row dt {
  position: relative; border: 0; padding-left: 12px; font-family: var(--sans);
  font-size: var(--type-section); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--green);
}
.section-title h2::before, .filter-heading::before, .detail-section h2::before, .info-row dt::before {
  content: ''; position: absolute; left: 0; top: calc((1.4em - 20px)/2); width: 3px; height: 20px; background: var(--gold);
}
.section-title a.all-stores-link { font-size: 12px; }
.cuisine-grid { gap: 12px 16px; }
.cuisine-photo { width: 72px; height: 72px; padding: 2px; border-color: var(--gold); }
.cuisine-button { gap: 5px; font-size: 13px; font-weight: 400; }
.page-content .scene-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; width: 100%; }
.chip, .scene-grid .chip { min-height: 44px; min-width: 44px; padding: 4px 9px; font-size: 12px; font-weight: 400; border-radius: 6px; color: var(--green); }
.page-content .scene-grid .chip { padding-inline: 3px; gap: 3px; height: 44px; }
.page-content .scene-grid .chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.chip::before { inset: 4px 0; border-color: var(--line); background: var(--paper); }
.chip.active { color: var(--white); }
.chip:disabled { color: #90958d; cursor: default; }
.chip:disabled::before { background: #ecece6; border-color: #e1e2da; }
.featured-link { display: block; }
.featured-card, .featured-main { height: auto; }
.featured-card .photo-wrap, .featured-grid .photo-wrap { aspect-ratio: 4 / 3; height: auto; }
.featured-card .photo-wrap img { object-fit: contain; object-position: center; transform: none; }
.featured-card .photo-wrap:after { height: 32%; background: linear-gradient(0deg,#102117c2,transparent); }
.featured-card .featured-body { bottom: 10px; left: 10px; right: 44px; }
.featured-card .featured-body h3 { font: 500 13px/1.45 var(--sans); text-shadow: 0 1px 3px #10211780; }
.featured-main .featured-body h3 { font-size: 16px; }
.featured-card > .bookmark-button { top: auto; bottom: 2px; right: 2px; width: 44px; height: 44px; color: var(--white); background: transparent; box-shadow: none; }
.featured-card > .bookmark-button.saved { color: var(--white); }
.featured-link:focus-visible { outline-offset: -4px; outline-color: var(--white); }
.featured-main { margin-bottom: 8px; }
.featured-grid { gap: 8px; }
.all-link { margin-top: 10px; min-height: 44px; }
.all-link::before { inset: 0; }
.preview-caption { font-size: 11px; line-height: 1.6; }
.area-button { font-size: 13px; }
.home-footer p { font-size: 12px; }

.explore-controls { padding: 8px var(--page-gutter) 4px; }
.segment { gap: 8px; margin-bottom: 14px; }
.segment button { height: 44px; font-size: 13px; font-weight: 500; }
.segment button::before { inset: 0; }
.filter-group { margin-bottom: 12px; }
.filter-heading { margin-bottom: 4px; }
.filter-heading span { font-size: 11px; font-weight: 400; color: #87662f; }
.filter-chips { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0 6px; }
.filter-chips .chip { min-height: 44px; padding: 4px; font-size: 12px; border-radius: 18px; }
.explore-controls .scene-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; width: 100%; }
.scene-options .chip { height: 44px; }
.scene-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scene-filter-heading .filter-heading { margin-bottom: 0; }
.scene-filter-heading > .chip { min-height: 44px; font-size: 12px; padding-inline: 9px; }
.filter-tools { gap: 8px; }
.advanced-filters > summary { font-size: 12px; line-height: 1.5; padding-block: 4px; }
.advanced-filters > summary span { min-width: 0; overflow-wrap: anywhere; }
.advanced-filters > summary svg { flex-shrink: 0; }
.advanced-filters[open] { margin-bottom: 8px; }
.search-box { margin-top: 8px; margin-bottom: 12px; }
.area-options { margin-top: 8px; }
.area-options .filter-chips { grid-template-columns: repeat(3,minmax(0,1fr)); }
.clear-button { font-size: 12px; padding-left: 0; }
.results-topline { padding: 4px var(--page-gutter) 8px; }
.results-topline p, .results-topline b { font-size: 13px; }
.results-topline small { font-size: 11px; }
.restaurant-grid { gap: 10px 8px; padding: 0 var(--page-gutter) 16px; }
.restaurant-card .photo-wrap { aspect-ratio: 4 / 3; background: #e8e5dc; }
.restaurant-card .photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; }
.restaurant-card .card-body { padding: 8px; min-height: 100px; }
.restaurant-card h2 { font: 500 var(--type-card)/1.4 var(--store-serif); min-height: 2.8em; }
.restaurant-card .card-location { font-size: 11px; margin-top: 4px; padding-right: 32px; }
.restaurant-card .card-price { display: block; font-size: 11px; line-height: 1.5; margin-top: 3px; padding-right: 30px; }
.restaurant-card > .bookmark-button { bottom: 4px; right: 0; }

.map-page .explore-controls { position: relative; padding: 8px var(--page-gutter) 44px; }
.map-page .explore-controls > .map-filters { position: absolute; top: 52px; left: var(--page-gutter); right: var(--page-gutter); z-index: 10; margin-top: 0; background: var(--paper); }
.map-page .map-filters[open] { outline: 1px solid var(--line); border-radius: 0 0 6px 6px; padding: 0 8px 8px; }
.map-filters > summary { min-height: 44px; font-size: 12px; gap: 8px; }
.map-filters > summary span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.map-filters > summary b { flex-shrink: 0; font-size: 12px; font-weight: 500; }
.map-filters[open] { max-height: min(45dvh,420px); padding-bottom: 6px; }

/* Map-only carousel: native iOS scrolling, card peek and room for Google attribution. */
.map-carousel { position: absolute; z-index: 4; bottom: 32px; left: 0; right: 0; }
.map-carousel-hint { width: fit-content; max-width: calc(100% - 32px); margin: 0 16px 6px; padding: 3px 8px; border-radius: 4px; background: #fffefaf2; color: var(--green); font-size: 11px; line-height: 1.5; }
.map-carousel-hint span { margin-left: 8px; font-variant-numeric: tabular-nums; }
.map-carousel-track { position: relative; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 2px 16px 5px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.map-carousel-track::-webkit-scrollbar { display: none; }
.map-carousel-track::after { content: ''; flex: 0 0 26px; }
.map-carousel-card { position: relative; flex: 0 0 calc(100% - 36px); min-width: 0; height: 96px; display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-decoration: none; scroll-snap-align: start; scroll-snap-stop: always; -webkit-user-drag: none; }
.map-carousel-card.active { border-color: var(--gold); }
.map-carousel-card:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.map-carousel-card > img { width: 88px; height: 66px; object-fit: cover; border-radius: 4px; }
.map-carousel-number { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 3px; border-radius: 50%; background: var(--green); color: #fff; font: 600 11px/1 var(--sans); border: 1px solid #fff; }
.map-legal-links { flex-shrink: 0; display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 28px; background: var(--paper); color: var(--green); font-size: 10px; }
.map-legal-links a { display: inline-flex; align-items: center; min-height: 28px; text-underline-offset: 2px; }
.map-carousel-copy { min-width: 0; }
.map-carousel-copy h2 { font: 500 14px/1.3 var(--store-serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.map-carousel-copy p { font-size: 11px; line-height: 1.4; margin-top: 2px; }
.map-carousel-copy .map-carousel-price { font-size: 10px; }

.detail-hero > button.photo-open { aspect-ratio: 4 / 3; }
.detail-hero > button.photo-open, #viewer-image { touch-action: pan-y pinch-zoom; }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.detail-tools { top: max(14px,env(safe-area-inset-top)); left: 16px; right: 16px; }
.detail-content { padding: 16px var(--page-gutter) 16px; }
.detail-title h1 { font-family: var(--store-serif); font-size: var(--type-detail); line-height: 1.35; font-weight: 500; letter-spacing: 0; }
.detail-title .japanese-name { font-size: 14px; line-height: 1.6; margin-top: 4px; }
.detail-meta { font-size: 13px; line-height: 1.6; margin-top: 10px; gap: 6px 12px; }
.detail-meta .detail-budget { display: block; flex: 1 1 210px; min-width: 0; overflow-wrap: anywhere; }
.detail-title .stars { font-size: 12px; margin: 8px 0; }
.detail-tags { gap: 0 6px; margin-top: 8px; }
.detail-tags .chip { min-height: 32px; min-width: 0; padding: 4px 9px; white-space: normal; }
.detail-tags .chip::before { inset: 0; }
.detail-jump-nav { margin-top: 12px; gap: 6px; }
.detail-jump-nav button { font-size: 12px; }
.detail-section { margin-top: 24px; padding-top: 0; border-top: 0; }
.detail-section h2 { margin-bottom: 12px; }
.comment-section { margin-left: 0; margin-right: 0; border: 0; background: none; }
.comment-section p, .menu-copy, .info-row dd { font-size: 14px; line-height: 1.6; color: var(--ink); }
.info-row { display: block; border: 0; padding: 0; margin-top: 24px; }
.info-row dt { margin-bottom: 12px; }
.info-row dd { margin: 0; }
.gallery-details { margin-top: 24px; padding-top: 8px; }
.photo-gallery button { aspect-ratio: 4 / 3; }
.photo-gallery img { object-fit: cover; }

/* Approved galleries contain up to ten photos; keep every thumbnail usable. */
.photo-viewer #viewer-thumbs { flex-wrap: wrap; }
.photo-viewer #viewer-thumbs button { flex: 0 0 58px; }
.photo-viewer #viewer-thumbs img { object-fit: contain; }
/* R030-P003: hide only its baked-in bottom white edge (7px + 1px JPEG boundary).
   Both the original and the adopted JPEG remain unchanged. */
.detail-hero > .photo-open:has(> img[src="assets/restaurants/final-20261106/R030/03.jpg"]) { overflow: hidden; }
.detail-hero img[src="assets/restaurants/final-20261106/R030/03.jpg"],
.photo-gallery img[src="assets/restaurants/final-20261106/R030/03.jpg"] {
  height: calc(100% * 1200 / 1192);
  object-fit: cover;
  object-position: center top;
}
#viewer-image[src="assets/restaurants/final-20261106/R030/03.jpg"] { clip-path: inset(0 0 0.666667% 0); }
.photo-viewer #viewer-thumbs button:has(> img[src="assets/restaurants/final-20261106/R030/03.jpg"]) {
  display: flex;
  align-items: center;
}
.photo-viewer #viewer-thumbs img[src="assets/restaurants/final-20261106/R030/03.jpg"] {
  height: auto;
  clip-path: inset(0 0 0.666667% 0);
}
.restaurant-detail { padding-bottom: 0; }
.detail-actions { position: static; margin: 24px 0 0; padding: 0; border: 0; background: none; backdrop-filter: none; }
.external-links { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; }
.video-section .youtube-player { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--deep); }
.youtube-launch { display: block; position: relative; width: 100%; height: 100%; padding: 0; border-radius: inherit; background: var(--deep); }
.youtube-launch > img { width: 100%; height: 100%; object-fit: contain; }
.youtube-launch > img[data-thumbnail-state="loading"] { opacity: 0; }
.youtube-thumbnail-fallback { position: absolute; left: 12px; right: 12px; top: calc(50% + 34px); color: var(--white); font-size: 12px; line-height: 1.5; text-align: center; }
.youtube-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: var(--white); }
.youtube-play-icon svg { width: 26px; height: 26px; fill: currentColor; stroke-width: 0; }
.youtube-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.youtube-launch:focus-visible, .youtube-player iframe:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.youtube-title { margin-top: 8px; font-size: 14px; line-height: 1.6; }
.youtube-external { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.youtube-external svg { width: 14px; height: 14px; }
.detail-actions .primary-button { padding: 8px; font-size: 12px; min-height: 48px; letter-spacing: 0; gap: 6px; }
.detail-actions small { font-size: 11px; line-height: 1.6; margin-top: 12px; }
.saved-heading { padding: 20px var(--page-gutter); }
.saved-heading .eyebrow { display: none; }
.saved-heading h1 { font: 600 24px/1.4 var(--sans); }
.saved-heading p { font-size: 14px; line-height: 1.6; }
@media (max-width: 374px) {
  .filter-chips { gap: 0 4px; }
  .filter-chips .chip { font-size: 11px; }
  .map-selected-card { grid-template-columns: 72px minmax(0,1fr); gap: 8px; }
  .map-selected-card > a > img { width: 72px; }
}
@media (max-height: 640px) {
  .map-selected-card { padding: 8px; grid-template-columns: 60px minmax(0,1fr); gap: 8px; }
  .map-selected-card > a > img { width: 60px; height: 72px; }
  .map-selected-card .detail-link { margin-top: 4px; }
  .map-filters[open] { max-height: 160px; }
}

/* Existing ledger score; no change to store ratings or photo-list stars. */
.victory-score { display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin: 12px 0; padding: 9px 12px; border: 1px solid var(--gold); border-radius: 6px; font: 500 13px/1.5 var(--sans); color: var(--green); }
.victory-label, .victory-value { white-space: nowrap; }
.victory-stars { color: #87662f; letter-spacing: 1px; white-space: nowrap; }
.victory-value { font-variant-numeric: tabular-nums; }
.victory-missing { color: var(--muted); }
.map-carousel-card { height: 108px; }
.victory-score-compact { border: 0; padding: 0; margin: 3px 0 0; gap: 4px; font-size: 10px; line-height: 1.4; }
.victory-score-compact .victory-stars { letter-spacing: 0; }

/* Shared photo/map controls; the full filters live in a bottom sheet. */
.explore-controls, .map-page .explore-controls { padding: 8px var(--page-gutter); }
.explore-controls > .segment, .map-page .explore-controls > .segment { margin-bottom: 8px; }
.filter-toolbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filter-open { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 8px 10px; border-radius: 6px; background: var(--green); color: #fff; font-size: 13px; font-weight: 600; }
.filter-badge { display: grid; place-items: center; min-width: 19px; height: 19px; padding-inline: 4px; border-radius: 10px; background: var(--paper); color: var(--green); font-size: 11px; }
.quick-cuisines { display: flex; flex: 1; min-width: 0; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.quick-cuisines::-webkit-scrollbar { display: none; }
.quick-cuisines .chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.filter-result-summary { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--green); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.filter-result-summary b { font-weight: 600; }
.filter-result-summary > span { color: var(--muted); }
html.filter-panel-open { overflow: hidden; }
dialog.filter-sheet { position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 520px; height: auto; max-height: min(88dvh,760px); padding: 0; border: 0; border-radius: 16px 16px 0 0; background: var(--paper); color: var(--ink); overflow: hidden; }
dialog.filter-sheet[open] { display: flex; flex-direction: column; }
dialog.filter-sheet::backdrop { background: #102b2466; }
.filter-sheet-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.filter-sheet-header h2 { font: 600 17px/1.4 var(--sans); }
.filter-sheet-header .icon-button { min-width: 44px; min-height: 44px; background: transparent; }
.filter-sheet-body { padding: 16px; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.filter-search-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.filter-sheet .search-box { margin-bottom: 18px; }
.filter-sheet .search-box input { font-size: 16px; }
.filter-sheet .filter-group { margin-bottom: 16px; }
.filter-sheet .filter-group:last-child { margin-bottom: 0; }
.filter-sheet .filter-heading { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 1.5; border: 0; padding: 0 0 0 12px; }
.filter-sheet .filter-chips { gap: 4px; }
.filter-sheet .chip { font-size: 12px; }
.filter-sheet-footer { flex-shrink: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
#filter-sheet-status { margin-bottom: 8px; font-size: 12px; line-height: 1.5; text-align: center; }
#filter-sheet-status.no-results { color: #96432e; }
.filter-sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.filter-sheet-actions button { min-height: 48px; padding: 8px; font-size: 13px; }
.filter-sheet-actions .primary-button:disabled { background: #d9ded8; color: #69736b; cursor: not-allowed; }
@media (max-width: 374px) { .victory-score { gap: 6px; padding-inline: 8px; font-size: 12px; } .victory-score-compact { font-size: 10px; padding: 0; } }

.filter-sheet-actions .secondary-button { border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--green); }

/* Approved jade address-plate brand; all non-logo brand colors stay unchanged. */
@font-face {
  font-family: 'MeshiMap Plate Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/noto-serif-jp-plate-700.ttf') format('truetype');
}
.app-header .brand { position: relative; display: inline-flex; flex: 0 1 auto; min-width: 0; min-height: 36px; height: 36px; max-width: calc(100% - 52px); gap: 8px; padding: 5px 11px; border-radius: 7px; background: #1f8a7a; color: #fff; letter-spacing: 0; }
.app-header .brand::after { content: ''; position: absolute; inset: 3px; border: 1px solid #ffffffc9; border-radius: 4px; pointer-events: none; }
.app-header .brand-copy { display: block; min-width: 0; }
.app-header .brand-name { display: block; font: 700 19px/1.2 'MeshiMap Plate Serif',var(--serif); white-space: nowrap; }
.app-header .brand-mark, .app-header .brand-tagline { display: none; }
.app-header.home-header .brand { height: 44px; min-height: 44px; padding: 4px 13px; }
.app-header.home-header .brand-mark { display: block; color: #ffe1a0; flex-shrink: 0; }
.app-header.home-header .brand-mark svg { width: 23px; height: 25px; }
.app-header.home-header .brand-tagline { display: block; font: 600 8px/1.3 var(--sans); letter-spacing: .18em; color: #ffe1a0; white-space: nowrap; }
.app-header.home-header .brand-name { font-size: 20px; }
.app-header #about-button { flex-shrink: 0; }
.search-intro { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; }
.search-plate { position: relative; display: grid; place-items: center; flex-shrink: 0; margin: 0; min-width: 100px; height: 56px; padding: 4px 16px; border: 2px solid var(--green); border-radius: 9px; background: #fff; color: var(--green); font: 700 28px/1.2 'MeshiMap Plate Serif',var(--serif); }
.search-plate::before { content: ''; position: absolute; inset: 3px; border: 1px solid var(--green); border-radius: 5px; pointer-events: none; }
.search-intro p { margin: 0; color: #727572; font-size: 12px; line-height: 1.7; }
.explore-controls > .segment { gap: 0; padding: 4px; border: 0; border-radius: 28px; background: #e9e6dd; }
.explore-controls > .segment button { height: 44px; border-radius: 24px; font-size: 14px; font-weight: 600; color: #727572; }
.explore-controls > .segment button::before { content: none; }
.explore-controls > .segment button.active { background: var(--green); color: #fff; box-shadow: none; }
@media (max-width: 380px) {
  .app-header.home-header .brand-name { font-size: 19px; }
  .app-header .brand-name { font-size: 18px; }
  .search-intro { gap: 10px; }
  .search-plate { min-width: 94px; }
  .search-intro p { font-size: 11px; }
}

/* Approved scene palette: home and filter sheet only. */
.page-content .scene-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.scene-chip[data-scene-tone="sun"] { --scene-bg: #fdefc8; --scene-icon: #b07a10; }
.scene-chip[data-scene-tone="beer"] { --scene-bg: #dfe3f5; --scene-icon: #3b4a8f; }
.scene-chip[data-scene-tone="solo"] { --scene-bg: #e3efe4; --scene-icon: #3f7a4c; }
.scene-chip[data-scene-tone="group"] { --scene-bg: #fbe1d8; --scene-icon: #b3502f; }
.scene-chip[data-scene-tone="leaf"] { --scene-bg: #d9f0ea; --scene-icon: #1f8a7a; }
.scene-chip[data-scene-tone="shop"] { --scene-bg: #f3e2cf; --scene-icon: #8a5a2b; }
.scene-chip[data-scene-tone="star"] { --scene-bg: #f7d9dc; --scene-icon: #b0303f; }
.chip.scene-chip { color: #3b3b3b; font-weight: 700; }
.chip.scene-chip::before { border: 0; background: var(--scene-bg); }
.chip.scene-chip svg { color: var(--scene-icon); flex-shrink: 0; }
.chip.scene-chip.active { color: var(--white); }
.chip.scene-chip.active::before { background: var(--green); }
.chip.scene-chip.active svg { color: var(--white); }
.chip.scene-chip:disabled { color: #90958d; }
.chip.scene-chip:disabled::before { background: #ecece6; }
.chip.scene-chip:disabled svg { color: #90958d; }
