:root{color-scheme:light;--ink:#333;--green:#00693e;--yellow:#f4ba00;--mint:#f1fff8;--muted:#65746d;--paper:#fff;--line:#dcece3;--hair:#fff6d7;--beauty:#fff6d7;--body:#e8f7ed}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-size:1rem;font-weight:500;line-height:1.8;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer}main{max-width:860px;margin:auto;padding:0 22px}.site-header{position:relative;max-width:none;margin:auto;padding:18px max(22px,calc((100vw - 816px)/2));display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--line)}.site-header:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:repeating-linear-gradient(90deg,var(--green) 0 28px,var(--yellow) 28px 44px,#54bdaa 44px 58px)}.header-brand{display:flex;align-items:center;gap:10px;line-height:1.3;color:var(--green)}.header-brand svg{width:34px;height:34px;stroke-width:1.9}.header-brand small{display:block;font-size:.875rem;letter-spacing:.13em}.header-brand strong{display:block;font-size:1.35rem;font-weight:700;letter-spacing:.06em}.menu-toggle{width:46px;height:46px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border:0;border-radius:50%;background:var(--green)}.menu-toggle span{display:block;width:21px;height:2px;background:#fff;border-radius:3px}.menu-toggle:hover{background:#004f2f}.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}#home{max-width:none;padding:0}.hero{max-width:1180px;margin:auto;text-align:center;padding:24px 2px 36px}.tagline{font-size:1rem;font-weight:700;color:var(--green);margin:0 0 24px;line-height:1.9;letter-spacing:.03em}.shop-nav{width:100%;margin:0 auto}.shop-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.shop{display:flex;flex-direction:column;min-width:0;gap:17px;-webkit-tap-highlight-color:transparent;--fill:#fff;--border:#84b49b}.hair{--fill:var(--hair)}.beauty{--fill:#fff}.body{--fill:var(--body)}.shop-frame{display:block;position:relative;width:100%;aspect-ratio:1;overflow:hidden;border:0;background:transparent;transition:transform .18s}.shop-icon{position:absolute;top:0;width:300%;height:100%;max-width:none;object-fit:fill;pointer-events:none}.hair .shop-icon{left:0}.beauty .shop-icon{left:-100%}.body .shop-icon{left:-200%}.bubble{position:relative;display:flex;flex-direction:column;justify-content:center;align-self:center;width:calc(100% - 8px);padding:9px 3px;border:1.5px solid var(--border);border-radius:16px;background:var(--fill);color:var(--green);line-height:1.5;transition:transform .18s,box-shadow .18s}.bubble:before{content:"";position:absolute;width:12px;height:12px;top:-8px;left:calc(50% - 6px);background:var(--fill);border-left:1.5px solid var(--border);border-top:1.5px solid var(--border);transform:rotate(45deg)}.bubble strong{font-size:1.125rem;font-weight:700;letter-spacing:.04em}.bubble>span{font-size:.875rem;margin-top:1px}.shop:hover .bubble{transform:translateY(-3px);box-shadow:0 4px 0 #00693e15}.shop:hover .shop-frame{transform:translateY(-2px)}.shop:active .bubble{transform:translateY(1px)}.news{background:var(--mint);padding:35px 22px 44px;border-radius:45% 45% 0 0 / 16px 16px 0 0}.news h2{display:table;color:var(--green);font-size:1.35rem;font-weight:700;letter-spacing:.06em;line-height:1.7;margin:0 auto 26px;background:linear-gradient(transparent 70%,#ffed8c 70%,#ffed8c 94%,transparent 94%)}.accent{display:none}.coming-soon{max-width:740px;margin:auto;border:1px solid #badac8;border-radius:20px;background:#fff;text-align:center;padding:32px 14px 30px}.small-label{display:inline-block;font-size:.875rem;color:var(--green);background:#fff4bd;border-radius:30px;padding:4px 16px;font-weight:700}.coming-title{font-size:clamp(2rem,8vw,2.7rem);font-family:inherit;font-weight:700;color:var(--green);letter-spacing:.04em;margin:12px 0 16px;line-height:1.4}.coming-soon>p:last-child{font-size:.875rem;color:var(--muted);line-height:2.1;margin:0}footer{text-align:center;background:var(--green);color:#fff;font-size:.875rem;padding:29px 20px 25px;letter-spacing:.04em}footer small{display:block;font-size:.75rem;margin-top:6px;color:#d2e8dc}.menu-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(370px,92vw);max-width:none;height:100dvh;max-height:100dvh;overflow:auto;border:0;border-top:5px solid var(--yellow);padding:23px 24px;background:var(--mint);color:var(--green)}.menu-dialog::backdrop{background:#00361f66}.menu-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.menu-top h2{font-size:1.35rem;margin:0}.menu-close{border:0;background:var(--green);color:#fff;border-radius:30px;font-size:.875rem;padding:8px 16px}.menu-dialog nav>a,.menu-categories>a{display:block;padding:13px 4px;border-bottom:1px solid #c4dece;font-size:1rem;font-weight:700}.menu-dialog a:hover,.sitemap-links a:hover{background:#fff3ba}.menu-categories{margin-top:28px}.menu-categories p{color:var(--muted);font-size:.875rem;margin:0 0 4px}.menu-signature{font-size:.875rem;color:var(--muted);margin-top:32px}.menu-open{overflow:hidden}#listing,#info{padding-top:26px;min-height:65vh;padding-bottom:40px}.back{display:inline-block;font-size:.875rem;text-decoration:underline;text-underline-offset:5px;color:var(--green);padding:8px 0}.list-header{padding:22px 0 24px}.eyebrow{font-size:.875rem;color:var(--muted);margin:0 0 8px}.list-header h1,.info-content h1{font-size:1.9rem;color:var(--green);margin:0;line-height:1.6;font-weight:700}.demo-note{font-size:.875rem;color:var(--muted);margin:14px 0 0}.cards{display:grid;gap:16px}.salon-card{display:grid;grid-template-columns:85px minmax(0,1fr);gap:16px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--yellow);border-radius:16px;padding:20px 16px}.demo-art{display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--mint);height:95px}.demo-art svg{width:38px;height:38px;color:var(--green)}.card-text{min-width:0}.demo-badge{font-size:.75rem;padding:3px 10px;border-radius:20px;background:#fff4bd;color:var(--green);display:inline-block}.card-text h2{font-size:1rem;color:var(--green);margin:7px 0;line-height:1.6;font-weight:700}.card-text p{font-size:.875rem;line-height:1.8;margin:0;color:var(--muted)}.info-content{padding:22px 0;max-width:680px}.info-content h1{font-size:1.75rem;margin-bottom:24px}.info-content>p{line-height:2}.info-notice{font-size:.875rem;color:var(--muted);background:var(--mint);border-left:4px solid var(--yellow);padding:18px;border-radius:8px;margin-top:28px}.sitemap-links a{display:block;color:var(--green);border-bottom:1px solid var(--line);padding:16px 8px}.operator-details{margin:24px 0 30px}.operator-details>div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}.operator-details dt{color:var(--muted);font-size:.875rem}.operator-details dd{margin:0}@media(min-width:650px){.site-header{padding-top:22px;padding-bottom:22px}.header-brand strong{font-size:1.5rem}.hero{padding:30px 12px 46px}.tagline{font-size:1.2rem;margin-bottom:30px}.shop-links{gap:8px}.shop{gap:20px}.bubble{padding:12px 8px;border-radius:20px}.bubble strong{font-size:1.4rem}.bubble>span{font-size:1rem}.news{padding:42px 22px 50px}.news h2{font-size:1.7rem}.coming-soon{padding:38px 20px}.coming-soon>p:last-child{font-size:1rem}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.salon-card{grid-template-columns:70px minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){.bubble,.shop-frame{transition:none}}@media(max-width:350px){main{padding-inline:14px}.hero{padding-inline:2px}.bubble strong{font-size:1rem}.bubble>span{font-size:.875rem}.salon-card{grid-template-columns:60px minmax(0,1fr);gap:12px}.header-brand strong{font-size:1.2rem}.tagline{max-width:270px;margin-inline:auto}.news{padding-inline:14px}}
/* Unframed introduction, close to the three category storefronts. */
.welcome-copy{max-width:760px;margin:0 auto 3px;padding:18px 14px 0;text-align:center;color:var(--green)}
.intro-copy{display:flex;flex-direction:column;align-items:center}
.sign-lead{font-size:1rem;font-weight:700;line-height:1.8;letter-spacing:.02em;margin:0 0 10px}
.sign-message{font-size:.875rem;font-weight:500;line-height:1.9;letter-spacing:.01em;margin:0;color:#486355}
.desktop-break{display:none}
.hero{padding-top:0}
@media(min-width:650px){.welcome-copy{padding-top:28px;margin-bottom:6px}.sign-lead{font-size:1.25rem;margin-bottom:12px}.sign-message{font-size:1rem;line-height:2}.desktop-break{display:block}}
/* Keep category labels balanced even when one uses two lines. */
.bubble{padding-block:7px}
.bubble strong{display:flex;align-items:center;justify-content:center;min-height:2.65em;font-size:1rem;line-height:1.3;letter-spacing:.015em}
@media(min-width:650px){.bubble{padding-block:10px}.bubble strong{font-size:1.3rem}}
/* A quiet illustrated town map and riverside dot fireworks behind the guide. */
#home{position:relative;isolation:isolate;background:#f7fff9}
#home:before{content:"";position:absolute;inset:0;z-index:-1;background-image:url('assets/toda-map-fireworks.png');background-size:100% auto;background-position:center top;background-repeat:no-repeat;pointer-events:none}
.news{background:rgba(241,255,248,.62)}
@media(min-width:650px){#home:before{background-size:900px auto;background-position:center center}}
.coverage{border-radius:0;padding-top:12px}
.coverage-title{font-size:1.35rem;font-weight:700;color:var(--green);line-height:1.7;margin:15px 0}
.coverage-card>p:not(.coverage-title){font-size:.875rem;color:var(--muted);line-height:2.1;margin:0}
.contact-form{margin-top:30px;border-top:1px solid var(--line);padding-top:25px;text-align:left}
.contact-form h3{font-size:1.1rem;color:var(--green);margin:0 0 15px;text-align:center}
.form-status{font-size:.875rem;color:var(--muted);margin:0 0 18px;text-align:center}
.contact-form fieldset{border:0;padding:0;margin:0;min-width:0}
.contact-form label{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:700;color:var(--green);margin:17px 0 7px}
.contact-form label span{font-size:.75rem;color:#697555;font-weight:500;background:#fff4bd;border-radius:5px;padding:0 6px}
.contact-form input,.contact-form textarea{display:block;width:100%;border:1px solid #b8d2c3;border-radius:9px;background:#fff;font:inherit;font-size:1rem;padding:11px 12px;color:var(--ink);line-height:1.7}
.contact-form input:disabled,.contact-form textarea:disabled{background:#f7faf8;color:#67746b;opacity:1}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--green);outline-offset:2px}
.form-privacy{font-size:.75rem;color:var(--muted);line-height:1.8;margin:17px 0}
.contact-form button{display:block;min-width:180px;margin:20px auto 0;padding:11px 28px;background:var(--green);color:#fff;border:0;border-radius:30px;font-size:1rem;font-weight:700}
.contact-form button:disabled{background:#a5b9aa;cursor:default}
@media(min-width:650px){.coverage-title{font-size:1.65rem}.coverage-card>p:not(.coverage-title){font-size:1rem}.contact-form{max-width:560px;margin-inline:auto}}
/* Salon profiles: the same green-and-yellow editorial palette as the guide. */
.real-salon-card{display:block;padding:0;overflow:hidden;transition:box-shadow .18s}
.real-salon-card:hover{box-shadow:0 6px 22px #00693e18}
.real-card-photo{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.real-salon-card .card-text{padding:18px 20px 22px}
.real-card-tags{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.listing-pending{font-size:.75rem;color:var(--muted)}
.real-salon-card h2{font-size:1.25rem;overflow-wrap:anywhere}
.real-salon-card h2 small{display:block;font-size:.875rem;margin-top:3px;font-weight:500}
.card-more{display:block;color:var(--green);font-size:.875rem;text-decoration:underline;text-underline-offset:5px;margin-top:16px}
.salon-detail-body{background:#fff}
.salon-detail{padding-top:22px;padding-bottom:46px;max-width:860px}
.detail-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;font-size:.875rem;color:var(--muted);margin-bottom:22px}
.detail-breadcrumb a{text-decoration:underline;text-underline-offset:4px}
.detail-heading{padding-bottom:23px}
.detail-status{display:inline-block;background:#fff4bd;color:var(--green);border-radius:8px;padding:3px 12px;margin:0 0 12px;font-size:.875rem}
.detail-heading h1{font-size:clamp(1.8rem,7vw,2.6rem);color:var(--green);line-height:1.4;margin:0 0 17px;overflow-wrap:anywhere}
.detail-heading h1 small{display:block;font-size:1rem;font-weight:500;margin-top:7px;letter-spacing:.06em}
.detail-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.875rem;color:var(--green)}
.detail-tags>a,.detail-tags>span:not(.detail-area){border-radius:25px;background:#e6f3eb;padding:3px 15px}
.detail-area{color:var(--muted);padding-left:4px}
.detail-hero-photo{margin:0;overflow:hidden;border-radius:15px}
.detail-hero-photo img{width:100%;height:auto;display:block}
.detail-intro{font-size:1rem;line-height:2.1;margin:23px 0 32px}
.detail-owner{padding:28px 22px 32px;background:var(--mint);border-radius:18px;margin-bottom:26px}
.detail-owner h2{color:var(--green);font-size:1.3rem;line-height:1.6;margin:0 0 25px}
.detail-owner h2:after{content:"";display:block;width:36px;height:4px;background:var(--yellow);margin-top:9px;border-radius:3px}
.owner-layout{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;align-items:center}
.owner-placeholder{width:100px;height:100px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:50%;background:#e1e3e2;color:#65706a;font-size:.875rem;line-height:1.6}
.owner-label{font-size:.875rem;color:var(--muted);margin:0}
.owner-pending{font-size:1.2rem;color:var(--green);font-weight:700;margin:5px 0 8px}
.detail-pending-copy{font-size:.875rem;line-height:1.9;color:var(--muted);margin:0;overflow-wrap:anywhere}
.detail-back{display:block;text-align:center;padding:13px 18px;border:1px solid var(--green);border-radius:30px;color:var(--green);font-size:1rem;font-weight:700}
@media(min-width:650px){.salon-detail{padding-top:30px;padding-bottom:56px}.detail-heading{padding-bottom:28px}.detail-intro{margin:28px 0 38px;font-size:1.1rem}.detail-owner{padding:34px 36px 38px}.owner-layout{grid-template-columns:140px 1fr;gap:30px}.owner-placeholder{width:140px;height:140px;font-size:1rem}.detail-back{max-width:380px;margin:auto}}
@media(max-width:350px){.detail-owner{padding-inline:16px}.owner-layout{grid-template-columns:80px 1fr;gap:14px}.owner-placeholder{width:80px;height:80px}.detail-pending-copy br{display:none}}

/* Beauty category: a soft pink palette, shared by listings and salon profiles. */
.theme-beauty{--green:#95546e;--yellow:#efbbcf;--mint:#fff2f7;--muted:#796b73;--line:#ecd9e2;--paper:#fffafd;color:#493c44;background:var(--paper)}
.theme-beauty .site-header{background:#fffafd}
.theme-beauty .site-header:before{background:repeating-linear-gradient(90deg,#b87592 0 28px,#efbbcf 28px 44px,#f6dce7 44px 58px)}
.theme-beauty .menu-toggle:hover{background:#7c4058}
.theme-beauty .menu-dialog::backdrop{background:#63334a55}
.theme-beauty .menu-dialog nav>a,.theme-beauty .menu-categories>a{border-color:var(--line)}
.theme-beauty .menu-dialog a:hover,.theme-beauty .sitemap-links a:hover{background:#fce2ed}
.theme-beauty .salon-card{background:#fff;border-color:var(--line);border-top-color:#efbbcf}
.theme-beauty .demo-badge,.theme-beauty .detail-status{background:#fce0eb;color:#80415c}
.theme-beauty .real-salon-card:hover{box-shadow:0 6px 22px #95546e18}
.theme-beauty .detail-tags>a,.theme-beauty .detail-tags>span:not(.detail-area){background:#fbe4ed;color:#80415c}
.theme-beauty .detail-owner{background:#fff0f6;border:1px solid #f3dce6}
.theme-beauty footer{background:#95546e}
.theme-beauty footer small{color:#f9e6ee}
.theme-beauty .detail-back{background:#fff;color:#80415c}
.theme-beauty .detail-back:hover{background:#fce2ed}
/* The homepage entry hints at the destination without changing the other categories. */
.shop.beauty{--fill:#fff0f6;--border:#d9a0b6}
.shop.beauty .bubble{color:#95546e}

/* Hair salons: creamy milk-tea backgrounds with cocoa text. */
.theme-hair{--green:#79543f;--yellow:#dfb995;--mint:#faf1e8;--muted:#7e7065;--line:#e9d9ca;--paper:#fffaf5;color:#493c33;background:var(--paper)}
.theme-hair .site-header{background:#fffaf5}
.theme-hair .site-header:before{background:repeating-linear-gradient(90deg,#a47a5b 0 28px,#dfb995 28px 44px,#efe0cf 44px 58px)}
.theme-hair .menu-toggle:hover{background:#63422f}
.theme-hair .menu-dialog::backdrop{background:#50372555}
.theme-hair .menu-dialog nav>a,.theme-hair .menu-categories>a{border-color:var(--line)}
.theme-hair .menu-dialog a:hover,.theme-hair .sitemap-links a:hover{background:#f3e1ce}
.theme-hair .salon-card{background:#fffdfb;border-color:var(--line);border-top-color:#dfb995}
.theme-hair .demo-badge{background:#f3e1ce;color:#79543f}
.theme-hair .demo-art{background:#faf1e8}
.theme-hair footer{background:#79543f}
.theme-hair footer small{color:#f4e7da}
.shop.hair{--fill:#faf1e8;--border:#caa789}
.shop.hair .bubble{color:#79543f}

/* Two equally sized supporting photographs below the salon introduction. */
.detail-subphotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 32px}
.detail-subphotos figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#fbe4ed}
.detail-subphotos img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.detail-subphotos .nail-design-photo{object-position:50% 60%}
@media(min-width:650px){.detail-subphotos{gap:18px;margin-bottom:38px}.detail-subphotos figure{border-radius:15px}}

/* The map begins directly beneath the header and continues through the hero. */
#home:before{background-image:url('assets/toda-map-pins.png');background-position:center top;background-size:100% auto}
.hero .shop{gap:10px}
@media(min-width:650px){#home:before{background-size:1180px auto;background-position:center top}.hero .shop{gap:14px}}
/* Below the category buttons, use an uninterrupted pale-green surface. */
#home .news{background:var(--mint);border-radius:0}

/* Swipeable three-article preview. */
.article-carousel{max-width:740px;margin:auto}
.article-track{position:relative;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:20px;overscroll-behavior-x:contain}
.article-track::-webkit-scrollbar{display:none}
.article-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;border:1px solid #badac8;border-radius:20px;background:#fff;text-align:center;padding:22px 16px 25px}
.article-demo-art{position:relative;width:150px;height:150px;overflow:hidden;margin:8px auto 4px}
.article-category{font-size:.875rem;color:var(--green);font-weight:700}
.article-slide h3{font-size:1.25rem;color:var(--green);line-height:1.7;margin:10px 0}
.article-slide p{font-size:1rem;margin:0 0 12px;color:var(--muted)}
.article-slide small{display:block;font-size:.75rem;color:var(--muted);line-height:1.8}
.article-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin:18px 0 0}
.article-controls>.article-prev,.article-controls>.article-next{border:1px solid #badac8;border-radius:24px;background:#fff;color:var(--green);padding:8px 18px;min-height:44px;font-size:.875rem}
.article-controls>button:disabled{opacity:.4;cursor:default}
.article-dots{display:flex;gap:2px}
.article-dots button{display:grid;place-items:center;width:36px;height:44px;padding:0;background:transparent;border:0}
.article-dots button:before{content:"";width:9px;height:9px;border-radius:50%;background:#c8dbcf}
.article-dots button[aria-current="true"]:before{background:var(--green);width:11px;height:11px}
.article-page{text-align:center;color:var(--muted);font-size:.875rem;margin:5px 0 0}
@media(max-width:350px){.article-controls{gap:10px}.article-slide h3{font-size:1.1rem}.article-slide{padding-inline:12px}}

/* Compact article previews, approximately half the previous height. */
.article-slide{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:16px 14px}
.article-demo-art{width:84px;height:84px;margin:0}
.article-slide-content{min-width:0}
.article-category{display:inline;font-size:.75rem;margin-left:6px}
.article-slide h3{font-size:1rem;line-height:1.6;margin:6px 0}
.article-slide p{font-size:.875rem;line-height:1.6;margin:0 0 6px}
.article-slide small{font-size:.75rem;line-height:1.6}
.article-controls{margin-top:10px}
.article-page{margin-top:0}
@media(min-width:650px){.article-slide{grid-template-columns:110px minmax(0,1fr);gap:22px;padding:18px 24px}.article-demo-art{width:110px;height:110px}.article-slide h3{font-size:1.125rem}.article-category{font-size:.875rem}}
@media(max-width:350px){.article-slide{grid-template-columns:66px minmax(0,1fr);gap:10px;padding:14px 12px}.article-demo-art{width:66px;height:66px}.article-slide h3{font-size:1rem}.article-category{display:block;margin:3px 0 0}}