/* Shared reading layout for Fukuoka stories; navigation uses the site components. */
.fukuoka-story{--ink:#263c44;--sub:#53666b;--green:#264653;--line:#dce5df;--article-related-accent:#264653;--travel-parent-accent:#264653;margin:0;background:#fff;color:var(--ink);font:16px/2 "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased}
.fukuoka-story *,.fukuoka-story *::before,.fukuoka-story *::after{box-sizing:border-box}
.fukuoka-story a{color:var(--green);text-underline-offset:4px}
.fukuoka-story a:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.fukuoka-story .skip-link{position:absolute;top:-80px;left:16px;z-index:1000;background:#fff;padding:12px 16px}
.fukuoka-story .skip-link:focus{top:8px}
.fukuoka-story main{width:min(1080px,calc(100% - 56px));margin:auto}
.fukuoka-story :is(p,li,dd,figcaption){overflow-wrap:break-word}
.fukuoka-story .article-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:min(1120px,calc(100% - 48px));font-size:12px;line-height:1.8;color:var(--sub);margin:22px auto}
.fukuoka-story .intro{padding:38px 0 0}
.fukuoka-story .eyebrow{font-size:12px;letter-spacing:.08em;color:var(--sub)}
.fukuoka-story h1{margin:16px 0 12px;font:600 clamp(34px,5vw,58px)/1.4 "Noto Serif TC","PMingLiU",serif;letter-spacing:.035em;overflow-wrap:anywhere}
.fukuoka-story .subtitle{font:400 clamp(16px,2vw,20px)/1.9 "Noto Serif TC","PMingLiU",serif;color:var(--sub);margin:0 0 24px}
.fukuoka-story .lead{max-width:815px;font:400 18px/2.1 "Noto Serif TC","PMingLiU",serif;margin:0 0 24px}
.fukuoka-story .article-update{font-size:12px;color:var(--sub);margin:16px 0 24px}
.fukuoka-story .article{max-width:815px;margin:auto;padding:12px 0 28px}
.fukuoka-story .article section{display:flow-root;scroll-margin-top:110px}
.fukuoka-story .article h2{font:600 clamp(24px,3vw,32px)/1.6 "Noto Serif TC","PMingLiU",serif;letter-spacing:.025em;margin:60px 0 24px}
.fukuoka-story .article h3{font:600 21px/1.7 "Noto Serif TC","PMingLiU",serif;margin:32px 0 18px}
.fukuoka-story .article p{margin:0 0 24px}
.fukuoka-story .photo{margin:26px 0 32px;max-width:100%}
.fukuoka-story .photo-link{display:block;overflow:hidden;background:#f2f5f2;line-height:0}
.fukuoka-story .photo img{display:block;max-width:100%;width:100%;height:auto}
.fukuoka-story .hero img{aspect-ratio:16/9;object-fit:cover}
.fukuoka-story figcaption{font-size:12px;line-height:1.8;color:var(--sub);margin-top:9px}
.fukuoka-story figcaption :is(a,.credit,.photo-credit){color:var(--sub)}
.fukuoka-story figcaption :is(.credit,.photo-credit){display:block}
.fukuoka-story .paired{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.fukuoka-story .paired .photo{margin:20px 0 28px}
.fukuoka-story .paired img{aspect-ratio:4/3;object-fit:cover}
.fukuoka-story .practical{clear:both;border-top:1px solid var(--line);margin-top:48px}
.fukuoka-story .facts{margin:24px 0 30px}
.fukuoka-story .fact{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.fukuoka-story .fact dt{font-weight:600}
.fukuoka-story .fact dd{margin:0}
.fukuoka-story .fact small{display:block;color:var(--sub);font-size:14px}
.fukuoka-story :is(.note,.intro-note){font-size:14px;color:var(--sub)}
.fukuoka-story .maplink,.fukuoka-story .map-small{display:inline-block;margin:4px 0;min-height:32px}
.fukuoka-story .article-return-row{width:min(900px,calc(100% - 48px));margin:26px auto 42px}
.fukuoka-story>.related{padding:38px 0 42px;background:#f3f6f2;color:var(--ink)}
.fukuoka-story>.related .shell{width:min(1120px,calc(100% - 56px));margin:auto}
.fukuoka-story .related h2{margin:0 0 18px;font:600 25px/1.6 "Noto Serif TC","PMingLiU",serif}
.fukuoka-story .related-items>a{border-top:1px solid #c5d2cf;text-decoration:none}
.fukuoka-story .related-items strong{display:block;font-family:"Noto Serif TC","PMingLiU",serif}
.fukuoka-story .related-items small{display:block}
.fukuoka-story>.article-credits-wrap{width:min(1120px,calc(100% - 56px));margin:24px auto 48px}
.fukuoka-story .article-photo-credits .photo-credits-group{font:400 13px/1.95 "Noto Sans TC","Microsoft JhengHei",sans-serif;color:#415a51}
.fukuoka-story .article-photo-credits a{overflow-wrap:anywhere}
.fukuoka-story img[hidden]{display:none!important}
.fukuoka-story .image-load-error{display:block!important;padding:20px;background:#edf1ea;color:#385641;font:14px/1.8 sans-serif}
@media(min-width:1100px){
 .fukuoka-story .float-right{float:right;width:42%;margin:8px -48px 22px 30px}
 .fukuoka-story .float-left{float:left;width:42%;margin:8px 30px 22px -48px}
 .fukuoka-story .wide{margin-left:-48px;margin-right:-48px;max-width:calc(100% + 96px)}
}
@media(max-width:680px){
 .fukuoka-story main{width:calc(100% - 38px)}
 .fukuoka-story .intro{padding-top:22px}
 .fukuoka-story .article-breadcrumb{width:calc(100% - 38px);font-size:11px;gap:5px}
 .fukuoka-story .article h2{margin-top:42px}
 .fukuoka-story .paired{grid-template-columns:1fr;gap:0}
 .fukuoka-story .fact{grid-template-columns:1fr;gap:5px;padding:14px 0}
 .fukuoka-story>.related{padding:28px 0 32px}
 .fukuoka-story>.related .shell,.fukuoka-story>.article-credits-wrap,.fukuoka-story .article-return-row{width:calc(100% - 38px)}
 .fukuoka-story .related h2{font-size:23px}
}