/* Japan Chain Guide · v3 — modern, search-first editorial utility. No external fonts/frameworks. */
:root{color-scheme:light;--indigo:#244C71;--indigo2:#173856;--ink:#162432;--soft:#516475;--muted:#657485;--border:#E0E6EB;--light:#F7F9FB;--surface:#FFF;--accent:#B75943;--signal:#E2A34E;--signal-deep:#B67627;--signal-soft:#FFF8EC;--focus:#244C71;--max:1060px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--surface);color:var(--ink);font:16px/1.64 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}a{color:var(--indigo);text-underline-offset:3px}a:hover{color:var(--indigo2)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:var(--signal-soft);color:var(--ink)}
img{display:block;max-width:100%;height:auto}h1,h2,h3,p{overflow-wrap:break-word}h1,h2,h3{line-height:1.17;letter-spacing:-.032em}h1,h2,h3{margin-top:0}
.wrap{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}
/* Navigation: one quiet, consistent row */
.site-header{border-bottom:1px solid var(--border);background:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:14px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:1.04rem;font-weight:780;letter-spacing:-.035em;white-space:nowrap}
.brand-symbol{display:block;flex:none;width:36px;height:39px;object-fit:contain}
.site-nav{display:flex;align-items:center;gap:clamp(12px,3vw,32px);white-space:nowrap}
.site-nav a{font-size:.89rem;font-weight:600;text-decoration:none;color:var(--soft)}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--indigo)}
.site-nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:9px}
/* Buttons / typography */
.eyebrow{margin:0 0 13px;color:var(--indigo);font-size:.75rem;font-weight:680;letter-spacing:.035em;text-transform:none}
.eyebrow::before{content:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 17px;border-radius:8px;border:1px solid var(--indigo);background:var(--indigo);color:#fff!important;text-decoration:none;font-size:.89rem;font-weight:650;line-height:1.25;cursor:pointer}
.btn:hover{background:var(--indigo2)}.btn-quiet{color:var(--indigo)!important;background:transparent;border-color:#B9C9D7}.btn-quiet:hover{background:var(--light)}
/* Home: search is the main action, without cards or decorative illustration */
.hero{padding:68px 0 34px;border-bottom:1px solid var(--border)}
.hero h1{font-size:clamp(2.7rem,5.8vw,4.65rem);max-width:790px;letter-spacing:-.055em;line-height:1.075;font-weight:750;margin:0}
.hero h1 em{font-style:normal;color:var(--indigo)}
.hero .lead{max-width:620px;font-size:1.065rem;line-height:1.65;color:var(--soft);margin:21px 0 0}
.directory{padding:0 0 40px}
.controls{padding:29px 0 23px;border-bottom:1px solid var(--border);background:#fff}
.search-label{font-size:.95rem;font-weight:720;display:block;margin-bottom:11px}
.search-wrap{position:relative;max-width:780px}
.search-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--indigo);fill:none;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.searchbox{width:100%;min-height:56px;max-width:780px;padding:12px 18px 12px 50px;border:1.5px solid #AFC0CF;border-radius:9px;background:#fff;color:var(--ink);font-size:1rem;outline-offset:3px}
.searchbox::placeholder{color:#7C8B99}
.searchbox:focus-visible{border-color:var(--indigo);box-shadow:0 0 0 4px #244C711C}
.filter-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:23px 0 8px;font-size:.8rem;font-weight:680;color:var(--soft)}
.filter-hint{font-weight:450;color:#7D8B98;font-size:.75rem}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;scrollbar-width:thin;scrollbar-color:#CBD6DF transparent;overscroll-behavior-x:contain}
.chip{flex:none;min-height:42px;padding:8px 13px;border:1px solid var(--border);border-radius:7px;background:var(--light);font-size:.83rem;font-weight:540;color:var(--soft);cursor:pointer;white-space:nowrap}
.chip span{margin-left:3px;font-weight:470;color:#778696}
.chip.active{background:var(--indigo);border-color:var(--indigo);color:white;box-shadow:none}.chip.active span{color:var(--signal)}
.chip:hover:not(.active){background:#EAF0F5;border-color:#C4D0DC}
.directory-heading{display:flex;justify-content:space-between;gap:15px;align-items:baseline;padding:25px 0 8px}
.directory-heading h2{font-size:1.48rem;margin:0;font-weight:740}.count{color:var(--muted);font-size:.84rem;white-space:nowrap;margin:0}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:35px;row-gap:0}
.card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;gap:0 14px;align-content:start;padding:21px 4px 22px 0;border-top:1px solid var(--border);background:#fff;text-decoration:none;color:var(--ink);min-height:163px}
.card .cat{grid-column:1;align-self:start;display:inline-flex;align-items:center;gap:7px;color:var(--soft);font-size:.71rem;font-weight:710;margin:0 0 6px}
.card .cat::before{content:'';width:7px;height:7px;border-radius:99px;background:var(--signal)}
.card h3{grid-column:1;margin:0 0 5px;font-size:1.29rem;font-weight:745;letter-spacing:-.032em;line-height:1.28;color:var(--ink)}
.card p{grid-column:1;margin:0;color:var(--soft);font-size:.84rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .card-more{grid-column:2;grid-row:2 / span 3;align-self:start;color:var(--indigo);font-size:.78rem;font-weight:650;white-space:nowrap;margin-top:2px}
.card .card-more span{display:inline-block;font-size:1rem;margin-left:3px}
.card:hover h3,.card:focus-visible h3{text-decoration:underline;text-decoration-color:var(--signal-deep);text-underline-offset:4px}
.empty{padding:30px 0 65px;color:var(--soft)}
/* Quiet publisher, email and affiliate modules */
.promo-band{border-top:1px solid var(--border);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:37px 0 22px;margin:3px 0 33px}
.promo-band h2{font-size:1.87rem;margin:0;font-weight:730}.promo-band p:not(.eyebrow){margin:9px 0 0;color:var(--soft);max-width:540px;font-size:.92rem}
.newsletter{border-top:1px solid var(--border);padding:37px 0;margin:15px 0 30px}
.newsletter .inner{display:grid;grid-template-columns:1fr minmax(280px,.82fr);gap:35px;align-items:start}
.newsletter h2{font-size:1.65rem;line-height:1.24;max-width:480px;margin:0 0 13px}
.newsletter p{color:var(--soft);font-size:.9rem;margin:7px 0 9px}
.newsletter .input-label{display:block;font-size:.81rem;font-weight:650;margin:0 0 8px}
.email-row{display:flex;gap:8px}.newsletter input[type=email]{width:100%;min-width:0;min-height:45px;border:1px solid #B7C5D0;border-radius:7px;padding:10px 12px}
.newsletter .btn[disabled]{cursor:not-allowed;opacity:.58}.newsletter .form-note{font-size:.75rem;color:var(--muted);margin-top:9px}
.newsletter .consent-row{display:flex;gap:10px;align-items:flex-start;margin-top:11px;font-size:.8rem;color:var(--soft)}.newsletter .consent-row input{margin-top:3px;flex:none;accent-color:var(--indigo)}
.affiliate-slot{margin:22px 0;padding:16px 20px;border-left:2px solid var(--signal);background:var(--light)}.affiliate-slot .ad-label{font-weight:670;font-size:.72rem;color:var(--muted)}
.affiliate-slot h3{font-size:1rem;margin:5px 0 4px}.affiliate-slot p{font-size:.86rem;color:var(--soft);margin:4px 0}.affiliate-slot a{font-weight:650;font-size:.89rem}
.affiliate-slot.demo{border-left-style:dashed;color:var(--soft)}
/* Guides — task centered, readable and precise */
.guide-shell{max-width:820px;padding:28px 24px 62px;margin:0 auto}
.breadcrumb{font-size:.79rem;color:var(--muted);margin-bottom:27px}.breadcrumb a{color:var(--indigo);font-weight:610}
.guide-head{padding-bottom:26px}.guide-head .eyebrow{margin-bottom:10px}
.guide-head h1{font-size:clamp(2.15rem,4.3vw,3.25rem);letter-spacing:-.048em;line-height:1.14;font-weight:760;margin:0}
.guide-head .subtitle{color:var(--soft);font-size:1rem;line-height:1.55;margin:15px 0 0}
.guide-toc{padding:15px 0 20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:0 0 3px}
.guide-toc p{font-size:.77rem;color:var(--muted);font-weight:700;margin:0 0 9px}
.guide-toc div{display:flex;flex-wrap:wrap;gap:9px 21px}.guide-toc a{font-size:.84rem;font-weight:640}
.guide-toc a:hover{text-decoration-color:var(--signal-deep)}
.guide-section{padding:27px 0 29px;border-bottom:1px solid var(--border);scroll-margin-top:20px}
.guide-section h2{font-size:1.54rem;line-height:1.28;font-weight:745;margin:0 0 16px}
.guide-section h3{font-size:1.09rem;margin:18px 0 8px}.guide-section p{margin:9px 0 16px;line-height:1.72;color:#253746}
.guide-section ul,.guide-section ol{padding-left:1.4em;margin:12px 0 18px}.guide-section li{margin:10px 0;line-height:1.67;padding-left:2px}
.guide-section blockquote.note{background:var(--light);border-left:3px solid #C5D4E0;margin:19px 0;padding:13px 17px;color:var(--ink)}
.guide-section table.facts{border-collapse:collapse;width:100%;font-size:.92rem;line-height:1.5;border-top:1px solid var(--border)}
.guide-section table.facts th,.guide-section table.facts td{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left;overflow-wrap:anywhere}
.guide-section table.facts thead{display:none}.guide-section table.facts td:first-child{width:30%;font-size:.86rem;font-weight:700;color:var(--ink)}
.guide-section#how-to-order ol{list-style:none;counter-reset:step;padding:0;margin-top:18px}
.guide-section#how-to-order ol>li{counter-increment:step;position:relative;padding:3px 0 17px 45px;border-bottom:1px solid var(--border);margin:0 0 16px;min-height:39px}
.guide-section#how-to-order ol>li::before{content:counter(step);position:absolute;top:1px;left:0;font-size:.94rem;font-weight:720;color:var(--indigo);display:grid;place-items:center;width:29px;height:29px;border:1px solid color-mix(in srgb,var(--signal) 45%, #C7D4DF);background:var(--signal-soft);border-radius:6px}
.guide-section#faq>p{border-bottom:1px solid var(--border);padding-bottom:12px}
.guide-section#sources{font-size:.88rem}.guide-section#sources li{overflow-wrap:anywhere}
/* Book from same publisher, plainly disclosed */
.book-inline{display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:center;padding:23px 0;margin:18px 0;border-bottom:1px solid var(--border)}
.book-inline img{width:72px;height:auto;box-shadow:0 5px 16px #0C1E2B20;border-radius:2px}
.book-inline h2{font-size:1.08rem;font-weight:720;margin:3px 0 6px}
.book-inline p{color:var(--soft);font-size:.86rem;margin:0 0 7px}
.related{padding:18px 0 28px}.related h2{font-size:1.26rem;margin:0 0 11px}
.related-list{display:flex;gap:7px;flex-wrap:wrap}.related-list a{display:inline-flex;align-items:center;min-height:40px;padding:7px 12px;text-decoration:none;font-size:.85rem;font-weight:600;color:var(--indigo);background:var(--light);border-radius:6px}
.related-list a:hover{background:var(--signal-soft)}
/* Book page, editorial display is limited to actual book image */
.page-intro{padding:52px 0 30px}.page-intro h1{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.05em;margin:0}
.page-intro .lead{max-width:680px;color:var(--soft);font-size:1.03rem;line-height:1.65;margin:17px 0 0}
.book-feature{display:grid;grid-template-columns:minmax(185px,265px) 1fr;gap:40px;padding:33px 0 38px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);align-items:center}
.book-feature img{width:100%;max-width:265px;box-shadow:0 12px 27px #0C1E2B22}
.book-feature h2{font-size:clamp(1.9rem,3.5vw,2.55rem);line-height:1.16;margin:0 0 9px;font-weight:760}
.book-feature p{color:var(--soft);font-size:.96rem}.book-feature .book-sub{font-size:1.11rem;color:var(--ink)}
.book-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.book-next{padding:26px 0 36px;border-bottom:1px solid var(--border)}.book-next h2{margin:5px 0 7px;font-size:1.65rem}.book-next p{color:var(--soft);font-size:.93rem}
/* footer */
.site-footer{background:var(--light);border-top:1px solid var(--border);padding:37px 0 24px;margin-top:32px;color:var(--soft)}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:31px}
.site-footer strong{font-size:1.05rem;color:var(--ink)}.site-footer p{font-size:.78rem;line-height:1.65;margin:10px 0;max-width:420px}
.site-footer .footer-label{color:var(--ink);font-size:.78rem;font-weight:700}
.site-footer ul{list-style:none;padding:0;margin:9px 0;display:grid;gap:7px}.site-footer a{font-size:.83rem;color:var(--indigo)}
.footer-bottom{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:29px;border-top:1px solid var(--border);padding-top:15px;font-size:.73rem;color:var(--muted)}
.utility-page{max-width:790px;margin:0 auto;padding:50px 24px 65px}.utility-page h1{font-size:2.4rem}.utility-page h2{font-size:1.3rem;margin-top:30px}.utility-page p{color:var(--soft)}
@media(max-width:750px){.wrap{width:min(calc(100% - 32px),var(--max))}.header-inner{min-height:62px}.logo{font-size:.94rem;gap:8px}.brand-symbol{width:34px;height:37px}.site-nav{gap:15px}.site-nav a{font-size:.81rem}.hero{padding:42px 0 25px}.hero h1{font-size:clamp(2.2rem,9vw,3.2rem)}.hero .lead{font-size:1rem;margin-top:17px}.grid{grid-template-columns:1fr}.card{min-height:135px}.controls{padding:23px 0 16px}.directory-heading{padding-top:23px}.newsletter .inner{grid-template-columns:1fr;gap:20px}.promo-band{grid-template-columns:1fr;gap:16px}.footer-grid{grid-template-columns:1fr 1fr;gap:24px}.book-feature{grid-template-columns:190px 1fr;gap:24px}}
@media(max-width:520px){.logo{font-size:.79rem;gap:6px}.site-nav{gap:11px}.site-nav a{font-size:.77rem}.brand-symbol{width:32px;height:35px}.hero{padding-top:33px}.hero h1{font-size:clamp(2.16rem,9.3vw,2.8rem)}.hero .lead{font-size:.95rem}.searchbox{font-size:.94rem}.card{min-height:135px;padding-right:0}.card h3{font-size:1.18rem}.card .card-more{font-size:.72rem}.guide-shell{padding:23px 16px 50px}.guide-head h1{font-size:clamp(1.95rem,8vw,2.5rem)}.guide-section table.facts td:first-child{width:37%}.guide-section table.facts td{padding:10px 7px}.guide-toc div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.email-row{flex-direction:column}.email-row .btn{width:100%}.book-feature{grid-template-columns:1fr}.book-feature img{max-width:180px}.footer-grid{grid-template-columns:1fr;gap:10px}.book-inline{grid-template-columns:56px 1fr;gap:14px}.book-inline img{width:56px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}