/* ============================================================
Snappytappy — shared MOBILE refinements (≤820px)
Global conventions distilled from the homepage mobile pass. Link this
file (after the page's own styles), load IBM Plex Mono, and add the
--stvh script. DESKTOP IS UNTOUCHED — every rule is inside a media query.
NOTE: selectors are prefixed with [data-screen-label] (the app root that
exists on every page) purely to out-specify the export's duplicated inline
mobile CSS, so these authoritative rules win regardless of source order.
Per-page HTML hooks expected on the standard menu:
• data-m="menuoverlay" on the overlay div
• a data-m="menubottom" social strip after data-m="menuright"
• joinshort/joinfull spans + a joinarrow on the green Join button
============================================================ */
/* Menu Join button: the short label is mobile-only — hidden by default so DESKTOP
keeps just the full "Join for £10 / month". */
[data-m="joinshort"] { display:none; }
/* ------------------------------------------------------------------
Burger-menu "Join Base Camp" CTA — ONE global button for every page.
Every menu (the pages' baked-in copies AND the shared st-chrome.js one)
wraps this CTA in [data-m="menuright"], so this single rule is the single
source of truth: black pill-free 14px button, inverts to white on hover
(and back), leading tent icon hidden so all pages match. Overrides each
export's inline styles via !important, all breakpoints.
------------------------------------------------------------------ */
[data-m="menuright"] a[href="Base Camp.dc.html"] {
display:inline-flex !important; align-items:center !important; gap:9px !important;
background:#0c0c0d !important; color:#fff !important; border-radius:14px !important;
transition:background .25s ease, color .25s ease !important;
}
[data-m="menuright"] a[href="Base Camp.dc.html"]:hover { background:#fff !important; color:#0c0c0d !important; }
[data-m="menuright"] a[href="Base Camp.dc.html"]:hover::before { background:#0c0c0d; }
/* Hide each export's own leading icon (present on some pages, absent on others) ... */
[data-m="menuright"] a[href="Base Camp.dc.html"] > svg:first-child { display:none !important; }
/* ---- Founding Circle offer (dormant until st-chrome.js adds .st-fnd-cta, i.e. window/BC FOUNDING=true).
Overrides the black single-source CTA above: orange button + its rocket icon shown, inverts to white/orange
on hover. Flip FOUNDING off in st-chrome.js and this markup disappears, reverting to the black CTA. ---- */
[data-m="menuright"] a[href="Base Camp.dc.html"].st-fnd-cta { background:#ff4f18 !important; color:#fff !important; }
[data-m="menuright"] a[href="Base Camp.dc.html"].st-fnd-cta:hover { background:#fff !important; color:#ff4f18 !important; }
[data-m="menuright"] a[href="Base Camp.dc.html"].st-fnd-cta > svg:first-child { display:inline-flex !important; }
[data-m="menuright"] a[href="Base Camp.dc.html"].st-fnd-cta:hover svg path,
[data-m="menuright"] a[href="Base Camp.dc.html"].st-fnd-cta:hover svg circle { stroke:#ff4f18 !important; }
/* Founding CTA uses its own rocket icon, so suppress the standard ::before tent */
[data-m="menuright"] a[href="Base Camp.dc.html"].st-fnd-cta::before { display:none !important; }
/* ============================================================
ON-PAGE BASE CAMP BANDS — founding vs standard, one flag.
st-chrome.js stamps html.bc-founding when the offer is live. Each band carries
a [data-bc-standard] block (the normal £10/£100) and a [data-bc-founding] block
(£5/£50). Default = standard shown; when the flag is on, founding shows instead.
Flip FOUNDING off in st-chrome.js → standard everywhere. All breakpoints.
============================================================ */
[data-bc-founding] { display:none !important; }
html.bc-founding [data-bc-founding] { display:block !important; }
html.bc-founding [data-bc-standard] { display:none !important; }
/* Founding band CTA: orange, inverts to white/orange on hover (rocket + arrow follow) */
.bc-fnd-cta { transition:background .25s ease, color .25s ease !important; }
.bc-fnd-cta:hover { background:#fff !important; color:#ff4f18 !important; }
.bc-fnd-cta:hover svg path, .bc-fnd-cta:hover svg circle { stroke:#ff4f18 !important; }
/* ... and draw ONE consistent tent icon before the label via a mask, so it inherits
the button's text colour and inverts on hover (white on black → black on white). */
[data-m="menuright"] a[href="Base Camp.dc.html"]::before {
content:''; flex:none; width:18px; height:18px; background:#a3e635;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* Footer bar (data-m="ftrow" — logo + socials on the left, terms on the right):
ONE consistent layout on every page. Left-aligned space-between row on desktop;
the per-page mobile rules stack + centre it. Change here → every footer bar. */
[data-m="ftrow"] { align-items:flex-start !important; justify-content:space-between !important; text-align:left !important; }
/* "Load more" buttons — ONE consistent style everywhere (individual gallery pages,
gallery index, Journal, Insights): 14px rounded, white with a hairline border,
inverting to solid black with white text on hover. Change here → every one. */
[data-loadmore], .gmore button, [data-loadmore-wrap] button, [data-m="galmorewrap"] button {
border-radius:14px !important; background:#fff !important; color:var(--ink) !important;
border:1px solid rgba(12,12,13,.2) !important;
transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}
/* Hover-invert ONLY on devices with a real pointer. On touch there's no true hover, so a
tap would latch the :hover state and leave the button stuck black until you tap elsewhere. */
@media (hover: hover) {
[data-loadmore]:hover, .gmore button:hover, [data-loadmore-wrap] button:hover, [data-m="galmorewrap"] button:hover {
background:#0c0c0d !important; color:#fff !important; border-color:#0c0c0d !important;
}
}
/* Injected carousel swipe hint is a mobile-only affordance (hidden on desktop). */
.st-swipehint { display:none; }
/* -------- Hero back-link — ONE shared control across journals AND galleries. --------
The individual-gallery pages inject a ".back" pill (st-gallery.css): outlined,
IBM Plex Mono, uppercase, letter-spaced. The journal hero back-link ([data-herolink],
"The Journal") shipped as a plain sans text link, so it looked unrelated. This rule
gives the journal link the SAME pill so the two read as siblings. All breakpoints;
the mobile block further down only repositions it. Values mirror st-gallery.css .back.
Change here → every journal's back-link. -------- */
[data-herolink] {
/* Explicit IBM Plex Mono (NOT var(--mono) — on journal pages that resolves to system
mono on desktop) so it matches the gallery .back exactly. The font is loaded on the
journal pages' . align-self/width stop the pill stretching full-width: the hero
content wrapper is a flex column, which otherwise stretches this link edge-to-edge. */
font-family:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
font-size:11px !important; font-weight:400 !important;
letter-spacing:.18em !important; text-transform:uppercase !important;
color:rgba(255,255,255,.86) !important;
border:1px solid rgba(255,255,255,.32) !important; padding:8px 14px !important;
border-radius:40px !important; gap:8px !important;
align-self:flex-start !important; width:fit-content !important; max-width:max-content !important;
transition:background .2s ease, color .2s ease !important;
}
@media (hover:hover) {
[data-herolink]:hover { background:#fff !important; color:var(--ink) !important; }
}
/* -------- Insights article back-link ("All insights") — the SAME pill as the journal /
gallery back-link, but the insights article view renders on WHITE, so this is the
light-theme sibling: dark outline + dark mono text, inverting to solid dark on hover
(the hero version is white-on-image). IBM Plex Mono is loaded on Insights.dc.html.
Shape + type mirror [data-herolink] / st-gallery.css .back. All breakpoints. -------- */
[data-back] {
font-family:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
font-size:11px !important; font-weight:500 !important;
letter-spacing:.18em !important; text-transform:uppercase !important;
color:var(--ink) !important; background:none !important; text-decoration:none !important;
border:1px solid rgba(12,12,13,.28) !important; padding:8px 14px !important;
border-radius:40px !important; gap:8px !important;
display:inline-flex !important; align-items:center !important;
width:fit-content !important; max-width:max-content !important; cursor:pointer !important;
transition:background .2s ease, color .2s ease, border-color .2s ease !important;
}
[data-back] svg { width:14px !important; height:14px !important; }
@media (hover:hover) {
[data-back]:hover { background:var(--ink) !important; color:#fff !important; border-color:var(--ink) !important; }
}
@media (max-width: 820px) {
/* Eyebrow / mono labels: a real web font so they're identical on every device. */
:root { --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace !important; }
/* Buttons: one 14px corner radius across the site (matches the gallery cards). */
[data-screen-label] [data-joincta],
[data-screen-label] [data-hoverinvert],
[data-screen-label] [data-hero-btn],
[data-screen-label] [data-allgal],
[data-screen-label] [data-m="nlrow"] a,
[data-screen-label] [data-m="nlrow"] input,
[data-screen-label] [data-m="mapgallerycta"],
[data-screen-label] [data-gallerycta],
[data-screen-label] [data-m="jmorecta"] { border-radius:14px !important; }
/* -------- Index-page hero headline: ONE size site-wide. Tag any index/landing hero
block with data-m="… idxhero" and its
is locked to 38px everywhere, so it can
never drift per-page again (Gallery, Journal, Insights, Planning all use this). -------- */
[data-screen-label] [data-m~="idxhero"] h1 { font-size:38px !important; line-height:1.02 !important; }
/* -------- Header (size + layout only; COLOUR is left to the page's own hdrInk
binding so the logo/burger are dark on light pages and white on dark ones) -------- */
[data-screen-label] [data-m="hdr"] { z-index:300 !important; padding:calc(24px + env(safe-area-inset-top)) 22px 16px !important; align-items:center !important; }
[data-screen-label] [data-m="hdrleft"] { gap:11px !important; }
[data-screen-label] [data-m="hdrleft"] [data-logo] span { font-size:26px !important; }
[data-screen-label] [data-m="hdrleft"] [data-logo-icon] { width:34px !important; height:28px !important; position:relative !important; top:-1px !important; }
[data-screen-label] [data-m="hdrleft"] [data-social],
[data-screen-label] [data-m="hdrleft"] > span:first-of-type { display:none !important; }
[data-screen-label] [data-burger] { width:32px !important; height:23px !important; gap:6px !important; margin-left:0 !important; }
[data-screen-label] [data-burger] span { width:32px !important; height:2.5px !important; }
[data-screen-label] [data-burger] span[style*="absolute"] { width:30px !important; margin-left:-15px !important; }
[data-screen-label] [data-m="hdrright"] { align-items:center !important; gap:13px !important; }
[data-screen-label] [data-m="hdrright"] [data-joincta],
[data-screen-label] [data-m="hdrright"] a[aria-label="Member login"] { display:none !important; }
/* When the burger MENU is open, force the header logo + burger white over the dark
overlay (the page's own chromeFade would otherwise hide/darken them). */
[data-screen-label]:has([data-m="menuoverlay"][style*="visible"]) [data-m="hdrleft"] { opacity:1 !important; visibility:visible !important; }
[data-screen-label]:has([data-m="menuoverlay"][style*="visible"]) [data-m="hdrleft"] [data-logo],
[data-screen-label]:has([data-m="menuoverlay"][style*="visible"]) [data-m="hdrleft"] [data-logo] span { color:#fff !important; }
[data-screen-label]:has([data-m="menuoverlay"][style*="visible"]) [data-m="hdrleft"] [data-logo-icon] { fill:#fff !important; }
[data-screen-label]:has([data-m="menuoverlay"][style*="visible"]) [data-burger] span { background:#fff !important; }
/* -------- Expanded burger menu (fills any phone; band + socials pinned to the VISIBLE bottom) -------- */
[data-screen-label] [data-m="menuoverlay"] { background:#0c0c0d !important; flex-direction:column !important; height:var(--stvh, 100dvh) !important; max-height:var(--stvh, 100dvh) !important; bottom:auto !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; }
[data-screen-label] [data-m="menuleft"] { flex:1 1 auto !important; justify-content:space-between !important; padding:104px 22px 28px !important; }
[data-screen-label] [data-menulinks-wrap] { flex:1 1 auto !important; justify-content:flex-start !important; }
[data-screen-label] [data-m="menutop"] { display:none !important; }
[data-screen-label] [data-m="menuleft"] [data-menulink] { font-size:30px !important; padding:9px 0 !important; gap:16px !important; }
[data-screen-label] [data-m="menuleft"] [data-menulink] svg { width:27px !important; height:27px !important; }
/* green Base Camp band trimmed to just the bg + centred Join button */
[data-screen-label] [data-m="menuright"] { width:100% !important; max-width:none !important; padding:26px 22px !important; justify-content:center !important; align-items:center !important; flex:none !important; }
[data-screen-label] [data-m="menuright"] h2,
[data-screen-label] [data-m="menuright"] h3 { display:none !important; }
[data-screen-label] [data-m="menuright"] > div { display:none !important; } /* pill + price blocks */
[data-screen-label] [data-m="menuright"] p { display:none !important; }
/* founding CTA lives in a wrapper div — keep it (and only the button inside) visible & centred */
[data-screen-label] [data-m="menuright"] [data-m="fndwrap"] { display:inline-flex !important; align-self:center !important; }
[data-screen-label] [data-m="menuright"] [data-m="fndwrap"] [data-m="foundnote"] { display:none !important; }
[data-screen-label] [data-m="menuright"] a { align-self:center !important; display:inline-flex !important; }
[data-screen-label] [data-m="joinfull"] { display:none !important; }
[data-screen-label] [data-m="joinshort"] { display:inline !important; }
/* socials: hide the in-nav block; show a centred black strip below the band */
[data-screen-label] [data-m="menusocial"] { display:none !important; }
[data-screen-label] [data-m="menubottom"] { display:flex !important; justify-content:center !important; align-items:center !important; gap:28px !important;
background:#0c0c0d !important; padding:16px 22px calc(16px + env(safe-area-inset-bottom)) !important; }
[data-screen-label] [data-m="menubottom"] a { color:#fff !important; display:flex !important; }
/* -------- Newsletter row: field + Subscribe capped at the hero-button width, centred -------- */
[data-screen-label] [data-m="nlrow"] { flex-direction:column !important; gap:12px !important; align-items:center !important; }
[data-screen-label] [data-m="nlrow"] input { width:100% !important; max-width:270px !important; box-sizing:border-box !important; text-align:center !important; }
[data-screen-label] [data-m="nlrow"] a { width:100% !important; max-width:270px !important; box-sizing:border-box !important; text-align:center !important; padding:15px 20px !important; margin-left:auto !important; margin-right:auto !important; }
/* -------- Vertical rhythm: ONE even distance between every segment (56 top + 56 bottom
⇒ a 56px gap between any two sections — the site-wide MOBILE section standard).
Regardless of the desktop inline padding. Any section tagged data-m="... herosec"
keeps a larger bottom; a data-m="followsec" band trims its bottom before the footer.
Pages only need data-m="sec" on their section wrappers to inherit this. -------- */
[data-screen-label] [data-m~="sec"] { padding-top:56px !important; padding-bottom:56px !important; }
[data-screen-label] [data-m~="herosec"] { padding-top:0 !important; padding-bottom:56px !important; }
[data-screen-label] [data-m="followsec"] { padding-top:56px !important; padding-bottom:20px !important; }
/* -------- No faint grey divider lines between segments on mobile (sections flow on spacing
alone); also drop the Base Camp band's inner divider. -------- */
[data-screen-label] [data-m~="sec"] { border-top:none !important; border-bottom:none !important; }
[data-screen-label] [data-m="bccol2"] { border-top:none !important; }
/* -------- Green Base Camp band heading: ONE size site-wide (tag the band's
with data-m="bcheading" on every page so it can never drift per-page). -------- */
[data-screen-label] [data-m="bcheading"] { font-size:40px !important; line-height:1.06 !important; }
/* ============================================================
SITE-WIDE PRIMARY CTA WIDTH STANDARD — full-width, capped at 270px, centred.
This is THE single list of primary standalone action buttons. It MUST stay in
sync with the 14px radius list at the top of this file: any button that is a main
stacked call-to-action belongs in BOTH (radius + width). Contextual/inline buttons
(header Join pill, hero-btn pairs, "Continue reading" text links) are deliberately
NOT here — they size to content. Add a new primary CTA's hook to this block so it
can never get half the standard again.
Members: Base Camp join (bccta), newsletter (nlrow), See-all-journals (jmorecta),
gallery buttons (gallerycta, mapgallerycta, allgal), bookshelf "Join Base Camp" ([data-bookshelf] a).
============================================================ */
[data-screen-label] [data-m="bccta"],
[data-screen-label] [data-m="jmorecta"],
[data-screen-label] [data-gallerycta],
[data-screen-label] [data-m="mapgallerycta"],
[data-screen-label] [data-bookshelf] a,
[data-screen-label] [data-allgal] { width:100% !important; max-width:270px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; justify-content:center !important; }
/* -------- Whole Base Camp splash band: ONE mobile layout site-wide. Tag the lime section
with data-m="... bcband", its inner 2-col grid data-m="bcgrid", the price+CTA column
data-m="bccol2", the
data-m="bcheading", the CTA data-m="bccta". Identical everywhere. -------- */
[data-screen-label] [data-m~="bcband"] { padding-left:22px !important; padding-right:22px !important; padding-top:48px !important; padding-bottom:48px !important; } /* green breathing room above the eyebrow pill + below the CTA — matched to the homepage base camp band (48px) */
[data-screen-label] [data-m~="bcband"] [data-m="bcgrid"] { grid-template-columns:1fr !important; gap:22px !important; text-align:center !important; justify-items:center !important; max-width:none !important; margin:0 auto !important; padding:0 !important; }
[data-screen-label] [data-m~="bcband"] [data-m="bcgrid"] > div { text-align:center !important; }
/* Pitch paragraph under the heading: ONE size + spacing everywhere (was 15px About / 17px Journal). */
[data-screen-label] [data-m~="bcband"] [data-m="bcgrid"] p { font-size:17px !important; line-height:1.7 !important; margin:0 auto !important; max-width:300px !important; } /* inset from the side gutters so it tapers in under the heading */
/* Heading→pitch gap locked to the authored 22px so it can't drift per-page. */
[data-screen-label] [data-m~="bcband"] [data-m="bcheading"] { margin:0 0 22px !important; }
[data-screen-label] [data-m~="bcband"] [data-m="bccol2"] { width:100% !important; padding-left:0 !important; border-left:none !important; border-top:none !important; align-items:center !important; text-align:center !important; gap:0 !important; padding-top:0 !important; }
[data-screen-label] [data-m~="bcband"] [data-m="bccol2"] > div:first-child { margin-left:auto !important; margin-right:auto !important; } /* centre the £10 / "OR £100…" price block (fine print tucks under £10) */
/* Founding block: centre the £5/£10 price row and the OR £50/£100 line (they are flex rows, so need justify-content) */
[data-screen-label] [data-m~="bcband"] [data-bc-founding] > div { justify-content:center !important; }
/* -------- Founding CTA + "FIRST 50" line: ONE consistent treatment everywhere (homepage segment AND footer band).
Both columns have the same 22px side gutters, so forcing the CTA to full column width makes the two
CTAs identical, and the sub-line stays on a single line on every phone width. -------- */
[data-screen-label] [data-bc-founding][data-m="bccta"] { max-width:none !important; width:100% !important; align-self:stretch !important; }
[data-screen-label] [data-bc-founding] div[style*="align-items:stretch"] { width:100% !important; align-self:stretch !important; }
[data-screen-label] [data-bc-founding] div[style*="align-items:stretch"] > a { width:100% !important; }
[data-screen-label] [data-bc-founding] div[style*="align-items:stretch"] > div { white-space:nowrap !important; font-size:12px !important; letter-spacing:.03em !important; }
/* -------- Good-practice safety on phones: stop iOS auto-inflating text in landscape,
and never let an image overflow its container. -------- */
/* -------- Journal trip-report card: GLOBAL collapse (mobile only). The black OVERALL
MARK is pulled to the top; the sub-scores drop down behind a tap ("HOW IT RATED").
Opt a page in with the data-report-* hooks + the hidden-checkbox/label snippet
(id="tripReport"). Desktop keeps the side-by-side card untouched (rules are ≤820 only). -------- */
[data-screen-label] [data-report-card] { display:flex !important; flex-direction:column !important; }
[data-screen-label] [data-report-overall] { order:-1 !important; padding:28px 24px !important; }
[data-screen-label] [data-report-scores] { padding:0 !important; }
[data-screen-label] [data-report-label] { display:none !important; }
[data-screen-label] [data-report-toggle] {
display:flex !important; align-items:center; justify-content:space-between;
padding:16px 22px !important; margin:0 !important; cursor:pointer; user-select:none;
font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color:#0c0c0d; border-top:1px solid rgba(12,12,13,.08);
}
[data-screen-label] [data-report-arrow] { transition:transform .3s ease; flex:none; color:#0c0c0d; }
[data-screen-label] [data-report-card] [data-report-scores] [data-report-grid] {
grid-template-columns:1fr 1fr !important; gap:14px 20px !important;
max-height:0 !important; overflow:hidden !important;
margin:0 22px !important; padding:0 !important;
transition:max-height .4s ease, padding .4s ease;
}
[data-screen-label] [data-report-cb]:checked ~ [data-report-scores] [data-report-grid] {
max-height:1000px !important; padding-bottom:26px !important;
}
[data-screen-label] [data-report-cb]:checked ~ [data-report-scores] [data-report-arrow] {
transform:rotate(180deg) !important;
}
/* -------- Inline floated article image (data-imgfloat) inside its text block
(data-imgwrap): on mobile it unfloats, spans the column and drops BELOW the copy so
the paragraph reads first — no cramped text-beside-image squeeze. Desktop keeps the float. -------- */
[data-screen-label] [data-imgwrap] { display:flex !important; flex-direction:column !important; }
[data-screen-label] [data-imgwrap] [data-imgfloat] { float:none !important; order:2 !important; width:100% !important; max-width:none !important; margin:20px 0 6px !important; }
/* -------- Image carousels: swipe leads on mobile. Native touch-swipe already scrolls
every .st-carousel, so the overlay arrows (JS-tagged .st-cararrow) are hidden on
phones — they stay on desktop for mouse users. The "SWIPE →" hint fades after the
first swipe (see the carousel script). -------- */
.st-cararrow { display:none !important; }
/* Carousel "SWIPE →" hint on mobile: every carousel gets one (JS injects where the
source didn't hand-place it), styled to match, fading after the first swipe. Global
rule for the trip journals; desktop keeps whatever the page authored. */
[data-screen-label] .st-swipehint { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:#8a8a8e; margin-bottom:14px; transition:opacity .45s ease; }
/* -------- Photo book + Bookshelf: centre all content & imagery on mobile. -------- */
[data-screen-label] .stfb-meta { text-align:center !important; }
[data-screen-label] .stfb-meta p { margin-left:auto !important; margin-right:auto !important; }
[data-screen-label] [data-bookshelf] { flex-direction:column !important; text-align:center !important; align-items:center !important; }
[data-screen-label] [data-bookshelf] > div { max-width:100% !important; }
[data-screen-label] [data-bookshelf] h3 { justify-content:center !important; }
[data-screen-label] [data-bookshelf] a { margin-left:auto !important; margin-right:auto !important; }
[data-screen-label] [data-bookshelf] > div:last-child { justify-content:center !important; width:100% !important; }
/* -------- Footer bar: stack + centre on mobile — GLOBAL via the ftrow hook (this was
duplicated inline on the main pages; centralised here so every page matches). -------- */
[data-m="ftrow"] { flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; gap:20px !important; }
[data-m="ftrow"] > div { justify-content:center !important; }
[data-m="ftrow"] span { text-align:center !important; }
[data-m="ftrow"] a:not(.st-ftlink) { min-height:44px; display:inline-flex; align-items:center; }
[data-m="ftrow"] a.st-ftlink { display:inline; min-height:0; }
/* Privacy/Terms footer links → white on hover, in CSS so it works on EVERY page.
(The footer's inline onmouseover handlers get stripped by the DC runtime on the
component pages — homepage, journals, etc. — so hover only fired on plain-HTML
pages. This CSS rule is global and can't be stripped, so hover is now consistent.) */
[data-m="ftrow"] a.st-ftlink:hover { color:#fff !important; }
:where(div):has(> [data-m="ftrow"]) { padding-left:20px !important; padding-right:20px !important; }
/* -------- "Continue your journey": premium editorial swipe cards on mobile — full-bleed
image, dark gradient, mono meta + title overlaid; one card + a peek of the next. Built
from the site's journal-card language. Global via the [data-continue] hook. -------- */
[data-screen-label] [data-continue] { padding:2px 20px 6px !important; gap:16px !important; }
[data-screen-label] [data-continue] [data-jcard] {
position:relative !important; flex:0 0 82% !important; aspect-ratio:4/5 !important;
border-radius:18px !important; overflow:hidden !important; padding:20px !important;
display:flex !important; flex-direction:column !important; justify-content:flex-end !important;
box-shadow:0 16px 36px rgba(12,12,13,.22) !important;
}
[data-screen-label] [data-continue] [data-jcard] > div:first-child {
position:absolute !important; inset:0 !important; aspect-ratio:auto !important; border-radius:0 !important; margin:0 !important;
}
[data-screen-label] [data-continue] [data-jcard]::after {
content:"" !important; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(to top, rgba(8,9,11,.90) 0%, rgba(8,9,11,.35) 44%, rgba(8,9,11,0) 70%);
}
[data-screen-label] [data-continue] [data-jcard] > div:nth-child(2) { display:none !important; } /* meta hidden — very simplified */
[data-screen-label] [data-continue] [data-jcard] > div:nth-child(3) {
position:relative !important; z-index:2; margin:0 !important; color:#fff !important;
font-size:22px !important; line-height:1.16 !important; letter-spacing:-.02em !important;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
[data-screen-label] [data-continue] [data-jcard] > div:nth-child(4) { display:none !important; }
/* -------- Continue your journey: stacked compact rows (thumbnail + title/meta
alongside), copying the Journal page's compact-row format. -------- */
/* "Continue your journey" compact rows — mirror the Journal thumbnail page's mobile
row treatment (st-jimg thumb left, meta + title stacked to the right, meta on one
tight line). Structure: [data-jrow] > thumb(div) + text(div){ meta(div) + title(div) }. */
/* Continue: on mobile show the stacked-rows block, hide the desktop featured+thumbnails block. */
[data-screen-label] [data-continue-desktop] { display:none !important; }
/* Gallery CTA keeps its full "View the gallery" on desktop; the country word is hidden on mobile only. */
[data-screen-label] [data-cta-country] { display:none !important; }
[data-screen-label] [data-continue-sec] { display:block !important; padding-left:22px !important; padding-right:22px !important; padding-bottom:60px !important; }
[data-screen-label] [data-jrow] { gap:14px !important; padding:14px 0 !important; }
[data-screen-label] [data-jrow] > div:first-child { flex-basis:104px !important; }
[data-screen-label] [data-jrow] > div:last-child > div:first-child { font-size:9px !important; letter-spacing:.04em !important; white-space:nowrap !important; overflow:hidden !important; margin-bottom:5px !important; }
[data-screen-label] [data-jrow] > div:last-child > div:last-child { font-size:16px !important; line-height:1.2 !important; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
[data-screen-label] img { max-width:100%; }
/* -------- Journal-article mobile pass (promoted from per-page blocks; applies to every
migrated journal via [data-screen-label]). Hero sizing/centring, gutters, grid stacking,
back-link pin, and the 64/28 spacing standard. -------- */
/* NB the dc-runtime re-serialises inline styles (space after colon, 0→0px, .12→0.12),
so these attribute selectors match that RUNTIME format, not the source spelling. */
/* Horizontal gutter: the article uses a desktop 52px inset everywhere → 22px on mobile. */
[data-screen-label] [style*="padding: 0px 52px"]{ padding-left:22px !important; padding-right:22px !important; }
/* Stack every 2-column ARTICLE content grid to a single column (all ratios start with 1).
EXCLUDE deliberate multi-column tile grids that should KEEP their columns on mobile —
e.g. the homepage passport gallery [data-m="mapgallery"] (a 2-col grid of gallery tiles).
Without the :not(), this broad rule would collapse that grid to one full-width column. */
[data-screen-label] [style*="grid-template-columns: 1"]:not([data-m~="mapgallery"]){ grid-template-columns:1fr !important; }
/* Portrait-image-beside-text grids use a FIXED px first column (e.g. 340px 1fr), so the
ratio rule above misses them. Tag such a grid with data-imgtext: it stacks image-above-
text on mobile (image is first in DOM → sits on top), and the image drops its desktop
sticky/offset so it scrolls normally. Reusable across journals. */
[data-screen-label] [data-imgtext]{ grid-template-columns:1fr !important; }
[data-screen-label] [data-imgtext] > div:first-child{ position:relative !important; top:auto !important; }
/* Hero: a touch shorter, smaller headline — centred on mobile. */
/* Journal hero: FIXED height on mobile, matching the individual-gallery hero
(st-gallery.css .ghero mobile = 70vh / min 440px) so journals + galleries are
one standard height. Desktop inline is now 88vh / min 520px (also = the gallery). */
[data-screen-label] [style*="height: 88vh"]{ height:70vh !important; min-height:440px !important; }
[data-screen-label] h1{ font-size:clamp(26px, 8.2vw, 34px) !important; line-height:1.1 !important; text-align:center !important; }
[data-screen-label] h2{ font-size:26px !important; line-height:1.14 !important; }
/* Article body stays left-aligned (eyebrows, section headings, copy). Only the hero
title + details are centred (rules above). Blocks/cards keep their own alignment. */
/* Mobile-only line breaks in the hero title (hidden on desktop — see st-desktop.css). */
.st-mbr{ display:inline !important; }
/* "The Journal" back-link on mobile: PINNED top-left, matching the individual-gallery hero
(st-gallery.css .back). The title "drops" to the bottom of the hero below it. */
[data-screen-label] [data-herolink]{ position:absolute !important; top:100px !important; left:22px !important; margin:0 !important; z-index:6 !important; }
/* Journal hero (mobile): mirrors the GALLERY hero pattern — pill pinned top-left (rule above),
and the content (title + trip-meta + up to TWO gallery CTAs) BOTTOM-aligned in the hero, so
it sits low with a "pill drop" of empty space beneath the pill. `justify-content:flex-end`
bottom-aligns; padding reserves the pinned-pill zone (top) and clears the report-card overlap
(bottom, ~120px = the card's −80 pull + gap). The wrapper fills the hero (min-height:70vh) and
on short phones, where the stack is taller than 70vh, the hero grows (height:auto) so the
content still clears the pill above and the card below instead of overlapping. Journals only,
via the [data-jhero] hook. Verified 320–440px (incl. 15/16 Pro Max, Pixel 7 Pro): back→title
≥13px, content→card 40px at every size. Covers all 8 journals (identical hero markup). */
[data-screen-label] [data-jhero]{ height:auto !important; min-height:70vh !important; }
[data-screen-label] [data-jhero] [style*="max-width: 1000px"]{ position:relative !important; min-height:70vh !important; justify-content:flex-end !important; padding:148px 22px 120px !important; }
/* Lede + oversized body sizes ease down. */
[data-screen-label] [style*="font-size: 24px"]{ font-size:19px !important; }
[data-screen-label] [style*="font-size: 22px"]{ font-size:18px !important; }
/* Hero trip-meta line (DATE | LENGTH | READ): wrap + shrink so nothing is clipped — centred on mobile. */
[data-screen-label] [style*="letter-spacing: 0.12em"]{ flex-wrap:wrap !important; row-gap:4px !important; font-size:11px !important; justify-content:center !important; }
/* "View the … gallery" hero CTA is now governed entirely by the shared CTA standard
in st-mobile.css (14px radius + 270px width). No per-page override here. */
/* Any explicit-width media can't exceed the viewport. */
[data-screen-label] img:not([style*="object-fit"]){ max-width:100% !important; height:auto !important; }
/* ---- Vertical spacing standard (mobile) ----
Major section breaks = 64px; within-section elements (map/carousel/highlights/callout) = 28px.
Keyed on each section wrapper's own inline top margin, so no markup hooks are needed. The
report-card −80px overlap, the Base Camp/footer bands and the body-paragraph rhythm are left as-is. */
[data-screen-label] > div[style*="margin: 56px auto 0px"],
[data-screen-label] > div[style*="margin: 80px auto 0px"] { margin-top:64px !important; }
[data-screen-label] > div[style*="margin: 32px auto 0px"],
[data-screen-label] > div[style*="margin: 28px auto 0px"],
[data-screen-label] > div[style*="margin: 24px auto 0px"],
[data-screen-label] > div[style*="margin: 36px auto 0px"],
[data-screen-label] > div[style*="margin: 16px auto 0px"] { margin-top:28px !important; }
}
/* ============================================================
TABLET-PORTRAIT POLISH — bounded 620–820px ONLY (additive).
Phones (<620px) and desktop (>820px, incl. ALL iPad landscape)
are completely untouched — this block simply does not exist
outside 620–820px. Heroes, section backgrounds and photo grids
are left full-width; only pure body-text wrappers get a
comfortable centred reading column so lines aren't ~100 chars.
============================================================ */
@media (min-width:620px) and (max-width:820px){
[data-screen-label] [data-m="intro"],
[data-screen-label] [data-m~="quote2"],
[data-screen-label] [data-m~="pullq"],
[data-screen-label] [data-m~="abhead"],
[data-screen-label] [data-m~="bcpitch"],
[data-screen-label] [data-m~="rowhead"]{
max-width:660px !important;
margin-left:auto !important;
margin-right:auto !important;
}
}