/* Layout fidelity pass based on the approved desktop, tablet and mobile boards. */
html body{--fidelity-navy:#092d4b;--fidelity-red:#c92f45;--fidelity-gold:#f1c451;overflow-x:hidden}
html body .article-masthead h1{color:#102b43;font-size:clamp(2.05rem,3.2vw,3.05rem)}
html body .nav .search-link>.ui-icon,html body .nav .menu-button>.ui-icon{width:22px;height:22px;max-width:22px;max-height:22px}

html body .search-card{overflow:hidden;padding:0!important;display:grid!important;grid-template-columns:180px 1fr;min-height:178px}
html body .search-card-image{width:100%;height:100%;min-height:178px;object-fit:cover}
html body .search-card-copy{padding:20px 22px}
html body .search-workspace .search-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html body .mobile-home{display:none}
html body .about-portrait{background-image:url("jennifer-portrait.png");background-size:cover;background-position:center top}
html body .about-portrait img{opacity:0}
html body .timeline-content{position:relative;overflow:hidden;padding-right:205px}
html body .timeline-content:after{content:"";position:absolute;right:0;top:0;bottom:0;width:180px;background-size:cover;background-position:center}
html body .timeline-row:nth-child(1) .timeline-content:after{background-image:url("ginzan.jpg")}
html body .timeline-row:nth-child(2) .timeline-content:after{background-image:url("matsushima.jpg")}
html body .timeline-row:nth-child(3) .timeline-content:after{background-image:url("oirase.jpg")}
html body .article-body .article-photo{margin:32px 0;overflow:hidden;background:#f7fafc;border:1px solid var(--line)}
html body .article-body .article-photo img{width:100%;height:auto;max-height:520px;object-fit:cover}
html body .article-body .article-photo figcaption{padding:10px 14px;color:var(--muted);font-size:.88rem;line-height:1.55}
html body .article-body .osorezan-options{grid-template-columns:repeat(3,minmax(0,1fr));margin:24px 0}
html body .article-body .osorezan-options>figcaption{grid-column:1/-1;color:var(--muted);font-size:.88rem;margin-bottom:2px}
html body .article-body .osorezan-options>div{min-width:0;padding:19px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
html body .article-body .osorezan-options strong{display:block;font-family:"Noto Serif TC",Georgia,serif;font-size:1.06rem;color:var(--night)}
html body .article-body .osorezan-options p,html body .article-body .osorezan-options ul{font-size:1rem;line-height:1.65}
@media(max-width:900px){html body .article-body .osorezan-options{grid-template-columns:1fr}}
html body .article-body .source-item{margin:7px 0;font-size:.82rem;line-height:1.6}
html body .article-body .article-table-wrap{margin:28px 0;overflow-x:auto;border:1px solid var(--line);background:#fff}
html body .article-body .article-table-wrap{max-width:100%;box-sizing:border-box}
html body .article-body .article-table-wrap table{width:100%;min-width:540px;border-collapse:collapse;font-size:1rem;line-height:1.6}
html body .article-body .article-table-wrap th,html body .article-body .article-table-wrap td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
html body .article-body .article-table-wrap th{background:#e8f3f8;color:var(--night);font-weight:700;white-space:nowrap}
html body .article-body .article-table-wrap tr:last-child td{border-bottom:0}
html body .article-body .bus-schedule-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0}
html body .article-body .bus-schedule-card{min-width:0;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 14px rgba(9,45,75,.05)}
html body .article-body .bus-schedule-card h3{margin:0 0 12px;color:var(--night);font-family:"Noto Serif TC",Georgia,serif;font-size:1.12rem;line-height:1.45}
html body .article-body .bus-schedule-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
html body .article-body .bus-schedule-card dl>div{min-width:0;padding:9px 10px;background:#f2f7f9;border-radius:9px}
html body .article-body .bus-schedule-card dt{color:var(--muted);font-size:.82rem;line-height:1.4}
html body .article-body .bus-schedule-card dd{margin:3px 0 0;color:var(--night);font-weight:700;line-height:1.45;overflow-wrap:anywhere}
html body .article-body .bus-schedule-card p{margin:11px 0 0;font-size:.94rem;line-height:1.6}
html body .article-body .bus-schedule-card-caution{border-color:#e4b8bd;background:#fffafb}
@media(max-width:720px){html body .article-masthead{display:block}html body .article-masthead .route-summary{margin-top:24px}}
@media(max-width:720px){html body .article-body .article-table-wrap table{min-width:540px;font-size:1rem}html body .article-body .article-table-wrap th,html body .article-body .article-table-wrap td{padding:9px 8px}}
@media(max-width:720px){html body .article-body .bus-schedule-cards{grid-template-columns:1fr;gap:12px}html body .article-body .bus-schedule-card{padding:16px}html body .article-body .bus-schedule-card dl{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (min-width:1101px){
  html body .design-hero{min-height:555px}
  html body .design-hero-grid{min-height:555px}
  html body .design-hero-copy{padding-top:56px;padding-bottom:116px}
  html body .design-hero h1{font-size:clamp(3.8rem,4.8vw,5.2rem);line-height:1.16}
  html body .journey-planner{border-radius:3px;box-shadow:0 22px 50px rgba(9,45,75,.22)}
  html body .featured-route-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .region-hero-grid{grid-template-columns:42% 58%;min-height:430px}
  html body .region-cover{min-height:430px}
  html body .article-hero{min-height:450px;background-image:linear-gradient(90deg,rgba(251,252,253,.98) 0,rgba(251,252,253,.88) 45%,rgba(251,252,253,.28) 72%),var(--article-cover,url("matsushima-winter.png"))!important;background-position:center;background-size:cover;background-repeat:no-repeat}
  html body .article-hero:after{display:none}
  html body .article-masthead{min-height:340px}
  html body .article-masthead>div{max-width:820px}
  html body .route-summary{align-self:end}
}

@media (min-width:721px) and (max-width:1100px){
  html body .design-hero{min-height:650px}
  html body .design-hero-grid{min-height:650px}
  html body .design-hero-photo{left:38%;width:62%}
  html body .design-hero-copy{max-width:none;padding-top:66px;padding-right:24px}
  html body .journey-planner{grid-template-columns:1.2fr repeat(3,1fr);padding:20px}
  html body .planner-submit{grid-column:1/-1!important}
  html body .region-hero-grid{grid-template-columns:46% 54%}
  html body .region-cover{border-radius:0;min-height:410px}
  html body .region-facts .decision-panel{grid-template-columns:repeat(4,1fr)}
  html body .region-facts .decision-panel>div{padding:10px 16px}
  html body .region-facts .decision-panel p{display:none}
  html body .directory-hero-content{min-height:390px}
  html body .directory-hero-media{left:42%}
  html body .directory-heading{grid-template-columns:1fr}
  html body .directory-heading p{max-width:560px}
  html body .category-hero-grid{min-height:440px}
  html body .category-hero-media{left:45%}
  html body .search-hero-media{left:45%}
  html body .article-hero{background-image:linear-gradient(90deg,rgba(251,252,253,.98),rgba(251,252,253,.74)),var(--article-cover,url("matsushima-winter.png"))!important;background-position:center;background-size:cover;background-repeat:no-repeat}
  html body .article-hero:after{display:none}
  html body .article-masthead{grid-template-columns:1fr 290px}
}

@media (max-width:720px){
  html body main>.mobile-home{display:block}
  html body main>.mobile-home~section{display:none!important}
  html body .mobile-home-hero{position:relative;min-height:440px;overflow:hidden}
  html body .mobile-home-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  html body .mobile-home-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.97) 0,rgba(255,255,255,.76) 43%,rgba(255,255,255,.06) 78%)}
  html body .mobile-home-hero-copy{position:relative;z-index:1;padding:26px 26px}
  html body .mobile-home-hero h2{margin:10px 0;font-family:"Noto Serif TC",Georgia,serif;color:var(--fidelity-navy);font-size:2.45rem;line-height:1.16}
  html body .mobile-home-hero p{max-width:92%;color:#233e54;font-size:1rem;line-height:1.75}
  html body .mobile-home-steps{position:relative;z-index:2;margin:-54px 14px 16px;padding:22px 18px 18px;border-radius:16px;background:linear-gradient(135deg,#092d4b,#061f36);color:#fff;box-shadow:0 18px 36px rgba(9,45,75,.2)}
  html body .mobile-home-steps-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}
  html body .mobile-home-steps-title .ui-icon{width:28px;height:28px;color:var(--fidelity-gold)}
  html body .mobile-home-steps-title strong{font-family:"Noto Serif TC",Georgia,serif;font-size:1.22rem}
  html body .mobile-home-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
  html body .mobile-home-steps li{display:grid;justify-items:center;gap:8px;padding:2px 8px;text-align:center;border-right:1px solid rgba(255,255,255,.2)}
  html body .mobile-home-steps li:last-child{border-right:0}
  html body .mobile-home-steps li>.ui-icon{width:44px;height:44px;padding:9px;border-radius:50%;background:#d9ebfb;color:#092d4b}
  html body .mobile-home-steps li:nth-child(2)>.ui-icon{background:#ffda64}
  html body .mobile-home-steps li:nth-child(3)>.ui-icon{background:#e76770;color:#fff}
  html body .mobile-home-steps b{font:700 1.35rem Georgia,serif}
  html body .mobile-home-steps small{display:block;margin-top:2px;font:600 .78rem "Noto Sans TC",sans-serif;line-height:1.4}
  html body .mobile-home-regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 12px 24px;background:#fff}
  html body .mobile-home-regions .region-card{border-radius:12px;overflow:hidden;background:#fff;border:1px solid #dce5ea;box-shadow:0 6px 18px rgba(23,50,77,.06)}
  html body .mobile-home-regions .region-card img{width:100%;height:126px;object-fit:cover}
  html body .mobile-home-regions .region-card-body{padding:13px 14px 15px}
  html body .mobile-home-regions .region-card small{font-size:.8125rem;color:var(--berry)}
  html body .mobile-home-regions .region-card h3{margin:3px 0;font-family:"Noto Serif TC",Georgia,serif;font-size:1.35rem;color:var(--fidelity-navy)}
  html body .mobile-home-regions .region-card p{margin:0;font-size:.875rem;line-height:1.5;color:#4d6170}
  html body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  html body .site-header{position:relative;background:#fff}
  html body .nav{height:78px;padding-inline:8px}
  html body .brand-mark{width:44px;height:44px}
  html body .brand strong{font-size:1.04rem}
  html body:has(main>.mobile-home) .brand small{display:block;font-size:.6rem;letter-spacing:.08em}
  html body .search-link,html body .menu-button{width:48px;height:48px;border-radius:50%;background:#fff}
  html body .menu-button{background:var(--fidelity-navy);color:#fff}
  html body .mobile-nav{left:0;right:0;bottom:0;border:0;border-radius:0;background:var(--fidelity-navy);padding:8px 4px calc(7px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 18px rgba(9,45,75,.14)}
  html body .mobile-nav a{color:#fff;min-height:56px;min-width:44px;padding:4px 2px}
  html body .mobile-nav a:first-child{color:var(--fidelity-gold)}
  html body .mobile-nav .ui-icon{width:24px;height:24px}
  html body .mobile-nav b{font-size:.72rem}
  html body:has(main>.mobile-home) .mobile-nav{background:rgba(255,255,255,.98);border-top:1px solid #dce5ea;box-shadow:0 -4px 18px rgba(9,45,75,.1)}
  html body:has(main>.mobile-home) .mobile-nav a{position:relative;color:var(--fidelity-navy)}
  html body:has(main>.mobile-home) .mobile-nav a:first-child{color:var(--fidelity-red)}
  html body:has(main>.mobile-home) .mobile-nav a:first-child:after{content:"";position:absolute;left:24%;right:24%;bottom:-7px;height:3px;border-radius:3px;background:var(--fidelity-red)}

  html body .design-hero{position:relative;display:block;min-height:600px;background:#fff;overflow:hidden}
  html body .design-hero-grid{position:relative;z-index:2;width:100%;min-height:600px;background:linear-gradient(180deg,#fff 0,rgba(255,255,255,.94) 39%,rgba(255,255,255,.05) 64%)}
  html body .design-hero-photo{position:absolute;inset:250px 0 0;height:auto;z-index:1}
  html body .design-hero-photo img{height:100%;object-fit:cover}
  html body .design-hero-copy{padding:26px 20px 0}
  html body .design-hero h1{font-size:2.3rem;line-height:1.2;margin:12px 0}
  html body .design-hero-copy>p{max-width:94%;font-size:.98rem;line-height:1.9}
  html body .design-jennifer{max-width:315px;margin-top:12px;background:rgba(255,255,255,.82);padding:8px 12px;border-radius:12px}
  html body .design-jennifer img{width:64px;height:70px}
  html body .design-hero-photo>span{bottom:18px}
  html body .planner-overlap{position:relative;z-index:5;margin-top:-36px}
  html body .journey-planner{border-radius:14px;margin:0!important;padding:22px 18px;background:linear-gradient(135deg,#092d4b,#061f36)}
  html body .planner-intro{padding-bottom:16px}
  html body .planner-intro strong{font-size:1.35rem}
  html body .planner-submit{background:var(--fidelity-red);min-height:52px}
  html body .featured-head h2{font-size:2.25rem}
  html body .featured-route{border-radius:14px;overflow:hidden}

  html body .directory-hero{min-height:480px;display:block!important;background:#eef7fb}
  html body .directory-hero-media{position:absolute!important;inset:0!important;height:480px!important;order:initial!important}
  html body .directory-hero-media:after{background:linear-gradient(180deg,rgba(255,255,255,.96) 0,rgba(255,255,255,.72) 46%,rgba(255,255,255,.08) 78%)!important}
  html body .directory-hero-content{position:relative;z-index:2;min-height:480px;padding:28px 20px!important;justify-content:flex-start}
  html body .directory-heading h1{font-size:2.25rem;line-height:1.2}
  html body .directory-heading p{max-width:92%;font-size:1rem;color:#243d52}
  html body .region-directory{padding-top:0}
  html body .directory-guide{margin:-54px 14px 18px!important;border-radius:16px;grid-template-columns:repeat(3,1fr);padding:18px 12px;background:linear-gradient(135deg,#092d4b,#061f36)}
  html body .directory-guide>*{border:0;border-right:1px solid rgba(255,255,255,.2);padding:8px 7px;display:flex;flex-direction:column;text-align:center;font-size:.8125rem}
  html body .directory-guide>*:last-child{border-right:0}
  html body .directory-guide .ui-icon{font-size:1.55rem;margin:0 0 7px}
  html body .region-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html body .region-directory-grid .region-card{display:block;border-radius:12px}
  html body .region-directory-grid .region-card img{height:135px;min-height:0}
  html body .region-directory-grid .region-card-body{padding:14px 13px 16px}
  html body .region-directory-grid .region-card h3{font-size:1.35rem;margin:4px 0}
  html body .region-directory-grid .region-card p{font-size:.875rem;line-height:1.5}

  html body .region-hero{position:relative;min-height:600px;background:#eef7fb;overflow:hidden}
  html body .region-hero-grid{position:relative;display:block;min-height:600px;width:100%}
  html body .region-cover{position:absolute;inset:0;min-height:600px;border-radius:0;z-index:1}
  html body .region-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.98) 0,rgba(255,255,255,.76) 44%,rgba(255,255,255,.05) 72%)}
  html body .region-cover span{bottom:18px;z-index:2}
  html body .region-hero-copy{position:relative;z-index:2;padding:28px 20px}
  html body .region-hero-copy h1{font-size:2.25rem;line-height:1.2}
  html body .region-hero-copy>p{color:#30495c;font-size:1rem}
  html body .region-hero-copy .hero-actions{grid-template-columns:1fr 1fr;margin-top:26px}
  html body .region-hero-copy .button{min-height:55px;border-radius:10px;justify-content:center}
  html body .region-facts{margin-top:-26px;position:relative;z-index:3;background:transparent}
  html body .region-facts .decision-panel{background:linear-gradient(135deg,#092d4b,#061f36);border-radius:16px;padding:12px!important;box-shadow:0 18px 38px rgba(9,45,75,.2)}
  html body .region-facts .decision-panel>div{padding:17px 14px}
  html body .region-facts .decision-panel p{display:block;font-size:.8125rem;line-height:1.5}
  html body .region-decision-list article,html body .region-decision-list article.is-featured{grid-template-columns:42% 1fr;border-radius:12px}
  html body .region-decision-list img{height:100%;min-height:175px}

  html body .category-hero{display:block!important;min-height:500px;background:#edf5f8}
  html body .category-hero-media{position:absolute!important;inset:0!important;height:500px!important}
  html body .category-hero-media:after{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.62) 52%,rgba(255,255,255,.08) 78%)!important}
  html body .category-hero-grid{position:relative;z-index:2;min-height:500px;padding:28px 20px!important}
  html body .category-hero h1{font-size:2.25rem;line-height:1.2}
  html body .category-hero p{font-size:1rem;color:#30495c}
  html body .category-hero aside{position:absolute;left:14px;right:14px;bottom:-44px;margin:0!important;border-radius:14px;background:linear-gradient(135deg,#092d4b,#061f36);border-left:0;padding:25px 24px}
  html body .category-hero aside strong{font-size:1.45rem;color:var(--fidelity-gold)}
  html body .category-decisions{padding-top:92px}
  html body .verdict-card{min-height:190px;padding:22px 18px 20px 42%!important;background-position:left center!important;background-size:38% 100%!important;background-repeat:no-repeat!important}
  html body .verdict-card:nth-child(1){background-image:linear-gradient(90deg,transparent 0 38%,#e9f4fb 38%)!important}
  html body .verdict-card:nth-child(2){background-image:linear-gradient(90deg,transparent 0 38%,#fff5d6 38%),url("ginzan.jpg")!important}
  html body .verdict-card:nth-child(3){background-image:linear-gradient(90deg,transparent 0 38%,#fde9ec 38%),url("oirase.jpg")!important}
  html body .verdict-card:nth-child(1):after{content:"";position:absolute;inset:0 62% 0 0;background:url("matsushima.jpg") center/cover no-repeat;z-index:-1}
  html body .verdict-card h3{font-size:1.3rem!important}
  html body .verdict-card ul{display:none}
  html body .related-regions .region-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

  html body .search-hero{display:block!important;min-height:430px}
  html body .search-hero-media{position:absolute!important;inset:0!important;height:430px!important}
  html body .search-hero-media:after{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.76) 56%,rgba(255,255,255,.18))!important}
  html body .search-hero-content{position:relative;z-index:2;min-height:430px;padding:28px 20px!important;justify-content:flex-start}
  html body .search-hero h1{font-size:2.2rem;line-height:1.2}
  html body .search-hero p{font-size:1rem;color:#30495c}
  html body .search-workspace{padding-top:0}
  html body .search-workspace .search-form{margin:-68px 14px 0;position:relative;z-index:3;border-radius:16px;padding:18px;grid-template-columns:1fr 1fr;gap:12px}
  html body .search-workspace .search-form .wide{grid-column:1/-1}
  html body .search-workspace .search-form label{font-weight:700}
  html body .search-workspace .search-grid{grid-template-columns:1fr}
  html body .search-card{grid-template-columns:42% 1fr!important;border-top:0!important;border-bottom:1px solid var(--line);box-shadow:none!important;min-height:190px}
  html body .search-card-image{min-height:190px}
  html body .search-card-copy{padding:16px 14px}
  html body .search-card h2{font-size:1.05rem!important;line-height:1.5}
  html body .search-card p{font-size:.875rem;line-height:1.5}

  html body .article-hero{padding-top:0!important;background:#fff!important}
  html body .article-hero:before{height:148px;background-image:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--article-cover,url("matsushima-winter.png"))!important;background-position:center 72%;background-size:cover;background-repeat:no-repeat}
  html body .article-masthead{padding:18px 20px 22px;width:100%;box-sizing:border-box}
  html body .article-masthead h1{font-size:2.15rem;line-height:1.2;margin:8px 0 12px}
  html body .route-summary{border-radius:14px;padding:22px 20px;background:linear-gradient(135deg,#092d4b,#061f36)}
  html body .nav{gap:10px}
  html body .nav .brand{min-width:0;flex:1 1 auto}
  html body .nav .brand strong{font-size:clamp(.84rem,4vw,1rem);white-space:nowrap}
  html body .nav .search-link{width:44px;height:44px;flex:0 0 44px;padding:0}
  html body .nav>button.menu-button{box-sizing:border-box;width:44px!important;min-width:44px!important;max-width:44px!important;inline-size:44px!important;flex:0 0 44px!important;height:44px;padding:0}
  html body .nav .search-link>.ui-icon,html body .nav .menu-button>.ui-icon{width:22px!important;height:22px!important;max-width:22px;max-height:22px}
  html body .article-masthead,html body .article-masthead>div,html body .route-summary,html body .article-body{min-width:0}
  html body .article-masthead .metadata{display:flex;flex-wrap:wrap;width:100%;max-width:100%;min-width:0;gap:5px;margin:8px 0}
  html body .article-masthead .metadata .tag{display:inline-flex;width:fit-content;max-width:100%;min-width:0;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;vertical-align:top;margin:0}
  html body .nav .search-link>span,html body .nav .menu-button>span{display:none!important}
  html body .mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr));box-sizing:border-box}
  html body .mobile-nav a{min-width:0;overflow-wrap:anywhere}
  html body .route-summary dl>div{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr);align-items:start;gap:10px}
  html body .route-summary dt,html body .route-summary dd{min-width:0;overflow-wrap:anywhere;text-align:left}
  html body .article-body{border-radius:12px}
  html body .article-conclusion{background:linear-gradient(135deg,#e7f3fa,#f7fbfd)}
  html body .timeline-row{grid-template-columns:58px 22px 1fr}
  html body .timeline-time{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--fidelity-navy);color:#fff;font-family:Georgia,serif;font-size:.78rem}
  html body .timeline-content{padding-right:16px;padding-bottom:126px}
  html body .timeline-content:after{top:auto;left:0;width:100%;height:110px}

  html body .about-hero{padding-top:24px}
  html body .about-grid{display:grid;grid-template-columns:1fr 44%;gap:14px;align-items:center}
  html body .about-grid>div:first-child{padding:0 0 28px}
  html body .about-hero h1{font-size:2.25rem;line-height:1.2}
  html body .about-hero p{font-size:.94rem;line-height:1.9}
  html body .about-portrait{min-height:450px;border-radius:220px 220px 0 0}
  html body .about-portrait img{height:420px;width:110%;max-width:none}
  html body .about-portrait span{right:-4px;bottom:12px}
  html body .about-principles .decision-list article{display:grid;grid-template-columns:62px 1fr;column-gap:12px;align-items:center;min-height:130px;border-radius:14px}
  html body .about-principles .decision-list small{grid-row:1/3;font-size:1.6rem;text-align:center}
  html body .about-principles .decision-list h3,html body .about-principles .decision-list p{grid-column:2;margin-block:2px}
}

@media (max-width:360px){
  html body:has(main>.mobile-home) .brand small{display:none}
  html body:has(main>.mobile-home) .brand strong{font-size:.9rem}
  html body:has(main>.mobile-home) .brand-mark{width:38px;height:38px}
  html body:has(main>.mobile-home) .search-link,html body:has(main>.mobile-home) .menu-button{width:42px;height:42px}
  html body .mobile-home-hero-copy{padding-inline:20px}
  html body .mobile-home-hero h2{font-size:2.05rem}
  html body .mobile-home-steps{margin-inline:10px;padding-inline:12px}
  html body .mobile-home-steps li{padding-inline:5px}
  html body .mobile-home-steps small{font-size:.75rem}
}

@media (max-width:390px){
  html body .design-hero h1,html body .directory-heading h1,html body .region-hero-copy h1,html body .category-hero h1,html body .search-hero h1,html body .article-masthead h1,html body .about-hero h1{font-size:1.95rem;line-height:1.22}
  html body .mobile-home-hero{min-height:410px}
  html body .mobile-home-hero h2{font-size:2.2rem}
  html body .design-hero,html body .design-hero-grid{min-height:560px}
  html body .directory-hero,html body .directory-hero-content{min-height:450px}
  html body .directory-hero-media{height:450px!important}
  html body .region-hero,html body .region-hero-grid,html body .region-cover{min-height:540px}
  html body .category-hero,html body .category-hero-grid{min-height:470px}
  html body .category-hero-media{height:470px!important}
  html body .search-hero,html body .search-hero-content{min-height:390px}
  html body .search-hero-media{height:390px!important}
  html body .article-hero.article-hero-no-cover{padding:22px 0 18px!important}
  html body .region-directory-grid{grid-template-columns:1fr}
  html body .directory-guide{margin-inline:8px!important}
  html body .search-card{grid-template-columns:38% 1fr!important}
}
@media (max-width:340px){
  html body .search-link{display:none!important}
  html body .brand strong{font-size:.94rem}
  html body .menu-button{margin-left:auto}
  html body .about-grid{grid-template-columns:1fr}
  html body .about-portrait{min-height:330px}
  html body .about-portrait img{height:310px;width:86%}
}

/* Articles without a distinct cover photo keep a clean title field instead of falling back to a reused landscape. */
html body .article-hero.article-hero-no-cover{min-height:0;background:#fbfcfd!important;background-image:none!important}
html body .article-hero.article-hero-no-cover:before,html body .article-hero.article-hero-no-cover:after{display:none!important;content:none!important}
@media (max-width:720px){
  html body .article-hero.article-hero-no-cover{padding:18px 0 12px!important;background:#fbfcfd!important}
  html body .article-hero.article-hero-no-cover:before{display:none!important;height:0!important;background-image:none!important}
}

@media (max-width:720px){
  html body .hero h1,html body .page-hero h1{font-size:1.95rem;line-height:1.18;margin:4px 0 8px}
  html body .design-hero h1,html body .directory-heading h1,html body .region-hero-copy h1,html body .category-hero h1,html body .search-hero h1,html body .article-masthead h1,html body .about-hero h1,html body .info-hero h1{font-size:1.95rem;line-height:1.18;margin:4px 0 8px}
  html body .page-hero{padding-top:16px}
  html body .section{padding-top:24px;padding-bottom:24px}
  html body .article-masthead{padding-top:10px;padding-bottom:12px}
  html body .article-hero .route-summary{margin-top:14px!important}
  html body .region-hero-copy{padding-top:16px;padding-bottom:16px}
  html body .category-hero-grid,html body .search-hero-content,html body .directory-hero-content{padding-top:16px!important}
  html body .mobile-nav{top:auto}
  html body .article-hero.article-hero-no-cover{padding:12px 0 8px!important}
}
@media (max-width:390px){
  html body .hero h1,html body .page-hero h1{font-size:1.78rem;line-height:1.2;margin:3px 0 7px}
  html body .design-hero h1,html body .directory-heading h1,html body .region-hero-copy h1,html body .category-hero h1,html body .search-hero h1,html body .article-masthead h1,html body .about-hero h1,html body .info-hero h1{font-size:1.78rem;line-height:1.2;margin:3px 0 7px}
  html body .section{padding-top:20px;padding-bottom:20px}
}

@media (max-width:720px){
  html body .article-masthead h1{font-size:1.5rem;line-height:1.25;margin:3px 0 7px}
  html body .article-hero .article-masthead h1{color:#102b43!important}
  html body .article-masthead{padding-top:8px;padding-bottom:10px}
  html body .article-masthead>div>p{font-size:1rem;line-height:1.62;margin:.55em 0}
  html body .article-masthead .metadata{gap:5px;margin:8px 0}
  html body .article-masthead .metadata .tag{font-size:.68rem;line-height:1.35;padding:4px 8px}
  html body .article-masthead .route-summary{margin-top:12px!important;padding:16px}
  html body .article-section{padding-top:4px;padding-bottom:10px}
  html body .article-body{padding:18px 18px;font-size:1rem;line-height:1.72}
  html body .article-body h2{font-size:1.35rem;line-height:1.4;margin:1.1em 0 .42em}
  html body .article-body h3{font-size:1.05rem;line-height:1.42;margin:.85em 0 .32em}
  html body .article-body p{margin:.58em 0}
  html body .article-body .article-photo{margin:14px 0}
  html body .article-body .article-table-wrap{margin:12px 0}
}
@media (max-width:390px){
  html body .article-masthead h1{font-size:1.45rem;line-height:1.25}
  html body .article-body{padding:18px 16px}
}
@media (max-width:340px){
  html body .article-masthead h1{font-size:1.38rem}
  html body .article-body{padding:16px 14px}
}

/* Keep article reading rhythm compact on every screen size. */
html body .article-body{font-size:1rem;line-height:1.72}
html body .article-body h2{font-size:1.48rem;line-height:1.38;margin:1.35em 0 .38em}
html body .article-body h3{font-size:1.08rem;line-height:1.42;margin:1em 0 .35em}
html body .article-body p{margin:.62em 0}
html body .article-section{padding-top:14px;padding-bottom:24px}
@media(max-width:720px){
  html body .article-masthead h1{font-size:1.3rem;line-height:1.28;margin:2px 0 5px}
  html body .article-body{font-size:1rem;line-height:1.65;padding-top:14px;padding-bottom:14px}
  html body .article-body h2{font-size:1.24rem;line-height:1.38;margin:1em 0 .34em}
  html body .article-body h3{font-size:1.02rem;line-height:1.4;margin:.78em 0 .28em}
  html body .article-body p{margin:.48em 0}
  html body .article-section{padding-top:4px;padding-bottom:14px}
  html body .article-body .article-photo{margin:11px 0}
}
@media(max-width:390px){
  html body .article-masthead h1{font-size:1.24rem;line-height:1.3}
}
@media(max-width:340px){
  html body .article-masthead h1{font-size:1.2rem}
}
@media(max-width:720px){
  html body .article-body h2:has(+ p a[href*="stay22.com"]){margin-top:.68em;margin-bottom:.18em}
  html body .article-body h2:has(+ p a[href*="stay22.com"])+p{margin-top:.18em;margin-bottom:.42em}
}
/* Keep article titles compact and remove the oversized gap before lodging links. */
html body .article-masthead h1{font-size:clamp(1.9rem,2.7vw,2.65rem);line-height:1.24}
html body .article-body h2:has(+ p a[href*="stay22.com"]){margin:.68em 0 .12em}
html body .article-body h2:has(+ p a[href*="stay22.com"])+p{margin-top:.1em;margin-bottom:.42em}
@media(max-width:720px){
  html body .article-masthead h1{font-size:1.2rem;line-height:1.28;margin:2px 0 5px}
}
@media(max-width:390px){
  html body .article-masthead h1{font-size:1.16rem;line-height:1.28}
}
@media(max-width:340px){
  html body .article-masthead h1{font-size:1.12rem}
}
/* Give tablet portrait articles a full reading column instead of squeezing the sticky sidebar beside the text. */
@media (min-width:721px) and (max-width:860px){
  html body .article-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  html body .side-stack{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .side-stack>.toc-card{grid-column:1/-1}
}

/* Keep mobile article titles readable while tightening the lodging hand-off. */
@media(max-width:720px){
  html body .article-masthead{padding-top:8px;padding-bottom:8px}
  html body .article-masthead h1{font-size:1.5rem;line-height:1.24;margin:2px 0 5px}
  html body .article-body h2:has(+ p a[href*="stay22.com"]){margin:.38em 0 .08em}
  html body .article-body h2:has(+ p a[href*="stay22.com"])+p{margin:.08em 0 .28em}
}
@media(max-width:390px){html body .article-masthead h1{font-size:1.38rem}}

/* Tighten article title and lodging transitions on handheld screens. */
@media(max-width:720px){
  html body .article-masthead h1{font-size:1.28rem;line-height:1.28;margin:2px 0 5px}
  html body .article-body h2:has(+ p a[href*="stay22.com"]){margin:.22em 0 .08em}
  html body .article-body h2:has(+ p a[href*="stay22.com"])+p{margin:.06em 0 .24em}
}
@media(max-width:390px){html body .article-masthead h1{font-size:1.22rem}}

/* Preserve article hero gutters on narrow screens; the previous width:100% rule
   overrode .article-wide and let long headings/route notes touch the viewport edge. */
@media(max-width:720px){
  html body .article-hero .article-masthead{display:block!important;width:calc(100vw - 56px)!important;max-width:calc(100vw - 56px)!important;margin-inline:auto!important;box-sizing:border-box!important;min-width:0!important;padding-inline:0!important}
  html body .article-hero .article-masthead h1,html body .article-hero .article-masthead>div,html body .article-hero .route-summary{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  html body .article-hero .article-masthead h1{white-space:normal!important;overflow-wrap:anywhere;word-break:break-all}
  html body .article-masthead .metadata{display:flex;flex-wrap:wrap;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  html body .article-masthead .metadata .tag{display:block;min-width:0;max-width:100%;flex:0 1 auto;white-space:normal!important;overflow-wrap:anywhere;box-sizing:border-box}
  html body .article-masthead .metadata .tag:nth-child(n+3){flex:1 1 100%;width:100%;}
  html body .route-summary dl>div{display:grid;grid-template-columns:minmax(54px,auto) minmax(0,1fr);gap:10px;align-items:start}
  html body .route-summary dd{min-width:0;text-align:left;overflow-wrap:anywhere}
  html body .article-body p{font-size:16px}
}

/* Draw compact mobile header controls in CSS; external SVG sprites can be blank in some browsers. */
@media(max-width:720px){
  html body .nav .search-link,html body .nav .menu-button{position:relative}
  html body .nav .search-link{color:var(--ink)}
  html body .nav .menu-button{color:#fff}
  html body .nav .search-link>.ui-icon,html body .nav .menu-button>.ui-icon,
  html body .nav .search-link>span,html body .nav .menu-button>span{display:none!important}
  html body .nav .search-link:before{content:""!important;display:block!important;position:absolute;width:14px;height:14px;left:11px;top:11px;border:2px solid currentColor;border-radius:50%;background:none;box-shadow:none}
  html body .nav .search-link:after{content:""!important;display:block!important;position:absolute;width:8px;height:2px;left:25px;top:27px;background:currentColor;border-radius:2px;transform:rotate(45deg);transform-origin:left center}
  html body .nav .menu-button:before{content:""!important;display:block!important;position:absolute;width:18px;height:2px;left:50%;top:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%);box-shadow:0 -6px currentColor,0 6px currentColor}
}

@media(max-width:720px){
  html body .article-hero:not(.article-hero-no-cover):before{height:92px!important;background-position:center 63%!important}
}

/* Text links inside article prose need a persistent non-colour cue. */
html body .article-body :is(p, li, td, dd) a[href] {
  color: #14605e;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}
html body .article-body :is(p, li, td, dd) a[href]:hover {
  color: #993249;
  text-decoration-thickness: 2px;
}
html body .article-body :is(p, li, td, dd) a[href]:focus-visible {
  outline: 2px solid #993249;
  outline-offset: 3px;
  border-radius: 2px;
}

html body .article-body table.department-map { width: 100%; border-collapse: collapse; margin: 24px 0; background: #fff; }
html body .article-body .department-map :is(th, td) { padding: 12px; border: 1px solid #d3e1e7; text-align: left; vertical-align: top; font-weight: 400; }
html body .article-body .department-map thead th { background: #e6f1f5; color: #15384e; font-weight: 600; }
html body .article-body .department-map th[scope="row"] { font-weight: 600; }
/* The collection map keeps table semantics; narrow layouts expose each row as a card. */
@media (max-width: 600px) {
  html body .article-body table.department-map,
  html body .article-body .department-map tbody { display: block; width: 100%; min-width: 0; }
  html body .article-body .department-map thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  html body .article-body .department-map tr { display: block; margin: 0 0 12px; border: 1px solid #d3e1e7; border-radius: 8px; overflow: hidden; }
  html body .article-body .department-map :is(th, td) { display: block; width: auto; min-width: 0; border: 0; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere; }
  html body .article-body .department-map th[scope="row"] { background: #e6f1f5; color: #15384e; text-align: left; }
  html body .article-body .department-map td::before { content: attr(data-label); display: block; color: #526a78; font-size: 13px; margin-bottom: 4px; }
}


/* Captions keep full width when comparison tables become mobile cards. */
html body .article-body .department-map caption { text-align: left; font-size: 16px; font-weight: 600; line-height: 1.6; padding: 0 0 10px; }
@media (max-width: 600px) {
  html body .article-body .department-map caption { display: block; width: 100%; box-sizing: border-box; }
}
html body .search-card[hidden]{display:none!important}

/* Checked article-specific winter facts stay readable on narrow screens. */
html body .article-hero .winter-note{flex:1 1 100%;box-sizing:border-box;max-width:100%;white-space:normal!important;font-size:16px!important;line-height:1.55!important;padding:9px 12px!important;background:#fff3d2;color:#724000;}