.hb-travel-guide { --hb-ink:#111111; --hb-copy:#343434; --hb-muted:#707070; --hb-line:#d8d8d8; --hb-soft:#f5f5f5; --hb-white:#ffffff; width:100%; max-width:1180px; margin:0 auto; color:var(--hb-copy); background:var(--hb-white); font-family:Arial,Helvetica,sans-serif; font-size:17px; line-height:1.72; } .hb-travel-guide, .hb-travel-guide * { box-sizing:border-box; } .hb-travel-guide h2, .hb-travel-guide h3, .hb-travel-guide p, .hb-travel-guide ul, .hb-travel-guide ol, .hb-travel-guide figure { margin-top:0; } .hb-travel-guide h2 { max-width:960px; margin:78px 0 24px; padding-top:20px; border-top:2px solid var(--hb-ink); color:var(--hb-ink); font-size:clamp(28px,3vw,38px); font-weight:800; line-height:1.16; letter-spacing:-.028em; scroll-margin-top:28px; } .hb-travel-guide h3 { margin:34px 0 12px; color:var(--hb-ink); font-size:21px; line-height:1.3; } .hb-travel-guide p { max-width:910px; margin-bottom:18px; } .hb-travel-guide ul, .hb-travel-guide ol { max-width:900px; margin-bottom:25px; padding-left:24px; } .hb-travel-guide li { margin-bottom:9px; } .hb-travel-guide a { color:var(--hb-ink); font-weight:700; text-decoration-color:#888888; text-decoration-thickness:1px; text-underline-offset:4px; } .hb-travel-guide a:hover, .hb-travel-guide a:focus-visible { text-decoration-color:var(--hb-ink); } .hb-travel-guide .hb-kicker { display:inline-block; margin-bottom:17px; color:var(--hb-muted); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .hb-travel-guide .hb-lede { max-width:960px; margin-bottom:27px; color:#252525; font-size:20px; line-height:1.64; } /* Reference-image-2 contents style */ .hb-travel-guide .hb-toc { margin:34px 0 54px; padding:26px 28px; border:1px solid var(--hb-line); background:var(--hb-soft); } .hb-travel-guide .hb-toc-title { margin-bottom:17px; color:var(--hb-ink); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .hb-travel-guide .hb-toc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .hb-travel-guide .hb-toc a { display:flex; align-items:center; justify-content:center; gap:8px; min-height:43px; padding:9px 13px; border:1px solid #bdbdbd; border-radius:0; background:var(--hb-white); color:var(--hb-ink); font-size:13px; line-height:1.25; text-align:center; text-decoration:none; } .hb-travel-guide .hb-toc a span { color:var(--hb-muted); font-size:11px; font-weight:800; } .hb-travel-guide .hb-toc a:hover, .hb-travel-guide .hb-toc a:focus-visible { border-color:var(--hb-ink); background:#fafafa; } .hb-travel-guide .hb-trip-map { display:grid; grid-template-columns:minmax(185px,.72fr) minmax(0,2.28fr); max-width:1030px; margin:34px 0 45px; border:1px solid var(--hb-ink); } .hb-travel-guide .hb-trip-map-label { display:grid; place-content:center; min-height:245px; padding:28px; background:var(--hb-ink); color:var(--hb-white); text-align:center; } .hb-travel-guide .hb-trip-map-label strong { font-size:26px; line-height:1.12; } .hb-travel-guide .hb-trip-map-label small { margin-top:10px; color:#d1d1d1; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .hb-travel-guide .hb-trip-map-list { display:grid; } .hb-travel-guide .hb-trip-map-row { display:grid; grid-template-columns:130px minmax(0,1fr); gap:18px; align-items:center; padding:17px 22px; border-bottom:1px solid var(--hb-line); } .hb-travel-guide .hb-trip-map-row:last-child { border-bottom:0; } .hb-travel-guide .hb-trip-map-row strong { color:var(--hb-ink); font-size:13px; letter-spacing:.04em; text-transform:uppercase; } .hb-travel-guide .hb-trip-map-row span { color:var(--hb-muted); font-size:14px; line-height:1.52; } .hb-travel-guide .hb-note { max-width:910px; margin:29px 0; padding:22px 24px; border-left:5px solid var(--hb-ink); background:var(--hb-soft); } .hb-travel-guide .hb-note strong { color:var(--hb-ink); } .hb-travel-guide .hb-trip-sequence { max-width:1030px; margin:35px 0 46px; border-top:1px solid var(--hb-ink); border-bottom:1px solid var(--hb-ink); } .hb-travel-guide .hb-trip-day { display:grid; grid-template-columns:155px minmax(210px,.72fr) minmax(0,1.28fr); gap:20px; align-items:start; padding:23px 0; border-bottom:1px solid var(--hb-line); } .hb-travel-guide .hb-trip-day:last-child { border-bottom:0; } .hb-travel-guide .hb-trip-day b { color:var(--hb-muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .hb-travel-guide .hb-trip-day strong { color:var(--hb-ink); font-size:16px; line-height:1.4; } .hb-travel-guide .hb-trip-day span { color:var(--hb-muted); font-size:14px; line-height:1.58; } .hb-travel-guide .hb-editorial { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(250px,.58fr); gap:46px; max-width:1030px; margin:34px 0 44px; align-items:start; } .hb-travel-guide .hb-editorial-aside { padding:8px 0 8px 27px; border-left:1px solid var(--hb-ink); } .hb-travel-guide .hb-editorial-aside small { display:block; margin-bottom:12px; color:var(--hb-muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .hb-travel-guide .hb-editorial-aside strong { display:block; margin-bottom:11px; color:var(--hb-ink); font-size:22px; line-height:1.27; } .hb-travel-guide .hb-editorial-aside p { margin-bottom:0; color:var(--hb-muted); font-size:14px; line-height:1.6; } .hb-travel-guide .hb-transit-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1030px; margin:33px 0 43px; border-top:1px solid var(--hb-ink); border-bottom:1px solid var(--hb-ink); } .hb-travel-guide .hb-transit-step { min-height:174px; padding:23px; border-right:1px solid var(--hb-line); } .hb-travel-guide .hb-transit-step:last-child { border-right:0; } .hb-travel-guide .hb-transit-step b { display:block; margin-bottom:19px; color:var(--hb-muted); font-size:11px; letter-spacing:.09em; } .hb-travel-guide .hb-transit-step strong { display:block; margin-bottom:8px; color:var(--hb-ink); font-size:17px; line-height:1.3; } .hb-travel-guide .hb-transit-step span { color:var(--hb-muted); font-size:14px; line-height:1.55; } /* Product image + copy block */ .hb-travel-guide .hb-product-feature { display:grid; grid-template-columns:minmax(340px,.95fr) minmax(0,1.05fr); max-width:1060px; margin:42px 0 54px; border:1px solid var(--hb-line); background:var(--hb-white); } .hb-travel-guide .hb-product-feature.hb-reverse { grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); } .hb-travel-guide .hb-product-media { position:relative; display:block; min-height:510px; overflow:hidden; background:#eeeeec; text-decoration:none; } .hb-travel-guide .hb-product-media img { position:absolute; inset:24px; width:calc(100% - 48px); height:calc(100% - 48px); object-fit:contain; transition:opacity .35s ease,transform .45s ease; } .hb-travel-guide .hb-product-media img:last-child { opacity:0; } .hb-travel-guide .hb-product-media:hover img:first-child, .hb-travel-guide .hb-product-media:focus-visible img:first-child { opacity:0; } .hb-travel-guide .hb-product-media:hover img:last-child, .hb-travel-guide .hb-product-media:focus-visible img:last-child { opacity:1; transform:translateY(-4px) scale(1.012); } .hb-travel-guide .hb-product-copy { display:flex; flex-direction:column; justify-content:center; padding:38px; } .hb-travel-guide .hb-product-copy small { margin-bottom:12px; color:var(--hb-muted); font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .hb-travel-guide .hb-product-copy h3 { margin:0 0 14px; font-size:25px; line-height:1.22; } .hb-travel-guide .hb-product-copy p { color:var(--hb-muted); font-size:15px; line-height:1.63; } .hb-travel-guide .hb-product-button, .hb-travel-guide .hb-cta-button { display:inline-flex; align-items:center; justify-content:center; width:fit-content; min-height:43px; margin-top:7px; padding:10px 18px; border:1px solid var(--hb-ink); background:var(--hb-ink); color:var(--hb-white); font-size:13px; font-weight:800; line-height:1.2; text-decoration:none; } .hb-travel-guide .hb-product-button:hover, .hb-travel-guide .hb-product-button:focus-visible, .hb-travel-guide .hb-cta-button:hover, .hb-travel-guide .hb-cta-button:focus-visible { background:var(--hb-white); color:var(--hb-ink); text-decoration:none; } .hb-travel-guide .hb-outfit-lines { max-width:950px; margin:32px 0 44px; border-top:1px solid var(--hb-ink); border-bottom:1px solid var(--hb-ink); } .hb-travel-guide .hb-outfit-line { display:grid; grid-template-columns:76px minmax(220px,.68fr) minmax(0,1.32fr); gap:20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--hb-line); } .hb-travel-guide .hb-outfit-line:last-child { border-bottom:0; } .hb-travel-guide .hb-outfit-line b { color:var(--hb-muted); font-size:11px; letter-spacing:.08em; } .hb-travel-guide .hb-outfit-line strong { color:var(--hb-ink); } .hb-travel-guide .hb-outfit-line span { color:var(--hb-muted); font-size:14px; line-height:1.5; } .hb-travel-guide .hb-final-cut { max-width:950px; margin:34px 0 45px; padding:29px; border:2px solid var(--hb-ink); } .hb-travel-guide .hb-final-cut h3 { margin-top:0; } .hb-travel-guide .hb-final-cut ol { margin-bottom:0; } .hb-travel-guide .hb-cta { max-width:1040px; margin:76px 0 28px; padding:39px; border:2px solid var(--hb-ink); background:var(--hb-soft); } .hb-travel-guide .hb-cta h2 { margin:0 0 16px; padding:0; border:0; } .hb-travel-guide .hb-faq { max-width:980px; margin:30px 0 48px; border-top:1px solid var(--hb-ink); } .hb-travel-guide .hb-faq details { border-bottom:1px solid var(--hb-line); } .hb-travel-guide .hb-faq summary { position:relative; padding:21px 48px 21px 0; color:var(--hb-ink); font-weight:800; line-height:1.45; cursor:pointer; list-style:none; } .hb-travel-guide .hb-faq summary::-webkit-details-marker { display:none; } .hb-travel-guide .hb-faq summary::after { content:"+"; position:absolute; top:16px; right:2px; font-size:26px; font-weight:400; } .hb-travel-guide .hb-faq details[open] summary::after { content:"−"; } .hb-travel-guide .hb-faq details p { padding:0 48px 20px 0; color:var(--hb-muted); } @media (max-width:860px) { .hb-travel-guide { font-size:16px; } .hb-travel-guide .hb-toc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .hb-travel-guide .hb-trip-map, .hb-travel-guide .hb-editorial, .hb-travel-guide .hb-product-feature, .hb-travel-guide .hb-product-feature.hb-reverse { grid-template-columns:1fr; } .hb-travel-guide .hb-product-feature.hb-reverse .hb-product-media { order:-1; } .hb-travel-guide .hb-editorial-aside { padding:24px 0 0; border-top:1px solid var(--hb-ink); border-left:0; } .hb-travel-guide .hb-transit-flow { grid-template-columns:repeat(2,minmax(0,1fr)); } .hb-travel-guide .hb-transit-step:nth-child(2) { border-right:0; } .hb-travel-guide .hb-transit-step:nth-child(-n+2) { border-bottom:1px solid var(--hb-line); } } @media (max-width:580px) { .hb-travel-guide h2 { margin-top:58px; font-size:28px; } .hb-travel-guide .hb-lede { font-size:18px; } .hb-travel-guide .hb-toc-grid, .hb-travel-guide .hb-transit-flow { grid-template-columns:1fr; } .hb-travel-guide .hb-toc, .hb-travel-guide .hb-final-cut, .hb-travel-guide .hb-cta { padding:22px; } .hb-travel-guide .hb-trip-map-label { min-height:145px; } .hb-travel-guide .hb-trip-map-row, .hb-travel-guide .hb-trip-day { grid-template-columns:1fr; gap:5px; } .hb-travel-guide .hb-product-media { min-height:355px; } .hb-travel-guide .hb-product-media img { inset:18px; width:calc(100% - 36px); height:calc(100% - 36px); } .hb-travel-guide .hb-product-copy { padding:24px; } .hb-travel-guide .hb-transit-step { min-height:auto; border-right:0; border-bottom:1px solid var(--hb-line); } .hb-travel-guide .hb-transit-step:last-child { border-bottom:0; } .hb-travel-guide .hb-outfit-line { grid-template-columns:48px minmax(0,1fr); } .hb-travel-guide .hb-outfit-line span { grid-column:2; } }