/* ═══════════════════════════════════════════════ THE IPSUM LAB — Global Styles Font stack: Playfair Display (display) + DM Mono (body/UI) ═══════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap'); /* ── Reset ─────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } /* ── Design Tokens ─────────────────────────── */ :root { --bg: #F7F4EE; --bg-card: #FDFBF7; --ink: #1A1714; --ink-mid: #5C5650; --ink-soft: #9C9690; --border: rgba(26,23,20,0.12); --border-strong:rgba(26,23,20,0.25); --font-display: 'Playfair Display', Georgia, serif; --font-mono: 'DM Mono', 'Courier New', monospace; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --shadow-card: 0 2px 12px rgba(26,23,20,0.07), 0 1px 3px rgba(26,23,20,0.05); --shadow-lift: 0 8px 32px rgba(26,23,20,0.12), 0 2px 8px rgba(26,23,20,0.07); /* Grain overlay via SVG data URI */ --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); } /* ── Base ──────────────────────────────────── */ body { background-color: var(--bg); background-image: var(--grain); color: var(--ink); font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.7; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ── Site Header ───────────────────────────── */ .site-header { border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; background: var(--bg); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background: rgba(247,244,238,0.92); } .site-logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .site-logo span { font-style: italic; font-weight: 400; } .site-nav { display: flex; align-items: center; gap: 1.75rem; } .site-nav a { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); transition: color 0.2s; } .site-nav a:hover { color: var(--ink); } /* ── Site Footer ───────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 2.5rem 2rem; margin-top: 5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .site-footer p { font-size: 0.75rem; color: var(--ink-soft); } .footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer-nav a { font-size: 0.75rem; color: var(--ink-soft); transition: color 0.2s; } .footer-nav a:hover { color: var(--ink); } /* ── AD VISIBILITY TOGGLE ────────────────────── Currently set to 'none' — hides all ad slots sitewide. When AdSense is approved and code is in place: 1. Paste your AdSense script into each page 2. Replace each ad placeholder comment with your ad unit code 3. Delete the line below — all slots go live instantly. ─────────────────────────────────────────────── */ .ad-slot { display: none !important; } /* ── Ad Slots ──────────────────────────────── */ .ad-slot { display: flex; align-items: center; justify-content: center; background: rgba(26,23,20,0.03); border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--ink-soft); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; } .ad-slot-leaderboard { width: 100%; max-width: 728px; height: 90px; margin: 0 auto 2.5rem; } .ad-slot-rectangle { width: 300px; height: 250px; } .ad-slot-mobile { width: 100%; max-width: 320px; height: 50px; margin: 0 auto; display: none; } /* ── Utility ───────────────────────────────── */ .container { max-width: 1160px; margin: 0 auto; padding: 0 2rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ── Page load animation ───────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeUp 0.5s ease both; } /* ── Responsive nav ────────────────────────── */ @media (max-width: 640px) { .site-header { padding: 0.875rem 1.25rem; } .site-nav { gap: 1rem; } .site-nav .nav-hide-mobile { display: none; } .ad-slot-leaderboard { display: none; } .ad-slot-mobile { display: flex; } .container { padding: 0 1.25rem; } }