/*
Theme Name: HAPBAR
Description: A map-first, four-language editorial nightlife guide.
Version: 1.0.0
Requires PHP: 8.0
*/
:root{--paper:#f8f7f3;--ink:#202d32;--muted:#606d70;--line:#dcded8;--night:#182c35;--accent:#b24d36;--soft:#edf0e9;--gold:#e7b77a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.8 Arial,'Noto Sans JP','Yu Gothic','Hiragino Kaku Gothic ProN','Microsoft YaHei','Malgun Gothic',sans-serif}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c56435;outline-offset:5px}button{cursor:pointer}.site-header{max-width:1344px;margin:auto;min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:20px 32px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-size:27px;font-weight:750;letter-spacing:3px;line-height:1.2}.brand small{display:block;font-size:10px;letter-spacing:1.7px;font-weight:600;margin-top:7px}.brand-mark{display:grid;place-items:center;background:var(--night);color:var(--gold);width:54px;height:54px;border-radius:15px;font-size:43px;line-height:1}.site-header nav{display:flex;gap:25px;font-size:14px}.site-header .languages{gap:15px;font-size:13px}.languages [aria-current]{color:var(--accent);border-bottom:1px solid var(--accent)}main{max-width:1280px;margin:28px auto 0}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;margin:0 0 14px;line-height:1.6}h1,h2,h3{font-weight:650;line-height:1.3;letter-spacing:-.035em;margin:0 0 20px}h1{font-size:clamp(36px,4.1vw,60px)}h2{font-size:clamp(28px,2.7vw,39px)}h3{font-size:24px}p{margin:0 0 22px}.explorer{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);min-height:600px}.explorer-copy{padding:47px 44px 32px}.intro{color:var(--muted);max-width:390px;margin-bottom:28px}.area-label{font-size:11px}.city-links{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-bottom:24px}.city-links a{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:10px 0;font-weight:650}.city-links span:last-child{font-size:20px;color:var(--accent)}.small-link{font-size:13px;color:var(--muted);border-bottom:1px solid}.map-surface{position:relative;background:var(--night);color:#f8f7f3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 32px 18px;overflow:hidden;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:45px 45px}.map-caption{align-self:flex-start;font-size:11px;letter-spacing:3px;color:#c0d0d5}.map-surface p{font-size:12px;margin:8px 0 0;color:#c0d0d5;text-align:center}.japan-map{width:100%;max-width:460px;max-height:510px;overflow:visible}.region{fill:#496166;stroke:var(--night);stroke-width:4;transition:fill .2s}.japan-map a:hover .region,.japan-map a:focus .region{fill:#c9a275}.japan-map text{fill:#fff;text-anchor:middle;font-size:14px;font-weight:600;pointer-events:none}.japan-map .inactive{fill:#30474f}.compass{position:absolute;top:36px;right:30px;font-size:12px;text-align:center;color:var(--gold);line-height:1.6}.principles{display:flex;justify-content:space-around;gap:24px;padding:19px 20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}.section{margin:75px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}.section-heading h2{margin-bottom:0}.text-link{font-size:14px;font-weight:650;white-space:normal}.text-link span{margin-left:10px}.genre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.genre-card{border:1px solid var(--line);transition:transform .2s}.genre-card:hover{transform:translateY(-3px);color:inherit}.genre-art{height:188px;background:#23383d;position:relative;overflow:hidden;padding:15px 24px;color:#e1b57e}.genre-art>span{font-size:12px;letter-spacing:2px}.genre-art i{position:absolute;left:50%;bottom:-20px;width:118px;height:154px;border-radius:100px 100px 0 0;border:1px solid #edc594;transform:translateX(-50%);box-shadow:0 0 0 19px #e1b57e12,0 0 0 40px #e1b57e08}.genre-art i:before{content:'';position:absolute;inset:14px;border:1px solid #e1b57e70;border-radius:100px 100px 0 0}.genre-concept .genre-art{background:#733c42;color:#f1c9b7}.genre-concept .genre-art i{width:96px;height:96px;border-radius:50%;bottom:26px;box-shadow:50px 0 0 -1px #733c42,50px 0 0 0 #edc594,-25px 0 0 28px #edc5940a}.genre-concept .genre-art i:before{display:none}.genre-alternative .genre-art{background:#34423a}.genre-alternative .genre-art i{width:110px;height:110px;border-radius:0;bottom:25px;transform:translateX(-50%) rotate(45deg);box-shadow:0 0 0 18px #edc59411,0 0 0 36px #edc59408}.genre-alternative .genre-art i:before{border-radius:0}.genre-copy{padding:25px}.genre-copy h3{font-size:23px}.genre-copy p{font-size:15px;color:var(--muted);min-height:80px}.first-visit{padding:50px;background:var(--soft);display:grid;grid-template-columns:1fr 1fr;gap:65px;border:1px solid var(--line)}.first-visit p{max-width:440px;color:var(--muted)}.guide-list{margin:0;padding-left:30px;align-self:center}.guide-list li{padding:17px 0 17px 10px;border-bottom:1px solid #cdd2c8}.guide-list li::marker{font-size:12px;color:var(--muted)}.guide-list a{display:flex;justify-content:space-between;gap:16px}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:38px;row-gap:35px}.story-card{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-direction:column;align-items:flex-start}.story-card h3{font-size:25px}.story-card p:not(.eyebrow){color:var(--muted);font-size:15px}.story-card .text-link{margin-top:auto}.site-footer{max-width:1280px;margin:90px auto 0;padding:40px 0 24px;border-top:1px solid var(--line);display:grid;grid-template-columns:2fr 1fr;gap:24px}.footer-brand{font-size:29px;letter-spacing:4px;font-weight:700}.site-footer p{font-size:14px;margin:12px 0}.site-footer small{font-size:12px;color:var(--muted)}.site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;align-content:center;font-size:14px}.copyright{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;color:var(--muted);letter-spacing:1px;font-size:11px!important}.article{max-width:820px;margin:55px auto 85px}.back-link{display:inline-block;font-size:14px;color:var(--muted);margin-bottom:35px}.article h1{font-size:clamp(32px,4vw,48px)}.article-intro{font-size:21px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:28px}.article-body{font-size:17px}.article-body h2{font-size:26px;letter-spacing:-.02em;margin:38px 0 16px}.article-body h3{font-size:21px}.article-body li{padding-left:3px;margin:8px 0}.article-body a{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}.article-callout,.notice,.x-embed,.ad-link{background:var(--soft);border:1px solid var(--line);padding:28px;margin-top:35px}.article-callout h2{font-size:24px}.button{display:inline-block;padding:11px 20px;background:var(--night);border:1px solid var(--night);color:#fff;font-size:14px;border-radius:0}.button:hover{color:#fff;background:#354b51}.filters{display:flex;flex-wrap:wrap;align-items:end;gap:16px;background:var(--soft);padding:25px;border:1px solid var(--line);margin:35px 0}.filters label{flex:1;min-width:170px;font-size:14px}.filters input,.filters select{display:block;width:100%;border:1px solid #bac0b9;background:var(--paper);padding:10px;margin-top:6px;color:var(--ink);border-radius:0;height:49px}.filters .button{height:49px}.filters>a{font-size:14px;padding-bottom:10px}.empty-state{max-width:650px;margin:65px auto;text-align:center;padding:20px}.empty-state h2{font-size:28px}.empty-state p{color:var(--muted)}.x-embed a{display:inline-block;margin:12px}.skip{position:absolute;left:20px;top:-100px;background:#fff;padding:12px;z-index:100}.skip:focus{top:10px}@media(min-width:1800px){main,.site-footer{max-width:1280px}}@media(max-width:1350px){main,.site-footer{margin-left:30px;margin-right:30px}.site-header{padding-left:30px;padding-right:30px}}@media(max-width:950px){.site-header{flex-wrap:wrap;gap:20px}.site-header nav{gap:18px}.site-header .languages{margin-left:auto}.explorer-copy{padding:30px}.map-surface{padding:30px 15px}.first-visit{gap:30px;padding:35px}.story-grid{grid-template-columns:1fr 1fr}.genre-copy{padding:20px}.genre-copy h3{font-size:21px}}@media(max-width:680px){body{line-height:1.75}.site-header{padding:18px 20px;gap:17px}.brand{font-size:23px}.brand-mark{width:44px;height:44px;font-size:34px}.brand small{font-size:8px}.site-header nav:not(.languages){order:3;width:100%;justify-content:space-between;font-size:13px;gap:10px}.site-header .languages{gap:10px;font-size:12px}.site-header{align-items:center}.languages{flex-wrap:wrap}main{margin:18px 16px 0}.explorer{grid-template-columns:1fr}.explorer-copy{padding:28px 24px}.explorer h1{font-size:40px}.map-surface{min-height:410px}.japan-map{height:370px;width:auto;max-width:100%}.map-caption{font-size:10px}.map-surface p{font-size:11px}.principles{flex-direction:column;gap:3px;padding:18px 10px;text-align:center;font-size:12px}.section{margin:48px 0}.section-heading{align-items:start;flex-direction:column;gap:14px}.genre-grid,.story-grid,.first-visit{grid-template-columns:1fr}.genre-art{height:155px}.genre-copy p{min-height:0}.first-visit{padding:28px;gap:15px}.guide-list{padding-left:20px}.story-grid{gap:28px}.site-footer{margin:50px 20px 0;grid-template-columns:1fr}.site-footer nav{gap:14px}.article{margin:35px 8px 50px}.article-intro{font-size:18px}.article-body{font-size:16px}.filters{padding:18px}.filters label{min-width:100%}.filters .button{flex:1}.empty-state{padding:0}.copyright{letter-spacing:.3px}.city-links{column-gap:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}