/* ICELAVI critical layout fixes — 2026-08-12.
   Keep this file narrow: only regression fixes that must win after legacy/base CSS. */

/* Desktop homepage regression:
   brand-v3 gave .hero-content a 760px max-width while also applying the full
   outer page gutter as BOTH left and right padding. With border-box sizing this
   collapsed the actual text column to a few pixels on wide screens, forcing
   Chinese headings into a vertical stack. Let the hero content span the frame;
   the h1/p elements already carry their own readable max-widths. */
@media (min-width: 901px) {
  .hero-content {
    max-width: none !important;
    width: 100%;
  }
}

/* Prevent inherited legacy width constraints from re-introducing the same bug. */
.hero h1 {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

/* A page title must remain the focal point without becoming a billboard.
   The generic page hero previously reached 59px at common desktop widths,
   just outside the documented 46–58px reading range. */
.hero h1{font-size:clamp(42px,5vw,58px)}
.page-hero h1,.category-index .entry-hero-copy h1{font-size:clamp(39px,5vw,58px)}

/* Comparison pages use their verified comparison image immediately, instead
   of making readers scroll past an image-less dark hero to find it. */
.page-hero--comparison{padding:0}
.page-hero--comparison .page-hero__layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(380px,.94fr);min-height:500px}
.page-hero--comparison .page-hero__copy{display:flex;flex-direction:column;justify-content:center;padding:76px 42px 70px 0}
.page-hero--comparison .page-hero__copy .breadcrumbs{margin:0 0 16px}
.page-hero--comparison .page-hero__copy>p:not(.breadcrumbs){margin:0}
.page-hero--comparison .page-hero__media{position:relative;min-height:100%;overflow:hidden;background:#173942}
.page-hero--comparison .page-hero__media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--basalt) 0%,rgba(8,19,23,.28) 20%,rgba(8,19,23,0) 62%)}
.page-hero--comparison .page-hero__media img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03)}
@media(max-width:680px){.page-hero--comparison .page-hero__layout{grid-template-columns:1fr;min-height:0}.page-hero--comparison .page-hero__copy{padding:43px 0 31px}.page-hero--comparison .page-hero__media{min-height:242px}.page-hero--comparison .page-hero__media::before{background:linear-gradient(180deg,var(--basalt) 0%,rgba(8,19,23,.08) 26%,rgba(8,19,23,0) 58%)}}

/* Keep the hero copy comfortably readable on medium desktop widths. */
@media (min-width: 901px) and (max-width: 1280px) {
  .hero-content {
    padding-left: 48px;
    padding-right: 48px;
  }
}
/* Shared language mapping for every entry hub, including Chinese and English. */
.site-footer .locale-switcher{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.site-footer .locale-switcher a{color:inherit;text-decoration:underline;text-underline-offset:3px}.site-footer .locale-switcher a:hover{color:#fff}
@media(max-width:640px){.site-footer .locale-switcher{justify-content:flex-start;margin-top:10px}}

/* Long-form typography: Noto carries the intended voice; local Traditional
   Chinese fallbacks avoid an abrupt switch to a Simplified Chinese system
   face when webfonts are slow or unavailable. Body copy stays sans-serif for
   long reading, while editorial headings keep the serif contrast. */
body{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",system-ui,-apple-system,"Segoe UI",sans-serif;text-rendering:optimizeLegibility}
.hero h1,.page-hero h1,.entry-hero h1,.section-title,.entry-section-head h2,.decision-band h2,.hub-section h2,.article-header h1,.prose h2,.prose h3,.money-band h2,.destination-card h3,.priority-card h3,.cluster-card h3,.decision-card h3,.guide-card h3,.article-row h3,.preview-tile h3{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif}
.prose{letter-spacing:.008em}
.prose table{font-size:14px}
.prose th{font-size:12px;letter-spacing:.04em}
.prose tbody td:first-child{font-weight:700}

/* Decision maps use an intrinsic SVG so they stay legible without a third-party map embed. */
.route-map{margin:30px 0 34px}.route-map img{display:block;width:100%;height:auto;border:1px solid rgba(18,47,59,.14);border-radius:16px;background:#f4f7f8}.route-map figcaption{margin-top:10px;color:#52646a;font-size:.92rem;line-height:1.55}@media(max-width:640px){.route-map{width:calc(100vw - 24px);margin:22px calc(50% - 50vw + 12px) 28px}.route-map img{border-radius:12px}}
.route-map--brand{overflow:hidden;border:1px solid rgba(18,47,59,.14);border-radius:18px;background:#f8f8f4;box-shadow:0 14px 32px rgba(7,26,34,.08)}.route-map--brand img{border:0;border-radius:0}.route-map-brandbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 18px;background:#0b303e;color:#d7edf0;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:11px;font-weight:900;letter-spacing:.08em}.route-map-brandbar strong{color:#fff;font-size:13px;letter-spacing:0}.map-swipe-cue{display:none}.route-map-key{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(18,47,59,.12)}.route-map-key span{display:block;padding:13px 15px;background:#f8f8f4;color:#52646a;font-size:12px;line-height:1.5}.route-map-key b{display:block;margin-bottom:2px;color:#0b303e;font-size:13px}@media(max-width:640px){.route-map--brand{border-radius:13px}.route-map-brandbar{align-items:flex-start;flex-direction:column;gap:3px;padding:12px 14px;font-size:9px}.route-map-brandbar strong{font-size:12px}.route-map--pan .route-map-brandbar strong::after{display:none}.route-map--pan .map-swipe-cue{display:block!important;margin-top:3px;color:#d7b06a;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:10px;font-weight:900;letter-spacing:.04em}.route-map-key{grid-template-columns:1fr}.route-map-key span{padding:11px 14px}.route-map--brand figcaption{padding:0 2px}}
.route-map__scroll{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-color:#8aa9b3 #e6edef}.route-map__scroll:focus-visible{outline:3px solid rgba(24,112,139,.35);outline-offset:3px}@media(max-width:640px){.route-map--pan .route-map__scroll{padding-bottom:8px}.route-map--pan img{width:760px;max-width:none}.route-map--pan figcaption::before{content:"地圖可左右滑動。";font-weight:900;color:#0e5368}}
.route-map--decision{max-width:520px;margin-left:auto;margin-right:auto}
.route-map--full{max-width:none}

/* A horizontal map is deliberately wider than a phone. Put the affordance in
   the map itself, not only in a caption readers may never reach. */
@media(max-width:640px){.route-map--pan .route-map__scroll{position:relative}.route-map--pan .route-map__scroll::before{content:"← 左右滑動查看定位點 →";position:sticky;top:9px;left:10px;z-index:6;display:table;width:max-content;padding:5px 8px;background:rgba(8,28,36,.9);color:#edf6f5;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:9px;font-weight:900;letter-spacing:.05em;pointer-events:none}}

/* The arrival-night page is a geographic decision. On a phone, show KEF,
   Blue Lagoon and Reykjavík in one actual map field, rather than asking the
   reader to pan a desktop map before they can compare the first-night bases. */
@media(max-width:640px){
  #arrival-night-map .osm-brand-map.osm-brand-map--arrival{width:100%!important;height:auto!important;aspect-ratio:2/1}
  #arrival-night-map .osm-tile-grid.osm-tile-grid--arrival{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}
  #arrival-night-map .osm-tile-grid.osm-tile-grid--arrival img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #arrival-night-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #arrival-night-map .osm-map-label{min-width:0;max-width:32%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1}
  #arrival-night-map span.arrival-label-kef{left:4%!important;top:64%!important}
  #arrival-night-map span.arrival-label-blue{left:35%!important;top:72%!important}
  #arrival-night-map span.arrival-label-reykjavik{left:64%!important;top:10%!important}
}

/* CSS fallback for static pages that have not loaded the runtime helper yet. */
.osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(7))):has(.osm-tile-grid > img:nth-child(6)) { width:768px; height:512px }
.osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(5))):has(.osm-tile-grid > img:nth-child(4)) { width:512px; height:512px }
.osm-brand-map:has(.osm-tile-grid > img:nth-child(12)):not(:has(.osm-tile-grid > img:nth-child(13))) { width:1024px; height:768px }
.osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(9))):has(.osm-tile-grid > img:nth-child(8)) { width:1024px; height:512px }
.osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(7))):has(.osm-tile-grid > img:nth-child(6)) .osm-tile-grid { grid-template-columns:repeat(3,256px); grid-template-rows:repeat(2,256px) }
.osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(5))):has(.osm-tile-grid > img:nth-child(4)) .osm-tile-grid { grid-template-columns:repeat(2,256px); grid-template-rows:repeat(2,256px) }
.osm-brand-map:has(.osm-tile-grid > img:nth-child(12)):not(:has(.osm-tile-grid > img:nth-child(13))) .osm-tile-grid { grid-template-columns:repeat(4,256px); grid-template-rows:repeat(3,256px) }
@media(max-width:640px){
  .osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(7))):has(.osm-tile-grid > img:nth-child(6)){width:100%!important;height:auto!important;aspect-ratio:3/2}
  .osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(5))):has(.osm-tile-grid > img:nth-child(4)){width:100%!important;height:auto!important;aspect-ratio:1/1}
  .osm-brand-map:has(.osm-tile-grid > img:nth-child(12)):not(:has(.osm-tile-grid > img:nth-child(13))){width:100%!important;height:auto!important;aspect-ratio:4/3}
  .osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(7))):has(.osm-tile-grid > img:nth-child(6)) .osm-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  .osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(5))):has(.osm-tile-grid > img:nth-child(4)) .osm-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  .osm-brand-map:has(.osm-tile-grid > img:nth-child(12)):not(:has(.osm-tile-grid > img:nth-child(13))) .osm-tile-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
}

/* Hotel Vík's four addresses are close enough that a pan-first desktop map
   hides the useful comparison.  The phone version keeps every named meeting
   point on the same real street map; labels carry names, not false walking
   times. */
@media(max-width:640px){
  #meeting-map .map-scroll{overflow:visible}
  #meeting-map .osm-brand-map{width:100%!important;height:auto!important;aspect-ratio:2/1}
  #meeting-map .osm-tile-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}
  #meeting-map .osm-tile-grid img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #meeting-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #meeting-map .osm-map-label{min-width:0;max-width:30%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #meeting-map .osm-map-label small{display:none}
  #meeting-map .osm-map-label--hotel{left:56%!important;top:5%!important}
  #meeting-map .osm-map-label--katla{left:30%!important;top:76%!important}
  #meeting-map .osm-map-label--arctic{left:66%!important;top:73%!important}
  #meeting-map .osm-map-label--troll{left:2%!important;top:46%!important}
}

/* The northern-base hub answers one decision: where tomorrow begins. It is
   more useful as one readable field than as a 768px map that hides the eastern
   route point off-screen. The decision key below retains the fuller context. */
@media(max-width:640px){
  #north-map .map-scroll,#akureyri-map .map-scroll{overflow:visible}
  #north-map .osm-brand-map--north,#akureyri-map .osm-brand-map--north{width:100%!important;height:auto!important;aspect-ratio:3/2}
  #north-map .osm-tile-grid--north,#akureyri-map .osm-tile-grid--north{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
  #north-map .osm-tile-grid--north img,#akureyri-map .osm-tile-grid--north img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #north-map .osm-map-pin,#akureyri-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #north-map .osm-map-label,#akureyri-map .osm-map-label{min-width:0;max-width:27%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #north-map .osm-map-label small,#akureyri-map .osm-map-label small{display:none}
  #north-map .osm-map-pin--hub:nth-of-type(1),#akureyri-map .osm-map-pin--hub:nth-of-type(1){left:4.6%!important;top:72.8%!important}
  #north-map .osm-map-label--hub:nth-of-type(2),#akureyri-map .osm-map-label--hub:nth-of-type(2){left:2%!important;top:86%!important}
  #north-map .osm-map-pin--activity,#akureyri-map .osm-map-pin--activity{left:22.4%!important;top:41.4%!important}
  #north-map .osm-map-label--activity,#akureyri-map .osm-map-label--activity{left:29%!important;top:9%!important}
  #north-map .osm-map-pin--hub:nth-of-type(5),#akureyri-map .osm-map-pin--hub:nth-of-type(5){left:32.4%!important;top:76.2%!important}
  #north-map .osm-map-label--hub:nth-of-type(6),#akureyri-map .osm-map-label--hub:nth-of-type(6){left:43%!important;top:82%!important}
  #north-map .osm-map-pin--route:nth-of-type(7),#akureyri-map .osm-map-pin--route:nth-of-type(7){left:17.3%!important;top:72.9%!important}
  #north-map .osm-map-label--route:nth-of-type(8),#akureyri-map .osm-map-label--route:nth-of-type(8){left:10%!important;top:54%!important}
  #north-map .osm-map-pin--route:nth-of-type(9),#akureyri-map .osm-map-pin--route:nth-of-type(9){left:44.9%!important;top:61.5%!important}
  #north-map .osm-map-label--route:nth-of-type(10),#akureyri-map .osm-map-label--route:nth-of-type(10){left:66%!important;top:51%!important}
  #north-map.route-map--pan .map-scroll::before,#akureyri-map.route-map--pan .map-scroll::before{content:"五個位置，同屏比較"}
  #north-map.route-map--pan figcaption::before,#akureyri-map.route-map--pan figcaption::before{display:none}
}

