/* ============================================================ PLACES I NEED TO GO AND SEE — Main Stylesheet Design: Warm brown bg (#312004), white text, yellow accents ============================================================ */ /* Font @import removed — Hammersmith One + Inter are now linked from header.php alongside the Adobe Fonts (Gemeli Mono) stylesheet, so the two providers load in parallel from . */ /* ── TOKENS ─────────────────────────────────────────────── */ :root { --bg: #312004; --bg-deep: #1a0f00; --bg-card: rgba(255,255,255,0.06); --bg-hover: rgba(255,255,255,0.10); --text: #ffffff; --text-muted: rgba(255,255,255,0.45); --accent: #ffdd78; --accent-hover: #f5cc50; --gold: #ffdd78; --border: rgba(255,255,255,0.14); --radius: 8px; --nav-h: 272px; /* 181px × 1.5 */ --font-head: 'Hammersmith One', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'gemeli-mono', ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace; --transition: 0.2s ease; } /* ── RESET ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { display: block; width: 100%; height: auto; object-fit: cover; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font: inherit; } /* ── TYPOGRAPHY ─────────────────────────────────────────── */ .heading-hammersmith { font-family: var(--font-head); font-size: 64px; font-weight: 400; letter-spacing: -1.28px; color: var(--text); text-transform: uppercase; line-height: 1; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .heading-hammersmith.hero { font-size: 96px; letter-spacing: -1.92px; } /* Gemeli Mono — logo wordmark on the homepage hero, and the title of any single article (places_project). */ .home-hero .heading-hammersmith.hero, .single-places_project .article-top .heading-hammersmith { font-family: var(--font-mono); font-weight: 500; text-transform: none; letter-spacing: -0.02em; text-shadow: none; } /* ── NAVIGATION ─────────────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); background: var(--bg); display: flex; align-items: center; justify-content: space-between; padding: 0 80px; } .site-branding { font-family: var(--font-mono); font-size: 30px; font-weight: 500; color: var(--text); white-space: nowrap; flex-shrink: 0; text-decoration: none; letter-spacing: -0.01em; } .nav-center { display: none; /* merged into nav-right */ } .nav-right { display: flex; align-items: center; gap: 48px; } .nav-right a { font-family: var(--font-body); font-size: 30px; font-weight: 500; color: var(--text); white-space: nowrap; transition: opacity var(--transition); } .nav-right a:hover { opacity: 0.7; } .nav-instagram-btn { background: var(--accent) !important; color: #000 !important; font-size: 24px !important; font-weight: 500 !important; padding: 21px 36px; border-radius: var(--radius); box-shadow: 0px 1px 2px rgba(0,0,0,0.05); white-space: nowrap; transition: background var(--transition) !important; } .nav-instagram-btn:hover { background: var(--accent-hover) !important; opacity: 1 !important; } .hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; } .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: var(--transition); } /* ── MOBILE MENU ────────────────────────────────────────── */ .mobile-menu { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 99; flex-direction: column; justify-content: center; align-items: center; gap: 32px; border-top: 1px solid var(--text); } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: var(--font-head); font-size: clamp(2rem, 8vw, 3.5rem); letter-spacing: -0.5px; text-transform: uppercase; color: var(--text); transition: color var(--transition); } .mobile-menu a:hover { color: var(--accent); } .mobile-menu-close { position: absolute; top: 24px; right: 32px; font-size: 1.5rem; color: var(--text); cursor: pointer; } /* ── PAGE WRAPPER ───────────────────────────────────────── */ .site-main { padding-top: var(--nav-h); } /* ── HOMEPAGE HERO BLOCK ────────────────────────────────── */ .home-hero { padding: 48px 80px 32px; } .home-hero .site-tagline { font-family: var(--font-body); font-size: 24px; font-weight: 400; color: var(--text); margin-top: 24px; line-height: 1.5; } /* ── PHOTO GRID (HOME) ──────────────────────────────────── */ .photo-grid-section { padding: 0 0 48px; } .photo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; } .grid-item { position: relative; overflow: hidden; background: rgba(255,255,255,0.05); aspect-ratio: 1 / 1; cursor: pointer; border: 1px solid var(--bg); } .grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.4s ease; } .grid-item:hover img { transform: scale(1.04); filter: brightness(0.7); } .grid-item-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; background: linear-gradient(to top, rgba(49,32,4,0.85) 0%, transparent 55%); opacity: 0; transition: opacity var(--transition); } .grid-item:hover .grid-item-overlay { opacity: 1; } .grid-item-title { font-family: var(--font-head); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); } .grid-item-meta { font-size: 0.7rem; color: var(--accent); margin-top: 2px; } /* ── LOAD MORE BUTTON ───────────────────────────────────── */ .load-more-wrap { display: flex; justify-content: center; padding: 40px 80px; } .btn-load-more { background: var(--accent); color: #000; font-family: var(--font-head); font-size: 24px; letter-spacing: -0.48px; text-transform: uppercase; padding: 20px 32px; border-radius: var(--radius); box-shadow: 0px 1px 2px rgba(0,0,0,0.05); cursor: pointer; border: none; transition: background var(--transition); display: inline-block; text-decoration: none; } .btn-load-more:hover { background: var(--accent-hover); } /* ── YELLOW CTA LINK BUTTON ─────────────────────────────── */ .btn-cta { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #000; font-family: var(--font-head); font-size: 24px; letter-spacing: -0.48px; text-transform: uppercase; padding: 14px 24px; border-radius: var(--radius); box-shadow: 0px 1px 2px rgba(0,0,0,0.05); white-space: nowrap; transition: background var(--transition); text-decoration: none; width: 535px; max-width: 100%; } .btn-cta:hover { background: var(--accent-hover); } /* ── PAGE HEADER (generic) ──────────────────────────────── */ .page-header { padding: 48px 80px 32px; } /* ── TWO-COLUMN EDITORIAL LAYOUT ────────────────────────── */ .editorial-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0 80px; align-items: start; margin-top: 48px; } .editorial-left { padding-right: 60px; } .editorial-left .heading-hammersmith { margin-bottom: 24px; } .editorial-left .page-text { font-family: var(--font-body); font-size: 24px; font-weight: 400; color: var(--text); line-height: 1.5; margin-bottom: 24px; } .editorial-left .page-text p { margin-bottom: 24px; } .editorial-left .page-text p:last-child { margin-bottom: 0; } .editorial-right img { width: 100%; border-radius: var(--radius); object-fit: cover; } .editorial-right .image-placeholder { aspect-ratio: 3 / 4; background: rgba(255,255,255,0.08); border-radius: var(--radius); } /* ── ABOUT PAGE ─────────────────────────────────────────── */ .about-section { margin-top: 80px; padding: 0 80px; } .about-section .heading-hammersmith { margin-bottom: 32px; } .about-section .page-text { font-family: var(--font-body); font-size: 24px; font-weight: 400; color: var(--text); line-height: 1.5; max-width: 660px; } /* ── ARTICLES LIST PAGE ─────────────────────────────────── */ .articles-list { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; } /* ── ARTICLES ARCHIVE — Hacker News-style list ────────────── Design audit of news.ycombinator.com: - dense numbered list, 1-indexed and continuous across pages - rank (right-aligned, dim) → upvote arrow (decorative) → title (link) → parenthetical source/domain (smaller, dim) - sub-line: meta (author, time, tags, action), smaller still - "More" link at the bottom; no per-page numbers - Verdana on HN; we substitute Gemeli Mono to match the brand. The palette is reversed (dark warm-brown bg, light text, yellow accent), so meta uses translucent white and accent on hover. */ .hn-archive { max-width: 980px; margin: 32px auto 64px; padding: 0 80px; font-family: var(--font-mono); } .hn-archive-header { border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 14px; margin-bottom: 18px; } .hn-archive-title { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); text-transform: none; } .hn-archive-meta { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.55); letter-spacing: 0.02em; } .hn-list { list-style: none; margin: 0; padding: 0; counter-reset: none; /* using explicit numbers */ } .hn-row { display: grid; grid-template-columns: 36px 14px 1fr; column-gap: 6px; padding: 6px 0 10px; align-items: baseline; } .hn-rank { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.45); text-align: right; font-variant-numeric: tabular-nums; } .hn-vote { font-size: 10px; line-height: 1; color: rgba(255,255,255,0.35); user-select: none; align-self: center; transform: translateY(-1px); } .hn-content { min-width: 0; } .hn-title { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; line-height: 1.35; text-decoration: none; } .hn-title:visited { color: rgba(255,255,255,0.62); } .hn-title:hover, .hn-row:hover .hn-title { color: var(--accent); } .hn-source { margin-left: 6px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); text-decoration: none; } .hn-source:hover { color: var(--accent); } .hn-subline { margin-top: 3px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.5); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; letter-spacing: 0.01em; } .hn-subline a { color: rgba(255,255,255,0.65); text-decoration: none; } .hn-subline a:hover { color: var(--accent); text-decoration: underline; } .hn-sep { color: rgba(255,255,255,0.25); } .hn-pagination { margin-top: 24px; padding-left: 56px; /* line up under the title column */ display: flex; gap: 18px; font-family: var(--font-mono); font-size: 13px; } .hn-more, .hn-prev { color: var(--accent); text-decoration: none; } .hn-more:hover, .hn-prev:hover { text-decoration: underline; } .hn-empty { font-family: var(--font-mono); color: rgba(255,255,255,0.55); padding: 24px 0; } @media (max-width: 720px) { .hn-archive { padding: 0 20px; } .hn-row { grid-template-columns: 28px 12px 1fr; } .hn-title { font-size: 15px; } .hn-pagination { padding-left: 46px; } } /* ── SINGLE ARTICLE PAGE ────────────────────────────────── */ .article-layout { padding: 48px 80px; } .article-top { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-bottom: 48px; } .article-top .heading-hammersmith { margin-bottom: 0; } .article-top-image { width: 100%; border-radius: var(--radius); object-fit: cover; } .article-top-image-placeholder { aspect-ratio: 9 / 16; background: rgba(255,255,255,0.08); border-radius: var(--radius); } .article-body { font-family: var(--font-body); font-size: 24px; font-weight: 400; color: var(--text); line-height: 1.5; max-width: 673px; margin-bottom: 48px; } .article-body p { margin-bottom: 24px; } .article-body-wide { font-family: var(--font-body); font-size: 24px; font-weight: 400; color: var(--text); line-height: 1.5; margin-bottom: 48px; } .article-body-wide p { margin-bottom: 24px; } .article-image-block { margin-bottom: 48px; } .article-image-block img { width: 100%; border-radius: var(--radius); object-fit: cover; } .article-image-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px; } .article-image-row img { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 2 / 3; } /* ── GALLERY ────────────────────────────────────────────── */ .project-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 48px; } .project-gallery img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); cursor: pointer; transition: filter var(--transition); } .project-gallery img:hover { filter: brightness(0.75); } /* ── FOOTAGE UPLOAD BLOCK ───────────────────────────────── */ .footage-upload-block { background: var(--accent); padding: 80px 48px; text-align: center; cursor: pointer; transition: background var(--transition); margin-bottom: 0; } .footage-upload-block:hover { background: var(--accent-hover); } .footage-upload-block .upload-label { font-family: var(--font-head); font-size: 96px; letter-spacing: -1.92px; text-transform: uppercase; color: #000; line-height: 1; } .footage-upload-block .upload-sub { font-family: var(--font-body); font-size: 18px; color: rgba(0,0,0,0.55); margin-top: 12px; } .upload-form-wrap { background: var(--accent); padding: 48px 80px; } .upload-form { max-width: 760px; margin: 0 auto; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0,0,0,0.55); margin-bottom: 8px; font-weight: 500; } .form-group input, .form-group textarea, .form-group select { width: 100%; background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.2); color: #000; padding: 12px 16px; font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color var(--transition); border-radius: var(--radius); appearance: none; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: rgba(0,0,0,0.5); } .form-group textarea { min-height: 100px; resize: vertical; } .upload-dropzone { border: 1.5px dashed rgba(0,0,0,0.3); padding: 32px; text-align: center; cursor: pointer; transition: border-color var(--transition); background: rgba(0,0,0,0.06); border-radius: var(--radius); } .upload-dropzone:hover { border-color: rgba(0,0,0,0.6); } .upload-dropzone-icon { font-size: 2rem; color: rgba(0,0,0,0.4); display: block; margin-bottom: 10px; } .upload-dropzone-text { font-size: 14px; color: rgba(0,0,0,0.5); } .btn-submit { width: 100%; background: #000; color: var(--accent); font-family: var(--font-head); font-size: 24px; letter-spacing: -0.48px; text-transform: uppercase; padding: 18px; border: none; cursor: pointer; transition: opacity var(--transition); margin-top: 8px; border-radius: var(--radius); } .btn-submit:hover { opacity: 0.8; } /* ── CONTACT PAGE ───────────────────────────────────────── */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 48px 80px; align-items: start; } .contact-left { padding-right: 60px; } .contact-left .heading-hammersmith { margin-bottom: 24px; } .contact-intro { font-family: var(--font-body); font-size: 24px; font-weight: 400; color: var(--text); line-height: 1.5; margin-bottom: 32px; max-width: 660px; } .contact-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; } .contact-right img { width: 100%; border-radius: var(--radius); object-fit: cover; } .contact-right .image-placeholder { aspect-ratio: 3 / 4; background: rgba(255,255,255,0.08); border-radius: var(--radius); } /* ── PRESS PAGE ─────────────────────────────────────────── */ .press-layout { padding: 48px 80px; } /* Article list */ .press-list { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .press-entry { display: grid; grid-template-columns: 1fr; padding: 28px 0; border-bottom: 1px solid var(--border); gap: 16px; } .press-entry.has-image { grid-template-columns: 220px 1fr; align-items: start; gap: 28px; } .press-list li:first-child { border-top: 1px solid var(--border); } .press-entry-image { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--bg-card); flex-shrink: 0; } .press-entry-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .press-entry:hover .press-entry-image img { transform: scale(1.03); } .press-entry-body { display: flex; flex-direction: column; gap: 8px; justify-content: center; } .press-entry-pub { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .press-entry-title { font-family: var(--font-head); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 400; line-height: 1.25; color: var(--text); text-transform: none; letter-spacing: -0.01em; } .press-entry-title a { color: inherit; text-decoration: none; } .press-entry-title a:hover { color: var(--accent); } .press-entry-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; color: var(--text-muted); } .press-sep { color: var(--border); } .press-read-link { color: var(--text-muted); text-decoration: none; font-size: 12px; transition: color var(--transition); } .press-read-link:hover { color: var(--accent); } .press-notice { margin-top: 40px; font-family: var(--font-body); font-size: 16px; color: var(--text-muted); } /* ── LIGHTBOX ───────────────────────────────────────────── */ .lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(49,32,4,0.95); z-index: 200; align-items: center; justify-content: center; } .lightbox-overlay.open { display: flex; } .lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; } .lightbox-inner img { max-width: 90vw; max-height: 85vh; object-fit: contain; width: auto; height: auto; border-radius: var(--radius); } .lightbox-close { position: fixed; top: 24px; right: 32px; font-size: 1.5rem; color: var(--text); cursor: pointer; z-index: 201; } .lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); font-size: 2rem; color: var(--text); cursor: pointer; padding: 12px 20px; z-index: 201; background: rgba(49,32,4,0.5); } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } .lightbox-caption { position: absolute; bottom: -32px; left: 0; right: 0; text-align: center; font-size: 14px; color: rgba(255,255,255,0.6); } /* ── FOOTER ─────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--text); padding: 48px 80px; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand .site-branding { display: block; margin-bottom: 16px; } .footer-brand p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.6; } .footer-col-title { font-family: var(--font-head); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color var(--transition); } .footer-links a:hover { color: var(--text); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 13px; color: rgba(255,255,255,0.4); } .footer-bottom a:hover { color: var(--text); } /* ── UTILITY: .label ────────────────────────────────────── */ .label { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } /* ── HEADING OUTLINE ────────────────────────────────────── */ /* Used on: archive-places_photo, page-upload, page.php, single.php */ .heading-outline { font-family: var(--font-head); font-size: clamp(3.5rem, 10vw, 7rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--text); paint-order: stroke fill; } /* ── OTTO ARCHIVE PHOTO PAGE ────────────────────────────── */ .archive-header { padding: calc(var(--nav-h) + 40px) 80px 0; display: flex; flex-direction: column; gap: 28px; } .archive-filters { display: flex; flex-wrap: wrap; gap: 8px; } .filter-btn { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-card); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 6px 14px; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .filter-btn:hover, .filter-btn.active { background: var(--accent); color: #000; border-color: transparent; } .archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 28px; } .archive-item { display: block; position: relative; overflow: hidden; aspect-ratio: 1; background: var(--bg-card); text-decoration: none; color: var(--text); } .archive-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .archive-item:hover img { transform: scale(1.04); } .archive-item-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px; background: linear-gradient(transparent, rgba(49,32,4,0.85)); opacity: 0; transition: opacity var(--transition); } .archive-item:hover .archive-item-info { opacity: 1; } .archive-item-name { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive-item-loc { font-family: var(--font-body); font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; } /* ── INSTAGRAM STORIES STRIP ────────────────────────────── */ .stories-strip { padding: 28px 80px 0; overflow: hidden; } .stories-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .stories-handle { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.03em; color: var(--text-muted); text-decoration: none; } .stories-handle:hover { color: var(--text); } .stories-inner { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; } .stories-inner::-webkit-scrollbar { display: none; } .story-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; text-decoration: none; color: var(--text); } .story-ring { width: 60px; height: 60px; border-radius: 50%; padding: 2.5px; background: linear-gradient(135deg, var(--gold) 0%, var(--accent-hover) 100%); overflow: hidden; flex-shrink: 0; } .story-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--bg); } .story-label { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; max-width: 60px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .story-item:hover .story-label { color: var(--text); } /* ── BREADCRUMB ─────────────────────────────────────────── */ .breadcrumb { padding: 12px 80px; font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; text-transform: uppercase; } .breadcrumb a { color: rgba(255,255,255,0.5); } .breadcrumb a:hover { color: var(--text); } /* ── RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --nav-h: 120px; } /* 80px × 1.5 */ .site-header { padding: 0 24px; height: var(--nav-h); } .nav-center, .nav-right { display: none; } .hamburger { display: flex; } .home-hero { padding: 32px 24px 24px; } .home-hero .heading-hammersmith.hero { font-size: clamp(2.5rem, 10vw, 5rem); letter-spacing: -1px; } .home-hero .site-tagline { font-size: 16px; } .photo-grid { grid-template-columns: repeat(3, 1fr); } .editorial-layout { grid-template-columns: 1fr; padding: 0 24px; } .editorial-left { padding-right: 0; margin-bottom: 32px; } .about-section { padding: 0 24px; } .article-layout { padding: 32px 24px; } .article-top { grid-template-columns: 1fr; } .article-body, .article-body-wide { font-size: 18px; } .contact-layout { grid-template-columns: 1fr; padding: 32px 24px; } .contact-left { padding-right: 0; margin-bottom: 40px; } .press-layout { padding: 32px 24px; } .press-entry.has-image { grid-template-columns: 1fr; } .press-entry-image { aspect-ratio: 16 / 9; } .load-more-wrap { padding: 32px 24px; } .btn-cta { width: 100%; font-size: 18px; } .footage-upload-block .upload-label { font-size: clamp(3rem, 12vw, 6rem); } .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } .site-footer { padding: 40px 24px; } .breadcrumb { padding: 12px 24px; } .archive-header { padding: calc(var(--nav-h) + 24px) 24px 0; } .archive-grid { grid-template-columns: repeat(2, 1fr); } .stories-strip { padding: 20px 24px 0; } .hn-archive { padding: 0 24px; } } @media (max-width: 640px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 1fr; } .heading-hammersmith { font-size: clamp(2rem, 10vw, 3rem); } .press-entry.has-image { grid-template-columns: 1fr; } .archive-grid { grid-template-columns: repeat(2, 1fr); } .story-ring { width: 52px; height: 52px; } }