/* ========================================================= Wire & Signal — main stylesheet Design language: a modern wire-service dispatch board. Signature element: the perforated "tape" divider under the masthead and the breaking-news ticker, evoking telegraph tape. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap'); :root{ --ink: #14171F; --paper: #F5F3EE; --paper-dim: #E7E3D8; --signal: #D62839; --signal-dim: #B0202F; --steel: #2E4057; --gold: #B08A2E; --card-bg: #FFFFFF; --border: #D8D3C4; --text: #1B1E27; --text-dim: #5B5F6B; --link: #2E4057; --font-display: 'Newsreader', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', monospace; --radius: 3px; --shadow: 0 1px 3px rgba(20,23,31,0.08), 0 1px 2px rgba(20,23,31,0.06); color-scheme: light; /* Fixed light color for text/icons on bars that are dark in BOTH themes (utility bar, footer). Deliberately not redefined under [data-theme="dark"] below, since --paper itself flips to a dark value there. */ --on-dark: #F5F3EE; } html[data-theme="dark"]{ --ink: #EDEBE3; --paper: #14171F; --paper-dim: #1B2028; --card-bg: #1C202A; --border: #2C313C; --text: #EDEBE3; --text-dim: #A2A6B3; --link: #8FB3E3; --signal: #E8495B; --gold: #D9B65C; color-scheme: dark; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--paper); color: var(--text); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } a{ color: var(--link); text-decoration: none; } a:hover{ text-decoration: underline; } img{ max-width: 100%; display:block; } :focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; } .container{ max-width: 1180px; margin: 0 auto; padding: 0 20px; } /* ---------------- Utility bar (date + social) ---------------- */ .utility-bar{ background: var(--ink); color: var(--on-dark); } html[data-theme="dark"] .utility-bar{ background:#0B0D12; } .utility-bar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:8px; padding-bottom:8px; font-size: 12.5px; } .utility-date{ font-family: var(--font-mono); letter-spacing: .03em; opacity:.9; } .utility-right{ display:flex; align-items:center; gap:16px; } .social-icons{ display:flex; gap:12px; align-items:center; } .social-icons a{ color: var(--on-dark); opacity:.85; display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; } .social-icons a:hover{ opacity:1; text-decoration:none; color: var(--gold); } .social-icons svg{ width:16px; height:16px; fill:currentColor; } .social-icons a i{ font-size: 16px; } .theme-toggle{ border:1px solid rgba(245,243,238,0.3); background:transparent; color: var(--on-dark); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-family: var(--font-body); cursor:pointer; display:flex; align-items:center; gap:6px; } .theme-toggle:hover{ border-color: var(--gold); color: var(--gold); } /* Show exactly one icon at a time, driven purely by data-theme on — not by JS toggling classes on a shared element, which is fragile (e.g. bfcache restores, double-init) and can leave both icons visible at once, widening/heightening the button and shifting the page underneath it. */ .theme-toggle .icon-sun{ display:none; } html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; } html[data-theme="dark"] .theme-toggle .icon-sun{ display:inline-block; } /* ---------------- Masthead ---------------- */ .masthead{ background: var(--paper); border-bottom: 1px solid var(--border); } .masthead .container{ display:flex; align-items:center; justify-content:space-between; padding-top: 22px; padding-bottom: 14px; flex-wrap: wrap; gap: 10px; } .site-title{ font-family: var(--font-display); font-weight:700; font-size: 2.6rem; letter-spacing: -0.01em; margin:0; color: var(--text); } .site-title a{ color:inherit; } .site-title a:hover{ text-decoration:none; } .site-tagline{ font-size: .8rem; color: var(--text-dim); font-style: italic; font-family: var(--font-display); margin-top: 2px; } /* perforated tape divider — the signature element */ .tape-divider{ height: 10px; background-image: radial-gradient(circle, var(--paper) 2px, transparent 2.4px); background-size: 14px 10px; background-position: 0 center; background-color: var(--gold); } nav.site-nav{ background: var(--steel); } html[data-theme="dark"] nav.site-nav{ background:#232A38; } /* Scoped to the direct top-level list only — NOT ".nav-dropdown", which is also a