/* Westman Islands is a ferry-day decision. On a phone the ferry terminal and
   island-side return points must appear together; an off-screen terminal makes
   the map decorative instead of useful. */
@media(max-width:640px){
  #westman-map .map-scroll{overflow:visible}
  #westman-map .osm-brand-map--westman{width:100%!important;height:auto!important;aspect-ratio:1/1}
  #westman-map .osm-tile-grid--westman{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
  #westman-map .osm-tile-grid--westman img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #westman-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #westman-map .osm-map-label{min-width:0;max-width:31%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #westman-map .osm-map-label small{display:none}
  #westman-map .osm-map-label--route{left:48%!important;top:15%!important}
  #westman-map .osm-map-label--hub{left:2%!important;top:49%!important}
  #westman-map .osm-map-label--activity:nth-of-type(6){left:43%!important;top:76%!important}
  #westman-map .osm-map-label--activity:nth-of-type(8){left:55%!important;top:54%!important}
  #westman-map.route-map--pan .map-scroll::before{content:"四個位置，同屏比較"}
  #westman-map.route-map--pan figcaption::before{display:none}
}

/* Aurora Hotel and KEF are a proximity decision. Keep all five named points
   in one readable field on both phone and desktop; the map is evidence, not a
   pan-first decoration. */
#aurora-map .map-scroll{overflow:visible}
#aurora-map .osm-brand-map{width:100%!important;height:auto!important;aspect-ratio:2/1}
#aurora-map .osm-tile-grid{width:100%!important;height:100%!important;grid-template-columns:repeat(4,1fr)!important;grid-template-rows:repeat(2,1fr)!important}
#aurora-map .osm-tile-grid img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
@media(max-width:640px){
  #aurora-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #aurora-map .osm-map-label{min-width:0;max-width:30%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #aurora-map .osm-map-label small{display:none}
}
@media(max-width:640px){
  /* Keep the family-persona map on the same readable mobile canvas as the
     existing Westman destination map. */
  #westman-family-map .map-scroll{overflow:visible}
  #westman-family-map .osm-brand-map--westman{width:100%!important;height:auto!important;aspect-ratio:1/1}
  #westman-family-map .osm-tile-grid--westman{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
  #westman-family-map .osm-tile-grid--westman img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #westman-family-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #westman-family-map .osm-map-label{min-width:0;max-width:31%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #westman-family-map .osm-map-label small{display:none}
  #westman-family-map .osm-map-label--route{left:48%!important;top:15%!important}
  #westman-family-map .osm-map-label--hub{left:2%!important;top:49%!important}
  #westman-family-map .osm-map-label--activity:nth-of-type(6){left:43%!important;top:76%!important}
  #westman-family-map .osm-map-label--activity:nth-of-type(8){left:55%!important;top:54%!important}
  #westman-family-map.route-map--pan .map-scroll::before{content:"四個位置，同屏比較"}
  #westman-family-map.route-map--pan figcaption::before{display:none}
}

/* Southeast Iceland's three anchors are a stay-and-route comparison. The
   phone map keeps Skaftafell, Jökulsárlón and Höfn together, while the text
   below remains responsible for activities and road-day caveats. */
@media(max-width:640px){
  #southeast-map .route-map__scroll{overflow:visible}
  #southeast-map .osm-brand-map--north{width:100%!important;height:auto!important;aspect-ratio:3/2}
  #southeast-map .osm-tile-grid--north{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
  #southeast-map .osm-tile-grid--north img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #southeast-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #southeast-map .osm-map-label{min-width:0;max-width:30%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #southeast-map .osm-map-label small{display:none}
  #southeast-map .osm-map-label--route{left:2%!important;top:73%!important}
  #southeast-map .osm-map-label--activity{left:33%!important;top:39%!important}
  #southeast-map .osm-map-label--hub{left:68%!important;top:51%!important}
  #southeast-map.route-map--pan .route-map__scroll::before{content:"三個位置，同屏比較"}
  #southeast-map.route-map--pan figcaption::before{display:none}
}

/* The Golden Circle is only useful as a map when the return-to-Reykjavík and
   south-coast branches stay visible together. Names remain on the real map;
   timing and overnight advice stay in the decision key under it. */
@media(max-width:640px){
  #golden-circle-map .map-scroll{overflow:visible}
  #golden-circle-map .osm-brand-map--golden-circle{width:100%!important;height:auto!important;aspect-ratio:1/1}
  #golden-circle-map .osm-tile-grid--golden-circle{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
  #golden-circle-map .osm-tile-grid--golden-circle img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #golden-circle-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #golden-circle-map .osm-map-label{min-width:0;max-width:30%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #golden-circle-map .osm-map-label small{display:none}
  #golden-circle-map .osm-map-label--hub{left:2%!important;top:58%!important}
  #golden-circle-map .osm-map-label--activity:nth-of-type(4){left:27%!important;top:24%!important}
  #golden-circle-map .osm-map-label--activity:nth-of-type(6){left:68%!important;top:20%!important}
  #golden-circle-map .osm-map-label--activity:nth-of-type(8){left:59%!important;top:46%!important}
  #golden-circle-map .osm-map-label--route:nth-of-type(10){left:49%!important;top:74%!important}
  #golden-circle-map .osm-map-label--route:nth-of-type(12){left:70%!important;top:87%!important}
  #golden-circle-map.route-map--pan .map-scroll::before{content:"六個位置，同屏比較"}
  #golden-circle-map.route-map--pan figcaption::before{display:none}
}

/* Höfn is a directional overnight, not merely the closest town on a map. Keep
   the lagoon, Höfn and the east-fjord next step visible in one field on a
   phone; the article itself supplies the distance and activity boundary. */
@media(max-width:640px){
  #hofn-route-map .map-scroll{overflow:visible}
  #hofn-route-map .osm-brand-map--north{width:100%!important;height:auto!important;aspect-ratio:3/2}
  #hofn-route-map .osm-tile-grid--north{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
  #hofn-route-map .osm-tile-grid--north img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #hofn-route-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #hofn-route-map .osm-map-label{min-width:0;max-width:30%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #hofn-route-map .osm-map-label small{display:none}
  #hofn-route-map .osm-map-label--activity{left:2%!important;top:66%!important}
  #hofn-route-map .osm-map-label--hub{left:31%!important;top:48%!important}
  #hofn-route-map .osm-map-label--route{left:65%!important;top:16%!important}
  #hofn-route-map.route-map--pan .map-scroll::before{content:"三個位置，同屏比較"}
  #hofn-route-map.route-map--pan figcaption::before{display:none}
}

/* F26 cannot be a navigation map. The phone view keeps only the three actual
   reference points on the existing cropped terrain field; river crossings,
   openings and safe passage remain explicit day-of checks in the article. */
@media(max-width:640px){
  #f26-route-map .map-scroll{overflow:visible}
  #f26-route-map .osm-brand-map--f26{width:100%!important;height:auto!important;aspect-ratio:64/45}
  #f26-route-map .osm-tile-grid--f26{inset:0 0 auto;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:142.222%}
  #f26-route-map .osm-tile-grid--f26 img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #f26-route-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #f26-route-map .osm-map-label{min-width:0;max-width:34%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #f26-route-map .osm-map-label small{display:none}
  #f26-route-map .osm-map-label--route{left:41%!important;top:78%!important}
  #f26-route-map .osm-map-label--activity{left:55%!important;top:59%!important}
  #f26-route-map .osm-map-label--hub{left:54%!important;top:19%!important}
  #f26-route-map.route-map--pan .map-scroll::before{content:"三個位置，同屏比較"}
  #f26-route-map.route-map--pan figcaption::before{display:none}
}

/* Affiliate choices keep each platform's recognisable colour, while the
   chamfer, compass mark and basalt rail make the component unmistakably
   ICELAVI. Platform colour identifies the destination; structure identifies
   who made the comparison. */
