/* City guide framework — visual implementation of the schema in
* docs/city-guide-schema.md. Used by every city guide page. Editorial
* register: more whitespace and bigger typography than the homepage.
* No marquee, no motion. The brand voice fully unfurled.
*
* Layout: full-bleed nav + footer; article body centered at a readable
* line length (~640px). Figures and the data table break out wider.
*/
/* ── Inline icons ───────────────────────────────── */
/* Lucide aesthetic line icons. Reference via:
*
* Sprite is inlined at top of each city's . */
.icon {
display: inline-block;
width: 1.05em;
height: 1.05em;
vertical-align: -0.18em;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.icon--magenta { color: var(--magenta); }
/* Section heading icon — sits inline before the title text */
.guide-section__title .icon,
.move-block__head .icon {
margin-right: 0.4em;
width: 0.85em;
height: 0.85em;
color: var(--magenta);
vertical-align: -0.1em;
}
.shell {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ── Nav (same shape as homepage but no centered hero pulling focus) ─ */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
}
.nav__back {
font-family: var(--font-system);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
padding: var(--sp-2) 0;
transition: color 120ms ease;
}
.nav__back:hover { color: var(--text); }
/* ── Article shell ─────────────────────────────── */
.guide {
flex: 1;
width: 100%;
margin: 0 auto;
padding: 0 var(--sp-5);
}
.guide-body {
max-width: 640px;
margin: 0 auto;
}
/* ── Hero ──────────────────────────────────────── */
.guide-hero {
max-width: 1080px;
margin: clamp(48px, 10vh, 128px) auto clamp(48px, 8vh, 96px) auto;
padding: 0;
}
.guide-hero__meta {
font-family: var(--font-system);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: clamp(28px, 5vh, 56px);
}
.guide-hero__title {
font-family: var(--font-system);
font-size: clamp(80px, 14vw, 200px);
font-weight: 700;
letter-spacing: -0.045em;
line-height: 0.95;
margin: 0 0 clamp(20px, 3vh, 36px) 0;
color: var(--text);
}
/* Sub-head: country · population · tagline */
.guide-hero__subhead {
display: flex;
flex-direction: column;
gap: clamp(12px, 2vh, 20px);
margin: 0 0 clamp(32px, 5vh, 64px) 0;
}
.guide-hero__data {
font-family: var(--font-system);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.guide-hero__tagline {
font-family: var(--font-system);
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--text);
font-style: italic;
max-width: 28ch;
margin: 0;
}
.guide-hero__pitch {
font-family: var(--font-system);
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 400;
line-height: 1.6;
letter-spacing: -0.005em;
color: var(--text);
max-width: 56ch;
margin: 0;
}
/* ── Figure (real image) ───────────────────────── */
.guide-figure {
max-width: 1080px;
margin: clamp(64px, 10vh, 128px) auto;
padding: 0;
}
.guide-figure__img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
background: rgba(245, 245, 245, 0.03);
}
.guide-figure__caption {
margin-top: var(--sp-3);
font-family: var(--font-system);
font-size: 13px;
letter-spacing: 0.02em;
color: var(--muted);
font-style: normal;
}
/* ── Lightbox (click figure to popout fullscreen) ─ */
/* CSS-only via :target. Inline figures wrap their ![]()
in an so clicking opens the lightbox at that hash; clicking
* outside or on close button (href="#") closes it. No JS. */
.lightbox {
position: fixed;
inset: 0;
background: rgba(7, 7, 10, 0.96);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
padding: var(--sp-5);
}
.lightbox:target {
opacity: 1;
pointer-events: auto;
}
.lightbox__backdrop {
position: absolute;
inset: 0;
}
.lightbox__img {
display: block;
max-width: min(1400px, 92vw);
max-height: 88vh;
width: auto;
height: auto;
object-fit: contain;
position: relative;
z-index: 2;
}
.lightbox__close {
position: absolute;
top: var(--sp-5);
right: var(--sp-5);
z-index: 3;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-system);
font-size: 28px;
font-weight: 300;
color: var(--text);
text-decoration: none;
border: 1px solid var(--border-default);
border-radius: 50%;
background: rgba(13, 13, 15, 0.6);
transition: background-color 120ms ease, border-color 120ms ease;
line-height: 1;
}
.lightbox__close:hover {
background: rgba(245, 245, 245, 0.06);
border-color: var(--text);
}
.guide-figure__link {
display: block;
cursor: zoom-in;
}
/* ── Hero carousel ─────────────────────────────── */
/* Scroll-snap carousel. Native swipe on mobile, trackpad/shift-wheel on
* desktop, plus arrow buttons (shared/carousel.js) for discoverability.
* The .carousel-wrap holds carousel + arrows so arrows can sit absolute
* over the carousel content. */
.carousel-wrap {
position: relative;
max-width: 1080px;
margin: clamp(48px, 7vh, 96px) auto;
}
.carousel {
display: flex;
gap: var(--sp-3);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
outline: none;
}
.carousel::-webkit-scrollbar { display: none; }
/* Arrow buttons — round, magenta-bordered, sit at vertical centre of
* the image area (not the whole slide including caption). */
.carousel__arrow {
position: absolute;
top: calc((100% - 28px) / 2); /* roughly centre of image area, ignoring caption */
transform: translateY(-50%);
z-index: 5;
width: 44px;
height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(245, 245, 245, 0.36);
background: rgba(13, 13, 15, 0.7);
color: var(--text);
cursor: pointer;
text-decoration: none;
font-family: var(--font-system);
font-size: 0;
line-height: 1;
transition: background-color 120ms ease, border-color 120ms ease, opacity 160ms ease;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.carousel__arrow:hover {
background: rgba(13, 13, 15, 0.9);
border-color: var(--magenta);
color: var(--magenta);
}
.carousel__arrow.is-disabled {
opacity: 0.25;
pointer-events: none;
}
.carousel__arrow svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.carousel__arrow--prev { left: var(--sp-3); }
.carousel__arrow--next { right: var(--sp-3); }
/* On wide screens, push arrows just outside the slide if there's room */
@media (min-width: 1200px) {
.carousel__arrow--prev { left: -22px; }
.carousel__arrow--next { right: -22px; }
}
/* On phones, pull them slightly inward so they don't fall off-edge */
@media (max-width: 480px) {
.carousel__arrow {
width: 38px;
height: 38px;
}
.carousel__arrow--prev { left: 4px; }
.carousel__arrow--next { right: 4px; }
}
.carousel__slide {
flex: 0 0 min(86%, 760px);
scroll-snap-align: start;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.carousel__slide img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
background: rgba(245, 245, 245, 0.03);
}
.carousel__slide figcaption {
font-family: var(--font-system);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: none;
line-height: 1.5;
}
/* ── Section structure ────────────────────────── */
.guide-section {
margin: clamp(80px, 12vh, 160px) auto;
}
.guide-section__label {
display: flex;
align-items: baseline;
gap: var(--sp-3);
margin-bottom: clamp(40px, 6vh, 72px);
}
.guide-section__num {
font-family: var(--font-system);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--magenta);
}
.guide-section__title {
font-family: var(--font-system);
font-size: clamp(36px, 5vw, 64px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0;
color: var(--text);
}
.guide-section__intro {
font-family: var(--font-system);
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.6;
color: var(--muted);
margin: 0 0 var(--sp-7) 0;
max-width: 40ch;
}
/* ── 01 · Numbers (data table) ────────────────── */
.datatable {
margin: 0;
padding: 0;
}
/* Subheading rows. Plain treatment by default; primary/secondary
* variants below. */
.datatable__group {
font-family: var(--font-system);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
padding: var(--sp-6) 0 var(--sp-3) 0;
border-bottom: 1px solid var(--border-subtle);
}
.datatable__group:first-child {
padding-top: 0;
}
/* Primary block — the data people scan first (rent + salaries).
* Larger values, more breathing room. */
.datatable__group--primary {
color: var(--text);
font-size: 14px;
}
.datatable__group--primary + .datatable__row,
.datatable__group--primary ~ .datatable__row {
/* Reset by default; only the rows directly belonging to this group
* pick up the larger treatment via the .datatable--primary
* container class below. */
}
.datatable--primary .datatable__row {
padding: var(--sp-5) 0;
}
.datatable--primary .datatable__row dt {
font-size: 15px;
}
.datatable--primary .datatable__row dd {
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 600;
}
/* Secondary block — "Worth knowing" evocative numbers (coffee, beer,
* wine, transit, train, air). Compact, footnote feel. */
.datatable--secondary {
margin-top: clamp(48px, 6vh, 72px);
}
.datatable--secondary .datatable__group {
font-size: 11px;
padding: var(--sp-5) 0 var(--sp-2) 0;
}
.datatable--secondary .datatable__row {
padding: var(--sp-3) 0;
}
.datatable--secondary .datatable__row dt {
font-size: 13px;
text-transform: none;
letter-spacing: 0.01em;
color: var(--text);
}
.datatable--secondary .datatable__row dd {
font-size: 14px;
color: var(--magenta);
}
.datatable__row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-5);
padding: var(--sp-4) 0;
border-bottom: 1px solid var(--border-subtle);
align-items: baseline;
}
.datatable__row dt {
font-family: var(--font-system);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--muted);
text-transform: uppercase;
margin: 0;
}
.datatable__row dd {
margin: 0;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: clamp(15px, 1.4vw, 17px);
font-weight: 500;
letter-spacing: 0;
color: var(--magenta);
text-align: right;
}
/* Multi-line value (e.g. employer list) */
.datatable__row--wide dd {
text-align: right;
white-space: pre-line;
line-height: 1.6;
}
/* ── 02 · Life (places list) + Where to live ──── */
/* Place / neighbourhood share the same compact card pattern. Title is
* deliberately mid-sized — big enough to anchor each item, small enough
* not to dominate. (Earlier iteration was clamp 28-44px which Dale found
* too imposing.) */
.places {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(28px, 4vh, 48px);
}
.place {
border-top: 1px solid var(--border-subtle);
padding-top: clamp(20px, 3vh, 32px);
}
.place__name {
font-family: var(--font-system);
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.15;
margin: 0;
color: var(--text);
}
.place__loc {
font-family: var(--font-system);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin: var(--sp-1) 0 var(--sp-3) 0;
}
.place__desc {
font-family: var(--font-system);
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.65;
margin: 0;
color: var(--text);
max-width: 56ch;
}
/* ── Industry summary ──────────────────────────── */
.industry {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.industry__summary {
font-family: var(--font-system);
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.7;
color: var(--text);
margin: 0;
max-width: 60ch;
}
.industry__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-3);
}
.industry__list li {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 13px;
letter-spacing: 0.02em;
color: var(--magenta);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border-subtle);
border-radius: 3px;
}
/* ── Eat & drink — places list with per-item icons ─ */
/* Reuses .place layout from §02/03. The per-item icon sits at the
* left of each row. */
.place--has-icon {
display: grid;
grid-template-columns: auto 1fr;
gap: 0 var(--sp-4);
align-items: start;
}
.place__icon {
grid-row: 1 / span 3;
width: 28px;
height: 28px;
color: var(--magenta);
margin-top: 2px;
}
.place__icon svg {
width: 100%;
height: 100%;
}
.place--has-icon .place__name,
.place--has-icon .place__loc,
.place--has-icon .place__desc {
grid-column: 2;
}
/* ── Activities — sub-blocks (culture, sport-watch, etc) ─ */
.activities__block {
margin-bottom: clamp(48px, 7vh, 72px);
}
.activities__block:last-child { margin-bottom: 0; }
.activities__sub {
font-family: var(--font-system);
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-5) 0;
color: var(--text);
display: flex;
align-items: center;
gap: 0.4em;
}
.activities__sub .icon {
color: var(--magenta);
width: 0.8em;
height: 0.8em;
}
/* ── 03 · Trade-offs (paragraph block) ─────────── */
.prose p {
font-family: var(--font-system);
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.75;
color: var(--text);
margin: 0 0 var(--sp-6) 0;
max-width: 60ch;
}
.prose p:last-child { margin-bottom: 0; }
/* ── 04 · The move (practical bullets) ─────────── */
.move-block {
margin-bottom: clamp(48px, 7vh, 80px);
}
.move-block:last-child { margin-bottom: 0; }
.move-block__head {
font-family: var(--font-system);
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-4) 0;
color: var(--text);
}
.move-block ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.move-block li {
font-family: var(--font-system);
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.6;
color: var(--text);
padding-left: var(--sp-4);
position: relative;
}
.move-block li::before {
content: '';
position: absolute;
left: 0;
top: 0.7em;
width: 6px;
height: 1px;
background: var(--magenta);
}
.move-block li b,
.move-block li strong {
font-weight: 600;
color: var(--text);
}
/* ── Footer ─────────────────────────────────── */
.foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sp-4) var(--sp-5);
margin-top: clamp(64px, 10vh, 128px);
border-top: 1px solid var(--border-subtle);
font-family: var(--font-system);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.02em;
}
.foot__links {
display: flex;
gap: var(--sp-4);
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }
/* ── Responsive: mobile tweaks ──────────────── */
@media (max-width: 700px) {
.nav { padding: var(--sp-3) var(--sp-4); }
.guide { padding: 0 var(--sp-4); }
.guide-hero { margin: var(--sp-7) auto var(--sp-8) auto; }
.guide-hero__title { font-size: clamp(56px, 18vw, 96px); }
.foot { flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); text-align: center; }
.datatable__row {
grid-template-columns: 1fr;
gap: var(--sp-1);
}
.datatable__row dd { text-align: left; }
}