.affiliate-cta-panel{margin:42px 0;padding:28px 30px;border:1px solid #ddd5c9;border-top:3px solid #b87916;border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(8,19,23,.06)}
.affiliate-cta-panel>h2{margin:0 0 12px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#12313d!important;font-size:clamp(25px,3vw,35px)!important;line-height:1.22!important}.affiliate-cta-panel>h2::before,.affiliate-cta-panel>h2::after{display:none!important}.affiliate-cta-panel>p{max-width:720px;margin:0!important;color:#526168!important;font-size:15px!important;line-height:1.75!important}
.affiliate-cta-group{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px;padding:0;border:0;background:none}
.affiliate-cta-group--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.affiliate-cta{--platform:#14272d;--platform-dark:#081317}
.affiliate-cta-group .affiliate-cta,.affiliate-cta{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;margin:0;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.19)!important;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);background-color:var(--platform)!important;background-image:linear-gradient(135deg,rgba(255,255,255,.16),transparent 36%),linear-gradient(90deg,var(--platform),var(--platform-dark))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 0 rgba(8,19,23,.2);color:var(--platform-text,#fff)!important;text-align:center;font-size:13px;line-height:1.35;letter-spacing:.015em;transition:filter .18s ease,transform .18s ease,box-shadow .18s ease}
.affiliate-cta-group:not(.affiliate-cta-group--two):not(.affiliate-cta-group--four) .affiliate-cta{justify-content:space-between;min-height:58px;padding:13px 18px;text-align:left;font-size:14px;font-weight:800}
.affiliate-cta::before{content:"";width:7px;height:7px;flex:0 0 7px;border:1px solid rgba(255,255,255,.78);transform:rotate(45deg);box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.affiliate-cta::after{content:"↗";font-size:15px;line-height:1;transition:transform .18s ease}
.affiliate-cta:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 0 rgba(8,19,23,.24)}
.affiliate-cta:hover::after{transform:translate(2px,-2px)}
.affiliate-cta:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(8,19,23,.22)}
.affiliate-cta:focus-visible{outline:3px solid #d7c2a2;outline-offset:3px}
.affiliate-cta--booking{--platform:#003580;--platform-dark:#00275f}.affiliate-cta--agoda{--platform:#df5a17;--platform-dark:#ad3d08;--platform-text:#101a1e}.affiliate-cta--trip{--platform:#1f75cb;--platform-dark:#145493}.affiliate-cta--klook{--platform:#ff5b00;--platform-dark:#c94400;--platform-text:#101a1e}.affiliate-cta--kkday{--platform:#19a7c7;--platform-dark:#0e7892;--platform-text:#101a1e}.affiliate-cta--gyg{--platform:#ff5533;--platform-dark:#c9361b;--platform-text:#101a1e}.affiliate-cta--saily{--platform:#281e64;--platform-dark:#17113e}.affiliate-cta--airalo{--platform:#31775f;--platform-dark:#1e5140}.affiliate-cta--stay22{--platform:#d7c2a2;--platform-dark:#b49369;--platform-text:#101a1e;color:#101a1e!important}.affiliate-cta--stay22::before{border-color:rgba(8,19,23,.7);box-shadow:0 0 0 2px rgba(8,19,23,.08)}
.affiliate-cta--agoda::before,.affiliate-cta--klook::before,.affiliate-cta--kkday::before,.affiliate-cta--gyg::before{border-color:rgba(16,26,30,.62);box-shadow:0 0 0 2px rgba(16,26,30,.08)}
.prose .affiliate-cta{text-decoration:none!important;text-decoration-thickness:0!important;text-underline-offset:0!important}
.affiliate-cta-group--four{grid-template-columns:repeat(2,minmax(0,1fr))}
.decision-cta-panel{margin:36px 0;padding:28px 30px;border:1px solid #ddd5c9;border-top:3px solid #b87916;border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(8,19,23,.06)}
.decision-cta-panel__eyebrow{margin:0 0 12px!important;color:#b87916!important;font-family:Manrope,"Noto Sans TC",sans-serif!important;font-size:12px!important;font-weight:900!important;letter-spacing:.14em!important;text-transform:uppercase}
.decision-cta-panel h2{margin:0 0 12px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#12313d!important;font-size:clamp(25px,3vw,35px)!important;line-height:1.22!important}
.decision-cta-panel h2::before,.decision-cta-panel h2::after{display:none!important}
.decision-cta-panel>p:not(.decision-cta-panel__eyebrow){max-width:720px;margin:0!important;color:#526168!important;font-size:15px!important;line-height:1.75!important}
.decision-cta-panel .affiliate-cta-group{grid-template-columns:1fr;margin-top:22px;padding:0;border:0;background:none}
.decision-cta-panel .affiliate-cta-group .affiliate-cta{justify-content:space-between;min-height:58px;padding:13px 18px;text-align:left;text-decoration:none!important;font-size:14px;font-weight:800}
.decision-cta-panel .affiliate-cta-group .affiliate-cta::before{display:none}
.decision-cta-panel .affiliate-cta-group .affiliate-cta::after{content:"→";font-size:20px}
@media(max-width:680px){.decision-cta-panel,.affiliate-cta-panel{margin:30px 0;padding:23px 18px}.decision-cta-panel h2,.affiliate-cta-panel>h2{font-size:25px!important}.decision-cta-panel>p:not(.decision-cta-panel__eyebrow),.affiliate-cta-panel>p{font-size:14px!important}}
@media(max-width:680px){.affiliate-cta-group,.affiliate-cta-group--two,.affiliate-cta-group--four{grid-template-columns:1fr;gap:9px;padding:9px}.affiliate-cta-group .affiliate-cta{width:100%;min-height:54px}}

/* `1fr` retains an intrinsic minimum.  On an article with a wide comparison
   table that made the prose track overflow a phone viewport instead of using
   the table's own horizontal scroller. */
@media(max-width:900px){.article-layout{grid-template-columns:minmax(0,1fr)}.prose{min-width:0}}

/* Single-column decision guides should not reserve an empty desktop sidebar.
   Keep a readable measure, centre it, and let evidence images use the same
   column so captions remain visually attached to what they qualify. */
.article-wide .article-layout{grid-template-columns:minmax(0,900px);justify-content:center}

/* Most long-form pages deliberately have no rail. Do not leave the former
   sidebar as a large dead zone: centre the same readable text measure instead.
   Pages that still provide an actual sidebar retain the two-column grid. */
.article-shell:has(.article-layout:not(:has(.article-sidebar))) .article-header{margin-left:auto;margin-right:auto}
.article-layout:not(:has(.article-sidebar)){grid-template-columns:minmax(0,810px);justify-content:center}
/* The legacy rail is redundant with contextual links and end-of-article
   reading paths. In real scroll testing it also left a blank column after
   its short list had passed. Keep the article's useful measure centred
   instead of reserving a dead desktop zone. */
.article-shell:has(.article-sidebar) .article-header{margin-left:auto;margin-right:auto}
.article-layout:has(.article-sidebar){grid-template-columns:minmax(0,810px);justify-content:center}
.article-sidebar{display:none}
.prose .decision-card{margin:38px 0;padding:28px 30px;border:1px solid rgba(18,47,59,.17);border-left:4px solid #b49369;background:linear-gradient(120deg,rgba(255,255,255,.76),rgba(228,237,235,.48));box-shadow:0 12px 30px rgba(8,19,23,.055)}
.prose .decision-card .decision-no{margin:0 0 10px;color:#8a6b50;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:10px;font-weight:900;letter-spacing:.13em}
.prose .decision-card>h2{margin:0 0 12px!important;padding:0!important;border:0!important;background:none!important;color:#12313d!important;font-size:clamp(23px,2.7vw,30px)!important;line-height:1.3!important}
.prose .decision-card>h2::before,.prose .decision-card>h2::after{display:none!important}
.prose .decision-card>p:last-child{margin-bottom:0}
.related-reading{margin:46px 0 0;padding:24px 26px 20px;border-top:3px solid #b49369;background:rgba(255,255,255,.54);box-shadow:0 10px 26px rgba(8,19,23,.045)}
.related-reading+ .related-reading{margin-top:14px;border-top-color:#4c96a2}
.related-reading h2{margin:0 0 11px!important;padding:0!important;border:0!important;background:none!important;color:#12313d!important;font-size:21px!important;line-height:1.3!important}
.related-reading h2::before,.related-reading h2::after{display:none!important}
.related-reading ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;margin:0;padding:0;list-style:none}
.related-reading li{padding:12px 0;border-top:1px solid rgba(18,47,59,.13);color:#52646a;font-size:14px;line-height:1.65}
.related-reading a{font-weight:800}
.more-reading{margin:14px 0 0;padding:24px 26px 20px;border-top:3px solid #4c96a2;background:rgba(238,247,247,.7);box-shadow:0 10px 26px rgba(8,19,23,.045)}
.more-reading h2{margin:0 0 11px!important;padding:0!important;border:0!important;background:none!important;color:#12313d!important;font-size:21px!important;line-height:1.3!important}
.more-reading h2::before,.more-reading h2::after{display:none!important}
.more-reading ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin:0;padding:0;list-style:none}
.more-reading li{padding:12px 0;border-top:1px solid rgba(18,47,59,.13);color:#52646a;font-size:14px;line-height:1.65}
.more-reading a{font-weight:800}
.sources{margin:42px 0 0;padding:23px 26px 2px;border-top:1px solid rgba(18,47,59,.18);color:#627075}
.sources h2{margin:0 0 11px!important;padding:0!important;border:0!important;background:none!important;color:#43545a!important;font-family:"Manrope","Noto Sans TC",sans-serif!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em!important}
.sources h2::before,.sources h2::after{display:none!important}
.sources ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.7}
.sources li{padding:7px 0;border-top:1px solid rgba(18,47,59,.10)}
@media(max-width:640px){.prose .decision-card{margin:30px 0;padding:23px 20px}.prose .decision-card>h2{font-size:22px!important}.related-reading,.more-reading{padding:21px 19px 17px}.related-reading{margin-top:36px}.related-reading+ .related-reading{margin-top:12px}.related-reading ul,.more-reading ul{grid-template-columns:1fr}.related-reading li,.more-reading li{font-size:14px}.sources{margin-top:34px;padding:20px 2px 0}.sources ul{font-size:13px}}
.entry-hero-media>.entry-hero-place-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}.entry-hero-media:has(>.entry-hero-place-image)::before{z-index:1;pointer-events:none}
/* A few early static articles use this masthead shape. Give it the same bounded,
   two-column editorial treatment as current entry heroes rather than allowing a
   source photograph to expand to its natural desktop height. */
.entry-masthead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);min-height:540px;background:#0b2027;color:#f7f5ef}.entry-masthead>img{grid-column:2;grid-row:1;display:block;width:100%;height:100%;max-height:580px;object-fit:cover}.entry-masthead__overlay{grid-column:1;grid-row:1;align-self:center;box-sizing:border-box;max-width:none;padding:72px 42px 74px max(32px,calc((100vw - 1180px)/2));margin:0}.entry-masthead__overlay .eyebrow{color:#d8bc90;font-size:10px;font-weight:800;letter-spacing:.14em}.entry-masthead h1{margin:16px 0 18px;font-size:clamp(38px,4.3vw,56px);line-height:1.08;letter-spacing:-.035em}.entry-masthead .article-lead{margin:0;color:rgba(247,245,239,.76);font-size:16px;line-height:1.85}.entry-page>.article-layout{width:min(calc(100% - 48px),1065px);margin:0 auto;padding:60px 0 90px}.entry-page>.article-layout>.prose{max-width:810px}
.entry-page--aurora-decision .entry-masthead h1{max-width:560px;font-size:clamp(42px,3.85vw,52px)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:66px}.site-header__inner .brand{display:inline-flex;align-items:center;gap:9px;color:#f6f4ed;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:14px;font-weight:900;letter-spacing:.035em;text-decoration:none}.site-header__inner .brand-mark{display:inline-grid;width:30px;height:30px;place-items:center;border:1px solid rgba(215,176,106,.78);color:#d8bc90;font-size:8px;letter-spacing:.12em}.site-nav{display:flex;align-items:center;gap:3px}.site-nav a{display:flex;min-height:40px;align-items:center;padding:0 10px;color:rgba(246,244,237,.82);font-size:13px;font-weight:700;text-decoration:none}.site-nav a:hover,.site-nav a:focus-visible{color:#fff;text-decoration:underline;text-decoration-color:#d8bc90;text-underline-offset:6px}
/* Older published articles keep their existing navigation markup.  Normalise
   that markup to the current compact ICE mark so moving between old and new
   guides never feels like crossing into a second publication. */
.site-header .nav{min-height:66px}.site-header .nav .brand{gap:9px!important;color:#f6f4ed!important;font-family:"Manrope","Noto Sans TC",sans-serif!important;font-size:14px!important;font-weight:900!important;letter-spacing:.035em!important;text-decoration:none}.site-header .nav .brand-mark{display:inline-grid!important;width:30px!important;height:30px!important;flex:0 0 30px!important;place-items:center;border:1px solid rgba(215,176,106,.78);color:#d8bc90}.site-header .nav .brand-mark img{display:none!important}.site-header .nav .brand-mark::before{content:"ICE";font-family:"Manrope","Noto Sans TC",sans-serif;font-size:8px;font-weight:900;letter-spacing:.12em}.site-header .nav .brand-word{line-height:1;text-transform:uppercase}.site-header .nav .brand-word::after{display:none!important}.site-header .nav-links{gap:18px}.site-header .nav-links a,.site-header .nav-links .nav-current{min-height:66px;font-size:13px}.site-header .nav-links a::after,.site-header .nav-links .nav-current::after{bottom:12px;height:1px;background:#d8bc90}
.article-figure{margin:34px 0}.article-figure img{display:block;width:100%;height:auto;border:1px solid rgba(18,47,59,.16);border-radius:16px;background:#dfe9ed;box-shadow:0 16px 36px rgba(8,19,23,.1)}.article-figure figcaption{margin-top:11px;color:#52646a;font-size:14px;line-height:1.65}.article-figure figcaption strong{color:#17353e}
.prose .decision-card{margin:34px 0;padding:26px 28px;border-left:4px solid #b49369;background:rgba(255,255,255,.52)}.prose .decision-card h2{margin:0 0 14px;padding:0;border:0;background:none;font-size:24px}.prose .decision-card h2::before,.prose .decision-card h2::after{display:none}.prose .decision-card p+p{margin-top:12px}
.article-end-links ul{margin:12px 0 0;padding-left:21px}.article-end-links li+li{margin-top:9px}
@media(max-width:640px){.article-figure{width:calc(100vw - 24px);margin:26px calc(50% - 50vw + 12px) 30px}.article-figure img{border-radius:12px}.article-figure figcaption{padding:0 4px;font-size:13px;line-height:1.62}.prose .decision-card{padding:22px 20px}.prose .decision-card h2{font-size:22px}}

/* Platform choices are a comparison list, not a compact grid of adverts.
   Keeping every verified destination full width gives its package detail a
   readable line length and matches the site's editorial CTA card language. */
.affiliate-cta-panel{position:relative}
.affiliate-cta-panel::before{content:"ICELAVI · 已核對選項";display:block;margin:0 0 11px;color:#b87916;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:11px;font-weight:900;letter-spacing:.13em;line-height:1.2}
.affiliate-cta-panel>h3{max-width:680px;margin:0 0 10px;color:#12313d;font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;font-size:clamp(23px,2.6vw,31px);line-height:1.24;letter-spacing:-.02em}
.affiliate-cta-group--two,.affiliate-cta-group--four{grid-template-columns:1fr}
.affiliate-cta-group--two .affiliate-cta,.affiliate-cta-group--four .affiliate-cta{justify-content:space-between;min-height:58px;padding:13px 18px;text-align:left;font-size:14px;font-weight:800}
.platform-compare-details{margin:18px 0 16px;border:1px solid rgba(18,49,61,.16);background:#f8faf9}.platform-compare-details summary{position:relative;display:flex;align-items:center;min-height:50px;padding:12px 46px 12px 15px;cursor:pointer;color:#12313d;font-size:14px;font-weight:850;line-height:1.45;list-style:none}.platform-compare-details summary::-webkit-details-marker{display:none}.platform-compare-details summary::after{content:"＋";position:absolute;right:16px;top:50%;width:22px;height:22px;transform:translateY(-50%);border:1px solid #b87916;border-radius:50%;color:#9b6818;font-size:18px;font-weight:500;line-height:19px;text-align:center}.platform-compare-details[open] summary{border-bottom:1px solid rgba(18,49,61,.12);background:#fff}.platform-compare-details[open] summary::after{content:"−"}.platform-compare-details .table-wrap{margin:0;border:0;border-radius:0;background:#fff}.platform-compare-details table{margin:0}

/* Long decision headlines should introduce the page, not occupy the whole
   first phone screen. Keep the desktop editorial scale while tightening the
   mobile H1 independently from body and section headings. */
@media(max-width:640px){.page-hero h1,.entry-hero h1,.entry-masthead h1,.article-header h1{max-width:100%;font-size:clamp(27px,7.3vw,29px)!important;line-height:1.14!important;letter-spacing:-.02em;overflow-wrap:normal;text-wrap:balance;word-break:normal}html[lang^="zh"] .entry-hero h1 br,html[lang^="zh"] .entry-masthead h1 br{display:none}.prose{font-size:16px;line-height:1.88;letter-spacing:.006em}.prose h2{letter-spacing:-.015em}.article-lead{font-size:16px;line-height:1.82}}
/* Long editorial headlines should breathe on a phone.  Keep hub heroes at the
   established scale, but give article mastheads one extra line of calm space
   so a four-line title does not become the first thing the reader must fight. */
@media(max-width:640px){.entry-masthead h1{font-size:clamp(25px,6.7vw,27px)!important;line-height:1.18!important;letter-spacing:-.018em}}
@media(max-width:820px){.entry-masthead{display:flex;min-height:0;flex-direction:column}.entry-masthead>img{order:0;width:100%;height:260px;max-height:none}.entry-masthead__overlay{order:1;max-width:none;padding:31px max(18px,calc((100vw - var(--max))/2)) 35px;margin:0}.entry-masthead .article-lead{font-size:16px;line-height:1.82}.entry-page>.article-layout{width:min(calc(100% - 36px),810px);padding:40px 0 66px}.site-header__inner{min-height:0;flex-wrap:wrap;gap:0;padding-top:8px}.site-header__inner .brand{min-height:48px}.site-nav{display:flex;order:3;width:100%;max-width:none;margin-left:0;gap:0;overflow-x:auto;overscroll-behavior-inline:contain;border-top:1px solid rgba(255,255,255,.09);scrollbar-width:none}.site-nav::-webkit-scrollbar{display:none}.site-nav a{min-height:48px;flex:0 0 auto;padding:0 12px;font-size:12px;white-space:nowrap}.site-nav a:first-child{padding-left:0}}

/* The Chinese homepage uses an identified, credited photograph rather than a generic
   background token.  This selector deliberately wins after the shared photo layer. */
html[lang^="zh"] body > main > .hero .hero-media{background-image:linear-gradient(90deg,rgba(7,24,32,.3),rgba(7,24,32,.04)),url("/assets/images/seasons/thingvellir-aurora-carl-young.webp")!important;background-position:center 57%!important}
/* At narrow phone widths, a long Chinese article title needs one more usable
   character per line. This prevents a final single glyph while preserving the
   hierarchy of the editorial header. */
@media(max-width:430px){.article-header h1{font-size:26px!important;line-height:1.18!important;letter-spacing:-.015em}}

/* Article + hotel finder: the article remains the reading column while the
   real selector becomes a sticky decision tool on desktop. */
.article-layout:has(> .article-hotel-selector){width:min(calc(100% - 48px),1240px)!important;max-width:none!important;grid-template-columns:minmax(0,810px) minmax(300px,360px)!important;justify-content:space-between!important;gap:38px!important;align-items:start}
.article-shell:has(.article-hotel-selector) .article-header{max-width:810px;margin-left:0!important;margin-right:0!important}
.article-hotel-selector{position:sticky;top:92px;min-width:0;overflow:hidden;border:1px solid #d8d1c5;background:#fcfbf8;box-shadow:0 18px 45px rgba(8,31,38,.1);color:#17292e}
.article-hotel-selector__head{padding:23px 22px 18px;border-bottom:1px solid #ddd6ca}
.article-hotel-selector__head>p{display:flex;align-items:center;gap:9px;margin:0 0 9px;color:#8b6943;font-size:9px;font-weight:900;letter-spacing:.14em}
.article-hotel-selector__head>p::before{content:"";width:24px;height:2px;background:#b49369}
.article-hotel-selector__head h2{margin:0!important;padding:0!important;border:0!important;background:none!important;color:#143d3b!important;font-family:"Noto Serif TC","Songti TC",serif!important;font-size:24px!important;line-height:1.25!important;letter-spacing:-.02em!important}
.article-hotel-selector__head h2::before,.article-hotel-selector__head h2::after{display:none!important}
.article-hotel-selector__head span{display:block;margin-top:9px;color:#647277;font-size:12px;line-height:1.65}
.article-hotel-selector form{display:grid;gap:13px;padding:18px 22px 20px}
.article-hotel-selector label{display:grid;gap:6px;color:#24494a;font-size:11px;font-weight:850}
.article-hotel-selector select,.article-hotel-selector input[type="date"]{box-sizing:border-box;width:100%;min-height:44px;padding:0 11px;border:1px solid #d8d1c5;border-radius:0;background:#fff;color:#17292e;font:inherit;font-weight:600}
.article-hotel-selector__pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.article-hotel-selector label.article-hotel-selector__check{display:flex;align-items:center;gap:9px;margin-top:1px;font-size:12px}
.article-hotel-selector__check input{width:18px;height:18px;accent-color:#1d514d}
.article-hotel-selector button{display:flex;min-height:52px;align-items:center;justify-content:space-between;padding:0 17px;border:0;background:#1d514d;color:#fff;cursor:pointer;font-size:12px;font-weight:900}
.article-hotel-selector button:hover{background:#143e3b}.article-hotel-selector button span{font-size:21px;font-weight:400}
.article-hotel-selector__full{display:block;padding:14px 22px;border-top:1px solid #ddd6ca;color:#365f67;font-size:11px;font-weight:850;text-decoration:none}
.article-hotel-selector__full:hover{text-decoration:underline;text-underline-offset:3px}
:is(.prose,.article-main)>.article-reading-path,:is(.prose,.article-main)>.article-supplement{box-sizing:border-box;width:100%;max-width:100%;margin:48px 0 0}
:is(.prose,.article-main)>.article-reading-path ul{margin-bottom:0}
@media(max-width:1000px){.article-layout:has(> .article-hotel-selector){width:min(calc(100% - 36px),810px)!important;grid-template-columns:minmax(0,1fr)!important;gap:34px!important}.article-hotel-selector{position:relative;top:auto}.article-shell:has(.article-hotel-selector) .article-header{margin-left:auto!important;margin-right:auto!important}}
@media(max-width:520px){.article-hotel-selector__head,.article-hotel-selector form{padding-right:18px;padding-left:18px}.article-hotel-selector__pair{grid-template-columns:1fr}.article-hotel-selector__full{padding-right:18px;padding-left:18px}}

/* Real-place editorial imagery. The wide comparison cover establishes the
   visual difference; the source photographs below keep that comparison
   auditable instead of asking a generated graphic to stand in for reality. */
.comparison-cover{max-width:1180px;margin:0 auto 34px;padding:0 24px}.comparison-cover img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid rgba(18,47,59,.16);border-radius:18px;box-shadow:0 18px 44px rgba(8,19,23,.13)}.comparison-cover figcaption{max-width:850px;margin:11px auto 0;color:#52646a;font-size:14px;line-height:1.65}
.lagoon-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 34px}.lagoon-photo{position:relative;margin:0;overflow:hidden;border:1px solid rgba(18,47,59,.14);border-radius:14px;background:#f5f7f7}.lagoon-photo::before{content:attr(data-brand-label);position:absolute;z-index:1;top:10px;left:10px;padding:7px 11px;border-left:2px solid #d7b06a;background:rgba(8,19,23,.86);color:#fff;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.08em;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);backdrop-filter:blur(5px)}.lagoon-photo img{display:block;width:100%;height:280px;object-fit:cover}.lagoon-photo figcaption{padding:12px 14px 14px;border-top:1px solid rgba(180,147,105,.32);color:#40535a;font-size:14px;line-height:1.65}.lagoon-photo figcaption strong{color:#10272f}
.affiliate-cta::after{content:"↗"}
/* The three-way hotel comparison is a next-step choice inside the page, not an
   external-content teaser.  Keep its arrow horizontal, like the reference
   booking panel, even though general affiliate buttons retain the outbound
   mark.  This also makes the final CTA scan as one deliberate comparison
   sequence on a phone. */
.decision-cta-panel .affiliate-cta::after{content:"→"}
@media(max-width:640px){.comparison-cover{width:calc(100vw - 24px);margin:0 calc(50% - 50vw + 12px) 28px;padding:0}.comparison-cover img{aspect-ratio:4/3;border-radius:12px}.comparison-cover figcaption{padding:0 4px;font-size:13px;line-height:1.62}.lagoon-photo-grid{grid-template-columns:1fr;gap:12px;margin:20px 0 28px}.lagoon-photo img{height:auto;aspect-ratio:16/10}.lagoon-photo figcaption{font-size:13px;line-height:1.62}}
.article-image{margin:30px 0 32px;border:1px solid rgba(18,36,42,.12);border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#edf3f2 0%,#f8f5ef 52%,#e3ecec 100%);box-shadow:0 12px 30px rgba(18,36,42,.08)}
.article-image img{display:block;width:100%;height:auto;aspect-ratio:20/13;object-fit:cover}
.article-image figcaption{padding:12px 16px 14px;color:#5f6b6e;font-size:13px;line-height:1.65;background:linear-gradient(90deg,#f8f5ef,#fff)}
.article-image--labelled{position:relative}.article-image--labelled::before{content:attr(data-brand-label);position:absolute;z-index:1;top:12px;left:12px;padding:7px 10px;border-left:2px solid #d7b06a;background:rgba(8,28,36,.9);color:#fff;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:10px;font-weight:900;letter-spacing:.08em;line-height:1.15;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.article-image.is-image-missing{position:relative;min-height:220px}.article-image.is-image-missing img{visibility:hidden}.article-image.is-image-missing::after{content:"ICELAVI · 實景圖暫時未能載入";position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:#31535c;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:12px;font-weight:900;letter-spacing:.08em;text-align:center}
@media (max-width:640px){.article-image{margin:24px 0 26px;border-radius:14px}.article-image figcaption{padding:11px 13px 12px;font-size:12px}}
.geo-map-stack{position:relative;width:100%;min-width:720px;aspect-ratio:1186.034/841.098;overflow:hidden;background:#c6ecff}.geo-map-stack img{position:absolute;inset:0;display:block;width:100%;height:100%;border:0!important;border-radius:0!important;object-fit:contain}.geo-map-stack__base{z-index:0}.geo-map-stack__overlay{z-index:1;pointer-events:none}.route-map--brand .route-map__scroll{background:#dfeaec}@media(min-width:641px){.geo-map-stack{min-width:0}}
.geo-map-stack .geo-map-stack__overlay{background:transparent!important}
.geo-map-crop{display:block;width:100%;min-width:760px;height:auto;background:#c6ecff}@media(min-width:641px){.geo-map-crop{min-width:0}}
.june-map-mobile-route,.june-map-pins{display:none}
/* A whole-island decision map must answer its one question on a phone without
   becoming a 900px-long illustration.  The base remains the actual Iceland
   geography; this compact overlay only keeps the six overnight reference
   points legible at the scale where the desktop map labels would not be. */
@media(max-width:640px){
  #june-ring-map .route-map__scroll{position:relative;overflow:visible;padding:0}
  #june-ring-map .route-map__scroll::before{display:none}
  #june-ring-map .geo-map-crop{width:100%;min-width:0}
  #june-ring-map .june-map-desktop-overlay{display:none}
  #june-ring-map .june-map-mobile-route{display:block}
  #june-ring-map .june-map-pins{position:absolute;inset:0;z-index:2;display:block;pointer-events:none}
  #june-ring-map .june-pin{position:absolute;padding:3px 5px;border:1px solid rgba(255,255,255,.92);border-left:3px solid var(--june-pin);background:rgba(11,48,62,.93);box-shadow:0 2px 8px rgba(7,25,32,.22);color:#fff;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:9px;font-weight:900;line-height:1.1;white-space:nowrap}
  #june-ring-map .june-pin::before{content:"";position:absolute;z-index:-1;width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:var(--june-pin);box-shadow:0 1px 4px rgba(7,25,32,.28)}
  #june-ring-map .june-pin--reykjavik{--june-pin:#d8bc90;left:18%;top:67%}#june-ring-map .june-pin--reykjavik::before{right:-11px;top:12px}
  #june-ring-map .june-pin--vik{--june-pin:#c66342;left:43%;top:85%}#june-ring-map .june-pin--vik::before{left:25px;top:-12px}
  #june-ring-map .june-pin--lagoon{--june-pin:#c66342;left:67%;top:72%}#june-ring-map .june-pin--lagoon::before{right:-11px;top:10px}
  #june-ring-map .june-pin--hofn{--june-pin:#c66342;left:78%;top:61%}#june-ring-map .june-pin--hofn::before{right:-11px;top:12px}
  #june-ring-map .june-pin--myvatn{--june-pin:#117d91;left:62%;top:20%}#june-ring-map .june-pin--myvatn::before{left:24px;bottom:-12px}
  #june-ring-map .june-pin--akureyri{--june-pin:#117d91;left:48%;top:27%}#june-ring-map .june-pin--akureyri::before{right:-11px;top:10px}
  #june-ring-map .route-map-key{grid-template-columns:repeat(3,minmax(0,1fr))}
  #june-ring-map .route-map-key span{min-height:92px;padding:10px 9px;font-size:10px;line-height:1.42}
  #june-ring-map .route-map-key b{font-size:11px}
  #june-ring-map figcaption::before{display:none}
}
.osm-brand-map{position:relative;width:1024px;height:512px;overflow:hidden;background:#dfeaec}.osm-tile-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,256px);grid-template-rows:repeat(2,256px);filter:saturate(.76) contrast(.97)}.osm-tile-grid img{position:static!important;display:block!important;width:256px!important;min-width:256px!important;max-width:none!important;height:256px!important;border:0!important;border-radius:0!important;background:#dfeaec!important}.osm-brand-map::after{content:"Map data © OpenStreetMap contributors";position:absolute;right:8px;bottom:7px;z-index:4;padding:3px 6px;background:rgba(255,255,255,.92);color:#4c5f64;font-size:9px}.osm-map-pin{position:absolute;z-index:3;width:18px;height:18px;transform:translate(-50%,-50%);border:4px solid #fff;border-radius:50%;background:var(--pin,#0b5665);box-shadow:0 3px 10px rgba(7,25,32,.32)}.osm-map-label{position:absolute;z-index:3;min-width:130px;padding:8px 10px;border-left:3px solid var(--pin,#0b5665);background:rgba(11,48,62,.94);box-shadow:0 5px 15px rgba(7,25,32,.22);color:#fff;font-size:12px;font-weight:900;line-height:1.3}.osm-map-label small{display:block;margin-top:2px;color:#d6e4e6;font-size:10px;font-weight:700}.osm-map-label--hotel{--pin:#c69058}.osm-map-label--katla{--pin:#2a91a3}.osm-map-label--arctic{--pin:#4e698e}.osm-map-label--troll{--pin:#e66e4f}
.article-preview-card__media svg{display:block;width:100%;height:100%;background:#c6ecff}
/* Article-owned decision infographics need their full canvas visible in a
   card; covering them crops the labels that make the preview useful. */
.article-preview-card__media img[src*="/infographics/"]{object-fit:contain!important;background:#eef3f2!important}
/* Category cards are a route selector, not a full-bleed photo gallery.  On
   phones an intrinsic image height could win over the intended 16:10 crop,
   pushing the decision title below the first viewport.  Give every card the
   same readable preview window while retaining its own article image. */
@media(max-width:640px){.category-index .article-preview-card__media{height:calc((100vw - 46px)*.625)!important;min-height:0!important;aspect-ratio:auto!important}.category-index .article-preview-card__media img{width:100%!important;height:100%!important;object-fit:cover!important}}
/* Keep article-owned decision infographics complete on phones too; the
   category preview crop above is appropriate for photos, not labelled data. */
.category-index .article-preview-card__media img[src*="/infographics/"]{object-fit:contain!important;background:#eef3f2!important}
.geo-map-crop--fit{min-width:0}
/* An odd final card should finish the editorial group instead of leaving an
   accidental empty track. Give the remaining article a calm, wide
   photo-and-copy treatment; the phone rule below returns it to one column. */
@media(min-width:641px){
  .category-index .category-article-grid:not(.category-article-grid--single)>.article-preview-card:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(300px,1.08fr) minmax(0,.92fr);border:0;border-top:1px solid #bbc8c6;border-radius:0;background:#f0f2ed;box-shadow:none}
  .category-index .category-article-grid:not(.category-article-grid--single)>.article-preview-card:last-child:nth-child(odd) .article-preview-card__media{height:100%;min-height:280px;aspect-ratio:auto}
  .category-index .category-article-grid:not(.category-article-grid--single)>.article-preview-card:last-child:nth-child(odd) .article-preview-card__body{min-height:280px;padding:32px 36px 28px}
}
@media(min-width:641px) and (max-width:980px){
  .category-index .category-article-grid:not(.category-article-grid--single)>.article-preview-card:last-child:nth-child(odd){grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr)}
}
@media(max-width:640px){
  .category-index .category-article-grid:not(.category-article-grid--single)>.article-preview-card:last-child:nth-child(odd){grid-column:auto;display:flex;border:1px solid rgba(18,47,59,.14);border-radius:18px;background:#fff;box-shadow:0 11px 30px rgba(8,19,23,.06)}
  .category-index .category-article-grid:not(.category-article-grid--single)>.article-preview-card:last-child:nth-child(odd) .article-preview-card__media{height:calc((100vw - 46px)*.625);min-height:0;aspect-ratio:auto}
  .category-index .category-article-grid:not(.category-article-grid--single)>.article-preview-card:last-child:nth-child(odd) .article-preview-card__body{min-height:0;padding:19px}
}
.route-map-key{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.osm-brand-map--north{width:768px;height:512px}.osm-tile-grid--north{grid-template-columns:repeat(3,256px);grid-template-rows:repeat(2,256px)}.osm-map-pin--hub,.osm-map-label--hub{--pin:#0b5665}.osm-map-pin--activity,.osm-map-label--activity{--pin:#c66e4e}.osm-map-pin--route,.osm-map-label--route{--pin:#947148}.key-dot{display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;background:#0b5665}.key-dot--activity{background:#c66e4e}.key-dot--hub{background:#0b5665}.key-dot--route{background:#947148}
/* One factual Iceland field for the Reykjavík-or-Húsavík decision. Desktop and
   phone share the same two public coordinate pins; only label density changes. */
#whale-port-map .route-map__scroll{overflow:visible}
#whale-port-map .osm-brand-map--whale-ports{width:100%;height:auto;aspect-ratio:4/3}
#whale-port-map .osm-tile-grid--whale-ports{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
#whale-port-map .osm-tile-grid--whale-ports img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
@media(max-width:640px){
  #whale-port-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #whale-port-map .osm-map-label{min-width:0;max-width:34%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #whale-port-map .osm-map-label small{display:none}
  #whale-port-map .whale-label-reykjavik{left:4%!important;top:72%!important}
  #whale-port-map .whale-label-husavik{left:53%!important;top:5%!important}
  #whale-port-map.route-map--pan .route-map__scroll::before{content:"兩個港口，同屏比較"}
  #whale-port-map.route-map--pan figcaption::before{display:none}
}
/* Ice-cave product cards may share a Jökulsárlón collection area, but Vík and
   Skaftafell are different overnight decisions. Put all three on one factual field. */
#ice-cave-meeting-map .route-map__scroll{overflow:visible}
#ice-cave-meeting-map .osm-brand-map--ice-cave{width:100%;height:auto;aspect-ratio:3/2}
#ice-cave-meeting-map .osm-tile-grid--ice-cave{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
#ice-cave-meeting-map .osm-tile-grid--ice-cave img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
@media(max-width:640px){
  #ice-cave-meeting-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #ice-cave-meeting-map .osm-map-label{min-width:0;max-width:33%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #ice-cave-meeting-map .osm-map-label small{display:none}
  #ice-cave-meeting-map .ice-cave-label-vik{left:2%!important;top:72%!important}
  #ice-cave-meeting-map .ice-cave-label-skaftafell{left:35%!important;top:8%!important}
  #ice-cave-meeting-map .ice-cave-label-jokulsarlon{left:67%!important;top:43%!important}
  #ice-cave-meeting-map.route-map--pan .route-map__scroll::before{content:"三個集合方向，同屏比較"}
  #ice-cave-meeting-map.route-map--pan figcaption::before{display:none}
}
/* Dettifoss is a two-bank road choice. Keep the real northern map intact on a phone,
   then make the 862, 864, Mývatn and Ásbyrgi labels answer that choice in one field. */
@media(max-width:640px){
  #dettifoss-map .route-map__scroll{overflow:visible}
  #dettifoss-map .osm-brand-map--north{width:100%!important;height:auto!important;aspect-ratio:3/2}
  #dettifoss-map .osm-tile-grid--north{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #dettifoss-map .osm-tile-grid--north img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #dettifoss-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #dettifoss-map .osm-map-label{min-width:0;max-width:31%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #dettifoss-map .osm-map-label small{display:none}
  #dettifoss-map .dettifoss-label-west{left:2%!important;top:50%!important}
  #dettifoss-map .dettifoss-label-east{left:54%!important;top:64%!important}
  #dettifoss-map .dettifoss-label-asbyrgi{left:52%!important;top:34%!important}
  #dettifoss-map .dettifoss-label-myvatn{left:48%!important;top:80%!important}
  #dettifoss-map.route-map--pan .route-map__scroll::before{content:"四個位置，同屏比較"}
  #dettifoss-map.route-map--pan figcaption::before{display:none}
}
/* Goðafoss is a stop between two overnight bases, not a decorative curve on a
   route graphic. Show Akureyri, Goðafoss and Mývatn together on the real map. */
@media(max-width:640px){
  #godafoss-map .route-map__scroll{overflow:visible}
  #godafoss-map .osm-brand-map--north{width:100%!important;height:auto!important;aspect-ratio:3/2}
  #godafoss-map .osm-tile-grid--north{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #godafoss-map .osm-tile-grid--north img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
  #godafoss-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #godafoss-map .osm-map-label{min-width:0;max-width:30%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #godafoss-map .osm-map-label small{display:none}
  #godafoss-map .godafoss-label-akureyri{left:2%!important;top:85%!important}
  #godafoss-map .godafoss-label-waterfall{left:11%!important;top:53%!important}
  #godafoss-map .godafoss-label-myvatn{left:58%!important;top:76%!important}
  #godafoss-map.route-map--pan .route-map__scroll::before{content:"三個位置，同屏比較"}
  #godafoss-map.route-map--pan figcaption::before{display:none}
}
.osm-brand-map--westman{width:512px;height:512px;margin:0 auto}.osm-tile-grid--westman{grid-template-columns:repeat(2,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map--october{width:768px;height:768px;margin:0 auto}.osm-tile-grid--october{grid-template-columns:repeat(3,256px);grid-template-rows:repeat(3,256px)}
.osm-brand-map--f26{width:768px;height:540px}.osm-tile-grid--f26{grid-template-columns:repeat(3,256px);grid-template-rows:repeat(3,256px)}
.osm-brand-map--vik{width:768px;height:384px}.osm-tile-grid--vik{grid-template-columns:repeat(4,192px);grid-template-rows:repeat(2,192px)}.osm-tile-grid--vik img{width:192px!important;min-width:192px!important;height:192px!important}
.osm-brand-map--golden-circle{width:512px;height:512px;margin:0 auto}.osm-tile-grid--golden-circle{grid-template-columns:repeat(2,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map--festival{width:1024px;height:512px}.osm-tile-grid--festival{grid-template-columns:repeat(4,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map--arrival{width:1024px;height:512px}.osm-tile-grid--arrival{grid-template-columns:repeat(4,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map--kef-park{width:768px;height:512px}.osm-tile-grid--kef-park{grid-template-columns:repeat(3,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map--kria{width:512px;height:512px;margin:0 auto}.osm-tile-grid--kria{grid-template-columns:repeat(2,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map--katla-location{width:768px;height:512px;margin:0 auto}.osm-tile-grid--katla-location{grid-template-columns:repeat(3,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map--last-night{width:768px;height:256px}.osm-tile-grid--last-night{grid-template-columns:repeat(3,256px);grid-template-rows:256px}.osm-map-pin--kef{--pin:#c66e4e;left:32.1%;top:14.9%}.osm-map-label--kef{--pin:#c66e4e;left:4%;top:25%}.osm-map-pin--reykjavik{--pin:#0b5665;left:40%;top:1.8%}.osm-map-label--reykjavik{--pin:#0b5665;left:46%;top:7%}.osm-map-pin--vik{--pin:#947148;left:74.8%;top:60.4%}.osm-map-label--vik{--pin:#947148;left:57%;top:49%}
/* The lava tunnel is a real southwest-Iceland branch decision. Keep the
   complete local OSM field visible instead of asking phone readers to pan a
   decorative outline map. */
#lava-tunnel-location-map .route-map__scroll{overflow:visible}
#lava-tunnel-location-map .osm-brand-map--golden-circle{width:100%;height:auto;aspect-ratio:1/1;margin:0}
#lava-tunnel-location-map .osm-tile-grid--golden-circle{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
#lava-tunnel-location-map .osm-tile-grid--golden-circle img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
@media(max-width:640px){#lava-tunnel-location-map .osm-map-pin{width:11px;height:11px;border-width:3px}#lava-tunnel-location-map .osm-map-label{min-width:0;max-width:33%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}#lava-tunnel-location-map .osm-map-label small{display:none}#lava-tunnel-location-map .lava-label-reykjavik{left:4%!important;top:57%!important}#lava-tunnel-location-map .lava-label-thingvellir{left:54%!important;top:22%!important}#lava-tunnel-location-map .lava-label-tunnel{left:47%!important;top:73%!important}}
@media(max-width:640px){.route-map--last-night .route-map__scroll{overflow:visible}.osm-brand-map--last-night{width:100%;height:auto;aspect-ratio:3/1}.osm-tile-grid--last-night{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}.osm-tile-grid--last-night img{width:100%!important;min-width:0!important;height:100%!important}.osm-brand-map--last-night .osm-map-pin{width:11px;height:11px;border-width:3px}.osm-brand-map--last-night .osm-map-label{min-width:0;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.15;box-shadow:0 2px 7px rgba(7,25,32,.24)}.osm-brand-map--last-night .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.12}.osm-map-label--kef{left:3%;top:28%}.osm-map-label--reykjavik{left:44%;top:9%}.osm-map-label--vik{left:59%;top:47%}}
@media(max-width:640px){#festival-venue-map .map-scroll{overflow:visible}#festival-venue-map .osm-brand-map--festival{width:100%;height:auto;aspect-ratio:2/1}#festival-venue-map .osm-tile-grid--festival{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}#festival-venue-map .osm-tile-grid--festival img{width:100%!important;min-width:0!important;height:100%!important}#festival-venue-map .osm-map-pin{width:11px;height:11px;border-width:3px}#festival-venue-map .osm-map-label{min-width:0;max-width:28%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}#festival-venue-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.05}#festival-venue-map .festival-label-harpa{left:66%!important;top:8%!important}#festival-venue-map .festival-label-idno{left:35%!important;top:70%!important}#festival-venue-map .festival-label-austur{left:74%!important;top:78%!important}#festival-venue-map .festival-label-laugavegur{left:72%!important;top:50%!important}#festival-venue-map .festival-label-harbour{left:35%!important;top:12%!important}}
/* This is a real city base map rather than an illustrative route: scale every
   source tile together, then retain the four actual decision points on phones. */
#reykjavik-city-area-map .route-map__scroll{overflow:visible}
#reykjavik-city-area-map .osm-brand-map--festival{width:100%;height:auto;aspect-ratio:2/1}
#reykjavik-city-area-map .osm-tile-grid--festival{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
#reykjavik-city-area-map .osm-tile-grid--festival img{width:100%!important;min-width:0!important;height:100%!important}
@media(max-width:640px){#reykjavik-city-area-map .osm-map-pin{width:11px;height:11px;border-width:3px}#reykjavik-city-area-map .osm-map-label{min-width:0;max-width:30%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}#reykjavik-city-area-map .osm-map-label small{display:none}#reykjavik-city-area-map .city-label-harbour{left:28%!important;top:12%!important}#reykjavik-city-area-map .city-label-harpa{left:64%!important;top:7%!important}#reykjavik-city-area-map .city-label-laugavegur{left:64%!important;top:49%!important}#reykjavik-city-area-map .city-label-pickup{left:62%!important;top:72%!important}}
/* Vík is a three-place comparison, not a map-reading exercise.  At phone width
   show Dyrhólaey, Reynisfjara and the town together; the desktop map remains at
   full street scale, while this overview keeps the true tile base and pins. */
@media(max-width:640px){
  #october-map .route-map__scroll{overflow:visible}
  #october-map .osm-brand-map--october{width:100%;height:auto;aspect-ratio:1/1}
  #october-map .osm-tile-grid--october{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  #october-map .osm-tile-grid--october img{width:100%!important;min-width:0!important;height:100%!important}
  #october-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #october-map .osm-map-label{min-width:0;max-width:31%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.15;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #october-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.12}
  #vik-map .route-map__scroll{overflow:visible}
  #vik-map .osm-brand-map--vik{width:100%;height:auto;aspect-ratio:2/1}
  #vik-map .osm-tile-grid--vik{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #vik-map .osm-tile-grid--vik img{width:100%!important;min-width:0!important;height:100%!important}
  #vik-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #vik-map .osm-map-label{min-width:0;max-width:31%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.15;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #vik-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.12}
  #vik-map .osm-map-pin--route{left:17.2%!important;top:70.8%!important}
  #vik-map .osm-map-label--route{left:2%!important;top:42%!important}
  #vik-map .osm-map-pin--activity{left:65.5%!important;top:65.9%!important}
  #vik-map .osm-map-label--activity{left:39%!important;top:69%!important}
  #vik-map .osm-map-pin--hub{left:86.1%!important;top:30.2%!important}
  #vik-map .osm-map-label--hub{left:67%!important;top:5%!important}
  #vik-map.route-map--pan .route-map__scroll::before{content:"三個位置，同屏比較"}
  #vik-map.route-map--pan figcaption::before{display:none}
  #kria-map .route-map__scroll{overflow:visible}
  #kria-map .osm-brand-map--kria{width:100%;height:auto;aspect-ratio:1/1}
  #kria-map .osm-tile-grid--kria{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #kria-map .osm-tile-grid--kria img{width:100%!important;min-width:0!important;height:100%!important}
  #kria-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #kria-map .osm-map-label{min-width:0;max-width:54%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.15;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #kria-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.12}
  #katla-map .route-map__scroll{overflow:visible}
  #katla-map .osm-brand-map--katla-location{width:100%;height:auto;aspect-ratio:3/2}
  #katla-map .osm-tile-grid--katla-location{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #katla-map .osm-tile-grid--katla-location img{width:100%!important;min-width:0!important;height:100%!important}
  #katla-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #katla-map .osm-map-label{min-width:0;max-width:43%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.15;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #katla-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.12}
}
/* The Mývatn comparison starts with four named places.  Phone readers need the
   whole decision field before a label's detail: the key below carries the
   explanation, while this real-map overview keeps every public coordinate in
   the first view. */
@media(max-width:640px){
  #myvatn-north-map .map-scroll{overflow:visible}
  #myvatn-north-map .osm-brand-map--north{width:100%;height:auto;aspect-ratio:3/2}
  #myvatn-north-map .osm-tile-grid--north{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #myvatn-north-map .osm-tile-grid--north img{width:100%!important;min-width:0!important;height:100%!important}
  #myvatn-north-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #myvatn-north-map .osm-map-label{min-width:0;max-width:27%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.15;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #myvatn-north-map .osm-map-label small{display:none}
  #myvatn-north-map .osm-map-pin--hub{left:32.4%!important;top:76.2%!important}
  #myvatn-north-map .osm-map-label--hub{left:67%!important;top:75%!important}
  #myvatn-north-map .osm-map-pin--activity{left:22.4%!important;top:41.4%!important}
  #myvatn-north-map .osm-map-label--activity{left:28%!important;top:8%!important}
  #myvatn-north-map .osm-map-pin--route:nth-of-type(5){left:17.3%!important;top:72.9%!important}
  #myvatn-north-map .osm-map-label--route:nth-of-type(6){left:2%!important;top:53%!important}
  #myvatn-north-map .osm-map-pin--route:nth-of-type(7){left:44.9%!important;top:61.5%!important}
  #myvatn-north-map .osm-map-label--route:nth-of-type(8){left:57%!important;top:42%!important}
  #myvatn-north-map.route-map--pan .map-scroll::before{content:"四個位置，同屏比較"}
  #myvatn-north-map.route-map--pan figcaption::before{display:none}
}

/* East-to-north lagoon comparison: keep the two real bath locations and the
   route scale legible on a phone instead of forcing a desktop-width map into
   the article column.  The labels carry the decision context; the OSM tiles
   carry the actual geography. */
#vok-forest-map .osm-brand-map--east-north{width:1024px;height:768px}
#vok-forest-map .osm-tile-grid--east-north{grid-template-columns:repeat(4,256px);grid-template-rows:repeat(3,256px)}
@media(max-width:640px){
  #vok-forest-map .map-scroll{overflow:visible}
  #vok-forest-map .osm-brand-map--east-north{width:100%;height:auto;aspect-ratio:4/3}
  #vok-forest-map .osm-tile-grid--east-north{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  #vok-forest-map .osm-tile-grid--east-north img{width:100%!important;min-width:0!important;height:100%!important}
  #vok-forest-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #vok-forest-map .osm-map-label{box-sizing:border-box;min-width:0;max-width:25%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.15;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #vok-forest-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.1}
  #vok-forest-map .vok-pin-akureyri{left:64.1%!important;top:24.2%!important}
  #vok-forest-map .vok-label-akureyri{left:47%!important;top:4%!important}
  #vok-forest-map .vok-pin-forest{left:65%!important;top:25.3%!important}
  #vok-forest-map .vok-label-forest{left:69%!important;top:28%!important}
  #vok-forest-map .vok-pin-myvatn{left:74%!important;top:26.7%!important}
  #vok-forest-map .vok-label-myvatn{left:72%!important;top:8%!important}
  #vok-forest-map .vok-pin-egils{left:97.1%!important;top:36.2%!important}
  #vok-forest-map .vok-label-egils{left:66%!important;top:39%!important}
  #vok-forest-map .vok-pin-vok{left:96.3%!important;top:37%!important}
  #vok-forest-map .vok-label-vok{left:66%!important;top:57%!important}
}

/* Mobile navigation remains a real site map instead of disappearing behind a desktop breakpoint. */
.btn{font-size:13px}
/* A long Chinese action label is often the honest label.  Do not force it into
   a desktop-height button on a phone: a two-line choice needs the same calm
   padding and clear direction cue as the booking panels below it. */
@media(max-width:640px){
  .hero-actions .btn,.entry-hero-actions .btn{
    min-height:56px!important;
    padding:11px 18px!important;
    justify-content:space-between!important;
    gap:14px;
    text-align:left;
    line-height:1.42;
  }
  .hero-actions .btn::after,.entry-hero-actions .btn::after{
    content:"→";
    flex:0 0 auto;
    font-family:"Manrope","Noto Sans TC",sans-serif;
    font-size:18px;
    font-weight:700;
    line-height:1;
  }
}
@media(max-width:900px){
  .site-header .nav{min-height:0;flex-wrap:wrap;gap:0;padding-top:8px}
  .site-header .brand{min-height:48px}
  .site-header .nav-quick{display:none!important}
  .site-header .nav-links{display:flex!important;order:3;width:100%;margin-left:0;gap:0;overflow-x:auto;overscroll-behavior-inline:contain;border-top:1px solid rgba(255,255,255,.09);scrollbar-width:none}
  .site-header .nav-links::-webkit-scrollbar{display:none}
  .site-header .nav-links a,.site-header .nav-links .nav-current{min-height:48px;flex:0 0 auto;padding:0 12px;font-size:12px;white-space:nowrap}
  .site-header .nav-links a:first-child,.site-header .nav-links .nav-current:first-child{padding-left:0}
  .site-header .nav-links a::after,.site-header .nav-links .nav-current::after{bottom:0}
}
@media(max-width:640px){
  .btn{min-height:50px;font-size:14px}
  .hero-frame,.hero-content{min-height:calc(100svh - 102px)}
  .osm-brand-map--north{height:468px}
}
/* At 320px, keep every primary destination visible instead of asking a reader
   to discover that the final navigation item can be swiped into view. */
@media(max-width:360px){
  .site-header .nav-links a,.site-header .nav-links .nav-current{padding-inline:7px;font-size:11px}
}

/* A decision table only helps when every answer is visible.  These opt-in
   tables keep their desktop grid, then become labelled, scan-friendly cards on
   a phone instead of hiding the final columns behind horizontal scrolling. */
@media(max-width:640px){
  .table-wrap--mobile-cards{
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .table-wrap--mobile-cards::before{
    content:"ICELAVI · 決策比較";
    position:static;
    display:block;
    width:auto;
    min-width:0;
    padding:9px 13px;
    border:1px solid rgba(11,43,53,.18);
    border-bottom:0;
    background:#0b2b35;
    color:#d9c6a7;
  }
  .table-wrap--mobile-cards table.table--mobile-cards{
    display:block;
    width:100%;
    min-width:0!important;
    margin:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .table-wrap--mobile-cards .table--mobile-cards thead{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }
  .table-wrap--mobile-cards .table--mobile-cards tbody{
    display:grid;
    gap:12px;
    padding:12px 0 0;
  }
  .table-wrap--mobile-cards .table--mobile-cards tbody tr{
    display:block;
    overflow:hidden;
    border:1px solid rgba(11,43,53,.18);
    border-top:3px solid #0b2b35;
    background:rgba(255,255,255,.78);
    box-shadow:0 8px 18px rgba(11,43,53,.06);
  }
  .table-wrap--mobile-cards .table--mobile-cards tbody td{
    display:grid;
    grid-template-columns:minmax(78px,.72fr) minmax(0,1.68fr);
    gap:12px;
    align-items:start;
    padding:10px 13px;
    border:0;
    border-bottom:1px solid rgba(11,43,53,.1);
    background:transparent;
    color:#263236;
    font-size:14px;
    line-height:1.6;
  }
  .table-wrap--mobile-cards .table--mobile-cards tbody td::before{
    content:attr(data-label);
    color:#806445;
    font-family:"Manrope","Noto Sans TC",sans-serif;
    font-size:10px;
    font-weight:900;
    letter-spacing:.055em;
    line-height:1.45;
  }
  .table-wrap--mobile-cards .table--mobile-cards tbody td:first-child{
    padding-top:13px;
    color:#0b3b46;
    font-weight:800;
  }
  .table-wrap--mobile-cards .table--mobile-cards tbody td:last-child{
    border-bottom:0;
    padding-bottom:13px;
  }
  .table-wrap--mobile-cards .table--mobile-cards tbody tr:nth-child(even) td,
  .table-wrap--mobile-cards .table--mobile-cards tbody tr:hover td{
    background:transparent;
  }
}

/* Decision CTAs should land on the evidence itself, clear of the sticky masthead. */
.route-map[id],.affiliate-cta-panel[id],.decision-cta-panel[id]{scroll-margin-top:96px}
@media(max-width:900px){.route-map[id],.affiliate-cta-panel[id],.decision-cta-panel[id]{scroll-margin-top:112px}}

/* This comparison is only useful when both lagoons, KEF and Reykjavík remain
   visible together. Scale the real tile field to its card instead of leaving a
   desktop scrollbar that hides half of the decision. */
#lagoon-location-map .route-map__scroll{overflow:visible}
#lagoon-location-map .osm-brand-map--arrival{width:100%;height:auto;aspect-ratio:2/1}
#lagoon-location-map .osm-tile-grid--arrival{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
#lagoon-location-map .osm-tile-grid--arrival img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}

/* KEF is a short final transfer, not a walkable "airport district".  Keep all
   three reference points visible on a phone so the map answers that distinction. */
@media(max-width:640px){
  #park-inn-map .map-scroll,#hotel-berg-map .map-scroll{overflow:visible}
  #park-inn-map .osm-brand-map--kef-park,#hotel-berg-map .osm-brand-map--kef-park{width:100%;height:auto;aspect-ratio:3/2}
  #park-inn-map .osm-tile-grid--kef-park,#hotel-berg-map .osm-tile-grid--kef-park{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #park-inn-map .osm-tile-grid--kef-park img,#hotel-berg-map .osm-tile-grid--kef-park img{width:100%!important;min-width:0!important;height:100%!important}
  #park-inn-map .osm-map-pin,#hotel-berg-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #park-inn-map .osm-map-label,#hotel-berg-map .osm-map-label{min-width:0;max-width:38%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.12;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #park-inn-map .osm-map-label small,#hotel-berg-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.06}
  #park-inn-map .park-map-label-kef,#hotel-berg-map .park-map-label-kef{left:5%!important;top:58%!important}
  #park-inn-map .park-map-label-park,#hotel-berg-map .park-map-label-park{left:51%!important;top:41%!important}
  #park-inn-map .park-map-label-berg,#hotel-berg-map .park-map-label-berg{left:49%!important;top:5%!important}
  /* Use a verified off-terminal example, not a made-up generic rental route. */
  #kef-return-map .map-scroll{overflow:visible}
  #kef-return-map .osm-brand-map--kef-park{width:100%;height:auto;aspect-ratio:3/2}
  #kef-return-map .osm-tile-grid--kef-park{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #kef-return-map .osm-tile-grid--kef-park img{width:100%!important;min-width:0!important;height:100%!important}
  #kef-return-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #kef-return-map .osm-map-label{min-width:0;max-width:43%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.12;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #kef-return-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.06}
  #kef-return-map .kef-return-label-terminal{left:5%!important;top:62%!important}
  #kef-return-map .kef-return-label-blue{left:37%!important;top:18%!important}
  /* Keep the pickup comparison readable on a phone; the real OSM field scales
     as one map instead of leaving the verified office label off-canvas. */
  #kef-pickup-map .map-scroll{overflow:visible}
  #kef-pickup-map .osm-brand-map--kef-park{width:100%;height:auto;aspect-ratio:3/2}
  #kef-pickup-map .osm-tile-grid--kef-park{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #kef-pickup-map .osm-tile-grid--kef-park img{width:100%!important;min-width:0!important;height:100%!important}
  #kef-pickup-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #kef-pickup-map .osm-map-label{min-width:0;max-width:43%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.12;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #kef-pickup-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.06}
  #kef-pickup-map .kef-pickup-label-terminal{left:5%!important;top:62%!important}
  #kef-pickup-map .kef-pickup-label-office{left:37%!important;top:18%!important}
  #arrival-night-map .map-scroll{overflow:visible}
  #arrival-night-map .osm-brand-map--arrival{width:100%!important;height:auto!important;aspect-ratio:2/1}
  #arrival-night-map .osm-tile-grid--arrival{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #arrival-night-map .osm-tile-grid--arrival img{width:100%!important;min-width:0!important;height:100%!important}
  #arrival-night-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #arrival-night-map .osm-map-label{min-width:0;max-width:32%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #arrival-night-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.05}
  #arrival-night-map .arrival-label-kef{left:4%!important;top:64%!important}
  #arrival-night-map .arrival-label-blue{left:35%!important;top:72%!important}
  #arrival-night-map .arrival-label-reykjavik{left:64%!important;top:10%!important}
  #lagoon-location-map .route-map__scroll{overflow:visible}
  #lagoon-location-map .osm-brand-map--arrival{width:100%!important;height:auto!important;aspect-ratio:2/1}
  #lagoon-location-map .osm-tile-grid--arrival{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #lagoon-location-map .osm-tile-grid--arrival img{width:100%!important;min-width:0!important;height:100%!important}
  #lagoon-location-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #lagoon-location-map .osm-map-label{box-sizing:border-box;min-width:0;max-width:31%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;white-space:normal;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #lagoon-location-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.05}
  #lagoon-location-map .lagoon-label-kef{left:4%!important;top:64%!important}
  #lagoon-location-map .lagoon-label-blue{left:45%!important;top:72%!important}
  #lagoon-location-map .lagoon-label-reykjavik{left:64%!important;top:4%!important}
  #lagoon-location-map .lagoon-label-sky{left:54%!important;top:33%!important}
  #reykjanes-hub-map .map-scroll{overflow:visible}
  #reykjanes-hub-map .osm-brand-map--arrival{width:100%!important;height:auto!important;aspect-ratio:2/1}
  #reykjanes-hub-map .osm-tile-grid--arrival{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #reykjanes-hub-map .osm-tile-grid--arrival img{width:100%!important;min-width:0!important;height:100%!important}
  #reykjanes-hub-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #reykjanes-hub-map .osm-map-label{min-width:0;max-width:32%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #reykjanes-hub-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.05}
  #reykjanes-hub-map .reykjanes-label-town{left:3%!important;top:27%!important}
  #reykjanes-hub-map .reykjanes-label-kef{left:3%!important;top:64%!important}
  #reykjanes-hub-map .reykjanes-label-blue{left:29%!important;top:72%!important}
  #reykjanes-hub-map .reykjanes-label-reykjavik{left:64%!important;top:10%!important}
}

/* Rendered-map QA overrides: keep long labels separated on narrow screens and
   move the two desktop-only labels that were touching their neighbours. */
@media (min-width:641px){
  #golden-circle-map .osm-map-label--route:nth-of-type(12){top:450px!important}
  #glacier-stay-map .osm-map-label--hub{top:300px!important}
}

#snaefellsnes-stay-map span.osm-map-label--hub[style*="left:43%"]{left:47%!important}

@media (max-width:640px){
  #highlands-choice-map .highlands-label-hella{top:78%!important}
  #westfjords-choice-map .westfjords-label-isafjordur{left:64%!important;top:2%!important}
  #westfjords-choice-map .westfjords-label-brjanslaekur{left:60%!important;top:22%!important}
  #westfjords-choice-map .westfjords-label-stykkisholmur{left:35%!important;top:41%!important}
  #westfjords-choice-map .westfjords-label-patreksfjordur{left:2%!important;top:61%!important}
  #westfjords-choice-map .westfjords-label-reykjavik{left:52%!important;top:80%!important}
  #glacier-stay-map .osm-map-label--hub{top:300px!important}
  #senior-map span.senior-jok[style*="left:69%"]{left:74%!important;top:79%!important}
  #winter-seven-map span.winter-jok[style*="left:69%"]{left:74%!important;top:79%!important}
}

/* Map-key cards should use the available tablet width instead of leaving a
   lonely third card beside an empty cell.  The :has() guard keeps the two-key
   maps at their natural two-column layout. */
@media (min-width:641px) and (max-width:720px){
  .route-map-key:has(> span:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* This comes after the broad auto-fit rule above so every narrow map remains
   a readable single-column stack on phones. */
@media (max-width:640px){
  .route-map-key{grid-template-columns:1fr}
}

/* Keep the longest practical-guide mastheads from creating orphan words on
   desktop. The matching hero image is the page's stable identity, so this
   stays scoped without changing category hubs or translated shell pages. */
@media (min-width:981px){
  .entry-masthead>img[src*="hvolsvollur-gas-station-gje.jpg"]+.entry-masthead__overlay h1,
  .entry-masthead>img[src*="iceland-entry-stamp-2017.jpg"]+.entry-masthead__overlay h1,
  .entry-masthead>img[src*="iceland-safety-reynisfjara-warning.webp"]+.entry-masthead__overlay h1,
  .entry-masthead>img[src*="iceland-weather-road-moyan-brenn.webp"]+.entry-masthead__overlay h1,
  .entry-masthead>img[src*="reykjavik-laugavegur-skolavordustigur-apk.webp"]+.entry-masthead__overlay h1,
  .entry-masthead>img[src*="iceland-bonus-supermarket.jpg"]+.entry-masthead__overlay h1{font-size:42px;line-height:1.1}
  .entry-masthead>img[src*="hvolsvollur-gas-station-gje.jpg"]+.entry-masthead__overlay h1 br,
  .entry-masthead>img[src*="iceland-entry-stamp-2017.jpg"]+.entry-masthead__overlay h1 br,
  .entry-masthead>img[src*="iceland-safety-reynisfjara-warning.webp"]+.entry-masthead__overlay h1 br,
  .entry-masthead>img[src*="iceland-weather-road-moyan-brenn.webp"]+.entry-masthead__overlay h1 br,
  .entry-masthead>img[src*="reykjavik-laugavegur-skolavordustigur-apk.webp"]+.entry-masthead__overlay h1 br,
  .entry-masthead>img[src*="iceland-bonus-supermarket.jpg"]+.entry-masthead__overlay h1 br{display:none}
}

/* Long practical-guide titles should keep a readable editorial rhythm on
   desktop. Their mobile size remains controlled by brand-v3.css. */
@media (min-width:981px){
  .entry-planning-compact-h1 .entry-masthead h1,
  .entry-planning-compact-h1 .entry-hero-copy h1{font-size:46px;line-height:1.08}
}

/* planning-77: the west-Iceland map uses four real z8 columns; keep the
   labelled geography in one frame on desktop and a proportional 4:2 crop on
   narrow screens. */
#hraunfossar-map .osm-brand-map--west-waterfalls{width:1024px!important;height:512px!important}
#hraunfossar-map .osm-tile-grid--west-waterfalls{grid-template-columns:repeat(4,256px)!important;grid-template-rows:repeat(2,256px)!important}
@media(max-width:640px){
  #hraunfossar-map .osm-brand-map--west-waterfalls{width:100%!important;height:auto!important;aspect-ratio:2/1}
  #hraunfossar-map .osm-tile-grid--west-waterfalls{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #hraunfossar-map .osm-tile-grid--west-waterfalls img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
}

/* Vestrahorn / Stokksnes is a real south-east Iceland base decision. Keep
   the four z7 tile columns together so the beach, Höfn and the westward
   activity area can be read as one geography rather than a decorative line. */
#vestrahorn-map .route-map__scroll{overflow:visible}
#vestrahorn-map .osm-brand-map--vestrahorn{width:100%;height:auto;aspect-ratio:4/3}
#vestrahorn-map .osm-tile-grid--vestrahorn{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
#vestrahorn-map .osm-tile-grid--vestrahorn img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}

/* Repair maps whose static markup contains fewer tiles than the legacy 4×2
   canvas.  app.js marks the real tile count (for example 6 → 3×2), removing
   the blank half-map seen on article pages while retaining the same labels. */
.osm-brand-map[data-tile-grid="3x2"]{width:768px;height:512px}
.osm-brand-map[data-tile-grid="2x2"]{width:512px;height:512px}
.osm-brand-map[data-tile-grid="2x1"]{width:512px;height:256px}
.osm-brand-map[data-tile-grid="4x3"]{width:1024px;height:768px}
/* Static fallback canvases for legacy exports with non-standard tile counts.
   The runtime measures these too, but CSS must never clip the lower/right
   tiles while JavaScript or a cached script is still loading. */
.osm-brand-map:has(.osm-tile-grid > img:nth-child(20)):not(:has(.osm-tile-grid > img:nth-child(21))){width:1280px;height:1024px}
.osm-brand-map:has(.osm-tile-grid > img:nth-child(20)):not(:has(.osm-tile-grid > img:nth-child(21))) .osm-tile-grid{grid-template-columns:repeat(5,256px);grid-template-rows:repeat(4,256px)}
.osm-brand-map:has(.osm-tile-grid > img:nth-child(19)):not(:has(.osm-tile-grid > img:nth-child(20))){width:1280px;height:1024px}
.osm-brand-map:has(.osm-tile-grid > img:nth-child(19)):not(:has(.osm-tile-grid > img:nth-child(20))) .osm-tile-grid{grid-template-columns:repeat(5,256px);grid-template-rows:repeat(4,256px)}
.osm-brand-map:has(.osm-tile-grid > img:nth-child(15)):not(:has(.osm-tile-grid > img:nth-child(16))){width:1280px;height:768px}
.osm-brand-map:has(.osm-tile-grid > img:nth-child(15)):not(:has(.osm-tile-grid > img:nth-child(16))) .osm-tile-grid{grid-template-columns:repeat(5,256px);grid-template-rows:repeat(3,256px)}
.osm-brand-map:has(.osm-tile-grid > img:nth-child(10)):not(:has(.osm-tile-grid > img:nth-child(11))){width:1280px;height:512px}
.osm-brand-map:has(.osm-tile-grid > img:nth-child(10)):not(:has(.osm-tile-grid > img:nth-child(11))) .osm-tile-grid{grid-template-columns:repeat(5,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map:has(.osm-tile-grid > img:nth-child(3)):not(:has(.osm-tile-grid > img:nth-child(4))){width:768px;height:256px}
.osm-brand-map:has(.osm-tile-grid > img:nth-child(3)):not(:has(.osm-tile-grid > img:nth-child(4))) .osm-tile-grid{grid-template-columns:repeat(3,256px);grid-template-rows:repeat(1,256px)}
.osm-brand-map[data-tile-grid="4x1"]{width:1024px;height:256px}
.osm-brand-map[data-tile-grid="1x1"]{width:256px;height:256px}
.osm-brand-map[data-tile-grid] .osm-tile-grid{grid-template-columns:repeat(var(--map-cols,3),256px);grid-template-rows:repeat(var(--map-rows,2),256px)}
.osm-brand-map[data-tile-grid="3x2"] .osm-tile-grid{--map-cols:3;--map-rows:2}
.osm-brand-map[data-tile-grid="2x2"] .osm-tile-grid{--map-cols:2;--map-rows:2}
.osm-brand-map[data-tile-grid="2x1"] .osm-tile-grid{--map-cols:2;--map-rows:1}
.osm-brand-map[data-tile-grid="4x3"] .osm-tile-grid{--map-cols:4;--map-rows:3}
.osm-brand-map[data-tile-grid="4x1"] .osm-tile-grid{--map-cols:4;--map-rows:1}
.osm-brand-map[data-tile-grid="1x1"] .osm-tile-grid{--map-cols:1;--map-rows:1}
@media(max-width:640px){
  .osm-brand-map[data-tile-grid]{width:100%!important;height:auto!important;aspect-ratio:var(--map-aspect,3/2)}
  .osm-brand-map[data-tile-grid="3x2"]{--map-aspect:3/2}.osm-brand-map[data-tile-grid="2x2"]{--map-aspect:1/1}.osm-brand-map[data-tile-grid="2x1"]{--map-aspect:2/1}.osm-brand-map[data-tile-grid="4x3"]{--map-aspect:4/3}.osm-brand-map[data-tile-grid="4x1"]{--map-aspect:4/1}.osm-brand-map[data-tile-grid="1x1"]{--map-aspect:1/1}
  .osm-brand-map[data-tile-grid] .osm-tile-grid{grid-template-columns:repeat(var(--map-cols),minmax(0,1fr));grid-template-rows:repeat(var(--map-rows),minmax(0,1fr))}
  .osm-brand-map[data-tile-grid] .osm-tile-grid img{width:100%!important;min-width:0!important;height:100%!important;min-height:0!important}
}
#vestrahorn-map .vestra-pin-hofn{left:89.82%;top:64.35%}
#vestrahorn-map .vestra-label-hofn{left:67%;top:34%}
#vestrahorn-map .vestra-pin-stokksnes{left:91.92%;top:64.63%}
#vestrahorn-map .vestra-label-stokksnes{left:67%;top:52%}
#vestrahorn-map .vestra-pin-jokulsarlon{left:81.19%;top:69.93%}
#vestrahorn-map .vestra-label-jokulsarlon{left:61%;top:70%}
#vestrahorn-map .vestra-pin-skaftafell{left:74.18%;top:70.82%}
#vestrahorn-map .vestra-label-skaftafell{left:43%;top:71%}
@media(max-width:640px){
  #vestrahorn-map .osm-map-pin{width:11px;height:11px;border-width:3px}
  #vestrahorn-map .osm-map-label{min-width:0;max-width:31%;padding:4px 5px;border-left-width:2px;font-size:9px;line-height:1.1;box-shadow:0 2px 7px rgba(7,25,32,.24)}
  #vestrahorn-map .osm-map-label small{margin-top:1px;font-size:8px;line-height:1.05}
  #vestrahorn-map .vestra-label-hofn{left:58%!important;top:35%!important}
  #vestrahorn-map .vestra-label-stokksnes{left:64%!important;top:49%!important}
  #vestrahorn-map .vestra-label-jokulsarlon{left:61%!important;top:73%!important}
  #vestrahorn-map .vestra-label-skaftafell{left:31%!important;top:77%!important}
  #vestrahorn-map.route-map--pan .route-map__scroll::before{content:"四個位置，同屏比較"}
  #vestrahorn-map.route-map--pan figcaption::before{display:none}
}

/* Final override: static maps with four or six tiles must size to their real
   canvas, otherwise the legacy 4×2 grid leaves an empty half. */
.osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(7))):has(.osm-tile-grid > img:nth-child(6)){width:768px;height:512px}
.osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(5))):has(.osm-tile-grid > img:nth-child(4)){width:512px;height:512px}
.osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(7))):has(.osm-tile-grid > img:nth-child(6)) .osm-tile-grid{grid-template-columns:repeat(3,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(5))):has(.osm-tile-grid > img:nth-child(4)) .osm-tile-grid{grid-template-columns:repeat(2,256px);grid-template-rows:repeat(2,256px)}
.osm-brand-map[data-tile-grid="3x1"]{width:768px;height:256px}.osm-brand-map[data-tile-grid="3x1"] .osm-tile-grid{--map-cols:3;--map-rows:1;grid-template-columns:repeat(3,256px);grid-template-rows:256px}
@media(max-width:640px){
  .osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(7))):has(.osm-tile-grid > img:nth-child(6)){width:100%!important;height:auto!important;aspect-ratio:3/2}
  .osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(5))):has(.osm-tile-grid > img:nth-child(4)){width:100%!important;height:auto!important;aspect-ratio:1/1}
  .osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(7))):has(.osm-tile-grid > img:nth-child(6)) .osm-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  .osm-brand-map:not(:has(.osm-tile-grid > img:nth-child(5))):has(.osm-tile-grid > img:nth-child(4)) .osm-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  .osm-brand-map[data-tile-grid="3x1"]{width:100%!important;height:auto!important;aspect-ratio:3/1}.osm-brand-map[data-tile-grid="3x1"] .osm-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}
}

/* Unified navigation v4: supersede the legacy text-only ICE masthead shim. */
.site-header .nav{min-height:72px!important}
.site-header .nav .brand{gap:11px!important;color:#f7f5ef!important;font-family:"Manrope","Noto Sans TC",sans-serif!important;font-size:18px!important;font-weight:800!important;letter-spacing:-.035em!important}
.site-header .nav .brand-mark,.site-header__inner .brand-mark{display:block!important;width:42px!important;height:42px!important;flex:0 0 42px!important;border:0!important;background:url('/assets/brand/icenavi-mark-v3.svg') center/contain no-repeat!important;font-size:0!important;line-height:0!important;overflow:hidden}
.site-header .nav .brand-mark img,.site-header__inner .brand-mark img{display:block!important;width:42px!important;height:42px!important;object-fit:contain!important}
.site-header .nav .brand-mark::before,.site-header__inner .brand-mark::before{content:none!important;display:none!important}
.site-header .nav .brand-word,.site-header__inner .brand-word{line-height:1!important;text-transform:none!important}
.site-header .nav .brand-word::after,.site-header__inner .brand-word::after{content:"ICELAND ROUTE GUIDE"!important;display:block!important;margin-top:5px!important;color:rgba(244,242,236,.42)!important;font-size:6.5px!important;font-weight:800!important;letter-spacing:.18em!important;white-space:nowrap!important}
.site-header .nav-links{gap:24px!important}.site-header .nav-links a,.site-header .nav-links .nav-current,.site-header .nav-links button{min-height:72px!important;font-size:12px!important}
@media(max-width:900px){.site-header .nav{min-height:0!important}.site-header .nav .brand{font-size:16px!important}.site-header .nav .brand-mark{width:38px!important;height:38px!important;flex-basis:38px!important}.site-header .nav .brand-mark img{width:38px!important;height:38px!important}.site-header .nav-links a,.site-header .nav-links .nav-current,.site-header .nav-links button{min-height:48px!important}}

/* Some long-form exports place .article-layout directly under <main> rather
   than inside .article-shell. Keep the shared article + hotel finder grid
   centred in both structures. */
.article-layout:has(> .article-hotel-selector){margin-left:auto!important;margin-right:auto!important}

/* Legacy experience articles already contain the score data but used an
   unstyled decision-score-card structure. Render it as one consistent score
   panel; app.js supplies each bar percentage from the visible x/10 value. */
.decision-score-card{margin:34px 0 42px;padding:26px 28px;border:1px solid rgba(18,47,59,.18);border-top:4px solid #b49369;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(227,237,235,.68));box-shadow:0 14px 34px rgba(11,43,53,.08)}
.decision-score-card__header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-bottom:17px;border-bottom:1px solid rgba(18,47,59,.14)}
.decision-score-card__header span{color:#8a6b50;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:10px;font-weight:900;letter-spacing:.14em}
.decision-score-card__header strong{color:#12313d;font-family:"Noto Serif TC",serif;font-size:clamp(20px,2.4vw,27px);line-height:1.25;text-align:right}
.decision-score-card__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:17px}
.decision-score-card__grid>div{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:15px 16px 17px;border:1px solid rgba(18,47,59,.13);background:rgba(255,255,255,.72)}
.decision-score-card__grid span{color:#31484f;font-size:14px;font-weight:800;line-height:1.35}
.decision-score-card__grid b{color:#8a6b50;font-family:"Manrope","Noto Sans TC",sans-serif;font-size:13px;font-weight:900;white-space:nowrap}
.decision-score-card__bar{grid-column:1/-1;display:block;height:9px;margin-top:4px;border-radius:999px;background:linear-gradient(90deg,#176477 0 var(--decision-score,0%),rgba(18,47,59,.12) var(--decision-score,0%) 100%);overflow:hidden}
.decision-score-card>p:last-child{margin:16px 0 0;color:#68777a;font-size:12px;line-height:1.65}
.article-context-photo img{width:100%;max-height:460px;aspect-ratio:16/9;object-fit:cover;object-position:center}
@media(max-width:640px){.decision-score-card{margin:28px 0 34px;padding:21px 18px}.decision-score-card__header{display:block}.decision-score-card__header strong{display:block;margin-top:7px;text-align:left}.decision-score-card__grid{grid-template-columns:1fr}.decision-score-card__grid>div{padding:14px 14px 16px}}
@media(max-width:640px){.article-context-photo img{max-height:320px;aspect-ratio:4/3}}